antd-mobile 5.28.2 → 5.29.0

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

@@ -65,7 +65,7 @@
 .adm-popover-arrow-icon {
   display: block;
   height: var(--arrow-size);
-  width: 30px;
+  width: calc(var(--arrow-size) / 8 * 15);
   position: absolute;
   top: 50%;
   left: 50%;

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

@@ -20,7 +20,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-radio .adm-radio-icon > svg {
@@ -49,7 +49,7 @@
 .adm-radio.adm-radio-disabled .adm-radio-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
 }
 
 .adm-radio .adm-radio-custom-icon {

package/2x/es/components/search-bar/search-bar.css

@@ -1,7 +1,7 @@
 .adm-search-bar {
   --height: 64px;
   --padding-left: 16px;
-  --background: var(--adm-color-box);
+  --background: var(--adm-color-fill-content);
   --border-radius: 12px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);

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

@@ -1,5 +1,5 @@
 .adm-selector {
-  --color: var(--adm-color-box);
+  --color: var(--adm-color-fill-content);
   --checked-color: #e7f1ff;
   --text-color: var(--adm-color-text);
   --checked-text-color: var(--adm-color-primary);

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

@@ -6,6 +6,7 @@ import Space from '../space';
 import Grid from '../grid';
 import { usePropsValue } from '../../utils/use-props-value';
 import { CheckMark } from './check-mark';
+import { useConfig } from '../config-provider';
 const classPrefix = `adm-selector`;
 const defaultProps = {
   multiple: false,
@@ -27,6 +28,9 @@ export const Selector = p => {
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
     }
   });
+  const {
+    locale
+  } = useConfig();
   const items = props.options.map(option => {
     const active = (value || []).includes(option.value);
     const disabled = option.disabled || props.disabled;
@@ -49,7 +53,9 @@ export const Selector = p => {
           const val = active ? [] : [option.value];
           setValue(val);
         }
-      }
+      },
+      role: 'option',
+      "aria-selected": active && !props.multiple || active && props.multiple
     }, option.label, option.description && React.createElement("div", {
       className: `${classPrefix}-item-description`
     }, option.description), active && props.showCheckMark && React.createElement("div", {
@@ -57,7 +63,9 @@ export const Selector = p => {
     }, React.createElement(CheckMark, null)));
   });
   return withNativeProps(props, React.createElement("div", {
-    className: classPrefix
+    className: classPrefix,
+    role: 'listbox',
+    "aria-label": locale.Selector.name
   }, !props.columns && React.createElement(Space, {
     wrap: true
   }, items), props.columns && React.createElement(Grid, {

package/2x/es/components/side-bar/side-bar.css

@@ -2,7 +2,7 @@
   --height: 100%;
   --width: 210px;
   --item-border-radius: 16px;
-  --background-color: var(--adm-color-box);
+  --background-color: var(--adm-color-fill-content);
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;

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

@@ -14,7 +14,7 @@
   position: relative;
   width: 100%;
   height: 6px;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   border-radius: 6px;
 }
 
@@ -39,7 +39,7 @@
   width: 14px;
   height: 14px;
   margin-left: -6px;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   border-radius: 50%;
 }
 
@@ -54,7 +54,7 @@
   border-radius: 50%;
   text-align: center;
   line-height: 56px;
-  background: var(--adm-color-white);
+  background: var(--adm-color-text-light-solid);
   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
   color: var(--fill-color);
 }

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

@@ -3,14 +3,14 @@
   --input-width: 88px;
   --input-font-size: var(--adm-font-size-main);
   --input-font-color: var(--adm-color-text);
-  --input-background-color: var(--adm-color-box);
+  --input-background-color: var(--adm-color-fill-content);
   --border-radius: 4px;
   --border: none;
   --border-inner: solid 4px transparent;
   --active-border: var(--border);
   --button-font-size: var(--adm-font-size-7);
   --button-text-color: var(--adm-color-primary);
-  --button-background-color: var(--adm-color-box);
+  --button-background-color: var(--adm-color-fill-content);
   --button-width: var(--height);
   display: flex;
   align-items: center;

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.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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.28.2",
+  "version": "5.29.0",
   "dependencies": {
     "@floating-ui/dom": "^1.0.6",
     "@rc-component/mini-decimal": "^1.0.1",