Skip to content

Commit 1a94a31

Browse files
committed
chore(docs): Added Sticky Hover Mode Example
1 parent 1e0e783 commit 1a94a31

File tree

4 files changed

+53
-1
lines changed

4 files changed

+53
-1
lines changed
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
The `useHoverMode` hook can also be updated to implement a "sticky" spec that
2+
allows the user to click the element to toggle the visibility state. Once the
3+
element has been clicked, the `onMouseEnter` and `onMouseLeave` behavior will be
4+
disabled until the visibility is set to `false` once more.
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { ReactElement, useRef } from "react";
2+
import { Button } from "@react-md/button";
3+
import { DialogContent, FixedDialog } from "@react-md/dialog";
4+
import { BELOW_CENTER_ANCHOR, useHoverMode } from "@react-md/utils";
5+
6+
export default function StickyHoverMode(): ReactElement {
7+
const {
8+
stuck,
9+
active,
10+
handlers,
11+
stickyHandlers,
12+
visible,
13+
setVisible,
14+
} = useHoverMode({
15+
sticky: true,
16+
});
17+
const buttonRef = useRef<HTMLButtonElement>(null);
18+
19+
return (
20+
<>
21+
<Button {...stickyHandlers} ref={buttonRef}>
22+
Button
23+
</Button>
24+
<FixedDialog
25+
aria-label="Additional Information"
26+
id="some-dialog-id"
27+
visible={visible}
28+
onRequestClose={() => setVisible(false)}
29+
{...handlers}
30+
anchor={BELOW_CENTER_ANCHOR}
31+
fixedTo={buttonRef}
32+
options={{ preventOverlap: true }}
33+
overlay={!stuck && active ? false : undefined}
34+
disableScrollLock={!active}
35+
>
36+
<DialogContent>Some amazing content!</DialogContent>
37+
</FixedDialog>
38+
</>
39+
);
40+
}

packages/documentation/src/components/Demos/Utils/index.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ import gridListSize from "./GridListSize.md";
2626
import HoverMode from "./HoverMode";
2727
import hoverMode from "./HoverMode.md";
2828

29+
import StickyHoverMode from "./StickyHoverMode";
30+
import stickyHoverMode from "./StickyHoverMode.md";
31+
2932
const demos = [
3033
{
3134
name: "App Size Listener Example",
@@ -67,6 +70,11 @@ const demos = [
6770
description: hoverMode,
6871
children: <HoverMode />,
6972
},
73+
{
74+
name: "Sticky Hover Mode",
75+
description: stickyHoverMode,
76+
children: <StickyHoverMode />,
77+
},
7078
];
7179

7280
export default function Utils(): ReactElement {

packages/utils/src/hover/useHoverMode.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ export interface HoverModeReturnValue<E extends HTMLElement>
195195
* onRequestClose={() => setVisible(false)}
196196
* fixedTo={buttonRef}
197197
* overlay={!stuck && active ? false : undefined}
198-
* disableFocusOnMount={active}
198+
* disableScrollLock={active}
199199
* >
200200
* <YourDialogContent />
201201
* </FixedDialog>

0 commit comments

Comments
 (0)