@arco-design/mobile-react 2.28.1 → 2.29.0

package/dist/index.js

@@ -132,7 +132,7 @@
     function isEmptyArray(obj) {
       return isArray(obj) && !(obj === null || obj === void 0 ? void 0 : obj.length);
     }
-    var isDeepEqual = function isDeepEqual(obj, sub) {
+    function isDeepEqual(obj, sub) {
       if (typeof obj !== 'object' || typeof sub !== 'object' || obj === null || sub === null) {
         return obj === sub;
       }
@@ -150,7 +150,7 @@
       }
 
       return true;
-    };
+    }
 
     function cls () {
       var args = [];
@@ -367,7 +367,7 @@
      * @param childrenEl 子节点
      */
 
-    var isContains = function isContains(parentEl, childrenEl) {
+    function isContains(parentEl, childrenEl) {
       if (!parentEl || !childrenEl) return false;
 
       if (parentEl.contains) {
@@ -385,7 +385,7 @@
       }
 
       return false;
-    };
+    }
     function execRAF(fn) {
       try {
         return requestAnimationFrame(fn);
@@ -3142,6 +3142,12 @@
      * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
      * @param initialState 初始状态
      * @param initialState {en} Initial State
+     * @example
+     * ```
+     * import { useMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+     *
+     * const [scrollValue, setScrollValue] = useMountedState(value);
+     * ```
      */
 
     function useMountedState(initialState) {
@@ -3535,7 +3541,7 @@
         };
       }, [visible]);
     }
-    var useProgress = function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
+    function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
       var _a = React.useState(0),
           currentPercentage = _a[0],
           setCurrentPercentage = _a[1];
@@ -3569,7 +3575,7 @@
         percentage === 100 ? setCurrentPercentage(100) : setCurrentPercentage(count * step);
       }, [count, percentage, step]);
       return [currentPercentage, transitionControl];
-    };
+    }
     function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
       if (delay === void 0) {
         delay = 200;
@@ -5468,9 +5474,15 @@
       }
 
       function updateLayout() {
+        var _a, _b;
+
+        var _c = getOffset(domRef.current),
+            width = _c.width,
+            height = _c.height;
+
         cellRef.current && cellRef.current.resetUnderlineStyle();
-        setWrapWidth(domRef.current ? domRef.current.offsetWidth : 0);
-        setWrapHeight(domRef.current ? domRef.current.offsetHeight : 0);
+        setWrapWidth(width || ((_a = domRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+        setWrapHeight(height || ((_b = domRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0);
         paneRef.current && paneRef.current.setCurrentHeight();
       }
 
@@ -6134,7 +6146,7 @@
      * @name_en Cell
      */
 
-    var index$o = componentWrapper(Cell, {
+    var index$p = componentWrapper(Cell, {
       Group: Group$4
     });
 
@@ -7429,7 +7441,7 @@
      * @name_en ActionSheet
      */
 
-    var index$n = componentWrapper(ActionSheet, methodsGenerator$5(ActionSheetWithGlobalContext));
+    var index$o = componentWrapper(ActionSheet, methodsGenerator$5(ActionSheetWithGlobalContext));
 
     /**
      * 加载中组件，分为四种类型，`circle`为环形，`arc`为弧线，`spin`为旋转，`dot`为圆点。所有类型均可定制颜色，环形和弧线类型可定制线圈半径及粗细，旋转和圆点类型可定制内部元素透明度。
@@ -8214,7 +8226,7 @@
      * @name_en Avatar
      */
 
-    var index$m = componentWrapper(Avatar, {
+    var index$n = componentWrapper(Avatar, {
       Group: Group$3
     });
 
@@ -10467,7 +10479,7 @@
      * @name_en Collapse
      */
 
-    var index$l = componentWrapper(Collapse, {
+    var index$m = componentWrapper(Collapse, {
       Group: Group$1
     });
 
@@ -10964,6 +10976,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 timeRef = React.useRef(null);
       var colStyle = React.useMemo(function () {
         return getStyleWithVendor(__assign$2(__assign$2({
@@ -11005,20 +11018,24 @@
         }
 
         setTransitionDuration(transDuration ? transDuration + "ms" : '');
-        setTransformY(transY); // 处理连续滑动的情况：
-        // @en handle the case of continuous sliding:
-        // 如果上一次callback还未执行，先cancel掉上一次回调，只执行最近的一次回调
-        // @en If the last callback has not been executed, cancel the last callback first, and only execute the latest callback
+        setTransformY(transY); // 处理连续滑动的情况：如果上一次callback还未执行，先cancel掉上一次回调
+        // @en handle the case of continuous sliding: If the last callback has not been executed, cancel the last callback first
 
         if (latestCallbackTimer.current) {
           clearTimeout(latestCallbackTimer.current);
         }
 
-        latestCallbackTimer.current = window.setTimeout(function () {
+        var setNormalStatus = function setNormalStatus() {
+          // 如果timer顺利执行，则在unmount时不再重复执行
+          // @en If the timer is successfully executed, it will not be repeated when unmounting
+          unmountCallbackRef.current = undefined;
           movingStatusRef.current = 'normal';
           setTransitionDuration('');
           callback();
-        }, transDuration);
+        };
+
+        unmountCallbackRef.current = setNormalStatus;
+        latestCallbackTimer.current = window.setTimeout(setNormalStatus, transDuration);
       }
 
       function _scrollToIndex(itemIndex, transDuration, callback) {
@@ -11216,6 +11233,17 @@
         _scrollToIndexWithChange(itemIndex, 200);
       }
 
+      React.useEffect(function () {
+        return function () {
+          var _a; // 卸载组件时，如果timer中还有未执行的onchange操作，则立刻执行该操作并移除timer
+          // @en When unloading the component, if there is an unexecuted onchange operation in the timer, execute it immediately and remove the timer
+
+
+          var timerId = latestCallbackTimer.current;
+          (_a = unmountCallbackRef.current) === null || _a === void 0 ? void 0 : _a.call(unmountCallbackRef);
+          timerId && clearTimeout(timerId);
+        };
+      }, []);
       React.useEffect(function () {
         if (wrapRef.current) {
           wrapRef.current.addEventListener('touchstart', _handleColumnTouchStart);
@@ -12136,7 +12164,7 @@
      * @displayName DatePicker
      */
 
-    var index$k = componentWrapper(DatePicker, 'DatePicker');
+    var index$l = componentWrapper(DatePicker, 'DatePicker');
 
     function normalizeAlert(config) {
       var _a = config || {},
@@ -12334,7 +12362,7 @@
      * @name_en Dialog
      */
 
-    var index$j = componentWrapper(Dialog, methodsGenerator$4(DialogWithGlobalContext));
+    var index$k = componentWrapper(Dialog, methodsGenerator$4(DialogWithGlobalContext));
 
     /**
      * 划分内容的装饰线
@@ -14146,7 +14174,7 @@
         };
     });
 
-    var index$i = (function () {
+    var index$j = (function () {
         // Export existing implementation if available.
         if (typeof global$1.ResizeObserver !== 'undefined') {
             return global$1.ResizeObserver;
@@ -14377,7 +14405,7 @@
       React.useEffect(function () {
         if (domRef.current && reflowOnResize) {
           if (!observerRef.current && ellipsis) {
-            observerRef.current = new index$i(reflow);
+            observerRef.current = new index$j(reflow);
             observerRef.current.observe(domRef.current);
           }
         }
@@ -14891,6 +14919,87 @@
         _this._errors = [];
         _this._touched = false;
 
+        _this.onValueChange = function (preStore, curStore) {
+          _this._touched = true;
+          var shouldUpdate = _this.props.shouldUpdate;
+
+          if (typeof shouldUpdate === 'function') {
+            shouldUpdate({
+              preStore: preStore,
+              curStore: curStore
+            }) && _this.forceUpdate();
+            return;
+          }
+
+          _this.forceUpdate();
+        };
+
+        _this.getFieldError = function () {
+          return _this._errors;
+        };
+
+        _this.isFieldTouched = function () {
+          return _this._touched;
+        };
+
+        _this.validateField = function () {
+          var _a;
+
+          var validateMessages = _this.context.validateMessages;
+          var getFieldValue = _this.context.form.getFieldValue;
+          var _b = _this.props,
+              field = _b.field,
+              rules = _b.rules,
+              onValidateStatusChange = _b.onValidateStatusChange;
+          var value = getFieldValue(field);
+
+          if ((rules === null || rules === void 0 ? void 0 : rules.length) && field) {
+            var fieldDom_1 = _this.props.getFormItemRef();
+
+            var fieldValidator_1 = new Validator((_a = {}, _a[field] = rules, _a), {
+              validateMessages: validateMessages
+            });
+            return new Promise(function (resolve) {
+              var _a;
+
+              fieldValidator_1.validate((_a = {}, _a[field] = value, _a), function (errorsMap) {
+                var _a = getErrorAndWarnings((errorsMap === null || errorsMap === void 0 ? void 0 : errorsMap[field]) || []),
+                    errors = _a.errors,
+                    warnings = _a.warnings;
+
+                _this._errors = errors;
+                onValidateStatusChange({
+                  errors: _this._errors,
+                  warnings: warnings
+                });
+                return resolve({
+                  errors: _this._errors,
+                  warnings: warnings,
+                  value: value,
+                  field: field,
+                  dom: fieldDom_1
+                });
+              });
+            });
+          }
+
+          return Promise.resolve({
+            errors: [],
+            warnings: [],
+            value: value,
+            field: field,
+            dom: null
+          });
+        };
+
+        _this.setFieldData = function (value) {
+          var field = _this.props.field;
+          var setFieldValue = _this.context.form.setFieldValue;
+          setFieldValue(field, value);
+
+          _this.validateField();
+        };
+
         _this.innerTriggerFunction = function (_, value) {
           var _a, _b;
 
@@ -14933,6 +15042,24 @@
           }
         };
 
+        _this.innerClearFunction = function () {
+          var _a, _b;
+
+          var args = [];
+
+          for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+          }
+
+          var children = _this.props.children;
+
+          _this.setFieldData('');
+
+          if ((_a = children.props) === null || _a === void 0 ? void 0 : _a.onClear) {
+            (_b = children.props) === null || _b === void 0 ? void 0 : _b.onClear.apply(_b, args);
+          }
+        };
+
         _this.destroyField = function () {};
 
         if ((props === null || props === void 0 ? void 0 : props.initialValue) && props.field) {
@@ -14952,104 +15079,6 @@
         this.destroyField();
       };
 
-      FormItemInner.prototype.onValueChange = function (preStore, curStore) {
-        this._touched = true;
-        var shouldUpdate = this.props.shouldUpdate;
-
-        if (typeof shouldUpdate === 'function') {
-          shouldUpdate({
-            preStore: preStore,
-            curStore: curStore
-          }) && this.forceUpdate();
-          return;
-        }
-
-        this.forceUpdate();
-      };
-
-      FormItemInner.prototype.getFieldError = function () {
-        return this._errors;
-      };
-
-      FormItemInner.prototype.isFieldTouched = function () {
-        return this._touched;
-      };
-
-      FormItemInner.prototype.validateField = function () {
-        var _a;
-
-        var _this = this;
-
-        var validateMessages = this.context.validateMessages;
-        var getFieldValue = this.context.form.getFieldValue;
-        var _b = this.props,
-            field = _b.field,
-            rules = _b.rules,
-            onValidateStatusChange = _b.onValidateStatusChange;
-        var value = getFieldValue(field);
-
-        if ((rules === null || rules === void 0 ? void 0 : rules.length) && field) {
-          var fieldDom_1 = this.props.getFormItemRef();
-          var fieldValidator_1 = new Validator((_a = {}, _a[field] = rules, _a), {
-            validateMessages: validateMessages
-          });
-          return new Promise(function (resolve) {
-            var _a;
-
-            fieldValidator_1.validate((_a = {}, _a[field] = value, _a), function (errorsMap) {
-              var _a = getErrorAndWarnings((errorsMap === null || errorsMap === void 0 ? void 0 : errorsMap[field]) || []),
-                  errors = _a.errors,
-                  warnings = _a.warnings;
-
-              _this._errors = errors;
-              onValidateStatusChange({
-                errors: _this._errors,
-                warnings: warnings
-              });
-              return resolve({
-                errors: _this._errors,
-                warnings: warnings,
-                value: value,
-                field: field,
-                dom: fieldDom_1
-              });
-            });
-          });
-        }
-
-        return Promise.resolve({
-          errors: [],
-          warnings: [],
-          value: value,
-          field: field,
-          dom: null
-        });
-      };
-
-      FormItemInner.prototype.setFieldData = function (value) {
-        var field = this.props.field;
-        var setFieldValue = this.context.form.setFieldValue;
-        setFieldValue(field, value);
-        this.validateField();
-      };
-
-      FormItemInner.prototype.innerClearFunction = function () {
-        var _a, _b;
-
-        var args = [];
-
-        for (var _i = 0; _i < arguments.length; _i++) {
-          args[_i] = arguments[_i];
-        }
-
-        var children = this.props.children;
-        this.setFieldData('');
-
-        if ((_a = children.props) === null || _a === void 0 ? void 0 : _a.onClear) {
-          (_b = children.props) === null || _b === void 0 ? void 0 : _b.onClear.apply(_b, args);
-        }
-      };
-
       FormItemInner.prototype.renderChildren = function () {
         var _a;
 
@@ -15306,7 +15335,7 @@
      * @name_en Form
      */
 
-    var index$h = componentWrapper(Form, {
+    var index$i = componentWrapper(Form, {
       Item: Item$1
     });
 
@@ -17284,10 +17313,10 @@
      * @displayName ImagePicker
      */
 
-    var index$g = componentWrapper(ImagePicker, 'ImagePicker');
+    var index$h = componentWrapper(ImagePicker, 'ImagePicker');
 
     /*!
-    * @arco-design/transformable v1.0.1
+    * @arco-design/transformable v1.0.2
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {
@@ -20482,7 +20511,7 @@
      * @name_en ImagePreview
      */
 
-    var index$f = componentWrapper(ImagePreview, methodsGenerator$3(ImagePreviewWithGlobalContext));
+    var index$g = componentWrapper(ImagePreview, methodsGenerator$3(ImagePreviewWithGlobalContext));
 
     var IndexBarContext = /*#__PURE__*/React.createContext({
       sticky: true,
@@ -20951,7 +20980,7 @@
      * @name_en SearchBar
      */
 
-    var index$e = componentWrapper(IndexBar, {
+    var index$f = componentWrapper(IndexBar, {
       Group: IndexBarGroup
     });
 
@@ -21300,7 +21329,7 @@
      * @displayName Input
      */
 
-    var index$d = componentWrapper(Input, 'Input');
+    var index$e = componentWrapper(Input, 'Input');
 
     // @en let keyboard random
 
@@ -22103,7 +22132,7 @@
      * @name_en Notify
      */
 
-    var index$c = componentWrapper(Notify, methodsGenerator$2(NotifyWithGlobalContext));
+    var index$d = componentWrapper(Notify, methodsGenerator$2(NotifyWithGlobalContext));
 
     function Arrow() {
       return /*#__PURE__*/React__default["default"].createElement("svg", {
@@ -23515,7 +23544,7 @@
      * @type_en Data Display
      */
 
-    var index$b = componentWrapper(Popover$1, {
+    var index$c = componentWrapper(Popover$1, {
       Menu: Menu
     });
 
@@ -23781,7 +23810,7 @@
      * @name_en PopupSwiper
      */
 
-    var index$a = componentWrapper(PopupSwiper, methodsGenerator$1(PopupSwiperWithGlobalContext));
+    var index$b = componentWrapper(PopupSwiper, methodsGenerator$1(PopupSwiperWithGlobalContext));
 
     /**
      * 进度条组件，可根据外界传递进来的百分比进行进度展示
@@ -24632,7 +24661,7 @@
      * @displayName Radio
      */
 
-    var index$9 = componentWrapper(Radio, 'Radio', {
+    var index$a = componentWrapper(Radio, 'Radio', {
       Group: Group
     });
 
@@ -24814,7 +24843,7 @@
      * @displayName Rate
      */
 
-    var index$8 = componentWrapper(Rate, 'Rate');
+    var index$9 = componentWrapper(Rate, 'Rate');
 
     function createHighlightNode(config, index) {
       var keyword = config.keyword,
@@ -25189,6 +25218,361 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, renderSearchBar);
     });
 
+    var SkeletonContext = /*#__PURE__*/React__default["default"].createContext({
+      showAnimation: true,
+      animation: 'gradient'
+    });
+
+    var calcOffset = function calcOffset(dom, useRtl) {
+      if (!dom) {
+        return 0;
+      }
+
+      if (useRtl) {
+        return dom.offsetLeft - dom.offsetTop;
+      }
+
+      return dom.offsetLeft + dom.offsetTop;
+    };
+
+    function useOffset(dom, useRtl) {
+      var _a = React.useState(),
+          offset = _a[0],
+          setOffset = _a[1];
+
+      var calcLayout = function calcLayout() {
+        var _a;
+
+        var isList = Array.isArray(dom);
+
+        if (!(isList ? dom.length > 0 : (_a = dom) === null || _a === void 0 ? void 0 : _a.current)) {
+          return;
+        }
+
+        setOffset(isList ? dom.map(function (item) {
+          return calcOffset(item, useRtl);
+        }) : calcOffset(dom.current, useRtl));
+      };
+
+      React.useEffect(function () {
+        nextTick(function () {
+          calcLayout();
+        });
+      }, [dom, useRtl]);
+      useListenResize(calcLayout);
+      return offset;
+    }
+
+    var SkeletonNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style,
+          children = props.children;
+
+      var _b = React.useContext(GlobalContext),
+          useRtl = _b.useRtl,
+          prefixCls = _b.prefixCls;
+
+      var _c = React.useContext(SkeletonContext),
+          backgroundColor = _c.backgroundColor,
+          showAnimation = _c.showAnimation,
+          animation = _c.animation;
+
+      var domRef = React.useRef(null);
+      var isGradientAnimation = showAnimation && animation === 'gradient';
+      var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-node", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+        style: __assign$2({
+          backgroundColor: backgroundColor
+        }, style),
+        ref: domRef
+      }, children, isGradientAnimation && offset !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: prefixCls + "-skeleton-animation-item",
+        style: {
+          left: 0 - offset
+        }
+      }));
+    });
+    var SkeletonTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style,
+          _b = props.width,
+          width = _b === void 0 ? '40%' : _b;
+
+      var _c = React.useContext(GlobalContext),
+          useRtl = _c.useRtl,
+          prefixCls = _c.prefixCls;
+
+      var _d = React.useContext(SkeletonContext),
+          backgroundColor = _d.backgroundColor,
+          showAnimation = _d.showAnimation,
+          animation = _d.animation;
+
+      var domRef = React.useRef(null);
+      var isGradientAnimation = showAnimation && animation === 'gradient';
+      var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-title", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+        style: __assign$2({
+          width: width,
+          backgroundColor: backgroundColor
+        }, style),
+        ref: domRef
+      }, isGradientAnimation && offset !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: prefixCls + "-skeleton-animation-item",
+        style: {
+          left: 0 - offset
+        }
+      }));
+    });
+    var SkeletonParagraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style,
+          _b = props.rows,
+          rows = _b === void 0 ? 3 : _b,
+          _c = props.width,
+          width = _c === void 0 ? '60%' : _c;
+
+      var _d = React.useContext(GlobalContext),
+          useRtl = _d.useRtl,
+          prefixCls = _d.prefixCls;
+
+      var _e = React.useContext(SkeletonContext),
+          backgroundColor = _e.backgroundColor,
+          showAnimation = _e.showAnimation,
+          animation = _e.animation;
+
+      var domRef = React.useRef(null);
+      var lineDomRefs = React.useRef([]);
+      var isGradientAnimation = showAnimation && animation === 'gradient';
+      var offsets = useOffset(isGradientAnimation ? lineDomRefs.current : undefined, useRtl);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+
+      var getWidth = function getWidth(idx) {
+        if (isArray(width)) {
+          return width[idx];
+        }
+
+        if (rows - 1 === idx) {
+          return width;
+        }
+
+        return undefined;
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton-paragraph", className),
+        style: style,
+        ref: domRef
+      }, Array.from(new Array(rows)).map(function (_, idx) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: idx,
+          className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-paragraph-line", showAnimation && prefixCls + "-skeleton-animation-" + animation),
+          style: {
+            width: getWidth(idx),
+            backgroundColor: backgroundColor
+          },
+          ref: function ref(el) {
+            return el && (lineDomRefs.current[idx] = el);
+          }
+        }, isGradientAnimation && offsets !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: prefixCls + "-skeleton-animation-item",
+          style: {
+            left: 0 - (offsets[idx] || 0)
+          }
+        }));
+      }));
+    });
+    var SkeletonAvatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style;
+
+      var _b = React.useContext(GlobalContext),
+          useRtl = _b.useRtl,
+          prefixCls = _b.prefixCls;
+
+      var _c = React.useContext(SkeletonContext),
+          backgroundColor = _c.backgroundColor,
+          showAnimation = _c.showAnimation,
+          animation = _c.animation;
+
+      var domRef = React.useRef(null);
+      var isGradientAnimation = showAnimation && animation === 'gradient';
+      var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-avatar", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+        style: __assign$2({
+          backgroundColor: backgroundColor
+        }, style),
+        ref: domRef
+      }, isGradientAnimation && offset !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: prefixCls + "-skeleton-animation-item",
+        style: {
+          left: 0 - offset
+        }
+      }));
+    });
+    var SkeletonGrid = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style,
+          _b = props.columns,
+          columns = _b === void 0 ? 4 : _b;
+
+      var _c = React.useContext(GlobalContext),
+          useRtl = _c.useRtl,
+          prefixCls = _c.prefixCls;
+
+      var _d = React.useContext(SkeletonContext),
+          backgroundColor = _d.backgroundColor,
+          showAnimation = _d.showAnimation,
+          animation = _d.animation;
+
+      var domRef = React.useRef(null);
+      var iconDomRefs = React.useRef([]);
+      var textDomRefs = React.useRef([]);
+      var isGradientAnimation = showAnimation && animation === 'gradient';
+      var iconOffsets = useOffset(isGradientAnimation ? iconDomRefs.current : undefined, useRtl);
+      var textOffsets = useOffset(isGradientAnimation ? textDomRefs.current : undefined, useRtl);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton-grid", className),
+        style: style,
+        ref: domRef
+      }, Array.from(new Array(columns)).map(function (_, idx) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: idx,
+          className: cls(prefixCls + "-skeleton-grid-item")
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-grid-icon", showAnimation && prefixCls + "-skeleton-animation-" + animation),
+          style: {
+            backgroundColor: backgroundColor
+          },
+          ref: function ref(el) {
+            return el && (iconDomRefs.current[idx] = el);
+          }
+        }, isGradientAnimation && iconOffsets !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: prefixCls + "-skeleton-animation-item",
+          style: {
+            left: 0 - ((iconOffsets === null || iconOffsets === void 0 ? void 0 : iconOffsets[idx]) || 0)
+          }
+        })), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-grid-text", showAnimation && prefixCls + "-skeleton-animation-" + animation),
+          style: {
+            backgroundColor: backgroundColor
+          },
+          ref: function ref(el) {
+            return el && (textDomRefs.current[idx] = el);
+          }
+        }, isGradientAnimation && textOffsets !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: prefixCls + "-skeleton-animation-item",
+          style: {
+            left: 0 - ((textOffsets === null || textOffsets === void 0 ? void 0 : textOffsets[idx]) || 0)
+          }
+        })));
+      }));
+    });
+
+    function getComponentProps(prop) {
+      if (prop && typeof prop === 'object') {
+        return prop;
+      }
+
+      return {};
+    }
+
+    var Skeleton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a;
+
+      var _b = props.className,
+          className = _b === void 0 ? '' : _b,
+          style = props.style,
+          children = props.children,
+          _c = props.title,
+          title = _c === void 0 ? true : _c,
+          _d = props.paragraph,
+          paragraph = _d === void 0 ? true : _d,
+          _e = props.avatar,
+          avatar = _e === void 0 ? false : _e,
+          grid = props.grid,
+          _f = props.showAnimation,
+          showAnimation = _f === void 0 ? true : _f,
+          _g = props.animation,
+          animation = _g === void 0 ? 'gradient' : _g,
+          animationGradientColor = props.animationGradientColor,
+          backgroundColor = props.backgroundColor;
+      var domRef = React.useRef(null);
+      var prefixCls = React.useContext(GlobalContext).prefixCls;
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      var isGrid = !!grid;
+      var hasTitle = !!title;
+      var hasParagraph = !!paragraph;
+      var hasAvatar = !!avatar;
+      var content = isGrid ? /*#__PURE__*/React__default["default"].createElement(SkeletonGrid, __assign$2({}, getComponentProps(grid))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasAvatar && /*#__PURE__*/React__default["default"].createElement(SkeletonAvatar, __assign$2({}, getComponentProps(avatar))), (hasTitle || hasParagraph) && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: prefixCls + "-skeleton-content"
+      }, hasTitle && /*#__PURE__*/React__default["default"].createElement(SkeletonTitle, __assign$2({}, getComponentProps(title))), hasParagraph && /*#__PURE__*/React__default["default"].createElement(SkeletonParagraph, __assign$2({}, getComponentProps(paragraph)))));
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton", (_a = {}, _a[prefixCls + "-skeleton-with-avatar"] = hasAvatar, _a), className),
+        style: __assign$2({
+          color: animationGradientColor
+        }, style),
+        ref: domRef
+      }, /*#__PURE__*/React__default["default"].createElement(SkeletonContext.Provider, {
+        value: {
+          showAnimation: showAnimation,
+          animation: animation,
+          backgroundColor: backgroundColor
+        }
+      }, content, children));
+    });
+    /**
+     * 在内容加载过程中展示一组占位图形。
+     * @en Display a set of placeholder graphics during content loading
+     * @type 信息展示
+     * @type_en Data Display
+     * @name 骨架屏
+     * @name_en Skeleton
+     */
+
+    var index$8 = componentWrapper(Skeleton, {
+      Node: SkeletonNode,
+      Title: SkeletonTitle,
+      Paragraph: SkeletonParagraph,
+      Avatar: SkeletonAvatar,
+      Grid: SkeletonGrid
+    });
+
     var LISTEN_FLAG = 'data-show-listened';
     /**
      * 父 dom 节点集合
@@ -28474,50 +28858,51 @@
 
     var index = componentWrapper(Toast, methodsGenerator(ToastWithGlobalContext));
 
-    exports.ActionSheet = index$n;
-    exports.Avatar = index$m;
+    exports.ActionSheet = index$o;
+    exports.Avatar = index$n;
     exports.Badge = Badge;
     exports.Button = Button;
     exports.Carousel = Carousel;
-    exports.Cell = index$o;
+    exports.Cell = index$p;
     exports.Checkbox = Checkbox;
     exports.CircleProgress = CircleProgress;
-    exports.Collapse = index$l;
+    exports.Collapse = index$m;
     exports.ContextProvider = ContextProvider;
     exports.CountDown = CountDown;
-    exports.DatePicker = index$k;
-    exports.Dialog = index$j;
+    exports.DatePicker = index$l;
+    exports.Dialog = index$k;
     exports.Divider = Divider;
     exports.Dropdown = Dropdown$1;
     exports.DropdownMenu = DropdownMenu;
     exports.Ellipsis = Ellipsis;
-    exports.Form = index$h;
+    exports.Form = index$i;
     exports.Grid = Grid;
     exports.Image = BaseImage;
-    exports.ImagePicker = index$g;
-    exports.ImagePreview = index$f;
-    exports.IndexBar = index$e;
-    exports.Input = index$d;
+    exports.ImagePicker = index$h;
+    exports.ImagePreview = index$g;
+    exports.IndexBar = index$f;
+    exports.Input = index$e;
     exports.Keyboard = Keyboard;
     exports.LoadMore = LoadMore;
     exports.Loading = Loading;
     exports.Masking = Masking$1;
     exports.NavBar = NavBar;
     exports.NoticeBar = NoticeBar;
-    exports.Notify = index$c;
+    exports.Notify = index$d;
     exports.Pagination = Pagination;
     exports.Picker = Picker$1;
     exports.PickerView = PickerView$1;
-    exports.Popover = index$b;
+    exports.Popover = index$c;
     exports.Popup = Popup$1;
-    exports.PopupSwiper = index$a;
+    exports.PopupSwiper = index$b;
     exports.Portal = Portal;
     exports.Progress = Progress;
     exports.PullRefresh = PullRefresh;
-    exports.Radio = index$9;
-    exports.Rate = index$8;
+    exports.Radio = index$a;
+    exports.Rate = index$9;
     exports.SearchBar = SearchBar;
     exports.ShowMonitor = ShowMonitor;
+    exports.Skeleton = index$8;
     exports.Slider = index$7;
     exports.Stepper = index$6;
     exports.Steps = index$5;