@hi-ui/tag-input 4.0.0-alpha.1 → 4.0.0-alpha.13

package/lib/cjs/TagInput.js

@@ -33,6 +33,8 @@ var useTagInput = require('./use-tag-input.js');
 
 var useOutsideClick = require('@hi-ui/use-outside-click');
 
+var useLatest = require('@hi-ui/use-latest');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -74,7 +76,8 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onClick = _a.onClick,
       _onMouseOver = _a.onMouseOver,
       _onMouseLeave = _a.onMouseLeave,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave"]);
+      onClear = _a.onClear,
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave", "onClear"]);
 
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
       value = _useUncontrolledState[0],
@@ -85,11 +88,13 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _useTagInput = useTagInput.useTagInput(data, tagInputRef),
       tagMaxWidth = _useTagInput[0];
 
+  var onClearLatest = useLatest.useLatestCallback(onClear);
   var handleClear = React.useCallback(function (evt) {
     if (disabled) return;
     evt.stopPropagation();
     tryChangeValue(NOOP_ARRAY);
-  }, [tryChangeValue, disabled]);
+    onClearLatest();
+  }, [tryChangeValue, disabled, onClearLatest]);
   var tagList = React.useMemo(function () {
     return value.map(function (id) {
       return data.find(function (item) {

package/lib/cjs/TagInput.js.map

@@ -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":"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"}
+{"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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"}

package/lib/cjs/TagInputMock.js

@@ -0,0 +1,317 @@
+/** @LICENSE
+ * @hi-ui/tag-input
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tag-input#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var tslib = require('tslib');
+
+var React = require('react');
+
+var classname = require('@hi-ui/classname');
+
+var env = require('@hi-ui/env');
+
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+
+var icons = require('@hi-ui/icons');
+
+var useLatest = require('@hi-ui/use-latest');
+
+var typeAssertion = require('@hi-ui/type-assertion');
+
+var ResizeDetector = require('react-resize-detector');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ResizeDetector__default = /*#__PURE__*/_interopDefaultLegacy(ResizeDetector);
+
+var _role = 'tag-input-mock';
+
+var _prefix = classname.getPrefixCls(_role);
+
+var NOOP_ARRAY = [];
+/**
+ * TODO: What is TagInputMock
+ */
+
+var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+      _a$role = _a.role,
+      role = _a$role === void 0 ? _role : _a$role,
+      className = _a.className,
+      _a$defaultValue = _a.defaultValue,
+      defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
+      valueProp = _a.value,
+      onChange = _a.onChange,
+      placeholder = _a.placeholder,
+      _a$data = _a.data,
+      data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
+      _a$disabled = _a.disabled,
+      disabled = _a$disabled === void 0 ? false : _a$disabled,
+      _a$clearable = _a.clearable,
+      clearable = _a$clearable === void 0 ? false : _a$clearable,
+      _a$focused = _a.focused,
+      focused = _a$focused === void 0 ? false : _a$focused,
+      _a$invalid = _a.invalid,
+      invalid = _a$invalid === void 0 ? false : _a$invalid,
+      _a$readOnly = _a.readOnly,
+      readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'md' : _a$size,
+      _a$appearance = _a.appearance,
+      appearance = _a$appearance === void 0 ? 'outline' : _a$appearance,
+      _a$wrap = _a.wrap,
+      wrap = _a$wrap === void 0 ? false : _a$wrap,
+      suffix = _a.suffix,
+      _a$tagWidth = _a.tagWidth,
+      tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
+      displayRender = _a.displayRender,
+      _onMouseOver = _a.onMouseOver,
+      _onMouseLeave = _a.onMouseLeave,
+      onClear = _a.onClear,
+      onExpand = _a.onExpand,
+      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"]);
+
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
+      value = _useUncontrolledState[0],
+      tryChangeValue = _useUncontrolledState[1];
+
+  var tagList = React.useMemo(function () {
+    return value.map(function (id) {
+      return data.find(function (item) {
+        return item.id === id;
+      }) || {
+        id: id,
+        title: id
+      };
+    });
+  }, [value, data]);
+  var tagCount = tagList.length;
+
+  var _useState = React.useState(),
+      _useState$ = _useState[0],
+      containerWidth = _useState$ === void 0 ? 0 : _useState$,
+      setContainerWidth = _useState[1];
+
+  var mergedTagList = React.useMemo(function () {
+    if (wrap) {
+      return tagList;
+    }
+
+    return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
+  }, [tagList, tagWidth, containerWidth, wrap]);
+  var showTags = mergedTagList.length > 0;
+  var showTagCount = !wrap && showTags;
+
+  var _useState2 = React.useState({}),
+      tagsWidth = _useState2[0],
+      setTagsWidth = _useState2[1];
+
+  var getTagWidth = React.useCallback(function (index) {
+    return typeof mergedTagList[index] !== 'undefined' && tagsWidth[mergedTagList[index].id] || 0;
+  }, [tagsWidth, mergedTagList]);
+
+  var _useState3 = React.useState(0),
+      suffixWidth = _useState3[0],
+      setSuffixWidth = _useState3[1]; // TODO: 设置第一个 tagWidth 超出省略，预防无展示
+  // const [tagMaxWidth, setTagMaxWidth] = useState(0)
+
+
+  var _useState4 = React.useState(0),
+      tagMaxCount = _useState4[0],
+      setTagMaxCount = _useState4[1];
+
+  React.useLayoutEffect(function () {
+    var tagMaxCount = 0;
+
+    if (typeAssertion.isArrayNonEmpty(mergedTagList)) {
+      var len = mergedTagList.length;
+      var lastIndex = len - 1;
+      var totalWidth = suffixWidth;
+
+      for (var i = 0; i < len; ++i) {
+        var currentTagWidth = getTagWidth(i);
+
+        if (currentTagWidth === undefined) {
+          break;
+        }
+
+        totalWidth += currentTagWidth;
+
+        if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
+          tagMaxCount = lastIndex;
+          break;
+        } else if (totalWidth > containerWidth) {
+          tagMaxCount = i - 1;
+          break;
+        }
+      }
+    } else {
+      tagMaxCount = 0;
+    }
+
+    setTagMaxCount(tagMaxCount);
+  }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
+  var onClearLatest = useLatest.useLatestCallback(onClear);
+  var handleClear = React.useCallback(function (evt) {
+    if (disabled) return;
+    evt.stopPropagation();
+    tryChangeValue(NOOP_ARRAY);
+    onClearLatest();
+  }, [tryChangeValue, disabled, onClearLatest]);
+
+  var _useState5 = React.useState(false),
+      hover = _useState5[0],
+      setHover = _useState5[1];
+
+  var trySetHover = React.useCallback(function (hovered) {
+    if (disabled) return;
+    setHover(hovered);
+  }, [disabled]);
+  var handleExpand = React.useCallback(function (evt) {
+    evt.stopPropagation();
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+  }, [onExpand]); // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
+
+  var showClearableIcon = clearable && showTags && !disabled;
+  var cls = classname.cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", readOnly && 'readonly', invalid && 'invalid', disabled && prefixCls + "--disabled", wrap && prefixCls + "--wrap");
+  return /*#__PURE__*/React__default['default'].createElement(ResizeDetector__default['default'], {
+    skipOnMount: false,
+    onResize: function onResize(w) {
+      if (w) {
+        setContainerWidth(w);
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls,
+    onMouseOver: function onMouseOver(evt) {
+      trySetHover(true);
+      _onMouseOver === null || _onMouseOver === void 0 ? void 0 : _onMouseOver(evt);
+    },
+    onMouseLeave: function onMouseLeave(evt) {
+      trySetHover(false);
+      _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(evt);
+    }
+  }, rest), showTags ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: prefixCls + "__tags"
+  }, mergedTagList.map(function (option, index) {
+    return /*#__PURE__*/React__default['default'].createElement(MockTag, {
+      hidden: wrap ? false : index > tagMaxCount,
+      key: option.id,
+      prefixCls: prefixCls,
+      disabled: disabled,
+      option: option,
+      value: value,
+      displayRender: displayRender,
+      tryChangeValue: tryChangeValue,
+      onTagResize: function onTagResize(id, w) {
+        return setTagsWidth(function (prev) {
+          var _Object$assign;
+
+          return Object.assign(Object.assign({}, prev), (_Object$assign = {}, _Object$assign[id] = w, _Object$assign));
+        });
+      }
+    });
+  })) : /*#__PURE__*/React__default['default'].createElement("span", {
+    className: prefixCls + "__placeholder"
+  }, placeholder), /*#__PURE__*/React__default['default'].createElement(ResizeDetector__default['default'], {
+    skipOnMount: false,
+    onResize: function onResize(w) {
+      if (w) {
+        setSuffixWidth(w);
+      }
+    }
+  }, !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: prefixCls + "__suffix"
+  }, showTagCount ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: classname.cx(prefixCls + "__tag--total"),
+    onClick: handleExpand
+  }, "" + (tagCount > 99 ? '99+' : tagCount)) : null, showClearableIcon && hover ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: prefixCls + "__clear",
+    role: "button",
+    tabIndex: -1,
+    onClick: handleClear
+  }, /*#__PURE__*/React__default['default'].createElement(icons.CloseCircleFilled, null)) : suffix) : null)));
+});
+
+if (env.__DEV__) {
+  TagInputMock.displayName = 'TagInputMock';
+}
+
+var hiddenStyle = {
+  position: 'absolute',
+  opacity: 0,
+  width: 0,
+  height: 0,
+  overflow: 'hidden',
+  display: 'none'
+};
+
+function MockTag(_ref) {
+  var prefixCls = _ref.prefixCls,
+      option = _ref.option,
+      disabled = _ref.disabled,
+      value = _ref.value,
+      onTagResize = _ref.onTagResize,
+      tryChangeValue = _ref.tryChangeValue,
+      displayRender = _ref.displayRender,
+      _ref$hidden = _ref.hidden,
+      hidden = _ref$hidden === void 0 ? false : _ref$hidden;
+  var title = typeAssertion.isFunction(displayRender) ? displayRender(option) : true;
+  var closeable = !option.disabled;
+  return /*#__PURE__*/React__default['default'].createElement(ResizeDetector__default['default'], {
+    skipOnMount: false,
+    onResize: function onResize(width) {
+      // 隐藏后就不允许设置 tagSize，避免无限循环触发“宽度计算响应式策略”
+      if (hidden) return;
+
+      if (width !== undefined) {
+        onTagResize(option.id, width);
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      display: 'inline-block'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: prefixCls + "__tag",
+    style: hidden ? hiddenStyle : undefined,
+    key: option.id
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: prefixCls + "__tag-content"
+  }, title === true ? option.title : title), closeable ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: prefixCls + "__tag-closed",
+    onClick: function onClick(evt) {
+      if (disabled) return;
+      evt.stopPropagation();
+      var nextValue = value.filter(function (id) {
+        return id !== option.id;
+      });
+      tryChangeValue(nextValue);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(icons.CloseOutlined, null)) : null)));
+}
+
+exports.TagInputMock = TagInputMock;
+//# sourceMappingURL=TagInputMock.js.map

package/lib/cjs/TagInputMock.js.map

@@ -0,0 +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

@@ -17,6 +17,9 @@ require('./styles/index.scss.js');
 
 var TagInput = require('./TagInput.js');
 
+var TagInputMock = require('./TagInputMock.js');
+
 exports.TagInput = TagInput.TagInput;
 exports["default"] = TagInput.TagInput;
+exports.TagInputMock = TagInputMock.TagInputMock;
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/styles/index.scss.js

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-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";
+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";
 
 var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
 

package/lib/esm/TagInput.js

@@ -16,6 +16,7 @@ import { CloseOutlined, CloseCircleFilled } from '@hi-ui/icons';
 import { useMergeRefs } from '@hi-ui/use-merge-refs';
 import { useTagInput } from './use-tag-input.js';
 import { useOutsideClick } from '@hi-ui/use-outside-click';
+import { useLatestCallback } from '@hi-ui/use-latest';
 var _role = 'tag-input';
 
 var _prefix = getPrefixCls(_role);
@@ -49,7 +50,8 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       onClick = _a.onClick,
       _onMouseOver = _a.onMouseOver,
       _onMouseLeave = _a.onMouseLeave,
-      rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave"]);
+      onClear = _a.onClear,
+      rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave", "onClear"]);
 
   var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
       value = _useUncontrolledState[0],
@@ -60,11 +62,13 @@ var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _useTagInput = useTagInput(data, tagInputRef),
       tagMaxWidth = _useTagInput[0];
 
+  var onClearLatest = useLatestCallback(onClear);
   var handleClear = useCallback(function (evt) {
     if (disabled) return;
     evt.stopPropagation();
     tryChangeValue(NOOP_ARRAY);
-  }, [tryChangeValue, disabled]);
+    onClearLatest();
+  }, [tryChangeValue, disabled, onClearLatest]);
   var tagList = useMemo(function () {
     return value.map(function (id) {
       return data.find(function (item) {

package/lib/esm/TagInput.js.map

@@ -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":"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"}
+{"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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"}

package/lib/esm/TagInputMock.js

@@ -0,0 +1,290 @@
+/** @LICENSE
+ * @hi-ui/tag-input
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tag-input#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __rest } from 'tslib';
+import React, { forwardRef, useMemo, useState, useCallback, useLayoutEffect } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import { CloseCircleFilled, CloseOutlined } from '@hi-ui/icons';
+import { useLatestCallback } from '@hi-ui/use-latest';
+import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
+import ResizeDetector from 'react-resize-detector';
+var _role = 'tag-input-mock';
+
+var _prefix = getPrefixCls(_role);
+
+var NOOP_ARRAY = [];
+/**
+ * TODO: What is TagInputMock
+ */
+
+var TagInputMock = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+      _a$role = _a.role,
+      role = _a$role === void 0 ? _role : _a$role,
+      className = _a.className,
+      _a$defaultValue = _a.defaultValue,
+      defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
+      valueProp = _a.value,
+      onChange = _a.onChange,
+      placeholder = _a.placeholder,
+      _a$data = _a.data,
+      data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
+      _a$disabled = _a.disabled,
+      disabled = _a$disabled === void 0 ? false : _a$disabled,
+      _a$clearable = _a.clearable,
+      clearable = _a$clearable === void 0 ? false : _a$clearable,
+      _a$focused = _a.focused,
+      focused = _a$focused === void 0 ? false : _a$focused,
+      _a$invalid = _a.invalid,
+      invalid = _a$invalid === void 0 ? false : _a$invalid,
+      _a$readOnly = _a.readOnly,
+      readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'md' : _a$size,
+      _a$appearance = _a.appearance,
+      appearance = _a$appearance === void 0 ? 'outline' : _a$appearance,
+      _a$wrap = _a.wrap,
+      wrap = _a$wrap === void 0 ? false : _a$wrap,
+      suffix = _a.suffix,
+      _a$tagWidth = _a.tagWidth,
+      tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
+      displayRender = _a.displayRender,
+      _onMouseOver = _a.onMouseOver,
+      _onMouseLeave = _a.onMouseLeave,
+      onClear = _a.onClear,
+      onExpand = _a.onExpand,
+      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"]);
+
+  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
+      value = _useUncontrolledState[0],
+      tryChangeValue = _useUncontrolledState[1];
+
+  var tagList = useMemo(function () {
+    return value.map(function (id) {
+      return data.find(function (item) {
+        return item.id === id;
+      }) || {
+        id: id,
+        title: id
+      };
+    });
+  }, [value, data]);
+  var tagCount = tagList.length;
+
+  var _useState = useState(),
+      _useState$ = _useState[0],
+      containerWidth = _useState$ === void 0 ? 0 : _useState$,
+      setContainerWidth = _useState[1];
+
+  var mergedTagList = useMemo(function () {
+    if (wrap) {
+      return tagList;
+    }
+
+    return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
+  }, [tagList, tagWidth, containerWidth, wrap]);
+  var showTags = mergedTagList.length > 0;
+  var showTagCount = !wrap && showTags;
+
+  var _useState2 = useState({}),
+      tagsWidth = _useState2[0],
+      setTagsWidth = _useState2[1];
+
+  var getTagWidth = useCallback(function (index) {
+    return typeof mergedTagList[index] !== 'undefined' && tagsWidth[mergedTagList[index].id] || 0;
+  }, [tagsWidth, mergedTagList]);
+
+  var _useState3 = useState(0),
+      suffixWidth = _useState3[0],
+      setSuffixWidth = _useState3[1]; // TODO: 设置第一个 tagWidth 超出省略，预防无展示
+  // const [tagMaxWidth, setTagMaxWidth] = useState(0)
+
+
+  var _useState4 = useState(0),
+      tagMaxCount = _useState4[0],
+      setTagMaxCount = _useState4[1];
+
+  useLayoutEffect(function () {
+    var tagMaxCount = 0;
+
+    if (isArrayNonEmpty(mergedTagList)) {
+      var len = mergedTagList.length;
+      var lastIndex = len - 1;
+      var totalWidth = suffixWidth;
+
+      for (var i = 0; i < len; ++i) {
+        var currentTagWidth = getTagWidth(i);
+
+        if (currentTagWidth === undefined) {
+          break;
+        }
+
+        totalWidth += currentTagWidth;
+
+        if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
+          tagMaxCount = lastIndex;
+          break;
+        } else if (totalWidth > containerWidth) {
+          tagMaxCount = i - 1;
+          break;
+        }
+      }
+    } else {
+      tagMaxCount = 0;
+    }
+
+    setTagMaxCount(tagMaxCount);
+  }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
+  var onClearLatest = useLatestCallback(onClear);
+  var handleClear = useCallback(function (evt) {
+    if (disabled) return;
+    evt.stopPropagation();
+    tryChangeValue(NOOP_ARRAY);
+    onClearLatest();
+  }, [tryChangeValue, disabled, onClearLatest]);
+
+  var _useState5 = useState(false),
+      hover = _useState5[0],
+      setHover = _useState5[1];
+
+  var trySetHover = useCallback(function (hovered) {
+    if (disabled) return;
+    setHover(hovered);
+  }, [disabled]);
+  var handleExpand = useCallback(function (evt) {
+    evt.stopPropagation();
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+  }, [onExpand]); // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
+
+  var showClearableIcon = clearable && showTags && !disabled;
+  var cls = cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", readOnly && 'readonly', invalid && 'invalid', disabled && prefixCls + "--disabled", wrap && prefixCls + "--wrap");
+  return /*#__PURE__*/React.createElement(ResizeDetector, {
+    skipOnMount: false,
+    onResize: function onResize(w) {
+      if (w) {
+        setContainerWidth(w);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls,
+    onMouseOver: function onMouseOver(evt) {
+      trySetHover(true);
+      _onMouseOver === null || _onMouseOver === void 0 ? void 0 : _onMouseOver(evt);
+    },
+    onMouseLeave: function onMouseLeave(evt) {
+      trySetHover(false);
+      _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(evt);
+    }
+  }, rest), showTags ? /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__tags"
+  }, mergedTagList.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(MockTag, {
+      hidden: wrap ? false : index > tagMaxCount,
+      key: option.id,
+      prefixCls: prefixCls,
+      disabled: disabled,
+      option: option,
+      value: value,
+      displayRender: displayRender,
+      tryChangeValue: tryChangeValue,
+      onTagResize: function onTagResize(id, w) {
+        return setTagsWidth(function (prev) {
+          var _Object$assign;
+
+          return Object.assign(Object.assign({}, prev), (_Object$assign = {}, _Object$assign[id] = w, _Object$assign));
+        });
+      }
+    });
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__placeholder"
+  }, placeholder), /*#__PURE__*/React.createElement(ResizeDetector, {
+    skipOnMount: false,
+    onResize: function onResize(w) {
+      if (w) {
+        setSuffixWidth(w);
+      }
+    }
+  }, !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__suffix"
+  }, showTagCount ? /*#__PURE__*/React.createElement("span", {
+    className: cx(prefixCls + "__tag--total"),
+    onClick: handleExpand
+  }, "" + (tagCount > 99 ? '99+' : tagCount)) : null, showClearableIcon && hover ? /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__clear",
+    role: "button",
+    tabIndex: -1,
+    onClick: handleClear
+  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : suffix) : null)));
+});
+
+if (__DEV__) {
+  TagInputMock.displayName = 'TagInputMock';
+}
+
+var hiddenStyle = {
+  position: 'absolute',
+  opacity: 0,
+  width: 0,
+  height: 0,
+  overflow: 'hidden',
+  display: 'none'
+};
+
+function MockTag(_ref) {
+  var prefixCls = _ref.prefixCls,
+      option = _ref.option,
+      disabled = _ref.disabled,
+      value = _ref.value,
+      onTagResize = _ref.onTagResize,
+      tryChangeValue = _ref.tryChangeValue,
+      displayRender = _ref.displayRender,
+      _ref$hidden = _ref.hidden,
+      hidden = _ref$hidden === void 0 ? false : _ref$hidden;
+  var title = isFunction(displayRender) ? displayRender(option) : true;
+  var closeable = !option.disabled;
+  return /*#__PURE__*/React.createElement(ResizeDetector, {
+    skipOnMount: false,
+    onResize: function onResize(width) {
+      // 隐藏后就不允许设置 tagSize，避免无限循环触发“宽度计算响应式策略”
+      if (hidden) return;
+
+      if (width !== undefined) {
+        onTagResize(option.id, width);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'inline-block'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__tag",
+    style: hidden ? hiddenStyle : undefined,
+    key: option.id
+  }, /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__tag-content"
+  }, title === true ? option.title : title), closeable ? /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__tag-closed",
+    onClick: function onClick(evt) {
+      if (disabled) return;
+      evt.stopPropagation();
+      var nextValue = value.filter(function (id) {
+        return id !== option.id;
+      });
+      tryChangeValue(nextValue);
+    }
+  }, /*#__PURE__*/React.createElement(CloseOutlined, null)) : null)));
+}
+
+export { TagInputMock };
+//# sourceMappingURL=TagInputMock.js.map

package/lib/esm/TagInputMock.js.map

@@ -0,0 +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

@@ -9,4 +9,5 @@
  */
 import './styles/index.scss.js';
 export { TagInput, TagInput as default } from './TagInput.js';
+export { TagInputMock } from './TagInputMock.js';
 //# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/lib/esm/styles/index.scss.js

@@ -7,7 +7,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-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";
+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";
 
 var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
 

package/lib/types/TagInput.d.ts

@@ -4,8 +4,8 @@ import { HiBaseHTMLProps } from '@hi-ui/core';
 /**
  * TODO: What is TagInput
  */
-export declare const TagInput: React.ForwardRefExoticComponent<Pick<TagInputProps, string | number> & React.RefAttributes<HTMLDivElement | null>>;
-export interface TagInputProps extends HiBaseHTMLProps {
+export declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface TagInputProps extends Omit<HiBaseHTMLProps<'div'>, 'defaultValue' | 'onChange' | 'value'> {
     /**
      * 设置当前多选值
      */
@@ -46,4 +46,8 @@ export interface TagInputProps extends HiBaseHTMLProps {
      * tag 列表数据源
      */
     data?: TagInputOption[];
+    /**
+     * 点击清空 tags 回调
+     */
+    onClear?: () => void;
 }

package/lib/types/TagInputMock.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+import { TagInputOption } from './types';
+import { HiBaseHTMLFieldProps } from '@hi-ui/core';
+/**
+ * TODO: What is TagInputMock
+ */
+export declare const TagInputMock: React.ForwardRefExoticComponent<TagInputMockProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface TagInputMockProps extends Omit<HiBaseHTMLFieldProps<'div'>, 'defaultValue' | 'onChange' | 'value'> {
+    /**
+     * 设置当前多选值
+     */
+    value?: React.ReactText[];
+    /**
+     * 设置当前多选值默认值
+     */
+    defaultValue?: React.ReactText[];
+    /**
+     * 多选值改变时的回调
+     */
+    onChange?: (values: React.ReactText[]) => void;
+    /**
+     * 是否可清空	boolean	true | false	true
+     */
+    clearable?: boolean;
+    /**
+     * 是否禁止使用	boolean	true | false	false
+     */
+    disabled?: boolean;
+    /**
+     * 自定义选择后触发器所展示的内容
+     */
+    displayRender?: (checkedOption: TagInputOption) => React.ReactNode;
+    /**
+     * 输入框占位符
+     */
+    placeholder?: string;
+    /**
+     * 输入框后置内容
+     */
+    suffix?: React.ReactNode;
+    /**
+     * tag 列表数据源
+     */
+    data?: TagInputOption[];
+    /**
+     * 点击清空 tags 回调
+     */
+    onClear?: () => void;
+    /**
+     * 设置 tag 的默认宽度
+     */
+    tagWidth?: number;
+    /**
+     * 是否聚焦
+     */
+    focused?: boolean;
+    /**
+     * 开启输入框只读
+     */
+    readOnly?: boolean;
+    /**
+     * 设置展现形式
+     */
+    appearance?: 'outline' | 'unset' | 'filled';
+    /**
+     * 设置输入框尺寸
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * 是否开启换行全展示
+     */
+    wrap?: boolean;
+    onExpand?: () => void;
+}

package/lib/types/index.d.ts

@@ -1,3 +1,4 @@
 import './styles/index.scss';
 export * from './TagInput';
 export { TagInput as default } from './TagInput';
+export * from './TagInputMock';

package/lib/types/use-tag-input-mock.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const useTagInputMock: <T>(tags: T[], ref: React.MutableRefObject<HTMLDivElement | null>) => readonly [number | undefined];
+export declare const useResizeWidth: <T extends Element>(ref: React.MutableRefObject<T | null>) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tag-input",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.13",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,23 +43,26 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/classname": "^4.0.0-alpha.0",
-    "@hi-ui/core": "^4.0.0-alpha.2",
-    "@hi-ui/core-css": "^4.0.0-alpha.0",
-    "@hi-ui/env": "^4.0.0-alpha.0",
-    "@hi-ui/icons": "^4.0.0-alpha.8",
-    "@hi-ui/use-merge-refs": "^4.0.0-alpha.2",
-    "@hi-ui/use-outside-click": "^4.0.0-alpha.4",
-    "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.5"
+    "@hi-ui/classname": "^4.0.0-alpha.3",
+    "@hi-ui/core": "^4.0.0-alpha.12",
+    "@hi-ui/core-css": "^4.0.0-alpha.10",
+    "@hi-ui/env": "^4.0.0-alpha.5",
+    "@hi-ui/icons": "^4.0.0-alpha.18",
+    "@hi-ui/type-assertion": "^4.0.0-alpha.13",
+    "@hi-ui/use-latest": "^4.0.0-alpha.4",
+    "@hi-ui/use-merge-refs": "^4.0.0-alpha.4",
+    "@hi-ui/use-outside-click": "^4.0.0-alpha.7",
+    "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.12",
+    "react-resize-detector": "^6.7.6"
   },
   "peerDependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@hi-ui/hi-build": "^4.0.0-alpha.0",
+    "@hi-ui/hi-build": "^4.0.0-alpha.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "0e89a6d183d2f2c5901a9c2bb7f88b30d5e2b193"
+  "gitHead": "4fe4855aa7b3180a4e30ffa0972ac39a04947b4b"
 }