@hi-ui/tag-input 4.0.0-alpha.1 → 4.0.0-alpha.13
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 +7 -2
- package/lib/cjs/TagInput.js.map +1 -1
- package/lib/cjs/TagInputMock.js +317 -0
- package/lib/cjs/TagInputMock.js.map +1 -0
- package/lib/cjs/index.js +3 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/esm/TagInput.js +6 -2
- package/lib/esm/TagInput.js.map +1 -1
- package/lib/esm/TagInputMock.js +290 -0
- package/lib/esm/TagInputMock.js.map +1 -0
- package/lib/esm/index.js +1 -0
- package/lib/esm/index.js.map +1 -1
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/types/TagInput.d.ts +6 -2
- package/lib/types/TagInputMock.d.ts +74 -0
- package/lib/types/index.d.ts +1 -0
- package/lib/types/use-tag-input-mock.d.ts +3 -0
- package/package.json +14 -11
package/lib/cjs/TagInput.js
CHANGED
@@ -33,6 +33,8 @@ var useTagInput = require('./use-tag-input.js');
|
|
33
33
|
|
34
34
|
var useOutsideClick = require('@hi-ui/use-outside-click');
|
35
35
|
|
36
|
+
var useLatest = require('@hi-ui/use-latest');
|
37
|
+
|
36
38
|
function _interopDefaultLegacy(e) {
|
37
39
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
38
40
|
'default': e
|
@@ -74,7 +76,8 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
74
76
|
onClick = _a.onClick,
|
75
77
|
_onMouseOver = _a.onMouseOver,
|
76
78
|
_onMouseLeave = _a.onMouseLeave,
|
77
|
-
|
79
|
+
onClear = _a.onClear,
|
80
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave", "onClear"]);
|
78
81
|
|
79
82
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
|
80
83
|
value = _useUncontrolledState[0],
|
@@ -85,11 +88,13 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
85
88
|
var _useTagInput = useTagInput.useTagInput(data, tagInputRef),
|
86
89
|
tagMaxWidth = _useTagInput[0];
|
87
90
|
|
91
|
+
var onClearLatest = useLatest.useLatestCallback(onClear);
|
88
92
|
var handleClear = React.useCallback(function (evt) {
|
89
93
|
if (disabled) return;
|
90
94
|
evt.stopPropagation();
|
91
95
|
tryChangeValue(NOOP_ARRAY);
|
92
|
-
|
96
|
+
onClearLatest();
|
97
|
+
}, [tryChangeValue, disabled, onClearLatest]);
|
93
98
|
var tagList = React.useMemo(function () {
|
94
99
|
return value.map(function (id) {
|
95
100
|
return data.find(function (item) {
|
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","rest","useUncontrolledState","tryChangeValue","tagInputRef","useRef","useTagInput","tagMaxWidth","handleClear","useCallback","evt","stopPropagation","tagList","useMemo","map","id","find","item","title","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":"
|
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","handleClear","useCallback","evt","stopPropagation","tagList","useMemo","map","id","find","item","title","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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"}
|
@@ -0,0 +1,317 @@
|
|
1
|
+
/** @LICENSE
|
2
|
+
* @hi-ui/tag-input
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/tag-input#readme
|
4
|
+
*
|
5
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
6
|
+
*
|
7
|
+
* This source code is licensed under the MIT license found in the
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
9
|
+
*/
|
10
|
+
'use strict';
|
11
|
+
|
12
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
13
|
+
|
14
|
+
Object.defineProperty(exports, '__esModule', {
|
15
|
+
value: true
|
16
|
+
});
|
17
|
+
|
18
|
+
var tslib = require('tslib');
|
19
|
+
|
20
|
+
var React = require('react');
|
21
|
+
|
22
|
+
var classname = require('@hi-ui/classname');
|
23
|
+
|
24
|
+
var env = require('@hi-ui/env');
|
25
|
+
|
26
|
+
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
27
|
+
|
28
|
+
var icons = require('@hi-ui/icons');
|
29
|
+
|
30
|
+
var useLatest = require('@hi-ui/use-latest');
|
31
|
+
|
32
|
+
var typeAssertion = require('@hi-ui/type-assertion');
|
33
|
+
|
34
|
+
var ResizeDetector = require('react-resize-detector');
|
35
|
+
|
36
|
+
function _interopDefaultLegacy(e) {
|
37
|
+
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
38
|
+
'default': e
|
39
|
+
};
|
40
|
+
}
|
41
|
+
|
42
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
43
|
+
|
44
|
+
var ResizeDetector__default = /*#__PURE__*/_interopDefaultLegacy(ResizeDetector);
|
45
|
+
|
46
|
+
var _role = 'tag-input-mock';
|
47
|
+
|
48
|
+
var _prefix = classname.getPrefixCls(_role);
|
49
|
+
|
50
|
+
var NOOP_ARRAY = [];
|
51
|
+
/**
|
52
|
+
* TODO: What is TagInputMock
|
53
|
+
*/
|
54
|
+
|
55
|
+
var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
56
|
+
var _a$prefixCls = _a.prefixCls,
|
57
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
58
|
+
_a$role = _a.role,
|
59
|
+
role = _a$role === void 0 ? _role : _a$role,
|
60
|
+
className = _a.className,
|
61
|
+
_a$defaultValue = _a.defaultValue,
|
62
|
+
defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
|
63
|
+
valueProp = _a.value,
|
64
|
+
onChange = _a.onChange,
|
65
|
+
placeholder = _a.placeholder,
|
66
|
+
_a$data = _a.data,
|
67
|
+
data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
|
68
|
+
_a$disabled = _a.disabled,
|
69
|
+
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
70
|
+
_a$clearable = _a.clearable,
|
71
|
+
clearable = _a$clearable === void 0 ? false : _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 ? 'outline' : _a$appearance,
|
82
|
+
_a$wrap = _a.wrap,
|
83
|
+
wrap = _a$wrap === void 0 ? false : _a$wrap,
|
84
|
+
suffix = _a.suffix,
|
85
|
+
_a$tagWidth = _a.tagWidth,
|
86
|
+
tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
|
87
|
+
displayRender = _a.displayRender,
|
88
|
+
_onMouseOver = _a.onMouseOver,
|
89
|
+
_onMouseLeave = _a.onMouseLeave,
|
90
|
+
onClear = _a.onClear,
|
91
|
+
onExpand = _a.onExpand,
|
92
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "wrap", "suffix", "tagWidth", "displayRender", "onMouseOver", "onMouseLeave", "onClear", "onExpand"]);
|
93
|
+
|
94
|
+
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
|
95
|
+
value = _useUncontrolledState[0],
|
96
|
+
tryChangeValue = _useUncontrolledState[1];
|
97
|
+
|
98
|
+
var tagList = React.useMemo(function () {
|
99
|
+
return value.map(function (id) {
|
100
|
+
return data.find(function (item) {
|
101
|
+
return item.id === id;
|
102
|
+
}) || {
|
103
|
+
id: id,
|
104
|
+
title: id
|
105
|
+
};
|
106
|
+
});
|
107
|
+
}, [value, data]);
|
108
|
+
var tagCount = tagList.length;
|
109
|
+
|
110
|
+
var _useState = React.useState(),
|
111
|
+
_useState$ = _useState[0],
|
112
|
+
containerWidth = _useState$ === void 0 ? 0 : _useState$,
|
113
|
+
setContainerWidth = _useState[1];
|
114
|
+
|
115
|
+
var mergedTagList = React.useMemo(function () {
|
116
|
+
if (wrap) {
|
117
|
+
return tagList;
|
118
|
+
}
|
119
|
+
|
120
|
+
return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
|
121
|
+
}, [tagList, tagWidth, containerWidth, wrap]);
|
122
|
+
var showTags = mergedTagList.length > 0;
|
123
|
+
var showTagCount = !wrap && showTags;
|
124
|
+
|
125
|
+
var _useState2 = React.useState({}),
|
126
|
+
tagsWidth = _useState2[0],
|
127
|
+
setTagsWidth = _useState2[1];
|
128
|
+
|
129
|
+
var getTagWidth = React.useCallback(function (index) {
|
130
|
+
return typeof mergedTagList[index] !== 'undefined' && tagsWidth[mergedTagList[index].id] || 0;
|
131
|
+
}, [tagsWidth, mergedTagList]);
|
132
|
+
|
133
|
+
var _useState3 = React.useState(0),
|
134
|
+
suffixWidth = _useState3[0],
|
135
|
+
setSuffixWidth = _useState3[1]; // TODO: 设置第一个 tagWidth 超出省略,预防无展示
|
136
|
+
// const [tagMaxWidth, setTagMaxWidth] = useState(0)
|
137
|
+
|
138
|
+
|
139
|
+
var _useState4 = React.useState(0),
|
140
|
+
tagMaxCount = _useState4[0],
|
141
|
+
setTagMaxCount = _useState4[1];
|
142
|
+
|
143
|
+
React.useLayoutEffect(function () {
|
144
|
+
var tagMaxCount = 0;
|
145
|
+
|
146
|
+
if (typeAssertion.isArrayNonEmpty(mergedTagList)) {
|
147
|
+
var len = mergedTagList.length;
|
148
|
+
var lastIndex = len - 1;
|
149
|
+
var totalWidth = suffixWidth;
|
150
|
+
|
151
|
+
for (var i = 0; i < len; ++i) {
|
152
|
+
var currentTagWidth = getTagWidth(i);
|
153
|
+
|
154
|
+
if (currentTagWidth === undefined) {
|
155
|
+
break;
|
156
|
+
}
|
157
|
+
|
158
|
+
totalWidth += currentTagWidth;
|
159
|
+
|
160
|
+
if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
|
161
|
+
tagMaxCount = lastIndex;
|
162
|
+
break;
|
163
|
+
} else if (totalWidth > containerWidth) {
|
164
|
+
tagMaxCount = i - 1;
|
165
|
+
break;
|
166
|
+
}
|
167
|
+
}
|
168
|
+
} else {
|
169
|
+
tagMaxCount = 0;
|
170
|
+
}
|
171
|
+
|
172
|
+
setTagMaxCount(tagMaxCount);
|
173
|
+
}, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
|
174
|
+
var onClearLatest = useLatest.useLatestCallback(onClear);
|
175
|
+
var handleClear = React.useCallback(function (evt) {
|
176
|
+
if (disabled) return;
|
177
|
+
evt.stopPropagation();
|
178
|
+
tryChangeValue(NOOP_ARRAY);
|
179
|
+
onClearLatest();
|
180
|
+
}, [tryChangeValue, disabled, onClearLatest]);
|
181
|
+
|
182
|
+
var _useState5 = React.useState(false),
|
183
|
+
hover = _useState5[0],
|
184
|
+
setHover = _useState5[1];
|
185
|
+
|
186
|
+
var trySetHover = React.useCallback(function (hovered) {
|
187
|
+
if (disabled) return;
|
188
|
+
setHover(hovered);
|
189
|
+
}, [disabled]);
|
190
|
+
var handleExpand = React.useCallback(function (evt) {
|
191
|
+
evt.stopPropagation();
|
192
|
+
onExpand === null || onExpand === void 0 ? void 0 : onExpand();
|
193
|
+
}, [onExpand]); // 在开启 clearable 下展示 清除内容按钮,可点击进行内容清楚
|
194
|
+
|
195
|
+
var showClearableIcon = clearable && showTags && !disabled;
|
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");
|
197
|
+
return /*#__PURE__*/React__default['default'].createElement(ResizeDetector__default['default'], {
|
198
|
+
skipOnMount: false,
|
199
|
+
onResize: function onResize(w) {
|
200
|
+
if (w) {
|
201
|
+
setContainerWidth(w);
|
202
|
+
}
|
203
|
+
}
|
204
|
+
}, /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
|
205
|
+
ref: ref,
|
206
|
+
role: role,
|
207
|
+
className: cls,
|
208
|
+
onMouseOver: function onMouseOver(evt) {
|
209
|
+
trySetHover(true);
|
210
|
+
_onMouseOver === null || _onMouseOver === void 0 ? void 0 : _onMouseOver(evt);
|
211
|
+
},
|
212
|
+
onMouseLeave: function onMouseLeave(evt) {
|
213
|
+
trySetHover(false);
|
214
|
+
_onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(evt);
|
215
|
+
}
|
216
|
+
}, rest), showTags ? /*#__PURE__*/React__default['default'].createElement("span", {
|
217
|
+
className: prefixCls + "__tags"
|
218
|
+
}, mergedTagList.map(function (option, index) {
|
219
|
+
return /*#__PURE__*/React__default['default'].createElement(MockTag, {
|
220
|
+
hidden: wrap ? false : index > tagMaxCount,
|
221
|
+
key: option.id,
|
222
|
+
prefixCls: prefixCls,
|
223
|
+
disabled: disabled,
|
224
|
+
option: option,
|
225
|
+
value: value,
|
226
|
+
displayRender: displayRender,
|
227
|
+
tryChangeValue: tryChangeValue,
|
228
|
+
onTagResize: function onTagResize(id, w) {
|
229
|
+
return setTagsWidth(function (prev) {
|
230
|
+
var _Object$assign;
|
231
|
+
|
232
|
+
return Object.assign(Object.assign({}, prev), (_Object$assign = {}, _Object$assign[id] = w, _Object$assign));
|
233
|
+
});
|
234
|
+
}
|
235
|
+
});
|
236
|
+
})) : /*#__PURE__*/React__default['default'].createElement("span", {
|
237
|
+
className: prefixCls + "__placeholder"
|
238
|
+
}, placeholder), /*#__PURE__*/React__default['default'].createElement(ResizeDetector__default['default'], {
|
239
|
+
skipOnMount: false,
|
240
|
+
onResize: function onResize(w) {
|
241
|
+
if (w) {
|
242
|
+
setSuffixWidth(w);
|
243
|
+
}
|
244
|
+
}
|
245
|
+
}, !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React__default['default'].createElement("span", {
|
246
|
+
className: prefixCls + "__suffix"
|
247
|
+
}, showTagCount ? /*#__PURE__*/React__default['default'].createElement("span", {
|
248
|
+
className: classname.cx(prefixCls + "__tag--total"),
|
249
|
+
onClick: handleExpand
|
250
|
+
}, "" + (tagCount > 99 ? '99+' : tagCount)) : null, showClearableIcon && hover ? /*#__PURE__*/React__default['default'].createElement("span", {
|
251
|
+
className: prefixCls + "__clear",
|
252
|
+
role: "button",
|
253
|
+
tabIndex: -1,
|
254
|
+
onClick: handleClear
|
255
|
+
}, /*#__PURE__*/React__default['default'].createElement(icons.CloseCircleFilled, null)) : suffix) : null)));
|
256
|
+
});
|
257
|
+
|
258
|
+
if (env.__DEV__) {
|
259
|
+
TagInputMock.displayName = 'TagInputMock';
|
260
|
+
}
|
261
|
+
|
262
|
+
var hiddenStyle = {
|
263
|
+
position: 'absolute',
|
264
|
+
opacity: 0,
|
265
|
+
width: 0,
|
266
|
+
height: 0,
|
267
|
+
overflow: 'hidden',
|
268
|
+
display: 'none'
|
269
|
+
};
|
270
|
+
|
271
|
+
function MockTag(_ref) {
|
272
|
+
var prefixCls = _ref.prefixCls,
|
273
|
+
option = _ref.option,
|
274
|
+
disabled = _ref.disabled,
|
275
|
+
value = _ref.value,
|
276
|
+
onTagResize = _ref.onTagResize,
|
277
|
+
tryChangeValue = _ref.tryChangeValue,
|
278
|
+
displayRender = _ref.displayRender,
|
279
|
+
_ref$hidden = _ref.hidden,
|
280
|
+
hidden = _ref$hidden === void 0 ? false : _ref$hidden;
|
281
|
+
var title = typeAssertion.isFunction(displayRender) ? displayRender(option) : true;
|
282
|
+
var closeable = !option.disabled;
|
283
|
+
return /*#__PURE__*/React__default['default'].createElement(ResizeDetector__default['default'], {
|
284
|
+
skipOnMount: false,
|
285
|
+
onResize: function onResize(width) {
|
286
|
+
// 隐藏后就不允许设置 tagSize,避免无限循环触发“宽度计算响应式策略”
|
287
|
+
if (hidden) return;
|
288
|
+
|
289
|
+
if (width !== undefined) {
|
290
|
+
onTagResize(option.id, width);
|
291
|
+
}
|
292
|
+
}
|
293
|
+
}, /*#__PURE__*/React__default['default'].createElement("div", {
|
294
|
+
style: {
|
295
|
+
display: 'inline-block'
|
296
|
+
}
|
297
|
+
}, /*#__PURE__*/React__default['default'].createElement("span", {
|
298
|
+
className: prefixCls + "__tag",
|
299
|
+
style: hidden ? hiddenStyle : undefined,
|
300
|
+
key: option.id
|
301
|
+
}, /*#__PURE__*/React__default['default'].createElement("span", {
|
302
|
+
className: prefixCls + "__tag-content"
|
303
|
+
}, title === true ? option.title : title), closeable ? /*#__PURE__*/React__default['default'].createElement("span", {
|
304
|
+
className: prefixCls + "__tag-closed",
|
305
|
+
onClick: function onClick(evt) {
|
306
|
+
if (disabled) return;
|
307
|
+
evt.stopPropagation();
|
308
|
+
var nextValue = value.filter(function (id) {
|
309
|
+
return id !== option.id;
|
310
|
+
});
|
311
|
+
tryChangeValue(nextValue);
|
312
|
+
}
|
313
|
+
}, /*#__PURE__*/React__default['default'].createElement(icons.CloseOutlined, null)) : null)));
|
314
|
+
}
|
315
|
+
|
316
|
+
exports.TagInputMock = TagInputMock;
|
317
|
+
//# sourceMappingURL=TagInputMock.js.map
|
@@ -0,0 +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","disabled","clearable","focused","invalid","readOnly","size","appearance","wrap","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","handleExpand","showClearableIcon","cls","cx","React","ResizeDetector","skipOnMount","onResize","w","option","MockTag","hidden","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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"}
|
package/lib/cjs/index.js
CHANGED
@@ -17,6 +17,9 @@ require('./styles/index.scss.js');
|
|
17
17
|
|
18
18
|
var TagInput = require('./TagInput.js');
|
19
19
|
|
20
|
+
var TagInputMock = require('./TagInputMock.js');
|
21
|
+
|
20
22
|
exports.TagInput = TagInput.TagInput;
|
21
23
|
exports["default"] = TagInput.TagInput;
|
24
|
+
exports.TagInputMock = TagInputMock.TagInputMock;
|
22
25
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
|
@@ -12,7 +12,7 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
var css_248z = ".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: var(--color-black);\n border: 1px solid transparent;\n background-color: var(--color-white);\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: var(--color-gray-30);\n border-radius: 4px; }\n .hi-v4-tag-input__container:not(.disabled):hover {\n border-color: var(--color-primary); }\n .hi-v4-tag-input__container:not(.disabled).focused {\n border-color: var(--color-primary); }\n .hi-v4-tag-input__container.disabled {\n cursor: not-allowed;\n color: var(--color-gray-50);\n background-color: var(--color-gray-10); }\n .hi-v4-tag-input__placeholder {\n color: var(--color-gray-50); }\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 .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: var(--color-gray-50);\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: var(--color-black); }\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 .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: #f2f2f2;\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: var(--color-primary-20);\n color: var(--color-primary);\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 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: var(--color-black);\n border: 1px solid transparent;\n background-color: var(--color-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: var(--color-primary); }\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";
|
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-color-brandblue-500, #237ffa); }\n.hi-v4-tag-input__container:not(.disabled).focused {\n border-color: #237ffa;\n border-color: 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-color-brandblue-100, #bde2ff);\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\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 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-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-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-left: 8px;\n padding-left: var(--hi-v4-spacing-4, 8px);\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: pointer;\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 background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe);\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\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.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--disabled .hi-v4-tag-input-mock__tag-closed {\n cursor: not-allowed; }\n.hi-v4-tag-input-mock--size-sm {\n height: 24px;\n height: var(--hi-v4-height-xs, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 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 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-xl, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 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-outline {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-tag-input-mock--appearance-outline:not(.hi-v4-tag-input-mock--disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tag-input-mock--appearance-outline: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-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tag-input-mock--appearance-outline:not(.hi-v4-tag-input-mock--disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-tag-input-mock--appearance-outline:not(.hi-v4-tag-input-mock--disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-tag-input-mock--appearance-outline: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-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px 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).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-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px 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-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).invalid {\n border-color: #ff5959;\n border-color: 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-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-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px 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: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-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).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-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: 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).invalid {\n border-color: #ff5959;\n border-color: 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-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-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\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-outline.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-outline.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
@@ -16,6 +16,7 @@ import { CloseOutlined, CloseCircleFilled } from '@hi-ui/icons';
|
|
16
16
|
import { useMergeRefs } from '@hi-ui/use-merge-refs';
|
17
17
|
import { useTagInput } from './use-tag-input.js';
|
18
18
|
import { useOutsideClick } from '@hi-ui/use-outside-click';
|
19
|
+
import { useLatestCallback } from '@hi-ui/use-latest';
|
19
20
|
var _role = 'tag-input';
|
20
21
|
|
21
22
|
var _prefix = getPrefixCls(_role);
|
@@ -49,7 +50,8 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
49
50
|
onClick = _a.onClick,
|
50
51
|
_onMouseOver = _a.onMouseOver,
|
51
52
|
_onMouseLeave = _a.onMouseLeave,
|
52
|
-
|
53
|
+
onClear = _a.onClear,
|
54
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave", "onClear"]);
|
53
55
|
|
54
56
|
var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
|
55
57
|
value = _useUncontrolledState[0],
|
@@ -60,11 +62,13 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
60
62
|
var _useTagInput = useTagInput(data, tagInputRef),
|
61
63
|
tagMaxWidth = _useTagInput[0];
|
62
64
|
|
65
|
+
var onClearLatest = useLatestCallback(onClear);
|
63
66
|
var handleClear = useCallback(function (evt) {
|
64
67
|
if (disabled) return;
|
65
68
|
evt.stopPropagation();
|
66
69
|
tryChangeValue(NOOP_ARRAY);
|
67
|
-
|
70
|
+
onClearLatest();
|
71
|
+
}, [tryChangeValue, disabled, onClearLatest]);
|
68
72
|
var tagList = useMemo(function () {
|
69
73
|
return value.map(function (id) {
|
70
74
|
return data.find(function (item) {
|
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","rest","useUncontrolledState","tryChangeValue","tagInputRef","useRef","useTagInput","tagMaxWidth","handleClear","useCallback","evt","stopPropagation","tagList","useMemo","map","id","find","item","title","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":"
|
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","handleClear","useCallback","evt","stopPropagation","tagList","useMemo","map","id","find","item","title","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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"}
|
@@ -0,0 +1,290 @@
|
|
1
|
+
/** @LICENSE
|
2
|
+
* @hi-ui/tag-input
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/tag-input#readme
|
4
|
+
*
|
5
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
6
|
+
*
|
7
|
+
* This source code is licensed under the MIT license found in the
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
9
|
+
*/
|
10
|
+
import { __rest } from 'tslib';
|
11
|
+
import React, { forwardRef, useMemo, useState, useCallback, useLayoutEffect } from 'react';
|
12
|
+
import { getPrefixCls, cx } from '@hi-ui/classname';
|
13
|
+
import { __DEV__ } from '@hi-ui/env';
|
14
|
+
import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
|
15
|
+
import { CloseCircleFilled, CloseOutlined } from '@hi-ui/icons';
|
16
|
+
import { useLatestCallback } from '@hi-ui/use-latest';
|
17
|
+
import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
|
18
|
+
import ResizeDetector from 'react-resize-detector';
|
19
|
+
var _role = 'tag-input-mock';
|
20
|
+
|
21
|
+
var _prefix = getPrefixCls(_role);
|
22
|
+
|
23
|
+
var NOOP_ARRAY = [];
|
24
|
+
/**
|
25
|
+
* TODO: What is TagInputMock
|
26
|
+
*/
|
27
|
+
|
28
|
+
var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
|
29
|
+
var _a$prefixCls = _a.prefixCls,
|
30
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
31
|
+
_a$role = _a.role,
|
32
|
+
role = _a$role === void 0 ? _role : _a$role,
|
33
|
+
className = _a.className,
|
34
|
+
_a$defaultValue = _a.defaultValue,
|
35
|
+
defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
|
36
|
+
valueProp = _a.value,
|
37
|
+
onChange = _a.onChange,
|
38
|
+
placeholder = _a.placeholder,
|
39
|
+
_a$data = _a.data,
|
40
|
+
data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
|
41
|
+
_a$disabled = _a.disabled,
|
42
|
+
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
43
|
+
_a$clearable = _a.clearable,
|
44
|
+
clearable = _a$clearable === void 0 ? false : _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 ? 'outline' : _a$appearance,
|
55
|
+
_a$wrap = _a.wrap,
|
56
|
+
wrap = _a$wrap === void 0 ? false : _a$wrap,
|
57
|
+
suffix = _a.suffix,
|
58
|
+
_a$tagWidth = _a.tagWidth,
|
59
|
+
tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
|
60
|
+
displayRender = _a.displayRender,
|
61
|
+
_onMouseOver = _a.onMouseOver,
|
62
|
+
_onMouseLeave = _a.onMouseLeave,
|
63
|
+
onClear = _a.onClear,
|
64
|
+
onExpand = _a.onExpand,
|
65
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "wrap", "suffix", "tagWidth", "displayRender", "onMouseOver", "onMouseLeave", "onClear", "onExpand"]);
|
66
|
+
|
67
|
+
var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
|
68
|
+
value = _useUncontrolledState[0],
|
69
|
+
tryChangeValue = _useUncontrolledState[1];
|
70
|
+
|
71
|
+
var tagList = useMemo(function () {
|
72
|
+
return value.map(function (id) {
|
73
|
+
return data.find(function (item) {
|
74
|
+
return item.id === id;
|
75
|
+
}) || {
|
76
|
+
id: id,
|
77
|
+
title: id
|
78
|
+
};
|
79
|
+
});
|
80
|
+
}, [value, data]);
|
81
|
+
var tagCount = tagList.length;
|
82
|
+
|
83
|
+
var _useState = useState(),
|
84
|
+
_useState$ = _useState[0],
|
85
|
+
containerWidth = _useState$ === void 0 ? 0 : _useState$,
|
86
|
+
setContainerWidth = _useState[1];
|
87
|
+
|
88
|
+
var mergedTagList = useMemo(function () {
|
89
|
+
if (wrap) {
|
90
|
+
return tagList;
|
91
|
+
}
|
92
|
+
|
93
|
+
return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
|
94
|
+
}, [tagList, tagWidth, containerWidth, wrap]);
|
95
|
+
var showTags = mergedTagList.length > 0;
|
96
|
+
var showTagCount = !wrap && showTags;
|
97
|
+
|
98
|
+
var _useState2 = useState({}),
|
99
|
+
tagsWidth = _useState2[0],
|
100
|
+
setTagsWidth = _useState2[1];
|
101
|
+
|
102
|
+
var getTagWidth = useCallback(function (index) {
|
103
|
+
return typeof mergedTagList[index] !== 'undefined' && tagsWidth[mergedTagList[index].id] || 0;
|
104
|
+
}, [tagsWidth, mergedTagList]);
|
105
|
+
|
106
|
+
var _useState3 = useState(0),
|
107
|
+
suffixWidth = _useState3[0],
|
108
|
+
setSuffixWidth = _useState3[1]; // TODO: 设置第一个 tagWidth 超出省略,预防无展示
|
109
|
+
// const [tagMaxWidth, setTagMaxWidth] = useState(0)
|
110
|
+
|
111
|
+
|
112
|
+
var _useState4 = useState(0),
|
113
|
+
tagMaxCount = _useState4[0],
|
114
|
+
setTagMaxCount = _useState4[1];
|
115
|
+
|
116
|
+
useLayoutEffect(function () {
|
117
|
+
var tagMaxCount = 0;
|
118
|
+
|
119
|
+
if (isArrayNonEmpty(mergedTagList)) {
|
120
|
+
var len = mergedTagList.length;
|
121
|
+
var lastIndex = len - 1;
|
122
|
+
var totalWidth = suffixWidth;
|
123
|
+
|
124
|
+
for (var i = 0; i < len; ++i) {
|
125
|
+
var currentTagWidth = getTagWidth(i);
|
126
|
+
|
127
|
+
if (currentTagWidth === undefined) {
|
128
|
+
break;
|
129
|
+
}
|
130
|
+
|
131
|
+
totalWidth += currentTagWidth;
|
132
|
+
|
133
|
+
if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
|
134
|
+
tagMaxCount = lastIndex;
|
135
|
+
break;
|
136
|
+
} else if (totalWidth > containerWidth) {
|
137
|
+
tagMaxCount = i - 1;
|
138
|
+
break;
|
139
|
+
}
|
140
|
+
}
|
141
|
+
} else {
|
142
|
+
tagMaxCount = 0;
|
143
|
+
}
|
144
|
+
|
145
|
+
setTagMaxCount(tagMaxCount);
|
146
|
+
}, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
|
147
|
+
var onClearLatest = useLatestCallback(onClear);
|
148
|
+
var handleClear = useCallback(function (evt) {
|
149
|
+
if (disabled) return;
|
150
|
+
evt.stopPropagation();
|
151
|
+
tryChangeValue(NOOP_ARRAY);
|
152
|
+
onClearLatest();
|
153
|
+
}, [tryChangeValue, disabled, onClearLatest]);
|
154
|
+
|
155
|
+
var _useState5 = useState(false),
|
156
|
+
hover = _useState5[0],
|
157
|
+
setHover = _useState5[1];
|
158
|
+
|
159
|
+
var trySetHover = useCallback(function (hovered) {
|
160
|
+
if (disabled) return;
|
161
|
+
setHover(hovered);
|
162
|
+
}, [disabled]);
|
163
|
+
var handleExpand = useCallback(function (evt) {
|
164
|
+
evt.stopPropagation();
|
165
|
+
onExpand === null || onExpand === void 0 ? void 0 : onExpand();
|
166
|
+
}, [onExpand]); // 在开启 clearable 下展示 清除内容按钮,可点击进行内容清楚
|
167
|
+
|
168
|
+
var showClearableIcon = clearable && showTags && !disabled;
|
169
|
+
var cls = cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", readOnly && 'readonly', invalid && 'invalid', disabled && prefixCls + "--disabled", wrap && prefixCls + "--wrap");
|
170
|
+
return /*#__PURE__*/React.createElement(ResizeDetector, {
|
171
|
+
skipOnMount: false,
|
172
|
+
onResize: function onResize(w) {
|
173
|
+
if (w) {
|
174
|
+
setContainerWidth(w);
|
175
|
+
}
|
176
|
+
}
|
177
|
+
}, /*#__PURE__*/React.createElement("div", Object.assign({
|
178
|
+
ref: ref,
|
179
|
+
role: role,
|
180
|
+
className: cls,
|
181
|
+
onMouseOver: function onMouseOver(evt) {
|
182
|
+
trySetHover(true);
|
183
|
+
_onMouseOver === null || _onMouseOver === void 0 ? void 0 : _onMouseOver(evt);
|
184
|
+
},
|
185
|
+
onMouseLeave: function onMouseLeave(evt) {
|
186
|
+
trySetHover(false);
|
187
|
+
_onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(evt);
|
188
|
+
}
|
189
|
+
}, rest), showTags ? /*#__PURE__*/React.createElement("span", {
|
190
|
+
className: prefixCls + "__tags"
|
191
|
+
}, mergedTagList.map(function (option, index) {
|
192
|
+
return /*#__PURE__*/React.createElement(MockTag, {
|
193
|
+
hidden: wrap ? false : index > tagMaxCount,
|
194
|
+
key: option.id,
|
195
|
+
prefixCls: prefixCls,
|
196
|
+
disabled: disabled,
|
197
|
+
option: option,
|
198
|
+
value: value,
|
199
|
+
displayRender: displayRender,
|
200
|
+
tryChangeValue: tryChangeValue,
|
201
|
+
onTagResize: function onTagResize(id, w) {
|
202
|
+
return setTagsWidth(function (prev) {
|
203
|
+
var _Object$assign;
|
204
|
+
|
205
|
+
return Object.assign(Object.assign({}, prev), (_Object$assign = {}, _Object$assign[id] = w, _Object$assign));
|
206
|
+
});
|
207
|
+
}
|
208
|
+
});
|
209
|
+
})) : /*#__PURE__*/React.createElement("span", {
|
210
|
+
className: prefixCls + "__placeholder"
|
211
|
+
}, placeholder), /*#__PURE__*/React.createElement(ResizeDetector, {
|
212
|
+
skipOnMount: false,
|
213
|
+
onResize: function onResize(w) {
|
214
|
+
if (w) {
|
215
|
+
setSuffixWidth(w);
|
216
|
+
}
|
217
|
+
}
|
218
|
+
}, !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React.createElement("span", {
|
219
|
+
className: prefixCls + "__suffix"
|
220
|
+
}, showTagCount ? /*#__PURE__*/React.createElement("span", {
|
221
|
+
className: cx(prefixCls + "__tag--total"),
|
222
|
+
onClick: handleExpand
|
223
|
+
}, "" + (tagCount > 99 ? '99+' : tagCount)) : null, showClearableIcon && hover ? /*#__PURE__*/React.createElement("span", {
|
224
|
+
className: prefixCls + "__clear",
|
225
|
+
role: "button",
|
226
|
+
tabIndex: -1,
|
227
|
+
onClick: handleClear
|
228
|
+
}, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : suffix) : null)));
|
229
|
+
});
|
230
|
+
|
231
|
+
if (__DEV__) {
|
232
|
+
TagInputMock.displayName = 'TagInputMock';
|
233
|
+
}
|
234
|
+
|
235
|
+
var hiddenStyle = {
|
236
|
+
position: 'absolute',
|
237
|
+
opacity: 0,
|
238
|
+
width: 0,
|
239
|
+
height: 0,
|
240
|
+
overflow: 'hidden',
|
241
|
+
display: 'none'
|
242
|
+
};
|
243
|
+
|
244
|
+
function MockTag(_ref) {
|
245
|
+
var prefixCls = _ref.prefixCls,
|
246
|
+
option = _ref.option,
|
247
|
+
disabled = _ref.disabled,
|
248
|
+
value = _ref.value,
|
249
|
+
onTagResize = _ref.onTagResize,
|
250
|
+
tryChangeValue = _ref.tryChangeValue,
|
251
|
+
displayRender = _ref.displayRender,
|
252
|
+
_ref$hidden = _ref.hidden,
|
253
|
+
hidden = _ref$hidden === void 0 ? false : _ref$hidden;
|
254
|
+
var title = isFunction(displayRender) ? displayRender(option) : true;
|
255
|
+
var closeable = !option.disabled;
|
256
|
+
return /*#__PURE__*/React.createElement(ResizeDetector, {
|
257
|
+
skipOnMount: false,
|
258
|
+
onResize: function onResize(width) {
|
259
|
+
// 隐藏后就不允许设置 tagSize,避免无限循环触发“宽度计算响应式策略”
|
260
|
+
if (hidden) return;
|
261
|
+
|
262
|
+
if (width !== undefined) {
|
263
|
+
onTagResize(option.id, width);
|
264
|
+
}
|
265
|
+
}
|
266
|
+
}, /*#__PURE__*/React.createElement("div", {
|
267
|
+
style: {
|
268
|
+
display: 'inline-block'
|
269
|
+
}
|
270
|
+
}, /*#__PURE__*/React.createElement("span", {
|
271
|
+
className: prefixCls + "__tag",
|
272
|
+
style: hidden ? hiddenStyle : undefined,
|
273
|
+
key: option.id
|
274
|
+
}, /*#__PURE__*/React.createElement("span", {
|
275
|
+
className: prefixCls + "__tag-content"
|
276
|
+
}, title === true ? option.title : title), closeable ? /*#__PURE__*/React.createElement("span", {
|
277
|
+
className: prefixCls + "__tag-closed",
|
278
|
+
onClick: function onClick(evt) {
|
279
|
+
if (disabled) return;
|
280
|
+
evt.stopPropagation();
|
281
|
+
var nextValue = value.filter(function (id) {
|
282
|
+
return id !== option.id;
|
283
|
+
});
|
284
|
+
tryChangeValue(nextValue);
|
285
|
+
}
|
286
|
+
}, /*#__PURE__*/React.createElement(CloseOutlined, null)) : null)));
|
287
|
+
}
|
288
|
+
|
289
|
+
export { TagInputMock };
|
290
|
+
//# sourceMappingURL=TagInputMock.js.map
|
@@ -0,0 +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","disabled","clearable","focused","invalid","readOnly","size","appearance","wrap","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","handleExpand","showClearableIcon","cls","cx","React","ResizeDetector","skipOnMount","onResize","w","option","MockTag","hidden","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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"}
|
package/lib/esm/index.js
CHANGED
package/lib/esm/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
@@ -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 = ".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: var(--color-black);\n border: 1px solid transparent;\n background-color: var(--color-white);\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: var(--color-gray-30);\n border-radius: 4px; }\n .hi-v4-tag-input__container:not(.disabled):hover {\n border-color: var(--color-primary); }\n .hi-v4-tag-input__container:not(.disabled).focused {\n border-color: var(--color-primary); }\n .hi-v4-tag-input__container.disabled {\n cursor: not-allowed;\n color: var(--color-gray-50);\n background-color: var(--color-gray-10); }\n .hi-v4-tag-input__placeholder {\n color: var(--color-gray-50); }\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 .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: var(--color-gray-50);\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: var(--color-black); }\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 .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: #f2f2f2;\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: var(--color-primary-20);\n color: var(--color-primary);\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 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: var(--color-black);\n border: 1px solid transparent;\n background-color: var(--color-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: var(--color-primary); }\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";
|
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-color-brandblue-500, #237ffa); }\n.hi-v4-tag-input__container:not(.disabled).focused {\n border-color: #237ffa;\n border-color: 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-color-brandblue-100, #bde2ff);\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\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 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-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-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-left: 8px;\n padding-left: var(--hi-v4-spacing-4, 8px);\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: pointer;\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 background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe);\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\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.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--disabled .hi-v4-tag-input-mock__tag-closed {\n cursor: not-allowed; }\n.hi-v4-tag-input-mock--size-sm {\n height: 24px;\n height: var(--hi-v4-height-xs, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 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 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-xl, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 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-outline {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-tag-input-mock--appearance-outline:not(.hi-v4-tag-input-mock--disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tag-input-mock--appearance-outline: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-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tag-input-mock--appearance-outline:not(.hi-v4-tag-input-mock--disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-tag-input-mock--appearance-outline:not(.hi-v4-tag-input-mock--disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-tag-input-mock--appearance-outline: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-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px 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).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-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px 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-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).invalid {\n border-color: #ff5959;\n border-color: 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-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-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px 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: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-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).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-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: 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).invalid {\n border-color: #ff5959;\n border-color: 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-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-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\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-outline.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-outline.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
|
|
package/lib/types/TagInput.d.ts
CHANGED
@@ -4,8 +4,8 @@ import { HiBaseHTMLProps } from '@hi-ui/core';
|
|
4
4
|
/**
|
5
5
|
* TODO: What is TagInput
|
6
6
|
*/
|
7
|
-
export declare const TagInput: React.ForwardRefExoticComponent<
|
8
|
-
export interface TagInputProps extends HiBaseHTMLProps {
|
7
|
+
export declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLDivElement | null>>;
|
8
|
+
export interface TagInputProps extends Omit<HiBaseHTMLProps<'div'>, 'defaultValue' | 'onChange' | 'value'> {
|
9
9
|
/**
|
10
10
|
* 设置当前多选值
|
11
11
|
*/
|
@@ -46,4 +46,8 @@ export interface TagInputProps extends HiBaseHTMLProps {
|
|
46
46
|
* tag 列表数据源
|
47
47
|
*/
|
48
48
|
data?: TagInputOption[];
|
49
|
+
/**
|
50
|
+
* 点击清空 tags 回调
|
51
|
+
*/
|
52
|
+
onClear?: () => void;
|
49
53
|
}
|
@@ -0,0 +1,74 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { TagInputOption } from './types';
|
3
|
+
import { HiBaseHTMLFieldProps } from '@hi-ui/core';
|
4
|
+
/**
|
5
|
+
* TODO: What is TagInputMock
|
6
|
+
*/
|
7
|
+
export declare const TagInputMock: React.ForwardRefExoticComponent<TagInputMockProps & React.RefAttributes<HTMLDivElement | null>>;
|
8
|
+
export interface TagInputMockProps extends Omit<HiBaseHTMLFieldProps<'div'>, 'defaultValue' | 'onChange' | 'value'> {
|
9
|
+
/**
|
10
|
+
* 设置当前多选值
|
11
|
+
*/
|
12
|
+
value?: React.ReactText[];
|
13
|
+
/**
|
14
|
+
* 设置当前多选值默认值
|
15
|
+
*/
|
16
|
+
defaultValue?: React.ReactText[];
|
17
|
+
/**
|
18
|
+
* 多选值改变时的回调
|
19
|
+
*/
|
20
|
+
onChange?: (values: React.ReactText[]) => void;
|
21
|
+
/**
|
22
|
+
* 是否可清空 boolean true | false true
|
23
|
+
*/
|
24
|
+
clearable?: boolean;
|
25
|
+
/**
|
26
|
+
* 是否禁止使用 boolean true | false false
|
27
|
+
*/
|
28
|
+
disabled?: boolean;
|
29
|
+
/**
|
30
|
+
* 自定义选择后触发器所展示的内容
|
31
|
+
*/
|
32
|
+
displayRender?: (checkedOption: TagInputOption) => React.ReactNode;
|
33
|
+
/**
|
34
|
+
* 输入框占位符
|
35
|
+
*/
|
36
|
+
placeholder?: string;
|
37
|
+
/**
|
38
|
+
* 输入框后置内容
|
39
|
+
*/
|
40
|
+
suffix?: React.ReactNode;
|
41
|
+
/**
|
42
|
+
* tag 列表数据源
|
43
|
+
*/
|
44
|
+
data?: TagInputOption[];
|
45
|
+
/**
|
46
|
+
* 点击清空 tags 回调
|
47
|
+
*/
|
48
|
+
onClear?: () => void;
|
49
|
+
/**
|
50
|
+
* 设置 tag 的默认宽度
|
51
|
+
*/
|
52
|
+
tagWidth?: number;
|
53
|
+
/**
|
54
|
+
* 是否聚焦
|
55
|
+
*/
|
56
|
+
focused?: boolean;
|
57
|
+
/**
|
58
|
+
* 开启输入框只读
|
59
|
+
*/
|
60
|
+
readOnly?: boolean;
|
61
|
+
/**
|
62
|
+
* 设置展现形式
|
63
|
+
*/
|
64
|
+
appearance?: 'outline' | 'unset' | 'filled';
|
65
|
+
/**
|
66
|
+
* 设置输入框尺寸
|
67
|
+
*/
|
68
|
+
size?: 'sm' | 'md' | 'lg';
|
69
|
+
/**
|
70
|
+
* 是否开启换行全展示
|
71
|
+
*/
|
72
|
+
wrap?: boolean;
|
73
|
+
onExpand?: () => void;
|
74
|
+
}
|
package/lib/types/index.d.ts
CHANGED
@@ -0,0 +1,3 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
export declare const useTagInputMock: <T>(tags: T[], ref: React.MutableRefObject<HTMLDivElement | null>) => readonly [number | undefined];
|
3
|
+
export declare const useResizeWidth: <T extends Element>(ref: React.MutableRefObject<T | null>) => number;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@hi-ui/tag-input",
|
3
|
-
"version": "4.0.0-alpha.
|
3
|
+
"version": "4.0.0-alpha.13",
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
5
5
|
"keywords": [],
|
6
6
|
"author": "HIUI <mi-hiui@xiaomi.com>",
|
@@ -43,23 +43,26 @@
|
|
43
43
|
"url": "https://github.com/XiaoMi/hiui/issues"
|
44
44
|
},
|
45
45
|
"dependencies": {
|
46
|
-
"@hi-ui/classname": "^4.0.0-alpha.
|
47
|
-
"@hi-ui/core": "^4.0.0-alpha.
|
48
|
-
"@hi-ui/core-css": "^4.0.0-alpha.
|
49
|
-
"@hi-ui/env": "^4.0.0-alpha.
|
50
|
-
"@hi-ui/icons": "^4.0.0-alpha.
|
51
|
-
"@hi-ui/
|
52
|
-
"@hi-ui/use-
|
53
|
-
"@hi-ui/use-
|
46
|
+
"@hi-ui/classname": "^4.0.0-alpha.3",
|
47
|
+
"@hi-ui/core": "^4.0.0-alpha.12",
|
48
|
+
"@hi-ui/core-css": "^4.0.0-alpha.10",
|
49
|
+
"@hi-ui/env": "^4.0.0-alpha.5",
|
50
|
+
"@hi-ui/icons": "^4.0.0-alpha.18",
|
51
|
+
"@hi-ui/type-assertion": "^4.0.0-alpha.13",
|
52
|
+
"@hi-ui/use-latest": "^4.0.0-alpha.4",
|
53
|
+
"@hi-ui/use-merge-refs": "^4.0.0-alpha.4",
|
54
|
+
"@hi-ui/use-outside-click": "^4.0.0-alpha.7",
|
55
|
+
"@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.12",
|
56
|
+
"react-resize-detector": "^6.7.6"
|
54
57
|
},
|
55
58
|
"peerDependencies": {
|
56
59
|
"react": "^17.0.1",
|
57
60
|
"react-dom": "^17.0.1"
|
58
61
|
},
|
59
62
|
"devDependencies": {
|
60
|
-
"@hi-ui/hi-build": "^4.0.0-alpha.
|
63
|
+
"@hi-ui/hi-build": "^4.0.0-alpha.4",
|
61
64
|
"react": "^17.0.1",
|
62
65
|
"react-dom": "^17.0.1"
|
63
66
|
},
|
64
|
-
"gitHead": "
|
67
|
+
"gitHead": "4fe4855aa7b3180a4e30ffa0972ac39a04947b4b"
|
65
68
|
}
|