antd-mobile 5.28.0 → 5.28.2

package/cjs/components/stepper/stepper.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Stepper = Stepper;
+exports.InnerStepper = InnerStepper;
+exports.Stepper = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _antdMobileIcons = require("antd-mobile-icons");
@@ -23,7 +24,7 @@ const defaultProps = {
   disabled: false,
   allowEmpty: false
 };
-function Stepper(p) {
+function InnerStepper(p, ref) {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const {
     defaultValue = 0,
@@ -42,6 +43,21 @@ function Stepper(p) {
   const {
     locale
   } = (0, _configProvider.useConfig)();
+  // ========================== Ref ==========================
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus: () => {
+      var _a;
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    },
+    get nativeElement() {
+      var _a, _b;
+      return (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.nativeElement) !== null && _b !== void 0 ? _b : null;
+    }
+  }));
   // ========================== Parse / Format ==========================
   const fixedValue = value => {
     const fixedValue = digits !== undefined ? (0, _miniDecimal.toFixed)(value.toString(), '.', digits) : value;
@@ -209,4 +225,6 @@ function Stepper(p) {
     color: 'primary',
     "aria-label": locale.Stepper.increase
   }, _react.default.createElement(_antdMobileIcons.AddOutline, null))));
-}
+}
+const Stepper = (0, _react.forwardRef)(InnerStepper);
+exports.Stepper = Stepper;

package/cjs/components/steps/steps.css

@@ -14,7 +14,6 @@
 .adm-step .adm-step-indicator .adm-step-icon-container {
   position: absolute;
   z-index: 1;
-  background: var(--adm-color-background);
   color: var(--icon-color);
 }
 .adm-step .adm-step-indicator .adm-step-icon-container > .antd-mobile-icon {

package/cjs/components/swiper/swiper.js

@@ -212,11 +212,14 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
     } = props;
     (0, _react.useEffect)(() => {
       if (!autoplay || dragging) return;
-      const interval = window.setInterval(() => {
+      let interval;
+      function tick() {
+        interval = window.setTimeout(tick, autoplayInterval);
         swipeNext();
-      }, autoplayInterval);
+      }
+      interval = window.setTimeout(tick, autoplayInterval);
       return () => {
-        window.clearInterval(interval);
+        if (interval) window.clearTimeout(interval);
       };
     }, [autoplay, autoplayInterval, dragging, count]);
     function renderTrackInner() {

package/cjs/components/text-area/text-area.css

@@ -60,6 +60,13 @@
 .adm-text-area-element[readonly] {
   pointer-events: none;
 }
+.adm-text-area-element-hidden {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1000;
+}
 .adm-text-area-count {
   text-align: var(--count-text-align);
   color: var(--adm-color-weak);

package/cjs/components/text-area/text-area.js

@@ -33,6 +33,10 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
     (0, _devLog.devError)('TextArea', '`value` prop on `TextArea` should not be `null`. Consider using an empty string to clear the component.');
   }
   const nativeTextAreaRef = (0, _react.useRef)(null);
+  // https://github.com/ant-design/ant-design-mobile/issues/5961
+  const heightRef = (0, _react.useRef)('auto');
+  // https://github.com/ant-design/ant-design-mobile/issues/6051
+  const hiddenTextAreaRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => ({
     clear: () => {
       setValue('');
@@ -52,9 +56,11 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     if (!autoSize) return;
     const textArea = nativeTextAreaRef.current;
+    const hiddenTextArea = hiddenTextAreaRef.current;
     if (!textArea) return;
-    textArea.style.height = 'auto';
-    let height = textArea.scrollHeight;
+    textArea.style.height = heightRef.current;
+    if (!hiddenTextArea) return;
+    let height = hiddenTextArea.scrollHeight;
     if (typeof autoSize === 'object') {
       const computedStyle = window.getComputedStyle(textArea);
       const lineHeight = parseFloat(computedStyle.lineHeight);
@@ -65,6 +71,7 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
         height = Math.min(height, autoSize.maxRows * lineHeight);
       }
     }
+    heightRef.current = `${height}px`;
     textArea.style.height = `${height}px`;
   }, [value, autoSize]);
   const compositingRef = (0, _react.useRef)(false);
@@ -115,7 +122,13 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
     onFocus: props.onFocus,
     onBlur: props.onBlur,
     onClick: props.onClick
-  }), count));
+  }), count, autoSize && _react.default.createElement("textarea", {
+    ref: hiddenTextAreaRef,
+    className: `${classPrefix}-element ${classPrefix}-element-hidden`,
+    value: value,
+    "aria-hidden": true,
+    readOnly: true
+  })));
 });
 exports.TextArea = TextArea;
 TextArea.defaultProps = defaultProps;

package/cjs/global/css-vars-patch.css

@@ -209,6 +209,7 @@
   }
   .adm-popover {
     z-index: 1030;
+    color: #333333;
   }
   .adm-popover.adm-popover-dark {
     color: #ffffff;

package/cjs/index.d.ts

@@ -133,7 +133,7 @@ export type { SpaceProps } from './components/space';
 export { default as SpinLoading } from './components/spin-loading';
 export type { SpinLoadingProps } from './components/spin-loading';
 export { default as Stepper } from './components/stepper';
-export type { StepperProps } from './components/stepper';
+export type { StepperProps, StepperRef } from './components/stepper';
 export { default as Steps } from './components/steps';
 export type { StepsProps, StepProps } from './components/steps';
 export { default as SwipeAction } from './components/swipe-action';

package/cjs/locales/base.d.ts

@@ -4,6 +4,7 @@ export declare const base: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/base.js

@@ -10,7 +10,8 @@ const base = {
   common: {
     confirm: 'Confirm',
     cancel: 'Cancel',
-    loading: 'Loading'
+    loading: 'Loading',
+    close: 'Close'
   },
   Calendar: {
     markItems: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

package/cjs/locales/en-US.d.ts

@@ -4,6 +4,7 @@ declare const enUS: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/es-ES.d.ts

@@ -4,6 +4,7 @@ declare const esES: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/fa-IR.d.ts

@@ -4,6 +4,7 @@ declare const faIR: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/fr-FR.d.ts

@@ -4,6 +4,7 @@ declare const frFR: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/id-ID.d.ts

@@ -4,6 +4,7 @@ declare const idID: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/ja-JP.d.ts

@@ -4,6 +4,7 @@ declare const jaJP: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/kk-KZ.d.ts

@@ -4,6 +4,7 @@ declare const kkKZ: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/ko-KR.d.ts

@@ -4,6 +4,7 @@ declare const koKR: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/ko-KR.js

@@ -12,7 +12,8 @@ const koKR = (0, _mergeLocale.mergeLocale)(_base.base, {
   common: {
     confirm: '확인',
     cancel: '취소',
-    loading: '로딩중'
+    loading: '로딩중',
+    close: '닫기'
   },
   Calendar: {
     markItems: ['월', '화', '수', '목', '금', '토', '일'],
@@ -24,6 +25,9 @@ const koKR = (0, _mergeLocale.mergeLocale)(_base.base, {
   Dialog: {
     ok: '확인'
   },
+  DatePicker: {
+    tillNow: '지금까지'
+  },
   ErrorBlock: {
     default: {
       title: '문제가 발생했습니다',
@@ -94,7 +98,16 @@ const koKR = (0, _mergeLocale.mergeLocale)(_base.base, {
     }
   },
   ImageUploader: {
-    uploading: '업로드 중...'
+    uploading: '업로드 중...',
+    upload: '업로드'
+  },
+  InfiniteScroll: {
+    noMore: '불러올 데이터 없음',
+    failedToLoad: '불러오기 실패',
+    retry: '재시도'
+  },
+  Input: {
+    clear: '지우기'
   },
   Mask: {
     name: '마스크'
@@ -102,10 +115,26 @@ const koKR = (0, _mergeLocale.mergeLocale)(_base.base, {
   Modal: {
     ok: '확인'
   },
+  PasscodeInput: {
+    name: '비밀번호 입력'
+  },
   PullToRefresh: {
     pulling: '스크롤을 당겨서 새로고침하십시오',
     canRelease: '새로고침 하려면 놓으십시오',
     complete: '새로고침 완료'
+  },
+  SearchBar: {
+    name: '검색바'
+  },
+  Slider: {
+    name: '슬라이더'
+  },
+  Stepper: {
+    decrease: '감소',
+    increase: '증가'
+  },
+  Switch: {
+    name: '스위치'
   }
 });
 var _default = koKR;

package/cjs/locales/zh-CN.d.ts

@@ -4,6 +4,7 @@ declare const zhCN: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/zh-CN.js

@@ -12,7 +12,8 @@ const zhCN = (0, _mergeLocale.mergeLocale)(_base.base, {
   common: {
     confirm: '确定',
     cancel: '取消',
-    loading: '加载中'
+    loading: '加载中',
+    close: '关闭'
   },
   Calendar: {
     markItems: ['一', '二', '三', '四', '五', '六', '日'],

package/cjs/locales/zh-HK.d.ts

@@ -4,6 +4,7 @@ declare const zhHK: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/zh-HK.js

@@ -12,7 +12,8 @@ const zhHK = (0, _mergeLocale.mergeLocale)(_base.base, {
   common: {
     confirm: '確定',
     cancel: '取消',
-    loading: '加載中'
+    loading: '加載中',
+    close: '關閉'
   },
   Calendar: {
     markItems: ['一', '二', '三', '四', '五', '六', '日'],

package/cjs/locales/zh-TW.d.ts

@@ -4,6 +4,7 @@ declare const zhTW: {
         confirm: string;
         cancel: string;
         loading: string;
+        close: string;
     };
     Calendar: {
         markItems: string[];

package/cjs/locales/zh-TW.js

@@ -12,7 +12,8 @@ const zhTW = (0, _mergeLocale.mergeLocale)(_base.base, {
   common: {
     confirm: '確定',
     cancel: '取消',
-    loading: '加載中'
+    loading: '加載中',
+    close: '關閉'
   },
   Calendar: {
     markItems: ['一', '二', '三', '四', '五', '六', '日'],

package/cjs/utils/reduce-and-restore-motion.js

@@ -33,11 +33,12 @@ function restoreMotion() {
 function isMotionReduced() {
   return reduced;
 }
+function subscribe(onStoreChange) {
+  subscribers.add(onStoreChange);
+  return () => {
+    subscribers.delete(onStoreChange);
+  };
+}
 function useMotionReduced() {
-  return (0, _shim.useSyncExternalStore)(onStoreChange => {
-    subscribers.add(onStoreChange);
-    return () => {
-      subscribers.delete(onStoreChange);
-    };
-  }, isMotionReduced);
+  return (0, _shim.useSyncExternalStore)(subscribe, isMotionReduced);
 }

package/cjs/utils/render-imperatively.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderImperatively = renderImperatively;
+var _tslib = require("tslib");
 var _react = _interopRequireWildcard(require("react"));
 var _renderToBody = require("./render-to-body");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -53,10 +54,15 @@ function renderImperatively(element) {
     ref: wrapperRef
   }));
   return {
-    close: () => {
+    close: () => (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
       var _a;
-      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
-    },
+      if (!wrapperRef.current) {
+        // it means the wrapper is not mounted yet, call `unmount` directly
+        unmount();
+      } else {
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
+      }
+    }),
     replace: element => {
       var _a;
       (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.replace(element);

package/es/components/ellipsis/ellipsis.d.ts

@@ -9,5 +9,6 @@ export declare type EllipsisProps = {
     collapseText?: string;
     stopPropagationForActionButtons?: PropagationEvent[];
     onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    defaultExpanded?: boolean;
 } & NativeProps;
 export declare const Ellipsis: FC<EllipsisProps>;

package/es/components/ellipsis/ellipsis.js

@@ -13,13 +13,14 @@ const defaultProps = {
   content: '',
   collapseText: '',
   stopPropagationForActionButtons: [],
-  onContentClick: () => {}
+  onContentClick: () => {},
+  defaultExpanded: false
 };
 export const Ellipsis = p => {
   const props = mergeProps(defaultProps, p);
   const rootRef = useRef(null);
   const [ellipsised, setEllipsised] = useState({});
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(props.defaultExpanded);
   const [exceeded, setExceeded] = useState(false);
   const chars = useMemo(() => runes(props.content), [props.content]);
   function getSubString(start, end) {

package/es/components/nav-bar/nav-bar.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type NavBarProps = {
     back?: ReactNode;
@@ -6,6 +6,6 @@ export declare type NavBarProps = {
     left?: ReactNode;
     right?: ReactNode;
     onBack?: () => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps<'--height' | '--border-bottom'>;
 export declare const NavBar: FC<NavBarProps>;

package/es/components/popover/popover.css

@@ -3,7 +3,7 @@
   --background: #ffffff;
   --arrow-size: 8px;
   --content-padding: 8px 12px;
-  color: #333333;
+  color: var(--adm-color-text);
   position: absolute;
   top: 0;
   left: 0;

package/es/components/popover/popover.patch.css

@@ -1,5 +1,6 @@
 .adm-popover {
   z-index: 1030;
+  color: #333333;
 }
 .adm-popover.adm-popover-dark {
   color: #ffffff;

package/es/components/popup/popup.js

@@ -12,12 +12,16 @@ import { ShouldRender } from '../../utils/should-render';
 import { CloseOutline } from 'antd-mobile-icons';
 import { defaultPopupBaseProps } from './popup-base-props';
 import { useInnerVisible } from '../../utils/use-inner-visible';
+import { useConfig } from '../config-provider';
 const classPrefix = `adm-popup`;
 const defaultProps = Object.assign(Object.assign({}, defaultPopupBaseProps), {
   position: 'bottom'
 });
 export const Popup = p => {
   const props = mergeProps(defaultProps, p);
+  const {
+    locale
+  } = useConfig();
   const bodyCls = classNames(`${classPrefix}-body`, props.bodyClassName, `${classPrefix}-body-position-${props.position}`);
   const [active, setActive] = useState(props.visible);
   useIsomorphicLayoutEffect(() => {
@@ -96,7 +100,9 @@ export const Popup = p => {
     onClick: () => {
       var _a;
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-    }
+    },
+    role: 'button',
+    "aria-label": locale.common.close
   }, React.createElement(CloseOutline, null)), props.children))));
   return React.createElement(ShouldRender, {
     active: active,

package/es/components/pull-to-refresh/pull-to-refresh.js

@@ -50,6 +50,19 @@ export const PullToRefresh = p => {
     var _a;
     (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('touchmove', () => {});
   }, []);
+  const reset = () => {
+    return new Promise(resolve => {
+      api.start({
+        to: {
+          height: 0
+        },
+        onResolve() {
+          setStatus('pulling');
+          resolve();
+        }
+      });
+    });
+  };
   function doRefresh() {
     return __awaiter(this, void 0, void 0, function* () {
       api.start({
@@ -60,27 +73,13 @@ export const PullToRefresh = p => {
         yield props.onRefresh();
         setStatus('complete');
       } catch (e) {
-        api.start({
-          to: next => __awaiter(this, void 0, void 0, function* () {
-            yield next({
-              height: 0
-            });
-            setStatus('pulling');
-          })
-        });
+        reset();
         throw e;
       }
       if (props.completeDelay > 0) {
         yield sleep(props.completeDelay);
       }
-      api.start({
-        to: next => __awaiter(this, void 0, void 0, function* () {
-          yield next({
-            height: 0
-          });
-          setStatus('pulling');
-        })
-      });
+      reset();
     });
   }
   useDrag(state => {

package/es/components/stepper/index.d.ts

@@ -1,4 +1,4 @@
 import './stepper.less';
 import { Stepper } from './stepper';
-export type { StepperProps } from './stepper';
+export type { StepperProps, StepperRef } from './stepper';
 export default Stepper;

package/es/components/stepper/stepper.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
-import { InputProps } from '../input';
+import { InputProps, InputRef } from '../input';
 declare type ValueProps<ValueType> = {
     allowEmpty: true;
     value?: ValueType | null;
@@ -30,5 +30,7 @@ export declare type StringStepperProps = BaseStepperProps<string> & {
     stringMode: true;
 };
 export declare type StepperProps = NumberStepperProps | StringStepperProps;
-export declare function Stepper<ValueType extends number | string>(p: StepperProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare type StepperRef = Pick<InputRef, 'blur' | 'focus' | 'nativeElement'>;
+export declare function InnerStepper<ValueType extends number | string>(p: StepperProps, ref: React.ForwardedRef<StepperRef>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<StepperRef>>;
 export {};

package/es/components/stepper/stepper.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
 import { MinusOutline, AddOutline } from 'antd-mobile-icons';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import getMiniDecimal, { toFixed } from '@rc-component/mini-decimal';
@@ -14,7 +14,7 @@ const defaultProps = {
   disabled: false,
   allowEmpty: false
 };
-export function Stepper(p) {
+export function InnerStepper(p, ref) {
   const props = mergeProps(defaultProps, p);
   const {
     defaultValue = 0,
@@ -33,6 +33,21 @@ export function Stepper(p) {
   const {
     locale
   } = useConfig();
+  // ========================== Ref ==========================
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _a;
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    },
+    get nativeElement() {
+      var _a, _b;
+      return (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.nativeElement) !== null && _b !== void 0 ? _b : null;
+    }
+  }));
   // ========================== Parse / Format ==========================
   const fixedValue = value => {
     const fixedValue = digits !== undefined ? toFixed(value.toString(), '.', digits) : value;
@@ -200,4 +215,5 @@ export function Stepper(p) {
     color: 'primary',
     "aria-label": locale.Stepper.increase
   }, React.createElement(AddOutline, null))));
-}
+}
+export const Stepper = forwardRef(InnerStepper);

package/es/components/steps/steps.css

@@ -14,7 +14,6 @@
 .adm-step .adm-step-indicator .adm-step-icon-container {
   position: absolute;
   z-index: 1;
-  background: var(--adm-color-background);
   color: var(--icon-color);
 }
 .adm-step .adm-step-indicator .adm-step-icon-container > .antd-mobile-icon {

package/es/components/swiper/swiper.js

@@ -203,11 +203,14 @@ export const Swiper = forwardRef(staged((p, ref) => {
     } = props;
     useEffect(() => {
       if (!autoplay || dragging) return;
-      const interval = window.setInterval(() => {
+      let interval;
+      function tick() {
+        interval = window.setTimeout(tick, autoplayInterval);
         swipeNext();
-      }, autoplayInterval);
+      }
+      interval = window.setTimeout(tick, autoplayInterval);
       return () => {
-        window.clearInterval(interval);
+        if (interval) window.clearTimeout(interval);
       };
     }, [autoplay, autoplayInterval, dragging, count]);
     function renderTrackInner() {