@hitachivantara/uikit-react-core 5.27.9 → 5.27.10
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/components/Tag/Tag.cjs +22 -56
- package/dist/cjs/components/Tag/Tag.cjs.map +1 -1
- package/dist/cjs/components/Tag/Tag.styles.cjs +24 -63
- package/dist/cjs/components/Tag/Tag.styles.cjs.map +1 -1
- package/dist/esm/components/Tag/Tag.js +23 -57
- package/dist/esm/components/Tag/Tag.js.map +1 -1
- package/dist/esm/components/Tag/Tag.styles.js +24 -63
- package/dist/esm/components/Tag/Tag.styles.js.map +1 -1
- package/dist/types/index.d.ts +13 -13
- package/package.json +2 -2
- package/dist/cjs/components/Tag/utils.cjs +0 -21
- package/dist/cjs/components/Tag/utils.cjs.map +0 -1
- package/dist/esm/components/Tag/utils.js +0 -21
- package/dist/esm/components/Tag/utils.js.map +0 -1
|
@@ -1,28 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
|
-
const React = require("react");
|
|
5
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
6
5
|
const Chip = require("@mui/material/Chip");
|
|
7
6
|
const useTheme = require("../../hooks/useTheme.cjs");
|
|
8
7
|
const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
|
|
9
8
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
10
9
|
const Tag_styles = require("./Tag.styles.cjs");
|
|
11
|
-
const utils = require("./utils.cjs");
|
|
12
|
-
const Button = require("../Button/Button.cjs");
|
|
13
10
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
14
11
|
const Chip__default = /* @__PURE__ */ _interopDefault(Chip);
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
const defaultCategoricalColor = colors.cat1;
|
|
18
|
-
let backgroundColor;
|
|
19
|
-
if (type === "semantic") {
|
|
20
|
-
backgroundColor = uikitStyles.theme.colors[customColor] || customColor || defaultSemanticColor;
|
|
21
|
-
}
|
|
22
|
-
if (type === "categorical") {
|
|
23
|
-
backgroundColor = colors[customColor] || customColor || defaultCategoricalColor;
|
|
24
|
-
}
|
|
25
|
-
return backgroundColor;
|
|
12
|
+
const getCategoricalColor = (customColor, colors) => {
|
|
13
|
+
return customColor && (colors == null ? void 0 : colors[customColor]) || customColor || (colors == null ? void 0 : colors.cat1);
|
|
26
14
|
};
|
|
27
15
|
const HvTag = (props) => {
|
|
28
16
|
const {
|
|
@@ -36,7 +24,8 @@ const HvTag = (props) => {
|
|
|
36
24
|
deleteIcon,
|
|
37
25
|
onDelete,
|
|
38
26
|
onClick,
|
|
39
|
-
|
|
27
|
+
// TODO: remove from API
|
|
28
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
40
29
|
deleteButtonArialLabel = "Delete tag",
|
|
41
30
|
deleteButtonProps = {},
|
|
42
31
|
...others
|
|
@@ -49,49 +38,26 @@ const HvTag = (props) => {
|
|
|
49
38
|
cx,
|
|
50
39
|
css
|
|
51
40
|
} = Tag_styles.useClasses(classesProp);
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
...disabled ? {
|
|
59
|
-
cursor: "not-allowed"
|
|
60
|
-
} : void 0,
|
|
61
|
-
height: 16,
|
|
62
|
-
"& svg .color0": {
|
|
63
|
-
fill: uikitStyles.theme.colors[disabled ? disabledSemanticColor : "base_dark"]
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { classes: {
|
|
67
|
-
startIcon: classes.tagButton,
|
|
68
|
-
focusVisible: classes.focusVisible,
|
|
69
|
-
root: classes.button
|
|
70
|
-
}, "aria-label": deleteButtonArialLabel, tabIndex, variant: "secondaryGhost", ...deleteButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, { iconSize: "XS", className: closeIconStyles, color: disabled ? disabledSemanticColor : "base_dark" }) });
|
|
71
|
-
};
|
|
72
|
-
const inlineStyle = {
|
|
73
|
-
...style
|
|
74
|
-
};
|
|
75
|
-
const categoricalBackgroundColor = type === "categorical" ? getColor(color, type, colors) : void 0;
|
|
76
|
-
if (type === "semantic") {
|
|
77
|
-
inlineStyle.backgroundColor = getColor(color, type, {});
|
|
78
|
-
} else if (type === "categorical") {
|
|
79
|
-
inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;
|
|
80
|
-
}
|
|
81
|
-
const [hover, setHover] = React.useState(false);
|
|
82
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label, className: cx(classes.root, className), onMouseEnter: () => {
|
|
83
|
-
setHover(!!onClick);
|
|
84
|
-
}, onMouseLeave: () => {
|
|
85
|
-
setHover(false);
|
|
86
|
-
}, style: {
|
|
87
|
-
...disabled ? null : inlineStyle,
|
|
88
|
-
...hover && !disabled ? {
|
|
41
|
+
const defaultDeleteIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, { role: "none", className: cx(classes.button, classes.tagButton), iconSize: "XS", color: "base_dark", ...deleteButtonProps });
|
|
42
|
+
const categoricalBackgroundColor = type === "categorical" ? getCategoricalColor(color, colors) : void 0;
|
|
43
|
+
const backgroundColor = type === "semantic" && uikitStyles.getColor(color, "neutral_20") || type === "categorical" && `${categoricalBackgroundColor}30` || void 0;
|
|
44
|
+
const isClickable = !!(onClick || onDelete) && !disabled;
|
|
45
|
+
const clickableClass = css({
|
|
46
|
+
"&:hover": {
|
|
89
47
|
boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
|
|
90
|
-
}
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label, disabled, className: cx({
|
|
51
|
+
[clickableClass]: isClickable
|
|
52
|
+
}, className), style: {
|
|
53
|
+
...disabled ? null : {
|
|
54
|
+
backgroundColor
|
|
55
|
+
},
|
|
56
|
+
...style
|
|
91
57
|
}, classes: {
|
|
92
|
-
root: cx(classes.chipRoot, {
|
|
58
|
+
root: cx(classes.root, classes.chipRoot, {
|
|
93
59
|
[classes.disabled]: disabled,
|
|
94
|
-
[classes.clickable]:
|
|
60
|
+
[classes.clickable]: isClickable,
|
|
95
61
|
[classes.categorical]: type === "categorical",
|
|
96
62
|
[classes.categoricalFocus]: type === "categorical" && !disabled,
|
|
97
63
|
[classes.categoricalDisabled]: type === "categorical" && disabled
|
|
@@ -100,7 +66,7 @@ const HvTag = (props) => {
|
|
|
100
66
|
deleteIcon: cx(classes.deleteIcon, {
|
|
101
67
|
[classes.disabledDeleteIcon]: disabled
|
|
102
68
|
})
|
|
103
|
-
}, deleteIcon:
|
|
69
|
+
}, deleteIcon: deleteIcon || defaultDeleteIcon, onDelete: disabled ? void 0 : onDelete, onClick: disabled ? void 0 : onClick, ...others });
|
|
104
70
|
};
|
|
105
71
|
exports.tagClasses = Tag_styles.staticClasses;
|
|
106
72
|
exports.HvTag = HvTag;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps extends Omit<MuiChipProps, \"color\" | \"classes\"> {\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>) => 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}\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 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 defaultDeleteIcon = (\n <CloseXS\n role=\"none\"\n className={cx(classes.button, classes.tagButton)}\n iconSize=\"XS\"\n color=\"base_dark\"\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 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={disabled ? undefined : onClick}\n {...others}\n />\n );\n};\n"],"names":["getCategoricalColor","customColor","colors","cat1","HvTag","props","classes","classesProp","className","style","label","disabled","type","color","deleteIcon","onDelete","onClick","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","defaultDeleteIcon","jsx","CloseXS","button","tagButton","categoricalBackgroundColor","undefined","backgroundColor","getColor","isClickable","clickableClass","boxShadow","Chip","root","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon"],"mappings":";;;;;;;;;;;AA6CA,MAAMA,sBAAsBA,CAACC,aAAaC,WAAW;AACnD,SAAQD,gBAAeC,iCAASD,iBAAiBA,gBAAeC,iCAAQC;AAC1E;AAUaC,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAAAA;AAAAA,IAGAC,yBAAyB;AAAA,IACzBC,oBAAoB,CAAC;AAAA,IACrB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASf,KAAK;AAC5B,QAAA;AAAA,IAAEH;AAAAA,MAAWmB,SAAS,SAAA;AACtB,QAAA;AAAA,IAAEf;AAAAA,IAASgB;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAAA,WAAWjB,WAAW;AAEnD,QAAMkB,oBACHC,2BAAA,IAAAC,yBAAA,EACC,MAAK,QACL,WAAWL,GAAGhB,QAAQsB,QAAQtB,QAAQuB,SAAS,GAC/C,UAAS,MACT,OAAM,aACFX,GAAAA,kBAEP,CAAA;AAED,QAAMY,6BACJlB,SAAS,gBAAgBZ,oBAAoBa,OAAOX,MAAM,IAAI6B;AAE1DC,QAAAA,kBACHpB,SAAS,cAAcqB,YAASpB,SAAAA,OAAO,YAAY,KACnDD,SAAS,iBAAkB,GAAEkB,0BAA2B,QACzDC;AAEF,QAAMG,cAAc,CAAC,EAAElB,WAAWD,aAAa,CAACJ;AAEhD,QAAMwB,iBAAiBZ,IAAI;AAAA,IACzB,WAAW;AAAA,MACTa,WAAY,aAAYN,0BAA2B;AAAA,IACrD;AAAA,EAAA,CACD;AAED,SACGJ,2BAAAA,IAAAW,cAAAA,SAAA,EACC,OACA,UACA,WAAWf,GAAG;AAAA,IAAE,CAACa,cAAc,GAAGD;AAAAA,EAAAA,GAAe1B,SAAS,GAC1D,OAAO;AAAA,IACL,GAAIG,WAAW,OAAO;AAAA,MAAEqB;AAAAA,IAAgB;AAAA,IACxC,GAAGvB;AAAAA,KAEL,SAAS;AAAA,IACP6B,MAAMhB,GAAGhB,QAAQgC,MAAMhC,QAAQiC,UAAU;AAAA,MACvC,CAACjC,QAAQK,QAAQ,GAAGA;AAAAA,MACpB,CAACL,QAAQkC,SAAS,GAAGN;AAAAA,MACrB,CAAC5B,QAAQmC,WAAW,GAAG7B,SAAS;AAAA,MAChC,CAACN,QAAQoC,gBAAgB,GAAG9B,SAAS,iBAAiB,CAACD;AAAAA,MACvD,CAACL,QAAQqC,mBAAmB,GAAG/B,SAAS,iBAAiBD;AAAAA,IAAAA,CAC1D;AAAA,IACDD,OAAOJ,QAAQI;AAAAA,IACfI,YAAYQ,GAAGhB,QAAQQ,YAAY;AAAA,MACjC,CAACR,QAAQsC,kBAAkB,GAAGjC;AAAAA,IAAAA,CAC/B;AAAA,EAAA,GAEH,YAAYG,cAAcW,mBAC1B,UAAUd,WAAWoB,SAAYhB,UACjC,SAASJ,WAAWoB,SAAYf,SAC5BG,GAAAA,OACJ,CAAA;AAEN;;;"}
|
|
@@ -15,26 +15,23 @@ const {
|
|
|
15
15
|
borderRadius: 0,
|
|
16
16
|
maxWidth: 180,
|
|
17
17
|
fontFamily: uikitStyles.theme.fontFamily.body,
|
|
18
|
-
"
|
|
18
|
+
"&:focus-visible": {
|
|
19
19
|
backgroundColor: hexToRgbA.hexToRgbA(uikitStyles.theme.colors.base_light, 0.3)
|
|
20
20
|
},
|
|
21
21
|
"&$categorical": {
|
|
22
22
|
borderRadius: 8,
|
|
23
|
-
"&$clickable": {
|
|
24
|
-
cursor: "pointer"
|
|
25
|
-
},
|
|
26
|
-
"&:hover": {
|
|
27
|
-
borderRadius: 8
|
|
28
|
-
},
|
|
29
23
|
"& $label": {
|
|
30
24
|
color: uikitStyles.theme.colors.secondary
|
|
31
|
-
},
|
|
32
|
-
"&:focus:not(:focus-visible)": {
|
|
33
|
-
outline: "0 !important",
|
|
34
|
-
boxShadow: "none !important"
|
|
35
25
|
}
|
|
36
26
|
}
|
|
37
27
|
},
|
|
28
|
+
"&$disabled": {
|
|
29
|
+
opacity: 1,
|
|
30
|
+
backgroundColor: uikitStyles.theme.colors.atmo3,
|
|
31
|
+
"& $label": {
|
|
32
|
+
color: uikitStyles.theme.colors.secondary_60
|
|
33
|
+
}
|
|
34
|
+
},
|
|
38
35
|
"& .MuiChip-label": {
|
|
39
36
|
paddingLeft: uikitStyles.theme.space.xs,
|
|
40
37
|
paddingRight: uikitStyles.theme.space.xs,
|
|
@@ -48,11 +45,9 @@ const {
|
|
|
48
45
|
marginRight: 0,
|
|
49
46
|
width: 16,
|
|
50
47
|
height: 16,
|
|
51
|
-
minWidth: 16,
|
|
52
|
-
minHeight: 16,
|
|
53
48
|
padding: 0,
|
|
54
49
|
"&:hover": {
|
|
55
|
-
backgroundColor:
|
|
50
|
+
backgroundColor: uikitStyles.theme.button.hoverColor
|
|
56
51
|
},
|
|
57
52
|
"&:focus": {
|
|
58
53
|
...focusUtils.outlineStyles,
|
|
@@ -64,58 +59,24 @@ const {
|
|
|
64
59
|
}
|
|
65
60
|
}
|
|
66
61
|
},
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
label: {},
|
|
72
|
-
tagButton: {
|
|
73
|
-
width: 16,
|
|
74
|
-
height: 16,
|
|
75
|
-
minWidth: 16,
|
|
76
|
-
minHeight: 16,
|
|
77
|
-
padding: 0,
|
|
78
|
-
margin: 0
|
|
79
|
-
},
|
|
80
|
-
deleteIcon: {},
|
|
81
|
-
disabledDeleteIcon: {
|
|
82
|
-
"&:hover": {
|
|
83
|
-
backgroundColor: uikitStyles.theme.colors.atmo3
|
|
84
|
-
},
|
|
85
|
-
"&:focus": {
|
|
86
|
-
backgroundColor: uikitStyles.theme.colors.atmo3,
|
|
87
|
-
outline: "none",
|
|
88
|
-
boxShadow: "none",
|
|
89
|
-
outlineOffset: 0
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
categorical: {},
|
|
93
|
-
clickable: {},
|
|
94
|
-
categoricalFocus: {
|
|
95
|
-
"&:focus": {
|
|
62
|
+
disabled: {},
|
|
63
|
+
clickable: {
|
|
64
|
+
cursor: "pointer",
|
|
65
|
+
"&:focus-visible": {
|
|
96
66
|
...focusUtils.outlineStyles
|
|
97
67
|
}
|
|
98
68
|
},
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
color: uikitStyles.theme.colors.secondary_60
|
|
111
|
-
},
|
|
112
|
-
"&:hover": {
|
|
113
|
-
backgroundColor: uikitStyles.theme.colors.atmo3
|
|
114
|
-
},
|
|
115
|
-
"&:focus": {
|
|
116
|
-
outline: "none"
|
|
117
|
-
}
|
|
118
|
-
}
|
|
69
|
+
categorical: {},
|
|
70
|
+
label: {},
|
|
71
|
+
deleteIcon: {},
|
|
72
|
+
// TODO: redundant - use deleteIcon. remove in v6
|
|
73
|
+
button: {},
|
|
74
|
+
tagButton: {},
|
|
75
|
+
// TODO: redundant - use $clickable or :not($disabled). remove in v6
|
|
76
|
+
focusVisible: {},
|
|
77
|
+
disabledDeleteIcon: {},
|
|
78
|
+
categoricalFocus: {},
|
|
79
|
+
categoricalDisabled: {}
|
|
119
80
|
});
|
|
120
81
|
exports.staticClasses = staticClasses;
|
|
121
82
|
exports.useClasses = useClasses;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styles.cjs","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {},\n\n chipRoot: {\n \"&.MuiChip-root\": {\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n fontFamily: theme.fontFamily.body,\n\n \"
|
|
1
|
+
{"version":3,"file":"Tag.styles.cjs","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {},\n\n chipRoot: {\n \"&.MuiChip-root\": {\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n fontFamily: theme.fontFamily.body,\n\n \"&:focus-visible\": {\n backgroundColor: hexToRgbA(theme.colors.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 \"& .MuiChip-label\": {\n paddingLeft: theme.space.xs,\n paddingRight: theme.space.xs,\n ...(theme.typography.caption1 as CSSProperties),\n color: theme.colors.base_dark,\n \"& p\": {\n color: theme.colors.base_dark,\n },\n },\n\n \"& .MuiChip-deleteIcon\": {\n marginRight: 0,\n width: 16,\n height: 16,\n padding: 0,\n \"&:hover\": {\n backgroundColor: theme.button.hoverColor,\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":["staticClasses","useClasses","createClasses","root","chipRoot","height","borderRadius","maxWidth","fontFamily","theme","body","backgroundColor","hexToRgbA","colors","base_light","color","secondary","opacity","atmo3","secondary_60","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","padding","button","hoverColor","outlineStyles","outline","boxShadow","disabled","clickable","cursor","categorical","label","deleteIcon","tagButton","focusVisible","disabledDeleteIcon","categoricalFocus","categoricalDisabled"],"mappings":";;;;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,SAAS;AAAA,EAClEC,MAAM,CAAC;AAAA,EAEPC,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChBC,QAAQ;AAAA,MACRC,cAAc;AAAA,MACdC,UAAU;AAAA,MACVC,YAAYC,YAAAA,MAAMD,WAAWE;AAAAA,MAE7B,mBAAmB;AAAA,QACjBC,iBAAiBC,UAAAA,UAAUH,YAAAA,MAAMI,OAAOC,YAAY,GAAG;AAAA,MACzD;AAAA,MAEA,iBAAiB;AAAA,QACfR,cAAc;AAAA,QACd,YAAY;AAAA,UACVS,OAAON,YAAAA,MAAMI,OAAOG;AAAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZC,SAAS;AAAA,MACTN,iBAAiBF,YAAAA,MAAMI,OAAOK;AAAAA,MAC9B,YAAY;AAAA,QACVH,OAAON,YAAAA,MAAMI,OAAOM;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,oBAAoB;AAAA,MAClBC,aAAaX,YAAAA,MAAMY,MAAMC;AAAAA,MACzBC,cAAcd,YAAAA,MAAMY,MAAMC;AAAAA,MAC1B,GAAIb,YAAAA,MAAMe,WAAWC;AAAAA,MACrBV,OAAON,YAAAA,MAAMI,OAAOa;AAAAA,MACpB,OAAO;AAAA,QACLX,OAAON,YAAAA,MAAMI,OAAOa;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,yBAAyB;AAAA,MACvBC,aAAa;AAAA,MACbC,OAAO;AAAA,MACPvB,QAAQ;AAAA,MACRwB,SAAS;AAAA,MACT,WAAW;AAAA,QACTlB,iBAAiBF,YAAAA,MAAMqB,OAAOC;AAAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT,GAAGC,WAAAA;AAAAA,QACH1B,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B2B,SAAS;AAAA,QACTC,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEAC,UAAU,CAAC;AAAA,EAEXC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGL,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EAEAM,aAAa,CAAC;AAAA,EAEdC,OAAO,CAAC;AAAA,EAERC,YAAY,CAAC;AAAA;AAAA,EAGbV,QAAQ,CAAC;AAAA,EACTW,WAAW,CAAC;AAAA;AAAA,EAEZC,cAAc,CAAC;AAAA,EACfC,oBAAoB,CAAC;AAAA,EACrBC,kBAAkB,CAAC;AAAA,EACnBC,qBAAqB,CAAC;AACxB,CAAC;;;"}
|
|
@@ -1,25 +1,13 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
+
import { getColor } from "@hitachivantara/uikit-styles";
|
|
4
3
|
import Chip from "@mui/material/Chip";
|
|
5
4
|
import { useTheme } from "../../hooks/useTheme.js";
|
|
6
5
|
import { useDefaultProps } from "../../hooks/useDefaultProps.js";
|
|
7
6
|
import { CloseXS } from "@hitachivantara/uikit-react-icons";
|
|
8
7
|
import { useClasses } from "./Tag.styles.js";
|
|
9
8
|
import { staticClasses } from "./Tag.styles.js";
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const getColor = (customColor, type, colors) => {
|
|
13
|
-
const defaultSemanticColor = theme.colors.neutral_20;
|
|
14
|
-
const defaultCategoricalColor = colors.cat1;
|
|
15
|
-
let backgroundColor;
|
|
16
|
-
if (type === "semantic") {
|
|
17
|
-
backgroundColor = theme.colors[customColor] || customColor || defaultSemanticColor;
|
|
18
|
-
}
|
|
19
|
-
if (type === "categorical") {
|
|
20
|
-
backgroundColor = colors[customColor] || customColor || defaultCategoricalColor;
|
|
21
|
-
}
|
|
22
|
-
return backgroundColor;
|
|
9
|
+
const getCategoricalColor = (customColor, colors) => {
|
|
10
|
+
return customColor && (colors == null ? void 0 : colors[customColor]) || customColor || (colors == null ? void 0 : colors.cat1);
|
|
23
11
|
};
|
|
24
12
|
const HvTag = (props) => {
|
|
25
13
|
const {
|
|
@@ -33,7 +21,8 @@ const HvTag = (props) => {
|
|
|
33
21
|
deleteIcon,
|
|
34
22
|
onDelete,
|
|
35
23
|
onClick,
|
|
36
|
-
|
|
24
|
+
// TODO: remove from API
|
|
25
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
37
26
|
deleteButtonArialLabel = "Delete tag",
|
|
38
27
|
deleteButtonProps = {},
|
|
39
28
|
...others
|
|
@@ -46,49 +35,26 @@ const HvTag = (props) => {
|
|
|
46
35
|
cx,
|
|
47
36
|
css
|
|
48
37
|
} = useClasses(classesProp);
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
...disabled ? {
|
|
56
|
-
cursor: "not-allowed"
|
|
57
|
-
} : void 0,
|
|
58
|
-
height: 16,
|
|
59
|
-
"& svg .color0": {
|
|
60
|
-
fill: theme.colors[disabled ? disabledSemanticColor : "base_dark"]
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
return /* @__PURE__ */ jsx(HvButton, { classes: {
|
|
64
|
-
startIcon: classes.tagButton,
|
|
65
|
-
focusVisible: classes.focusVisible,
|
|
66
|
-
root: classes.button
|
|
67
|
-
}, "aria-label": deleteButtonArialLabel, tabIndex, variant: "secondaryGhost", ...deleteButtonProps, children: /* @__PURE__ */ jsx(CloseXS, { iconSize: "XS", className: closeIconStyles, color: disabled ? disabledSemanticColor : "base_dark" }) });
|
|
68
|
-
};
|
|
69
|
-
const inlineStyle = {
|
|
70
|
-
...style
|
|
71
|
-
};
|
|
72
|
-
const categoricalBackgroundColor = type === "categorical" ? getColor(color, type, colors) : void 0;
|
|
73
|
-
if (type === "semantic") {
|
|
74
|
-
inlineStyle.backgroundColor = getColor(color, type, {});
|
|
75
|
-
} else if (type === "categorical") {
|
|
76
|
-
inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;
|
|
77
|
-
}
|
|
78
|
-
const [hover, setHover] = useState(false);
|
|
79
|
-
return /* @__PURE__ */ jsx(Chip, { label, className: cx(classes.root, className), onMouseEnter: () => {
|
|
80
|
-
setHover(!!onClick);
|
|
81
|
-
}, onMouseLeave: () => {
|
|
82
|
-
setHover(false);
|
|
83
|
-
}, style: {
|
|
84
|
-
...disabled ? null : inlineStyle,
|
|
85
|
-
...hover && !disabled ? {
|
|
38
|
+
const defaultDeleteIcon = /* @__PURE__ */ jsx(CloseXS, { role: "none", className: cx(classes.button, classes.tagButton), iconSize: "XS", color: "base_dark", ...deleteButtonProps });
|
|
39
|
+
const categoricalBackgroundColor = type === "categorical" ? getCategoricalColor(color, colors) : void 0;
|
|
40
|
+
const backgroundColor = type === "semantic" && getColor(color, "neutral_20") || type === "categorical" && `${categoricalBackgroundColor}30` || void 0;
|
|
41
|
+
const isClickable = !!(onClick || onDelete) && !disabled;
|
|
42
|
+
const clickableClass = css({
|
|
43
|
+
"&:hover": {
|
|
86
44
|
boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
|
|
87
|
-
}
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
return /* @__PURE__ */ jsx(Chip, { label, disabled, className: cx({
|
|
48
|
+
[clickableClass]: isClickable
|
|
49
|
+
}, className), style: {
|
|
50
|
+
...disabled ? null : {
|
|
51
|
+
backgroundColor
|
|
52
|
+
},
|
|
53
|
+
...style
|
|
88
54
|
}, classes: {
|
|
89
|
-
root: cx(classes.chipRoot, {
|
|
55
|
+
root: cx(classes.root, classes.chipRoot, {
|
|
90
56
|
[classes.disabled]: disabled,
|
|
91
|
-
[classes.clickable]:
|
|
57
|
+
[classes.clickable]: isClickable,
|
|
92
58
|
[classes.categorical]: type === "categorical",
|
|
93
59
|
[classes.categoricalFocus]: type === "categorical" && !disabled,
|
|
94
60
|
[classes.categoricalDisabled]: type === "categorical" && disabled
|
|
@@ -97,7 +63,7 @@ const HvTag = (props) => {
|
|
|
97
63
|
deleteIcon: cx(classes.deleteIcon, {
|
|
98
64
|
[classes.disabledDeleteIcon]: disabled
|
|
99
65
|
})
|
|
100
|
-
}, deleteIcon:
|
|
66
|
+
}, deleteIcon: deleteIcon || defaultDeleteIcon, onDelete: disabled ? void 0 : onDelete, onClick: disabled ? void 0 : onClick, ...others });
|
|
101
67
|
};
|
|
102
68
|
export {
|
|
103
69
|
HvTag,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps extends Omit<MuiChipProps, \"color\" | \"classes\"> {\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>) => 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}\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 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 defaultDeleteIcon = (\n <CloseXS\n role=\"none\"\n className={cx(classes.button, classes.tagButton)}\n iconSize=\"XS\"\n color=\"base_dark\"\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 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={disabled ? undefined : onClick}\n {...others}\n />\n );\n};\n"],"names":["getCategoricalColor","customColor","colors","cat1","HvTag","props","classes","classesProp","className","style","label","disabled","type","color","deleteIcon","onDelete","onClick","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","defaultDeleteIcon","button","tagButton","categoricalBackgroundColor","undefined","backgroundColor","getColor","isClickable","clickableClass","boxShadow","root","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon"],"mappings":";;;;;;;;AA6CA,MAAMA,sBAAsBA,CAACC,aAAaC,WAAW;AACnD,SAAQD,gBAAeC,iCAASD,iBAAiBA,gBAAeC,iCAAQC;AAC1E;AAUaC,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAAAA;AAAAA,IAGAC,yBAAyB;AAAA,IACzBC,oBAAoB,CAAC;AAAA,IACrB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,SAASf,KAAK;AAC5B,QAAA;AAAA,IAAEH;AAAAA,MAAWmB,SAAS;AACtB,QAAA;AAAA,IAAEf;AAAAA,IAASgB;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWjB,WAAW;AAEnD,QAAMkB,oBACH,oBAAA,SAAA,EACC,MAAK,QACL,WAAWH,GAAGhB,QAAQoB,QAAQpB,QAAQqB,SAAS,GAC/C,UAAS,MACT,OAAM,aACFT,GAAAA,kBAEP,CAAA;AAED,QAAMU,6BACJhB,SAAS,gBAAgBZ,oBAAoBa,OAAOX,MAAM,IAAI2B;AAE1DC,QAAAA,kBACHlB,SAAS,cAAcmB,SAASlB,OAAO,YAAY,KACnDD,SAAS,iBAAkB,GAAEgB,0BAA2B,QACzDC;AAEF,QAAMG,cAAc,CAAC,EAAEhB,WAAWD,aAAa,CAACJ;AAEhD,QAAMsB,iBAAiBV,IAAI;AAAA,IACzB,WAAW;AAAA,MACTW,WAAY,aAAYN,0BAA2B;AAAA,IACrD;AAAA,EAAA,CACD;AAED,SACG,oBAAA,MAAA,EACC,OACA,UACA,WAAWN,GAAG;AAAA,IAAE,CAACW,cAAc,GAAGD;AAAAA,EAAAA,GAAexB,SAAS,GAC1D,OAAO;AAAA,IACL,GAAIG,WAAW,OAAO;AAAA,MAAEmB;AAAAA,IAAgB;AAAA,IACxC,GAAGrB;AAAAA,KAEL,SAAS;AAAA,IACP0B,MAAMb,GAAGhB,QAAQ6B,MAAM7B,QAAQ8B,UAAU;AAAA,MACvC,CAAC9B,QAAQK,QAAQ,GAAGA;AAAAA,MACpB,CAACL,QAAQ+B,SAAS,GAAGL;AAAAA,MACrB,CAAC1B,QAAQgC,WAAW,GAAG1B,SAAS;AAAA,MAChC,CAACN,QAAQiC,gBAAgB,GAAG3B,SAAS,iBAAiB,CAACD;AAAAA,MACvD,CAACL,QAAQkC,mBAAmB,GAAG5B,SAAS,iBAAiBD;AAAAA,IAAAA,CAC1D;AAAA,IACDD,OAAOJ,QAAQI;AAAAA,IACfI,YAAYQ,GAAGhB,QAAQQ,YAAY;AAAA,MACjC,CAACR,QAAQmC,kBAAkB,GAAG9B;AAAAA,IAAAA,CAC/B;AAAA,EAAA,GAEH,YAAYG,cAAcW,mBAC1B,UAAUd,WAAWkB,SAAYd,UACjC,SAASJ,WAAWkB,SAAYb,SAC5BG,GAAAA,OACJ,CAAA;AAEN;"}
|
|
@@ -13,26 +13,23 @@ const {
|
|
|
13
13
|
borderRadius: 0,
|
|
14
14
|
maxWidth: 180,
|
|
15
15
|
fontFamily: theme.fontFamily.body,
|
|
16
|
-
"
|
|
16
|
+
"&:focus-visible": {
|
|
17
17
|
backgroundColor: hexToRgbA(theme.colors.base_light, 0.3)
|
|
18
18
|
},
|
|
19
19
|
"&$categorical": {
|
|
20
20
|
borderRadius: 8,
|
|
21
|
-
"&$clickable": {
|
|
22
|
-
cursor: "pointer"
|
|
23
|
-
},
|
|
24
|
-
"&:hover": {
|
|
25
|
-
borderRadius: 8
|
|
26
|
-
},
|
|
27
21
|
"& $label": {
|
|
28
22
|
color: theme.colors.secondary
|
|
29
|
-
},
|
|
30
|
-
"&:focus:not(:focus-visible)": {
|
|
31
|
-
outline: "0 !important",
|
|
32
|
-
boxShadow: "none !important"
|
|
33
23
|
}
|
|
34
24
|
}
|
|
35
25
|
},
|
|
26
|
+
"&$disabled": {
|
|
27
|
+
opacity: 1,
|
|
28
|
+
backgroundColor: theme.colors.atmo3,
|
|
29
|
+
"& $label": {
|
|
30
|
+
color: theme.colors.secondary_60
|
|
31
|
+
}
|
|
32
|
+
},
|
|
36
33
|
"& .MuiChip-label": {
|
|
37
34
|
paddingLeft: theme.space.xs,
|
|
38
35
|
paddingRight: theme.space.xs,
|
|
@@ -46,11 +43,9 @@ const {
|
|
|
46
43
|
marginRight: 0,
|
|
47
44
|
width: 16,
|
|
48
45
|
height: 16,
|
|
49
|
-
minWidth: 16,
|
|
50
|
-
minHeight: 16,
|
|
51
46
|
padding: 0,
|
|
52
47
|
"&:hover": {
|
|
53
|
-
backgroundColor:
|
|
48
|
+
backgroundColor: theme.button.hoverColor
|
|
54
49
|
},
|
|
55
50
|
"&:focus": {
|
|
56
51
|
...outlineStyles,
|
|
@@ -62,58 +57,24 @@ const {
|
|
|
62
57
|
}
|
|
63
58
|
}
|
|
64
59
|
},
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
label: {},
|
|
70
|
-
tagButton: {
|
|
71
|
-
width: 16,
|
|
72
|
-
height: 16,
|
|
73
|
-
minWidth: 16,
|
|
74
|
-
minHeight: 16,
|
|
75
|
-
padding: 0,
|
|
76
|
-
margin: 0
|
|
77
|
-
},
|
|
78
|
-
deleteIcon: {},
|
|
79
|
-
disabledDeleteIcon: {
|
|
80
|
-
"&:hover": {
|
|
81
|
-
backgroundColor: theme.colors.atmo3
|
|
82
|
-
},
|
|
83
|
-
"&:focus": {
|
|
84
|
-
backgroundColor: theme.colors.atmo3,
|
|
85
|
-
outline: "none",
|
|
86
|
-
boxShadow: "none",
|
|
87
|
-
outlineOffset: 0
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
categorical: {},
|
|
91
|
-
clickable: {},
|
|
92
|
-
categoricalFocus: {
|
|
93
|
-
"&:focus": {
|
|
60
|
+
disabled: {},
|
|
61
|
+
clickable: {
|
|
62
|
+
cursor: "pointer",
|
|
63
|
+
"&:focus-visible": {
|
|
94
64
|
...outlineStyles
|
|
95
65
|
}
|
|
96
66
|
},
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
color: theme.colors.secondary_60
|
|
109
|
-
},
|
|
110
|
-
"&:hover": {
|
|
111
|
-
backgroundColor: theme.colors.atmo3
|
|
112
|
-
},
|
|
113
|
-
"&:focus": {
|
|
114
|
-
outline: "none"
|
|
115
|
-
}
|
|
116
|
-
}
|
|
67
|
+
categorical: {},
|
|
68
|
+
label: {},
|
|
69
|
+
deleteIcon: {},
|
|
70
|
+
// TODO: redundant - use deleteIcon. remove in v6
|
|
71
|
+
button: {},
|
|
72
|
+
tagButton: {},
|
|
73
|
+
// TODO: redundant - use $clickable or :not($disabled). remove in v6
|
|
74
|
+
focusVisible: {},
|
|
75
|
+
disabledDeleteIcon: {},
|
|
76
|
+
categoricalFocus: {},
|
|
77
|
+
categoricalDisabled: {}
|
|
117
78
|
});
|
|
118
79
|
export {
|
|
119
80
|
staticClasses,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styles.js","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {},\n\n chipRoot: {\n \"&.MuiChip-root\": {\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n fontFamily: theme.fontFamily.body,\n\n \"
|
|
1
|
+
{"version":3,"file":"Tag.styles.js","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {},\n\n chipRoot: {\n \"&.MuiChip-root\": {\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n fontFamily: theme.fontFamily.body,\n\n \"&:focus-visible\": {\n backgroundColor: hexToRgbA(theme.colors.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 \"& .MuiChip-label\": {\n paddingLeft: theme.space.xs,\n paddingRight: theme.space.xs,\n ...(theme.typography.caption1 as CSSProperties),\n color: theme.colors.base_dark,\n \"& p\": {\n color: theme.colors.base_dark,\n },\n },\n\n \"& .MuiChip-deleteIcon\": {\n marginRight: 0,\n width: 16,\n height: 16,\n padding: 0,\n \"&:hover\": {\n backgroundColor: theme.button.hoverColor,\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":["staticClasses","useClasses","createClasses","root","chipRoot","height","borderRadius","maxWidth","fontFamily","theme","body","backgroundColor","hexToRgbA","colors","base_light","color","secondary","opacity","atmo3","secondary_60","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","padding","button","hoverColor","outlineStyles","outline","boxShadow","disabled","clickable","cursor","categorical","label","deleteIcon","tagButton","focusVisible","disabledDeleteIcon","categoricalFocus","categoricalDisabled"],"mappings":";;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,SAAS;AAAA,EAClEC,MAAM,CAAC;AAAA,EAEPC,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChBC,QAAQ;AAAA,MACRC,cAAc;AAAA,MACdC,UAAU;AAAA,MACVC,YAAYC,MAAMD,WAAWE;AAAAA,MAE7B,mBAAmB;AAAA,QACjBC,iBAAiBC,UAAUH,MAAMI,OAAOC,YAAY,GAAG;AAAA,MACzD;AAAA,MAEA,iBAAiB;AAAA,QACfR,cAAc;AAAA,QACd,YAAY;AAAA,UACVS,OAAON,MAAMI,OAAOG;AAAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZC,SAAS;AAAA,MACTN,iBAAiBF,MAAMI,OAAOK;AAAAA,MAC9B,YAAY;AAAA,QACVH,OAAON,MAAMI,OAAOM;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,oBAAoB;AAAA,MAClBC,aAAaX,MAAMY,MAAMC;AAAAA,MACzBC,cAAcd,MAAMY,MAAMC;AAAAA,MAC1B,GAAIb,MAAMe,WAAWC;AAAAA,MACrBV,OAAON,MAAMI,OAAOa;AAAAA,MACpB,OAAO;AAAA,QACLX,OAAON,MAAMI,OAAOa;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,yBAAyB;AAAA,MACvBC,aAAa;AAAA,MACbC,OAAO;AAAA,MACPvB,QAAQ;AAAA,MACRwB,SAAS;AAAA,MACT,WAAW;AAAA,QACTlB,iBAAiBF,MAAMqB,OAAOC;AAAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT,GAAGC;AAAAA,QACH1B,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B2B,SAAS;AAAA,QACTC,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEAC,UAAU,CAAC;AAAA,EAEXC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGL;AAAAA,IACL;AAAA,EACF;AAAA,EAEAM,aAAa,CAAC;AAAA,EAEdC,OAAO,CAAC;AAAA,EAERC,YAAY,CAAC;AAAA;AAAA,EAGbV,QAAQ,CAAC;AAAA,EACTW,WAAW,CAAC;AAAA;AAAA,EAEZC,cAAc,CAAC;AAAA,EACfC,oBAAoB,CAAC;AAAA,EACrBC,kBAAkB,CAAC;AAAA,EACnBC,qBAAqB,CAAC;AACxB,CAAC;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -6018,7 +6018,7 @@ export declare type HvTagClasses = ExtractNames<typeof useClasses_48>;
|
|
|
6018
6018
|
|
|
6019
6019
|
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>;
|
|
6020
6020
|
|
|
6021
|
-
export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes"
|
|
6021
|
+
export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes"> {
|
|
6022
6022
|
/** The label of the tag element. */
|
|
6023
6023
|
label?: React.ReactNode;
|
|
6024
6024
|
/** Indicates that the form element is disabled. */
|
|
@@ -6036,12 +6036,12 @@ export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes">
|
|
|
6036
6036
|
onDelete?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
6037
6037
|
/** Callback triggered when any item is clicked. */
|
|
6038
6038
|
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
6039
|
-
/**
|
|
6040
|
-
|
|
6041
|
-
|
|
6039
|
+
/** Aria properties to apply to delete button in tag
|
|
6040
|
+
* @deprecated no longer used
|
|
6041
|
+
*/
|
|
6042
6042
|
deleteButtonArialLabel?: string;
|
|
6043
|
-
/** Props to apply to delete
|
|
6044
|
-
deleteButtonProps?:
|
|
6043
|
+
/** Props to apply to delete icon */
|
|
6044
|
+
deleteButtonProps?: HTMLAttributes<HTMLDivElement>;
|
|
6045
6045
|
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
6046
6046
|
classes?: HvTagClasses;
|
|
6047
6047
|
/** @ignore */
|
|
@@ -7662,11 +7662,11 @@ export declare const tagClasses: {
|
|
|
7662
7662
|
disabled: "HvTag-disabled";
|
|
7663
7663
|
focusVisible: "HvTag-focusVisible";
|
|
7664
7664
|
chipRoot: "HvTag-chipRoot";
|
|
7665
|
-
|
|
7665
|
+
clickable: "HvTag-clickable";
|
|
7666
|
+
categorical: "HvTag-categorical";
|
|
7666
7667
|
deleteIcon: "HvTag-deleteIcon";
|
|
7668
|
+
tagButton: "HvTag-tagButton";
|
|
7667
7669
|
disabledDeleteIcon: "HvTag-disabledDeleteIcon";
|
|
7668
|
-
categorical: "HvTag-categorical";
|
|
7669
|
-
clickable: "HvTag-clickable";
|
|
7670
7670
|
categoricalFocus: "HvTag-categoricalFocus";
|
|
7671
7671
|
categoricalDisabled: "HvTag-categoricalDisabled";
|
|
7672
7672
|
};
|
|
@@ -8886,7 +8886,7 @@ declare const useClasses_47: (classesProp?: Partial<Record<"root" | "indicator"
|
|
|
8886
8886
|
cx: (...args: any) => string;
|
|
8887
8887
|
};
|
|
8888
8888
|
|
|
8889
|
-
declare const useClasses_48: (classesProp?: Partial<Record<"button" | "label" | "root" | "disabled" | "focusVisible" | "chipRoot" | "
|
|
8889
|
+
declare const useClasses_48: (classesProp?: Partial<Record<"button" | "label" | "root" | "disabled" | "focusVisible" | "chipRoot" | "clickable" | "categorical" | "deleteIcon" | "tagButton" | "disabledDeleteIcon" | "categoricalFocus" | "categoricalDisabled", string>>, addStatic?: boolean) => {
|
|
8890
8890
|
classes: {
|
|
8891
8891
|
button: string;
|
|
8892
8892
|
label: string;
|
|
@@ -8894,11 +8894,11 @@ declare const useClasses_48: (classesProp?: Partial<Record<"button" | "label" |
|
|
|
8894
8894
|
disabled: string;
|
|
8895
8895
|
focusVisible: string;
|
|
8896
8896
|
chipRoot: string;
|
|
8897
|
-
|
|
8897
|
+
clickable: string;
|
|
8898
|
+
categorical: string;
|
|
8898
8899
|
deleteIcon: string;
|
|
8900
|
+
tagButton: string;
|
|
8899
8901
|
disabledDeleteIcon: string;
|
|
8900
|
-
categorical: string;
|
|
8901
|
-
clickable: string;
|
|
8902
8902
|
categoricalFocus: string;
|
|
8903
8903
|
categoricalDisabled: string;
|
|
8904
8904
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.27.
|
|
3
|
+
"version": "5.27.10",
|
|
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": "18f6e9c22421729de7c70bff66145e4806dd2f0d",
|
|
68
68
|
"main": "dist/cjs/index.cjs",
|
|
69
69
|
"exports": {
|
|
70
70
|
".": {
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const getOnDeleteCallback = (tagIsDisabled, providedOnDelete) => {
|
|
4
|
-
const nullCallback = () => {
|
|
5
|
-
};
|
|
6
|
-
let deleteCallback;
|
|
7
|
-
if (tagIsDisabled && providedOnDelete) {
|
|
8
|
-
deleteCallback = nullCallback;
|
|
9
|
-
} else if (tagIsDisabled && !providedOnDelete) {
|
|
10
|
-
deleteCallback = void 0;
|
|
11
|
-
} else {
|
|
12
|
-
deleteCallback = providedOnDelete;
|
|
13
|
-
}
|
|
14
|
-
return deleteCallback;
|
|
15
|
-
};
|
|
16
|
-
const hasDeleteAction = (onDeleteAction) => !!onDeleteAction;
|
|
17
|
-
const hasClickAction = (onClickAction) => !!onClickAction;
|
|
18
|
-
exports.getOnDeleteCallback = getOnDeleteCallback;
|
|
19
|
-
exports.hasClickAction = hasClickAction;
|
|
20
|
-
exports.hasDeleteAction = hasDeleteAction;
|
|
21
|
-
//# sourceMappingURL=utils.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs","sources":["../../../../src/components/Tag/utils.ts"],"sourcesContent":["export const getOnDeleteCallback = (tagIsDisabled, providedOnDelete) => {\n const nullCallback = () => {};\n\n let deleteCallback;\n\n if (tagIsDisabled && providedOnDelete) {\n deleteCallback = nullCallback;\n } else if (tagIsDisabled && !providedOnDelete) {\n deleteCallback = undefined;\n } else {\n deleteCallback = providedOnDelete;\n }\n\n return deleteCallback;\n};\n\nexport const hasDeleteAction = (onDeleteAction) => !!onDeleteAction;\n\nexport const hasClickAction = (onClickAction) => !!onClickAction;\n"],"names":["getOnDeleteCallback","tagIsDisabled","providedOnDelete","nullCallback","deleteCallback","undefined","hasDeleteAction","onDeleteAction","hasClickAction","onClickAction"],"mappings":";;AAAaA,MAAAA,sBAAsBA,CAACC,eAAeC,qBAAqB;AACtE,QAAMC,eAAeA,MAAM;AAAA,EAAA;AAEvBC,MAAAA;AAEJ,MAAIH,iBAAiBC,kBAAkB;AACpBC,qBAAAA;AAAAA,EAAAA,WACRF,iBAAiB,CAACC,kBAAkB;AAC5BG,qBAAAA;AAAAA,EAAAA,OACZ;AACYH,qBAAAA;AAAAA,EACnB;AAEOE,SAAAA;AACT;AAEaE,MAAAA,kBAAmBC,CAAmB,mBAAA,CAAC,CAACA;AAExCC,MAAAA,iBAAkBC,CAAkB,kBAAA,CAAC,CAACA;;;;"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
const getOnDeleteCallback = (tagIsDisabled, providedOnDelete) => {
|
|
2
|
-
const nullCallback = () => {
|
|
3
|
-
};
|
|
4
|
-
let deleteCallback;
|
|
5
|
-
if (tagIsDisabled && providedOnDelete) {
|
|
6
|
-
deleteCallback = nullCallback;
|
|
7
|
-
} else if (tagIsDisabled && !providedOnDelete) {
|
|
8
|
-
deleteCallback = void 0;
|
|
9
|
-
} else {
|
|
10
|
-
deleteCallback = providedOnDelete;
|
|
11
|
-
}
|
|
12
|
-
return deleteCallback;
|
|
13
|
-
};
|
|
14
|
-
const hasDeleteAction = (onDeleteAction) => !!onDeleteAction;
|
|
15
|
-
const hasClickAction = (onClickAction) => !!onClickAction;
|
|
16
|
-
export {
|
|
17
|
-
getOnDeleteCallback,
|
|
18
|
-
hasClickAction,
|
|
19
|
-
hasDeleteAction
|
|
20
|
-
};
|
|
21
|
-
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/components/Tag/utils.ts"],"sourcesContent":["export const getOnDeleteCallback = (tagIsDisabled, providedOnDelete) => {\n const nullCallback = () => {};\n\n let deleteCallback;\n\n if (tagIsDisabled && providedOnDelete) {\n deleteCallback = nullCallback;\n } else if (tagIsDisabled && !providedOnDelete) {\n deleteCallback = undefined;\n } else {\n deleteCallback = providedOnDelete;\n }\n\n return deleteCallback;\n};\n\nexport const hasDeleteAction = (onDeleteAction) => !!onDeleteAction;\n\nexport const hasClickAction = (onClickAction) => !!onClickAction;\n"],"names":["getOnDeleteCallback","tagIsDisabled","providedOnDelete","nullCallback","deleteCallback","undefined","hasDeleteAction","onDeleteAction","hasClickAction","onClickAction"],"mappings":"AAAaA,MAAAA,sBAAsBA,CAACC,eAAeC,qBAAqB;AACtE,QAAMC,eAAeA,MAAM;AAAA,EAAA;AAEvBC,MAAAA;AAEJ,MAAIH,iBAAiBC,kBAAkB;AACpBC,qBAAAA;AAAAA,EAAAA,WACRF,iBAAiB,CAACC,kBAAkB;AAC5BG,qBAAAA;AAAAA,EAAAA,OACZ;AACYH,qBAAAA;AAAAA,EACnB;AAEOE,SAAAA;AACT;AAEaE,MAAAA,kBAAmBC,CAAmB,mBAAA,CAAC,CAACA;AAExCC,MAAAA,iBAAkBC,CAAkB,kBAAA,CAAC,CAACA;"}
|