@hanwenbo/x-taro-ui 0.0.1

package/es/components/cascaderView/cascaderView.js

@@ -0,0 +1,626 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { View, Text, ScrollView } from '@tarojs/components';
+import { useTokens } from "../../theme";
+import { classNames } from "../../utils";
+import { iconSlot } from "../../utils/iconSlot";
+import { resolveLocaleText } from "../../utils/locale";
+import { useConfigProvider } from "../configProvider";
+import { Icon } from "../icon";
+import { getCascadeColumns, getCascadeDisplayLabel, getCascadeSelectedOptions, getCascadeTabColumns, getCascadeValueExtend, getNodeText, sanitizeCascadeValue } from "../cascadePicker/shared";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var sizeTokens = {
+  mini: {
+    height: 320,
+    tabPadding: '4px 8px',
+    tabFontSize: 12,
+    tabLineHeight: 16,
+    labelFontSize: 11,
+    labelLineHeight: 16,
+    optionPadding: '8px 12px',
+    optionFontSize: 14,
+    optionLineHeight: 20,
+    optionMinHeight: 36,
+    iconSize: 14,
+    shellPadding: 12,
+    columnGap: 8
+  },
+  small: {
+    height: 320,
+    tabPadding: '6px 10px',
+    tabFontSize: 14,
+    tabLineHeight: 20,
+    labelFontSize: 12,
+    labelLineHeight: 16,
+    optionPadding: '10px 14px',
+    optionFontSize: 14,
+    optionLineHeight: 20,
+    optionMinHeight: 40,
+    iconSize: 16,
+    shellPadding: 16,
+    columnGap: 8
+  },
+  middle: {
+    height: 320,
+    tabPadding: '8px 12px',
+    tabFontSize: 14,
+    tabLineHeight: 20,
+    labelFontSize: 12,
+    labelLineHeight: 16,
+    optionPadding: '12px 16px',
+    optionFontSize: 16,
+    optionLineHeight: 24,
+    optionMinHeight: 44,
+    iconSize: 16,
+    shellPadding: 20,
+    columnGap: 12
+  },
+  large: {
+    height: 320,
+    tabPadding: '10px 16px',
+    tabFontSize: 16,
+    tabLineHeight: 24,
+    labelFontSize: 14,
+    labelLineHeight: 20,
+    optionPadding: '14px 18px',
+    optionFontSize: 16,
+    optionLineHeight: 24,
+    optionMinHeight: 48,
+    iconSize: 20,
+    shellPadding: 20,
+    columnGap: 12
+  }
+};
+var renderNode = function renderNode(content, textStyle) {
+  if (typeof content === 'string' || typeof content === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: textStyle,
+      children: content
+    });
+  }
+  return content;
+};
+var pressableRowStyle = {
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  cursor: 'pointer'
+};
+var buildCascadeSelection = function buildCascadeSelection(currentValue, depth, nextValue) {
+  var nextSelection = currentValue.slice(0, depth);
+  nextSelection[depth] = nextValue;
+  return nextSelection;
+};
+var CascaderView = function CascaderView(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    value = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? [] : _ref$defaultValue,
+    columnCount = _ref.columnCount,
+    _ref$columnTitles = _ref.columnTitles,
+    columnTitles = _ref$columnTitles === void 0 ? [] : _ref$columnTitles,
+    placeholderProp = _ref.placeholder,
+    _ref$emptyText = _ref.emptyText,
+    emptyText = _ref$emptyText === void 0 ? '暂无选项' : _ref$emptyText,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'tabs' : _ref$layout,
+    showBreadcrumb = _ref.showBreadcrumb,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange,
+    onTabsChange = _ref.onTabsChange,
+    activeIcon = _ref.activeIcon,
+    heightProp = _ref.height,
+    sizeProp = _ref.size,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style;
+  var config = useConfigProvider();
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    radius = _useTokens.radius;
+  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : config.size;
+  var tokens = sizeTokens[size];
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : tokens.height;
+  var placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : resolveLocaleText(config.locale, 'picker.placeholder', '请选择');
+  var isDisabled = Boolean(disabled || config.disabled);
+  var visualTokens = {
+    panelSurface: "var(--x-cascader-panel-surface, ".concat(colors.popover, ")"),
+    panelRadius: "var(--x-cascader-panel-radius, ".concat(radius.xl, "px)"),
+    title: "var(--x-cascader-title, ".concat(colors.foreground, ")"),
+    actionRadius: "var(--x-cascader-action-radius, ".concat(radius.md, "px)"),
+    actionPrimary: "var(--x-cascader-action-primary, ".concat(colors.primary, ")"),
+    columnDivider: "var(--x-cascader-column-divider, ".concat(colors.border, ")"),
+    columnSurface: "var(--x-cascader-column-surface, ".concat(colors.popover, ")"),
+    columnLabel: "var(--x-cascader-column-label, ".concat(colors['muted-foreground'], ")"),
+    optionRadius: "var(--x-cascader-option-radius, ".concat(radius.md, "px)"),
+    optionForeground: "var(--x-cascader-option-foreground, ".concat(colors['popover-foreground'], ")"),
+    optionSelectedSurface: "var(--x-cascader-option-selected-surface, ".concat(colors.accent, ")"),
+    optionSelectedForeground: "var(--x-cascader-option-selected-foreground, ".concat(colors['accent-foreground'], ")"),
+    // Mini-program SVG data URIs cannot resolve CSS variables, so icons need concrete colors.
+    selectedIcon: colors['accent-foreground'],
+    chevronIcon: colors['muted-foreground']
+  };
+  var resolvedShowBreadcrumb = showBreadcrumb !== null && showBreadcrumb !== void 0 ? showBreadcrumb : layout === 'columns';
+  var _useState = useState(function () {
+      return sanitizeCascadeValue(options, defaultValue);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var selectedValue = useMemo(function () {
+    return sanitizeCascadeValue(options, value !== undefined ? value : internalValue);
+  }, [internalValue, options, value]);
+  var selectedOptions = useMemo(function () {
+    return getCascadeSelectedOptions(options, selectedValue);
+  }, [options, selectedValue]);
+  var listColumns = useMemo(function () {
+    var nextColumns = getCascadeColumns(options, selectedValue);
+    return columnCount ? nextColumns.slice(0, columnCount) : nextColumns;
+  }, [columnCount, options, selectedValue]);
+  var handleValueChange = function handleValueChange(nextValue) {
+    var sanitizedValue = sanitizeCascadeValue(options, nextValue);
+    if (value === undefined) {
+      setInternalValue(sanitizedValue);
+    }
+    onChange === null || onChange === void 0 || onChange(sanitizedValue, getCascadeValueExtend(options, sanitizedValue));
+  };
+  if (options.length === 0) {
+    return /*#__PURE__*/_jsx(View, {
+      className: classNames("".concat(config.prefixCls, "-cascader-view"), "".concat(config.prefixCls, "-cascader-view--").concat(layout), className),
+      style: _objectSpread({
+        height: height,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: visualTokens.columnSurface
+      }, style),
+      "data-slot": "cascader-view",
+      children: children !== null && children !== void 0 ? children : /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: visualTokens.columnLabel,
+          fontSize: tokens.optionFontSize,
+          lineHeight: "".concat(tokens.optionLineHeight, "px")
+        },
+        children: emptyText
+      })
+    });
+  }
+  if (layout === 'columns') {
+    return /*#__PURE__*/_jsxs(View, {
+      className: classNames("".concat(config.prefixCls, "-cascader-view"), "".concat(config.prefixCls, "-cascader-view--columns"), className),
+      style: _objectSpread({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        padding: tokens.shellPadding,
+        borderRadius: visualTokens.panelRadius,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: visualTokens.columnDivider,
+        backgroundColor: visualTokens.columnSurface,
+        opacity: isDisabled ? 0.6 : 1
+      }, style),
+      "data-slot": "cascader-view",
+      children: [resolvedShowBreadcrumb ? /*#__PURE__*/_jsxs(View, {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 6
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: {
+            fontSize: tokens.labelFontSize,
+            lineHeight: "".concat(tokens.labelLineHeight, "px"),
+            color: visualTokens.columnLabel
+          },
+          children: "\u5DF2\u9009\u8DEF\u5F84"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: {
+            fontSize: tokens.optionFontSize,
+            lineHeight: "".concat(tokens.optionLineHeight, "px"),
+            fontWeight: '600',
+            color: visualTokens.title
+          },
+          children: getCascadeDisplayLabel(selectedOptions) || '未选择'
+        })]
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          gap: tokens.columnGap
+        },
+        children: listColumns.map(function (column, level) {
+          var _columnTitles$level;
+          return /*#__PURE__*/_jsxs(View, {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              borderRadius: visualTokens.actionRadius,
+              borderWidth: 1,
+              borderStyle: 'solid',
+              borderColor: visualTokens.columnDivider,
+              backgroundColor: visualTokens.panelSurface,
+              overflow: 'hidden'
+            },
+            children: [/*#__PURE__*/_jsx(View, {
+              style: {
+                padding: '12px 14px',
+                borderBottomWidth: 1,
+                borderBottomStyle: 'solid',
+                borderBottomColor: visualTokens.columnDivider
+              },
+              children: /*#__PURE__*/_jsx(Text, {
+                style: {
+                  fontSize: tokens.labelFontSize,
+                  lineHeight: "".concat(tokens.labelLineHeight, "px"),
+                  fontWeight: '600',
+                  color: visualTokens.columnLabel
+                },
+                children: (_columnTitles$level = columnTitles[level]) !== null && _columnTitles$level !== void 0 ? _columnTitles$level : "\u5C42\u7EA7 ".concat(level + 1)
+              })
+            }), /*#__PURE__*/_jsx(ScrollView, {
+              scrollY: true,
+              style: {
+                maxHeight: typeof height === 'number' ? height - 120 : 260
+              },
+              children: /*#__PURE__*/_jsx(View, {
+                style: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  padding: 8,
+                  gap: 6
+                },
+                children: column.map(function (option) {
+                  var isSelected = selectedValue[level] === option.value;
+                  return /*#__PURE__*/_jsxs(View, {
+                    className: classNames("".concat(config.prefixCls, "-cascader-view__option"), isSelected && "".concat(config.prefixCls, "-cascader-view__option--selected"), option.disabled && "".concat(config.prefixCls, "-cascader-view__option--disabled")),
+                    "data-slot": "cascader-option",
+                    "data-selected": isSelected ? 'true' : 'false',
+                    "data-disabled": option.disabled ? 'true' : 'false',
+                    onClick: function onClick() {
+                      if (!isDisabled && !option.disabled) {
+                        handleValueChange(buildCascadeSelection(selectedValue, level, option.value));
+                      }
+                    },
+                    style: _objectSpread(_objectSpread({}, pressableRowStyle), {}, {
+                      minHeight: tokens.optionMinHeight,
+                      boxSizing: 'border-box',
+                      padding: tokens.optionPadding,
+                      borderRadius: visualTokens.optionRadius,
+                      backgroundColor: isSelected ? visualTokens.optionSelectedSurface : 'transparent',
+                      opacity: option.disabled ? 0.45 : 1
+                    }),
+                    role: "option",
+                    ariaRole: "option",
+                    ariaLabel: "".concat(getNodeText(option.label)).concat(isSelected ? '，已选择' : '').concat(option.disabled ? '，已禁用' : ''),
+                    children: [renderNode(option.label, {
+                      display: 'block',
+                      fontSize: tokens.optionFontSize,
+                      lineHeight: "".concat(tokens.optionLineHeight, "px"),
+                      fontWeight: isSelected ? '600' : '500',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      color: isSelected ? visualTokens.optionSelectedForeground : visualTokens.optionForeground
+                    }), option.description ? renderNode(option.description, {
+                      display: 'block',
+                      marginTop: 4,
+                      fontSize: tokens.labelFontSize,
+                      lineHeight: "".concat(tokens.labelLineHeight, "px"),
+                      color: visualTokens.columnLabel
+                    }) : null]
+                  }, String(option.value));
+                })
+              })
+            })]
+          }, level);
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(TabsCascaderView, {
+    options: options,
+    selectedValue: selectedValue,
+    columnCount: columnCount,
+    columnTitles: columnTitles,
+    placeholder: placeholder,
+    emptyText: emptyText,
+    showBreadcrumb: resolvedShowBreadcrumb,
+    disabled: isDisabled,
+    onTabsChange: onTabsChange,
+    activeIcon: activeIcon,
+    height: height,
+    tokens: tokens,
+    visualTokens: visualTokens,
+    prefixCls: config.prefixCls,
+    className: className,
+    style: style,
+    onSelect: handleValueChange
+  });
+};
+var TabsCascaderView = function TabsCascaderView(_ref2) {
+  var _columns$Math$min;
+  var options = _ref2.options,
+    selectedValue = _ref2.selectedValue,
+    columnCount = _ref2.columnCount,
+    _ref2$columnTitles = _ref2.columnTitles,
+    columnTitles = _ref2$columnTitles === void 0 ? [] : _ref2$columnTitles,
+    _ref2$placeholder = _ref2.placeholder,
+    placeholder = _ref2$placeholder === void 0 ? '请选择' : _ref2$placeholder,
+    _ref2$emptyText = _ref2.emptyText,
+    emptyText = _ref2$emptyText === void 0 ? '暂无选项' : _ref2$emptyText,
+    showBreadcrumb = _ref2.showBreadcrumb,
+    disabled = _ref2.disabled,
+    onTabsChange = _ref2.onTabsChange,
+    activeIcon = _ref2.activeIcon,
+    height = _ref2.height,
+    tokens = _ref2.tokens,
+    visualTokens = _ref2.visualTokens,
+    prefixCls = _ref2.prefixCls,
+    className = _ref2.className,
+    style = _ref2.style,
+    onSelect = _ref2.onSelect;
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tabActiveIndex = _useState4[0],
+    setTabActiveIndex = _useState4[1];
+  var columns = useMemo(function () {
+    var nextColumns = getCascadeTabColumns(options, selectedValue);
+    return columnCount ? nextColumns.slice(0, columnCount) : nextColumns;
+  }, [columnCount, options, selectedValue]);
+  useEffect(function () {
+    setTabActiveIndex(Math.max(columns.length - 1, 0));
+  }, [columns.length]);
+  useEffect(function () {
+    onTabsChange === null || onTabsChange === void 0 || onTabsChange(tabActiveIndex);
+  }, [onTabsChange, tabActiveIndex]);
+  var resolvePlaceholder = useCallback(function (index) {
+    if (typeof placeholder === 'function') {
+      return placeholder(index);
+    }
+    var columnTitle = columnTitles === null || columnTitles === void 0 ? void 0 : columnTitles[index];
+    if (columnTitle !== undefined) {
+      return getNodeText(columnTitle);
+    }
+    return getNodeText(placeholder);
+  }, [columnTitles, placeholder]);
+  var activeColumn = (_columns$Math$min = columns[Math.min(tabActiveIndex, columns.length - 1)]) !== null && _columns$Math$min !== void 0 ? _columns$Math$min : {
+    options: [],
+    selected: null
+  };
+  var autoHeight = height === 'auto';
+  var handleSelect = function handleSelect(option, depth) {
+    var _option$children;
+    if (disabled || option.disabled) {
+      return;
+    }
+    var nextValue = buildCascadeSelection(selectedValue, depth, option.value);
+    onSelect(nextValue);
+    setTabActiveIndex((_option$children = option.children) !== null && _option$children !== void 0 && _option$children.length ? depth + 1 : depth);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    className: classNames("".concat(prefixCls, "-cascader-view"), "".concat(prefixCls, "-cascader-view--tabs"), className),
+    style: _objectSpread(_objectSpread({
+      display: 'flex',
+      flexDirection: 'column'
+    }, autoHeight ? {
+      maxHeight: tokens.height
+    } : {
+      height: height
+    }), {}, {
+      backgroundColor: visualTokens.columnSurface,
+      opacity: disabled ? 0.6 : 1
+    }, style),
+    "data-slot": "cascader-view",
+    children: [showBreadcrumb ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        padding: '12px 16px 0',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: {
+          fontSize: tokens.labelFontSize,
+          lineHeight: "".concat(tokens.labelLineHeight, "px"),
+          color: visualTokens.columnLabel
+        },
+        children: "\u5DF2\u9009\u8DEF\u5F84"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontSize: tokens.optionFontSize,
+          lineHeight: "".concat(tokens.optionLineHeight, "px"),
+          fontWeight: '600',
+          color: visualTokens.title
+        },
+        children: columns.map(function (column) {
+          return column.selected ? getNodeText(column.selected.label) : '';
+        }).filter(Boolean).join(' / ') || '未选择'
+      })]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: {
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: visualTokens.columnDivider,
+        paddingLeft: 12,
+        paddingRight: 12,
+        paddingTop: 8
+      },
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        scrollX: true,
+        style: {
+          whiteSpace: 'nowrap'
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          role: "tablist",
+          ariaRole: "tablist",
+          className: "".concat(prefixCls, "-cascader-view__tabs"),
+          "data-slot": "cascader-tabs",
+          style: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 4,
+            paddingBottom: 8
+          },
+          children: columns.map(function (column, index) {
+            var _column$selected$labe, _column$selected, _column$selected$labe2, _column$selected2;
+            var active = index === tabActiveIndex;
+            return /*#__PURE__*/_jsx(View, {
+              className: classNames("".concat(prefixCls, "-cascader-view__tab"), active && "".concat(prefixCls, "-cascader-view__tab--active")),
+              "data-slot": "cascader-tab",
+              "data-active": active ? 'true' : 'false',
+              onClick: function onClick() {
+                return setTabActiveIndex(index);
+              },
+              style: _objectSpread(_objectSpread({}, pressableRowStyle), {}, {
+                flexShrink: 0,
+                padding: tokens.tabPadding,
+                borderRadius: visualTokens.optionRadius,
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: active ? visualTokens.actionPrimary : 'transparent',
+                backgroundColor: active ? visualTokens.optionSelectedSurface : 'transparent'
+              }),
+              role: "tab",
+              ariaRole: "tab",
+              ariaLabel: getNodeText((_column$selected$labe = (_column$selected = column.selected) === null || _column$selected === void 0 ? void 0 : _column$selected.label) !== null && _column$selected$labe !== void 0 ? _column$selected$labe : resolvePlaceholder(index)),
+              children: renderNode((_column$selected$labe2 = (_column$selected2 = column.selected) === null || _column$selected2 === void 0 ? void 0 : _column$selected2.label) !== null && _column$selected$labe2 !== void 0 ? _column$selected$labe2 : resolvePlaceholder(index), {
+                fontSize: tokens.tabFontSize,
+                lineHeight: "".concat(tokens.tabLineHeight, "px"),
+                color: active ? visualTokens.optionSelectedForeground : visualTokens.columnLabel,
+                fontWeight: active ? '500' : '400'
+              })
+            }, index);
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: autoHeight ? 'none' : 1,
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        paddingLeft: 12,
+        paddingRight: 12,
+        paddingTop: 8,
+        paddingBottom: 12
+      },
+      children: [activeColumn.selected ? /*#__PURE__*/_jsx(Text, {
+        style: {
+          marginBottom: 8,
+          paddingLeft: 4,
+          fontSize: tokens.labelFontSize,
+          lineHeight: "".concat(tokens.labelLineHeight, "px"),
+          fontWeight: '500',
+          color: visualTokens.columnLabel
+        },
+        children: getNodeText(activeColumn.selected.label)
+      }) : null, /*#__PURE__*/_jsx(ScrollView, {
+        scrollY: true,
+        style: {
+          flex: autoHeight ? 'none' : 1,
+          minHeight: 0,
+          maxHeight: typeof height === 'number' ? height - 120 : tokens.height - 104
+        },
+        children: activeColumn.options.length === 0 ? /*#__PURE__*/_jsx(View, {
+          style: {
+            minHeight: 120,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: renderNode(emptyText, {
+            fontSize: tokens.labelFontSize,
+            lineHeight: "".concat(tokens.labelLineHeight, "px"),
+            color: visualTokens.columnLabel,
+            textAlign: 'center'
+          })
+        }) : /*#__PURE__*/_jsx(View, {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8
+          },
+          children: activeColumn.options.map(function (option) {
+            var _option$children2;
+            var selected = selectedValue[tabActiveIndex] === option.value;
+            var hasChildren = Boolean((_option$children2 = option.children) === null || _option$children2 === void 0 ? void 0 : _option$children2.length);
+            return /*#__PURE__*/_jsxs(View, {
+              className: classNames("".concat(prefixCls, "-cascader-view__option"), selected && "".concat(prefixCls, "-cascader-view__option--selected"), option.disabled && "".concat(prefixCls, "-cascader-view__option--disabled")),
+              "data-slot": "cascader-option",
+              "data-selected": selected ? 'true' : 'false',
+              "data-disabled": option.disabled ? 'true' : 'false',
+              onClick: function onClick() {
+                return handleSelect(option, tabActiveIndex);
+              },
+              style: _objectSpread(_objectSpread({}, pressableRowStyle), {}, {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                minHeight: tokens.optionMinHeight,
+                boxSizing: 'border-box',
+                padding: tokens.optionPadding,
+                borderRadius: visualTokens.optionRadius,
+                backgroundColor: selected ? visualTokens.optionSelectedSurface : 'transparent',
+                opacity: option.disabled ? 0.5 : 1
+              }),
+              role: "option",
+              ariaRole: "option",
+              ariaLabel: "".concat(getNodeText(option.label)).concat(selected ? '，已选择' : '').concat(option.disabled ? '，已禁用' : ''),
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: {
+                  flex: 1,
+                  minWidth: 0
+                },
+                children: [renderNode(option.label, {
+                  display: 'block',
+                  fontSize: tokens.optionFontSize,
+                  lineHeight: "".concat(tokens.optionLineHeight, "px"),
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  color: selected ? visualTokens.optionSelectedForeground : visualTokens.optionForeground
+                }), option.description ? renderNode(option.description, {
+                  display: 'block',
+                  marginTop: 4,
+                  fontSize: tokens.labelFontSize,
+                  lineHeight: "".concat(tokens.labelLineHeight, "px"),
+                  color: visualTokens.columnLabel
+                }) : null]
+              }), selected ? activeIcon !== null && activeIcon !== void 0 ? activeIcon : /*#__PURE__*/_jsx(View, {
+                style: iconSlot(tokens.iconSize),
+                children: /*#__PURE__*/_jsx(Icon, {
+                  name: "Check",
+                  size: tokens.iconSize,
+                  color: visualTokens.selectedIcon
+                })
+              }) : hasChildren ? /*#__PURE__*/_jsx(View, {
+                style: iconSlot(tokens.iconSize),
+                children: /*#__PURE__*/_jsx(Icon, {
+                  name: "ChevronRight",
+                  size: tokens.iconSize,
+                  color: visualTokens.chevronIcon
+                })
+              }) : null]
+            }, String(option.value));
+          })
+        })
+      })]
+    })]
+  });
+};
+export default CascaderView;

package/es/components/cascaderView/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as CascaderView } from './cascaderView';
+export { default } from './cascaderView';
+//# sourceMappingURL=index.d.ts.map

package/es/components/cascaderView/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { default as CascaderView } from "./cascaderView";
+export { default } from "./cascaderView";

package/es/components/cascaderView/types.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { CascadeValue } from '../cascadePicker/types';
+import type { CascaderOption, CascaderSize, CascaderValueExtend } from '../cascader/types';
+export interface CascaderViewProps {
+    options?: CascaderOption[];
+    value?: CascadeValue;
+    defaultValue?: CascadeValue;
+    onChange?: (value: CascadeValue, extend: CascaderValueExtend) => void;
+    placeholder?: ReactNode | ((index: number) => ReactNode);
+    onTabsChange?: (index: number) => void;
+    activeIcon?: ReactNode;
+    size?: CascaderSize;
+    height?: number | string;
+    disabled?: boolean;
+    /** Legacy x-taro-ui columns presentation; tabs is the aligned default. */
+    layout?: 'columns' | 'tabs';
+    columnCount?: number;
+    columnTitles?: ReactNode[];
+    emptyText?: ReactNode;
+    showBreadcrumb?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/cascaderView/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/checkList/checkList.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { CheckListItemProps, CheckListProps } from './types';
+export declare const CheckListItem: React.FC<CheckListItemProps>;
+declare type CheckListComponent = React.FC<CheckListProps> & {
+    Item: typeof CheckListItem;
+};
+export declare const CheckList: CheckListComponent;
+export default CheckList;
+//# sourceMappingURL=checkList.d.ts.map