antd-mobile 5.29.0 → 5.30.0

package/2x/cjs/locales/nl-NL.d.ts

@@ -0,0 +1,134 @@
+declare const nlNL: {
+    locale: string;
+    common: {
+        confirm: string;
+        cancel: string;
+        loading: string;
+        close: string;
+    };
+    Calendar: {
+        markItems: string[];
+        renderYearAndMonth: (year: number, month: number) => string;
+    };
+    Cascader: {
+        placeholder: string;
+    };
+    Dialog: {
+        ok: string;
+    };
+    DatePicker: {
+        tillNow: string;
+    };
+    ErrorBlock: {
+        default: {
+            title: string;
+            description: string;
+        };
+        busy: {
+            title: string;
+            description: string;
+        };
+        disconnected: {
+            title: string;
+            description: string;
+        };
+        empty: {
+            title: string;
+            description: string;
+        };
+    };
+    Form: {
+        required: string;
+        optional: string;
+        defaultValidateMessages: {
+            default: string;
+            required: string;
+            enum: string;
+            whitespace: string;
+            date: {
+                format: string;
+                parse: string;
+                invalid: string;
+            };
+            types: {
+                string: string;
+                method: string;
+                array: string;
+                object: string;
+                number: string;
+                date: string;
+                boolean: string;
+                integer: string;
+                float: string;
+                regexp: string;
+                email: string;
+                url: string;
+                hex: string;
+            };
+            string: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            number: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            array: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            pattern: {
+                mismatch: string;
+            };
+        };
+    };
+    ImageUploader: {
+        uploading: string;
+        upload: string;
+    };
+    InfiniteScroll: {
+        noMore: string;
+        failedToLoad: string;
+        retry: string;
+    };
+    Input: {
+        clear: string;
+    };
+    Mask: {
+        name: string;
+    };
+    Modal: {
+        ok: string;
+    };
+    PasscodeInput: {
+        name: string;
+    };
+    PullToRefresh: {
+        pulling: string;
+        canRelease: string;
+        complete: string;
+    };
+    SearchBar: {
+        name: string;
+    };
+    Slider: {
+        name: string;
+    };
+    Stepper: {
+        decrease: string;
+        increase: string;
+    };
+    Switch: {
+        name: string;
+    };
+    Selector: {
+        name: string;
+    };
+};
+export default nlNL;

package/2x/cjs/locales/nl-NL.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _mergeLocale = require("../utils/merge-locale");
+var _base = require("./base");
+const typeTemplate = '${label} is niet geldig als ${type}';
+const nlNL = (0, _mergeLocale.mergeLocale)(_base.base, {
+  locale: 'nl-NL',
+  common: {
+    confirm: 'Bevestigen',
+    cancel: 'Annuleren',
+    loading: 'Laden',
+    close: 'Sluiten'
+  },
+  Calendar: {
+    markItems: ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'],
+    renderYearAndMonth: (year, month) => `${month}-${year}`
+  },
+  Cascader: {
+    placeholder: 'Selecteren'
+  },
+  Dialog: {
+    ok: 'OK'
+  },
+  DatePicker: {
+    tillNow: 'Tot nu'
+  },
+  ErrorBlock: {
+    default: {
+      title: 'Oeps, er is iets fout gegaan',
+      description: 'Wacht een minuutje en probeer opnieuw'
+    },
+    busy: {
+      title: 'Oeps, niet aan het laden',
+      description: 'Probeer de pagina te vernieuwen'
+    },
+    disconnected: {
+      title: 'Netwerk is bezet',
+      description: 'Probeer de pagina te vernieuwen'
+    },
+    empty: {
+      title: 'Hmm, dat kon niet gevonden worden...',
+      description: 'Wil je een nieuwe zoekopdracht proberen?'
+    }
+  },
+  Form: {
+    required: 'Verplicht',
+    optional: 'Optioneel',
+    defaultValidateMessages: {
+      default: 'Veldvalidatiefout voor ${label}',
+      required: 'Vul ${label} in',
+      enum: '${label} moet een van de volgende zijn: [${enum}]',
+      whitespace: '${label} mag geen leeg karakter zijn',
+      date: {
+        format: 'Ongeldige datumnotatie voor ${label}',
+        parse: 'Kan ${label} niet converteren naar een datum',
+        invalid: 'Ongeldige datum voor ${label}'
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate
+      },
+      string: {
+        len: '${label} moet ${len} tekens zijn',
+        min: '${label} moet minimaal ${min} tekens zijn',
+        max: '${label} mag maximaal ${max} tekens zijn',
+        range: '${label} moet tussen ${min}-${max} tekens zijn'
+      },
+      number: {
+        len: '${label} moet gelijk zijn aan ${len}',
+        min: '${label} moet minimaal ${min} zijn',
+        max: '${label} mag maximaal ${max} zijn',
+        range: '${label} moet tussen ${min}-${max} zijn'
+      },
+      array: {
+        len: 'Moet ${len} ${label} zijn',
+        min: 'Moet minimaal ${min} ${label} zijn',
+        max: 'Mag maximaal ${max} ${label} zijn',
+        range: 'Aantal ${label} moet tussen ${min}-${max} zijn'
+      },
+      pattern: {
+        mismatch: '${label} komt niet overeen met het patroon ${pattern}'
+      }
+    }
+  },
+  ImageUploader: {
+    uploading: 'Uploaden...',
+    upload: 'Uploaden'
+  },
+  InfiniteScroll: {
+    noMore: 'Geen meer',
+    failedToLoad: 'Laden mislukt',
+    retry: 'Opnieuw proberen'
+  },
+  Input: {
+    clear: 'wissen'
+  },
+  Mask: {
+    name: 'Masker'
+  },
+  Modal: {
+    ok: 'Begrepen'
+  },
+  PasscodeInput: {
+    name: 'Invoer voor toegangscode'
+  },
+  PullToRefresh: {
+    pulling: 'Trek naar beneden om te vernieuwen',
+    canRelease: 'Los om onmiddellijk te vernieuwen',
+    complete: 'Vernieuwen voltooid'
+  },
+  SearchBar: {
+    name: 'Zoekbalk'
+  },
+  Slider: {
+    name: 'Schuifregelaar'
+  },
+  Stepper: {
+    decrease: 'afnemen',
+    increase: 'toenemen'
+  },
+  Switch: {
+    name: 'Schakelaar'
+  },
+  Selector: {
+    name: 'Selector'
+  }
+});
+var _default = nlNL;
+exports.default = _default;

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

@@ -81,7 +81,7 @@ export const Calendar = forwardRef((p, ref) => {
         return;
       }
     }
-    setCurrent(current[action](num, type));
+    setCurrent(nxtCurrent);
   };
   const header = React.createElement("div", {
     className: `${classPrefix}-header`

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

@@ -60,7 +60,9 @@ const CollapsePanelContent = props => {
     }
   }, [visible]);
   return React.createElement(animated.div, {
-    className: `${classPrefix}-panel-content`,
+    className: classNames(`${classPrefix}-panel-content`, {
+      [`${classPrefix}-panel-content-active`]: visible
+    }),
     style: {
       height: height.to(v => {
         if (height.idle && visible) {

package/2x/es/components/date-picker/date-picker-date-utils.d.ts

@@ -4,4 +4,4 @@ import { RenderLabel } from '../date-picker-view/date-picker-view';
 export declare type DatePrecision = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
 export declare function generateDatePickerColumns(selected: string[], min: Date, max: Date, precision: DatePrecision, renderLabel: RenderLabel, filter: DatePickerFilter | undefined, tillNow?: boolean): PickerColumn[];
 export declare function convertDateToStringArray(date: Date | undefined | null): string[];
-export declare function convertStringArrayToDate(value: (string | null | undefined)[]): Date;
+export declare function convertStringArrayToDate<T extends string | number | null | undefined>(value: T[]): Date;

package/2x/es/components/date-picker/date-picker-utils.d.ts

@@ -6,5 +6,5 @@ export declare type DatePickerFilter = Partial<Record<Precision, (val: number, e
     date: Date;
 }) => boolean>>;
 export declare const convertDateToStringArray: (date: Date | undefined | null, precision: Precision) => string[];
-export declare const convertStringArrayToDate: (value: (string | null | undefined)[], precision: Precision) => Date;
+export declare const convertStringArrayToDate: <T extends string | number | null | undefined>(value: T[], precision: Precision) => Date;
 export declare const generateDatePickerColumns: (selected: string[], min: Date, max: Date, precision: Precision, renderLabel: RenderLabel, filter: DatePickerFilter | undefined, tillNow?: boolean | undefined) => import("../picker-view").PickerColumn[];

package/2x/es/components/date-picker/date-picker-week-utils.d.ts

@@ -4,4 +4,4 @@ import type { DatePickerFilter } from './date-picker-utils';
 export declare type WeekPrecision = 'year' | 'week' | 'week-day';
 export declare function generateDatePickerColumns(selected: string[], min: Date, max: Date, precision: WeekPrecision, renderLabel: (type: WeekPrecision, data: number) => ReactNode, filter: DatePickerFilter | undefined): PickerColumn[];
 export declare function convertDateToStringArray(date: Date | undefined | null): string[];
-export declare function convertStringArrayToDate(value: (string | null | undefined)[]): Date;
+export declare function convertStringArrayToDate<T extends string | number | null | undefined>(value: T[]): Date;

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

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

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

@@ -6,11 +6,13 @@ import { ItemChildrenWrap } from './item';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
+import { defaultPopupBaseProps } from '../popup/popup-base-props';
 const classPrefix = `adm-dropdown`;
 const defaultProps = {
   defaultActiveKey: null,
   closeOnMaskClick: true,
-  closeOnClickAway: false
+  closeOnClickAway: false,
+  getContainer: defaultPopupBaseProps['getContainer']
 };
 const Dropdown = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
@@ -78,6 +80,7 @@ const Dropdown = forwardRef((p, ref) => {
   }, navs), React.createElement(Popup, {
     visible: !!value,
     position: 'top',
+    getContainer: props.getContainer,
     className: `${classPrefix}-popup`,
     maskClassName: `${classPrefix}-popup-mask`,
     bodyClassName: `${classPrefix}-popup-body`,

package/2x/es/components/dropdown/index.d.ts

@@ -8,6 +8,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     closeOnClickAway?: boolean | undefined;
     onChange?: ((key: string | null) => void) | undefined;
     arrow?: import("react").ReactNode;
+    getContainer?: import("../../utils/render-to-container").GetContainer | undefined;
 } & {
     className?: string | undefined;
     style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useState } from 'react';
-import runes from 'runes';
+import runes from 'runes2';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 import { useResizeEffect } from '../../utils/use-resize-effect';

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

@@ -43,7 +43,7 @@
   white-space: nowrap;
   margin-right: 40px;
   font-size: 24px;
-  background-color: var(--adm-color-box);
+  background-color: var(--adm-color-fill-content);
   color: var(--adm-color-weak);
   padding: 8px 24px;
   border-radius: 200px;

package/2x/es/components/form/form-subscribe.js

@@ -5,7 +5,10 @@ import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-upda
 export const FormSubscribe = props => {
   const update = useUpdate();
   const form = useContext(FieldContext);
-  return React.createElement(React.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map(namePath => React.createElement(Watcher, {
+  const value = form.getFieldsValue(props.to);
+  // Memo to avoid useless render
+  const childNode = React.useMemo(() => props.children(value, form), [JSON.stringify(value)]);
+  return React.createElement(React.Fragment, null, childNode, props.to.map(namePath => React.createElement(Watcher, {
     key: namePath.toString(),
     form: form,
     namePath: namePath,

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

@@ -72,7 +72,7 @@ export const Form = forwardRef((p, ref) => {
       hasFeedback,
       layout,
       requiredMarkStyle,
-      disabled: disabled
+      disabled
     }
   }, lists), footer && React.createElement("div", {
     className: `${classPrefix}-footer`

package/2x/es/components/form/index.d.ts

@@ -4,7 +4,7 @@ export declare type FormLayout = 'vertical' | 'horizontal';
 export type { FormProps, FormInstance } from './form';
 export type { FormItemProps } from './form-item';
 export type { FormSubscribeProps } from './form-subscribe';
-export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
+export type { ValidateMessages, FieldData, NamePath, Rule, RuleObject, RuleRender, } from 'rc-field-form/es/interface';
 export type { FormArrayField, FormArrayOperation, FormArrayProps, } from './form-array';
 declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
     className?: string | undefined;

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

@@ -1,5 +1,5 @@
 import { mergeProps } from '../../utils/with-default-props';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { staged } from 'staged-components';
 import { toCSSLength } from '../../utils/to-css-length';
@@ -24,6 +24,7 @@ export const Image = staged(p => {
   const [loaded, setLoaded] = useState(false);
   const [failed, setFailed] = useState(false);
   const ref = useRef(null);
+  const imgRef = useRef(null);
   let src = props.src;
   let srcSet = props.srcSet;
   const [initialized, setInitialized] = useState(!props.lazy);
@@ -33,11 +34,19 @@ export const Image = staged(p => {
     setLoaded(false);
     setFailed(false);
   }, [src]);
+  useEffect(() => {
+    var _a;
+    // for nextjs ssr
+    if ((_a = imgRef.current) === null || _a === void 0 ? void 0 : _a.complete) {
+      setLoaded(true);
+    }
+  }, []);
   function renderInner() {
     if (failed) {
       return React.createElement(React.Fragment, null, props.fallback);
     }
     const img = React.createElement("img", {
+      ref: imgRef,
       className: `${classPrefix}-img`,
       src: src,
       alt: props.alt,

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

@@ -118,9 +118,11 @@ export const ImageUploader = p => {
         file
       }));
       setTasks(prev => [...getFinalTasks(prev), ...newTasks]);
-      yield Promise.all(newTasks.map(currentTask => __awaiter(this, void 0, void 0, function* () {
+      const newVal = [];
+      yield Promise.all(newTasks.map((currentTask, index) => __awaiter(this, void 0, void 0, function* () {
         try {
           const result = yield props.upload(currentTask.file);
+          newVal[index] = result;
           setTasks(prev => {
             return prev.map(task => {
               if (task.id === currentTask.id) {
@@ -132,10 +134,6 @@ export const ImageUploader = p => {
               return task;
             });
           });
-          setValue(prev => {
-            const newVal = Object.assign({}, result);
-            return [...prev, newVal];
-          });
         } catch (e) {
           setTasks(prev => {
             return prev.map(task => {
@@ -150,6 +148,7 @@ export const ImageUploader = p => {
           throw e;
         }
       }))).catch(error => console.error(error));
+      setValue(prev => prev.concat(newVal));
     });
   }
   const imageViewerHandlerRef = useRef(null);

package/2x/es/components/number-keyboard/number-keyboard.js

@@ -97,7 +97,7 @@ export const NumberKeyboard = p => {
         var _a;
         (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
       },
-      role: 'button',
+      role: 'grid',
       title: 'CLOSE',
       tabIndex: -1
     }, React.createElement(DownOutline, null)));
@@ -164,11 +164,13 @@ export const NumberKeyboard = p => {
       onBackspacePressEnd();
     },
     title: 'BACKSPACE',
-    role: 'button'
+    role: 'grid',
+    tabIndex: -1
   }, React.createElement(TextDeletionOutline, null)), React.createElement("div", {
     className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
     onTouchEnd: e => onKeyPress(e, 'OK'),
-    role: 'button',
+    role: 'grid',
+    tabIndex: -1,
     "aria-label": confirmText
   }, confirmText))), props.safeArea && React.createElement("div", {
     className: `${classPrefix}-footer`

package/2x/es/components/page-indicator/page-indicator.css

@@ -29,7 +29,7 @@
 
 .adm-page-indicator-color-white {
   --dot-color: rgba(255, 255, 255, 0.5);
-  --active-dot-color: var(--adm-color-white);
+  --active-dot-color: var(--adm-color-text-light-solid);
 }
 
 .adm-page-indicator-horizontal {

package/2x/es/components/picker-view/picker-view.d.ts

@@ -1,14 +1,14 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { PickerProps } from '../picker';
-export declare type PickerValue = string | null;
+export declare type PickerValue = string | number | null;
 export declare type PickerValueExtend = {
     columns: PickerColumnItem[][];
     items: (PickerColumnItem | null)[];
 };
 export declare type PickerColumnItem = {
     label: ReactNode;
-    value: string;
+    value: string | number;
     key?: string | number;
 };
 export declare type PickerColumn = (string | PickerColumnItem)[];

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

@@ -13,6 +13,7 @@ import { CloseOutline } from 'antd-mobile-icons';
 import { defaultPopupBaseProps } from './popup-base-props';
 import { useInnerVisible } from '../../utils/use-inner-visible';
 import { useConfig } from '../config-provider';
+import { useDrag } from '@use-gesture/react';
 const classPrefix = `adm-popup`;
 const defaultProps = Object.assign(Object.assign({}, defaultPopupBaseProps), {
   position: 'bottom'
@@ -53,14 +54,26 @@ export const Popup = p => {
       }
     }
   });
+  const bind = useDrag(({
+    swipe: [, swipeY]
+  }) => {
+    var _a;
+    if (swipeY === 1 && props.position === 'bottom' || swipeY === -1 && props.position === 'top') {
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, {
+    axis: 'y',
+    enabled: ['top', 'bottom'].includes(props.position)
+  });
   const maskVisible = useInnerVisible(active && props.visible);
-  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
+  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", Object.assign({
     className: classPrefix,
     onClick: props.onClick,
     style: {
-      display: active ? undefined : 'none'
+      display: active ? undefined : 'none',
+      touchAction: ['top', 'bottom'].includes(props.position) ? 'none' : 'auto'
     }
-  }, props.mask && React.createElement(Mask, {
+  }, bind()), props.mask && React.createElement(Mask, {
     visible: maskVisible,
     forceRender: props.forceRender,
     destroyOnClose: props.destroyOnClose,

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

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { InputRef, InputProps } from '../input';
 import { NativeProps } from '../../utils/native-props';
 export declare type SearchBarRef = InputRef;
-export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear'> & {
+export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear' | 'onCompositionStart' | 'onCompositionEnd'> & {
     value?: string;
     defaultValue?: string;
     maxLength?: number;
@@ -17,7 +17,7 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
     onChange?: (val: string) => void;
     onCancel?: () => void;
 } & NativeProps<'--background' | '--border-radius' | '--placeholder-color' | '--height' | '--padding-left'>;
-export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onFocus" | "onBlur" | "onClear"> & {
+export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onClear"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     maxLength?: number | undefined;

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

@@ -110,11 +110,15 @@ export const SearchBar = forwardRef((p, ref) => {
       }
     },
     "aria-label": locale.SearchBar.name,
-    onCompositionStart: () => {
+    onCompositionStart: e => {
+      var _a;
       composingRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onCompositionEnd: () => {
+    onCompositionEnd: e => {
+      var _a;
       composingRef.current = false;
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }
   })), renderCancelButton()));
 });

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

@@ -1,6 +1,8 @@
 .adm-step {
   --line-to-next-color: #e5e5e5;
   --icon-color: #e5e5e5;
+  position: relative;
+  z-index: 0;
 }
 
 .adm-step .adm-step-indicator {