antd-mobile 5.2.0 → 5.2.1

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

@@ -1,16 +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;
-    allowEmpty?: boolean;
 } & 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/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/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.js

@@ -7,9 +7,11 @@ export function measureCSSLength(raw) {
     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` and `rem` are supported.');
+      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/{2x/es/utils/use-should-render.js → es/utils/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.2.0",
+  "version": "5.2.1",
   "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": {