antd-mobile 5.15.0 → 5.16.1

package/es/components/popup/popup.d.ts

@@ -1,23 +1,7 @@
-import React, { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { NativeProps } from '../../utils/native-props';
-import type { MaskProps } from '../mask';
-import { GetContainer } from '../../utils/render-to-container';
-import { PropagationEvent } from '../../utils/with-stop-propagation';
-export declare type PopupProps = PropsWithChildren<{
-    afterClose?: () => void;
-    afterShow?: () => void;
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
-    destroyOnClose?: boolean;
-    forceRender?: boolean;
-    getContainer?: GetContainer;
-    mask?: boolean;
-    maskClassName?: string;
-    maskStyle?: MaskProps['style'];
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+import { PopupBaseProps } from './popup-base-props';
+export declare type PopupProps = PopupBaseProps & PropsWithChildren<{
     position?: 'bottom' | 'top' | 'left' | 'right';
-    stopPropagation?: PropagationEvent[];
-    visible?: boolean;
 }> & NativeProps<'--z-index'>;
 export declare const Popup: FC<PopupProps>;

package/es/components/popup/popup.js

@@ -1,29 +1,32 @@
 import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
-import { useUnmountedRef } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import Mask from '../mask';
 import { useLockScroll } from '../../utils/use-lock-scroll';
 import { renderToContainer } from '../../utils/render-to-container';
 import { useSpring, animated } from '@react-spring/web';
-import { useShouldRender } from '../../utils/should-render';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
+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';
 const classPrefix = `adm-popup`;
-const defaultProps = {
-  position: 'bottom',
-  visible: false,
-  getContainer: () => document.body,
-  mask: true,
-  stopPropagation: ['click']
-};
+const defaultProps = Object.assign(Object.assign({}, defaultPopupBaseProps), {
+  position: 'bottom'
+});
 export const Popup = p => {
   const props = mergeProps(defaultProps, p);
   const bodyCls = classNames(`${classPrefix}-body`, props.bodyClassName, `${classPrefix}-body-position-${props.position}`);
-  const ref = useRef(null);
   const [active, setActive] = useState(props.visible);
-  useLockScroll(ref, active);
-  const shouldRender = useShouldRender(active, props.forceRender, props.destroyOnClose);
+  useIsomorphicLayoutEffect(() => {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  const ref = useRef(null);
+  useLockScroll(ref, props.disableBodyScroll && active);
   const unmountedRef = useUnmountedRef();
   const {
     percent
@@ -35,9 +38,6 @@ export const Popup = p => {
       tension: 300,
       friction: 30
     },
-    onStart: () => {
-      setActive(true);
-    },
     onRest: () => {
       var _a, _b;
 
@@ -51,6 +51,7 @@ export const Popup = p => {
       }
     }
   });
+  const maskVisible = useInnerVisible(active && props.visible);
   const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
     className: classPrefix,
     onClick: props.onClick,
@@ -58,8 +59,18 @@ export const Popup = p => {
       display: active ? undefined : 'none'
     }
   }, props.mask && React.createElement(Mask, {
-    visible: props.visible,
-    onMaskClick: props.onMaskClick,
+    visible: maskVisible,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose,
+    onMaskClick: e => {
+      var _a, _b;
+
+      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+
+      if (props.closeOnMaskClick) {
+        (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    },
     className: props.maskClassName,
     style: props.maskStyle,
     disableBodyScroll: false,
@@ -88,6 +99,17 @@ export const Popup = p => {
       })
     }),
     ref: ref
-  }, shouldRender && props.children))));
-  return renderToContainer(props.getContainer, node);
+  }, props.showCloseButton && React.createElement("a", {
+    className: classNames(`${classPrefix}-close-icon`, 'adm-plain-anchor'),
+    onClick: () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, React.createElement(CloseOutline, null)), props.children))));
+  return React.createElement(ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, renderToContainer(props.getContainer, node));
 };

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

@@ -1,17 +1,29 @@
 .adm-progress-bar {
-  --track-width: var(--adm-progress-bar-track-width, 3px);
+  --track-width: var(--adm-progress-bar-track-width, 8px);
   --track-color: var(--adm-progress-bar-track-color, #e5e5e5);
   --fill-color: var(--adm-progress-bar-fill-color, var(--adm-color-primary));
+  --text-width: var(--adm-progress-bar-text-width, 40px);
+  display: flex;
+  align-items: center;
 }
 .adm-progress-bar-trail {
+  flex: auto;
   background: var(--track-color);
   overflow: hidden;
   height: var(--track-width);
-  border-radius: var(--track-width);
 }
 .adm-progress-bar-fill {
   transition: width 0.3s;
   background: var(--fill-color);
-  height: 100%;
+  height: var(--track-width);
+}
+.adm-progress-bar-text {
+  flex: none;
+  width: calc(var(--text-width) + 8px);
+  padding-left: 8px;
+  color: #999999;
+}
+.adm-progress-bar-rounded .adm-progress-bar-trail,
+.adm-progress-bar-rounded .adm-progress-bar-fill {
   border-radius: var(--track-width);
 }

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

@@ -1,6 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ProgressBarProps = {
     percent?: number;
-} & NativeProps<'--track-width' | '--track-color' | '--fill-color'>;
+    rounded?: boolean;
+    text?: boolean | ReactNode | ((percent: number) => ReactNode);
+} & NativeProps<'--track-width' | '--track-color' | '--fill-color' | '--text-width'>;
 export declare const ProgressBar: FC<ProgressBarProps>;

package/es/components/progress-bar/progress-bar.js

@@ -1,20 +1,40 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
+import classNames from 'classnames';
+import { isNodeWithContent } from '../../utils/is-node-with-content';
 const classPrefix = `adm-progress-bar`;
+const defaultProps = {
+  percent: 0,
+  rounded: true,
+  text: false
+};
 export const ProgressBar = p => {
-  const props = mergeProps({
-    percent: 0
-  }, p);
+  const props = mergeProps(defaultProps, p);
   const fillStyle = {
     width: `${props.percent}%`
   };
+
+  const textElement = function () {
+    if (props.text === true) {
+      return `${props.percent}%`;
+    }
+
+    if (typeof props.text === 'function') {
+      return props.text(props.percent);
+    }
+
+    return props.text;
+  }();
+
   return withNativeProps(props, React.createElement("div", {
-    className: classPrefix
+    className: classNames(classPrefix, props.rounded && `${classPrefix}-rounded`)
   }, React.createElement("div", {
     className: `${classPrefix}-trail`
   }, React.createElement("div", {
     className: `${classPrefix}-fill`,
     style: fillStyle
-  }))));
+  })), isNodeWithContent(textElement) && React.createElement("div", {
+    className: `${classPrefix}-text`
+  }, textElement)));
 };

package/es/components/radio/radio.js

@@ -38,16 +38,16 @@ export const Radio = p => {
 
     checked = groupContext.value.includes(value);
 
-    setChecked = checked => {
+    setChecked = innerChecked => {
       var _a;
 
-      if (checked) {
+      if (innerChecked) {
         groupContext.check(value);
       } else {
         groupContext.uncheck(value);
       }
 
-      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, checked);
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerChecked);
     };
 
     disabled = disabled || groupContext.disabled;

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

@@ -31,4 +31,8 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     onSearch?: ((val: string) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;
     onCancel?: (() => void) | undefined;
-} & NativeProps<"--height" | "--border-radius" | "--padding-left" | "--background" | "--placeholder-color"> & React.RefAttributes<InputRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--height" | "--border-radius" | "--padding-left" | "--background" | "--placeholder-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<InputRef>>;

package/es/components/slider/slider.js

@@ -155,7 +155,8 @@ export const Slider = p => {
             dragLockRef.current -= 1;
           }, 100);
         }
-      }
+      },
+      "aria-label": props['aria-label']
     });
   };
 

package/es/components/slider/thumb.d.ts

@@ -1,4 +1,5 @@
 import React, { FC, RefObject, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
 declare type ThumbProps = {
     value: number;
     min: number;
@@ -8,6 +9,6 @@ declare type ThumbProps = {
     trackRef: RefObject<HTMLDivElement>;
     icon?: React.ReactNode;
     popover: boolean | ((value: number) => ReactNode);
-};
+} & NativeProps;
 declare const Thumb: FC<ThumbProps>;
 export default Thumb;

package/es/components/slider/thumb.js

@@ -2,6 +2,7 @@ import React, { useRef, useState } from 'react';
 import { useDrag } from '@use-gesture/react';
 import { ThumbIcon } from './thumb-icon';
 import { Popover } from '../popover/popover';
+import { useConfig } from '../config-provider';
 const classPrefix = `adm-slider`;
 
 const Thumb = props => {
@@ -14,6 +15,9 @@ const Thumb = props => {
     icon
   } = props;
   const prevValue = useRef(value);
+  const {
+    locale
+  } = useConfig();
 
   const currentPosition = () => {
     return {
@@ -53,7 +57,14 @@ const Thumb = props => {
   return React.createElement("div", Object.assign({
     className: `${classPrefix}-thumb-container`,
     style: currentPosition()
-  }, bind()), renderPopoverContent ? React.createElement(Popover, {
+  }, bind(), {
+    role: 'slider',
+    "aria-label": props['aria-label'] || locale.Slider.name,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": value,
+    "aria-disabled": disabled
+  }), renderPopoverContent ? React.createElement(Popover, {
     content: renderPopoverContent(value),
     placement: 'top',
     visible: dragging,

package/es/components/stepper/stepper.js

@@ -8,6 +8,7 @@ import { bound } from '../../utils/bound';
 import Input from '../input';
 import Button from '../button';
 import Big from 'big.js';
+import { useConfig } from '../config-provider';
 const classPrefix = `adm-stepper`;
 const defaultProps = {
   defaultValue: 0,
@@ -24,6 +25,9 @@ export const Stepper = p => {
     min,
     inputReadOnly
   } = props;
+  const {
+    locale
+  } = useConfig();
   const [value, setValue] = usePropsValue(props);
   const [inputValue, setInputValue] = useState(() => convertValueToText(value, props.digits));
 
@@ -105,7 +109,8 @@ export const Stepper = p => {
     disabled: minusDisabled(),
     fill: 'none',
     shape: 'rectangular',
-    color: 'primary'
+    color: 'primary',
+    "aria-label": locale.Stepper.decrease
   }, React.createElement(MinusOutline, null)), React.createElement("div", {
     className: `${classPrefix}-middle`
   }, React.createElement(Input, {
@@ -127,14 +132,19 @@ export const Stepper = p => {
       setHasFocus(false);
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    readOnly: inputReadOnly
+    readOnly: inputReadOnly,
+    role: 'spinbutton',
+    "aria-valuenow": Number(inputValue),
+    "aria-valuemax": max,
+    "aria-valuemin": min
   })), React.createElement(Button, {
     className: `${classPrefix}-plus`,
     onClick: handlePlus,
     disabled: plusDisabled(),
     fill: 'none',
     shape: 'rectangular',
-    color: 'primary'
+    color: 'primary',
+    "aria-label": locale.Stepper.increase
   }, React.createElement(AddOutline, null))));
 };
 

package/es/components/steps/steps.css

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

package/es/components/swipe-action/swipe-action.d.ts

@@ -29,5 +29,9 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
     closeOnAction?: boolean | undefined;
     children: ReactNode;
     stopPropagation?: "click"[] | undefined;
-} & NativeProps<"--background"> & React.RefAttributes<SwipeActionRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--background", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<SwipeActionRef>>;
 export {};

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

@@ -16,10 +16,18 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
-} & import("../../utils/native-props").NativeProps<"--width" | "--height" | "--border-radius" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
     Item: import("react").FC<{
         onClick?: ((e: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
         children?: import("react").ReactNode;
-    } & import("../../utils/native-props").NativeProps<never>>;
+    } & {
+        className?: string | undefined;
+        style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+        tabIndex?: number | undefined;
+    } & import("react").AriaAttributes>;
 };
 export default _default;

package/es/components/swiper/swiper.d.ts

@@ -37,4 +37,8 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
-} & NativeProps<"--width" | "--height" | "--border-radius" | "--track-padding"> & React.RefAttributes<SwiperRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<SwiperRef>>;

package/es/components/switch/switch.js

@@ -5,6 +5,7 @@ import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 import { SpinIcon } from './spin-icon';
+import { useConfig } from '../config-provider';
 const classPrefix = `adm-switch`;
 const defaultProps = {
   defaultChecked: false
@@ -13,6 +14,9 @@ export const Switch = p => {
   const props = mergeProps(defaultProps, p);
   const disabled = props.disabled || props.loading || false;
   const [changing, setChanging] = useState(false);
+  const {
+    locale
+  } = useConfig();
   const [checked, setChecked] = usePropsValue({
     value: props.checked,
     defaultValue: props.defaultChecked,
@@ -49,7 +53,11 @@ export const Switch = p => {
     className: classNames(classPrefix, {
       [`${classPrefix}-checked`]: checked,
       [`${classPrefix}-disabled`]: disabled || changing
-    })
+    }),
+    role: 'switch',
+    "aria-label": locale.Switch.name,
+    "aria-checked": checked,
+    "aria-disabled": disabled
   }, React.createElement("div", {
     className: `${classPrefix}-checkbox`
   }, React.createElement("div", {

package/es/components/text-area/text-area.d.ts

@@ -34,4 +34,8 @@ export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.Detail
         maxRows?: number | undefined;
     } | undefined;
     id?: string | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align"> & React.RefAttributes<TextAreaRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<TextAreaRef>>;

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

@@ -21,4 +21,8 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
-} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;
+} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<VirtualInputRef>>;

package/es/locales/base.d.ts

@@ -104,5 +104,15 @@ export declare const base: {
         canRelease: string;
         complete: string;
     };
+    Slider: {
+        name: string;
+    };
+    Stepper: {
+        decrease: string;
+        increase: string;
+    };
+    Switch: {
+        name: string;
+    };
 };
 export declare type Locale = typeof base;

package/es/locales/base.js

@@ -104,5 +104,15 @@ export const base = {
     pulling: 'Scroll down to refresh',
     canRelease: 'Release to refresh immediately',
     complete: 'Refresh successful'
+  },
+  Slider: {
+    name: 'Slider'
+  },
+  Stepper: {
+    decrease: 'decrease',
+    increase: 'increase'
+  },
+  Switch: {
+    name: 'Switch'
   }
 };

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

@@ -104,5 +104,15 @@ declare const enUS: {
         canRelease: string;
         complete: string;
     };
+    Slider: {
+        name: string;
+    };
+    Stepper: {
+        decrease: string;
+        increase: string;
+    };
+    Switch: {
+        name: string;
+    };
 };
 export default enUS;

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

@@ -104,5 +104,15 @@ declare const esES: {
         canRelease: string;
         complete: string;
     };
+    Slider: {
+        name: string;
+    };
+    Stepper: {
+        decrease: string;
+        increase: string;
+    };
+    Switch: {
+        name: string;
+    };
 };
 export default esES;

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

@@ -104,5 +104,15 @@ declare const faIR: {
         canRelease: string;
         complete: string;
     };
+    Slider: {
+        name: string;
+    };
+    Stepper: {
+        decrease: string;
+        increase: string;
+    };
+    Switch: {
+        name: string;
+    };
 };
 export default faIR;

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

@@ -104,5 +104,15 @@ declare const frFR: {
         canRelease: string;
         complete: string;
     };
+    Slider: {
+        name: string;
+    };
+    Stepper: {
+        decrease: string;
+        increase: string;
+    };
+    Switch: {
+        name: string;
+    };
 };
 export default frFR;