@vector-im/compound-web 8.4.0 → 9.0.0

package/dist/components/Menu/CheckboxMenuItem.cjs

@@ -1,40 +1,38 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const MenuItem = require("./MenuItem.cjs");
-const Checkbox = require("../Form/Controls/Checkbox/Checkbox.cjs");
-const CheckboxMenuItem = React.forwardRef(
-  function CheckboxMenuItem2({ className, label, onSelect, checked, disabled }, ref) {
-    const toggleId = React.useId();
-    const onChange = React.useCallback(() => {
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      MenuItem.MenuItem,
-      {
-        as: "button",
-        role: "menuitemcheckbox",
-        "aria-checked": checked,
-        className,
-        label,
-        hideChevron: true,
-        onSelect,
-        disabled,
-        Icon: /* @__PURE__ */ jsxRuntime.jsx(
-          Checkbox.CheckboxInput,
-          {
-            id: toggleId,
-            ref,
-            "aria-hidden": true,
-            tabIndex: -1,
-            checked,
-            disabled,
-            onChange
-          }
-        )
-      }
-    );
-  }
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_MenuItem = require("./MenuItem.cjs");
+const require_Checkbox = require("../Form/Controls/Checkbox/Checkbox.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Menu/CheckboxMenuItem.tsx
+/**
+* A menu item with a checkbox control.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var CheckboxMenuItem = (0, react.forwardRef)(function CheckboxMenuItem({ className, label, onSelect, checked, disabled }, ref) {
+	const toggleId = (0, react.useId)();
+	const onChange = (0, react.useCallback)(() => {}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+		as: "button",
+		role: "menuitemcheckbox",
+		"aria-checked": checked,
+		className,
+		label,
+		hideChevron: true,
+		onSelect,
+		disabled,
+		Icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.CheckboxInput, {
+			id: toggleId,
+			ref,
+			"aria-hidden": true,
+			tabIndex: -1,
+			checked,
+			disabled,
+			onChange
+		})
+	});
+});
+//#endregion
 exports.CheckboxMenuItem = CheckboxMenuItem;
-//# sourceMappingURL=CheckboxMenuItem.cjs.map
+
+//# sourceMappingURL=CheckboxMenuItem.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxMenuItem.cjs","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a <button> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            tabIndex={-1}\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["forwardRef","CheckboxMenuItem","useId","useCallback","jsx","MenuItem","CheckboxInput"],"mappings":";;;;;;AA8BO,MAAM,mBAAmBA,MAAAA;AAAAA,EAC9B,SAASC,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,MACED,2BAAAA;AAAAA,UAACE,SAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;;"}
+{"version":3,"file":"CheckboxMenuItem.cjs","names":[],"sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a <button> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            tabIndex={-1}\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AA8BA,IAAa,oBAAA,GAAA,MAAA,YACX,SAAS,iBACP,EAAE,WAAW,OAAO,UAAU,SAAS,YACvC,KACA;CACA,MAAM,YAAA,GAAA,MAAA,QAAkB;CAGxB,MAAM,YAAA,GAAA,MAAA,mBAA6B,IAAI,EAAE,CAAC;AAK1C,QACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACJ;EACP,aAAA;EACU;EACA;EACV,MACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,eAAD;GACE,IAAI;GACC;GAEL,eAAA;GACA,UAAU;GACD;GACC;GACA;GACV,CAAA;EAEJ,CAAA;EAGP"}

package/dist/components/Menu/CheckboxMenuItem.js

@@ -1,40 +1,36 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useId, useCallback } from "react";
 import { MenuItem } from "./MenuItem.js";
 import { CheckboxInput } from "../Form/Controls/Checkbox/Checkbox.js";
-const CheckboxMenuItem = forwardRef(
-  function CheckboxMenuItem2({ className, label, onSelect, checked, disabled }, ref) {
-    const toggleId = useId();
-    const onChange = useCallback(() => {
-    }, []);
-    return /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        as: "button",
-        role: "menuitemcheckbox",
-        "aria-checked": checked,
-        className,
-        label,
-        hideChevron: true,
-        onSelect,
-        disabled,
-        Icon: /* @__PURE__ */ jsx(
-          CheckboxInput,
-          {
-            id: toggleId,
-            ref,
-            "aria-hidden": true,
-            tabIndex: -1,
-            checked,
-            disabled,
-            onChange
-          }
-        )
-      }
-    );
-  }
-);
-export {
-  CheckboxMenuItem
-};
-//# sourceMappingURL=CheckboxMenuItem.js.map
+import { forwardRef, useCallback, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Menu/CheckboxMenuItem.tsx
+/**
+* A menu item with a checkbox control.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var CheckboxMenuItem = forwardRef(function CheckboxMenuItem({ className, label, onSelect, checked, disabled }, ref) {
+	const toggleId = useId();
+	const onChange = useCallback(() => {}, []);
+	return /* @__PURE__ */ jsx(MenuItem, {
+		as: "button",
+		role: "menuitemcheckbox",
+		"aria-checked": checked,
+		className,
+		label,
+		hideChevron: true,
+		onSelect,
+		disabled,
+		Icon: /* @__PURE__ */ jsx(CheckboxInput, {
+			id: toggleId,
+			ref,
+			"aria-hidden": true,
+			tabIndex: -1,
+			checked,
+			disabled,
+			onChange
+		})
+	});
+});
+//#endregion
+export { CheckboxMenuItem };
+
+//# sourceMappingURL=CheckboxMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxMenuItem.js","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a <button> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            tabIndex={-1}\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["CheckboxMenuItem"],"mappings":";;;;AA8BO,MAAM,mBAAmB;AAAA,EAC9B,SAASA,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,MACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"CheckboxMenuItem.js","names":[],"sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a <button> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            tabIndex={-1}\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AA8BA,IAAa,mBAAmB,WAC9B,SAAS,iBACP,EAAE,WAAW,OAAO,UAAU,SAAS,YACvC,KACA;CACA,MAAM,WAAW,OAAO;CAGxB,MAAM,WAAW,kBAAkB,IAAI,EAAE,CAAC;AAK1C,QACE,oBAAC,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACJ;EACP,aAAA;EACU;EACA;EACV,MACE,oBAAC,eAAD;GACE,IAAI;GACC;GAEL,eAAA;GACA,UAAU;GACD;GACC;GACA;GACV,CAAA;EAEJ,CAAA;EAGP"}

package/dist/components/Menu/ContextMenu.cjs

@@ -1,64 +1,73 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const reactContextMenu = require("@radix-ui/react-context-menu");
-const FloatingMenu = require("./FloatingMenu.cjs");
-const vaul = require("vaul");
-const classNames = require("classnames");
-const DrawerMenu_module = require("./DrawerMenu.module.css.cjs");
-const MenuContext = require("./MenuContext.cjs");
-const DrawerMenu = require("./DrawerMenu.cjs");
-const platform = require("../../utils/platform.cjs");
-const ContextMenuItemWrapper = ({
-  onSelect,
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.ContextMenuItem, { onSelect: onSelect ?? void 0, asChild: true, children });
-const ContextMenu = ({
-  title,
-  showTitle = true,
-  onOpenChange: onOpenChangeProp,
-  trigger: triggerProp,
-  hasAccessibleAlternative,
-  children: childrenProp
-}) => {
-  const [open, setOpen] = React.useState(false);
-  const onOpenChange = React.useCallback(
-    (value) => {
-      setOpen(value);
-      onOpenChangeProp?.(value);
-    },
-    [setOpen, onOpenChangeProp]
-  );
-  const platform$1 = platform.getPlatform();
-  const drawer = platform$1 === "android" || platform$1 === "ios";
-  const context = React.useMemo(
-    () => ({
-      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,
-      onOpenChange
-    }),
-    [onOpenChange]
-  );
-  const children = /* @__PURE__ */ jsxRuntime.jsx(MenuContext.MenuContext.Provider, { value: context, children: childrenProp });
-  const trigger = /* @__PURE__ */ jsxRuntime.jsx(
-    reactContextMenu.Trigger,
-    {
-      "aria-haspopup": "menu",
-      tabIndex: hasAccessibleAlternative ? void 0 : 0,
-      asChild: true,
-      children: triggerProp
-    }
-  );
-  return drawer ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Root, { onOpenChange, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(vaul.Drawer.Portal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Overlay, { className: classNames(DrawerMenu_module.default.bg) }),
-      /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerMenu.DrawerMenu, { title, children }) })
-    ] }) })
-  ] }) : /* @__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 }) }) })
-  ] });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_FloatingMenu = require("./FloatingMenu.cjs");
+const require_DrawerMenu_module = require("./DrawerMenu.module.cjs");
+const require_MenuContext = require("./MenuContext.cjs");
+const require_platform = require("../../utils/platform.cjs");
+const require_DrawerMenu = require("./DrawerMenu.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_context_menu = require("@radix-ui/react-context-menu");
+let vaul = require("vaul");
+//#region src/components/Menu/ContextMenu.tsx
+var ContextMenuItemWrapper = ({ onSelect, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_context_menu.ContextMenuItem, {
+	onSelect: onSelect ?? void 0,
+	asChild: true,
+	children
+});
+/**
+* A menu opened by right-clicking or long-pressing another UI element.
+*/
+var ContextMenu = ({ title, showTitle = true, onOpenChange: onOpenChangeProp, trigger: triggerProp, hasAccessibleAlternative, children: childrenProp }) => {
+	const [open, setOpen] = (0, react.useState)(false);
+	const onOpenChange = (0, react.useCallback)((value) => {
+		setOpen(value);
+		onOpenChangeProp?.(value);
+	}, [setOpen, onOpenChangeProp]);
+	const platform = require_platform.getPlatform();
+	const drawer = platform === "android" || platform === "ios";
+	const context = (0, react.useMemo)(() => ({
+		MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,
+		onOpenChange
+	}), [onOpenChange]);
+	const children = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuContext.MenuContext.Provider, {
+		value: context,
+		children: childrenProp
+	});
+	const trigger = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_context_menu.Trigger, {
+		"aria-haspopup": "menu",
+		tabIndex: hasAccessibleAlternative ? void 0 : 0,
+		asChild: true,
+		children: triggerProp
+	});
+	return drawer ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_context_menu.Root, {
+		onOpenChange,
+		children: trigger
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul.Drawer.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Overlay, { className: (0, classnames.default)(require_DrawerMenu_module.default.bg) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Content, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DrawerMenu.DrawerMenu, {
+				title,
+				children
+			})
+		})] })
+	})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_context_menu.Root, {
+		onOpenChange,
+		children: [trigger, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_context_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_context_menu.Content, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingMenu.FloatingMenu, {
+				showTitle,
+				title,
+				children
+			})
+		}) })]
+	});
 };
+//#endregion
 exports.ContextMenu = ContextMenu;
-//# sourceMappingURL=ContextMenu.cjs.map
+
+//# sourceMappingURL=ContextMenu.cjs.map

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, {\n  type FC,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} 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 {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n} 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":";;;;;;;;;;;;AAkEA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,qCACGA,kCAAA,EAAgB,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,MAAAA;AAAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAAA;AAK5B,QAAMC,aAAWC,SAAAA,YAAA;AACjB,QAAM,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAAA;AAAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,WACJC,+BAACC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAA,cAAa;AAGtD,QAAM,UACJD,2BAAAA;AAAAA,IAACE,iBAAAA;AAAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EAAA;AAUL,SAAO,SACLC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,IAAAJ,2BAAAA,IAACK,iBAAAA,MAAA,EAAK,cAA6B,UAAA,QAAA,CAAQ;AAAA,IAC3CL,2BAAAA,IAACM,KAAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAAH,gCAACG,KAAAA,OAAO,QAAP,EACC,UAAA;AAAA,MAAAN,+BAACM,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAAA,QAAa,EAAE,GAAG;AAAA,MACxDR,2BAAAA,IAACM,KAAAA,OAAO,SAAP,EAAe,SAAO,MACrB,UAAAN,2BAAAA,IAACS,WAAAA,YAAA,EAAW,OAAe,SAAA,CAAS,EAAA,CACtC;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,EAAA,CACF,IAEAN,2BAAAA,KAACE,iBAAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACDL,2BAAAA,IAACU,iBAAAA,QAAA,EACC,UAAAV,2BAAAA,IAACW,iBAAAA,SAAA,EAAQ,SAAO,MACd,UAAAX,2BAAAA,IAACY,aAAAA,cAAA,EAAa,WAAsB,OACjC,SAAA,CACH,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"ContextMenu.cjs","names":[],"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, {\n  type FC,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} 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 {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n} 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"],"mappings":";;;;;;;;;;;;;;AAkEA,IAAM,0BAAoD,EACxD,UACA,eAEA,iBAAA,GAAA,kBAAA,KAAC,6BAAA,iBAAD;CAAiB,UAAU,YAAY,KAAA;CAAW,SAAA;CAC/C;CACe,CAAA;;;;AAMpB,IAAa,eAA0B,EACrC,OACA,YAAY,MACZ,cAAc,kBACd,SAAS,aACT,0BACA,UAAU,mBACN;CACJ,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAAoB,MAAM;CACvC,MAAM,gBAAA,GAAA,MAAA,cACH,UAAmB;AAClB,UAAQ,MAAM;AACd,qBAAmB,MAAM;IAE3B,CAAC,SAAS,iBAAiB,CAC5B;CAID,MAAM,WAAW,iBAAA,aAAa;CAC9B,MAAM,SAAS,aAAa,aAAa,aAAa;CACtD,MAAM,WAAA,GAAA,MAAA,gBACG;EACL,iBAAiB,SAAS,OAAO;EACjC;EACD,GACD,CAAC,aAAa,CACf;CACD,MAAM,WACJ,iBAAA,GAAA,kBAAA,KAAC,oBAAA,YAAY,UAAb;EAAsB,OAAO;YAAU;EAAoC,CAAA;CAG7E,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAC,6BAAA,SAAD;EACE,iBAAc;EACd,UAAU,2BAA2B,KAAA,IAAY;EACjD,SAAA;YAEC;EACO,CAAA;AASZ,QAAO,SACL,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,6BAAA,MAAD;EAAoB;YAAe;EAAe,CAAA,EAClD,iBAAA,GAAA,kBAAA,KAAC,KAAA,OAAO,MAAR;EAAmB;EAAoB;YACrC,iBAAA,GAAA,kBAAA,MAAC,KAAA,OAAO,QAAR,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAA,OAAO,SAAR,EAAgB,YAAA,GAAA,WAAA,SAAsB,0BAAA,QAAa,GAAG,EAAI,CAAA,EAC1D,iBAAA,GAAA,kBAAA,KAAC,KAAA,OAAO,SAAR;GAAgB,SAAA;aACd,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;IAAmB;IAAQ;IAAsB,CAAA;GAClC,CAAA,CACH,EAAA,CAAA;EACJ,CAAA,CACb,EAAA,CAAA,GAEH,iBAAA,GAAA,kBAAA,MAAC,6BAAA,MAAD;EAAoB;YAApB,CACG,SACD,iBAAA,GAAA,kBAAA,KAAC,6BAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,6BAAA,SAAD;GAAS,SAAA;aACP,iBAAA,GAAA,kBAAA,KAAC,qBAAA,cAAD;IAAyB;IAAkB;IACxC;IACY,CAAA;GACP,CAAA,EACH,CAAA,CACJ"}

package/dist/components/Menu/ContextMenu.js

@@ -1,64 +1,70 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useCallback, useMemo } from "react";
-import { Root, Portal, Content, ContextMenuItem, Trigger } from "@radix-ui/react-context-menu";
 import { FloatingMenu } from "./FloatingMenu.js";
-import { Drawer } from "vaul";
-import classNames from "classnames";
-import drawerMenu from "./DrawerMenu.module.css.js";
+import DrawerMenu_module_default from "./DrawerMenu.module.js";
 import { MenuContext } from "./MenuContext.js";
-import { DrawerMenu } from "./DrawerMenu.js";
 import { getPlatform } from "../../utils/platform.js";
-const ContextMenuItemWrapper = ({
-  onSelect,
-  children
-}) => /* @__PURE__ */ jsx(ContextMenuItem, { onSelect: onSelect ?? void 0, asChild: true, children });
-const ContextMenu = ({
-  title,
-  showTitle = true,
-  onOpenChange: onOpenChangeProp,
-  trigger: triggerProp,
-  hasAccessibleAlternative,
-  children: childrenProp
-}) => {
-  const [open, setOpen] = useState(false);
-  const onOpenChange = useCallback(
-    (value) => {
-      setOpen(value);
-      onOpenChangeProp?.(value);
-    },
-    [setOpen, onOpenChangeProp]
-  );
-  const platform = getPlatform();
-  const drawer = platform === "android" || platform === "ios";
-  const context = useMemo(
-    () => ({
-      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,
-      onOpenChange
-    }),
-    [onOpenChange]
-  );
-  const children = /* @__PURE__ */ jsx(MenuContext.Provider, { value: context, children: childrenProp });
-  const trigger = /* @__PURE__ */ jsx(
-    Trigger,
-    {
-      "aria-haspopup": "menu",
-      tabIndex: hasAccessibleAlternative ? void 0 : 0,
-      asChild: true,
-      children: triggerProp
-    }
-  );
-  return drawer ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Root, { onOpenChange, children: trigger }),
-    /* @__PURE__ */ jsx(Drawer.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [
-      /* @__PURE__ */ jsx(Drawer.Overlay, { className: classNames(drawerMenu.bg) }),
-      /* @__PURE__ */ jsx(Drawer.Content, { asChild: true, children: /* @__PURE__ */ jsx(DrawerMenu, { title, children }) })
-    ] }) })
-  ] }) : /* @__PURE__ */ jsxs(Root, { onOpenChange, children: [
-    trigger,
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, children: /* @__PURE__ */ jsx(FloatingMenu, { showTitle, title, children }) }) })
-  ] });
-};
-export {
-  ContextMenu
+import { DrawerMenu } from "./DrawerMenu.js";
+import classNames from "classnames";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Content, ContextMenuItem, Portal, Root, Trigger } from "@radix-ui/react-context-menu";
+import { Drawer } from "vaul";
+//#region src/components/Menu/ContextMenu.tsx
+var ContextMenuItemWrapper = ({ onSelect, children }) => /* @__PURE__ */ jsx(ContextMenuItem, {
+	onSelect: onSelect ?? void 0,
+	asChild: true,
+	children
+});
+/**
+* A menu opened by right-clicking or long-pressing another UI element.
+*/
+var ContextMenu = ({ title, showTitle = true, onOpenChange: onOpenChangeProp, trigger: triggerProp, hasAccessibleAlternative, children: childrenProp }) => {
+	const [open, setOpen] = useState(false);
+	const onOpenChange = useCallback((value) => {
+		setOpen(value);
+		onOpenChangeProp?.(value);
+	}, [setOpen, onOpenChangeProp]);
+	const platform = getPlatform();
+	const drawer = platform === "android" || platform === "ios";
+	const context = useMemo(() => ({
+		MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,
+		onOpenChange
+	}), [onOpenChange]);
+	const children = /* @__PURE__ */ jsx(MenuContext.Provider, {
+		value: context,
+		children: childrenProp
+	});
+	const trigger = /* @__PURE__ */ jsx(Trigger, {
+		"aria-haspopup": "menu",
+		tabIndex: hasAccessibleAlternative ? void 0 : 0,
+		asChild: true,
+		children: triggerProp
+	});
+	return drawer ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Root, {
+		onOpenChange,
+		children: trigger
+	}), /* @__PURE__ */ jsx(Drawer.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Overlay, { className: classNames(DrawerMenu_module_default.bg) }), /* @__PURE__ */ jsx(Drawer.Content, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(DrawerMenu, {
+				title,
+				children
+			})
+		})] })
+	})] }) : /* @__PURE__ */ jsxs(Root, {
+		onOpenChange,
+		children: [trigger, /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(FloatingMenu, {
+				showTitle,
+				title,
+				children
+			})
+		}) })]
+	});
 };
-//# sourceMappingURL=ContextMenu.js.map
+//#endregion
+export { ContextMenu };
+
+//# sourceMappingURL=ContextMenu.js.map

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, {\n  type FC,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} 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 {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n} 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":";;;;;;;;;;AAkEA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,0BACG,iBAAA,EAAgB,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,EAAA;AAK5B,QAAM,WAAW,YAAA;AACjB,QAAM,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,WACJ,oBAAC,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,EAAA;AAUL,SAAO,SACL,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,cAA6B,UAAA,QAAA,CAAQ;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,UAAA,oBAAC,YAAA,EAAW,OAAe,SAAA,CAAS,EAAA,CACtC;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,EAAA,CACF,IAEA,qBAAC,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,QAAA,EACC,UAAA,oBAAC,SAAA,EAAQ,SAAO,MACd,UAAA,oBAAC,cAAA,EAAa,WAAsB,OACjC,SAAA,CACH,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"ContextMenu.js","names":[],"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, {\n  type FC,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} 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 {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n} 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"],"mappings":";;;;;;;;;;;AAkEA,IAAM,0BAAoD,EACxD,UACA,eAEA,oBAAC,iBAAD;CAAiB,UAAU,YAAY,KAAA;CAAW,SAAA;CAC/C;CACe,CAAA;;;;AAMpB,IAAa,eAA0B,EACrC,OACA,YAAY,MACZ,cAAc,kBACd,SAAS,aACT,0BACA,UAAU,mBACN;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,eAAe,aAClB,UAAmB;AAClB,UAAQ,MAAM;AACd,qBAAmB,MAAM;IAE3B,CAAC,SAAS,iBAAiB,CAC5B;CAID,MAAM,WAAW,aAAa;CAC9B,MAAM,SAAS,aAAa,aAAa,aAAa;CACtD,MAAM,UAAoB,eACjB;EACL,iBAAiB,SAAS,OAAO;EACjC;EACD,GACD,CAAC,aAAa,CACf;CACD,MAAM,WACJ,oBAAC,YAAY,UAAb;EAAsB,OAAO;YAAU;EAAoC,CAAA;CAG7E,MAAM,UACJ,oBAAC,SAAD;EACE,iBAAc;EACd,UAAU,2BAA2B,KAAA,IAAY;EACjD,SAAA;YAEC;EACO,CAAA;AASZ,QAAO,SACL,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAoB;YAAe;EAAe,CAAA,EAClD,oBAAC,OAAO,MAAR;EAAmB;EAAoB;YACrC,qBAAC,OAAO,QAAR,EAAA,UAAA,CACE,oBAAC,OAAO,SAAR,EAAgB,WAAW,WAAW,0BAAa,GAAG,EAAI,CAAA,EAC1D,oBAAC,OAAO,SAAR;GAAgB,SAAA;aACd,oBAAC,YAAD;IAAmB;IAAQ;IAAsB,CAAA;GAClC,CAAA,CACH,EAAA,CAAA;EACJ,CAAA,CACb,EAAA,CAAA,GAEH,qBAAC,MAAD;EAAoB;YAApB,CACG,SACD,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAD;GAAS,SAAA;aACP,oBAAC,cAAD;IAAyB;IAAkB;IACxC;IACY,CAAA;GACP,CAAA,EACH,CAAA,CACJ"}

package/dist/components/Menu/DrawerMenu.cjs

@@ -1,24 +1,29 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const DrawerMenu_module = require("./DrawerMenu.module.css.cjs");
-const platform = require("../../utils/platform.cjs");
-const classNames = require("classnames");
-const DrawerMenu = React.forwardRef(
-  ({ title, children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: classNames(className, DrawerMenu_module.default.drawer),
-      "aria-label": title,
-      "data-platform": platform.getPlatform(),
-      ...props,
-      role: "menu",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: DrawerMenu_module.default.body, children })
-    }
-  )
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_DrawerMenu_module = require("./DrawerMenu.module.cjs");
+const require_platform = require("../../utils/platform.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Menu/DrawerMenu.tsx
+/**
+* A menu in a drawer, as commonly seen on mobile.
+*/
+var DrawerMenu = (0, react.forwardRef)(({ title, children, className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	ref,
+	className: (0, classnames.default)(className, require_DrawerMenu_module.default.drawer),
+	"aria-label": title,
+	"data-platform": require_platform.getPlatform(),
+	...props,
+	role: "menu",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_DrawerMenu_module.default.body,
+		children
+	})
+}));
 DrawerMenu.displayName = "DrawerMenu";
+//#endregion
 exports.DrawerMenu = DrawerMenu;
-//# sourceMappingURL=DrawerMenu.cjs.map
+
+//# sourceMappingURL=DrawerMenu.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenu.cjs","sources":["../../../src/components/Menu/DrawerMenu.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, {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport styles from \"./DrawerMenu.module.css\";\nimport { getPlatform } from \"../../utils/platform\";\nimport classNames from \"classnames\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a drawer, as commonly seen on mobile.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const DrawerMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={classNames(className, styles.drawer)}\n      aria-label={title}\n      data-platform={getPlatform()}\n      {...props}\n      role=\"menu\"\n    >\n      <div className={styles.body}>{children}</div>\n    </div>\n  ),\n);\n\nDrawerMenu.displayName = \"DrawerMenu\";\n"],"names":["forwardRef","jsx","styles","getPlatform"],"mappings":";;;;;;;AAgCO,MAAM,aAAaA,MAAAA;AAAAA,EACxB,CAAC,EAAE,OAAO,UAAU,WAAW,GAAG,MAAA,GAAS,QACzCC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,WAAW,WAAWC,kBAAAA,QAAO,MAAM;AAAA,MAC9C,cAAY;AAAA,MACZ,iBAAeC,SAAAA,YAAA;AAAA,MACd,GAAG;AAAA,MACJ,MAAK;AAAA,MAEL,UAAAF,2BAAAA,IAAC,OAAA,EAAI,WAAWC,kBAAAA,QAAO,MAAO,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAG7C;AAEA,WAAW,cAAc;;"}
+{"version":3,"file":"DrawerMenu.cjs","names":[],"sources":["../../../src/components/Menu/DrawerMenu.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, {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport styles from \"./DrawerMenu.module.css\";\nimport { getPlatform } from \"../../utils/platform\";\nimport classNames from \"classnames\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a drawer, as commonly seen on mobile.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const DrawerMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={classNames(className, styles.drawer)}\n      aria-label={title}\n      data-platform={getPlatform()}\n      {...props}\n      role=\"menu\"\n    >\n      <div className={styles.body}>{children}</div>\n    </div>\n  ),\n);\n\nDrawerMenu.displayName = \"DrawerMenu\";\n"],"mappings":";;;;;;;;;;;;AAgCA,IAAa,cAAA,GAAA,MAAA,aACV,EAAE,OAAO,UAAU,WAAW,GAAG,SAAS,QACzC,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,WAAA,SAAsB,WAAW,0BAAA,QAAO,OAAO;CAC/C,cAAY;CACZ,iBAAe,iBAAA,aAAa;CAC5B,GAAI;CACJ,MAAK;WAEL,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAW,0BAAA,QAAO;EAAO;EAAe,CAAA;CACzC,CAAA,CAET;AAED,WAAW,cAAc"}