@douyinfe/semi-ui 2.50.0-alpha.0 → 2.50.0-beta.0

package/dist/umd/semi-ui.js

@@ -17286,6 +17286,8 @@ __webpack_require__.d(__webpack_exports__, {
   "BackTop": () => (/* reexport */ BackTop),
   "Badge": () => (/* reexport */ Badge),
   "Banner": () => (/* reexport */ Banner),
+  "BaseComponent": () => (/* reexport */ BaseComponent),
+  "BaseFoundation": () => (/* reexport */ foundation),
   "Breadcrumb": () => (/* reexport */ breadcrumb_0),
   "Button": () => (/* reexport */ button_0),
   "ButtonGroup": () => (/* reexport */ ButtonGroup),
@@ -17375,45 +17377,12 @@ __webpack_require__.d(__webpack_exports__, {
 
 // EXTERNAL MODULE: ./_base/base.scss
 var base = __webpack_require__("q7sR");
-// EXTERNAL MODULE: ../../node_modules/lodash/throttle.js
-var throttle = __webpack_require__("Bcqe");
-var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle);
-// EXTERNAL MODULE: ../../node_modules/lodash/debounce.js
-var debounce = __webpack_require__("RNvQ");
-var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce);
 // EXTERNAL MODULE: ../../node_modules/lodash/noop.js
 var noop = __webpack_require__("nnm9");
 var noop_default = /*#__PURE__*/__webpack_require__.n(noop);
-// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
-var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__("neV8");
-var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
-// EXTERNAL MODULE: ../../node_modules/classnames/index.js
-var classnames = __webpack_require__("O94r");
-var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
-// EXTERNAL MODULE: ../../node_modules/prop-types/index.js
-var prop_types = __webpack_require__("aWzz");
-var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-;// CONCATENATED MODULE: ../semi-foundation/base/env.ts
-const BASE_CLASS_PREFIX = 'semi';
-;// CONCATENATED MODULE: ../semi-foundation/anchor/constants.ts
-
-const cssClasses = {
-  PREFIX: `${BASE_CLASS_PREFIX}-anchor`
-};
-const constants_strings = {
-  SIZE: ['small', 'default'],
-  SLIDE_COLOR: ['primary', 'tertiary', 'muted'],
-  MAX_WIDTH: '200px',
-  MAX_HEIGHT: '750px',
-  POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver']
-};
-
 // EXTERNAL MODULE: ../../node_modules/lodash/get.js
 var get = __webpack_require__("2srY");
 var get_default = /*#__PURE__*/__webpack_require__.n(get);
-// EXTERNAL MODULE: ../../node_modules/lodash/isArray.js
-var isArray = __webpack_require__("wxYD");
-var isArray_default = /*#__PURE__*/__webpack_require__.n(isArray);
 ;// CONCATENATED MODULE: ../semi-foundation/utils/log.ts
 
 const log = function (text) {
@@ -17540,6 +17509,115 @@ class BaseFoundation {
   }
 }
 /* harmony default export */ const foundation = (BaseFoundation);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__("neV8");
+var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
+;// CONCATENATED MODULE: ../semi-foundation/utils/getDataAttr.ts
+function getDataAttr(props) {
+  return Object.keys(props).reduce((prev, key) => {
+    if (key.substr(0, 5) === 'data-') {
+      prev[key] = props[key];
+    }
+    return prev;
+  }, {});
+}
+;// CONCATENATED MODULE: ./_base/baseComponent.tsx
+/**
+ * The Semi Foundation / Adapter architecture split was inspired by Material Component For Web. （https://github.com/material-components/material-components-web）
+ * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
+ */
+
+
+
+const {
+  hasOwnProperty: baseComponent_hasOwnProperty
+} = Object.prototype;
+// eslint-disable-next-line
+class BaseComponent extends external_root_React_commonjs2_react_commonjs_react_amd_react_.Component {
+  constructor(props) {
+    super(props);
+    // eslint-disable-next-line
+    this.isControlled = key => Boolean(key && this.props && typeof this.props === 'object' && baseComponent_hasOwnProperty.call(this.props, key));
+    this.cache = {};
+    this.foundation = null;
+  }
+  componentDidMount() {
+    this.foundation && typeof this.foundation.init === 'function' && this.foundation.init();
+  }
+  componentWillUnmount() {
+    this.foundation && typeof this.foundation.destroy === 'function' && this.foundation.destroy();
+    this.cache = {};
+  }
+  get adapter() {
+    return {
+      getContext: key => {
+        if (this.context && key) {
+          return this.context[key];
+        }
+      },
+      getContexts: () => this.context,
+      getProp: key => this.props[key],
+      // return all props
+      getProps: () => this.props,
+      getState: key => this.state[key],
+      getStates: () => this.state,
+      setState: (states, cb) => this.setState(Object.assign({}, states), cb),
+      getCache: key => key && this.cache[key],
+      getCaches: () => this.cache,
+      setCache: (key, value) => key && (this.cache[key] = value),
+      stopPropagation: e => {
+        try {
+          e.stopPropagation();
+          e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
+        } catch (error) {}
+      },
+      persistEvent: e => {
+        e && e.persist && typeof e.persist === 'function' ? e.persist() : null;
+      }
+    };
+  }
+  log(text) {
+    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      rest[_key - 1] = arguments[_key];
+    }
+    return utils_log(text, ...rest);
+  }
+  getDataAttr(props) {
+    return getDataAttr(props);
+  }
+}
+BaseComponent.propTypes = {};
+BaseComponent.defaultProps = {};
+// EXTERNAL MODULE: ../../node_modules/lodash/throttle.js
+var throttle = __webpack_require__("Bcqe");
+var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle);
+// EXTERNAL MODULE: ../../node_modules/lodash/debounce.js
+var debounce = __webpack_require__("RNvQ");
+var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce);
+// EXTERNAL MODULE: ../../node_modules/classnames/index.js
+var classnames = __webpack_require__("O94r");
+var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
+// EXTERNAL MODULE: ../../node_modules/prop-types/index.js
+var prop_types = __webpack_require__("aWzz");
+var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
+;// CONCATENATED MODULE: ../semi-foundation/base/env.ts
+const BASE_CLASS_PREFIX = 'semi';
+;// CONCATENATED MODULE: ../semi-foundation/anchor/constants.ts
+
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-anchor`
+};
+const constants_strings = {
+  SIZE: ['small', 'default'],
+  SLIDE_COLOR: ['primary', 'tertiary', 'muted'],
+  MAX_WIDTH: '200px',
+  MAX_HEIGHT: '750px',
+  POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver']
+};
+
+// EXTERNAL MODULE: ../../node_modules/lodash/isArray.js
+var isArray = __webpack_require__("wxYD");
+var isArray_default = /*#__PURE__*/__webpack_require__.n(isArray);
 ;// CONCATENATED MODULE: ../../node_modules/compute-scroll-into-view/dist/index.mjs
 function t(t){return"object"==typeof t&&null!=t&&1===t.nodeType}function e(t,e){return(!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return e(r.overflowY,n)||e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return!!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return!1}function r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}var i=function(e,i){var o=window,l=i.scrollMode,d=i.block,f=i.inline,h=i.boundary,u=i.skipOverflowHiddenElements,s="function"==typeof h?h:function(t){return t!==h};if(!t(e))throw new TypeError("Invalid target");for(var a,c,g=document.scrollingElement||document.documentElement,p=[],m=e;t(m)&&s(m);){if((m=null==(c=(a=m).parentElement)?a.getRootNode().host||null:c)===g){p.push(m);break}null!=m&&m===document.body&&n(m)&&!n(document.documentElement)||null!=m&&n(m,u)&&p.push(m)}for(var w=o.visualViewport?o.visualViewport.width:innerWidth,v=o.visualViewport?o.visualViewport.height:innerHeight,W=window.scrollX||pageXOffset,H=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),y=b.height,E=b.width,M=b.top,V=b.right,x=b.bottom,I=b.left,C="start"===d||"nearest"===d?M:"end"===d?x:M+y/2,R="center"===f?I+E/2:"end"===f?V:I,T=[],k=0;k<p.length;k++){var B=p[k],D=B.getBoundingClientRect(),O=D.height,X=D.width,Y=D.top,L=D.right,S=D.bottom,j=D.left;if("if-needed"===l&&M>=0&&I>=0&&x<=v&&V<=w&&M>=Y&&x<=S&&I>=j&&V<=L)return T;var N=getComputedStyle(B),q=parseInt(N.borderLeftWidth,10),z=parseInt(N.borderTopWidth,10),A=parseInt(N.borderRightWidth,10),F=parseInt(N.borderBottomWidth,10),G=0,J=0,K="offsetWidth"in B?B.offsetWidth-B.clientWidth-q-A:0,P="offsetHeight"in B?B.offsetHeight-B.clientHeight-z-F:0,Q="offsetWidth"in B?0===B.offsetWidth?0:X/B.offsetWidth:0,U="offsetHeight"in B?0===B.offsetHeight?0:O/B.offsetHeight:0;if(g===B)G="start"===d?C:"end"===d?C-v:"nearest"===d?r(H,H+v,v,z,F,H+C,H+C+y,y):C-v/2,J="start"===f?R:"center"===f?R-w/2:"end"===f?R-w:r(W,W+w,w,q,A,W+R,W+R+E,E),G=Math.max(0,G+H),J=Math.max(0,J+W);else{G="start"===d?C-Y-z:"end"===d?C-S+F+P:"nearest"===d?r(Y,S,O,z,F+P,C,C+y,y):C-(Y+O/2)+P/2,J="start"===f?R-j-q:"center"===f?R-(j+X/2)+K/2:"end"===f?R-L+A+K:r(j,L,X,q,A+K,R,R+E,E);var Z=B.scrollLeft,$=B.scrollTop;C+=$-(G=Math.max(0,Math.min($+G/U,B.scrollHeight-O/U+P))),R+=Z-(J=Math.max(0,Math.min(Z+J/Q,B.scrollWidth-X/Q+K)))}T.push({el:B,top:G,left:J})}return T};
 //# sourceMappingURL=index.mjs.map
@@ -17793,82 +17871,6 @@ class AnchorFoundation extends foundation {
     };
   }
 }
-;// CONCATENATED MODULE: ../semi-foundation/utils/getDataAttr.ts
-function getDataAttr(props) {
-  return Object.keys(props).reduce((prev, key) => {
-    if (key.substr(0, 5) === 'data-') {
-      prev[key] = props[key];
-    }
-    return prev;
-  }, {});
-}
-;// CONCATENATED MODULE: ./_base/baseComponent.tsx
-/**
- * The Semi Foundation / Adapter architecture split was inspired by Material Component For Web. （https://github.com/material-components/material-components-web）
- * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
- */
-
-
-
-const {
-  hasOwnProperty: baseComponent_hasOwnProperty
-} = Object.prototype;
-// eslint-disable-next-line
-class BaseComponent extends external_root_React_commonjs2_react_commonjs_react_amd_react_.Component {
-  constructor(props) {
-    super(props);
-    // eslint-disable-next-line
-    this.isControlled = key => Boolean(key && this.props && typeof this.props === 'object' && baseComponent_hasOwnProperty.call(this.props, key));
-    this.cache = {};
-    this.foundation = null;
-  }
-  componentDidMount() {
-    this.foundation && typeof this.foundation.init === 'function' && this.foundation.init();
-  }
-  componentWillUnmount() {
-    this.foundation && typeof this.foundation.destroy === 'function' && this.foundation.destroy();
-    this.cache = {};
-  }
-  get adapter() {
-    return {
-      getContext: key => {
-        if (this.context && key) {
-          return this.context[key];
-        }
-      },
-      getContexts: () => this.context,
-      getProp: key => this.props[key],
-      // return all props
-      getProps: () => this.props,
-      getState: key => this.state[key],
-      getStates: () => this.state,
-      setState: (states, cb) => this.setState(Object.assign({}, states), cb),
-      getCache: key => key && this.cache[key],
-      getCaches: () => this.cache,
-      setCache: (key, value) => key && (this.cache[key] = value),
-      stopPropagation: e => {
-        try {
-          e.stopPropagation();
-          e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
-        } catch (error) {}
-      },
-      persistEvent: e => {
-        e && e.persist && typeof e.persist === 'function' ? e.persist() : null;
-      }
-    };
-  }
-  log(text) {
-    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      rest[_key - 1] = arguments[_key];
-    }
-    return utils_log(text, ...rest);
-  }
-  getDataAttr(props) {
-    return getDataAttr(props);
-  }
-}
-BaseComponent.propTypes = {};
-BaseComponent.defaultProps = {};
 // EXTERNAL MODULE: ../../node_modules/lodash/isObject.js
 var isObject = __webpack_require__("tQYX");
 var isObject_default = /*#__PURE__*/__webpack_require__.n(isObject);
@@ -36363,7 +36365,8 @@ function flattenTreeData(treeNodeList, expandedKeys, keyMaps) {
         pos,
         children: null,
         data: treeNode,
-        _innerDataTag: true
+        _innerDataTag: true,
+        isEnd: [...(parent ? parent.isEnd : []), index === list.length - 1]
       });
       const isBooleanFilteredShownKeys = typeof filteredShownKeys === 'boolean';
       if (!filterSearch || !isBooleanFilteredShownKeys && filteredShownKeys.has(mergedKey)) {
@@ -59008,11 +59011,7 @@ class YearAndMonth extends BaseComponent {
     const right = datePicker_constants_strings.PANEL_TYPE_RIGHT;
     const needDisabled = year => {
       if (panelType === right && currentYear[left]) {
-        if (currentMonth[left] <= currentMonth[right]) {
-          return currentYear[left] > year;
-        } else {
-          return currentYear[left] >= year;
-        }
+        return currentYear[left] > year;
       }
       return false;
     };
@@ -67748,7 +67747,7 @@ class Notice extends BaseComponent {
 Notice.contextType = context;
 Notice.propTypes = {
   duration: (prop_types_default()).number,
-  id: prop_types_default().oneOfType([(prop_types_default()).string, (prop_types_default()).number]),
+  id: (prop_types_default()).string,
   title: (prop_types_default()).node,
   content: (prop_types_default()).node,
   type: prop_types_default().oneOf(notice_types),
@@ -68034,6 +68033,7 @@ class NotificationList extends BaseComponent {
   }
   static addNotice(notice) {
     var _a;
+    notice = Object.assign(Object.assign({}, notification_defaultConfig), notice);
     const id = (_a = notice.id) !== null && _a !== void 0 ? _a : getUuid('notification');
     if (!ref) {
       const {
@@ -68077,27 +68077,27 @@ class NotificationList extends BaseComponent {
     return id;
   }
   static info(opts) {
-    return this.addNotice(Object.assign(Object.assign(Object.assign({}, notification_defaultConfig), opts), {
+    return this.addNotice(Object.assign(Object.assign({}, opts), {
       type: 'info'
     }));
   }
   static success(opts) {
-    return this.addNotice(Object.assign(Object.assign(Object.assign({}, notification_defaultConfig), opts), {
+    return this.addNotice(Object.assign(Object.assign({}, opts), {
       type: 'success'
     }));
   }
   static error(opts) {
-    return this.addNotice(Object.assign(Object.assign(Object.assign({}, notification_defaultConfig), opts), {
+    return this.addNotice(Object.assign(Object.assign({}, opts), {
       type: 'error'
     }));
   }
   static warning(opts) {
-    return this.addNotice(Object.assign(Object.assign(Object.assign({}, notification_defaultConfig), opts), {
+    return this.addNotice(Object.assign(Object.assign({}, opts), {
       type: 'warning'
     }));
   }
   static open(opts) {
-    return this.addNotice(Object.assign(Object.assign(Object.assign({}, notification_defaultConfig), opts), {
+    return this.addNotice(Object.assign(Object.assign({}, opts), {
       type: 'default'
     }));
   }
@@ -69372,6 +69372,9 @@ class SelectFoundation extends foundation {
       const newOptions = this._filterOption(options, sugInput).filter(item => !item._inputCreateOnly);
       this._adapter.updateOptions(newOptions);
       this.toggle2SearchInput(true);
+    } else {
+      // whether it is a filter or not, isFocus is guaranteed to be true when open
+      this._adapter.updateFocusState(true);
     }
     this._adapter.openMenu();
     this._setDropdownWidth();
@@ -69398,8 +69401,8 @@ class SelectFoundation extends foundation {
     this._adapter.setIsFocusInContainer(false);
     // this.unBindKeyBoardEvent();
     // this._notifyBlur(e);
-    this._adapter.unregisterClickOutsideHandler();
     // this._adapter.updateFocusState(false);
+    this._adapter.unregisterClickOutsideHandler();
     const isFilterable = this._isFilterable();
     if (isFilterable) {
       this.toggle2SearchInput(false);
@@ -70086,7 +70089,6 @@ class SelectFoundation extends foundation {
     this._adapter.setIsFocusInContainer(false);
   }
   handleTriggerBlur(e) {
-    this._adapter.updateFocusState(false);
     const {
       filter,
       autoFocus
@@ -70099,6 +70101,7 @@ class SelectFoundation extends foundation {
     // But when autoFocus or the panel is close, because clickOutsideHandler is not register or unregister, you need to listen for the trigger's blur and trigger the notify callback
     if (isFocus && !isOpen) {
       this._notifyBlur(e);
+      this._adapter.updateFocusState(false);
     }
   }
   handleInputBlur(e) {
@@ -88234,6 +88237,34 @@ function IconFolder_SvgComponent(props) {
 }
 const IconFolder_IconComponent = convertIcon(IconFolder_SvgComponent, 'folder');
 /* harmony default export */ const IconFolder = (IconFolder_IconComponent);
+;// CONCATENATED MODULE: ./tree/indent.tsx
+
+
+const Indent = _ref => {
+  let {
+    prefixcls,
+    level,
+    isEnd,
+    showLine
+  } = _ref;
+  const baseClassName = `${prefixcls}-indent-unit`;
+  const list = [];
+  for (let i = 0; i < level; i += 1) {
+    list.push( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement("span", {
+      key: i,
+      className: classnames_default()(baseClassName, {
+        [`${baseClassName}-end`]: isEnd[i]
+      })
+    }));
+  }
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement("span", {
+    "aria-hidden": "true",
+    className: classnames_default()(`${prefixcls}-indent`, {
+      [`${prefixcls}-indent-show-line`]: showLine
+    })
+  }, list);
+};
+/* harmony default export */ const indent = (/*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_.memo(Indent));
 ;// CONCATENATED MODULE: ./tree/treeNode.tsx
 
 
@@ -88258,6 +88289,7 @@ var treeNode_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 const treeNode_prefixcls = tree_constants_cssClasses.PREFIX_OPTION;
 class TreeNode extends external_root_React_commonjs2_react_commonjs_react_amd_react_.PureComponent {
   constructor(props) {
@@ -88432,6 +88464,18 @@ class TreeNode extends external_root_React_commonjs2_react_commonjs_react_amd_re
       }
       return Boolean(treeDisabled || disabled);
     };
+    // Switcher
+    this.renderSwitcher = () => {
+      if (this.isLeaf()) {
+        // if switcherIconDom is null, no render switcher span
+        return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+          className: classnames_default()(`${treeNode_prefixcls}-switcher`)
+        }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+          className: `${treeNode_prefixcls}-switcher-leaf-line`
+        }));
+      }
+      return null;
+    };
     this.renderRealLabel = () => {
       const {
         renderLabel
@@ -88471,7 +88515,8 @@ class TreeNode extends external_root_React_commonjs2_react_commonjs_react_amd_re
     const showIcon = !this.isLeaf();
     const {
       loading,
-      expanded
+      expanded,
+      showLine
     } = this.props;
     if (loading) {
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(spin_0, {
@@ -88487,6 +88532,9 @@ class TreeNode extends external_root_React_commonjs2_react_commonjs_react_amd_re
         onClick: this.onExpand
       });
     }
+    if (showLine) {
+      return this.renderSwitcher();
+    }
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
       className: `${treeNode_prefixcls}-empty-icon`
     });
@@ -88570,9 +88618,11 @@ class TreeNode extends external_root_React_commonjs2_react_commonjs_react_amd_re
         filtered,
         treeNodeFilterProp,
         display,
-        style
+        style,
+        isEnd,
+        showLine
       } = _a,
-      rest = treeNode_rest(_a, ["eventKey", "expanded", "selected", "checked", "halfChecked", "loading", "active", "level", "empty", "filtered", "treeNodeFilterProp", "display", "style"]);
+      rest = treeNode_rest(_a, ["eventKey", "expanded", "selected", "checked", "halfChecked", "loading", "active", "level", "empty", "filtered", "treeNodeFilterProp", "display", "style", "isEnd", "showLine"]);
     if (empty) {
       return this.renderEmptyNode();
     }
@@ -88584,6 +88634,7 @@ class TreeNode extends external_root_React_commonjs2_react_commonjs_react_amd_re
       dropPosition,
       labelEllipsis
     } = this.context;
+    const isEndNode = isEnd[isEnd.length - 1];
     const disabled = this.isDisabled();
     const dragOver = dragOverNodeKey === eventKey && dropPosition === 0;
     const dragOverGapTop = dragOverNodeKey === eventKey && dropPosition === -1;
@@ -88601,7 +88652,8 @@ class TreeNode extends external_root_React_commonjs2_react_commonjs_react_amd_re
       [`${treeNode_prefixcls}-fullLabel-draggable`]: !disabled && draggable && renderFullLabel,
       // When draggable + renderFullLabel is turned on, the style of dragover
       [`${treeNode_prefixcls}-fullLabel-drag-over-gap-top`]: !disabled && dragOverGapTop && renderFullLabel,
-      [`${treeNode_prefixcls}-fullLabel-drag-over-gap-bottom`]: !disabled && dragOverGapBottom && renderFullLabel
+      [`${treeNode_prefixcls}-fullLabel-drag-over-gap-bottom`]: !disabled && dragOverGapBottom && renderFullLabel,
+      [`${treeNode_prefixcls}-tree-node-last-leaf`]: isEndNode
     });
     const labelProps = {
       onClick: this.onClick,
@@ -88677,7 +88729,12 @@ class TreeNode extends external_root_React_commonjs2_react_commonjs_react_amd_re
       onDoubleClick: this.onDoubleClick,
       ref: this.setRef,
       style: style
-    }, dragProps), this.renderArrow(), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+    }, dragProps), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(indent, {
+      showLine: showLine,
+      prefixcls: treeNode_prefixcls,
+      level: level,
+      isEnd: isEnd
+    }), this.renderArrow(), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
       className: labelCls
     }, multiple ? this.renderCheckbox() : null, this.renderIcon(), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
       className: `${treeNode_prefixcls}-label-text`
@@ -88702,7 +88759,9 @@ TreeNode.propTypes = {
   keyword: (prop_types_default()).string,
   treeNodeFilterProp: (prop_types_default()).string,
   selectedKey: (prop_types_default()).string,
-  motionKey: prop_types_default().oneOfType([(prop_types_default()).string, prop_types_default().arrayOf((prop_types_default()).string)])
+  motionKey: prop_types_default().oneOfType([(prop_types_default()).string, prop_types_default().arrayOf((prop_types_default()).string)]),
+  isEnd: prop_types_default().arrayOf((prop_types_default()).bool),
+  showLine: (prop_types_default()).bool
 };
 TreeNode.defaultProps = {
   selectedKey: '',
@@ -89007,12 +89066,14 @@ class Tree extends BaseComponent {
         return null;
       }
       const {
-        keyMaps
+        keyMaps,
+        showLine
       } = this.props;
-      const props = pick_default()(treeNode, ['key', 'label', 'disabled', 'isLeaf', 'icon']);
+      const props = pick_default()(treeNode, ['key', 'label', 'disabled', 'isLeaf', 'icon', 'isEnd']);
       const children = data[get_default()(keyMaps, 'children', 'children')];
       !isUndefined_default()(children) && (props.children = children);
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(TreeNode, Object.assign({}, treeNodeProps, data, props, {
+        showLine: showLine,
         data: data,
         style: isEmpty_default()(style) ? {} : style
       }));
@@ -89446,6 +89507,7 @@ class Tree extends BaseComponent {
         directory,
         multiple,
         showFilteredOnly,
+        showLine,
         motion,
         expandAction,
         loadData,
@@ -89456,7 +89518,7 @@ class Tree extends BaseComponent {
         virtualize,
         checkRelation
       } = _a,
-      rest = tree_rest(_a, ["blockNode", "className", "style", "filterTreeNode", "disabled", "icon", "directory", "multiple", "showFilteredOnly", "motion", "expandAction", "loadData", "renderLabel", "draggable", "renderFullLabel", "labelEllipsis", "virtualize", "checkRelation"]);
+      rest = tree_rest(_a, ["blockNode", "className", "style", "filterTreeNode", "disabled", "icon", "directory", "multiple", "showFilteredOnly", "showLine", "motion", "expandAction", "loadData", "renderLabel", "draggable", "renderFullLabel", "labelEllipsis", "virtualize", "checkRelation"]);
     const wrapperCls = classnames_default()(`${tree_prefixcls}-wrapper`, className);
     const listCls = classnames_default()(`${tree_prefixcls}-option-list`, {
       [`${tree_prefixcls}-option-list-block`]: blockNode
@@ -89545,6 +89607,7 @@ Tree.propTypes = {
   searchStyle: (prop_types_default()).object,
   selectedKey: (prop_types_default()).string,
   showFilteredOnly: (prop_types_default()).bool,
+  showLine: (prop_types_default()).bool,
   style: (prop_types_default()).object,
   treeData: prop_types_default().arrayOf(prop_types_default().shape({
     key: (prop_types_default()).string,
@@ -89596,6 +89659,7 @@ Tree.defaultProps = {
   motion: true,
   leafOnly: false,
   showFilteredOnly: false,
+  showLine: false,
   expandAction: false,
   disableStrictly: false,
   draggable: false,
@@ -89641,6 +89705,12 @@ class TreeSelectFoundation extends foundation {
         this.close(e);
       });
     };
+    this.clearInputValue = () => {
+      const {
+        inputValue
+      } = this.getStates();
+      inputValue && this._adapter.updateInputValue('');
+    };
   }
   init() {
     const {
@@ -89792,7 +89862,7 @@ class TreeSelectFoundation extends foundation {
     const isSearching = Boolean(inputValue);
     const treeNodeProps = {
       eventKey: key,
-      expanded: isSearching && !this._isExpandControlled() ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
+      expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
       selected: selectedKeys.includes(key),
       checked: realChecked,
       halfChecked: realHalfChecked,
@@ -90065,8 +90135,8 @@ class TreeSelectFoundation extends foundation {
     expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
     const newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
     this._adapter.updateState({
-      expandedKeys: isExpandControlled ? expandedKeys : newExpandedKeys,
-      flattenNodes: isExpandControlled ? flattenNodes : newFlattenNodes,
+      expandedKeys: newExpandedKeys,
+      flattenNodes: newFlattenNodes,
       inputValue: '',
       motionKeys: new Set([]),
       filteredKeys: new Set([]),
@@ -90115,8 +90185,8 @@ class TreeSelectFoundation extends foundation {
     const newFilteredExpandedKeys = new Set(expandedOptsKeys);
     this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys));
     this._adapter.updateState({
-      expandedKeys: this._isExpandControlled() ? expandedKeys : newExpandedKeys,
-      flattenNodes: this._isExpandControlled() ? flattenNodes : newFlattenNodes,
+      expandedKeys: newExpandedKeys,
+      flattenNodes: newFlattenNodes,
       motionKeys: new Set([]),
       filteredKeys: new Set(filteredOptsKeys),
       filteredExpandedKeys: newFilteredExpandedKeys,
@@ -90324,7 +90394,7 @@ class TreeSelectFoundation extends foundation {
       return;
     }
     const isExpandControlled = this._isExpandControlled();
-    if (isSearching && !isExpandControlled) {
+    if (isSearching) {
       this.handleNodeExpandInSearch(e, treeNode);
       return;
     }
@@ -91094,23 +91164,40 @@ class TreeSelect extends BaseComponent {
         searchAutoFocus,
         searchPosition
       } = this.props;
-      if (isVisible === false && Boolean(filterTreeNode)) {
-        this.foundation.clearInput();
+      // 将 inputValue 清空，如果有选中值的话，选中项能够快速回显
+      // Clear the inputValue. If there is a selected value, the selected item can be quickly echoed.
+      if (isVisible === false && filterTreeNode) {
+        this.foundation.clearInputValue();
       }
       if (filterTreeNode && searchPosition === treeSelect_constants_strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
         this.foundation.focusInput(true);
       }
     };
+    this.afterClose = () => {
+      // flattenNode 的变化将导致弹出层面板中的选项数目变化
+      // 在弹层完全收起之后，再通过 clearInput 重新计算 state 中的 expandedKey， flattenNode
+      // 防止在弹出层未收起时弹层面板中选项数目变化导致视觉上出现弹层闪动问题
+      // Changes to flattenNode will cause the number of options in the popup panel to change
+      // After the pop-up layer is completely closed, recalculate the expandedKey and flattenNode in the state through clearInput.
+      // Prevent the pop-up layer from flickering visually due to changes in the number of options in the pop-up panel when the pop-up layer is not collapsed.
+      const {
+        filterTreeNode
+      } = this.props;
+      filterTreeNode && this.foundation.clearInput();
+    };
     this.renderTreeNode = (treeNode, ind, style) => {
       const {
         data,
         key
       } = treeNode;
       const treeNodeProps = this.foundation.getTreeNodeProps(key);
+      const {
+        showLine
+      } = this.props;
       if (!treeNodeProps) {
         return null;
       }
-      const props = pick_default()(treeNode, ['key', 'label', 'disabled', 'isLeaf', 'icon']);
+      const props = pick_default()(treeNode, ['key', 'label', 'disabled', 'isLeaf', 'icon', 'isEnd']);
       const {
         keyMaps
       } = this.props;
@@ -91118,7 +91205,8 @@ class TreeSelect extends BaseComponent {
       !isUndefined_default()(children) && (props.children = children);
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(TreeNode, Object.assign({}, treeNodeProps, data, props, {
         data: data,
-        style: style
+        style: style,
+        showLine: showLine
       }));
     };
     this.itemKey = (index, data) => {
@@ -91133,6 +91221,7 @@ class TreeSelect extends BaseComponent {
     this.renderNodeList = () => {
       const {
         flattenNodes,
+        cachedFlattenNodes,
         motionKeys,
         motionType,
         filteredKeys
@@ -91148,7 +91237,7 @@ class TreeSelect extends BaseComponent {
       if (!virtualize || isEmpty_default()(virtualize)) {
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(NodeList, {
           flattenNodes: flattenNodes,
-          flattenList: this._flattenNodes,
+          flattenList: cachedFlattenNodes,
           motionKeys: motionExpand ? motionKeys : new Set([]),
           motionType: motionType,
           // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
@@ -91267,6 +91356,7 @@ class TreeSelect extends BaseComponent {
       keyEntities: {},
       treeData: [],
       flattenNodes: [],
+      cachedFlattenNodes: undefined,
       selectedKeys: [],
       checkedKeys: new Set(),
       halfCheckedKeys: new Set(),
@@ -91296,6 +91386,7 @@ class TreeSelect extends BaseComponent {
     };
   }
   static getDerivedStateFromProps(props, prevState) {
+    var _a;
     const {
       prevProps,
       rePosKey
@@ -91313,6 +91404,8 @@ class TreeSelect extends BaseComponent {
     };
     const needUpdateTreeData = needUpdate('treeData');
     const needUpdateExpandedKeys = needUpdate('expandedKeys');
+    const isExpandControlled = ('expandedKeys' in props);
+    const isSearching = Boolean(props.filterTreeNode && prevState.inputValue && prevState.inputValue.length);
     // TreeNode
     if (needUpdateTreeData) {
       treeData = props.treeData;
@@ -91331,31 +91424,97 @@ class TreeSelect extends BaseComponent {
       }
     }
     const expandAllWhenDataChange = needUpdateTreeData && props.expandAll;
-    // expandedKeys
-    if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
-      newState.expandedKeys = calcExpandedKeys(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
-      // only show animation when treeData does not change
-      if (prevProps && props.motion && !treeData) {
-        const {
-          motionKeys,
-          motionType
-        } = calcMotionKeys(prevState.expandedKeys, newState.expandedKeys, keyEntities);
-        newState.motionKeys = new Set(motionKeys);
-        newState.motionType = motionType;
-      }
-    } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
-      newState.expandedKeys = new Set(Object.keys(keyEntities));
-    } else if (!prevProps && props.defaultExpandedKeys) {
-      newState.expandedKeys = calcExpandedKeys(props.defaultExpandedKeys, keyEntities);
-    } else if (!prevProps && props.defaultValue) {
-      newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-    } else if (!prevProps && props.value) {
-      newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-    }
-    // flattenNodes
-    if (treeData || needUpdateExpandedKeys) {
-      const flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
-      newState.flattenNodes = flattenNodes;
+    if (!isSearching) {
+      // expandedKeys
+      if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
+        newState.expandedKeys = calcExpandedKeys(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+        // only show animation when treeData does not change
+        if (prevProps && props.motion && !treeData) {
+          const {
+            motionKeys,
+            motionType
+          } = calcMotionKeys(prevState.expandedKeys, newState.expandedKeys, keyEntities);
+          newState.motionKeys = new Set(motionKeys);
+          newState.motionType = motionType;
+          if (motionType === 'hide') {
+            // cache flatten nodes: expandedKeys changed may not be triggered by interaction
+            newState.cachedFlattenNodes = treeUtil_cloneDeep(prevState.flattenNodes);
+          }
+        }
+      } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
+        newState.expandedKeys = new Set(Object.keys(keyEntities));
+      } else if (!prevProps && props.defaultExpandedKeys) {
+        newState.expandedKeys = calcExpandedKeys(props.defaultExpandedKeys, keyEntities);
+      } else if (!prevProps && props.defaultValue) {
+        newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
+      } else if (!prevProps && props.value) {
+        newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
+      } else if (!isExpandControlled && needUpdateTreeData && props.value) {
+        // 当 treeData 已经设置具体的值，并且设置了 props.loadData ，则认为 treeData 的更新是因为 loadData 导致的
+        // 如果是因为 loadData 导致 treeData改变， 此时在这里重新计算 key 会导致为未选中的展开项目被收起
+        // 所以此时不需要重新计算 expandedKeys，因为在点击展开按钮时候已经把被展开的项添加到 expandedKeys 中
+        // When treeData has a specific value and props.loadData is set, it is considered that the update of treeData is caused by loadData
+        // If the treeData is changed because of loadData, recalculating the key here will cause the unselected expanded items to be collapsed
+        // So there is no need to recalculate expandedKeys at this time, because the expanded item has been added to expandedKeys when the expand button is clicked
+        if (!(prevState.treeData && ((_a = prevState.treeData) === null || _a === void 0 ? void 0 : _a.length) > 0 && props.loadData)) {
+          newState.expandedKeys = calcExpandedKeysForValues(props.value, keyEntities, props.multiple, valueEntities);
+        }
+      }
+      if (!newState.expandedKeys) {
+        delete newState.expandedKeys;
+      }
+      if (treeData || newState.expandedKeys) {
+        const flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
+        newState.flattenNodes = flattenNodes;
+      }
+    } else {
+      let filteredState;
+      // treeData changed while searching
+      if (treeData) {
+        // Get filter data
+        filteredState = filterTreeData({
+          treeData,
+          inputValue: prevState.inputValue,
+          filterTreeNode: props.filterTreeNode,
+          filterProps: props.treeNodeFilterProp,
+          showFilteredOnly: props.showFilteredOnly,
+          keyEntities: newState.keyEntities,
+          prevExpandedKeys: [...prevState.filteredExpandedKeys],
+          keyMaps: keyMaps
+        });
+        newState.flattenNodes = filteredState.flattenNodes;
+        newState.motionKeys = new Set([]);
+        newState.filteredKeys = filteredState.filteredKeys;
+        newState.filteredShownKeys = filteredState.filteredShownKeys;
+        newState.filteredExpandedKeys = filteredState.filteredExpandedKeys;
+      }
+      // expandedKeys changed while searching
+      if (props.expandedKeys) {
+        newState.filteredExpandedKeys = calcExpandedKeys(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+        if (prevProps && props.motion) {
+          const prevKeys = prevState ? prevState.filteredExpandedKeys : new Set([]);
+          // only show animation when treeData does not change
+          if (!treeData) {
+            const motionResult = calcMotionKeys(prevKeys, newState.filteredExpandedKeys, keyEntities);
+            let {
+              motionKeys
+            } = motionResult;
+            const {
+              motionType
+            } = motionResult;
+            if (props.showFilteredOnly) {
+              motionKeys = motionKeys.filter(key => prevState.filteredShownKeys.has(key));
+            }
+            if (motionType === 'hide') {
+              // cache flatten nodes: expandedKeys changed may not be triggered by interaction
+              newState.cachedFlattenNodes = treeUtil_cloneDeep(prevState.flattenNodes);
+            }
+            newState.motionKeys = new Set(motionKeys);
+            newState.motionType = motionType;
+          }
+        }
+        newState.flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.filteredExpandedKeys || prevState.filteredExpandedKeys, keyMaps, props.showFilteredOnly && prevState.filteredShownKeys);
+      }
     }
     // selectedKeys: single mode controlled
     const isMultiple = props.multiple;
@@ -91462,7 +91621,9 @@ class TreeSelect extends BaseComponent {
         this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
-        this._flattenNodes = bool ? treeUtil_cloneDeep(this.state.flattenNodes) : null;
+        this.setState({
+          cachedFlattenNodes: bool ? treeUtil_cloneDeep(this.state.flattenNodes) : undefined
+        });
       },
       notifyLoad: (newLoadedKeys, data) => {
         const {
@@ -91607,7 +91768,8 @@ class TreeSelect extends BaseComponent {
       autoAdjustOverflow: autoAdjustOverflow,
       mouseLeaveDelay: mouseLeaveDelay,
       mouseEnterDelay: mouseEnterDelay,
-      onVisibleChange: this.handlePopoverClose
+      onVisibleChange: this.handlePopoverClose,
+      afterClose: this.afterClose
     }, selection);
   }
 }
@@ -91652,6 +91814,7 @@ TreeSelect.propTypes = {
   showSearchClear: (prop_types_default()).bool,
   autoAdjustOverflow: (prop_types_default()).bool,
   showFilteredOnly: (prop_types_default()).bool,
+  showLine: (prop_types_default()).bool,
   motionExpand: (prop_types_default()).bool,
   emptyContent: (prop_types_default()).node,
   keyMaps: (prop_types_default()).object,
@@ -98962,14 +99125,14 @@ const PreviewContext = /*#__PURE__*/(0,external_root_React_commonjs2_react_commo
 
 
 const previewHeader_prefixCls = `${image_constants_cssClasses.PREFIX}-preview-header`;
-const previewHeader_Header = _ref => {
+const previewHeader_Header = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)((_ref, ref) => {
   let {
     onClose,
     titleStyle,
     className,
     renderHeader
   } = _ref;
-  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement(PreviewContext.Consumer, null, _ref2 => {
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(PreviewContext.Consumer, null, _ref2 => {
     let {
       currentIndex,
       titles
@@ -98978,17 +99141,18 @@ const previewHeader_Header = _ref => {
     if (titles && typeof currentIndex === "number") {
       title = titles[currentIndex];
     }
-    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement("section", {
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("section", {
+      ref: ref,
       className: classnames_default()(previewHeader_prefixCls, className)
-    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement("section", {
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("section", {
       className: `${previewHeader_prefixCls}-title`,
       style: titleStyle
-    }, renderHeader ? renderHeader(title) : title), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement("section", {
+    }, renderHeader ? renderHeader(title) : title), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("section", {
       className: `${previewHeader_prefixCls}-close`,
       onMouseUp: onClose
-    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement(IconClose, null)));
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(IconClose, null)));
   });
-};
+});
 /* harmony default export */ const previewHeader = (previewHeader_Header);
 ;// CONCATENATED MODULE: ../semi-icons/lib/es/icons/IconMinus.js
 
@@ -99144,7 +99308,6 @@ class PreviewFooterFoundation extends foundation {
       } else {
         onZoomOut(Number((value / 100).toFixed(2)));
       }
-      this._adapter.setStartMouseOffset(value);
     };
     this.handleRatioClick = () => {
       const {
@@ -99177,14 +99340,9 @@ class PreviewFooterFoundation extends foundation {
 
 const previewFooter_prefixCls = image_constants_cssClasses.PREFIX;
 const footerPrefixCls = `${image_constants_cssClasses.PREFIX}-preview-footer`;
-let mouseActiveTime = 0;
 class previewFooter_Footer extends BaseComponent {
   get adapter() {
-    return Object.assign(Object.assign({}, super.adapter), {
-      setStartMouseOffset: time => {
-        mouseActiveTime = time;
-      }
-    });
+    return Object.assign({}, super.adapter);
   }
   constructor(props) {
     super(props);
@@ -99424,13 +99582,15 @@ class previewFooter_Footer extends BaseComponent {
   render() {
     const {
       className,
-      renderPreviewMenu
+      renderPreviewMenu,
+      forwardRef
     } = this.props;
     const menuCls = classnames_default()(footerPrefixCls, `${footerPrefixCls}-wrapper`, className, {
       [`${footerPrefixCls}-content`]: !Boolean(renderPreviewMenu)
     });
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("section", {
-      className: menuCls
+      className: menuCls,
+      ref: forwardRef
     }, renderPreviewMenu ? this.customRenderViewMenu() : this.getFooterMenu());
   }
 }
@@ -99469,9 +99629,6 @@ previewFooter_Footer.defaultProps = {
 };
 ;// CONCATENATED MODULE: ../semi-foundation/image/previewImageFoundation.ts
 
-
-
-
 const DefaultDOMRect = {
   bottom: 0,
   height: 0,
@@ -99486,6 +99643,12 @@ const DefaultDOMRect = {
 class PreviewImageFoundation extends foundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this.startMouseOffset = {
+      x: 0,
+      y: 0
+    };
+    this.originImageWidth = null;
+    this.originImageHeight = null;
     this._isImageVertical = () => this.getProp("rotation") % 180 !== 0;
     this._getImageBounds = () => {
       const imageDOM = this._adapter.getImage();
@@ -99515,32 +99678,18 @@ class PreviewImageFoundation extends foundation {
       this._adapter.setLoading(loading);
     };
     this.handleWindowResize = () => {
-      const {
-        ratio,
-        setRatio
-      } = this.getProps();
-      const {
-        originImageWidth,
-        originImageHeight
-      } = this._adapter.getOriginImageSize();
-      if (originImageWidth && originImageHeight) {
-        if (ratio !== "adaptation") {
-          setRatio("adaptation");
-        } else {
-          this.handleResizeImage();
-        }
+      if (this.originImageWidth && this.originImageHeight) {
+        this.handleResizeImage();
       }
     };
     this.handleLoad = e => {
       if (e.target) {
         const {
-          width: w,
-          height: h
+          naturalWidth: w,
+          naturalHeight: h
         } = e.target;
-        this._adapter.setOriginImageSize({
-          originImageWidth: w,
-          originImageHeight: h
-        });
+        this.originImageHeight = h;
+        this.originImageWidth = w;
         this.setState({
           loading: false
         });
@@ -99565,13 +99714,14 @@ class PreviewImageFoundation extends foundation {
     this.handleResizeImage = () => {
       const horizontal = !this._isImageVertical();
       const {
-        originImageWidth,
-        originImageHeight
-      } = this._adapter.getOriginImageSize();
-      const imgWidth = horizontal ? originImageWidth : originImageHeight;
-      const imgHeight = horizontal ? originImageHeight : originImageWidth;
+        currZoom
+      } = this.getStates();
+      const imgWidth = horizontal ? this.originImageWidth : this.originImageHeight;
+      const imgHeight = horizontal ? this.originImageHeight : this.originImageWidth;
       const {
-        onZoom
+        onZoom,
+        setRatio,
+        ratio
       } = this.getProps();
       const containerDOM = this._adapter.getContainer();
       if (containerDOM) {
@@ -99581,8 +99731,44 @@ class PreviewImageFoundation extends foundation {
         } = this._getContainerBounds();
         const reservedWidth = containerWidth - 80;
         const reservedHeight = containerHeight - 80;
-        const _zoom = Number(Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2));
-        onZoom(_zoom);
+        let _zoom = 1;
+        if (imgWidth > reservedWidth || imgHeight > reservedHeight) {
+          _zoom = Number(Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2));
+        }
+        if (currZoom === _zoom) {
+          this.calculatePreviewImage(_zoom, null);
+        } else {
+          onZoom(_zoom);
+        }
+      }
+    };
+    this.handleRatioChange = () => {
+      if (this.originImageWidth && this.originImageHeight) {
+        const {
+          currZoom
+        } = this.getStates();
+        const {
+          ratio,
+          onZoom
+        } = this.getProps();
+        let _zoom;
+        if (ratio === 'adaptation') {
+          const horizontal = !this._isImageVertical();
+          const imgWidth = horizontal ? this.originImageWidth : this.originImageHeight;
+          const imgHeight = horizontal ? this.originImageHeight : this.originImageWidth;
+          const {
+            width: containerWidth,
+            height: containerHeight
+          } = this._getContainerBounds();
+          const reservedWidth = containerWidth - 80;
+          const reservedHeight = containerHeight - 80;
+          _zoom = Number(Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2));
+        } else {
+          _zoom = 1;
+        }
+        if (currZoom !== _zoom) {
+          onZoom(_zoom);
+        }
       }
     };
     this.handleRightClickImage = e => {
@@ -99597,38 +99783,6 @@ class PreviewImageFoundation extends foundation {
         return true;
       }
     };
-    // e: WheelEvent<HTMLImageElement>
-    this.handleWheel = e => {
-      this.onWheel(e);
-      handlePrevent(e);
-    };
-    // e: WheelEvent<HTMLImageElement>
-    this.onWheel = throttle_default()(e => {
-      const {
-        onZoom,
-        zoomStep,
-        maxZoom,
-        minZoom
-      } = this.getProps();
-      const {
-        currZoom
-      } = this.getStates();
-      let _zoom;
-      if (e.deltaY < 0) {
-        /* zoom in */
-        if (currZoom + zoomStep <= maxZoom) {
-          _zoom = Number((currZoom + zoomStep).toFixed(2));
-        }
-      } else if (e.deltaY > 0) {
-        /* zoom out */
-        if (currZoom - zoomStep >= minZoom) {
-          _zoom = Number((currZoom - zoomStep).toFixed(2));
-        }
-      }
-      if (!isUndefined_default()(_zoom)) {
-        onZoom(_zoom);
-      }
-    }, 50);
     this.calcCanDragDirection = () => {
       const {
         width,
@@ -99652,12 +99806,8 @@ class PreviewImageFoundation extends foundation {
         canDragHorizontal
       };
     };
-    this.handleZoomChange = (newZoom, e) => {
+    this.calculatePreviewImage = (newZoom, e) => {
       const imageDOM = this._adapter.getImage();
-      const {
-        originImageWidth,
-        originImageHeight
-      } = this._adapter.getOriginImageSize();
       const {
         canDragVertical,
         canDragHorizontal
@@ -99667,8 +99817,8 @@ class PreviewImageFoundation extends foundation {
         width: containerWidth,
         height: containerHeight
       } = this._getContainerBounds();
-      const newWidth = Math.floor(originImageWidth * newZoom);
-      const newHeight = Math.floor(originImageHeight * newZoom);
+      const newWidth = Math.floor(this.originImageWidth * newZoom);
+      const newHeight = Math.floor(this.originImageHeight * newZoom);
       // debugger;
       let _offset;
       const horizontal = !this._isImageVertical();
@@ -99727,13 +99877,13 @@ class PreviewImageFoundation extends foundation {
         width,
         height
       } = this.getStates();
-      const startMouseMove = this._adapter.getMouseMove();
-      const startMouseOffset = this._adapter.getMouseOffset();
       const {
         canDragVertical,
         canDragHorizontal
       } = this.calcCanDragDirection();
-      if (startMouseMove && (canDragVertical || canDragHorizontal)) {
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+      const mouseLeftPress = e.buttons === 1;
+      if (mouseLeftPress && (canDragVertical || canDragHorizontal)) {
         const {
           clientX,
           clientY
@@ -99746,8 +99896,8 @@ class PreviewImageFoundation extends foundation {
           left: extremeLeft,
           top: extremeTop
         } = this.calcExtremeBounds();
-        let newX = canDragHorizontal ? clientX - containerLeft - startMouseOffset.x : offset.x;
-        let newY = canDragVertical ? clientY - containerTop - startMouseOffset.y : offset.y;
+        let newX = canDragHorizontal ? clientX - containerLeft - this.startMouseOffset.x : offset.x;
+        let newY = canDragVertical ? clientY - containerTop - this.startMouseOffset.y : offset.y;
         if (canDragHorizontal) {
           newX = newX > 0 ? 0 : newX < extremeLeft ? extremeLeft : newX;
         }
@@ -99766,11 +99916,7 @@ class PreviewImageFoundation extends foundation {
       }
     };
     this.handleImageMouseDown = e => {
-      this._adapter.setStartMouseOffset(this._getOffset(e));
-      this._adapter.setStartMouseMove(true);
-    };
-    this.handleImageMouseUp = () => {
-      this._adapter.setStartMouseMove(false);
+      this.startMouseOffset = this._getOffset(e);
     };
   }
 }
@@ -99783,38 +99929,14 @@ class PreviewImageFoundation extends foundation {
 
 const previewImage_prefixCls = image_constants_cssClasses.PREFIX;
 const preViewImgPrefixCls = `${previewImage_prefixCls}-preview-image`;
-let originImageWidth = null;
-let originImageHeight = null;
-let startMouseMove = false;
-// startMouseOffset：The offset of the mouse relative to the left and top of the picture
-let startMouseOffset = {
-  x: 0,
-  y: 0
-};
 class PreviewImage extends BaseComponent {
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
-      getOriginImageSize: () => ({
-        originImageWidth,
-        originImageHeight
-      }),
-      setOriginImageSize: size => {
-        originImageWidth = size.originImageWidth;
-        originImageHeight = size.originImageHeight;
-      },
       getContainer: () => {
         return this.containerRef.current;
       },
       getImage: () => {
-        return this.imageRef;
-      },
-      getMouseMove: () => startMouseMove,
-      setStartMouseMove: move => {
-        startMouseMove = move;
-      },
-      getMouseOffset: () => startMouseOffset,
-      setStartMouseOffset: offset => {
-        startMouseOffset = offset;
+        return this.imageRef.current;
       },
       setLoading: loading => {
         this.setState({
@@ -99822,7 +99944,7 @@ class PreviewImage extends BaseComponent {
         });
       },
       setImageCursor: canDrag => {
-        this.imageRef.style.cursor = canDrag ? "grab" : "default";
+        this.imageRef.current.style.cursor = canDrag ? "grab" : "default";
       }
     });
   }
@@ -99831,52 +99953,22 @@ class PreviewImage extends BaseComponent {
     this.onWindowResize = () => {
       this.foundation.handleWindowResize();
     };
-    this.handleZoomChange = (newZoom, e) => {
-      this.foundation.handleZoomChange(newZoom, e);
-    };
     // Determine the response method of right click according to the disableDownload parameter in props
     this.handleRightClickImage = e => {
       this.foundation.handleRightClickImage(e);
     };
-    this.handleWheel = e => {
-      this.foundation.handleWheel(e);
-    };
     this.handleLoad = e => {
       this.foundation.handleLoad(e);
     };
     this.handleError = e => {
       this.foundation.handleError(e);
     };
-    this.resizeImage = () => {
-      this.foundation.handleResizeImage();
-    };
     this.handleMoveImage = e => {
       this.foundation.handleMoveImage(e);
     };
-    // 为什么通过ref注册wheel而不是使用onWheel事件？
-    // 因为对于wheel事件，浏览器将 addEventListener 的 passive 默认值更改为 true。如此，事件监听器便不能取消事件，也不会在用户滚动页面时阻止页面呈现。
-    // 这里我们需要保持页面不动，仅放大图片，因此此处需要将 passive 更改设置为 false。
-    // Why register wheel via ref instead of using onWheel event?
-    // Because for wheel events, the browser changes the passive default of addEventListener to true. This way, the event listener cannot cancel the event, nor prevent the page from rendering when the user scrolls.
-    // Here we need to keep the page still and only zoom in on the image, so here we need to set the passive change to false.
-    // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners。
-    this.registryImageRef = ref => {
-      if (this.imageRef) {
-        this.imageRef.removeEventListener("wheel", this.handleWheel);
-      }
-      if (ref) {
-        ref.addEventListener("wheel", this.handleWheel, {
-          passive: false
-        });
-      }
-      this.imageRef = ref;
-    };
     this.onImageMouseDown = e => {
       this.foundation.handleImageMouseDown(e);
     };
-    this.onImageMouseUp = () => {
-      this.foundation.handleImageMouseUp();
-    };
     this.state = {
       width: 0,
       height: 0,
@@ -99890,7 +99982,7 @@ class PreviewImage extends BaseComponent {
       left: 0
     };
     this.containerRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
-    this.imageRef = null;
+    this.imageRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
     this.foundation = new PreviewImageFoundation(this.adapter);
   }
   componentDidMount() {
@@ -99901,27 +99993,22 @@ class PreviewImage extends BaseComponent {
   }
   componentDidUpdate(prevProps, prevStates) {
     // If src changes, start a new loading
-    if (this.props.src && this.props.src !== prevProps.src) {
+    const zoomChange = "zoom" in this.props && this.props.zoom !== this.state.currZoom;
+    const srcChange = this.props.src && this.props.src !== prevProps.src;
+    if (srcChange) {
       this.foundation.setLoading(true);
     }
     // If the incoming zoom changes, other content changes are determined based on the new zoom value
-    if ("zoom" in this.props && this.props.zoom !== prevStates.currZoom) {
-      this.handleZoomChange(this.props.zoom, null);
-    }
-    // When the incoming ratio is changed, if it"s adaptation, then resizeImage is triggered to make the image adapt to the page
-    // else if it"s adaptation is realSize, then onZoom(1) is called to make the image size the original size;
-    if ("ratio" in this.props && this.props.ratio !== prevProps.ratio) {
-      if (originImageWidth && originImageHeight) {
-        if (this.props.ratio === "adaptation") {
-          this.resizeImage();
-        } else {
-          this.props.onZoom(1);
-        }
-      }
+    if (zoomChange) {
+      this.foundation.calculatePreviewImage(this.props.zoom, null);
     }
-    // When the incoming rotation angle of the image changes, it needs to be resized to make the image fit on the page
-    if ("rotation" in this.props && this.props.rotation !== prevProps.rotation) {
-      this.onWindowResize();
+    if (!zoomChange && !srcChange && prevProps) {
+      if ("ratio" in this.props && this.props.ratio !== prevProps.ratio) {
+        this.foundation.handleRatioChange();
+      }
+      if ("rotation" in this.props && this.props.rotation !== prevProps.rotation) {
+        this.onWindowResize();
+      }
     }
   }
   render() {
@@ -99943,21 +100030,20 @@ class PreviewImage extends BaseComponent {
       transform: `rotate(${-rotation}deg)`,
       top,
       left,
-      width: loading ? "auto" : `${width}px`,
-      height: loading ? "auto" : `${height}px`
+      width,
+      height
     };
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
       className: `${preViewImgPrefixCls}`,
       ref: this.containerRef
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("img", {
-      ref: this.registryImageRef,
+      ref: this.imageRef,
       src: src,
       alt: "previewImag",
       className: `${preViewImgPrefixCls}-img`,
       key: src,
       onMouseMove: this.handleMoveImage,
       onMouseDown: this.onImageMouseDown,
-      onMouseUp: this.onImageMouseUp,
       onContextMenu: this.handleRightClickImage,
       onDragStart: e => e.preventDefault(),
       onLoad: this.handleLoad,
@@ -99974,9 +100060,9 @@ PreviewImage.propTypes = {
   src: (prop_types_default()).string,
   rotation: (prop_types_default()).number,
   style: (prop_types_default()).object,
-  maxZoom: (prop_types_default()).number,
-  minZoom: (prop_types_default()).number,
-  zoomStep: (prop_types_default()).number,
+  // maxZoom: PropTypes.number,
+  // minZoom: PropTypes.number,
+  // zoomStep: PropTypes.number,
   zoom: (prop_types_default()).number,
   ratio: (prop_types_default()).string,
   disableDownload: (prop_types_default()).bool,
@@ -99987,9 +100073,9 @@ PreviewImage.propTypes = {
   onError: (prop_types_default()).func
 };
 PreviewImage.defaultProps = {
-  maxZoom: 5,
-  minZoom: 0.1,
-  zoomStep: 0.1,
+  // maxZoom: 5,
+  // minZoom: 0.1,
+  // zoomStep: 0.1,
   zoom: undefined
 };
 ;// CONCATENATED MODULE: ../semi-foundation/image/utils.ts
@@ -100084,40 +100170,91 @@ const getPreloadImagArr = (imgSrc, currentIndex, preLoadGap, infinite) => {
 
 
 
+
+
+
 const NOT_CLOSE_TARGETS = ["icon", "footer"];
-const STOP_CLOSE_TARGET = ["icon", "footer", "header"];
+const STOP_CLOSE_TARGET = (/* unused pure expression or super */ null && (["icon", "footer", "header"]));
 class PreviewInnerFoundation extends foundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this._timer = null;
+    this._startMouseDown = {
+      x: 0,
+      y: 0
+    };
     this.handleViewVisibleChange = () => {
-      const nowTime = new Date().getTime();
-      const mouseActiveTime = this._adapter.getMouseActiveTime();
-      const stopTiming = this._adapter.getStopTiming();
-      const {
-        viewerVisibleDelay
-      } = this.getProps();
       const {
         viewerVisible
       } = this.getStates();
-      if (nowTime - mouseActiveTime > viewerVisibleDelay && !stopTiming) {
-        viewerVisible && this.setState({
+      if (viewerVisible) {
+        this.setState({
           viewerVisible: false
         });
+        this.clearTimer();
       }
     };
-    this.handleMouseMoveEvent = (e, event) => {
-      const isTarget = isTargetEmit(e, STOP_CLOSE_TARGET);
-      if (isTarget && event === "over") {
-        this._adapter.setStopTiming(true);
-      } else if (isTarget && event === "out") {
-        this._adapter.setStopTiming(false);
+    this.handleMouseMove = e => {
+      this._persistEvent(e);
+      this.mouseMoveHandler(e);
+    };
+    this.mouseMoveHandler = throttle_default()(e => {
+      const {
+        viewerVisible
+      } = this.getStates();
+      const isValidTarget = this._adapter.isValidTarget(e);
+      if (isValidTarget) {
+        if (!viewerVisible) {
+          this.setState({
+            viewerVisible: true
+          });
+        }
+        this.updateTimer();
+      } else {
+        this.clearTimer();
       }
+    }, 50);
+    this.updateTimer = () => {
+      const {
+        viewerVisibleDelay
+      } = this.getProps();
+      this.clearTimer();
+      this._timer = setTimeout(this.handleViewVisibleChange, viewerVisibleDelay);
     };
-    this.handleMouseMove = e => {
-      this._adapter.setMouseActiveTime(new Date().getTime());
-      this.setState({
-        viewerVisible: true
-      });
+    this.clearTimer = () => {
+      if (this._timer) {
+        clearTimeout(this._timer);
+        this._timer = null;
+      }
+    };
+    this.handleWheel = e => {
+      this.onWheel(e);
+      handlePrevent(e);
+    };
+    this.onWheel = e => {
+      const {
+        zoomStep,
+        maxZoom,
+        minZoom
+      } = this.getProps();
+      const {
+        zoom: currZoom
+      } = this.getStates();
+      let _zoom;
+      if (e.deltaY < 0) {
+        /* zoom in */
+        if (currZoom + zoomStep <= maxZoom) {
+          _zoom = Number((currZoom + zoomStep).toFixed(2));
+        }
+      } else if (e.deltaY > 0) {
+        /* zoom out */
+        if (currZoom - zoomStep >= minZoom) {
+          _zoom = Number((currZoom - zoomStep).toFixed(2));
+        }
+      }
+      if (!isUndefined_default()(_zoom)) {
+        this.handleZoomImage(_zoom);
+      }
     };
     this.handleMouseUp = e => {
       const {
@@ -100131,7 +100268,7 @@ class PreviewInnerFoundation extends foundation {
       const {
         x,
         y
-      } = this._adapter.getStartMouseDown();
+      } = this._startMouseDown;
       // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览
       // Error-tolerant processing of mouse movement, when the movement distance in the x and y directions is less than or equal to 5px in mouseUp, the preview can be closed
       // 不做容错处理的话，直接用 clientX !== x || y !== clientY 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
@@ -100148,7 +100285,10 @@ class PreviewInnerFoundation extends foundation {
         clientX,
         clientY
       } = e;
-      this._adapter.setStartMouseDown(clientX, clientY);
+      this._startMouseDown = {
+        x: clientX,
+        y: clientY
+      };
     };
     this.handleKeyDown = e => {
       const {
@@ -100221,10 +100361,12 @@ class PreviewInnerFoundation extends foundation {
       const {
         zoom
       } = this.getStates();
-      this._adapter.notifyZoom(newZoom, newZoom > zoom);
-      this.setState({
-        zoom: newZoom
-      });
+      if (zoom !== newZoom) {
+        this._adapter.notifyZoom(newZoom, newZoom > zoom);
+        this.setState({
+          zoom: newZoom
+        });
+      }
     };
     // 当 visible 改变之后，预览组件完成首张图片加载后，启动预加载
     // 如： 1，2，3，4，5，6，7，8张图片， 点击第 4 张图片，preLoadGap 为 2
@@ -100342,10 +100484,12 @@ class PreviewInnerFoundation extends foundation {
   beforeShow() {
     this._adapter.registerKeyDownListener();
     this._adapter.disabledBodyScroll();
+    this.updateTimer();
   }
   afterHide() {
     this._adapter.unregisterKeyDownListener();
     this._adapter.enabledBodyScroll();
+    this.clearTimer();
   }
 }
 ;// CONCATENATED MODULE: ./image/previewInner.tsx
@@ -100365,14 +100509,6 @@ class PreviewInnerFoundation extends foundation {
 
 
 const previewInner_prefixCls = image_constants_cssClasses.PREFIX;
-let startMouseDown = {
-  x: 0,
-  y: 0
-};
-let previewInner_mouseActiveTime = null;
-let stopTiming = false;
-let timer = null;
-// let bodyOverflowValue = document.body.style.overflow;
 class PreviewInner extends BaseComponent {
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -100456,30 +100592,22 @@ class PreviewInner extends BaseComponent {
       unregisterKeyDownListener: () => {
         window && window.removeEventListener("keydown", this.handleKeyDown);
       },
-      getMouseActiveTime: () => {
-        return previewInner_mouseActiveTime;
-      },
-      getStopTiming: () => {
-        return stopTiming;
-      },
-      setStopTiming: value => {
-        stopTiming = value;
-      },
-      getStartMouseDown: () => {
-        return startMouseDown;
-      },
-      setStartMouseDown: (x, y) => {
-        startMouseDown = {
-          x,
-          y
-        };
-      },
-      setMouseActiveTime: time => {
-        previewInner_mouseActiveTime = time;
-      },
       getSetDownloadFunc: () => {
         var _a, _b;
         return (_b = (_a = this.context) === null || _a === void 0 ? void 0 : _a.setDownloadName) !== null && _b !== void 0 ? _b : this.props.setDownloadName;
+      },
+      isValidTarget: e => {
+        const headerDom = this.headerRef && this.headerRef.current;
+        const footerDom = this.footerRef && this.footerRef.current;
+        const leftIconDom = this.leftIconRef && this.leftIconRef.current;
+        const rightIconDom = this.rightIconRef && this.rightIconRef.current;
+        const target = e.target;
+        if (headerDom && headerDom.contains(target) || footerDom && footerDom.contains(target) || leftIconDom && leftIconDom.contains(target) || rightIconDom && rightIconDom.contains(target)) {
+          // Move in the operation area, return false
+          return false;
+        }
+        // Move in the preview area except the operation area, return true
+        return true;
       }
     });
   }
@@ -100512,9 +100640,6 @@ class PreviewInner extends BaseComponent {
     this.handleMouseMove = e => {
       this.foundation.handleMouseMove(e);
     };
-    this.handleMouseEvent = (e, event) => {
-      this.foundation.handleMouseMoveEvent(e, event);
-    };
     this.handleKeyDown = e => {
       this.foundation.handleKeyDown(e);
     };
@@ -100527,6 +100652,31 @@ class PreviewInner extends BaseComponent {
     this.handleMouseDown = e => {
       this.foundation.handleMouseDown(e);
     };
+    this.handleWheel = e => {
+      this.foundation.handleWheel(e);
+    };
+    // 为什么通过 addEventListener 注册 wheel 事件而不是使用 onWheel 事件？
+    // 因为 Passive Event Listeners（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners）
+    // Passive Event Listeners 是一种优化技术，用于提高滚动性能。在默认情况下，浏览器会假设事件的监听器不会调用 
+    // preventDefault() 方法来阻止事件的默认行为，从而允许进行一些优化操作，例如滚动平滑。
+    // 对于 Image 而言，如果使用触控板，双指朝不同方向分开放大图片，则需要  preventDefault 防止页面整体放大。
+    // Why register wheel event through addEventListener instead of using onWheel event？
+    // Because of Passive Event Listeners(an optimization technique used to improve scrolling performance. By default, 
+    // the browser will assume that event listeners will not call preventDefault() method to prevent the default behavior of the event, 
+    // allowing some optimization operations such as scroll smoothing.)
+    // For Image, if we use the trackpad and spread your fingers in different directions to enlarge the image, we need to preventDefault
+    // to prevent the page from being enlarged as a whole.
+    this.registryImageWrapRef = ref => {
+      if (this.imageWrapRef) {
+        this.imageWrapRef.removeEventListener("wheel", this.handleWheel);
+      }
+      if (ref) {
+        ref.addEventListener("wheel", this.handleWheel, {
+          passive: false
+        });
+      }
+      this.imageWrapRef = ref;
+    };
     this.state = {
       imgSrc: [],
       imgLoadStatus: new Map(),
@@ -100543,6 +100693,11 @@ class PreviewInner extends BaseComponent {
     this.bodyOverflow = '';
     this.originBodyWidth = '100%';
     this.scrollBarWidth = 0;
+    this.imageWrapRef = null;
+    this.headerRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
+    this.footerRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
+    this.leftIconRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
+    this.rightIconRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
   }
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
@@ -100558,6 +100713,9 @@ class PreviewInner extends BaseComponent {
       willUpdateStates.visible = props.visible;
       if (props.visible) {
         willUpdateStates.preloadAfterVisibleChange = true;
+        willUpdateStates.viewerVisible = true;
+        willUpdateStates.rotation = 0;
+        willUpdateStates.ratio = 'adaptation';
       }
     }
     if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
@@ -100576,10 +100734,8 @@ class PreviewInner extends BaseComponent {
     }
   }
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.visible !== this.props.visible && this.props.visible) {
-      previewInner_mouseActiveTime = new Date().getTime();
-      timer && clearInterval(timer);
-      timer = setInterval(this.viewVisibleChange, 1000);
+    if (prevProps.src !== this.props.src) {
+      this.foundation.updateTimer();
     }
     // hide => show
     if (!prevProps.visible && this.props.visible) {
@@ -100591,7 +100747,7 @@ class PreviewInner extends BaseComponent {
     }
   }
   componentWillUnmount() {
-    timer && clearInterval(timer);
+    this.foundation.clearTimer();
   }
   isInGroup() {
     return Boolean(this.context && this.context.isGroup);
@@ -100656,10 +100812,10 @@ class PreviewInner extends BaseComponent {
       style: style,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
-      onMouseMove: this.handleMouseMove,
-      onMouseOver: e => this.handleMouseEvent(e.nativeEvent, "over"),
-      onMouseOut: e => this.handleMouseEvent(e.nativeEvent, "out")
+      ref: this.registryImageWrapRef,
+      onMouseMove: this.handleMouseMove
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(previewHeader, {
+      ref: this.headerRef,
       className: classnames_default()(hideViewerCls),
       onClose: this.handlePreviewClose,
       renderHeader: renderHeader
@@ -100670,7 +100826,6 @@ class PreviewInner extends BaseComponent {
       setRatio: this.handleAdjustRatio,
       zoom: zoom,
       ratio: ratio,
-      zoomStep: zoomStep,
       rotation: rotation,
       crossOrigin: crossOrigin,
       onError: this.onImageError,
@@ -100679,6 +100834,7 @@ class PreviewInner extends BaseComponent {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+      ref: this.leftIconRef,
       className: classnames_default()(`${previewPrefixCls}-icon`, `${previewPrefixCls}-prev`, hideViewerCls),
       onClick: () => this.handleSwitchImage("prev")
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(IconArrowLeft, {
@@ -100687,11 +100843,13 @@ class PreviewInner extends BaseComponent {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+      ref: this.rightIconRef,
       className: classnames_default()(`${previewPrefixCls}-icon`, `${previewPrefixCls}-next`, hideViewerCls),
       onClick: () => this.handleSwitchImage("next")
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(IconArrowRight, {
       size: "large"
     })), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(previewFooter_Footer, {
+      forwardRef: this.footerRef,
       className: hideViewerCls,
       totalNum: total,
       curPage: currentIndex + 1,
@@ -100749,6 +100907,8 @@ PreviewInner.propTypes = {
   disableDownload: (prop_types_default()).bool,
   viewerVisibleDelay: (prop_types_default()).number,
   zIndex: (prop_types_default()).number,
+  maxZoom: (prop_types_default()).number,
+  minZoom: (prop_types_default()).number,
   renderHeader: (prop_types_default()).func,
   renderPreviewMenu: (prop_types_default()).func,
   getPopupContainer: (prop_types_default()).func,
@@ -100773,7 +100933,9 @@ PreviewInner.defaultProps = {
   preLoadGap: 2,
   zIndex: 1000,
   maskClosable: true,
-  viewerVisibleDelay: 10000
+  viewerVisibleDelay: 10000,
+  maxZoom: 5,
+  minZoom: 0.1
 };
 ;// CONCATENATED MODULE: ../semi-foundation/image/imageFoundation.ts
 
@@ -101417,6 +101579,8 @@ Preview.defaultProps = {
 
 
 
+
+