@hi-ui/tag-input 4.0.0-alpha.7 → 4.0.0-beta.2
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/lib/cjs/TagInput.js +8 -8
- package/lib/cjs/TagInput.js.map +1 -1
- package/lib/cjs/TagInputMock.js +44 -17
- package/lib/cjs/TagInputMock.js.map +1 -1
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/esm/TagInput.js +9 -9
- package/lib/esm/TagInput.js.map +1 -1
- package/lib/esm/TagInputMock.js +44 -17
- package/lib/esm/TagInputMock.js.map +1 -1
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/types/TagInputMock.d.ts +31 -3
- package/package.json +15 -15
package/lib/cjs/TagInput.js
CHANGED
|
@@ -68,7 +68,7 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
68
68
|
_a$wrap = _a.wrap,
|
|
69
69
|
wrap = _a$wrap === void 0 ? true : _a$wrap,
|
|
70
70
|
_a$clearable = _a.clearable,
|
|
71
|
-
clearable = _a$clearable === void 0 ?
|
|
71
|
+
clearable = _a$clearable === void 0 ? true : _a$clearable,
|
|
72
72
|
_a$disabled = _a.disabled,
|
|
73
73
|
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
|
74
74
|
suffix = _a.suffix,
|
|
@@ -89,12 +89,6 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
89
89
|
tagMaxWidth = _useTagInput[0];
|
|
90
90
|
|
|
91
91
|
var onClearLatest = useLatest.useLatestCallback(onClear);
|
|
92
|
-
var handleClear = React.useCallback(function (evt) {
|
|
93
|
-
if (disabled) return;
|
|
94
|
-
evt.stopPropagation();
|
|
95
|
-
tryChangeValue(NOOP_ARRAY);
|
|
96
|
-
onClearLatest();
|
|
97
|
-
}, [tryChangeValue, disabled, onClearLatest]);
|
|
98
92
|
var tagList = React.useMemo(function () {
|
|
99
93
|
return value.map(function (id) {
|
|
100
94
|
return data.find(function (item) {
|
|
@@ -105,6 +99,12 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
105
99
|
};
|
|
106
100
|
});
|
|
107
101
|
}, [value, data]);
|
|
102
|
+
var handleClear = React.useCallback(function (evt) {
|
|
103
|
+
if (disabled) return;
|
|
104
|
+
evt.stopPropagation();
|
|
105
|
+
tryChangeValue(NOOP_ARRAY, tagList, false);
|
|
106
|
+
onClearLatest();
|
|
107
|
+
}, [tryChangeValue, disabled, onClearLatest, tagList]);
|
|
108
108
|
|
|
109
109
|
var _useState = React.useState(false),
|
|
110
110
|
hover = _useState[0],
|
|
@@ -169,7 +169,7 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
169
169
|
var nextValue = [].concat(value).filter(function (id) {
|
|
170
170
|
return id !== option.id;
|
|
171
171
|
});
|
|
172
|
-
tryChangeValue(nextValue);
|
|
172
|
+
tryChangeValue(nextValue, [option], false);
|
|
173
173
|
}
|
|
174
174
|
}, /*#__PURE__*/React__default['default'].createElement(icons.CloseOutlined, null)) : null);
|
|
175
175
|
}))) : /*#__PURE__*/React__default['default'].createElement("span", {
|
package/lib/cjs/TagInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagInput.js","sources":["../../src/TagInput.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","NOOP_ARRAY","TagInput","forwardRef","_a","ref","prefixCls","role","className","defaultValue","valueProp","value","onChange","placeholder","data","wrap","clearable","disabled","suffix","displayRender","onClick","onMouseOver","onMouseLeave","onClear","rest","useUncontrolledState","tryChangeValue","tagInputRef","useRef","useTagInput","tagMaxWidth","onClearLatest","useLatestCallback","
|
|
1
|
+
{"version":3,"file":"TagInput.js","sources":["../../src/TagInput.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","NOOP_ARRAY","TagInput","forwardRef","_a","ref","prefixCls","role","className","defaultValue","valueProp","value","onChange","placeholder","data","wrap","clearable","disabled","suffix","displayRender","onClick","onMouseOver","onMouseLeave","onClear","rest","useUncontrolledState","tryChangeValue","tagInputRef","useRef","useTagInput","tagMaxWidth","onClearLatest","useLatestCallback","tagList","useMemo","map","id","find","item","title","handleClear","useCallback","evt","stopPropagation","useState","hover","setHover","trySetHover","hovered","tagCount","length","showClearableIcon","showTagCount","expanded","setExpanded","useOutsideClick","handleExpand","cls","cx","React","useMergeRefs","option","closeable","key","style","maxWidth","nextValue","filter","CloseOutlined","tabIndex","CloseCircleFilled","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAMA,KAAK,GAAG,WAAd;;AACA,IAAMC,OAAO,GAAGC,sBAAAA,CAAaF,KAAbE,CAAhB;;AACA,IAAMC,UAAU,GAAG,EAAnB;AAEA;;;;IAGaC,QAAQ,gBAAGC,gBAAAA,CACtB,UACEC,EADF,EAqBEC,GArBF;wBAEIC;MAAAA,sCAAYP;mBACZQ;MAAAA,4BAAOT;MACPU,eAAAA;2BACAC;MAAAA,4CAAeR;MACRS,eAAPC;MACAC,cAAAA;MACAC,iBAAAA;mBACAC;MAAAA,4BAAOb;mBACPc;MAAAA,4BAAO;wBACPC;MAAAA,sCAAY;uBACZC;MAAAA,oCAAW;MACXC,YAAAA;MACAC,mBAAAA;MACAC,aAAAA;MACAC,kBAAAA;MACAC,mBAAAA;MACAC,aAAAA;MACGC,wBAlBL,YAAA,QAAA,aAAA,gBAAA,SAAA,YAAA,eAAA,QAAA,QAAA,aAAA,YAAA,UAAA,iBAAA,WAAA,eAAA,gBAAA,WAAA;;8BAsBgCC,yCAAAA,CAAqBhB,YAArBgB,EAAmCf,SAAnCe,EAA8Cb,QAA9Ca;MAAzBd,KAAP;MAAce,cAAd;;MAEMC,WAAW,GAAGC,YAAAA,CAAuB,IAAvBA;;qBACEC,uBAAAA,CAAYf,IAAZe,EAAkBF,WAAlBE;MAAfC,WAAP;;MAEMC,aAAa,GAAGC,2BAAAA,CAAkBT,OAAlBS;MAEhBC,OAAO,GAAGC,aAAAA,CACd;WAAMvB,KAAK,CAACwB,GAANxB,CAAU,UAACyB,EAAD;aAAQtB,IAAI,CAACuB,IAALvB,CAAU,UAACwB,IAAD;eAAUA,IAAI,CAACF,EAALE,KAAYF;AAAhC,OAAAtB,KAAuC;AAAEsB,QAAAA,EAAE,EAAFA,EAAF;AAAMG,QAAAA,KAAK,EAAEH;AAAb;AAAzD,KAAAzB;AADe,GAAPuB,EAEd,CAACvB,KAAD,EAAQG,IAAR,CAFcoB;MAKVM,WAAW,GAAGC,iBAAAA,CAClB,UAACC,GAAD;QACMzB,UAAU;AACdyB,IAAAA,GAAG,CAACC,eAAJD;AACAhB,IAAAA,cAAc,CAACzB,UAAD,EAAagC,OAAb,EAAsB,KAAtB,CAAdP;AACAK,IAAAA,aAAa;AALc,GAAXU,EAOlB,CAACf,cAAD,EAAiBT,QAAjB,EAA2Bc,aAA3B,EAA0CE,OAA1C,CAPkBQ;;kBAUMG,cAAAA,CAAS,KAATA;MAAnBC,KAAP;MAAcC,QAAd;;MACMC,WAAW,GAAGN,iBAAAA,CAClB,UAACO,OAAD;QACM/B,UAAU;AACd6B,IAAAA,QAAQ,CAACE,OAAD,CAARF;AAH2B,GAAXL,EAKlB,CAACxB,QAAD,CALkBwB;MAQdQ,QAAQ,GAAGhB,OAAO,CAACiB;;MAEnBC,iBAAiB,GAAGnC,SAAS,IAAIiC,QAAQ,GAAG,CAAxBjC,IAA6B,CAACC;MAClDmC,YAAY,GAAG,CAACrC,IAAD,IAASkC,QAAQ,GAAG;;mBAETL,cAAAA,CAAS,KAATA;MAAzBS,QAAP;MAAiBC,WAAjB;;AAEAC,EAAAA,+BAAAA,CAAgB5B,WAAhB4B,EAA6B;WAAMD,WAAW,CAAC,KAAD;AAA/B,GAAfC;MAEMC,YAAY,GAAGf,iBAAAA,CAAY,UAACC,GAAD;AAC/BA,IAAAA,GAAG,CAACC,eAAJD;AACAY,IAAAA,WAAW,CAAC,IAAD,CAAXA;AAF8B,GAAXb,EAGlB,EAHkBA;MAKfgB,GAAG,GAAGC,YAAAA,CACVpD,SADUoD,EAEVlD,SAFUkD,EAGVL,QAAQ,GAAM/C,SAAN,eAAA,GAA8BS,IAAI,GAAMT,SAAN,WAAA,GAA6BA,SAA7B,aAHhCoD;sBAOVC,yBAAAA,cAAAA,MAAAA;AACEtD,IAAAA,GAAG,EAAEuD,yBAAAA,CAAavD,GAAbuD,EAAkBjC,WAAlBiC;AACLrD,IAAAA,IAAI,EAAEA;AACNC,IAAAA,SAAS,EAAEiD;AACXpC,IAAAA,WAAW,EAAE,oBAAA,CAACqB,GAAD;AACXK,MAAAA,WAAW,CAAC,IAAD,CAAXA;AACA1B,MAAAA,YAAW,SAAXA,IAAAA,YAAW,WAAXA,SAAAA,GAAAA,YAAW,CAAGqB,GAAH,CAAXrB;;AAEFC,IAAAA,YAAY,EAAE,qBAAA,CAACoB,GAAD;AACZK,MAAAA,WAAW,CAAC,KAAD,CAAXA;AACAzB,MAAAA,aAAY,SAAZA,IAAAA,aAAY,WAAZA,SAAAA,GAAAA,aAAY,CAAGoB,GAAH,CAAZpB;;KAEEE,KAZNmC,eAcEA,yBAAAA,cAAAA,MAAAA;AAAKnD,IAAAA,SAAS,EAAEkD,YAAAA,CAAMpD,SAAJ,gBAAFoD,EAA8BzC,QAAQ,IAAI,UAA1CyC;AAAuDtC,IAAAA,OAAO,EAAEA;GAAhFuC,EACGhD,KAAK,CAACuC,MAANvC,KAAiB,CAAjBA,gBACCgD,yBAAAA,cAAAA,OAAAA;AAAMnD,IAAAA,SAAS,EAAKF,SAAL;GAAfqD,eACEA,yBAAAA,cAAAA,OAAAA;AAAMnD,IAAAA,SAAS,EAAEkD,YAAAA,CAAMpD,SAAJ,WAAFoD,EAAyB3C,IAAI,IAAOT,SAAP,gBAA7BoD;GAAjBC,EACG1B,OAAO,CAACE,GAARF,CAAY,UAAC4B,MAAD;QACLtB,KAAK,GAAGpB,aAAa,GAAGA,aAAa,CAAC0C,MAAD,CAAhB,GAA2B;QAChDC,SAAS,GAAG,CAACD,MAAM,CAAC5C;wBAExB0C,yBAAAA,cAAAA,OAAAA;AAAMnD,MAAAA,SAAS,EAAKF,SAAL;AAAuByD,MAAAA,GAAG,EAAEF,MAAM,CAACzB;KAAlDuB,eACEA,yBAAAA,cAAAA,OAAAA;AACEnD,MAAAA,SAAS,EAAKF,SAAL;AACT0D,MAAAA,KAAK,EAAE;AAAEC,QAAAA,QAAQ,EAAEnC;AAAZ;KAFT6B,EAIGpB,KAAK,KAAK,IAAVA,GAAiBsB,MAAM,CAACtB,KAAxBA,GAAgCA,KAJnCoB,CADFA,EAOGG,SAAS,gBACRH,yBAAAA,cAAAA,OAAAA;AACEnD,MAAAA,SAAS,EAAKF,SAAL;AACTc,MAAAA,OAAO,EAAE,gBAAA,CAACsB,GAAD;YACHzB,UAAU;AAEdyB,QAAAA,GAAG,CAACC,eAAJD;YACMwB,SAAS,GAAG,SAAA,CAAIvD,KAAJ,EAAWwD,MAAX,CAAkB,UAAC/B,EAAD;iBAAQA,EAAE,KAAKyB,MAAM,CAACzB;AAAxC,SAAA;AAClBV,QAAAA,cAAc,CAACwC,SAAD,EAAY,CAACL,MAAD,CAAZ,EAAsB,KAAtB,CAAdnC;;KAPJiC,eAUEA,yBAAAA,cAAAA,CAACS,mBAADT,MAAAA,CAVFA,CADQ,GAaN,IApBNA;AAJH,GAAA1B,CADH0B,CADFA,CADDhD,gBAkCCgD,yBAAAA,cAAAA,OAAAA;AAAMnD,IAAAA,SAAS,EAAKF,SAAL;GAAfqD,EAA+C9C,WAA/C8C,CAnCJA,EAqCG,CAAC,CAACzC,MAAF,IAAaiC,iBAAiB,IAAIN,KAAlC,IAA4CO,YAA5C,gBACCO,yBAAAA,cAAAA,OAAAA;AAAMnD,IAAAA,SAAS,EAAKF,SAAL;GAAfqD,EACGP,YAAY,gBACXO,yBAAAA,cAAAA,OAAAA;AAAMnD,IAAAA,SAAS,EAAEkD,YAAAA,CAAMpD,SAAJ,iBAAFoD;AAAgCtC,IAAAA,OAAO,EAAEoC;GAA1DG,QACMV,QAAQ,GAAG,EAAXA,GAAgB,KAAhBA,GAAwBA,SAD9BU,CADW,GAITR,iBAAiB,IAAIN,KAArBM,gBACFQ,yBAAAA,cAAAA,OAAAA;AACEnD,IAAAA,SAAS,EAAKF,SAAL;AACTC,IAAAA,IAAI,EAAC;AACL8D,IAAAA,QAAQ,EAAE,CAAC;AACXjD,IAAAA,OAAO,EAAEoB;GAJXmB,eAMEA,yBAAAA,cAAAA,CAACW,uBAADX,MAAAA,CANFA,CADER,GASA,IAdNQ,EAeGzC,MAfHyC,CADD,GAkBG,IAvDNA,CAdFA,EAwEGhD,KAAK,CAACuC,MAANvC,KAAiB,CAAjBA,IAAsB0C,QAAtB1C,gBACCgD,yBAAAA,cAAAA,MAAAA;AAAKnD,IAAAA,SAAS,EAAKF,SAAL;GAAdqD,eACEA,yBAAAA,cAAAA,OAAAA;AAAMnD,IAAAA,SAAS,EAAEkD,YAAAA,CAAMpD,SAAJ,YAAFoD;GAAjBC,eACEA,yBAAAA,cAAAA,OAAAA;AAAMnD,IAAAA,SAAS,EAAEkD,YAAAA,CAAMpD,SAAJ,WAAFoD,EAA4BpD,SAA1B,gBAAFoD;GAAjBC,EACG1B,OAAO,CAACE,GAARF,CAAY,UAAC4B,MAAD;QACLtB,KAAK,GAAGpB,aAAa,GAAGA,aAAa,CAAC0C,MAAD,CAAhB,GAA2B;QAChDC,SAAS,GAAG,CAACD,MAAM,CAAC5C;wBAGxB0C,yBAAAA,cAAAA,OAAAA;AAAMnD,MAAAA,SAAS,EAAKF,SAAL;AAAuByD,MAAAA,GAAG,EAAEF,MAAM,CAACzB;KAAlDuB,eACEA,yBAAAA,cAAAA,OAAAA;AACEnD,MAAAA,SAAS,EAAKF,SAAL;AACT0D,MAAAA,KAAK,EAAE;AAAEC,QAAAA,QAAQ,EAAEnC;AAAZ;KAFT6B,EAIGpB,KAAK,KAAK,IAAVA,GAAiBsB,MAAM,CAACtB,KAAxBA,GAAgCA,KAJnCoB,CADFA,EAOGG,SAAS,gBACRH,yBAAAA,cAAAA,OAAAA;AACEnD,MAAAA,SAAS,EAAKF,SAAL;AACTc,MAAAA,OAAO,EAAE,gBAAA,CAACsB,GAAD;YACHzB,UAAU;AAEdyB,QAAAA,GAAG,CAACC,eAAJD;YACMwB,SAAS,GAAG,SAAA,CAAIvD,KAAJ,EAAWwD,MAAX,CAAkB,UAAC/B,EAAD;iBAAQA,EAAE,KAAKyB,MAAM,CAACzB;AAAxC,SAAA;AAClBV,QAAAA,cAAc,CAACwC,SAAD,CAAdxC;;KAPJiC,eAUEA,yBAAAA,cAAAA,CAACS,mBAADT,MAAAA,CAVFA,CADQ,GAaN,IApBNA;AALH,GAAA1B,CADH0B,CADFA,CADFA,EAkCGR,iBAAiB,gBAChBQ,yBAAAA,cAAAA,OAAAA;AAAMnD,IAAAA,SAAS,EAAKF,SAAL;GAAfqD,eACEA,yBAAAA,cAAAA,OAAAA;AACEnD,IAAAA,SAAS,EAAKF,SAAL;AACTC,IAAAA,IAAI,EAAC;AACL8D,IAAAA,QAAQ,EAAE,CAAC;AACXjD,IAAAA,OAAO,EAAEoB;GAJXmB,eAMEA,yBAAAA,cAAAA,CAACW,uBAADX,MAAAA,CANFA,CADFA,CADgB,GAWd,IA7CNA,CADDhD,GAgDG,IAxHNgD;AA5E4B,CAAVxD;;AA0PxB,IAAIoE,WAAJ,EAAa;AACXrE,EAAAA,QAAQ,CAACsE,WAATtE,GAAuB,UAAvBA;;;"}
|
package/lib/cjs/TagInputMock.js
CHANGED
|
@@ -65,10 +65,24 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
65
65
|
placeholder = _a.placeholder,
|
|
66
66
|
_a$data = _a.data,
|
|
67
67
|
data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
|
|
68
|
-
_a$clearable = _a.clearable,
|
|
69
|
-
clearable = _a$clearable === void 0 ? false : _a$clearable,
|
|
70
68
|
_a$disabled = _a.disabled,
|
|
71
69
|
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
|
70
|
+
_a$clearable = _a.clearable,
|
|
71
|
+
clearable = _a$clearable === void 0 ? true : _a$clearable,
|
|
72
|
+
_a$focused = _a.focused,
|
|
73
|
+
focused = _a$focused === void 0 ? false : _a$focused,
|
|
74
|
+
_a$invalid = _a.invalid,
|
|
75
|
+
invalid = _a$invalid === void 0 ? false : _a$invalid,
|
|
76
|
+
_a$readOnly = _a.readOnly,
|
|
77
|
+
readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
|
|
78
|
+
_a$size = _a.size,
|
|
79
|
+
size = _a$size === void 0 ? 'md' : _a$size,
|
|
80
|
+
_a$appearance = _a.appearance,
|
|
81
|
+
appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
|
|
82
|
+
_a$wrap = _a.wrap,
|
|
83
|
+
wrap = _a$wrap === void 0 ? false : _a$wrap,
|
|
84
|
+
_a$expandable = _a.expandable,
|
|
85
|
+
expandable = _a$expandable === void 0 ? false : _a$expandable,
|
|
72
86
|
suffix = _a.suffix,
|
|
73
87
|
_a$tagWidth = _a.tagWidth,
|
|
74
88
|
tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
|
|
@@ -76,7 +90,8 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
76
90
|
_onMouseOver = _a.onMouseOver,
|
|
77
91
|
_onMouseLeave = _a.onMouseLeave,
|
|
78
92
|
onClear = _a.onClear,
|
|
79
|
-
|
|
93
|
+
onExpand = _a.onExpand,
|
|
94
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "wrap", "expandable", "suffix", "tagWidth", "displayRender", "onMouseOver", "onMouseLeave", "onClear", "onExpand"]);
|
|
80
95
|
|
|
81
96
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
|
|
82
97
|
value = _useUncontrolledState[0],
|
|
@@ -100,9 +115,14 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
100
115
|
setContainerWidth = _useState[1];
|
|
101
116
|
|
|
102
117
|
var mergedTagList = React.useMemo(function () {
|
|
118
|
+
if (wrap) {
|
|
119
|
+
return tagList;
|
|
120
|
+
}
|
|
121
|
+
|
|
103
122
|
return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
|
|
104
|
-
}, [tagList, tagWidth, containerWidth]);
|
|
123
|
+
}, [tagList, tagWidth, containerWidth, wrap]);
|
|
105
124
|
var showTags = mergedTagList.length > 0;
|
|
125
|
+
var showTagCount = !wrap && showTags;
|
|
106
126
|
|
|
107
127
|
var _useState2 = React.useState({}),
|
|
108
128
|
tagsWidth = _useState2[0],
|
|
@@ -149,17 +169,18 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
149
169
|
}
|
|
150
170
|
} else {
|
|
151
171
|
tagMaxCount = 0;
|
|
152
|
-
}
|
|
172
|
+
} // 保底要展示 1 个
|
|
173
|
+
|
|
153
174
|
|
|
154
|
-
setTagMaxCount(tagMaxCount);
|
|
175
|
+
setTagMaxCount(typeAssertion.isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount);
|
|
155
176
|
}, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
|
|
156
177
|
var onClearLatest = useLatest.useLatestCallback(onClear);
|
|
157
178
|
var handleClear = React.useCallback(function (evt) {
|
|
158
179
|
if (disabled) return;
|
|
159
180
|
evt.stopPropagation();
|
|
160
|
-
tryChangeValue(NOOP_ARRAY);
|
|
181
|
+
tryChangeValue(NOOP_ARRAY, tagList, false);
|
|
161
182
|
onClearLatest();
|
|
162
|
-
}, [tryChangeValue, disabled, onClearLatest]);
|
|
183
|
+
}, [tryChangeValue, disabled, onClearLatest, tagList]);
|
|
163
184
|
|
|
164
185
|
var _useState5 = React.useState(false),
|
|
165
186
|
hover = _useState5[0],
|
|
@@ -171,7 +192,8 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
171
192
|
}, [disabled]); // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
|
|
172
193
|
|
|
173
194
|
var showClearableIcon = clearable && showTags && !disabled;
|
|
174
|
-
var
|
|
195
|
+
var maxTagWidth = containerWidth - suffixWidth;
|
|
196
|
+
var cls = classname.cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", readOnly && 'readonly', invalid && 'invalid', disabled && prefixCls + "--disabled", wrap && prefixCls + "--wrap", expandable && prefixCls + "--expandable");
|
|
175
197
|
return /*#__PURE__*/React__default['default'].createElement(ResizeDetector__default['default'], {
|
|
176
198
|
skipOnMount: false,
|
|
177
199
|
onResize: function onResize(w) {
|
|
@@ -195,7 +217,8 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
195
217
|
className: prefixCls + "__tags"
|
|
196
218
|
}, mergedTagList.map(function (option, index) {
|
|
197
219
|
return /*#__PURE__*/React__default['default'].createElement(MockTag, {
|
|
198
|
-
hidden: index > tagMaxCount,
|
|
220
|
+
hidden: wrap ? false : index > tagMaxCount,
|
|
221
|
+
maxWidth: maxTagWidth,
|
|
199
222
|
key: option.id,
|
|
200
223
|
prefixCls: prefixCls,
|
|
201
224
|
disabled: disabled,
|
|
@@ -220,16 +243,17 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
220
243
|
setSuffixWidth(w);
|
|
221
244
|
}
|
|
222
245
|
}
|
|
223
|
-
}, !!suffix || showClearableIcon && hover ||
|
|
246
|
+
}, !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React__default['default'].createElement("span", {
|
|
224
247
|
className: prefixCls + "__suffix"
|
|
225
|
-
},
|
|
226
|
-
className: classname.cx(prefixCls + "__tag--total")
|
|
227
|
-
|
|
248
|
+
}, showTagCount ? /*#__PURE__*/React__default['default'].createElement("span", {
|
|
249
|
+
className: classname.cx(prefixCls + "__tag--total"),
|
|
250
|
+
onClick: onExpand
|
|
251
|
+
}, "" + (tagCount > 99 ? '99+' : tagCount)) : null, showClearableIcon && hover ? /*#__PURE__*/React__default['default'].createElement("span", {
|
|
228
252
|
className: prefixCls + "__clear",
|
|
229
253
|
role: "button",
|
|
230
254
|
tabIndex: -1,
|
|
231
255
|
onClick: handleClear
|
|
232
|
-
}, /*#__PURE__*/React__default['default'].createElement(icons.CloseCircleFilled, null)) :
|
|
256
|
+
}, /*#__PURE__*/React__default['default'].createElement(icons.CloseCircleFilled, null)) : suffix) : null)));
|
|
233
257
|
});
|
|
234
258
|
|
|
235
259
|
if (env.__DEV__) {
|
|
@@ -253,6 +277,7 @@ function MockTag(_ref) {
|
|
|
253
277
|
onTagResize = _ref.onTagResize,
|
|
254
278
|
tryChangeValue = _ref.tryChangeValue,
|
|
255
279
|
displayRender = _ref.displayRender,
|
|
280
|
+
maxWidth = _ref.maxWidth,
|
|
256
281
|
_ref$hidden = _ref.hidden,
|
|
257
282
|
hidden = _ref$hidden === void 0 ? false : _ref$hidden;
|
|
258
283
|
var title = typeAssertion.isFunction(displayRender) ? displayRender(option) : true;
|
|
@@ -273,7 +298,9 @@ function MockTag(_ref) {
|
|
|
273
298
|
}
|
|
274
299
|
}, /*#__PURE__*/React__default['default'].createElement("span", {
|
|
275
300
|
className: prefixCls + "__tag",
|
|
276
|
-
style: hidden ? hiddenStyle :
|
|
301
|
+
style: hidden ? hiddenStyle : {
|
|
302
|
+
maxWidth: maxWidth
|
|
303
|
+
},
|
|
277
304
|
key: option.id
|
|
278
305
|
}, /*#__PURE__*/React__default['default'].createElement("span", {
|
|
279
306
|
className: prefixCls + "__tag-content"
|
|
@@ -285,7 +312,7 @@ function MockTag(_ref) {
|
|
|
285
312
|
var nextValue = value.filter(function (id) {
|
|
286
313
|
return id !== option.id;
|
|
287
314
|
});
|
|
288
|
-
tryChangeValue(nextValue);
|
|
315
|
+
tryChangeValue(nextValue, [option], false);
|
|
289
316
|
}
|
|
290
317
|
}, /*#__PURE__*/React__default['default'].createElement(icons.CloseOutlined, null)) : null)));
|
|
291
318
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagInputMock.js","sources":["../../src/TagInputMock.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","NOOP_ARRAY","TagInputMock","forwardRef","_a","ref","prefixCls","role","className","defaultValue","valueProp","value","onChange","placeholder","data","clearable","
|
|
1
|
+
{"version":3,"file":"TagInputMock.js","sources":["../../src/TagInputMock.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","NOOP_ARRAY","TagInputMock","forwardRef","_a","ref","prefixCls","role","className","defaultValue","valueProp","value","onChange","placeholder","data","disabled","clearable","focused","invalid","readOnly","size","appearance","wrap","expandable","suffix","tagWidth","displayRender","onMouseOver","onMouseLeave","onClear","onExpand","rest","useUncontrolledState","tryChangeValue","tagList","useMemo","map","id","find","item","title","tagCount","length","useState","containerWidth","setContainerWidth","mergedTagList","slice","Math","min","showTags","showTagCount","tagsWidth","setTagsWidth","getTagWidth","useCallback","index","suffixWidth","setSuffixWidth","tagMaxCount","setTagMaxCount","useLayoutEffect","isArrayNonEmpty","len","lastIndex","totalWidth","i","currentTagWidth","undefined","onClearLatest","useLatestCallback","handleClear","evt","stopPropagation","hover","setHover","trySetHover","hovered","showClearableIcon","maxTagWidth","cls","cx","React","ResizeDetector","skipOnMount","onResize","w","option","MockTag","hidden","maxWidth","key","onTagResize","prev","onClick","tabIndex","CloseCircleFilled","__DEV__","displayName","hiddenStyle","position","opacity","width","height","overflow","display","isFunction","closeable","style","nextValue","filter","CloseOutlined"],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tag-input {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1; }\n.hi-v4-tag-input__container {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n min-width: 160px;\n font-size: 14px;\n vertical-align: middle;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n border: 1px solid transparent;\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n padding: 4px 10px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: 32px;\n overflow: hidden;\n border-color: #d1d5db;\n border-color: var(--hi-v4-color-gray-300, #d1d5db);\n border-radius: 4px; }\n.hi-v4-tag-input__container:not(.disabled):hover {\n border-color: #4387f4;\n border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input__container:not(.disabled).focused {\n border-color: #4387f4;\n border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input__container.disabled {\n cursor: not-allowed;\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280);\n background-color: #f3f4f6;\n background-color: var(--hi-v4-color-gray-100, #f3f4f6); }\n.hi-v4-tag-input__container.disabled .hi-v4-tag-input__tag {\n background-color: #e5e7eb;\n background-color: var(--hi-v4-color-gray-200, #e5e7eb); }\n.hi-v4-tag-input__placeholder {\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280); }\n.hi-v4-tag-input__suffix {\n font-size: 16px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n min-width: 32px; }\n.hi-v4-tag-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 14px;\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tag-input__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input__value {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 22px;\n line-height: 22px; }\n.hi-v4-tag-input__tags {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n display: inline-block;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n white-space: nowrap;\n height: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin-top: -4px;\n position: relative; }\n.hi-v4-tag-input__tag, .hi-v4-tag-input__tag--left {\n display: inline-block;\n margin-right: 4px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n color: #333;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f3f4f6;\n background-color: var(--hi-v4-color-gray-100, #f3f4f6);\n border-radius: 4px; }\n.hi-v4-tag-input__tag--total {\n display: inline-block;\n margin-right: 6px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f0f5fe;\n background-color: var(--hi-v4-color-brandblue-100, #f0f5fe);\n color: #4387f4;\n color: var(--hi-v4-color-brandblue-500, #4387f4);\n border-radius: 4px;\n line-height: 22px;\n cursor: pointer; }\n.hi-v4-tag-input__tag {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-tag-input__tag-content {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-tag-input__tag-closed {\n margin-left: 8px;\n margin-left: var(--hi-v4-spacing-4, 8px);\n font-size: 12px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #8e8e8e;\n cursor: pointer; }\n.disabled .hi-v4-tag-input__tag-closed {\n cursor: not-allowed; }\n.hi-v4-tag-input__tag--left {\n margin: 0;\n max-width: 54px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle; }\n.hi-v4-tag-input--nowrap .hi-v4-tag-input__value {\n width: calc(100% - 64px);\n overflow-x: hidden; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__value {\n height: auto; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tags {\n white-space: normal;\n margin-top: -4px; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tag {\n margin-top: 4px; }\n.hi-v4-tag-input--expanded {\n position: relative; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand {\n position: absolute;\n top: 0;\n left: 0;\n height: auto;\n z-index: 1;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n min-width: 160px;\n font-size: 14px;\n vertical-align: middle;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n border: 1px solid transparent;\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n padding: 3px 0;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n min-height: 32px;\n overflow: hidden;\n border-radius: 4px;\n border-color: #4387f4;\n border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__value {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n max-height: 74px;\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n overflow: scroll;\n padding-left: 10px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tags {\n white-space: normal;\n margin-top: -4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tag {\n margin-top: 4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__suffix {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 4px 10px 4px 0;\n position: sticky;\n top: 0; }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tag-input-mock {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n min-width: 160px;\n font-size: 14px;\n vertical-align: middle;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n border: 1px solid transparent;\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n padding: 0 10px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: 32px;\n overflow: hidden;\n border-color: #d1d5db;\n border-color: var(--hi-v4-color-gray-300, #d1d5db);\n border-radius: 4px; }\n.hi-v4-tag-input-mock:not(.disabled):hover {\n border-color: #4387f4;\n border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input-mock:not(.disabled).focused {\n border-color: #4387f4;\n border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input-mock.disabled {\n cursor: not-allowed;\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280);\n background-color: #f3f4f6;\n background-color: var(--hi-v4-color-gray-100, #f3f4f6); }\n.hi-v4-tag-input-mock.disabled .hi-v4-tag-input-mock__tag {\n background-color: #e5e7eb;\n background-color: var(--hi-v4-color-gray-200, #e5e7eb); }\n.hi-v4-tag-input-mock__placeholder {\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280); }\n.hi-v4-tag-input-mock__suffix {\n font-size: 16px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n min-width: 32px;\n -ms-flex-negative: 0;\n flex-shrink: 0; }\n.hi-v4-tag-input-mock__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 14px;\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tag-input-mock__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input-mock__value {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 22px;\n line-height: 22px;\n -ms-flex-negative: 1;\n flex-shrink: 1; }\n.hi-v4-tag-input-mock__tags {\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden; }\n.hi-v4-tag-input-mock__tag--total {\n display: inline-block;\n margin-right: 6px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f0f5fe;\n background-color: var(--hi-v4-color-brandblue-100, #f0f5fe);\n color: #4387f4;\n color: var(--hi-v4-color-brandblue-500, #4387f4);\n border-radius: 4px;\n line-height: 22px;\n cursor: pointer; }\n.hi-v4-tag-input-mock__tag {\n margin-right: 4px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n color: #333;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f3f4f6;\n background-color: var(--hi-v4-color-gray-100, #f3f4f6);\n border-radius: 4px;\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-flex: 0;\n -ms-flex: none;\n flex: none;\n max-width: 100%;\n height: 24px;\n margin-top: 2px;\n margin-bottom: 2px;\n line-height: 22px; }\n.hi-v4-tag-input-mock__tag-content {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-tag-input-mock__tag-closed {\n margin-left: 8px;\n margin-left: var(--hi-v4-spacing-4, 8px);\n font-size: 12px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #8e8e8e;\n cursor: pointer; }\n.disabled .hi-v4-tag-input-mock__tag-closed {\n cursor: not-allowed; }\n";
|
|
15
|
+
var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tag-input {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1; }\n.hi-v4-tag-input__container {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n min-width: 160px;\n font-size: 14px;\n vertical-align: middle;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n border: 1px solid transparent;\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n padding: 4px 10px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: 32px;\n overflow: hidden;\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8);\n border-radius: 4px; }\n.hi-v4-tag-input__container:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input__container:not(.disabled).focused {\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input__container.disabled {\n cursor: not-allowed;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input__container.disabled .hi-v4-tag-input__tag {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n.hi-v4-tag-input__placeholder {\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tag-input__suffix {\n font-size: 16px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n min-width: 32px; }\n.hi-v4-tag-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 14px;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tag-input__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input__value {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 22px;\n line-height: 22px; }\n.hi-v4-tag-input__tags {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n display: inline-block;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n white-space: nowrap;\n height: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin-top: -4px;\n position: relative; }\n.hi-v4-tag-input__tag, .hi-v4-tag-input__tag--left {\n display: inline-block;\n margin-right: 4px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n color: #333;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7);\n border-radius: 4px; }\n.hi-v4-tag-input__tag--total {\n display: inline-block;\n margin-right: 6px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #bde2ff;\n background-color: var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-radius: 4px;\n line-height: 22px;\n cursor: inherit; }\n.hi-v4-tag-input__tag {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-tag-input__tag-content {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-tag-input__tag-closed {\n margin-left: 8px;\n margin-left: var(--hi-v4-spacing-4, 8px);\n font-size: 12px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #8e8e8e;\n cursor: pointer; }\n.disabled .hi-v4-tag-input__tag-closed {\n cursor: not-allowed; }\n.hi-v4-tag-input__tag--left {\n margin: 0;\n max-width: 54px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle; }\n.hi-v4-tag-input--nowrap .hi-v4-tag-input__value {\n width: calc(100% - 64px);\n overflow-x: hidden; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__value {\n height: auto; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tags {\n white-space: normal;\n margin-top: -4px; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tag {\n margin-top: 4px; }\n.hi-v4-tag-input--expanded {\n position: relative; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand {\n position: absolute;\n top: 0;\n left: 0;\n height: auto;\n z-index: 1;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n min-width: 160px;\n font-size: 14px;\n vertical-align: middle;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n border: 1px solid transparent;\n background-color: use-color-statc(\"white\");\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n padding: 3px 0;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n min-height: 32px;\n overflow: hidden;\n border-radius: 4px;\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__value {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n max-height: 74px;\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n overflow: scroll;\n padding-left: 10px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tags {\n white-space: normal;\n margin-top: -4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tag {\n margin-top: 4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__suffix {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 4px 10px 4px 0;\n position: sticky;\n top: 0; }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tag-input-mock {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n overflow: hidden;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n width: 100%;\n height: auto;\n z-index: auto;\n font-size: inherit;\n line-height: inherit;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock:not(.hi-v4-tag-input-mock--disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-tag-input-mock:not(.hi-v4-tag-input-mock--disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-tag-input-mock.hi-v4-tag-input-mock--disabled {\n cursor: not-allowed; }\n.hi-v4-tag-input-mock.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n.hi-v4-tag-input-mock--wrap .hi-v4-tag-input-mock__value {\n height: auto; }\n.hi-v4-tag-input-mock--wrap .hi-v4-tag-input-mock__tags {\n white-space: normal; }\n.hi-v4-tag-input-mock__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n padding: 0;\n text-align: center; }\n.hi-v4-tag-input-mock__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n text-align: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1)); }\n.hi-v4-tag-input-mock__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input-mock__tags {\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden; }\n.hi-v4-tag-input-mock__tag--total {\n display: inline-block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: inherit;\n margin-left: 8px;\n margin-left: var(--hi-v4-spacing-4, 8px);\n margin-right: 6px;\n margin-right: var(--hi-v4-spacing-3, 6px);\n padding: 0 8px;\n padding: 0 var(--hi-v4-spacing-4, 8px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock__suffix, .hi-v4-tag-input-mock__placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-tag-input-mock__tag, .hi-v4-tag-input-mock__placeholder {\n margin-top: 2px;\n margin-top: var(--hi-v4-spacing-1, 2px);\n margin-bottom: 2px;\n margin-bottom: var(--hi-v4-spacing-1, 2px); }\n.hi-v4-tag-input-mock__tag {\n max-width: 100%;\n margin-right: 4px;\n margin-right: var(--hi-v4-spacing-2, 4px);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n padding: 0 var(--hi-v4-spacing-4, 8px);\n vertical-align: middle;\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-flex: 0;\n -ms-flex: none;\n flex: none;\n line-height: inherit; }\n.hi-v4-tag-input-mock__tag-content {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-tag-input-mock__tag-closed {\n margin-left: 4px;\n margin-left: var(--hi-v4-spacing-2, 4px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n cursor: pointer; }\n.hi-v4-tag-input-mock__tag-closed:hover {\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed {\n cursor: not-allowed; }\n.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed:hover {\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tag-input-mock--size-sm {\n height: 24px;\n height: var(--hi-v4-height-sm, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 0 calc(12px - 1px);\n padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__tag,\n .hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__placeholder {\n margin-top: 1px;\n margin-bottom: 1px; }\n.hi-v4-tag-input-mock--size-md {\n height: 32px;\n height: var(--hi-v4-height-normal, 32px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem;\n line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 2px calc(12px - 1px);\n padding: 2px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-tag-input-mock--size-lg {\n height: 40px;\n height: var(--hi-v4-height-lg, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem;\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 5px calc(12px - 1px);\n padding: 5px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-tag-input-mock--appearance-line {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-tag-input-mock--appearance-unset {\n width: auto;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n border-color: transparent; }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-tag-input-mock--appearance-filled {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag--total {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled, .hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n";
|
|
16
16
|
|
|
17
17
|
var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
|
|
18
18
|
|
package/lib/esm/TagInput.js
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import { __rest } from 'tslib';
|
|
11
|
-
import React, { forwardRef, useRef,
|
|
11
|
+
import React, { forwardRef, useRef, useMemo, useCallback, useState } from 'react';
|
|
12
12
|
import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
13
13
|
import { __DEV__ } from '@hi-ui/env';
|
|
14
14
|
import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
|
|
@@ -42,7 +42,7 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
42
42
|
_a$wrap = _a.wrap,
|
|
43
43
|
wrap = _a$wrap === void 0 ? true : _a$wrap,
|
|
44
44
|
_a$clearable = _a.clearable,
|
|
45
|
-
clearable = _a$clearable === void 0 ?
|
|
45
|
+
clearable = _a$clearable === void 0 ? true : _a$clearable,
|
|
46
46
|
_a$disabled = _a.disabled,
|
|
47
47
|
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
|
48
48
|
suffix = _a.suffix,
|
|
@@ -63,12 +63,6 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
63
63
|
tagMaxWidth = _useTagInput[0];
|
|
64
64
|
|
|
65
65
|
var onClearLatest = useLatestCallback(onClear);
|
|
66
|
-
var handleClear = useCallback(function (evt) {
|
|
67
|
-
if (disabled) return;
|
|
68
|
-
evt.stopPropagation();
|
|
69
|
-
tryChangeValue(NOOP_ARRAY);
|
|
70
|
-
onClearLatest();
|
|
71
|
-
}, [tryChangeValue, disabled, onClearLatest]);
|
|
72
66
|
var tagList = useMemo(function () {
|
|
73
67
|
return value.map(function (id) {
|
|
74
68
|
return data.find(function (item) {
|
|
@@ -79,6 +73,12 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
79
73
|
};
|
|
80
74
|
});
|
|
81
75
|
}, [value, data]);
|
|
76
|
+
var handleClear = useCallback(function (evt) {
|
|
77
|
+
if (disabled) return;
|
|
78
|
+
evt.stopPropagation();
|
|
79
|
+
tryChangeValue(NOOP_ARRAY, tagList, false);
|
|
80
|
+
onClearLatest();
|
|
81
|
+
}, [tryChangeValue, disabled, onClearLatest, tagList]);
|
|
82
82
|
|
|
83
83
|
var _useState = useState(false),
|
|
84
84
|
hover = _useState[0],
|
|
@@ -143,7 +143,7 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
143
143
|
var nextValue = [].concat(value).filter(function (id) {
|
|
144
144
|
return id !== option.id;
|
|
145
145
|
});
|
|
146
|
-
tryChangeValue(nextValue);
|
|
146
|
+
tryChangeValue(nextValue, [option], false);
|
|
147
147
|
}
|
|
148
148
|
}, /*#__PURE__*/React.createElement(CloseOutlined, null)) : null);
|
|
149
149
|
}))) : /*#__PURE__*/React.createElement("span", {
|
package/lib/esm/TagInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagInput.js","sources":["../../src/TagInput.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","NOOP_ARRAY","TagInput","forwardRef","_a","ref","prefixCls","role","className","defaultValue","valueProp","value","onChange","placeholder","data","wrap","clearable","disabled","suffix","displayRender","onClick","onMouseOver","onMouseLeave","onClear","rest","useUncontrolledState","tryChangeValue","tagInputRef","useRef","useTagInput","tagMaxWidth","onClearLatest","useLatestCallback","
|
|
1
|
+
{"version":3,"file":"TagInput.js","sources":["../../src/TagInput.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","NOOP_ARRAY","TagInput","forwardRef","_a","ref","prefixCls","role","className","defaultValue","valueProp","value","onChange","placeholder","data","wrap","clearable","disabled","suffix","displayRender","onClick","onMouseOver","onMouseLeave","onClear","rest","useUncontrolledState","tryChangeValue","tagInputRef","useRef","useTagInput","tagMaxWidth","onClearLatest","useLatestCallback","tagList","useMemo","map","id","find","item","title","handleClear","useCallback","evt","stopPropagation","useState","hover","setHover","trySetHover","hovered","tagCount","length","showClearableIcon","showTagCount","expanded","setExpanded","useOutsideClick","handleExpand","cls","cx","React","useMergeRefs","option","closeable","key","style","maxWidth","nextValue","filter","CloseOutlined","tabIndex","CloseCircleFilled","__DEV__","displayName"],"mappings":"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"}
|
package/lib/esm/TagInputMock.js
CHANGED
|
@@ -38,10 +38,24 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
38
38
|
placeholder = _a.placeholder,
|
|
39
39
|
_a$data = _a.data,
|
|
40
40
|
data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
|
|
41
|
-
_a$clearable = _a.clearable,
|
|
42
|
-
clearable = _a$clearable === void 0 ? false : _a$clearable,
|
|
43
41
|
_a$disabled = _a.disabled,
|
|
44
42
|
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
|
43
|
+
_a$clearable = _a.clearable,
|
|
44
|
+
clearable = _a$clearable === void 0 ? true : _a$clearable,
|
|
45
|
+
_a$focused = _a.focused,
|
|
46
|
+
focused = _a$focused === void 0 ? false : _a$focused,
|
|
47
|
+
_a$invalid = _a.invalid,
|
|
48
|
+
invalid = _a$invalid === void 0 ? false : _a$invalid,
|
|
49
|
+
_a$readOnly = _a.readOnly,
|
|
50
|
+
readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
|
|
51
|
+
_a$size = _a.size,
|
|
52
|
+
size = _a$size === void 0 ? 'md' : _a$size,
|
|
53
|
+
_a$appearance = _a.appearance,
|
|
54
|
+
appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
|
|
55
|
+
_a$wrap = _a.wrap,
|
|
56
|
+
wrap = _a$wrap === void 0 ? false : _a$wrap,
|
|
57
|
+
_a$expandable = _a.expandable,
|
|
58
|
+
expandable = _a$expandable === void 0 ? false : _a$expandable,
|
|
45
59
|
suffix = _a.suffix,
|
|
46
60
|
_a$tagWidth = _a.tagWidth,
|
|
47
61
|
tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
|
|
@@ -49,7 +63,8 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
49
63
|
_onMouseOver = _a.onMouseOver,
|
|
50
64
|
_onMouseLeave = _a.onMouseLeave,
|
|
51
65
|
onClear = _a.onClear,
|
|
52
|
-
|
|
66
|
+
onExpand = _a.onExpand,
|
|
67
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "wrap", "expandable", "suffix", "tagWidth", "displayRender", "onMouseOver", "onMouseLeave", "onClear", "onExpand"]);
|
|
53
68
|
|
|
54
69
|
var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
|
|
55
70
|
value = _useUncontrolledState[0],
|
|
@@ -73,9 +88,14 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
73
88
|
setContainerWidth = _useState[1];
|
|
74
89
|
|
|
75
90
|
var mergedTagList = useMemo(function () {
|
|
91
|
+
if (wrap) {
|
|
92
|
+
return tagList;
|
|
93
|
+
}
|
|
94
|
+
|
|
76
95
|
return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
|
|
77
|
-
}, [tagList, tagWidth, containerWidth]);
|
|
96
|
+
}, [tagList, tagWidth, containerWidth, wrap]);
|
|
78
97
|
var showTags = mergedTagList.length > 0;
|
|
98
|
+
var showTagCount = !wrap && showTags;
|
|
79
99
|
|
|
80
100
|
var _useState2 = useState({}),
|
|
81
101
|
tagsWidth = _useState2[0],
|
|
@@ -122,17 +142,18 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
122
142
|
}
|
|
123
143
|
} else {
|
|
124
144
|
tagMaxCount = 0;
|
|
125
|
-
}
|
|
145
|
+
} // 保底要展示 1 个
|
|
146
|
+
|
|
126
147
|
|
|
127
|
-
setTagMaxCount(tagMaxCount);
|
|
148
|
+
setTagMaxCount(isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount);
|
|
128
149
|
}, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
|
|
129
150
|
var onClearLatest = useLatestCallback(onClear);
|
|
130
151
|
var handleClear = useCallback(function (evt) {
|
|
131
152
|
if (disabled) return;
|
|
132
153
|
evt.stopPropagation();
|
|
133
|
-
tryChangeValue(NOOP_ARRAY);
|
|
154
|
+
tryChangeValue(NOOP_ARRAY, tagList, false);
|
|
134
155
|
onClearLatest();
|
|
135
|
-
}, [tryChangeValue, disabled, onClearLatest]);
|
|
156
|
+
}, [tryChangeValue, disabled, onClearLatest, tagList]);
|
|
136
157
|
|
|
137
158
|
var _useState5 = useState(false),
|
|
138
159
|
hover = _useState5[0],
|
|
@@ -144,7 +165,8 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
144
165
|
}, [disabled]); // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
|
|
145
166
|
|
|
146
167
|
var showClearableIcon = clearable && showTags && !disabled;
|
|
147
|
-
var
|
|
168
|
+
var maxTagWidth = containerWidth - suffixWidth;
|
|
169
|
+
var cls = cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", readOnly && 'readonly', invalid && 'invalid', disabled && prefixCls + "--disabled", wrap && prefixCls + "--wrap", expandable && prefixCls + "--expandable");
|
|
148
170
|
return /*#__PURE__*/React.createElement(ResizeDetector, {
|
|
149
171
|
skipOnMount: false,
|
|
150
172
|
onResize: function onResize(w) {
|
|
@@ -168,7 +190,8 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
168
190
|
className: prefixCls + "__tags"
|
|
169
191
|
}, mergedTagList.map(function (option, index) {
|
|
170
192
|
return /*#__PURE__*/React.createElement(MockTag, {
|
|
171
|
-
hidden: index > tagMaxCount,
|
|
193
|
+
hidden: wrap ? false : index > tagMaxCount,
|
|
194
|
+
maxWidth: maxTagWidth,
|
|
172
195
|
key: option.id,
|
|
173
196
|
prefixCls: prefixCls,
|
|
174
197
|
disabled: disabled,
|
|
@@ -193,16 +216,17 @@ var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
193
216
|
setSuffixWidth(w);
|
|
194
217
|
}
|
|
195
218
|
}
|
|
196
|
-
}, !!suffix || showClearableIcon && hover ||
|
|
219
|
+
}, !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React.createElement("span", {
|
|
197
220
|
className: prefixCls + "__suffix"
|
|
198
|
-
},
|
|
199
|
-
className: cx(prefixCls + "__tag--total")
|
|
200
|
-
|
|
221
|
+
}, showTagCount ? /*#__PURE__*/React.createElement("span", {
|
|
222
|
+
className: cx(prefixCls + "__tag--total"),
|
|
223
|
+
onClick: onExpand
|
|
224
|
+
}, "" + (tagCount > 99 ? '99+' : tagCount)) : null, showClearableIcon && hover ? /*#__PURE__*/React.createElement("span", {
|
|
201
225
|
className: prefixCls + "__clear",
|
|
202
226
|
role: "button",
|
|
203
227
|
tabIndex: -1,
|
|
204
228
|
onClick: handleClear
|
|
205
|
-
}, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) :
|
|
229
|
+
}, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : suffix) : null)));
|
|
206
230
|
});
|
|
207
231
|
|
|
208
232
|
if (__DEV__) {
|
|
@@ -226,6 +250,7 @@ function MockTag(_ref) {
|
|
|
226
250
|
onTagResize = _ref.onTagResize,
|
|
227
251
|
tryChangeValue = _ref.tryChangeValue,
|
|
228
252
|
displayRender = _ref.displayRender,
|
|
253
|
+
maxWidth = _ref.maxWidth,
|
|
229
254
|
_ref$hidden = _ref.hidden,
|
|
230
255
|
hidden = _ref$hidden === void 0 ? false : _ref$hidden;
|
|
231
256
|
var title = isFunction(displayRender) ? displayRender(option) : true;
|
|
@@ -246,7 +271,9 @@ function MockTag(_ref) {
|
|
|
246
271
|
}
|
|
247
272
|
}, /*#__PURE__*/React.createElement("span", {
|
|
248
273
|
className: prefixCls + "__tag",
|
|
249
|
-
style: hidden ? hiddenStyle :
|
|
274
|
+
style: hidden ? hiddenStyle : {
|
|
275
|
+
maxWidth: maxWidth
|
|
276
|
+
},
|
|
250
277
|
key: option.id
|
|
251
278
|
}, /*#__PURE__*/React.createElement("span", {
|
|
252
279
|
className: prefixCls + "__tag-content"
|
|
@@ -258,7 +285,7 @@ function MockTag(_ref) {
|
|
|
258
285
|
var nextValue = value.filter(function (id) {
|
|
259
286
|
return id !== option.id;
|
|
260
287
|
});
|
|
261
|
-
tryChangeValue(nextValue);
|
|
288
|
+
tryChangeValue(nextValue, [option], false);
|
|
262
289
|
}
|
|
263
290
|
}, /*#__PURE__*/React.createElement(CloseOutlined, null)) : null)));
|
|
264
291
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagInputMock.js","sources":["../../src/TagInputMock.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","NOOP_ARRAY","TagInputMock","forwardRef","_a","ref","prefixCls","role","className","defaultValue","valueProp","value","onChange","placeholder","data","clearable","
|
|
1
|
+
{"version":3,"file":"TagInputMock.js","sources":["../../src/TagInputMock.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","NOOP_ARRAY","TagInputMock","forwardRef","_a","ref","prefixCls","role","className","defaultValue","valueProp","value","onChange","placeholder","data","disabled","clearable","focused","invalid","readOnly","size","appearance","wrap","expandable","suffix","tagWidth","displayRender","onMouseOver","onMouseLeave","onClear","onExpand","rest","useUncontrolledState","tryChangeValue","tagList","useMemo","map","id","find","item","title","tagCount","length","useState","containerWidth","setContainerWidth","mergedTagList","slice","Math","min","showTags","showTagCount","tagsWidth","setTagsWidth","getTagWidth","useCallback","index","suffixWidth","setSuffixWidth","tagMaxCount","setTagMaxCount","useLayoutEffect","isArrayNonEmpty","len","lastIndex","totalWidth","i","currentTagWidth","undefined","onClearLatest","useLatestCallback","handleClear","evt","stopPropagation","hover","setHover","trySetHover","hovered","showClearableIcon","maxTagWidth","cls","cx","React","ResizeDetector","skipOnMount","onResize","w","option","MockTag","hidden","maxWidth","key","onTagResize","prev","onClick","tabIndex","CloseCircleFilled","__DEV__","displayName","hiddenStyle","position","opacity","width","height","overflow","display","isFunction","closeable","style","nextValue","filter","CloseOutlined"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
|
-
var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tag-input {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1; }\n.hi-v4-tag-input__container {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n min-width: 160px;\n font-size: 14px;\n vertical-align: middle;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n border: 1px solid transparent;\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n padding: 4px 10px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: 32px;\n overflow: hidden;\n border-color: #d1d5db;\n border-color: var(--hi-v4-color-gray-300, #d1d5db);\n border-radius: 4px; }\n.hi-v4-tag-input__container:not(.disabled):hover {\n border-color: #4387f4;\n border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input__container:not(.disabled).focused {\n border-color: #4387f4;\n border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input__container.disabled {\n cursor: not-allowed;\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280);\n background-color: #f3f4f6;\n background-color: var(--hi-v4-color-gray-100, #f3f4f6); }\n.hi-v4-tag-input__container.disabled .hi-v4-tag-input__tag {\n background-color: #e5e7eb;\n background-color: var(--hi-v4-color-gray-200, #e5e7eb); }\n.hi-v4-tag-input__placeholder {\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280); }\n.hi-v4-tag-input__suffix {\n font-size: 16px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n min-width: 32px; }\n.hi-v4-tag-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 14px;\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tag-input__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input__value {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 22px;\n line-height: 22px; }\n.hi-v4-tag-input__tags {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n display: inline-block;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n white-space: nowrap;\n height: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin-top: -4px;\n position: relative; }\n.hi-v4-tag-input__tag, .hi-v4-tag-input__tag--left {\n display: inline-block;\n margin-right: 4px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n color: #333;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f3f4f6;\n background-color: var(--hi-v4-color-gray-100, #f3f4f6);\n border-radius: 4px; }\n.hi-v4-tag-input__tag--total {\n display: inline-block;\n margin-right: 6px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f0f5fe;\n background-color: var(--hi-v4-color-brandblue-100, #f0f5fe);\n color: #4387f4;\n color: var(--hi-v4-color-brandblue-500, #4387f4);\n border-radius: 4px;\n line-height: 22px;\n cursor: pointer; }\n.hi-v4-tag-input__tag {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-tag-input__tag-content {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-tag-input__tag-closed {\n margin-left: 8px;\n margin-left: var(--hi-v4-spacing-4, 8px);\n font-size: 12px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #8e8e8e;\n cursor: pointer; }\n.disabled .hi-v4-tag-input__tag-closed {\n cursor: not-allowed; }\n.hi-v4-tag-input__tag--left {\n margin: 0;\n max-width: 54px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle; }\n.hi-v4-tag-input--nowrap .hi-v4-tag-input__value {\n width: calc(100% - 64px);\n overflow-x: hidden; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__value {\n height: auto; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tags {\n white-space: normal;\n margin-top: -4px; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tag {\n margin-top: 4px; }\n.hi-v4-tag-input--expanded {\n position: relative; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand {\n position: absolute;\n top: 0;\n left: 0;\n height: auto;\n z-index: 1;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n min-width: 160px;\n font-size: 14px;\n vertical-align: middle;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n border: 1px solid transparent;\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n padding: 3px 0;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n min-height: 32px;\n overflow: hidden;\n border-radius: 4px;\n border-color: #4387f4;\n border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__value {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n max-height: 74px;\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n overflow: scroll;\n padding-left: 10px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tags {\n white-space: normal;\n margin-top: -4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tag {\n margin-top: 4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__suffix {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 4px 10px 4px 0;\n position: sticky;\n top: 0; }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tag-input-mock {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n min-width: 160px;\n font-size: 14px;\n vertical-align: middle;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n border: 1px solid transparent;\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n padding: 0 10px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: 32px;\n overflow: hidden;\n border-color: #d1d5db;\n border-color: var(--hi-v4-color-gray-300, #d1d5db);\n border-radius: 4px; }\n.hi-v4-tag-input-mock:not(.disabled):hover {\n border-color: #4387f4;\n border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input-mock:not(.disabled).focused {\n border-color: #4387f4;\n border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input-mock.disabled {\n cursor: not-allowed;\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280);\n background-color: #f3f4f6;\n background-color: var(--hi-v4-color-gray-100, #f3f4f6); }\n.hi-v4-tag-input-mock.disabled .hi-v4-tag-input-mock__tag {\n background-color: #e5e7eb;\n background-color: var(--hi-v4-color-gray-200, #e5e7eb); }\n.hi-v4-tag-input-mock__placeholder {\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280); }\n.hi-v4-tag-input-mock__suffix {\n font-size: 16px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n min-width: 32px;\n -ms-flex-negative: 0;\n flex-shrink: 0; }\n.hi-v4-tag-input-mock__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 14px;\n color: #6b7280;\n color: var(--hi-v4-color-gray-500, #6b7280);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tag-input-mock__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input-mock__value {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 22px;\n line-height: 22px;\n -ms-flex-negative: 1;\n flex-shrink: 1; }\n.hi-v4-tag-input-mock__tags {\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden; }\n.hi-v4-tag-input-mock__tag--total {\n display: inline-block;\n margin-right: 6px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f0f5fe;\n background-color: var(--hi-v4-color-brandblue-100, #f0f5fe);\n color: #4387f4;\n color: var(--hi-v4-color-brandblue-500, #4387f4);\n border-radius: 4px;\n line-height: 22px;\n cursor: pointer; }\n.hi-v4-tag-input-mock__tag {\n margin-right: 4px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n color: #333;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f3f4f6;\n background-color: var(--hi-v4-color-gray-100, #f3f4f6);\n border-radius: 4px;\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-flex: 0;\n -ms-flex: none;\n flex: none;\n max-width: 100%;\n height: 24px;\n margin-top: 2px;\n margin-bottom: 2px;\n line-height: 22px; }\n.hi-v4-tag-input-mock__tag-content {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-tag-input-mock__tag-closed {\n margin-left: 8px;\n margin-left: var(--hi-v4-spacing-4, 8px);\n font-size: 12px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #8e8e8e;\n cursor: pointer; }\n.disabled .hi-v4-tag-input-mock__tag-closed {\n cursor: not-allowed; }\n";
|
|
10
|
+
var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tag-input {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1; }\n.hi-v4-tag-input__container {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n min-width: 160px;\n font-size: 14px;\n vertical-align: middle;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n border: 1px solid transparent;\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n padding: 4px 10px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: 32px;\n overflow: hidden;\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8);\n border-radius: 4px; }\n.hi-v4-tag-input__container:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input__container:not(.disabled).focused {\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input__container.disabled {\n cursor: not-allowed;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input__container.disabled .hi-v4-tag-input__tag {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n.hi-v4-tag-input__placeholder {\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tag-input__suffix {\n font-size: 16px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n min-width: 32px; }\n.hi-v4-tag-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 14px;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tag-input__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input__value {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 22px;\n line-height: 22px; }\n.hi-v4-tag-input__tags {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n display: inline-block;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n white-space: nowrap;\n height: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin-top: -4px;\n position: relative; }\n.hi-v4-tag-input__tag, .hi-v4-tag-input__tag--left {\n display: inline-block;\n margin-right: 4px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n color: #333;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7);\n border-radius: 4px; }\n.hi-v4-tag-input__tag--total {\n display: inline-block;\n margin-right: 6px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n vertical-align: middle;\n font-size: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #bde2ff;\n background-color: var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-radius: 4px;\n line-height: 22px;\n cursor: inherit; }\n.hi-v4-tag-input__tag {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-tag-input__tag-content {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-tag-input__tag-closed {\n margin-left: 8px;\n margin-left: var(--hi-v4-spacing-4, 8px);\n font-size: 12px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #8e8e8e;\n cursor: pointer; }\n.disabled .hi-v4-tag-input__tag-closed {\n cursor: not-allowed; }\n.hi-v4-tag-input__tag--left {\n margin: 0;\n max-width: 54px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle; }\n.hi-v4-tag-input--nowrap .hi-v4-tag-input__value {\n width: calc(100% - 64px);\n overflow-x: hidden; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__value {\n height: auto; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tags {\n white-space: normal;\n margin-top: -4px; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tag {\n margin-top: 4px; }\n.hi-v4-tag-input--expanded {\n position: relative; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand {\n position: absolute;\n top: 0;\n left: 0;\n height: auto;\n z-index: 1;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n min-width: 160px;\n font-size: 14px;\n vertical-align: middle;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n border: 1px solid transparent;\n background-color: use-color-statc(\"white\");\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n padding: 3px 0;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n min-height: 32px;\n overflow: hidden;\n border-radius: 4px;\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__value {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n max-height: 74px;\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n overflow: scroll;\n padding-left: 10px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tags {\n white-space: normal;\n margin-top: -4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tag {\n margin-top: 4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__suffix {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 4px 10px 4px 0;\n position: sticky;\n top: 0; }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tag-input-mock {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n overflow: hidden;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n width: 100%;\n height: auto;\n z-index: auto;\n font-size: inherit;\n line-height: inherit;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock:not(.hi-v4-tag-input-mock--disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-tag-input-mock:not(.hi-v4-tag-input-mock--disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-tag-input-mock.hi-v4-tag-input-mock--disabled {\n cursor: not-allowed; }\n.hi-v4-tag-input-mock.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n.hi-v4-tag-input-mock--wrap .hi-v4-tag-input-mock__value {\n height: auto; }\n.hi-v4-tag-input-mock--wrap .hi-v4-tag-input-mock__tags {\n white-space: normal; }\n.hi-v4-tag-input-mock__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n padding: 0;\n text-align: center; }\n.hi-v4-tag-input-mock__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n text-align: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1)); }\n.hi-v4-tag-input-mock__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input-mock__tags {\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden; }\n.hi-v4-tag-input-mock__tag--total {\n display: inline-block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: inherit;\n margin-left: 8px;\n margin-left: var(--hi-v4-spacing-4, 8px);\n margin-right: 6px;\n margin-right: var(--hi-v4-spacing-3, 6px);\n padding: 0 8px;\n padding: 0 var(--hi-v4-spacing-4, 8px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock__suffix, .hi-v4-tag-input-mock__placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-tag-input-mock__tag, .hi-v4-tag-input-mock__placeholder {\n margin-top: 2px;\n margin-top: var(--hi-v4-spacing-1, 2px);\n margin-bottom: 2px;\n margin-bottom: var(--hi-v4-spacing-1, 2px); }\n.hi-v4-tag-input-mock__tag {\n max-width: 100%;\n margin-right: 4px;\n margin-right: var(--hi-v4-spacing-2, 4px);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 8px;\n padding: 0 var(--hi-v4-spacing-4, 8px);\n vertical-align: middle;\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-flex: 0;\n -ms-flex: none;\n flex: none;\n line-height: inherit; }\n.hi-v4-tag-input-mock__tag-content {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-tag-input-mock__tag-closed {\n margin-left: 4px;\n margin-left: var(--hi-v4-spacing-2, 4px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n cursor: pointer; }\n.hi-v4-tag-input-mock__tag-closed:hover {\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed {\n cursor: not-allowed; }\n.hi-v4-tag-input-mock--disabled .hi-v4-tag-input-mock__tag-closed:hover {\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tag-input-mock--size-sm {\n height: 24px;\n height: var(--hi-v4-height-sm, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 0 calc(12px - 1px);\n padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__tag,\n .hi-v4-tag-input-mock--size-sm .hi-v4-tag-input-mock__placeholder {\n margin-top: 1px;\n margin-bottom: 1px; }\n.hi-v4-tag-input-mock--size-md {\n height: 32px;\n height: var(--hi-v4-height-normal, 32px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem;\n line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 2px calc(12px - 1px);\n padding: 2px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-tag-input-mock--size-lg {\n height: 40px;\n height: var(--hi-v4-height-lg, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem;\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 5px calc(12px - 1px);\n padding: 5px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-tag-input-mock--appearance-line {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-line:not(.hi-v4-tag-input-mock--disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-tag-input-mock--appearance-unset {\n width: auto;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n border-color: transparent; }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-unset:not(.hi-v4-tag-input-mock--disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-tag-input-mock--appearance-filled {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock--appearance-filled .hi-v4-tag-input-mock__tag--total {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover .hi-v4-tag-input-mock__tag--total {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled):hover.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n box-shadow: 0 0 0 2px var(--hi-v4-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n border-color: #237ffa;\n border-color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused .hi-v4-tag-input-mock__tag--total {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).focused.hi-v4-tag-input-mock--expandable .hi-v4-tag-input-mock__tag--total {\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n color: #237ffa;\n color: var(--hi-v4-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-tag-input-mock--appearance-filled:not(.hi-v4-tag-input-mock--disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n box-shadow: 0 0 0 2px var(--hi-v4-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled, .hi-v4-tag-input-mock--appearance-unset.hi-v4-tag-input-mock--disabled, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-tag-input-mock--appearance-line.hi-v4-tag-input-mock--disabled, .hi-v4-tag-input-mock--appearance-filled.hi-v4-tag-input-mock--disabled {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n";
|
|
11
11
|
|
|
12
12
|
var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
|
|
13
13
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TagInputOption } from './types';
|
|
3
|
-
import {
|
|
3
|
+
import { HiBaseAppearanceEnum, HiBaseHTMLFieldProps } from '@hi-ui/core';
|
|
4
4
|
/**
|
|
5
5
|
* TODO: What is TagInputMock
|
|
6
6
|
*/
|
|
7
7
|
export declare const TagInputMock: React.ForwardRefExoticComponent<TagInputMockProps & React.RefAttributes<HTMLDivElement | null>>;
|
|
8
|
-
export interface TagInputMockProps extends Omit<
|
|
8
|
+
export interface TagInputMockProps extends Omit<HiBaseHTMLFieldProps<'div'>, 'defaultValue' | 'onChange' | 'value'> {
|
|
9
9
|
/**
|
|
10
10
|
* 设置当前多选值
|
|
11
11
|
*/
|
|
@@ -17,7 +17,7 @@ export interface TagInputMockProps extends Omit<HiBaseHTMLProps<'div'>, 'default
|
|
|
17
17
|
/**
|
|
18
18
|
* 多选值改变时的回调
|
|
19
19
|
*/
|
|
20
|
-
onChange?: (values: React.ReactText[]) => void;
|
|
20
|
+
onChange?: (values: React.ReactText[], targetItem: TagInputOption[], shouldChecked: boolean) => void;
|
|
21
21
|
/**
|
|
22
22
|
* 是否可清空 boolean true | false true
|
|
23
23
|
*/
|
|
@@ -50,4 +50,32 @@ export interface TagInputMockProps extends Omit<HiBaseHTMLProps<'div'>, 'default
|
|
|
50
50
|
* 设置 tag 的默认宽度
|
|
51
51
|
*/
|
|
52
52
|
tagWidth?: number;
|
|
53
|
+
/**
|
|
54
|
+
* 是否聚焦
|
|
55
|
+
*/
|
|
56
|
+
focused?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* 开启输入框只读
|
|
59
|
+
*/
|
|
60
|
+
readOnly?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* 设置展现形式
|
|
63
|
+
*/
|
|
64
|
+
appearance?: HiBaseAppearanceEnum;
|
|
65
|
+
/**
|
|
66
|
+
* 设置输入框尺寸
|
|
67
|
+
*/
|
|
68
|
+
size?: 'sm' | 'md' | 'lg';
|
|
69
|
+
/**
|
|
70
|
+
* 是否开启换行全展示
|
|
71
|
+
*/
|
|
72
|
+
wrap?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* 开启展开
|
|
75
|
+
*/
|
|
76
|
+
expandable?: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* 展开时回调
|
|
79
|
+
*/
|
|
80
|
+
onExpand?: (evt: React.MouseEvent) => void;
|
|
53
81
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/tag-input",
|
|
3
|
-
"version": "4.0.0-
|
|
3
|
+
"version": "4.0.0-beta.2",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HIUI <mi-hiui@xiaomi.com>",
|
|
@@ -43,26 +43,26 @@
|
|
|
43
43
|
"url": "https://github.com/XiaoMi/hiui/issues"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@hi-ui/classname": "^4.0.0-
|
|
47
|
-
"@hi-ui/core": "^4.0.0-
|
|
48
|
-
"@hi-ui/core-css": "^4.0.0-
|
|
49
|
-
"@hi-ui/env": "^4.0.0-
|
|
50
|
-
"@hi-ui/icons": "^4.0.0-
|
|
51
|
-
"@hi-ui/type-assertion": "^4.0.0-
|
|
52
|
-
"@hi-ui/use-latest": "^4.0.0-
|
|
53
|
-
"@hi-ui/use-merge-refs": "^4.0.0-
|
|
54
|
-
"@hi-ui/use-outside-click": "^4.0.0-
|
|
55
|
-
"@hi-ui/use-uncontrolled-state": "^4.0.0-
|
|
46
|
+
"@hi-ui/classname": "^4.0.0-beta.0",
|
|
47
|
+
"@hi-ui/core": "^4.0.0-beta.1",
|
|
48
|
+
"@hi-ui/core-css": "^4.0.0-beta.1",
|
|
49
|
+
"@hi-ui/env": "^4.0.0-beta.0",
|
|
50
|
+
"@hi-ui/icons": "^4.0.0-beta.1",
|
|
51
|
+
"@hi-ui/type-assertion": "^4.0.0-beta.0",
|
|
52
|
+
"@hi-ui/use-latest": "^4.0.0-beta.0",
|
|
53
|
+
"@hi-ui/use-merge-refs": "^4.0.0-beta.0",
|
|
54
|
+
"@hi-ui/use-outside-click": "^4.0.0-beta.0",
|
|
55
|
+
"@hi-ui/use-uncontrolled-state": "^4.0.0-beta.0",
|
|
56
56
|
"react-resize-detector": "^6.7.6"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
|
-
"react": "
|
|
60
|
-
"react-dom": "
|
|
59
|
+
"react": ">=16.8.6",
|
|
60
|
+
"react-dom": ">=16.8.6"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@hi-ui/hi-build": "^4.0.0-
|
|
63
|
+
"@hi-ui/hi-build": "^4.0.0-beta.0",
|
|
64
64
|
"react": "^17.0.1",
|
|
65
65
|
"react-dom": "^17.0.1"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "e44279db28297930b5608023f96343780d1f4e1c"
|
|
68
68
|
}
|