@vector-im/compound-web 7.7.0 → 7.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Menu/CheckboxMenuItem.d.ts +1 -1
- package/dist/components/Menu/MenuItem.cjs.map +1 -1
- package/dist/components/Menu/MenuItem.d.ts +2 -2
- package/dist/components/Menu/MenuItem.d.ts.map +1 -1
- package/dist/components/Menu/MenuItem.js.map +1 -1
- package/dist/components/Menu/ToggleMenuItem.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/Menu/MenuItem.tsx +2 -1
|
@@ -10,7 +10,7 @@ export declare const CheckboxMenuItem: React.ForwardRefExoticComponent<Pick<{
|
|
|
10
10
|
label: string | null;
|
|
11
11
|
labelProps?: React.ComponentPropsWithoutRef<typeof import('../..').Text>;
|
|
12
12
|
onSelect: ((e: Event) => void) | null;
|
|
13
|
-
onClick?:
|
|
13
|
+
onClick?: React.MouseEventHandler<"a" | "button" | "div"> | undefined;
|
|
14
14
|
kind?: "primary" | "critical";
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
hideChevron?: boolean;
|
|
@@ -1 +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 * Event callback for when the item is clicked.\n * @param e\n */\n onClick?:
|
|
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 MouseEventHandler,\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?: MouseEventHandler<C>;\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":";;;;;;;;;;AAgFO,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;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { default as React, ComponentPropsWithoutRef, ComponentType, ReactElement, SVGAttributes } from 'react';
|
|
1
|
+
import { default as React, ComponentPropsWithoutRef, ComponentType, ReactElement, SVGAttributes, MouseEventHandler } from 'react';
|
|
2
2
|
import { Text } from '../Typography/Text';
|
|
3
3
|
type MenuItemElement = "button" | "a" | "div";
|
|
4
4
|
type Props<C extends MenuItemElement> = {
|
|
@@ -34,7 +34,7 @@ type Props<C extends MenuItemElement> = {
|
|
|
34
34
|
* Event callback for when the item is clicked.
|
|
35
35
|
* @param e
|
|
36
36
|
*/
|
|
37
|
-
onClick?:
|
|
37
|
+
onClick?: MouseEventHandler<C>;
|
|
38
38
|
/**
|
|
39
39
|
* The color variant of the menu item.
|
|
40
40
|
* @default primary
|
|
@@ -1 +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,
|
|
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,EAGb,iBAAiB,EAClB,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,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B;;;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"}
|
|
@@ -1 +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 * Event callback for when the item is clicked.\n * @param e\n */\n onClick?:
|
|
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 MouseEventHandler,\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?: MouseEventHandler<C>;\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":";;;;;;;;AAgFO,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;"}
|
|
@@ -10,7 +10,7 @@ export declare const ToggleMenuItem: React.ForwardRefExoticComponent<Pick<{
|
|
|
10
10
|
label: string | null;
|
|
11
11
|
labelProps?: React.ComponentPropsWithoutRef<typeof import('../..').Text>;
|
|
12
12
|
onSelect: ((e: Event) => void) | null;
|
|
13
|
-
onClick?:
|
|
13
|
+
onClick?: React.MouseEventHandler<"a" | "button" | "div"> | undefined;
|
|
14
14
|
kind?: "primary" | "critical";
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
hideChevron?: boolean;
|
package/package.json
CHANGED
|
@@ -15,6 +15,7 @@ import React, {
|
|
|
15
15
|
SVGAttributes,
|
|
16
16
|
useCallback,
|
|
17
17
|
useContext,
|
|
18
|
+
MouseEventHandler,
|
|
18
19
|
} from "react";
|
|
19
20
|
import styles from "./MenuItem.module.css";
|
|
20
21
|
import { Text } from "../Typography/Text";
|
|
@@ -59,7 +60,7 @@ type Props<C extends MenuItemElement> = {
|
|
|
59
60
|
* Event callback for when the item is clicked.
|
|
60
61
|
* @param e
|
|
61
62
|
*/
|
|
62
|
-
onClick?:
|
|
63
|
+
onClick?: MouseEventHandler<C>;
|
|
63
64
|
/**
|
|
64
65
|
* The color variant of the menu item.
|
|
65
66
|
* @default primary
|