@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
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
4
|
const classes = require("../utils/classes.cjs");
|
|
5
|
+
const ActionsGeneric_styles = require("../ActionsGeneric/ActionsGeneric.styles.cjs");
|
|
6
|
+
require("@emotion/react/jsx-runtime");
|
|
7
|
+
require("react");
|
|
8
|
+
require("@hitachivantara/uikit-react-icons");
|
|
5
9
|
const { staticClasses, useClasses } = classes.createClasses("HvBulkActions", {
|
|
6
10
|
root: {
|
|
7
11
|
display: "flex",
|
|
@@ -27,7 +31,15 @@ const { staticClasses, useClasses } = classes.createClasses("HvBulkActions", {
|
|
|
27
31
|
backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
|
|
28
32
|
}
|
|
29
33
|
},
|
|
30
|
-
actions: {
|
|
34
|
+
actions: {
|
|
35
|
+
display: "inline-flex",
|
|
36
|
+
marginLeft: "auto",
|
|
37
|
+
[`& .${ActionsGeneric_styles.staticClasses.dropDownMenuButton}:disabled`]: {
|
|
38
|
+
backgroundColor: "transparent",
|
|
39
|
+
borderColor: "transparent",
|
|
40
|
+
"&:hover": { backgroundColor: "transparent", borderColor: "transparent" }
|
|
41
|
+
}
|
|
42
|
+
},
|
|
31
43
|
selectAllContainer: { display: "flex", alignItems: "center" },
|
|
32
44
|
selectAll: {},
|
|
33
45
|
selectAllPages: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BulkActions.styles.cjs","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.cjs","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":["createClasses","theme","actionsGenericClasses"],"mappings":";;;;;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,aAAaC,YAAM,MAAA,OAAO,KAAK;AAAA,IACvC,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,SAASA,YAAA,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,cAAcA,YAAAA,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,OAAO;AAAA,MAEP,0BAA0B;AAAA,QACxB,iBAAiBA,YAAA,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,iBAAiBA,YAAA,MAAM,MAAM,cAAc,GAAG;AAAA,IAChD;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMC,sBAAAA,cAAsB,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,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAYA,YAAAA,MAAM,MAAM;AAAA,EAC1B;AACF,CAAC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.cjs","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Button.styles.cjs","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":["createClasses","theme","outlineStyles"],"mappings":";;;;;AAMO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,YAAY;AAAA;AAAA,IAGZ,WAAW;AAAA,MACT,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAA;AAAA,MACH,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA;AAAA,IAGA,YAAYA,YAAAA,MAAM,WAAW;AAAA,IAC7B,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC1B,SAASA,YAAA,MAAM,QAAQ,GAAG,IAAI;AAAA,EAChC;AAAA,EACA,WAAW;AAAA,IACT,YAAY,aAAaA,YAAAA,MAAM,MAAM,EAAE;AAAA,EACzC;AAAA,EACA,SAAS;AAAA,IACP,aAAa,aAAaA,YAAAA,MAAM,MAAM,EAAE;AAAA,EAC1C;AAAA,EACA,cAAc,CAAC;AAAA,EACf,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAOA,YAAAA,MAAM,OAAO;AAAA,IACpB,aAAaA,YAAAA,MAAM,OAAO;AAAA,IAC1B,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,4BAA4B;AAAA,MAC1B,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAC9B,aAAaA,YAAAA,MAAM,OAAO;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,iBAAiB;AAAA,IACjB,cAAc;AAAA,MACZ,iBAAiB;AAAA,MACjB,4BAA4B;AAAA,QAC1B,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,cAAc;AAAA,MACZ,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,4BAA4B;AAAA,QAC1B,aAAa;AAAA,QACb,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,OAAOA,YAAAA,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,4BAA4B;AAAA,MAC1B,iBAAiB;AAAA,IACnB;AAAA,IACA,cAAc;AAAA,MACZ,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA;AAAA,EAGA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,iBAAiB,CAAC;AAAA,EAClB,gBAAgB,CAAC;AAAA;AAAA,EAGjB,WAAW,CAAC;AACd,CAAC;AAEY,MAAA,mBAAmB,CAAC,OAAe,SAAkB;AAC5D,MAAA;AACK,WAAA;AAAA,MACL,OAAOA,YAAAA,MAAM,OAAO,UAAU,YAAY,QAAQ,GAAG,KAAK,MAAM;AAAA,IAAA;AAG9D,QAAA,KAAKA,YAAAA,MAAM,OAAO,UAAU,YAAY,QAAQ,GAAG,KAAK,MAAM;AAC9D,QAAA,UACJA,YAAM,MAAA,OAAO,UAAU,YAAY,GAAG,KAAK,QAAQ,GAAG,KAAK,MAAM;AAC5D,SAAA;AAAA,IACL,OAAOA,YAAAA,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,4BAA4B;AAAA,MAC1B,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EAAA;AAEJ;AAEa,MAAA,kBAAkB,CAAC,YAA4B;AAAA,EAC1D,cAAcA,YAAAA,MAAM,MAAM,MAAM;AAClC;AAGA,MAAM,QAAQ;AAAA,EACZ,IAAI,EAAE,QAAQ,QAAQ,OAAO,MAAM,YAAY,eAAe;AAAA,EAC9D,IAAI,EAAE,QAAQ,QAAQ,OAAO,MAAM,YAAY,eAAe;AAAA,EAC9D,IAAI,EAAE,QAAQ,QAAQ,OAAO,MAAM,YAAY,QAAQ;AAAA,EACvD,IAAI,EAAE,QAAQ,QAAQ,OAAO,MAAM,YAAY,QAAQ;AAAA,EACvD,IAAI,EAAE,QAAQ,QAAQ,OAAO,MAAM,YAAY,QAAQ;AACzD;AAEa,MAAA,gBAAgB,CAAC,SAAuB;AACnD,QAAM,EAAE,QAAQ,OAAO,WAAW,IAAI,MAAM,IAAI;AAChD,QAAM,EAAE,OAAO,GAAG,cAAcA,YAAAA,MAAM,WAAW,UAAU;AACpD,SAAA;AAAA,IACL;AAAA,IACA,SAASA,YAAA,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,GAAG;AAAA,EAAA;AAEP;AAEa,MAAA,oBAAoB,CAAC,SAAuB;AACvD,QAAM,EAAE,OAAA,IAAW,MAAM,IAAI;AACtB,SAAA;AAAA,IACL;AAAA,IACA,OAAO;AAAA,EAAA;AAEX;AAEO,MAAM,oBAAoB,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF;;;;;;;;"}
|
|
@@ -10,10 +10,9 @@ const keyboardUtils = require("../utils/keyboardUtils.cjs");
|
|
|
10
10
|
const setId = require("../utils/setId.cjs");
|
|
11
11
|
const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
|
|
12
12
|
const DropDownMenu_styles = require("./DropDownMenu.styles.cjs");
|
|
13
|
-
const Button_styles = require("../Button/Button.styles.cjs");
|
|
14
13
|
const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
|
|
15
|
-
const Button = require("../Button/Button.cjs");
|
|
16
14
|
const List = require("../List/List.cjs");
|
|
15
|
+
const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
|
|
17
16
|
const Panel = require("../Panel/Panel.cjs");
|
|
18
17
|
const HvDropDownMenu = (props) => {
|
|
19
18
|
const {
|
|
@@ -33,10 +32,10 @@ const HvDropDownMenu = (props) => {
|
|
|
33
32
|
category = "secondaryGhost",
|
|
34
33
|
// TODO - remove and update variant default in v6
|
|
35
34
|
variant,
|
|
36
|
-
size,
|
|
35
|
+
size = "md",
|
|
37
36
|
...others
|
|
38
37
|
} = useDefaultProps.useDefaultProps("HvDropDownMenu", props);
|
|
39
|
-
const { classes, cx
|
|
38
|
+
const { classes, cx } = DropDownMenu_styles.useClasses(classesProp);
|
|
40
39
|
const [open, setOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
|
|
41
40
|
const id = useUniqueId.useUniqueId(idProp);
|
|
42
41
|
const focusNodes = focusableElementFinder.getPrevNextFocus(setId.setId(id, "icon-button"));
|
|
@@ -69,28 +68,21 @@ const HvDropDownMenu = (props) => {
|
|
|
69
68
|
},
|
|
70
69
|
expanded: open && !disabled,
|
|
71
70
|
component: /* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
-
|
|
71
|
+
DropdownButton.HvDropdownButton,
|
|
73
72
|
{
|
|
74
|
-
icon: true,
|
|
75
|
-
variant: variant ?? category,
|
|
76
73
|
id: setId.setId(id, "icon-button"),
|
|
77
|
-
className: cx(
|
|
78
|
-
classes.icon,
|
|
79
|
-
{ [classes.iconSelected]: open },
|
|
80
|
-
size && icon && css(Button_styles.getIconSizeStyles(size))
|
|
81
|
-
),
|
|
82
|
-
"aria-expanded": open,
|
|
83
74
|
disabled,
|
|
75
|
+
className: cx(classes.icon, {
|
|
76
|
+
[classes.iconSelected]: open
|
|
77
|
+
}),
|
|
84
78
|
size,
|
|
79
|
+
variant: variant ?? category,
|
|
80
|
+
open,
|
|
81
|
+
"aria-expanded": open,
|
|
85
82
|
"aria-label": "Dropdown menu",
|
|
86
83
|
"aria-haspopup": "menu",
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
{
|
|
90
|
-
"aria-hidden": true,
|
|
91
|
-
color: disabled ? "secondary_60" : void 0
|
|
92
|
-
}
|
|
93
|
-
)
|
|
84
|
+
icon: true,
|
|
85
|
+
children: icon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { role: "presentation" })
|
|
94
86
|
}
|
|
95
87
|
),
|
|
96
88
|
placement,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.cjs","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.cjs","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":["useDefaultProps","useClasses","useControlled","useUniqueId","getPrevNextFocus","setId","isKey","useMemo","jsx","HvBaseDropdown","HvDropdownButton","MoreOptionsVertical","HvPanel","HvList"],"mappings":"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"}
|
|
@@ -1,49 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
|
-
const focusUtils = require("../utils/focusUtils.cjs");
|
|
5
4
|
const classes = require("../utils/classes.cjs");
|
|
6
5
|
const { staticClasses, useClasses } = classes.createClasses("HvDropDownMenu", {
|
|
7
|
-
|
|
8
|
-
container: {
|
|
9
|
-
width: 32
|
|
10
|
-
},
|
|
11
|
-
/** Styles applied to the BaseDropdown container. */
|
|
6
|
+
container: {},
|
|
12
7
|
baseContainer: {},
|
|
13
|
-
/** Styles applied to the root. */
|
|
14
8
|
root: {
|
|
15
9
|
display: "inline-block",
|
|
16
|
-
width: "auto"
|
|
17
|
-
"&:focus-visible $icon": {
|
|
18
|
-
...focusUtils.outlineStyles
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
/** Styles applied to the icon. */
|
|
22
|
-
icon: {
|
|
23
|
-
position: "relative",
|
|
24
|
-
width: 32,
|
|
25
|
-
height: 32,
|
|
26
|
-
boxSizing: "border-box",
|
|
27
|
-
padding: 0,
|
|
28
|
-
borderRadius: uikitStyles.theme.radii.base,
|
|
29
|
-
border: "1px solid transparent"
|
|
10
|
+
width: "auto"
|
|
30
11
|
},
|
|
31
|
-
|
|
12
|
+
icon: {},
|
|
32
13
|
iconSelected: {
|
|
33
|
-
|
|
34
|
-
boxShadow: uikitStyles.theme.colors.shadow,
|
|
35
|
-
"&:hover": {
|
|
36
|
-
backgroundColor: uikitStyles.theme.colors.atmo1
|
|
37
|
-
},
|
|
38
|
-
"& svg .color0": {
|
|
39
|
-
fill: uikitStyles.theme.colors.secondary
|
|
40
|
-
},
|
|
41
|
-
borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`,
|
|
42
|
-
border: `1px solid ${uikitStyles.theme.colors.secondary}`
|
|
14
|
+
boxShadow: uikitStyles.theme.colors.shadow
|
|
43
15
|
},
|
|
44
|
-
/** Styles applied to the list root. */
|
|
45
16
|
menuListRoot: {},
|
|
46
|
-
/** Styles applied to the list. */
|
|
47
17
|
menuList: {}
|
|
48
18
|
});
|
|
49
19
|
exports.staticClasses = staticClasses;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../src/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"DropDownMenu.styles.cjs","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":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,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,WAAWC,YAAAA,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,cAAc,CAAC;AAAA,EACf,UAAU,CAAC;AACb,CAAC;;;"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
6
|
+
const useDefaultProps = require("../hooks/useDefaultProps.cjs");
|
|
7
|
+
const DropdownButton_styles = require("./DropdownButton.styles.cjs");
|
|
8
|
+
const Button = require("../Button/Button.cjs");
|
|
9
|
+
const HvDropdownButton = React.forwardRef((props, ref) => {
|
|
10
|
+
const {
|
|
11
|
+
className,
|
|
12
|
+
classes: classesProp,
|
|
13
|
+
placement = "bottom",
|
|
14
|
+
disabled,
|
|
15
|
+
open,
|
|
16
|
+
icon,
|
|
17
|
+
readOnly,
|
|
18
|
+
children,
|
|
19
|
+
variant,
|
|
20
|
+
...others
|
|
21
|
+
} = useDefaultProps.useDefaultProps("HvDropdownButton", props);
|
|
22
|
+
const { classes, cx } = DropdownButton_styles.useClasses(classesProp);
|
|
23
|
+
const endIcon = icon ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(
|
|
24
|
+
uikitReactIcons.DropDownXS,
|
|
25
|
+
{
|
|
26
|
+
iconSize: "XS",
|
|
27
|
+
style: { rotate: open ? "180deg" : void 0 },
|
|
28
|
+
className: classes.arrow
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
32
|
+
Button.HvButton,
|
|
33
|
+
{
|
|
34
|
+
ref,
|
|
35
|
+
icon,
|
|
36
|
+
disabled: disabled || readOnly,
|
|
37
|
+
className: cx(
|
|
38
|
+
classes.root,
|
|
39
|
+
{
|
|
40
|
+
[classes.open]: open,
|
|
41
|
+
[classes.openUp]: open && placement.includes("top"),
|
|
42
|
+
[classes.openDown]: open && placement.includes("bottom"),
|
|
43
|
+
[classes.disabled]: disabled,
|
|
44
|
+
[classes.readOnly]: readOnly
|
|
45
|
+
},
|
|
46
|
+
className
|
|
47
|
+
),
|
|
48
|
+
classes: { endIcon: classes.arrowContainer },
|
|
49
|
+
endIcon,
|
|
50
|
+
variant: open ? "secondarySubtle" : variant,
|
|
51
|
+
...others,
|
|
52
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({ [classes.selection]: !icon }), children: children && typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.placeholder, children }) : children })
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
});
|
|
56
|
+
exports.dropdownButtonClasses = DropdownButton_styles.staticClasses;
|
|
57
|
+
exports.HvDropdownButton = HvDropdownButton;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownButton.cjs","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":["forwardRef","useDefaultProps","useClasses","jsx","DropDownXS","HvButton"],"mappings":";;;;;;;;AA8BO,MAAM,mBAAmBA,MAAA,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,IACDC,gBAAgB,gBAAA,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAIC,iCAAW,WAAW;AAExC,QAAA,UAAU,OAAO,SACrBC,2BAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ,OAAO,WAAW,OAAU;AAAA,MAC7C,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA;AAKrB,SAAAD,2BAAA;AAAA,IAACE,OAAA;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,UAAAF,2BAAA,IAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAK,CAAC,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9BA,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAS,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;;;"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
|
+
const classes = require("../utils/classes.cjs");
|
|
5
|
+
const Button_styles = require("../Button/Button.styles.cjs");
|
|
6
|
+
require("../Button/Button.cjs");
|
|
7
|
+
const disabledStyle = {
|
|
8
|
+
backgroundColor: uikitStyles.theme.colors.atmo3,
|
|
9
|
+
borderColor: uikitStyles.theme.colors.atmo3,
|
|
10
|
+
[`&.${Button_styles.staticClasses.subtle}`]: {
|
|
11
|
+
backgroundColor: uikitStyles.theme.colors.atmo3,
|
|
12
|
+
borderColor: uikitStyles.theme.colors.atmo3,
|
|
13
|
+
"&:hover": { backgroundColor: uikitStyles.theme.colors.atmo3 }
|
|
14
|
+
},
|
|
15
|
+
[`&.${Button_styles.staticClasses.ghost}`]: {
|
|
16
|
+
backgroundColor: uikitStyles.theme.colors.atmo3,
|
|
17
|
+
borderColor: uikitStyles.theme.colors.atmo3,
|
|
18
|
+
"&:hover": { backgroundColor: uikitStyles.theme.colors.atmo3 }
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
const { staticClasses, useClasses } = classes.createClasses("HvDropdownButton", {
|
|
22
|
+
root: {
|
|
23
|
+
userSelect: "none",
|
|
24
|
+
position: "relative",
|
|
25
|
+
[`&:not(.${Button_styles.staticClasses.icon})`]: {
|
|
26
|
+
width: "100%",
|
|
27
|
+
minWidth: "unset",
|
|
28
|
+
justifyContent: "flex-start",
|
|
29
|
+
paddingLeft: uikitStyles.theme.space.xs
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
disabled: {
|
|
33
|
+
...disabledStyle
|
|
34
|
+
},
|
|
35
|
+
readOnly: {
|
|
36
|
+
userSelect: "text",
|
|
37
|
+
...disabledStyle
|
|
38
|
+
},
|
|
39
|
+
open: {
|
|
40
|
+
backgroundColor: uikitStyles.theme.colors.atmo1
|
|
41
|
+
},
|
|
42
|
+
openUp: {
|
|
43
|
+
borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
|
|
44
|
+
},
|
|
45
|
+
openDown: {
|
|
46
|
+
borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`
|
|
47
|
+
},
|
|
48
|
+
selection: {
|
|
49
|
+
color: "inherit",
|
|
50
|
+
flex: 1,
|
|
51
|
+
textAlign: "start",
|
|
52
|
+
overflow: "clip visible",
|
|
53
|
+
textOverflow: "ellipsis",
|
|
54
|
+
whiteSpace: "nowrap"
|
|
55
|
+
},
|
|
56
|
+
placeholder: {},
|
|
57
|
+
arrowContainer: {
|
|
58
|
+
marginRight: uikitStyles.theme.spacing(-2)
|
|
59
|
+
},
|
|
60
|
+
arrow: {
|
|
61
|
+
transition: "rotate 0.2s ease"
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
exports.staticClasses = staticClasses;
|
|
65
|
+
exports.useClasses = useClasses;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownButton.styles.cjs","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":["theme","buttonClasses","createClasses"],"mappings":";;;;;;AAKA,MAAM,gBAAgB;AAAA,EACpB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,EAC9B,aAAaA,YAAAA,MAAM,OAAO;AAAA,EAC1B,CAAC,KAAKC,4BAAc,MAAM,EAAE,GAAG;AAAA,IAC7B,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,IAC9B,aAAaA,YAAAA,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiBA,kBAAM,OAAO,MAAM;AAAA,EACnD;AAAA,EACA,CAAC,KAAKC,4BAAc,KAAK,EAAE,GAAG;AAAA,IAC5B,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,IAC9B,aAAaA,YAAAA,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiBA,kBAAM,OAAO,MAAM;AAAA,EACnD;AACF;AAEO,MAAM,EAAE,eAAe,eAAeE,QAAAA,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,CAAC,UAAUD,cAAAA,cAAc,IAAI,GAAG,GAAG;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,aAAaD,YAAAA,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,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,WAAWA,YAAAA,MAAM,MAAM,IAAI,IAAIA,YAAA,MAAM,MAAM,IAAI;AAAA,EAC/D;AAAA,EACA,UAAU;AAAA,IACR,cAAc,GAAGA,YAAM,MAAA,MAAM,IAAI,IAAIA,kBAAM,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,aAAaA,YAAM,MAAA,QAAQ,EAAE;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,EACd;AACF,CAAC;;;"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
4
|
const generic = require("../types/generic.cjs");
|
|
5
|
+
const useDefaultProps = require("../hooks/useDefaultProps.cjs");
|
|
5
6
|
const Button = require("../Button/Button.cjs");
|
|
6
7
|
const Tooltip = require("../Tooltip/Tooltip.cjs");
|
|
7
8
|
const HvIconButton = generic.fixedForwardRef(function HvIconButton2(props, ref) {
|
|
@@ -11,7 +12,7 @@ const HvIconButton = generic.fixedForwardRef(function HvIconButton2(props, ref)
|
|
|
11
12
|
enterDelay = 500,
|
|
12
13
|
tooltipProps,
|
|
13
14
|
...others
|
|
14
|
-
} = props;
|
|
15
|
+
} = useDefaultProps.useDefaultProps("HvIconButton", props);
|
|
15
16
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
16
17
|
Tooltip.HvTooltip,
|
|
17
18
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.cjs","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":["fixedForwardRef","HvIconButton","jsx","HvTooltip","HvButton"],"mappings":"
|
|
1
|
+
{"version":3,"file":"IconButton.cjs","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":["fixedForwardRef","HvIconButton","useDefaultProps","jsx","HvTooltip","HvButton"],"mappings":";;;;;;;AAuCO,MAAM,eAAeA,QAAAA,gBAAgB,SAASC,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,gBAAgB,KAAK;AAGvC,SAAAC,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAAD,2BAAA;AAAA,QAACE,OAAA;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ;AAAA,UACA,uBAAqB;AAAA,UACpB,GAAI;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;;"}
|
|
@@ -16,15 +16,23 @@ const HvMultiButton = (props) => {
|
|
|
16
16
|
split,
|
|
17
17
|
...others
|
|
18
18
|
} = useDefaultProps.useDefaultProps("HvMultiButton", props);
|
|
19
|
-
const { classes, cx } = MultiButton_styles.useClasses(classesProp);
|
|
19
|
+
const { classes, cx, css } = MultiButton_styles.useClasses(classesProp);
|
|
20
|
+
const [color, type] = React.useMemo(() => {
|
|
21
|
+
const result = variant.split(/(?=[A-Z])/);
|
|
22
|
+
if (result[0] === "ghost" || result[0] === "semantic" || result[0] === "secondary" && !result[1])
|
|
23
|
+
return [];
|
|
24
|
+
return result.map((x) => x.toLowerCase());
|
|
25
|
+
}, [variant]);
|
|
20
26
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
21
27
|
"div",
|
|
22
28
|
{
|
|
23
29
|
className: cx(
|
|
24
30
|
classes.root,
|
|
25
31
|
{
|
|
32
|
+
[classes.multiple]: !split,
|
|
26
33
|
[classes.vertical]: vertical,
|
|
27
34
|
[classes[variant]]: variant,
|
|
35
|
+
// TODO - remove in v6
|
|
28
36
|
[classes.splitGroup]: split,
|
|
29
37
|
[classes.splitGroupDisabled]: split && disabled
|
|
30
38
|
},
|
|
@@ -48,10 +56,17 @@ const HvMultiButton = (props) => {
|
|
|
48
56
|
split && index < React.Children.count(children) - 1 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
49
57
|
"div",
|
|
50
58
|
{
|
|
51
|
-
className: cx(
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
59
|
+
className: cx(
|
|
60
|
+
classes.splitContainer,
|
|
61
|
+
color && css(MultiButton_styles.getSplitContainerColor(color, type, disabled)),
|
|
62
|
+
size && css(MultiButton_styles.getSplitContainerHeight(size)),
|
|
63
|
+
{
|
|
64
|
+
[classes.splitDisabled]: disabled
|
|
65
|
+
},
|
|
66
|
+
classes[variant]
|
|
67
|
+
// TODO - remove in v6
|
|
68
|
+
),
|
|
69
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.split })
|
|
55
70
|
}
|
|
56
71
|
)
|
|
57
72
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiButton.cjs","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.cjs","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":["useDefaultProps","useClasses","useMemo","jsx","Children","isValidElement","jsxs","Fragment","cloneElement","getSplitContainerColor","getSplitContainerHeight"],"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,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,IAAI,IAAI,IAAIC,mBAAAA,WAAW,WAAW;AAEnD,QAAM,CAAC,OAAO,IAAI,IAAIC,cAAQ,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,SAAAC,2BAAA;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,UAASC,MAAA,SAAA,IAAI,UAAU,CAAC,OAAO,UAAU;AACpC,YAAAC,MAAAA,eAAe,KAAK,GAAG;AACzB,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAEKC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,YAAAC,MAAAA,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,UAAUJ,MAAS,SAAA,MAAM,QAAQ,IAAI;AAAA,gBAC3D,CAAC,QAAQ,QAAQ,GAAG;AAAA,cAAA,CACrB;AAAA,YAAA,CACF;AAAA,YACA,SAAS,QAAQA,MAAA,SAAS,MAAM,QAAQ,IAAI,KAC3CD,2BAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT,QAAQ;AAAA,kBACR,SAAS,IAAIM,mBAAA,uBAAuB,OAAO,MAAM,QAAQ,CAAC;AAAA,kBAC1D,QAAQ,IAAIC,2CAAwB,IAAI,CAAC;AAAA,kBACzC;AAAA,oBACE,CAAC,QAAQ,aAAa,GAAG;AAAA,kBAC3B;AAAA,kBACA,QAAQ,OAAO;AAAA;AAAA,gBACjB;AAAA,gBAEA,UAACP,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,OAAO;AAAA,cAAA;AAAA,YACjC;AAAA,UAEJ,EAAA,CAAA;AAAA,QAEJ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}
|