From 4c5e9e93a92b46a62e571268ea578f46203dfcf6 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Wed, 6 Dec 2023 18:53:17 +1100
Subject: [PATCH] Add a storybook to simulate opening action menu using a
 shortcut

---
 .../ActionMenu.examples.stories.tsx           | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx
index 4b8a40e2eb5..d19f490e14d 100644
--- a/src/ActionMenu/ActionMenu.examples.stories.tsx
+++ b/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -156,6 +156,65 @@ export const ControlledMenu = () => {
   )
 }
 
+export const ShortcutMenu = () => {
+  React.useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.shiftKey && (event.key === 'c' || event.key === 'C')) {
+        setOpen(true)
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  const [open, setOpen] = React.useState(false)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  return (
+    <>
+      <h1>Shortcut Menu</h1>
+      <h2>External Open State: {open ? 'Open' : 'Closed'}</h2>
+      <h2>Press Shift+C to open the menu</h2>
+      <br />
+
+      {/**
+       * Even though the state is controlled externally,
+       * we can pass an Anchor for the menu to "anchor to"
+       */}
+      <ActionMenu open={open} onOpenChange={setOpen}>
+        <ActionMenu.Button sx={{visibility: 'hidden'}}>Anchor</ActionMenu.Button>
+        <ActionMenu.Overlay
+          ignoreClickRefs={[
+            // Because the component is controlled from outside, but the anchor is still internal,
+            // clicking the external button should not be counted as "clicking outside"
+            triggerRef,
+          ]}
+        >
+          <ActionList>
+            <ActionList.Item>
+              Copy link
+              <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+            </ActionList.Item>
+            <ActionList.Item>
+              Quote reply
+              <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+            </ActionList.Item>
+            <ActionList.Item>
+              Edit comment
+              <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+            </ActionList.Item>
+            <ActionList.Divider />
+            <ActionList.Item variant="danger">
+              Delete file
+              <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+            </ActionList.Item>
+          </ActionList>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+    </>
+  )
+}
+
 export const CustomAnchor = () => (
   <ActionMenu>
     <ActionMenu.Anchor>