@arco-design/mobile-react 2.28.2 → 2.29.1

package/dist/index.js

@@ -941,7 +941,7 @@
       try {
         var u = navigator.userAgent;
         var android = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
-        var ios = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) || u.indexOf('Mac OS X') > -1;
+        var ios = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
         var pc = !android && !ios;
         var system = android ? 'android' : 'ios';
         return pc ? 'pc' : system;
@@ -6146,7 +6146,7 @@
      * @name_en Cell
      */
 
-    var index$o = componentWrapper(Cell, {
+    var index$p = componentWrapper(Cell, {
       Group: Group$4
     });
 
@@ -7441,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`为圆点。所有类型均可定制颜色，环形和弧线类型可定制线圈半径及粗细，旋转和圆点类型可定制内部元素透明度。
@@ -8226,7 +8226,7 @@
      * @name_en Avatar
      */
 
-    var index$m = componentWrapper(Avatar, {
+    var index$n = componentWrapper(Avatar, {
       Group: Group$3
     });
 
@@ -10479,7 +10479,7 @@
      * @name_en Collapse
      */
 
-    var index$l = componentWrapper(Collapse, {
+    var index$m = componentWrapper(Collapse, {
       Group: Group$1
     });
 
@@ -12164,7 +12164,7 @@
      * @displayName DatePicker
      */
 
-    var index$k = componentWrapper(DatePicker, 'DatePicker');
+    var index$l = componentWrapper(DatePicker, 'DatePicker');
 
     function normalizeAlert(config) {
       var _a = config || {},
@@ -12362,7 +12362,7 @@
      * @name_en Dialog
      */
 
-    var index$j = componentWrapper(Dialog, methodsGenerator$4(DialogWithGlobalContext));
+    var index$k = componentWrapper(Dialog, methodsGenerator$4(DialogWithGlobalContext));
 
     /**
      * 划分内容的装饰线
@@ -14174,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;
@@ -14405,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);
           }
         }
@@ -15335,7 +15335,7 @@
      * @name_en Form
      */
 
-    var index$h = componentWrapper(Form, {
+    var index$i = componentWrapper(Form, {
       Item: Item$1
     });
 
@@ -17313,10 +17313,10 @@
      * @displayName ImagePicker
      */
 
-    var index$g = componentWrapper(ImagePicker, 'ImagePicker');
+    var index$h = componentWrapper(ImagePicker, 'ImagePicker');
 
     /*!
-    * @arco-design/transformable v1.0.2
+    * @arco-design/transformable v1.0.1
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {
@@ -20511,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,
@@ -20980,7 +20980,7 @@
      * @name_en SearchBar
      */
 
-    var index$e = componentWrapper(IndexBar, {
+    var index$f = componentWrapper(IndexBar, {
       Group: IndexBarGroup
     });
 
@@ -21029,23 +21029,6 @@
           toggleClear = _f[1];
 
       var compositingRef = React.useRef(false);
-      /**
-       * clear相关问题背景
-       * 如果点击clear按钮之前已经是focusing状态了，那么在点完clear按钮之后会手动聚焦一下
-       * 该行为将导致onClear事件触发时，也会触发一次onBlur和onFocus事件，可能影响一些组件外的代码逻辑
-       *
-       * e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
-       * 实现代码大致是：onBlur设置其visible为false，onFocus设置其visible为true
-       * 那么这个按钮就会因为clear的点击造成一瞬的闪烁
-       *
-       * 解决思路
-       * 先来看一下，在输入框已激活的状态时，点击清除按钮后，组件的一些事件的触发顺序
-       * handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
-       * 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
-       * 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
-       * 如果这个标志为true，则跳过调用外部的onBlur和onFocus，并在最后再将标志置回false
-       *
-       */
 
       var _g = React.useState(false),
           isFocusing = _g[0],
@@ -21145,28 +21128,24 @@
       }
 
       function handleFocus(e) {
-        nextTick(function () {
-          if (preventEventWhenClearing && shouldPreventEvent.current) {
-            shouldPreventEvent.current = false;
-            return;
-          }
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+          shouldPreventEvent.current = false;
+          return;
+        }
 
-          setIsFocusing(true);
-          clearShowType === 'focus' && toggleClear(true);
-          onFocus && onFocus(e);
-        });
+        setIsFocusing(true);
+        clearShowType === 'focus' && toggleClear(true);
+        onFocus && onFocus(e);
       }
 
       function handleBlur(e) {
-        nextTick(function () {
-          if (preventEventWhenClearing && shouldPreventEvent.current) {
-            return;
-          }
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+          return;
+        }
 
-          setIsFocusing(false);
-          clearShowType === 'focus' && toggleClear(false);
-          onBlur && onBlur(e);
-        });
+        setIsFocusing(false);
+        clearShowType === 'focus' && toggleClear(false);
+        onBlur && onBlur(e);
       }
 
       function handleClick(e) {
@@ -21197,10 +21176,17 @@
 
           if (isFocusing) {
             if (preventEventWhenClearing) {
-              shouldPreventEvent.current = true;
+              shouldPreventEvent.current = true; // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+              // @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
+
+              setTimeout(function () {
+                shouldPreventEvent.current = false;
+              }, 200);
             }
 
-            inputRef.current && inputRef.current.focus();
+            nextTick(function () {
+              inputRef.current && inputRef.current.focus();
+            });
           }
         });
       }
@@ -21210,6 +21196,12 @@
       }
 
       function renderWrapper(prefixCls, type, children) {
+        var _a; // handleClear必须早于handleBlur执行，pc端仅mousedown事件触发早于blur，移动端touch相关事件均早于blur
+        // @en handleClear must be executed earlier than handleBlur
+        // @en only the mousedown event on the PC side is triggered earlier than blur, and the touch-related events on the mobile side are all earlier than blur
+
+
+        var clearEvent = (_a = {}, _a[system === 'pc' ? 'onMouseDown' : 'onTouchEnd'] = handleClear, _a);
         return /*#__PURE__*/React__default["default"].createElement("div", {
           role: "search",
           className: prefixCls + "-container all-border-box " + (className || ''),
@@ -21229,10 +21221,9 @@
           className: cls(prefixCls + "-label", {
             required: required
           })
-        }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React__default["default"].createElement("div", {
-          className: prefixCls + "-clear",
-          onClick: handleClear
-        }, clearIcon) : null, suffix ? /*#__PURE__*/React__default["default"].createElement("div", {
+        }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React__default["default"].createElement("div", __assign$2({
+          className: prefixCls + "-clear"
+        }, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-suffix"
         }, suffix) : null), renderPendNode(append));
       }
@@ -21329,7 +21320,7 @@
      * @displayName Input
      */
 
-    var index$d = componentWrapper(Input, 'Input');
+    var index$e = componentWrapper(Input, 'Input');
 
     // @en let keyboard random
 
@@ -22132,7 +22123,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", {
@@ -23544,7 +23535,7 @@
      * @type_en Data Display
      */
 
-    var index$b = componentWrapper(Popover$1, {
+    var index$c = componentWrapper(Popover$1, {
       Menu: Menu
     });
 
@@ -23810,7 +23801,7 @@
      * @name_en PopupSwiper
      */
 
-    var index$a = componentWrapper(PopupSwiper, methodsGenerator$1(PopupSwiperWithGlobalContext));
+    var index$b = componentWrapper(PopupSwiper, methodsGenerator$1(PopupSwiperWithGlobalContext));
 
     /**
      * 进度条组件，可根据外界传递进来的百分比进行进度展示
@@ -24661,7 +24652,7 @@
      * @displayName Radio
      */
 
-    var index$9 = componentWrapper(Radio, 'Radio', {
+    var index$a = componentWrapper(Radio, 'Radio', {
       Group: Group
     });
 
@@ -24843,7 +24834,7 @@
      * @displayName Rate
      */
 
-    var index$8 = componentWrapper(Rate, 'Rate');
+    var index$9 = componentWrapper(Rate, 'Rate');
 
     function createHighlightNode(config, index) {
       var keyword = config.keyword,
@@ -25218,6 +25209,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 节点集合
@@ -28503,50 +28849,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;