antd-mobile 5.28.1 → 5.29.0

package/cjs/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/cjs/locales/base.js

@@ -133,6 +133,9 @@ const base = {
   },
   Switch: {
     name: 'Switch'
+  },
+  Selector: {
+    name: 'Selector'
   }
 };
 exports.base = base;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/cjs/locales/zh-CN.js

@@ -135,6 +135,9 @@ const zhCN = (0, _mergeLocale.mergeLocale)(_base.base, {
   },
   Switch: {
     name: '开关'
+  },
+  Selector: {
+    name: '选择组'
   }
 });
 var _default = zhCN;

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

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

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

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

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/action-sheet/action-sheet.css

@@ -50,6 +50,6 @@
   font-weight: bold;
 }
 .adm-action-sheet-cancel {
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   padding-top: 8px;
 }

package/es/components/action-sheet/action-sheet.js

@@ -55,13 +55,17 @@ export const ActionSheet = p => {
       if (props.closeOnAction) {
         (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
       }
-    }
+    },
+    role: 'option',
+    "aria-disabled": action.disabled
   }, React.createElement("div", {
     className: `${classPrefix}-button-item-name`
   }, action.text), action.description && React.createElement("div", {
     className: `${classPrefix}-button-item-description`
   }, action.description))))), props.cancelText && React.createElement("div", {
-    className: `${classPrefix}-cancel`
+    className: `${classPrefix}-cancel`,
+    role: 'option',
+    "aria-label": props.cancelText
   }, React.createElement("div", {
     className: `${classPrefix}-button-item-wrapper`
   }, React.createElement("a", {

package/es/components/avatar/avatar.d.ts

@@ -5,5 +5,5 @@ export declare type AvatarProps = {
     src: string;
     fallback?: ReactNode;
     fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
-} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError'> & NativeProps<'--size' | '--border-radius'>;
+} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError' | 'onLoad'> & NativeProps<'--size' | '--border-radius'>;
 export declare const Avatar: FC<AvatarProps>;

package/es/components/avatar/avatar.js

@@ -19,6 +19,7 @@ export const Avatar = p => {
     lazy: props.lazy,
     fit: props.fit,
     onClick: props.onClick,
-    onError: props.onError
+    onError: props.onError,
+    onLoad: props.onLoad
   }));
 };

package/es/components/badge/badge.css

@@ -13,7 +13,7 @@
   --color: var(--adm-badge-color, #ff411c);
 }
 .adm-badge-content {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   box-sizing: border-box;
   min-width: 8px;
   padding: 1px 4px;
@@ -36,5 +36,5 @@
   border-radius: 5px;
 }
 .adm-badge-bordered {
-  border: solid 1px var(--adm-color-white);
+  border: solid 1px var(--adm-color-text-light-solid);
 }

package/es/components/button/button.css

@@ -1,5 +1,5 @@
 .adm-button {
-  --color: var(--adm-color-white);
+  --color: var(--adm-color-text-light-solid);
   --text-color: var(--adm-button-text-color, var(--adm-color-text));
   --background-color: var(--adm-button-background-color, var(--adm-color-background));
   --border-radius: var(--adm-button-border-radius, 4px);
@@ -53,7 +53,7 @@
   --border-width: 0px;
 }
 .adm-button:not(.adm-button-default) {
-  --text-color: var(--adm-color-white);
+  --text-color: var(--adm-color-text-light-solid);
   --background-color: var(--color);
   --border-color: var(--color);
 }

package/es/components/capsule-tabs/capsule-tabs.css

@@ -32,10 +32,10 @@
   font-size: var(--adm-font-size-7);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 .adm-capsule-tabs-tab-active {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   background-color: var(--adm-color-primary);
 }
 .adm-capsule-tabs-tab-disabled {

package/es/components/check-list/check-list-item.js

@@ -13,9 +13,11 @@ export const CheckListItem = props => {
   }
   const active = context.value.includes(props.value);
   const readOnly = props.readOnly || context.readOnly;
+  const defaultExtra = active ? context.activeIcon : null;
+  const renderExtra = context.extra ? context.extra(active) : defaultExtra;
   const extra = React.createElement("div", {
     className: `${classPrefix}-extra`
-  }, active ? context.activeIcon : null);
+  }, renderExtra);
   return withNativeProps(props, React.createElement(List.Item, {
     title: props.title,
     className: classNames(classPrefix, readOnly && `${classPrefix}-readonly`, active && `${classPrefix}-active`),

package/es/components/check-list/check-list.d.ts

@@ -7,6 +7,7 @@ export declare type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
     onChange?: (val: string[]) => void;
     multiple?: boolean;
     activeIcon?: ReactNode;
+    extra?: (active: boolean) => ReactNode;
     disabled?: boolean;
     readOnly?: boolean;
     children?: React.ReactNode;

package/es/components/check-list/check-list.js

@@ -26,6 +26,7 @@ export const CheckList = p => {
   }
   const {
     activeIcon,
+    extra,
     disabled,
     readOnly
   } = props;
@@ -35,6 +36,7 @@ export const CheckList = p => {
       check,
       uncheck,
       activeIcon,
+      extra,
       disabled,
       readOnly
     }

package/es/components/check-list/context.d.ts

@@ -4,6 +4,7 @@ export declare const CheckListContext: import("react").Context<{
     check: (val: string) => void;
     uncheck: (val: string) => void;
     activeIcon?: ReactNode;
+    extra?: ((active: boolean) => ReactNode) | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
 } | null>;

package/es/components/checkbox/checkbox.css

@@ -18,7 +18,7 @@
   box-sizing: border-box;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
 }
 .adm-checkbox .adm-checkbox-icon > svg {
   display: block;
@@ -41,7 +41,7 @@
 .adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 .adm-checkbox .adm-checkbox-custom-icon {
   font-size: var(--icon-size);

package/es/components/ellipsis/ellipsis.js

@@ -120,7 +120,7 @@ export const Ellipsis = p => {
       setExpanded(true);
     }
   }, props.expandText)) : null;
-  const collapseActionElement = exceeded && props.expandText ? withStopPropagation(props.stopPropagationForActionButtons, React.createElement("a", {
+  const collapseActionElement = exceeded && props.collapseText ? withStopPropagation(props.stopPropagationForActionButtons, React.createElement("a", {
     onClick: () => {
       setExpanded(false);
     }

package/es/components/image/image.css

@@ -12,7 +12,7 @@
 }
 .adm-image-tip {
   position: relative;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   height: 100%;
   min-height: 24px;
   min-width: 24px;

package/es/components/index-bar/index-bar.css

@@ -3,7 +3,7 @@
   overflow: hidden;
   height: 100%;
   position: relative;
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
   --sticky-offset-top: 0;
 }
 .adm-index-bar-body {
@@ -22,7 +22,7 @@
   padding: 0 12px;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-main);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 .adm-index-bar-sidebar {
   position: absolute;
@@ -43,7 +43,7 @@
   right: 60px;
   width: 47px;
   height: 47px;
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   font-size: 25px;
   line-height: 47px;
   text-align: center;
@@ -70,7 +70,7 @@
   align-items: center;
 }
 .adm-index-bar-sidebar-item-active {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   background-color: var(--adm-color-primary);
   border-radius: 50%;
 }

package/es/components/input/input.d.ts

@@ -26,7 +26,7 @@ export declare type InputRef = {
     blur: () => void;
     nativeElement: HTMLInputElement | null;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "onClick" | "name" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "autoFocus" | "maxLength" | "minLength" | "step"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "onClick" | "name" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoFocus" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength" | "step"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

package/es/components/jumbo-tabs/jumbo-tabs.css

@@ -49,13 +49,13 @@
   border-radius: 10px;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-main);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 .adm-jumbo-tabs-tab-active {
   color: var(--adm-color-primary);
 }
 .adm-jumbo-tabs-tab-active .adm-jumbo-tabs-tab-description {
-  color: var(--adm-color-white);
+  color: var(--adm-color-text-light-solid);
   background-color: var(--adm-color-primary);
 }
 .adm-jumbo-tabs-tab-disabled {

package/es/components/notice-bar/notice-bar.css

@@ -1,7 +1,7 @@
 .adm-notice-bar {
   --background-color: #ababab;
   --border-color: #999999;
-  --text-color: var(--adm-color-white);
+  --text-color: var(--adm-color-text-light-solid);
   --font-size: var(--adm-font-size-7);
   --icon-font-size: var(--adm-font-size-10);
   --height: 40px;

package/es/components/number-keyboard/number-keyboard.js

@@ -88,8 +88,9 @@ export const NumberKeyboard = p => {
       className: classNames(`${classPrefix}-header`, {
         [`${classPrefix}-header-with-title`]: !!title
       })
-    }, title && React.createElement("div", {
-      className: `${classPrefix}-title`
+    }, 'title' && React.createElement("div", {
+      className: `${classPrefix}-title`,
+      "aria-label": title
     }, title), showCloseButton && React.createElement("span", {
       className: `${classPrefix}-header-close-button`,
       onClick: () => {
@@ -97,7 +98,8 @@ export const NumberKeyboard = p => {
         (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
       },
       role: 'button',
-      title: 'CLOSE'
+      title: 'CLOSE',
+      tabIndex: -1
     }, React.createElement(DownOutline, null)));
   };
   const renderKey = (key, index) => {
@@ -108,8 +110,9 @@ export const NumberKeyboard = p => {
       [`${classPrefix}-key-mid`]: index === 9 && !!confirmText && keys.length < 12
     });
     const ariaProps = key ? {
-      role: 'button',
-      title: key
+      role: 'grid',
+      title: key,
+      tabIndex: -1
     } : undefined;
     return React.createElement("div", Object.assign({
       key: key,
@@ -165,7 +168,8 @@ export const NumberKeyboard = p => {
   }, React.createElement(TextDeletionOutline, null)), React.createElement("div", {
     className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
     onTouchEnd: e => onKeyPress(e, 'OK'),
-    role: 'button'
+    role: 'button',
+    "aria-label": confirmText
   }, confirmText))), props.safeArea && React.createElement("div", {
     className: `${classPrefix}-footer`
   }, React.createElement(SafeArea, {

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

@@ -18,7 +18,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     content: import("react").ReactNode;
 } & {
     className?: string | undefined;
-    style?: (import("react").CSSProperties & Partial<Record<"--z-index", string>>) | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--z-index" | "--arrow-size", string>>) | undefined;
     tabIndex?: number | undefined;
 } & import("react").AriaAttributes & import("react").RefAttributes<import("./popover").PopoverRef>> & {
     Menu: import("react").ForwardRefExoticComponent<Omit<import("./popover").PopoverProps, "content"> & {

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;
@@ -57,7 +57,7 @@
 .adm-popover-arrow-icon {
   display: block;
   height: var(--arrow-size);
-  width: 15px;
+  width: calc(var(--arrow-size) / 8 * 15);
   position: absolute;
   top: 50%;
   left: 50%;

package/es/components/popover/popover.d.ts

@@ -15,7 +15,7 @@ export declare type PopoverProps = {
     placement?: Placement | DeprecatedPlacement;
     stopPropagation?: PropagationEvent[];
     content: React.ReactNode;
-} & NativeProps<'--z-index'>;
+} & NativeProps<'--z-index' | '--arrow-size'>;
 export declare type PopoverRef = {
     show: () => void;
     hide: () => void;
@@ -35,6 +35,6 @@ export declare const Popover: React.ForwardRefExoticComponent<{
     content: React.ReactNode;
 } & {
     className?: string | undefined;
-    style?: (React.CSSProperties & Partial<Record<"--z-index", string>>) | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--z-index" | "--arrow-size", string>>) | undefined;
     tabIndex?: number | undefined;
 } & React.AriaAttributes & React.RefAttributes<PopoverRef>>;

package/es/components/popover/popover.js

@@ -99,7 +99,7 @@ export const Popover = forwardRef((p, ref) => {
         top: arrowY != null ? `${arrowY}px` : '',
         right: '',
         bottom: '',
-        [arrowSide]: `-${convertPx(8)}px`
+        [arrowSide]: 'calc(var(--arrow-size) * -1)'
       });
       const arrowRotate = {
         top: '0deg',

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;