@vector-im/compound-web 7.6.3 → 7.7.0

package/dist/components/ChatFilter/ChatFilter.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const UnstyledButton = require("../Button/UnstyledButton.cjs");
+const ChatFilter_module = require("./ChatFilter.module.css.cjs");
+const ChatFilter = React.forwardRef(function ChatFilter2({ children, selected, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UnstyledButton.UnstyledButton,
+    {
+      ...props,
+      className: ChatFilter_module.default["chat-filter"],
+      "aria-selected": selected,
+      as: "button",
+      ref,
+      tabIndex: 0,
+      children
+    }
+  );
+});
+exports.ChatFilter = ChatFilter;
+//# sourceMappingURL=ChatFilter.cjs.map

package/dist/components/ChatFilter/ChatFilter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilter.cjs","sources":["../../../src/components/ChatFilter/ChatFilter.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, { ForwardedRef, forwardRef } from \"react\";\nimport {\n  UnstyledButton,\n  UnstyledButtonPropsFor,\n} from \"../Button/UnstyledButton\";\nimport styles from \"./ChatFilter.module.css\";\n\ntype ChatFilterProps = Omit<UnstyledButtonPropsFor<\"button\">, \"disabled\"> & {\n  /**\n   * Whether the filter is selected.\n   */\n  selected?: boolean;\n};\n\n/**\n * A chat filter button.\n */\nexport const ChatFilter = forwardRef(function ChatFilter(\n  { children, selected, ...props }: ChatFilterProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  return (\n    <UnstyledButton\n      {...props}\n      className={styles[\"chat-filter\"]}\n      aria-selected={selected}\n      as=\"button\"\n      ref={ref}\n      tabIndex={0}\n    >\n      {children}\n    </UnstyledButton>\n  );\n});\n"],"names":["forwardRef","ChatFilter","jsx","UnstyledButton","styles"],"mappings":";;;;;;AAwBa,MAAA,aAAaA,MAAAA,WAAW,SAASC,YAC5C,EAAE,UAAU,UAAU,GAAG,MAAM,GAC/B,KACoB;AAElB,SAAAC,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAWC,0BAAO,aAAa;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAG;AAAA,MACH;AAAA,MACA,UAAU;AAAA,MAET;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;;"}

package/dist/components/ChatFilter/ChatFilter.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { UnstyledButtonPropsFor } from '../Button/UnstyledButton';
+type ChatFilterProps = Omit<UnstyledButtonPropsFor<"button">, "disabled"> & {
+    /**
+     * Whether the filter is selected.
+     */
+    selected?: boolean;
+};
+/**
+ * A chat filter button.
+ */
+export declare const ChatFilter: React.ForwardRefExoticComponent<Omit<ChatFilterProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=ChatFilter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilter.d.ts","sourceRoot":"","sources":["../../../src/components/ChatFilter/ChatFilter.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAEL,sBAAsB,EACvB,MAAM,0BAA0B,CAAC;AAGlC,KAAK,eAAe,GAAG,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1E;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,wGAgBrB,CAAC"}

package/dist/components/ChatFilter/ChatFilter.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { UnstyledButton } from "../Button/UnstyledButton.js";
+import styles from "./ChatFilter.module.css.js";
+const ChatFilter = forwardRef(function ChatFilter2({ children, selected, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      ...props,
+      className: styles["chat-filter"],
+      "aria-selected": selected,
+      as: "button",
+      ref,
+      tabIndex: 0,
+      children
+    }
+  );
+});
+export {
+  ChatFilter
+};
+//# sourceMappingURL=ChatFilter.js.map

package/dist/components/ChatFilter/ChatFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilter.js","sources":["../../../src/components/ChatFilter/ChatFilter.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, { ForwardedRef, forwardRef } from \"react\";\nimport {\n  UnstyledButton,\n  UnstyledButtonPropsFor,\n} from \"../Button/UnstyledButton\";\nimport styles from \"./ChatFilter.module.css\";\n\ntype ChatFilterProps = Omit<UnstyledButtonPropsFor<\"button\">, \"disabled\"> & {\n  /**\n   * Whether the filter is selected.\n   */\n  selected?: boolean;\n};\n\n/**\n * A chat filter button.\n */\nexport const ChatFilter = forwardRef(function ChatFilter(\n  { children, selected, ...props }: ChatFilterProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  return (\n    <UnstyledButton\n      {...props}\n      className={styles[\"chat-filter\"]}\n      aria-selected={selected}\n      as=\"button\"\n      ref={ref}\n      tabIndex={0}\n    >\n      {children}\n    </UnstyledButton>\n  );\n});\n"],"names":["ChatFilter"],"mappings":";;;;AAwBa,MAAA,aAAa,WAAW,SAASA,YAC5C,EAAE,UAAU,UAAU,GAAG,MAAM,GAC/B,KACoB;AAElB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,OAAO,aAAa;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAG;AAAA,MACH;AAAA,MACA,UAAU;AAAA,MAET;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;"}

package/dist/components/ChatFilter/ChatFilter.module.css.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const styles = {
+  "chat-filter": "_chat-filter_5qdp0_8"
+};
+exports.default = styles;
+//# sourceMappingURL=ChatFilter.module.css.cjs.map

package/dist/components/ChatFilter/ChatFilter.module.css.cjs.map

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

package/dist/components/ChatFilter/ChatFilter.module.css.js

@@ -0,0 +1,7 @@
+const styles = {
+  "chat-filter": "_chat-filter_5qdp0_8"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=ChatFilter.module.css.js.map

package/dist/components/ChatFilter/ChatFilter.module.css.js.map

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

package/dist/components/ChatFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatFilter } from './ChatFilter';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ChatFilter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ChatFilter/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+/**
+ * A menu item with a checkbox control.
+ * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+ */
+export declare const CheckboxMenuItem: React.ForwardRefExoticComponent<Pick<{
+    as?: ("a" | "button" | "div") | undefined;
+    className?: string;
+    Icon: React.ComponentType<React.SVGAttributes<SVGElement>> | React.ReactElement;
+    label: string | null;
+    labelProps?: React.ComponentPropsWithoutRef<typeof import('../..').Text>;
+    onSelect: ((e: Event) => void) | null;
+    onClick?: (e: Event) => void;
+    kind?: "primary" | "critical";
+    disabled?: boolean;
+    hideChevron?: boolean;
+} & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "onClick" | "onSelect">, "label" | "className" | "disabled" | "onSelect"> & {
+    /**
+     * Whether the checkbox is checked.
+     */
+    checked: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=CheckboxMenuItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAc9E;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;IAV3B;;OAEG;aACM,OAAO;0CA2CjB,CAAC"}

package/dist/components/Menu/FloatingMenu.cjs

@@ -4,8 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const classNames = require("classnames");
 const React = require("react");
 const FloatingMenu_module = require("./FloatingMenu.module.css.cjs");
-const Text = require("../Typography/Text.cjs");
-const MenuTitle = ({ title, id }) => /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { as: "h3", id, className: FloatingMenu_module.default.title, size: "sm", weight: "semibold", children: title });
+const MenuTitle = require("./MenuTitle.cjs");
 const FloatingMenu = React.forwardRef(
   ({ title, showTitle = true, className, children, ...props }, ref) => {
     const titleId = React.useId();
@@ -19,7 +18,7 @@ const FloatingMenu = React.forwardRef(
         className: classNames(className, FloatingMenu_module.default.menu),
         ...props,
         children: [
-          showTitle && /* @__PURE__ */ jsxRuntime.jsx(MenuTitle, { title, id: titleId }),
+          showTitle && /* @__PURE__ */ jsxRuntime.jsx(MenuTitle.MenuTitle, { className: FloatingMenu_module.default.title, title, id: titleId }),
           children
         ]
       }

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingMenu.cjs","sources":["../../../src/components/Menu/FloatingMenu.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { Text } from \"../Typography/Text\";\n\ninterface TitleProps {\n  title: string;\n  id: string;\n}\n\nconst MenuTitle: React.FC<TitleProps> = ({ title, id }) => (\n  <Text as=\"h3\" id={id} className={styles.title} size=\"sm\" weight=\"semibold\">\n    {title}\n  </Text>\n);\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && <MenuTitle title={title} id={titleId} />}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"names":["Text","styles","forwardRef","useId","jsxs","classnames","jsx"],"mappings":";;;;;;;AAsBA,MAAM,YAAkC,CAAC,EAAE,OAAO,GAAG,qCAClDA,KAAK,MAAA,EAAA,IAAG,MAAK,IAAQ,WAAWC,oBAAO,QAAA,OAAO,MAAK,MAAK,QAAO,YAC7D,UACH,OAAA;AA2BK,MAAM,eAAeC,MAAA;AAAA,EAC1B,CAAC,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnE,UAAM,UAAUC,MAAAA,MAAM;AAEpB,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY,YAAY,SAAY;AAAA,QACpC,mBAAiB,YAAY,UAAU;AAAA,QACvC,WAAWC,WAAW,WAAWJ,oBAAAA,QAAO,IAAI;AAAA,QAC3C,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aAAcK,2BAAA,IAAA,WAAA,EAAU,OAAc,IAAI,SAAS;AAAA,UACnD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"FloatingMenu.cjs","sources":["../../../src/components/Menu/FloatingMenu.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { MenuTitle } from \"./MenuTitle.tsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && (\n          <MenuTitle className={styles.title} title={title} id={titleId} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"names":["forwardRef","useId","jsxs","classnames","styles","MenuTitle"],"mappings":";;;;;;;AAyCO,MAAM,eAAeA,MAAA;AAAA,EAC1B,CAAC,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnE,UAAM,UAAUC,MAAAA,MAAM;AAEpB,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY,YAAY,SAAY;AAAA,QACpC,mBAAiB,YAAY,UAAU;AAAA,QACvC,WAAWC,WAAW,WAAWC,oBAAAA,QAAO,IAAI;AAAA,QAC3C,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,4CACEC,UAAU,WAAA,EAAA,WAAWD,4BAAO,OAAO,OAAc,IAAI,SAAS;AAAA,UAEhE;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/FloatingMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EACxB,SAAS,EAGV,MAAM,OAAO,CAAC;AAef,UAAU,KAAM,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AAGH,eAAO,MAAM,YAAY,8EAiBxB,CAAC"}
+{"version":3,"file":"FloatingMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/FloatingMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EACxB,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,UAAU,KAAM,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AAGH,eAAO,MAAM,YAAY,8EAmBxB,CAAC"}

package/dist/components/Menu/FloatingMenu.js

@@ -2,8 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import { forwardRef, useId } from "react";
 import styles from "./FloatingMenu.module.css.js";
-import { Text } from "../Typography/Text.js";
-const MenuTitle = ({ title, id }) => /* @__PURE__ */ jsx(Text, { as: "h3", id, className: styles.title, size: "sm", weight: "semibold", children: title });
+import { MenuTitle } from "./MenuTitle.js";
 const FloatingMenu = forwardRef(
   ({ title, showTitle = true, className, children, ...props }, ref) => {
     const titleId = useId();
@@ -17,7 +16,7 @@ const FloatingMenu = forwardRef(
         className: classNames(className, styles.menu),
         ...props,
         children: [
-          showTitle && /* @__PURE__ */ jsx(MenuTitle, { title, id: titleId }),
+          showTitle && /* @__PURE__ */ jsx(MenuTitle, { className: styles.title, title, id: titleId }),
           children
         ]
       }

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingMenu.js","sources":["../../../src/components/Menu/FloatingMenu.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { Text } from \"../Typography/Text\";\n\ninterface TitleProps {\n  title: string;\n  id: string;\n}\n\nconst MenuTitle: React.FC<TitleProps> = ({ title, id }) => (\n  <Text as=\"h3\" id={id} className={styles.title} size=\"sm\" weight=\"semibold\">\n    {title}\n  </Text>\n);\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && <MenuTitle title={title} id={titleId} />}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"names":["classnames"],"mappings":";;;;;AAsBA,MAAM,YAAkC,CAAC,EAAE,OAAO,GAAG,0BAClD,MAAK,EAAA,IAAG,MAAK,IAAQ,WAAW,OAAO,OAAO,MAAK,MAAK,QAAO,YAC7D,UACH,OAAA;AA2BK,MAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnE,UAAM,UAAU,MAAM;AAEpB,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY,YAAY,SAAY;AAAA,QACpC,mBAAiB,YAAY,UAAU;AAAA,QACvC,WAAWA,WAAW,WAAW,OAAO,IAAI;AAAA,QAC3C,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aAAc,oBAAA,WAAA,EAAU,OAAc,IAAI,SAAS;AAAA,UACnD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"FloatingMenu.js","sources":["../../../src/components/Menu/FloatingMenu.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { MenuTitle } from \"./MenuTitle.tsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && (\n          <MenuTitle className={styles.title} title={title} id={titleId} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"names":["classnames"],"mappings":";;;;;AAyCO,MAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnE,UAAM,UAAU,MAAM;AAEpB,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY,YAAY,SAAY;AAAA,QACpC,mBAAiB,YAAY,UAAU;AAAA,QACvC,WAAWA,WAAW,WAAW,OAAO,IAAI;AAAA,QAC3C,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,iCACE,WAAU,EAAA,WAAW,OAAO,OAAO,OAAc,IAAI,SAAS;AAAA,UAEhE;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;"}

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const menu = "_menu_eeuw6_8";
-const title = "_title_eeuw6_74";
+const menu = "_menu_19sse_8";
+const title = "_title_19sse_74";
 const styles = {
   menu,
   title

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

@@ -1,5 +1,5 @@
-const menu = "_menu_eeuw6_8";
-const title = "_title_eeuw6_74";
+const menu = "_menu_19sse_8";
+const title = "_title_19sse_74";
 const styles = {
   menu,
   title

package/dist/components/Menu/MenuItem.cjs

@@ -19,6 +19,7 @@ const MenuItem = ({
   children,
   onClick: onClickProp,
   disabled,
+  hideChevron,
   ...props
 }) => {
   const Component = as ?? "button";
@@ -75,7 +76,7 @@ const MenuItem = ({
             children: label
           }
         ),
-        (Component === "button" || Component === "a") && /* @__PURE__ */ jsxRuntime.jsx(
+        !hideChevron && (Component === "button" || Component === "a") && /* @__PURE__ */ jsxRuntime.jsx(
           ChevronRightIcon,
           {
             width: 8,

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/Menu/MenuItem.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  ElementType,\n  isValidElement,\n  ReactElement,\n  SVGAttributes,\n  useCallback,\n  useContext,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {iconIsReactElement ? (\n        <Slot className={styles.icon}>{componentIcon}</Slot>\n      ) : (\n        <SvgIcon\n          width={24}\n          height={24}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {(Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"names":["useContext","MenuContext","useCallback","isValidElement","jsxs","classnames","styles","Slot","jsx","Text"],"mappings":";;;;;;;;;;AAsEO,MAAM,WAAW,CAAuC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAoC;AAClC,QAAM,YAAY,MAAO;AACnB,QAAA,UAAUA,iBAAWC,uBAAW;AAEtC,QAAM,UAAUC,MAAA;AAAA,IACd,CAAC,MAA6D;AAC3D,oBAAuD,CAAC;AAGzD,UAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;AACnD,cAAA,cAAc,IAAI,YAAY,mBAAmB;AAAA,UACrD,SAAS;AAAA,UACT,YAAY;AAAA,QAAA,CACb;AACD,iBAAS,WAAW;AACpB,YAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,KAAK;AAAA,MAAA;AAAA,IAElE;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEM,QAAA,qBAAqBC,qBAAe,IAAI;AAC9C,QAAM,gBAAgB;AACtB,QAAM,UAAU;AAEhB,QAAM,UACJC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWC,WAAW,WAAWC,gBAAAA,QAAO,MAAM;AAAA,QAC5C,CAACA,gBAAA,QAAO,WAAW,GAAG,aAAa;AAAA,QACnC,CAACA,wBAAO,UAAU,CAAC,GAAG,UAAU;AAAA,QAChC,CAACA,gBAAAA,QAAO,UAAU,CAAC,GAAG;AAAA,MAAA,CACvB;AAAA,MACD,aAAW;AAAA,MACX;AAAA,MACA,UAAU,cAAc,WAAW,WAAW;AAAA,MAC9C,iBAAe,cAAc,WAAW,SAAY;AAAA,MAEnD,UAAA;AAAA,QAAA,oDACEC,UAAK,MAAA,EAAA,WAAWD,wBAAO,MAAO,wBAAc,CAAA,IAE7CE,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWF,gBAAO,QAAA;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAGD,UAAU,QACTE,2BAAA;AAAA,UAACC,KAAA;AAAA,UAAA;AAAA,YACC,WAAWH,gBAAO,QAAA;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACF,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,SAIA,cAAc,YAAY,cAAc,QACxCE,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWF,wBAAO,UAAU;AAAA,YAC5B,eAAa;AAAA,YAKb,SAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGK,SAAA,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEAE,+BAAC,QAAQ,iBAAR,EAAwB,UACtB,UACH,QAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/Menu/MenuItem.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  ElementType,\n  isValidElement,\n  ReactElement,\n  SVGAttributes,\n  useCallback,\n  useContext,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * Event callback for when the item is clicked.\n   * @param e\n   */\n  onClick?: (e: Event) => void;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n  /**\n   * Whether to hide the chevron navigation hint.\n   */\n  hideChevron?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\" | \"onClick\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  hideChevron,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {iconIsReactElement ? (\n        <Slot className={styles.icon}>{componentIcon}</Slot>\n      ) : (\n        <SvgIcon\n          width={24}\n          height={24}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {!hideChevron && (Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"names":["useContext","MenuContext","useCallback","isValidElement","jsxs","classnames","styles","Slot","jsx","Text"],"mappings":";;;;;;;;;;AA+EO,MAAM,WAAW,CAAuC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoC;AAClC,QAAM,YAAY,MAAO;AACnB,QAAA,UAAUA,iBAAWC,uBAAW;AAEtC,QAAM,UAAUC,MAAA;AAAA,IACd,CAAC,MAA6D;AAC3D,oBAAuD,CAAC;AAGzD,UAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;AACnD,cAAA,cAAc,IAAI,YAAY,mBAAmB;AAAA,UACrD,SAAS;AAAA,UACT,YAAY;AAAA,QAAA,CACb;AACD,iBAAS,WAAW;AACpB,YAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,KAAK;AAAA,MAAA;AAAA,IAElE;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEM,QAAA,qBAAqBC,qBAAe,IAAI;AAC9C,QAAM,gBAAgB;AACtB,QAAM,UAAU;AAEhB,QAAM,UACJC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWC,WAAW,WAAWC,gBAAAA,QAAO,MAAM;AAAA,QAC5C,CAACA,gBAAA,QAAO,WAAW,GAAG,aAAa;AAAA,QACnC,CAACA,wBAAO,UAAU,CAAC,GAAG,UAAU;AAAA,QAChC,CAACA,gBAAAA,QAAO,UAAU,CAAC,GAAG;AAAA,MAAA,CACvB;AAAA,MACD,aAAW;AAAA,MACX;AAAA,MACA,UAAU,cAAc,WAAW,WAAW;AAAA,MAC9C,iBAAe,cAAc,WAAW,SAAY;AAAA,MAEnD,UAAA;AAAA,QAAA,oDACEC,UAAK,MAAA,EAAA,WAAWD,wBAAO,MAAO,wBAAc,CAAA,IAE7CE,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWF,gBAAO,QAAA;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAGD,UAAU,QACTE,2BAAA;AAAA,UAACC,KAAA;AAAA,UAAA;AAAA,YACC,WAAWH,gBAAO,QAAA;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACF,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAID,CAAC,gBAAgB,cAAc,YAAY,cAAc,QACxDE,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWF,wBAAO,UAAU;AAAA,YAC5B,eAAa;AAAA,YAKb,SAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGK,SAAA,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEAE,+BAAC,QAAQ,iBAAR,EAAwB,UACtB,UACH,QAAA,CAAA;AAEJ;;"}

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

@@ -30,18 +30,27 @@ type Props<C extends MenuItemElement> = {
      * being dismissed.
      */
     onSelect: ((e: Event) => void) | null;
+    /**
+     * Event callback for when the item is clicked.
+     * @param e
+     */
+    onClick?: (e: Event) => void;
     /**
      * The color variant of the menu item.
      * @default primary
      */
     kind?: "primary" | "critical";
     disabled?: boolean;
-} & Omit<ComponentPropsWithoutRef<C>, "onSelect">;
+    /**
+     * Whether to hide the chevron navigation hint.
+     */
+    hideChevron?: boolean;
+} & Omit<ComponentPropsWithoutRef<C>, "onSelect" | "onClick">;
 /**
  * An item within a menu, acting either as a navigation button, or simply a
  * container for other interactive elements.
  * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
  */
-export declare const MenuItem: <C extends MenuItemElement = "button">({ as, className, Icon, label, labelProps, onSelect, kind, children, onClick: onClickProp, disabled, ...props }: Props<C>) => React.ReactElement;
+export declare const MenuItem: <C extends MenuItemElement = "button">({ as, className, Icon, label, labelProps, onSelect, kind, children, onClick: onClickProp, disabled, hideChevron, ...props }: Props<C>) => React.ReactElement;
 export {};
 //# sourceMappingURL=MenuItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EACxB,aAAa,EAGb,YAAY,EACZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAK1C,KAAK,eAAe,GAAG,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;AAE9C,KAAK,KAAK,CAAC,CAAC,SAAS,eAAe,IAAI;IACtC;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,GAAG,YAAY,CAAC;IAC9D;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC;IACnD;;;;OAIG;IAEH,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACtC;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,eAAe,6HAY/C,KAAK,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YAuFnB,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EACxB,aAAa,EAGb,YAAY,EACZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAK1C,KAAK,eAAe,GAAG,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;AAE9C,KAAK,KAAK,CAAC,CAAC,SAAS,eAAe,IAAI;IACtC;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,GAAG,YAAY,CAAC;IAC9D;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC;IACnD;;;;OAIG;IAEH,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,eAAe,0IAa/C,KAAK,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YAuFnB,CAAC"}

package/dist/components/Menu/MenuItem.js

@@ -17,6 +17,7 @@ const MenuItem = ({
   children,
   onClick: onClickProp,
   disabled,
+  hideChevron,
   ...props
 }) => {
   const Component = as ?? "button";
@@ -73,7 +74,7 @@ const MenuItem = ({
             children: label
           }
         ),
-        (Component === "button" || Component === "a") && /* @__PURE__ */ jsx(
+        !hideChevron && (Component === "button" || Component === "a") && /* @__PURE__ */ jsx(
           ChevronRightIcon,
           {
             width: 8,

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/Menu/MenuItem.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  ElementType,\n  isValidElement,\n  ReactElement,\n  SVGAttributes,\n  useCallback,\n  useContext,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {iconIsReactElement ? (\n        <Slot className={styles.icon}>{componentIcon}</Slot>\n      ) : (\n        <SvgIcon\n          width={24}\n          height={24}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {(Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;AAsEO,MAAM,WAAW,CAAuC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAoC;AAClC,QAAM,YAAY,MAAO;AACnB,QAAA,UAAU,WAAW,WAAW;AAEtC,QAAM,UAAU;AAAA,IACd,CAAC,MAA6D;AAC3D,oBAAuD,CAAC;AAGzD,UAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;AACnD,cAAA,cAAc,IAAI,YAAY,mBAAmB;AAAA,UACrD,SAAS;AAAA,UACT,YAAY;AAAA,QAAA,CACb;AACD,iBAAS,WAAW;AACpB,YAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,KAAK;AAAA,MAAA;AAAA,IAElE;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEM,QAAA,qBAAqB,eAAe,IAAI;AAC9C,QAAM,gBAAgB;AACtB,QAAM,UAAU;AAEhB,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWA,WAAW,WAAW,OAAO,MAAM;AAAA,QAC5C,CAAC,OAAO,WAAW,GAAG,aAAa;AAAA,QACnC,CAAC,OAAO,UAAU,CAAC,GAAG,UAAU;AAAA,QAChC,CAAC,OAAO,UAAU,CAAC,GAAG;AAAA,MAAA,CACvB;AAAA,MACD,aAAW;AAAA,MACX;AAAA,MACA,UAAU,cAAc,WAAW,WAAW;AAAA,MAC9C,iBAAe,cAAc,WAAW,SAAY;AAAA,MAEnD,UAAA;AAAA,QAAA,yCACE,MAAK,EAAA,WAAW,OAAO,MAAO,wBAAc,CAAA,IAE7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAGD,UAAU,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACF,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,SAIA,cAAc,YAAY,cAAc,QACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO,UAAU;AAAA,YAC5B,eAAa;AAAA,YAKb,SAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGK,SAAA,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEA,oBAAC,QAAQ,iBAAR,EAAwB,UACtB,UACH,QAAA,CAAA;AAEJ;"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/Menu/MenuItem.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  ElementType,\n  isValidElement,\n  ReactElement,\n  SVGAttributes,\n  useCallback,\n  useContext,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * Event callback for when the item is clicked.\n   * @param e\n   */\n  onClick?: (e: Event) => void;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n  /**\n   * Whether to hide the chevron navigation hint.\n   */\n  hideChevron?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\" | \"onClick\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  hideChevron,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {iconIsReactElement ? (\n        <Slot className={styles.icon}>{componentIcon}</Slot>\n      ) : (\n        <SvgIcon\n          width={24}\n          height={24}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {!hideChevron && (Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;AA+EO,MAAM,WAAW,CAAuC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoC;AAClC,QAAM,YAAY,MAAO;AACnB,QAAA,UAAU,WAAW,WAAW;AAEtC,QAAM,UAAU;AAAA,IACd,CAAC,MAA6D;AAC3D,oBAAuD,CAAC;AAGzD,UAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;AACnD,cAAA,cAAc,IAAI,YAAY,mBAAmB;AAAA,UACrD,SAAS;AAAA,UACT,YAAY;AAAA,QAAA,CACb;AACD,iBAAS,WAAW;AACpB,YAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,KAAK;AAAA,MAAA;AAAA,IAElE;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEM,QAAA,qBAAqB,eAAe,IAAI;AAC9C,QAAM,gBAAgB;AACtB,QAAM,UAAU;AAEhB,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWA,WAAW,WAAW,OAAO,MAAM;AAAA,QAC5C,CAAC,OAAO,WAAW,GAAG,aAAa;AAAA,QACnC,CAAC,OAAO,UAAU,CAAC,GAAG,UAAU;AAAA,QAChC,CAAC,OAAO,UAAU,CAAC,GAAG;AAAA,MAAA,CACvB;AAAA,MACD,aAAW;AAAA,MACX;AAAA,MACA,UAAU,cAAc,WAAW,WAAW;AAAA,MAC9C,iBAAe,cAAc,WAAW,SAAY;AAAA,MAEnD,UAAA;AAAA,QAAA,yCACE,MAAK,EAAA,WAAW,OAAO,MAAO,wBAAc,CAAA,IAE7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAGD,UAAU,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACF,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAID,CAAC,gBAAgB,cAAc,YAAY,cAAc,QACxD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO,UAAU;AAAA,YAC5B,eAAa;AAAA,YAKb,SAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGK,SAAA,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEA,oBAAC,QAAQ,iBAAR,EAAwB,UACtB,UACH,QAAA,CAAA;AAEJ;"}

package/dist/components/Menu/MenuTitle.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Text = require("../Typography/Text.cjs");
+const MenuTitle_module = require("./MenuTitle.module.css.cjs");
+const classNames = require("classnames");
+const MenuTitle = ({
+  title,
+  id,
+  className
+}) => {
+  const classes = classNames(MenuTitle_module.default["menu-title"], className);
+  return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { as: "h3", id, className: classes, size: "sm", weight: "semibold", children: title });
+};
+exports.MenuTitle = MenuTitle;
+//# sourceMappingURL=MenuTitle.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.cjs","sources":["../../../src/components/Menu/MenuTitle.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 from \"react\";\nimport { Text } from \"../Typography/Text.tsx\";\nimport styles from \"./MenuTitle.module.css\";\nimport classnames from \"classnames\";\n\ninterface MenuTitleProps {\n  /**\n   * The title of the menu.\n   */\n  title: string;\n  /**\n   * The id of the menu title.\n   */\n  id?: string;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n}\n\nexport const MenuTitle: React.FC<MenuTitleProps> = ({\n  title,\n  id,\n  className,\n}) => {\n  const classes = classnames(styles[\"menu-title\"], className);\n\n  return (\n    <Text as=\"h3\" id={id} className={classes} size=\"sm\" weight=\"semibold\">\n      {title}\n    </Text>\n  );\n};\n"],"names":["classnames","styles","jsx","Text"],"mappings":";;;;;;AA2BO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,UAAUA,WAAWC,iBAAO,QAAA,YAAY,GAAG,SAAS;AAGxD,SAAAC,2BAAAA,IAACC,KAAAA,MAAK,EAAA,IAAG,MAAK,IAAQ,WAAW,SAAS,MAAK,MAAK,QAAO,YACxD,UACH,MAAA,CAAA;AAEJ;;"}

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+interface MenuTitleProps {
+    /**
+     * The title of the menu.
+     */
+    title: string;
+    /**
+     * The id of the menu title.
+     */
+    id?: string;
+    /**
+     * The CSS class.
+     */
+    className?: string;
+}
+export declare const MenuTitle: React.FC<MenuTitleProps>;
+export {};
+//# sourceMappingURL=MenuTitle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuTitle.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAY9C,CAAC"}

package/dist/components/Menu/MenuTitle.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "../Typography/Text.js";
+import styles from "./MenuTitle.module.css.js";
+import classNames from "classnames";
+const MenuTitle = ({
+  title,
+  id,
+  className
+}) => {
+  const classes = classNames(styles["menu-title"], className);
+  return /* @__PURE__ */ jsx(Text, { as: "h3", id, className: classes, size: "sm", weight: "semibold", children: title });
+};
+export {
+  MenuTitle
+};
+//# sourceMappingURL=MenuTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.js","sources":["../../../src/components/Menu/MenuTitle.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 from \"react\";\nimport { Text } from \"../Typography/Text.tsx\";\nimport styles from \"./MenuTitle.module.css\";\nimport classnames from \"classnames\";\n\ninterface MenuTitleProps {\n  /**\n   * The title of the menu.\n   */\n  title: string;\n  /**\n   * The id of the menu title.\n   */\n  id?: string;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n}\n\nexport const MenuTitle: React.FC<MenuTitleProps> = ({\n  title,\n  id,\n  className,\n}) => {\n  const classes = classnames(styles[\"menu-title\"], className);\n\n  return (\n    <Text as=\"h3\" id={id} className={classes} size=\"sm\" weight=\"semibold\">\n      {title}\n    </Text>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;AA2BO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,UAAUA,WAAW,OAAO,YAAY,GAAG,SAAS;AAGxD,SAAA,oBAAC,MAAK,EAAA,IAAG,MAAK,IAAQ,WAAW,SAAS,MAAK,MAAK,QAAO,YACxD,UACH,MAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const styles = {
+  "menu-title": "_menu-title_1sgvx_8"
+};
+exports.default = styles;
+//# sourceMappingURL=MenuTitle.module.css.cjs.map

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

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

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

@@ -0,0 +1,7 @@
+const styles = {
+  "menu-title": "_menu-title_1sgvx_8"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=MenuTitle.module.css.js.map

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

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

package/dist/components/Menu/ToggleMenuItem.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const MenuItem = require("./MenuItem.cjs");
 const Toggle = require("../Form/Controls/Toggle/Toggle.cjs");
 const ToggleMenuItem = React.forwardRef(
-  function ToggleMenuItem2({ className, Icon, label, onSelect, checked, disabled }, ref) {
+  function ToggleMenuItem2({ className, Icon, label, onSelect, checked, disabled, onClick }, ref) {
     const toggleId = React.useId();
     const onChange = React.useCallback(() => {
     }, []);
@@ -20,6 +20,7 @@ const ToggleMenuItem = React.forwardRef(
         label,
         onSelect,
         disabled,
+        onClick,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Toggle.ToggleInput,
           {

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.cjs","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 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, { ComponentProps, forwardRef, useCallback, useId } from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle 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 plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["forwardRef","ToggleMenuItem","useId","useCallback","jsx","MenuItem","ToggleInput"],"mappings":";;;;;;AAyBO,MAAM,iBAAiBA,MAAA;AAAA,EAC5B,SAASC,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,SAAS,GACtD,KACA;AACA,UAAM,WAAWC,MAAAA,MAAM;AAGjB,UAAA,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,EAAE;AAMvC,WAAAC,2BAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAAD,2BAAA;AAAA,UAACE,OAAA;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"ToggleMenuItem.cjs","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 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, { ComponentProps, forwardRef, useCallback, useId } from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle 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 plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["forwardRef","ToggleMenuItem","useId","useCallback","jsx","MenuItem","ToggleInput"],"mappings":";;;;;;AAyBO,MAAM,iBAAiBA,MAAA;AAAA,EAC5B,SAASC,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAQ,GAC/D,KACA;AACA,UAAM,WAAWC,MAAAA,MAAM;AAGjB,UAAA,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,EAAE;AAMvC,WAAAC,2BAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAAD,2BAAA;AAAA,UAACE,OAAA;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGN;;"}

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

@@ -10,9 +10,11 @@ export declare const ToggleMenuItem: React.ForwardRefExoticComponent<Pick<{
     label: string | null;
     labelProps?: React.ComponentPropsWithoutRef<typeof import('../..').Text>;
     onSelect: ((e: Event) => void) | null;
+    onClick?: (e: Event) => void;
     kind?: "primary" | "critical";
     disabled?: boolean;
-} & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "onSelect">, "label" | "className" | "disabled" | "onSelect" | "Icon"> & {
+    hideChevron?: boolean;
+} & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "onClick" | "onSelect">, "label" | "className" | "disabled" | "onClick" | "onSelect" | "Icon"> & {
     /**
      * Whether the toggle is checked.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAc9E;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;IAVzB;;OAEG;aACM,OAAO;0CA2CjB,CAAC"}
+{"version":3,"file":"ToggleMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAc9E;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;IAVzB;;OAEG;aACM,OAAO;0CA4CjB,CAAC"}

package/dist/components/Menu/ToggleMenuItem.js

@@ -3,7 +3,7 @@ import { forwardRef, useId, useCallback } from "react";
 import { MenuItem } from "./MenuItem.js";
 import { ToggleInput } from "../Form/Controls/Toggle/Toggle.js";
 const ToggleMenuItem = forwardRef(
-  function ToggleMenuItem2({ className, Icon, label, onSelect, checked, disabled }, ref) {
+  function ToggleMenuItem2({ className, Icon, label, onSelect, checked, disabled, onClick }, ref) {
     const toggleId = useId();
     const onChange = useCallback(() => {
     }, []);
@@ -18,6 +18,7 @@ const ToggleMenuItem = forwardRef(
         label,
         onSelect,
         disabled,
+        onClick,
         children: /* @__PURE__ */ jsx(
           ToggleInput,
           {

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.js","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 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, { ComponentProps, forwardRef, useCallback, useId } from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle 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 plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["ToggleMenuItem"],"mappings":";;;;AAyBO,MAAM,iBAAiB;AAAA,EAC5B,SAASA,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,SAAS,GACtD,KACA;AACA,UAAM,WAAW,MAAM;AAGjB,UAAA,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,EAAE;AAMvC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ToggleMenuItem.js","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 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, { ComponentProps, forwardRef, useCallback, useId } from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle 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 plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["ToggleMenuItem"],"mappings":";;;;AAyBO,MAAM,iBAAiB;AAAA,EAC5B,SAASA,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAQ,GAC/D,KACA;AACA,UAAM,WAAW,MAAM;AAGjB,UAAA,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,EAAE;AAMvC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/Tooltip/Tooltip.cjs

@@ -92,7 +92,12 @@ const TooltipAnchor = ({
   const element = React.useMemo(() => {
     if (!React.isValidElement(children)) return;
     if (isTriggerInteractive) {
-      const props = context.getReferenceProps({ ref });
+      const props = context.getReferenceProps({
+        // To support React 18, we need to explicitly pass the children's props. See  https://github.com/element-hq/compound/issues/333
+        // In React 19, this is not necessary. `getReferenceProps` is able to get the props directly from the ref.
+        ...typeof children.props === "object" ? children.props : {},
+        ref
+      });
       return React.cloneElement(children, props);
     } else {
       const props = context.getReferenceProps({