@vector-im/compound-web 7.6.4 → 7.7.0

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/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/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/package.json

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

package/src/components/Menu/CheckboxMenuItem.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { ComponentProps, forwardRef, useCallback, useId } from "react";
+import { MenuItem } from "./MenuItem";
+import { CheckboxInput } from "../Form";
+
+type Props = Pick<
+  ComponentProps<typeof MenuItem>,
+  "className" | "label" | "onSelect" | "disabled"
+> & {
+  /**
+   * Whether the checkbox is checked.
+   */
+  checked: boolean;
+};
+
+/**
+ * A menu item with a checkbox control.
+ * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+ */
+export const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(
+  function CheckboxMenuItem(
+    { className, label, onSelect, checked, disabled },
+    ref,
+  ) {
+    const toggleId = useId();
+    // The checkbox is controlled and we intend to ignore its events. We do need
+    // to at least set onChange though to make React happy.
+    const onChange = useCallback(() => {}, []);
+
+    // <label> elements are not allowed to have a role like menuitemcheckbox, so
+    // we must instead use a plain <div> for the menu item and use aria-checked
+    // etc. to communicate its state.
+    return (
+      <MenuItem
+        as="div"
+        role="menuitemcheckbox"
+        aria-checked={checked}
+        className={className}
+        label={label}
+        onSelect={onSelect}
+        disabled={disabled}
+        Icon={
+          <CheckboxInput
+            id={toggleId}
+            ref={ref}
+            // This is purely cosmetic; really the whole MenuItem is the toggle.
+            aria-hidden
+            checked={checked}
+            disabled={disabled}
+            onChange={onChange}
+          />
+        }
+      />
+    );
+  },
+);

package/src/components/Menu/MenuItem.tsx

@@ -55,13 +55,22 @@ type Props<C extends MenuItemElement> = {
    */
   // This prop is required because it's rare to not want a selection handler
   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
@@ -79,6 +88,7 @@ export const MenuItem = <C extends MenuItemElement = "button">({
   children,
   onClick: onClickProp,
   disabled,
+  hideChevron,
   ...props
 }: Props<C>): React.ReactElement => {
   const Component = as ?? ("button" as ElementType);
@@ -143,7 +153,7 @@ export const MenuItem = <C extends MenuItemElement = "button">({
       )}
       {/* We use CSS to swap between this navigation hint and the provided
       children on hover - see the styles module. */}
-      {(Component === "button" || Component === "a") && (
+      {!hideChevron && (Component === "button" || Component === "a") && (
         <ChevronRightIcon
           width={8}
           height={24}

package/src/components/Menu/ToggleMenuItem.tsx

@@ -11,7 +11,7 @@ import { ToggleInput } from "../Form/Controls/Toggle";
 
 type Props = Pick<
   ComponentProps<typeof MenuItem>,
-  "className" | "Icon" | "label" | "onSelect" | "disabled"
+  "className" | "Icon" | "label" | "onSelect" | "disabled" | "onClick"
 > & {
   /**
    * Whether the toggle is checked.
@@ -25,7 +25,7 @@ type Props = Pick<
  */
 export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
   function ToggleMenuItem(
-    { className, Icon, label, onSelect, checked, disabled },
+    { className, Icon, label, onSelect, checked, disabled, onClick },
     ref,
   ) {
     const toggleId = useId();
@@ -46,6 +46,7 @@ export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
         label={label}
         onSelect={onSelect}
         disabled={disabled}
+        onClick={onClick}
       >
         <ToggleInput
           id={toggleId}