@frontify/fondue 12.0.0-beta.169 → 12.0.0-beta.170
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/MenuItem/MenuItem.es.js +16 -16
- package/dist/components/MenuItem/MenuItem.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import t, { useState as C, useEffect as M } from "react";
|
|
2
2
|
import { merge as p } from "../../utilities/merge.es.js";
|
|
3
|
-
import { IconSize as
|
|
3
|
+
import { IconSize as d } from "../../foundation/Icon/IconSize.es.js";
|
|
4
4
|
import { MenuItemContent as N } from "./MenuItemContent.es.js";
|
|
5
5
|
import { MenuItemContentSize as n, MenuItemStyle as e, SelectionIndicatorIcon as s } from "./types.es.js";
|
|
6
6
|
import { getItemElementType as R } from "../../utilities/elements.es.js";
|
|
@@ -21,37 +21,37 @@ const P = {
|
|
|
21
21
|
[e.Danger]: {
|
|
22
22
|
Default: "tw-text-red-60",
|
|
23
23
|
Active: "tw-text-red-70",
|
|
24
|
-
Disabled: "tw-text-
|
|
24
|
+
Disabled: "tw-text-text-disabled"
|
|
25
25
|
},
|
|
26
26
|
[e.Warning]: {
|
|
27
27
|
Default: "tw-text-text-warning",
|
|
28
28
|
Active: "tw-text-yellow-90",
|
|
29
|
-
Disabled: "tw-text-
|
|
29
|
+
Disabled: "tw-text-text-disabled"
|
|
30
30
|
}
|
|
31
31
|
}, H = {
|
|
32
32
|
[e.Primary]: "hover:tw-text-text",
|
|
33
33
|
[e.Danger]: "hover:tw-text-text-negative",
|
|
34
34
|
[e.Warning]: "hover:tw-text-text-warning"
|
|
35
|
-
},
|
|
35
|
+
}, S = "tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2", W = "hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover", u = p(["tw-w-full tw-text-left tw-py-2 tw-px-5", W]), F = "tw-bg-box-selected", X = ({
|
|
36
36
|
title: a,
|
|
37
|
-
decorator:
|
|
38
|
-
switchComponent:
|
|
39
|
-
subtitle:
|
|
37
|
+
decorator: b,
|
|
38
|
+
switchComponent: v,
|
|
39
|
+
subtitle: g,
|
|
40
40
|
size: o = n.Small,
|
|
41
41
|
style: f = e.Primary,
|
|
42
42
|
disabled: i = !1,
|
|
43
43
|
active: w = !1,
|
|
44
44
|
checked: I = !1,
|
|
45
|
-
selectionIndicator:
|
|
45
|
+
selectionIndicator: D = s.Check,
|
|
46
46
|
children: r,
|
|
47
47
|
link: l,
|
|
48
48
|
onClick: m
|
|
49
49
|
}) => {
|
|
50
|
-
const E = o === n.XSmall ?
|
|
50
|
+
const E = o === n.XSmall ? d.Size16 : d.Size20, y = {
|
|
51
51
|
[s.CaretRight]: /* @__PURE__ */ t.createElement(_, { "data-test-id": "menu-item-caret", size: E }),
|
|
52
52
|
[s.Check]: w && /* @__PURE__ */ t.createElement(L, { "data-test-id": "menu-item-active", size: E }),
|
|
53
53
|
[s.None]: null
|
|
54
|
-
}[
|
|
54
|
+
}[D];
|
|
55
55
|
let c = "Default";
|
|
56
56
|
i ? c = "Disabled" : w && (c = "Active");
|
|
57
57
|
const h = P[f][c], [x, A] = C("span");
|
|
@@ -64,7 +64,7 @@ const P = {
|
|
|
64
64
|
role: "menuitem",
|
|
65
65
|
className: p([
|
|
66
66
|
"tw-text-sm tw-leading-4 tw-text-text-weak",
|
|
67
|
-
|
|
67
|
+
S,
|
|
68
68
|
I ? F : ""
|
|
69
69
|
])
|
|
70
70
|
},
|
|
@@ -75,7 +75,7 @@ const P = {
|
|
|
75
75
|
"div",
|
|
76
76
|
{
|
|
77
77
|
className: p([
|
|
78
|
-
|
|
78
|
+
S,
|
|
79
79
|
H[f],
|
|
80
80
|
T[o],
|
|
81
81
|
i && "tw-bg-box-disabled tw-pointer-events-none",
|
|
@@ -87,13 +87,13 @@ const P = {
|
|
|
87
87
|
N,
|
|
88
88
|
{
|
|
89
89
|
title: a,
|
|
90
|
-
decorator:
|
|
91
|
-
subtitle: o === n.Large ?
|
|
90
|
+
decorator: b,
|
|
91
|
+
subtitle: o === n.Large ? g : void 0,
|
|
92
92
|
size: o,
|
|
93
|
-
switchComponent:
|
|
93
|
+
switchComponent: v
|
|
94
94
|
}
|
|
95
95
|
),
|
|
96
|
-
/* @__PURE__ */ t.createElement("div", { className: "tw-flex-none" },
|
|
96
|
+
/* @__PURE__ */ t.createElement("div", { className: "tw-flex-none" }, y)
|
|
97
97
|
));
|
|
98
98
|
};
|
|
99
99
|
X.displayName = "FondueMenuItem";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.es.js","sources":["../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { MouseEvent, ReactNode, useEffect, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { IconCaretRight, IconCheckMark } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { MenuItemContent, MenuItemContentProps } from '@components/MenuItem/MenuItemContent';\nimport { MenuItemContentSize, MenuItemStyle, SelectionIndicatorIcon } from './types';\nimport { getItemElementType } from '@utilities/elements';\n\nexport type MenuItemProps = {\n style?: MenuItemStyle;\n disabled?: boolean;\n active?: boolean;\n checked?: boolean;\n selectionIndicator?: SelectionIndicatorIcon;\n /** @deprecated this prop is not being used anymore */\n type?: string;\n link?: string;\n onClick?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n children?: ReactNode;\n} & Omit<MenuItemContentProps, 'iconSize'>;\n\nexport const menuItemSizeClassMap: Record<MenuItemContentSize, string> = {\n [MenuItemContentSize.XSmall]: 'tw-px-5 tw-py-2 tw-min-h-[36px]',\n [MenuItemContentSize.Small]: 'tw-px-5 tw-py-2.5 tw-min-h-[36px]',\n [MenuItemContentSize.Large]: 'tw-px-5 tw-py-3 tw-min-h-[60px]',\n};\n\nexport enum MenuItemTextColorState {\n Default = 'Default',\n Active = 'Active',\n Disabled = 'Disabled',\n}\n\nexport const menuItemTextColorRecord: Record<MenuItemStyle, Record<MenuItemTextColorState, string>> = {\n [MenuItemStyle.Primary]: {\n [MenuItemTextColorState.Default]: 'tw-text-text-x-weak',\n [MenuItemTextColorState.Active]: 'tw-text-text',\n [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n },\n [MenuItemStyle.Danger]: {\n [MenuItemTextColorState.Default]: 'tw-text-red-60',\n [MenuItemTextColorState.Active]: 'tw-text-red-70',\n [MenuItemTextColorState.Disabled]: 'tw-text-
|
|
1
|
+
{"version":3,"file":"MenuItem.es.js","sources":["../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { MouseEvent, ReactNode, useEffect, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { IconCaretRight, IconCheckMark } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { MenuItemContent, MenuItemContentProps } from '@components/MenuItem/MenuItemContent';\nimport { MenuItemContentSize, MenuItemStyle, SelectionIndicatorIcon } from './types';\nimport { getItemElementType } from '@utilities/elements';\n\nexport type MenuItemProps = {\n style?: MenuItemStyle;\n disabled?: boolean;\n active?: boolean;\n checked?: boolean;\n selectionIndicator?: SelectionIndicatorIcon;\n /** @deprecated this prop is not being used anymore */\n type?: string;\n link?: string;\n onClick?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n children?: ReactNode;\n} & Omit<MenuItemContentProps, 'iconSize'>;\n\nexport const menuItemSizeClassMap: Record<MenuItemContentSize, string> = {\n [MenuItemContentSize.XSmall]: 'tw-px-5 tw-py-2 tw-min-h-[36px]',\n [MenuItemContentSize.Small]: 'tw-px-5 tw-py-2.5 tw-min-h-[36px]',\n [MenuItemContentSize.Large]: 'tw-px-5 tw-py-3 tw-min-h-[60px]',\n};\n\nexport enum MenuItemTextColorState {\n Default = 'Default',\n Active = 'Active',\n Disabled = 'Disabled',\n}\n\nexport const menuItemTextColorRecord: Record<MenuItemStyle, Record<MenuItemTextColorState, string>> = {\n [MenuItemStyle.Primary]: {\n [MenuItemTextColorState.Default]: 'tw-text-text-x-weak',\n [MenuItemTextColorState.Active]: 'tw-text-text',\n [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n },\n [MenuItemStyle.Danger]: {\n [MenuItemTextColorState.Default]: 'tw-text-red-60',\n [MenuItemTextColorState.Active]: 'tw-text-red-70',\n [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n },\n [MenuItemStyle.Warning]: {\n [MenuItemTextColorState.Default]: 'tw-text-text-warning',\n [MenuItemTextColorState.Active]: 'tw-text-yellow-90',\n [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n },\n};\n\nconst menuItemHoverColorRecord: Record<MenuItemStyle, string> = {\n [MenuItemStyle.Primary]: 'hover:tw-text-text',\n [MenuItemStyle.Danger]: 'hover:tw-text-text-negative',\n [MenuItemStyle.Warning]: 'hover:tw-text-text-warning',\n};\n\nconst ITEM_WRAPPER_CLASSES =\n 'tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2';\nconst ITEM_HOVER_CLASSES = 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover';\nconst ITEM_BASE_CLASSES = merge(['tw-w-full tw-text-left tw-py-2 tw-px-5', ITEM_HOVER_CLASSES]);\nconst ITEM_CHECKED_CLASSES = 'tw-bg-box-selected';\n\nexport const MenuItem = ({\n title,\n decorator,\n switchComponent,\n subtitle,\n size = MenuItemContentSize.Small,\n style = MenuItemStyle.Primary,\n disabled = false,\n active = false,\n checked = false,\n selectionIndicator = SelectionIndicatorIcon.Check,\n children,\n link,\n onClick,\n}: MenuItemProps) => {\n const currentIconSize = size === MenuItemContentSize.XSmall ? IconSize.Size16 : IconSize.Size20;\n\n const currentIcon = {\n [SelectionIndicatorIcon.CaretRight]: <IconCaretRight data-test-id=\"menu-item-caret\" size={currentIconSize} />,\n [SelectionIndicatorIcon.Check]: active && (\n <IconCheckMark data-test-id=\"menu-item-active\" size={currentIconSize} />\n ),\n [SelectionIndicatorIcon.None]: null,\n }[selectionIndicator];\n\n let textState = MenuItemTextColorState.Default;\n if (disabled) {\n textState = MenuItemTextColorState.Disabled;\n } else if (active) {\n textState = MenuItemTextColorState.Active;\n }\n\n const textClass = menuItemTextColorRecord[style][textState];\n\n const [mainElementType, setMainElementType] = useState('span');\n\n useEffect(() => {\n if (link || onClick) {\n setMainElementType(getItemElementType(link, onClick));\n }\n }, [link, onClick]);\n\n return (\n <>\n {children && (\n <li\n data-test-id=\"menu-item\"\n role=\"menuitem\"\n className={merge([\n 'tw-text-sm tw-leading-4 tw-text-text-weak',\n ITEM_WRAPPER_CLASSES,\n checked ? ITEM_CHECKED_CLASSES : '',\n ])}\n >\n {mainElementType === 'a' && (\n <a href={link} className={ITEM_BASE_CLASSES} onClick={onClick}>\n {children}\n </a>\n )}\n {mainElementType === 'button' && (\n <button type=\"button\" disabled={disabled} onClick={onClick} className={ITEM_BASE_CLASSES}>\n {children}\n </button>\n )}\n {mainElementType === 'span' && <span className={ITEM_BASE_CLASSES}>{children}</span>}\n </li>\n )}\n {/* The implementation without children is the first behavior of the MenuItem component.\n This way we can introduce the new changes without breaking the current usage of it.\n In the future, this implementation should be replaced by the new one and the projects updated properly\n */}\n {!children && (\n <div\n className={merge([\n ITEM_WRAPPER_CLASSES,\n menuItemHoverColorRecord[style],\n menuItemSizeClassMap[size],\n disabled && 'tw-bg-box-disabled tw-pointer-events-none',\n active && 'tw-font-medium',\n textClass,\n ])}\n >\n <MenuItemContent\n title={title}\n decorator={decorator}\n subtitle={size === MenuItemContentSize.Large ? subtitle : undefined}\n size={size}\n switchComponent={switchComponent}\n />\n <div className=\"tw-flex-none\">{currentIcon}</div>\n </div>\n )}\n </>\n );\n};\nMenuItem.displayName = 'FondueMenuItem';\n"],"names":["menuItemSizeClassMap","MenuItemContentSize","MenuItemTextColorState","menuItemTextColorRecord","MenuItemStyle","menuItemHoverColorRecord","ITEM_WRAPPER_CLASSES","ITEM_HOVER_CLASSES","ITEM_BASE_CLASSES","merge","ITEM_CHECKED_CLASSES","MenuItem","title","decorator","switchComponent","subtitle","size","style","disabled","active","checked","selectionIndicator","SelectionIndicatorIcon","children","link","onClick","currentIconSize","IconSize","currentIcon","IconCaretRight","IconCheckMark","textState","textClass","mainElementType","setMainElementType","useState","useEffect","getItemElementType","React","MenuItemContent"],"mappings":"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"}
|