diff --git a/README.md b/README.md
index eaf6df1..460d4e4 100644
--- a/README.md
+++ b/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
diff --git a/demo/Root.js b/demo/Root.js
index 94c6cb4..46dd3ba 100644
--- a/demo/Root.js
+++ b/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={}
hooksCode={FocusPopoverHooksCode}
/>
+ }
+ code={DoubleClickPopoverCode}
+ hooksExample={}
+ hooksCode={DoubleClickPopoverHooksCode}
+ />
{
+ const popupState = usePopupState({
+ variant: 'popover',
+ popupId: 'demoPopover',
+ })
+
+ return (
+
+
+
+
+ The content of the Popover.
+
+
+
+ )
+}
+
+export default DoubleClickPoperPopupState
diff --git a/demo/examples/DoubleClickPopover.js b/demo/examples/DoubleClickPopover.js
new file mode 100644
index 0000000..4f8b6a6
--- /dev/null
+++ b/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) => (
+
+
+
+
+ The content of the Popover.
+
+
+
+ )}
+
+)
+
+export default DoubleClickPoperPopupState
diff --git a/src/core.d.ts b/src/core.d.ts
index 80cddab..796d4bf 100644
--- a/src/core.d.ts
+++ b/src/core.d.ts
@@ -122,6 +122,19 @@ export function bindFocus(popupState: PopupState): ControlAriaProps & {
onBlur: (event: FocusEvent) => 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
+}
+
/**
* Creates props for a `Popover` component.
*
diff --git a/src/core.js b/src/core.js
index 20aeda2..d3d5b0f 100644
--- a/src/core.js
+++ b/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,
+|} {
+ 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.
*
diff --git a/src/hooks.d.ts b/src/hooks.d.ts
index 80199f7..b2a0815 100644
--- a/src/hooks.d.ts
+++ b/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,
diff --git a/src/hooks.js b/src/hooks.js
index f3d98a6..2e04796 100644
--- a/src/hooks.js
+++ b/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,
diff --git a/src/index.js b/src/index.js
index 1356ca9..d2b571a 100644
--- a/src/index.js
+++ b/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 }