@vector-im/compound-web 7.9.0 → 7.10.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/ActivityMarker/UnreadCounter.module.css.cjs +1 -1
- package/dist/components/ActivityMarker/UnreadCounter.module.css.js +1 -1
- package/dist/components/Menu/CheckboxMenuItem.d.ts +1 -1
- package/dist/components/Menu/MenuItem.cjs +3 -2
- package/dist/components/Menu/MenuItem.cjs.map +1 -1
- package/dist/components/Menu/MenuItem.d.ts +1 -1
- package/dist/components/Menu/MenuItem.d.ts.map +1 -1
- package/dist/components/Menu/MenuItem.js +3 -2
- package/dist/components/Menu/MenuItem.js.map +1 -1
- package/dist/components/Menu/MenuItem.module.css.cjs +9 -8
- package/dist/components/Menu/MenuItem.module.css.cjs.map +1 -1
- package/dist/components/Menu/MenuItem.module.css.js +9 -8
- package/dist/components/Menu/MenuItem.module.css.js.map +1 -1
- package/dist/components/Menu/ToggleMenuItem.d.ts +1 -1
- package/dist/style.css +41 -32
- package/package.json +1 -1
- package/src/components/ActivityMarker/UnreadCounter.module.css +1 -1
- package/src/components/Menu/MenuItem.module.css +16 -7
- package/src/components/Menu/MenuItem.tsx +13 -11
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
3
|
const styles = {
|
|
4
|
-
"unread-counter": "_unread-
|
|
4
|
+
"unread-counter": "_unread-counter_9mg0k_8"
|
|
5
5
|
};
|
|
6
6
|
exports.default = styles;
|
|
7
7
|
//# sourceMappingURL=UnreadCounter.module.css.cjs.map
|
|
@@ -6,7 +6,7 @@ import { default as React } from 'react';
|
|
|
6
6
|
export declare const CheckboxMenuItem: React.ForwardRefExoticComponent<Pick<{
|
|
7
7
|
as?: ("a" | "button" | "div") | undefined;
|
|
8
8
|
className?: string;
|
|
9
|
-
Icon
|
|
9
|
+
Icon?: React.ComponentType<React.SVGAttributes<SVGElement>> | React.ReactElement;
|
|
10
10
|
label: string | null;
|
|
11
11
|
labelProps?: React.ComponentPropsWithoutRef<typeof import('../..').Text>;
|
|
12
12
|
onSelect: ((e: Event) => void) | null;
|
|
@@ -49,6 +49,7 @@ const MenuItem = ({
|
|
|
49
49
|
className: classNames(className, MenuItem_module.default.item, {
|
|
50
50
|
[MenuItem_module.default.interactive]: onSelect !== null,
|
|
51
51
|
[MenuItem_module.default["no-label"]]: label === null,
|
|
52
|
+
[MenuItem_module.default["no-icon"]]: !Icon,
|
|
52
53
|
[MenuItem_module.default["disabled"]]: disabled
|
|
53
54
|
}),
|
|
54
55
|
"data-kind": kind,
|
|
@@ -56,7 +57,7 @@ const MenuItem = ({
|
|
|
56
57
|
disabled: Component === "button" ? disabled : void 0,
|
|
57
58
|
"aria-disabled": Component === "button" ? void 0 : disabled,
|
|
58
59
|
children: [
|
|
59
|
-
iconIsReactElement ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: MenuItem_module.default.icon, children: componentIcon }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
60
|
+
Icon && (iconIsReactElement ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: MenuItem_module.default.icon, children: componentIcon }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
60
61
|
SvgIcon,
|
|
61
62
|
{
|
|
62
63
|
width: 24,
|
|
@@ -64,7 +65,7 @@ const MenuItem = ({
|
|
|
64
65
|
className: MenuItem_module.default.icon,
|
|
65
66
|
"aria-hidden": true
|
|
66
67
|
}
|
|
67
|
-
),
|
|
68
|
+
)),
|
|
68
69
|
label !== null && /* @__PURE__ */ jsxRuntime.jsx(
|
|
69
70
|
Text.Text,
|
|
70
71
|
{
|
|
@@ -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 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
|
|
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<HTMLElementTagNameMap[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[\"no-icon\"]]: !Icon,\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 {Icon &&\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","jsx","Slot","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,gBAAA,QAAO,SAAS,CAAC,GAAG,CAAC;AAAA,QACtB,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,SACE,qBACEC,+BAAAC,UAAAA,MAAA,EAAK,WAAWF,gBAAO,QAAA,MAAO,yBAAc,IAE7CC,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWD,gBAAO,QAAA;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAIlB,UAAU,QACTC,2BAAA;AAAA,UAACE,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,QACxDC,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWD,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,UAEAC,+BAAC,QAAQ,iBAAR,EAAwB,UACtB,UACH,QAAA,CAAA;AAEJ;;"}
|
|
@@ -15,7 +15,7 @@ type Props<C extends MenuItemElement> = {
|
|
|
15
15
|
* The icon to show on this menu item.
|
|
16
16
|
* When `Icon` is a ReactElement, it should spread the props
|
|
17
17
|
*/
|
|
18
|
-
Icon
|
|
18
|
+
Icon?: ComponentType<SVGAttributes<SVGElement>> | ReactElement;
|
|
19
19
|
/**
|
|
20
20
|
* The label to show on this menu item.
|
|
21
21
|
*/
|
|
@@ -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,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;
|
|
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,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,GAAG,YAAY,CAAC;IAC/D;;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,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD;;;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,YAyFnB,CAAC"}
|
|
@@ -47,6 +47,7 @@ const MenuItem = ({
|
|
|
47
47
|
className: classNames(className, styles.item, {
|
|
48
48
|
[styles.interactive]: onSelect !== null,
|
|
49
49
|
[styles["no-label"]]: label === null,
|
|
50
|
+
[styles["no-icon"]]: !Icon,
|
|
50
51
|
[styles["disabled"]]: disabled
|
|
51
52
|
}),
|
|
52
53
|
"data-kind": kind,
|
|
@@ -54,7 +55,7 @@ const MenuItem = ({
|
|
|
54
55
|
disabled: Component === "button" ? disabled : void 0,
|
|
55
56
|
"aria-disabled": Component === "button" ? void 0 : disabled,
|
|
56
57
|
children: [
|
|
57
|
-
iconIsReactElement ? /* @__PURE__ */ jsx(Slot, { className: styles.icon, children: componentIcon }) : /* @__PURE__ */ jsx(
|
|
58
|
+
Icon && (iconIsReactElement ? /* @__PURE__ */ jsx(Slot, { className: styles.icon, children: componentIcon }) : /* @__PURE__ */ jsx(
|
|
58
59
|
SvgIcon,
|
|
59
60
|
{
|
|
60
61
|
width: 24,
|
|
@@ -62,7 +63,7 @@ const MenuItem = ({
|
|
|
62
63
|
className: styles.icon,
|
|
63
64
|
"aria-hidden": true
|
|
64
65
|
}
|
|
65
|
-
),
|
|
66
|
+
)),
|
|
66
67
|
label !== null && /* @__PURE__ */ jsx(
|
|
67
68
|
Text,
|
|
68
69
|
{
|
|
@@ -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 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
|
|
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<HTMLElementTagNameMap[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[\"no-icon\"]]: !Icon,\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 {Icon &&\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,SAAS,CAAC,GAAG,CAAC;AAAA,QACtB,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,SACE,qBACE,oBAAA,MAAA,EAAK,WAAW,OAAO,MAAO,yBAAc,IAE7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAIlB,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;"}
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const item = "
|
|
4
|
-
const interactive = "
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const disabled = "
|
|
3
|
+
const item = "_item_dyt4i_8";
|
|
4
|
+
const interactive = "_interactive_dyt4i_26";
|
|
5
|
+
const label = "_label_dyt4i_34";
|
|
6
|
+
const icon = "_icon_dyt4i_50";
|
|
7
|
+
const disabled = "_disabled_dyt4i_118";
|
|
8
8
|
const styles = {
|
|
9
9
|
item,
|
|
10
10
|
interactive,
|
|
11
|
-
"no-label": "_no-
|
|
12
|
-
icon,
|
|
11
|
+
"no-label": "_no-label_dyt4i_30",
|
|
13
12
|
label,
|
|
14
|
-
"
|
|
13
|
+
"no-icon": "_no-icon_dyt4i_41",
|
|
14
|
+
icon,
|
|
15
|
+
"nav-hint": "_nav-hint_dyt4i_59",
|
|
15
16
|
disabled
|
|
16
17
|
};
|
|
17
18
|
exports.default = styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuItem.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
const item = "
|
|
2
|
-
const interactive = "
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
const disabled = "
|
|
1
|
+
const item = "_item_dyt4i_8";
|
|
2
|
+
const interactive = "_interactive_dyt4i_26";
|
|
3
|
+
const label = "_label_dyt4i_34";
|
|
4
|
+
const icon = "_icon_dyt4i_50";
|
|
5
|
+
const disabled = "_disabled_dyt4i_118";
|
|
6
6
|
const styles = {
|
|
7
7
|
item,
|
|
8
8
|
interactive,
|
|
9
|
-
"no-label": "_no-
|
|
10
|
-
icon,
|
|
9
|
+
"no-label": "_no-label_dyt4i_30",
|
|
11
10
|
label,
|
|
12
|
-
"
|
|
11
|
+
"no-icon": "_no-icon_dyt4i_41",
|
|
12
|
+
icon,
|
|
13
|
+
"nav-hint": "_nav-hint_dyt4i_59",
|
|
13
14
|
disabled
|
|
14
15
|
};
|
|
15
16
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuItem.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
|
|
@@ -6,7 +6,7 @@ import { default as React } from 'react';
|
|
|
6
6
|
export declare const ToggleMenuItem: React.ForwardRefExoticComponent<Pick<{
|
|
7
7
|
as?: ("a" | "button" | "div") | undefined;
|
|
8
8
|
className?: string;
|
|
9
|
-
Icon
|
|
9
|
+
Icon?: React.ComponentType<React.SVGAttributes<SVGElement>> | React.ReactElement;
|
|
10
10
|
label: string | null;
|
|
11
11
|
labelProps?: React.ComponentPropsWithoutRef<typeof import('../..').Text>;
|
|
12
12
|
onSelect: ((e: Event) => void) | null;
|
package/dist/style.css
CHANGED
|
@@ -836,7 +836,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
|
836
836
|
Please see LICENSE files in the repository root for full details.
|
|
837
837
|
*/
|
|
838
838
|
|
|
839
|
-
.
|
|
839
|
+
._item_dyt4i_8 {
|
|
840
840
|
display: grid;
|
|
841
841
|
grid-template: "icon label ." auto "empty1 label empty2" auto / auto auto minmax(
|
|
842
842
|
/* Reserve space for the chevron so that the layout doesn't shift on
|
|
@@ -854,96 +854,105 @@ Please see LICENSE files in the repository root for full details.
|
|
|
854
854
|
background: var(--cpd-color-bg-action-secondary-rest);
|
|
855
855
|
}
|
|
856
856
|
|
|
857
|
-
.
|
|
857
|
+
._item_dyt4i_8._interactive_dyt4i_26 {
|
|
858
858
|
cursor: pointer;
|
|
859
859
|
}
|
|
860
860
|
|
|
861
|
-
.
|
|
861
|
+
._item_dyt4i_8._no-label_dyt4i_30 {
|
|
862
862
|
grid-template: "icon ." auto / auto 1fr;
|
|
863
863
|
}
|
|
864
864
|
|
|
865
|
-
.
|
|
866
|
-
grid-area:
|
|
867
|
-
margin-inline-end: var(--cpd-space-
|
|
865
|
+
._label_dyt4i_34 {
|
|
866
|
+
grid-area: label;
|
|
867
|
+
margin-inline-end: var(--cpd-space-4x);
|
|
868
|
+
text-align: start;
|
|
869
|
+
word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
|
|
868
870
|
}
|
|
869
871
|
|
|
870
|
-
.
|
|
871
|
-
|
|
872
|
+
._item_dyt4i_8._no-icon_dyt4i_41 {
|
|
873
|
+
grid-template: "label ." auto / auto 1fr;
|
|
874
|
+
|
|
875
|
+
._label_dyt4i_34 {
|
|
876
|
+
/* Without icon, the height changes when hovered */
|
|
877
|
+
min-block-size: 24px;
|
|
878
|
+
}
|
|
872
879
|
}
|
|
873
880
|
|
|
874
|
-
.
|
|
875
|
-
grid-area:
|
|
881
|
+
._icon_dyt4i_50 {
|
|
882
|
+
grid-area: icon;
|
|
883
|
+
margin-inline-end: var(--cpd-space-3x);
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
._item_dyt4i_8._no-label_dyt4i_30 ._icon_dyt4i_50 {
|
|
876
887
|
margin-inline-end: var(--cpd-space-4x);
|
|
877
|
-
text-align: start;
|
|
878
|
-
word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
|
|
879
888
|
}
|
|
880
889
|
|
|
881
|
-
._nav-
|
|
890
|
+
._nav-hint_dyt4i_59 {
|
|
882
891
|
/* Hidden until the item is hovered over */
|
|
883
892
|
display: none;
|
|
884
893
|
flex-shrink: 0;
|
|
885
894
|
}
|
|
886
895
|
|
|
887
|
-
button.
|
|
896
|
+
button._item_dyt4i_8 {
|
|
888
897
|
appearance: none;
|
|
889
898
|
border: none;
|
|
890
899
|
}
|
|
891
900
|
|
|
892
|
-
.
|
|
901
|
+
._item_dyt4i_8[data-kind="primary"] > ._label_dyt4i_34 {
|
|
893
902
|
color: var(--cpd-color-text-primary);
|
|
894
903
|
}
|
|
895
904
|
|
|
896
|
-
.
|
|
905
|
+
._item_dyt4i_8[data-kind="primary"] > ._icon_dyt4i_50 {
|
|
897
906
|
color: var(--cpd-color-icon-primary);
|
|
898
907
|
}
|
|
899
908
|
|
|
900
|
-
.
|
|
909
|
+
._item_dyt4i_8[data-kind="primary"] > ._nav-hint_dyt4i_59 {
|
|
901
910
|
color: var(--cpd-color-icon-tertiary);
|
|
902
911
|
}
|
|
903
912
|
|
|
904
|
-
.
|
|
913
|
+
._item_dyt4i_8[data-kind="critical"] > ._label_dyt4i_34 {
|
|
905
914
|
color: var(--cpd-color-text-critical-primary);
|
|
906
915
|
}
|
|
907
916
|
|
|
908
|
-
.
|
|
909
|
-
.
|
|
917
|
+
._item_dyt4i_8[data-kind="critical"] > ._icon_dyt4i_50,
|
|
918
|
+
._item_dyt4i_8[data-kind="critical"] > ._nav-hint_dyt4i_59 {
|
|
910
919
|
color: var(--cpd-color-icon-critical-primary);
|
|
911
920
|
}
|
|
912
921
|
|
|
913
922
|
@media (hover) {
|
|
914
|
-
.
|
|
923
|
+
._item_dyt4i_8._interactive_dyt4i_26[data-kind="primary"]:hover {
|
|
915
924
|
background: var(--cpd-color-bg-action-secondary-hovered);
|
|
916
925
|
}
|
|
917
926
|
|
|
918
|
-
.
|
|
927
|
+
._item_dyt4i_8._interactive_dyt4i_26[data-kind="critical"]:hover {
|
|
919
928
|
background: var(--cpd-color-bg-critical-subtle);
|
|
920
929
|
}
|
|
921
930
|
|
|
922
931
|
/* Replace the children with the navigation hint on hover */
|
|
923
|
-
.
|
|
932
|
+
._item_dyt4i_8._interactive_dyt4i_26:hover > ._nav-hint_dyt4i_59 {
|
|
924
933
|
display: initial;
|
|
925
934
|
}
|
|
926
935
|
|
|
927
|
-
.
|
|
936
|
+
._item_dyt4i_8._interactive_dyt4i_26:hover > ._nav-hint_dyt4i_59 ~ * {
|
|
928
937
|
display: none;
|
|
929
938
|
}
|
|
930
939
|
}
|
|
931
940
|
|
|
932
|
-
.
|
|
941
|
+
._item_dyt4i_8._interactive_dyt4i_26[data-kind="primary"]:active {
|
|
933
942
|
background: var(--cpd-color-bg-action-secondary-pressed);
|
|
934
943
|
}
|
|
935
944
|
|
|
936
|
-
.
|
|
945
|
+
._item_dyt4i_8._interactive_dyt4i_26[data-kind="critical"]:active {
|
|
937
946
|
background: var(--cpd-color-bg-critical-subtle-hovered);
|
|
938
947
|
}
|
|
939
948
|
|
|
940
|
-
.
|
|
949
|
+
._item_dyt4i_8[data-kind]._disabled_dyt4i_118 {
|
|
941
950
|
pointer-events: none;
|
|
942
951
|
}
|
|
943
952
|
|
|
944
|
-
.
|
|
945
|
-
.
|
|
946
|
-
.
|
|
953
|
+
._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._label_dyt4i_34,
|
|
954
|
+
._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._icon_dyt4i_50,
|
|
955
|
+
._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._nav-hint_dyt4i_59 {
|
|
947
956
|
color: var(--cpd-color-text-disabled);
|
|
948
957
|
}
|
|
949
958
|
/*
|
|
@@ -2633,8 +2642,8 @@ Please see LICENSE files in the repository root for full details.
|
|
|
2633
2642
|
* Please see LICENSE files in the repository root for full details.
|
|
2634
2643
|
*/
|
|
2635
2644
|
|
|
2636
|
-
._unread-
|
|
2637
|
-
border-radius:
|
|
2645
|
+
._unread-counter_9mg0k_8 {
|
|
2646
|
+
border-radius: 38px;
|
|
2638
2647
|
font: var(--cpd-font-body-xs-semibold);
|
|
2639
2648
|
color: var(--cpd-color-text-on-solid-primary);
|
|
2640
2649
|
background-color: var(--cpd-color-icon-success-primary);
|
package/package.json
CHANGED
|
@@ -31,6 +31,22 @@ Please see LICENSE files in the repository root for full details.
|
|
|
31
31
|
grid-template: "icon ." auto / auto 1fr;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
.label {
|
|
35
|
+
grid-area: label;
|
|
36
|
+
margin-inline-end: var(--cpd-space-4x);
|
|
37
|
+
text-align: start;
|
|
38
|
+
word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.item.no-icon {
|
|
42
|
+
grid-template: "label ." auto / auto 1fr;
|
|
43
|
+
|
|
44
|
+
.label {
|
|
45
|
+
/* Without icon, the height changes when hovered */
|
|
46
|
+
min-block-size: 24px;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
34
50
|
.icon {
|
|
35
51
|
grid-area: icon;
|
|
36
52
|
margin-inline-end: var(--cpd-space-3x);
|
|
@@ -40,13 +56,6 @@ Please see LICENSE files in the repository root for full details.
|
|
|
40
56
|
margin-inline-end: var(--cpd-space-4x);
|
|
41
57
|
}
|
|
42
58
|
|
|
43
|
-
.label {
|
|
44
|
-
grid-area: label;
|
|
45
|
-
margin-inline-end: var(--cpd-space-4x);
|
|
46
|
-
text-align: start;
|
|
47
|
-
word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
|
|
48
|
-
}
|
|
49
|
-
|
|
50
59
|
.nav-hint {
|
|
51
60
|
/* Hidden until the item is hovered over */
|
|
52
61
|
display: none;
|
|
@@ -39,7 +39,7 @@ type Props<C extends MenuItemElement> = {
|
|
|
39
39
|
* The icon to show on this menu item.
|
|
40
40
|
* When `Icon` is a ReactElement, it should spread the props
|
|
41
41
|
*/
|
|
42
|
-
Icon
|
|
42
|
+
Icon?: ComponentType<SVGAttributes<SVGElement>> | ReactElement;
|
|
43
43
|
/**
|
|
44
44
|
* The label to show on this menu item.
|
|
45
45
|
*/
|
|
@@ -123,6 +123,7 @@ export const MenuItem = <C extends MenuItemElement = "button">({
|
|
|
123
123
|
className={classnames(className, styles.item, {
|
|
124
124
|
[styles.interactive]: onSelect !== null,
|
|
125
125
|
[styles["no-label"]]: label === null,
|
|
126
|
+
[styles["no-icon"]]: !Icon,
|
|
126
127
|
[styles["disabled"]]: disabled,
|
|
127
128
|
})}
|
|
128
129
|
data-kind={kind}
|
|
@@ -130,16 +131,17 @@ export const MenuItem = <C extends MenuItemElement = "button">({
|
|
|
130
131
|
disabled={Component === "button" ? disabled : undefined}
|
|
131
132
|
aria-disabled={Component === "button" ? undefined : disabled}
|
|
132
133
|
>
|
|
133
|
-
{
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
134
|
+
{Icon &&
|
|
135
|
+
(iconIsReactElement ? (
|
|
136
|
+
<Slot className={styles.icon}>{componentIcon}</Slot>
|
|
137
|
+
) : (
|
|
138
|
+
<SvgIcon
|
|
139
|
+
width={24}
|
|
140
|
+
height={24}
|
|
141
|
+
className={styles.icon}
|
|
142
|
+
aria-hidden={true}
|
|
143
|
+
/>
|
|
144
|
+
))}
|
|
143
145
|
|
|
144
146
|
{label !== null && (
|
|
145
147
|
<Text
|