@hitachivantara/uikit-react-core 3.74.0 → 3.74.1
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/Tag/Tag.js +1 -12
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/styles.js +5 -3
- package/dist/Tag/styles.js.map +1 -1
- package/dist/legacy/Tag/Tag.js +3 -14
- package/dist/legacy/Tag/Tag.js.map +1 -1
- package/dist/legacy/Tag/styles.js +5 -3
- package/dist/legacy/Tag/styles.js.map +1 -1
- package/dist/modern/Tag/Tag.js +3 -14
- package/dist/modern/Tag/Tag.js.map +1 -1
- package/dist/modern/Tag/styles.js +5 -3
- package/dist/modern/Tag/styles.js.map +1 -1
- package/package.json +2 -2
package/dist/Tag/Tag.js
CHANGED
|
@@ -93,8 +93,6 @@ var getColor = function getColor(theme, customColor, type) {
|
|
|
93
93
|
|
|
94
94
|
|
|
95
95
|
var HvTag = function HvTag(props) {
|
|
96
|
-
var _HvTypography;
|
|
97
|
-
|
|
98
96
|
var classes = props.classes,
|
|
99
97
|
style = props.style,
|
|
100
98
|
className = props.className,
|
|
@@ -154,17 +152,8 @@ var HvTag = function HvTag(props) {
|
|
|
154
152
|
hover = _useState2[0],
|
|
155
153
|
setHover = _useState2[1];
|
|
156
154
|
|
|
157
|
-
var chipLabel = (0, _react.useMemo)(function () {
|
|
158
|
-
if (typeof label === "string") {
|
|
159
|
-
return _HvTypography || (_HvTypography = /*#__PURE__*/_react.default.createElement(_.HvTypography, {
|
|
160
|
-
variant: "normalText"
|
|
161
|
-
}, label));
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
return label;
|
|
165
|
-
}, [label]);
|
|
166
155
|
return /*#__PURE__*/_react.default.createElement(_core.Chip, (0, _extends2.default)({
|
|
167
|
-
label:
|
|
156
|
+
label: label,
|
|
168
157
|
className: (0, _clsx.default)(classes.root, className),
|
|
169
158
|
onMouseEnter: function onMouseEnter() {
|
|
170
159
|
setHover(!!onClick);
|
package/dist/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","names":["getColor","theme","customColor","type","defaultSemanticColor","hv","palette","semantic","sema7","defaultCategoricalColor","viz","categorical","cviz1","backgroundColor","HvTag","props","classes","style","className","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","getDeleteIcon","disabledSemanticColor","tabIndex","startIcon","tagButton","focusVisible","primary","primaryButton","cursor","undefined","height","useTheme","inlineStyle","categoricalBackgroundColor","fade","useState","hover","setHover","chipLabel","useMemo","clsx","root","boxShadow","chipRoot","clickable","categoricalDisabled","categoricalFocus","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction","propTypes","PropTypes","shape","string","titleOverflow","semanticTextColor","categoricalTextColor","deletable","isRequired","instanceOf","Object","node","bool","oneOf","func","withStyles","styles","name"],"sources":["../../src/Tag/Tag.js"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\n\nimport { Chip, withStyles, useTheme } from \"@material-ui/core\";\n\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport fade from \"../utils/hexToRgbA\";\n\nimport { HvButton, HvTypography } from \"..\";\n\nimport styles from \"./styles\";\n\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nconst getColor = (theme, customColor, type) => {\n const defaultSemanticColor = theme.hv.palette.semantic.sema7;\n const defaultCategoricalColor = theme.hv.viz.palette.categorical.cviz1;\n\n let backgroundColor;\n\n if (type === \"semantic\") {\n backgroundColor = theme.palette[customColor] || customColor || defaultSemanticColor;\n }\n if (type === \"categorical\") {\n backgroundColor =\n theme.hv.viz.palette.categorical[customColor] || customColor || defaultCategoricalColor;\n }\n\n return backgroundColor;\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 */\nconst HvTag = (props) => {\n const {\n classes,\n style,\n className,\n label,\n disabled,\n type = \"semantic\",\n color,\n deleteIcon,\n onDelete,\n onClick,\n role,\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = props;\n\n const getDeleteIcon = () => {\n const disabledSemanticColor = type === \"semantic\" ? \"atmo5\" : \"base2\";\n const { tabIndex = 0 } = deleteButtonProps;\n\n return (\n <HvButton\n classes={{\n startIcon: classes.tagButton,\n focusVisible: classes.focusVisible,\n primary: classes.primaryButton,\n }}\n aria-label={deleteButtonArialLabel}\n tabIndex={tabIndex}\n {...deleteButtonProps}\n >\n <CloseXS\n iconSize=\"XS\"\n style={{\n ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n height: 16,\n }}\n color={disabled ? disabledSemanticColor : \"base2\"}\n />\n </HvButton>\n );\n };\n\n const theme = useTheme();\n\n const inlineStyle = {\n ...style,\n };\n\n let categoricalBackgroundColor;\n\n if (type === \"semantic\") {\n inlineStyle.backgroundColor = getColor(theme, color, type);\n } else if (type === \"categorical\") {\n categoricalBackgroundColor = getColor(theme, color, type);\n\n inlineStyle.backgroundColor = fade(categoricalBackgroundColor, 0.3);\n }\n\n const [hover, setHover] = useState(false);\n\n const chipLabel = useMemo(() => {\n if (typeof label === \"string\") {\n return <HvTypography variant=\"normalText\">{label}</HvTypography>;\n }\n\n return label;\n }, [label]);\n\n return (\n <Chip\n label={chipLabel}\n className={clsx(classes.root, className)}\n onMouseEnter={() => {\n setHover(!!onClick);\n }}\n onMouseLeave={() => {\n setHover(false);\n }}\n style={{\n ...(disabled ? null : inlineStyle),\n ...(hover && !disabled ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` } : null),\n }}\n classes={{\n root: clsx(classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: !!onClick,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: clsx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n onDelete={getOnDeleteCallback(disabled, onDelete)}\n onClick={disabled ? undefined : onClick}\n role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n {...others}\n />\n );\n};\n\nHvTag.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied to the radio button.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n chipRoot: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n label: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n tagButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabledDeleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n titleOverflow: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categorical: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalDisabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n semanticTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deletable: PropTypes.string,\n /**\n * Styles applied to the component if has onClick.\n */\n clickable: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n focusVisible: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n primaryButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalFocus: PropTypes.string,\n }).isRequired,\n\n /**\n * Inline styles to be applied to the root element.\n */\n style: PropTypes.instanceOf(Object),\n\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n\n /**\n * The label of the tag element.\n *\n */\n label: PropTypes.node,\n\n /**\n * Indicates that the form element is disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * The type of the tag element.\n *\n * A tag can be of semantic or categoric type\n */\n type: PropTypes.oneOf([\"semantic\", \"categorical\"]),\n\n /**\n * Background color to be applied to the tag\n */\n color: PropTypes.string,\n /**\n * Icon used to customize the delete icon in the Chip element\n */\n deleteIcon: PropTypes.node,\n\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component,\n * in order to render the delete icon\n */\n onDelete: PropTypes.func,\n /**\n * Callback triggered when any item is clicked.\n */\n onClick: PropTypes.func,\n\n /**\n * The role of the element with an attributed event.\n */\n role: PropTypes.string,\n /**\n * Aria properties to apply to delete button in tag\n */\n deleteButtonArialLabel: PropTypes.string,\n /**\n * Props to apply to delete button\n */\n deleteButtonProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvTag\" })(HvTag);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tag.js","names":["getColor","theme","customColor","type","defaultSemanticColor","hv","palette","semantic","sema7","defaultCategoricalColor","viz","categorical","cviz1","backgroundColor","HvTag","props","classes","style","className","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","getDeleteIcon","disabledSemanticColor","tabIndex","startIcon","tagButton","focusVisible","primary","primaryButton","cursor","undefined","height","useTheme","inlineStyle","categoricalBackgroundColor","fade","useState","hover","setHover","clsx","root","boxShadow","chipRoot","clickable","categoricalDisabled","categoricalFocus","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction","propTypes","PropTypes","shape","string","titleOverflow","semanticTextColor","categoricalTextColor","deletable","isRequired","instanceOf","Object","node","bool","oneOf","func","withStyles","styles","name"],"sources":["../../src/Tag/Tag.js"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { Chip, withStyles, useTheme } from \"@material-ui/core\";\n\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport fade from \"../utils/hexToRgbA\";\n\nimport { HvButton } from \"..\";\n\nimport styles from \"./styles\";\n\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nconst getColor = (theme, customColor, type) => {\n const defaultSemanticColor = theme.hv.palette.semantic.sema7;\n const defaultCategoricalColor = theme.hv.viz.palette.categorical.cviz1;\n\n let backgroundColor;\n\n if (type === \"semantic\") {\n backgroundColor = theme.palette[customColor] || customColor || defaultSemanticColor;\n }\n if (type === \"categorical\") {\n backgroundColor =\n theme.hv.viz.palette.categorical[customColor] || customColor || defaultCategoricalColor;\n }\n\n return backgroundColor;\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 */\nconst HvTag = (props) => {\n const {\n classes,\n style,\n className,\n label,\n disabled,\n type = \"semantic\",\n color,\n deleteIcon,\n onDelete,\n onClick,\n role,\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = props;\n\n const getDeleteIcon = () => {\n const disabledSemanticColor = type === \"semantic\" ? \"atmo5\" : \"base2\";\n const { tabIndex = 0 } = deleteButtonProps;\n\n return (\n <HvButton\n classes={{\n startIcon: classes.tagButton,\n focusVisible: classes.focusVisible,\n primary: classes.primaryButton,\n }}\n aria-label={deleteButtonArialLabel}\n tabIndex={tabIndex}\n {...deleteButtonProps}\n >\n <CloseXS\n iconSize=\"XS\"\n style={{\n ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n height: 16,\n }}\n color={disabled ? disabledSemanticColor : \"base2\"}\n />\n </HvButton>\n );\n };\n\n const theme = useTheme();\n\n const inlineStyle = {\n ...style,\n };\n\n let categoricalBackgroundColor;\n\n if (type === \"semantic\") {\n inlineStyle.backgroundColor = getColor(theme, color, type);\n } else if (type === \"categorical\") {\n categoricalBackgroundColor = getColor(theme, color, type);\n\n inlineStyle.backgroundColor = fade(categoricalBackgroundColor, 0.3);\n }\n\n const [hover, setHover] = useState(false);\n\n return (\n <Chip\n label={label}\n className={clsx(classes.root, className)}\n onMouseEnter={() => {\n setHover(!!onClick);\n }}\n onMouseLeave={() => {\n setHover(false);\n }}\n style={{\n ...(disabled ? null : inlineStyle),\n ...(hover && !disabled ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` } : null),\n }}\n classes={{\n root: clsx(classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: !!onClick,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: clsx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n onDelete={getOnDeleteCallback(disabled, onDelete)}\n onClick={disabled ? undefined : onClick}\n role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n {...others}\n />\n );\n};\n\nHvTag.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied to the radio button.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n chipRoot: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n label: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n tagButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabledDeleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n titleOverflow: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categorical: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalDisabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n semanticTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deletable: PropTypes.string,\n /**\n * Styles applied to the component if has onClick.\n */\n clickable: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n focusVisible: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n primaryButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalFocus: PropTypes.string,\n }).isRequired,\n\n /**\n * Inline styles to be applied to the root element.\n */\n style: PropTypes.instanceOf(Object),\n\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n\n /**\n * The label of the tag element.\n *\n */\n label: PropTypes.node,\n\n /**\n * Indicates that the form element is disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * The type of the tag element.\n *\n * A tag can be of semantic or categoric type\n */\n type: PropTypes.oneOf([\"semantic\", \"categorical\"]),\n\n /**\n * Background color to be applied to the tag\n */\n color: PropTypes.string,\n /**\n * Icon used to customize the delete icon in the Chip element\n */\n deleteIcon: PropTypes.node,\n\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component,\n * in order to render the delete icon\n */\n onDelete: PropTypes.func,\n /**\n * Callback triggered when any item is clicked.\n */\n onClick: PropTypes.func,\n\n /**\n * The role of the element with an attributed event.\n */\n role: PropTypes.string,\n /**\n * Aria properties to apply to delete button in tag\n */\n deleteButtonArialLabel: PropTypes.string,\n /**\n * Props to apply to delete button\n */\n deleteButtonProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvTag\" })(HvTag);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;AAEA;;AAEA;;;;;;;;;;;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAQC,WAAR,EAAqBC,IAArB,EAA8B;EAC7C,IAAMC,oBAAoB,GAAGH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,QAAjB,CAA0BC,KAAvD;EACA,IAAMC,uBAAuB,GAAGR,KAAK,CAACI,EAAN,CAASK,GAAT,CAAaJ,OAAb,CAAqBK,WAArB,CAAiCC,KAAjE;EAEA,IAAIC,eAAJ;;EAEA,IAAIV,IAAI,KAAK,UAAb,EAAyB;IACvBU,eAAe,GAAGZ,KAAK,CAACK,OAAN,CAAcJ,WAAd,KAA8BA,WAA9B,IAA6CE,oBAA/D;EACD;;EACD,IAAID,IAAI,KAAK,aAAb,EAA4B;IAC1BU,eAAe,GACbZ,KAAK,CAACI,EAAN,CAASK,GAAT,CAAaJ,OAAb,CAAqBK,WAArB,CAAiCT,WAAjC,KAAiDA,WAAjD,IAAgEO,uBADlE;EAED;;EAED,OAAOI,eAAP;AACD,CAfD;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD,EAAW;EACvB,IACEC,OADF,GAeID,KAfJ,CACEC,OADF;EAAA,IAEEC,KAFF,GAeIF,KAfJ,CAEEE,KAFF;EAAA,IAGEC,SAHF,GAeIH,KAfJ,CAGEG,SAHF;EAAA,IAIEC,KAJF,GAeIJ,KAfJ,CAIEI,KAJF;EAAA,IAKEC,QALF,GAeIL,KAfJ,CAKEK,QALF;EAAA,kBAeIL,KAfJ,CAMEZ,IANF;EAAA,IAMEA,IANF,4BAMS,UANT;EAAA,IAOEkB,KAPF,GAeIN,KAfJ,CAOEM,KAPF;EAAA,IAQEC,UARF,GAeIP,KAfJ,CAQEO,UARF;EAAA,IASEC,QATF,GAeIR,KAfJ,CASEQ,QATF;EAAA,IAUEC,OAVF,GAeIT,KAfJ,CAUES,OAVF;EAAA,IAWEC,IAXF,GAeIV,KAfJ,CAWEU,IAXF;EAAA,4BAeIV,KAfJ,CAYEW,sBAZF;EAAA,IAYEA,sBAZF,sCAY2B,YAZ3B;EAAA,4BAeIX,KAfJ,CAaEY,iBAbF;EAAA,IAaEA,iBAbF,sCAasB,EAbtB;EAAA,IAcKC,MAdL,0CAeIb,KAfJ;;EAiBA,IAAMc,aAAa,GAAG,SAAhBA,aAAgB,GAAM;IAC1B,IAAMC,qBAAqB,GAAG3B,IAAI,KAAK,UAAT,GAAsB,OAAtB,GAAgC,OAA9D;IACA,4BAAyBwB,iBAAzB,CAAQI,QAAR;IAAA,IAAQA,QAAR,sCAAmB,CAAnB;IAEA,oBACE,6BAAC,UAAD;MACE,OAAO,EAAE;QACPC,SAAS,EAAEhB,OAAO,CAACiB,SADZ;QAEPC,YAAY,EAAElB,OAAO,CAACkB,YAFf;QAGPC,OAAO,EAAEnB,OAAO,CAACoB;MAHV,CADX;MAME,cAAYV,sBANd;MAOE,QAAQ,EAAEK;IAPZ,GAQMJ,iBARN,gBAUE,6BAAC,wBAAD;MACE,QAAQ,EAAC,IADX;MAEE,KAAK,kCACCP,QAAQ,GAAG;QAAEiB,MAAM,EAAE;MAAV,CAAH,GAA+BC,SADxC;QAEHC,MAAM,EAAE;MAFL,EAFP;MAME,KAAK,EAAEnB,QAAQ,GAAGU,qBAAH,GAA2B;IAN5C,EAVF,CADF;EAqBD,CAzBD;;EA2BA,IAAM7B,KAAK,GAAG,IAAAuC,cAAA,GAAd;;EAEA,IAAMC,WAAW,qBACZxB,KADY,CAAjB;;EAIA,IAAIyB,0BAAJ;;EAEA,IAAIvC,IAAI,KAAK,UAAb,EAAyB;IACvBsC,WAAW,CAAC5B,eAAZ,GAA8Bb,QAAQ,CAACC,KAAD,EAAQoB,KAAR,EAAelB,IAAf,CAAtC;EACD,CAFD,MAEO,IAAIA,IAAI,KAAK,aAAb,EAA4B;IACjCuC,0BAA0B,GAAG1C,QAAQ,CAACC,KAAD,EAAQoB,KAAR,EAAelB,IAAf,CAArC;IAEAsC,WAAW,CAAC5B,eAAZ,GAA8B,IAAA8B,kBAAA,EAAKD,0BAAL,EAAiC,GAAjC,CAA9B;EACD;;EAED,gBAA0B,IAAAE,eAAA,EAAS,KAAT,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EAEA,oBACE,6BAAC,UAAD;IACE,KAAK,EAAE3B,KADT;IAEE,SAAS,EAAE,IAAA4B,aAAA,EAAK/B,OAAO,CAACgC,IAAb,EAAmB9B,SAAnB,CAFb;IAGE,YAAY,EAAE,wBAAM;MAClB4B,QAAQ,CAAC,CAAC,CAACtB,OAAH,CAAR;IACD,CALH;IAME,YAAY,EAAE,wBAAM;MAClBsB,QAAQ,CAAC,KAAD,CAAR;IACD,CARH;IASE,KAAK,kCACC1B,QAAQ,GAAG,IAAH,GAAUqB,WADnB,GAECI,KAAK,IAAI,CAACzB,QAAV,GAAqB;MAAE6B,SAAS,sBAAeP,0BAAf;IAAX,CAArB,GAAgF,IAFjF,CATP;IAaE,OAAO,EAAE;MACPM,IAAI,EAAE,IAAAD,aAAA,EAAK/B,OAAO,CAACkC,QAAb,EACgB9B,QADhB,IACHJ,OAAO,CAACI,QADL,EAEiB,CAAC,CAACI,OAFnB,IAEHR,OAAO,CAACmC,SAFL,EAGmBhD,IAAI,KAAK,aAH5B,KAGHa,OAAO,CAACL,WAHL,EAKqDS,QALrD,GAKHJ,OAAO,CAACoC,mBALL,GAIHpC,OAAO,CAACqC,gBAJL,EADC;MAQPlC,KAAK,EAAEH,OAAO,CAACG,KARR;MASPG,UAAU,EAAE,IAAAyB,aAAA,EAAK/B,OAAO,CAACM,UAAb,EACoBF,QADpB,IACTJ,OAAO,CAACsC,kBADC;IATL,CAbX;IA0BE,UAAU,EAAG,IAAAC,sBAAA,EAAgBhC,QAAhB,KAA6BD,UAA9B,IAA6CO,aAAa,EA1BxE;IA2BE,QAAQ,EAAE,IAAA2B,0BAAA,EAAoBpC,QAApB,EAA8BG,QAA9B,CA3BZ;IA4BE,OAAO,EAAEH,QAAQ,GAAGkB,SAAH,GAAed,OA5BlC;IA6BE,IAAI,EAAEC,IAAI,KAAK,IAAAgC,qBAAA,EAAejC,OAAf,IAA0B,QAA1B,GAAqCc,SAA1C,CA7BZ;IA8BE,QAAQ,EAAE,IAAAiB,sBAAA,EAAgBhC,QAAhB,IAA4Be,SAA5B,GAAwC;EA9BpD,GA+BMV,MA/BN,EADF;AAmCD,CAlGD;;AAoGA,wCAAAd,KAAK,CAAC4C,SAAN,GAAkB;EAChB;AACF;AACA;EACE1C,OAAO,EAAE2C,kBAAA,CAAUC,KAAV,CAAgB;IACvB;AACJ;AACA;IACIZ,IAAI,EAAEW,kBAAA,CAAUE,MAJO;;IAKvB;AACJ;AACA;IACIX,QAAQ,EAAES,kBAAA,CAAUE,MARG;;IASvB;AACJ;AACA;IACI1C,KAAK,EAAEwC,kBAAA,CAAUE,MAZM;;IAavB;AACJ;AACA;IACI5B,SAAS,EAAE0B,kBAAA,CAAUE,MAhBE;;IAiBvB;AACJ;AACA;IACIvC,UAAU,EAAEqC,kBAAA,CAAUE,MApBC;;IAqBvB;AACJ;AACA;IACIP,kBAAkB,EAAEK,kBAAA,CAAUE,MAxBP;;IAyBvB;AACJ;AACA;IACIC,aAAa,EAAEH,kBAAA,CAAUE,MA5BF;;IA6BvB;AACJ;AACA;IACIlD,WAAW,EAAEgD,kBAAA,CAAUE,MAhCA;;IAiCvB;AACJ;AACA;IACIT,mBAAmB,EAAEO,kBAAA,CAAUE,MApCR;;IAqCvB;AACJ;AACA;IACIzC,QAAQ,EAAEuC,kBAAA,CAAUE,MAxCG;;IAyCvB;AACJ;AACA;IACIE,iBAAiB,EAAEJ,kBAAA,CAAUE,MA5CN;;IA6CvB;AACJ;AACA;IACIG,oBAAoB,EAAEL,kBAAA,CAAUE,MAhDT;;IAiDvB;AACJ;AACA;IACII,SAAS,EAAEN,kBAAA,CAAUE,MApDE;;IAqDvB;AACJ;AACA;IACIV,SAAS,EAAEQ,kBAAA,CAAUE,MAxDE;;IAyDvB;AACJ;AACA;IACI3B,YAAY,EAAEyB,kBAAA,CAAUE,MA5DD;;IA6DvB;AACJ;AACA;IACIzB,aAAa,EAAEuB,kBAAA,CAAUE,MAhEF;;IAiEvB;AACJ;AACA;IACIR,gBAAgB,EAAEM,kBAAA,CAAUE;EApEL,CAAhB,EAqENK,UAzEa;;EA2EhB;AACF;AACA;EACEjD,KAAK,EAAE0C,kBAAA,CAAUQ,UAAV,CAAqBC,MAArB,CA9ES;;EAgFhB;AACF;AACA;EACElD,SAAS,EAAEyC,kBAAA,CAAUE,MAnFL;;EAqFhB;AACF;AACA;AACA;EACE1C,KAAK,EAAEwC,kBAAA,CAAUU,IAzFD;;EA2FhB;AACF;AACA;EACEjD,QAAQ,EAAEuC,kBAAA,CAAUW,IA9FJ;;EAgGhB;AACF;AACA;AACA;AACA;EACEnE,IAAI,EAAEwD,kBAAA,CAAUY,KAAV,CAAgB,CAAC,UAAD,EAAa,aAAb,CAAhB,CArGU;;EAuGhB;AACF;AACA;EACElD,KAAK,EAAEsC,kBAAA,CAAUE,MA1GD;;EA2GhB;AACF;AACA;EACEvC,UAAU,EAAEqC,kBAAA,CAAUU,IA9GN;;EAgHhB;AACF;AACA;AACA;AACA;EACE9C,QAAQ,EAAEoC,kBAAA,CAAUa,IArHJ;;EAsHhB;AACF;AACA;EACEhD,OAAO,EAAEmC,kBAAA,CAAUa,IAzHH;;EA2HhB;AACF;AACA;EACE/C,IAAI,EAAEkC,kBAAA,CAAUE,MA9HA;;EA+HhB;AACF;AACA;EACEnC,sBAAsB,EAAEiC,kBAAA,CAAUE,MAlIlB;;EAmIhB;AACF;AACA;EACElC,iBAAiB,EAAEgC,kBAAA,CAAUQ,UAAV,CAAqBC,MAArB;AAtIH,CAAlB;;eAyIe,IAAAK,gBAAA,EAAWC,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAsC7D,KAAtC,C"}
|
package/dist/Tag/styles.js
CHANGED
|
@@ -46,13 +46,15 @@ var styles = function styles(theme) {
|
|
|
46
46
|
primaryButton: {
|
|
47
47
|
background: "transparent"
|
|
48
48
|
},
|
|
49
|
-
label: {
|
|
49
|
+
label: _objectSpread(_objectSpread({
|
|
50
50
|
paddingLeft: theme.hv.spacing.xs,
|
|
51
|
-
paddingRight: theme.hv.spacing.xs
|
|
51
|
+
paddingRight: theme.hv.spacing.xs
|
|
52
|
+
}, theme.hv.typography.normalText), {}, {
|
|
53
|
+
color: theme.palette.base2,
|
|
52
54
|
"& p": {
|
|
53
55
|
color: theme.hv.palette.base.base2
|
|
54
56
|
}
|
|
55
|
-
},
|
|
57
|
+
}),
|
|
56
58
|
tagButton: {
|
|
57
59
|
width: 16,
|
|
58
60
|
height: 16,
|
package/dist/Tag/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","theme","root","chipRoot","height","borderRadius","maxWidth","backgroundColor","fade","palette","base1","focusVisible","primaryButton","background","label","paddingLeft","hv","spacing","xs","paddingRight","
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","root","chipRoot","height","borderRadius","maxWidth","backgroundColor","fade","palette","base1","focusVisible","primaryButton","background","label","paddingLeft","hv","spacing","xs","paddingRight","typography","normalText","color","base2","base","tagButton","width","minWidth","minHeight","padding","margin","deleteIcon","marginRight","outlineStyles","outline","boxShadow","disabledDeleteIcon","atmosphere","atmo3","outlineOffset","titleOverflow","whiteSpace","overflow","textOverflow","categorical","cursor","accent","acce1","clickable","categoricalFocus","disabled","atmo5","categoricalDisabled","semanticTextColor","categoricalTextColor"],"sources":["../../src/Tag/styles.js"],"sourcesContent":["import fade from \"../utils/hexToRgbA\";\nimport { outlineStyles } from \"../Focus/styles\";\n\nconst styles = (theme) => ({\n root: {},\n\n chipRoot: {\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n \"& $focusVisible\": {\n backgroundColor: fade(theme.palette.base1, 0.3),\n },\n },\n\n focusVisible: {},\n\n primaryButton: {\n background: \"transparent\",\n },\n\n label: {\n paddingLeft: theme.hv.spacing.xs,\n paddingRight: theme.hv.spacing.xs,\n ...theme.hv.typography.normalText,\n color: theme.palette.base2,\n \"& p\": {\n color: theme.hv.palette.base.base2,\n },\n },\n\n tagButton: {\n width: 16,\n height: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n },\n\n deleteIcon: {\n marginRight: 0,\n width: 16,\n height: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n \"&:hover\": {\n backgroundColor: fade(theme.palette.base1, 0.3),\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 disabledDeleteIcon: {\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: \"none\",\n boxShadow: \"none\",\n outlineOffset: 0,\n },\n },\n titleOverflow: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n categorical: {\n borderRadius: 8,\n \"&$clickable\": {\n cursor: \"pointer\",\n },\n \"&:hover\": {\n borderRadius: 8,\n },\n \"& $label > p\": {\n color: theme.hv.palette.accent.acce1,\n },\n \"&:focus:not(:focus-visible)\": {\n outline: \"0 !important\",\n boxShadow: \"none !important\",\n },\n },\n clickable: {},\n\n categoricalFocus: {\n \"&:focus\": {\n ...outlineStyles,\n },\n },\n\n disabled: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n cursor: \"not-allowed\",\n \"& $label > p\": {\n color: theme.hv.palette.atmosphere.atmo5,\n },\n },\n\n categoricalDisabled: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n cursor: \"not-allowed\",\n \"& $label > p\": {\n color: theme.hv.palette.atmosphere.atmo5,\n },\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n \"&:focus\": {\n outline: \"none\",\n },\n },\n\n semanticTextColor: {\n color: theme.hv.palette.base.base2,\n },\n categoricalTextColor: {\n color: theme.hv.palette.accent.acce1,\n },\n});\n\nexport default styles;\n"],"mappings":"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"}
|
package/dist/legacy/Tag/Tag.js
CHANGED
|
@@ -15,13 +15,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
15
15
|
|
|
16
16
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
17
|
|
|
18
|
-
import React, {
|
|
18
|
+
import React, { useState } from "react";
|
|
19
19
|
import { Chip, withStyles, useTheme } from "@material-ui/core";
|
|
20
20
|
import PropTypes from "prop-types";
|
|
21
21
|
import clsx from "clsx";
|
|
22
22
|
import { CloseXS } from "@hitachivantara/uikit-react-icons";
|
|
23
23
|
import fade from "../utils/hexToRgbA";
|
|
24
|
-
import { HvButton
|
|
24
|
+
import { HvButton } from "..";
|
|
25
25
|
import styles from "./styles";
|
|
26
26
|
import { getOnDeleteCallback, hasDeleteAction, hasClickAction } from "./utils";
|
|
27
27
|
|
|
@@ -51,8 +51,6 @@ var getColor = function getColor(theme, customColor, type) {
|
|
|
51
51
|
|
|
52
52
|
|
|
53
53
|
var HvTag = function HvTag(props) {
|
|
54
|
-
var _HvTypography;
|
|
55
|
-
|
|
56
54
|
var classes = props.classes,
|
|
57
55
|
style = props.style,
|
|
58
56
|
className = props.className,
|
|
@@ -112,17 +110,8 @@ var HvTag = function HvTag(props) {
|
|
|
112
110
|
hover = _useState2[0],
|
|
113
111
|
setHover = _useState2[1];
|
|
114
112
|
|
|
115
|
-
var chipLabel = useMemo(function () {
|
|
116
|
-
if (typeof label === "string") {
|
|
117
|
-
return _HvTypography || (_HvTypography = /*#__PURE__*/React.createElement(HvTypography, {
|
|
118
|
-
variant: "normalText"
|
|
119
|
-
}, label));
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
return label;
|
|
123
|
-
}, [label]);
|
|
124
113
|
return /*#__PURE__*/React.createElement(Chip, _extends({
|
|
125
|
-
label:
|
|
114
|
+
label: label,
|
|
126
115
|
className: clsx(classes.root, className),
|
|
127
116
|
onMouseEnter: function onMouseEnter() {
|
|
128
117
|
setHover(!!onClick);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","names":["React","useMemo","useState","Chip","withStyles","useTheme","PropTypes","clsx","CloseXS","fade","HvButton","HvTypography","styles","getOnDeleteCallback","hasDeleteAction","hasClickAction","getColor","theme","customColor","type","defaultSemanticColor","hv","palette","semantic","sema7","defaultCategoricalColor","viz","categorical","cviz1","backgroundColor","HvTag","props","classes","style","className","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","getDeleteIcon","disabledSemanticColor","tabIndex","startIcon","tagButton","focusVisible","primary","primaryButton","cursor","undefined","height","inlineStyle","categoricalBackgroundColor","hover","setHover","chipLabel","root","boxShadow","chipRoot","clickable","categoricalDisabled","categoricalFocus","disabledDeleteIcon","propTypes","shape","string","titleOverflow","semanticTextColor","categoricalTextColor","deletable","isRequired","instanceOf","Object","node","bool","oneOf","func","name"],"sources":["../../../src/Tag/Tag.js"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\n\nimport { Chip, withStyles, useTheme } from \"@material-ui/core\";\n\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport fade from \"../utils/hexToRgbA\";\n\nimport { HvButton, HvTypography } from \"..\";\n\nimport styles from \"./styles\";\n\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nconst getColor = (theme, customColor, type) => {\n const defaultSemanticColor = theme.hv.palette.semantic.sema7;\n const defaultCategoricalColor = theme.hv.viz.palette.categorical.cviz1;\n\n let backgroundColor;\n\n if (type === \"semantic\") {\n backgroundColor = theme.palette[customColor] || customColor || defaultSemanticColor;\n }\n if (type === \"categorical\") {\n backgroundColor =\n theme.hv.viz.palette.categorical[customColor] || customColor || defaultCategoricalColor;\n }\n\n return backgroundColor;\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 */\nconst HvTag = (props) => {\n const {\n classes,\n style,\n className,\n label,\n disabled,\n type = \"semantic\",\n color,\n deleteIcon,\n onDelete,\n onClick,\n role,\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = props;\n\n const getDeleteIcon = () => {\n const disabledSemanticColor = type === \"semantic\" ? \"atmo5\" : \"base2\";\n const { tabIndex = 0 } = deleteButtonProps;\n\n return (\n <HvButton\n classes={{\n startIcon: classes.tagButton,\n focusVisible: classes.focusVisible,\n primary: classes.primaryButton,\n }}\n aria-label={deleteButtonArialLabel}\n tabIndex={tabIndex}\n {...deleteButtonProps}\n >\n <CloseXS\n iconSize=\"XS\"\n style={{\n ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n height: 16,\n }}\n color={disabled ? disabledSemanticColor : \"base2\"}\n />\n </HvButton>\n );\n };\n\n const theme = useTheme();\n\n const inlineStyle = {\n ...style,\n };\n\n let categoricalBackgroundColor;\n\n if (type === \"semantic\") {\n inlineStyle.backgroundColor = getColor(theme, color, type);\n } else if (type === \"categorical\") {\n categoricalBackgroundColor = getColor(theme, color, type);\n\n inlineStyle.backgroundColor = fade(categoricalBackgroundColor, 0.3);\n }\n\n const [hover, setHover] = useState(false);\n\n const chipLabel = useMemo(() => {\n if (typeof label === \"string\") {\n return <HvTypography variant=\"normalText\">{label}</HvTypography>;\n }\n\n return label;\n }, [label]);\n\n return (\n <Chip\n label={chipLabel}\n className={clsx(classes.root, className)}\n onMouseEnter={() => {\n setHover(!!onClick);\n }}\n onMouseLeave={() => {\n setHover(false);\n }}\n style={{\n ...(disabled ? null : inlineStyle),\n ...(hover && !disabled ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` } : null),\n }}\n classes={{\n root: clsx(classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: !!onClick,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: clsx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n onDelete={getOnDeleteCallback(disabled, onDelete)}\n onClick={disabled ? undefined : onClick}\n role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n {...others}\n />\n );\n};\n\nHvTag.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied to the radio button.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n chipRoot: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n label: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n tagButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabledDeleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n titleOverflow: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categorical: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalDisabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n semanticTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deletable: PropTypes.string,\n /**\n * Styles applied to the component if has onClick.\n */\n clickable: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n focusVisible: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n primaryButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalFocus: PropTypes.string,\n }).isRequired,\n\n /**\n * Inline styles to be applied to the root element.\n */\n style: PropTypes.instanceOf(Object),\n\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n\n /**\n * The label of the tag element.\n *\n */\n label: PropTypes.node,\n\n /**\n * Indicates that the form element is disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * The type of the tag element.\n *\n * A tag can be of semantic or categoric type\n */\n type: PropTypes.oneOf([\"semantic\", \"categorical\"]),\n\n /**\n * Background color to be applied to the tag\n */\n color: PropTypes.string,\n /**\n * Icon used to customize the delete icon in the Chip element\n */\n deleteIcon: PropTypes.node,\n\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component,\n * in order to render the delete icon\n */\n onDelete: PropTypes.func,\n /**\n * Callback triggered when any item is clicked.\n */\n onClick: PropTypes.func,\n\n /**\n * The role of the element with an attributed event.\n */\n role: PropTypes.string,\n /**\n * Aria properties to apply to delete button in tag\n */\n deleteButtonArialLabel: PropTypes.string,\n /**\n * Props to apply to delete button\n */\n deleteButtonProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvTag\" })(HvTag);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tag.js","names":["React","useState","Chip","withStyles","useTheme","PropTypes","clsx","CloseXS","fade","HvButton","styles","getOnDeleteCallback","hasDeleteAction","hasClickAction","getColor","theme","customColor","type","defaultSemanticColor","hv","palette","semantic","sema7","defaultCategoricalColor","viz","categorical","cviz1","backgroundColor","HvTag","props","classes","style","className","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","getDeleteIcon","disabledSemanticColor","tabIndex","startIcon","tagButton","focusVisible","primary","primaryButton","cursor","undefined","height","inlineStyle","categoricalBackgroundColor","hover","setHover","root","boxShadow","chipRoot","clickable","categoricalDisabled","categoricalFocus","disabledDeleteIcon","propTypes","shape","string","titleOverflow","semanticTextColor","categoricalTextColor","deletable","isRequired","instanceOf","Object","node","bool","oneOf","func","name"],"sources":["../../../src/Tag/Tag.js"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { Chip, withStyles, useTheme } from \"@material-ui/core\";\n\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport fade from \"../utils/hexToRgbA\";\n\nimport { HvButton } from \"..\";\n\nimport styles from \"./styles\";\n\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nconst getColor = (theme, customColor, type) => {\n const defaultSemanticColor = theme.hv.palette.semantic.sema7;\n const defaultCategoricalColor = theme.hv.viz.palette.categorical.cviz1;\n\n let backgroundColor;\n\n if (type === \"semantic\") {\n backgroundColor = theme.palette[customColor] || customColor || defaultSemanticColor;\n }\n if (type === \"categorical\") {\n backgroundColor =\n theme.hv.viz.palette.categorical[customColor] || customColor || defaultCategoricalColor;\n }\n\n return backgroundColor;\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 */\nconst HvTag = (props) => {\n const {\n classes,\n style,\n className,\n label,\n disabled,\n type = \"semantic\",\n color,\n deleteIcon,\n onDelete,\n onClick,\n role,\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = props;\n\n const getDeleteIcon = () => {\n const disabledSemanticColor = type === \"semantic\" ? \"atmo5\" : \"base2\";\n const { tabIndex = 0 } = deleteButtonProps;\n\n return (\n <HvButton\n classes={{\n startIcon: classes.tagButton,\n focusVisible: classes.focusVisible,\n primary: classes.primaryButton,\n }}\n aria-label={deleteButtonArialLabel}\n tabIndex={tabIndex}\n {...deleteButtonProps}\n >\n <CloseXS\n iconSize=\"XS\"\n style={{\n ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n height: 16,\n }}\n color={disabled ? disabledSemanticColor : \"base2\"}\n />\n </HvButton>\n );\n };\n\n const theme = useTheme();\n\n const inlineStyle = {\n ...style,\n };\n\n let categoricalBackgroundColor;\n\n if (type === \"semantic\") {\n inlineStyle.backgroundColor = getColor(theme, color, type);\n } else if (type === \"categorical\") {\n categoricalBackgroundColor = getColor(theme, color, type);\n\n inlineStyle.backgroundColor = fade(categoricalBackgroundColor, 0.3);\n }\n\n const [hover, setHover] = useState(false);\n\n return (\n <Chip\n label={label}\n className={clsx(classes.root, className)}\n onMouseEnter={() => {\n setHover(!!onClick);\n }}\n onMouseLeave={() => {\n setHover(false);\n }}\n style={{\n ...(disabled ? null : inlineStyle),\n ...(hover && !disabled ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` } : null),\n }}\n classes={{\n root: clsx(classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: !!onClick,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: clsx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n onDelete={getOnDeleteCallback(disabled, onDelete)}\n onClick={disabled ? undefined : onClick}\n role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n {...others}\n />\n );\n};\n\nHvTag.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied to the radio button.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n chipRoot: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n label: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n tagButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabledDeleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n titleOverflow: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categorical: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalDisabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n semanticTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deletable: PropTypes.string,\n /**\n * Styles applied to the component if has onClick.\n */\n clickable: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n focusVisible: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n primaryButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalFocus: PropTypes.string,\n }).isRequired,\n\n /**\n * Inline styles to be applied to the root element.\n */\n style: PropTypes.instanceOf(Object),\n\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n\n /**\n * The label of the tag element.\n *\n */\n label: PropTypes.node,\n\n /**\n * Indicates that the form element is disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * The type of the tag element.\n *\n * A tag can be of semantic or categoric type\n */\n type: PropTypes.oneOf([\"semantic\", \"categorical\"]),\n\n /**\n * Background color to be applied to the tag\n */\n color: PropTypes.string,\n /**\n * Icon used to customize the delete icon in the Chip element\n */\n deleteIcon: PropTypes.node,\n\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component,\n * in order to render the delete icon\n */\n onDelete: PropTypes.func,\n /**\n * Callback triggered when any item is clicked.\n */\n onClick: PropTypes.func,\n\n /**\n * The role of the element with an attributed event.\n */\n role: PropTypes.string,\n /**\n * Aria properties to apply to delete button in tag\n */\n deleteButtonArialLabel: PropTypes.string,\n /**\n * Props to apply to delete button\n */\n deleteButtonProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvTag\" })(HvTag);\n"],"mappings":"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"}
|
|
@@ -29,13 +29,15 @@ var styles = function styles(theme) {
|
|
|
29
29
|
primaryButton: {
|
|
30
30
|
background: "transparent"
|
|
31
31
|
},
|
|
32
|
-
label: {
|
|
32
|
+
label: _objectSpread(_objectSpread({
|
|
33
33
|
paddingLeft: theme.hv.spacing.xs,
|
|
34
|
-
paddingRight: theme.hv.spacing.xs
|
|
34
|
+
paddingRight: theme.hv.spacing.xs
|
|
35
|
+
}, theme.hv.typography.normalText), {}, {
|
|
36
|
+
color: theme.palette.base2,
|
|
35
37
|
"& p": {
|
|
36
38
|
color: theme.hv.palette.base.base2
|
|
37
39
|
}
|
|
38
|
-
},
|
|
40
|
+
}),
|
|
39
41
|
tagButton: {
|
|
40
42
|
width: 16,
|
|
41
43
|
height: 16,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["fade","outlineStyles","styles","theme","root","chipRoot","height","borderRadius","maxWidth","backgroundColor","palette","base1","focusVisible","primaryButton","background","label","paddingLeft","hv","spacing","xs","paddingRight","
|
|
1
|
+
{"version":3,"file":"styles.js","names":["fade","outlineStyles","styles","theme","root","chipRoot","height","borderRadius","maxWidth","backgroundColor","palette","base1","focusVisible","primaryButton","background","label","paddingLeft","hv","spacing","xs","paddingRight","typography","normalText","color","base2","base","tagButton","width","minWidth","minHeight","padding","margin","deleteIcon","marginRight","outline","boxShadow","disabledDeleteIcon","atmosphere","atmo3","outlineOffset","titleOverflow","whiteSpace","overflow","textOverflow","categorical","cursor","accent","acce1","clickable","categoricalFocus","disabled","atmo5","categoricalDisabled","semanticTextColor","categoricalTextColor"],"sources":["../../../src/Tag/styles.js"],"sourcesContent":["import fade from \"../utils/hexToRgbA\";\nimport { outlineStyles } from \"../Focus/styles\";\n\nconst styles = (theme) => ({\n root: {},\n\n chipRoot: {\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n \"& $focusVisible\": {\n backgroundColor: fade(theme.palette.base1, 0.3),\n },\n },\n\n focusVisible: {},\n\n primaryButton: {\n background: \"transparent\",\n },\n\n label: {\n paddingLeft: theme.hv.spacing.xs,\n paddingRight: theme.hv.spacing.xs,\n ...theme.hv.typography.normalText,\n color: theme.palette.base2,\n \"& p\": {\n color: theme.hv.palette.base.base2,\n },\n },\n\n tagButton: {\n width: 16,\n height: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n },\n\n deleteIcon: {\n marginRight: 0,\n width: 16,\n height: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n \"&:hover\": {\n backgroundColor: fade(theme.palette.base1, 0.3),\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 disabledDeleteIcon: {\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: \"none\",\n boxShadow: \"none\",\n outlineOffset: 0,\n },\n },\n titleOverflow: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n categorical: {\n borderRadius: 8,\n \"&$clickable\": {\n cursor: \"pointer\",\n },\n \"&:hover\": {\n borderRadius: 8,\n },\n \"& $label > p\": {\n color: theme.hv.palette.accent.acce1,\n },\n \"&:focus:not(:focus-visible)\": {\n outline: \"0 !important\",\n boxShadow: \"none !important\",\n },\n },\n clickable: {},\n\n categoricalFocus: {\n \"&:focus\": {\n ...outlineStyles,\n },\n },\n\n disabled: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n cursor: \"not-allowed\",\n \"& $label > p\": {\n color: theme.hv.palette.atmosphere.atmo5,\n },\n },\n\n categoricalDisabled: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n cursor: \"not-allowed\",\n \"& $label > p\": {\n color: theme.hv.palette.atmosphere.atmo5,\n },\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n \"&:focus\": {\n outline: \"none\",\n },\n },\n\n semanticTextColor: {\n color: theme.hv.palette.base.base2,\n },\n categoricalTextColor: {\n color: theme.hv.palette.accent.acce1,\n },\n});\n\nexport default styles;\n"],"mappings":"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"}
|
package/dist/modern/Tag/Tag.js
CHANGED
|
@@ -8,13 +8,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
8
8
|
|
|
9
9
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
10
10
|
|
|
11
|
-
import React, {
|
|
11
|
+
import React, { useState } from "react";
|
|
12
12
|
import { Chip, withStyles, useTheme } from "@material-ui/core";
|
|
13
13
|
import PropTypes from "prop-types";
|
|
14
14
|
import clsx from "clsx";
|
|
15
15
|
import { CloseXS } from "@hitachivantara/uikit-react-icons";
|
|
16
16
|
import fade from "../utils/hexToRgbA";
|
|
17
|
-
import { HvButton
|
|
17
|
+
import { HvButton } from "..";
|
|
18
18
|
import styles from "./styles";
|
|
19
19
|
import { getOnDeleteCallback, hasDeleteAction, hasClickAction } from "./utils";
|
|
20
20
|
|
|
@@ -44,8 +44,6 @@ const getColor = (theme, customColor, type) => {
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
const HvTag = props => {
|
|
47
|
-
var _HvTypography;
|
|
48
|
-
|
|
49
47
|
const {
|
|
50
48
|
classes,
|
|
51
49
|
style,
|
|
@@ -101,17 +99,8 @@ const HvTag = props => {
|
|
|
101
99
|
}
|
|
102
100
|
|
|
103
101
|
const [hover, setHover] = useState(false);
|
|
104
|
-
const chipLabel = useMemo(() => {
|
|
105
|
-
if (typeof label === "string") {
|
|
106
|
-
return _HvTypography || (_HvTypography = /*#__PURE__*/React.createElement(HvTypography, {
|
|
107
|
-
variant: "normalText"
|
|
108
|
-
}, label));
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
return label;
|
|
112
|
-
}, [label]);
|
|
113
102
|
return /*#__PURE__*/React.createElement(Chip, _extends({
|
|
114
|
-
label:
|
|
103
|
+
label: label,
|
|
115
104
|
className: clsx(classes.root, className),
|
|
116
105
|
onMouseEnter: () => {
|
|
117
106
|
setHover(!!onClick);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","names":["React","useMemo","useState","Chip","withStyles","useTheme","PropTypes","clsx","CloseXS","fade","HvButton","HvTypography","styles","getOnDeleteCallback","hasDeleteAction","hasClickAction","getColor","theme","customColor","type","defaultSemanticColor","hv","palette","semantic","sema7","defaultCategoricalColor","viz","categorical","cviz1","backgroundColor","HvTag","props","classes","style","className","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","getDeleteIcon","disabledSemanticColor","tabIndex","startIcon","tagButton","focusVisible","primary","primaryButton","cursor","undefined","height","inlineStyle","categoricalBackgroundColor","hover","setHover","chipLabel","root","boxShadow","chipRoot","clickable","categoricalDisabled","categoricalFocus","disabledDeleteIcon","propTypes","shape","string","titleOverflow","semanticTextColor","categoricalTextColor","deletable","isRequired","instanceOf","Object","node","bool","oneOf","func","name"],"sources":["../../../src/Tag/Tag.js"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\n\nimport { Chip, withStyles, useTheme } from \"@material-ui/core\";\n\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport fade from \"../utils/hexToRgbA\";\n\nimport { HvButton, HvTypography } from \"..\";\n\nimport styles from \"./styles\";\n\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nconst getColor = (theme, customColor, type) => {\n const defaultSemanticColor = theme.hv.palette.semantic.sema7;\n const defaultCategoricalColor = theme.hv.viz.palette.categorical.cviz1;\n\n let backgroundColor;\n\n if (type === \"semantic\") {\n backgroundColor = theme.palette[customColor] || customColor || defaultSemanticColor;\n }\n if (type === \"categorical\") {\n backgroundColor =\n theme.hv.viz.palette.categorical[customColor] || customColor || defaultCategoricalColor;\n }\n\n return backgroundColor;\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 */\nconst HvTag = (props) => {\n const {\n classes,\n style,\n className,\n label,\n disabled,\n type = \"semantic\",\n color,\n deleteIcon,\n onDelete,\n onClick,\n role,\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = props;\n\n const getDeleteIcon = () => {\n const disabledSemanticColor = type === \"semantic\" ? \"atmo5\" : \"base2\";\n const { tabIndex = 0 } = deleteButtonProps;\n\n return (\n <HvButton\n classes={{\n startIcon: classes.tagButton,\n focusVisible: classes.focusVisible,\n primary: classes.primaryButton,\n }}\n aria-label={deleteButtonArialLabel}\n tabIndex={tabIndex}\n {...deleteButtonProps}\n >\n <CloseXS\n iconSize=\"XS\"\n style={{\n ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n height: 16,\n }}\n color={disabled ? disabledSemanticColor : \"base2\"}\n />\n </HvButton>\n );\n };\n\n const theme = useTheme();\n\n const inlineStyle = {\n ...style,\n };\n\n let categoricalBackgroundColor;\n\n if (type === \"semantic\") {\n inlineStyle.backgroundColor = getColor(theme, color, type);\n } else if (type === \"categorical\") {\n categoricalBackgroundColor = getColor(theme, color, type);\n\n inlineStyle.backgroundColor = fade(categoricalBackgroundColor, 0.3);\n }\n\n const [hover, setHover] = useState(false);\n\n const chipLabel = useMemo(() => {\n if (typeof label === \"string\") {\n return <HvTypography variant=\"normalText\">{label}</HvTypography>;\n }\n\n return label;\n }, [label]);\n\n return (\n <Chip\n label={chipLabel}\n className={clsx(classes.root, className)}\n onMouseEnter={() => {\n setHover(!!onClick);\n }}\n onMouseLeave={() => {\n setHover(false);\n }}\n style={{\n ...(disabled ? null : inlineStyle),\n ...(hover && !disabled ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` } : null),\n }}\n classes={{\n root: clsx(classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: !!onClick,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: clsx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n onDelete={getOnDeleteCallback(disabled, onDelete)}\n onClick={disabled ? undefined : onClick}\n role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n {...others}\n />\n );\n};\n\nHvTag.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied to the radio button.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n chipRoot: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n label: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n tagButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabledDeleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n titleOverflow: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categorical: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalDisabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n semanticTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deletable: PropTypes.string,\n /**\n * Styles applied to the component if has onClick.\n */\n clickable: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n focusVisible: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n primaryButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalFocus: PropTypes.string,\n }).isRequired,\n\n /**\n * Inline styles to be applied to the root element.\n */\n style: PropTypes.instanceOf(Object),\n\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n\n /**\n * The label of the tag element.\n *\n */\n label: PropTypes.node,\n\n /**\n * Indicates that the form element is disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * The type of the tag element.\n *\n * A tag can be of semantic or categoric type\n */\n type: PropTypes.oneOf([\"semantic\", \"categorical\"]),\n\n /**\n * Background color to be applied to the tag\n */\n color: PropTypes.string,\n /**\n * Icon used to customize the delete icon in the Chip element\n */\n deleteIcon: PropTypes.node,\n\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component,\n * in order to render the delete icon\n */\n onDelete: PropTypes.func,\n /**\n * Callback triggered when any item is clicked.\n */\n onClick: PropTypes.func,\n\n /**\n * The role of the element with an attributed event.\n */\n role: PropTypes.string,\n /**\n * Aria properties to apply to delete button in tag\n */\n deleteButtonArialLabel: PropTypes.string,\n /**\n * Props to apply to delete button\n */\n deleteButtonProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvTag\" })(HvTag);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tag.js","names":["React","useState","Chip","withStyles","useTheme","PropTypes","clsx","CloseXS","fade","HvButton","styles","getOnDeleteCallback","hasDeleteAction","hasClickAction","getColor","theme","customColor","type","defaultSemanticColor","hv","palette","semantic","sema7","defaultCategoricalColor","viz","categorical","cviz1","backgroundColor","HvTag","props","classes","style","className","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","getDeleteIcon","disabledSemanticColor","tabIndex","startIcon","tagButton","focusVisible","primary","primaryButton","cursor","undefined","height","inlineStyle","categoricalBackgroundColor","hover","setHover","root","boxShadow","chipRoot","clickable","categoricalDisabled","categoricalFocus","disabledDeleteIcon","propTypes","shape","string","titleOverflow","semanticTextColor","categoricalTextColor","deletable","isRequired","instanceOf","Object","node","bool","oneOf","func","name"],"sources":["../../../src/Tag/Tag.js"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { Chip, withStyles, useTheme } from \"@material-ui/core\";\n\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport fade from \"../utils/hexToRgbA\";\n\nimport { HvButton } from \"..\";\n\nimport styles from \"./styles\";\n\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nconst getColor = (theme, customColor, type) => {\n const defaultSemanticColor = theme.hv.palette.semantic.sema7;\n const defaultCategoricalColor = theme.hv.viz.palette.categorical.cviz1;\n\n let backgroundColor;\n\n if (type === \"semantic\") {\n backgroundColor = theme.palette[customColor] || customColor || defaultSemanticColor;\n }\n if (type === \"categorical\") {\n backgroundColor =\n theme.hv.viz.palette.categorical[customColor] || customColor || defaultCategoricalColor;\n }\n\n return backgroundColor;\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 */\nconst HvTag = (props) => {\n const {\n classes,\n style,\n className,\n label,\n disabled,\n type = \"semantic\",\n color,\n deleteIcon,\n onDelete,\n onClick,\n role,\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = props;\n\n const getDeleteIcon = () => {\n const disabledSemanticColor = type === \"semantic\" ? \"atmo5\" : \"base2\";\n const { tabIndex = 0 } = deleteButtonProps;\n\n return (\n <HvButton\n classes={{\n startIcon: classes.tagButton,\n focusVisible: classes.focusVisible,\n primary: classes.primaryButton,\n }}\n aria-label={deleteButtonArialLabel}\n tabIndex={tabIndex}\n {...deleteButtonProps}\n >\n <CloseXS\n iconSize=\"XS\"\n style={{\n ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n height: 16,\n }}\n color={disabled ? disabledSemanticColor : \"base2\"}\n />\n </HvButton>\n );\n };\n\n const theme = useTheme();\n\n const inlineStyle = {\n ...style,\n };\n\n let categoricalBackgroundColor;\n\n if (type === \"semantic\") {\n inlineStyle.backgroundColor = getColor(theme, color, type);\n } else if (type === \"categorical\") {\n categoricalBackgroundColor = getColor(theme, color, type);\n\n inlineStyle.backgroundColor = fade(categoricalBackgroundColor, 0.3);\n }\n\n const [hover, setHover] = useState(false);\n\n return (\n <Chip\n label={label}\n className={clsx(classes.root, className)}\n onMouseEnter={() => {\n setHover(!!onClick);\n }}\n onMouseLeave={() => {\n setHover(false);\n }}\n style={{\n ...(disabled ? null : inlineStyle),\n ...(hover && !disabled ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` } : null),\n }}\n classes={{\n root: clsx(classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: !!onClick,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: clsx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n onDelete={getOnDeleteCallback(disabled, onDelete)}\n onClick={disabled ? undefined : onClick}\n role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n {...others}\n />\n );\n};\n\nHvTag.propTypes = {\n /**\n * A Jss Object used to override or extend the styles applied to the radio button.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n chipRoot: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n label: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n tagButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabledDeleteIcon: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n titleOverflow: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categorical: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalDisabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n disabled: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n semanticTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalTextColor: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n deletable: PropTypes.string,\n /**\n * Styles applied to the component if has onClick.\n */\n clickable: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n focusVisible: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n primaryButton: PropTypes.string,\n /**\n * Styles applied to the component.\n */\n categoricalFocus: PropTypes.string,\n }).isRequired,\n\n /**\n * Inline styles to be applied to the root element.\n */\n style: PropTypes.instanceOf(Object),\n\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n\n /**\n * The label of the tag element.\n *\n */\n label: PropTypes.node,\n\n /**\n * Indicates that the form element is disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * The type of the tag element.\n *\n * A tag can be of semantic or categoric type\n */\n type: PropTypes.oneOf([\"semantic\", \"categorical\"]),\n\n /**\n * Background color to be applied to the tag\n */\n color: PropTypes.string,\n /**\n * Icon used to customize the delete icon in the Chip element\n */\n deleteIcon: PropTypes.node,\n\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component,\n * in order to render the delete icon\n */\n onDelete: PropTypes.func,\n /**\n * Callback triggered when any item is clicked.\n */\n onClick: PropTypes.func,\n\n /**\n * The role of the element with an attributed event.\n */\n role: PropTypes.string,\n /**\n * Aria properties to apply to delete button in tag\n */\n deleteButtonArialLabel: PropTypes.string,\n /**\n * Props to apply to delete button\n */\n deleteButtonProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvTag\" })(HvTag);\n"],"mappings":"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"}
|
|
@@ -21,13 +21,15 @@ const styles = theme => ({
|
|
|
21
21
|
primaryButton: {
|
|
22
22
|
background: "transparent"
|
|
23
23
|
},
|
|
24
|
-
label: {
|
|
24
|
+
label: _objectSpread(_objectSpread({
|
|
25
25
|
paddingLeft: theme.hv.spacing.xs,
|
|
26
|
-
paddingRight: theme.hv.spacing.xs
|
|
26
|
+
paddingRight: theme.hv.spacing.xs
|
|
27
|
+
}, theme.hv.typography.normalText), {}, {
|
|
28
|
+
color: theme.palette.base2,
|
|
27
29
|
"& p": {
|
|
28
30
|
color: theme.hv.palette.base.base2
|
|
29
31
|
}
|
|
30
|
-
},
|
|
32
|
+
}),
|
|
31
33
|
tagButton: {
|
|
32
34
|
width: 16,
|
|
33
35
|
height: 16,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["fade","outlineStyles","styles","theme","root","chipRoot","height","borderRadius","maxWidth","backgroundColor","palette","base1","focusVisible","primaryButton","background","label","paddingLeft","hv","spacing","xs","paddingRight","
|
|
1
|
+
{"version":3,"file":"styles.js","names":["fade","outlineStyles","styles","theme","root","chipRoot","height","borderRadius","maxWidth","backgroundColor","palette","base1","focusVisible","primaryButton","background","label","paddingLeft","hv","spacing","xs","paddingRight","typography","normalText","color","base2","base","tagButton","width","minWidth","minHeight","padding","margin","deleteIcon","marginRight","outline","boxShadow","disabledDeleteIcon","atmosphere","atmo3","outlineOffset","titleOverflow","whiteSpace","overflow","textOverflow","categorical","cursor","accent","acce1","clickable","categoricalFocus","disabled","atmo5","categoricalDisabled","semanticTextColor","categoricalTextColor"],"sources":["../../../src/Tag/styles.js"],"sourcesContent":["import fade from \"../utils/hexToRgbA\";\nimport { outlineStyles } from \"../Focus/styles\";\n\nconst styles = (theme) => ({\n root: {},\n\n chipRoot: {\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n \"& $focusVisible\": {\n backgroundColor: fade(theme.palette.base1, 0.3),\n },\n },\n\n focusVisible: {},\n\n primaryButton: {\n background: \"transparent\",\n },\n\n label: {\n paddingLeft: theme.hv.spacing.xs,\n paddingRight: theme.hv.spacing.xs,\n ...theme.hv.typography.normalText,\n color: theme.palette.base2,\n \"& p\": {\n color: theme.hv.palette.base.base2,\n },\n },\n\n tagButton: {\n width: 16,\n height: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n },\n\n deleteIcon: {\n marginRight: 0,\n width: 16,\n height: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n \"&:hover\": {\n backgroundColor: fade(theme.palette.base1, 0.3),\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 disabledDeleteIcon: {\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: \"none\",\n boxShadow: \"none\",\n outlineOffset: 0,\n },\n },\n titleOverflow: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n categorical: {\n borderRadius: 8,\n \"&$clickable\": {\n cursor: \"pointer\",\n },\n \"&:hover\": {\n borderRadius: 8,\n },\n \"& $label > p\": {\n color: theme.hv.palette.accent.acce1,\n },\n \"&:focus:not(:focus-visible)\": {\n outline: \"0 !important\",\n boxShadow: \"none !important\",\n },\n },\n clickable: {},\n\n categoricalFocus: {\n \"&:focus\": {\n ...outlineStyles,\n },\n },\n\n disabled: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n cursor: \"not-allowed\",\n \"& $label > p\": {\n color: theme.hv.palette.atmosphere.atmo5,\n },\n },\n\n categoricalDisabled: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n cursor: \"not-allowed\",\n \"& $label > p\": {\n color: theme.hv.palette.atmosphere.atmo5,\n },\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n \"&:focus\": {\n outline: \"none\",\n },\n },\n\n semanticTextColor: {\n color: theme.hv.palette.base.base2,\n },\n categoricalTextColor: {\n color: theme.hv.palette.accent.acce1,\n },\n});\n\nexport default styles;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "3.74.
|
|
3
|
+
"version": "3.74.1",
|
|
4
4
|
"description": "A collection of React components for the Hitachi Vantara's Design System.",
|
|
5
5
|
"homepage": "https://github.com/lumada-design/hv-uikit-react",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
"publishConfig": {
|
|
81
81
|
"access": "public"
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "909e69f98cf2f7dabb0585f00d29bebd005fba83"
|
|
84
84
|
}
|