@hitachivantara/uikit-react-core 5.40.1 → 5.41.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/Tag/Tag.cjs +22 -2
- package/dist/cjs/Tag/Tag.cjs.map +1 -1
- package/dist/cjs/Tag/Tag.styles.cjs +24 -13
- package/dist/cjs/Tag/Tag.styles.cjs.map +1 -1
- package/dist/esm/Tag/Tag.js +23 -3
- package/dist/esm/Tag/Tag.js.map +1 -1
- package/dist/esm/Tag/Tag.styles.js +24 -13
- package/dist/esm/Tag/Tag.styles.js.map +1 -1
- package/dist/types/index.d.ts +11 -5
- package/package.json +2 -2
package/dist/cjs/Tag/Tag.cjs
CHANGED
|
@@ -6,6 +6,7 @@ const Chip = require("@mui/material/Chip");
|
|
|
6
6
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
7
7
|
const useTheme = require("../hooks/useTheme.cjs");
|
|
8
8
|
const useDefaultProps = require("../hooks/useDefaultProps.cjs");
|
|
9
|
+
const useControlled = require("../hooks/useControlled.cjs");
|
|
9
10
|
const Tag_styles = require("./Tag.styles.cjs");
|
|
10
11
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
11
12
|
const Chip__default = /* @__PURE__ */ _interopDefault(Chip);
|
|
@@ -20,6 +21,9 @@ const HvTag = (props) => {
|
|
|
20
21
|
label,
|
|
21
22
|
disabled,
|
|
22
23
|
type = "semantic",
|
|
24
|
+
selectable,
|
|
25
|
+
selected,
|
|
26
|
+
defaultSelected = false,
|
|
23
27
|
color,
|
|
24
28
|
deleteIcon,
|
|
25
29
|
onDelete,
|
|
@@ -32,13 +36,16 @@ const HvTag = (props) => {
|
|
|
32
36
|
} = useDefaultProps.useDefaultProps("HvTag", props);
|
|
33
37
|
const { colors } = useTheme.useTheme();
|
|
34
38
|
const { classes, cx, css } = Tag_styles.useClasses(classesProp);
|
|
39
|
+
const [isSelected, setIsSelected] = useControlled.useControlled(
|
|
40
|
+
selected,
|
|
41
|
+
Boolean(defaultSelected)
|
|
42
|
+
);
|
|
35
43
|
const defaultDeleteIcon = /* @__PURE__ */ jsxRuntime.jsx(
|
|
36
44
|
uikitReactIcons.CloseXS,
|
|
37
45
|
{
|
|
38
46
|
role: "none",
|
|
39
47
|
className: cx(classes.button, classes.tagButton),
|
|
40
48
|
iconSize: "XS",
|
|
41
|
-
color: "base_dark",
|
|
42
49
|
...deleteButtonProps
|
|
43
50
|
}
|
|
44
51
|
);
|
|
@@ -50,6 +57,15 @@ const HvTag = (props) => {
|
|
|
50
57
|
boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
|
|
51
58
|
}
|
|
52
59
|
});
|
|
60
|
+
const onClickHandler = (event) => {
|
|
61
|
+
if (disabled)
|
|
62
|
+
return;
|
|
63
|
+
if (selectable)
|
|
64
|
+
setIsSelected(!isSelected);
|
|
65
|
+
onClick?.(event, !isSelected);
|
|
66
|
+
};
|
|
67
|
+
const colorOverride = disabled && ["atmo3", "secondary_60"] || void 0;
|
|
68
|
+
const avatarIcon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxCheck, { color: colorOverride, iconSize: "XS" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, { color: colorOverride, iconSize: "XS" });
|
|
53
69
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
54
70
|
Chip__default.default,
|
|
55
71
|
{
|
|
@@ -75,7 +91,11 @@ const HvTag = (props) => {
|
|
|
75
91
|
},
|
|
76
92
|
deleteIcon: deleteIcon || defaultDeleteIcon,
|
|
77
93
|
onDelete: disabled ? void 0 : onDelete,
|
|
78
|
-
onClick:
|
|
94
|
+
onClick: onClickHandler,
|
|
95
|
+
"aria-pressed": isSelected,
|
|
96
|
+
...selectable && type === "semantic" && {
|
|
97
|
+
avatar: avatarIcon
|
|
98
|
+
},
|
|
79
99
|
...others
|
|
80
100
|
}
|
|
81
101
|
);
|
package/dist/cjs/Tag/Tag.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.cjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Tag.cjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n Checkbox,\n CheckboxCheck,\n CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n /** The label of the tag element. */\n label?: React.ReactNode;\n /** Indicates that the form element is disabled. */\n disabled?: boolean;\n /** The type of the tag element. A tag can be of semantic or categoric type. */\n type?: \"semantic\" | \"categorical\";\n /** Background color to be applied to the tag */\n color?: HvColorAny;\n /** Icon used to customize the delete icon in the Chip element */\n deleteIcon?: React.ReactElement;\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component, in order to render the delete icon\n * */\n onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n /** Callback triggered when any item is clicked. */\n onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n /** Aria properties to apply to delete button in tag\n * @deprecated no longer used\n */\n deleteButtonArialLabel?: string;\n /** Props to apply to delete icon */\n deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTagClasses;\n /** @ignore */\n ref?: MuiChipProps[\"ref\"];\n /** @ignore */\n component?: MuiChipProps[\"component\"];\n /** Determines whether or not the tag is selectable. */\n selectable?: boolean;\n /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n selected?: boolean;\n /** When uncontrolled, defines the initial selected state. */\n defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor, colors) => {\n return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n const {\n classes: classesProp,\n className,\n style,\n label,\n disabled,\n type = \"semantic\",\n selectable,\n selected,\n defaultSelected = false,\n color,\n deleteIcon,\n onDelete,\n onClick,\n // TODO: remove from API\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = useDefaultProps(\"HvTag\", props);\n const { colors } = useTheme();\n const { classes, cx, css } = useClasses(classesProp);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected)\n );\n\n const defaultDeleteIcon = (\n <CloseXS\n role=\"none\"\n className={cx(classes.button, classes.tagButton)}\n iconSize=\"XS\"\n {...deleteButtonProps}\n />\n );\n\n const categoricalBackgroundColor =\n type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n const backgroundColor =\n (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n undefined;\n\n const isClickable = !!(onClick || onDelete) && !disabled;\n\n const clickableClass = css({\n \"&:hover\": {\n boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n },\n });\n\n const onClickHandler = (event) => {\n if (disabled) return;\n if (selectable) setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n };\n\n const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n const avatarIcon = isSelected ? (\n <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n ) : (\n <Checkbox color={colorOverride} iconSize=\"XS\" />\n );\n\n return (\n <Chip\n label={label}\n disabled={disabled}\n className={cx({ [clickableClass]: isClickable }, className)}\n style={{\n ...(disabled ? null : { backgroundColor }),\n ...style,\n }}\n classes={{\n root: cx(classes.root, classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: isClickable,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: cx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={deleteIcon || defaultDeleteIcon}\n onDelete={disabled ? undefined : onDelete}\n onClick={onClickHandler}\n aria-pressed={isSelected}\n {...(selectable &&\n type === \"semantic\" && {\n avatar: avatarIcon,\n })}\n {...others}\n />\n );\n};\n"],"names":["useDefaultProps","useTheme","useClasses","useControlled","jsx","CloseXS","getColor","CheckboxCheck","Checkbox","Chip"],"mappings":"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"}
|
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
|
+
const Chip = require("@mui/material/Chip");
|
|
4
5
|
const focusUtils = require("../utils/focusUtils.cjs");
|
|
5
6
|
const classes = require("../utils/classes.cjs");
|
|
6
7
|
const { staticClasses, useClasses } = classes.createClasses("HvTag", {
|
|
7
|
-
root: {
|
|
8
|
+
root: {
|
|
9
|
+
color: uikitStyles.theme.colors.base_dark,
|
|
10
|
+
[`& .${Chip.chipClasses.avatar}`]: {
|
|
11
|
+
width: 12,
|
|
12
|
+
height: 12,
|
|
13
|
+
marginLeft: 2,
|
|
14
|
+
marginRight: 0
|
|
15
|
+
}
|
|
16
|
+
},
|
|
8
17
|
chipRoot: {
|
|
9
|
-
|
|
18
|
+
[`&.${Chip.chipClasses.root}`]: {
|
|
10
19
|
height: 16,
|
|
11
20
|
borderRadius: 0,
|
|
12
21
|
maxWidth: 180,
|
|
@@ -28,22 +37,24 @@ const { staticClasses, useClasses } = classes.createClasses("HvTag", {
|
|
|
28
37
|
color: uikitStyles.theme.colors.secondary_60
|
|
29
38
|
}
|
|
30
39
|
},
|
|
31
|
-
|
|
32
|
-
paddingLeft:
|
|
33
|
-
paddingRight:
|
|
34
|
-
...uikitStyles.theme.typography.
|
|
35
|
-
color:
|
|
36
|
-
"& p": {
|
|
37
|
-
color: uikitStyles.theme.colors.base_dark
|
|
38
|
-
}
|
|
40
|
+
[`& .${Chip.chipClasses.label}`]: {
|
|
41
|
+
paddingLeft: 4,
|
|
42
|
+
paddingRight: 4,
|
|
43
|
+
...uikitStyles.theme.typography.caption2,
|
|
44
|
+
color: "currentcolor"
|
|
39
45
|
},
|
|
40
|
-
|
|
41
|
-
|
|
46
|
+
[`& .${Chip.chipClasses.deleteIcon}`]: {
|
|
47
|
+
margin: 0,
|
|
42
48
|
width: 16,
|
|
43
49
|
height: 16,
|
|
44
50
|
padding: 0,
|
|
51
|
+
color: "currentColor",
|
|
52
|
+
"& svg .color0": {
|
|
53
|
+
fill: "currentcolor"
|
|
54
|
+
},
|
|
45
55
|
"&:hover": {
|
|
46
|
-
backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
|
|
56
|
+
backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
|
|
57
|
+
color: "unset"
|
|
47
58
|
},
|
|
48
59
|
"&:focus": {
|
|
49
60
|
...focusUtils.outlineStyles,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styles.cjs","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {},\n\n chipRoot: {\n
|
|
1
|
+
{"version":3,"file":"Tag.styles.cjs","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { chipClasses } from \"@mui/material/Chip\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n color: theme.colors.base_dark,\n\n [`& .${chipClasses.avatar}`]: {\n width: 12,\n height: 12,\n marginLeft: 2,\n marginRight: 0,\n },\n },\n\n chipRoot: {\n [`&.${chipClasses.root}`]: {\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n fontFamily: theme.fontFamily.body,\n \"&:focus-visible\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n\n \"&$categorical\": {\n borderRadius: 8,\n \"& $label\": {\n color: theme.colors.secondary,\n },\n },\n },\n\n \"&$disabled\": {\n opacity: 1,\n backgroundColor: theme.colors.atmo3,\n \"& $label\": {\n color: theme.colors.secondary_60,\n },\n },\n\n [`& .${chipClasses.label}`]: {\n paddingLeft: 4,\n paddingRight: 4,\n ...(theme.typography.caption2 as CSSProperties),\n color: \"currentcolor\",\n },\n\n [`& .${chipClasses.deleteIcon}`]: {\n margin: 0,\n width: 16,\n height: 16,\n padding: 0,\n color: \"currentColor\",\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n color: \"unset\",\n },\n \"&:focus\": {\n ...outlineStyles,\n borderRadius: 0,\n },\n \"&:focus:not(:focus-visible)\": {\n outline: \"0 !important\",\n boxShadow: \"none !important\",\n },\n },\n },\n\n disabled: {},\n\n clickable: {\n cursor: \"pointer\",\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n\n categorical: {},\n\n label: {},\n\n deleteIcon: {},\n\n // TODO: redundant - use deleteIcon. remove in v6\n button: {},\n tagButton: {},\n // TODO: redundant - use $clickable or :not($disabled). remove in v6\n focusVisible: {},\n disabledDeleteIcon: {},\n categoricalFocus: {},\n categoricalDisabled: {},\n});\n"],"names":["createClasses","theme","chipClasses","outlineStyles"],"mappings":";;;;;;AAUO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,OAAOC,YAAAA,MAAM,OAAO;AAAA,IAEpB,CAAC,MAAMC,iBAAY,MAAM,EAAE,GAAG;AAAA,MAC5B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,CAAC,KAAKA,iBAAY,IAAI,EAAE,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAYD,YAAAA,MAAM,WAAW;AAAA,MAC7B,mBAAmB;AAAA,QACjB,iBAAiBA,YAAA,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,iBAAiB;AAAA,QACf,cAAc;AAAA,QACd,YAAY;AAAA,UACV,OAAOA,YAAAA,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IAEA,CAAC,MAAMC,iBAAY,KAAK,EAAE,GAAG;AAAA,MAC3B,aAAa;AAAA,MACb,cAAc;AAAA,MACd,GAAID,YAAAA,MAAM,WAAW;AAAA,MACrB,OAAO;AAAA,IACT;AAAA,IAEA,CAAC,MAAMC,iBAAY,UAAU,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,QAC9B,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT,GAAGE,WAAA;AAAA,QACH,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEA,UAAU,CAAC;AAAA,EAEX,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGA,WAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEA,aAAa,CAAC;AAAA,EAEd,OAAO,CAAC;AAAA,EAER,YAAY,CAAC;AAAA;AAAA,EAGb,QAAQ,CAAC;AAAA,EACT,WAAW,CAAC;AAAA;AAAA,EAEZ,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,kBAAkB,CAAC;AAAA,EACnB,qBAAqB,CAAC;AACxB,CAAC;;;"}
|
package/dist/esm/Tag/Tag.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { getColor } from "@hitachivantara/uikit-styles";
|
|
3
3
|
import Chip from "@mui/material/Chip";
|
|
4
|
-
import { CloseXS } from "@hitachivantara/uikit-react-icons";
|
|
4
|
+
import { CloseXS, CheckboxCheck, Checkbox } from "@hitachivantara/uikit-react-icons";
|
|
5
5
|
import { useTheme } from "../hooks/useTheme.js";
|
|
6
6
|
import { useDefaultProps } from "../hooks/useDefaultProps.js";
|
|
7
|
+
import { useControlled } from "../hooks/useControlled.js";
|
|
7
8
|
import { useClasses } from "./Tag.styles.js";
|
|
8
9
|
import { staticClasses } from "./Tag.styles.js";
|
|
9
10
|
const getCategoricalColor = (customColor, colors) => {
|
|
@@ -17,6 +18,9 @@ const HvTag = (props) => {
|
|
|
17
18
|
label,
|
|
18
19
|
disabled,
|
|
19
20
|
type = "semantic",
|
|
21
|
+
selectable,
|
|
22
|
+
selected,
|
|
23
|
+
defaultSelected = false,
|
|
20
24
|
color,
|
|
21
25
|
deleteIcon,
|
|
22
26
|
onDelete,
|
|
@@ -29,13 +33,16 @@ const HvTag = (props) => {
|
|
|
29
33
|
} = useDefaultProps("HvTag", props);
|
|
30
34
|
const { colors } = useTheme();
|
|
31
35
|
const { classes, cx, css } = useClasses(classesProp);
|
|
36
|
+
const [isSelected, setIsSelected] = useControlled(
|
|
37
|
+
selected,
|
|
38
|
+
Boolean(defaultSelected)
|
|
39
|
+
);
|
|
32
40
|
const defaultDeleteIcon = /* @__PURE__ */ jsx(
|
|
33
41
|
CloseXS,
|
|
34
42
|
{
|
|
35
43
|
role: "none",
|
|
36
44
|
className: cx(classes.button, classes.tagButton),
|
|
37
45
|
iconSize: "XS",
|
|
38
|
-
color: "base_dark",
|
|
39
46
|
...deleteButtonProps
|
|
40
47
|
}
|
|
41
48
|
);
|
|
@@ -47,6 +54,15 @@ const HvTag = (props) => {
|
|
|
47
54
|
boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
|
|
48
55
|
}
|
|
49
56
|
});
|
|
57
|
+
const onClickHandler = (event) => {
|
|
58
|
+
if (disabled)
|
|
59
|
+
return;
|
|
60
|
+
if (selectable)
|
|
61
|
+
setIsSelected(!isSelected);
|
|
62
|
+
onClick?.(event, !isSelected);
|
|
63
|
+
};
|
|
64
|
+
const colorOverride = disabled && ["atmo3", "secondary_60"] || void 0;
|
|
65
|
+
const avatarIcon = isSelected ? /* @__PURE__ */ jsx(CheckboxCheck, { color: colorOverride, iconSize: "XS" }) : /* @__PURE__ */ jsx(Checkbox, { color: colorOverride, iconSize: "XS" });
|
|
50
66
|
return /* @__PURE__ */ jsx(
|
|
51
67
|
Chip,
|
|
52
68
|
{
|
|
@@ -72,7 +88,11 @@ const HvTag = (props) => {
|
|
|
72
88
|
},
|
|
73
89
|
deleteIcon: deleteIcon || defaultDeleteIcon,
|
|
74
90
|
onDelete: disabled ? void 0 : onDelete,
|
|
75
|
-
onClick:
|
|
91
|
+
onClick: onClickHandler,
|
|
92
|
+
"aria-pressed": isSelected,
|
|
93
|
+
...selectable && type === "semantic" && {
|
|
94
|
+
avatar: avatarIcon
|
|
95
|
+
},
|
|
76
96
|
...others
|
|
77
97
|
}
|
|
78
98
|
);
|
package/dist/esm/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n Checkbox,\n CheckboxCheck,\n CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n /** The label of the tag element. */\n label?: React.ReactNode;\n /** Indicates that the form element is disabled. */\n disabled?: boolean;\n /** The type of the tag element. A tag can be of semantic or categoric type. */\n type?: \"semantic\" | \"categorical\";\n /** Background color to be applied to the tag */\n color?: HvColorAny;\n /** Icon used to customize the delete icon in the Chip element */\n deleteIcon?: React.ReactElement;\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component, in order to render the delete icon\n * */\n onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n /** Callback triggered when any item is clicked. */\n onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n /** Aria properties to apply to delete button in tag\n * @deprecated no longer used\n */\n deleteButtonArialLabel?: string;\n /** Props to apply to delete icon */\n deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTagClasses;\n /** @ignore */\n ref?: MuiChipProps[\"ref\"];\n /** @ignore */\n component?: MuiChipProps[\"component\"];\n /** Determines whether or not the tag is selectable. */\n selectable?: boolean;\n /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n selected?: boolean;\n /** When uncontrolled, defines the initial selected state. */\n defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor, colors) => {\n return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n const {\n classes: classesProp,\n className,\n style,\n label,\n disabled,\n type = \"semantic\",\n selectable,\n selected,\n defaultSelected = false,\n color,\n deleteIcon,\n onDelete,\n onClick,\n // TODO: remove from API\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = useDefaultProps(\"HvTag\", props);\n const { colors } = useTheme();\n const { classes, cx, css } = useClasses(classesProp);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected)\n );\n\n const defaultDeleteIcon = (\n <CloseXS\n role=\"none\"\n className={cx(classes.button, classes.tagButton)}\n iconSize=\"XS\"\n {...deleteButtonProps}\n />\n );\n\n const categoricalBackgroundColor =\n type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n const backgroundColor =\n (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n undefined;\n\n const isClickable = !!(onClick || onDelete) && !disabled;\n\n const clickableClass = css({\n \"&:hover\": {\n boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n },\n });\n\n const onClickHandler = (event) => {\n if (disabled) return;\n if (selectable) setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n };\n\n const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n const avatarIcon = isSelected ? (\n <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n ) : (\n <Checkbox color={colorOverride} iconSize=\"XS\" />\n );\n\n return (\n <Chip\n label={label}\n disabled={disabled}\n className={cx({ [clickableClass]: isClickable }, className)}\n style={{\n ...(disabled ? null : { backgroundColor }),\n ...style,\n }}\n classes={{\n root: cx(classes.root, classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: isClickable,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: cx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={deleteIcon || defaultDeleteIcon}\n onDelete={disabled ? undefined : onDelete}\n onClick={onClickHandler}\n aria-pressed={isSelected}\n {...(selectable &&\n type === \"semantic\" && {\n avatar: avatarIcon,\n })}\n {...others}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6DA,MAAM,sBAAsB,CAAC,aAAa,WAAW;AACnD,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAEK,QAAA,iBAAiB,CAAC,UAAU;AAC5B,QAAA;AAAU;AACV,QAAA;AAAY,oBAAc,CAAC,UAAU;AAC/B,cAAA,OAAO,CAAC,UAAU;AAAA,EAAA;AAG9B,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS;AAAA,MACT,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
+
import { chipClasses } from "@mui/material/Chip";
|
|
2
3
|
import { outlineStyles } from "../utils/focusUtils.js";
|
|
3
4
|
import { createClasses } from "../utils/classes.js";
|
|
4
5
|
const { staticClasses, useClasses } = createClasses("HvTag", {
|
|
5
|
-
root: {
|
|
6
|
+
root: {
|
|
7
|
+
color: theme.colors.base_dark,
|
|
8
|
+
[`& .${chipClasses.avatar}`]: {
|
|
9
|
+
width: 12,
|
|
10
|
+
height: 12,
|
|
11
|
+
marginLeft: 2,
|
|
12
|
+
marginRight: 0
|
|
13
|
+
}
|
|
14
|
+
},
|
|
6
15
|
chipRoot: {
|
|
7
|
-
|
|
16
|
+
[`&.${chipClasses.root}`]: {
|
|
8
17
|
height: 16,
|
|
9
18
|
borderRadius: 0,
|
|
10
19
|
maxWidth: 180,
|
|
@@ -26,22 +35,24 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
|
|
|
26
35
|
color: theme.colors.secondary_60
|
|
27
36
|
}
|
|
28
37
|
},
|
|
29
|
-
|
|
30
|
-
paddingLeft:
|
|
31
|
-
paddingRight:
|
|
32
|
-
...theme.typography.
|
|
33
|
-
color:
|
|
34
|
-
"& p": {
|
|
35
|
-
color: theme.colors.base_dark
|
|
36
|
-
}
|
|
38
|
+
[`& .${chipClasses.label}`]: {
|
|
39
|
+
paddingLeft: 4,
|
|
40
|
+
paddingRight: 4,
|
|
41
|
+
...theme.typography.caption2,
|
|
42
|
+
color: "currentcolor"
|
|
37
43
|
},
|
|
38
|
-
|
|
39
|
-
|
|
44
|
+
[`& .${chipClasses.deleteIcon}`]: {
|
|
45
|
+
margin: 0,
|
|
40
46
|
width: 16,
|
|
41
47
|
height: 16,
|
|
42
48
|
padding: 0,
|
|
49
|
+
color: "currentColor",
|
|
50
|
+
"& svg .color0": {
|
|
51
|
+
fill: "currentcolor"
|
|
52
|
+
},
|
|
43
53
|
"&:hover": {
|
|
44
|
-
backgroundColor: theme.colors.containerBackgroundHover
|
|
54
|
+
backgroundColor: theme.colors.containerBackgroundHover,
|
|
55
|
+
color: "unset"
|
|
45
56
|
},
|
|
46
57
|
"&:focus": {
|
|
47
58
|
...outlineStyles,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {},\n\n chipRoot: {\n
|
|
1
|
+
{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { chipClasses } from \"@mui/material/Chip\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n color: theme.colors.base_dark,\n\n [`& .${chipClasses.avatar}`]: {\n width: 12,\n height: 12,\n marginLeft: 2,\n marginRight: 0,\n },\n },\n\n chipRoot: {\n [`&.${chipClasses.root}`]: {\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n fontFamily: theme.fontFamily.body,\n \"&:focus-visible\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n\n \"&$categorical\": {\n borderRadius: 8,\n \"& $label\": {\n color: theme.colors.secondary,\n },\n },\n },\n\n \"&$disabled\": {\n opacity: 1,\n backgroundColor: theme.colors.atmo3,\n \"& $label\": {\n color: theme.colors.secondary_60,\n },\n },\n\n [`& .${chipClasses.label}`]: {\n paddingLeft: 4,\n paddingRight: 4,\n ...(theme.typography.caption2 as CSSProperties),\n color: \"currentcolor\",\n },\n\n [`& .${chipClasses.deleteIcon}`]: {\n margin: 0,\n width: 16,\n height: 16,\n padding: 0,\n color: \"currentColor\",\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n color: \"unset\",\n },\n \"&:focus\": {\n ...outlineStyles,\n borderRadius: 0,\n },\n \"&:focus:not(:focus-visible)\": {\n outline: \"0 !important\",\n boxShadow: \"none !important\",\n },\n },\n },\n\n disabled: {},\n\n clickable: {\n cursor: \"pointer\",\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n\n categorical: {},\n\n label: {},\n\n deleteIcon: {},\n\n // TODO: redundant - use deleteIcon. remove in v6\n button: {},\n tagButton: {},\n // TODO: redundant - use $clickable or :not($disabled). remove in v6\n focusVisible: {},\n disabledDeleteIcon: {},\n categoricalFocus: {},\n categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;;;AAUO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,OAAO,MAAM,OAAO;AAAA,IAEpB,CAAC,MAAM,YAAY,MAAM,EAAE,GAAG;AAAA,MAC5B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,CAAC,KAAK,YAAY,IAAI,EAAE,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY,MAAM,WAAW;AAAA,MAC7B,mBAAmB;AAAA,QACjB,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,iBAAiB;AAAA,QACf,cAAc;AAAA,QACd,YAAY;AAAA,UACV,OAAO,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IAEA,CAAC,MAAM,YAAY,KAAK,EAAE,GAAG;AAAA,MAC3B,aAAa;AAAA,MACb,cAAc;AAAA,MACd,GAAI,MAAM,WAAW;AAAA,MACrB,OAAO;AAAA,IACT;AAAA,IAEA,CAAC,MAAM,YAAY,UAAU,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT,GAAG;AAAA,QACH,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEA,UAAU,CAAC;AAAA,EAEX,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EAEA,aAAa,CAAC;AAAA,EAEd,OAAO,CAAC;AAAA,EAER,YAAY,CAAC;AAAA;AAAA,EAGb,QAAQ,CAAC;AAAA,EACT,WAAW,CAAC;AAAA;AAAA,EAEZ,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,kBAAkB,CAAC;AAAA,EACnB,qBAAqB,CAAC;AACxB,CAAC;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -6398,9 +6398,9 @@ export declare type HvTagClasses = ExtractNames<typeof useClasses_107>;
|
|
|
6398
6398
|
|
|
6399
6399
|
export declare function hvTagColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, A extends object = Record<string, unknown>>(col: HvTableColumnConfig<D, H>, valueDataKey: keyof A, colorDataKey: keyof A, textColorDataKey: keyof A, fromRowData?: boolean, tagProps?: HvTagProps): HvTableColumnConfig<D, H>;
|
|
6400
6400
|
|
|
6401
|
-
export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes"> {
|
|
6401
|
+
export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes" | "onSelect"> {
|
|
6402
6402
|
/** The label of the tag element. */
|
|
6403
|
-
label?:
|
|
6403
|
+
label?: React_2.ReactNode;
|
|
6404
6404
|
/** Indicates that the form element is disabled. */
|
|
6405
6405
|
disabled?: boolean;
|
|
6406
6406
|
/** The type of the tag element. A tag can be of semantic or categoric type. */
|
|
@@ -6408,14 +6408,14 @@ export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes">
|
|
|
6408
6408
|
/** Background color to be applied to the tag */
|
|
6409
6409
|
color?: HvColorAny;
|
|
6410
6410
|
/** Icon used to customize the delete icon in the Chip element */
|
|
6411
|
-
deleteIcon?:
|
|
6411
|
+
deleteIcon?: React_2.ReactElement;
|
|
6412
6412
|
/**
|
|
6413
6413
|
* The callback fired when the delete icon is pressed.
|
|
6414
6414
|
* This function has to be provided to the component, in order to render the delete icon
|
|
6415
6415
|
* */
|
|
6416
|
-
onDelete?: (event:
|
|
6416
|
+
onDelete?: (event: React_2.MouseEvent<HTMLElement>) => void;
|
|
6417
6417
|
/** Callback triggered when any item is clicked. */
|
|
6418
|
-
onClick?: (event:
|
|
6418
|
+
onClick?: (event: React_2.MouseEvent<HTMLElement>, selected?: boolean) => void;
|
|
6419
6419
|
/** Aria properties to apply to delete button in tag
|
|
6420
6420
|
* @deprecated no longer used
|
|
6421
6421
|
*/
|
|
@@ -6428,6 +6428,12 @@ export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes">
|
|
|
6428
6428
|
ref?: ChipProps["ref"];
|
|
6429
6429
|
/** @ignore */
|
|
6430
6430
|
component?: ChipProps["component"];
|
|
6431
|
+
/** Determines whether or not the tag is selectable. */
|
|
6432
|
+
selectable?: boolean;
|
|
6433
|
+
/** Defines if the tag is selected. When defined the tag state becomes controlled. */
|
|
6434
|
+
selected?: boolean;
|
|
6435
|
+
/** When uncontrolled, defines the initial selected state. */
|
|
6436
|
+
defaultSelected?: boolean;
|
|
6431
6437
|
}
|
|
6432
6438
|
|
|
6433
6439
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.41.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"access": "public",
|
|
65
65
|
"directory": "package"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "5d2df079c4d3e8b19badd85be4e98b4d778e6d84",
|
|
68
68
|
"main": "dist/cjs/index.cjs",
|
|
69
69
|
"exports": {
|
|
70
70
|
".": {
|