@arco-design/mobile-react 2.22.3 → 2.24.0

package/dist/index.js

@@ -898,6 +898,10 @@
       SearchBar: {
         placeholder: '请输入要查询的内容',
         cancelBtn: '取消'
+      },
+      Stepper: {
+        minusButtonName: '减少',
+        addButtonName: '增加'
       }
     };
 
@@ -1147,6 +1151,16 @@
       }, children);
     }
     var ContextLayout = GlobalContext.Consumer;
+    function CompWithGlobalContext(Component) {
+      return function (props) {
+        var propsContext = props.context,
+            others = __rest(props, ["context"]);
+
+        return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (context) {
+          return /*#__PURE__*/React__default["default"].createElement(ContextProvider, __assign({}, __assign(__assign({}, context), propsContext)), /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, others)));
+        });
+      };
+    }
 
     /**
      * React.createPortal的简单封装。
@@ -2576,16 +2590,20 @@
     var ReactDOMRender =
     /** @class */
     function () {
-      function ReactDOMRender(app, container) {
+      function ReactDOMRender(app, container, context) {
         var _this = this;
 
         this.render = function (props) {
           var CustomApp = _this.app;
 
+          var propsWithContext = __assign(__assign({}, props), {
+            context: _this.context
+          });
+
           if (_this.root) {
-            _this.root.render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, props)));
+            _this.root.render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, propsWithContext)));
           } else {
-            _this.root = render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, props)), _this.container);
+            _this.root = render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, propsWithContext)), _this.container);
           }
         };
 
@@ -2598,6 +2616,7 @@
 
         this.app = app;
         this.container = container;
+        this.context = context;
       }
 
       return ReactDOMRender;
@@ -2610,7 +2629,7 @@
         };
       }
 
-      return function (config) {
+      return function (config, context) {
         var baseProps = __assign(__assign({
           unmountOnExit: true
         }, normalize(config)), {
@@ -2624,7 +2643,7 @@
         var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
         var div = appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-        var render = new ReactDOMRender(Component, div).render;
+        var render = new ReactDOMRender(Component, div, context).render;
 
         function update(newConfig) {
           dynamicProps = __assign(__assign({}, dynamicProps), normalize(newConfig));
@@ -2847,6 +2866,7 @@
         open: open$5(Comp)
       };
     }
+    var MaskingWithGlobalContext = CompWithGlobalContext(Masking);
     /**
      * 通用模态弹窗，内部内容自定义。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
      * @en Generic modal popup with custom internal content. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, need to pass the scroll container to the `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
@@ -2856,7 +2876,7 @@
      * @name_en Masking
      */
 
-    var Masking$1 = componentWrapper(Masking, methodsGenerator$7(Masking));
+    var Masking$1 = componentWrapper(Masking, methodsGenerator$7(MaskingWithGlobalContext));
 
     function open$4(Component) {
       return open$5(Component, 'ARCO_POPUP');
@@ -2924,6 +2944,7 @@
         open: open$4(Comp)
       };
     }
+    var PopupWithGlobalContext = CompWithGlobalContext(Popup);
     /**
      * 基于模态弹窗的的全屏菜单，支持各个方向。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
      * @en A full-screen menu based on a modal popup, supporting all directions. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the popup layer, you need to pass the scroll container to the `getScrollContainer` property to release scrolling when it is not scrolled to the top or bottom.
@@ -2933,7 +2954,7 @@
      * @name_en Popup
      */
 
-    var Popup$1 = componentWrapper(Popup, methodsGenerator$6(Popup));
+    var Popup$1 = componentWrapper(Popup, methodsGenerator$6(PopupWithGlobalContext));
 
     function open$3(Component) {
       return open$5(Component, 'ARCO_ACTION_SHEET');
@@ -3020,16 +3041,17 @@
         open: open$3(Comp)
       };
     }
+    var ActionSheetWithGlobalContext = CompWithGlobalContext(ActionSheet);
     /**
      * 动作面板组件
-     * @en ActionSheet Commponent
+     * @en ActionSheet Component
      * @type 反馈
      * @type_en FeedBack
      * @name 动作面板
      * @name_en ActionSheet
      */
 
-    var index$e = componentWrapper(ActionSheet, methodsGenerator$5(ActionSheet));
+    var index$e = componentWrapper(ActionSheet, methodsGenerator$5(ActionSheetWithGlobalContext));
 
     var GroupContext = /*#__PURE__*/React__default["default"].createContext({
       isFromGroup: false
@@ -5272,7 +5294,7 @@
     }
 
     function toast(Component, type) {
-      return function (originConfig) {
+      return function (originConfig, context) {
         var config = typeof originConfig === 'string' ? {
           content: originConfig,
           type: 'info'
@@ -5286,7 +5308,7 @@
         var div = document.createElement('div');
         document.body.appendChild(div);
 
-        var _a = new ReactDOMRender(Component, div),
+        var _a = new ReactDOMRender(Component, div, context),
             render = _a.render,
             unmount = _a.unmount;
 
@@ -5517,6 +5539,7 @@
         warn: toast(Comp, 'warn')
       };
     }
+    var ToastWithGlobalContext = CompWithGlobalContext(Toast);
     /**
      * 轻提示组件，支持各个场景下调用方法。
      * @en The toast component, supports calling methods in various scenarios.
@@ -5526,7 +5549,7 @@
      * @name_en Toast
      */
 
-    var index$b = componentWrapper(Toast, methodsGenerator$4(Toast));
+    var index$b = componentWrapper(Toast, methodsGenerator$4(ToastWithGlobalContext));
 
     /**
      * 开关组件，支持点击和滑动触发开关动作。
@@ -5630,6 +5653,10 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "switch",
+          "aria-checked": switchChecked,
+          "aria-disabled": disabled,
+          tabIndex: 0,
           ref: domRef,
           className: cls(prefixCls + "-switch all-border-box", className, "type-" + platform, "system-" + system, shape, {
             checked: switchChecked,
@@ -6066,6 +6093,10 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "checkbox",
+          "aria-checked": checked,
+          "aria-disabled": disabled,
+          tabIndex: 0,
           ref: domRef,
           style: style,
           className: cls(className, prefixCls + "-" + componentName, "shape-" + shape, {
@@ -6240,6 +6271,10 @@
       function renderCircleProgress(_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": percentage,
           className: cls(prefixCls + "-circle-progress", disabled ? prefixCls + "-circle-progress-disabled" : '', "" + className),
           style: __assign({
             width: circleSize,
@@ -8589,6 +8624,7 @@
         open: open$2(Comp)
       };
     }
+    var DialogWithGlobalContext = CompWithGlobalContext(Dialog);
     /**
      * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
      * @en A modal dialog, displayed in a floating layer, guides the user to perform related operations. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, you need to pass the scroll container to `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
@@ -8598,7 +8634,7 @@
      * @name_en Dialog
      */
 
-    var index$9 = componentWrapper(Dialog, methodsGenerator$3(Dialog));
+    var index$9 = componentWrapper(Dialog, methodsGenerator$3(DialogWithGlobalContext));
 
     // 定义秒，分，小时，天的转化常量
     // @en Define conversion constants for seconds, minutes, hours, days
@@ -9389,12 +9425,14 @@
         ref: wrapRef,
         onTouchStart: _handleItemTouchStart,
         onTouchEnd: _handleColumnTouchEnd,
-        onTouchCancel: _handleColumnTouchEnd
+        onTouchCancel: _handleColumnTouchEnd,
+        "aria-disabled": disabled
       }, data.map(function (item, index) {
         var _a;
 
         var dis = Math.abs(index - currentIndex);
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          "aria-label": index === currentIndex ? "" + item.value : '',
           key: index + "_" + item.value,
           className: cls(prefixCls + "-column-item", (_a = {
             selected: index === currentIndex
@@ -14178,6 +14216,30 @@
 
     });
 
+    function IconMinus(props) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          _b = props.useCurrentColor,
+          useCurrentColor = _b === void 0 ? true : _b,
+          style = props.style,
+          other = __rest(props, ["className", "useCurrentColor", "style"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var prefixCls = _a.prefixCls;
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
+          className: prefixCls + "-icon " + prefixCls + "-icon-minus " + className,
+          width: "1em",
+          height: "1em",
+          style: style,
+          fill: useCurrentColor ? 'currentColor' : '#000',
+          viewBox: "0 0 1024 1024",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, other), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("style", null)), /*#__PURE__*/React__default["default"].createElement("path", {
+          d: "M115.2 467.2h819.2c6.4 0 6.4 6.4 6.4 6.4V544c0 6.4-6.4 6.4-6.4 6.4H96c-6.4 0-6.4-6.4-6.4-6.4v-64c0-6.4 6.4-6.4 6.4-6.4 6.4-6.4 6.4-6.4 19.2-6.4z"
+        }));
+      });
+    }
+
     function IconStarFill(props) {
       var _a = props.className,
           className = _a === void 0 ? '' : _a,
@@ -14440,7 +14502,9 @@
           onMaxSizeExceed = props.onMaxSizeExceed,
           onLimitExceed = props.onLimitExceed,
           upload = props.upload,
-          selectAdapter = props.selectAdapter;
+          selectAdapter = props.selectAdapter,
+          onSelectClick = props.onSelectClick,
+          onDeleteClick = props.onDeleteClick;
       var domRef = React.useRef(null);
       var fileRef = React.useRef(null);
       var cacheRef = React.useRef([]);
@@ -14541,6 +14605,7 @@
       };
 
       var handleDelete = function handleDelete(index) {
+        onDeleteClick && onDeleteClick(index);
         onChange(images.filter(function (_i, j) {
           return j !== index;
         }));
@@ -14564,17 +14629,20 @@
         }
       };
 
-      var handleSelect = function handleSelect() {
+      var handleSelect = function handleSelect(e) {
         var _a;
 
-        selectAdapter ? selectAdapter().then(function (_a) {
-          var files = _a.files;
-          return handleChange({
-            target: {
-              files: files
-            }
-          }, true);
-        }) : (_a = fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        if (e.target !== fileRef.current) {
+          onSelectClick && onSelectClick();
+          selectAdapter ? selectAdapter().then(function (_a) {
+            var files = _a.files;
+            return handleChange({
+              target: {
+                files: files
+              }
+            }, true);
+          }) : (_a = fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
       };
 
       var getGridData = function getGridData(prefixCls, locale) {
@@ -16841,7 +16909,7 @@
     }();
 
     function open$1(Component) {
-      return function (config) {
+      return function (config, context) {
         var baseProps = __assign(__assign({
           unmountOnExit: true
         }, config || {}), {
@@ -16855,7 +16923,7 @@
         var id = "_ARCO_IMAGE_PREVIEW_DIV_" + (baseProps.key || '') + "_";
         var div = appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-        var render = new ReactDOMRender(Component, div).render;
+        var render = new ReactDOMRender(Component, div, context).render;
 
         function update(newConfig) {
           dynamicProps = __assign(__assign({}, dynamicProps), newConfig || {});
@@ -17860,6 +17928,7 @@
         open: open$1(Comp)
       };
     }
+    var ImagePreviewWithGlobalContext = CompWithGlobalContext(ImagePreview);
     /**
      * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
      * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
@@ -17869,7 +17938,7 @@
      * @name_en ImagePreview
      */
 
-    var index$7 = componentWrapper(ImagePreview, methodsGenerator$2(ImagePreview));
+    var index$7 = componentWrapper(ImagePreview, methodsGenerator$2(ImagePreviewWithGlobalContext));
 
     function useInputLogic(props, inputRef) {
       var value = props.value,
@@ -18069,6 +18138,7 @@
 
       function renderWrapper(prefixCls, type, children) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "search",
           className: prefixCls + "-container all-border-box " + (className || ''),
           style: style,
           ref: wrapRef
@@ -18131,19 +18201,21 @@
           inputClass = props.inputClass,
           inputStyle = props.inputStyle,
           _b = props.nativeProps,
-          nativeProps = _b === void 0 ? {} : _b;
+          nativeProps = _b === void 0 ? {} : _b,
+          _c = props.ariaLabel,
+          ariaLabel = _c === void 0 ? '' : _c;
       var inputRef = React.useRef(null);
 
-      var _c = useInputLogic(props, inputRef),
-          inputValue = _c.inputValue,
-          handleChange = _c.handleChange,
-          handleInput = _c.handleInput,
-          handleKeyDown = _c.handleKeyDown,
-          handleFocus = _c.handleFocus,
-          handleBlur = _c.handleBlur,
-          handleClick = _c.handleClick,
-          renderWrapper = _c.renderWrapper,
-          wrapRef = _c.wrapRef;
+      var _d = useInputLogic(props, inputRef),
+          inputValue = _d.inputValue,
+          handleChange = _d.handleChange,
+          handleInput = _d.handleInput,
+          handleKeyDown = _d.handleKeyDown,
+          handleFocus = _d.handleFocus,
+          handleBlur = _d.handleBlur,
+          handleClick = _d.handleClick,
+          renderWrapper = _d.renderWrapper,
+          wrapRef = _d.wrapRef;
 
       React.useImperativeHandle(ref, function () {
         return {
@@ -18175,7 +18247,9 @@
           onChange: handleChange,
           onInput: handleInput,
           onKeyDown: handleKeyDown,
-          onClick: handleClick
+          onClick: handleClick,
+          "aria-disabled": disabled,
+          "aria-label": ariaLabel
         })));
       }
 
@@ -18409,18 +18483,22 @@
           getScrollContainer = props.getScrollContainer,
           _h = props.showOffset,
           showOffset = _h === void 0 ? 0 : _h,
-          getComputedStyleByScroll = props.getComputedStyleByScroll;
+          getComputedStyleByScroll = props.getComputedStyleByScroll,
+          _j = props.ariaLabel,
+          ariaLabel = _j === void 0 ? '' : _j,
+          _k = props.ariaRole,
+          ariaRole = _k === void 0 ? 'banner' : _k;
       var navBarRef = React.useRef(null);
 
-      var _j = React.useState(showOffset > 0),
-          scrollToggleHide = _j[0],
-          setScrollToggleHide = _j[1];
+      var _l = React.useState(showOffset > 0),
+          scrollToggleHide = _l[0],
+          setScrollToggleHide = _l[1];
 
       var relBackground = scrollToggleHide ? 'transparent' : '';
 
-      var _k = React.useState({}),
-          customStyle = _k[0],
-          setCustomStyle = _k[1];
+      var _m = React.useState({}),
+          customStyle = _m[0],
+          setCustomStyle = _m[1];
 
       var system = useSystem();
 
@@ -18497,7 +18575,9 @@
             paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : ''
           }, style || {}), relBackground ? {
             background: relBackground
-          } : {})
+          } : {}),
+          "aria-label": ariaLabel,
+          role: ariaRole
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           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({
@@ -18701,7 +18781,7 @@
     });
 
     function notify(Component, type) {
-      return function (originConfig) {
+      return function (originConfig, context) {
         var config = typeof originConfig === 'string' ? {
           content: originConfig,
           type: 'info'
@@ -18720,7 +18800,7 @@
           document.body.appendChild(div);
         }
 
-        var _a = new ReactDOMRender(Component, div),
+        var _a = new ReactDOMRender(Component, div, context),
             render = _a.render,
             unmount = _a.unmount;
 
@@ -18906,6 +18986,7 @@
         warn: notify(Comp, 'warn')
       };
     }
+    var NotifyWithGlobalContext = CompWithGlobalContext(Notify);
     /**
      * 主动操作后显示的反馈信息横条，可采用方法调用或者组件调用的方式
      * @en The feedback information bar displayed after active operation can be called by method or by component.
@@ -18915,7 +18996,7 @@
      * @name_en Notify
      */
 
-    var index$6 = componentWrapper(Notify, methodsGenerator$1(Notify));
+    var index$6 = componentWrapper(Notify, methodsGenerator$1(NotifyWithGlobalContext));
 
     function Arrow() {
       return /*#__PURE__*/React__default["default"].createElement("svg", {
@@ -20575,6 +20656,7 @@
         open: open(Comp)
       };
     }
+    var PopupSwiperWithGlobalContext = CompWithGlobalContext(PopupSwiper);
     /**
      * 基于弹出层(Popup)封装的具有手势关闭功能的弹出层组件，拥有 Popup 组件的其他能力。
      * @en The popup with gesture closing function based on the popup encapsulation, has other capabilities of the Popup component.
@@ -20584,7 +20666,7 @@
      * @name_en PopupSwiper
      */
 
-    var index$4 = componentWrapper(PopupSwiper, methodsGenerator(PopupSwiper));
+    var index$4 = componentWrapper(PopupSwiper, methodsGenerator(PopupSwiperWithGlobalContext));
 
     /**
      * 进度条组件，可根据外界传递进来的百分比进行进度展示
@@ -20669,6 +20751,10 @@
       function renderBarProgress(_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "progressbar",
+          "aria-valuenow": percentage,
+          "aria-valuemax": 100,
+          "aria-valuemin": 0,
           className: cls(prefixCls + "-progress", {
             'progress-fixed': mode === 'nav'
           }, {
@@ -21572,6 +21658,11 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "slider",
+          "aria-valuemin": 0,
+          "aria-valuemax": count,
+          "aria-valuenow": innerValue,
+          "aria-disabled": disabled,
           className: cls(prefixCls + "-rate", className, {
             disabled: disabled
           }),
@@ -22313,7 +22404,12 @@
           'show-marks': showMarks
         }),
         style: style,
-        ref: domRef
+        ref: domRef,
+        role: "slider",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": Array.isArray(valueGroup) ? valueGroup[0] : valueGroup,
+        "aria-disabled": disabled
       }, isHorizontal ? renderPrefixLabel : renderSuffixLabel, /*#__PURE__*/React__default["default"].createElement("div", {
         className: prefixCls + "-slider-wrapper"
       }, /*#__PURE__*/React__default["default"].createElement(Marks, {
@@ -22735,6 +22831,320 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, renderSearchBar);
     });
 
+    function correctCalculation(leftNumber, rightNumber, operator) {
+      var magnification = 1e17;
+      var left = leftNumber * magnification;
+      var right = rightNumber * magnification;
+      return operator === '-' ? (left - right) / magnification : (left + right) / magnification;
+    }
+
+    function useButtonClick(params) {
+      var actualInputValue = params.actualInputValue,
+          min = params.min,
+          max = params.max,
+          step = params.step,
+          disabled = params.disabled,
+          equalLimitDisabled = params.equalLimitDisabled,
+          updateValue = params.updateValue,
+          onAddButtonClick = params.onAddButtonClick,
+          onMinusButtonClick = params.onMinusButtonClick;
+
+      var _a = React.useState(function () {
+        return actualInputValue === min || disabled;
+      }),
+          minusButtonDisable = _a[0],
+          setMinusButtonDisable = _a[1];
+
+      var _b = React.useState(function () {
+        return actualInputValue === max || disabled;
+      }),
+          addButtonDisable = _b[0],
+          setAddButtonDisable = _b[1];
+
+      var handleMinusButtonClick = function handleMinusButtonClick(e) {
+        if (minusButtonDisable) {
+          return;
+        }
+
+        updateValue(function (oldValue) {
+          var result = correctCalculation(oldValue, step, '-');
+          return result < min ? equalLimitDisabled ? oldValue : min : result;
+        });
+        onMinusButtonClick && onMinusButtonClick(e);
+      };
+
+      var handleAddButtonClick = function handleAddButtonClick(e) {
+        if (addButtonDisable) {
+          return;
+        }
+
+        updateValue(function (oldValue) {
+          var result = correctCalculation(Number(oldValue), step, '+');
+          return result > max ? equalLimitDisabled ? oldValue : max : result;
+        });
+        onAddButtonClick && onAddButtonClick(e);
+      }; // 当前值改变时，更新按钮状态
+      // Changes button status when value changed
+
+
+      React.useEffect(function () {
+        setMinusButtonDisable(actualInputValue <= min);
+        setAddButtonDisable(actualInputValue >= max);
+      }, [actualInputValue]);
+      return {
+        minusButtonDisable: minusButtonDisable,
+        addButtonDisable: addButtonDisable,
+        handleMinusButtonClick: handleMinusButtonClick,
+        handleAddButtonClick: handleAddButtonClick
+      };
+    }
+
+    function useInputEvent(params) {
+      var defaultValue = params.defaultValue,
+          min = params.min,
+          max = params.max,
+          digits = params.digits,
+          actualInputValue = params.actualInputValue,
+          allowEmpty = params.allowEmpty,
+          updateValue = params.updateValue,
+          onBlur = params.onBlur,
+          onChange = params.onChange,
+          onInput = params.onInput;
+
+      var handleInput = function handleInput(e) {
+        var targetValue = e.target.value;
+        var numberValue = Number(targetValue);
+        var pointIndex = targetValue.indexOf('.');
+
+        if (digits > 0 && pointIndex !== -1) {
+          var decimalLength = targetValue.slice(pointIndex + 1).length;
+          updateValue(decimalLength > digits ? actualInputValue : numberValue);
+        } else if (allowEmpty && targetValue === '') {
+          updateValue(Number.MIN_VALUE);
+        } else {
+          updateValue(numberValue);
+        }
+
+        onInput && onInput(e);
+      };
+
+      var handleBlur = function handleBlur(e) {
+        var targetValue = e.target.value;
+        var numberValue = Number(targetValue);
+
+        if (allowEmpty && targetValue === '') {
+          updateValue(Number.MIN_VALUE);
+        } else if (!allowEmpty && targetValue === '') {
+          updateValue(defaultValue);
+        } else {
+          updateValue(Math.max(min, Math.min(max, numberValue)));
+        }
+
+        onBlur && onBlur(e);
+      };
+
+      useUpdateEffect(function () {
+        onChange && onChange(actualInputValue);
+      }, [actualInputValue]);
+      return {
+        handleInput: handleInput,
+        handleBlur: handleBlur
+      };
+    }
+
+    function useValue(params) {
+      var defaultValue = params.defaultValue,
+          formatter = params.formatter,
+          max = params.max,
+          min = params.min,
+          value = params.value,
+          digits = params.digits;
+
+      var _a = React.useState(defaultValue),
+          innerValue = _a[0],
+          setInnerValue = _a[1];
+
+      var updateValue = function updateValue(updater) {
+        var tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
+
+        if (formatter) {
+          new Promise(function (resolve) {
+            resolve(formatter(Number(tempValue)));
+          }).then(function (result) {
+            var res = Math.max(min, Math.min(max, result));
+            setInnerValue(res);
+          });
+        } else {
+          setInnerValue(tempValue);
+        }
+      };
+
+      var actualInputValue = value !== undefined ? value : innerValue; // 将actualInputValue等于Number.MIN_VALUE的情况视为空值
+      // @en If actualInputValue equal Number.MIN_VALUE, actualInputValue equal ''
+
+      var showValue = actualInputValue === Number.MIN_VALUE ? '' : digits > 0 ? parseFloat(String(actualInputValue)).toFixed(digits) : actualInputValue;
+      return {
+        updateValue: updateValue,
+        actualInputValue: actualInputValue,
+        showValue: showValue
+      };
+    }
+
+    /**
+     * 步进器组件，支持受控模式
+     * @en Stepper component, provide controlled mode
+     * @type 数据录入
+     * @type_en Data Entry
+     * @name 步进器
+     * @name_en Stepper
+     */
+
+    var Stepper = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style,
+          inputStyle = props.inputStyle,
+          _b = props.inputClass,
+          inputClass = _b === void 0 ? '' : _b,
+          value = props.value,
+          _c = props.defaultValue,
+          defaultValue = _c === void 0 ? 1 : _c,
+          _d = props.allowEmpty,
+          allowEmpty = _d === void 0 ? false : _d,
+          _e = props.digits,
+          digits = _e === void 0 ? 0 : _e,
+          _f = props.disabled,
+          disabled = _f === void 0 ? false : _f,
+          _g = props.inputReadonly,
+          inputReadonly = _g === void 0 ? false : _g,
+          _h = props.max,
+          max = _h === void 0 ? Infinity : _h,
+          _j = props.min,
+          min = _j === void 0 ? 1 : _j,
+          _k = props.equalLimitDisabled,
+          equalLimitDisabled = _k === void 0 ? false : _k,
+          _l = props.step,
+          step = _l === void 0 ? 1 : _l,
+          _m = props.theme,
+          theme = _m === void 0 ? 'default' : _m,
+          formatter = props.formatter,
+          addButton = props.addButton,
+          minusButton = props.minusButton,
+          renderContent = props.renderContent,
+          onBlur = props.onBlur,
+          onChange = props.onChange,
+          onFocus = props.onFocus,
+          onAddButtonClick = props.onAddButtonClick,
+          onMinusButtonClick = props.onMinusButtonClick,
+          onClick = props.onClick,
+          onInput = props.onInput; // 值的相关逻辑
+      // @en The logic is that handle value
+
+      var _o = useValue({
+        defaultValue: defaultValue,
+        formatter: formatter,
+        min: min,
+        max: max,
+        value: value,
+        digits: digits
+      }),
+          updateValue = _o.updateValue,
+          actualInputValue = _o.actualInputValue,
+          showValue = _o.showValue; // 按钮点击的相关逻辑
+      // @en The logic is that handle button click
+
+
+      var _p = useButtonClick({
+        actualInputValue: actualInputValue,
+        min: min,
+        max: max,
+        step: step,
+        disabled: disabled,
+        digits: digits,
+        equalLimitDisabled: equalLimitDisabled,
+        updateValue: updateValue,
+        onAddButtonClick: onAddButtonClick,
+        onMinusButtonClick: onMinusButtonClick
+      }),
+          minusButtonDisable = _p.minusButtonDisable,
+          addButtonDisable = _p.addButtonDisable,
+          handleAddButtonClick = _p.handleAddButtonClick,
+          handleMinusButtonClick = _p.handleMinusButtonClick; // 输入框操作的相关逻辑
+      // @en The logic is that handle input operation
+
+
+      var _q = useInputEvent({
+        defaultValue: defaultValue,
+        min: min,
+        max: max,
+        digits: digits,
+        actualInputValue: actualInputValue,
+        allowEmpty: allowEmpty,
+        updateValue: updateValue,
+        onBlur: onBlur,
+        onChange: onChange,
+        onInput: onInput
+      }),
+          handleInput = _q.handleInput,
+          handleBlur = _q.handleBlur;
+
+      var domRef = React.useRef(null);
+      var inputRef = React.useRef(null);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current,
+          input: inputRef.current,
+          changeValue: function changeValue(newValue) {
+            var tempValue = newValue != null ? newValue : defaultValue;
+            tempValue = Math.min(max, Math.max(tempValue, min));
+            updateValue(tempValue);
+          }
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var prefixCls = _a.prefixCls;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: cls(prefixCls + "-stepper", prefixCls + "-" + theme, className),
+          style: style,
+          ref: domRef,
+          onClick: onClick
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          "aria-label": "decrease",
+          onClick: handleMinusButtonClick
+        }, minusButton || /*#__PURE__*/React__default["default"].createElement("div", {
+          className: cls(prefixCls + "-stepper-minus-button")
+        }, /*#__PURE__*/React__default["default"].createElement(IconMinus, {
+          className: cls(prefixCls + "-stepper-minus-button-icon", {
+            disabled: minusButtonDisable
+          })
+        }))), renderContent ? renderContent(actualInputValue) : /*#__PURE__*/React__default["default"].createElement("input", {
+          style: inputStyle,
+          className: cls(prefixCls + "-stepper-input", inputClass),
+          onFocus: onFocus,
+          onInput: handleInput,
+          onBlur: handleBlur,
+          disabled: disabled,
+          value: showValue,
+          readOnly: inputReadonly,
+          ref: inputRef,
+          type: "number",
+          role: "spinbutton",
+          "aria-valuenow": Number(showValue),
+          "aria-valuemax": max,
+          "aria-valuemin": min
+        }), /*#__PURE__*/React__default["default"].createElement("div", {
+          "aria-label": "increase",
+          onClick: handleAddButtonClick
+        }, addButton || /*#__PURE__*/React__default["default"].createElement("div", {
+          className: cls(prefixCls + "-stepper-add-button")
+        }, /*#__PURE__*/React__default["default"].createElement(IconAdd, {
+          className: cls(prefixCls + "-stepper-add-button-icon", {
+            disabled: addButtonDisable
+          })
+        }))));
+      });
+    });
+
     var Step = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var title = props.title,
           description = props.description,
@@ -24214,6 +24624,7 @@
     exports.SearchBar = SearchBar;
     exports.ShowMonitor = ShowMonitor;
     exports.Slider = SliderWrapper;
+    exports.Stepper = Stepper;
     exports.Steps = index$2;
     exports.Sticky = Sticky;
     exports.SwipeAction = SwipeAction;