antd-mobile 5.1.0 → 5.2.2

package/es/components/picker-view/wheel.js

@@ -5,7 +5,7 @@ import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { bound } from '../../utils/bound';
 import isEqual from 'lodash/isEqual';
 import { useIsomorphicLayoutEffect } from 'ahooks';
-import classNames from 'classnames';
+import { measureCSSLength } from '../../utils/measure-css-length';
 const classPrefix = `adm-picker-view`;
 export const Wheel = memo(props => {
   const {
@@ -29,16 +29,12 @@ export const Wheel = memo(props => {
     }
   }));
   const draggingRef = useRef(false);
-  const dummyItemRef = useRef(null);
+  const rootRef = useRef(null);
   const itemHeight = useRef(34);
   useIsomorphicLayoutEffect(() => {
-    const dummyItem = dummyItemRef.current;
-    if (!dummyItem) return;
-    const rect = dummyItem.getBoundingClientRect();
-
-    if (rect.height > 0) {
-      itemHeight.current = rect.height;
-    }
+    const root = rootRef.current;
+    if (!root) return;
+    itemHeight.current = measureCSSLength(window.getComputedStyle(root).getPropertyValue('--item-height'));
   });
   useIsomorphicLayoutEffect(() => {
     if (draggingRef.current) return;
@@ -134,12 +130,9 @@ export const Wheel = memo(props => {
   }
 
   return React.createElement("div", Object.assign({
+    ref: rootRef,
     className: `${classPrefix}-column`
-  }, bind()), React.createElement("div", {
-    ref: dummyItemRef,
-    className: classNames(`${classPrefix}-column-item`, `${classPrefix}-column-item-dummy`),
-    "aria-hidden": true
-  }), React.createElement(animated.div, {
+  }, bind()), React.createElement(animated.div, {
     style: {
       translateY: y
     },

package/es/components/popover/arrow.js

@@ -4,9 +4,8 @@ export const Arrow = memo(props => {
   return withNativeProps(props, React.createElement("svg", {
     viewBox: '0 0 30 16'
   }, React.createElement("g", {
-    transform: 'translate(-1300.000000, -841.000000)',
     fill: 'currentColor'
   }, React.createElement("path", {
-    d: 'M1300,841 L1330,841 L1318.07289,855.312538 C1316.65863,857.009645 1314.13637,857.238942 1312.43926,855.824685 C1312.25341,855.669808 1312.08199,855.49839 1311.92711,855.312538 L1300,841 L1300,841 Z'
+    d: 'M0,0 L30,0 L18.07289,14.312538 C16.65863,16.009645 14.13637,16.238942 12.43926,14.824685 C12.25341,14.669808 12.08199,14.49839 11.92711,14.312538 L0,0 L0,0 Z'
   }))));
 });

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

@@ -4,16 +4,16 @@ import './popover-menu.less';
 export type { PopoverProps, PopoverRef } from './popover';
 export type { PopoverMenuProps, Action } from './popover-menu';
 declare const _default: import("react").ForwardRefExoticComponent<{
-    getContainer?: HTMLElement | (() => HTMLElement) | null | undefined;
+    getContainer?: import("../../utils/render-to-container").GetContainer | undefined;
     destroyOnHide?: boolean | undefined;
-    children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
+    children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
     placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
     stopPropagation?: "click"[] | undefined;
     content: import("react").ReactNode;
 } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
-    Menu: import("react").ForwardRefExoticComponent<Pick<import("./popover").PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "defaultVisible" | "onVisibleChange" | "trigger" | "placement" | "destroyOnHide"> & {
+    Menu: import("react").ForwardRefExoticComponent<Omit<import("./popover").PopoverProps, "content"> & {
         actions: import("./popover-menu").Action[];
         onAction?: ((item: import("./popover-menu").Action) => void) | undefined;
     } & import("react").RefAttributes<import("./popover").PopoverRef>>;

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

@@ -11,7 +11,7 @@ export declare type PopoverMenuProps = Omit<PopoverProps, 'content'> & {
     actions: Action[];
     onAction?: (item: Action) => void;
 };
-export declare const PopoverMenu: React.ForwardRefExoticComponent<Pick<PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "defaultVisible" | "onVisibleChange" | "trigger" | "placement" | "destroyOnHide"> & {
+export declare const PopoverMenu: React.ForwardRefExoticComponent<Omit<PopoverProps, "content"> & {
     actions: Action[];
     onAction?: ((item: Action) => void) | undefined;
 } & React.RefAttributes<PopoverRef>>;

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

@@ -19,7 +19,7 @@ export declare type PopoverRef = {
     visible: boolean;
 };
 export declare const Popover: React.ForwardRefExoticComponent<{
-    getContainer?: HTMLElement | (() => HTMLElement) | null | undefined;
+    getContainer?: GetContainer | undefined;
     destroyOnHide?: boolean | undefined;
     children: ReactElement;
     mode?: "dark" | "light" | undefined;

package/es/components/popup/popup.js

@@ -7,7 +7,7 @@ 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/use-should-render';
+import { useShouldRender } from '../../utils/should-render';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
 const classPrefix = `adm-popup`;
 const defaultProps = {

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

@@ -45,6 +45,7 @@ export const SearchBar = forwardRef((p, ref) => {
 
   const renderCancelButton = () => {
     let isShowCancel = false;
+    const showCancelButton = props.showCancelButton;
 
     if (typeof props.showCancelButton === 'function') {
       isShowCancel = props.showCancelButton(hasFocus, value);

package/es/components/selector/selector.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+declare type SelectorValue = string | number;
 export interface SelectorOption<V> {
     label: ReactNode;
     description?: ReactNode;
@@ -18,4 +19,5 @@ export declare type SelectorProps<V> = {
     }) => void;
     showCheckMark?: boolean;
 } & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
-export declare const Selector: <V extends string | number>(p: SelectorProps<V>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

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

@@ -1,15 +1,25 @@
 import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { InputProps } from '../input';
-export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & {
+declare type ValueProps = {
+    allowEmpty: true;
+    value?: number | null;
+    defaultValue?: number | null;
+    onChange?: (value: number | null) => void;
+};
+declare type ValuePropsWithNull = {
+    allowEmpty?: false;
     value?: number;
     defaultValue?: number;
+    onChange?: (value: number) => void;
+};
+export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & (ValuePropsWithNull | ValueProps) & {
     min?: number;
     max?: number;
     step?: number;
     digits?: number;
     disabled?: boolean;
     inputReadOnly?: boolean;
-    onChange?: (value: number) => void;
 } & NativeProps<'--height' | '--input-width' | '--input-font-size' | '--input-background-color' | '--border-radius' | '--border' | '--border-inner' | '--active-border' | '--button-font-size' | '--button-background-color' | '--button-width' | '--input-font-color' | '--button-text-color'>;
 export declare const Stepper: FC<StepperProps>;
+export {};

package/es/components/stepper/stepper.js

@@ -11,7 +11,8 @@ const classPrefix = `adm-stepper`;
 const defaultProps = {
   defaultValue: 0,
   step: 1,
-  disabled: false
+  disabled: false,
+  allowEmpty: false
 };
 export const Stepper = p => {
   const props = mergeProps(defaultProps, p);
@@ -23,7 +24,7 @@ export const Stepper = p => {
     inputReadOnly
   } = props;
   const [value, setValue] = usePropsValue(props);
-  const [inputValue, setInputValue] = useState(() => value.toString());
+  const [inputValue, setInputValue] = useState(() => convertValueToText(value));
 
   function setValueWithCheck(v) {
     if (isNaN(v)) return;
@@ -39,42 +40,58 @@ export const Stepper = p => {
   const [hasFocus, setHasFocus] = useState(false);
   useEffect(() => {
     if (!hasFocus) {
-      setInputValue(value.toString());
+      setInputValue(convertValueToText(value));
     }
   }, [hasFocus]);
   useEffect(() => {
     if (!hasFocus) {
-      setInputValue(value.toString());
+      setInputValue(convertValueToText(value));
     }
   }, [value]);
 
   const handleInputChange = v => {
     setInputValue(v);
-    setValueWithCheck(parseFloat(v));
+    const value = convertTextToValue(v);
+
+    if (value === null) {
+      if (props.allowEmpty) {
+        setValue(null);
+      } else {
+        setValue(props.defaultValue);
+      }
+    } else {
+      setValueWithCheck(value);
+    }
   };
 
   const handleMinus = () => {
-    setValueWithCheck(value - step);
+    setValueWithCheck((value !== null && value !== void 0 ? value : 0) - step);
   };
 
   const handlePlus = () => {
-    setValueWithCheck(value + step);
+    setValueWithCheck((value !== null && value !== void 0 ? value : 0) + step);
   };
 
   const minusDisabled = () => {
-    if (min === undefined) {
-      return disabled;
-    } else {
-      return disabled || value <= min;
+    if (disabled) return true;
+    if (value === null) return false;
+
+    if (min !== undefined) {
+      return value <= min;
     }
+
+    return false;
   };
 
   const plusDisabled = () => {
-    if (max === undefined) {
-      return disabled;
-    } else {
-      return disabled || value >= max;
+    if (disabled) return true;
+    if (value === null) return false;
+
+    if (max !== undefined) {
+      return value >= max;
     }
+
+    return false;
   };
 
   return withNativeProps(props, React.createElement("div", {
@@ -118,4 +135,14 @@ export const Stepper = p => {
     shape: 'rectangular',
     color: 'primary'
   }, React.createElement(AddOutline, null))));
-};
+};
+
+function convertValueToText(value) {
+  if (value === null) return '';
+  return value.toString();
+}
+
+function convertTextToValue(text) {
+  if (text === '') return null;
+  return parseFloat(text);
+}

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

@@ -7,15 +7,15 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     autoplay?: boolean | undefined;
     autoplayInterval?: number | undefined;
     loop?: boolean | undefined;
-    direction?: "horizontal" | "vertical" | undefined;
+    direction?: "vertical" | "horizontal" | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
-    indicatorProps?: Pick<import("../page-indicator").PageIndicatorProps, "style" | "color" | "className"> | undefined;
+    indicatorProps?: Pick<import("../page-indicator").PageIndicatorProps, "style" | "className" | "color"> | undefined;
     indicator?: ((total: number, current: number) => import("react").ReactNode) | undefined;
     slideSize?: number | undefined;
     trackOffset?: number | undefined;
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
-    children?: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>[] | 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<"--border-radius" | "--width" | "--height" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
     Item: import("react").FC<{
         onClick?: ((e: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;

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

@@ -28,13 +28,13 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     autoplay?: boolean | undefined;
     autoplayInterval?: number | undefined;
     loop?: boolean | undefined;
-    direction?: "horizontal" | "vertical" | undefined;
+    direction?: "vertical" | "horizontal" | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
-    indicatorProps?: Pick<PageIndicatorProps, "style" | "color" | "className"> | undefined;
+    indicatorProps?: Pick<PageIndicatorProps, "style" | "className" | "color"> | undefined;
     indicator?: ((total: number, current: number) => ReactNode) | undefined;
     slideSize?: number | undefined;
     trackOffset?: number | undefined;
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
-    children?: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>[] | undefined;
+    children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
 } & NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & React.RefAttributes<SwiperRef>>;

package/es/components/switch/spin-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const SpinIcon: React.NamedExoticComponent<NativeProps<never>>;

package/es/components/switch/spin-icon.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const SpinIcon = memo(props => {
+  return withNativeProps(props, React.createElement("svg", {
+    width: '28px',
+    height: '28px',
+    viewBox: '0 0 28 28'
+  }, React.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, React.createElement("g", {
+    transform: 'translate(-137.000000, -840.000000)',
+    fill: '#1576FE'
+  }, React.createElement("g", {
+    transform: 'translate(80.000000, 823.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(53.000000, 13.000000)'
+  }, React.createElement("path", {
+    d: 'M17.9996753,31.5 C10.5556724,31.5 4.5,25.4443275 4.5,18.0003247 C4.5,10.5563219 10.5556724,4.5 17.9996753,4.5 C18.5355492,4.5 18.9702974,4.93474816 18.9702974,5.47062208 C18.9702974,6.006496 18.5355492,6.44124416 17.9996753,6.44124416 C11.6261524,6.44124416 6.44124416,11.6267709 6.44124416,18.0002938 C6.44124416,24.3738167 11.6261524,29.5587249 17.9996753,29.5587249 C24.3731982,29.5587249 29.5587249,24.3738167 29.5587249,18.0002938 C29.5587249,14.7964616 28.2778291,11.8169616 25.9523687,9.61220279 C25.5637302,9.24317094 25.5473089,8.62893223 25.9157222,8.23967523 C26.2841356,7.84976878 26.8989928,7.83461537 27.2882498,8.20302872 C30.0042351,10.7787368 31.5,14.2580826 31.5,18.0002938 C31.5,25.4443275 25.4436781,31.5 17.9996753,31.5 Z'
+  })))))));
+});

package/es/components/switch/switch.css

@@ -89,7 +89,7 @@
   cursor: not-allowed;
   opacity: 0.4;
 }
-.adm-switch-icon {
+.adm-switch-spin-icon {
   width: 14px;
   height: 14px;
   animation: loading-rotate 1s linear infinite;

package/es/components/switch/switch.js

@@ -1,10 +1,10 @@
 import { __awaiter } from "tslib";
 import classNames from 'classnames';
 import React, { useState } from 'react';
-import SpinIcon from '../../assets/spin.svg';
 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';
 const classPrefix = `adm-switch`;
 const defaultProps = {
   defaultChecked: false
@@ -54,10 +54,8 @@ export const Switch = p => {
     className: `${classPrefix}-checkbox`
   }, React.createElement("div", {
     className: `${classPrefix}-handle`
-  }, (props.loading || changing) && React.createElement("img", {
-    src: SpinIcon,
-    className: `${classPrefix}-icon`,
-    alt: 'switch-handle'
+  }, (props.loading || changing) && React.createElement(SpinIcon, {
+    className: `${classPrefix}-spin-icon`
   })), React.createElement("div", {
     className: `${classPrefix}-inner`
   }, checked ? props.checkedText : props.uncheckedText))));

package/es/components/tabs/tabs.d.ts

@@ -4,6 +4,7 @@ export declare type TabProps = {
     title: ReactNode;
     disabled?: boolean;
     forceRender?: boolean;
+    destroyOnClose?: boolean;
 } & NativeProps;
 export declare const Tab: FC<TabProps>;
 export declare type TabsProps = {

package/es/components/tabs/tabs.js

@@ -4,10 +4,12 @@ import { useSpring, animated } from '@react-spring/web';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { bound } from '../../utils/bound';
-import { useUpdateLayoutEffect, useThrottleFn, useIsomorphicLayoutEffect } from 'ahooks';
+import { useThrottleFn, useIsomorphicLayoutEffect } from 'ahooks';
 import { useMutationEffect } from '../../utils/use-mutation-effect';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { mergeProps } from '../../utils/with-default-props';
+import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
+import { ShouldRender } from '../../utils/should-render';
 const classPrefix = `adm-tabs`;
 export const Tab = () => {
   return null;
@@ -137,7 +139,7 @@ export const Tabs = p => {
   useIsomorphicLayoutEffect(() => {
     animate(!x.isAnimating);
   }, []);
-  useUpdateLayoutEffect(() => {
+  useIsomorphicUpdateLayoutEffect(() => {
     animate();
   }, [activeKey]);
   useResizeEffect(() => {
@@ -224,23 +226,17 @@ export const Tabs = p => {
       return null;
     }
 
-    if (pane.key === activeKey) {
-      return React.createElement("div", {
-        key: pane.key,
-        className: `${classPrefix}-content`
-      }, pane.props.children);
-    }
-
-    if (pane.props.forceRender) {
-      return React.createElement("div", {
-        key: pane.key,
-        className: `${classPrefix}-content`,
-        style: {
-          display: 'none'
-        }
-      }, pane.props.children);
-    }
-
-    return null;
+    const active = pane.key === activeKey;
+    return React.createElement(ShouldRender, {
+      key: pane.key,
+      active: active,
+      forceRender: pane.props.forceRender,
+      destroyOnClose: pane.props.destroyOnClose
+    }, React.createElement("div", {
+      className: `${classPrefix}-content`,
+      style: {
+        display: active ? 'block' : 'none'
+      }
+    }, pane.props.children));
   })));
 };

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

@@ -18,7 +18,7 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
     onClick?: ((e: React.MouseEvent<HTMLDivElement>) => void) | undefined;
-    keyboard?: React.ReactElement<NumberKeyboardProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
-} & Pick<InputProps, "value" | "disabled" | "onChange" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;
+} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;

package/es/utils/measure-css-length.d.ts

@@ -0,0 +1 @@
+export declare function measureCSSLength(raw: string): number;

package/es/utils/measure-css-length.js

@@ -0,0 +1,19 @@
+import { isDev } from './is-dev';
+import { devError } from './dev-log';
+export function measureCSSLength(raw) {
+  const withUnit = raw.trim();
+
+  if (withUnit.endsWith('px')) {
+    return parseFloat(withUnit);
+  } else if (withUnit.endsWith('rem')) {
+    return parseFloat(withUnit) * parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+  } else if (withUnit.endsWith('vw')) {
+    return parseFloat(withUnit) * window.innerWidth / 100;
+  } else {
+    if (isDev) {
+      devError('Global', 'You are using a not supported CSS unit. Only `px` `rem` and `vw` are supported.');
+    }
+
+    return 0;
+  }
+}

package/es/utils/native-props.d.ts

@@ -5,4 +5,4 @@ export interface NativeProps<S extends string = never> {
     style?: CSSProperties & Partial<Record<S, string>>;
     tabIndex?: number;
 }
-export declare function withNativeProps<P extends NativeProps>(props: P, element: ReactElement): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare function withNativeProps<P extends NativeProps>(props: P, element: ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/es/utils/render-to-container.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 export declare type GetContainer = HTMLElement | (() => HTMLElement) | null;
-export declare function renderToContainer(getContainer: GetContainer, node: ReactElement): ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
+export declare function renderToContainer(getContainer: GetContainer, node: ReactElement): ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/es/utils/should-render.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactElement } from 'react';
+interface Props {
+    active: boolean;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
+    children: ReactElement;
+}
+export declare const ShouldRender: FC<Props>;
+export declare function useShouldRender(active: boolean, forceRender?: boolean, destroyOnClose?: boolean): boolean;
+export {};

package/es/utils/{use-should-render.js → should-render.js}

@@ -1,4 +1,8 @@
 import { useInitialized } from './use-initialized';
+export const ShouldRender = props => {
+  const shouldRender = useShouldRender(props.active, props.forceRender, props.destroyOnClose);
+  return shouldRender ? props.children : null;
+};
 export function useShouldRender(active, forceRender, destroyOnClose) {
   const initialized = useInitialized(active);
   if (forceRender) return true;

package/es/utils/use-drag-and-pinch.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: {} | Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => Pick<import("react").DOMAttributes<EventTarget>, "onClick" | "onChange" | "onPause" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">;
+export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: {} | Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => import("@use-gesture/react").ReactDOMAttributes;

package/es/utils/use-isomorphic-update-layout-effect.js

@@ -1,3 +1,2 @@
-import { createUpdateEffect } from 'ahooks/lib/createUpdateEffect';
-import { useIsomorphicLayoutEffect } from 'ahooks';
+import { createUpdateEffect, useIsomorphicLayoutEffect } from 'ahooks';
 export const useIsomorphicUpdateLayoutEffect = createUpdateEffect(useIsomorphicLayoutEffect);

package/es/utils/use-props-value.d.ts

@@ -3,5 +3,5 @@ declare type Options<T> = {
     defaultValue: T;
     onChange?: (v: T) => void;
 };
-export declare function usePropsValue<T>(options: Options<T>): readonly [T, (v: T) => void];
+export declare function usePropsValue<T>(options: Options<T>): readonly [T, (this: unknown, v: T) => void];
 export {};

package/es/utils/use-tab-list-scroll.js

@@ -1,7 +1,8 @@
 import { useSpring } from '@react-spring/web';
 import { useMutationEffect } from './use-mutation-effect';
 import { bound } from './bound';
-import { useIsomorphicLayoutEffect, useUpdateLayoutEffect } from 'ahooks';
+import { useIsomorphicLayoutEffect } from 'ahooks';
+import { useIsomorphicUpdateLayoutEffect } from './use-isomorphic-update-layout-effect';
 export const useTabListScroll = (targetRef, activeIndex) => {
   const [{
     scrollLeft
@@ -39,7 +40,7 @@ export const useTabListScroll = (targetRef, activeIndex) => {
   useIsomorphicLayoutEffect(() => {
     animate(true);
   }, []);
-  useUpdateLayoutEffect(() => {
+  useIsomorphicUpdateLayoutEffect(() => {
     animate();
   }, [activeIndex]);
   useMutationEffect(() => {

package/es/utils/use-touch.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Direction = '' | 'vertical' | 'horizontal';
 export declare function useTouch(): {
     move: EventListener;

package/es/utils/validate.js

@@ -6,7 +6,7 @@ export function isObject(val) {
   return val !== null && typeof val === 'object';
 }
 export function isPromise(obj) {
-  return obj && typeof obj === 'object' && typeof obj.then === 'function';
+  return !!obj && typeof obj === 'object' && typeof obj.then === 'function';
 }
 export function isDate(val) {
   return Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN(val.getTime());

package/es/utils/with-stop-propagation.d.ts

@@ -1,3 +1,3 @@
 import React, { ReactElement } from 'react';
 export declare type PropagationEvent = 'click';
-export declare function withStopPropagation(events: PropagationEvent[], element: ReactElement): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare function withStopPropagation(events: PropagationEvent[], element: ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "antd-mobile",
-  "version": "5.1.0",
+  "version": "5.2.2",
   "dependencies": {
     "@react-spring/web": "^9.4.3",
     "@types/resize-observer-browser": "^0.1.7",
     "@use-gesture/react": "^10.2.6",
-    "ahooks": "^3.1.9",
+    "ahooks": "^3.1.10",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
     "classnames": "^2.3.1",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
-    "rc-field-form": "^1.22.1",
+    "rc-field-form": "^1.23.0",
     "rc-tooltip": "^5.1.1",
     "staged-components": "^1.1.2",
-    "tslib": "^1.14.1",
+    "tslib": "^2.3.1",
     "use-async-memo": "^1.2.3"
   },
   "peerDependencies": {