antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/cjs/components/action-sheet/action-sheet.css

@@ -7,34 +7,46 @@
   display: flex;
   justify-content: center;
   color: var(--adm-color-weak);
-  font-size: 15px;
-  padding: 18px 16px;
-  border-bottom: 1px solid var(--adm-border-color);
+  font-size: var(--adm-font-size-7);
+  padding: 18px 12px;
+  border-bottom: 1px solid var(--adm-color-border);
+}
+.adm-action-sheet-button-list {
+  border-bottom: 1px solid var(--adm-color-border);
 }
 .adm-action-sheet-button-item-wrapper {
-  background-color: #ffffff;
-  border-top: 1px solid var(--adm-border-color);
+  border-bottom: 1px solid var(--adm-color-border);
 }
-.adm-action-sheet-button-item-wrapper:first-child {
-  border-top: none;
+.adm-action-sheet-button-item-wrapper:last-child {
+  border-bottom: none;
 }
 .adm-action-sheet-button-item {
-  padding: 14px;
   text-align: center;
+  display: block;
+  background-color: var(--adm-color-background);
+  padding: 16px;
+}
+.adm-action-sheet-button-item:active {
+  background-color: #eeeeee;
+}
+.adm-action-sheet-button-item-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
 }
 .adm-action-sheet-button-item-name {
   color: var(--adm-color-text);
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-action-sheet-button-item-description {
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
   color: var(--adm-color-weak);
-  padding-top: 4px;
+  padding-top: 2px;
 }
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
   color: var(--adm-color-danger);
 }
 .adm-action-sheet-cancel {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   padding-top: 8px;
 }

package/cjs/components/action-sheet/action-sheet.d.ts

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-import { GetContainer } from '../../utils/render-to-container';
+import { PopupProps } from '../popup';
 export declare type Action = {
     key: string | number;
     text: ReactNode;
@@ -16,17 +16,15 @@ export declare type ActionSheetProps = {
     cancelText?: React.ReactNode;
     onAction?: (action: Action, index: number) => void;
     onClose?: () => void;
-    afterClose?: () => void;
     onMaskClick?: () => void;
     closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-    getContainer?: GetContainer;
     safeArea?: boolean;
     popupClassName?: string;
     popupStyle?: React.CSSProperties;
-} & NativeProps;
+} & Pick<PopupProps, 'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'> & NativeProps;
 export declare const ActionSheet: FC<ActionSheetProps>;
 export declare type ActionSheetShowHandler = {
     close: () => void;
 };
-export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible'>): ActionSheetShowHandler;
+export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible' | 'destroyOnClose' | 'forceRender'>): ActionSheetShowHandler;

package/cjs/components/action-sheet/action-sheet.js

@@ -16,8 +16,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _popup = _interopRequireDefault(require("../popup"));
 
-var _button = _interopRequireDefault(require("../button"));
-
 var _safeArea = _interopRequireDefault(require("../safe-area"));
 
 var _renderImperatively = require("../../utils/render-imperatively");
@@ -31,7 +29,9 @@ const defaultProps = {
   cancelText: '',
   closeOnAction: false,
   closeOnMaskClick: true,
-  safeArea: true
+  safeArea: true,
+  destroyOnClose: false,
+  forceRender: false
 };
 
 const ActionSheet = p => {
@@ -50,7 +50,9 @@ const ActionSheet = p => {
     afterClose: props.afterClose,
     className: (0, _classnames.default)(`${classPrefix}-popup`, props.popupClassName),
     style: props.popupStyle,
-    getContainer: props.getContainer
+    getContainer: props.getContainer,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
   }, props.extra && _react.default.createElement("div", {
@@ -60,11 +62,11 @@ const ActionSheet = p => {
   }, props.actions.map((action, index) => _react.default.createElement("div", {
     key: action.key,
     className: `${classPrefix}-button-item-wrapper`
-  }, _react.default.createElement(_button.default, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    disabled: action.disabled,
+  }, _react.default.createElement("a", {
+    className: (0, _classnames.default)('adm-plain-anchor', `${classPrefix}-button-item`, {
+      [`${classPrefix}-button-item-danger`]: action.danger,
+      [`${classPrefix}-button-item-disabled`]: action.disabled
+    }),
     onClick: () => {
       var _a, _b, _c;
 
@@ -74,10 +76,7 @@ const ActionSheet = p => {
       if (props.closeOnAction) {
         (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
       }
-    },
-    className: (0, _classnames.default)(`${classPrefix}-button-item`, {
-      [`${classPrefix}-button-item-danger`]: action.danger
-    })
+    }
   }, _react.default.createElement("div", {
     className: `${classPrefix}-button-item-name`
   }, action.text), action.description && _react.default.createElement("div", {
@@ -86,11 +85,8 @@ const ActionSheet = p => {
     className: `${classPrefix}-cancel`
   }, _react.default.createElement("div", {
     className: `${classPrefix}-button-item-wrapper`
-  }, _react.default.createElement(_button.default, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    className: `${classPrefix}-button-item`,
+  }, _react.default.createElement("a", {
+    className: (0, _classnames.default)('adm-plain-anchor', `${classPrefix}-button-item`),
     onClick: () => {
       var _a;
 

package/cjs/components/badge/badge.css

@@ -1,4 +1,4 @@
-.adm-badge-wrap {
+.adm-badge-wrapper {
   display: inline-block;
   position: relative;
 }
@@ -13,11 +13,11 @@
   --color: var(--adm-badge-color, #ff411c);
 }
 .adm-badge-content {
-  color: #fff;
+  color: var(--adm-color-white);
   box-sizing: border-box;
   min-width: 8px;
   padding: 1px 4px;
-  font-size: 9px;
+  font-size: var(--adm-font-size-1);
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;

package/cjs/components/badge/badge.d.ts

@@ -1,10 +1,12 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare const dot: unique symbol;
+export declare const dot: JSX.Element;
 export declare type BadgeProps = {
     content?: React.ReactNode | typeof dot;
     color?: string;
     bordered?: boolean;
     children?: React.ReactNode;
+    wrapperClassName?: string;
+    wrapperStyle?: React.CSSProperties;
 } & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;

package/cjs/components/badge/badge.js

@@ -14,7 +14,9 @@ var _nativeProps = require("../../utils/native-props");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const classPrefix = `adm-badge`;
-const dot = Symbol();
+
+const dot = _react.default.createElement(_react.default.Fragment, null);
+
 exports.dot = dot;
 
 const Badge = props => {
@@ -34,7 +36,8 @@ const Badge = props => {
     className: `${classPrefix}-content`
   }, content))) : null;
   return children ? _react.default.createElement("div", {
-    className: `${classPrefix}-wrap`
+    className: (0, _classnames.default)(`${classPrefix}-wrapper`, props.wrapperClassName),
+    style: props.wrapperStyle
   }, children, element) : element;
 };
 

package/cjs/components/badge/index.d.ts

@@ -2,6 +2,6 @@
 import './badge.less';
 export type { BadgeProps } from './badge';
 declare const _default: import("react").FC<import("./badge").BadgeProps> & {
-    dot: symbol;
+    dot: JSX.Element;
 };
 export default _default;

package/cjs/components/button/button.css

@@ -1,11 +1,11 @@
 .adm-button {
   --color: var(--adm-color-white);
   --text-color: var(--adm-button-text-color, var(--adm-color-text));
-  --background-color: var(--adm-button-background-color, var(--adm-color-white));
+  --background-color: var(--adm-button-background-color, var(--adm-color-background));
   --border-radius: var(--adm-button-border-radius, 4px);
   --border-width: var(--adm-button-border-width, 1px);
   --border-style: var(--adm-button-border-style, solid);
-  --border-color: var(--adm-button-border-color, var(--adm-border-color));
+  --border-color: var(--adm-button-border-color, var(--adm-color-border));
   color: var(--text-color);
   background-color: var(--background-color);
   position: relative;
@@ -14,14 +14,15 @@
   height: auto;
   padding: 7px 12px;
   margin: 0;
-  font-size: 17px;
+  font-size: var(--adm-font-size-9);
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);
   border-radius: var(--border-radius);
   cursor: pointer;
   transition: opacity ease 0.15s;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-button:focus {
   outline: none;
@@ -91,7 +92,7 @@
 .adm-button.adm-button-mini {
   padding-top: 3px;
   padding-bottom: 3px;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
 }
 .adm-button.adm-button-mini.adm-button-shape-rounded {
   padding-left: 9px;
@@ -100,12 +101,12 @@
 .adm-button.adm-button-small {
   padding-top: 3px;
   padding-bottom: 3px;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-button.adm-button-large {
   padding-top: 11px;
   padding-bottom: 11px;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-button.adm-button-shape-rounded {
   --border-radius: 1000px;

package/cjs/components/button/button.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
+declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 export declare type ButtonProps = {
     color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
     fill?: 'solid' | 'outline' | 'none';
@@ -9,11 +10,11 @@ export declare type ButtonProps = {
     loadingText?: string;
     loadingIcon?: React.ReactNode;
     disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
     type?: 'submit' | 'reset' | 'button';
     shape?: 'default' | 'rounded' | 'rectangular';
     children?: React.ReactNode;
-} & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
+} & Pick<NativeButtonProps, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd'> & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
 export declare type ButtonRef = {
     nativeElement: HTMLButtonElement | null;
 };
@@ -26,8 +27,13 @@ export declare const Button: React.ForwardRefExoticComponent<{
     loadingText?: string | undefined;
     loadingIcon?: React.ReactNode;
     disabled?: boolean | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>) | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown) | undefined;
     type?: "reset" | "submit" | "button" | undefined;
     shape?: "default" | "rounded" | "rectangular" | undefined;
     children?: React.ReactNode;
-} & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
+} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-radius" | "--text-color" | "--background-color" | "--border-width" | "--border-style" | "--border-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ButtonRef>>;
+export {};

package/cjs/components/button/button.js

@@ -81,9 +81,13 @@ const Button = (0, _react.forwardRef)((p, ref) => {
       [`${classPrefix}-large`]: props.size === 'large',
       [`${classPrefix}-loading`]: loading
     }, `${classPrefix}-shape-${props.shape}`),
-    disabled: disabled
+    disabled: disabled,
+    onMouseDown: props.onMouseDown,
+    onMouseUp: props.onMouseUp,
+    onTouchStart: props.onTouchStart,
+    onTouchEnd: props.onTouchEnd
   }, loading ? _react.default.createElement("div", {
     className: `${classPrefix}-loading-wrapper`
-  }, props.loadingIcon, props.loadingText) : props.children));
+  }, props.loadingIcon, props.loadingText) : _react.default.createElement("span", null, props.children)));
 });
 exports.Button = Button;

package/cjs/components/button/button.patch.css

@@ -0,0 +1,86 @@
+.adm-button {
+  color: #333333;
+  background-color: #ffffff;
+  font-size: 17px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #eeeeee;
+  border-radius: 4px;
+}
+.adm-button::before {
+  transform: translate(-1px, -1px);
+  border: 1px solid #000;
+  border-radius: 4px;
+}
+.adm-button-default.adm-button-fill-outline {
+  background-color: transparent;
+  border-color: #333333;
+}
+.adm-button-default.adm-button-fill-none {
+  background-color: transparent;
+  border-width: 0;
+}
+.adm-button:not(.adm-button-default) {
+  color: #ffffff;
+}
+.adm-button:not(.adm-button-default).adm-button-fill-outline {
+  background-color: transparent;
+}
+.adm-button:not(.adm-button-default).adm-button-fill-none {
+  background-color: transparent;
+  border-width: 0;
+}
+.adm-button-primary {
+  background-color: #1677ff;
+  border-color: #1677ff;
+}
+.adm-button-primary.adm-button-fill-outline,
+.adm-button-primary.adm-button-fill-none {
+  color: #1677ff;
+}
+.adm-button-success {
+  background-color: #00b578;
+  border-color: #00b578;
+}
+.adm-button-success.adm-button-fill-outline,
+.adm-button-success.adm-button-fill-none {
+  color: #00b578;
+}
+.adm-button-danger {
+  background-color: #00b578;
+  border-color: #00b578;
+}
+.adm-button-danger.adm-button-fill-outline,
+.adm-button-danger.adm-button-fill-none {
+  color: #00b578;
+}
+.adm-button-warning {
+  background-color: #ff8f1f;
+  border-color: #ff8f1f;
+}
+.adm-button-warning.adm-button-fill-outline,
+.adm-button-warning.adm-button-fill-none {
+  color: #ff8f1f;
+}
+.adm-button.adm-button-mini {
+  font-size: 13px;
+}
+.adm-button.adm-button-small {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 15px;
+}
+.adm-button.adm-button-large {
+  padding-top: 11px;
+  padding-bottom: 11px;
+  font-size: 18px;
+}
+.adm-button.adm-button-shape-rounded {
+  border-radius: 1000px;
+}
+.adm-button.adm-button-shape-rounded::before {
+  border-radius: 1000px;
+}
+.adm-button.adm-button-shape-rectangular {
+  border-radius: 0;
+}

package/cjs/components/calendar/calendar.css

@@ -17,7 +17,7 @@
   transform: rotate(180deg);
 }
 .adm-calendar .adm-calendar-header .adm-calendar-title {
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   flex: auto;
   text-align: center;
 }
@@ -71,13 +71,16 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
+.adm-calendar-cell.adm-calendar-cell-disabled.adm-calendar-cell.adm-calendar-cell-selected {
+  color: var(--adm-color-light);
+}
 .adm-calendar-cell .adm-calendar-cell-top {
   flex: none;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-calendar-cell .adm-calendar-cell-bottom {
   flex: none;
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
   height: 12px;
   line-height: 12px;
   color: var(--adm-color-weak);
@@ -87,10 +90,10 @@
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
   height: 45px;
   box-sizing: border-box;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   padding: 0 8px;
 }
 .adm-calendar-mark .adm-calendar-mark-cell {

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

@@ -4,7 +4,7 @@ declare type Page = {
     month: number;
     year: number;
 };
-export declare type CalenderRef = {
+export declare type CalendarRef = {
     jumpTo: (page: Page | ((page: Page) => Page)) => void;
     jumpToToday: () => void;
 };
@@ -15,10 +15,11 @@ export declare type CalendarProps = {
     nextYearButton?: React.ReactNode;
     onPageChange?: (year: number, month: number) => void;
     weekStartsOn?: 'Monday' | 'Sunday';
-    renderLabel?: (date: Date) => string | null | undefined;
+    renderLabel?: (date: Date) => React.ReactNode;
     allowClear?: boolean;
     max?: Date;
     min?: Date;
+    shouldDisableDate?: (date: Date) => boolean;
 } & ({
     selectionMode?: undefined;
     value?: undefined;
@@ -35,5 +36,5 @@ export declare type CalendarProps = {
     defaultValue?: [Date, Date] | null;
     onChange?: (val: [Date, Date] | null) => void;
 }) & NativeProps;
-export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalenderRef>>;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
 export {};

package/cjs/components/calendar/calendar.js

@@ -153,10 +153,10 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
       }
 
       const inThisMonth = d.month() === current.month();
-      const disabled = !inThisMonth || maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
+      const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
       cells.push(_react.default.createElement("div", {
         key: d.valueOf(),
-        className: (0, _classnames.default)(`${classPrefix}-cell`, disabled && `${classPrefix}-cell-disabled`, inThisMonth && {
+        className: (0, _classnames.default)(`${classPrefix}-cell`, (disabled || !inThisMonth) && `${classPrefix}-cell-disabled`, inThisMonth && {
           [`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
           [`${classPrefix}-cell-selected`]: isSelect,
           [`${classPrefix}-cell-selected-begin`]: isBegin,
@@ -225,8 +225,8 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
 
   const mark = _react.default.createElement("div", {
     className: `${classPrefix}-mark`
-  }, markItems.map(item => _react.default.createElement("div", {
-    key: item,
+  }, markItems.map((item, index) => _react.default.createElement("div", {
+    key: index,
     className: `${classPrefix}-mark-cell`
   }, item)));
 

package/cjs/components/calendar/index.d.ts

@@ -1,4 +1,4 @@
 import './calendar.less';
 import { Calendar } from './calendar';
-export type { CalendarProps, CalenderRef } from './calendar';
+export type { CalendarProps, CalendarRef } from './calendar';
 export default Calendar;

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

@@ -5,7 +5,7 @@
 .adm-capsule-tabs-header {
   position: relative;
   padding: 12px 6px;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-capsule-tabs-tab-list {
   display: flex;
@@ -29,13 +29,13 @@
   margin: 0 auto;
   border-radius: 20px;
   cursor: pointer;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   text-align: center;
   white-space: nowrap;
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-capsule-tabs-tab-active {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
 }
 .adm-capsule-tabs-tab-disabled {
@@ -45,20 +45,3 @@
 .adm-capsule-tabs-content {
   padding: 12px;
 }
-.adm-capsule-tabs-header-mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 30px;
-  height: 100%;
-  pointer-events: none;
-}
-.adm-capsule-tabs-header-mask-left {
-  left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-}
-.adm-capsule-tabs-header-mask-right {
-  right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
-}

package/cjs/components/card/card.css

@@ -1,5 +1,5 @@
 .adm-card {
-  background: #ffffff;
+  background: var(--adm-color-background);
   border-radius: 8px;
   padding: 0 12px;
 }
@@ -12,10 +12,10 @@
   padding: 12px 0;
 }
 .adm-card-header:not(:last-child) {
-  border-bottom: solid 0.5px var(--adm-border-color);
+  border-bottom: solid 0.5px var(--adm-color-border);
 }
 .adm-card-header-title {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
   font-weight: bold;
 }

package/cjs/components/cascader/cascader.css

@@ -13,13 +13,13 @@
   padding: 6px 8px;
 }
 .adm-cascader-header-button {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   display: inline-block;
   padding: 4px 4px;
 }
 .adm-cascader-header-title {
   padding: 4px 4px;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   color: var(--adm-color-text);
   text-align: center;
   flex: 1;

package/cjs/components/cascader/cascader.d.ts

@@ -1,7 +1,13 @@
-import { ReactNode, FC } from 'react';
+import React, { ReactNode } from 'react';
 import { PopupProps } from '../popup';
 import { CascaderValue, CascaderValueExtend, CascaderOption } from '../cascader-view';
 import { NativeProps } from '../../utils/native-props';
+export declare type CascaderActions = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export declare type CascaderRef = CascaderActions;
 export declare type CascaderProps = {
     options: CascaderOption[];
     value?: CascaderValue[];
@@ -15,6 +21,28 @@ export declare type CascaderProps = {
     title?: ReactNode;
     confirmText?: ReactNode;
     cancelText?: ReactNode;
-    children?: (items: (CascaderOption | null)[]) => ReactNode;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
-export declare const Cascader: FC<CascaderProps>;
+    children?: (items: (CascaderOption | null)[], actions: CascaderActions) => ReactNode;
+    onTabsChange?: (index: number) => void;
+    activeIcon?: ReactNode;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'destroyOnClose' | 'forceRender'> & NativeProps;
+export declare const Cascader: React.ForwardRefExoticComponent<{
+    options: CascaderOption[];
+    value?: string[] | undefined;
+    defaultValue?: string[] | undefined;
+    placeholder?: string | undefined;
+    onSelect?: ((value: CascaderValue[], extend: CascaderValueExtend) => void) | undefined;
+    onConfirm?: ((value: CascaderValue[], extend: CascaderValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    visible?: boolean | undefined;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: ((items: (CascaderOption | null)[], actions: CascaderActions) => ReactNode) | undefined;
+    onTabsChange?: ((index: number) => void) | undefined;
+    activeIcon?: ReactNode;
+} & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<CascaderActions>>;