fix(HoverPopper): close when mouse leaves popper

fix #54

.gitignore

@@ -1,7 +1,6 @@
 /coverage
 /.nyc_output
 node_modules
-/demo/bundle.js
 /lib
 /es
 .eslintcache
@@ -11,5 +10,7 @@ node_modules
 !/src/**/*.js
 !/src/**/*.ts
 !/test/**/*.js
+!/demo/**/*.js
 !/.babelrc.js
 !/webpack.config.js
+/demo/bundle.js

demo/Root.js

@@ -16,6 +16,8 @@ import HoverPopover from './examples/HoverPopover'
 import HoverPopoverCode from '!!raw-loader!./examples/HoverPopover'
 import HoverPopoverHooks from './examples/HoverPopover.hooks'
 import HoverPopoverHooksCode from '!!raw-loader!./examples/HoverPopover.hooks'
+import HoverPopperHooks from './examples/HoverPopper.hooks'
+import HoverPopperHooksCode from '!!raw-loader!./examples/HoverPopper.hooks'
 import FocusPopover from './examples/FocusPopover'
 import FocusPopoverCode from '!!raw-loader!./examples/FocusPopover'
 import FocusPopoverHooks from './examples/FocusPopover.hooks'
@@ -24,8 +26,6 @@ import HoverMenu from './examples/HoverMenu'
 import HoverMenuCode from '!!raw-loader!./examples/HoverMenu'
 import HoverMenuHooks from './examples/HoverMenu.hooks'
 import HoverMenuHooksCode from '!!raw-loader!./examples/HoverMenu.hooks'
-import HoverMenusHooks from './examples/HoverMenus.hooks'
-import HoverMenusHooksCode from '!!raw-loader!./examples/HoverMenus.hooks'
 import CustomAnchorHooks from './examples/CustomAnchor.hooks'
 import CustomAnchorHooksCode from '!!raw-loader!./examples/CustomAnchor.hooks'
 import CascadingHoverMenus from './examples/CascadingHoverMenus'
@@ -78,6 +78,12 @@ const Root = ({ classes }) => (
       hooksExample={<HoverPopoverHooks />}
       hooksCode={HoverPopoverHooksCode}
     />
+    <Demo
+      title="Hover Popper"
+      headerId="hover-popper"
+      hooksExample={<HoverPopperHooks />}
+      hooksCode={HoverPopperHooksCode}
+    />
     <Demo
       title="Focus Popover"
       headerId="focus-popover"
@@ -94,12 +100,6 @@ const Root = ({ classes }) => (
       hooksExample={<HoverMenuHooks />}
       hooksCode={HoverMenuHooksCode}
     />
-    <Demo
-      title="Hover Menus"
-      headerId="hover-menus"
-      hooksExample={<HoverMenusHooks />}
-      hooksCode={HoverMenusHooksCode}
-    />
     <Demo
       title="Custom Anchor"
       headerId="custom-anchor"

demo/examples/HoverPopper.hooks.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import Typography from '@material-ui/core/Typography'
+import Popper from '@material-ui/core/Popper'
+import Button from '@material-ui/core/Button'
+import Paper from '@material-ui/core/Paper'
+import {
+  usePopupState,
+  bindHover,
+  bindPopper,
+} from 'material-ui-popup-state/hooks'
+
+const HoverPopperPopupState = ({ classes }) => {
+  const popupState = usePopupState({
+    variant: 'popper',
+    popupId: 'demoPopper',
+  })
+  return (
+    <div>
+      <Button variant="contained" {...bindHover(popupState)}>
+        Hover to open Popper
+      </Button>
+      <Popper {...bindPopper(popupState)} transition>
+        <Paper>
+          <Typography style={{ margin: 10 }}>
+            The content of the Popper.
+          </Typography>
+        </Paper>
+      </Popper>
+    </div>
+  )
+}
+
+export default HoverPopperPopupState

src/core.d.ts

@@ -174,4 +174,5 @@ export function bindPopper(
   id: string | undefined
   anchorEl: HTMLElement | undefined
   open: boolean
+  onMouseLeave: (event: SyntheticEvent<any>) => void
 }

src/core.js

@@ -419,15 +419,18 @@ export function bindPopper({
   isOpen,
   anchorEl,
   popupId,
+  onMouseLeave,
 }: PopupState): {
   id: ?string,
   anchorEl: ?HTMLElement,
   open: boolean,
+  onMouseLeave: (event: SyntheticEvent<any>) => void,
 } {
   return {
     id: popupId,
     anchorEl,
     open: isOpen,
+    onMouseLeave,
   }
 }