@arco-design/mobile-react 2.36.2 → 2.38.0

package/dist/index.js

@@ -1656,7 +1656,6 @@
       LoadMore: {
         loadMoreText: '加载更多',
         loadingText: '正在努力加载中...',
-        prepareText: '上拉/点击加载更多',
         noDataText: '没有更多数据了',
         failLoadText: '加载失败，点击重试',
         prepareScrollText: '上拉',
@@ -1719,36 +1718,36 @@
           boolean: defaultMessageTemplate$1
         },
         number: {
-          min: '`%s` 小于 `%s`',
-          max: '`%s` 大于 `%s`',
-          equal: '`%s` 不等于 `%s`',
-          range: '`%s` 不在 `%s ~ %s` 范围中 ',
-          positive: '`%s` 不是正数',
-          negative: '`%s`不是负数'
+          min: '`%s` 不可小于 `%s`',
+          max: '`%s` 不可大于 `%s`',
+          equal: '`%s` 应该等于 `%s`',
+          range: '`%s` 应该在 `%s ~ %s` 范围中',
+          positive: '`%s` 不可小于 0',
+          negative: '`%s` 不可大于 0'
         },
         string: {
-          max: '%s 超过 %s 个字符',
-          min: '%s 少于 %s 个字符',
-          len: '%s 字符个数应为 %s',
-          equal: '%s 不等于 `%s`',
-          match: '`%s` 不匹配 %s 模式',
+          max: '%s 不可超过 %s 个字符',
+          min: '%s 不可少于 %s 个字符',
+          len: '%s 字符个数应等于 %s',
+          equal: '%s 应该等于 `%s`',
+          match: '`%s` 应匹配 %s 模式',
           uppercase: '%s 需全为大写字符',
           lowercase: '%s 需全为小写字符',
-          whitespace: '%s 不能为连续空格'
+          whitespace: '%s 不可全为空格'
         },
         array: {
-          max: '%s 数组长度大于 %s',
-          min: '%s 数组长度小于 %s',
-          len: '%s 数组长度需为 %s',
-          includes: '%s 不包含 %s',
-          deepEqual: '%s 不完全等于 %s'
+          max: '%s 数组长度不可大于 %s',
+          min: '%s 数组长度不可小于 %s',
+          len: '%s 数组长度需等于 %s',
+          includes: '%s 应该包含 %s',
+          deepEqual: '%s 应该完全等于 %s'
         },
         object: {
-          deepEqual: '%s 不完全等于 %s',
-          hasKeys: '%s 不包含必要字段 %s'
+          deepEqual: '%s 应该完全等于 %s',
+          hasKeys: '%s 需包含必要字段 %s'
         },
         boolean: {
-          equal: '%s 不等于 `%s`'
+          equal: '%s 应该等于 `%s`'
         },
         pickerDefaultHint: '请选择'
       },
@@ -1756,8 +1755,8 @@
         backBtnAriaLabel: '返回'
       },
       Uploader: {
-        uploadBtn: '点击上传',
-        retryUpload: '点击重试'
+        uploadBtn: '上传',
+        retryUpload: '重试'
       }
     };
     var zhCN = localeConfig;
@@ -4650,7 +4649,7 @@
           clickTimes = _a[0],
           setClickTimes = _a[1];
 
-      var eventRef = React.useRef();
+      var eventRef = React.useRef(undefined);
       React.useEffect(function () {
         var timer = setTimeout(function () {
           if (clickTimes === 1) onClick(eventRef.current);
@@ -4704,61 +4703,79 @@
 
     function isObject$2(obj) {
       return Object.prototype.toString.call(obj) === '[object Object]';
-    }
+    } // Cast ReactDOM to a version that might have createRoot and other properties
 
-    var CopyReactDOM = __assign$3({}, ReactDOM__namespace);
 
+    var typedReactDOM = ReactDOM__namespace;
     var copyRender;
-    var version = CopyReactDOM.version,
-        reactRender = CopyReactDOM.render,
-        unmountComponentAtNode = CopyReactDOM.unmountComponentAtNode;
-    var isReact18 = Number((version || '').split('.')[0]) > 17;
 
     var updateUsingClientEntryPoint = function updateUsingClientEntryPoint(skipWarning) {
       // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
       // Avoid console warning
-      var __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = CopyReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+      var secretInternals = typedReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
-      if (isObject$2(__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)) {
-        __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skipWarning;
+      if (isObject$2(secretInternals)) {
+        secretInternals.usingClientEntryPoint = skipWarning;
       }
     };
 
-    var createRoot;
-
-    try {
-      createRoot = CopyReactDOM.createRoot;
-    } catch (_) {}
+    var createRootFn = typedReactDOM.createRoot;
 
-    if (isReact18 && createRoot) {
-      copyRender = function copyRender(app, container) {
+    var getRender = function getRender(createRootFunction) {
+      return function (app, container) {
         updateUsingClientEntryPoint(true);
-        var root = createRoot(container);
+        var root = createRootFunction(container);
         updateUsingClientEntryPoint(false);
         root.render(app);
-
-        root._unmount = function () {
-          setTimeout(function () {
-            var _a;
-
-            (_a = root === null || root === void 0 ? void 0 : root.unmount) === null || _a === void 0 ? void 0 : _a.call(root);
-          });
+        return {
+          render: function render(elementToRender) {
+            root.render(elementToRender);
+          },
+          _unmount: function _unmount() {
+            setTimeout(function () {
+              if (root && typeof root.unmount === 'function') {
+                root.unmount();
+              }
+            });
+          }
         };
-
-        return root;
       };
-    } else {
+    };
+
+    if (createRootFn) {
+      // React 18
+      copyRender = getRender(createRootFn);
+    } else if (typeof typedReactDOM.render === 'function' && typeof typedReactDOM.unmountComponentAtNode === 'function') {
+      // React 16/17
       copyRender = function copyRender(app, container) {
-        reactRender(app, container);
+        typedReactDOM.render(app, container); // Use non-null assertion
+
         return {
-          render: function render(comment) {
-            reactRender(comment, container);
+          render: function render(elementToRender) {
+            typedReactDOM.render(elementToRender, container); // Use non-null assertion
           },
           _unmount: function _unmount() {
-            unmountComponentAtNode(container);
+            typedReactDOM.unmountComponentAtNode(container); // Use non-null assertion
           }
         };
       };
+    } else {
+      copyRender = function copyRender(app, container, createRootFunction) {
+        var defaultCb = function defaultCb() {
+          // Fallback if no rendering method is found
+          console.error('ArcoDesign: ReactDOM.createRoot() or ReactDOM.render() not found. ' + 'This usually means you are using an unsupported version of React, ' + 'or ReactDOM is not properly initialized. ' + 'ArcoDesign Mobile React requires React 16, 17, 18, or 19.');
+          return {
+            render: function render(_element) {},
+            _unmount: function _unmount() {}
+          };
+        };
+
+        if (createRootFunction) {
+          return getRender(createRootFunction)(app, container);
+        }
+
+        return defaultCb();
+      };
     }
 
     var render = copyRender;
@@ -4775,14 +4792,15 @@
         this.render = function (props) {
           var CustomApp = _this.app;
 
-          var propsWithContext = __assign$3(__assign$3({}, props), {
+          var propsWithContext = __assign$3({
             context: _this.context
-          });
+          }, props);
 
           if (_this.root) {
             _this.root.render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign$3({}, propsWithContext)));
           } else {
-            _this.root = render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign$3({}, propsWithContext)), _this.container);
+            var createRoot = (_this.context || {}).createRoot;
+            _this.root = render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign$3({}, propsWithContext)), _this.container, createRoot);
           }
         };
 
@@ -5222,7 +5240,8 @@
           tabBarStyle = props.tabBarStyle,
           tabBarClass = props.tabBarClass,
           translateZ = props.translateZ,
-          tabBarStopPropagation = props.tabBarStopPropagation;
+          tabBarStopPropagation = props.tabBarStopPropagation,
+          onUnderlineFirstShow = props.onUnderlineFirstShow;
       var prefix = prefixCls + "-tab-cell";
       var useRtl = React.useContext(GlobalContext).useRtl;
       var domRef = React.useRef(null);
@@ -5298,6 +5317,13 @@
       React.useEffect(function () {
         updateScrollPosition();
       }, [activeIndex, wrapSize]);
+      React.useEffect(function () {
+        // underline 首次展示时，通知父组件启用 cellTrans
+        // @en When underline is first shown, notify parent component to enable cellTrans
+        if (showLine && onUnderlineFirstShow) {
+          onUnderlineFirstShow();
+        }
+      }, [showLine]);
       useUpdateEffect(function () {
         var _a;
 
@@ -6685,13 +6711,14 @@
           cellRef.current && cellRef.current.scrollToCenter();
         }
 
+        setCellTrans(true);
+        setPaneTrans(true);
+
         if (!touchStartedRef.current || posAdjustingRef.current || scrollingRef.current || !touchMovedRef.current) {
           return;
         }
 
         touchStartedRef.current = false;
-        setCellTrans(true);
-        setPaneTrans(true);
         var touchEndTime = new Date().getTime();
         var dis = distanceRef.current;
         var speed = dis / (touchEndTime - touchStartTimeRef.current) * 1000;
@@ -6825,7 +6852,10 @@
           renderTabBarInner: renderTabBarInner,
           tabBarStyle: tabBarStyle,
           tabBarClass: tabBarClass,
-          tabBarStopPropagation: tabBarStopPropagation
+          tabBarStopPropagation: tabBarStopPropagation,
+          onUnderlineFirstShow: function onUnderlineFirstShow() {
+            return setCellTrans(true);
+          }
         }, commonProps);
 
         var CellComp = /*#__PURE__*/React__default["default"].createElement(TabCell, __assign$3({}, cellProps));
@@ -8760,6 +8790,7 @@
     };
     CSSTransition.propTypes = {};
 
+    var DEFAULT_TIMEOUT = 300;
     /**
      * react-transition-group/CSSTransition 的简单封装。
      * @en Simple wrapper for react-transition-group/CSSTransition.
@@ -8775,14 +8806,36 @@
           type = props.type,
           transIn = props.in,
           _b = props.timeout,
-          timeout = _b === void 0 ? 300 : _b,
+          timeout = _b === void 0 ? DEFAULT_TIMEOUT : _b,
           _c = props.mountOnEnter,
           mountOnEnter = _c === void 0 ? true : _c,
           _d = props.unmountOnExit,
           unmountOnExit = _d === void 0 ? true : _d,
-          restProps = __rest$1(props, ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit"]);
+          transitionVarType = props.transitionVarType,
+          restProps = __rest$1(props, ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit", "transitionVarType"]);
 
+      var varPrefix = "builtin-transition-" + (transitionVarType || type); // 计算动画时长，支持对象形式的 timeout
+
+      var getDuration = function getDuration(phase) {
+        if (typeof timeout === 'number') {
+          return timeout;
+        }
+
+        return timeout[phase] || DEFAULT_TIMEOUT;
+      }; // 生成 CSS 变量样式
+
+
+      var cssVariables = React.useMemo(function () {
+        var _a;
+
+        var enterDuration = getDuration('enter');
+        var exitDuration = getDuration('exit');
+        var appearDuration = getDuration('appear');
+        return _a = {}, _a["--" + varPrefix + "-enter-duration"] = enterDuration + "ms", _a["--" + varPrefix + "-exit-duration"] = exitDuration + "ms", _a["--" + varPrefix + "-appear-duration"] = appearDuration + "ms", _a;
+      }, [timeout, varPrefix]);
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var _b, _c;
+
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement(CSSTransition, __assign$3({
           in: transIn,
@@ -8790,7 +8843,9 @@
           classNames: prefixCls + "-" + type,
           mountOnEnter: mountOnEnter,
           unmountOnExit: unmountOnExit
-        }, restProps), children);
+        }, restProps), /*#__PURE__*/React.cloneElement(children, {
+          style: __assign$3(__assign$3({}, cssVariables), (_c = (_b = children) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.style)
+        }));
       });
     }
 
@@ -8886,6 +8941,7 @@
           maskTransitionType = _b === void 0 ? 'fade' : _b,
           _c = props.contentTransitionType,
           contentTransitionType = _c === void 0 ? 'fade' : _c,
+          contentTransitionVarType = props.contentTransitionVarType,
           _d = props.maskTransitionTimeout,
           maskTransitionTimeout = _d === void 0 ? 300 : _d,
           _e = props.contentTransitionTimeout,
@@ -9030,6 +9086,7 @@
           in: innerVisible,
           timeout: contentTransitionTimeout,
           type: contentTransitionType,
+          transitionVarType: contentTransitionVarType,
           mountOnEnter: mountOnEnter,
           unmountOnExit: unmountOnExit,
           nodeRef: contentRef
@@ -9110,6 +9167,7 @@
             translateZ: translateZ
           }, maskClass),
           contentTransitionType: contentTransitionType || "slide-from-" + direction,
+          contentTransitionVarType: "popup-slide",
           contentClass: cls(prefix + "-content", direction, {
             'need-bottom-offset': needBottomOffset
           }, {
@@ -9202,14 +9260,14 @@
         }, subTitle) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-action-sheet-list"
         }, (items || []).map(function (item, index) {
-          return /*#__PURE__*/React__default["default"].createElement("div", {
+          return item.content ? /*#__PURE__*/React__default["default"].createElement("div", {
             className: cls(prefixCls + "-action-sheet-item", item.className, item.status || 'normal'),
             key: index,
             style: item.style,
             onClick: function onClick(e) {
               return handleItemClick(e, item);
             }
-          }, item.content);
+          }, item.content) : null;
         })), cancelText ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-action-sheet-item cancel-item",
           onClick: function onClick(e) {
@@ -10059,7 +10117,7 @@
           _h = props.bordered,
           bordered = _h === void 0 ? false : _h,
           _j = props.timeout,
-          timeout = _j === void 0 ? 300 : _j;
+          timeout = _j === void 0 ? 400 : _j;
       var domRef = React.useRef(null);
       React.useImperativeHandle(ref, function () {
         return {
@@ -12460,8 +12518,8 @@
 
     var useCountDown = function useCountDown(options) {
       var taskIdRef = React.useRef(0);
-      var endTimeRef = React.useRef();
-      var countingRef = React.useRef();
+      var endTimeRef = React.useRef(undefined);
+      var countingRef = React.useRef(undefined);
 
       var _a = useRefState(options.time),
           remain = _a[0],
@@ -12769,7 +12827,7 @@
       var rowCount = Math.max(rows % 2 === 0 ? rows + 1 : rows, 3);
       var isTouchMoveRef = React.useRef(false);
       var isTouchStopped = React.useRef(false);
-      var unmountCallbackRef = React.useRef();
+      var unmountCallbackRef = React.useRef(undefined);
       var timeRef = React.useRef(null);
       var colStyle = React.useMemo(function () {
         return getStyleWithVendor(__assign$3(__assign$3({
@@ -13218,7 +13276,9 @@
           rows: rows,
           hideEmptyCols: hideEmptyCols,
           ref: function ref(cellRef) {
-            return cellRef && (pickerCellsRef.current[index] = cellRef);
+            if (cellRef) {
+              pickerCellsRef.current[index] = cellRef;
+            }
           },
           touchToStop: touchToStop
         });
@@ -13450,7 +13510,9 @@
             rows: rows,
             hideEmptyCols: hideEmptyCols,
             ref: function ref(cellRef) {
-              return cellRef && (pickerCellsRef.current[index] = cellRef);
+              if (cellRef) {
+                pickerCellsRef.current[index] = cellRef;
+              }
             },
             touchToStop: touchToStop
           });
@@ -14343,7 +14405,10 @@
           _h = props.maskTransitionTimeout,
           maskTransitionTimeout = _h === void 0 ? 300 : _h,
           _j = props.contentTransitionTimeout,
-          contentTransitionTimeout = _j === void 0 ? 450 : _j,
+          contentTransitionTimeout = _j === void 0 ? nowSystem === 'android' ? 300 : {
+        enter: 450,
+        exit: 150
+      } : _j,
           extra = props.extra,
           restProps = __rest$1(props, ["close", "children", "title", "footer", "footerType", "renderFooter", "footerCollapseCount", "titleAlign", "contentAlign", "className", "maskClass", "contentClass", "contentStyle", "contentTransitionType", "maskTransitionTimeout", "contentTransitionTimeout", "extra"]);
 
@@ -16543,8 +16608,6 @@
       }, ellipsisNode) : null);
     }
 
-    var NativeEllipsis$1 = /*#__PURE__*/React__default["default"].memo(NativeEllipsis);
-
     /**
      * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。如果传入的文本内容中包含换行符号`\n`，建议将`\n`替换为`<br/>`，并设置`dangerouslyUseInnerHTML=true`。
      * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc. If the incoming text contains newline characters `\n`, it is recommended to replace `\n` with `<br/>`, and set `dangerouslyUseInnerHTML=true`.
@@ -16591,7 +16654,7 @@
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-ellipsis", className),
           ref: domRef
-        }, useNativeEllipsis ? /*#__PURE__*/React__default["default"].createElement(NativeEllipsis$1, {
+        }, useNativeEllipsis ? /*#__PURE__*/React__default["default"].createElement(NativeEllipsis, {
           prefixCls: prefixCls + "-ellipsis",
           ellipsis: ellipsis,
           dangerouslyUseInnerHTML: dangerouslyUseInnerHTML,
@@ -25050,7 +25113,9 @@
           stickyStyle: "absolute",
           getScrollContainer: getScrollContainer,
           ref: function ref(stickyRef) {
-            return stickyRef && updateRef(groupIndex, stickyRef);
+            if (stickyRef) {
+              updateRef(groupIndex, stickyRef);
+            }
           }
         }, titleDom) : titleDom;
       };
@@ -26672,8 +26737,8 @@
           getContainer = props.getContainer;
       var domRef = React.useRef(null);
       var innerRef = React.useRef(null);
-      var closeTimerRef = React.useRef();
-      var onCloseTimeRef = React.useRef();
+      var closeTimerRef = React.useRef(undefined);
+      var onCloseTimeRef = React.useRef(undefined);
 
       var _f = React.useState(!visible),
           hasTrans = _f[0],
@@ -28272,23 +28337,33 @@
           _onOpen = props.onOpen,
           _onClose = props.onClose,
           close = props.close,
-          otherProps = __rest$1(props, ["className", "visible", "children", "maskStyle", "contentStyle", "direction", "percentToClose", "distanceToClose", "speedToClose", "allowSwipeDirections", "exitDirection", "onTouchMove", "onTouchStart", "onTouchEnd", "onOpen", "onClose", "close"]);
+          _f = props.maskTransitionTimeout,
+          maskTransitionTimeout = _f === void 0 ? {
+        enter: 450,
+        exit: 240
+      } : _f,
+          _g = props.contentTransitionTimeout,
+          contentTransitionTimeout = _g === void 0 ? {
+        enter: 450,
+        exit: 240
+      } : _g,
+          otherProps = __rest$1(props, ["className", "visible", "children", "maskStyle", "contentStyle", "direction", "percentToClose", "distanceToClose", "speedToClose", "allowSwipeDirections", "exitDirection", "onTouchMove", "onTouchStart", "onTouchEnd", "onOpen", "onClose", "close", "maskTransitionTimeout", "contentTransitionTimeout"]);
 
-      var _f = React.useState(visible),
-          opened = _f[0],
-          setOpened = _f[1];
+      var _h = React.useState(visible),
+          opened = _h[0],
+          setOpened = _h[1];
 
-      var _g = useRefState({
+      var _j = useRefState({
         direction: 'X',
         value: 0
       }),
-          distance = _g[0],
-          distanceRef = _g[1],
-          setDistance = _g[2];
+          distance = _j[0],
+          distanceRef = _j[1],
+          setDistance = _j[2];
 
-      var _h = React.useState(false),
-          hasTrans = _h[0],
-          setHasTrans = _h[1];
+      var _k = React.useState(false),
+          hasTrans = _k[0],
+          setHasTrans = _k[1];
 
       var popupRef = React.useRef(null);
       var touchStartXRef = React.useRef(0);
@@ -28417,7 +28492,12 @@
           setDistance({
             direction: 'X',
             value: 0
-          });
+          }); // 动画完成后需重置
+          // @en Reset after animation is complete
+
+          setTimeout(function () {
+            setHasTrans(false);
+          }, Math.max(typeof maskTransitionTimeout === 'number' ? maskTransitionTimeout : (maskTransitionTimeout === null || maskTransitionTimeout === void 0 ? void 0 : maskTransitionTimeout.exit) || 0, typeof contentTransitionTimeout === 'number' ? contentTransitionTimeout : (contentTransitionTimeout === null || contentTransitionTimeout === void 0 ? void 0 : contentTransitionTimeout.exit) || 0, 240));
         }
 
         touchStartTimeRef.current = 0;
@@ -28482,7 +28562,9 @@
           maskStyle: __assign$3(__assign$3({}, maskStyle || {}), {
             opacity: percent ? 1 - percent : void 0
           }),
-          contentStyle: getContentStyle()
+          contentStyle: getContentStyle(),
+          maskTransitionTimeout: maskTransitionTimeout,
+          contentTransitionTimeout: contentTransitionTimeout
         }, otherProps), children);
       });
     });
@@ -30582,7 +30664,9 @@
             backgroundColor: backgroundColor
           },
           ref: function ref(el) {
-            return el && (lineDomRefs.current[idx] = el);
+            if (el) {
+              lineDomRefs.current[idx] = el;
+            }
           }
         }, isGradientAnimation && offsets !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-skeleton-animation-item",
@@ -30668,7 +30752,9 @@
             backgroundColor: backgroundColor
           },
           ref: function ref(el) {
-            return el && (iconDomRefs.current[idx] = el);
+            if (el) {
+              iconDomRefs.current[idx] = el;
+            }
           }
         }, isGradientAnimation && iconOffsets !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-skeleton-animation-item",
@@ -30681,7 +30767,9 @@
             backgroundColor: backgroundColor
           },
           ref: function ref(el) {
-            return el && (textDomRefs.current[idx] = el);
+            if (el) {
+              textDomRefs.current[idx] = el;
+            }
           }
         }, isGradientAnimation && textOffsets !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-skeleton-animation-item",
@@ -33231,7 +33319,7 @@
           direction = _h === void 0 ? 'center' : _h,
           typeIconMap = props.typeIconMap,
           initialBodyOverflow = props.initialBodyOverflow;
-      var closeTimerRef = React.useRef();
+      var closeTimerRef = React.useRef(undefined);
       var domRef = React.useRef(null);
       var wrapDomRef = React.useRef(null);
       var isInitialMount = React.useRef(false);