antd-mobile 5.28.1 → 5.29.0

package/2x/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/2x/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/2x/es/components/swipe-action/swipe-action.css

@@ -36,7 +36,7 @@
 .adm-swipe-action-action-button.adm-button {
   --border-radius: 0;
   --border-width: 0;
-  --text-color: var(--adm-color-white);
+  --text-color: var(--adm-color-text-light-solid);
   padding-left: 40px;
   padding-right: 40px;
 }

package/2x/es/components/switch/switch.css

@@ -57,7 +57,7 @@
   width: calc(var(--height) - 2 * var(--border-width));
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
-  background: var(--adm-color-white);
+  background: var(--adm-color-text-light-solid);
   position: absolute;
   z-index: 2;
   top: var(--border-width);
@@ -93,7 +93,7 @@
 
 .adm-switch.adm-switch-checked .adm-switch-inner {
   margin: 0 calc(var(--height) - var(--border-width) + 10px) 0 20px;
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
 }
 
 .adm-switch.adm-switch-disabled {

package/2x/es/components/tabs/tabs.js

@@ -182,7 +182,8 @@ export const Tabs = p => {
     className: `${classPrefix}-tab-list`,
     ref: tabListContainerRef,
     scrollLeft: scrollLeft,
-    onScroll: updateMask
+    onScroll: updateMask,
+    role: 'tablist'
   }, React.createElement(animated.div, {
     ref: activeLineRef,
     className: `${classPrefix}-tab-line`,
@@ -209,7 +210,9 @@ export const Tabs = p => {
     className: classNames(`${classPrefix}-tab`, {
       [`${classPrefix}-tab-active`]: pane.key === activeKey,
       [`${classPrefix}-tab-disabled`]: pane.props.disabled
-    })
+    }),
+    role: 'tab',
+    "aria-selected": pane.key === activeKey
   }, pane.props.title)))))), panes.map(pane => {
     if (pane.props.children === undefined) {
       return null;

package/2x/es/components/text-area/text-area.css

@@ -70,6 +70,14 @@
   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/2x/es/components/text-area/text-area.d.ts

@@ -21,7 +21,7 @@ export declare type TextAreaRef = {
     blur: () => void;
     nativeElement: HTMLTextAreaElement | null;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoFocus" | "autoComplete" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;

package/2x/es/components/text-area/text-area.js

@@ -27,6 +27,8 @@ export const TextArea = forwardRef((p, ref) => {
   const nativeTextAreaRef = useRef(null);
   // https://github.com/ant-design/ant-design-mobile/issues/5961
   const heightRef = useRef('auto');
+  // https://github.com/ant-design/ant-design-mobile/issues/6051
+  const hiddenTextAreaRef = useRef(null);
   useImperativeHandle(ref, () => ({
     clear: () => {
       setValue('');
@@ -46,9 +48,11 @@ export const TextArea = forwardRef((p, ref) => {
   useIsomorphicLayoutEffect(() => {
     if (!autoSize) return;
     const textArea = nativeTextAreaRef.current;
+    const hiddenTextArea = hiddenTextAreaRef.current;
     if (!textArea) return;
     textArea.style.height = heightRef.current;
-    let height = textArea.scrollHeight;
+    if (!hiddenTextArea) return;
+    let height = hiddenTextArea.scrollHeight;
     if (typeof autoSize === 'object') {
       const computedStyle = window.getComputedStyle(textArea);
       const lineHeight = parseFloat(computedStyle.lineHeight);
@@ -110,6 +114,12 @@ export const TextArea = forwardRef((p, ref) => {
     onFocus: props.onFocus,
     onBlur: props.onBlur,
     onClick: props.onClick
-  }), count));
+  }), count, autoSize && React.createElement("textarea", {
+    ref: hiddenTextAreaRef,
+    className: `${classPrefix}-element ${classPrefix}-element-hidden`,
+    value: value,
+    "aria-hidden": true,
+    readOnly: true
+  })));
 });
 TextArea.defaultProps = defaultProps;

package/2x/es/components/virtual-input/virtual-input.js

@@ -5,6 +5,7 @@ import { usePropsValue } from '../../utils/use-props-value';
 import classNames from 'classnames';
 import { CloseCircleFill } from 'antd-mobile-icons';
 import { useIsomorphicLayoutEffect } from 'ahooks';
+import { useConfig } from '../config-provider';
 const classPrefix = 'adm-virtual-input';
 const defaultProps = {
   defaultValue: ''
@@ -15,6 +16,9 @@ export const VirtualInput = forwardRef((p, ref) => {
   const rootRef = useRef(null);
   const contentRef = useRef(null);
   const [hasFocus, setHasFocus] = useState(false);
+  const {
+    locale
+  } = useConfig();
   function scrollToEnd() {
     const root = rootRef.current;
     if (!root) return;
@@ -84,7 +88,11 @@ export const VirtualInput = forwardRef((p, ref) => {
     onClick: props.onClick
   }, React.createElement("div", {
     className: `${classPrefix}-content`,
-    ref: contentRef
+    ref: contentRef,
+    role: 'option',
+    tabIndex: props.disabled ? undefined : 0,
+    "aria-disabled": props.disabled,
+    "aria-label": props.placeholder
   }, value, React.createElement("div", {
     className: `${classPrefix}-caret-container`
   }, hasFocus && React.createElement("div", {
@@ -96,7 +104,9 @@ export const VirtualInput = forwardRef((p, ref) => {
       e.stopPropagation();
       setValue('');
       (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
-    }
+    },
+    role: 'button',
+    "aria-label": locale.Input.clear
   }, React.createElement(CloseCircleFill, null)), !value && React.createElement("div", {
     className: `${classPrefix}-placeholder`
   }, props.placeholder), keyboardElement));

package/2x/es/global/css-vars-patch.css

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

package/2x/es/global/global.css

@@ -16,14 +16,17 @@
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
-  --adm-color-white: #ffffff;
   --adm-color-text: #333333;
   --adm-color-text-secondary: #666666;
   --adm-color-weak: #999999;
   --adm-color-light: #cccccc;
   --adm-color-border: #eeeeee;
-  --adm-color-box: #f5f5f5;
   --adm-color-background: #ffffff;
+  --adm-color-white: #ffffff;
+  --adm-color-box: #f5f5f5;
+  --adm-color-text-light-solid: var(--adm-color-white);
+  --adm-color-text-dark-solid: #000000;
+  --adm-color-fill-content: var(--adm-color-box);
   --adm-font-size-main: var(--adm-font-size-5);
   --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
     helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',

package/2x/es/global/theme-default.css

@@ -16,14 +16,17 @@
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
-  --adm-color-white: #ffffff;
   --adm-color-text: #333333;
   --adm-color-text-secondary: #666666;
   --adm-color-weak: #999999;
   --adm-color-light: #cccccc;
   --adm-color-border: #eeeeee;
-  --adm-color-box: #f5f5f5;
   --adm-color-background: #ffffff;
+  --adm-color-white: #ffffff;
+  --adm-color-box: #f5f5f5;
+  --adm-color-text-light-solid: var(--adm-color-white);
+  --adm-color-text-dark-solid: #000000;
+  --adm-color-fill-content: var(--adm-color-box);
   --adm-font-size-main: var(--adm-font-size-5);
   --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
     helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',

package/2x/es/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/2x/es/locales/base.d.ts

@@ -127,5 +127,8 @@ export declare const base: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export declare type Locale = typeof base;

package/2x/es/locales/base.js

@@ -127,5 +127,8 @@ export const base = {
   },
   Switch: {
     name: 'Switch'
+  },
+  Selector: {
+    name: 'Selector'
   }
 };

package/2x/es/locales/en-US.d.ts

@@ -127,5 +127,8 @@ declare const enUS: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default enUS;

package/2x/es/locales/es-ES.d.ts

@@ -127,5 +127,8 @@ declare const esES: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default esES;

package/2x/es/locales/fa-IR.d.ts

@@ -127,5 +127,8 @@ declare const faIR: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default faIR;

package/2x/es/locales/fr-FR.d.ts

@@ -127,5 +127,8 @@ declare const frFR: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default frFR;

package/2x/es/locales/id-ID.d.ts

@@ -127,5 +127,8 @@ declare const idID: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default idID;

package/2x/es/locales/ja-JP.d.ts

@@ -127,5 +127,8 @@ declare const jaJP: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default jaJP;

package/2x/es/locales/kk-KZ.d.ts

@@ -127,5 +127,8 @@ declare const kkKZ: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default kkKZ;

package/2x/es/locales/ko-KR.d.ts

@@ -127,5 +127,8 @@ declare const koKR: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default koKR;

package/2x/es/locales/ko-KR.js

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

package/2x/es/locales/zh-CN.d.ts

@@ -127,5 +127,8 @@ declare const zhCN: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default zhCN;

package/2x/es/locales/zh-CN.js

@@ -129,6 +129,9 @@ const zhCN = mergeLocale(base, {
   },
   Switch: {
     name: '开关'
+  },
+  Selector: {
+    name: '选择组'
   }
 });
 export default zhCN;

package/2x/es/locales/zh-HK.d.ts

@@ -127,5 +127,8 @@ declare const zhHK: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default zhHK;

package/2x/es/locales/zh-TW.d.ts

@@ -127,5 +127,8 @@ declare const zhTW: {
     Switch: {
         name: string;
     };
+    Selector: {
+        name: string;
+    };
 };
 export default zhTW;

package/2x/es/utils/reduce-and-restore-motion.js

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

package/2x/es/utils/render-imperatively.js

@@ -1,3 +1,4 @@
+import { __awaiter } from "tslib";
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { renderToBody } from './render-to-body';
 export function renderImperatively(element) {
@@ -45,10 +46,15 @@ export function renderImperatively(element) {
     ref: wrapperRef
   }));
   return {
-    close: () => {
+    close: () => __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/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.28.1",
+  "version": "5.29.0",
   "dependencies": {
     "@floating-ui/dom": "^1.0.6",
     "@rc-component/mini-decimal": "^1.0.1",
@@ -14,7 +14,7 @@
     "lodash": "^4.17.21",
     "rc-field-form": "~1.27.3",
     "rc-util": "^5.24.8",
-    "react-is": "^17.0.2",
+    "react-is": "^18.2.0",
     "runes": "^0.4.3",
     "staged-components": "^1.1.3",
     "tslib": "^2.4.1",