react-native-system-ui 0.0.7 → 1.0.0

package/dist/cjs/components/calendar/tokens.js

@@ -17,7 +17,7 @@ const createCalendarTokens = foundations => {
   return {
     defaults: {
       type: "single",
-      title: "选择日期",
+      title: "Select Date",
       showSubtitle: true,
       showHeader: true,
       showConfirm: {
@@ -25,9 +25,9 @@ const createCalendarTokens = foundations => {
         range: true,
         multiple: true
       },
-      confirmText: "确定",
+      confirmText: "Confirm",
       weekStartsOn: 0,
-      weekdays: ["日", "一", "二", "三", "四", "五", "六"],
+      weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
       allowSameDay: false,
       poppable: false,
       closeOnClickOverlay: true,

package/dist/cjs/components/cascader/Cascader.js

@@ -30,6 +30,7 @@ var _utils = require("../../utils");
 var _validate = require("../../utils/validate");
 var _popup = _interopRequireDefault(require("../popup"));
 var _tabs = _interopRequireDefault(require("../tabs"));
+var _useLocale = require("../config-provider/useLocale");
 var _tokens = require("./tokens");
 var _useCascaderExtend = require("./useCascaderExtend");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -40,29 +41,29 @@ const getFieldKeys = fieldNames => ({
   valueKey: fieldNames?.value ?? "value",
   childrenKey: fieldNames?.children ?? "children"
 });
-const resolveSelectedRows = (options = [], keys, value) => {
+const resolveRows = (options = [], keys, values) => {
   const selected = [];
   let current = options;
-  value.forEach(val => {
+  values.forEach(val => {
     if (!current || !current.length) return;
-    const match = current.find(option => option[keys.valueKey] === val);
-    if (match) {
-      selected.push(match);
-      current = match[keys.childrenKey] ?? [];
+    const matched = current.find(o => o[keys.valueKey] === val);
+    if (matched) {
+      selected.push(matched);
+      current = matched[keys.childrenKey] ?? [];
     }
   });
   return selected;
 };
-const Cascader = props => {
+const CascaderImpl = props => {
   const {
     tokensOverride,
     options = [],
-    title: titleProp,
-    placeholder: placeholderProp,
-    activeColor: activeColorProp,
+    title,
+    placeholder,
+    activeColor,
     fieldNames,
     optionRender,
-    showHeader: showHeaderProp,
+    showHeader,
     closeable,
     closeIcon,
     onChange,
@@ -70,54 +71,55 @@ const Cascader = props => {
     onFinish,
     onClickTab,
     onTabChange,
-    swipeable: swipeableProp,
+    swipeable,
     style,
     testID,
     children,
-    poppable: poppableProp,
+    poppable,
     visible: _visible,
     defaultVisible: _defaultVisible,
     onVisibleChange: _onVisibleChange,
-    closeOnClickOverlay: closeOnClickOverlayProp,
-    closeOnFinish: closeOnFinishProp,
-    popupPlacement: popupPlacementProp,
-    popupRound: popupRoundProp,
-    popupProps: popupPropsOverrides,
-    loadingText: loadingTextProp,
+    closeOnClickOverlay,
+    closeOnFinish,
+    popupPlacement,
+    popupRound,
+    popupProps,
+    loadingText,
     ...rest
   } = props;
+  const locale = (0, _useLocale.useLocale)();
   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 resolvedTitle = title ?? locale?.vanCascader?.placeholder ?? tokens.defaults.title;
+  const resolvedPlaceholder = placeholder ?? locale?.vanCascader?.placeholder ?? tokens.defaults.placeholder;
+  const resolvedActiveColor = activeColor ?? tokens.colors.tabActive;
+  const resolvedShowHeader = showHeader ?? tokens.defaults.showHeader;
+  const resolvedSwipeable = swipeable ?? tokens.defaults.swipeable;
+  const resolvedPoppable = poppable ?? tokens.defaults.poppable;
+  const resolvedCloseOnClickOverlay = closeOnClickOverlay ?? tokens.defaults.closeOnClickOverlay;
+  const resolvedCloseOnFinish = closeOnFinish ?? tokens.defaults.closeOnFinish;
+  const resolvedPopupPlacement = popupPlacement ?? tokens.defaults.popupPlacement;
+  const resolvedPopupRound = popupRound ?? tokens.defaults.popupRound;
+  const resolvedLoadingText = loadingText ?? tokens.defaults.loadingText;
   const [value, setValue] = (0, _hooks.useControllableValue)(props, {
     defaultValue: [],
     trigger: "onChange"
   });
   const keys = getFieldKeys(fieldNames);
-  const cascaderValue = Array.isArray(value) ? value : [];
-  const [panelValue, setPanelValue] = (0, _react().useState)(cascaderValue);
-  const resolvedCloseable = closeable ?? tokens.defaults.closeable;
+  const currentValue = Array.isArray(value) ? value : [];
+  const [pendingValue, setPendingValue] = (0, _react().useState)(currentValue);
+  const showClose = 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 current = resolvedPoppable ? pendingValue : currentValue;
   const {
     tabs,
     items,
     depth
-  } = (0, _useCascaderExtend.useCascaderExtend)(options, keys, currentValue);
+  } = (0, _useCascaderExtend.useCascaderExtend)(options, keys, current);
   const {
     width: windowWidth
   } = (0, _reactNative().useWindowDimensions)();
@@ -127,105 +129,105 @@ const Cascader = props => {
     if (!width) return;
     setMeasuredWidth(prev => prev === width ? prev : width);
   }, []);
-  const confirmedRows = resolveSelectedRows(options, keys, cascaderValue);
+  const currentRows = resolveRows(options, keys, currentValue);
   const [activeTab, setActiveTab] = (0, _react().useState)(0);
   (0, _react().useEffect)(() => {
-    const currentLength = Array.isArray(currentValue) ? currentValue.length : 0;
+    const currentLength = Array.isArray(current) ? current.length : 0;
     let tabIndex = currentLength;
     if (tabIndex >= depth) tabIndex = Math.max(depth - 1, 0);
     setActiveTab(prev => prev === tabIndex ? prev : tabIndex);
-  }, [currentValue.length, depth]);
+  }, [current.length, depth]);
   (0, _react().useEffect)(() => {
-    if (!poppable) {
-      setPanelValue(prev => (0, _utils.shallowEqualArray)(prev, cascaderValue) ? prev : cascaderValue);
-      return;
-    }
-    if (!popupVisible) {
-      setPanelValue(prev => (0, _utils.shallowEqualArray)(prev, cascaderValue) ? prev : cascaderValue);
-    }
-  }, [cascaderValue, poppable, popupVisible]);
+    if (!resolvedPoppable || !popupVisible) setPendingValue(prev => (0, _utils.shallowEqualArray)(prev, currentValue) ? prev : currentValue);
+  }, [currentValue, resolvedPoppable, popupVisible]);
   const openPopup = (0, _react().useCallback)(() => {
-    if (!poppable || popupVisible) return;
-    setPanelValue(prev => (0, _utils.shallowEqualArray)(prev, cascaderValue) ? prev : cascaderValue);
+    if (!resolvedPoppable || popupVisible) return;
+    setPendingValue(prev => (0, _utils.shallowEqualArray)(prev, currentValue) ? prev : currentValue);
     setPopupVisible(true);
-  }, [cascaderValue, poppable, popupVisible, setPopupVisible]);
+  }, [currentValue, resolvedPoppable, popupVisible, setPopupVisible]);
+  const onCloseRef = (0, _react().useRef)(onClose),
+    onChangeRef = (0, _react().useRef)(onChange),
+    onFinishRef = (0, _react().useRef)(onFinish),
+    onClickTabRef = (0, _react().useRef)(onClickTab),
+    onTabChangeRef = (0, _react().useRef)(onTabChange);
+  onCloseRef.current = onClose;
+  onChangeRef.current = onChange;
+  onFinishRef.current = onFinish;
+  onClickTabRef.current = onClickTab;
+  onTabChangeRef.current = onTabChange;
   const closePopup = (0, _react().useCallback)(notify => {
-    if (!poppable || !popupVisible) return;
+    if (!resolvedPoppable || !popupVisible) return;
     setPopupVisible(false);
-    if (notify) onClose?.();
-  }, [onClose, poppable, popupVisible, setPopupVisible]);
+    if (notify) onCloseRef.current?.();
+  }, [resolvedPoppable, popupVisible, setPopupVisible]);
   const togglePopup = (0, _react().useCallback)(() => {
-    if (!poppable) return;
+    if (!resolvedPoppable) 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);
+  }, [closePopup, openPopup, resolvedPoppable, popupVisible]);
+  const isRenderProps = (0, _validate.isFunction)(children);
+  const renderProps = isRenderProps ? children : null;
+  const handleClickTab = (0, _react().useCallback)(e => {
+    const index = (0, _validate.isNumber)(e.index) ? e.index : Number(e.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);
+    const tabName = items[index]?.[keys.textKey];
+    const tabText = (0, _validate.isText)(tabName) ? String(tabName) : resolvedPlaceholder;
+    onClickTabRef.current?.(index, tabText);
+  }, [items, keys.textKey, resolvedPlaceholder]);
+  const handleTabChange = (0, _react().useCallback)((tabValue, indexExplicit) => {
+    const index = (0, _validate.isNumber)(indexExplicit) ? indexExplicit : Number(tabValue);
     if (Number.isNaN(index)) return;
     setActiveTab(index);
-    onTabChange?.(index);
-  }, [onTabChange]);
+    onTabChangeRef.current?.(index);
+  }, []);
   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);
+    if (optionValue == null) return;
+    const base = (resolvedPoppable ? pendingValue : currentValue).slice(0, tabIndex);
     const nextValue = [...base, optionValue];
-    const rows = resolveSelectedRows(options, keys, nextValue);
-    const childrenOptions = option[keys.childrenKey] ?? [];
+    const rows = resolveRows(options, keys, nextValue);
+    const children = 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) {
+    const hasChildren = children.length > 0;
+    const isAsync = hasChildrenProp && !hasChildren;
+    const reachedDepth = nextValue.length >= depth;
+    const isLeaf = !hasChildren && !isAsync;
+    if (resolvedPoppable) {
+      setPendingValue(nextValue);
+      onChangeRef.current?.(nextValue, rows);
+    } else setValue(nextValue, rows);
+    if (isLeaf || reachedDepth) {
+      if (resolvedPoppable) {
         setValue(nextValue, rows);
-        if (closeOnFinish) closePopup(true);
+        if (resolvedCloseOnFinish) closePopup(true);
       }
-      onFinish?.(nextValue, rows);
+      onFinishRef.current?.(nextValue, rows);
     }
-  }, [cascaderValue, closeOnFinish, closePopup, depth, keys, onChange, onFinish, options, panelValue, poppable, setValue]);
+  }, [currentValue, resolvedCloseOnFinish, closePopup, depth, keys, options, pendingValue, resolvedPoppable, setValue]);
   const getEmptyText = (0, _react().useCallback)(tabIndex => {
-    if (tabIndex <= 0) return placeholder;
+    if (tabIndex <= 0) return resolvedPlaceholder;
     const parent = items[tabIndex - 1];
-    if (!parent) return placeholder;
+    if (!parent) return resolvedPlaceholder;
     const hasChildrenProp = Object.prototype.hasOwnProperty.call(parent, keys.childrenKey);
-    if (!hasChildrenProp) return placeholder;
+    if (!hasChildrenProp) return resolvedPlaceholder;
     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 isAsync = children.length === 0 && current.length === tabIndex;
+    return isAsync ? resolvedLoadingText : resolvedPlaceholder;
+  }, [current.length, items, keys.childrenKey, resolvedLoadingText, resolvedPlaceholder]);
   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;
+    if (!tabs.length) return /*#__PURE__*/_react().default.createElement(CascaderOptionList, {
+      optionList: [],
+      tabIndex: 0,
+      selectedValue: current[0],
+      activeColor: resolvedActiveColor,
+      keys: keys,
+      optionRender: optionRender,
+      onSelect: handleSelect,
+      tokens: tokens,
+      emptyText: getEmptyText(0)
+    });
+    const swipeEnabled = !!resolvedSwipeable;
+    const renderTabsWidth = measuredWidth || windowWidth || undefined;
     const tabBarStyle = {
       height: tokens.sizing.headerHeight,
       paddingHorizontal: tokens.spacing.tabNavPaddingHorizontal,
@@ -236,19 +238,19 @@ const Cascader = props => {
       style: tokens.layout.tabsWrapper,
       onLayout: handleTabsLayout
     }, /*#__PURE__*/_react().default.createElement(_tabs.default, {
-      style: resolvedTabsWidth ? {
-        width: resolvedTabsWidth
+      style: renderTabsWidth ? {
+        width: renderTabsWidth
       } : undefined,
       active: activeTab,
       onChange: handleTabChange,
       onClickTab: handleClickTab,
       align: "center",
-      swipeable: swipeableEnabled,
+      swipeable: swipeEnabled,
       swipeThreshold: 0,
       scrollable: true,
       animated: true,
       duration: 300,
-      color: activeColor,
+      color: resolvedActiveColor,
       lineHeight: tokens.sizing.indicatorHeight,
       titleActiveColor: tokens.colors.tabText,
       titleInactiveColor: tokens.colors.tabInactive,
@@ -259,66 +261,60 @@ const Cascader = props => {
       titleStyle: [tokens.layout.tabsTitle, {
         fontSize: tokens.typography.tabsTitleSize
       }],
-      contentStyle: !swipeableEnabled ? tokens.layout.tabsContentStatic : undefined
-    }, tabs.map((optionList, index) => {
-      const selectedOption = items[index];
+      contentStyle: !swipeEnabled ? tokens.layout.tabsContentStatic : undefined
+    }, tabs.map((optionList, i) => {
+      const selectedOption = items[i];
       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, {
+      const label = (0, _validate.isText)(labelValue) ? String(labelValue) : "";
+      const usePlaceholder = !label;
+      const titleNode = _ => /*#__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
+          color: usePlaceholder ? tokens.colors.tabInactive : tokens.colors.tabText,
+          fontWeight: usePlaceholder ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
         }]
-      }, unselected ? placeholder : labelText);
+      }, usePlaceholder ? resolvedPlaceholder : label);
       return /*#__PURE__*/_react().default.createElement(_tabs.default.TabPane, {
-        key: index,
-        name: index,
+        key: i,
+        name: i,
         title: titleNode
       }, /*#__PURE__*/_react().default.createElement(CascaderOptionList, {
         optionList: optionList,
-        tabIndex: index,
-        selectedValue: currentValue[index],
-        activeColor: activeColor,
+        tabIndex: i,
+        selectedValue: current[i],
+        activeColor: resolvedActiveColor,
         keys: keys,
         optionRender: optionRender,
         onSelect: handleSelect,
         tokens: tokens,
-        emptyText: getEmptyText(index)
+        emptyText: getEmptyText(i)
       }));
     })));
   };
-  const inlineChildren = !poppable && !isRenderProp ? children : null;
+  const inlineChildren = !resolvedPoppable && !isRenderProps ? 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, {
+  }, rest), resolvedShowHeader ? /*#__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, {
+  }, (0, _utils.renderTextOrNode)(resolvedTitle, [tokens.layout.title, {
+    color: tokens.colors.headerText,
+    fontSize: tokens.typography.titleSize,
+    fontWeight: tokens.typography.titleWeight
+  }]), showClose ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
     hitSlop: 8,
     onPress: () => {
-      if (poppable) {
-        closePopup(true);
-      } else {
-        onClose?.();
-      }
+      if (resolvedPoppable) closePopup(true);else onCloseRef.current?.();
     },
     style: [tokens.layout.closeButton, {
       marginLeft: tokens.spacing.closeButtonMarginLeft
     }],
     accessibilityRole: "button",
-    accessibilityLabel: "\u5173\u95ED"
+    accessibilityLabel: locale?.vanCascader?.close ?? 'Close'
   }, closeIcon ?? (state => /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Cross, {
     size: tokens.sizing.closeIconSize,
     fill: state.pressed ? tokens.colors.closeIconActive : tokens.colors.closeIcon,
@@ -329,19 +325,25 @@ const Cascader = props => {
       paddingHorizontal: tokens.spacing.headerPaddingHorizontal
     }]
   }, inlineChildren) : null);
-  if (!poppable) return content;
+  if (!resolvedPoppable) return content;
   const {
-    closeOnOverlayPress: overrideCloseOnOverlayPress,
+    closeOnOverlayPress: overlayCloseOnPress,
     overlay: popupOverlay,
     onOpen: popupOnOpen,
     onOpened: popupOnOpened,
     onClose: popupOnClose,
     onClosed: popupOnClosed,
     ...popupRestProps
-  } = popupPropsOverrides ?? {};
-  const resolvedOverlay = popupOverlay ?? true;
-  const resolvedCloseOnOverlayPress = overrideCloseOnOverlayPress ?? closeOnClickOverlay;
-  const cascaderActions = {
+  } = popupProps ?? {};
+  const renderOverlay = popupOverlay ?? true;
+  const renderCloseOnPress = overlayCloseOnPress ?? resolvedCloseOnClickOverlay;
+  const popupOnCloseRef = (0, _react().useRef)(popupOnClose);
+  popupOnCloseRef.current = popupOnClose;
+  const handlePopupClose = (0, _react().useCallback)(() => {
+    popupOnCloseRef.current?.();
+    closePopup(true);
+  }, [closePopup]);
+  const controlActions = {
     open: openPopup,
     close: () => closePopup(true),
     toggle: togglePopup
@@ -359,22 +361,19 @@ const Cascader = props => {
       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({
+  const triggerNode = renderProps ? renderProps(currentValue, currentRows, controlActions) : isRenderProps ? null : children || null;
+  const renderTriggerNode = enhanceTriggerNode(triggerNode);
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, renderTriggerNode, /*#__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',
+    placement: resolvedPopupPlacement,
+    round: resolvedPopupRound,
+    closeOnOverlayPress: renderCloseOnPress,
+    overlay: renderOverlay,
+    safeAreaInsetTop: popupRestProps?.safeAreaInsetTop != null ? popupRestProps.safeAreaInsetTop : resolvedShowHeader && showClose,
+    safeAreaInsetBottom: popupRestProps?.safeAreaInsetBottom != null ? popupRestProps.safeAreaInsetBottom : resolvedPopupPlacement === 'bottom',
     onOpen: popupOnOpen,
     onOpened: popupOnOpened,
-    onClose: () => {
-      popupOnClose?.();
-      closePopup(true);
-    },
+    onClose: handlePopupClose,
     onClosed: popupOnClosed
   }, popupRestProps, {
     style: {
@@ -398,17 +397,16 @@ const CascaderOptionItem = /*#__PURE__*/_react().default.memo(({
   const disabled = !!option.disabled;
   const baseColor = option.color ?? tokens.colors.optionText;
   const textColor = disabled ? tokens.colors.optionDisabled : selected ? option.color ?? activeColor : baseColor;
+  const optionTextStyle = [tokens.layout.optionText, {
+    color: textColor,
+    fontSize: tokens.typography.optionTextSize
+  }, selected ? {
+    fontWeight: tokens.typography.optionTextActiveWeight
+  } : null];
   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;
+  }) : (0, _utils.renderTextOrNode)(label, optionTextStyle);
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
     testID: `cascader-option-${tabIndex}-${String(optionValue)}`,
     style: ({
@@ -445,19 +443,6 @@ const CascaderOptionList = /*#__PURE__*/_react().default.memo(({
   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, {
@@ -471,6 +456,17 @@ const CascaderOptionList = /*#__PURE__*/_react().default.memo(({
     tokens: tokens
   }), [activeColor, keys, onSelect, optionRender, selectedValue, tabIndex, tokens]);
   const keyExtractor = (0, _react().useCallback)(item => String(item[keys.valueKey]), [keys.valueKey]);
+  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));
   return /*#__PURE__*/_react().default.createElement(_reactNative().FlatList, {
     data: optionList,
     style: [tokens.layout.optionList, {
@@ -488,4 +484,5 @@ const CascaderOptionList = /*#__PURE__*/_react().default.memo(({
     windowSize: 5
   });
 });
+const Cascader = /*#__PURE__*/_react().default.memo(CascaderImpl);
 var _default = exports.default = Cascader;

package/dist/cjs/components/cascader/tokens.js

@@ -12,7 +12,7 @@ const createCascaderTokens = foundations => {
     radii
   } = foundations;
   const surfaceMuted = palette.default[100];
-  const placeholderText = "请选择";
+  const placeholderText = "Select";
   return {
     defaults: {
       placeholder: placeholderText,
@@ -25,7 +25,7 @@ const createCascaderTokens = foundations => {
       closeOnFinish: true,
       popupPlacement: "bottom",
       popupRound: true,
-      loadingText: "加载中..."
+      loadingText: "Loading..."
     },
     layout: {
       container: {

package/dist/cjs/components/cascader/useCascaderExtend.js

@@ -4,36 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCascaderExtend = void 0;
+const getDepth = (options, childrenKey) => {
+  let max = 1;
+  const traverse = (opts, level) => {
+    if (!opts?.length) return;
+    if (level > max) max = level;
+    opts.forEach(o => {
+      const has = Object.prototype.hasOwnProperty.call(o, childrenKey);
+      if (has && level + 1 > max) max = level + 1;
+      const ch = o[childrenKey];
+      if (ch?.length) traverse(ch, level + 1);
+    });
+  };
+  traverse(options, 1);
+  return max;
+};
 const useCascaderExtend = (options = [], keys, value) => {
-  const depth = (() => {
-    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;
-  })();
-  const tabs = (() => {
-    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]);
-  })();
-  const items = !value || !value.length ? [] : value.map((val, index) => tabs[index]?.find(option => option[keys.valueKey] === val));
+  const depth = getDepth(options, keys.childrenKey);
+  const tabs = !value?.length ? [options] : value.reduce((acc, val, i) => {
+    if (val == null) return acc;
+    const cur = acc[i];
+    if (!cur) return acc;
+    const ch = cur.find(o => o[keys.valueKey] === value[i])?.[keys.childrenKey];
+    if (ch) acc.push(ch);
+    return acc;
+  }, [options]);
+  const items = !value?.length ? [] : value.map((val, i) => tabs[i]?.find(o => o[keys.valueKey] === val));
   return {
     tabs,
     items,