react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/cascader/Cascader.js

@@ -0,0 +1,486 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNativeSystemIcon() {
+  const data = require("react-native-system-icon");
+  _reactNativeSystemIcon = function () {
+    return data;
+  };
+  return data;
+}
+var _hooks = require("../../hooks");
+var _validate = require("../../utils/validate");
+var _popup = _interopRequireDefault(require("../popup"));
+var _tabs = _interopRequireDefault(require("../tabs"));
+var _tokens = require("./tokens");
+var _useCascaderExtend = require("./useCascaderExtend");
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const getFieldKeys = fieldNames => ({
+  textKey: fieldNames?.text ?? "text",
+  valueKey: fieldNames?.value ?? "value",
+  childrenKey: fieldNames?.children ?? "children"
+});
+const isSameValueArray = (a, b) => {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};
+const Cascader = props => {
+  const {
+    tokensOverride,
+    options = [],
+    title: titleProp,
+    placeholder: placeholderProp,
+    activeColor: activeColorProp,
+    fieldNames,
+    optionRender,
+    showHeader: showHeaderProp,
+    closeable,
+    closeIcon,
+    onChange,
+    onClose,
+    onFinish,
+    onClickTab,
+    onTabChange,
+    swipeable: swipeableProp,
+    style,
+    testID,
+    children,
+    poppable: poppableProp,
+    visible: _visible,
+    defaultVisible: _defaultVisible,
+    onVisibleChange: _onVisibleChange,
+    closeOnClickOverlay: closeOnClickOverlayProp,
+    closeOnFinish: closeOnFinishProp,
+    popupPlacement: popupPlacementProp,
+    popupRound: popupRoundProp,
+    popupProps: popupPropsOverrides,
+    loadingText: loadingTextProp,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useCascaderTokens)(tokensOverride);
+  const title = titleProp ?? tokens.defaults.title;
+  const placeholder = placeholderProp ?? tokens.defaults.placeholder;
+  const activeColor = activeColorProp ?? tokens.colors.tabActive;
+  const showHeader = showHeaderProp ?? tokens.defaults.showHeader;
+  const swipeable = swipeableProp ?? tokens.defaults.swipeable;
+  const poppable = poppableProp ?? tokens.defaults.poppable;
+  const closeOnClickOverlay = closeOnClickOverlayProp ?? tokens.defaults.closeOnClickOverlay;
+  const closeOnFinish = closeOnFinishProp ?? tokens.defaults.closeOnFinish;
+  const popupPlacement = popupPlacementProp ?? tokens.defaults.popupPlacement;
+  const popupRound = popupRoundProp ?? tokens.defaults.popupRound;
+  const loadingText = loadingTextProp ?? tokens.defaults.loadingText;
+  const [value, setValue] = (0, _hooks.useControllableValue)(props, {
+    defaultValue: [],
+    trigger: "onChange"
+  });
+  const keys = (0, _react().useMemo)(() => getFieldKeys(fieldNames), [fieldNames]);
+  const cascaderValue = Array.isArray(value) ? value : [];
+  const [panelValue, setPanelValue] = (0, _react().useState)(cascaderValue);
+  const resolvedCloseable = closeable ?? tokens.defaults.closeable;
+  const [popupVisible, setPopupVisible] = (0, _hooks.useControllableValue)(props, {
+    defaultValue: false,
+    valuePropName: "visible",
+    defaultValuePropName: "defaultVisible",
+    trigger: "onVisibleChange"
+  });
+  const currentValue = poppable ? panelValue : cascaderValue;
+  const {
+    tabs,
+    items,
+    depth
+  } = (0, _useCascaderExtend.useCascaderExtend)(options, keys, currentValue);
+  const {
+    width: windowWidth
+  } = (0, _reactNative().useWindowDimensions)();
+  const [measuredWidth, setMeasuredWidth] = (0, _react().useState)(0);
+  const handleTabsLayout = (0, _react().useCallback)(e => {
+    const width = e.nativeEvent.layout.width;
+    if (!width) return;
+    setMeasuredWidth(prev => prev === width ? prev : width);
+  }, []);
+  const confirmedRows = (0, _react().useMemo)(() => (0, _utils.resolveSelectedRows)(options, keys, cascaderValue), [cascaderValue, keys, options]);
+  const [activeTab, setActiveTab] = (0, _react().useState)(0);
+  (0, _react().useEffect)(() => {
+    const currentLength = Array.isArray(currentValue) ? currentValue.length : 0;
+    let tabIndex = currentLength;
+    if (tabIndex >= depth) tabIndex = Math.max(depth - 1, 0);
+    setActiveTab(prev => prev === tabIndex ? prev : tabIndex);
+  }, [currentValue.length, depth]);
+  (0, _react().useEffect)(() => {
+    if (!poppable) {
+      setPanelValue(prev => isSameValueArray(prev, cascaderValue) ? prev : cascaderValue);
+      return;
+    }
+    if (!popupVisible) {
+      setPanelValue(prev => isSameValueArray(prev, cascaderValue) ? prev : cascaderValue);
+    }
+  }, [cascaderValue, poppable, popupVisible]);
+  const openPopup = (0, _react().useCallback)(() => {
+    if (!poppable || popupVisible) return;
+    setPanelValue(prev => isSameValueArray(prev, cascaderValue) ? prev : cascaderValue);
+    setPopupVisible(true);
+  }, [cascaderValue, poppable, popupVisible, setPopupVisible]);
+  const closePopup = (0, _react().useCallback)(notify => {
+    if (!poppable || !popupVisible) return;
+    setPopupVisible(false);
+    if (notify) onClose?.();
+  }, [onClose, poppable, popupVisible, setPopupVisible]);
+  const togglePopup = (0, _react().useCallback)(() => {
+    if (!poppable) return;
+    popupVisible ? closePopup(true) : openPopup();
+  }, [closePopup, openPopup, poppable, popupVisible]);
+  const isRenderProp = (0, _validate.isFunction)(children);
+  const renderProp = isRenderProp ? children : null;
+  const handleClickTab = (0, _react().useCallback)(event => {
+    const index = (0, _validate.isNumber)(event.index) ? event.index : Number(event.name);
+    if (Number.isNaN(index)) return;
+    const titleNode = items[index]?.[keys.textKey];
+    const titleText = (0, _validate.isText)(titleNode) ? String(titleNode) : placeholder;
+    onClickTab?.(index, titleText);
+  }, [items, keys.textKey, onClickTab, placeholder]);
+  const handleTabChange = (0, _react().useCallback)((tabValue, indexFromEvent) => {
+    const index = (0, _validate.isNumber)(indexFromEvent) ? indexFromEvent : Number(tabValue);
+    if (Number.isNaN(index)) return;
+    setActiveTab(index);
+    onTabChange?.(index);
+  }, [onTabChange]);
+  const handleSelect = (0, _react().useCallback)((option, tabIndex) => {
+    if (option.disabled) return;
+    const optionValue = option[keys.valueKey];
+    if (optionValue === undefined || optionValue === null) return;
+    const base = (poppable ? panelValue : cascaderValue).slice(0, tabIndex);
+    const nextValue = [...base, optionValue];
+    const rows = (0, _utils.resolveSelectedRows)(options, keys, nextValue);
+    const childrenOptions = option[keys.childrenKey] ?? [];
+    const hasChildrenProp = Object.prototype.hasOwnProperty.call(option, keys.childrenKey);
+    const hasChildren = childrenOptions.length > 0;
+    const asyncBranch = hasChildrenProp && !hasChildren;
+    const reachDepth = nextValue.length >= depth;
+    const isLeaf = !hasChildren && !asyncBranch;
+    if (poppable) {
+      setPanelValue(nextValue);
+      onChange?.(nextValue, rows);
+    } else {
+      setValue(nextValue, rows);
+    }
+    if (isLeaf || reachDepth) {
+      if (poppable) {
+        setValue(nextValue, rows);
+        if (closeOnFinish) closePopup(true);
+      }
+      onFinish?.(nextValue, rows);
+    }
+  }, [cascaderValue, closeOnFinish, closePopup, depth, keys, onChange, onFinish, options, panelValue, poppable, setValue]);
+  const getEmptyText = (0, _react().useCallback)(tabIndex => {
+    if (tabIndex <= 0) return placeholder;
+    const parent = items[tabIndex - 1];
+    if (!parent) return placeholder;
+    const hasChildrenProp = Object.prototype.hasOwnProperty.call(parent, keys.childrenKey);
+    if (!hasChildrenProp) return placeholder;
+    const children = parent[keys.childrenKey] ?? [];
+    const asyncBranch = children.length === 0 && currentValue.length === tabIndex;
+    return asyncBranch ? loadingText : placeholder;
+  }, [currentValue.length, items, keys.childrenKey, loadingText, placeholder]);
+  const renderTabs = () => {
+    if (!tabs.length) {
+      return /*#__PURE__*/_react().default.createElement(CascaderOptionList, {
+        optionList: [],
+        tabIndex: 0,
+        selectedValue: currentValue[0],
+        activeColor: activeColor,
+        keys: keys,
+        optionRender: optionRender,
+        onSelect: handleSelect,
+        tokens: tokens,
+        emptyText: getEmptyText(0)
+      });
+    }
+    const swipeableEnabled = !!swipeable;
+    const resolvedTabsWidth = measuredWidth || windowWidth || undefined;
+    const tabBarStyle = {
+      height: tokens.sizing.headerHeight,
+      paddingHorizontal: tokens.spacing.tabNavPaddingHorizontal,
+      paddingVertical: tokens.spacing.tabNavPaddingVertical,
+      backgroundColor: tokens.colors.background
+    };
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: tokens.layout.tabsWrapper,
+      onLayout: handleTabsLayout
+    }, /*#__PURE__*/_react().default.createElement(_tabs.default, {
+      style: resolvedTabsWidth ? {
+        width: resolvedTabsWidth
+      } : undefined,
+      active: activeTab,
+      onChange: handleTabChange,
+      onClickTab: handleClickTab,
+      align: "center",
+      swipeable: swipeableEnabled,
+      swipeThreshold: 0,
+      scrollable: true,
+      animated: true,
+      duration: 300,
+      color: activeColor,
+      lineHeight: tokens.sizing.indicatorHeight,
+      titleActiveColor: tokens.colors.tabText,
+      titleInactiveColor: tokens.colors.tabInactive,
+      tabBarStyle: tabBarStyle,
+      tabStyle: [tokens.layout.tabsItem, {
+        paddingHorizontal: tokens.spacing.tabPaddingHorizontal
+      }],
+      titleStyle: [tokens.layout.tabsTitle, {
+        fontSize: tokens.typography.tabsTitleSize
+      }],
+      contentStyle: !swipeableEnabled ? tokens.layout.tabsContentStatic : undefined
+    }, tabs.map((optionList, index) => {
+      const selectedOption = items[index];
+      const labelValue = selectedOption?.[keys.textKey];
+      const labelText = (0, _validate.isText)(labelValue) ? String(labelValue) : "";
+      const unselected = !labelText;
+      const titleNode = _active => /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        style: [tokens.layout.tabTitleNode, {
+          color: unselected ? tokens.colors.tabInactive : tokens.colors.tabText,
+          fontWeight: unselected ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
+        }]
+      }, unselected ? placeholder : labelText);
+      return /*#__PURE__*/_react().default.createElement(_tabs.default.TabPane, {
+        key: index,
+        name: index,
+        title: titleNode
+      }, /*#__PURE__*/_react().default.createElement(CascaderOptionList, {
+        optionList: optionList,
+        tabIndex: index,
+        selectedValue: currentValue[index],
+        activeColor: activeColor,
+        keys: keys,
+        optionRender: optionRender,
+        onSelect: handleSelect,
+        tokens: tokens,
+        emptyText: getEmptyText(index)
+      }));
+    })));
+  };
+  const inlineChildren = !poppable && !isRenderProp ? children : null;
+  const content = /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    testID: testID,
+    style: [tokens.layout.container, {
+      backgroundColor: tokens.colors.background
+    }, style]
+  }, rest), showHeader ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.header, {
+      height: tokens.sizing.headerHeight,
+      paddingHorizontal: tokens.spacing.headerPaddingHorizontal
+    }]
+  }, (0, _validate.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.title, {
+      color: tokens.colors.headerText,
+      fontSize: tokens.typography.titleSize,
+      fontWeight: tokens.typography.titleWeight
+    }]
+  }, title) : title, resolvedCloseable ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+    hitSlop: 8,
+    onPress: () => {
+      if (poppable) {
+        closePopup(true);
+      } else {
+        onClose?.();
+      }
+    },
+    style: [tokens.layout.closeButton, {
+      marginLeft: tokens.spacing.closeButtonMarginLeft
+    }],
+    accessibilityRole: "button",
+    accessibilityLabel: "\u5173\u95ED"
+  }, closeIcon ?? (state => /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Cross, {
+    size: tokens.sizing.closeIconSize,
+    fill: state.pressed ? tokens.colors.closeIconActive : tokens.colors.closeIcon,
+    color: state.pressed ? tokens.colors.closeIconActive : tokens.colors.closeIcon
+  }))) : null) : null, renderTabs(), inlineChildren ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.inlineChildren, {
+      paddingVertical: tokens.spacing.inlineChildrenPaddingVertical,
+      paddingHorizontal: tokens.spacing.headerPaddingHorizontal
+    }]
+  }, inlineChildren) : null);
+  if (!poppable) return content;
+  const {
+    closeOnOverlayPress: overrideCloseOnOverlayPress,
+    overlay: popupOverlay,
+    onOpen: popupOnOpen,
+    onOpened: popupOnOpened,
+    onClose: popupOnClose,
+    onClosed: popupOnClosed,
+    ...popupRestProps
+  } = popupPropsOverrides ?? {};
+  const resolvedOverlay = popupOverlay ?? true;
+  const resolvedCloseOnOverlayPress = overrideCloseOnOverlayPress ?? closeOnClickOverlay;
+  const cascaderActions = (0, _react().useMemo)(() => ({
+    open: openPopup,
+    close: () => closePopup(true),
+    toggle: togglePopup
+  }), [closePopup, openPopup, togglePopup]);
+  const enhanceTriggerNode = (0, _react().useCallback)(node => {
+    if (! /*#__PURE__*/_react().default.isValidElement(node)) return node;
+    const props = node.props;
+    const handlePress = () => {
+      props.onPress?.();
+      props.onClick?.();
+      openPopup();
+    };
+    return /*#__PURE__*/_react().default.cloneElement(node, {
+      onPress: handlePress,
+      onClick: handlePress
+    });
+  }, [openPopup]);
+  const triggerNode = renderProp ? renderProp(cascaderValue, confirmedRows, cascaderActions) : isRenderProp ? null : children || null;
+  const resolvedTriggerNode = enhanceTriggerNode(triggerNode);
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, resolvedTriggerNode, /*#__PURE__*/_react().default.createElement(_popup.default, _extends({
+    visible: popupVisible,
+    placement: popupPlacement,
+    round: popupRound,
+    closeOnOverlayPress: resolvedCloseOnOverlayPress,
+    overlay: resolvedOverlay,
+    safeAreaInsetTop: popupRestProps?.safeAreaInsetTop !== undefined ? popupRestProps.safeAreaInsetTop : showHeader && resolvedCloseable,
+    safeAreaInsetBottom: popupRestProps?.safeAreaInsetBottom !== undefined ? popupRestProps.safeAreaInsetBottom : popupPlacement === 'bottom',
+    onOpen: popupOnOpen,
+    onOpened: popupOnOpened,
+    onClose: () => {
+      popupOnClose?.();
+      closePopup(true);
+    },
+    onClosed: popupOnClosed
+  }, popupRestProps, {
+    style: {
+      paddingLeft: 0,
+      paddingRight: 0
+    }
+  }), content));
+};
+const CascaderOptionItem = /*#__PURE__*/_react().default.memo(({
+  option,
+  tabIndex,
+  selected,
+  activeColor,
+  keys,
+  optionRender,
+  onSelect,
+  tokens
+}) => {
+  const optionValue = option[keys.valueKey];
+  const label = option[keys.textKey];
+  const disabled = !!option.disabled;
+  const baseColor = option.color ?? tokens.colors.optionText;
+  const textColor = disabled ? tokens.colors.optionDisabled : selected ? option.color ?? activeColor : baseColor;
+  const content = optionRender ? optionRender({
+    option,
+    selected
+  }) : (0, _validate.isText)(label) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.optionText, {
+      color: textColor,
+      fontSize: tokens.typography.optionTextSize
+    }, selected && {
+      fontWeight: tokens.typography.optionTextActiveWeight
+    }]
+  }, label) : (0, _validate.isRenderable)(label) ? label : null;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+    testID: `cascader-option-${tabIndex}-${String(optionValue)}`,
+    style: ({
+      pressed
+    }) => [tokens.layout.option, {
+      minHeight: tokens.sizing.optionMinHeight,
+      paddingVertical: tokens.spacing.optionPaddingVertical,
+      paddingHorizontal: tokens.spacing.optionPaddingHorizontal
+    }, pressed && !disabled && {
+      backgroundColor: tokens.colors.optionActiveBackground
+    }],
+    onPress: () => onSelect(option, tabIndex),
+    disabled: disabled
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.optionContent
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.optionLabel, {
+      marginRight: tokens.spacing.optionLabelMarginRight
+    }]
+  }, content), selected ? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Checked, {
+    size: tokens.sizing.selectedIconSize,
+    fill: activeColor,
+    color: activeColor
+  }) : null));
+});
+const CascaderOptionList = /*#__PURE__*/_react().default.memo(({
+  optionList,
+  tabIndex,
+  selectedValue,
+  activeColor,
+  keys,
+  optionRender,
+  onSelect,
+  tokens,
+  emptyText
+}) => {
+  if (!optionList.length) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [tokens.layout.optionList, {
+        height: tokens.sizing.optionListHeight
+      }]
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [tokens.layout.empty, {
+        color: tokens.colors.placeholder,
+        paddingVertical: tokens.spacing.emptyPaddingVertical,
+        fontSize: tokens.typography.emptyTextSize
+      }]
+    }, emptyText));
+  }
+  const renderItem = (0, _react().useCallback)(({
+    item
+  }) => /*#__PURE__*/_react().default.createElement(CascaderOptionItem, {
+    option: item,
+    tabIndex: tabIndex,
+    selected: selectedValue === item[keys.valueKey],
+    activeColor: activeColor,
+    keys: keys,
+    optionRender: optionRender,
+    onSelect: onSelect,
+    tokens: tokens
+  }), [activeColor, keys, onSelect, optionRender, selectedValue, tabIndex, tokens]);
+  const keyExtractor = (0, _react().useCallback)(item => String(item[keys.valueKey]), [keys.valueKey]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().FlatList, {
+    data: optionList,
+    style: [tokens.layout.optionList, {
+      height: tokens.sizing.optionListHeight
+    }],
+    contentContainerStyle: {
+      paddingTop: tokens.spacing.optionListPaddingTop,
+      paddingBottom: tokens.spacing.optionListPaddingBottom
+    },
+    showsVerticalScrollIndicator: false,
+    renderItem: renderItem,
+    keyExtractor: keyExtractor,
+    removeClippedSubviews: true,
+    initialNumToRender: 20,
+    windowSize: 5
+  });
+});
+var _default = exports.default = Cascader;

package/dist/cjs/cascader/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Cascader", {
+  enumerable: true,
+  get: function () {
+    return _Cascader.default;
+  }
+});
+exports.default = void 0;
+var _Cascader = _interopRequireDefault(require("./Cascader"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Cascader.default;

package/dist/cjs/cascader/tokens.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCascaderTokens = exports.createCascaderTokens = void 0;
+var _designSystem = require("../../design-system");
+const createCascaderTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii
+  } = foundations;
+  const surfaceMuted = palette.default[100];
+  const placeholderText = "请选择";
+  return {
+    defaults: {
+      placeholder: placeholderText,
+      title: placeholderText,
+      showHeader: true,
+      closeable: true,
+      swipeable: true,
+      poppable: false,
+      closeOnClickOverlay: true,
+      closeOnFinish: true,
+      popupPlacement: "bottom",
+      popupRound: true,
+      loadingText: "加载中..."
+    },
+    layout: {
+      container: {
+        borderRadius: 0,
+        width: "100%"
+      },
+      header: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingVertical: 0
+      },
+      title: {
+        lineHeight: 20,
+        includeFontPadding: false
+      },
+      closeButton: {},
+      tabsWrapper: {
+        width: "100%"
+      },
+      tabsContentStatic: {
+        width: "100%"
+      },
+      tabsItem: {
+        alignItems: "center"
+      },
+      tabsTitle: {
+        includeFontPadding: false
+      },
+      tabTitleNode: {
+        includeFontPadding: false
+      },
+      optionList: {
+        flexGrow: 0
+      },
+      option: {
+        justifyContent: "center"
+      },
+      optionContent: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      optionText: {
+        lineHeight: 20,
+        includeFontPadding: false
+      },
+      optionTextActive: {},
+      optionLabel: {
+        flex: 1
+      },
+      empty: {
+        textAlign: "center"
+      },
+      inlineChildren: {}
+    },
+    colors: {
+      background: "#ffffff",
+      headerText: palette.default[900],
+      placeholder: palette.default[500],
+      closeIcon: palette.default[300],
+      closeIconActive: palette.default[500],
+      tabText: palette.default[900],
+      tabActive: palette.primary[500],
+      tabInactive: palette.default[500],
+      optionText: palette.default[900],
+      optionDisabled: palette.default[300],
+      optionActiveBackground: surfaceMuted,
+      optionActiveText: palette.primary[500],
+      divider: palette.default[200]
+    },
+    typography: {
+      titleSize: 16,
+      titleWeight: "500",
+      tabsTitleSize: 14,
+      tabTitlePlaceholderWeight: "400",
+      tabTitleWeight: "500",
+      optionTextSize: 14,
+      optionTextActiveWeight: "500",
+      emptyTextSize: 14
+    },
+    sizing: {
+      indicatorHeight: 3,
+      optionMinHeight: 40,
+      optionListHeight: 384,
+      headerHeight: 48,
+      closeIconSize: 22,
+      selectedIconSize: 18
+    },
+    radii: {
+      option: radii.sm
+    },
+    spacing: {
+      headerPaddingHorizontal: spacing.lg,
+      tabNavPaddingHorizontal: 6,
+      tabNavPaddingVertical: 2,
+      tabPaddingHorizontal: 10,
+      optionPaddingVertical: 10,
+      optionPaddingHorizontal: spacing.lg,
+      optionListPaddingTop: 6,
+      optionListPaddingBottom: 0,
+      closeButtonMarginLeft: 8,
+      optionLabelMarginRight: 12,
+      emptyPaddingVertical: 24,
+      inlineChildrenPaddingVertical: 12
+    }
+  };
+};
+exports.createCascaderTokens = createCascaderTokens;
+const useCascaderTokens = exports.useCascaderTokens = (0, _designSystem.createComponentTokensHook)("cascader", createCascaderTokens);

package/dist/cjs/cascader/useCascaderExtend.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCascaderExtend = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+const useCascaderExtend = (options = [], keys, value) => {
+  const depth = (0, _react().useMemo)(() => {
+    let maxDepth = 1;
+    const traverse = (opts, level) => {
+      if (!opts || !opts.length) return;
+      if (level > maxDepth) maxDepth = level;
+      const next = level + 1;
+      opts.forEach(option => {
+        const hasChildrenProp = Object.prototype.hasOwnProperty.call(option, keys.childrenKey);
+        if (hasChildrenProp && next > maxDepth) maxDepth = next;
+        const children = option[keys.childrenKey];
+        if (children && children.length) traverse(children, next);
+      });
+    };
+    traverse(options, 1);
+    return maxDepth;
+  }, [keys.childrenKey, options]);
+  const tabs = (0, _react().useMemo)(() => {
+    if (!value || !value.length) return [options];
+    return value.reduce((acc, val, index) => {
+      if (val == null) return acc;
+      const current = acc[index];
+      if (!current) return acc;
+      const next = current.find(option => option[keys.valueKey] === value[index]);
+      const children = next?.[keys.childrenKey];
+      if (children) acc.push(children);
+      return acc;
+    }, [options]);
+  }, [keys.childrenKey, keys.valueKey, options, value]);
+  const items = (0, _react().useMemo)(() => {
+    if (!value || !value.length) return [];
+    return value.map((val, index) => tabs[index]?.find(option => option[keys.valueKey] === val));
+  }, [keys.valueKey, tabs, value]);
+  return {
+    tabs,
+    items,
+    depth
+  };
+};
+exports.useCascaderExtend = useCascaderExtend;