@hitachivantara/uikit-react-core 5.58.3 → 5.59.0
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/cjs/BulkActions/BulkActions.styles.cjs +13 -1
- package/dist/cjs/BulkActions/BulkActions.styles.cjs.map +1 -1
- package/dist/cjs/Button/Button.styles.cjs.map +1 -1
- package/dist/cjs/DropDownMenu/DropDownMenu.cjs +12 -20
- package/dist/cjs/DropDownMenu/DropDownMenu.cjs.map +1 -1
- package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs +4 -34
- package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs.map +1 -1
- package/dist/cjs/DropdownButton/DropdownButton.cjs +57 -0
- package/dist/cjs/DropdownButton/DropdownButton.cjs.map +1 -0
- package/dist/cjs/DropdownButton/DropdownButton.styles.cjs +65 -0
- package/dist/cjs/DropdownButton/DropdownButton.styles.cjs.map +1 -0
- package/dist/cjs/IconButton/IconButton.cjs +2 -1
- package/dist/cjs/IconButton/IconButton.cjs.map +1 -1
- package/dist/cjs/MultiButton/MultiButton.cjs +20 -5
- package/dist/cjs/MultiButton/MultiButton.cjs.map +1 -1
- package/dist/cjs/MultiButton/MultiButton.styles.cjs +56 -326
- package/dist/cjs/MultiButton/MultiButton.styles.cjs.map +1 -1
- package/dist/cjs/Select/Select.cjs +6 -2
- package/dist/cjs/Select/Select.cjs.map +1 -1
- package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs +0 -3
- package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs.map +1 -1
- package/dist/esm/BulkActions/BulkActions.styles.js +13 -1
- package/dist/esm/BulkActions/BulkActions.styles.js.map +1 -1
- package/dist/esm/Button/Button.styles.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.js +12 -20
- package/dist/esm/DropDownMenu/DropDownMenu.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.styles.js +4 -34
- package/dist/esm/DropDownMenu/DropDownMenu.styles.js.map +1 -1
- package/dist/esm/DropdownButton/DropdownButton.js +58 -0
- package/dist/esm/DropdownButton/DropdownButton.js.map +1 -0
- package/dist/esm/DropdownButton/DropdownButton.styles.js +65 -0
- package/dist/esm/DropdownButton/DropdownButton.styles.js.map +1 -0
- package/dist/esm/IconButton/IconButton.js +2 -1
- package/dist/esm/IconButton/IconButton.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.js +22 -7
- package/dist/esm/MultiButton/MultiButton.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.styles.js +56 -326
- package/dist/esm/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/Select/Select.js +6 -2
- package/dist/esm/Select/Select.js.map +1 -1
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js +0 -3
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js.map +1 -1
- package/dist/types/index.d.ts +96 -94
- package/package.json +5 -5
- package/dist/cjs/Select/SelectButton.cjs +0 -92
- package/dist/cjs/Select/SelectButton.cjs.map +0 -1
- package/dist/esm/Select/SelectButton.js +0 -92
- package/dist/esm/Select/SelectButton.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarContent.styles.cjs","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\nimport { actionsGenericClasses } from \"../../ActionsGeneric\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvSnackbar-Content\",\n {\n root: {\n width: \"310px\",\n minHeight: \"52px\",\n maxHeight: \"92px\",\n padding: theme.space.xs,\n boxShadow: \"none\",\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n message: {\n padding: 0,\n width: \"100%\",\n },\n messageSpan: {\n display: \"flex\",\n alignItems: \"center\",\n minHeight: \"32px\",\n },\n messageText: {\n paddingLeft: theme.space.xs,\n color: theme.colors.base_dark,\n fontFamily: theme.fontFamily.body,\n maxHeight: \"72px\",\n wordBreak: \"break-word\",\n textWrap: \"balance\",\n overflow: \"hidden\",\n },\n action: {\n textAlign: \"right\",\n paddingLeft: theme.space.xs,\n marginLeft: \"auto\",\n [`& .${actionsGenericClasses.button}`]: {\n borderColor: theme.colors.base_dark,\n color: theme.colors.base_dark,\n \"&:hover\": {\n borderColor: theme.colors.base_dark,\n },\n },\n },\n iconVariant: {},\n }\n);\n"],"names":["createClasses","theme","actionsGenericClasses"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SnackbarContent.styles.cjs","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\nimport { actionsGenericClasses } from \"../../ActionsGeneric\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvSnackbar-Content\",\n {\n root: {\n width: \"310px\",\n minHeight: \"52px\",\n maxHeight: \"92px\",\n padding: theme.space.xs,\n boxShadow: \"none\",\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n message: {\n padding: 0,\n width: \"100%\",\n },\n messageSpan: {\n display: \"flex\",\n alignItems: \"center\",\n minHeight: \"32px\",\n },\n messageText: {\n paddingLeft: theme.space.xs,\n color: theme.colors.base_dark,\n fontFamily: theme.fontFamily.body,\n maxHeight: \"72px\",\n wordBreak: \"break-word\",\n textWrap: \"balance\",\n overflow: \"hidden\",\n },\n action: {\n textAlign: \"right\",\n paddingLeft: theme.space.xs,\n marginLeft: \"auto\",\n [`& .${actionsGenericClasses.button}`]: {\n borderColor: theme.colors.base_dark,\n color: theme.colors.base_dark,\n \"&:hover\": {\n borderColor: theme.colors.base_dark,\n },\n },\n },\n iconVariant: {},\n }\n);\n"],"names":["createClasses","theme","actionsGenericClasses"],"mappings":";;;;;AAKa,MAAA,EAAE,YAAY,cAAA,IAAkBA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,WAAW;AAAA,MACX,SAASC,YAAAA,MAAM,MAAM;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,OAAO;AAAA,MACL,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA,aAAa;AAAA,MACX,aAAaA,YAAAA,MAAM,MAAM;AAAA,MACzB,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACpB,YAAYA,YAAAA,MAAM,WAAW;AAAA,MAC7B,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,aAAaA,YAAAA,MAAM,MAAM;AAAA,MACzB,YAAY;AAAA,MACZ,CAAC,MAAMC,oCAAsB,MAAM,EAAE,GAAG;AAAA,QACtC,aAAaD,YAAAA,MAAM,OAAO;AAAA,QAC1B,OAAOA,YAAAA,MAAM,OAAO;AAAA,QACpB,WAAW;AAAA,UACT,aAAaA,YAAAA,MAAM,OAAO;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,IACA,aAAa,CAAC;AAAA,EAChB;AACF;;;"}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
2
|
import { createClasses } from "../utils/classes.js";
|
|
3
|
+
import { staticClasses as staticClasses$1 } from "../ActionsGeneric/ActionsGeneric.styles.js";
|
|
4
|
+
import "@emotion/react/jsx-runtime";
|
|
5
|
+
import "react";
|
|
6
|
+
import "@hitachivantara/uikit-react-icons";
|
|
3
7
|
const { staticClasses, useClasses } = createClasses("HvBulkActions", {
|
|
4
8
|
root: {
|
|
5
9
|
display: "flex",
|
|
@@ -25,7 +29,15 @@ const { staticClasses, useClasses } = createClasses("HvBulkActions", {
|
|
|
25
29
|
backgroundColor: theme.alpha("base_light", 0.3)
|
|
26
30
|
}
|
|
27
31
|
},
|
|
28
|
-
actions: {
|
|
32
|
+
actions: {
|
|
33
|
+
display: "inline-flex",
|
|
34
|
+
marginLeft: "auto",
|
|
35
|
+
[`& .${staticClasses$1.dropDownMenuButton}:disabled`]: {
|
|
36
|
+
backgroundColor: "transparent",
|
|
37
|
+
borderColor: "transparent",
|
|
38
|
+
"&:hover": { backgroundColor: "transparent", borderColor: "transparent" }
|
|
39
|
+
}
|
|
40
|
+
},
|
|
29
41
|
selectAllContainer: { display: "flex", alignItems: "center" },
|
|
30
42
|
selectAll: {},
|
|
31
43
|
selectAllPages: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BulkActions.styles.js","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n border: `1px solid ${theme.colors.atmo4}`,\n backgroundColor: theme.colors.atmo2,\n padding: theme.spacing(\"xs\", \"md\"),\n marginBottom: theme.space.xs,\n },\n semantic: {\n backgroundColor: theme.colors.containerBackgroundHover,\n \"& $selectAll div\": {\n color: \"inherit\",\n\n \"&:hover:not(:disabled)\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n\n \"& *\": {\n color: \"inherit\",\n backgroundColor: \"transparent\",\n },\n },\n\n \"& $selectAll:focus-within div\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n },\n actions: {
|
|
1
|
+
{"version":3,"file":"BulkActions.styles.js","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { actionsGenericClasses } from \"../ActionsGeneric\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n border: `1px solid ${theme.colors.atmo4}`,\n backgroundColor: theme.colors.atmo2,\n padding: theme.spacing(\"xs\", \"md\"),\n marginBottom: theme.space.xs,\n },\n semantic: {\n backgroundColor: theme.colors.containerBackgroundHover,\n \"& $selectAll div\": {\n color: \"inherit\",\n\n \"&:hover:not(:disabled)\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n\n \"& *\": {\n color: \"inherit\",\n backgroundColor: \"transparent\",\n },\n },\n\n \"& $selectAll:focus-within div\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n },\n actions: {\n display: \"inline-flex\",\n marginLeft: \"auto\",\n [`& .${actionsGenericClasses.dropDownMenuButton}:disabled`]: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover\": { backgroundColor: \"transparent\", borderColor: \"transparent\" },\n },\n },\n selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n selectAll: {},\n selectAllPages: {},\n divider: {\n display: \"flex\",\n backgroundColor: theme.colors.atmo4,\n width: \"1px\",\n height: \"32px\",\n marginLeft: theme.space.sm,\n },\n});\n"],"names":["actionsGenericClasses"],"mappings":";;;;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,IACvC,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,OAAO;AAAA,MAEP,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,IAChD;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAsB,kBAAkB,WAAW,GAAG;AAAA,MAC3D,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,WAAW,EAAE,iBAAiB,eAAe,aAAa,cAAc;AAAA,IAC1E;AAAA,EACF;AAAA,EACA,oBAAoB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC5D,WAAW,CAAC;AAAA,EACZ,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,EAC1B;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n\n // Background color common for almost all variants\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n ...theme.typography.label,\n height: \"32px\",\n border: \"1px solid currentcolor\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(0, \"sm\"),\n },\n startIcon: {\n marginLeft: `calc(-1 * ${theme.space.xs})`,\n },\n endIcon: {\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n focusVisible: {},\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.secondary_60,\n borderColor: theme.colors.atmo3,\n backgroundColor: theme.colors.atmo3,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n },\n },\n icon: {\n margin: 0,\n padding: 0,\n height: \"fit-content\",\n \"& > *\": {\n margin: -1,\n },\n },\n subtle: {\n backgroundColor: \"transparent\",\n \"&$disabled\": {\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"transparent\",\n },\n },\n },\n ghost: {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n \"&$disabled\": {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n },\n },\n },\n semantic: {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n },\n \"&$disabled\": {\n backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n },\n },\n\n // TODO - remove in v6\n primary: {},\n primarySubtle: {},\n primaryGhost: {},\n secondarySubtle: {},\n secondaryGhost: {},\n\n // Deprecated (DS3)\n secondary: {},\n});\n\nexport const getColoringStyle = (color: string, type?: string) => {\n if (type)\n return {\n color: theme.colors[color !== \"warning\" ? color : `${color}_140`],\n };\n\n const bg = theme.colors[color !== \"warning\" ? color : `${color}_120`];\n const hoverBg =\n theme.colors[color !== \"warning\" ? `${color}_80` : `${color}_140`];\n return {\n color: theme.colors.atmo1,\n backgroundColor: bg,\n borderColor: bg,\n \"&:hover, &:focus-visible\": {\n backgroundColor: hoverBg,\n borderColor: hoverBg,\n },\n };\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius) => ({\n borderRadius: theme.radii[radius],\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes = {\n xs: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n sm: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n md: { height: \"32px\", space: \"sm\", typography: \"label\" },\n lg: { height: \"48px\", space: \"md\", typography: \"label\" },\n xl: { height: \"48px\", space: \"md\", typography: \"label\" },\n};\n\nexport const getSizeStyles = (size: HvButtonSize) => {\n const { height, space, typography } = sizes[size];\n const { color, ...typoProps } = theme.typography[typography];\n return {\n height,\n padding: theme.spacing(0, space),\n ...typoProps,\n };\n};\n\nexport const getIconSizeStyles = (size: HvButtonSize) => {\n const { height } = sizes[size];\n return {\n height,\n width: height,\n };\n};\n\nexport const getOverrideColors = () => ({\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -9,10 +9,9 @@ import { setId } from "../utils/setId.js";
|
|
|
9
9
|
import { getPrevNextFocus } from "../utils/focusableElementFinder.js";
|
|
10
10
|
import { useClasses } from "./DropDownMenu.styles.js";
|
|
11
11
|
import { staticClasses } from "./DropDownMenu.styles.js";
|
|
12
|
-
import { getIconSizeStyles } from "../Button/Button.styles.js";
|
|
13
12
|
import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
|
|
14
|
-
import { HvButton } from "../Button/Button.js";
|
|
15
13
|
import { HvList } from "../List/List.js";
|
|
14
|
+
import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
|
|
16
15
|
import { HvPanel } from "../Panel/Panel.js";
|
|
17
16
|
const HvDropDownMenu = (props) => {
|
|
18
17
|
const {
|
|
@@ -32,10 +31,10 @@ const HvDropDownMenu = (props) => {
|
|
|
32
31
|
category = "secondaryGhost",
|
|
33
32
|
// TODO - remove and update variant default in v6
|
|
34
33
|
variant,
|
|
35
|
-
size,
|
|
34
|
+
size = "md",
|
|
36
35
|
...others
|
|
37
36
|
} = useDefaultProps("HvDropDownMenu", props);
|
|
38
|
-
const { classes, cx
|
|
37
|
+
const { classes, cx } = useClasses(classesProp);
|
|
39
38
|
const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
|
|
40
39
|
const id = useUniqueId(idProp);
|
|
41
40
|
const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
|
|
@@ -68,28 +67,21 @@ const HvDropDownMenu = (props) => {
|
|
|
68
67
|
},
|
|
69
68
|
expanded: open && !disabled,
|
|
70
69
|
component: /* @__PURE__ */ jsx(
|
|
71
|
-
|
|
70
|
+
HvDropdownButton,
|
|
72
71
|
{
|
|
73
|
-
icon: true,
|
|
74
|
-
variant: variant ?? category,
|
|
75
72
|
id: setId(id, "icon-button"),
|
|
76
|
-
className: cx(
|
|
77
|
-
classes.icon,
|
|
78
|
-
{ [classes.iconSelected]: open },
|
|
79
|
-
size && icon && css(getIconSizeStyles(size))
|
|
80
|
-
),
|
|
81
|
-
"aria-expanded": open,
|
|
82
73
|
disabled,
|
|
74
|
+
className: cx(classes.icon, {
|
|
75
|
+
[classes.iconSelected]: open
|
|
76
|
+
}),
|
|
83
77
|
size,
|
|
78
|
+
variant: variant ?? category,
|
|
79
|
+
open,
|
|
80
|
+
"aria-expanded": open,
|
|
84
81
|
"aria-label": "Dropdown menu",
|
|
85
82
|
"aria-haspopup": "menu",
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
{
|
|
89
|
-
"aria-hidden": true,
|
|
90
|
-
color: disabled ? "secondary_60" : void 0
|
|
91
|
-
}
|
|
92
|
-
)
|
|
83
|
+
icon: true,
|
|
84
|
+
children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, { role: "presentation" })
|
|
93
85
|
}
|
|
94
86
|
),
|
|
95
87
|
placement,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {
|
|
1
|
+
{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\nimport { HvDropdownButton } from \"../DropdownButton\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** Icon. */\n icon?: React.ReactElement;\n /**\n * A list containing the elements to be rendered.\n *\n * - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n */\n dataList: HvListValue[];\n /** Placement of the dropdown. */\n placement?: \"left\" | \"right\";\n /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n disablePortal?: boolean;\n /** Function executed on toggle of the dropdown. Should receive the open status. */\n onToggle?: (event: Event, open: boolean) => void;\n /** Function executed in each onClick. Should received the clicked element. */\n onClick?: (\n event: React.ChangeEvent<HTMLLIElement>,\n value: HvListValue\n ) => void;\n /** Keep the Dropdown Menu opened after clicking one option */\n keepOpened?: boolean;\n /** Defines if the component is disabled. */\n disabled?: boolean;\n /** If true it should be displayed open. */\n expanded?: boolean;\n /** When uncontrolled, defines the initial expanded state. */\n defaultExpanded?: boolean;\n /**\n * The variant to be used in the header.\n * @deprecated Use `variant` instead\n */\n category?: HvButtonVariant;\n /** The variant to be used in the header. */\n variant?: HvButtonVariant;\n /** Button size. */\n size?: HvButtonSize;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant,\n size = \"md\",\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp);\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n const listId = setId(id, \"list\");\n\n const handleClose = (event: ChangeEvent) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event as any, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event as any);\n }\n event.preventDefault();\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\n containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n return (\n <HvBaseDropdown\n id={id}\n className={cx(classes.container, className)}\n classes={{\n root: classes.root,\n container: classes.baseContainer,\n }}\n expanded={open && !disabled}\n component={\n <HvDropdownButton\n id={setId(id, \"icon-button\")}\n disabled={disabled}\n className={cx(classes.icon, {\n [classes.iconSelected]: open,\n })}\n size={size}\n variant={variant ?? category}\n open={open}\n aria-expanded={open}\n aria-label=\"Dropdown menu\" // TODO - translate\n aria-haspopup=\"menu\"\n icon\n >\n {icon || <MoreOptionsVertical role=\"presentation\" />}\n </HvDropdownButton>\n }\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={setFocusToContent}\n {...others}\n >\n <HvPanel className={classes.menuListRoot}>\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: classes.menuList,\n }}\n />\n </HvPanel>\n </HvBaseDropdown>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuEa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,eAAe,CAAC;AAClE,QAAA,KAAK,YAAY,MAAM;AAC7B,QAAM,aAAa,iBAAiB,MAAM,IAAI,aAAa,CAAC;AAEtD,QAAA,SAAS,MAAM,IAAI,MAAM;AAEzB,QAAA,cAAc,CAAC,UAAuB;AAE1C,YAAQ,KAAK;AACb,eAAW,OAAc,KAAK;AAAA,EAAA;AAI1B,QAAA,gBAA0C,CAAC,UAAU;AACrD,QAAA,MAAM,OAAO,KAAK,GAAG;AACvB,YAAM,OAAO,MAAM,WAAW,WAAW,YAAY,WAAW;AAC5D,UAAA;AAAM,mBAAW,MAAM,KAAK,MAAM,GAAG,CAAC;AAC1C,kBAAY,KAAY;AAAA,IAC1B;AACA,UAAM,eAAe;AAAA,EAAA;AAGjB,QAAA,oBAAgE,CACpE,iBACG;AACH,kBAAc,qBAAqB,IAAI,EAAE,CAAC,GAAG,MAAM;AAAA,EAAA;AAGrD,QAAM,YAAY,QAAQ,MAAM,SAAS,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;AAG1E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,SAAS;AAAA,MAC1C,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,WAAW,QAAQ;AAAA,MACrB;AAAA,MACA,UAAU,QAAQ,CAAC;AAAA,MACnB,WACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,aAAa;AAAA,UAC3B;AAAA,UACA,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,YAAY,GAAG;AAAA,UAAA,CACzB;AAAA,UACD;AAAA,UACA,SAAS,WAAW;AAAA,UACpB;AAAA,UACA,iBAAe;AAAA,UACf,cAAW;AAAA,UACX,iBAAc;AAAA,UACd,MAAI;AAAA,UAEH,UAAQ,QAAA,oBAAC,qBAAoB,EAAA,MAAK,gBAAe;AAAA,QAAA;AAAA,MACpD;AAAA,MAEF;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,UAAU,CAAC,GAAG,MAAM;AAElB,gBAAQ,CAAC;AACT,mBAAW,GAAG,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAC,oBAAA,SAAA,EAAQ,WAAW,QAAQ,cAC1B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ;AAAA,UACA,SAAS,CAAC,OAAO,SAAS;AACxB,gBAAI,CAAC;AAAY,0BAAY,KAAK;AAClC,sBAAU,OAAO,IAAI;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,UACX,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,47 +1,17 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
-
import { outlineStyles } from "../utils/focusUtils.js";
|
|
3
2
|
import { createClasses } from "../utils/classes.js";
|
|
4
3
|
const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
|
|
5
|
-
|
|
6
|
-
container: {
|
|
7
|
-
width: 32
|
|
8
|
-
},
|
|
9
|
-
/** Styles applied to the BaseDropdown container. */
|
|
4
|
+
container: {},
|
|
10
5
|
baseContainer: {},
|
|
11
|
-
/** Styles applied to the root. */
|
|
12
6
|
root: {
|
|
13
7
|
display: "inline-block",
|
|
14
|
-
width: "auto"
|
|
15
|
-
"&:focus-visible $icon": {
|
|
16
|
-
...outlineStyles
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
/** Styles applied to the icon. */
|
|
20
|
-
icon: {
|
|
21
|
-
position: "relative",
|
|
22
|
-
width: 32,
|
|
23
|
-
height: 32,
|
|
24
|
-
boxSizing: "border-box",
|
|
25
|
-
padding: 0,
|
|
26
|
-
borderRadius: theme.radii.base,
|
|
27
|
-
border: "1px solid transparent"
|
|
8
|
+
width: "auto"
|
|
28
9
|
},
|
|
29
|
-
|
|
10
|
+
icon: {},
|
|
30
11
|
iconSelected: {
|
|
31
|
-
|
|
32
|
-
boxShadow: theme.colors.shadow,
|
|
33
|
-
"&:hover": {
|
|
34
|
-
backgroundColor: theme.colors.atmo1
|
|
35
|
-
},
|
|
36
|
-
"& svg .color0": {
|
|
37
|
-
fill: theme.colors.secondary
|
|
38
|
-
},
|
|
39
|
-
borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,
|
|
40
|
-
border: `1px solid ${theme.colors.secondary}`
|
|
12
|
+
boxShadow: theme.colors.shadow
|
|
41
13
|
},
|
|
42
|
-
/** Styles applied to the list root. */
|
|
43
14
|
menuListRoot: {},
|
|
44
|
-
/** Styles applied to the list. */
|
|
45
15
|
menuList: {}
|
|
46
16
|
});
|
|
47
17
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../src/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../src/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n container: {},\n baseContainer: {},\n root: {\n display: \"inline-block\",\n width: \"auto\",\n },\n icon: {},\n iconSelected: {\n boxShadow: theme.colors.shadow,\n },\n menuListRoot: {},\n menuList: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,WAAW,CAAC;AAAA,EACZ,eAAe,CAAC;AAAA,EAChB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,cAAc,CAAC;AAAA,EACf,UAAU,CAAC;AACb,CAAC;"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { DropDownXS } from "@hitachivantara/uikit-react-icons";
|
|
4
|
+
import { useDefaultProps } from "../hooks/useDefaultProps.js";
|
|
5
|
+
import { useClasses } from "./DropdownButton.styles.js";
|
|
6
|
+
import { staticClasses } from "./DropdownButton.styles.js";
|
|
7
|
+
import { HvButton } from "../Button/Button.js";
|
|
8
|
+
const HvDropdownButton = forwardRef((props, ref) => {
|
|
9
|
+
const {
|
|
10
|
+
className,
|
|
11
|
+
classes: classesProp,
|
|
12
|
+
placement = "bottom",
|
|
13
|
+
disabled,
|
|
14
|
+
open,
|
|
15
|
+
icon,
|
|
16
|
+
readOnly,
|
|
17
|
+
children,
|
|
18
|
+
variant,
|
|
19
|
+
...others
|
|
20
|
+
} = useDefaultProps("HvDropdownButton", props);
|
|
21
|
+
const { classes, cx } = useClasses(classesProp);
|
|
22
|
+
const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(
|
|
23
|
+
DropDownXS,
|
|
24
|
+
{
|
|
25
|
+
iconSize: "XS",
|
|
26
|
+
style: { rotate: open ? "180deg" : void 0 },
|
|
27
|
+
className: classes.arrow
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
HvButton,
|
|
32
|
+
{
|
|
33
|
+
ref,
|
|
34
|
+
icon,
|
|
35
|
+
disabled: disabled || readOnly,
|
|
36
|
+
className: cx(
|
|
37
|
+
classes.root,
|
|
38
|
+
{
|
|
39
|
+
[classes.open]: open,
|
|
40
|
+
[classes.openUp]: open && placement.includes("top"),
|
|
41
|
+
[classes.openDown]: open && placement.includes("bottom"),
|
|
42
|
+
[classes.disabled]: disabled,
|
|
43
|
+
[classes.readOnly]: readOnly
|
|
44
|
+
},
|
|
45
|
+
className
|
|
46
|
+
),
|
|
47
|
+
classes: { endIcon: classes.arrowContainer },
|
|
48
|
+
endIcon,
|
|
49
|
+
variant: open ? "secondarySubtle" : variant,
|
|
50
|
+
...others,
|
|
51
|
+
children: /* @__PURE__ */ jsx("div", { className: cx({ [classes.selection]: !icon }), children: children && typeof children === "string" ? /* @__PURE__ */ jsx("div", { className: classes.placeholder, children }) : children })
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
});
|
|
55
|
+
export {
|
|
56
|
+
HvDropdownButton,
|
|
57
|
+
staticClasses as dropdownButtonClasses
|
|
58
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n /** Whether the button is in read only mode when used as a form element. */\n readOnly?: boolean;\n /** Whether the content triggered by the button is opened or not. */\n open?: boolean;\n /** Placement of the content triggered by the button. @default bottom */\n placement?: Placement;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n HTMLButtonElement,\n HvDropdownButtonProps\n>((props, ref) => {\n const {\n className,\n classes: classesProp,\n placement = \"bottom\",\n disabled,\n open,\n icon,\n readOnly,\n children,\n variant,\n ...others\n } = useDefaultProps(\"HvDropdownButton\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const endIcon = icon ? undefined : (\n <DropDownXS\n iconSize=\"XS\"\n style={{ rotate: open ? \"180deg\" : undefined }}\n className={classes.arrow}\n />\n );\n\n return (\n <HvButton\n ref={ref}\n icon={icon}\n disabled={disabled || readOnly}\n className={cx(\n classes.root,\n {\n [classes.open]: open,\n [classes.openUp]: open && placement.includes(\"top\"),\n [classes.openDown]: open && placement.includes(\"bottom\"),\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n },\n className\n )}\n classes={{ endIcon: classes.arrowContainer }}\n endIcon={endIcon}\n variant={open ? \"secondarySubtle\" : variant}\n {...others}\n >\n <div className={cx({ [classes.selection]: !icon })}>\n {children && typeof children === \"string\" ? (\n <div className={classes.placeholder}>{children}</div>\n ) : (\n children\n )}\n </div>\n </HvButton>\n );\n});\n"],"names":[],"mappings":";;;;;;;AA8BO,MAAM,mBAAmB,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,UAAU,OAAO,SACrB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ,OAAO,WAAW,OAAU;AAAA,MAC7C,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA;AAKrB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,UAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,UACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAK,CAAC,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAS,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
+
import { createClasses } from "../utils/classes.js";
|
|
3
|
+
import { staticClasses as staticClasses$1 } from "../Button/Button.styles.js";
|
|
4
|
+
import "../Button/Button.js";
|
|
5
|
+
const disabledStyle = {
|
|
6
|
+
backgroundColor: theme.colors.atmo3,
|
|
7
|
+
borderColor: theme.colors.atmo3,
|
|
8
|
+
[`&.${staticClasses$1.subtle}`]: {
|
|
9
|
+
backgroundColor: theme.colors.atmo3,
|
|
10
|
+
borderColor: theme.colors.atmo3,
|
|
11
|
+
"&:hover": { backgroundColor: theme.colors.atmo3 }
|
|
12
|
+
},
|
|
13
|
+
[`&.${staticClasses$1.ghost}`]: {
|
|
14
|
+
backgroundColor: theme.colors.atmo3,
|
|
15
|
+
borderColor: theme.colors.atmo3,
|
|
16
|
+
"&:hover": { backgroundColor: theme.colors.atmo3 }
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
const { staticClasses, useClasses } = createClasses("HvDropdownButton", {
|
|
20
|
+
root: {
|
|
21
|
+
userSelect: "none",
|
|
22
|
+
position: "relative",
|
|
23
|
+
[`&:not(.${staticClasses$1.icon})`]: {
|
|
24
|
+
width: "100%",
|
|
25
|
+
minWidth: "unset",
|
|
26
|
+
justifyContent: "flex-start",
|
|
27
|
+
paddingLeft: theme.space.xs
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
disabled: {
|
|
31
|
+
...disabledStyle
|
|
32
|
+
},
|
|
33
|
+
readOnly: {
|
|
34
|
+
userSelect: "text",
|
|
35
|
+
...disabledStyle
|
|
36
|
+
},
|
|
37
|
+
open: {
|
|
38
|
+
backgroundColor: theme.colors.atmo1
|
|
39
|
+
},
|
|
40
|
+
openUp: {
|
|
41
|
+
borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`
|
|
42
|
+
},
|
|
43
|
+
openDown: {
|
|
44
|
+
borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`
|
|
45
|
+
},
|
|
46
|
+
selection: {
|
|
47
|
+
color: "inherit",
|
|
48
|
+
flex: 1,
|
|
49
|
+
textAlign: "start",
|
|
50
|
+
overflow: "clip visible",
|
|
51
|
+
textOverflow: "ellipsis",
|
|
52
|
+
whiteSpace: "nowrap"
|
|
53
|
+
},
|
|
54
|
+
placeholder: {},
|
|
55
|
+
arrowContainer: {
|
|
56
|
+
marginRight: theme.spacing(-2)
|
|
57
|
+
},
|
|
58
|
+
arrow: {
|
|
59
|
+
transition: "rotate 0.2s ease"
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
export {
|
|
63
|
+
staticClasses,
|
|
64
|
+
useClasses
|
|
65
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownButton.styles.js","sources":["../../../src/DropdownButton/DropdownButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { buttonClasses } from \"../Button\";\n\nconst disabledStyle = {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n [`&.${buttonClasses.subtle}`]: {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n },\n [`&.${buttonClasses.ghost}`]: {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdownButton\", {\n root: {\n userSelect: \"none\",\n position: \"relative\",\n\n [`&:not(.${buttonClasses.icon})`]: {\n width: \"100%\",\n minWidth: \"unset\",\n justifyContent: \"flex-start\",\n paddingLeft: theme.space.xs,\n },\n },\n disabled: {\n ...disabledStyle,\n },\n readOnly: {\n userSelect: \"text\",\n ...disabledStyle,\n },\n open: {\n backgroundColor: theme.colors.atmo1,\n },\n openUp: {\n borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n },\n openDown: {\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n },\n selection: {\n color: \"inherit\",\n flex: 1,\n textAlign: \"start\",\n overflow: \"clip visible\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n placeholder: {},\n arrowContainer: {\n marginRight: theme.spacing(-2),\n },\n arrow: {\n transition: \"rotate 0.2s ease\",\n },\n});\n"],"names":["buttonClasses"],"mappings":";;;;AAKA,MAAM,gBAAgB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAAA,EAC9B,aAAa,MAAM,OAAO;AAAA,EAC1B,CAAC,KAAKA,gBAAc,MAAM,EAAE,GAAG;AAAA,IAC7B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACnD;AAAA,EACA,CAAC,KAAKA,gBAAc,KAAK,EAAE,GAAG;AAAA,IAC5B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACnD;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,CAAC,UAAUA,gBAAc,IAAI,GAAG,GAAG;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,WAAW,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC/D;AAAA,EACA,UAAU;AAAA,IACR,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,aAAa,MAAM,QAAQ,EAAE;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,EACd;AACF,CAAC;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { fixedForwardRef } from "../types/generic.js";
|
|
3
|
+
import { useDefaultProps } from "../hooks/useDefaultProps.js";
|
|
3
4
|
import { HvButton } from "../Button/Button.js";
|
|
4
5
|
import { HvTooltip } from "../Tooltip/Tooltip.js";
|
|
5
6
|
const HvIconButton = fixedForwardRef(function HvIconButton2(props, ref) {
|
|
@@ -9,7 +10,7 @@ const HvIconButton = fixedForwardRef(function HvIconButton2(props, ref) {
|
|
|
9
10
|
enterDelay = 500,
|
|
10
11
|
tooltipProps,
|
|
11
12
|
...others
|
|
12
|
-
} = props;
|
|
13
|
+
} = useDefaultProps("HvIconButton", props);
|
|
13
14
|
return /* @__PURE__ */ jsx(
|
|
14
15
|
HvTooltip,
|
|
15
16
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../src/IconButton/IconButton.tsx"],"sourcesContent":["import { HvTooltip, HvTooltipProps } from \"../Tooltip\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport {\n PolymorphicComponentRef,\n PolymorphicRef,\n fixedForwardRef,\n} from \"../types/generic\";\n\nexport type HvIconButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n Omit<\n HvButtonProps<C>,\n | \"icon\"\n | \"focusableWhenDisabled\"\n | \"title\"\n | \"startIcon\"\n | \"endIcon\"\n | \"children\"\n | \"ref\"\n | \"component\"\n > & {\n /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */\n title: React.ReactNode;\n /** Number of milliseconds to wait before showing the tooltip. @default 500 */\n enterDelay?: HvTooltipProps[\"enterDelay\"];\n /** Tooltip placement. @default top */\n placement?: HvTooltipProps[\"placement\"];\n /** Extra tooltip properties. */\n tooltipProps?: Omit<Partial<HvTooltipProps>, \"children\">;\n }\n >;\n\n/**\n * The `HvIconButton` component wraps a `HvTooltip` with a label around a `HvButton` with only an icon as its content.\n * As defined by Design System, a tooltip with the button’s label should always be displayed when hovering an icon only button.\n * This component provides this behavior out of the box.\n */\nexport const HvIconButton = fixedForwardRef(function HvIconButton<\n C extends React.ElementType = \"button\"\n>(props: HvIconButtonProps<C>, ref: PolymorphicRef<C>) {\n const {\n title,\n placement = \"top\",\n enterDelay = 500,\n tooltipProps,\n ...others\n } = props;\n\n return (\n <HvTooltip\n title={title}\n enterDelay={enterDelay}\n placement={placement}\n {...tooltipProps}\n >\n <HvButton\n icon\n ref={ref}\n focusableWhenDisabled\n {...(others as HvButtonProps)}\n />\n </HvTooltip>\n );\n});\n"],"names":["HvIconButton"],"mappings":"
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../src/IconButton/IconButton.tsx"],"sourcesContent":["import { HvTooltip, HvTooltipProps } from \"../Tooltip\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport {\n PolymorphicComponentRef,\n PolymorphicRef,\n fixedForwardRef,\n} from \"../types/generic\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nexport type HvIconButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n Omit<\n HvButtonProps<C>,\n | \"icon\"\n | \"focusableWhenDisabled\"\n | \"title\"\n | \"startIcon\"\n | \"endIcon\"\n | \"children\"\n | \"ref\"\n | \"component\"\n > & {\n /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */\n title: React.ReactNode;\n /** Number of milliseconds to wait before showing the tooltip. @default 500 */\n enterDelay?: HvTooltipProps[\"enterDelay\"];\n /** Tooltip placement. @default top */\n placement?: HvTooltipProps[\"placement\"];\n /** Extra tooltip properties. */\n tooltipProps?: Omit<Partial<HvTooltipProps>, \"children\">;\n }\n >;\n\n/**\n * The `HvIconButton` component wraps a `HvTooltip` with a label around a `HvButton` with only an icon as its content.\n * As defined by Design System, a tooltip with the button’s label should always be displayed when hovering an icon only button.\n * This component provides this behavior out of the box.\n */\nexport const HvIconButton = fixedForwardRef(function HvIconButton<\n C extends React.ElementType = \"button\"\n>(props: HvIconButtonProps<C>, ref: PolymorphicRef<C>) {\n const {\n title,\n placement = \"top\",\n enterDelay = 500,\n tooltipProps,\n ...others\n } = useDefaultProps(\"HvIconButton\", props);\n\n return (\n <HvTooltip\n title={title}\n enterDelay={enterDelay}\n placement={placement}\n {...tooltipProps}\n >\n <HvButton\n icon\n ref={ref}\n focusableWhenDisabled\n {...(others as HvButtonProps)}\n />\n </HvTooltip>\n );\n});\n"],"names":["HvIconButton"],"mappings":";;;;;AAuCO,MAAM,eAAe,gBAAgB,SAASA,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAGvC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ;AAAA,UACA,uBAAqB;AAAA,UACpB,GAAI;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import { Children, isValidElement, cloneElement } from "react";
|
|
2
|
+
import { useMemo, Children, isValidElement, cloneElement } from "react";
|
|
3
3
|
import { useDefaultProps } from "../hooks/useDefaultProps.js";
|
|
4
|
-
import { useClasses } from "./MultiButton.styles.js";
|
|
4
|
+
import { useClasses, getSplitContainerColor, getSplitContainerHeight } from "./MultiButton.styles.js";
|
|
5
5
|
import { staticClasses } from "./MultiButton.styles.js";
|
|
6
6
|
const HvMultiButton = (props) => {
|
|
7
7
|
const {
|
|
@@ -15,15 +15,23 @@ const HvMultiButton = (props) => {
|
|
|
15
15
|
split,
|
|
16
16
|
...others
|
|
17
17
|
} = useDefaultProps("HvMultiButton", props);
|
|
18
|
-
const { classes, cx } = useClasses(classesProp);
|
|
18
|
+
const { classes, cx, css } = useClasses(classesProp);
|
|
19
|
+
const [color, type] = useMemo(() => {
|
|
20
|
+
const result = variant.split(/(?=[A-Z])/);
|
|
21
|
+
if (result[0] === "ghost" || result[0] === "semantic" || result[0] === "secondary" && !result[1])
|
|
22
|
+
return [];
|
|
23
|
+
return result.map((x) => x.toLowerCase());
|
|
24
|
+
}, [variant]);
|
|
19
25
|
return /* @__PURE__ */ jsx(
|
|
20
26
|
"div",
|
|
21
27
|
{
|
|
22
28
|
className: cx(
|
|
23
29
|
classes.root,
|
|
24
30
|
{
|
|
31
|
+
[classes.multiple]: !split,
|
|
25
32
|
[classes.vertical]: vertical,
|
|
26
33
|
[classes[variant]]: variant,
|
|
34
|
+
// TODO - remove in v6
|
|
27
35
|
[classes.splitGroup]: split,
|
|
28
36
|
[classes.splitGroupDisabled]: split && disabled
|
|
29
37
|
},
|
|
@@ -47,10 +55,17 @@ const HvMultiButton = (props) => {
|
|
|
47
55
|
split && index < Children.count(children) - 1 && /* @__PURE__ */ jsx(
|
|
48
56
|
"div",
|
|
49
57
|
{
|
|
50
|
-
className: cx(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
58
|
+
className: cx(
|
|
59
|
+
classes.splitContainer,
|
|
60
|
+
color && css(getSplitContainerColor(color, type, disabled)),
|
|
61
|
+
size && css(getSplitContainerHeight(size)),
|
|
62
|
+
{
|
|
63
|
+
[classes.splitDisabled]: disabled
|
|
64
|
+
},
|
|
65
|
+
classes[variant]
|
|
66
|
+
// TODO - remove in v6
|
|
67
|
+
),
|
|
68
|
+
children: /* @__PURE__ */ jsx("div", { className: classes.split })
|
|
54
69
|
}
|
|
55
70
|
)
|
|
56
71
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\
|
|
1
|
+
{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n getSplitContainerColor,\n getSplitContainerHeight,\n staticClasses,\n useClasses,\n} from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n /** If all the buttons are disabled. */\n disabled?: boolean;\n /** If the MultiButton is to be displayed vertically. */\n vertical?: boolean;\n /** Category of button to use */\n variant?: HvButtonVariant;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvMultiButtonClasses;\n /** Button size. */\n size?: HvButtonSize;\n /** Add a split between buttons */\n split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n const {\n className,\n children,\n classes: classesProp,\n disabled = false,\n vertical = false,\n variant = \"secondarySubtle\",\n size,\n split,\n ...others\n } = useDefaultProps(\"HvMultiButton\", props);\n const { classes, cx, css } = useClasses(classesProp);\n\n const [color, type] = useMemo(() => {\n const result = variant.split(/(?=[A-Z])/);\n if (\n result[0] === \"ghost\" ||\n result[0] === \"semantic\" ||\n (result[0] === \"secondary\" && !result[1])\n )\n return [];\n return result.map((x) => x.toLowerCase());\n }, [variant]);\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.multiple]: !split,\n [classes.vertical]: vertical,\n [classes[variant]]: variant, // TODO - remove in v6\n [classes.splitGroup]: split,\n [classes.splitGroupDisabled]: split && disabled,\n },\n className\n )}\n {...others}\n >\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n const childIsSelected = !!child.props.selected;\n\n return (\n <>\n {cloneElement(child as React.ReactElement, {\n variant,\n disabled: disabled || child.props.disabled,\n size,\n className: cx(child.props.className, classes.button, {\n [classes.firstButton]: index === 0,\n [classes.lastButton]: index === Children.count(children) - 1,\n [classes.selected]: childIsSelected,\n }),\n })}\n {split && index < Children.count(children) - 1 && (\n <div\n className={cx(\n classes.splitContainer,\n color && css(getSplitContainerColor(color, type, disabled)),\n size && css(getSplitContainerHeight(size)),\n {\n [classes.splitDisabled]: disabled,\n },\n classes[variant] // TODO - remove in v6\n )}\n >\n <div className={classes.split} />\n </div>\n )}\n </>\n );\n }\n })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AA+Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAGV,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAO,CAAC,GAAG;AAAA;AAAA,UACpB,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAS,SAAA,IAAI,UAAU,CAAC,OAAO,UAAU;AACpC,YAAA,eAAe,KAAK,GAAG;AACzB,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAA,aAAa,OAA6B;AAAA,cACzC;AAAA,cACA,UAAU,YAAY,MAAM,MAAM;AAAA,cAClC;AAAA,cACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,gBACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,gBACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,SAAS,MAAM,QAAQ,IAAI;AAAA,gBAC3D,CAAC,QAAQ,QAAQ,GAAG;AAAA,cAAA,CACrB;AAAA,YAAA,CACF;AAAA,YACA,SAAS,QAAQ,SAAS,MAAM,QAAQ,IAAI,KAC3C;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT,QAAQ;AAAA,kBACR,SAAS,IAAI,uBAAuB,OAAO,MAAM,QAAQ,CAAC;AAAA,kBAC1D,QAAQ,IAAI,wBAAwB,IAAI,CAAC;AAAA,kBACzC;AAAA,oBACE,CAAC,QAAQ,aAAa,GAAG;AAAA,kBAC3B;AAAA,kBACA,QAAQ,OAAO;AAAA;AAAA,gBACjB;AAAA,gBAEA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAO;AAAA,cAAA;AAAA,YACjC;AAAA,UAEJ,EAAA,CAAA;AAAA,QAEJ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|