react-native-system-ui 1.0.1 → 1.0.3

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

@@ -1,481 +1 @@
-"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 _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 = fn => ({
-  textKey: fn?.text ?? "text",
-  valueKey: fn?.value ?? "value",
-  childrenKey: fn?.children ?? "children"
-});
-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 sel;
-};
-const CascaderImpl = props => {
-  const {
-    tokensOverride,
-    options = [],
-    title,
-    placeholder,
-    activeColor,
-    fieldNames,
-    optionRender,
-    showHeader,
-    closeable,
-    closeIcon,
-    onChange,
-    onClose,
-    onFinish,
-    onClickTab,
-    onTabChange,
-    swipeable,
-    style,
-    testID,
-    children,
-    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 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 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 cur = rPop ? pending : curVal;
-  const {
-    tabs,
-    items,
-    depth
-  } = (0, _useCascaderExtend.useCascaderExtend)(options, keys, cur);
-  const {
-    width: winW
-  } = (0, _reactNative().useWindowDimensions)();
-  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 curRows = resolveRows(options, keys, curVal);
-  const [actTab, setActTab] = (0, _react().useState)(0);
-  (0, _react().useEffect)(() => {
-    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 (!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);
-      }
-      onFinRef.current?.(next, rows);
-    }
-  }, [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: 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,
-      backgroundColor: tokens.colors.background
-    };
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: tokens.layout.tabsWrapper,
-      onLayout: onTabsLayout
-    }, /*#__PURE__*/_react().default.createElement(_tabs.default, {
-      style: tabsW ? {
-        width: tabsW
-      } : undefined,
-      active: actTab,
-      onChange: onTabChg,
-      onClickTab: onClkTab,
-      align: "center",
-      swipeable: swEn,
-      swipeThreshold: 0,
-      scrollable: true,
-      animated: true,
-      duration: 300,
-      color: rAc,
-      lineHeight: tokens.sizing.indicatorHeight,
-      titleActiveColor: tokens.colors.tabText,
-      titleInactiveColor: tokens.colors.tabInactive,
-      tabBarStyle: tbStyle,
-      tabStyle: [tokens.layout.tabsItem, {
-        paddingHorizontal: tokens.spacing.tabPaddingHorizontal
-      }],
-      titleStyle: [tokens.layout.tabsTitle, {
-        fontSize: tokens.typography.tabsTitleSize
-      }],
-      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: usePh ? tokens.colors.tabInactive : tokens.colors.tabText,
-          fontWeight: usePh ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
-        }]
-      }, usePh ? rP : lbl);
-      return /*#__PURE__*/_react().default.createElement(_tabs.default.TabPane, {
-        key: i,
-        name: i,
-        title: titleNode
-      }, /*#__PURE__*/_react().default.createElement(CascaderOptionList, {
-        optionList: optList,
-        tabIndex: i,
-        selectedValue: cur[i],
-        activeColor: rAc,
-        keys: keys,
-        optionRender: optionRender,
-        onSelect: onSelect,
-        tokens: tokens,
-        emptyText: getEmpty(i)
-      }));
-    })));
-  };
-  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), rSH ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.header, {
-      height: tokens.sizing.headerHeight,
-      paddingHorizontal: tokens.spacing.headerPaddingHorizontal
-    }]
-  }, (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: () => {
-      rPop ? closePop(true) : onCloseRef.current?.();
-    },
-    style: [tokens.layout.closeButton, {
-      marginLeft: tokens.spacing.closeButtonMarginLeft
-    }],
-    accessibilityRole: "button",
-    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(), inlineCh ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.inlineChildren, {
-      paddingVertical: tokens.spacing.inlineChildrenPaddingVertical,
-      paddingHorizontal: tokens.spacing.headerPaddingHorizontal
-    }]
-  }, inlineCh) : null);
-  if (!rPop) return content;
-  const {
-    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 enhanceTrigger = (0, _react().useCallback)(node => {
-    if (! /*#__PURE__*/_react().default.isValidElement(node)) return node;
-    const p = node.props;
-    const onP = () => {
-      p.onPress?.();
-      p.onClick?.();
-      openPop();
-    };
-    return /*#__PURE__*/_react().default.cloneElement(node, {
-      onPress: onP,
-      onClick: onP
-    });
-  }, [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
-    }
-  }), content));
-};
-const CascaderOptionItem = /*#__PURE__*/_react().default.memo(({
-  option,
-  tabIndex,
-  selected,
-  activeColor,
-  keys,
-  optionRender,
-  onSelect,
-  tokens
-}) => {
-  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, _utils.renderTextOrNode)(lbl, txtStyle);
-  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-    testID: `cascader-option-${tabIndex}-${String(ov)}`,
-    style: ({
-      pressed
-    }) => [tokens.layout.option, {
-      minHeight: tokens.sizing.optionMinHeight,
-      paddingVertical: tokens.spacing.optionPaddingVertical,
-      paddingHorizontal: tokens.spacing.optionPaddingHorizontal
-    }, pressed && !dis && {
-      backgroundColor: tokens.colors.optionActiveBackground
-    }],
-    onPress: () => onSelect(option, tabIndex),
-    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
-    }]
-  }, cnt), 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
-}) => {
-  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 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, {
-      height: tokens.sizing.optionListHeight
-    }],
-    contentContainerStyle: {
-      paddingTop: tokens.spacing.optionListPaddingTop,
-      paddingBottom: tokens.spacing.optionListPaddingBottom
-    },
-    showsVerticalScrollIndicator: false,
-    renderItem: renderItem,
-    keyExtractor: keyExt,
-    removeClippedSubviews: true,
-    initialNumToRender: 20,
-    windowSize: 5
-  });
-});
-const Cascader = /*#__PURE__*/_react().default.memo(CascaderImpl);
-var _default = exports.default = Cascader;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}function _reactNativeSystemIcon(){const e=require("react-native-system-icon");return _reactNativeSystemIcon=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _hooks=require("../../hooks"),_utils=require("../../utils"),_validate=require("../../utils/validate"),_popup=_interopRequireDefault(require("../popup")),_tabs=_interopRequireDefault(require("../tabs")),_useLocale=require("../config-provider/useLocale"),_tokens=require("./tokens"),_useCascaderExtend=require("./useCascaderExtend");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,n,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(o=t?r:a){if(o.has(e))return o.get(e);o.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?o(l,t,n):l[t]=e[t]);return l})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}const getFieldKeys=e=>({textKey:e?.text??"text",valueKey:e?.value??"value",childrenKey:e?.children??"children"}),resolveRows=(e=[],t,a)=>{const r=[];let o=e;return a.forEach(e=>{if(!o?.length)return;const a=o.find(a=>a[t.valueKey]===e);a&&(r.push(a),o=a[t.childrenKey]??[])}),r},CascaderImpl=e=>{const{tokensOverride:t,options:a=[],title:r,placeholder:o,activeColor:n,fieldNames:l,optionRender:i,showHeader:c,closeable:s,closeIcon:u,onChange:d,onClose:p,onFinish:g,onClickTab:f,onTabChange:y,swipeable:_,style:h,testID:b,children:v,poppable:m,visible:C,defaultVisible:x,onVisibleChange:k,closeOnClickOverlay:N,closeOnFinish:T,popupPlacement:S,popupRound:I,popupProps:O,loadingText:E,...w}=e,P=(0,_useLocale.useLocale)(),z=(0,_tokens.useCascaderTokens)(t),V=r??P?.vanCascader?.placeholder??z.defaults.title,R=o??P?.vanCascader?.placeholder??z.defaults.placeholder,L=n??z.colors.tabActive,K=c??z.defaults.showHeader,H=_??z.defaults.swipeable,q=m??z.defaults.poppable,A=N??z.defaults.closeOnClickOverlay,W=T??z.defaults.closeOnFinish,M=S??z.defaults.popupPlacement,B=I??z.defaults.popupRound,D=E??z.defaults.loadingText,[j,F]=(0,_hooks.useControllableValue)(e,{defaultValue:[],trigger:"onChange"}),$=getFieldKeys(l),G=Array.isArray(j)?j:[],[J,Q]=(0,_react().useState)(G),U=s??z.defaults.closeable,[X,Y]=(0,_hooks.useControllableValue)(e,{defaultValue:!1,valuePropName:"visible",defaultValuePropName:"defaultVisible",trigger:"onVisibleChange"}),Z=q?J:G,{tabs:ee,items:te,depth:ae}=(0,_useCascaderExtend.useCascaderExtend)(a,$,Z),{width:re}=(0,_reactNative().useWindowDimensions)(),[oe,ne]=(0,_react().useState)(0),le=(0,_react().useCallback)(e=>{const t=e.nativeEvent.layout.width;t&&ne(e=>e===t?e:t)},[]),ie=resolveRows(a,$,G),[ce,se]=(0,_react().useState)(0);(0,_react().useEffect)(()=>{let e=Array.isArray(Z)?Z.length:0;e>=ae&&(e=Math.max(ae-1,0)),se(t=>t===e?t:e)},[Z.length,ae]),(0,_react().useEffect)(()=>{q&&X||Q(e=>(0,_utils.shallowEqualArray)(e,G)?e:G)},[G,q,X]);const ue=(0,_react().useCallback)(()=>{q&&!X&&(Q(e=>(0,_utils.shallowEqualArray)(e,G)?e:G),Y(!0))},[G,q,X,Y]),de=(0,_react().useRef)(p),pe=(0,_react().useRef)(d),ge=(0,_react().useRef)(g),fe=(0,_react().useRef)(f),ye=(0,_react().useRef)(y);de.current=p,pe.current=d,ge.current=g,fe.current=f,ye.current=y;const _e=(0,_react().useCallback)(e=>{q&&X&&(Y(!1),e&&de.current?.())},[q,X,Y]),he=(0,_react().useCallback)(()=>{q&&(X?_e(!0):ue())},[_e,ue,q,X]),be=(0,_validate.isFunction)(v),ve=be?v:null,me=(0,_react().useCallback)(e=>{const t=(0,_validate.isNumber)(e.index)?e.index:Number(e.name);if(Number.isNaN(t))return;const a=te[t]?.[$.textKey];fe.current?.(t,(0,_validate.isText)(a)?String(a):R)},[te,$.textKey,R]),Ce=(0,_react().useCallback)((e,t)=>{const a=(0,_validate.isNumber)(t)?t:Number(e);Number.isNaN(a)||(se(a),ye.current?.(a))},[]),xe=(0,_react().useCallback)((e,t)=>{if(e.disabled)return;const r=e[$.valueKey];if(null==r)return;const o=[...(q?J:G).slice(0,t),r],n=resolveRows(a,$,o),l=e[$.childrenKey]??[],i=Object.prototype.hasOwnProperty.call(e,$.childrenKey)&&!l.length,c=o.length>=ae,s=!l.length&&!i;q?(Q(o),pe.current?.(o,n)):F(o,n),(s||c)&&(q&&(F(o,n),W&&_e(!0)),ge.current?.(o,n))},[G,W,_e,ae,$,a,J,q,F]),ke=(0,_react().useCallback)(e=>{if(e<=0)return R;const t=te[e-1];if(!t)return R;if(!Object.prototype.hasOwnProperty.call(t,$.childrenKey))return R;return 0===(t[$.childrenKey]??[]).length&&Z.length===e?D:R},[Z.length,te,$.childrenKey,D,R]),Ne=q||be?null:v,Te=_react().default.createElement(_reactNative().View,_extends({testID:b,style:[z.layout.container,{backgroundColor:z.colors.background},h]},w),K?_react().default.createElement(_reactNative().View,{style:[z.layout.header,{height:z.sizing.headerHeight,paddingHorizontal:z.spacing.headerPaddingHorizontal}]},(0,_utils.renderTextOrNode)(V,[z.layout.title,{color:z.colors.headerText,fontSize:z.typography.titleSize,fontWeight:z.typography.titleWeight}]),U?_react().default.createElement(_reactNative().Pressable,{hitSlop:8,onPress:()=>{q?_e(!0):de.current?.()},style:[z.layout.closeButton,{marginLeft:z.spacing.closeButtonMarginLeft}],accessibilityRole:"button",accessibilityLabel:P?.vanCascader?.close??"Close"},u??(e=>_react().default.createElement(_reactNativeSystemIcon().Cross,{size:z.sizing.closeIconSize,fill:e.pressed?z.colors.closeIconActive:z.colors.closeIcon,color:e.pressed?z.colors.closeIconActive:z.colors.closeIcon}))):null):null,(()=>{if(!ee.length)return _react().default.createElement(CascaderOptionList,{optionList:[],tabIndex:0,selectedValue:Z[0],activeColor:L,keys:$,optionRender:i,onSelect:xe,tokens:z,emptyText:ke(0)});const e=!!H,t=oe||re||void 0,a={height:z.sizing.headerHeight,paddingHorizontal:z.spacing.tabNavPaddingHorizontal,paddingVertical:z.spacing.tabNavPaddingVertical,backgroundColor:z.colors.background};return _react().default.createElement(_reactNative().View,{style:z.layout.tabsWrapper,onLayout:le},_react().default.createElement(_tabs.default,{style:t?{width:t}:void 0,active:ce,onChange:Ce,onClickTab:me,align:"center",swipeable:e,swipeThreshold:0,scrollable:!0,animated:!0,duration:300,color:L,lineHeight:z.sizing.indicatorHeight,titleActiveColor:z.colors.tabText,titleInactiveColor:z.colors.tabInactive,tabBarStyle:a,tabStyle:[z.layout.tabsItem,{paddingHorizontal:z.spacing.tabPaddingHorizontal}],titleStyle:[z.layout.tabsTitle,{fontSize:z.typography.tabsTitleSize}],contentStyle:e?void 0:z.layout.tabsContentStatic},ee.map((e,t)=>{const a=te[t],r=(0,_validate.isText)(a?.[$.textKey])?String(a?.[$.textKey]):"",o=!r;return _react().default.createElement(_tabs.default.TabPane,{key:t,name:t,title:e=>_react().default.createElement(_reactNative().Text,{style:[z.layout.tabTitleNode,{color:o?z.colors.tabInactive:z.colors.tabText,fontWeight:o?z.typography.tabTitlePlaceholderWeight:z.typography.tabTitleWeight}]},o?R:r)},_react().default.createElement(CascaderOptionList,{optionList:e,tabIndex:t,selectedValue:Z[t],activeColor:L,keys:$,optionRender:i,onSelect:xe,tokens:z,emptyText:ke(t)}))})))})(),Ne?_react().default.createElement(_reactNative().View,{style:[z.layout.inlineChildren,{paddingVertical:z.spacing.inlineChildrenPaddingVertical,paddingHorizontal:z.spacing.headerPaddingHorizontal}]},Ne):null);if(!q)return Te;const{closeOnOverlayPress:Se,overlay:Ie,onOpen:Oe,onOpened:Ee,onClose:we,onClosed:Pe,...ze}=O??{},Ve=(0,_react().useRef)(we);Ve.current=we;const Re=(0,_react().useCallback)(()=>{Ve.current?.(),_e(!0)},[_e]),Le={open:ue,close:()=>_e(!0),toggle:he},Ke=(0,_react().useCallback)(e=>{if(!_react().default.isValidElement(e))return e;const t=e.props,a=()=>{t.onPress?.(),t.onClick?.(),ue()};return _react().default.cloneElement(e,{onPress:a,onClick:a})},[ue])(ve?ve(G,ie,Le):be?null:v||null);return _react().default.createElement(_react().default.Fragment,null,Ke,_react().default.createElement(_popup.default,_extends({visible:X,placement:M,round:B,closeOnOverlayPress:Se??A,overlay:Ie??!0,safeAreaInsetTop:null!=ze?.safeAreaInsetTop?ze.safeAreaInsetTop:K&&U,safeAreaInsetBottom:null!=ze?.safeAreaInsetBottom?ze.safeAreaInsetBottom:"bottom"===M,onOpen:Oe,onOpened:Ee,onClose:Re,onClosed:Pe},ze,{style:{paddingLeft:0,paddingRight:0}}),Te))},CascaderOptionItem=_react().default.memo(({option:e,tabIndex:t,selected:a,activeColor:r,keys:o,optionRender:n,onSelect:l,tokens:i})=>{const c=e[o.valueKey],s=e[o.textKey],u=!!e.disabled,d=e.color??i.colors.optionText,p=u?i.colors.optionDisabled:a?e.color??r:d,g=[i.layout.optionText,{color:p,fontSize:i.typography.optionTextSize},a?{fontWeight:i.typography.optionTextActiveWeight}:null],f=n?n({option:e,selected:a}):(0,_utils.renderTextOrNode)(s,g),y=(0,_validate.isText)(f)?(0,_utils.renderTextOrNode)(f,g):f;return _react().default.createElement(_reactNative().Pressable,{testID:`cascader-option-${t}-${String(c)}`,style:({pressed:e})=>[i.layout.option,{minHeight:i.sizing.optionMinHeight,paddingVertical:i.spacing.optionPaddingVertical,paddingHorizontal:i.spacing.optionPaddingHorizontal},e&&!u&&{backgroundColor:i.colors.optionActiveBackground}],onPress:()=>l(e,t),disabled:u},_react().default.createElement(_reactNative().View,{style:i.layout.optionContent},_react().default.createElement(_reactNative().View,{style:[i.layout.optionLabel,{marginRight:i.spacing.optionLabelMarginRight}]},y),a?_react().default.createElement(_reactNativeSystemIcon().Checked,{size:i.sizing.selectedIconSize,fill:r,color:r}):null))}),CascaderOptionList=_react().default.memo(({optionList:e,tabIndex:t,selectedValue:a,activeColor:r,keys:o,optionRender:n,onSelect:l,tokens:i,emptyText:c})=>{const s=(0,_react().useCallback)(({item:e})=>_react().default.createElement(CascaderOptionItem,{option:e,tabIndex:t,selected:a===e[o.valueKey],activeColor:r,keys:o,optionRender:n,onSelect:l,tokens:i}),[r,o,l,n,a,t,i]),u=(0,_react().useCallback)(e=>String(e[o.valueKey]),[o.valueKey]);return e.length?_react().default.createElement(_reactNative().FlatList,{data:e,style:[i.layout.optionList,{height:i.sizing.optionListHeight}],contentContainerStyle:{paddingTop:i.spacing.optionListPaddingTop,paddingBottom:i.spacing.optionListPaddingBottom},showsVerticalScrollIndicator:!1,renderItem:s,keyExtractor:u,removeClippedSubviews:!0,initialNumToRender:20,windowSize:5}):_react().default.createElement(_reactNative().View,{style:[i.layout.optionList,{height:i.sizing.optionListHeight}]},_react().default.createElement(_reactNative().Text,{style:[i.layout.empty,{color:i.colors.placeholder,paddingVertical:i.spacing.emptyPaddingVertical,fontSize:i.typography.emptyTextSize}]},c))}),Cascader=_react().default.memo(CascaderImpl);var _default=exports.default=Cascader;

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

@@ -1,15 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Cascader",{enumerable:!0,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/components/cascader/tokens.js

@@ -1,138 +1 @@
-"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 = "Select";
-  return {
-    defaults: {
-      placeholder: placeholderText,
-      title: placeholderText,
-      showHeader: true,
-      closeable: true,
-      swipeable: true,
-      poppable: false,
-      closeOnClickOverlay: true,
-      closeOnFinish: true,
-      popupPlacement: "bottom",
-      popupRound: true,
-      loadingText: "Loading..."
-    },
-    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);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useCascaderTokens=exports.createCascaderTokens=void 0;var _designSystem=require("../../design-system");const createCascaderTokens=e=>{const{palette:t,spacing:i,radii:o}=e,n=t.default[100],a="Select";return{defaults:{placeholder:a,title:a,showHeader:!0,closeable:!0,swipeable:!0,poppable:!1,closeOnClickOverlay:!0,closeOnFinish:!0,popupPlacement:"bottom",popupRound:!0,loadingText:"Loading..."},layout:{container:{borderRadius:0,width:"100%"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:0},title:{lineHeight:20,includeFontPadding:!1},closeButton:{},tabsWrapper:{width:"100%"},tabsContentStatic:{width:"100%"},tabsItem:{alignItems:"center"},tabsTitle:{includeFontPadding:!1},tabTitleNode:{includeFontPadding:!1},optionList:{flexGrow:0},option:{justifyContent:"center"},optionContent:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},optionText:{lineHeight:20,includeFontPadding:!1},optionTextActive:{},optionLabel:{flex:1},empty:{textAlign:"center"},inlineChildren:{}},colors:{background:"#ffffff",headerText:t.default[900],placeholder:t.default[500],closeIcon:t.default[300],closeIconActive:t.default[500],tabText:t.default[900],tabActive:t.primary[500],tabInactive:t.default[500],optionText:t.default[900],optionDisabled:t.default[300],optionActiveBackground:n,optionActiveText:t.primary[500],divider:t.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:o.sm},spacing:{headerPaddingHorizontal:i.lg,tabNavPaddingHorizontal:6,tabNavPaddingVertical:2,tabPaddingHorizontal:10,optionPaddingVertical:10,optionPaddingHorizontal:i.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);