feat(core): creates props for a component that opens the popup while double click

README.md

@@ -224,7 +224,8 @@ connect components easily:
 - `bindToggle`: creates props for a component that toggles the popup when clicked.
 - `bindHover`: creates props for a component that opens the popup while hovered.
   **NOTE**: See [this guidance](#using-popover-and-menu-with-bindhover) if you are using `bindHover` with `Popover` or `Menu`.
-- `bindFocus`: creates props for a component that opens the popup while hovered.
+- `bindFocus`: creates props for a component that opens the popup while focus.
+- `bindDoubleClick`: creates props for a component that opens the popup while double click.
 
 To use one of these functions, you should call it with the object
 returned by `usePopupState` and spread the return value into the desired

demo/Root.js

@@ -22,6 +22,10 @@ import FocusPopover from './examples/FocusPopover'
 import FocusPopoverCode from '!!raw-loader!./examples/FocusPopover'
 import FocusPopoverHooks from './examples/FocusPopover.hooks'
 import FocusPopoverHooksCode from '!!raw-loader!./examples/FocusPopover.hooks'
+import DoubleClickPopover from './examples/DoubleClickPopover'
+import DoubleClickPopoverCode from '!!raw-loader!./examples/DoubleClickPopover'
+import DoubleClickPopoverHooks from './examples/DoubleClickPopover.hooks'
+import DoubleClickPopoverHooksCode from '!!raw-loader!./examples/DoubleClickPopover.hooks'
 import HoverMenu from './examples/HoverMenu'
 import HoverMenuCode from '!!raw-loader!./examples/HoverMenu'
 import HoverMenuHooks from './examples/HoverMenu.hooks'
@@ -106,6 +110,14 @@ const Root = ({ classes }) => (
           hooksExample={<FocusPopoverHooks />}
           hooksCode={FocusPopoverHooksCode}
         />
+        <Demo
+          title="DoubleClick Poper"
+          headerId="doubleClick-poper"
+          example={<DoubleClickPopover />}
+          code={DoubleClickPopoverCode}
+          hooksExample={<DoubleClickPopoverHooks />}
+          hooksCode={DoubleClickPopoverHooksCode}
+        />
         <Demo
           title="Hover Menu"
           headerId="hover-menu"

demo/examples/DoubleClickPopover.hooks.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import Typography from '@mui/material/Typography'
+import Popover from '@mui/material/Popover'
+import Button from '@mui/material/Button'
+import {
+  usePopupState,
+  bindDoubleClick,
+  bindPopover,
+} from 'material-ui-popup-state/hooks'
+
+const DoubleClickPoperPopupState = ({ classes }) => {
+  const popupState = usePopupState({
+    variant: 'popover',
+    popupId: 'demoPopover',
+  })
+
+  return (
+    <div>
+      <Button {...bindDoubleClick(popupState)} variant="text">
+        Double click to open poper
+      </Button>
+      <Popover
+        {...bindPopover(popupState)}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+      >
+        <Typography style={{ margin: 10 }}>
+          The content of the Popover.
+        </Typography>
+      </Popover>
+    </div>
+  )
+}
+
+export default DoubleClickPoperPopupState

demo/examples/DoubleClickPopover.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import Typography from '@mui/material/Typography'
+import Popover from '@mui/material/Popover'
+import Button from '@mui/material/Button'
+import PopupState, {
+  bindDoubleClick,
+  bindPopper,
+} from 'material-ui-popup-state'
+import { ClickAwayListener } from '@mui/material'
+
+const DoubleClickPoperPopupState = ({ classes }) => (
+  <PopupState variant="popover" popupId="demoPopover">
+    {(popupState) => (
+      <ClickAwayListener onClickAway={popupState.close}>
+        <Button {...bindDoubleClick(popupState)} variant="text">
+          Double click to open poper
+        </Button>
+        <Popover
+          {...bindPopper(popupState)}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+          }}
+        >
+          <Typography style={{ margin: 10 }}>
+            The content of the Popover.
+          </Typography>
+        </Popover>
+      </ClickAwayListener>
+    )}
+  </PopupState>
+)
+
+export default DoubleClickPoperPopupState

src/core.d.ts

@@ -122,6 +122,19 @@ export function bindFocus(popupState: PopupState): ControlAriaProps & {
   onBlur: (event: FocusEvent<any>) => void
 }
 
+/**
+ * Creates props for a component that opens the popup while double click.
+ *
+ * @param {object} popupState the argument passed to the child function of
+ * `PopupState`
+ */
+export function bindDoubleClick(popupState: PopupState): {
+  'aria-controls'?: string
+  'aria-describedby'?: string
+  'aria-haspopup': true | undefined
+  onDoubleClick: (event: SyntheticEvent<any>) => any
+}
+
 /**
  * Creates props for a `Popover` component.
  *

src/core.js

@@ -373,6 +373,33 @@ export function bindFocus(popupState: PopupState): {|
   }
 }
 
+/**
+ * Creates props for a component that opens the popup while double click.
+ *
+ * @param {object} popupState the argument passed to the child function of
+ * `PopupState`
+ */
+export function bindDoubleClick({
+  isOpen,
+  open,
+  popupId,
+  variant,
+}: PopupState): {|
+  'aria-controls'?: ?string,
+  'aria-describedby'?: ?string,
+  'aria-haspopup': ?true,
+  onDoubleClick: (event: SyntheticEvent<any>) => any,
+|} {
+  return {
+    // $FlowFixMe
+    [variant === 'popover' ? 'aria-controls' : 'aria-describedby']: isOpen
+      ? popupId
+      : null,
+    'aria-haspopup': variant === 'popover' ? true : undefined,
+    onDoubleClick: open,
+  }
+}
+
 /**
  * Creates props for a `Popover` component.
  *

src/hooks.d.ts

@@ -5,6 +5,7 @@ import {
   bindToggle,
   bindHover,
   bindFocus,
+  bindDoubleClick,
   bindMenu,
   bindPopover,
   bindPopper,
@@ -20,6 +21,7 @@ export {
   bindToggle,
   bindHover,
   bindFocus,
+  bindDoubleClick,
   bindMenu,
   bindPopover,
   bindPopper,

src/hooks.js

@@ -18,6 +18,7 @@ import {
   bindToggle,
   bindHover,
   bindFocus,
+  bindDoubleClick,
   bindMenu,
   bindPopover,
   bindPopper,
@@ -33,6 +34,7 @@ export {
   bindToggle,
   bindHover,
   bindFocus,
+  bindDoubleClick,
   bindMenu,
   bindPopover,
   bindPopper,

src/index.js

@@ -16,6 +16,7 @@ import {
   bindMenu,
   bindPopover,
   bindPopper,
+  bindDoubleClick,
   bindDialog,
   type Variant,
   type CoreState,
@@ -32,6 +33,7 @@ export {
   bindMenu,
   bindPopover,
   bindPopper,
+  bindDoubleClick,
   bindDialog,
 }
 export type { Variant, InjectedProps }