antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

package/es/components/badge/badge.css

@@ -5,6 +5,7 @@
 .adm-badge {
   display: inline-block;
   color: #fff;
+  font-weight: normal;
   text-align: center;
   vertical-align: middle;
   box-sizing: border-box;
@@ -14,9 +15,13 @@
   font-size: 9px;
   line-height: 1.2;
   white-space: nowrap;
+  --right: 0;
+  --top: 0;
 }
 .adm-badge-fixed {
   position: absolute;
+  right: var(--right);
+  top: var(--top);
   transform: translate(50%, -50%);
 }
 .adm-badge-dot {

package/es/components/badge/badge.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
+export declare const dot: unique symbol;
 export declare type BadgeProps = {
-    content?: React.ReactNode;
+    content?: React.ReactNode | typeof dot;
     color?: string;
-    offset?: [number, number];
-} & NativeProps;
-export declare const Badge: React.FC<BadgeProps>;
+} & NativeProps<'--right' | '--top'>;
+export declare const Badge: FC<BadgeProps>;

package/es/components/badge/badge.js

@@ -1,34 +1,27 @@
 import classNames from 'classnames';
 import React from 'react';
-import { convertPx } from '../../utils/convert-px';
 import { withNativeProps } from '../../utils/native-props';
-import { withDefaultProps } from '../../utils/with-default-props';
+import { mergeProps } from '../../utils/with-default-props';
 var classPrefix = "adm-badge";
-export var Badge = withDefaultProps({
-  color: '#FF411C',
-  offset: [0, 0]
-})(function (props) {
+export var dot = Symbol();
+export var Badge = function Badge(p) {
   var _classNames;
 
+  var props = mergeProps({
+    color: '#FF411C'
+  }, p);
   var content = props.content,
       color = props.color,
-      offset = props.offset,
       children = props.children;
-  var badgeStyle = children ? {
-    right: -convertPx(offset[0]) + "px",
-    top: convertPx(offset[1]) + "px",
-    backgroundColor: color
-  } : {
-    backgroundColor: color
-  };
-  var badgeCls = classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-fixed"] = !!children, _classNames[classPrefix + "-dot"] = !content, _classNames));
-  return withNativeProps(props, children ? /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-wrap"
-  }, children, /*#__PURE__*/React.createElement("div", {
-    className: badgeCls,
-    style: badgeStyle
-  }, content)) : /*#__PURE__*/React.createElement("div", {
+  var isDot = content === dot;
+  var badgeCls = classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-fixed"] = !!children, _classNames[classPrefix + "-dot"] = isDot, _classNames));
+  var element = content ? withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: badgeCls,
-    style: badgeStyle
-  }, content));
-});
+    style: {
+      backgroundColor: color
+    }
+  }, !isDot && content)) : null;
+  return children ? /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-wrap"
+  }, children, element) : element;
+};

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

@@ -1,4 +1,7 @@
+/// <reference types="react" />
 import './badge.less';
-import { Badge } from './badge';
 export type { BadgeProps } from './badge';
-export default Badge;
+declare const _default: import("react").FC<import("./badge").BadgeProps> & {
+    dot: symbol;
+};
+export default _default;

package/es/components/badge/index.js

@@ -1,3 +1,6 @@
 import "./badge.css";
-import { Badge } from './badge';
-export default Badge;
+import { Badge, dot } from './badge';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+export default attachPropertiesToComponent(Badge, {
+  dot: dot
+});

package/es/components/button/button.css

@@ -1,11 +1,11 @@
 .adm-button {
   --color: var(--adm-color-white);
-  --text-color: var(--adm-color-text);
-  --background-color: var(--adm-color-white);
-  --border-radius: 4px;
-  --border-width: 1px;
-  --border-style: solid;
-  --border-color: var(--adm-border-color);
+  --text-color: var(--adm-button-text-color, var(--adm-color-text));
+  --background-color: var(--adm-button-background-color, var(--adm-color-white));
+  --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));
   color: var(--text-color);
   background-color: var(--background-color);
   position: relative;
@@ -89,18 +89,28 @@
 .adm-button-disabled:active::before {
   display: none;
 }
-.adm-button-mini {
+.adm-button.adm-button-mini {
   padding: 3px 7px;
   font-size: 13px;
 }
-.adm-button-small {
+.adm-button.adm-button-mini.adm-button-shape-rounded {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+.adm-button.adm-button-small {
   padding: 3px 11px;
   font-size: 15px;
 }
-.adm-button-large {
+.adm-button.adm-button-large {
   padding: 11px 22px;
   font-size: 18px;
 }
+.adm-button.adm-button-shape-rounded {
+  --border-radius: 1000px;
+}
+.adm-button.adm-button-shape-rectangular {
+  --border-radius: 0;
+}
 .adm-button-loading {
   vertical-align: bottom;
 }

package/es/components/button/button.d.ts

@@ -9,8 +9,7 @@ export declare type ButtonProps = {
     loadingText?: string;
     disabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    className?: string;
-    style?: React.CSSProperties;
     type?: 'submit' | 'reset' | 'button';
+    shape?: 'default' | 'rounded' | 'rectangular';
 } & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
 export declare const Button: FC<ButtonProps>;

package/es/components/button/button.js

@@ -9,22 +9,23 @@ var defaultProps = {
   fill: 'solid',
   block: false,
   loading: false,
-  type: 'button'
+  type: 'button',
+  shape: 'default',
+  size: 'middle'
 };
 export var Button = function Button(p) {
   var _classNames;
 
   var props = mergeProps(defaultProps, p);
-  var disabled = props.disabled;
+  var disabled = props.disabled || props.loading;
   return withNativeProps(props, /*#__PURE__*/React.createElement("button", {
     type: props.type,
     onClick: props.onClick,
-    className: classNames(classPrefix, props.color ? classPrefix + "-" + props.color : null, (_classNames = {}, _classNames[classPrefix + "-block"] = props.block, _classNames[classPrefix + "-disabled"] = disabled, _classNames[classPrefix + "-fill-outline"] = props.fill === 'outline', _classNames[classPrefix + "-fill-none"] = props.fill === 'none', _classNames[classPrefix + "-mini"] = props.size === 'mini', _classNames[classPrefix + "-small"] = props.size === 'small', _classNames[classPrefix + "-large"] = props.size === 'large', _classNames[classPrefix + "-loading"] = props.loading, _classNames)),
+    className: classNames(classPrefix, props.color ? classPrefix + "-" + props.color : null, (_classNames = {}, _classNames[classPrefix + "-block"] = props.block, _classNames[classPrefix + "-disabled"] = disabled, _classNames[classPrefix + "-fill-outline"] = props.fill === 'outline', _classNames[classPrefix + "-fill-none"] = props.fill === 'none', _classNames[classPrefix + "-mini"] = props.size === 'mini', _classNames[classPrefix + "-small"] = props.size === 'small', _classNames[classPrefix + "-large"] = props.size === 'large', _classNames[classPrefix + "-loading"] = props.loading, _classNames), classPrefix + "-shape-" + props.shape),
     disabled: disabled
-  }, props.loading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, props.loading ? /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-loading-wrapper"
   }, /*#__PURE__*/React.createElement(Loading, {
-    color: 'currentColor',
-    size: props.size
-  }), props.loadingText)) : props.children));
+    color: 'currentColor'
+  }), props.loadingText) : props.children));
 };

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

@@ -0,0 +1,63 @@
+.adm-capsule-tabs {
+  position: relative;
+}
+.adm-capsule-tabs-header {
+  position: relative;
+  padding: 12px 6px;
+  border-bottom: solid 1px var(--adm-border-color);
+}
+.adm-capsule-tabs-tab-list {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.adm-capsule-tabs-tab-list::-webkit-scrollbar {
+  display: none;
+}
+.adm-capsule-tabs-tab-wrapper {
+  flex: auto;
+  padding: 0 6px;
+}
+.adm-capsule-tabs-tab {
+  position: relative;
+  padding: 8px 20px;
+  margin: 0 auto;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: var(--adm-font-size-main);
+  text-align: center;
+  white-space: nowrap;
+  background-color: #f5f5f5;
+}
+.adm-capsule-tabs-tab-active {
+  color: #fff;
+  background-color: var(--adm-color-primary);
+}
+.adm-capsule-tabs-tab-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.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/es/components/capsule-tabs/capsule-tabs.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type CapsuleTabProps = {
+    title: ReactNode;
+    disabled?: boolean;
+    forceRender?: boolean;
+} & NativeProps;
+export declare const CapsuleTab: FC<CapsuleTabProps>;
+export declare type CapsuleTabsProps = {
+    activeKey?: string | null;
+    defaultActiveKey?: string | null;
+    onChange?: (key: string) => void;
+} & NativeProps;
+export declare const CapsuleTabs: FC<CapsuleTabsProps>;

package/es/components/capsule-tabs/capsule-tabs.js

@@ -0,0 +1,102 @@
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import { animated } from '@react-spring/web';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { useResizeEffect } from '../../utils/use-resize-effect';
+import { useTabListScroll } from '../../utils/use-tab-list-scroll';
+import ScrollMask from '../scroll-mask';
+var classPrefix = "adm-capsule-tabs";
+export var CapsuleTab = function CapsuleTab() {
+  return null;
+};
+export var CapsuleTabs = function CapsuleTabs(props) {
+  var _a;
+
+  var tabListContainerRef = useRef(null);
+  var rootRef = useRef(null);
+  var keyToIndexRecord = {};
+  var firstActiveKey = null;
+  var panes = [];
+  React.Children.forEach(props.children, function (child, index) {
+    if (! /*#__PURE__*/React.isValidElement(child)) return;
+    var key = child.key;
+    if (typeof key !== 'string') return;
+
+    if (index === 0) {
+      firstActiveKey = key;
+    }
+
+    var length = panes.push(child);
+    keyToIndexRecord[key] = length - 1;
+  });
+
+  var _usePropsValue = usePropsValue({
+    value: props.activeKey,
+    defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
+    onChange: props.onChange
+  }),
+      activeKey = _usePropsValue[0],
+      setActiveKey = _usePropsValue[1];
+
+  var _useTabListScroll = useTabListScroll(tabListContainerRef, keyToIndexRecord[activeKey]),
+      scrollLeft = _useTabListScroll.scrollLeft,
+      animate = _useTabListScroll.animate;
+
+  useResizeEffect(function () {
+    animate(true);
+  }, rootRef);
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix,
+    ref: rootRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-header"
+  }, /*#__PURE__*/React.createElement(ScrollMask, {
+    scrollTrackRef: tabListContainerRef
+  }), /*#__PURE__*/React.createElement(animated.div, {
+    className: classPrefix + "-tab-list",
+    ref: tabListContainerRef,
+    scrollLeft: scrollLeft
+  }, panes.map(function (pane) {
+    var _classNames;
+
+    return withNativeProps(pane.props, /*#__PURE__*/React.createElement("div", {
+      key: pane.key,
+      className: classPrefix + "-tab-wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        var key = pane.key;
+        if (pane.props.disabled) return;
+
+        if (key === undefined || key === null) {
+          return;
+        }
+
+        setActiveKey(key.toString());
+      },
+      className: classNames(classPrefix + "-tab", (_classNames = {}, _classNames[classPrefix + "-tab-active"] = pane.key === activeKey, _classNames[classPrefix + "-tab-disabled"] = pane.props.disabled, _classNames))
+    }, pane.props.title)));
+  }))), panes.map(function (pane) {
+    if (pane.props.children === undefined) {
+      return null;
+    }
+
+    if (pane.key === activeKey) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: pane.key,
+        className: classPrefix + "-content"
+      }, pane.props.children);
+    }
+
+    if (pane.props.forceRender) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: pane.key,
+        style: {
+          display: 'none'
+        }
+      }, pane.props.children);
+    }
+
+    return null;
+  })));
+};

package/es/components/capsule-tabs/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './capsule-tabs.less';
+export type { CapsuleTabsProps, CapsuleTabProps } from './capsule-tabs';
+declare const _default: import("react").FC<import("./capsule-tabs").CapsuleTabsProps> & {
+    Tab: import("react").FC<import("./capsule-tabs").CapsuleTabProps>;
+};
+export default _default;

package/es/components/capsule-tabs/index.js

@@ -0,0 +1,6 @@
+import "./capsule-tabs.css";
+import { CapsuleTab, CapsuleTabs } from './capsule-tabs';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+export default attachPropertiesToComponent(CapsuleTabs, {
+  Tab: CapsuleTab
+});

package/es/components/card/card.d.ts

@@ -1,11 +1,14 @@
-import { FC, ReactNode } from 'react';
-import React from 'react';
+import React, { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type CardProps = {
     title?: ReactNode;
     extra?: ReactNode;
-    onClick?: (event: React.MouseEvent) => void;
-    onBodyClick?: (event: React.MouseEvent) => void;
-    onHeaderClick?: (event: React.MouseEvent) => void;
+    headerStyle?: React.CSSProperties;
+    headerClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    bodyClassName?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onBodyClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onHeaderClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 } & NativeProps;
 export declare const Card: FC<CardProps>;

package/es/components/card/card.js

@@ -9,7 +9,8 @@ export var Card = function Card(props) {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames(classPrefix + "-header"),
+      className: classNames(classPrefix + "-header", props.headerClassName),
+      style: props.headerStyle,
       onClick: props.onHeaderClick
     }, /*#__PURE__*/React.createElement("div", {
       className: classPrefix + "-header-title"
@@ -22,7 +23,8 @@ export var Card = function Card(props) {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-body",
+      className: classNames(classPrefix + "-body", props.bodyClassName),
+      style: props.bodyStyle,
       onClick: props.onBodyClick
     }, props.children);
   };

package/es/components/cascade-picker/cascade-picker-utils.d.ts

@@ -0,0 +1,3 @@
+import { PickerColumn } from '../picker-view';
+import { CascadePickerOption } from './cascade-picker';
+export declare function generateCascadePickerColumns(value: string[], options: CascadePickerOption[], depth: number, subOptionsRecord: Record<string, CascadePickerOption[]>): PickerColumn[];

package/es/components/cascade-picker/cascade-picker-utils.js

@@ -0,0 +1,27 @@
+export function generateCascadePickerColumns(value, options, depth, subOptionsRecord) {
+  var columns = [];
+  columns.push(options.map(function (option) {
+    return {
+      label: option.label,
+      value: option.value
+    };
+  }));
+
+  for (var i = 0; i < depth - 1; i++) {
+    var x = value[i];
+    var subOptions = subOptionsRecord[x];
+
+    if (!subOptions) {
+      columns.push([]);
+    } else {
+      columns.push(subOptions.map(function (option) {
+        return {
+          label: option.label,
+          value: option.value
+        };
+      }));
+    }
+  }
+
+  return columns;
+}

package/es/components/cascade-picker/cascade-picker.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import type { PickerProps } from '../picker';
+export declare type CascadePickerOption = {
+    label: string;
+    value: string;
+    children?: CascadePickerOption[];
+};
+export declare type CascadePickerProps = Omit<PickerProps, 'columns'> & {
+    options: CascadePickerOption[];
+};
+export declare const CascadePicker: FC<CascadePickerProps>;

package/es/components/cascade-picker/cascade-picker.js

@@ -0,0 +1,31 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React from 'react';
+import Picker from '../picker';
+import { useCascadePickerOptions } from './use-cascade-picker-options';
+import { generateCascadePickerColumns } from './cascade-picker-utils';
+export var CascadePicker = function CascadePicker(props) {
+  var options = props.options,
+      pickerProps = __rest(props, ["options"]);
+
+  var _useCascadePickerOpti = useCascadePickerOptions(options),
+      depth = _useCascadePickerOpti.depth,
+      subOptionsRecord = _useCascadePickerOpti.subOptionsRecord;
+
+  return /*#__PURE__*/React.createElement(Picker, Object.assign({}, pickerProps, {
+    columns: function columns(selected) {
+      return generateCascadePickerColumns(selected, options, depth, subOptionsRecord);
+    }
+  }));
+};

package/es/components/cascade-picker/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { prompt } from './prompt';
+export type { CascadePickerProps, CascadePickerOption } from './cascade-picker';
+declare const _default: import("react").FC<import("./cascade-picker").CascadePickerProps> & {
+    prompt: typeof prompt;
+};
+export default _default;

package/es/components/cascade-picker/index.js

@@ -0,0 +1,6 @@
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { prompt } from './prompt';
+import { CascadePicker } from './cascade-picker';
+export default attachPropertiesToComponent(CascadePicker, {
+  prompt: prompt
+});

package/es/components/cascade-picker/prompt.d.ts

@@ -0,0 +1,2 @@
+import { CascadePickerProps } from './cascade-picker';
+export declare function prompt(props: Omit<CascadePickerProps, 'value' | 'visible' | 'children'>): Promise<(string | null)[] | null>;

package/es/components/cascade-picker/prompt.js

@@ -0,0 +1,37 @@
+import { CascadePicker } from './cascade-picker';
+import React, { useEffect, useState } from 'react';
+import { renderToBody } from '../../utils/render-to-body';
+export function prompt(props) {
+  return new Promise(function (resolve) {
+    var Wrapper = function Wrapper() {
+      var _useState = useState(false),
+          visible = _useState[0],
+          setVisible = _useState[1];
+
+      useEffect(function () {
+        setVisible(true);
+      }, []);
+      return /*#__PURE__*/React.createElement(CascadePicker, Object.assign({}, props, {
+        visible: visible,
+        onConfirm: function onConfirm(val) {
+          resolve(val);
+        },
+        onClose: function onClose() {
+          var _a;
+
+          (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+          setVisible(false);
+          resolve(null);
+        },
+        afterClose: function afterClose() {
+          var _a;
+
+          (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+          unmount();
+        }
+      }));
+    };
+
+    var unmount = renderToBody( /*#__PURE__*/React.createElement(Wrapper, null));
+  });
+}

package/es/components/cascade-picker/use-cascade-picker-options.d.ts

@@ -0,0 +1,5 @@
+import { CascadePickerOption } from './cascade-picker';
+export declare function useCascadePickerOptions(options: CascadePickerOption[]): {
+    depth: number;
+    subOptionsRecord: Record<string, CascadePickerOption[]>;
+};

package/es/components/cascade-picker/use-cascade-picker-options.js

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+export function useCascadePickerOptions(options) {
+  return useMemo(function () {
+    var depth = 1;
+    var subOptionsRecord = {};
+
+    function traverse(option, currentDepth) {
+      if (!option.children || option.children.length === 0) {
+        return;
+      }
+
+      subOptionsRecord[option.value] = option.children;
+      var nextDepth = currentDepth + 1;
+
+      if (nextDepth > depth) {
+        depth = nextDepth;
+      }
+
+      option.children.forEach(function (option) {
+        traverse(option, nextDepth);
+      });
+    }
+
+    options.forEach(function (option) {
+      traverse(option, 1);
+    });
+    return {
+      depth: depth,
+      subOptionsRecord: subOptionsRecord
+    };
+  }, [options]);
+}

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import type { PickerViewProps } from '../picker-view';
+import type { CascadePickerOption } from '../cascade-picker';
+export declare type CascadePickerViewProps = Omit<PickerViewProps, 'columns'> & {
+    options: CascadePickerOption[];
+} & NativeProps<'--height'>;
+export declare const CascadePickerView: FC<CascadePickerViewProps>;

package/es/components/cascade-picker-view/cascade-picker-view.js

@@ -0,0 +1,31 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React from 'react';
+import PickerView from '../picker-view';
+import { useCascadePickerOptions } from '../cascade-picker/use-cascade-picker-options';
+import { generateCascadePickerColumns } from '../cascade-picker/cascade-picker-utils';
+export var CascadePickerView = function CascadePickerView(props) {
+  var options = props.options,
+      pickerProps = __rest(props, ["options"]);
+
+  var _useCascadePickerOpti = useCascadePickerOptions(options),
+      depth = _useCascadePickerOpti.depth,
+      subOptionsRecord = _useCascadePickerOpti.subOptionsRecord;
+
+  return /*#__PURE__*/React.createElement(PickerView, Object.assign({}, pickerProps, {
+    columns: function columns(selected) {
+      return generateCascadePickerColumns(selected, options, depth, subOptionsRecord);
+    }
+  }));
+};