@douyinfe/semi-ui 2.52.0-beta.1 → 2.53.0-beta.0

package/dist/umd/semi-ui.js

@@ -9125,42 +9125,6 @@ function clone(value) {
 module.exports = clone;
 
 
-/***/ }),
-
-/***/ "c2re":
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var baseClone = __webpack_require__("kn3Q");
-
-/** Used to compose bitmasks for cloning. */
-var CLONE_DEEP_FLAG = 1,
-    CLONE_SYMBOLS_FLAG = 4;
-
-/**
- * This method is like `_.clone` except that it recursively clones `value`.
- *
- * @static
- * @memberOf _
- * @since 1.0.0
- * @category Lang
- * @param {*} value The value to recursively clone.
- * @returns {*} Returns the deep cloned value.
- * @see _.clone
- * @example
- *
- * var objects = [{ 'a': 1 }, { 'b': 2 }];
- *
- * var deep = _.cloneDeep(objects);
- * console.log(deep[0] === objects[0]);
- * // => false
- */
-function cloneDeep(value) {
-  return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
-}
-
-module.exports = cloneDeep;
-
-
 /***/ }),
 
 /***/ "NdXQ":
@@ -18633,6 +18597,7 @@ class foundation_Tooltip extends foundation {
     return null;
   }
   calcPosStyle(props) {
+    var _a;
     const {
       spacing,
       isOverFlow
@@ -18683,6 +18648,10 @@ class foundation_Tooltip extends foundation {
     const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
     const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
     const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
+    const scaled = Math.abs((wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.width) - ((_a = this._adapter.getContainer()) === null || _a === void 0 ? void 0 : _a.clientWidth)) > 1;
+    if (scaled) {
+      SPACING = SPACING * wrapperRect.width / this._adapter.getContainer().clientWidth;
+    }
     switch (position) {
       case 'top':
         // left = middleX;
@@ -18799,6 +18768,12 @@ class foundation_Tooltip extends foundation {
     // Calculate container positioning relative to window
     left = left - containerRect.left;
     top = top - containerRect.top;
+    if (scaled) {
+      left /= wrapperRect.width / this._adapter.getContainer().clientWidth;
+    }
+    if (scaled) {
+      top /= wrapperRect.height / this._adapter.getContainer().clientHeight;
+    }
     /**
      * container为body时，如果position不为relative或absolute，这时trigger计算出的top/left会根据html定位（initial containing block）
      * 此时如果body有margin，则计算出的位置相对于body会有问题 fix issue #1368
@@ -19574,10 +19549,45 @@ const findAll = _ref4 => {
   return result;
 };
 
+;// CONCATENATED MODULE: ./_utils/semi-global.ts
+class SemiGlobal {
+  constructor() {
+    this.config = {};
+  }
+}
+/* harmony default export */ const semi_global = (new SemiGlobal());
 ;// CONCATENATED MODULE: ./_utils/index.tsx
 
 
 
+var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 
 
@@ -19731,12 +19741,59 @@ function getFocusableElements(node) {
   const focusableElements = Array.from(node.querySelectorAll(focusableSelectorsStr));
   return focusableElements;
 }
+function runAfterTicks(func, numberOfTicks) {
+  return __awaiter(this, void 0, void 0, function* () {
+    if (numberOfTicks === 0) {
+      yield func();
+      return;
+    } else {
+      yield new Promise(resolve => {
+        setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+          yield runAfterTicks(func, numberOfTicks - 1);
+          resolve();
+        }), 0);
+      });
+      return;
+    }
+  });
+}
 function getScrollbarWidth() {
   if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
     return window.innerWidth - document.documentElement.clientWidth;
   }
   return 0;
 }
+function getDefaultPropsFromGlobalConfig(componentName) {
+  let semiDefaultProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const getFromGlobalConfig = () => {
+    var _a, _b;
+    return ((_b = (_a = semi_global === null || semi_global === void 0 ? void 0 : semi_global.config) === null || _a === void 0 ? void 0 : _a.overrideDefaultProps) === null || _b === void 0 ? void 0 : _b[componentName]) || {};
+  };
+  return new Proxy(Object.assign({}, semiDefaultProps), {
+    get(target, key, receiver) {
+      const defaultPropsFromGlobal = getFromGlobalConfig();
+      if (key in defaultPropsFromGlobal) {
+        return defaultPropsFromGlobal[key];
+      }
+      return Reflect.get(target, key, receiver);
+    },
+    set(target, key, value, receiver) {
+      return Reflect.set(target, key, value, receiver);
+    },
+    ownKeys() {
+      const defaultPropsFromGlobal = getFromGlobalConfig();
+      return Array.from(new Set([...Reflect.ownKeys(semiDefaultProps), ...Object.keys(defaultPropsFromGlobal)]));
+    },
+    getOwnPropertyDescriptor(target, key) {
+      const defaultPropsFromGlobal = getFromGlobalConfig();
+      if (key in defaultPropsFromGlobal) {
+        return Reflect.getOwnPropertyDescriptor(defaultPropsFromGlobal, key);
+      } else {
+        return Reflect.getOwnPropertyDescriptor(target, key);
+      }
+    }
+  });
+}
 ;// CONCATENATED MODULE: ./configProvider/context.tsx
 
 const ConfigContext = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createContext({});
@@ -20710,7 +20767,8 @@ Tooltip.propTypes = {
   preventScroll: (prop_types_default()).bool,
   keepDOM: (prop_types_default()).bool
 };
-Tooltip.defaultProps = {
+Tooltip.__SemiComponentName__ = "Tooltip";
+Tooltip.defaultProps = getDefaultPropsFromGlobalConfig(Tooltip.__SemiComponentName__, {
   arrowBounding: numbers.ARROW_BOUNDING,
   autoAdjustOverflow: true,
   arrowPointAtCenter: true,
@@ -20736,7 +20794,7 @@ Tooltip.defaultProps = {
   disableFocusListener: false,
   disableArrowKeyDown: false,
   keepDOM: false
-};
+});
 // EXTERNAL MODULE: ../../node_modules/copy-text-to-clipboard/index.js
 var copy_text_to_clipboard = __webpack_require__("HDX/");
 var copy_text_to_clipboard_default = /*#__PURE__*/__webpack_require__.n(copy_text_to_clipboard);
@@ -22376,6 +22434,7 @@ var popover_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 const popover_positionSet = popover_constants_strings.POSITION_SET;
 const popover_triggerSet = popover_constants_strings.TRIGGER_SET;
 class Popover extends (external_root_React_commonjs2_react_commonjs_react_amd_react_default()).PureComponent {
@@ -22499,7 +22558,8 @@ Popover.propTypes = {
   guardFocus: (prop_types_default()).bool,
   disableArrowKeyDown: (prop_types_default()).bool
 };
-Popover.defaultProps = {
+Popover.__SemiComponentName__ = "Popover";
+Popover.defaultProps = getDefaultPropsFromGlobalConfig(Popover.__SemiComponentName__, {
   arrowBounding: constants_numbers.ARROW_BOUNDING,
   showArrow: false,
   autoAdjustOverflow: true,
@@ -22516,7 +22576,7 @@ Popover.defaultProps = {
   returnFocusOnClose: true,
   guardFocus: true,
   disableFocusListener: true
-};
+});
 /* harmony default export */ const popover_0 = (Popover);
 ;// CONCATENATED MODULE: ./typography/util.tsx
 
@@ -22648,945 +22708,23 @@ const getRenderText = function (originEle, rows) {
   return resText;
 };
 /* harmony default export */ const util = (getRenderText);
-;// CONCATENATED MODULE: ../../node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js
-/**
- * A collection of shims that provide minimal functionality of the ES6 collections.
- *
- * These implementations are not meant to be used outside of the ResizeObserver
- * modules as they cover only a limited range of use cases.
- */
-/* eslint-disable require-jsdoc, valid-jsdoc */
-var MapShim = (function () {
-    if (typeof Map !== 'undefined') {
-        return Map;
-    }
-    /**
-     * Returns index in provided array that matches the specified key.
-     *
-     * @param {Array<Array>} arr
-     * @param {*} key
-     * @returns {number}
-     */
-    function getIndex(arr, key) {
-        var result = -1;
-        arr.some(function (entry, index) {
-            if (entry[0] === key) {
-                result = index;
-                return true;
-            }
-            return false;
-        });
-        return result;
-    }
-    return /** @class */ (function () {
-        function class_1() {
-            this.__entries__ = [];
-        }
-        Object.defineProperty(class_1.prototype, "size", {
-            /**
-             * @returns {boolean}
-             */
-            get: function () {
-                return this.__entries__.length;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        /**
-         * @param {*} key
-         * @returns {*}
-         */
-        class_1.prototype.get = function (key) {
-            var index = getIndex(this.__entries__, key);
-            var entry = this.__entries__[index];
-            return entry && entry[1];
-        };
-        /**
-         * @param {*} key
-         * @param {*} value
-         * @returns {void}
-         */
-        class_1.prototype.set = function (key, value) {
-            var index = getIndex(this.__entries__, key);
-            if (~index) {
-                this.__entries__[index][1] = value;
-            }
-            else {
-                this.__entries__.push([key, value]);
-            }
-        };
-        /**
-         * @param {*} key
-         * @returns {void}
-         */
-        class_1.prototype.delete = function (key) {
-            var entries = this.__entries__;
-            var index = getIndex(entries, key);
-            if (~index) {
-                entries.splice(index, 1);
-            }
-        };
-        /**
-         * @param {*} key
-         * @returns {void}
-         */
-        class_1.prototype.has = function (key) {
-            return !!~getIndex(this.__entries__, key);
-        };
-        /**
-         * @returns {void}
-         */
-        class_1.prototype.clear = function () {
-            this.__entries__.splice(0);
-        };
-        /**
-         * @param {Function} callback
-         * @param {*} [ctx=null]
-         * @returns {void}
-         */
-        class_1.prototype.forEach = function (callback, ctx) {
-            if (ctx === void 0) { ctx = null; }
-            for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
-                var entry = _a[_i];
-                callback.call(ctx, entry[1], entry[0]);
-            }
-        };
-        return class_1;
-    }());
-})();
-
-/**
- * Detects whether window and document objects are available in current environment.
- */
-var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
-
-// Returns global object of a current environment.
-var global$1 = (function () {
-    if (typeof __webpack_require__.g !== 'undefined' && __webpack_require__.g.Math === Math) {
-        return __webpack_require__.g;
-    }
-    if (typeof self !== 'undefined' && self.Math === Math) {
-        return self;
-    }
-    if (typeof window !== 'undefined' && window.Math === Math) {
-        return window;
-    }
-    // eslint-disable-next-line no-new-func
-    return Function('return this')();
-})();
-
-/**
- * A shim for the requestAnimationFrame which falls back to the setTimeout if
- * first one is not supported.
- *
- * @returns {number} Requests' identifier.
- */
-var requestAnimationFrame$1 = (function () {
-    if (typeof requestAnimationFrame === 'function') {
-        // It's required to use a bounded function because IE sometimes throws
-        // an "Invalid calling object" error if rAF is invoked without the global
-        // object on the left hand side.
-        return requestAnimationFrame.bind(global$1);
-    }
-    return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
-})();
-
-// Defines minimum timeout before adding a trailing call.
-var trailingTimeout = 2;
-/**
- * Creates a wrapper function which ensures that provided callback will be
- * invoked only once during the specified delay period.
- *
- * @param {Function} callback - Function to be invoked after the delay period.
- * @param {number} delay - Delay after which to invoke callback.
- * @returns {Function}
- */
-function ResizeObserver_es_throttle (callback, delay) {
-    var leadingCall = false, trailingCall = false, lastCallTime = 0;
-    /**
-     * Invokes the original callback function and schedules new invocation if
-     * the "proxy" was called during current request.
-     *
-     * @returns {void}
-     */
-    function resolvePending() {
-        if (leadingCall) {
-            leadingCall = false;
-            callback();
-        }
-        if (trailingCall) {
-            proxy();
-        }
-    }
-    /**
-     * Callback invoked after the specified delay. It will further postpone
-     * invocation of the original function delegating it to the
-     * requestAnimationFrame.
-     *
-     * @returns {void}
-     */
-    function timeoutCallback() {
-        requestAnimationFrame$1(resolvePending);
-    }
-    /**
-     * Schedules invocation of the original function.
-     *
-     * @returns {void}
-     */
-    function proxy() {
-        var timeStamp = Date.now();
-        if (leadingCall) {
-            // Reject immediately following calls.
-            if (timeStamp - lastCallTime < trailingTimeout) {
-                return;
-            }
-            // Schedule new call to be in invoked when the pending one is resolved.
-            // This is important for "transitions" which never actually start
-            // immediately so there is a chance that we might miss one if change
-            // happens amids the pending invocation.
-            trailingCall = true;
-        }
-        else {
-            leadingCall = true;
-            trailingCall = false;
-            setTimeout(timeoutCallback, delay);
-        }
-        lastCallTime = timeStamp;
-    }
-    return proxy;
-}
-
-// Minimum delay before invoking the update of observers.
-var REFRESH_DELAY = 20;
-// A list of substrings of CSS properties used to find transition events that
-// might affect dimensions of observed elements.
-var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
-// Check if MutationObserver is available.
-var mutationObserverSupported = typeof MutationObserver !== 'undefined';
-/**
- * Singleton controller class which handles updates of ResizeObserver instances.
- */
-var ResizeObserverController = /** @class */ (function () {
-    /**
-     * Creates a new instance of ResizeObserverController.
-     *
-     * @private
-     */
-    function ResizeObserverController() {
-        /**
-         * Indicates whether DOM listeners have been added.
-         *
-         * @private {boolean}
-         */
-        this.connected_ = false;
-        /**
-         * Tells that controller has subscribed for Mutation Events.
-         *
-         * @private {boolean}
-         */
-        this.mutationEventsAdded_ = false;
-        /**
-         * Keeps reference to the instance of MutationObserver.
-         *
-         * @private {MutationObserver}
-         */
-        this.mutationsObserver_ = null;
-        /**
-         * A list of connected observers.
-         *
-         * @private {Array<ResizeObserverSPI>}
-         */
-        this.observers_ = [];
-        this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
-        this.refresh = ResizeObserver_es_throttle(this.refresh.bind(this), REFRESH_DELAY);
-    }
-    /**
-     * Adds observer to observers list.
-     *
-     * @param {ResizeObserverSPI} observer - Observer to be added.
-     * @returns {void}
-     */
-    ResizeObserverController.prototype.addObserver = function (observer) {
-        if (!~this.observers_.indexOf(observer)) {
-            this.observers_.push(observer);
-        }
-        // Add listeners if they haven't been added yet.
-        if (!this.connected_) {
-            this.connect_();
-        }
-    };
-    /**
-     * Removes observer from observers list.
-     *
-     * @param {ResizeObserverSPI} observer - Observer to be removed.
-     * @returns {void}
-     */
-    ResizeObserverController.prototype.removeObserver = function (observer) {
-        var observers = this.observers_;
-        var index = observers.indexOf(observer);
-        // Remove observer if it's present in registry.
-        if (~index) {
-            observers.splice(index, 1);
-        }
-        // Remove listeners if controller has no connected observers.
-        if (!observers.length && this.connected_) {
-            this.disconnect_();
-        }
-    };
-    /**
-     * Invokes the update of observers. It will continue running updates insofar
-     * it detects changes.
-     *
-     * @returns {void}
-     */
-    ResizeObserverController.prototype.refresh = function () {
-        var changesDetected = this.updateObservers_();
-        // Continue running updates if changes have been detected as there might
-        // be future ones caused by CSS transitions.
-        if (changesDetected) {
-            this.refresh();
-        }
-    };
-    /**
-     * Updates every observer from observers list and notifies them of queued
-     * entries.
-     *
-     * @private
-     * @returns {boolean} Returns "true" if any observer has detected changes in
-     *      dimensions of it's elements.
-     */
-    ResizeObserverController.prototype.updateObservers_ = function () {
-        // Collect observers that have active observations.
-        var activeObservers = this.observers_.filter(function (observer) {
-            return observer.gatherActive(), observer.hasActive();
-        });
-        // Deliver notifications in a separate cycle in order to avoid any
-        // collisions between observers, e.g. when multiple instances of
-        // ResizeObserver are tracking the same element and the callback of one
-        // of them changes content dimensions of the observed target. Sometimes
-        // this may result in notifications being blocked for the rest of observers.
-        activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
-        return activeObservers.length > 0;
-    };
-    /**
-     * Initializes DOM listeners.
-     *
-     * @private
-     * @returns {void}
-     */
-    ResizeObserverController.prototype.connect_ = function () {
-        // Do nothing if running in a non-browser environment or if listeners
-        // have been already added.
-        if (!isBrowser || this.connected_) {
-            return;
-        }
-        // Subscription to the "Transitionend" event is used as a workaround for
-        // delayed transitions. This way it's possible to capture at least the
-        // final state of an element.
-        document.addEventListener('transitionend', this.onTransitionEnd_);
-        window.addEventListener('resize', this.refresh);
-        if (mutationObserverSupported) {
-            this.mutationsObserver_ = new MutationObserver(this.refresh);
-            this.mutationsObserver_.observe(document, {
-                attributes: true,
-                childList: true,
-                characterData: true,
-                subtree: true
-            });
-        }
-        else {
-            document.addEventListener('DOMSubtreeModified', this.refresh);
-            this.mutationEventsAdded_ = true;
-        }
-        this.connected_ = true;
-    };
-    /**
-     * Removes DOM listeners.
-     *
-     * @private
-     * @returns {void}
-     */
-    ResizeObserverController.prototype.disconnect_ = function () {
-        // Do nothing if running in a non-browser environment or if listeners
-        // have been already removed.
-        if (!isBrowser || !this.connected_) {
-            return;
-        }
-        document.removeEventListener('transitionend', this.onTransitionEnd_);
-        window.removeEventListener('resize', this.refresh);
-        if (this.mutationsObserver_) {
-            this.mutationsObserver_.disconnect();
-        }
-        if (this.mutationEventsAdded_) {
-            document.removeEventListener('DOMSubtreeModified', this.refresh);
-        }
-        this.mutationsObserver_ = null;
-        this.mutationEventsAdded_ = false;
-        this.connected_ = false;
-    };
-    /**
-     * "Transitionend" event handler.
-     *
-     * @private
-     * @param {TransitionEvent} event
-     * @returns {void}
-     */
-    ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
-        var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
-        // Detect whether transition may affect dimensions of an element.
-        var isReflowProperty = transitionKeys.some(function (key) {
-            return !!~propertyName.indexOf(key);
-        });
-        if (isReflowProperty) {
-            this.refresh();
-        }
-    };
-    /**
-     * Returns instance of the ResizeObserverController.
-     *
-     * @returns {ResizeObserverController}
-     */
-    ResizeObserverController.getInstance = function () {
-        if (!this.instance_) {
-            this.instance_ = new ResizeObserverController();
-        }
-        return this.instance_;
-    };
-    /**
-     * Holds reference to the controller's instance.
-     *
-     * @private {ResizeObserverController}
-     */
-    ResizeObserverController.instance_ = null;
-    return ResizeObserverController;
-}());
-
-/**
- * Defines non-writable/enumerable properties of the provided target object.
- *
- * @param {Object} target - Object for which to define properties.
- * @param {Object} props - Properties to be defined.
- * @returns {Object} Target object.
- */
-var defineConfigurable = (function (target, props) {
-    for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
-        var key = _a[_i];
-        Object.defineProperty(target, key, {
-            value: props[key],
-            enumerable: false,
-            writable: false,
-            configurable: true
-        });
-    }
-    return target;
-});
-
-/**
- * Returns the global object associated with provided element.
- *
- * @param {Object} target
- * @returns {Object}
- */
-var getWindowOf = (function (target) {
-    // Assume that the element is an instance of Node, which means that it
-    // has the "ownerDocument" property from which we can retrieve a
-    // corresponding global object.
-    var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
-    // Return the local global object if it's not possible extract one from
-    // provided element.
-    return ownerGlobal || global$1;
-});
-
-// Placeholder of an empty content rectangle.
-var emptyRect = createRectInit(0, 0, 0, 0);
-/**
- * Converts provided string to a number.
- *
- * @param {number|string} value
- * @returns {number}
- */
-function toFloat(value) {
-    return parseFloat(value) || 0;
-}
-/**
- * Extracts borders size from provided styles.
- *
- * @param {CSSStyleDeclaration} styles
- * @param {...string} positions - Borders positions (top, right, ...)
- * @returns {number}
- */
-function getBordersSize(styles) {
-    var positions = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        positions[_i - 1] = arguments[_i];
-    }
-    return positions.reduce(function (size, position) {
-        var value = styles['border-' + position + '-width'];
-        return size + toFloat(value);
-    }, 0);
-}
-/**
- * Extracts paddings sizes from provided styles.
- *
- * @param {CSSStyleDeclaration} styles
- * @returns {Object} Paddings box.
- */
-function getPaddings(styles) {
-    var positions = ['top', 'right', 'bottom', 'left'];
-    var paddings = {};
-    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
-        var position = positions_1[_i];
-        var value = styles['padding-' + position];
-        paddings[position] = toFloat(value);
-    }
-    return paddings;
-}
-/**
- * Calculates content rectangle of provided SVG element.
- *
- * @param {SVGGraphicsElement} target - Element content rectangle of which needs
- *      to be calculated.
- * @returns {DOMRectInit}
- */
-function getSVGContentRect(target) {
-    var bbox = target.getBBox();
-    return createRectInit(0, 0, bbox.width, bbox.height);
-}
-/**
- * Calculates content rectangle of provided HTMLElement.
- *
- * @param {HTMLElement} target - Element for which to calculate the content rectangle.
- * @returns {DOMRectInit}
- */
-function getHTMLElementContentRect(target) {
-    // Client width & height properties can't be
-    // used exclusively as they provide rounded values.
-    var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
-    // By this condition we can catch all non-replaced inline, hidden and
-    // detached elements. Though elements with width & height properties less
-    // than 0.5 will be discarded as well.
-    //
-    // Without it we would need to implement separate methods for each of
-    // those cases and it's not possible to perform a precise and performance
-    // effective test for hidden elements. E.g. even jQuery's ':visible' filter
-    // gives wrong results for elements with width & height less than 0.5.
-    if (!clientWidth && !clientHeight) {
-        return emptyRect;
-    }
-    var styles = getWindowOf(target).getComputedStyle(target);
-    var paddings = getPaddings(styles);
-    var horizPad = paddings.left + paddings.right;
-    var vertPad = paddings.top + paddings.bottom;
-    // Computed styles of width & height are being used because they are the
-    // only dimensions available to JS that contain non-rounded values. It could
-    // be possible to utilize the getBoundingClientRect if only it's data wasn't
-    // affected by CSS transformations let alone paddings, borders and scroll bars.
-    var width = toFloat(styles.width), height = toFloat(styles.height);
-    // Width & height include paddings and borders when the 'border-box' box
-    // model is applied (except for IE).
-    if (styles.boxSizing === 'border-box') {
-        // Following conditions are required to handle Internet Explorer which
-        // doesn't include paddings and borders to computed CSS dimensions.
-        //
-        // We can say that if CSS dimensions + paddings are equal to the "client"
-        // properties then it's either IE, and thus we don't need to subtract
-        // anything, or an element merely doesn't have paddings/borders styles.
-        if (Math.round(width + horizPad) !== clientWidth) {
-            width -= getBordersSize(styles, 'left', 'right') + horizPad;
-        }
-        if (Math.round(height + vertPad) !== clientHeight) {
-            height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
-        }
-    }
-    // Following steps can't be applied to the document's root element as its
-    // client[Width/Height] properties represent viewport area of the window.
-    // Besides, it's as well not necessary as the <html> itself neither has
-    // rendered scroll bars nor it can be clipped.
-    if (!isDocumentElement(target)) {
-        // In some browsers (only in Firefox, actually) CSS width & height
-        // include scroll bars size which can be removed at this step as scroll
-        // bars are the only difference between rounded dimensions + paddings
-        // and "client" properties, though that is not always true in Chrome.
-        var vertScrollbar = Math.round(width + horizPad) - clientWidth;
-        var horizScrollbar = Math.round(height + vertPad) - clientHeight;
-        // Chrome has a rather weird rounding of "client" properties.
-        // E.g. for an element with content width of 314.2px it sometimes gives
-        // the client width of 315px and for the width of 314.7px it may give
-        // 314px. And it doesn't happen all the time. So just ignore this delta
-        // as a non-relevant.
-        if (Math.abs(vertScrollbar) !== 1) {
-            width -= vertScrollbar;
-        }
-        if (Math.abs(horizScrollbar) !== 1) {
-            height -= horizScrollbar;
-        }
-    }
-    return createRectInit(paddings.left, paddings.top, width, height);
-}
-/**
- * Checks whether provided element is an instance of the SVGGraphicsElement.
- *
- * @param {Element} target - Element to be checked.
- * @returns {boolean}
- */
-var isSVGGraphicsElement = (function () {
-    // Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
-    // interface.
-    if (typeof SVGGraphicsElement !== 'undefined') {
-        return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
-    }
-    // If it's so, then check that element is at least an instance of the
-    // SVGElement and that it has the "getBBox" method.
-    // eslint-disable-next-line no-extra-parens
-    return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
-        typeof target.getBBox === 'function'); };
-})();
-/**
- * Checks whether provided element is a document element (<html>).
- *
- * @param {Element} target - Element to be checked.
- * @returns {boolean}
- */
-function isDocumentElement(target) {
-    return target === getWindowOf(target).document.documentElement;
-}
-/**
- * Calculates an appropriate content rectangle for provided html or svg element.
- *
- * @param {Element} target - Element content rectangle of which needs to be calculated.
- * @returns {DOMRectInit}
- */
-function getContentRect(target) {
-    if (!isBrowser) {
-        return emptyRect;
-    }
-    if (isSVGGraphicsElement(target)) {
-        return getSVGContentRect(target);
-    }
-    return getHTMLElementContentRect(target);
-}
-/**
- * Creates rectangle with an interface of the DOMRectReadOnly.
- * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
- *
- * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
- * @returns {DOMRectReadOnly}
- */
-function createReadOnlyRect(_a) {
-    var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
-    // If DOMRectReadOnly is available use it as a prototype for the rectangle.
-    var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
-    var rect = Object.create(Constr.prototype);
-    // Rectangle's properties are not writable and non-enumerable.
-    defineConfigurable(rect, {
-        x: x, y: y, width: width, height: height,
-        top: y,
-        right: x + width,
-        bottom: height + y,
-        left: x
-    });
-    return rect;
-}
-/**
- * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
- * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
- *
- * @param {number} x - X coordinate.
- * @param {number} y - Y coordinate.
- * @param {number} width - Rectangle's width.
- * @param {number} height - Rectangle's height.
- * @returns {DOMRectInit}
- */
-function createRectInit(x, y, width, height) {
-    return { x: x, y: y, width: width, height: height };
-}
-
-/**
- * Class that is responsible for computations of the content rectangle of
- * provided DOM element and for keeping track of it's changes.
- */
-var ResizeObservation = /** @class */ (function () {
-    /**
-     * Creates an instance of ResizeObservation.
-     *
-     * @param {Element} target - Element to be observed.
-     */
-    function ResizeObservation(target) {
-        /**
-         * Broadcasted width of content rectangle.
-         *
-         * @type {number}
-         */
-        this.broadcastWidth = 0;
-        /**
-         * Broadcasted height of content rectangle.
-         *
-         * @type {number}
-         */
-        this.broadcastHeight = 0;
-        /**
-         * Reference to the last observed content rectangle.
-         *
-         * @private {DOMRectInit}
-         */
-        this.contentRect_ = createRectInit(0, 0, 0, 0);
-        this.target = target;
-    }
-    /**
-     * Updates content rectangle and tells whether it's width or height properties
-     * have changed since the last broadcast.
-     *
-     * @returns {boolean}
-     */
-    ResizeObservation.prototype.isActive = function () {
-        var rect = getContentRect(this.target);
-        this.contentRect_ = rect;
-        return (rect.width !== this.broadcastWidth ||
-            rect.height !== this.broadcastHeight);
-    };
-    /**
-     * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
-     * from the corresponding properties of the last observed content rectangle.
-     *
-     * @returns {DOMRectInit} Last observed content rectangle.
-     */
-    ResizeObservation.prototype.broadcastRect = function () {
-        var rect = this.contentRect_;
-        this.broadcastWidth = rect.width;
-        this.broadcastHeight = rect.height;
-        return rect;
-    };
-    return ResizeObservation;
-}());
-
-var ResizeObserverEntry = /** @class */ (function () {
-    /**
-     * Creates an instance of ResizeObserverEntry.
-     *
-     * @param {Element} target - Element that is being observed.
-     * @param {DOMRectInit} rectInit - Data of the element's content rectangle.
-     */
-    function ResizeObserverEntry(target, rectInit) {
-        var contentRect = createReadOnlyRect(rectInit);
-        // According to the specification following properties are not writable
-        // and are also not enumerable in the native implementation.
-        //
-        // Property accessors are not being used as they'd require to define a
-        // private WeakMap storage which may cause memory leaks in browsers that
-        // don't support this type of collections.
-        defineConfigurable(this, { target: target, contentRect: contentRect });
-    }
-    return ResizeObserverEntry;
-}());
-
-var ResizeObserverSPI = /** @class */ (function () {
-    /**
-     * Creates a new instance of ResizeObserver.
-     *
-     * @param {ResizeObserverCallback} callback - Callback function that is invoked
-     *      when one of the observed elements changes it's content dimensions.
-     * @param {ResizeObserverController} controller - Controller instance which
-     *      is responsible for the updates of observer.
-     * @param {ResizeObserver} callbackCtx - Reference to the public
-     *      ResizeObserver instance which will be passed to callback function.
-     */
-    function ResizeObserverSPI(callback, controller, callbackCtx) {
-        /**
-         * Collection of resize observations that have detected changes in dimensions
-         * of elements.
-         *
-         * @private {Array<ResizeObservation>}
-         */
-        this.activeObservations_ = [];
-        /**
-         * Registry of the ResizeObservation instances.
-         *
-         * @private {Map<Element, ResizeObservation>}
-         */
-        this.observations_ = new MapShim();
-        if (typeof callback !== 'function') {
-            throw new TypeError('The callback provided as parameter 1 is not a function.');
-        }
-        this.callback_ = callback;
-        this.controller_ = controller;
-        this.callbackCtx_ = callbackCtx;
-    }
-    /**
-     * Starts observing provided element.
-     *
-     * @param {Element} target - Element to be observed.
-     * @returns {void}
-     */
-    ResizeObserverSPI.prototype.observe = function (target) {
-        if (!arguments.length) {
-            throw new TypeError('1 argument required, but only 0 present.');
-        }
-        // Do nothing if current environment doesn't have the Element interface.
-        if (typeof Element === 'undefined' || !(Element instanceof Object)) {
-            return;
-        }
-        if (!(target instanceof getWindowOf(target).Element)) {
-            throw new TypeError('parameter 1 is not of type "Element".');
-        }
-        var observations = this.observations_;
-        // Do nothing if element is already being observed.
-        if (observations.has(target)) {
-            return;
-        }
-        observations.set(target, new ResizeObservation(target));
-        this.controller_.addObserver(this);
-        // Force the update of observations.
-        this.controller_.refresh();
-    };
-    /**
-     * Stops observing provided element.
-     *
-     * @param {Element} target - Element to stop observing.
-     * @returns {void}
-     */
-    ResizeObserverSPI.prototype.unobserve = function (target) {
-        if (!arguments.length) {
-            throw new TypeError('1 argument required, but only 0 present.');
-        }
-        // Do nothing if current environment doesn't have the Element interface.
-        if (typeof Element === 'undefined' || !(Element instanceof Object)) {
-            return;
-        }
-        if (!(target instanceof getWindowOf(target).Element)) {
-            throw new TypeError('parameter 1 is not of type "Element".');
-        }
-        var observations = this.observations_;
-        // Do nothing if element is not being observed.
-        if (!observations.has(target)) {
-            return;
-        }
-        observations.delete(target);
-        if (!observations.size) {
-            this.controller_.removeObserver(this);
-        }
-    };
-    /**
-     * Stops observing all elements.
-     *
-     * @returns {void}
-     */
-    ResizeObserverSPI.prototype.disconnect = function () {
-        this.clearActive();
-        this.observations_.clear();
-        this.controller_.removeObserver(this);
-    };
-    /**
-     * Collects observation instances the associated element of which has changed
-     * it's content rectangle.
-     *
-     * @returns {void}
-     */
-    ResizeObserverSPI.prototype.gatherActive = function () {
-        var _this = this;
-        this.clearActive();
-        this.observations_.forEach(function (observation) {
-            if (observation.isActive()) {
-                _this.activeObservations_.push(observation);
-            }
-        });
-    };
-    /**
-     * Invokes initial callback function with a list of ResizeObserverEntry
-     * instances collected from active resize observations.
-     *
-     * @returns {void}
-     */
-    ResizeObserverSPI.prototype.broadcastActive = function () {
-        // Do nothing if observer doesn't have active observations.
-        if (!this.hasActive()) {
-            return;
-        }
-        var ctx = this.callbackCtx_;
-        // Create ResizeObserverEntry instance for every active observation.
-        var entries = this.activeObservations_.map(function (observation) {
-            return new ResizeObserverEntry(observation.target, observation.broadcastRect());
-        });
-        this.callback_.call(ctx, entries, ctx);
-        this.clearActive();
-    };
-    /**
-     * Clears the collection of active observations.
-     *
-     * @returns {void}
-     */
-    ResizeObserverSPI.prototype.clearActive = function () {
-        this.activeObservations_.splice(0);
-    };
-    /**
-     * Tells whether observer has active observations.
-     *
-     * @returns {boolean}
-     */
-    ResizeObserverSPI.prototype.hasActive = function () {
-        return this.activeObservations_.length > 0;
-    };
-    return ResizeObserverSPI;
-}());
-
-// Registry of internal observers. If WeakMap is not available use current shim
-// for the Map collection as it has all required methods and because WeakMap
-// can't be fully polyfilled anyway.
-var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
-/**
- * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
- * exposing only those methods and properties that are defined in the spec.
- */
-var ResizeObserver_es_ResizeObserver = /** @class */ (function () {
-    /**
-     * Creates a new instance of ResizeObserver.
-     *
-     * @param {ResizeObserverCallback} callback - Callback that is invoked when
-     *      dimensions of the observed elements change.
-     */
-    function ResizeObserver(callback) {
-        if (!(this instanceof ResizeObserver)) {
-            throw new TypeError('Cannot call a class as a function.');
-        }
-        if (!arguments.length) {
-            throw new TypeError('1 argument required, but only 0 present.');
-        }
-        var controller = ResizeObserverController.getInstance();
-        var observer = new ResizeObserverSPI(callback, controller, this);
-        observers.set(this, observer);
-    }
-    return ResizeObserver;
-}());
-// Expose public methods of ResizeObserver.
-[
-    'observe',
-    'unobserve',
-    'disconnect'
-].forEach(function (method) {
-    ResizeObserver_es_ResizeObserver.prototype[method] = function () {
-        var _a;
-        return (_a = observers.get(this))[method].apply(_a, arguments);
-    };
-});
-
-var index = (function () {
-    // Export existing implementation if available.
-    if (typeof global$1.ResizeObserver !== 'undefined') {
-        return global$1.ResizeObserver;
-    }
-    return ResizeObserver_es_ResizeObserver;
-})();
-
-/* harmony default export */ const ResizeObserver_es = (index);
-
 ;// CONCATENATED MODULE: ./resizeObserver/index.tsx
 
 
 
 
-
+var ObserverProperty;
+(function (ObserverProperty) {
+  ObserverProperty["Width"] = "width";
+  ObserverProperty["Height"] = "height";
+  ObserverProperty["All"] = "all";
+})(ObserverProperty || (ObserverProperty = {}));
 class ReactResizeObserver extends BaseComponent {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
+    this.formerPropertyValue = new Map();
     this.getElement = () => {
       try {
         // using findDOMNode for two reasons:
@@ -23598,6 +22736,54 @@ class ReactResizeObserver extends BaseComponent {
         return null;
       }
     };
+    this.handleResizeEventTriggered = entries => {
+      if (this.props.observerProperty === ObserverProperty.All) {
+        this.props.onResize(entries);
+      } else {
+        const finalEntries = [];
+        for (const entry of entries) {
+          if (this.formerPropertyValue.has(entry.target)) {
+            if (entry.contentRect[this.props.observerProperty] !== this.formerPropertyValue.get(entry.target)) {
+              this.formerPropertyValue.set(entry.target, entry.contentRect[this.props.observerProperty]);
+              finalEntries.push(entry);
+            }
+          } else {
+            this.formerPropertyValue.set(entry.target, entry.contentRect[this.props.observerProperty]);
+            finalEntries.push(entry);
+          }
+        }
+        if (finalEntries.length > 0) {
+          this.props.onResize(finalEntries);
+        }
+      }
+    };
+    this.observeElement = function () {
+      let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      const element = _this.getElement();
+      if (!_this.observer) {
+        _this.observer = new ResizeObserver(_this.handleResizeEventTriggered);
+      }
+      if (!(element && element instanceof Element)) {
+        // stop everything if not defined
+        _this.observer.disconnect();
+        return;
+      }
+      if (element === _this.element && !force) {
+        // abort if given same element -- nothing to update (unless forced)
+        return;
+      } else {
+        // clear observer list if new element
+        _this.observer.disconnect();
+        // remember element reference for next time
+        _this.element = element;
+      }
+      // observer callback is invoked immediately when observing new elements
+      _this.observer.observe(element);
+      if (_this.props.observeParent && element.parentNode && element.parentNode.ownerDocument && element.parentNode.ownerDocument.defaultView && element.parentNode instanceof element.parentNode.ownerDocument.defaultView.HTMLElement) {
+        _this._parentNode = element.parentNode;
+        _this.observer.observe(_this._parentNode);
+      }
+    };
     this.mergeRef = (ref, node) => {
       this.childNode = node;
       if (typeof ref === 'function') {
@@ -23606,7 +22792,7 @@ class ReactResizeObserver extends BaseComponent {
         ref.current = node;
       }
     };
-    this.observer = new ResizeObserver_es(props.onResize);
+    this.observer = new ResizeObserver(this.handleResizeEventTriggered);
   }
   componentDidMount() {
     this.observeElement();
@@ -23621,33 +22807,6 @@ class ReactResizeObserver extends BaseComponent {
       this.element = null;
     }
   }
-  observeElement() {
-    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    const element = this.getElement();
-    if (!this.observer) {
-      this.observer = new ResizeObserver_es(this.props.onResize);
-    }
-    if (!(element && element instanceof Element)) {
-      // stop everything if not defined
-      this.observer.disconnect();
-      return;
-    }
-    if (element === this.element && !force) {
-      // abort if given same element -- nothing to update (unless forced)
-      return;
-    } else {
-      // clear observer list if new element
-      this.observer.disconnect();
-      // remember element reference for next time
-      this.element = element;
-    }
-    // observer callback is invoked immediately when observing new elements
-    this.observer.observe(element);
-    if (this.props.observeParent && element.parentNode && element.parentNode.ownerDocument && element.parentNode.ownerDocument.defaultView && element.parentNode instanceof element.parentNode.ownerDocument.defaultView.HTMLElement) {
-      this._parentNode = element.parentNode;
-      this.observer.observe(this._parentNode);
-    }
-  }
   render() {
     const child = external_root_React_commonjs2_react_commonjs_react_amd_react_default().Children.only(this.props.children);
     const {
@@ -23660,11 +22819,15 @@ class ReactResizeObserver extends BaseComponent {
 }
 ReactResizeObserver.propTypes = {
   onResize: (prop_types_default()).func,
-  observeParent: (prop_types_default()).bool
+  observeParent: (prop_types_default()).bool,
+  observerProperty: (prop_types_default()).string,
+  delayTick: (prop_types_default()).number
 };
 ReactResizeObserver.defaultProps = {
   onResize: () => {},
-  observeParent: false
+  observeParent: false,
+  observerProperty: "all",
+  delayTick: 0
 };
 ;// CONCATENATED MODULE: ./typography/base.tsx
 
@@ -23673,6 +22836,33 @@ ReactResizeObserver.defaultProps = {
 
 
 
+var base_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
 var base_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];
@@ -23728,12 +22918,18 @@ const wrapperDecorations = (props, content) => {
 class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_.Component {
   constructor(props) {
     super(props);
-    this.onResize = () => {
+    this.observerTakingEffect = false;
+    this.onResize = entries => base_awaiter(this, void 0, void 0, function* () {
       if (this.rafId) {
         window.cancelAnimationFrame(this.rafId);
       }
-      this.rafId = window.requestAnimationFrame(this.getEllipsisState.bind(this));
-    };
+      return new Promise(resolve => {
+        this.rafId = window.requestAnimationFrame(() => base_awaiter(this, void 0, void 0, function* () {
+          yield this.getEllipsisState();
+          resolve();
+        }));
+      });
+    });
     // if it needs to use js overflowed:
     // 1. text is expandable 2. expandText need to be shown  3. has extra operation 4. text need to ellipse from mid
     this.canUseCSSEllipsis = () => {
@@ -23803,6 +22999,80 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
       }
       return defaultOpts;
     };
+    this.onHover = () => {
+      const canUseCSSEllipsis = this.canUseCSSEllipsis();
+      if (canUseCSSEllipsis) {
+        const {
+          rows,
+          suffix,
+          pos
+        } = this.getEllipsisOpt();
+        const updateOverflow = this.shouldTruncated(rows);
+        // isOverflowed needs to be updated to show tooltip when using css ellipsis
+        this.setState({
+          isOverflowed: updateOverflow,
+          isTruncated: false
+        });
+        return undefined;
+      }
+    };
+    this.getEllipsisState = () => base_awaiter(this, void 0, void 0, function* () {
+      const {
+        rows,
+        suffix,
+        pos
+      } = this.getEllipsisOpt();
+      const {
+        children
+      } = this.props;
+      // wait until element mounted
+      if (!this.wrapperRef || !this.wrapperRef.current) {
+        yield this.onResize();
+        return;
+      }
+      const {
+        expanded
+      } = this.state;
+      const canUseCSSEllipsis = this.canUseCSSEllipsis();
+      if (canUseCSSEllipsis) {
+        // const updateOverflow = this.shouldTruncated(rows);
+        // // isOverflowed needs to be updated to show tooltip when using css ellipsis
+        // this.setState({
+        //     isOverflowed: updateOverflow,
+        //     isTruncated: false
+        // });
+        return;
+      }
+      // If children is null, css/js truncated flag isTruncate is false
+      if (isNull_default()(children)) {
+        return new Promise(resolve => {
+          this.setState({
+            isTruncated: false,
+            isOverflowed: false
+          }, resolve);
+        });
+      }
+      // Currently only text truncation is supported, if there is non-text, 
+      // both css truncation and js truncation should throw a warning
+      warning('children' in this.props && typeof children !== 'string', "[Semi Typography] Only children with pure text could be used with ellipsis at this moment.");
+      if (!rows || rows < 0 || expanded) {
+        return;
+      }
+      const extraNode = {
+        expand: this.expandRef.current,
+        copy: this.copyRef && this.copyRef.current
+      };
+      const content = util(this.wrapperRef.current, rows,
+      // Perform type conversion on children to prevent component crash due to non-string type of children
+      String(children), extraNode, ELLIPSIS_STR, suffix, pos);
+      return new Promise(resolve => {
+        this.setState({
+          isOverflowed: false,
+          ellipsisContent: content,
+          isTruncated: children !== content
+        }, resolve);
+      });
+    });
     /**
      * Triggered when the fold button is clicked to save the latest expanded state
      * @param {Event} e
@@ -23969,9 +23239,13 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
         ellipsisContent
       } = this.state;
       if (expanded || !isTruncated) {
-        return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, children, suffix && suffix.length ? suffix : null);
+        return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+          onMouseEnter: this.onHover
+        }, children, suffix && suffix.length ? suffix : null);
       }
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", null, ellipsisContent, suffix);
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+        onMouseEnter: this.onHover
+      }, ellipsisContent, suffix);
     };
     this.state = {
       editable: false,
@@ -23991,7 +23265,8 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
   }
   componentDidMount() {
     if (this.props.ellipsis) {
-      this.onResize();
+      // runAfterTicks: make sure start observer on the next tick
+      this.onResize().then(() => runAfterTicks(() => this.observerTakingEffect = true, 1));
     }
   }
   static getDerivedStateFromProps(props, prevState) {
@@ -24023,61 +23298,6 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
       window.cancelAnimationFrame(this.rafId);
     }
   }
-  getEllipsisState() {
-    const {
-      rows,
-      suffix,
-      pos
-    } = this.getEllipsisOpt();
-    const {
-      children
-    } = this.props;
-    // wait until element mounted
-    if (!this.wrapperRef || !this.wrapperRef.current) {
-      this.onResize();
-      return false;
-    }
-    const {
-      expanded
-    } = this.state;
-    const canUseCSSEllipsis = this.canUseCSSEllipsis();
-    // If children is null, css/js truncated flag isTruncate is false
-    if (isNull_default()(children)) {
-      this.setState({
-        isTruncated: false,
-        isOverflowed: false
-      });
-      return undefined;
-    }
-    // Currently only text truncation is supported, if there is non-text, 
-    // both css truncation and js truncation should throw a warning
-    warning('children' in this.props && typeof children !== 'string', "[Semi Typography] Only children with pure text could be used with ellipsis at this moment.");
-    if (!rows || rows < 0 || expanded) {
-      return undefined;
-    }
-    if (canUseCSSEllipsis) {
-      const updateOverflow = this.shouldTruncated(rows);
-      // isOverflowed needs to be updated to show tooltip when using css ellipsis
-      this.setState({
-        isOverflowed: updateOverflow,
-        isTruncated: false
-      });
-      return undefined;
-    }
-    const extraNode = {
-      expand: this.expandRef.current,
-      copy: this.copyRef && this.copyRef.current
-    };
-    const content = util(this.wrapperRef.current, rows,
-    // Perform type conversion on children to prevent component crash due to non-string type of children
-    String(children), extraNode, ELLIPSIS_STR, suffix, pos);
-    this.setState({
-      isOverflowed: false,
-      ellipsisContent: content,
-      isTruncated: children !== content
-    });
-    return undefined;
-  }
   renderOperations() {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, this.renderExpandable(), this.renderCopy());
   }
@@ -24219,6 +23439,7 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
     }
   }
   render() {
+    var _this = this;
     const content = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(LocaleConsumer, {
       componentName: "Typography"
     }, locale => {
@@ -24228,8 +23449,13 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
     });
     if (this.props.ellipsis) {
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(ReactResizeObserver, {
-        onResize: this.onResize,
-        observeParent: true
+        onResize: function () {
+          if (_this.observerTakingEffect) {
+            _this.onResize(...arguments);
+          }
+        },
+        observeParent: true,
+        observerProperty: ObserverProperty.Width
       }, content);
     }
     return content;
@@ -26876,6 +26102,7 @@ var autoComplete = __webpack_require__("PyaV");
 
 
 
+
 const autoComplete_prefixCls = autoComplete_constants_cssClasses.PREFIX;
 const autoComplete_sizeSet = autoComplete_constants_strings.SIZE;
 const autoComplete_positionSet = autoComplete_constants_strings.POSITION;
@@ -27246,7 +26473,8 @@ AutoComplete.propTypes = {
   zIndex: (prop_types_default()).number
 };
 AutoComplete.Option = autoComplete_option;
-AutoComplete.defaultProps = {
+AutoComplete.__SemiComponentName__ = "AutoComplete";
+AutoComplete.defaultProps = getDefaultPropsFromGlobalConfig(AutoComplete.__SemiComponentName__, {
   stopPropagation: true,
   motion: true,
   zIndex: constants_numbers.DEFAULT_Z_INDEX,
@@ -27272,7 +26500,7 @@ AutoComplete.defaultProps = {
   onKeyDown: (noop_default())
   // onPressEnter: () => undefined,
   // defaultOpen: false,
-};
+});
 
 /* harmony default export */ const autoComplete_0 = (AutoComplete);
 ;// CONCATENATED MODULE: ../semi-foundation/avatar/constants.ts
@@ -27434,6 +26662,7 @@ var avatar_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 const avatar_sizeSet = avatar_constants_strings.SIZE;
 const shapeSet = avatar_constants_strings.SHAPE;
 const colorSet = avatar_constants_strings.COLOR;
@@ -27763,7 +26992,8 @@ class Avatar extends BaseComponent {
     }
   }
 }
-Avatar.defaultProps = {
+Avatar.__SemiComponentName__ = "Avatar";
+Avatar.defaultProps = getDefaultPropsFromGlobalConfig(Avatar.__SemiComponentName__, {
   size: 'medium',
   color: 'grey',
   shape: 'circle',
@@ -27771,7 +27001,7 @@ Avatar.defaultProps = {
   onClick: function_noop,
   onMouseEnter: function_noop,
   onMouseLeave: function_noop
-};
+});
 Avatar.propTypes = {
   children: (prop_types_default()).node,
   color: prop_types_default().oneOf(colorSet),
@@ -28862,6 +28092,7 @@ var backtop_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 const backtop_prefixCls = backtop_constants_cssClasses.PREFIX;
 const getDefaultTarget = () => window;
 class BackTop extends BaseComponent {
@@ -28937,11 +28168,12 @@ class BackTop extends BaseComponent {
     return content;
   }
 }
-BackTop.defaultProps = {
+BackTop.__SemiComponentName__ = "BackTop";
+BackTop.defaultProps = getDefaultPropsFromGlobalConfig(BackTop.__SemiComponentName__, {
   visibilityHeight: 400,
   target: getDefaultTarget,
   duration: 450
-};
+});
 BackTop.propTypes = {
   target: (prop_types_default()).func,
   visibilityHeight: (prop_types_default()).number,
@@ -29853,6 +29085,7 @@ Breadcrumb.defaultProps = {
 
 
 
+
 class Button extends (external_root_React_commonjs2_react_commonjs_react_amd_react_default()).PureComponent {
   constructor() {
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -29870,7 +29103,9 @@ class Button extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
     }
   }
 }
+Button.__SemiComponentName__ = "Button";
 Button.propTypes = Object.assign(Object.assign({}, Button_Button.propTypes), iconButton_0.propTypes);
+Button.defaultProps = getDefaultPropsFromGlobalConfig(Button.__SemiComponentName__);
 Button.elementType = 'Button';
 /* harmony default export */ const button_0 = (Button);
 ;// CONCATENATED MODULE: ./button/buttonGroup.tsx
@@ -36483,9 +35718,6 @@ var isSet_default = /*#__PURE__*/__webpack_require__.n(isSet);
 // EXTERNAL MODULE: ../../node_modules/lodash/includes.js
 var includes = __webpack_require__("qYhz");
 var includes_default = /*#__PURE__*/__webpack_require__.n(includes);
-// EXTERNAL MODULE: ../../node_modules/lodash/cloneDeep.js
-var lodash_cloneDeep = __webpack_require__("c2re");
-var cloneDeep_default = /*#__PURE__*/__webpack_require__.n(lodash_cloneDeep);
 // EXTERNAL MODULE: ../../node_modules/lodash/assign.js
 var lodash_assign = __webpack_require__("whR3");
 var assign_default = /*#__PURE__*/__webpack_require__.n(lodash_assign);
@@ -36892,14 +36124,13 @@ function calcMotionKeys(oldKeySet, newKeySet, keyEntities) {
 /**
  * @returns whether option includes sugInput.
  * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
- * The filteredPath parameter will only be passed in when the Cascader calls the filter function
  */
-function filter(sugInput, option, filterTreeNode, filterProps, filteredPath) {
+function filter(sugInput, option, filterTreeNode, filterProps) {
   if (!filterTreeNode) {
     return true;
   }
   let filterFn = filterTreeNode;
-  let target = filteredPath !== null && filteredPath !== void 0 ? filteredPath : option;
+  let target = option;
   if (typeof filterTreeNode === 'boolean') {
     filterFn = (targetVal, val) => {
       const input = targetVal.toLowerCase();
@@ -37172,6 +36403,33 @@ function util_normalizedArr(val) {
     return val;
   }
 }
+/**
+ * @returns whether option includes sugInput.
+ * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
+ */
+function util_filter(sugInput, option, filterTreeNode, filteredPath) {
+  if (!filterTreeNode) {
+    return true;
+  }
+  let filterFn = filterTreeNode;
+  let target;
+  if (typeof filterTreeNode === 'boolean') {
+    filterFn = (targetVal, val) => {
+      const input = targetVal.toLowerCase();
+      return val.toLowerCase().includes(input);
+    };
+    // 当 filterTreeNode 是 bool 类型时，由 Cascader 内部判断是否符合筛选条件，使用 join('') 修复搜索英文逗号导致所有数据被匹配问题
+    // When the type of of filterTreeNode is bool, Cascader internally determines whether it meets the filtering conditions.
+    // Use join('') to fix the problem that searching for English commas causes all data to be matched.
+    target = filteredPath.join('');
+  } else {
+    // 当 filterTreeNode 为函数类型时，由用户判断是否符合筛选条件，使用 join(), 和原来保持一致
+    // When the type of of filterTreeNode is function, the user determines whether it meets the filtering conditions, 
+    // uses join() to be consistent with the previous version.
+    target = filteredPath.join();
+  }
+  return filterFn(sugInput, target, option);
+}
 /**
  * Traverse all the data by `treeData`.
  */
@@ -37182,10 +36440,12 @@ function util_traverseDataNodes(treeNodes, callback) {
     // Process node if is not root
     if (node) {
       const key = parent ? `${parent.key}${constants_VALUE_SPLIT}${node.value}` : node.value;
+      const pos = parent ? util_getPosition(parent.pos, ind) : `${ind}`;
       item = {
         data: Object.assign({}, node),
         ind,
         key,
+        pos,
         level: parent ? parent.level + 1 : 0,
         parentKey: parent ? parent.key : null,
         path: parent ? [...parent.path, key] : [key],
@@ -37218,6 +36478,17 @@ function getKeyByValuePath(valuePath) {
 function getValuePathByKey(key) {
   return key.split(VALUE_SPLIT);
 }
+function getKeyByPos(pos, treeData) {
+  const posArr = pos.split('-').map(item => Number(item));
+  let resultData = treeData;
+  let valuePath = [];
+  posArr.forEach((item, index) => {
+    var _a;
+    resultData = index === 0 ? resultData[item] : (_a = resultData === null || resultData === void 0 ? void 0 : resultData.children) === null || _a === void 0 ? void 0 : _a[item];
+    valuePath.push(resultData === null || resultData === void 0 ? void 0 : resultData.value);
+  });
+  return getKeyByValuePath(valuePath);
+}
 function util_convertDataToEntities(dataNodes) {
   const keyEntities = {};
   util_traverseDataNodes(dataNodes, data => {
@@ -37263,7 +36534,6 @@ function calcMergeType(autoMergeValue, leafOnly) {
 
 
 
-
 class CascaderFoundation extends foundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
@@ -37272,6 +36542,28 @@ class CascaderFoundation extends foundation {
         isSearching: false
       });
     };
+    this.handleTagRemoveByKey = key => {
+      var _a, _b;
+      const {
+        keyEntities
+      } = this.getStates();
+      const {
+        disabled
+      } = this.getProps();
+      if (disabled) {
+        /* istanbul ignore next */
+        return;
+      }
+      const removedItem = (_a = keyEntities[key]) !== null && _a !== void 0 ? _a : {};
+      !((_b = removedItem === null || removedItem === void 0 ? void 0 : removedItem.data) === null || _b === void 0 ? void 0 : _b.disable) && this._handleMultipleSelect(removedItem);
+    };
+    this.handleTagRemoveInTrigger = pos => {
+      const {
+        treeData
+      } = this.getStates();
+      const key = getKeyByPos(pos, treeData);
+      this.handleTagRemoveByKey(key);
+    };
   }
   init() {
     const isOpen = this.getProp('open') || this.getProp('defaultOpen');
@@ -37334,13 +36626,6 @@ class CascaderFoundation extends foundation {
     const isDisabled = findAncestorKeys([key], keyEntities, true).some(item => keyEntities[item].data.disabled);
     return isDisabled;
   }
-  getCopyFromState(items) {
-    const res = {};
-    util_normalizedArr(items).forEach(key => {
-      res[key] = cloneDeep_default()(this.getState(key));
-    });
-    return res;
-  }
   // prop: is array, return all data
   getItemPropPath(selectedKey, prop, keyEntities) {
     const searchMap = keyEntities || this.getState('keyEntities');
@@ -37717,8 +37002,8 @@ class CascaderFoundation extends foundation {
       data,
       key
     } = item;
-    const prevLoadingKeys = cloneDeep_default()(this._adapter.getLoadingKeyRefValue());
-    const prevLoadedKeys = cloneDeep_default()(this._adapter.getLoadedKeyRefValue());
+    const prevLoadingKeys = new Set(this._adapter.getLoadingKeyRefValue());
+    const prevLoadedKeys = new Set(this._adapter.getLoadedKeyRefValue());
     const newLoadedKeys = prevLoadedKeys.add(key);
     const newLoadingKeys = new Set([...prevLoadingKeys]);
     newLoadingKeys.delete(key);
@@ -37741,7 +37026,7 @@ class CascaderFoundation extends foundation {
     });
     if (!data.isLeaf && !data.children && this.getProp('loadData')) {
       const loadedKeys = this._adapter.getLoadedKeyRefValue();
-      const loadingKeys = cloneDeep_default()(this._adapter.getLoadingKeyRefValue());
+      const loadingKeys = new Set(this._adapter.getLoadingKeyRefValue());
       if (loadedKeys.has(key) || loadingKeys.has(key)) {
         return;
       }
@@ -37901,9 +37186,7 @@ class CascaderFoundation extends foundation {
       keyEntities,
       disabledKeys
     } = this.getStates();
-    const {
-      checkedKeys
-    } = this.getCopyFromState(['checkedKeys']);
+    const checkedKeys = new Set(this.getState('checkedKeys'));
     const descendantKeys = normalizeKeyList(findDescendantKeys([eventKey], keyEntities, false), keyEntities, true);
     const hasDisabled = descendantKeys.some(key => disabledKeys.has(key));
     if (!hasDisabled) {
@@ -37953,10 +37236,8 @@ class CascaderFoundation extends foundation {
     const {
       keyEntities
     } = this.getStates();
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = this.getCopyFromState(['checkedKeys', 'halfCheckedKeys']);
+    const checkedKeys = new Set(this.getState('checkedKeys'));
+    const halfCheckedKeys = new Set(this.getState('halfCheckedKeys'));
     return curCheckedStatus ? calcCheckedKeysForChecked(key, keyEntities, checkedKeys, halfCheckedKeys) : calcCheckedKeysForUnchecked(key, keyEntities, checkedKeys, halfCheckedKeys);
   }
   handleInputChange(sugInput) {
@@ -37980,8 +37261,8 @@ class CascaderFoundation extends foundation {
         if (_notExist) {
           return false;
         }
-        const filteredPath = this.getItemPropPath(key, treeNodeFilterProp).join();
-        return filter(sugInput, data, filterTreeNode, false, filteredPath);
+        const filteredPath = this.getItemPropPath(key, treeNodeFilterProp);
+        return util_filter(sugInput, data, filterTreeNode, filteredPath);
       }).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item)).map(item => item.key);
     }
     this._adapter.updateStates({
@@ -38003,6 +37284,7 @@ class CascaderFoundation extends foundation {
     const isControlled = this._isControlledComponent();
     const newState = {};
     if (multiple) {
+      newState.isSearching = false;
       this._adapter.updateInputValue('');
       this._adapter.notifyOnSearch('');
       newState.checkedKeys = new Set([]);
@@ -38105,20 +37387,6 @@ class CascaderFoundation extends foundation {
       activeNode: data
     });
   }
-  handleTagRemove(e, tagValuePath) {
-    const {
-      keyEntities
-    } = this.getStates();
-    const {
-      disabled
-    } = this.getProps();
-    if (disabled) {
-      /* istanbul ignore next */
-      return;
-    }
-    const removedItem = Object.values(keyEntities).filter(item => isEqual_default()(item.valuePath, tagValuePath))[0];
-    !isEmpty_default()(removedItem) && !removedItem.data.disabled && this._handleMultipleSelect(removedItem);
-  }
 }
 // EXTERNAL MODULE: ../semi-foundation/cascader/cascader.scss
 var cascader = __webpack_require__("B2DP");
@@ -47777,14 +47045,13 @@ class Cascader extends BaseComponent {
     this.handleInputChange = value => {
       this.foundation.handleInputChange(value);
     };
-    this.handleTagRemove = (e, tagValuePath) => {
-      this.foundation.handleTagRemove(e, tagValuePath);
+    this.handleTagRemoveInTrigger = pos => {
+      this.foundation.handleTagRemoveInTrigger(pos);
     };
-    this.handleRemoveByKey = key => {
-      const {
-        keyEntities
-      } = this.state;
-      this.handleTagRemove(null, keyEntities[key].valuePath);
+    this.handleTagClose = (tagChildren, e, tagKey) => {
+      // When value has not changed, prevent clicking tag closeBtn to close tag
+      e.preventDefault();
+      this.foundation.handleTagRemoveByKey(tagKey);
     };
     this.renderTagItem = (nodeKey, idx) => {
       const {
@@ -47812,18 +47079,18 @@ class Cascader extends BaseComponent {
             size: size === 'default' ? 'large' : size,
             key: `tag-${nodeKey}-${idx}`,
             color: "white",
+            tagKey: nodeKey,
             className: tagCls,
             closable: true,
-            onClose: (tagChildren, e) => {
-              // When value has not changed, prevent clicking tag closeBtn to close tag
-              e.preventDefault();
-              this.handleTagRemove(e, keyEntities[nodeKey].valuePath);
-            }
+            onClose: this.handleTagClose
           }, keyEntities[nodeKey].data[displayProp]);
         }
       }
       return null;
     };
+    this.onRemoveInTagInput = v => {
+      this.foundation.handleTagRemoveByKey(v);
+    };
     this.handleItemClick = (e, item) => {
       this.foundation.handleItemClick(e, item);
     };
@@ -48023,6 +47290,7 @@ class Cascader extends BaseComponent {
       }, labelNode);
     };
     this.renderCustomTrigger = () => {
+      var _a;
       const {
         disabled,
         triggerRender,
@@ -48033,17 +47301,26 @@ class Cascader extends BaseComponent {
         inputValue,
         inputPlaceHolder,
         resolvedCheckedKeys,
-        checkedKeys
+        checkedKeys,
+        keyEntities
       } = this.state;
       let realValue;
       if (multiple) {
         if (this.mergeType === cascader_constants_strings.NONE_MERGE_TYPE) {
-          realValue = checkedKeys;
+          realValue = new Set();
+          checkedKeys.forEach(key => {
+            var _a;
+            realValue.add((_a = keyEntities[key]) === null || _a === void 0 ? void 0 : _a.pos);
+          });
         } else {
-          realValue = resolvedCheckedKeys;
+          realValue = new Set();
+          resolvedCheckedKeys.forEach(key => {
+            var _a;
+            realValue.add((_a = keyEntities[key]) === null || _a === void 0 ? void 0 : _a.pos);
+          });
         }
       } else {
-        realValue = [...selectedKeys][0];
+        realValue = (_a = keyEntities[[...selectedKeys][0]]) === null || _a === void 0 ? void 0 : _a.pos;
       }
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(trigger, {
         value: realValue,
@@ -48056,7 +47333,7 @@ class Cascader extends BaseComponent {
         componentName: 'Cascader',
         componentProps: Object.assign({}, this.props),
         onSearch: this.handleInputChange,
-        onRemove: this.handleRemoveByKey
+        onRemove: this.handleTagRemoveInTrigger
       });
     };
     this.handleMouseOver = () => {
@@ -48087,11 +47364,12 @@ class Cascader extends BaseComponent {
         selectedKeys,
         isOpen,
         isHovering,
-        checkedKeys
+        checkedKeys,
+        inputValue
       } = this.state;
       const hasValue = selectedKeys.size;
       const multipleWithHaveValue = multiple && checkedKeys.size;
-      return showClear && (hasValue || multipleWithHaveValue) && !disabled && (isOpen || isHovering);
+      return showClear && (inputValue || hasValue || multipleWithHaveValue) && !disabled && (isOpen || isHovering);
     };
     this.renderClearBtn = () => {
       const clearCls = classnames_default()(`${cascader_prefixcls}-clearbtn`);
@@ -48540,11 +47818,11 @@ class Cascader extends BaseComponent {
       showRestTagsPopover: showRestTagsPopover,
       restTagsPopoverProps: restTagsPopoverProps,
       maxTagCount: maxTagCount,
-      renderTagItem: (value, index) => this.renderTagItem(value, index),
+      renderTagItem: this.renderTagItem,
       inputValue: inputValue,
       onInputChange: this.handleInputChange,
       // TODO Modify logic, not modify type
-      onRemove: v => this.handleTagRemove(null, v),
+      onRemove: this.onRemoveInTagInput,
       placeholder: placeholder,
       expandRestTagsOnClick: false
     });
@@ -48638,6 +47916,7 @@ class Cascader extends BaseComponent {
     }, selection);
   }
 }
+Cascader.__SemiComponentName__ = "Cascader";
 Cascader.contextType = context;
 Cascader.propTypes = {
   'aria-labelledby': (prop_types_default()).string,
@@ -48716,7 +47995,7 @@ Cascader.propTypes = {
   preventScroll: (prop_types_default()).bool,
   position: (prop_types_default()).string
 };
-Cascader.defaultProps = {
+Cascader.defaultProps = getDefaultPropsFromGlobalConfig(Cascader.__SemiComponentName__, {
   borderless: false,
   leafOnly: false,
   arrowIcon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(IconChevronDown, null),
@@ -48746,7 +48025,7 @@ Cascader.defaultProps = {
   onListScroll: (noop_default()),
   enableLeafClick: false,
   'aria-label': 'Cascader'
-};
+});
 /* harmony default export */ const cascader_0 = (Cascader);
 ;// CONCATENATED MODULE: ../semi-foundation/collapse/constants.ts
 
@@ -48842,6 +48121,7 @@ var collapsible = __webpack_require__("v967");
 
 
 
+
 class Collapsible extends BaseComponent {
   constructor(props) {
     super(props);
@@ -48964,14 +48244,15 @@ class Collapsible extends BaseComponent {
     }, (this.props.keepDOM || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen) && this.props.children));
   }
 }
-Collapsible.defaultProps = {
+Collapsible.__SemiComponentName__ = "Collapsible";
+Collapsible.defaultProps = getDefaultPropsFromGlobalConfig(Collapsible.__SemiComponentName__, {
   isOpen: false,
   duration: 250,
   motion: true,
   keepDOM: false,
   collapseHeight: 0,
   fade: false
-};
+});
 Collapsible.getEntryInfo = entry => {
   //judge whether parent or self display none
   let inRenderTree;
@@ -49169,6 +48450,7 @@ var collapse_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 class Collapse extends BaseComponent {
   constructor(props) {
     super(props);
@@ -49258,12 +48540,13 @@ Collapse.propTypes = {
   motion: prop_types_default().oneOfType([(prop_types_default()).bool, (prop_types_default()).func, (prop_types_default()).object]),
   expandIconPosition: prop_types_default().oneOf(collapse_constants_strings.iconPosition)
 };
-Collapse.defaultProps = {
+Collapse.__SemiComponentName__ = "Collapse";
+Collapse.defaultProps = getDefaultPropsFromGlobalConfig(Collapse.__SemiComponentName__, {
   defaultActiveKey: '',
   clickHeaderToExpand: true,
   onChange: function_noop,
   expandIconPosition: 'right'
-};
+});
 /* harmony default export */ const collapse_0 = (Collapse);
 ;// CONCATENATED MODULE: ./configProvider/index.tsx
 var configProvider_rest = undefined && undefined.__rest || function (s, e) {
@@ -49280,7 +48563,10 @@ var configProvider_rest = undefined && undefined.__rest || function (s, e) {
 
 
 class ConfigProvider extends (external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Component {
-  renderChilren() {
+  constructor(props) {
+    super(props);
+  }
+  renderChildren() {
     const {
       direction,
       children
@@ -49303,7 +48589,7 @@ class ConfigProvider extends (external_root_React_commonjs2_react_commonjs_react
       value: Object.assign({
         direction
       }, rest)
-    }, this.renderChilren());
+    }, this.renderChildren());
   }
 }
 ConfigProvider.propTypes = {
@@ -53375,6 +52661,7 @@ function isValidTimeZone(timeZone) {
 
 
 
+
 /**
  * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
  *  task 1. Accept the selected date change, update the date value, and update the input box value according to the date = > Notify the change
@@ -53478,6 +52765,8 @@ class DatePickerFoundation extends foundation {
             parsedV = zonedTimeToUtc(parsedV, prevTimeZone);
           }
           result.push(isValidTimeZone(timeZone) ? utcToZonedTime(parsedV, timeZone) : parsedV);
+        } else {
+          warning(true, `[Semi DatePicker] value cannot be parsed, value: ${String(v)}`);
         }
       }
     }
@@ -54695,6 +53984,406 @@ function getDefaultPickerDate(options) {
     nextDate: nextDate
   };
 }
+;// CONCATENATED MODULE: ../../node_modules/fast-copy/dist/esm/index.mjs
+var toStringFunction = Function.prototype.toString;
+var create = Object.create;
+var toStringObject = Object.prototype.toString;
+/**
+ * @classdesc Fallback cache for when WeakMap is not natively supported
+ */
+var LegacyCache = /** @class */ (function () {
+    function LegacyCache() {
+        this._keys = [];
+        this._values = [];
+    }
+    LegacyCache.prototype.has = function (key) {
+        return !!~this._keys.indexOf(key);
+    };
+    LegacyCache.prototype.get = function (key) {
+        return this._values[this._keys.indexOf(key)];
+    };
+    LegacyCache.prototype.set = function (key, value) {
+        this._keys.push(key);
+        this._values.push(value);
+    };
+    return LegacyCache;
+}());
+function createCacheLegacy() {
+    return new LegacyCache();
+}
+function createCacheModern() {
+    return new WeakMap();
+}
+/**
+ * Get a new cache object to prevent circular references.
+ */
+var createCache = typeof WeakMap !== 'undefined' ? createCacheModern : createCacheLegacy;
+/**
+ * Get an empty version of the object with the same prototype it has.
+ */
+function getCleanClone(prototype) {
+    if (!prototype) {
+        return create(null);
+    }
+    var Constructor = prototype.constructor;
+    if (Constructor === Object) {
+        return prototype === Object.prototype ? {} : create(prototype);
+    }
+    if (~toStringFunction.call(Constructor).indexOf('[native code]')) {
+        try {
+            return new Constructor();
+        }
+        catch (_a) { }
+    }
+    return create(prototype);
+}
+function getRegExpFlagsLegacy(regExp) {
+    var flags = '';
+    if (regExp.global) {
+        flags += 'g';
+    }
+    if (regExp.ignoreCase) {
+        flags += 'i';
+    }
+    if (regExp.multiline) {
+        flags += 'm';
+    }
+    if (regExp.unicode) {
+        flags += 'u';
+    }
+    if (regExp.sticky) {
+        flags += 'y';
+    }
+    return flags;
+}
+function getRegExpFlagsModern(regExp) {
+    return regExp.flags;
+}
+/**
+ * Get the flags to apply to the copied regexp.
+ */
+var getRegExpFlags = /test/g.flags === 'g' ? getRegExpFlagsModern : getRegExpFlagsLegacy;
+function getTagLegacy(value) {
+    var type = toStringObject.call(value);
+    return type.substring(8, type.length - 1);
+}
+function getTagModern(value) {
+    return value[Symbol.toStringTag] || getTagLegacy(value);
+}
+/**
+ * Get the tag of the value passed, so that the correct copier can be used.
+ */
+var getTag = typeof Symbol !== 'undefined' ? getTagModern : getTagLegacy;
+
+var defineProperty = Object.defineProperty, getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, getOwnPropertyNames = Object.getOwnPropertyNames, getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var _a = Object.prototype, esm_hasOwnProperty = _a.hasOwnProperty, propertyIsEnumerable = _a.propertyIsEnumerable;
+var SUPPORTS_SYMBOL = typeof getOwnPropertySymbols === 'function';
+function getStrictPropertiesModern(object) {
+    return getOwnPropertyNames(object).concat(getOwnPropertySymbols(object));
+}
+/**
+ * Get the properites used when copying objects strictly. This includes both keys and symbols.
+ */
+var getStrictProperties = SUPPORTS_SYMBOL
+    ? getStrictPropertiesModern
+    : getOwnPropertyNames;
+/**
+ * Striclty copy all properties contained on the object.
+ */
+function copyOwnPropertiesStrict(value, clone, state) {
+    var properties = getStrictProperties(value);
+    for (var index = 0, length_1 = properties.length, property = void 0, descriptor = void 0; index < length_1; ++index) {
+        property = properties[index];
+        if (property === 'callee' || property === 'caller') {
+            continue;
+        }
+        descriptor = getOwnPropertyDescriptor(value, property);
+        if (!descriptor) {
+            // In extra edge cases where the property descriptor cannot be retrived, fall back to
+            // the loose assignment.
+            clone[property] = state.copier(value[property], state);
+            continue;
+        }
+        // Only clone the value if actually a value, not a getter / setter.
+        if (!descriptor.get && !descriptor.set) {
+            descriptor.value = state.copier(descriptor.value, state);
+        }
+        try {
+            defineProperty(clone, property, descriptor);
+        }
+        catch (error) {
+            // Tee above can fail on node in edge cases, so fall back to the loose assignment.
+            clone[property] = descriptor.value;
+        }
+    }
+    return clone;
+}
+/**
+ * Deeply copy the indexed values in the array.
+ */
+function copyArrayLoose(array, state) {
+    var clone = new state.Constructor();
+    // set in the cache immediately to be able to reuse the object recursively
+    state.cache.set(array, clone);
+    for (var index = 0, length_2 = array.length; index < length_2; ++index) {
+        clone[index] = state.copier(array[index], state);
+    }
+    return clone;
+}
+/**
+ * Deeply copy the indexed values in the array, as well as any custom properties.
+ */
+function copyArrayStrict(array, state) {
+    var clone = new state.Constructor();
+    // set in the cache immediately to be able to reuse the object recursively
+    state.cache.set(array, clone);
+    return copyOwnPropertiesStrict(array, clone, state);
+}
+/**
+ * Copy the contents of the ArrayBuffer.
+ */
+function copyArrayBuffer(arrayBuffer, _state) {
+    return arrayBuffer.slice(0);
+}
+/**
+ * Create a new Blob with the contents of the original.
+ */
+function copyBlob(blob, _state) {
+    return blob.slice(0, blob.size, blob.type);
+}
+/**
+ * Create a new DataView with the contents of the original.
+ */
+function copyDataView(dataView, state) {
+    return new state.Constructor(copyArrayBuffer(dataView.buffer));
+}
+/**
+ * Create a new Date based on the time of the original.
+ */
+function copyDate(date, state) {
+    return new state.Constructor(date.getTime());
+}
+/**
+ * Deeply copy the keys and values of the original.
+ */
+function copyMapLoose(map, state) {
+    var clone = new state.Constructor();
+    // set in the cache immediately to be able to reuse the object recursively
+    state.cache.set(map, clone);
+    map.forEach(function (value, key) {
+        clone.set(key, state.copier(value, state));
+    });
+    return clone;
+}
+/**
+ * Deeply copy the keys and values of the original, as well as any custom properties.
+ */
+function copyMapStrict(map, state) {
+    return copyOwnPropertiesStrict(map, copyMapLoose(map, state), state);
+}
+function copyObjectLooseLegacy(object, state) {
+    var clone = getCleanClone(state.prototype);
+    // set in the cache immediately to be able to reuse the object recursively
+    state.cache.set(object, clone);
+    for (var key in object) {
+        if (esm_hasOwnProperty.call(object, key)) {
+            clone[key] = state.copier(object[key], state);
+        }
+    }
+    return clone;
+}
+function copyObjectLooseModern(object, state) {
+    var clone = getCleanClone(state.prototype);
+    // set in the cache immediately to be able to reuse the object recursively
+    state.cache.set(object, clone);
+    for (var key in object) {
+        if (esm_hasOwnProperty.call(object, key)) {
+            clone[key] = state.copier(object[key], state);
+        }
+    }
+    var symbols = getOwnPropertySymbols(object);
+    for (var index = 0, length_3 = symbols.length, symbol = void 0; index < length_3; ++index) {
+        symbol = symbols[index];
+        if (propertyIsEnumerable.call(object, symbol)) {
+            clone[symbol] = state.copier(object[symbol], state);
+        }
+    }
+    return clone;
+}
+/**
+ * Deeply copy the properties (keys and symbols) and values of the original.
+ */
+var copyObjectLoose = SUPPORTS_SYMBOL
+    ? copyObjectLooseModern
+    : copyObjectLooseLegacy;
+/**
+ * Deeply copy the properties (keys and symbols) and values of the original, as well
+ * as any hidden or non-enumerable properties.
+ */
+function copyObjectStrict(object, state) {
+    var clone = getCleanClone(state.prototype);
+    // set in the cache immediately to be able to reuse the object recursively
+    state.cache.set(object, clone);
+    return copyOwnPropertiesStrict(object, clone, state);
+}
+/**
+ * Create a new primitive wrapper from the value of the original.
+ */
+function copyPrimitiveWrapper(primitiveObject, state) {
+    return new state.Constructor(primitiveObject.valueOf());
+}
+/**
+ * Create a new RegExp based on the value and flags of the original.
+ */
+function copyRegExp(regExp, state) {
+    var clone = new state.Constructor(regExp.source, getRegExpFlags(regExp));
+    clone.lastIndex = regExp.lastIndex;
+    return clone;
+}
+/**
+ * Return the original value (an identity function).
+ *
+ * @note
+ * THis is used for objects that cannot be copied, such as WeakMap.
+ */
+function copySelf(value, _state) {
+    return value;
+}
+/**
+ * Deeply copy the values of the original.
+ */
+function copySetLoose(set, state) {
+    var clone = new state.Constructor();
+    // set in the cache immediately to be able to reuse the object recursively
+    state.cache.set(set, clone);
+    set.forEach(function (value) {
+        clone.add(state.copier(value, state));
+    });
+    return clone;
+}
+/**
+ * Deeply copy the values of the original, as well as any custom properties.
+ */
+function copySetStrict(set, state) {
+    return copyOwnPropertiesStrict(set, copySetLoose(set, state), state);
+}
+
+var esm_isArray = Array.isArray;
+var esm_assign = Object.assign;
+var getPrototypeOf = Object.getPrototypeOf || (function (obj) { return obj.__proto__; });
+var DEFAULT_LOOSE_OPTIONS = {
+    array: copyArrayLoose,
+    arrayBuffer: copyArrayBuffer,
+    blob: copyBlob,
+    dataView: copyDataView,
+    date: copyDate,
+    error: copySelf,
+    map: copyMapLoose,
+    object: copyObjectLoose,
+    regExp: copyRegExp,
+    set: copySetLoose,
+};
+var DEFAULT_STRICT_OPTIONS = esm_assign({}, DEFAULT_LOOSE_OPTIONS, {
+    array: copyArrayStrict,
+    map: copyMapStrict,
+    object: copyObjectStrict,
+    set: copySetStrict,
+});
+/**
+ * Get the copiers used for each specific object tag.
+ */
+function getTagSpecificCopiers(options) {
+    return {
+        Arguments: options.object,
+        Array: options.array,
+        ArrayBuffer: options.arrayBuffer,
+        Blob: options.blob,
+        Boolean: copyPrimitiveWrapper,
+        DataView: options.dataView,
+        Date: options.date,
+        Error: options.error,
+        Float32Array: options.arrayBuffer,
+        Float64Array: options.arrayBuffer,
+        Int8Array: options.arrayBuffer,
+        Int16Array: options.arrayBuffer,
+        Int32Array: options.arrayBuffer,
+        Map: options.map,
+        Number: copyPrimitiveWrapper,
+        Object: options.object,
+        Promise: copySelf,
+        RegExp: options.regExp,
+        Set: options.set,
+        String: copyPrimitiveWrapper,
+        WeakMap: copySelf,
+        WeakSet: copySelf,
+        Uint8Array: options.arrayBuffer,
+        Uint8ClampedArray: options.arrayBuffer,
+        Uint16Array: options.arrayBuffer,
+        Uint32Array: options.arrayBuffer,
+        Uint64Array: options.arrayBuffer,
+    };
+}
+/**
+ * Create a custom copier based on the object-specific copy methods passed.
+ */
+function createCopier(options) {
+    var normalizedOptions = esm_assign({}, DEFAULT_LOOSE_OPTIONS, options);
+    var tagSpecificCopiers = getTagSpecificCopiers(normalizedOptions);
+    var array = tagSpecificCopiers.Array, object = tagSpecificCopiers.Object;
+    function copier(value, state) {
+        state.prototype = state.Constructor = undefined;
+        if (!value || typeof value !== 'object') {
+            return value;
+        }
+        if (state.cache.has(value)) {
+            return state.cache.get(value);
+        }
+        state.prototype = getPrototypeOf(value);
+        state.Constructor = state.prototype && state.prototype.constructor;
+        // plain objects
+        if (!state.Constructor || state.Constructor === Object) {
+            return object(value, state);
+        }
+        // arrays
+        if (esm_isArray(value)) {
+            return array(value, state);
+        }
+        var tagSpecificCopier = tagSpecificCopiers[getTag(value)];
+        if (tagSpecificCopier) {
+            return tagSpecificCopier(value, state);
+        }
+        return typeof value.then === 'function' ? value : object(value, state);
+    }
+    return function copy(value) {
+        return copier(value, {
+            Constructor: undefined,
+            cache: createCache(),
+            copier: copier,
+            prototype: undefined,
+        });
+    };
+}
+/**
+ * Create a custom copier based on the object-specific copy methods passed, defaulting to the
+ * same internals as `copyStrict`.
+ */
+function createStrictCopier(options) {
+    return createCopier(esm_assign({}, DEFAULT_STRICT_OPTIONS, options));
+}
+/**
+ * Copy an value deeply as much as possible, where strict recreation of object properties
+ * are maintained. All properties (including non-enumerable ones) are copied with their
+ * original property descriptors on both objects and arrays.
+ */
+var copyStrict = createStrictCopier({});
+/**
+ * Copy an value deeply as much as possible.
+ */
+var index = createCopier({});
+
+
+//# sourceMappingURL=index.mjs.map
+
 ;// CONCATENATED MODULE: ../semi-foundation/datePicker/inputFoundation.ts
 
 
@@ -54811,7 +54500,7 @@ class inputFoundation_InputFoundation extends foundation {
       type,
       format
     });
-    const newInsetInputValue = set_default()(cloneDeep_default()(insetInputValue), valuePath, value);
+    const newInsetInputValue = set_default()(index(insetInputValue), valuePath, value);
     const insetInputStr = this.concatInsetInputValue({
       insetInputValue: newInsetInputValue
     });
@@ -54845,7 +54534,7 @@ class inputFoundation_InputFoundation extends foundation {
       defaultPickerValue,
       dateFnsLocale
     } = this._adapter.getProps();
-    const insetInputValueWithTime = cloneDeep_default()(insetInputValue);
+    const insetInputValueWithTime = index(insetInputValue);
     const {
       nowDate,
       nextDate
@@ -58966,7 +58655,7 @@ class YearAndMonthFoundation extends foundation {
     } = this.getProps();
     const left = datePicker_constants_strings.PANEL_TYPE_LEFT;
     const right = datePicker_constants_strings.PANEL_TYPE_RIGHT;
-    const year = cloneDeep_default()(currentYear);
+    const year = index(currentYear);
     year[panelType] = item.value;
     // make sure the right panel time is always less than the left panel time
     if (type === 'monthRange') {
@@ -58993,7 +58682,7 @@ class YearAndMonthFoundation extends foundation {
     } = this.getProps();
     const left = datePicker_constants_strings.PANEL_TYPE_LEFT;
     const right = datePicker_constants_strings.PANEL_TYPE_RIGHT;
-    const month = cloneDeep_default()(currentMonth);
+    const month = index(currentMonth);
     month[panelType] = item.month;
     // make sure the right panel time is always less than the left panel time
     if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
@@ -59040,7 +58729,7 @@ class YearAndMonthFoundation extends foundation {
         });
       }
       if (validMonth) {
-        const month = cloneDeep_default()(currentMonth);
+        const month = index(currentMonth);
         month[panelType] = validMonth.month;
         // change year and month same time
         this._adapter.setCurrentYearAndMonth(year, month);
@@ -59109,16 +58798,6 @@ class YearAndMonth extends BaseComponent {
       currentYear,
       currentMonth
     } = props;
-    const currentLeftYear = currentYear.left || now.getFullYear();
-    const currentLeftMonth = currentMonth.left || now.getMonth() + 1;
-    currentYear = {
-      left: currentLeftYear,
-      right: currentLeftYear
-    };
-    currentMonth = {
-      left: currentLeftMonth,
-      right: currentMonth.right || currentLeftMonth + 1
-    };
     this.state = {
       years: _utils_getYears(props.startYear, props.endYear).map(year => ({
         value: year,
@@ -59128,8 +58807,14 @@ class YearAndMonth extends BaseComponent {
         value: idx + 1,
         month: idx + 1
       })),
-      currentYear,
-      currentMonth
+      currentYear: {
+        left: currentYear.left || now.getFullYear(),
+        right: currentYear.right || now.getFullYear()
+      },
+      currentMonth: {
+        left: currentMonth.left || now.getMonth() + 1,
+        right: currentMonth.right || now.getMonth() + 2
+      }
     };
     this.yearRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
     this.monthRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
@@ -59166,11 +58851,19 @@ class YearAndMonth extends BaseComponent {
   }
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
-    if (!isEqual_default()(props.currentYear, state.currentYear) && props.currentYear.left !== 0) {
-      willUpdateStates.currentYear = props.currentYear;
+    if (!isEqual_default()(props.currentYear, state.currentYear)) {
+      const nowYear = new Date().getFullYear();
+      willUpdateStates.currentYear = {
+        left: props.currentYear.left || nowYear,
+        right: props.currentYear.right || nowYear
+      };
     }
-    if (!isEqual_default()(props.currentMonth, state.currentMonth) && props.currentMonth.left !== 0) {
-      willUpdateStates.currentMonth = props.currentMonth;
+    if (!isEqual_default()(props.currentMonth, state.currentMonth)) {
+      const nowMonth = new Date().getMonth();
+      willUpdateStates.currentMonth = {
+        left: props.currentMonth.left || nowMonth + 1,
+        right: props.currentMonth.right || nowMonth + 2
+      };
     }
     return willUpdateStates;
   }
@@ -60156,6 +59849,7 @@ var datePicker_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 class DatePicker extends BaseComponent {
   constructor(props) {
     var _this;
@@ -60589,7 +60283,7 @@ class DatePicker extends BaseComponent {
     return /range/i.test(type) && !isFunction_default()(triggerRender);
   }
   componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value) {
+    if (!isEqual_default()(prevProps.value, this.props.value)) {
       this.foundation.initFromProps(Object.assign({}, this.props));
     } else if (this.props.timeZone !== prevProps.timeZone) {
       this.foundation.initFromProps({
@@ -60963,7 +60657,8 @@ DatePicker.propTypes = {
   yearAndMonthOpts: (prop_types_default()).object,
   onClickOutSide: (prop_types_default()).func
 };
-DatePicker.defaultProps = {
+DatePicker.__SemiComponentName__ = "DatePicker";
+DatePicker.defaultProps = getDefaultPropsFromGlobalConfig(DatePicker.__SemiComponentName__, {
   onChangeWithDateFirst: true,
   borderless: false,
   autoAdjustOverflow: true,
@@ -61001,7 +60696,7 @@ DatePicker.defaultProps = {
   rangeSeparator: datePicker_constants_strings.DEFAULT_SEPARATOR_RANGE,
   insetInput: false,
   onClickOutSide: (noop_default())
-};
+});
 ;// CONCATENATED MODULE: ./datePicker/index.tsx
 
 
@@ -62336,6 +62031,7 @@ const destroyFns = [];
 class Modal extends BaseComponent {
   constructor(props) {
     super(props);
+    this.bodyOverflow = null;
     this.handleCancel = e => {
       this.foundation.handleCancel(e);
     };
@@ -62482,7 +62178,6 @@ class Modal extends BaseComponent {
     };
     this.foundation = new ModalFoundation(this.adapter);
     this.modalRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
-    this.bodyOverflow = '';
     this.scrollBarWidth = 0;
     this.originBodyWidth = '100%';
   }
@@ -62503,7 +62198,7 @@ class Modal extends BaseComponent {
         const {
           getPopupContainer
         } = this.props;
-        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
+        if (!getPopupContainer && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = this.bodyOverflow;
           document.body.style.width = this.originBodyWidth;
         }
@@ -62621,7 +62316,8 @@ Modal.propTypes = {
   fullScreen: (prop_types_default()).bool,
   footerFill: (prop_types_default()).bool
 };
-Modal.defaultProps = {
+Modal.__SemiComponentName__ = "Modal";
+Modal.defaultProps = getDefaultPropsFromGlobalConfig(Modal.__SemiComponentName__, {
   zIndex: 1000,
   motion: true,
   mask: true,
@@ -62640,7 +62336,7 @@ Modal.defaultProps = {
   keepDOM: false,
   lazyRender: true,
   fullScreen: false
-};
+});
 Modal.useModal = useModal;
 Modal.info = function (props) {
   return confirm_confirm(withInfo(props));
@@ -63061,6 +62757,7 @@ var dropdown_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 const dropdown_positionSet = dropdown_constants_strings.POSITION_SET;
 const dropdown_triggerSet = dropdown_constants_strings.TRIGGER_SET;
 class Dropdown extends BaseComponent {
@@ -63268,7 +62965,8 @@ Dropdown.propTypes = {
   visible: (prop_types_default()).bool,
   zIndex: (prop_types_default()).number
 };
-Dropdown.defaultProps = {
+Dropdown.__SemiComponentName__ = "Dropdown";
+Dropdown.defaultProps = getDefaultPropsFromGlobalConfig(Dropdown.__SemiComponentName__, {
   onVisibleChange: (noop_default()),
   prefixCls: dropdown_constants_cssClasses.PREFIX,
   zIndex: numbers.DEFAULT_Z_INDEX,
@@ -63279,7 +62977,7 @@ Dropdown.defaultProps = {
   showTick: false,
   closeOnEsc: true,
   onEscKeyDown: (noop_default())
-};
+});
 /* harmony default export */ const dropdown_0 = (Dropdown);
 ;// CONCATENATED MODULE: ../semi-foundation/grid/constants.ts
 
@@ -67326,6 +67024,7 @@ var navigation_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 function createAddKeysFn(context, keyName) {
   return function addKeys() {
     const handleKeys = new Set(context.state[keyName]);
@@ -67663,7 +67362,8 @@ Nav.propTypes = {
   limitIndent: (prop_types_default()).bool,
   getPopupContainer: (prop_types_default()).func
 };
-Nav.defaultProps = {
+Nav.__SemiComponentName__ = "Navigation";
+Nav.defaultProps = getDefaultPropsFromGlobalConfig(Nav.__SemiComponentName__, {
   subNavCloseDelay: navigation_constants_numbers.DEFAULT_SUBNAV_CLOSE_DELAY,
   subNavOpenDelay: navigation_constants_numbers.DEFAULT_SUBNAV_OPEN_DELAY,
   tooltipHideDelay: navigation_constants_numbers.DEFAULT_TOOLTIP_HIDE_DELAY,
@@ -67681,7 +67381,7 @@ Nav.defaultProps = {
   // defaultOpenKeys: [],
   // defaultSelectedKeys: [],
   // items: [],
-};
+});
 
 /* harmony default export */ const navigation_0 = (Nav);
 ;// CONCATENATED MODULE: ../semi-foundation/notification/notificationListFoundation.ts
@@ -67969,7 +67669,8 @@ Notice.propTypes = {
   close: (prop_types_default()).func,
   direction: prop_types_default().oneOf(notice_directions)
 };
-Notice.defaultProps = {
+Notice.__SemiComponentName__ = "Notification";
+Notice.defaultProps = getDefaultPropsFromGlobalConfig(Notice.__SemiComponentName__, {
   duration,
   id: '',
   close: (noop_default()),
@@ -67980,7 +67681,7 @@ Notice.defaultProps = {
   title: '',
   showClose: true,
   theme: 'normal'
-};
+});
 /* harmony default export */ const notification_notice = (Notice);
 // EXTERNAL MODULE: ../semi-foundation/notification/notification.scss
 var notification = __webpack_require__("x46V");
@@ -68525,7 +68226,7 @@ class OverflowListFoundation extends foundation {
       const {
         items
       } = this.getProps();
-      return cloneDeep_default()(items).reverse();
+      return index(items).reverse();
     };
   }
   getOverflowItem() {
@@ -68553,7 +68254,7 @@ class OverflowListFoundation extends foundation {
     return overflowList;
   }
   handleIntersect(entries) {
-    const visibleState = cloneDeep_default()(this.getState('visibleState'));
+    const visibleState = index(this.getState('visibleState'));
     const res = {};
     entries.forEach(entry => {
       const itemKey = get_default()(entry, 'target.dataset.scrollkey');
@@ -68913,7 +68614,8 @@ class OverflowList extends BaseComponent {
     }, list);
   }
 }
-OverflowList.defaultProps = {
+OverflowList.__SemiComponentName__ = "OverflowList";
+OverflowList.defaultProps = getDefaultPropsFromGlobalConfig(OverflowList.__SemiComponentName__, {
   collapseFrom: 'end',
   minVisibleItems: 0,
   overflowRenderer: () => null,
@@ -68921,7 +68623,7 @@ OverflowList.defaultProps = {
   threshold: 0.75,
   visibleItemRenderer: () => null,
   onOverflow: () => null
-};
+});
 OverflowList.propTypes = {
   // if render in scroll mode, key is required in items
   className: (prop_types_default()).string,
@@ -70269,6 +69971,8 @@ class SelectFoundation extends foundation {
     if (filter) {
       this.clearInput(e);
     }
+    // after click showClear button, the select need to be focused
+    this.focus();
     this.clearSelected();
     // prevent this click open dropdown
     e.stopPropagation();
@@ -70779,7 +70483,8 @@ class option_Option extends external_root_React_commonjs2_react_commonjs_react_a
           value,
           label,
           children
-        }, rest), e)
+        }, rest), e),
+        className
       }, rest));
     }
     const config = {
@@ -72166,7 +71871,8 @@ Select.propTypes = {
   // tagClosable: PropTypes.bool,
 };
 
-Select.defaultProps = {
+Select.__SemiComponentName__ = "Select";
+Select.defaultProps = getDefaultPropsFromGlobalConfig(Select.__SemiComponentName__, {
   stopPropagation: true,
   motion: true,
   borderless: false,
@@ -72211,7 +71917,7 @@ Select.defaultProps = {
   // renderSelectedItem: (optionNode) => optionNode.label,
   // The default creator rendering is related to i18, so it is not declared here
   // renderCreateItem: (input) => input
-};
+});
 
 /* harmony default export */ const select_0 = (Select);
 ;// CONCATENATED MODULE: ./pagination/index.tsx
@@ -72791,6 +72497,7 @@ var popconfirm_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 class Popconfirm extends BaseComponent {
   constructor(props) {
     super(props);
@@ -73022,7 +72729,8 @@ Popconfirm.propTypes = {
   trigger: (prop_types_default()).string,
   position: (prop_types_default()).string
 };
-Popconfirm.defaultProps = {
+Popconfirm.__SemiComponentName__ = "Popconfirm";
+Popconfirm.defaultProps = getDefaultPropsFromGlobalConfig(Popconfirm.__SemiComponentName__, {
   stopPropagation: true,
   trigger: 'click',
   // position: 'bottomLeft',
@@ -73039,7 +72747,7 @@ Popconfirm.defaultProps = {
   onCancel: (noop_default()),
   onConfirm: (noop_default()),
   onClickOutSide: (noop_default())
-};
+});
 ;// CONCATENATED MODULE: ../semi-foundation/progress/constants.ts
 
 const progress_constants_cssClasses = {
@@ -75639,7 +75347,8 @@ SideSheet.propTypes = {
   keepDOM: (prop_types_default()).bool,
   'aria-label': (prop_types_default()).string
 };
-SideSheet.defaultProps = {
+SideSheet.__SemiComponentName__ = "SideSheet";
+SideSheet.defaultProps = getDefaultPropsFromGlobalConfig(SideSheet.__SemiComponentName__, {
   visible: false,
   motion: true,
   mask: true,
@@ -75653,7 +75362,7 @@ SideSheet.defaultProps = {
   closeOnEsc: false,
   afterVisibleChange: (noop_default()),
   keepDOM: false
-};
+});
 ;// CONCATENATED MODULE: ../semi-foundation/slider/constants.ts
 
 const slider_constants_cssClasses = {
@@ -84570,7 +84279,7 @@ const ResizableTable = function () {
       width: table_constants_numbers.DEFAULT_WIDTH_COLUMN_EXPAND
     });
   }
-  if (props.rowSelection && !find_default()(rawColumns, item => item.key === table_constants_strings.DEFAULT_KEY_COLUMN_SELECTION)) {
+  if (props.rowSelection && !get_default()(props.rowSelection, 'hidden') && !find_default()(rawColumns, item => item.key === table_constants_strings.DEFAULT_KEY_COLUMN_SELECTION)) {
     newColumns.unshift({
       width: get_default()(props, 'rowSelection.width', table_constants_numbers.DEFAULT_WIDTH_COLUMN_SELECTION),
       key: table_constants_strings.DEFAULT_KEY_COLUMN_SELECTION
@@ -85379,6 +85088,7 @@ var tabs_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
 
 class Tabs extends BaseComponent {
@@ -85679,7 +85389,8 @@ Tabs.propTypes = {
   onTabClose: (prop_types_default()).func,
   preventScroll: (prop_types_default()).bool
 };
-Tabs.defaultProps = {
+Tabs.__SemiComponentName__ = "Tabs";
+Tabs.defaultProps = getDefaultPropsFromGlobalConfig(Tabs.__SemiComponentName__, {
   children: [],
   collapsible: false,
   keepDOM: true,
@@ -85691,7 +85402,7 @@ Tabs.defaultProps = {
   tabPosition: 'top',
   type: 'line',
   onTabClose: () => undefined
-};
+});
 /* harmony default export */ const tabs_0 = (Tabs);
 // EXTERNAL MODULE: ../semi-foundation/timeline/timeline.scss
 var timeline = __webpack_require__("9ff2");
@@ -87078,6 +86789,7 @@ TimePicker.defaultProps = Object.assign({
 
 
 
+
 class LocaleTimePicker extends (external_root_React_commonjs2_react_commonjs_react_amd_react_default()).PureComponent {
   render() {
     const {
@@ -87101,7 +86813,8 @@ class LocaleTimePicker extends (external_root_React_commonjs2_react_commonjs_rea
   }
 }
 LocaleTimePicker.propTypes = TimePicker.propTypes;
-LocaleTimePicker.defaultProps = TimePicker.defaultProps;
+LocaleTimePicker.__SemiComponentName__ = "TimePicker";
+LocaleTimePicker.defaultProps = getDefaultPropsFromGlobalConfig(LocaleTimePicker.__SemiComponentName__, TimePicker.defaultProps);
 ;// CONCATENATED MODULE: ../semi-foundation/toast/toastListFoundation.ts
 
 class ToastListFoundation extends foundation {
@@ -87376,7 +87089,8 @@ Toast.propTypes = {
   icon: (prop_types_default()).node,
   direction: prop_types_default().oneOf(toast_constants_strings.directions)
 };
-Toast.defaultProps = {
+Toast.__SemiComponentName__ = "Toast";
+Toast.defaultProps = getDefaultPropsFromGlobalConfig(Toast.__SemiComponentName__, {
   onClose: (noop_default()),
   content: '',
   close: (noop_default()),
@@ -87386,7 +87100,7 @@ Toast.defaultProps = {
   stack: false,
   stackExpanded: false,
   theme: 'normal'
-};
+});
 /* harmony default export */ const toast = (Toast);
 // EXTERNAL MODULE: ../semi-foundation/toast/toast.scss
 var toast_toast = __webpack_require__("Ybhv");
@@ -87797,7 +87511,6 @@ class ToastFactory {
 
 
 
-
 /**
  * The drag and drop handler implementation is referenced from rc-tree
  * https://github.com/react-component/tree
@@ -87843,13 +87556,6 @@ class TreeFoundation extends foundation {
     } = this.getProps();
     return Boolean(inputValue) && showFilteredOnly;
   }
-  getCopyFromState(items) {
-    const res = {};
-    normalizedArr(items).forEach(key => {
-      res[key] = cloneDeep_default()(this.getState(key));
-    });
-    return res;
-  }
   getTreeNodeProps(key) {
     const {
       expandedKeys = new Set([]),
@@ -88018,9 +87724,7 @@ class TreeFoundation extends foundation {
     this._adapter.notifyDoubleClick(e, treeNode.data);
   }
   handleSingleSelect(e, treeNode) {
-    let {
-      selectedKeys
-    } = this.getCopyFromState('selectedKeys');
+    let selectedKeys = [...this.getState('selectedKeys')];
     const {
       selected,
       eventKey,
@@ -88045,10 +87749,8 @@ class TreeFoundation extends foundation {
     const {
       keyEntities
     } = this.getStates();
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = this.getCopyFromState(['checkedKeys', 'halfCheckedKeys']);
+    const checkedKeys = new Set(this.getState('checkedKeys'));
+    const halfCheckedKeys = new Set(this.getState('halfCheckedKeys'));
     return targetStatus ? calcCheckedKeysForChecked(eventKey, keyEntities, checkedKeys, halfCheckedKeys) : calcCheckedKeysForUnchecked(eventKey, keyEntities, checkedKeys, halfCheckedKeys);
   }
   /*
@@ -88084,9 +87786,7 @@ class TreeFoundation extends foundation {
       keyEntities,
       disabledKeys
     } = this.getStates();
-    const {
-      checkedKeys
-    } = this.getCopyFromState(['checkedKeys']);
+    const checkedKeys = new Set(this.getState('checkedKeys'));
     const descendantKeys = normalizeKeyList(findDescendantKeys([eventKey], keyEntities, false), keyEntities, true);
     const hasDisabled = descendantKeys.some(key => disabledKeys.has(key));
     // If none of the descendant nodes are disabled, follow the normal logic
@@ -88161,7 +87861,7 @@ class TreeFoundation extends foundation {
     const isSearching = Boolean(inputValue);
     const showFilteredOnly = this._showFilteredOnly();
     const expandedStateKey = isSearching ? 'filteredExpandedKeys' : 'expandedKeys';
-    const expandedKeys = this.getCopyFromState(expandedStateKey)[expandedStateKey];
+    const expandedKeys = new Set(this.getState(expandedStateKey));
     let motionType = 'show';
     const {
       eventKey,
@@ -88222,10 +87922,8 @@ class TreeFoundation extends foundation {
     }
     // Process the loaded data
     loadData(data).then(() => {
-      const {
-        loadedKeys: prevLoadedKeys,
-        loadingKeys: prevLoadingKeys
-      } = this.getCopyFromState(['loadedKeys', 'loadingKeys']);
+      const prevLoadedKeys = new Set(this.getState('loadedKeys'));
+      const prevLoadingKeys = new Set(this.getState('loadingKeys'));
       const newLoadedKeys = prevLoadedKeys.add(key);
       const newLoadingKeys = new Set([...prevLoadingKeys]);
       newLoadingKeys.delete(key);
@@ -90032,7 +89730,6 @@ const treeSelect_constants_numbers = {};
 
 
 
-
 class TreeSelectFoundation extends foundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
@@ -90155,13 +89852,6 @@ class TreeSelectFoundation extends foundation {
       return this.constructDataForValue(value);
     }
   }
-  getCopyFromState(items) {
-    const res = {};
-    normalizedArr(items).forEach(key => {
-      res[key] = cloneDeep_default()(this.getState(key));
-    });
-    return res;
-  }
   getTreeNodeProps(key) {
     const {
       expandedKeys = new Set([]),
@@ -90227,10 +89917,8 @@ class TreeSelectFoundation extends foundation {
       return {};
     }
     loadData(data).then(() => {
-      const {
-        loadedKeys: prevLoadedKeys,
-        loadingKeys: prevLoadingKeys
-      } = this.getCopyFromState(['loadedKeys', 'loadingKeys']);
+      const prevLoadedKeys = new Set(this.getState('loadedKeys'));
+      const prevLoadingKeys = new Set(this.getState('loadingKeys'));
       const newLoadedKeys = prevLoadedKeys.add(key);
       const newLoadingKeys = new Set([...prevLoadingKeys]);
       newLoadingKeys.delete(key);
@@ -90543,9 +90231,7 @@ class TreeSelectFoundation extends foundation {
     }
   }
   handleSingleSelect(e, treeNode) {
-    let {
-      selectedKeys
-    } = this.getCopyFromState('selectedKeys');
+    let selectedKeys = [...this.getState('selectedKeys')];
     const {
       clickToHide
     } = this.getProps();
@@ -90573,10 +90259,8 @@ class TreeSelectFoundation extends foundation {
     const {
       keyEntities
     } = this.getStates();
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = this.getCopyFromState(['checkedKeys', 'halfCheckedKeys']);
+    const checkedKeys = new Set(this.getState('checkedKeys'));
+    const halfCheckedKeys = new Set(this.getState('halfCheckedKeys'));
     if (targetStatus) {
       return calcCheckedKeysForChecked(eventKey, keyEntities, checkedKeys, halfCheckedKeys);
     } else {
@@ -90643,9 +90327,7 @@ class TreeSelectFoundation extends foundation {
       keyEntities,
       disabledKeys
     } = this.getStates();
-    const {
-      checkedKeys
-    } = this.getCopyFromState(['checkedKeys']);
+    const checkedKeys = new Set(this.getState('checkedKeys'));
     const descendantKeys = normalizeKeyList(findDescendantKeys([eventKey], keyEntities, false), keyEntities, true);
     const hasDisabled = descendantKeys.some(key => disabledKeys.has(key));
     if (!hasDisabled) {
@@ -90682,9 +90364,7 @@ class TreeSelectFoundation extends foundation {
     } = this.getStates();
     const showFilteredOnly = this._showFilteredOnly();
     // clone otherwise will be modified unexpectedly
-    const {
-      filteredExpandedKeys
-    } = this.getCopyFromState('filteredExpandedKeys');
+    const filteredExpandedKeys = new Set(this.getState('filteredExpandedKeys'));
     let motionType = 'show';
     const {
       eventKey,
@@ -90740,9 +90420,7 @@ class TreeSelectFoundation extends foundation {
       treeData
     } = this.getStates();
     // clone otherwise will be modified unexpectedly
-    const {
-      expandedKeys
-    } = this.getCopyFromState('expandedKeys');
+    const expandedKeys = new Set(this.getState('expandedKeys'));
     let motionType = 'show';
     const {
       eventKey,
@@ -92278,7 +91956,7 @@ const upload_constants_numbers = {
 };
 
 ;// CONCATENATED MODULE: ../semi-foundation/upload/utils.ts
-var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+var utils_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
       resolve(value);
@@ -92321,7 +91999,7 @@ function endsWith(str, suffix) {
   return str.indexOf(suffix, str.length - suffix.length) !== -1;
 }
 function loopFiles(item) {
-  return __awaiter(this, void 0, void 0, function* () {
+  return utils_awaiter(this, void 0, void 0, function* () {
     return new Promise((res, rej) => {
       const dirReader = item.createReader();
       let fileList = [];
@@ -92343,9 +92021,9 @@ function loopFiles(item) {
   });
 }
 function mapFileTree(items) {
-  return __awaiter(this, void 0, void 0, function* () {
+  return utils_awaiter(this, void 0, void 0, function* () {
     const promises = [];
-    const _traverseFileTree = (item, path) => __awaiter(this, void 0, void 0, function* () {
+    const _traverseFileTree = (item, path) => utils_awaiter(this, void 0, void 0, function* () {
       path = path || '';
       //@ts-ignore add path property into item
       item.path = path;
@@ -96940,7 +96618,6 @@ Schema.validators = validators;
 
 ;// CONCATENATED MODULE: ../semi-foundation/form/utils.ts
 
-
 var form_utils_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];
@@ -96951,6 +96628,7 @@ var form_utils_rest = undefined && undefined.__rest || function (s, e) {
 };
 
 
+
 /**
  *
  * @param WrappedComponent React.ComponentType | any
@@ -97108,7 +96786,7 @@ function mergeProps(props) {
   delete rest.defaultValue;
   delete rest.checked;
   if (typeof initValue !== 'undefined') {
-    initValue = cloneDeep_default()(initValue);
+    initValue = index(initValue);
   }
   const required = isRequired(rules);
   emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
@@ -99257,8 +98935,8 @@ class ArrayFieldComponent extends external_root_React_commonjs2_react_commonjs_r
     // whether the fields inside arrayField should use props.initValue in current render process
     this.shouldUseInitValue = !context.getArrayField(field);
     // Separate the arrays that reset and the usual add and remove modify, otherwise they will affect each other
-    const initValueCopyForFormState = cloneDeep_default()(initValue);
-    const initValueCopyForReset = cloneDeep_default()(initValue);
+    const initValueCopyForFormState = index(initValue);
+    const initValueCopyForReset = index(initValue);
     context.registerArrayField(field, initValueCopyForReset);
     // register ArrayField will update state.updateKey to render, So there is no need to execute forceUpdate here
     context.updateStateValue(field, initValueCopyForFormState, {
@@ -100746,6 +100424,9 @@ class PreviewInnerFoundation extends foundation {
         return;
       }
       const preloadImages = getPreloadImagArr(imgSrc, currentIndex, preLoadGap, infinite);
+      if (preloadImages.length === 0) {
+        return;
+      }
       const Img = new Image();
       let index = 0;
       function callback(e) {