antd-mobile 5.11.2 → 5.12.0

package/2x/cjs/components/calendar/calendar.d.ts

@@ -9,6 +9,10 @@ export declare type CalenderRef = {
     jumpToToday: () => void;
 };
 export declare type CalendarProps = {
+    prevMonthButton?: React.ReactNode;
+    prevYearButton?: React.ReactNode;
+    nextMonthButton?: React.ReactNode;
+    nextYearButton?: React.ReactNode;
     onPageChange?: (year: number, month: number) => void;
     weekStartsOn?: 'Monday' | 'Sunday';
     renderLabel?: (date: Date) => string | null | undefined;

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

@@ -41,7 +41,11 @@ const classPrefix = 'adm-calendar';
 const defaultProps = {
   weekStartsOn: 'Sunday',
   defaultValue: null,
-  allowClear: true
+  allowClear: true,
+  prevMonthButton: _react.default.createElement(_arrowLeft.ArrowLeft, null),
+  prevYearButton: _react.default.createElement(_arrowLeftDouble.ArrowLeftDouble, null),
+  nextMonthButton: _react.default.createElement(_arrowLeft.ArrowLeft, null),
+  nextYearButton: _react.default.createElement(_arrowLeftDouble.ArrowLeftDouble, null)
 };
 const Calendar = (0, _react.forwardRef)((p, ref) => {
   const today = (0, _dayjs.default)();
@@ -99,28 +103,28 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
   const header = _react.default.createElement("div", {
     className: `${classPrefix}-header`
   }, _react.default.createElement("a", {
-    className: `${classPrefix}-arrow-button`,
+    className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-year`,
     onClick: () => {
       setCurrent(current.subtract(1, 'year'));
     }
-  }, _react.default.createElement(_arrowLeftDouble.ArrowLeftDouble, null)), _react.default.createElement("a", {
-    className: `${classPrefix}-arrow-button`,
+  }, props.prevYearButton), _react.default.createElement("a", {
+    className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-month`,
     onClick: () => {
       setCurrent(current.subtract(1, 'month'));
     }
-  }, _react.default.createElement(_arrowLeft.ArrowLeft, null)), _react.default.createElement("div", {
+  }, props.prevMonthButton), _react.default.createElement("div", {
     className: `${classPrefix}-title`
   }, locale.Calendar.renderYearAndMonth(current.year(), current.month() + 1)), _react.default.createElement("a", {
-    className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-right`,
+    className: (0, _classnames.default)(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-month`),
     onClick: () => {
       setCurrent(current.add(1, 'month'));
     }
-  }, _react.default.createElement(_arrowLeft.ArrowLeft, null)), _react.default.createElement("a", {
-    className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-right`,
+  }, props.nextMonthButton), _react.default.createElement("a", {
+    className: (0, _classnames.default)(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-year`),
     onClick: () => {
       setCurrent(current.add(1, 'year'));
     }
-  }, _react.default.createElement(_arrowLeftDouble.ArrowLeftDouble, null)));
+  }, props.nextYearButton));
 
   const maxDay = (0, _react.useMemo)(() => props.max && (0, _dayjs.default)(props.max), [props.max]);
   const minDay = (0, _react.useMemo)(() => props.min && (0, _dayjs.default)(props.min), [props.min]);

package/2x/cjs/components/capsule-tabs/capsule-tabs.css

@@ -1,5 +1,6 @@
 .adm-capsule-tabs {
   position: relative;
+  min-width: 0;
 }
 
 .adm-capsule-tabs-header {

package/2x/cjs/components/cascade-picker/cascade-picker.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import type { PickerProps } from '../picker';
+import React from 'react';
+import type { PickerProps, PickerRef } from '../picker';
+export declare type CascadePickerRef = PickerRef;
 export declare type CascadePickerOption = {
     label: string;
     value: string;
@@ -8,4 +9,6 @@ export declare type CascadePickerOption = {
 export declare type CascadePickerProps = Omit<PickerProps, 'columns'> & {
     options: CascadePickerOption[];
 };
-export declare const CascadePicker: FC<CascadePickerProps>;
+export declare const CascadePicker: React.ForwardRefExoticComponent<Omit<PickerProps, "columns"> & {
+    options: CascadePickerOption[];
+} & React.RefAttributes<import("../picker").PickerActions>>;

package/2x/cjs/components/cascade-picker/cascade-picker.js

@@ -7,7 +7,7 @@ exports.CascadePicker = void 0;
 
 var _tslib = require("tslib");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _picker = _interopRequireDefault(require("../picker"));
 
@@ -15,15 +15,19 @@ var _cascadePickerUtils = require("./cascade-picker-utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const CascadePicker = props => {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const CascadePicker = (0, _react.forwardRef)((props, ref) => {
   const {
     options
   } = props,
         pickerProps = (0, _tslib.__rest)(props, ["options"]);
   const columnsFn = (0, _cascadePickerUtils.useColumnsFn)(options);
   return _react.default.createElement(_picker.default, Object.assign({}, pickerProps, {
+    ref: ref,
     columns: columnsFn
   }));
-};
-
+});
 exports.CascadePicker = CascadePicker;

package/2x/cjs/components/cascade-picker/index.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { prompt } from './prompt';
-export type { CascadePickerProps, CascadePickerOption } from './cascade-picker';
-declare const _default: import("react").FC<import("./cascade-picker").CascadePickerProps> & {
+export type { CascadePickerProps, CascadePickerRef, CascadePickerOption, } from './cascade-picker';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("../picker").PickerProps, "columns"> & {
+    options: import("./cascade-picker").CascadePickerOption[];
+} & import("react").RefAttributes<import("../picker").PickerActions>> & {
     prompt: typeof prompt;
 };
 export default _default;

package/2x/cjs/components/date-picker/date-picker.d.ts

@@ -1,7 +1,8 @@
-import { FC, ReactNode } from 'react';
-import type { PickerProps } from '../picker';
+import React, { ReactNode } from 'react';
+import type { PickerProps, PickerRef, PickerActions } from '../picker';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from './date-picker-utils';
+export declare type DatePickerRef = PickerRef;
 export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style' | 'mouseWheel'> & {
     value?: Date | null;
     defaultValue?: Date | null;
@@ -10,8 +11,21 @@ export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' |
     min?: Date;
     max?: Date;
     precision?: Precision;
-    children?: (value: Date | null) => ReactNode;
+    children?: (value: Date | null, actions: PickerActions) => ReactNode;
     renderLabel?: (type: Precision, data: number) => ReactNode;
     filter?: DatePickerFilter;
 } & NativeProps;
-export declare const DatePicker: FC<DatePickerProps>;
+export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "cancelText" | "closeOnMaskClick" | "mouseWheel" | "confirmText"> & {
+    value?: Date | null | undefined;
+    defaultValue?: Date | null | undefined;
+    onSelect?: ((value: Date) => void) | undefined;
+    onConfirm?: ((value: Date) => void) | undefined;
+    min?: Date | undefined;
+    max?: Date | undefined;
+    precision?: Precision | undefined;
+    children?: ((value: Date | null, actions: PickerActions) => ReactNode) | undefined;
+    renderLabel?: ((type: Precision, data: number) => ReactNode) | undefined;
+    filter?: Partial<Record<Precision, (val: number, extend: {
+        date: Date;
+    }) => boolean>> | undefined;
+} & NativeProps<never> & React.RefAttributes<PickerActions>>;

package/2x/cjs/components/date-picker/date-picker.js

@@ -35,8 +35,7 @@ const defaultProps = {
   renderLabel: _datePickerUtils.defaultRenderLabel,
   defaultValue: null
 };
-
-const DatePicker = p => {
+const DatePicker = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const [value, setValue] = (0, _usePropsValue.usePropsValue)({
     value: props.value,
@@ -65,6 +64,7 @@ const DatePicker = p => {
   });
   const columns = (0, _react.useCallback)(selected => (0, _datePickerUtils.generateDatePickerColumns)(selected, props.min, props.max, props.precision, props.renderLabel, props.filter), [props.min, props.max, props.precision, props.renderLabel]);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_picker.default, {
+    ref: ref,
     columns: columns,
     value: pickerValue,
     onCancel: props.onCancel,
@@ -82,11 +82,10 @@ const DatePicker = p => {
     title: props.title,
     stopPropagation: props.stopPropagation,
     mouseWheel: props.mouseWheel
-  }, () => {
+  }, (_, actions) => {
     var _a;
 
-    return (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, value);
+    return (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, value, actions);
   }));
-};
-
+});
 exports.DatePicker = DatePicker;

package/2x/cjs/components/date-picker/index.d.ts

@@ -1,9 +1,22 @@
 /// <reference types="react" />
 import './date-picker.less';
 import { prompt } from './prompt';
-export type { DatePickerProps } from './date-picker';
+export type { DatePickerProps, DatePickerRef } from './date-picker';
 export type { DatePickerFilter } from './date-picker-utils';
-declare const _default: import("react").FC<import("./date-picker").DatePickerProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "cancelText" | "closeOnMaskClick" | "mouseWheel" | "confirmText"> & {
+    value?: Date | null | undefined;
+    defaultValue?: Date | null | undefined;
+    onSelect?: ((value: Date) => void) | undefined;
+    onConfirm?: ((value: Date) => void) | undefined;
+    min?: Date | undefined;
+    max?: Date | undefined;
+    precision?: import("./date-picker-utils").Precision | undefined;
+    children?: ((value: Date | null, actions: import("../picker").PickerActions) => import("react").ReactNode) | undefined;
+    renderLabel?: ((type: import("./date-picker-utils").Precision, data: number) => import("react").ReactNode) | undefined;
+    filter?: Partial<Record<import("./date-picker-utils").Precision, (val: number, extend: {
+        date: Date;
+    }) => boolean>> | undefined;
+} & import("../../utils/native-props").NativeProps<never> & import("react").RefAttributes<import("../picker").PickerActions>> & {
     prompt: typeof prompt;
 };
 export default _default;

package/2x/cjs/components/dialog/dialog.js

@@ -117,7 +117,7 @@ const Dialog = p => {
   const node = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: cls(),
     style: {
-      display: active ? 'unset' : 'none'
+      display: active ? undefined : 'none'
     }
   }, _react.default.createElement(_mask.default, {
     visible: props.visible,
@@ -128,7 +128,7 @@ const Dialog = p => {
   }), _react.default.createElement("div", {
     className: cls('wrap'),
     style: {
-      pointerEvents: props.visible ? 'unset' : 'none'
+      pointerEvents: props.visible ? undefined : 'none'
     }
   }, _react.default.createElement(_web.animated.div, {
     style: style

package/2x/cjs/components/form/form-item.d.ts

@@ -7,7 +7,7 @@ import type { FormLayout } from './index';
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
-export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
     label?: React.ReactNode;
     help?: React.ReactNode;
     hasFeedback?: boolean;
@@ -18,6 +18,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;
 } & NativeProps;
 export declare const FormItem: FC<FormItemProps>;
 export {};

package/2x/cjs/components/form/form-item.js

@@ -175,9 +175,8 @@ const FormItem = props => {
     validateTrigger: contextValidateTrigger
   } = (0, _react.useContext)(_FieldContext.default);
   const mergedValidateTrigger = (0, _undefinedFallback.undefinedFallback)(validateTrigger, contextValidateTrigger, trigger);
-
-  const updateRef = _react.default.useRef(0);
-
+  const widgetRef = (0, _react.useRef)(null);
+  const updateRef = (0, _react.useRef)(0);
   updateRef.current += 1;
   const [subMetas, setSubMetas] = (0, _react.useState)({});
   const onSubMetaChange = (0, _react.useCallback)((subMeta, namePath) => {
@@ -239,7 +238,7 @@ const FormItem = props => {
       htmlFor: fieldId,
       errors: errors,
       warnings: warnings,
-      onClick: onClick,
+      onClick: onClick && (e => onClick(e, widgetRef)),
       hidden: hidden,
       layout: layout,
       childElementPosition: childElementPosition,
@@ -316,6 +315,24 @@ const FormItem = props => {
 
       const childProps = Object.assign(Object.assign({}, children.props), control);
 
+      if ((0, _utils.isSafeSetRefComponent)(children)) {
+        childProps.ref = instance => {
+          const originRef = children.ref;
+
+          if (originRef) {
+            if (typeof originRef === 'function') {
+              originRef(instance);
+            }
+
+            if ('current' in originRef) {
+              originRef.current = instance;
+            }
+          }
+
+          widgetRef.current = instance;
+        };
+      }
+
       if (!childProps.id) {
         childProps.id = fieldId;
       } // We should keep user origin event handler

package/2x/cjs/components/form/utils.d.ts

@@ -1 +1,2 @@
 export declare function toArray<T>(candidate?: T | T[] | false): T[];
+export declare function isSafeSetRefComponent(component: any): boolean;

package/2x/cjs/components/form/utils.js

@@ -3,9 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.isSafeSetRefComponent = isSafeSetRefComponent;
 exports.toArray = toArray;
 
+var _reactIs = require("react-is");
+
 function toArray(candidate) {
   if (candidate === undefined || candidate === false) return [];
   return Array.isArray(candidate) ? candidate : [candidate];
+} // eslint-disable-next-line @typescript-eslint/ban-types
+
+
+function shouldConstruct(Component) {
+  const prototype = Component.prototype;
+  return !!(prototype && prototype.isReactComponent);
+} // https://github.com/facebook/react/blob/ce13860281f833de8a3296b7a3dad9caced102e9/packages/react-reconciler/src/ReactFiber.new.js#L225
+
+
+function isSimpleFunctionComponent(type) {
+  return typeof type === 'function' && !shouldConstruct(type) && type.defaultProps === undefined;
+}
+
+function isSafeSetRefComponent(component) {
+  if ((0, _reactIs.isFragment)(component)) return false;
+  if ((0, _reactIs.isMemo)(component)) return isSafeSetRefComponent(component.type);
+  return !isSimpleFunctionComponent(component.type);
 }

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

@@ -90,6 +90,7 @@ const ImageUploader = p => {
       } = e.target;
       if (!rawFiles) return;
       let files = [].slice.call(rawFiles);
+      e.target.value = ''; // HACK: fix the same file doesn't trigger onChange
 
       if (props.beforeUpload) {
         const postFiles = files.map(file => {
@@ -119,8 +120,6 @@ const ImageUploader = p => {
         file
       }));
       setTasks(prev => [...prev, ...newTasks]);
-      e.target.value = ''; // HACK: fix the same file doesn't trigger onChange
-
       yield Promise.all(newTasks.map(currentTask => (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
         try {
           const result = yield props.upload(currentTask.file);

package/2x/cjs/components/input/input.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick'> & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -23,7 +23,7 @@ export declare type InputRef = {
     blur: () => void;
     nativeElement: HTMLInputElement | null;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "onClick" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "autoFocus" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "onClick" | "name" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "autoFocus" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

package/2x/cjs/components/input/input.js

@@ -137,6 +137,7 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     pattern: props.pattern,
     inputMode: props.inputMode,
     type: props.type,
+    name: props.name,
     autoCapitalize: props.autoCapitalize,
     autoCorrect: props.autoCorrect,
     onKeyDown: handleKeydown,

package/2x/cjs/components/jumbo-tabs/jumbo-tabs.css

@@ -1,6 +1,7 @@
 .adm-jumbo-tabs {
   --gap: 16px;
   position: relative;
+  min-width: 0;
 }
 
 .adm-jumbo-tabs-header {

package/2x/cjs/components/list/list.css

@@ -50,6 +50,7 @@
   padding-left: var(--padding-left);
   position: relative;
   background-color: #ffffff;
+  line-height: 1.5;
 }
 
 .adm-list-item-title,

package/2x/cjs/components/mask/mask.js

@@ -97,7 +97,7 @@ const Mask = p => {
       background,
       opacity
     }, props.style), {
-      display: active ? 'unset' : 'none'
+      display: active ? undefined : 'none'
     }),
     onClick: e => {
       var _a;

package/2x/cjs/components/modal/modal.js

@@ -123,7 +123,7 @@ const Modal = p => {
   const node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: cls(),
     style: {
-      display: active ? 'unset' : 'none'
+      display: active ? undefined : 'none'
     }
   }, _react.default.createElement(_mask.default, {
     visible: props.visible,
@@ -134,7 +134,7 @@ const Modal = p => {
   }), _react.default.createElement("div", {
     className: cls('wrap'),
     style: {
-      pointerEvents: props.visible ? 'unset' : 'none'
+      pointerEvents: props.visible ? undefined : 'none'
     }
   }, _react.default.createElement(_web.animated.div, {
     style: style

package/2x/cjs/components/picker/index.d.ts

@@ -1,9 +1,50 @@
-/// <reference types="react" />
 import './picker.less';
 import { prompt } from './prompt';
-export type { PickerProps } from './picker';
+export type { PickerProps, PickerRef, PickerActions } from './picker';
 export type { PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from '../picker-view';
-declare const _default: import("react").NamedExoticComponent<import("./picker").PickerProps> & {
+declare const _default: import("react").NamedExoticComponent<{
+    columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
+    value?: import("../picker-view").PickerValue[] | undefined;
+    defaultValue?: import("../picker-view").PickerValue[] | undefined;
+    onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+    onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    visible?: boolean | undefined;
+    title?: import("react").ReactNode;
+    confirmText?: import("react").ReactNode;
+    cancelText?: import("react").ReactNode;
+    children?: ((items: (import("../picker-view").PickerColumnItem | null)[], actions: import("./picker").PickerActions) => import("react").ReactNode) | undefined;
+    renderLabel?: ((item: import("../picker-view").PickerColumnItem) => import("react").ReactNode) | undefined;
+    mouseWheel?: boolean | undefined;
+    popupClassName?: string | undefined;
+    popupStyle?: import("react").CSSProperties | undefined;
+    forceRender?: boolean | undefined;
+    destroyOnClose?: boolean | undefined;
+} & Pick<import("../popup").PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & import("../../utils/native-props").NativeProps<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size"> & import("react").RefAttributes<import("./picker").PickerActions>> & {
+    readonly type: import("react").ForwardRefExoticComponent<{
+        columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
+        value?: import("../picker-view").PickerValue[] | undefined;
+        defaultValue?: import("../picker-view").PickerValue[] | undefined;
+        onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+        onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        onClose?: (() => void) | undefined;
+        closeOnMaskClick?: boolean | undefined;
+        visible?: boolean | undefined;
+        title?: import("react").ReactNode;
+        confirmText?: import("react").ReactNode;
+        cancelText?: import("react").ReactNode;
+        children?: ((items: (import("../picker-view").PickerColumnItem | null)[], actions: import("./picker").PickerActions) => import("react").ReactNode) | undefined;
+        renderLabel?: ((item: import("../picker-view").PickerColumnItem) => import("react").ReactNode) | undefined;
+        mouseWheel?: boolean | undefined;
+        popupClassName?: string | undefined;
+        popupStyle?: import("react").CSSProperties | undefined;
+        forceRender?: boolean | undefined;
+        destroyOnClose?: boolean | undefined;
+    } & Pick<import("../popup").PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & import("../../utils/native-props").NativeProps<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size"> & import("react").RefAttributes<import("./picker").PickerActions>>;
+} & {
     prompt: typeof prompt;
 };
 export default _default;

package/2x/cjs/components/picker/picker.d.ts

@@ -2,6 +2,12 @@ import React, { ReactNode } from 'react';
 import { PopupProps } from '../popup';
 import { NativeProps } from '../../utils/native-props';
 import { PickerColumn, PickerColumnItem, PickerValue, PickerValueExtend } from './index';
+export declare type PickerActions = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export declare type PickerRef = PickerActions;
 export declare type PickerProps = {
     columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
     value?: PickerValue[];
@@ -15,8 +21,32 @@ export declare type PickerProps = {
     title?: ReactNode;
     confirmText?: ReactNode;
     cancelText?: ReactNode;
-    children?: (items: (PickerColumnItem | null)[]) => ReactNode;
+    children?: (items: (PickerColumnItem | null)[], actions: PickerActions) => ReactNode;
     renderLabel?: (item: PickerColumnItem) => ReactNode;
     mouseWheel?: boolean;
+    popupClassName?: string;
+    popupStyle?: React.CSSProperties;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
-export declare const Picker: React.NamedExoticComponent<PickerProps>;
+export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[] | undefined;
+    defaultValue?: PickerValue[] | undefined;
+    onSelect?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
+    onConfirm?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    visible?: boolean | undefined;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: ((items: (PickerColumnItem | null)[], actions: PickerActions) => ReactNode) | undefined;
+    renderLabel?: ((item: PickerColumnItem) => ReactNode) | undefined;
+    mouseWheel?: boolean | undefined;
+    popupClassName?: string | undefined;
+    popupStyle?: React.CSSProperties | undefined;
+    forceRender?: boolean | undefined;
+    destroyOnClose?: boolean | undefined;
+} & Pick<PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & NativeProps<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size"> & React.RefAttributes<PickerActions>>>;