@douyinfe/semi-ui 2.25.0-beta.0 → 2.25.1

package/dist/umd/semi-ui.js

@@ -43979,7 +43979,7 @@ class tagInput_TagInput extends baseComponent_BaseComponent {
   }
 
   blur() {
-    this.inputRef.current.blur(); // unregister clickOutside event 
+    this.inputRef.current.blur(); // unregister clickOutside event
 
     this.foundation.clickOutsideCallBack();
   }
@@ -43994,7 +43994,7 @@ class tagInput_TagInput extends baseComponent_BaseComponent {
     });
 
     if (!disabled) {
-      // register clickOutside event 
+      // register clickOutside event
       this.foundation.handleClick();
     }
   }
@@ -44020,13 +44020,15 @@ class tagInput_TagInput extends baseComponent_BaseComponent {
       ["".concat(tagInput_prefixCls, "-disabled")]: disabled,
       ["".concat(tagInput_prefixCls, "-hover")]: hovering && !disabled,
       ["".concat(tagInput_prefixCls, "-error")]: validateStatus === 'error',
-      ["".concat(tagInput_prefixCls, "-warning")]: validateStatus === 'warning'
+      ["".concat(tagInput_prefixCls, "-warning")]: validateStatus === 'warning',
+      ["".concat(tagInput_prefixCls, "-small")]: size === 'small',
+      ["".concat(tagInput_prefixCls, "-large")]: size === 'large'
     });
     const inputCls = classnames_default()("".concat(tagInput_prefixCls, "-wrapper-input"), "".concat(tagInput_prefixCls, "-wrapper-input-").concat(size));
-    const wrapperCls = classnames_default()("".concat(tagInput_prefixCls, "-wrapper"), "".concat(tagInput_prefixCls, "-wrapper-").concat(size));
+    const wrapperCls = classnames_default()("".concat(tagInput_prefixCls, "-wrapper"));
     return (
       /*#__PURE__*/
-      // eslint-disable-next-line 
+      // eslint-disable-next-line
       external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         ref: this.tagInputRef,
         style: style,
@@ -66972,7 +66974,9 @@ const overflowList_constants_strings = {
   BOUNDARY_MAP,
   OVERFLOW_DIR
 };
-const overflowList_constants_numbers = {};
+const overflowList_constants_numbers = {
+  MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
 
 // EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js
 var ResizeObserver_es = __webpack_require__("LaGA");
@@ -67191,6 +67195,13 @@ class foundation_OverflowListFoundation extends foundation {
       } = this.getProps();
       return renderMode === 'scroll';
     };
+
+    this.getReversedItems = () => {
+      const {
+        items
+      } = this.getProps();
+      return cloneDeep_default()(items).reverse();
+    };
   }
 
   getOverflowItem() {
@@ -67259,54 +67270,68 @@ class foundation_OverflowListFoundation extends foundation {
     this._adapter.notifyIntersect(res);
   }
 
-  handlePartition(growing) {
+  handleCollapseOverflow() {
     const {
-      direction,
-      overflow,
-      lastOverflowCount,
-      visible
+      minVisibleItems,
+      collapseFrom
+    } = this.getProps();
+    const {
+      overflowWidth,
+      containerWidth,
+      pivot: statePivot,
+      overflowStatus
     } = this.getStates();
     const {
-      minVisibleItems,
-      collapseFrom,
-      items
+      items,
+      onOverflow
     } = this.getProps();
-    let updateState = {};
+    let itemWidths = overflowWidth,
+        _pivot = 0;
+    let overflowed = false;
 
-    if (growing === OverflowDirection.NONE) {
-      updateState = {
-        direction: OverflowDirection.NONE
-      };
-    }
+    for (const size of this._adapter.getItemSizeMap().values()) {
+      itemWidths += size; // 触发overflow
 
-    if (growing === OverflowDirection.GROW) {
-      const updatedOverflowCount = direction === OverflowDirection.NONE ? overflow.length : lastOverflowCount;
-      updateState = {
-        direction: OverflowDirection.GROW,
-        lastOverflowCount: updatedOverflowCount,
-        overflow: [],
-        visible: items
-      };
-    }
+      if (itemWidths > containerWidth) {
+        overflowed = true;
+        break;
+      } // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
 
-    if (growing === OverflowDirection.SHRINK && visible.length > minVisibleItems) {
-      const collapseFromStart = collapseFrom === Boundary.START;
-      const newVisible = visible.slice();
-      const next = collapseFromStart ? newVisible.shift() : newVisible.pop();
 
-      if (next !== undefined) {
-        updateState = {
-          // set SHRINK mode unless a GROW is already in progress.
-          // GROW shows all items then shrinks until it settles, so we
-          // preserve the fact that the original trigger was a GROW.
-          direction: direction !== OverflowDirection.GROW ? OverflowDirection.SHRINK : direction,
-          overflow: collapseFromStart ? [...overflow, next] : [next, ...overflow],
-          visible: newVisible
-        };
+      if (_pivot === items.length - 1) {
+        this._adapter.updateStates({
+          overflowStatus: "normal",
+          pivot: items.length - 1,
+          visible: items,
+          overflow: []
+        });
+
+        break;
       }
+
+      _pivot++;
     }
 
-    this._adapter.updateStates(updateState);
+    if (overflowed) {
+      const pivot = Math.max(minVisibleItems, _pivot);
+      const isCollapseFromStart = collapseFrom === Boundary.START;
+      const visible = isCollapseFromStart ? this.getReversedItems().slice(0, pivot).reverse() : items.slice(0, pivot);
+      const overflow = isCollapseFromStart ? this.getReversedItems().slice(pivot).reverse() : items.slice(pivot);
+
+      this._adapter.updateStates({
+        overflowStatus: "overflowed",
+        pivot: pivot,
+        visible,
+        overflow
+      }); // trigger onOverflow
+
+
+      if (statePivot !== pivot) {
+        onOverflow(overflow);
+      }
+
+      return;
+    }
   }
 
 }
@@ -67320,7 +67345,6 @@ var overflowList = __webpack_require__("O1Tx");
 
 
 
-
 /* eslint-disable arrow-body-style */
 
 
@@ -67354,26 +67378,15 @@ class overflowList_OverflowList extends baseComponent_BaseComponent {
 
     this.resize = function () {
       let entries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      // if any parent is growing, assume we have more room than before
-      const growing = entries.some(entry => {
-        const previousWidth = _this.previousWidths.get(entry.target) || 0;
-        return entry.contentRect.width > previousWidth;
-      });
-
-      _this.repartition(growing);
-
-      entries.forEach(entry => _this.previousWidths.set(entry.target, entry.contentRect.width));
-    };
 
-    this.repartition = growing => {
-      // if not mounted or scroll mode, we do not
-      if (isNull_default()(this.spacer) || isUndefined_default()(this.spacer) || this.isScrollMode()) {
-        return;
-      } // spacer has flex-shrink and width 1px so if it's much smaller then we know to shrink
+      var _a;
 
+      const containerWidth = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target.clientWidth;
 
-      const state = growing ? overflowList_OverflowDirection.GROW : this.spacer.getBoundingClientRect().width < 0.9 ? overflowList_OverflowDirection.SHRINK : overflowList_OverflowDirection.NONE;
-      this.foundation.handlePartition(state);
+      _this.setState({
+        containerWidth,
+        overflowStatus: 'calculating'
+      });
     };
 
     this.reintersect = entries => {
@@ -67395,6 +67408,18 @@ class overflowList_OverflowList extends baseComponent_BaseComponent {
       return this.props.overflowRenderer(overflow);
     };
 
+    this.getItemKey = (item, defalutKey) => {
+      const {
+        itemKey
+      } = this.props;
+
+      if (isFunction_default()(itemKey)) {
+        return itemKey(item);
+      }
+
+      return get_default()(item, itemKey || 'key', defalutKey);
+    };
+
     this.renderItemList = () => {
       const {
         className,
@@ -67406,9 +67431,32 @@ class overflowList_OverflowList extends baseComponent_BaseComponent {
         collapseFrom
       } = this.props;
       const {
-        visible
+        visible,
+        overflowStatus
       } = this.state;
-      const overflow = this.renderOverflow();
+      let overflow = this.renderOverflow();
+
+      if (!this.isScrollMode()) {
+        if (Array.isArray(overflow)) {
+          overflow = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, overflow);
+        }
+
+        if ( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.isValidElement(overflow)) {
+          const child = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.cloneElement(overflow);
+          overflow = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(resizeObserver_ReactResizeObserver, {
+            onResize: _ref => {
+              let [entry] = _ref;
+              this.setState({
+                overflowWidth: entry.target.clientWidth,
+                overflowStatus: 'calculating'
+              });
+            }
+          }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+            className: "".concat(overflowList_prefixCls, "-overflow")
+          }, child));
+        }
+      }
+
       const inner = renderMode === RenderMode.SCROLL ? [overflow[0], /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         className: classnames_default()(wrapperClassName, "".concat(overflowList_prefixCls, "-scroll-wrapper")),
         ref: ref => {
@@ -67416,7 +67464,7 @@ class overflowList_OverflowList extends baseComponent_BaseComponent {
         },
         style: Object.assign({}, wrapperStyle),
         key: "".concat(overflowList_prefixCls, "-scroll-wrapper")
-      }, visible.map(visibleItemRenderer).map((item, ind) => {
+      }, visible.map(visibleItemRenderer).map(item => {
         const {
           forwardRef,
           key
@@ -67426,24 +67474,71 @@ class overflowList_OverflowList extends baseComponent_BaseComponent {
           'data-scrollkey': "".concat(key),
           key
         });
-      })), overflow[1]] : [collapseFrom === overflowList_Boundary.START ? overflow : null, visible.map(visibleItemRenderer), collapseFrom === overflowList_Boundary.END ? overflow : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        className: "".concat(overflowList_prefixCls, "-spacer"),
-        ref: ref => this.spacer = ref,
-        key: "".concat(overflowList_prefixCls, "-spacer")
-      })];
+      })), overflow[1]] : [collapseFrom === overflowList_Boundary.START ? overflow : null, visible.map((item, idx) => {
+        const {
+          key
+        } = item;
+        const element = visibleItemRenderer(item, idx);
+        const child = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.cloneElement(element);
+        return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(resizeObserver_ReactResizeObserver, {
+          key: key,
+          onResize: _ref2 => {
+            let [entry] = _ref2;
+            return this.onItemResize(entry, item, idx);
+          }
+        }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+          key: key,
+          className: "".concat(overflowList_prefixCls, "-item")
+        }, child));
+      }), collapseFrom === overflowList_Boundary.END ? overflow : null];
       const list = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement('div', {
         className: classnames_default()("".concat(overflowList_prefixCls), className),
-        style
+        style: Object.assign(Object.assign({}, style), renderMode === RenderMode.COLLAPSE ? {
+          maxWidth: '100%',
+          visibility: overflowStatus === "calculating" ? "hidden" : "visible"
+        } : null)
       }, ...inner);
       return list;
     };
 
+    this.onItemResize = (entry, item, idx) => {
+      const key = this.getItemKey(item, idx);
+      const width = this.itemSizeMap.get(key);
+
+      if (!width) {
+        this.itemSizeMap.set(key, entry.target.clientWidth);
+      } else if (width !== entry.target.clientWidth) {
+        // 某个item发生resize后，重新计算
+        this.itemSizeMap.set(key, entry.target.clientWidth);
+        this.setState({
+          overflowStatus: 'calculating'
+        });
+      }
+
+      const {
+        maxCount
+      } = this.state; // 已经按照最大值maxCount渲染完毕，触发真正的渲染。(-1 是overflow部分会占1)
+      // Already rendered maxCount items, trigger the real rendering. (-1 for the overflow part)
+
+      if (this.itemSizeMap.size === maxCount - 1) {
+        this.setState({
+          overflowStatus: 'calculating'
+        });
+      }
+    };
+
     this.state = {
       direction: overflowList_OverflowDirection.GROW,
       lastOverflowCount: 0,
       overflow: [],
-      visible: props.items,
-      visibleState: new Map()
+      visible: [],
+      containerWidth: 0,
+      visibleState: new Map(),
+      itemSizeMap: new Map(),
+      overflowStatus: "calculating",
+      pivot: 0,
+      overflowWidth: 0,
+      maxCount: 0
     };
     this.foundation = new overflowList_foundation(this.adapter);
     this.previousWidths = new Map();
@@ -67466,8 +67561,18 @@ class overflowList_OverflowList extends baseComponent_BaseComponent {
       // reset visible state if the above props change.
       newState.direction = overflowList_OverflowDirection.GROW;
       newState.lastOverflowCount = 0;
-      newState.overflow = [];
-      newState.visible = props.items;
+
+      if (props.renderMode === RenderMode.SCROLL) {
+        newState.visible = props.items;
+        newState.overflow = [];
+      } else {
+        newState.visible = [];
+        newState.overflow = [];
+      }
+
+      newState.pivot = 0;
+      newState.maxCount = 0;
+      newState.overflowStatus = "calculating";
     }
 
     return newState;
@@ -67485,45 +67590,45 @@ class overflowList_OverflowList extends baseComponent_BaseComponent {
       },
       notifyIntersect: res => {
         this.props.onIntersect && this.props.onIntersect(res);
-      }
+      },
+      getItemSizeMap: () => this.itemSizeMap
     });
   }
 
-  componentDidMount() {
-    this.repartition(false);
-  }
-
-  shouldComponentUpdate(_nextProps, nextState) {
-    // We want this component to always re-render, even when props haven't changed, so that
-    // changes in the renderers' behavior can be reflected.
-    // The following statement prevents re-rendering only in the case where the state changes
-    // identity (i.e. setState was called), but the state is still the same when
-    // shallow-compared to the previous state.
-    const currState = omit_default()(this.state, 'prevProps');
-
-    const comingState = omit_default()(nextState, 'prevProps');
-
-    return !(currState !== comingState && isEqual_default()(currState, comingState));
-  }
-
   componentDidUpdate(prevProps, prevState) {
     if (!isEqual_default()(prevProps.items, this.props.items)) {
       this.itemRefs = {};
     }
 
-    if (!isEqual_default()(omit_default()(prevState, 'prevProps'), omit_default()(this.state, 'prevProps'))) {
-      this.repartition(false);
-    }
-
     const {
-      direction,
       overflow,
-      lastOverflowCount
+      containerWidth,
+      visible,
+      overflowStatus
     } = this.state;
 
-    if ( // if a resize operation has just completed (transition to NONE)
-    direction === overflowList_OverflowDirection.NONE && direction !== prevState.direction && overflow.length !== lastOverflowCount) {
-      this.props.onOverflow && this.props.onOverflow(overflow);
+    if (this.isScrollMode() || overflowStatus !== "calculating") {
+      return;
+    }
+
+    if (visible.length === 0 && overflow.length === 0 && this.props.items.length !== 0) {
+      // 推测container最多能渲染的数量
+      // Figure out the maximum number of items in this container
+      const maxCount = Math.min(this.props.items.length, Math.floor(containerWidth / overflowList_constants_numbers.MINIMUM_HTML_ELEMENT_WIDTH)); // 如果collapseFrom是start, 第一次用来计算容量时，倒转列表顺序渲染
+      // If collapseFrom === start, render item from end to start. Figuring out how many items in the end could fit in container.
+
+      const isCollapseFromStart = this.props.collapseFrom === overflowList_Boundary.START;
+      const visible = isCollapseFromStart ? this.foundation.getReversedItems().slice(0, maxCount) : this.props.items.slice(0, maxCount);
+      const overflow = isCollapseFromStart ? this.foundation.getReversedItems().slice(maxCount) : this.props.items.slice(maxCount);
+      this.setState({
+        overflowStatus: 'calculating',
+        visible,
+        overflow,
+        maxCount: maxCount
+      });
+      this.itemSizeMap.clear();
+    } else {
+      this.foundation.handleCollapseOverflow();
     }
   }
 
@@ -67555,7 +67660,8 @@ overflowList_OverflowList.defaultProps = {
   overflowRenderer: () => null,
   renderMode: 'collapse',
   threshold: 0.75,
-  visibleItemRenderer: () => null
+  visibleItemRenderer: () => null,
+  onOverflow: () => null
 };
 overflowList_OverflowList.propTypes = {
   // if render in scroll mode, key is required in items
@@ -72534,7 +72640,8 @@ class select_Select extends baseComponent_BaseComponent {
       innerBottomSlot,
       loading,
       virtualize,
-      multiple
+      multiple,
+      emptyContent
     } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
 
     const visibleOptions = options.filter(item => item._show);
@@ -72557,7 +72664,11 @@ class select_Select extends baseComponent_BaseComponent {
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         id: "".concat(select_prefixcls, "-").concat(this.selectOptionListID),
-        className: classnames_default()("".concat(select_prefixcls, "-option-list-wrapper"), dropdownClassName),
+        className: classnames_default()({
+          // When emptyContent is null and the option is empty, there is no need for the drop-down option for the user,
+          // so there is no need to set padding through this className
+          ["".concat(select_prefixcls, "-option-list-wrapper")]: !(isEmpty && emptyContent === null)
+        }, dropdownClassName),
         style: style,
         ref: this.setOptionContainerEl,
         onKeyDown: e => this.foundation.handleContainerKeyDown(e)
@@ -102858,6 +102969,16 @@ var image_image = __webpack_require__("txvO");
 
 
 
+var image_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -102873,6 +102994,8 @@ var image_image = __webpack_require__("txvO");
 
 
 
+
+
 const image_prefixCls = image_constants_cssClasses.PREFIX;
 class image_Image extends baseComponent_BaseComponent {
   constructor(props) {
@@ -103022,15 +103145,23 @@ class image_Image extends baseComponent_BaseComponent {
       loadStatus,
       previewVisible
     } = this.state;
-    const {
+
+    const _b = this.props,
+          {
+      src: picSrc,
       width,
       height,
       alt,
       style,
       className,
       crossOrigin,
-      preview
-    } = this.props;
+      preview,
+      fallback,
+      placeholder,
+      imageID
+    } = _b,
+          restProps = image_rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID"]);
+
     const outerStyle = Object.assign({
       width,
       height
@@ -103048,7 +103179,7 @@ class image_Image extends baseComponent_BaseComponent {
         style: outerStyle,
         className: outerCls,
         onClick: this.handleClick
-      }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", {
+      }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", Object.assign({}, restProps, {
         src: this.isInGroup() && this.isLazyLoad() ? undefined : src,
         "data-src": src,
         alt: alt,
@@ -103061,7 +103192,7 @@ class image_Image extends baseComponent_BaseComponent {
         crossOrigin: crossOrigin,
         onError: this.handleError,
         onLoad: this.handleLoaded
-      }), loadStatus !== "success" && this.renderExtra(), canPreview && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(previewInner_PreviewInner, Object.assign({}, previewProps, {
+      })), loadStatus !== "success" && this.renderExtra(), canPreview && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(previewInner_PreviewInner, Object.assign({}, previewProps, {
         src: previewSrc,
         visible: previewVisible,
         onVisibleChange: this.handlePreviewVisibleChange,