antd-mobile 5.11.2 → 5.12.2

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

@@ -7,6 +7,8 @@ exports.Picker = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _popup = _interopRequireDefault(require("../popup"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
@@ -27,6 +29,8 @@ var _safeArea = _interopRequireDefault(require("../safe-area"));
 
 var _pickerUtils = require("./picker-utils");
 
+var _shouldRender = require("../../utils/should-render");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -39,7 +43,7 @@ const defaultProps = {
   closeOnMaskClick: true,
   renderLabel: _pickerUtils.defaultRenderLabel
 };
-const Picker = (0, _react.memo)(p => {
+const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
   var _a;
 
   const {
@@ -49,6 +53,29 @@ const Picker = (0, _react.memo)(p => {
     confirmText: locale.common.confirm,
     cancelText: locale.common.cancel
   }, p);
+  const [visible, setVisible] = (0, _usePropsValue.usePropsValue)({
+    value: props.visible,
+    defaultValue: false,
+    onChange: v => {
+      var _a;
+
+      if (v === false) {
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+  });
+  const actions = {
+    toggle: () => {
+      setVisible(v => !v);
+    },
+    open: () => {
+      setVisible(true);
+    },
+    close: () => {
+      setVisible(false);
+    }
+  };
+  (0, _react.useImperativeHandle)(ref, () => actions);
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(Object.assign(Object.assign({}, props), {
     onChange: val => {
       var _a;
@@ -63,9 +90,9 @@ const Picker = (0, _react.memo)(p => {
     if (innerValue !== value) {
       setInnerValue(value);
     }
-  }, [props.visible]);
+  }, [visible]);
   (0, _react.useEffect)(() => {
-    if (!props.visible) {
+    if (!visible) {
       setInnerValue(value);
     }
   }, [value]);
@@ -74,10 +101,11 @@ const Picker = (0, _react.memo)(p => {
 
     setInnerValue(val);
 
-    if (props.visible) {
+    if (visible) {
       (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
     }
   });
+  const shouldRender = (0, _shouldRender.useShouldRender)(visible, props.forceRender, props.destroyOnClose);
   const pickerElement = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
   }, _react.default.createElement("div", {
@@ -85,20 +113,18 @@ const Picker = (0, _react.memo)(p => {
   }, _react.default.createElement("a", {
     className: `${classPrefix}-header-button`,
     onClick: () => {
-      var _a, _b;
+      var _a;
 
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      setVisible(false);
     }
   }, props.cancelText), _react.default.createElement("div", {
     className: `${classPrefix}-header-title`
   }, props.title), _react.default.createElement("a", {
     className: `${classPrefix}-header-button`,
     onClick: () => {
-      var _a;
-
       setValue(innerValue);
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
     }
   }, props.confirmText)), _react.default.createElement("div", {
     className: `${classPrefix}-body`
@@ -111,15 +137,16 @@ const Picker = (0, _react.memo)(p => {
   }))));
 
   const popupElement = _react.default.createElement(_popup.default, {
-    className: `${classPrefix}-popup`,
-    visible: props.visible,
+    style: props.popupStyle,
+    className: (0, _classnames.default)(`${classPrefix}-popup`, props.popupClassName),
+    visible: visible,
     position: 'bottom',
     onMaskClick: () => {
-      var _a, _b;
+      var _a;
 
       if (!props.closeOnMaskClick) return;
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      setVisible(false);
     },
     getContainer: props.getContainer,
     destroyOnClose: true,
@@ -128,11 +155,11 @@ const Picker = (0, _react.memo)(p => {
     onClick: props.onClick,
     forceRender: true,
     stopPropagation: props.stopPropagation
-  }, pickerElement, _react.default.createElement(_safeArea.default, {
+  }, shouldRender && pickerElement, _react.default.createElement(_safeArea.default, {
     position: 'bottom'
   }));
 
-  return _react.default.createElement(_react.default.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, extend.items));
-});
+  return _react.default.createElement(_react.default.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, extend.items, actions));
+}));
 exports.Picker = Picker;
 Picker.displayName = 'Picker';

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

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import type { MaskProps } from '../mask';
 import { GetContainer } from '../../utils/render-to-container';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type PopupProps = {
@@ -15,7 +16,7 @@ export declare type PopupProps = {
     bodyClassName?: string;
     bodyStyle?: React.CSSProperties;
     maskClassName?: string;
-    maskStyle?: React.CSSProperties;
+    maskStyle?: MaskProps['style'];
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     stopPropagation?: PropagationEvent[];
     children?: React.ReactNode;

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

@@ -80,7 +80,7 @@ const Popup = p => {
     className: classPrefix,
     onClick: props.onClick,
     style: {
-      display: active ? 'unset' : 'none'
+      display: active ? undefined : 'none'
     }
   }, props.mask && _react.default.createElement(_mask.default, {
     visible: props.visible,

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

@@ -74,7 +74,7 @@ const SearchBar = (0, _react.forwardRef)((p, ref) => {
   }));
 
   const renderCancelButton = () => {
-    let isShowCancel = false;
+    let isShowCancel;
 
     if (typeof props.showCancelButton === 'function') {
       isShowCancel = props.showCancelButton(hasFocus, value);
@@ -83,13 +83,7 @@ const SearchBar = (0, _react.forwardRef)((p, ref) => {
     }
 
     return isShowCancel && _react.default.createElement("div", {
-      className: `${classPrefix}-suffix`,
-      onMouseDown: e => {
-        e.preventDefault();
-      },
-      onTouchStart: e => {
-        e.preventDefault();
-      }
+      className: `${classPrefix}-suffix`
     }, _react.default.createElement(_button.default, {
       fill: 'none',
       className: `${classPrefix}-cancel-button`,

package/2x/cjs/components/swipe-action/swipe-action.js

@@ -206,7 +206,7 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
     }
   }, _react.default.createElement(_web.animated.div, {
     style: {
-      pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'unset')
+      pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'auto')
     }
   }, props.children)), (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, _react.default.createElement("div", {
     className: 'adm-swipe-action-actions adm-swipe-action-actions-right',

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

@@ -3,7 +3,10 @@
   --content-padding: 24px;
   --active-line-height: 4px;
   --active-line-border-radius: var(--active-line-height);
+  --active-line-color: var(--adm-color-primary);
+  --active-title-color: var(--adm-color-primary);
   position: relative;
+  min-width: 0;
 }
 
 .adm-tabs-header {
@@ -44,7 +47,7 @@
 }
 
 .adm-tabs-tab-active {
-  color: var(--adm-color-primary);
+  color: var(--active-title-color);
 }
 
 .adm-tabs-tab-disabled {
@@ -56,8 +59,7 @@
   position: absolute;
   bottom: 0;
   height: var(--active-line-height);
-  color: var(--adm-color-primary);
-  background: var(--adm-color-primary);
+  background: var(--active-line-color);
   border-radius: var(--active-line-border-radius);
 }
 

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

@@ -15,5 +15,5 @@ export declare type TabsProps = {
     stretch?: boolean;
     onChange?: (key: string) => void;
     children?: React.ReactNode;
-} & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding'>;
+} & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding' | '--active-title-color' | '--active-line-color'>;
 export declare const Tabs: FC<TabsProps>;

package/2x/cjs/components/text-area/text-area.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick'> & {
+export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'disabled' | 'readOnly' | 'name' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick'> & {
     onChange?: (val: string) => void;
     value?: string;
     defaultValue?: string;
@@ -20,7 +20,7 @@ export declare type TextAreaRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;

package/2x/cjs/components/text-area/text-area.js

@@ -7,6 +7,8 @@ exports.TextArea = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _ahooks = require("ahooks");
+
 var _nativeProps = require("../../utils/native-props");
 
 var _usePropsValue = require("../../utils/use-props-value");
@@ -57,7 +59,7 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
       (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     }
   }));
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     if (!autoSize) return;
     const textArea = nativeTextAreaRef.current;
     if (!textArea) return;
@@ -130,6 +132,7 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
     autoFocus: props.autoFocus,
     disabled: props.disabled,
     readOnly: props.readOnly,
+    name: props.name,
     onFocus: props.onFocus,
     onBlur: props.onBlur,
     onClick: props.onClick

package/2x/cjs/components/toast/methods.js

@@ -11,13 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _getContainer = require("../../utils/get-container");
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _toast = require("./toast");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _render = require("../../utils/render");
 
 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); }
 
@@ -26,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const containers = [];
 
 function unmount(container) {
-  const unmountResult = _reactDom.default.unmountComponentAtNode(container);
+  const unmountResult = (0, _render.unmount)(container);
 
   if (unmountResult && container.parentNode) {
     container.parentNode.removeChild(container);
@@ -85,11 +83,9 @@ function show(p) {
     }));
   });
   const ref = (0, _react.createRef)();
-
-  _reactDom.default.render(_react.default.createElement(TempToast, {
+  (0, _render.render)(_react.default.createElement(TempToast, {
     ref: ref
   }), container);
-
   return {
     close: () => {
       var _a;

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

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
+import type { MaskProps } from '../mask';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { GetContainer } from '../../utils/render-to-container';
 export interface ToastProps {
     afterClose?: () => void;
-    maskStyle?: React.CSSProperties;
+    maskStyle?: MaskProps['style'];
     maskClassName?: string;
     maskClickable?: boolean;
     content?: ReactNode;

package/2x/cjs/utils/render-to-body.js

@@ -5,23 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderToBody = renderToBody;
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _render = require("./render");
 
 function renderToBody(element) {
   const container = document.createElement('div');
   document.body.appendChild(container);
 
   function unmount() {
-    const unmountResult = _reactDom.default.unmountComponentAtNode(container);
+    const unmountResult = (0, _render.unmount)(container);
 
     if (unmountResult && container.parentNode) {
       container.parentNode.removeChild(container);
     }
   }
 
-  _reactDom.default.render(element, container);
-
+  (0, _render.render)(element, container);
   return unmount;
 }

package/2x/cjs/utils/render.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import type { Root } from 'react-dom/client';
+declare const MARK = "__antd_mobile_root__";
+declare type ContainerType = (Element | DocumentFragment) & {
+    [MARK]?: Root;
+};
+export declare function render(node: ReactElement, container: ContainerType): void;
+export declare function unmount(container: ContainerType): boolean | Promise<void>;
+export {};

package/2x/cjs/utils/render.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.render = render;
+exports.unmount = unmount;
+
+var _tslib = require("tslib");
+
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+
+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; }
+
+// Let compiler not to search module usage
+const fullClone = Object.assign({}, ReactDOM);
+const {
+  version,
+  render: reactRender,
+  unmountComponentAtNode
+} = fullClone;
+let createRoot;
+
+try {
+  const mainVersion = Number((version || '').split('.')[0]);
+
+  if (mainVersion >= 18 && fullClone.createRoot) {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    createRoot = fullClone.createRoot;
+  }
+} catch (e) {// Do nothing;
+}
+
+function toggleWarning(skip) {
+  const {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+  } = fullClone;
+
+  if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === 'object') {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
+  }
+}
+
+const MARK = '__antd_mobile_root__';
+
+function legacyRender(node, container) {
+  reactRender(node, container);
+}
+
+function concurrentRender(node, container) {
+  toggleWarning(true);
+  const root = container[MARK] || createRoot(container);
+  toggleWarning(false);
+  root.render(node);
+  container[MARK] = root;
+}
+
+function render(node, container) {
+  if (createRoot) {
+    concurrentRender(node, container);
+    return;
+  }
+
+  legacyRender(node, container);
+} // ========================== Unmount =========================
+
+
+function legacyUnmount(container) {
+  return unmountComponentAtNode(container);
+}
+
+function concurrentUnmount(container) {
+  return (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
+    // Delay to unmount to avoid React 18 sync warning
+    return Promise.resolve().then(() => {
+      var _a;
+
+      (_a = container[MARK]) === null || _a === void 0 ? void 0 : _a.unmount();
+      delete container[MARK];
+    });
+  });
+}
+
+function unmount(container) {
+  if (createRoot) {
+    return concurrentUnmount(container);
+  }
+
+  return legacyUnmount(container);
+}

package/2x/cjs/utils/use-drag-and-pinch.d.ts

@@ -1 +1 @@
-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;
+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/2x/cjs/utils/use-props-value.d.ts

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

package/2x/es/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/es/components/calendar/calendar.js

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

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

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

package/2x/es/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/es/components/cascade-picker/cascade-picker.js

@@ -1,8 +1,8 @@
 import { __rest } from "tslib";
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Picker from '../picker';
 import { useColumnsFn } from './cascade-picker-utils';
-export const CascadePicker = props => {
+export const CascadePicker = forwardRef((props, ref) => {
   const {
     options
   } = props,
@@ -10,6 +10,7 @@ export const CascadePicker = props => {
 
   const columnsFn = useColumnsFn(options);
   return React.createElement(Picker, Object.assign({}, pickerProps, {
+    ref: ref,
     columns: columnsFn
   }));
-};
+});

package/2x/es/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/es/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>>;