@vector-im/compound-web 8.1.0 → 8.1.2

package/dist/components/Menu/ContextMenu.cjs

@@ -7,6 +7,7 @@ const FloatingMenu = require("./FloatingMenu.cjs");
 const vaul = require("vaul");
 const classNames = require("classnames");
 const DrawerMenu_module = require("./DrawerMenu.module.css.cjs");
+const ContextMenu_module = require("./ContextMenu.module.css.cjs");
 const MenuContext = require("./MenuContext.cjs");
 const DrawerMenu = require("./DrawerMenu.cjs");
 const platform = require("../../utils/platform.cjs");
@@ -57,7 +58,7 @@ const ContextMenu = ({
     ] }) })
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactContextMenu.Root, { onOpenChange, children: [
     trigger,
-    /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { showTitle, title, children }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Content, { asChild: true, className: classNames(ContextMenu_module.default.content), children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { showTitle, title, children }) }) })
   ] });
 };
 exports.ContextMenu = ContextMenu;

package/dist/components/Menu/ContextMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.cjs","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["ContextMenuItem","useState","useCallback","platform","getPlatform","useMemo","jsx","MenuContext","Trigger","jsxs","Fragment","Root","Drawer","classnames","drawerStyles","DrawerMenu","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AAwDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,qCACGA,kCAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAAA,SAAS,KAAK;AACtC,QAAM,eAAeC,MAAA;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAMC,aAAWC,SAAAA,YAAY;AACvB,QAAA,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAA;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACHC,+BAAAC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJD,2BAAA;AAAA,IAACE,iBAAA;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEHC,2BAAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,IAACJ,2BAAAA,IAAAK,iBAAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3CL,2BAAAA,IAACM,YAAO,MAAP,EAAY,MAAY,cACvB,UAAAH,gCAACG,KAAAA,OAAO,QAAP,EACC,UAAA;AAAA,MAAAN,+BAACM,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAA,QAAa,EAAE,GAAG;AAAA,MACxDR,2BAAAA,IAACM,KAAO,OAAA,SAAP,EAAe,SAAO,MACrB,UAACN,2BAAAA,IAAAS,WAAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAECN,2BAAA,KAAAE,iBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACAL,2BAAA,IAAAU,iBAAA,QAAA,EACC,UAACV,2BAAA,IAAAW,iBAAA,SAAA,EAAQ,SAAO,MACd,UAACX,2BAAA,IAAAY,aAAA,cAAA,EAAa,WAAsB,OACjC,SACH,CAAA,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"ContextMenu.cjs","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport contextStyles from \"./ContextMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild className={classnames(contextStyles.content)}>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["ContextMenuItem","useState","useCallback","platform","getPlatform","useMemo","jsx","MenuContext","Trigger","jsxs","Fragment","Root","Drawer","classnames","drawerStyles","DrawerMenu","Portal","Content","contextStyles","FloatingMenu"],"mappings":";;;;;;;;;;;;;AAyDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,qCACGA,kCAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAAA,SAAS,KAAK;AACtC,QAAM,eAAeC,MAAA;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAMC,aAAWC,SAAAA,YAAY;AACvB,QAAA,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAA;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACHC,+BAAAC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJD,2BAAA;AAAA,IAACE,iBAAA;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEHC,2BAAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,IAACJ,2BAAAA,IAAAK,iBAAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3CL,2BAAAA,IAACM,YAAO,MAAP,EAAY,MAAY,cACvB,UAAAH,gCAACG,KAAAA,OAAO,QAAP,EACC,UAAA;AAAA,MAAAN,+BAACM,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAA,QAAa,EAAE,GAAG;AAAA,MACxDR,2BAAAA,IAACM,KAAO,OAAA,SAAP,EAAe,SAAO,MACrB,UAACN,2BAAAA,IAAAS,WAAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAECN,2BAAA,KAAAE,iBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,mCACAK,iBAAAA,QACC,EAAA,UAAAV,2BAAA,IAACW,iBAAQ,SAAA,EAAA,SAAO,MAAC,WAAWJ,WAAWK,mBAAc,QAAA,OAAO,GAC1D,UAACZ,2BAAAA,IAAAa,aAAA,cAAA,EAAa,WAAsB,OACjC,UACH,GACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/components/Menu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ContextMenu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAgB7E,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,wBAAwB,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,KAAK,CAwEjC,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ContextMenu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAiB7E,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,wBAAwB,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,KAAK,CAwEjC,CAAC"}

package/dist/components/Menu/ContextMenu.js

@@ -5,6 +5,7 @@ import { FloatingMenu } from "./FloatingMenu.js";
 import { Drawer } from "vaul";
 import classNames from "classnames";
 import drawerMenu from "./DrawerMenu.module.css.js";
+import contextStyles from "./ContextMenu.module.css.js";
 import { MenuContext } from "./MenuContext.js";
 import { DrawerMenu } from "./DrawerMenu.js";
 import { getPlatform } from "../../utils/platform.js";
@@ -55,7 +56,7 @@ const ContextMenu = ({
     ] }) })
   ] }) : /* @__PURE__ */ jsxs(Root, { onOpenChange, children: [
     trigger,
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, children: /* @__PURE__ */ jsx(FloatingMenu, { showTitle, title, children }) }) })
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, className: classNames(contextStyles.content), children: /* @__PURE__ */ jsx(FloatingMenu, { showTitle, title, children }) }) })
   ] });
 };
 export {

package/dist/components/Menu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames","drawerStyles"],"mappings":";;;;;;;;;;AAwDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,0BACG,iBAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,eAAe;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAM,WAAW,YAAY;AACvB,QAAA,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACH,oBAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEH,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3C,oBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAWC,WAAa,EAAE,GAAG;AAAA,MACxD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAC,oBAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAEC,qBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACA,oBAAA,QAAA,EACC,UAAC,oBAAA,SAAA,EAAQ,SAAO,MACd,UAAC,oBAAA,cAAA,EAAa,WAAsB,OACjC,SACH,CAAA,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport contextStyles from \"./ContextMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild className={classnames(contextStyles.content)}>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames","drawerStyles"],"mappings":";;;;;;;;;;;AAyDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,0BACG,iBAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,eAAe;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAM,WAAW,YAAY;AACvB,QAAA,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACH,oBAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEH,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3C,oBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAWC,WAAa,EAAE,GAAG;AAAA,MACxD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAC,oBAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAEC,qBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,wBACA,QACC,EAAA,UAAA,oBAAC,SAAQ,EAAA,SAAO,MAAC,WAAWD,WAAW,cAAc,OAAO,GAC1D,UAAC,oBAAA,cAAA,EAAa,WAAsB,OACjC,UACH,GACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Menu/ContextMenu.module.css.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const content = "_content_vnv5k_8";
+const contextStyles = {
+  content
+};
+exports.content = content;
+exports.default = contextStyles;
+//# sourceMappingURL=ContextMenu.module.css.cjs.map

package/dist/components/Menu/ContextMenu.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Menu/ContextMenu.module.css.js

@@ -0,0 +1,9 @@
+const content = "_content_vnv5k_8";
+const contextStyles = {
+  content
+};
+export {
+  content,
+  contextStyles as default
+};
+//# sourceMappingURL=ContextMenu.module.css.js.map

package/dist/components/Menu/ContextMenu.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Menu/Menu.cjs

@@ -42,19 +42,7 @@ const Menu = ({
     ] })
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactDropdownMenu.Root, { open, onOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      reactDropdownMenu.Content,
-      {
-        asChild: true,
-        side,
-        align,
-        sideOffset: 8,
-        onCloseAutoFocus: (event) => {
-          event.preventDefault();
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { title, showTitle, children })
-      }
-    ) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Content, { asChild: true, side, align, sideOffset: 8, children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { title, showTitle, children }) }) })
   ] });
 };
 exports.Menu = Menu;

package/dist/components/Menu/Menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.cjs","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content\n          asChild\n          side={side}\n          align={align}\n          sideOffset={8}\n          onCloseAutoFocus={(event) => {\n            // https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content => onCloseAutoFocus\n            // Prevent the default behavior of focusing the trigger when the menu closes\n            event.preventDefault();\n          }}\n        >\n          <FloatingMenu title={title} showTitle={showTitle}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["DropdownMenuItem","platform","getPlatform","useMemo","jsx","MenuContext","jsxs","Drawer","classnames","drawerMenu","DrawerMenu","Root","Trigger","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AAoEA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,qCACGA,oCAAiB,EAAA,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAMC,aAAWC,SAAAA,YAAY;AACvB,QAAA,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAA;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACHC,+BAAAC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,SAAO,SACJC,2BAAAA,KAAAC,KAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAAH,2BAAA,IAACG,KAAO,OAAA,SAAP,EAAe,SAAO,MAAE,UAAQ,SAAA;AAAA,IACjCD,2BAAAA,KAACC,KAAO,OAAA,QAAP,EACC,UAAA;AAAA,MAAAH,+BAACG,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAA,QAAW,EAAE,GAAG;AAAA,MACtDL,2BAAAA,IAACG,KAAO,OAAA,SAAP,EAAe,SAAO,MACrB,UAACH,2BAAAA,IAAAM,WAAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EACF,CAAA,IAEAJ,2BAAAA,KAACK,kBAAAA,MAAK,EAAA,MAAY,cAChB,UAAA;AAAA,IAACP,2BAAA,IAAAQ,kBAAA,SAAA,EAAQ,SAAO,MAAE,UAAQ,SAAA;AAAA,mCACzBC,kBAAAA,QACC,EAAA,UAAAT,2BAAA;AAAA,MAACU,kBAAA;AAAA,MAAA;AAAA,QACC,SAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,kBAAkB,CAAC,UAAU;AAG3B,gBAAM,eAAe;AAAA,QACvB;AAAA,QAEA,UAACV,2BAAA,IAAAW,aAAA,cAAA,EAAa,OAAc,WACzB,SACH,CAAA;AAAA,MAAA;AAAA,IAAA,EAEJ,CAAA;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"Menu.cjs","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content asChild side={side} align={align} sideOffset={8}>\n          <FloatingMenu title={title} showTitle={showTitle}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["DropdownMenuItem","platform","getPlatform","useMemo","jsx","MenuContext","jsxs","Drawer","classnames","drawerMenu","DrawerMenu","Root","Trigger","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AAoEA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,qCACGA,oCAAiB,EAAA,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAMC,aAAWC,SAAAA,YAAY;AACvB,QAAA,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAA;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACHC,+BAAAC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,SAAO,SACJC,2BAAAA,KAAAC,KAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAAH,2BAAA,IAACG,KAAO,OAAA,SAAP,EAAe,SAAO,MAAE,UAAQ,SAAA;AAAA,IACjCD,2BAAAA,KAACC,KAAO,OAAA,QAAP,EACC,UAAA;AAAA,MAAAH,+BAACG,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAA,QAAW,EAAE,GAAG;AAAA,MACtDL,2BAAAA,IAACG,KAAO,OAAA,SAAP,EAAe,SAAO,MACrB,UAACH,2BAAAA,IAAAM,WAAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EACF,CAAA,IAEAJ,2BAAAA,KAACK,kBAAAA,MAAK,EAAA,MAAY,cAChB,UAAA;AAAA,IAACP,2BAAA,IAAAQ,kBAAA,SAAA,EAAQ,SAAO,MAAE,UAAQ,SAAA;AAAA,mCACzBC,kBAAAA,QACC,EAAA,UAAAT,2BAAA,IAACU,kBAAQ,SAAA,EAAA,SAAO,MAAC,MAAY,OAAc,YAAY,GACrD,yCAACC,2BAAa,EAAA,OAAc,WACzB,UACH,GACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/components/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAgBtD,UAAU,KAAK;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAWD;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CAyD1B,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAgBtD,UAAU,KAAK;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAWD;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CA+C1B,CAAC"}

package/dist/components/Menu/Menu.js

@@ -40,19 +40,7 @@ const Menu = ({
     ] })
   ] }) : /* @__PURE__ */ jsxs(Root, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx(Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-      Content,
-      {
-        asChild: true,
-        side,
-        align,
-        sideOffset: 8,
-        onCloseAutoFocus: (event) => {
-          event.preventDefault();
-        },
-        children: /* @__PURE__ */ jsx(FloatingMenu, { title, showTitle, children })
-      }
-    ) })
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, side, align, sideOffset: 8, children: /* @__PURE__ */ jsx(FloatingMenu, { title, showTitle, children }) }) })
   ] });
 };
 export {

package/dist/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content\n          asChild\n          side={side}\n          align={align}\n          sideOffset={8}\n          onCloseAutoFocus={(event) => {\n            // https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content => onCloseAutoFocus\n            // Prevent the default behavior of focusing the trigger when the menu closes\n            event.preventDefault();\n          }}\n        >\n          <FloatingMenu title={title} showTitle={showTitle}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;;;AAoEA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,0BACG,kBAAiB,EAAA,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAM,WAAW,YAAY;AACvB,QAAA,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACH,oBAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,SAAO,SACJ,qBAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAA,oBAAC,OAAO,SAAP,EAAe,SAAO,MAAE,UAAQ,SAAA;AAAA,IACjC,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAW,WAAW,EAAE,GAAG;AAAA,MACtD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAC,oBAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EACF,CAAA,IAEA,qBAAC,MAAK,EAAA,MAAY,cAChB,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAQ,SAAO,MAAE,UAAQ,SAAA;AAAA,wBACzB,QACC,EAAA,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,kBAAkB,CAAC,UAAU;AAG3B,gBAAM,eAAe;AAAA,QACvB;AAAA,QAEA,UAAC,oBAAA,cAAA,EAAa,OAAc,WACzB,SACH,CAAA;AAAA,MAAA;AAAA,IAAA,EAEJ,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content asChild side={side} align={align} sideOffset={8}>\n          <FloatingMenu title={title} showTitle={showTitle}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;;;AAoEA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,0BACG,kBAAiB,EAAA,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAM,WAAW,YAAY;AACvB,QAAA,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACH,oBAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,SAAO,SACJ,qBAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAA,oBAAC,OAAO,SAAP,EAAe,SAAO,MAAE,UAAQ,SAAA;AAAA,IACjC,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAW,WAAW,EAAE,GAAG;AAAA,MACtD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAC,oBAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EACF,CAAA,IAEA,qBAAC,MAAK,EAAA,MAAY,cAChB,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAQ,SAAO,MAAE,UAAQ,SAAA;AAAA,wBACzB,QACC,EAAA,UAAA,oBAAC,SAAQ,EAAA,SAAO,MAAC,MAAY,OAAc,YAAY,GACrD,8BAAC,cAAa,EAAA,OAAc,WACzB,UACH,GACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/style.css.css

@@ -779,6 +779,16 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-icon-secondary);
   border-radius: var(--cpd-radius-pill-effect);
 }
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+._content_vnv5k_8[data-state="closed"] {
+  animation: none;
+}
 /*
 Copyright 2023 New Vector Ltd.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.1.0",
+  "version": "8.1.2",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/Menu/ContextMenu.module.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.content[data-state="closed"] {
+  animation: none;
+}

package/src/components/Menu/ContextMenu.tsx

@@ -17,6 +17,7 @@ import { FloatingMenu } from "./FloatingMenu";
 import { Drawer } from "vaul";
 import classnames from "classnames";
 import drawerStyles from "./DrawerMenu.module.css";
+import contextStyles from "./ContextMenu.module.css";
 import { MenuContext, MenuData, MenuItemWrapperProps } from "./MenuContext";
 import { DrawerMenu } from "./DrawerMenu";
 import { getPlatform } from "../../utils/platform";
@@ -130,7 +131,7 @@ export const ContextMenu: FC<Props> = ({
     <Root onOpenChange={onOpenChange}>
       {trigger}
       <Portal>
-        <Content asChild>
+        <Content asChild className={classnames(contextStyles.content)}>
           <FloatingMenu showTitle={showTitle} title={title}>
             {children}
           </FloatingMenu>

package/src/components/Menu/Menu.tsx

@@ -117,17 +117,7 @@ export const Menu: FC<Props> = ({
     <Root open={open} onOpenChange={onOpenChange}>
       <Trigger asChild>{trigger}</Trigger>
       <Portal>
-        <Content
-          asChild
-          side={side}
-          align={align}
-          sideOffset={8}
-          onCloseAutoFocus={(event) => {
-            // https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content => onCloseAutoFocus
-            // Prevent the default behavior of focusing the trigger when the menu closes
-            event.preventDefault();
-          }}
-        >
+        <Content asChild side={side} align={align} sideOffset={8}>
           <FloatingMenu title={title} showTitle={showTitle}>
             {children}
           </FloatingMenu>