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

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,294 @@
+/** @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$clearable = _a.clearable,
+      clearable = _a$clearable === void 0 ? false : _a$clearable,
+      _a$disabled = _a.disabled,
+      disabled = _a$disabled === void 0 ? false : _a$disabled,
+      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,
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "clearable", "disabled", "suffix", "tagWidth", "displayRender", "onMouseOver", "onMouseLeave", "onClear"]);
+
+  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 () {
+    return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
+  }, [tagList, tagWidth, containerWidth]);
+  var showTags = mergedTagList.length > 0;
+
+  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]); // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
+
+  var showClearableIcon = clearable && showTags && !disabled;
+  var cls = classname.cx(prefixCls, className, disabled && 'disabled');
+  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: 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 || showTags ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: prefixCls + "__suffix"
+  }, showTags ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: classname.cx(prefixCls + "__tag--total")
+  }, "" + (tagCount > 99 ? '99+' : tagCount)) : 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)) : 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","clearable","disabled","suffix","tagWidth","displayRender","onMouseOver","onMouseLeave","onClear","rest","useUncontrolledState","tryChangeValue","tagList","useMemo","map","id","find","item","title","tagCount","length","useState","containerWidth","setContainerWidth","mergedTagList","slice","Math","min","showTags","tagsWidth","setTagsWidth","getTagWidth","useCallback","index","suffixWidth","setSuffixWidth","tagMaxCount","setTagMaxCount","useLayoutEffect","isArrayNonEmpty","len","lastIndex","totalWidth","i","currentTagWidth","undefined","onClearLatest","useLatestCallback","handleClear","evt","stopPropagation","hover","setHover","trySetHover","hovered","showClearableIcon","cls","cx","React","ResizeDetector","skipOnMount","onResize","w","option","MockTag","hidden","key","onTagResize","prev","tabIndex","onClick","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.hi-v4-tag-input {\n  position: relative;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 1;\n          flex: 1 1; }\n.hi-v4-tag-input__container {\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    width: 100%;\n    min-width: 160px;\n    font-size: 14px;\n    vertical-align: middle;\n    color: #000;\n    color: var(--hi-v4-color-static-black, #000);\n    border: 1px solid transparent;\n    background-color: #fff;\n    background-color: var(--hi-v4-color-static-white, #fff);\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s;\n    padding: 4px 10px;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    min-height: 32px;\n    overflow: hidden;\n    border-color: #d1d5db;\n    border-color: var(--hi-v4-color-gray-300, #d1d5db);\n    border-radius: 4px; }\n.hi-v4-tag-input__container:not(.disabled):hover {\n      border-color: #4387f4;\n      border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input__container:not(.disabled).focused {\n      border-color: #4387f4;\n      border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input__container.disabled {\n      cursor: not-allowed;\n      color: #6b7280;\n      color: var(--hi-v4-color-gray-500, #6b7280);\n      background-color: #f3f4f6;\n      background-color: var(--hi-v4-color-gray-100, #f3f4f6); }\n.hi-v4-tag-input__container.disabled .hi-v4-tag-input__tag {\n        background-color: #e5e7eb;\n        background-color: var(--hi-v4-color-gray-200, #e5e7eb); }\n.hi-v4-tag-input__placeholder {\n    color: #6b7280;\n    color: var(--hi-v4-color-gray-500, #6b7280); }\n.hi-v4-tag-input__suffix {\n    font-size: 16px;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    min-width: 32px; }\n.hi-v4-tag-input__clear {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    width: 16px;\n    height: 16px;\n    font-size: 14px;\n    color: #6b7280;\n    color: var(--hi-v4-color-gray-500, #6b7280);\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    cursor: pointer;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tag-input__clear:hover {\n      color: #000;\n      color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input__value {\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    width: 100%;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    height: 22px;\n    line-height: 22px; }\n.hi-v4-tag-input__tags {\n    -webkit-box-flex: 0;\n        -ms-flex: 0 1 auto;\n            flex: 0 1 auto;\n    display: inline-block;\n    width: -webkit-fit-content;\n    width: -moz-fit-content;\n    width: fit-content;\n    white-space: nowrap;\n    height: 100%;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    margin-top: -4px;\n    position: relative; }\n.hi-v4-tag-input__tag, .hi-v4-tag-input__tag--left {\n    display: inline-block;\n    margin-right: 4px;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    padding: 0 8px;\n    vertical-align: middle;\n    font-size: 12px;\n    color: #333;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    background-color: #f3f4f6;\n    background-color: var(--hi-v4-color-gray-100, #f3f4f6);\n    border-radius: 4px; }\n.hi-v4-tag-input__tag--total {\n    display: inline-block;\n    margin-right: 6px;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    padding: 0 8px;\n    vertical-align: middle;\n    font-size: 12px;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    background-color: #f0f5fe;\n    background-color: var(--hi-v4-color-brandblue-100, #f0f5fe);\n    color: #4387f4;\n    color: var(--hi-v4-color-brandblue-500, #4387f4);\n    border-radius: 4px;\n    line-height: 22px;\n    cursor: pointer; }\n.hi-v4-tag-input__tag {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center; }\n.hi-v4-tag-input__tag-content {\n      display: inline-block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box; }\n.hi-v4-tag-input__tag-closed {\n      margin-left: 8px;\n      margin-left: var(--hi-v4-spacing-4, 8px);\n      font-size: 12px;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      color: #8e8e8e;\n      cursor: pointer; }\n.disabled .hi-v4-tag-input__tag-closed {\n        cursor: not-allowed; }\n.hi-v4-tag-input__tag--left {\n      margin: 0;\n      max-width: 54px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      vertical-align: middle; }\n.hi-v4-tag-input--nowrap .hi-v4-tag-input__value {\n    width: calc(100% - 64px);\n    overflow-x: hidden; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__value {\n    height: auto; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tags {\n    white-space: normal;\n    margin-top: -4px; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tag {\n    margin-top: 4px; }\n.hi-v4-tag-input--expanded {\n    position: relative; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: auto;\n      z-index: 1;\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1;\n              flex: 1 1;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      width: 100%;\n      min-width: 160px;\n      font-size: 14px;\n      vertical-align: middle;\n      color: #000;\n      color: var(--hi-v4-color-static-black, #000);\n      border: 1px solid transparent;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      padding: 3px 0;\n      display: -webkit-inline-box;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      -webkit-box-pack: justify;\n          -ms-flex-pack: justify;\n              justify-content: space-between;\n      -webkit-box-align: start;\n          -ms-flex-align: start;\n              align-items: flex-start;\n      min-height: 32px;\n      overflow: hidden;\n      border-radius: 4px;\n      border-color: #4387f4;\n      border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__value {\n        height: -webkit-fit-content;\n        height: -moz-fit-content;\n        height: fit-content;\n        max-height: 74px;\n        -webkit-box-align: stretch;\n            -ms-flex-align: stretch;\n                align-items: stretch;\n        overflow: scroll;\n        padding-left: 10px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tags {\n        white-space: normal;\n        margin-top: -4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tag {\n        margin-top: 4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__suffix {\n        -webkit-box-align: start;\n            -ms-flex-align: start;\n                align-items: flex-start;\n        padding: 4px 10px 4px 0;\n        position: sticky;\n        top: 0; }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tag-input-mock {\n  position: relative;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 1;\n          flex: 1 1;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  width: 100%;\n  min-width: 160px;\n  font-size: 14px;\n  vertical-align: middle;\n  color: #000;\n  color: var(--hi-v4-color-static-black, #000);\n  border: 1px solid transparent;\n  background-color: #fff;\n  background-color: var(--hi-v4-color-static-white, #fff);\n  -webkit-transition: all 0.3s;\n  transition: all 0.3s;\n  padding: 0 10px;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  min-height: 32px;\n  overflow: hidden;\n  border-color: #d1d5db;\n  border-color: var(--hi-v4-color-gray-300, #d1d5db);\n  border-radius: 4px; }\n.hi-v4-tag-input-mock:not(.disabled):hover {\n    border-color: #4387f4;\n    border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input-mock:not(.disabled).focused {\n    border-color: #4387f4;\n    border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input-mock.disabled {\n    cursor: not-allowed;\n    color: #6b7280;\n    color: var(--hi-v4-color-gray-500, #6b7280);\n    background-color: #f3f4f6;\n    background-color: var(--hi-v4-color-gray-100, #f3f4f6); }\n.hi-v4-tag-input-mock.disabled .hi-v4-tag-input-mock__tag {\n      background-color: #e5e7eb;\n      background-color: var(--hi-v4-color-gray-200, #e5e7eb); }\n.hi-v4-tag-input-mock__placeholder {\n    color: #6b7280;\n    color: var(--hi-v4-color-gray-500, #6b7280); }\n.hi-v4-tag-input-mock__suffix {\n    font-size: 16px;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    min-width: 32px;\n    -ms-flex-negative: 0;\n        flex-shrink: 0; }\n.hi-v4-tag-input-mock__clear {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    width: 16px;\n    height: 16px;\n    font-size: 14px;\n    color: #6b7280;\n    color: var(--hi-v4-color-gray-500, #6b7280);\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    cursor: pointer;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tag-input-mock__clear:hover {\n      color: #000;\n      color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input-mock__value {\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    height: 22px;\n    line-height: 22px;\n    -ms-flex-negative: 1;\n        flex-shrink: 1; }\n.hi-v4-tag-input-mock__tags {\n    position: relative;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    white-space: nowrap;\n    overflow: hidden; }\n.hi-v4-tag-input-mock__tag--total {\n    display: inline-block;\n    margin-right: 6px;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    padding: 0 8px;\n    vertical-align: middle;\n    font-size: 12px;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    background-color: #f0f5fe;\n    background-color: var(--hi-v4-color-brandblue-100, #f0f5fe);\n    color: #4387f4;\n    color: var(--hi-v4-color-brandblue-500, #4387f4);\n    border-radius: 4px;\n    line-height: 22px;\n    cursor: pointer; }\n.hi-v4-tag-input-mock__tag {\n    margin-right: 4px;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    padding: 0 8px;\n    vertical-align: middle;\n    font-size: 12px;\n    color: #333;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    background-color: #f3f4f6;\n    background-color: var(--hi-v4-color-gray-100, #f3f4f6);\n    border-radius: 4px;\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: none;\n            flex: none;\n    max-width: 100%;\n    height: 24px;\n    margin-top: 2px;\n    margin-bottom: 2px;\n    line-height: 22px; }\n.hi-v4-tag-input-mock__tag-content {\n      display: inline-block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box; }\n.hi-v4-tag-input-mock__tag-closed {\n      margin-left: 8px;\n      margin-left: var(--hi-v4-spacing-4, 8px);\n      font-size: 12px;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      color: #8e8e8e;\n      cursor: pointer; }\n.disabled .hi-v4-tag-input-mock__tag-closed {\n        cursor: not-allowed; }\n";
 
 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,267 @@
+/** @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$clearable = _a.clearable,
+      clearable = _a$clearable === void 0 ? false : _a$clearable,
+      _a$disabled = _a.disabled,
+      disabled = _a$disabled === void 0 ? false : _a$disabled,
+      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,
+      rest = __rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "clearable", "disabled", "suffix", "tagWidth", "displayRender", "onMouseOver", "onMouseLeave", "onClear"]);
+
+  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 () {
+    return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
+  }, [tagList, tagWidth, containerWidth]);
+  var showTags = mergedTagList.length > 0;
+
+  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]); // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
+
+  var showClearableIcon = clearable && showTags && !disabled;
+  var cls = cx(prefixCls, className, disabled && 'disabled');
+  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: 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 || showTags ? /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__suffix"
+  }, showTags ? /*#__PURE__*/React.createElement("span", {
+    className: cx(prefixCls + "__tag--total")
+  }, "" + (tagCount > 99 ? '99+' : tagCount)) : showClearableIcon && hover ? /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__clear",
+    role: "button",
+    tabIndex: -1,
+    onClick: handleClear
+  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : 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","clearable","disabled","suffix","tagWidth","displayRender","onMouseOver","onMouseLeave","onClear","rest","useUncontrolledState","tryChangeValue","tagList","useMemo","map","id","find","item","title","tagCount","length","useState","containerWidth","setContainerWidth","mergedTagList","slice","Math","min","showTags","tagsWidth","setTagsWidth","getTagWidth","useCallback","index","suffixWidth","setSuffixWidth","tagMaxCount","setTagMaxCount","useLayoutEffect","isArrayNonEmpty","len","lastIndex","totalWidth","i","currentTagWidth","undefined","onClearLatest","useLatestCallback","handleClear","evt","stopPropagation","hover","setHover","trySetHover","hovered","showClearableIcon","cls","cx","React","ResizeDetector","skipOnMount","onResize","w","option","MockTag","hidden","key","onTagResize","prev","tabIndex","onClick","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.hi-v4-tag-input {\n  position: relative;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 1;\n          flex: 1 1; }\n.hi-v4-tag-input__container {\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    width: 100%;\n    min-width: 160px;\n    font-size: 14px;\n    vertical-align: middle;\n    color: #000;\n    color: var(--hi-v4-color-static-black, #000);\n    border: 1px solid transparent;\n    background-color: #fff;\n    background-color: var(--hi-v4-color-static-white, #fff);\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s;\n    padding: 4px 10px;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    min-height: 32px;\n    overflow: hidden;\n    border-color: #d1d5db;\n    border-color: var(--hi-v4-color-gray-300, #d1d5db);\n    border-radius: 4px; }\n.hi-v4-tag-input__container:not(.disabled):hover {\n      border-color: #4387f4;\n      border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input__container:not(.disabled).focused {\n      border-color: #4387f4;\n      border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input__container.disabled {\n      cursor: not-allowed;\n      color: #6b7280;\n      color: var(--hi-v4-color-gray-500, #6b7280);\n      background-color: #f3f4f6;\n      background-color: var(--hi-v4-color-gray-100, #f3f4f6); }\n.hi-v4-tag-input__container.disabled .hi-v4-tag-input__tag {\n        background-color: #e5e7eb;\n        background-color: var(--hi-v4-color-gray-200, #e5e7eb); }\n.hi-v4-tag-input__placeholder {\n    color: #6b7280;\n    color: var(--hi-v4-color-gray-500, #6b7280); }\n.hi-v4-tag-input__suffix {\n    font-size: 16px;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    min-width: 32px; }\n.hi-v4-tag-input__clear {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    width: 16px;\n    height: 16px;\n    font-size: 14px;\n    color: #6b7280;\n    color: var(--hi-v4-color-gray-500, #6b7280);\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    cursor: pointer;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tag-input__clear:hover {\n      color: #000;\n      color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input__value {\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    width: 100%;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    height: 22px;\n    line-height: 22px; }\n.hi-v4-tag-input__tags {\n    -webkit-box-flex: 0;\n        -ms-flex: 0 1 auto;\n            flex: 0 1 auto;\n    display: inline-block;\n    width: -webkit-fit-content;\n    width: -moz-fit-content;\n    width: fit-content;\n    white-space: nowrap;\n    height: 100%;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    margin-top: -4px;\n    position: relative; }\n.hi-v4-tag-input__tag, .hi-v4-tag-input__tag--left {\n    display: inline-block;\n    margin-right: 4px;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    padding: 0 8px;\n    vertical-align: middle;\n    font-size: 12px;\n    color: #333;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    background-color: #f3f4f6;\n    background-color: var(--hi-v4-color-gray-100, #f3f4f6);\n    border-radius: 4px; }\n.hi-v4-tag-input__tag--total {\n    display: inline-block;\n    margin-right: 6px;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    padding: 0 8px;\n    vertical-align: middle;\n    font-size: 12px;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    background-color: #f0f5fe;\n    background-color: var(--hi-v4-color-brandblue-100, #f0f5fe);\n    color: #4387f4;\n    color: var(--hi-v4-color-brandblue-500, #4387f4);\n    border-radius: 4px;\n    line-height: 22px;\n    cursor: pointer; }\n.hi-v4-tag-input__tag {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center; }\n.hi-v4-tag-input__tag-content {\n      display: inline-block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box; }\n.hi-v4-tag-input__tag-closed {\n      margin-left: 8px;\n      margin-left: var(--hi-v4-spacing-4, 8px);\n      font-size: 12px;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      color: #8e8e8e;\n      cursor: pointer; }\n.disabled .hi-v4-tag-input__tag-closed {\n        cursor: not-allowed; }\n.hi-v4-tag-input__tag--left {\n      margin: 0;\n      max-width: 54px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      vertical-align: middle; }\n.hi-v4-tag-input--nowrap .hi-v4-tag-input__value {\n    width: calc(100% - 64px);\n    overflow-x: hidden; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__value {\n    height: auto; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tags {\n    white-space: normal;\n    margin-top: -4px; }\n.hi-v4-tag-input--wrap .hi-v4-tag-input__tag {\n    margin-top: 4px; }\n.hi-v4-tag-input--expanded {\n    position: relative; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: auto;\n      z-index: 1;\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1;\n              flex: 1 1;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      width: 100%;\n      min-width: 160px;\n      font-size: 14px;\n      vertical-align: middle;\n      color: #000;\n      color: var(--hi-v4-color-static-black, #000);\n      border: 1px solid transparent;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      padding: 3px 0;\n      display: -webkit-inline-box;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      -webkit-box-pack: justify;\n          -ms-flex-pack: justify;\n              justify-content: space-between;\n      -webkit-box-align: start;\n          -ms-flex-align: start;\n              align-items: flex-start;\n      min-height: 32px;\n      overflow: hidden;\n      border-radius: 4px;\n      border-color: #4387f4;\n      border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__value {\n        height: -webkit-fit-content;\n        height: -moz-fit-content;\n        height: fit-content;\n        max-height: 74px;\n        -webkit-box-align: stretch;\n            -ms-flex-align: stretch;\n                align-items: stretch;\n        overflow: scroll;\n        padding-left: 10px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tags {\n        white-space: normal;\n        margin-top: -4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__tag {\n        margin-top: 4px; }\n.hi-v4-tag-input--expanded .hi-v4-tag-input__container__expand .hi-v4-tag-input__suffix {\n        -webkit-box-align: start;\n            -ms-flex-align: start;\n                align-items: flex-start;\n        padding: 4px 10px 4px 0;\n        position: sticky;\n        top: 0; }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tag-input-mock {\n  position: relative;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 1;\n          flex: 1 1;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  width: 100%;\n  min-width: 160px;\n  font-size: 14px;\n  vertical-align: middle;\n  color: #000;\n  color: var(--hi-v4-color-static-black, #000);\n  border: 1px solid transparent;\n  background-color: #fff;\n  background-color: var(--hi-v4-color-static-white, #fff);\n  -webkit-transition: all 0.3s;\n  transition: all 0.3s;\n  padding: 0 10px;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  min-height: 32px;\n  overflow: hidden;\n  border-color: #d1d5db;\n  border-color: var(--hi-v4-color-gray-300, #d1d5db);\n  border-radius: 4px; }\n.hi-v4-tag-input-mock:not(.disabled):hover {\n    border-color: #4387f4;\n    border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input-mock:not(.disabled).focused {\n    border-color: #4387f4;\n    border-color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tag-input-mock.disabled {\n    cursor: not-allowed;\n    color: #6b7280;\n    color: var(--hi-v4-color-gray-500, #6b7280);\n    background-color: #f3f4f6;\n    background-color: var(--hi-v4-color-gray-100, #f3f4f6); }\n.hi-v4-tag-input-mock.disabled .hi-v4-tag-input-mock__tag {\n      background-color: #e5e7eb;\n      background-color: var(--hi-v4-color-gray-200, #e5e7eb); }\n.hi-v4-tag-input-mock__placeholder {\n    color: #6b7280;\n    color: var(--hi-v4-color-gray-500, #6b7280); }\n.hi-v4-tag-input-mock__suffix {\n    font-size: 16px;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    min-width: 32px;\n    -ms-flex-negative: 0;\n        flex-shrink: 0; }\n.hi-v4-tag-input-mock__clear {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    width: 16px;\n    height: 16px;\n    font-size: 14px;\n    color: #6b7280;\n    color: var(--hi-v4-color-gray-500, #6b7280);\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    cursor: pointer;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tag-input-mock__clear:hover {\n      color: #000;\n      color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-tag-input-mock__value {\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    height: 22px;\n    line-height: 22px;\n    -ms-flex-negative: 1;\n        flex-shrink: 1; }\n.hi-v4-tag-input-mock__tags {\n    position: relative;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    white-space: nowrap;\n    overflow: hidden; }\n.hi-v4-tag-input-mock__tag--total {\n    display: inline-block;\n    margin-right: 6px;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    padding: 0 8px;\n    vertical-align: middle;\n    font-size: 12px;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    background-color: #f0f5fe;\n    background-color: var(--hi-v4-color-brandblue-100, #f0f5fe);\n    color: #4387f4;\n    color: var(--hi-v4-color-brandblue-500, #4387f4);\n    border-radius: 4px;\n    line-height: 22px;\n    cursor: pointer; }\n.hi-v4-tag-input-mock__tag {\n    margin-right: 4px;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    padding: 0 8px;\n    vertical-align: middle;\n    font-size: 12px;\n    color: #333;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    background-color: #f3f4f6;\n    background-color: var(--hi-v4-color-gray-100, #f3f4f6);\n    border-radius: 4px;\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: none;\n            flex: none;\n    max-width: 100%;\n    height: 24px;\n    margin-top: 2px;\n    margin-bottom: 2px;\n    line-height: 22px; }\n.hi-v4-tag-input-mock__tag-content {\n      display: inline-block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box; }\n.hi-v4-tag-input-mock__tag-closed {\n      margin-left: 8px;\n      margin-left: var(--hi-v4-spacing-4, 8px);\n      font-size: 12px;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      color: #8e8e8e;\n      cursor: pointer; }\n.disabled .hi-v4-tag-input-mock__tag-closed {\n        cursor: not-allowed; }\n";
 
 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,53 @@
+import React from 'react';
+import { TagInputOption } from './types';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+/**
+ * TODO: What is TagInputMock
+ */
+export declare const TagInputMock: React.ForwardRefExoticComponent<TagInputMockProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface TagInputMockProps extends Omit<HiBaseHTMLProps<'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;
+}

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.5",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,14 +43,17 @@
     "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/classname": "^4.0.0-alpha.2",
+    "@hi-ui/core": "^4.0.0-alpha.5",
+    "@hi-ui/core-css": "^4.0.0-alpha.3",
     "@hi-ui/env": "^4.0.0-alpha.0",
-    "@hi-ui/icons": "^4.0.0-alpha.8",
+    "@hi-ui/icons": "^4.0.0-alpha.10",
+    "@hi-ui/type-assertion": "^4.0.0-alpha.7",
+    "@hi-ui/use-latest": "^4.0.0-alpha.2",
     "@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/use-uncontrolled-state": "^4.0.0-alpha.6",
+    "react-resize-detector": "^6.7.6"
   },
   "peerDependencies": {
     "react": "^17.0.1",
@@ -61,5 +64,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "0e89a6d183d2f2c5901a9c2bb7f88b30d5e2b193"
+  "gitHead": "0135b7a54f5436ac6e5a8ab88daf8468591e18ac"
 }