antd-mobile 5.32.4 → 5.33.0

package/es/components/date-picker-view/date-picker-view.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import type { PickerViewProps } from '../picker-view';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from '../date-picker/date-picker-utils';

package/es/components/dialog/alert.d.ts

@@ -1,5 +1,5 @@
 import { DialogProps } from './index';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export declare type DialogAlertProps = Omit<DialogProps, 'visible' | 'closeOnAction' | 'actions'> & {
     confirmText?: ReactNode;
     onConfirm?: () => void | Promise<void>;

package/es/components/dialog/confirm.d.ts

@@ -1,5 +1,5 @@
 import { DialogProps } from './index';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export declare type DialogConfirmProps = Omit<DialogProps, 'visible' | 'closeOnAction' | 'actions'> & {
     confirmText?: ReactNode;
     cancelText?: ReactNode;

package/es/components/dialog/dialog-action-button.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type Action = {
     key: string | number;

package/es/components/dialog/dialog.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { Action } from './dialog-action-button';
 import { NativeProps } from '../../utils/native-props';
 import { CenterPopupProps } from '../center-popup';

package/es/components/divider/divider.d.ts

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type DividerProps = {
     contentPosition?: 'left' | 'right' | 'center';
     direction?: 'horizontal' | 'vertical';
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps;
 export declare const Divider: FC<DividerProps>;

package/es/components/dropdown/dropdown.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import { PopupProps } from '../popup';
 import { NativeProps } from '../../utils/native-props';
 export declare type DropdownProps = {
@@ -7,7 +8,7 @@ export declare type DropdownProps = {
     closeOnMaskClick?: boolean;
     closeOnClickAway?: boolean;
     onChange?: (key: string | null) => void;
-    arrow?: React.ReactNode;
+    arrow?: ReactNode;
     getContainer?: PopupProps['getContainer'];
 } & NativeProps;
 export declare type DropdownRef = {
@@ -19,7 +20,7 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
     closeOnMaskClick?: boolean | undefined;
     closeOnClickAway?: boolean | undefined;
     onChange?: ((key: string | null) => void) | undefined;
-    arrow?: React.ReactNode;
+    arrow?: ReactNode;
     getContainer?: PopupProps['getContainer'];
 } & {
     className?: string | undefined;

package/es/components/dropdown/item.d.ts

@@ -1,15 +1,16 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type DropdownItemProps = {
     key: string;
-    title: React.ReactNode;
+    title: ReactNode;
     active?: boolean;
     highlight?: boolean;
     forceRender?: boolean;
     destroyOnClose?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    arrow?: React.ReactNode;
-    children?: React.ReactNode;
+    arrow?: ReactNode;
+    children?: ReactNode;
 } & NativeProps;
 declare const Item: FC<DropdownItemProps>;
 export default Item;

package/es/components/ellipsis/ellipsis.d.ts

@@ -1,12 +1,13 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type EllipsisProps = {
     content: string;
     direction?: 'start' | 'end' | 'middle';
     rows?: number;
-    expandText?: React.ReactNode;
-    collapseText?: React.ReactNode;
+    expandText?: ReactNode;
+    collapseText?: ReactNode;
     stopPropagationForActionButtons?: PropagationEvent[];
     onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     defaultExpanded?: boolean;

package/es/components/empty/empty-icon.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare const EmptyIcon: FC<NativeProps>;

package/es/components/empty/empty.d.ts

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
+import type { FC, ReactNode, CSSProperties } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type EmptyProps = {
     image?: ReactNode;
-    imageStyle?: React.CSSProperties;
+    imageStyle?: CSSProperties;
     description?: ReactNode;
 } & NativeProps;
 /** @deprecated Empty has been deprecated and will be removed in the next major version. */
-export declare const Empty: React.FC<EmptyProps>;
+export declare const Empty: FC<EmptyProps>;

package/es/components/error-block/create-error-block.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode, ReactElement } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { ErrorBlockStatus, ImageRecord } from '.';
 export declare type ErrorBlockProps = {
@@ -7,6 +8,6 @@ export declare type ErrorBlockProps = {
     image?: string | ReactElement;
     description?: ReactNode;
     fullPage?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps<'--image-height' | '--image-height-full-page' | '--image-width' | '--image-width-full-page'>;
 export declare function createErrorBlock(imageRecord: ImageRecord): React.FC<ErrorBlockProps>;

package/es/components/error-block/images/busy.d.ts

@@ -1 +1,2 @@
-export declare const busyImage: JSX.Element;
+import React from 'react';
+export declare const busyImage: React.JSX.Element;

package/es/components/error-block/images/default.d.ts

@@ -1 +1,2 @@
-export declare const defaultImage: JSX.Element;
+import React from 'react';
+export declare const defaultImage: React.JSX.Element;

package/es/components/error-block/images/disconnected.d.ts

@@ -1 +1,2 @@
-export declare const disconnectedImage: JSX.Element;
+import React from 'react';
+export declare const disconnectedImage: React.JSX.Element;

package/es/components/error-block/images/empty.d.ts

@@ -1 +1,2 @@
-export declare const emptyImage: JSX.Element;
+import React from 'react';
+export declare const emptyImage: React.JSX.Element;

package/es/components/error-block/index.d.ts

@@ -1,5 +1,5 @@
 import './error-block.less';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { ErrorBlock } from './error-block';
 export { createErrorBlock } from './create-error-block';
 export type { ErrorBlockProps } from './create-error-block';

package/es/components/floating-bubble/floating-bubble.d.ts

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type Offset = {
     x: number;
@@ -8,7 +9,7 @@ export declare type FloatingBubbleProps = {
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     axis?: 'x' | 'y' | 'xy' | 'lock';
     magnetic?: 'x' | 'y';
-    children?: React.ReactNode;
+    children?: ReactNode;
     offset?: Offset;
     defaultOffset?: Offset;
     onOffsetChange?: (offset: Offset) => void;

package/es/components/floating-panel/floating-panel.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type FloatingPanelRef = {
     setHeight: (height: number, options?: {

package/es/components/footer/footer.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type LinkItem = {
     text: string;

package/es/components/form/form-array.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import type { FC, ReactNode, ReactElement } from 'react';
 import type { StoreValue } from 'rc-field-form/es/interface';
 export interface FormArrayField {
     index: number;
@@ -17,4 +17,4 @@ export interface FormArrayProps {
     renderAdd?: () => ReactNode;
     children: (fields: FormArrayField[], operation: FormArrayOperation) => ReactElement[];
 }
-export declare const FormArray: React.FC<FormArrayProps>;
+export declare const FormArray: FC<FormArrayProps>;

package/es/components/form/form-item.d.ts

@@ -1,15 +1,16 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode, MutableRefObject } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { FormInstance } from 'rc-field-form';
 import type { FieldProps } from 'rc-field-form/lib/Field';
 import type { FormLayout } from './index';
 import { ListItemProps } from '../list';
-declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
-declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
+declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => ReactNode;
+declare type ChildrenType<Values = any> = RenderChildren<Values> | ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
 export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue' | 'getValueFromEvent' | 'getValueProps' | 'normalize' | 'preserve' | 'validateFirst'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
-    label?: React.ReactNode;
-    help?: React.ReactNode;
+    label?: ReactNode;
+    help?: ReactNode;
     hasFeedback?: boolean;
     required?: boolean;
     noStyle?: boolean;
@@ -18,7 +19,7 @@ export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePr
     layout?: FormLayout;
     childElementPosition?: 'normal' | 'right';
     children?: ChildrenType;
-    onClick?: (e: React.MouseEvent, widgetRef: React.MutableRefObject<any>) => void;
+    onClick?: (e: React.MouseEvent, widgetRef: MutableRefObject<any>) => void;
 } & NativeProps;
 export declare const FormItem: FC<FormItemProps>;
 export {};

package/es/components/form/form-subscribe.d.ts

@@ -1,7 +1,8 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import type { FormInstance } from 'rc-field-form';
 import type { NamePath } from 'rc-field-form/es/interface';
-declare type RenderChildren<Values = any> = (changedValues: Record<string, any>, form: FormInstance<Values>) => React.ReactNode;
+declare type RenderChildren<Values = any> = (changedValues: Record<string, any>, form: FormInstance<Values>) => ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values>;
 export interface FormSubscribeProps {
     to: NamePath[];

package/es/components/form/form.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { ListProps } from '../list';
 import type { FormProps as RcFormProps, FormInstance as RCFormInstance } from 'rc-field-form';

package/es/components/form/header.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 export declare const Header: FC<{
     children?: ReactNode;
 }>;

package/es/components/grid/grid.d.ts

@@ -1,14 +1,15 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type GridProps = {
     columns: number;
     gap?: number | string | [number | string, number | string];
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const Grid: FC<GridProps>;
 export declare type GridItemProps = {
     span?: number;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps;
 export declare const GridItem: FC<GridItemProps>;

package/es/components/image/broken-image-icon.d.ts

@@ -1 +1,2 @@
-export declare const BrokenImageIcon: () => JSX.Element;
+import React from 'react';
+export declare const BrokenImageIcon: () => React.JSX.Element;

package/es/components/image/image-icon.d.ts

@@ -1 +1,2 @@
-export declare const ImageIcon: () => JSX.Element;
+import React from 'react';
+export declare const ImageIcon: () => React.JSX.Element;

package/es/components/image/image.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ImageProps = {
     src?: string;

package/es/components/image/lazy-detector.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 declare type Props = {
     onActive: () => void;
 };

package/es/components/image-uploader/image-uploader.d.ts

@@ -1,4 +1,5 @@
-import React, { FC, InputHTMLAttributes } from 'react';
+import React from 'react';
+import type { ReactNode, InputHTMLAttributes, ReactElement } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { ImageProps } from '../image';
 import { GridProps } from '../grid';
@@ -29,7 +30,7 @@ export declare type ImageUploaderProps = {
     disableUpload?: boolean;
     showUpload?: boolean;
     deletable?: boolean;
-    deleteIcon?: React.ReactNode;
+    deleteIcon?: ReactNode;
     capture?: InputHTMLAttributes<unknown>['capture'];
     onPreview?: (index: number, item: ImageUploadItem) => void;
     beforeUpload?: (file: File, files: File[]) => Promise<File | null> | File | null;
@@ -38,8 +39,39 @@ export declare type ImageUploaderProps = {
     preview?: boolean;
     showFailed?: boolean;
     imageFit?: ImageProps['fit'];
-    children?: React.ReactNode;
-    renderItem?: (originNode: React.ReactElement, file: ImageUploadItem, fileList: ImageUploadItem[]) => React.ReactNode;
+    children?: ReactNode;
+    renderItem?: (originNode: ReactElement, file: ImageUploadItem, fileList: ImageUploadItem[]) => ReactNode;
 } & NativeProps<'--cell-size' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
-export declare const ImageUploader: FC<ImageUploaderProps>;
+export interface ImageUploaderRef {
+    nativeElement: HTMLInputElement | null;
+}
+export declare const ImageUploader: React.ForwardRefExoticComponent<{
+    defaultValue?: ImageUploadItem[] | undefined;
+    value?: ImageUploadItem[] | undefined;
+    columns?: number | undefined;
+    onChange?: ((items: ImageUploadItem[]) => void) | undefined;
+    onUploadQueueChange?: ((tasks: UploadTask[]) => void) | undefined;
+    accept?: string | undefined;
+    multiple?: boolean | undefined;
+    maxCount?: number | undefined;
+    onCountExceed?: ((exceed: number) => void) | undefined;
+    disableUpload?: boolean | undefined;
+    showUpload?: boolean | undefined;
+    deletable?: boolean | undefined;
+    deleteIcon?: ReactNode;
+    capture?: InputHTMLAttributes<unknown>['capture'];
+    onPreview?: ((index: number, item: ImageUploadItem) => void) | undefined;
+    beforeUpload?: ((file: File, files: File[]) => Promise<File | null> | File | null) | undefined;
+    upload: (file: File) => Promise<ImageUploadItem>;
+    onDelete?: ((item: ImageUploadItem) => boolean | Promise<boolean> | void) | undefined;
+    preview?: boolean | undefined;
+    showFailed?: boolean | undefined;
+    imageFit?: ImageProps['fit'];
+    children?: ReactNode;
+    renderItem?: ((originNode: ReactElement, file: ImageUploadItem, fileList: ImageUploadItem[]) => ReactNode) | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--gap" | "--gap-vertical" | "--gap-horizontal" | "--cell-size", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ImageUploaderRef>>;
 export {};

package/es/components/image-uploader/image-uploader.js

@@ -1,5 +1,5 @@
 import { __awaiter } from "tslib";
-import React, { useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState, useImperativeHandle } from 'react';
 import { AddOutline, CloseOutline } from 'antd-mobile-icons';
 import { mergeProps } from '../../utils/with-default-props';
 import ImageViewer from '../image-viewer';
@@ -27,7 +27,7 @@ const defaultProps = {
   showFailed: true,
   imageFit: 'cover'
 };
-export const ImageUploader = p => {
+export const ImageUploader = forwardRef((p, ref) => {
   const {
     locale
   } = useConfig();
@@ -41,6 +41,7 @@ export const ImageUploader = p => {
   const containerSize = useSize(containerRef);
   const gapMeasureRef = useRef(null);
   const [cellSize, setCellSize] = useState(80);
+  const inputRef = useRef(null);
   useIsomorphicLayoutEffect(() => {
     const gapMeasure = gapMeasureRef.current;
     if (columns && containerSize && gapMeasure) {
@@ -217,6 +218,7 @@ export const ImageUploader = p => {
   }, React.createElement("span", {
     className: `${classPrefix}-upload-button-icon`
   }, React.createElement(AddOutline, null))), !props.disableUpload && React.createElement("input", {
+    ref: inputRef,
     capture: props.capture,
     accept: props.accept,
     multiple: props.multiple,
@@ -225,6 +227,11 @@ export const ImageUploader = p => {
     onChange: onChange,
     "aria-hidden": true
   })));
+  useImperativeHandle(ref, () => ({
+    get nativeElement() {
+      return inputRef.current;
+    }
+  }));
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix,
     ref: containerRef
@@ -240,4 +247,4 @@ export const ImageUploader = p => {
     wrap: true,
     block: true
   }, contentNode.props.children)));
-};
+});

package/es/components/image-uploader/index.d.ts

@@ -1,4 +1,4 @@
 import { ImageUploader } from './image-uploader';
 import './image-uploader.less';
-export type { ImageUploadItem, ImageUploaderProps, UploadTask, } from './image-uploader';
+export type { ImageUploadItem, ImageUploaderRef, ImageUploaderProps, UploadTask, } from './image-uploader';
 export default ImageUploader;

package/es/components/image-uploader/preview-item.d.ts

@@ -1,11 +1,11 @@
-import React, { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { TaskStatus } from './image-uploader';
 import type { ImageProps } from '../image';
 declare type Props = {
     onClick?: () => void;
     onDelete?: () => void;
     deletable: boolean;
-    deleteIcon: React.ReactNode;
+    deleteIcon: ReactNode;
     url?: string;
     file?: File;
     status?: TaskStatus;

package/es/components/image-viewer/image-viewer.d.ts

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { GetContainer } from '../../utils/render-to-container';
 import { SlidesRef } from './slides';
 export declare type ImageViewerProps = {
@@ -8,7 +9,7 @@ export declare type ImageViewerProps = {
     visible?: boolean;
     onClose?: () => void;
     afterClose?: () => void;
-    renderFooter?: (image: string) => React.ReactNode;
+    renderFooter?: (image: string) => ReactNode;
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerRef = SlidesRef;
@@ -16,11 +17,11 @@ export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image' | 're
     images?: string[];
     defaultIndex?: number;
     onIndexChange?: (index: number) => void;
-    renderFooter?: (image: string, index: number) => React.ReactNode;
+    renderFooter?: (image: string, index: number) => ReactNode;
 };
 export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<ImageViewerProps, "image" | "renderFooter"> & {
     images?: string[] | undefined;
     defaultIndex?: number | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
-    renderFooter?: ((image: string, index: number) => React.ReactNode) | undefined;
+    renderFooter?: ((image: string, index: number) => ReactNode) | undefined;
 } & React.RefAttributes<SlidesRef>>;

package/es/components/image-viewer/image-viewer.js

@@ -24,10 +24,7 @@ export const ImageViewer = p => {
     className: `${classPrefix}-content`
   }, props.image && React.createElement(Slide, {
     image: props.image,
-    onTap: () => {
-      var _a;
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    onTap: props.onClose,
     maxZoom: props.maxZoom
   })), props.image && React.createElement("div", {
     className: `${classPrefix}-footer`
@@ -51,11 +48,12 @@ export const MultiImageViewer = forwardRef((p, ref) => {
       (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
     }
   }));
-  const onSlideChange = useCallback(index => {
+  const onSlideChange = useCallback(newIndex => {
     var _a;
-    setIndex(index);
-    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
-  }, [props.onIndexChange]);
+    if (newIndex === index) return;
+    setIndex(newIndex);
+    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, newIndex);
+  }, [props.onIndexChange, index]);
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
@@ -69,10 +67,7 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     defaultIndex: index,
     onIndexChange: onSlideChange,
     images: props.images,
-    onTap: () => {
-      var _a;
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    onTap: props.onClose,
     maxZoom: props.maxZoom
   })), props.images && React.createElement("div", {
     className: `${classPrefix}-footer`

package/es/components/image-viewer/slide.d.ts

@@ -1,8 +1,8 @@
-import { FC, MutableRefObject } from 'react';
+import type { FC, MutableRefObject } from 'react';
 declare type Props = {
     image: string;
     maxZoom: number | 'auto';
-    onTap: () => void;
+    onTap?: () => void;
     onZoomChange?: (zoom: number) => void;
     dragLockRef?: MutableRefObject<boolean>;
 };