chore(docs): Added Sticky Hover Mode Example

Author: mlaursen

packages/documentation/src/components/Demos/Utils/StickyHoverMode.md

@@ -0,0 +1,4 @@
+The `useHoverMode` hook can also be updated to implement a "sticky" spec that
+allows the user to click the element to toggle the visibility state. Once the
+element has been clicked, the `onMouseEnter` and `onMouseLeave` behavior will be
+disabled until the visibility is set to `false` once more.

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

@@ -0,0 +1,40 @@
+import React, { ReactElement, useRef } from "react";
+import { Button } from "@react-md/button";
+import { DialogContent, FixedDialog } from "@react-md/dialog";
+import { BELOW_CENTER_ANCHOR, useHoverMode } from "@react-md/utils";
+
+export default function StickyHoverMode(): ReactElement {
+  const {
+    stuck,
+    active,
+    handlers,
+    stickyHandlers,
+    visible,
+    setVisible,
+  } = useHoverMode({
+    sticky: true,
+  });
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <>
+      <Button {...stickyHandlers} ref={buttonRef}>
+        Button
+      </Button>
+      <FixedDialog
+        aria-label="Additional Information"
+        id="some-dialog-id"
+        visible={visible}
+        onRequestClose={() => setVisible(false)}
+        {...handlers}
+        anchor={BELOW_CENTER_ANCHOR}
+        fixedTo={buttonRef}
+        options={{ preventOverlap: true }}
+        overlay={!stuck && active ? false : undefined}
+        disableScrollLock={!active}
+      >
+        <DialogContent>Some amazing content!</DialogContent>
+      </FixedDialog>
+    </>
+  );
+}

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

@@ -26,6 +26,9 @@ import gridListSize from "./GridListSize.md";
 import HoverMode from "./HoverMode";
 import hoverMode from "./HoverMode.md";
 
+import StickyHoverMode from "./StickyHoverMode";
+import stickyHoverMode from "./StickyHoverMode.md";
+
 const demos = [
   {
     name: "App Size Listener Example",
@@ -67,6 +70,11 @@ const demos = [
     description: hoverMode,
     children: <HoverMode />,
   },
+  {
+    name: "Sticky Hover Mode",
+    description: stickyHoverMode,
+    children: <StickyHoverMode />,
+  },
 ];
 
 export default function Utils(): ReactElement {

packages/utils/src/hover/useHoverMode.ts

@@ -195,7 +195,7 @@ export interface HoverModeReturnValue<E extends HTMLElement>
  *       onRequestClose={() => setVisible(false)}
  *       fixedTo={buttonRef}
  *       overlay={!stuck && active ? false : undefined}
- *       disableFocusOnMount={active}
+ *       disableScrollLock={active}
  *     >
  *       <YourDialogContent />
  *    </FixedDialog>