react-native-system-ui 0.0.7 → 1.0.1

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

@@ -30,39 +30,40 @@ 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 }; }
 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 getFieldKeys = fn => ({
+  textKey: fn?.text ?? "text",
+  valueKey: fn?.value ?? "value",
+  childrenKey: fn?.children ?? "children"
 });
-const resolveSelectedRows = (options = [], keys, value) => {
-  const selected = [];
-  let current = options;
-  value.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 resolveRows = (opts = [], k, vals) => {
+  const sel = [];
+  let cur = opts;
+  vals.forEach(val => {
+    if (!cur?.length) return;
+    const m = cur.find(o => o[k.valueKey] === val);
+    if (m) {
+      sel.push(m);
+      cur = m[k.childrenKey] ?? [];
     }
   });
-  return selected;
+  return sel;
 };
-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,163 +71,160 @@ const Cascader = props => {
     onFinish,
     onClickTab,
     onTabChange,
-    swipeable: swipeableProp,
+    swipeable,
     style,
     testID,
     children,
-    poppable: poppableProp,
-    visible: _visible,
-    defaultVisible: _defaultVisible,
-    onVisibleChange: _onVisibleChange,
-    closeOnClickOverlay: closeOnClickOverlayProp,
-    closeOnFinish: closeOnFinishProp,
-    popupPlacement: popupPlacementProp,
-    popupRound: popupRoundProp,
-    popupProps: popupPropsOverrides,
-    loadingText: loadingTextProp,
+    poppable,
+    visible: _v,
+    defaultVisible: _dv,
+    onVisibleChange: _ov,
+    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 rT = title ?? locale?.vanCascader?.placeholder ?? tokens.defaults.title;
+  const rP = placeholder ?? locale?.vanCascader?.placeholder ?? tokens.defaults.placeholder;
+  const rAc = activeColor ?? tokens.colors.tabActive;
+  const rSH = showHeader ?? tokens.defaults.showHeader;
+  const rSw = swipeable ?? tokens.defaults.swipeable;
+  const rPop = poppable ?? tokens.defaults.poppable;
+  const rCO = closeOnClickOverlay ?? tokens.defaults.closeOnClickOverlay;
+  const rCF = closeOnFinish ?? tokens.defaults.closeOnFinish;
+  const rPP = popupPlacement ?? tokens.defaults.popupPlacement;
+  const rPR = popupRound ?? tokens.defaults.popupRound;
+  const rLT = 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 [popupVisible, setPopupVisible] = (0, _hooks.useControllableValue)(props, {
+  const curVal = Array.isArray(value) ? value : [];
+  const [pending, setPending] = (0, _react().useState)(curVal);
+  const showCl = closeable ?? tokens.defaults.closeable;
+  const [popVis, setPopVis] = (0, _hooks.useControllableValue)(props, {
     defaultValue: false,
     valuePropName: "visible",
     defaultValuePropName: "defaultVisible",
     trigger: "onVisibleChange"
   });
-  const currentValue = poppable ? panelValue : cascaderValue;
+  const cur = rPop ? pending : curVal;
   const {
     tabs,
     items,
     depth
-  } = (0, _useCascaderExtend.useCascaderExtend)(options, keys, currentValue);
+  } = (0, _useCascaderExtend.useCascaderExtend)(options, keys, cur);
   const {
-    width: windowWidth
+    width: winW
   } = (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 [measW, setMeasW] = (0, _react().useState)(0);
+  const onTabsLayout = (0, _react().useCallback)(e => {
+    const w = e.nativeEvent.layout.width;
+    if (w) setMeasW(prev => prev === w ? prev : w);
   }, []);
-  const confirmedRows = resolveSelectedRows(options, keys, cascaderValue);
-  const [activeTab, setActiveTab] = (0, _react().useState)(0);
+  const curRows = resolveRows(options, keys, curVal);
+  const [actTab, setActTab] = (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]);
+    const len = Array.isArray(cur) ? cur.length : 0;
+    let ti = len;
+    if (ti >= depth) ti = Math.max(depth - 1, 0);
+    setActTab(prev => prev === ti ? prev : ti);
+  }, [cur.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]);
-  const openPopup = (0, _react().useCallback)(() => {
-    if (!poppable || popupVisible) return;
-    setPanelValue(prev => (0, _utils.shallowEqualArray)(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 = 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);
+    if (!rPop || !popVis) setPending(prev => (0, _utils.shallowEqualArray)(prev, curVal) ? prev : curVal);
+  }, [curVal, rPop, popVis]);
+  const openPop = (0, _react().useCallback)(() => {
+    if (!rPop || popVis) return;
+    setPending(prev => (0, _utils.shallowEqualArray)(prev, curVal) ? prev : curVal);
+    setPopVis(true);
+  }, [curVal, rPop, popVis, setPopVis]);
+  const onCloseRef = (0, _react().useRef)(onClose);
+  const onChangeRef = (0, _react().useRef)(onChange);
+  const onFinRef = (0, _react().useRef)(onFinish);
+  const onClickTabRef = (0, _react().useRef)(onClickTab);
+  const onTabChgRef = (0, _react().useRef)(onTabChange);
+  onCloseRef.current = onClose;
+  onChangeRef.current = onChange;
+  onFinRef.current = onFinish;
+  onClickTabRef.current = onClickTab;
+  onTabChgRef.current = onTabChange;
+  const closePop = (0, _react().useCallback)(notify => {
+    if (!rPop || !popVis) return;
+    setPopVis(false);
+    if (notify) onCloseRef.current?.();
+  }, [rPop, popVis, setPopVis]);
+  const togglePop = (0, _react().useCallback)(() => {
+    if (!rPop) return;
+    popVis ? closePop(true) : openPop();
+  }, [closePop, openPop, rPop, popVis]);
+  const isRP = (0, _validate.isFunction)(children);
+  const rp = isRP ? children : null;
+  const onClkTab = (0, _react().useCallback)(e => {
+    const i = (0, _validate.isNumber)(e.index) ? e.index : Number(e.name);
+    if (Number.isNaN(i)) return;
+    const tabName = items[i]?.[keys.textKey];
+    onClickTabRef.current?.(i, (0, _validate.isText)(tabName) ? String(tabName) : rP);
+  }, [items, keys.textKey, rP]);
+  const onTabChg = (0, _react().useCallback)((tv, iEx) => {
+    const i = (0, _validate.isNumber)(iEx) ? iEx : Number(tv);
+    if (Number.isNaN(i)) return;
+    setActTab(i);
+    onTabChgRef.current?.(i);
+  }, []);
+  const onSelect = (0, _react().useCallback)((opt, ti) => {
+    if (opt.disabled) return;
+    const ov = opt[keys.valueKey];
+    if (ov == null) return;
+    const base = (rPop ? pending : curVal).slice(0, ti);
+    const next = [...base, ov];
+    const rows = resolveRows(options, keys, next);
+    const ch = opt[keys.childrenKey] ?? [];
+    const hasCh = Object.prototype.hasOwnProperty.call(opt, keys.childrenKey);
+    const isAsync = hasCh && !ch.length;
+    const atDepth = next.length >= depth;
+    const isLeaf = !ch.length && !isAsync;
+    if (rPop) {
+      setPending(next);
+      onChangeRef.current?.(next, rows);
+    } else setValue(next, rows);
+    if (isLeaf || atDepth) {
+      if (rPop) {
+        setValue(next, rows);
+        if (rCF) closePop(true);
       }
-      onFinish?.(nextValue, rows);
+      onFinRef.current?.(next, 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]);
+  }, [curVal, rCF, closePop, depth, keys, options, pending, rPop, setValue]);
+  const getEmpty = (0, _react().useCallback)(ti => {
+    if (ti <= 0) return rP;
+    const p = items[ti - 1];
+    if (!p) return rP;
+    const hasCh = Object.prototype.hasOwnProperty.call(p, keys.childrenKey);
+    if (!hasCh) return rP;
+    const ch = p[keys.childrenKey] ?? [];
+    return ch.length === 0 && cur.length === ti ? rLT : rP;
+  }, [cur.length, items, keys.childrenKey, rLT, rP]);
   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 = {
+    if (!tabs.length) return /*#__PURE__*/_react().default.createElement(CascaderOptionList, {
+      optionList: [],
+      tabIndex: 0,
+      selectedValue: cur[0],
+      activeColor: rAc,
+      keys: keys,
+      optionRender: optionRender,
+      onSelect: onSelect,
+      tokens: tokens,
+      emptyText: getEmpty(0)
+    });
+    const swEn = !!rSw;
+    const tabsW = measW || winW || undefined;
+    const tbStyle = {
       height: tokens.sizing.headerHeight,
       paddingHorizontal: tokens.spacing.tabNavPaddingHorizontal,
       paddingVertical: tokens.spacing.tabNavPaddingVertical,
@@ -234,149 +232,143 @@ const Cascader = props => {
     };
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: tokens.layout.tabsWrapper,
-      onLayout: handleTabsLayout
+      onLayout: onTabsLayout
     }, /*#__PURE__*/_react().default.createElement(_tabs.default, {
-      style: resolvedTabsWidth ? {
-        width: resolvedTabsWidth
+      style: tabsW ? {
+        width: tabsW
       } : undefined,
-      active: activeTab,
-      onChange: handleTabChange,
-      onClickTab: handleClickTab,
+      active: actTab,
+      onChange: onTabChg,
+      onClickTab: onClkTab,
       align: "center",
-      swipeable: swipeableEnabled,
+      swipeable: swEn,
       swipeThreshold: 0,
       scrollable: true,
       animated: true,
       duration: 300,
-      color: activeColor,
+      color: rAc,
       lineHeight: tokens.sizing.indicatorHeight,
       titleActiveColor: tokens.colors.tabText,
       titleInactiveColor: tokens.colors.tabInactive,
-      tabBarStyle: tabBarStyle,
+      tabBarStyle: tbStyle,
       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, {
+      contentStyle: !swEn ? tokens.layout.tabsContentStatic : undefined
+    }, tabs.map((optList, i) => {
+      const sel = items[i];
+      const lbl = (0, _validate.isText)(sel?.[keys.textKey]) ? String(sel?.[keys.textKey]) : "";
+      const usePh = !lbl;
+      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: usePh ? tokens.colors.tabInactive : tokens.colors.tabText,
+          fontWeight: usePh ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
         }]
-      }, unselected ? placeholder : labelText);
+      }, usePh ? rP : lbl);
       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,
+        optionList: optList,
+        tabIndex: i,
+        selectedValue: cur[i],
+        activeColor: rAc,
         keys: keys,
         optionRender: optionRender,
-        onSelect: handleSelect,
+        onSelect: onSelect,
         tokens: tokens,
-        emptyText: getEmptyText(index)
+        emptyText: getEmpty(i)
       }));
     })));
   };
-  const inlineChildren = !poppable && !isRenderProp ? children : null;
+  const inlineCh = !rPop && !isRP ? 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), rSH ? /*#__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)(rT, [tokens.layout.title, {
+    color: tokens.colors.headerText,
+    fontSize: tokens.typography.titleSize,
+    fontWeight: tokens.typography.titleWeight
+  }]), showCl ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
     hitSlop: 8,
     onPress: () => {
-      if (poppable) {
-        closePopup(true);
-      } else {
-        onClose?.();
-      }
+      rPop ? closePop(true) : 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,
     color: state.pressed ? tokens.colors.closeIconActive : tokens.colors.closeIcon
-  }))) : null) : null, renderTabs(), inlineChildren ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }))) : null) : null, renderTabs(), inlineCh ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.inlineChildren, {
       paddingVertical: tokens.spacing.inlineChildrenPaddingVertical,
       paddingHorizontal: tokens.spacing.headerPaddingHorizontal
     }]
-  }, inlineChildren) : null);
-  if (!poppable) return content;
+  }, inlineCh) : null);
+  if (!rPop) 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 = {
-    open: openPopup,
-    close: () => closePopup(true),
-    toggle: togglePopup
+    closeOnOverlayPress: ovClose,
+    overlay: popOv,
+    onOpen: popOnOpen,
+    onOpened: popOnOpened,
+    onClose: popOnClose,
+    onClosed: popOnClosed,
+    ...popRest
+  } = popupProps ?? {};
+  const popOnCloseRef = (0, _react().useRef)(popOnClose);
+  popOnCloseRef.current = popOnClose;
+  const onPopupClose = (0, _react().useCallback)(() => {
+    popOnCloseRef.current?.();
+    closePop(true);
+  }, [closePop]);
+  const actions = {
+    open: openPop,
+    close: () => closePop(true),
+    toggle: togglePop
   };
-  const enhanceTriggerNode = (0, _react().useCallback)(node => {
+  const enhanceTrigger = (0, _react().useCallback)(node => {
     if (! /*#__PURE__*/_react().default.isValidElement(node)) return node;
-    const props = node.props;
-    const handlePress = () => {
-      props.onPress?.();
-      props.onClick?.();
-      openPopup();
+    const p = node.props;
+    const onP = () => {
+      p.onPress?.();
+      p.onClick?.();
+      openPop();
     };
     return /*#__PURE__*/_react().default.cloneElement(node, {
-      onPress: handlePress,
-      onClick: handlePress
+      onPress: onP,
+      onClick: onP
     });
-  }, [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, {
+  }, [openPop]);
+  const triggerNode = rp ? rp(curVal, curRows, actions) : isRP ? null : children || null;
+  const renderTrigger = enhanceTrigger(triggerNode);
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, renderTrigger, /*#__PURE__*/_react().default.createElement(_popup.default, _extends({
+    visible: popVis,
+    placement: rPP,
+    round: rPR,
+    closeOnOverlayPress: ovClose ?? rCO,
+    overlay: popOv ?? true,
+    safeAreaInsetTop: popRest?.safeAreaInsetTop != null ? popRest.safeAreaInsetTop : rSH && showCl,
+    safeAreaInsetBottom: popRest?.safeAreaInsetBottom != null ? popRest.safeAreaInsetBottom : rPP === 'bottom',
+    onOpen: popOnOpen,
+    onOpened: popOnOpened,
+    onClose: onPopupClose,
+    onClosed: popOnClosed
+  }, popRest, {
     style: {
       paddingLeft: 0,
       paddingRight: 0
@@ -393,42 +385,41 @@ const CascaderOptionItem = /*#__PURE__*/_react().default.memo(({
   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({
+  const ov = option[keys.valueKey];
+  const lbl = option[keys.textKey];
+  const dis = !!option.disabled;
+  const baseCl = option.color ?? tokens.colors.optionText;
+  const txtCl = dis ? tokens.colors.optionDisabled : selected ? option.color ?? activeColor : baseCl;
+  const txtStyle = [tokens.layout.optionText, {
+    color: txtCl,
+    fontSize: tokens.typography.optionTextSize
+  }, selected ? {
+    fontWeight: tokens.typography.optionTextActiveWeight
+  } : null];
+  const cnt = 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)(lbl, txtStyle);
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-    testID: `cascader-option-${tabIndex}-${String(optionValue)}`,
+    testID: `cascader-option-${tabIndex}-${String(ov)}`,
     style: ({
       pressed
     }) => [tokens.layout.option, {
       minHeight: tokens.sizing.optionMinHeight,
       paddingVertical: tokens.spacing.optionPaddingVertical,
       paddingHorizontal: tokens.spacing.optionPaddingHorizontal
-    }, pressed && !disabled && {
+    }, pressed && !dis && {
       backgroundColor: tokens.colors.optionActiveBackground
     }],
     onPress: () => onSelect(option, tabIndex),
-    disabled: disabled
+    disabled: dis
   }, /*#__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, {
+  }, cnt), selected ? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Checked, {
     size: tokens.sizing.selectedIconSize,
     fill: activeColor,
     color: activeColor
@@ -445,19 +436,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, {
@@ -470,7 +448,18 @@ const CascaderOptionList = /*#__PURE__*/_react().default.memo(({
     onSelect: onSelect,
     tokens: tokens
   }), [activeColor, keys, onSelect, optionRender, selectedValue, tabIndex, tokens]);
-  const keyExtractor = (0, _react().useCallback)(item => String(item[keys.valueKey]), [keys.valueKey]);
+  const keyExt = (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, {
@@ -482,10 +471,11 @@ const CascaderOptionList = /*#__PURE__*/_react().default.memo(({
     },
     showsVerticalScrollIndicator: false,
     renderItem: renderItem,
-    keyExtractor: keyExtractor,
+    keyExtractor: keyExt,
     removeClippedSubviews: true,
     initialNumToRender: 20,
     windowSize: 5
   });
 });
+const Cascader = /*#__PURE__*/_react().default.memo(CascaderImpl);
 var _default = exports.default = Cascader;