react-native-system-ui 1.0.0 → 1.0.2

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

@@ -10,23 +10,23 @@ import Tabs from "../tabs";
 import { useLocale } from "../config-provider/useLocale";
 import { useCascaderTokens } from "./tokens";
 import { useCascaderExtend } from "./useCascaderExtend";
-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 resolveRows = (options = [], keys, values) => {
-  const selected = [];
-  let current = options;
-  values.forEach(val => {
-    if (!current || !current.length) return;
-    const matched = current.find(o => o[keys.valueKey] === val);
-    if (matched) {
-      selected.push(matched);
-      current = matched[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 CascaderImpl = props => {
   const {
@@ -50,9 +50,9 @@ const CascaderImpl = props => {
     testID,
     children,
     poppable,
-    visible: _visible,
-    defaultVisible: _defaultVisible,
-    onVisibleChange: _onVisibleChange,
+    visible: _v,
+    defaultVisible: _dv,
+    onVisibleChange: _ov,
     closeOnClickOverlay,
     closeOnFinish,
     popupPlacement,
@@ -63,146 +63,142 @@ const CascaderImpl = props => {
   } = props;
   const locale = useLocale();
   const tokens = useCascaderTokens(tokensOverride);
-  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 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] = useControllableValue(props, {
     defaultValue: [],
     trigger: "onChange"
   });
   const keys = getFieldKeys(fieldNames);
-  const currentValue = Array.isArray(value) ? value : [];
-  const [pendingValue, setPendingValue] = useState(currentValue);
-  const showClose = closeable ?? tokens.defaults.closeable;
-  const [popupVisible, setPopupVisible] = useControllableValue(props, {
+  const curVal = Array.isArray(value) ? value : [];
+  const [pending, setPending] = useState(curVal);
+  const showCl = closeable ?? tokens.defaults.closeable;
+  const [popVis, setPopVis] = useControllableValue(props, {
     defaultValue: false,
     valuePropName: "visible",
     defaultValuePropName: "defaultVisible",
     trigger: "onVisibleChange"
   });
-  const current = resolvedPoppable ? pendingValue : currentValue;
+  const cur = rPop ? pending : curVal;
   const {
     tabs,
     items,
     depth
-  } = useCascaderExtend(options, keys, current);
+  } = useCascaderExtend(options, keys, cur);
   const {
-    width: windowWidth
+    width: winW
   } = useWindowDimensions();
-  const [measuredWidth, setMeasuredWidth] = useState(0);
-  const handleTabsLayout = useCallback(e => {
-    const width = e.nativeEvent.layout.width;
-    if (!width) return;
-    setMeasuredWidth(prev => prev === width ? prev : width);
+  const [measW, setMeasW] = useState(0);
+  const onTabsLayout = useCallback(e => {
+    const w = e.nativeEvent.layout.width;
+    if (w) setMeasW(prev => prev === w ? prev : w);
   }, []);
-  const currentRows = resolveRows(options, keys, currentValue);
-  const [activeTab, setActiveTab] = useState(0);
+  const curRows = resolveRows(options, keys, curVal);
+  const [actTab, setActTab] = useState(0);
   useEffect(() => {
-    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);
-  }, [current.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]);
   useEffect(() => {
-    if (!resolvedPoppable || !popupVisible) setPendingValue(prev => shallowEqualArray(prev, currentValue) ? prev : currentValue);
-  }, [currentValue, resolvedPoppable, popupVisible]);
-  const openPopup = useCallback(() => {
-    if (!resolvedPoppable || popupVisible) return;
-    setPendingValue(prev => shallowEqualArray(prev, currentValue) ? prev : currentValue);
-    setPopupVisible(true);
-  }, [currentValue, resolvedPoppable, popupVisible, setPopupVisible]);
-  const onCloseRef = useRef(onClose),
-    onChangeRef = useRef(onChange),
-    onFinishRef = useRef(onFinish),
-    onClickTabRef = useRef(onClickTab),
-    onTabChangeRef = useRef(onTabChange);
+    if (!rPop || !popVis) setPending(prev => shallowEqualArray(prev, curVal) ? prev : curVal);
+  }, [curVal, rPop, popVis]);
+  const openPop = useCallback(() => {
+    if (!rPop || popVis) return;
+    setPending(prev => shallowEqualArray(prev, curVal) ? prev : curVal);
+    setPopVis(true);
+  }, [curVal, rPop, popVis, setPopVis]);
+  const onCloseRef = useRef(onClose);
+  const onChangeRef = useRef(onChange);
+  const onFinRef = useRef(onFinish);
+  const onClickTabRef = useRef(onClickTab);
+  const onTabChgRef = useRef(onTabChange);
   onCloseRef.current = onClose;
   onChangeRef.current = onChange;
-  onFinishRef.current = onFinish;
+  onFinRef.current = onFinish;
   onClickTabRef.current = onClickTab;
-  onTabChangeRef.current = onTabChange;
-  const closePopup = useCallback(notify => {
-    if (!resolvedPoppable || !popupVisible) return;
-    setPopupVisible(false);
+  onTabChgRef.current = onTabChange;
+  const closePop = useCallback(notify => {
+    if (!rPop || !popVis) return;
+    setPopVis(false);
     if (notify) onCloseRef.current?.();
-  }, [resolvedPoppable, popupVisible, setPopupVisible]);
-  const togglePopup = useCallback(() => {
-    if (!resolvedPoppable) return;
-    popupVisible ? closePopup(true) : openPopup();
-  }, [closePopup, openPopup, resolvedPoppable, popupVisible]);
-  const isRenderProps = isFunction(children);
-  const renderProps = isRenderProps ? children : null;
-  const handleClickTab = useCallback(e => {
-    const index = isNumber(e.index) ? e.index : Number(e.name);
-    if (Number.isNaN(index)) return;
-    const tabName = items[index]?.[keys.textKey];
-    const tabText = isText(tabName) ? String(tabName) : resolvedPlaceholder;
-    onClickTabRef.current?.(index, tabText);
-  }, [items, keys.textKey, resolvedPlaceholder]);
-  const handleTabChange = useCallback((tabValue, indexExplicit) => {
-    const index = isNumber(indexExplicit) ? indexExplicit : Number(tabValue);
-    if (Number.isNaN(index)) return;
-    setActiveTab(index);
-    onTabChangeRef.current?.(index);
+  }, [rPop, popVis, setPopVis]);
+  const togglePop = useCallback(() => {
+    if (!rPop) return;
+    popVis ? closePop(true) : openPop();
+  }, [closePop, openPop, rPop, popVis]);
+  const isRP = isFunction(children);
+  const rp = isRP ? children : null;
+  const onClkTab = useCallback(e => {
+    const i = isNumber(e.index) ? e.index : Number(e.name);
+    if (Number.isNaN(i)) return;
+    const tabName = items[i]?.[keys.textKey];
+    onClickTabRef.current?.(i, isText(tabName) ? String(tabName) : rP);
+  }, [items, keys.textKey, rP]);
+  const onTabChg = useCallback((tv, iEx) => {
+    const i = isNumber(iEx) ? iEx : Number(tv);
+    if (Number.isNaN(i)) return;
+    setActTab(i);
+    onTabChgRef.current?.(i);
   }, []);
-  const handleSelect = useCallback((option, tabIndex) => {
-    if (option.disabled) return;
-    const optionValue = option[keys.valueKey];
-    if (optionValue == null) return;
-    const base = (resolvedPoppable ? pendingValue : currentValue).slice(0, tabIndex);
-    const nextValue = [...base, optionValue];
-    const rows = resolveRows(options, keys, nextValue);
-    const children = option[keys.childrenKey] ?? [];
-    const hasChildrenProp = Object.prototype.hasOwnProperty.call(option, keys.childrenKey);
-    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 (resolvedCloseOnFinish) closePopup(true);
+  const onSelect = 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);
       }
-      onFinishRef.current?.(nextValue, rows);
+      onFinRef.current?.(next, rows);
     }
-  }, [currentValue, resolvedCloseOnFinish, closePopup, depth, keys, options, pendingValue, resolvedPoppable, setValue]);
-  const getEmptyText = useCallback(tabIndex => {
-    if (tabIndex <= 0) return resolvedPlaceholder;
-    const parent = items[tabIndex - 1];
-    if (!parent) return resolvedPlaceholder;
-    const hasChildrenProp = Object.prototype.hasOwnProperty.call(parent, keys.childrenKey);
-    if (!hasChildrenProp) return resolvedPlaceholder;
-    const children = parent[keys.childrenKey] ?? [];
-    const isAsync = children.length === 0 && current.length === tabIndex;
-    return isAsync ? resolvedLoadingText : resolvedPlaceholder;
-  }, [current.length, items, keys.childrenKey, resolvedLoadingText, resolvedPlaceholder]);
+  }, [curVal, rCF, closePop, depth, keys, options, pending, rPop, setValue]);
+  const getEmpty = 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.createElement(CascaderOptionList, {
       optionList: [],
       tabIndex: 0,
-      selectedValue: current[0],
-      activeColor: resolvedActiveColor,
+      selectedValue: cur[0],
+      activeColor: rAc,
       keys: keys,
       optionRender: optionRender,
-      onSelect: handleSelect,
+      onSelect: onSelect,
       tokens: tokens,
-      emptyText: getEmptyText(0)
+      emptyText: getEmpty(0)
     });
-    const swipeEnabled = !!resolvedSwipeable;
-    const renderTabsWidth = measuredWidth || windowWidth || undefined;
-    const tabBarStyle = {
+    const swEn = !!rSw;
+    const tabsW = measW || winW || undefined;
+    const tbStyle = {
       height: tokens.sizing.headerHeight,
       paddingHorizontal: tokens.spacing.tabNavPaddingHorizontal,
       paddingVertical: tokens.spacing.tabNavPaddingVertical,
@@ -210,79 +206,78 @@ const CascaderImpl = props => {
     };
     return /*#__PURE__*/React.createElement(View, {
       style: tokens.layout.tabsWrapper,
-      onLayout: handleTabsLayout
+      onLayout: onTabsLayout
     }, /*#__PURE__*/React.createElement(Tabs, {
-      style: renderTabsWidth ? {
-        width: renderTabsWidth
+      style: tabsW ? {
+        width: tabsW
       } : undefined,
-      active: activeTab,
-      onChange: handleTabChange,
-      onClickTab: handleClickTab,
+      active: actTab,
+      onChange: onTabChg,
+      onClickTab: onClkTab,
       align: "center",
-      swipeable: swipeEnabled,
+      swipeable: swEn,
       swipeThreshold: 0,
       scrollable: true,
       animated: true,
       duration: 300,
-      color: resolvedActiveColor,
+      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: !swipeEnabled ? tokens.layout.tabsContentStatic : undefined
-    }, tabs.map((optionList, i) => {
-      const selectedOption = items[i];
-      const labelValue = selectedOption?.[keys.textKey];
-      const label = isText(labelValue) ? String(labelValue) : "";
-      const usePlaceholder = !label;
+      contentStyle: !swEn ? tokens.layout.tabsContentStatic : undefined
+    }, tabs.map((optList, i) => {
+      const sel = items[i];
+      const lbl = isText(sel?.[keys.textKey]) ? String(sel?.[keys.textKey]) : "";
+      const usePh = !lbl;
       const titleNode = _ => /*#__PURE__*/React.createElement(Text, {
         style: [tokens.layout.tabTitleNode, {
-          color: usePlaceholder ? tokens.colors.tabInactive : tokens.colors.tabText,
-          fontWeight: usePlaceholder ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
+          color: usePh ? tokens.colors.tabInactive : tokens.colors.tabText,
+          fontWeight: usePh ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
         }]
-      }, usePlaceholder ? resolvedPlaceholder : label);
+      }, usePh ? rP : lbl);
       return /*#__PURE__*/React.createElement(Tabs.TabPane, {
         key: i,
         name: i,
         title: titleNode
       }, /*#__PURE__*/React.createElement(CascaderOptionList, {
-        optionList: optionList,
+        optionList: optList,
         tabIndex: i,
-        selectedValue: current[i],
-        activeColor: resolvedActiveColor,
+        selectedValue: cur[i],
+        activeColor: rAc,
         keys: keys,
         optionRender: optionRender,
-        onSelect: handleSelect,
+        onSelect: onSelect,
         tokens: tokens,
-        emptyText: getEmptyText(i)
+        emptyText: getEmpty(i)
       }));
     })));
   };
-  const inlineChildren = !resolvedPoppable && !isRenderProps ? children : null;
+  const inlineCh = !rPop && !isRP ? children : null;
   const content = /*#__PURE__*/React.createElement(View, _extends({
     testID: testID,
     style: [tokens.layout.container, {
       backgroundColor: tokens.colors.background
     }, style]
-  }, rest), resolvedShowHeader ? /*#__PURE__*/React.createElement(View, {
+  }, rest), rSH ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.header, {
       height: tokens.sizing.headerHeight,
       paddingHorizontal: tokens.spacing.headerPaddingHorizontal
     }]
-  }, renderTextOrNode(resolvedTitle, [tokens.layout.title, {
+  }, renderTextOrNode(rT, [tokens.layout.title, {
     color: tokens.colors.headerText,
     fontSize: tokens.typography.titleSize,
     fontWeight: tokens.typography.titleWeight
-  }]), showClose ? /*#__PURE__*/React.createElement(Pressable, {
+  }]), showCl ? /*#__PURE__*/React.createElement(Pressable, {
     hitSlop: 8,
     onPress: () => {
-      if (resolvedPoppable) closePopup(true);else onCloseRef.current?.();
+      rPop ? closePop(true) : onCloseRef.current?.();
     },
     style: [tokens.layout.closeButton, {
       marginLeft: tokens.spacing.closeButtonMarginLeft
@@ -293,63 +288,61 @@ const CascaderImpl = props => {
     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.createElement(View, {
+  }))) : null) : null, renderTabs(), inlineCh ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.inlineChildren, {
       paddingVertical: tokens.spacing.inlineChildrenPaddingVertical,
       paddingHorizontal: tokens.spacing.headerPaddingHorizontal
     }]
-  }, inlineChildren) : null);
-  if (!resolvedPoppable) return content;
+  }, inlineCh) : null);
+  if (!rPop) return content;
   const {
-    closeOnOverlayPress: overlayCloseOnPress,
-    overlay: popupOverlay,
-    onOpen: popupOnOpen,
-    onOpened: popupOnOpened,
-    onClose: popupOnClose,
-    onClosed: popupOnClosed,
-    ...popupRestProps
+    closeOnOverlayPress: ovClose,
+    overlay: popOv,
+    onOpen: popOnOpen,
+    onOpened: popOnOpened,
+    onClose: popOnClose,
+    onClosed: popOnClosed,
+    ...popRest
   } = popupProps ?? {};
-  const renderOverlay = popupOverlay ?? true;
-  const renderCloseOnPress = overlayCloseOnPress ?? resolvedCloseOnClickOverlay;
-  const popupOnCloseRef = useRef(popupOnClose);
-  popupOnCloseRef.current = popupOnClose;
-  const handlePopupClose = useCallback(() => {
-    popupOnCloseRef.current?.();
-    closePopup(true);
-  }, [closePopup]);
-  const controlActions = {
-    open: openPopup,
-    close: () => closePopup(true),
-    toggle: togglePopup
+  const popOnCloseRef = useRef(popOnClose);
+  popOnCloseRef.current = popOnClose;
+  const onPopupClose = useCallback(() => {
+    popOnCloseRef.current?.();
+    closePop(true);
+  }, [closePop]);
+  const actions = {
+    open: openPop,
+    close: () => closePop(true),
+    toggle: togglePop
   };
-  const enhanceTriggerNode = useCallback(node => {
+  const enhanceTrigger = useCallback(node => {
     if (! /*#__PURE__*/React.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.cloneElement(node, {
-      onPress: handlePress,
-      onClick: handlePress
+      onPress: onP,
+      onClick: onP
     });
-  }, [openPopup]);
-  const triggerNode = renderProps ? renderProps(currentValue, currentRows, controlActions) : isRenderProps ? null : children || null;
-  const renderTriggerNode = enhanceTriggerNode(triggerNode);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderTriggerNode, /*#__PURE__*/React.createElement(Popup, _extends({
-    visible: popupVisible,
-    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: handlePopupClose,
-    onClosed: popupOnClosed
-  }, popupRestProps, {
+  }, [openPop]);
+  const triggerNode = rp ? rp(curVal, curRows, actions) : isRP ? null : children || null;
+  const renderTrigger = enhanceTrigger(triggerNode);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderTrigger, /*#__PURE__*/React.createElement(Popup, _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
@@ -366,41 +359,42 @@ const CascaderOptionItem = /*#__PURE__*/React.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 optionTextStyle = [tokens.layout.optionText, {
-    color: textColor,
+  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 content = optionRender ? optionRender({
+  const rawCnt = optionRender ? optionRender({
     option,
     selected
-  }) : renderTextOrNode(label, optionTextStyle);
+  }) : renderTextOrNode(lbl, txtStyle);
+  const cnt = isText(rawCnt) ? renderTextOrNode(rawCnt, txtStyle) : rawCnt;
   return /*#__PURE__*/React.createElement(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.createElement(View, {
     style: tokens.layout.optionContent
   }, /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.optionLabel, {
       marginRight: tokens.spacing.optionLabelMarginRight
     }]
-  }, content), selected ? /*#__PURE__*/React.createElement(Checked, {
+  }, cnt), selected ? /*#__PURE__*/React.createElement(Checked, {
     size: tokens.sizing.selectedIconSize,
     fill: activeColor,
     color: activeColor
@@ -429,7 +423,7 @@ const CascaderOptionList = /*#__PURE__*/React.memo(({
     onSelect: onSelect,
     tokens: tokens
   }), [activeColor, keys, onSelect, optionRender, selectedValue, tabIndex, tokens]);
-  const keyExtractor = useCallback(item => String(item[keys.valueKey]), [keys.valueKey]);
+  const keyExt = useCallback(item => String(item[keys.valueKey]), [keys.valueKey]);
   if (!optionList.length) return /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.optionList, {
       height: tokens.sizing.optionListHeight
@@ -452,7 +446,7 @@ const CascaderOptionList = /*#__PURE__*/React.memo(({
     },
     showsVerticalScrollIndicator: false,
     renderItem: renderItem,
-    keyExtractor: keyExtractor,
+    keyExtractor: keyExt,
     removeClippedSubviews: true,
     initialNumToRender: 20,
     windowSize: 5