@arco-design/mobile-react 2.19.2-ee92494.5 → 2.20.0

package/dist/index.js

@@ -2949,7 +2949,7 @@
     var GroupContext = /*#__PURE__*/React__default["default"].createContext({
       isFromGroup: false
     });
-    function componentGenerator$8(Comp) {
+    function componentGenerator$a(Comp) {
       return /*#__PURE__*/React.forwardRef(function (props, ref) {
         var _a = props.className,
             className = _a === void 0 ? '' : _a,
@@ -3072,7 +3072,7 @@
       });
     });
 
-    var Group$4 = componentGenerator$8(Cell);
+    var Group$4 = componentGenerator$a(Cell);
     /**
      * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
      * @en Cell, including cells and cell group, are often used to set items, forms, etc.
@@ -3377,27 +3377,25 @@
         };
       });
 
-      function renderInnerBadge() {
+      function renderInnerBadge(prefix) {
         return dot ? null : /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "badge-text"
+          className: prefix + "-text badge-text"
         }, Number(text) && Number(text) > maxCount ? maxCount + "+" : text);
       }
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var _b;
+
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement(Transition, {
           in: visible,
           timeout: timeout,
           type: "scale"
         }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-badge", className, {
-            dot: dot,
-            bordered: bordered,
-            absolute: absolute
-          }),
+          className: cls(prefixCls + "-badge", className, (_b = {}, _b[prefixCls + "-badge-dot dot"] = dot, _b[prefixCls + "-badge-bordered bordered"] = bordered, _b[prefixCls + "-badge-absolute absolute"] = absolute, _b)),
           style: style,
           ref: domRef
-        }, children || renderInnerBadge()));
+        }, children || renderInnerBadge(prefixCls + "-badge")));
       });
     });
 
@@ -3434,6 +3432,7 @@
       var wrapRef = React.useRef(null);
       var retryCountRef = React.useRef(0);
       var loadingImageRef = React.useRef(null);
+      var hasLoadedRef = React.useRef(false);
       var style = props.style,
           className = props.className,
           status = props.status,
@@ -3557,6 +3556,7 @@
         image.onload = function (evt) {
           loadingImageRef.current = null;
           imageDomRef.current = image;
+          hasLoadedRef.current = true;
           changeStatus('loaded');
           var _a = image.width,
               imageWidth = _a === void 0 ? 0 : _a,
@@ -3671,7 +3671,8 @@
         })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls('image-container', validStatus, {
             animate: Boolean(animateDuration),
-            'static-label': staticLabel
+            'static-label': staticLabel,
+            'has-loaded': hasLoadedRef.current
           }),
           style: getStyleWithVendor({
             transitionDuration: animateDuration + "ms"
@@ -3775,7 +3776,7 @@
       return /*#__PURE__*/React__default["default"].createElement("div", {
         ref: domRef,
         style: style,
-        className: cls(className, prefixCls + "-avatar-group", "group-" + size)
+        className: cls(className, prefixCls + "-avatar-group", prefixCls + "-avatar-group-size-" + size, "group-" + size)
       }, /*#__PURE__*/React__default["default"].createElement(AvatarGroupContext.Provider, {
         value: {
           isGroup: true,
@@ -3795,50 +3796,47 @@
       })));
     });
 
-    function componentGenerator$7(Comp) {
+    function componentGenerator$9(Comp) {
       return /*#__PURE__*/React.forwardRef(function (props, ref) {
-        var _a;
+        var _a, _b;
 
         var prefixCls = React.useContext(GlobalContext).prefixCls;
 
-        var _b = React.useContext(AvatarGroupContext),
-            groupShape = _b.shape,
-            groupSize = _b.size,
-            isGroup = _b.isGroup;
+        var _c = React.useContext(AvatarGroupContext),
+            groupShape = _c.shape,
+            groupSize = _c.size,
+            isGroup = _c.isGroup;
 
-        var _c = props.shape,
-            shape = _c === void 0 ? props.shape || (isGroup ? groupShape : 'circle') : _c,
-            _d = props.size,
-            size = _d === void 0 ? props.size || (isGroup ? groupSize : 'small') : _d,
+        var _d = props.shape,
+            shape = _d === void 0 ? props.shape || (isGroup ? groupShape : 'circle') : _d,
+            _e = props.size,
+            size = _e === void 0 ? props.size || (isGroup ? groupSize : 'small') : _e,
             src = props.src,
-            _e = props.decoration,
-            decoration = _e === void 0 ? null : _e,
-            _f = props.textAvatar,
-            textAvatar = _f === void 0 ? '' : _f,
-            _g = props.avatarStyle,
-            avatarStyle = _g === void 0 ? {} : _g,
-            _h = props.autoFixFontSize,
-            autoFixFontSize = _h === void 0 ? true : _h,
-            _j = props.autoFixFontOffset,
-            autoFixFontOffset = _j === void 0 ? 2 : _j,
-            _k = props.avatarName,
-            avatarName = _k === void 0 ? '' : _k,
-            _l = props.avatarDesc,
-            avatarDesc = _l === void 0 ? '' : _l,
-            _m = props.children,
-            children = _m === void 0 ? null : _m,
-            _o = props.renderInfo,
-            renderInfo = _o === void 0 ? null : _o,
-            _p = props.className,
-            className = _p === void 0 ? '' : _p,
-            _q = props.style,
-            style = _q === void 0 ? {} : _q,
-            _r = props.imageProps,
-            imageProps = _r === void 0 ? {} : _r,
-            _s = props.defaultOverLap,
-            defaultOverLap = _s === void 0 ? /*#__PURE__*/React__default["default"].createElement(IconUserFill, {
-          className: prefixCls + "-avatar-default"
-        }) : _s,
+            _f = props.decoration,
+            decoration = _f === void 0 ? null : _f,
+            _g = props.textAvatar,
+            textAvatar = _g === void 0 ? '' : _g,
+            _h = props.avatarStyle,
+            avatarStyle = _h === void 0 ? {} : _h,
+            _j = props.autoFixFontSize,
+            autoFixFontSize = _j === void 0 ? true : _j,
+            _k = props.autoFixFontOffset,
+            autoFixFontOffset = _k === void 0 ? 2 : _k,
+            _l = props.avatarName,
+            avatarName = _l === void 0 ? '' : _l,
+            _m = props.avatarDesc,
+            avatarDesc = _m === void 0 ? '' : _m,
+            _o = props.children,
+            children = _o === void 0 ? null : _o,
+            _p = props.renderInfo,
+            renderInfo = _p === void 0 ? null : _p,
+            _q = props.className,
+            className = _q === void 0 ? '' : _q,
+            _r = props.style,
+            style = _r === void 0 ? {} : _r,
+            _s = props.imageProps,
+            imageProps = _s === void 0 ? {} : _s,
+            defaultOverLap = props.defaultOverLap,
             onClickDecoration = props.onClickDecoration,
             onClick = props.onClick;
         var domRef = React.useRef(null);
@@ -3893,19 +3891,19 @@
         return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: domRef,
           style: style,
-          className: cls(prefixCls + "-avatar-wrapper", className, size, shape, {
-            'with-info': Boolean(avatarName)
-          }),
+          className: cls(prefixCls + "-avatar-wrapper", className, size, shape, prefixCls + "-avatar-wrapper-shape-" + shape, (_a = {}, _a[prefixCls + "-avatar-wrapper-with-info " + prefixCls + "-avatar-wrapper-with-info-size-" + size + " with-info"] = Boolean(avatarName), _a)),
           onClick: onClick
         }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-avatar", size, shape, (_a = {}, _a[prefixCls + "-text-avatar"] = isTextAvatar, _a[prefixCls + "-image-avatar"] = isImageAvatar, _a['default-overlap'] = useDefaultAvatar, _a)),
+          className: cls(prefixCls + "-avatar", prefixCls + "-avatar-size-" + size, size, prefixCls + "-avatar-shape-" + shape, shape, (_b = {}, _b[prefixCls + "-text-avatar " + prefixCls + "-avatar-mode-text"] = isTextAvatar, _b[prefixCls + "-image-avatar " + prefixCls + "-avatar-mode-image"] = isImageAvatar, _b[prefixCls + "-avatar-default-overlap default-overlap"] = useDefaultAvatar, _b)),
           style: avatarStyle,
           ref: avatarRef
-        }, children, useDefaultAvatar && defaultOverLap, isImageAvatar && src && /*#__PURE__*/React__default["default"].createElement(Comp, __assign({}, {
+        }, children, useDefaultAvatar && (defaultOverLap === void 0 ? /*#__PURE__*/React__default["default"].createElement(IconUserFill, {
+          className: prefixCls + "-avatar-default " + prefixCls + "-avatar-default-icon-size-" + size
+        }) : defaultOverLap), isImageAvatar && src && /*#__PURE__*/React__default["default"].createElement(Comp, __assign({}, {
           className: prefixCls + "-avatar-img",
           src: src
         }, imageProps)), isTextAvatar && /*#__PURE__*/React__default["default"].createElement("span", {
-          className: prefixCls + "-avatar-text",
+          className: prefixCls + "-avatar-text " + prefixCls + "-avatar-text-size-" + size,
           ref: avatarTextRef,
           style: {
             transform: "scale(" + textScale + ")"
@@ -3916,13 +3914,13 @@
         }, decoration)), renderInfo, !renderInfo && avatarName && /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-avatar-info")
         }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-avatar-name")
+          className: prefixCls + "-avatar-name " + prefixCls + "-avatar-name-size-" + size
         }, avatarName), avatarDesc && /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-avatar-desc")
+          className: prefixCls + "-avatar-desc " + prefixCls + "-avatar-desc-size-" + size
         }, avatarDesc)));
       });
     }
-    var Avatar = componentGenerator$7(BaseImage);
+    var Avatar = componentGenerator$9(BaseImage);
     /**
      * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
      * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
@@ -3958,7 +3956,8 @@
           bgColor = _a.bgColor,
           borderColor = _a.borderColor,
           active = _a.isActive,
-          disabled = _a.disabled;
+          disabled = _a.disabled,
+          halfBorder = _a.halfBorder;
       var state = {
         active: active,
         disabled: disabled
@@ -3995,8 +3994,9 @@
         return res;
       }, [styleConfig, active, disabled]);
       var customColorClass = React.useMemo(function () {
-        return styleConfig.borderColor ? ['has-custom-border'] : [];
-      }, [diffColor(borderColor)]);
+        var borderCls = halfBorder ? 'half-border' : '';
+        return styleConfig.borderColor ? ['has-custom-border'] : [borderCls];
+      }, [styleConfig.borderColor, halfBorder]);
       return {
         customColorStyle: customColorStyle,
         customColorClass: customColorClass
@@ -4013,62 +4013,67 @@
      */
 
     var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
-      var _a = React.useState(false),
-          isActive = _a[0],
-          setActive = _a[1];
+      var _a, _b;
+
+      var _c = React.useState(false),
+          isActive = _c[0],
+          setActive = _c[1];
 
       var system = useSystem();
-      var _b = props.type,
-          type = _b === void 0 ? 'primary' : _b,
-          _c = props.size,
-          size = _c === void 0 ? 'large' : _c,
-          _d = props.inline,
-          inline = _d === void 0 ? false : _d,
-          _e = props.loading,
-          loading = _e === void 0 ? false : _e,
-          _f = props.disabled,
-          disabled = _f === void 0 ? false : _f,
-          _g = props.disableWhenLoading,
-          disableWhenLoading = _g === void 0 ? true : _g,
-          _h = props.shape,
-          shape = _h === void 0 ? 'semi' : _h,
-          _j = props.halfBorder,
-          halfBorder = _j === void 0 ? false : _j,
+      var _d = props.type,
+          type = _d === void 0 ? 'primary' : _d,
+          _e = props.size,
+          size = _e === void 0 ? 'large' : _e,
+          _f = props.inline,
+          inline = _f === void 0 ? false : _f,
+          _g = props.loading,
+          loading = _g === void 0 ? false : _g,
+          _h = props.disabled,
+          disabled = _h === void 0 ? false : _h,
+          _j = props.disableWhenLoading,
+          disableWhenLoading = _j === void 0 ? true : _j,
+          _k = props.shape,
+          shape = _k === void 0 ? 'semi' : _k,
+          _l = props.halfBorder,
+          halfBorder = _l === void 0 ? false : _l,
           icon = props.icon,
-          _k = props.showTextWhenLoading,
-          showTextWhenLoading = _k === void 0 ? true : _k,
-          _l = props.needActive,
-          needActive = _l === void 0 ? true : _l,
-          _m = props.style,
-          style = _m === void 0 ? {} : _m,
+          _m = props.showTextWhenLoading,
+          showTextWhenLoading = _m === void 0 ? true : _m,
+          _o = props.needActive,
+          needActive = _o === void 0 ? true : _o,
+          _p = props.style,
+          style = _p === void 0 ? {} : _p,
           color = props.color,
           bgColor = props.bgColor,
           borderColor = props.borderColor,
-          _o = props.className,
-          className = _o === void 0 ? '' : _o,
-          _p = props.children,
-          children = _p === void 0 ? null : _p,
+          _q = props.className,
+          className = _q === void 0 ? '' : _q,
+          _r = props.children,
+          children = _r === void 0 ? null : _r,
           loadingIcon = props.loadingIcon,
           onClick = props.onClick,
           onClickDisabled = props.onClickDisabled,
-          _q = props.coverIconWhenLoading,
-          coverIconWhenLoading = _q === void 0 ? false : _q;
+          _s = props.coverIconWhenLoading,
+          coverIconWhenLoading = _s === void 0 ? true : _s;
       var domRef = React.useRef(null);
+      var prefixCls = React.useContext(GlobalContext).prefixCls;
+      var prefix = prefixCls + "-button";
       React.useImperativeHandle(ref, function () {
         return {
           dom: domRef.current
         };
       });
 
-      var _r = useCustomColor({
+      var _t = useCustomColor({
         color: color,
         bgColor: bgColor,
         borderColor: borderColor,
         isActive: isActive,
-        disabled: disabled
+        disabled: disabled,
+        halfBorder: halfBorder
       }),
-          customColorClass = _r.customColorClass,
-          customColorStyle = _r.customColorStyle;
+          customColorClass = _t.customColorClass,
+          customColorStyle = _t.customColorStyle;
 
       var handleTouchStart = function handleTouchStart() {
         if (needActive && !disabled && !loading) {
@@ -4088,37 +4093,24 @@
         return icon;
       };
 
-      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("button", {
-          type: "button",
-          ref: domRef,
-          style: __assign(__assign({}, customColorStyle), style),
-          className: cls.apply(void 0, __spreadArrays([prefixCls + "-button", className, "type-" + type, "size-" + size, "is-" + shape, system, {
-            inline: inline,
-            disabled: disabled,
-            loading: loading,
-            active: isActive,
-            'half-border': halfBorder
-          }], customColorClass)),
-          onTouchStart: handleTouchStart,
-          onTouchEnd: handleTouchEnd,
-          onTouchCancel: handleTouchEnd,
-          onMouseDown: handleTouchStart,
-          onMouseUp: handleTouchEnd,
-          onClick: disabled || loading && disableWhenLoading ? onClickDisabled : onClick
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "btn-icon"
-        }, renderIcon(), loading && (loadingIcon === void 0 ? /*#__PURE__*/React__default["default"].createElement(Loading, {
-          className: "loading-icon",
-          radius: 6,
-          type: "circle"
-        }) : loadingIcon)), (!loading || loading && showTextWhenLoading) && children ? /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls('btn-text', {
-            'has-icon': loading || icon
-          })
-        }, children) : null);
-      });
+      return /*#__PURE__*/React__default["default"].createElement("button", {
+        type: "button",
+        ref: domRef,
+        style: __assign(__assign({}, customColorStyle), style),
+        className: cls.apply(void 0, __spreadArrays([prefix, prefix + "-type-" + type + " type-" + type, prefix + "-size-" + size + " " + prefix + "-size-" + size + "-is-" + shape + " size-" + size, className, "is-" + shape, system, (_a = {}, _a[prefix + "-inline inline"] = inline, _a[prefix + "-type-" + type + "-disabled disabled"] = disabled, _a.loading = loading, _a[prefix + "-type-" + type + "-active active"] = isActive, _a)], customColorClass)),
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: handleTouchEnd,
+        onClick: disabled || loading && disableWhenLoading ? onClickDisabled : onClick
+      }, icon || loading ? /*#__PURE__*/React__default["default"].createElement("div", {
+        className: prefix + "-icon btn-icon"
+      }, renderIcon(), loading && (loadingIcon === void 0 ? /*#__PURE__*/React__default["default"].createElement(Loading, {
+        className: prefix + "-loading-icon loading-icon",
+        radius: 6,
+        type: "circle"
+      }) : loadingIcon)) : null, (!loading || loading && showTextWhenLoading) && children ? /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefix + "-text", prefix + "-text-" + system, 'btn-text', (_b = {}, _b[prefix + "-text-has-icon has-icon"] = loading || icon, _b))
+      }, children) : null);
     });
 
     /**
@@ -5576,7 +5568,7 @@
       value: [],
       onChange: function onChange() {}
     });
-    function componentGenerator$6(Comp) {
+    function componentGenerator$8(Comp) {
       return /*#__PURE__*/React.forwardRef(function (props, ref) {
         var _a = props.style,
             style = _a === void 0 ? {} : _a,
@@ -6004,7 +5996,7 @@
      * @en Checkbox group
      *  */
 
-    var Group$2 = componentGenerator$6(Checkbox$1);
+    var Group$2 = componentGenerator$8(Checkbox$1);
     /**
      * 复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
      * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
@@ -6400,7 +6392,7 @@
       });
     });
 
-    function componentGenerator$5(Comp) {
+    function componentGenerator$7(Comp) {
       return /*#__PURE__*/React.forwardRef(function (props, ref) {
         var _a = props.items,
             items = _a === void 0 ? [] : _a,
@@ -6518,7 +6510,7 @@
         })))));
       });
     }
-    var Group$1 = componentGenerator$5(Collapse);
+    var Group$1 = componentGenerator$7(Collapse);
 
     /**
      * 折叠面板组件，支持手风琴模式。
@@ -10184,6 +10176,7 @@
     var Options = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var options = props.options,
           useColumn = props.useColumn,
+          icon = props.icon,
           selectedValue = props.selectedValue,
           defaultSelectedValue = props.defaultSelectedValue,
           multiple = props.multiple;
@@ -10264,7 +10257,7 @@
             return handleOptionChange(e, op);
           },
           style: minWidthStyle
-        }, op.label, /*#__PURE__*/React__default["default"].createElement(IconCheck, {
+        }, op.label, icon !== void 0 ? icon : /*#__PURE__*/React__default["default"].createElement(IconCheck, {
           className: prefixCls + "-dropdown-options-item-icon"
         }));
       }), fakeOpts.map(function (_, i) {
@@ -10276,300 +10269,295 @@
       }));
     });
 
-    var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
-      var optionsWrapper = React.useRef(null);
-      var domRef = React.useRef(null);
-      var _a = props.className,
-          className = _a === void 0 ? '' : _a,
-          _b = props.style,
-          style = _b === void 0 ? {} : _b,
-          _c = props.options,
-          options = _c === void 0 ? [] : _c,
-          _d = props.showDropdown,
-          showDropdown = _d === void 0 ? false : _d,
-          _e = props.showMask,
-          showMask = _e === void 0 ? true : _e,
-          _f = props.direction,
-          direction = _f === void 0 ? 'down' : _f,
-          height = props.height,
-          _g = props.maxHeight,
-          maxHeight = _g === void 0 ? 500 : _g,
-          _h = props.touchToClose,
-          touchToClose = _h === void 0 ? true : _h,
-          useColumn = props.useColumn,
-          multiple = props.multiple,
-          defaultSelectedValue = props.defaultSelectedValue,
-          onCancel = props.onCancel,
-          getAnchorElement = props.getAnchorElement,
-          isStopTouchEl = props.isStopTouchEl,
-          getStopTouchElements = props.getStopTouchElements,
-          _j = props.getScrollContainer,
-          getScrollContainer = _j === void 0 ? function () {
-        return optionsWrapper.current;
-      } : _j,
-          getPortalContainer = props.getPortalContainer,
-          _k = props.clickOtherToClose,
-          clickOtherToClose = _k === void 0 ? true : _k,
-          _l = props.dropdownAnimationTimeout,
-          dropdownAnimationTimeout = _l === void 0 ? 300 : _l,
-          _m = props.dropdownAnimationFunction,
-          dropdownAnimationFunction = _m === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _m,
-          // 坑：ios touchstart会停留300ms 导致点击关闭蒙层后出现点击穿透 触发底部可点区域事件 这里设置更长的timeout规避
-      // @en In iOS, touchstart will stay for 300ms, resulting in click penetration after clicking to close the mask, triggering the bottom clickable area event, and setting a longer timeout to avoid it
-      _o = props.maskAnimationTimeout,
-          // 坑：ios touchstart会停留300ms 导致点击关闭蒙层后出现点击穿透 触发底部可点区域事件 这里设置更长的timeout规避
-      // @en In iOS, touchstart will stay for 300ms, resulting in click penetration after clicking to close the mask, triggering the bottom clickable area event, and setting a longer timeout to avoid it
-      maskAnimationTimeout = _o === void 0 ? 500 : _o,
-          _p = props.maskAnimationFunction,
-          maskAnimationFunction = _p === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _p,
-          _q = props.mountOnEnter,
-          mountOnEnter = _q === void 0 ? true : _q,
-          _r = props.unmountOnExit,
-          unmountOnExit = _r === void 0 ? true : _r,
-          _s = props.preventBodyScroll,
-          preventBodyScroll = _s === void 0 ? true : _s,
-          initialBodyOverflow = props.initialBodyOverflow;
-      var system = useSystem();
-
-      var _t = useWindowSize(),
-          windowHeight = _t.windowHeight,
-          windowWidth = _t.windowWidth;
+    function componentGenerator$6(Comp) {
+      return /*#__PURE__*/React.forwardRef(function (props, ref) {
+        var optionsWrapper = React.useRef(null);
+        var domRef = React.useRef(null);
+        var _a = props.className,
+            className = _a === void 0 ? '' : _a,
+            _b = props.style,
+            style = _b === void 0 ? {} : _b,
+            _c = props.options,
+            options = _c === void 0 ? [] : _c,
+            _d = props.showDropdown,
+            showDropdown = _d === void 0 ? false : _d,
+            _e = props.showMask,
+            showMask = _e === void 0 ? true : _e,
+            _f = props.direction,
+            direction = _f === void 0 ? 'down' : _f,
+            height = props.height,
+            _g = props.maxHeight,
+            maxHeight = _g === void 0 ? 500 : _g,
+            _h = props.touchToClose,
+            touchToClose = _h === void 0 ? true : _h,
+            useColumn = props.useColumn,
+            optionIcon = props.optionIcon,
+            multiple = props.multiple,
+            defaultSelectedValue = props.defaultSelectedValue,
+            onCancel = props.onCancel,
+            getAnchorElement = props.getAnchorElement,
+            isStopTouchEl = props.isStopTouchEl,
+            getStopTouchElements = props.getStopTouchElements,
+            _j = props.getScrollContainer,
+            getScrollContainer = _j === void 0 ? function () {
+          return optionsWrapper.current;
+        } : _j,
+            getPortalContainer = props.getPortalContainer,
+            _k = props.clickOtherToClose,
+            clickOtherToClose = _k === void 0 ? true : _k,
+            _l = props.dropdownAnimationTimeout,
+            dropdownAnimationTimeout = _l === void 0 ? 300 : _l,
+            _m = props.dropdownAnimationFunction,
+            dropdownAnimationFunction = _m === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _m,
+            // 坑：ios touchstart会停留300ms 导致点击关闭蒙层后出现点击穿透 触发底部可点区域事件 这里设置更长的timeout规避
+        // @en In iOS, touchstart will stay for 300ms, resulting in click penetration after clicking to close the mask, triggering the bottom clickable area event, and setting a longer timeout to avoid it
+        _o = props.maskAnimationTimeout,
+            // 坑：ios touchstart会停留300ms 导致点击关闭蒙层后出现点击穿透 触发底部可点区域事件 这里设置更长的timeout规避
+        // @en In iOS, touchstart will stay for 300ms, resulting in click penetration after clicking to close the mask, triggering the bottom clickable area event, and setting a longer timeout to avoid it
+        maskAnimationTimeout = _o === void 0 ? 500 : _o,
+            _p = props.maskAnimationFunction,
+            maskAnimationFunction = _p === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _p,
+            _q = props.mountOnEnter,
+            mountOnEnter = _q === void 0 ? true : _q,
+            _r = props.unmountOnExit,
+            unmountOnExit = _r === void 0 ? true : _r,
+            _s = props.preventBodyScroll,
+            preventBodyScroll = _s === void 0 ? true : _s,
+            initialBodyOverflow = props.initialBodyOverflow;
+        var system = useSystem();
+
+        var _t = useWindowSize(),
+            windowHeight = _t.windowHeight,
+            windowWidth = _t.windowWidth;
+
+        var _u = React.useState({
+          top: '',
+          bottom: ''
+        }),
+            positionStyle = _u[0],
+            setPositionStyle = _u[1];
 
-      var _u = React.useState({
-        top: '',
-        bottom: ''
-      }),
-          positionStyle = _u[0],
-          setPositionStyle = _u[1];
+        var _v = React.useState(function () {
+          var defaultValue = multiple ? [] : 0;
+          return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
+        }),
+            innerValue = _v[0],
+            setInnerValue = _v[1]; // down=0为向上展开，1为向下展开
+        // @en down=0 is to expand upwards, 1 is to expand downwards
 
-      var _v = React.useState(function () {
-        var defaultValue = multiple ? [] : 0;
-        return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
-      }),
-          innerValue = _v[0],
-          setInnerValue = _v[1]; // down=0为向上展开，1为向下展开
-      // @en down=0 is to expand upwards, 1 is to expand downwards
 
+        var _w = React.useState(direction === 'down'),
+            down = _w[0],
+            setDown = _w[1];
 
-      var _w = React.useState(direction === 'down'),
-          down = _w[0],
-          setDown = _w[1];
+        var maskHeight = React.useRef(0);
+        var optionsContainer = React.useRef(null);
+        var dropdownContainer = React.useRef(null);
 
-      var maskHeight = React.useRef(0);
-      var optionsContainer = React.useRef(null);
-      var dropdownContainer = React.useRef(null);
+        var _x = React.useState(0),
+            optionsWrapperHeight = _x[0],
+            setOptionsWrapperHeight = _x[1];
+        /**
+         * 判断是否阻止touch事件
+         * @en Determine whether to block touch events
+         * */
 
-      var _x = React.useState(0),
-          optionsWrapperHeight = _x[0],
-          setOptionsWrapperHeight = _x[1];
-      /**
-       * 判断是否阻止touch事件
-       * @en Determine whether to block touch events
-       * */
 
+        var ifStopTouch = function ifStopTouch(el) {
+          var _a;
 
-      var ifStopTouch = function ifStopTouch(el) {
-        var _a;
+          if (isStopTouchEl) return isStopTouchEl(el);
+          var tempEl = el;
+          var elements = getStopTouchElements ? getStopTouchElements() : [(_a = dropdownContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement];
 
-        if (isStopTouchEl) return isStopTouchEl(el);
-        var tempEl = el;
-        var elements = getStopTouchElements ? getStopTouchElements() : [(_a = dropdownContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement];
+          for (var i = 0; i < elements.length; i++) {
+            while (tempEl && elements[i]) {
+              if (tempEl === elements[i]) {
+                return true;
+              }
 
-        for (var i = 0; i < elements.length; i++) {
-          while (tempEl && elements[i]) {
-            if (tempEl === elements[i]) {
-              return true;
+              tempEl = tempEl.parentElement;
             }
-
-            tempEl = tempEl.parentElement;
           }
-        }
 
-        return false;
-      };
+          return false;
+        };
 
-      usePopupScroll(showDropdown, domRef.current, getScrollContainer);
-      usePreventBodyScroll(showDropdown, preventBodyScroll, initialBodyOverflow);
-      React.useEffect(function () {
-        var _a; // 为0的时候不改变
-        // @en Does not change when it is 0
+        usePopupScroll(showDropdown, domRef.current, getScrollContainer);
+        usePreventBodyScroll(showDropdown, preventBodyScroll, initialBodyOverflow);
+        React.useEffect(function () {
+          var _a; // 为0的时候不改变
+          // @en Does not change when it is 0
 
 
-        if (optionsWrapperHeight === 0) return;
-        var tempEl = getAnchorElement ? getAnchorElement() : (_a = dropdownContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+          if (optionsWrapperHeight === 0) return;
+          var tempEl = getAnchorElement ? getAnchorElement() : (_a = dropdownContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement;
 
-        var _b = (tempEl === null || tempEl === void 0 ? void 0 : tempEl.getBoundingClientRect()) || {
-          bottom: 0,
-          top: 0
-        },
-            bottom = _b.bottom,
-            top = _b.top;
+          var _b = (tempEl === null || tempEl === void 0 ? void 0 : tempEl.getBoundingClientRect()) || {
+            bottom: 0,
+            top: 0
+          },
+              bottom = _b.bottom,
+              top = _b.top;
 
-        var tempTop = props.top || bottom;
-        var tempBottom = props.bottom || windowHeight - top;
-        var tempMaskHeight = windowHeight - tempTop; // 没有指定方向，且空间足够时，或向上展开的空间不够，向下展开
-        // @en If there is no specified direction and there is enough space, or there is not enough space to expand upward, expand downward
+          var tempTop = props.top || bottom;
+          var tempBottom = props.bottom || windowHeight - top;
+          var tempMaskHeight = windowHeight - tempTop; // 没有指定方向，且空间足够时，或向上展开的空间不够，向下展开
+          // @en If there is no specified direction and there is enough space, or there is not enough space to expand upward, expand downward
 
-        var tempDown = direction !== 'up' && optionsWrapperHeight < tempMaskHeight || optionsWrapperHeight > tempTop;
+          var tempDown = direction !== 'up' && optionsWrapperHeight < tempMaskHeight || optionsWrapperHeight > tempTop;
 
-        if (tempDown) {
-          maskHeight.current = tempMaskHeight;
-          setPositionStyle({
-            top: tempTop + "px",
-            bottom: ''
-          });
-        } else {
-          maskHeight.current = windowHeight - tempBottom;
-          setPositionStyle({
-            top: '',
-            bottom: tempBottom + "px"
-          });
-        }
-
-        setDown(tempDown);
-      }, [dropdownContainer, optionsWrapperHeight, props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight]);
-      /**
-       * 取消选择
-       * @en Cancel selection
-       * */
+          if (tempDown) {
+            maskHeight.current = tempMaskHeight;
+            setPositionStyle({
+              top: tempTop + "px",
+              bottom: ''
+            });
+          } else {
+            maskHeight.current = windowHeight - tempBottom;
+            setPositionStyle({
+              top: '',
+              bottom: tempBottom + "px"
+            });
+          }
 
-      var handleCancel = React.useCallback(function (e) {
-        var optionsWrapperDom = optionsWrapper.current;
+          setDown(tempDown);
+        }, [dropdownContainer, optionsWrapperHeight, props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight]);
+        /**
+         * 取消选择
+         * @en Cancel selection
+         * */
 
-        if (!e || !optionsWrapperDom) {
-          return;
-        }
+        var handleCancel = React.useCallback(function (e) {
+          var optionsWrapperDom = optionsWrapper.current;
 
-        var target = e.target;
+          if (!e || !optionsWrapperDom) {
+            return;
+          }
 
-        if (!optionsWrapperDom.contains(target) && !ifStopTouch(target)) {
-          onCancel();
-        }
+          var target = e.target;
 
-        e.stopPropagation();
-      }, [ifStopTouch, onCancel]);
-      /**
-       * 当面板放下时，给body添加事件监听，面板收起时，移除
-       * @en When the panel is down, add an event listener to the body, and when the panel is retracted, remove it
-       * */
+          if (!optionsWrapperDom.contains(target) && !ifStopTouch(target)) {
+            onCancel();
+          }
 
-      React.useEffect(function () {
-        var needBind = showDropdown && clickOtherToClose;
-        var event = touchToClose ? 'touchstart' : 'click';
+          e.stopPropagation();
+        }, [ifStopTouch, onCancel]);
+        /**
+         * 当面板放下时，给body添加事件监听，面板收起时，移除
+         * @en When the panel is down, add an event listener to the body, and when the panel is retracted, remove it
+         * */
 
-        if (needBind) {
-          document.addEventListener(event, handleCancel);
-        }
+        React.useEffect(function () {
+          var needBind = showDropdown && clickOtherToClose;
+          var event = touchToClose ? 'touchstart' : 'click';
 
-        return function () {
           if (needBind) {
-            document.removeEventListener(event, handleCancel);
-          }
-        };
-      }, [showDropdown, clickOtherToClose, handleCancel]);
-      React.useEffect(function () {
-        nextTick(function () {
-          if (height !== void 0) {
-            // 受控模式下，完全交由外层控制
-            // @en In controlled mode, it is completely controlled by the outer layer
-            setOptionsWrapperHeight(height);
-          } else {
-            if (!optionsContainer.current) return;
-            if (!showDropdown) setOptionsWrapperHeight(0);else {
-              setOptionsWrapperHeight(optionsContainer.current.getBoundingClientRect().height);
-            }
+            document.addEventListener(event, handleCancel);
           }
-        });
-      }, [showDropdown, options.length, height]);
-      React.useImperativeHandle(ref, function () {
-        return {
-          dom: domRef.current
-        };
-      });
 
-      function getOptionsStyle() {
-        var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
-        return getStyleWithVendor({
-          // height: `${optionsWrapperHeight}px`,
-          transform: optionsWrapperHeight ? '' : trans,
-          transition: "transform " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction,
-          overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
-          maxHeight: maxHeight + "px"
+          return function () {
+            if (needBind) {
+              document.removeEventListener(event, handleCancel);
+            }
+          };
+        }, [showDropdown, clickOtherToClose, handleCancel]);
+        React.useEffect(function () {
+          nextTick(function () {
+            if (height !== void 0) {
+              // 受控模式下，完全交由外层控制
+              // @en In controlled mode, it is completely controlled by the outer layer
+              setOptionsWrapperHeight(height);
+            } else {
+              if (!optionsContainer.current) return;
+              if (!showDropdown) setOptionsWrapperHeight(0);else {
+                setOptionsWrapperHeight(optionsContainer.current.getBoundingClientRect().height);
+              }
+            }
+          });
+        }, [showDropdown, options.length, height]);
+        React.useImperativeHandle(ref, function () {
+          return {
+            dom: domRef.current
+          };
         });
-      }
 
-      function renderInnerOptions() {
-        var optionProps = {
-          options: options,
-          useColumn: useColumn
-        };
-        var value = props.selectedValue !== void 0 ? props.selectedValue : innerValue;
-        return props.multiple === true ? /*#__PURE__*/React__default["default"].createElement(Options, __assign({}, optionProps, {
-          multiple: true,
-          selectedValue: value,
-          onOptionClick: props.onOptionClick,
-          onOptionChange: function onOptionChange(vals, op) {
-            var _a;
+        function getOptionsStyle() {
+          var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
+          return getStyleWithVendor({
+            // height: `${optionsWrapperHeight}px`,
+            transform: optionsWrapperHeight ? '' : trans,
+            transition: "transform " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction,
+            overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
+            maxHeight: maxHeight + "px"
+          });
+        }
 
-            setInnerValue(vals);
-            (_a = props.onOptionChange) === null || _a === void 0 ? void 0 : _a.call(props, vals, op);
-          }
-        })) : /*#__PURE__*/React__default["default"].createElement(Options, __assign({}, optionProps, {
-          multiple: props.multiple,
-          selectedValue: value,
-          onOptionClick: props.onOptionClick,
-          onOptionChange: function onOptionChange(vals, op) {
-            var _a;
+        function renderInnerOptions() {
+          var value = props.selectedValue !== void 0 ? props.selectedValue : innerValue;
+          var optionProps = {
+            options: options,
+            useColumn: useColumn,
+            icon: optionIcon,
+            selectedValue: value,
+            multiple: props.multiple,
+            onOptionClick: props.onOptionClick,
+            onOptionChange: function onOptionChange(vals, op) {
+              var _a;
 
-            setInnerValue(vals);
-            (_a = props.onOptionChange) === null || _a === void 0 ? void 0 : _a.call(props, vals, op);
-          }
-        }));
-      }
+              setInnerValue(vals);
+              (_a = props.onOptionChange) === null || _a === void 0 ? void 0 : _a.call(props, vals, op);
+            }
+          };
+          return /*#__PURE__*/React__default["default"].createElement(Comp, __assign({}, optionProps));
+        }
 
-      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          ref: dropdownContainer
-        }, /*#__PURE__*/React__default["default"].createElement(Portal, {
-          getContainer: getPortalContainer
-        }, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
-          in: showDropdown,
-          timeout: Math.max(dropdownAnimationTimeout, maskAnimationTimeout),
-          onEnter: function onEnter(el) {
-            el.style.visibility = 'visible';
-          },
-          onExited: function onExited(el) {
-            el.style.visibility = 'hidden';
-          },
-          mountOnEnter: mountOnEnter,
-          unmountOnExit: unmountOnExit
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-dropdown all-border-box", system, className, {
-            'drop-up': !down
-          }),
-          ref: domRef,
-          style: __assign(__assign({
-            height: maskHeight.current + "px",
-            maxWidth: windowWidth + "px"
-          }, style), positionStyle)
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-dropdown-options"),
-          ref: optionsWrapper,
-          style: getOptionsStyle()
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-dropdown-options-container"),
-          ref: optionsContainer
-        }, props.children || renderInnerOptions(), props.extraNode)), showMask && /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-dropdown-mask", {
-            'is-show': optionsWrapperHeight
-          }),
-          style: {
-            transition: "opacity " + maskAnimationTimeout + "ms " + maskAnimationFunction
-          }
-        })))));
+        return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+          var prefixCls = _a.prefixCls;
+          return /*#__PURE__*/React__default["default"].createElement("div", {
+            ref: dropdownContainer
+          }, /*#__PURE__*/React__default["default"].createElement(Portal, {
+            getContainer: getPortalContainer
+          }, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+            in: showDropdown,
+            timeout: Math.max(dropdownAnimationTimeout, maskAnimationTimeout),
+            onEnter: function onEnter(el) {
+              el.style.visibility = 'visible';
+            },
+            onExited: function onExited(el) {
+              el.style.visibility = 'hidden';
+            },
+            mountOnEnter: mountOnEnter,
+            unmountOnExit: unmountOnExit
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: cls(prefixCls + "-dropdown all-border-box", system, className, {
+              'drop-up': !down
+            }),
+            ref: domRef,
+            style: __assign(__assign({
+              height: maskHeight.current + "px",
+              maxWidth: windowWidth + "px"
+            }, style), positionStyle)
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: cls(prefixCls + "-dropdown-options"),
+            ref: optionsWrapper,
+            style: getOptionsStyle()
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: cls(prefixCls + "-dropdown-options-container"),
+            ref: optionsContainer
+          }, props.children || renderInnerOptions(), props.extraNode)), showMask && /*#__PURE__*/React__default["default"].createElement("div", {
+            className: cls(prefixCls + "-dropdown-mask", {
+              'is-show': optionsWrapperHeight
+            }),
+            style: {
+              transition: "opacity " + maskAnimationTimeout + "ms " + maskAnimationFunction
+            }
+          })))));
+        });
       });
-    });
+    }
+
+    var Dropdown = componentGenerator$6(Options);
     /**
      * 下拉面板，展示供选择的选择项
      * @en Dropdown panel, showing options to choose from
@@ -10717,251 +10705,271 @@
       });
     }
 
-    /**
-     * 下拉选择组件，点击选择器(select)展开下拉框(dropdown)，展示选择项(options)，兼容多个选择器的情况。
-     * @en Dropdown component, click the selector (select) to expand the dropdown box (dropdown), display the options (options), compatible with multiple selectors.
-     * @type 导航
-     * @type_en Navigation
-     * @name 下拉选择菜单
-     * @name_en DropdownMenu
-     */
-
-    var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
-      var _a = props.className,
-          className = _a === void 0 ? '' : _a,
-          _b = props.style,
-          style = _b === void 0 ? {} : _b,
-          _c = props.options,
-          options = _c === void 0 ? [] : _c,
-          _d = props.disabled,
-          disabled = _d === void 0 ? [] : _d,
-          _e = props.selectTips,
-          selectTips = _e === void 0 ? [] : _e,
-          values = props.values,
-          _f = props.defaultValues,
-          defaultValues = _f === void 0 ? [] : _f,
-          icon = props.icon,
-          _g = props.chooseAndClose,
-          chooseAndClose = _g === void 0 ? true : _g,
-          selectIndex = props.selectIndex,
-          _h = props.defaultSelectIndex,
-          defaultSelectIndex = _h === void 0 ? 0 : _h,
-          showDropdown = props.showDropdown,
-          _j = props.defaultShowDropdown,
-          defaultShowDropdown = _j === void 0 ? false : _j,
-          renderSelectLabel = props.renderSelectLabel,
-          onValuesChange = props.onValuesChange,
-          onSelectChange = props.onSelectChange,
-          onDropdownChange = props.onDropdownChange,
-          _k = props.getFormattedOptions,
-          getFormattedOptions$1 = _k === void 0 ? getFormattedOptions : _k,
-          children = props.children,
-          extraForDropdown = props.extraForDropdown;
-
-      var _l = React.useContext(GlobalContext),
-          prefixCls = _l.prefixCls,
-          locale = _l.locale;
+    function componentGenerator$5(Comp) {
+      return /*#__PURE__*/React.forwardRef(function (props, ref) {
+        var _a = props.className,
+            className = _a === void 0 ? '' : _a,
+            _b = props.style,
+            style = _b === void 0 ? {} : _b,
+            _c = props.options,
+            options = _c === void 0 ? [] : _c,
+            _d = props.disabled,
+            disabled = _d === void 0 ? [] : _d,
+            _e = props.selectTips,
+            selectTips = _e === void 0 ? [] : _e,
+            values = props.values,
+            _f = props.defaultValues,
+            defaultValues = _f === void 0 ? [] : _f,
+            icon = props.icon,
+            _g = props.chooseAndClose,
+            chooseAndClose = _g === void 0 ? true : _g,
+            selectIndex = props.selectIndex,
+            _h = props.defaultSelectIndex,
+            defaultSelectIndex = _h === void 0 ? 0 : _h,
+            showDropdown = props.showDropdown,
+            _j = props.defaultShowDropdown,
+            defaultShowDropdown = _j === void 0 ? false : _j,
+            onValuesChange = props.onValuesChange,
+            onSelectChange = props.onSelectChange,
+            onDropdownChange = props.onDropdownChange,
+            _k = props.getFormattedOptions,
+            getFormattedOptions$1 = _k === void 0 ? getFormattedOptions : _k,
+            getContainer = props.getContainer,
+            children = props.children,
+            extraForDropdown = props.extraForDropdown;
 
-      var _m = React.useState(defaultValues),
-          innerValues = _m[0],
-          setInnerValues = _m[1];
+        var _l = React.useContext(GlobalContext),
+            prefixCls = _l.prefixCls,
+            locale = _l.locale;
 
-      var _o = React.useState(0),
-          defaultTop = _o[0],
-          setDefaultTop = _o[1];
+        var _m = React.useState(defaultValues),
+            innerValues = _m[0],
+            setInnerValues = _m[1];
 
-      var currentValues = values !== void 0 ? values : innerValues;
+        var _o = React.useState(0),
+            defaultTop = _o[0],
+            setDefaultTop = _o[1];
 
-      var _p = React.useState(defaultShowDropdown),
-          innerShowDropdown = _p[0],
-          setInnerShowDropdown = _p[1];
+        var currentValues = values !== void 0 ? values : innerValues;
 
-      var dropdownShown = showDropdown !== void 0 ? showDropdown : innerShowDropdown;
+        var _p = React.useState(defaultShowDropdown),
+            innerShowDropdown = _p[0],
+            setInnerShowDropdown = _p[1];
 
-      var _q = React.useState(defaultSelectIndex),
-          innerSelectedIndex = _q[0],
-          setInnerSelectedIndex = _q[1];
+        var dropdownShown = showDropdown !== void 0 ? showDropdown : innerShowDropdown;
 
-      var selectedIndex = selectIndex !== void 0 ? selectIndex : innerSelectedIndex;
-      var selectWrapper = React.useRef(null);
-      var domRef = React.useRef(null);
-      var defaultOpItem = {
-        label: locale === null || locale === void 0 ? void 0 : locale.DropdownMenu.select,
-        value: -1
-      };
-      /**
-       * 下拉框的容器
-       * @en Dropdown container
-       */
+        var _q = React.useState(defaultSelectIndex),
+            innerSelectedIndex = _q[0],
+            setInnerSelectedIndex = _q[1];
 
-      var getContainer = React.useCallback(function () {
-        if (props.getContainer) {
-          return props.getContainer() || selectWrapper.current;
-        }
+        var selectedIndex = selectIndex !== void 0 ? selectIndex : innerSelectedIndex;
+        var selectWrapper = React.useRef(null);
+        var domRef = React.useRef(null);
+        var defaultOpItem = {
+          label: locale === null || locale === void 0 ? void 0 : locale.DropdownMenu.select,
+          value: -1
+        };
+        /**
+         * 更新选项数组和选择情况
+         * @en Update options list and selection
+         */
 
-        return selectWrapper.current;
-      }, [selectWrapper.current]);
-      /**
-       * 更新选项数组和选择情况
-       * @en Update options list and selection
-       */
+        var formattedOptions = React.useMemo(function () {
+          return getFormattedOptions$1(options, currentValues);
+        }, [options, currentValues]).formattedOptions;
+        var selectedOptions = React.useMemo(function () {
+          return formattedOptions.map(function (ops, index) {
+            if (props.multiple) {
+              var value_1 = currentValues[index] || [];
+              var opItems = ops.reduce(function (acc, op) {
+                return __spreadArrays(acc, value_1.includes(op.value) ? [op] : []);
+              }, []);
+              return opItems.length ? opItems : [defaultOpItem];
+            }
 
-      var formattedOptions = React.useMemo(function () {
-        return getFormattedOptions$1(options, currentValues);
-      }, [options, currentValues]).formattedOptions;
-      var selectedOptions = React.useMemo(function () {
-        return formattedOptions.map(function (ops, index) {
-          return ops.find(function (op) {
             var value = currentValues[index];
-            return Array.isArray(value) ? value.includes(op.value) : op.value === value;
-          }) || (props.multiple ? defaultOpItem : ops[0]);
-        });
-      }, [formattedOptions, currentValues]);
-      /**
-       * 当下拉框的状态变化
-       * @en When the state of the dropdown box changes
-       */
+            return ops.find(function (op) {
+              return op.value === value;
+            }) || ops[0];
+          });
+        }, [formattedOptions, currentValues, props.multiple]);
+        /**
+         * 当下拉框的状态变化
+         * @en When the state of the dropdown box changes
+         */
 
-      var handleShowDropdownChange = function handleShowDropdownChange(show, index) {
-        onDropdownChange && onDropdownChange(show, index);
-        setInnerShowDropdown(show);
-      };
+        var handleShowDropdownChange = function handleShowDropdownChange(show, index) {
+          onDropdownChange && onDropdownChange(show, index);
+          setInnerShowDropdown(show);
+        };
 
-      var handleSelectedIndexChange = function handleSelectedIndexChange(idx) {
-        setInnerSelectedIndex(idx);
-        onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(idx);
-      };
+        var handleSelectedIndexChange = function handleSelectedIndexChange(idx) {
+          setInnerSelectedIndex(idx);
+          onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(idx);
+        };
 
-      var handleValuesChange = function handleValuesChange(val) {
-        var newValue = __spreadArrays(currentValues); // 级联情况下 selectedIndex 之后的选项值重置
-        // @en Option values are reset after selectedIndex in case of cascade
+        var handleValuesChange = function handleValuesChange(val) {
+          var newValue = __spreadArrays(currentValues); // 级联情况下 selectedIndex 之后的选项值重置
+          // @en Option values are reset after selectedIndex in case of cascade
 
 
-        if (isCascadeArray(options)) {
-          newValue = newValue.slice(0, selectedIndex);
-        }
+          if (isCascadeArray(options)) {
+            newValue = newValue.slice(0, selectedIndex);
+          }
 
-        newValue[selectedIndex] = val;
-        newValue = getFormattedOptions$1(options, newValue).formattedValue;
-        setInnerValues(newValue);
-        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(newValue);
-      };
-      /**
-       * 处理选择框的点击事件
-       * @en Handle click event of dropdown box
-       */
+          newValue[selectedIndex] = val;
+          newValue = getFormattedOptions$1(options, newValue).formattedValue;
+          setInnerValues(newValue);
+          onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(newValue);
+        };
+        /**
+         * 处理选择框的点击事件
+         * @en Handle click event of dropdown box
+         */
 
 
-      var handleSelectClick = function handleSelectClick(idx) {
-        if (disabled[idx]) return;
+        var handleSelectClick = function handleSelectClick(idx) {
+          if (disabled[idx]) return;
 
-        if (Number(idx) === selectedIndex) {
-          handleShowDropdownChange(!dropdownShown, idx);
-        } else {
-          handleSelectedIndexChange(idx);
-          if (!dropdownShown) handleShowDropdownChange(true, idx);
-        }
-      };
-      /**
-       * 判断是否为当前实例下的选择框
-       * @en Determine whether it is the dropdown box under the current instance
-       */
+          if (Number(idx) === selectedIndex) {
+            handleShowDropdownChange(!dropdownShown, idx);
+          } else {
+            handleSelectedIndexChange(idx);
+            if (!dropdownShown) handleShowDropdownChange(true, idx);
+          }
+        };
+        /**
+         * 判断是否为当前实例下的选择框
+         * @en Determine whether it is the dropdown box under the current instance
+         */
 
 
-      var isCurrentSelectEl = function isCurrentSelectEl(target) {
-        var isStopTouchEl = (extraForDropdown || {}).isStopTouchEl;
-        return isRefDom(target, selectWrapper) && isClassNameDom(target, 'select-item') || (isStopTouchEl === null || isStopTouchEl === void 0 ? void 0 : isStopTouchEl(target)) || false;
-      };
+        var isCurrentSelectEl = function isCurrentSelectEl(target) {
+          var isStopTouchEl = (extraForDropdown || {}).isStopTouchEl;
+          return isRefDom(target, selectWrapper) && isClassNameDom(target, 'select-item') || (isStopTouchEl === null || isStopTouchEl === void 0 ? void 0 : isStopTouchEl(target)) || false;
+        };
 
-      React.useImperativeHandle(ref, function () {
-        return {
-          dom: domRef.current
+        React.useImperativeHandle(ref, function () {
+          return {
+            dom: domRef.current
+          };
+        });
+        React.useEffect(function () {
+          var defaultContainer = selectWrapper.current;
+          var container = getContainer ? getContainer() || defaultContainer : defaultContainer;
+          setDefaultTop((container === null || container === void 0 ? void 0 : container.getBoundingClientRect().bottom) || 0);
+        }, [getContainer, dropdownShown]);
+
+        var onCancel = props.onCancel || function () {
+          return handleShowDropdownChange(false);
         };
-      });
-      React.useEffect(function () {
-        var _a;
 
-        setDefaultTop(((_a = getContainer()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().bottom) || 0);
-      }, [getContainer, dropdownShown]);
+        var dropdownCommonProps = __assign(__assign({
+          showDropdown: dropdownShown,
+          top: (extraForDropdown === null || extraForDropdown === void 0 ? void 0 : extraForDropdown.top) || defaultTop,
+          onCancel: onCancel
+        }, extraForDropdown || {}), {
+          isStopTouchEl: isCurrentSelectEl
+        });
 
-      var onCancel = props.onCancel || function () {
-        return handleShowDropdownChange(false);
-      };
+        var renderSelectedLabel = function renderSelectedLabel(op, index) {
+          if (props.multiple === true) {
+            var multipleOp = op || [];
+            return props.renderSelectLabel ? props.renderSelectLabel(multipleOp, index) : /*#__PURE__*/React__default["default"].createElement("div", {
+              className: cls(prefixCls + "-select-item-label-text")
+            }, multipleOp.map(function (item) {
+              return item.label;
+            }).join(','));
+          }
 
-      var dropdownCommonProps = __assign(__assign({
-        showDropdown: dropdownShown,
-        top: (extraForDropdown === null || extraForDropdown === void 0 ? void 0 : extraForDropdown.top) || defaultTop,
-        onCancel: onCancel
-      }, extraForDropdown || {}), {
-        isStopTouchEl: isCurrentSelectEl
-      });
+          var singleOp = op || [];
+          return props.renderSelectLabel ? props.renderSelectLabel(singleOp, index) : /*#__PURE__*/React__default["default"].createElement("div", {
+            className: cls(prefixCls + "-select-item-label-text")
+          }, singleOp.label);
+        };
 
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        ref: domRef,
-        className: cls(prefixCls + "-dropdown-menu all-border-box " + (dropdownShown ? 'show' : ''), className),
-        style: style
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: cls(prefixCls + "-select"),
-        ref: selectWrapper
-      }, selectedOptions.map(function (op, index) {
-        var tip = selectTips[index] || '';
         return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-select-item", {
-            'is-disabled': disabled[index],
-            'is-selected': dropdownShown && selectedIndex === index
+          ref: domRef,
+          className: cls(prefixCls + "-dropdown-menu all-border-box", className, {
+            show: dropdownShown
           }),
-          key: index,
-          "data-idx": index,
-          onClick: function onClick() {
-            return handleSelectClick(index);
-          }
-        }, tip.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
-          className: cls(prefixCls + "-select-item-tip")
-        }, tip), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-select-item-label")
-        }, renderSelectLabel ? renderSelectLabel(op, index) : /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-select-item-label-text")
-        }, op.label), icon === void 0 ? /*#__PURE__*/React__default["default"].createElement(IconTriDown, {
-          className: cls(prefixCls + "-select-item-icon", {
-            'is-show': dropdownShown && selectedIndex === index
-          })
-        }) : icon));
-      }), props.multiple === true ? /*#__PURE__*/React__default["default"].createElement(Dropdown$1, __assign({
-        multiple: true,
-        options: formattedOptions[selectedIndex] || [],
-        selectedValue: currentValues[selectedIndex] || [],
-        onOptionClick: function onOptionClick(selected, val, op) {
-          var _a;
+          style: style
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: cls(prefixCls + "-select"),
+          ref: selectWrapper
+        }, selectedOptions.map(function (op, index) {
+          var tip = selectTips[index] || '';
+          return /*#__PURE__*/React__default["default"].createElement("div", {
+            className: cls(prefixCls + "-select-item", {
+              'is-disabled': disabled[index],
+              'is-selected': dropdownShown && selectedIndex === index
+            }),
+            key: index,
+            "data-idx": index,
+            onClick: function onClick() {
+              return handleSelectClick(index);
+            }
+          }, tip.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
+            className: cls(prefixCls + "-select-item-tip")
+          }, tip), /*#__PURE__*/React__default["default"].createElement("div", {
+            className: cls(prefixCls + "-select-item-label")
+          }, renderSelectedLabel(op, index), icon === void 0 ? /*#__PURE__*/React__default["default"].createElement(IconTriDown, {
+            className: cls(prefixCls + "-select-item-icon", {
+              'is-show': dropdownShown && selectedIndex === index
+            })
+          }) : icon));
+        }), props.multiple === true ? /*#__PURE__*/React__default["default"].createElement(Comp, __assign({}, __assign(__assign({
+          multiple: true,
+          options: formattedOptions[selectedIndex] || [],
+          selectedValue: currentValues[selectedIndex] || [],
+          onOptionClick: function onOptionClick(selected, val, op) {
+            var _a;
 
-          (_a = props.onOptionClick) === null || _a === void 0 ? void 0 : _a.call(props, selected, val, op, selectedIndex);
-        },
-        onOptionChange: function onOptionChange(val, op) {
-          var _a;
+            (_a = props.onOptionClick) === null || _a === void 0 ? void 0 : _a.call(props, selected, val, op, selectedIndex);
+          },
+          onOptionChange: function onOptionChange(val, op) {
+            var _a;
 
-          (_a = props.onOptionChange) === null || _a === void 0 ? void 0 : _a.call(props, val, op, selectedIndex);
-          handleValuesChange(val);
-        }
-      }, dropdownCommonProps), children) : /*#__PURE__*/React__default["default"].createElement(Dropdown$1, __assign({
-        multiple: props.multiple,
-        options: formattedOptions[selectedIndex] || [],
-        selectedValue: currentValues[selectedIndex] || 0,
-        onOptionClick: function onOptionClick(val, op) {
-          var _a;
+            (_a = props.onOptionChange) === null || _a === void 0 ? void 0 : _a.call(props, val, op, selectedIndex);
+            handleValuesChange(val);
+          }
+        }, dropdownCommonProps), {
+          children: children
+        }))) : /*#__PURE__*/React__default["default"].createElement(Comp, __assign({}, __assign(__assign({
+          multiple: props.multiple,
+          options: formattedOptions[selectedIndex] || [],
+          selectedValue: currentValues[selectedIndex] || 0,
+          onOptionClick: function onOptionClick(val, op) {
+            var _a;
 
-          (_a = props.onOptionClick) === null || _a === void 0 ? void 0 : _a.call(props, val, op, selectedIndex);
+            (_a = props.onOptionClick) === null || _a === void 0 ? void 0 : _a.call(props, val, op, selectedIndex);
 
-          if (chooseAndClose) {
-            handleShowDropdownChange(false, selectedIndex);
+            if (chooseAndClose) {
+              handleShowDropdownChange(false, selectedIndex);
+            }
+          },
+          onOptionChange: function onOptionChange(val, op) {
+            var _a;
+
+            (_a = props.onOptionChange) === null || _a === void 0 ? void 0 : _a.call(props, val, op, selectedIndex);
+            handleValuesChange(val);
           }
-        },
-        onOptionChange: function onOptionChange(val, op) {
-          var _a;
+        }, dropdownCommonProps), {
+          children: children
+        })))));
+      });
+    }
 
-          (_a = props.onOptionChange) === null || _a === void 0 ? void 0 : _a.call(props, val, op, selectedIndex);
-          handleValuesChange(val);
-        }
-      }, dropdownCommonProps), children)));
-    });
+    /**
+     * 下拉选择组件，点击选择器(select)展开下拉框(dropdown)，展示选择项(options)，兼容多个选择器的情况。
+     * @en Dropdown component, click the selector (select) to expand the dropdown box (dropdown), display the options (options), compatible with multiple selectors.
+     * @type 导航
+     * @type_en Navigation
+     * @name 下拉选择菜单
+     * @name_en DropdownMenu
+     */
+
+    var DropdownMenu = componentGenerator$5(Dropdown$1);
 
     var isBrowser$1 = function isBrowser() {
       return typeof window !== 'undefined' && typeof document !== 'undefined';
@@ -12487,6 +12495,34 @@
               offset: offset,
               threshold: threshold
             }, true);
+          },
+
+          /**
+           * 重置元素初始可见态为false，并重新对元素可见度发起检测，优先级低于disabled（通常用在对ShowMonitor内部元素变化时发起的重新监听）
+           * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
+           */
+          flushVisibleStatus: function flushVisibleStatus() {
+            isVisible.current = false;
+
+            if (isSupportNativeApi && io.current && domRef.current) {
+              disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
+            } else if (listener.current) {
+              var key = wrapperKey.current;
+
+              if (once && (onOnceEmittedListeners === null || onOnceEmittedListeners === void 0 ? void 0 : onOnceEmittedListeners[key])) {
+                onOnceEmittedListeners[key] = onOnceEmittedListeners[key].filter(function (emitListener) {
+                  return emitListener !== listener.current;
+                });
+              }
+
+              if (!disabled && !listeners[key].find(function (_listener) {
+                return _listener === listener.current;
+              })) {
+                listeners[key].push(listener.current);
+              }
+
+              !disabled && _checkVisible(listener.current);
+            }
           }
         };
       });
@@ -13090,7 +13126,7 @@
           var res = parseFiles.map(function (url, index) {
             return {
               url: url,
-              status: upload ? 'loading' : 'loaded',
+              status: typeof upload === 'function' ? 'loading' : 'loaded',
               file: files[index]
             };
           });
@@ -13103,11 +13139,12 @@
             var propsImageLength_1 = images.length;
             files.forEach(function (_file, index) {
               upload(cacheRes[propsImageLength_1 + index]).then(function (data) {
-                cacheRes[propsImageLength_1 + index] = __assign(__assign({}, cacheRes[propsImageLength_1 + index]), data);
+                cacheRes[propsImageLength_1 + index] = __assign(__assign(__assign({}, cacheRes[propsImageLength_1 + index]), data), {
+                  status: undefined
+                });
               }).catch(function () {
                 cacheRes[propsImageLength_1 + index].status = 'error';
               }).finally(function () {
-                cacheRes[propsImageLength_1 + index].status = 'loaded';
                 onChange(__spreadArrays(cacheRes));
               });
             });
@@ -16964,8 +17001,10 @@
           customStyle = _k[0],
           setCustomStyle = _k[1];
 
+      var system = useSystem();
+
       var onElementScroll = function onElementScroll(curOffset) {
-        setScrollToggleHide(curOffset <= showOffset);
+        setScrollToggleHide(curOffset < showOffset);
 
         if (getComputedStyleByScroll) {
           var cstyle = getComputedStyleByScroll(curOffset);
@@ -16991,6 +17030,7 @@
       React.useEffect(function () {
         var needBind = showOffset || getComputedStyleByScroll;
         var container = getValidScrollContainer(getScrollContainer);
+        handleEleScroll();
 
         if (needBind && container) {
           container.addEventListener('scroll', handleEleScroll, false);
@@ -17038,7 +17078,7 @@
             background: relBackground
           } : {})
         }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(className, prefixCls + "-nav-bar-wrapper", (_c = {}, _c[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _c[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _c)),
+          className: cls(className, system, prefixCls + "-nav-bar-wrapper", (_c = {}, _c[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _c[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _c)),
           style: __assign({
             paddingTop: statusBarHeight ? statusBarHeight + "px" : ''
           }, customStyle)