@hanwenbo/x-taro-ui 0.0.1

package/lib/components/treeSelect/treeSelect.js

@@ -0,0 +1,781 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/treeSelect/treeSelect.tsx
+var treeSelect_exports = {};
+__export(treeSelect_exports, {
+  default: () => treeSelect_default
+});
+module.exports = __toCommonJS(treeSelect_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_miniapp = require("../../adapters/miniapp");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_locale = require("../../utils/locale");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var import_portal = require("../portal");
+var import_tokens = require("./tokens");
+var import_style = require("./style.css");
+function renderNode(node, style) {
+  if (typeof node === "string" || typeof node === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style }, node);
+  }
+  return node;
+}
+function getNodeLabel(node) {
+  return node.title ?? node.label ?? node.key;
+}
+function getNodeValue(node) {
+  return node.value ?? node.key;
+}
+function isActivationKey(event) {
+  return event.key === "Enter" || event.key === " ";
+}
+function nodeText(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(nodeText).join("");
+  if (import_react.default.isValidElement(node)) {
+    return nodeText(node.props.children);
+  }
+  return "";
+}
+function filterTree(nodes, query) {
+  if (!query.trim()) {
+    return nodes;
+  }
+  const lowered = query.toLowerCase();
+  return nodes.map((node) => {
+    const matched = nodeText(getNodeLabel(node)).toLowerCase().includes(lowered) || nodeText(node.description).toLowerCase().includes(lowered);
+    const children = node.children ? filterTree(node.children, query) : void 0;
+    if (matched || children && children.length > 0) {
+      return {
+        ...node,
+        children
+      };
+    }
+    return null;
+  }).filter(Boolean);
+}
+function getBranchKeys(nodes) {
+  return nodes.flatMap(
+    (node) => {
+      var _a;
+      return ((_a = node.children) == null ? void 0 : _a.length) ? [node.key, ...getBranchKeys(node.children)] : [];
+    }
+  );
+}
+function findSelectedNodes(nodes, selectedKeys) {
+  const result = [];
+  const visit = (items) => {
+    items.forEach((item) => {
+      var _a;
+      if (selectedKeys.includes(getNodeValue(item))) {
+        result.push(item);
+      }
+      if ((_a = item.children) == null ? void 0 : _a.length) {
+        visit(item.children);
+      }
+    });
+  };
+  visit(nodes);
+  return result;
+}
+var TreeSelect = (props) => {
+  const hasValueProp = Object.prototype.hasOwnProperty.call(props, "value");
+  const {
+    treeData = [],
+    value,
+    defaultValue,
+    multiple = false,
+    checkable: legacyCheckable = false,
+    searchable = false,
+    showSearch,
+    treeCheckable,
+    allowClear = false,
+    variant: variantProp = "default",
+    placeholder: placeholderProp,
+    size: propSize,
+    disabled: propDisabled = false,
+    defaultExpandedKeys,
+    emptyText: emptyTextProp,
+    onChange,
+    onOpenChange,
+    className,
+    style,
+    getPopupContainer
+  } = props;
+  const config = (0, import_configProvider.useConfigProvider)();
+  const { colors, motion, radius, theme } = (0, import_theme.useTokens)();
+  const size = propSize ?? config.size;
+  const disabled = Boolean(propDisabled || config.disabled);
+  const variant = variantProp === "outlined" ? "outline" : variantProp;
+  const isSearchable = showSearch ?? searchable;
+  const isCheckable = treeCheckable ?? legacyCheckable;
+  const multiMode = multiple || isCheckable;
+  const placeholder = placeholderProp ?? (0, import_locale.resolveLocaleText)(config.locale, "picker.placeholder", "请选择");
+  const searchPlaceholder = (0, import_locale.resolveLocaleText)(config.locale, "common.search", "搜索");
+  const emptyText = emptyTextProp ?? (0, import_locale.resolveLocaleText)(config.locale, "common.empty", "暂无数据");
+  const clearLabel = (0, import_locale.resolveLocaleText)(config.locale, "select.clear", "清除选择");
+  const [innerValue, setInnerValue] = (0, import_react.useState)(
+    defaultValue ?? (multiMode ? [] : void 0)
+  );
+  const [expandedKeys, setExpandedKeys] = (0, import_react.useState)(
+    () => defaultExpandedKeys === void 0 ? getBranchKeys(treeData) : defaultExpandedKeys
+  );
+  const [query, setQuery] = (0, import_react.useState)("");
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [triggerPressed, setTriggerPressed] = (0, import_react.useState)(false);
+  const [pressedNodeKey, setPressedNodeKey] = (0, import_react.useState)(null);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react.useState)(null);
+  const positionRequestIdRef = (0, import_react.useRef)(0);
+  const disabledRef = (0, import_react.useRef)(disabled);
+  disabledRef.current = disabled;
+  const reactId = (0, import_react.useId)();
+  const triggerId = (0, import_react.useMemo)(
+    () => `x-tree-select-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`,
+    [reactId]
+  );
+  const dropdownId = `${triggerId}-dropdown`;
+  const currentValue = hasValueProp ? value : innerValue;
+  const selectedKeys = Array.isArray(currentValue) ? currentValue : currentValue ? [currentValue] : [];
+  const filteredTree = (0, import_react.useMemo)(() => filterTree(treeData, query), [query, treeData]);
+  const selectedNodes = (0, import_react.useMemo)(
+    () => findSelectedNodes(treeData, selectedKeys),
+    [selectedKeys, treeData]
+  );
+  const tokens = (0, import_tokens.useTreeSelectTokens)(size);
+  const controlTokens = (0, import_theme.getFormControlTokens)(size);
+  const portalThemeStyle = (0, import_react.useMemo)(
+    () => (0, import_theme.buildThemeVariables)(theme),
+    [theme]
+  );
+  const resolvePopupContainer = (0, import_react.useCallback)(() => getPopupContainer(), [getPopupContainer]);
+  const setDropdownOpen = (0, import_react.useCallback)(
+    (nextOpen) => {
+      if (disabledRef.current && nextOpen) return;
+      setOpen(nextOpen);
+      if (!nextOpen) {
+        setTriggerPressed(false);
+        setPressedNodeKey(null);
+      }
+      onOpenChange == null ? void 0 : onOpenChange(nextOpen);
+    },
+    [onOpenChange]
+  );
+  const updateDropdownPosition = (0, import_react.useCallback)(async () => {
+    const requestId = positionRequestIdRef.current + 1;
+    positionRequestIdRef.current = requestId;
+    const rect = await (0, import_miniapp.measureNode)(`#${triggerId}`);
+    if (positionRequestIdRef.current !== requestId) return false;
+    if (!rect || rect.width <= 0) {
+      setDropdownPosition(null);
+      return true;
+    }
+    const viewport = (0, import_miniapp.getViewport)();
+    const belowSpace = Math.max(0, viewport.height - rect.bottom - 8);
+    const aboveSpace = Math.max(0, rect.top - 8);
+    const openAbove = belowSpace < 180 && aboveSpace > belowSpace;
+    const availableSpace = openAbove ? aboveSpace : belowSpace;
+    setDropdownPosition({
+      top: openAbove ? void 0 : rect.bottom + 4,
+      bottom: openAbove ? viewport.height - rect.top + 4 : void 0,
+      left: rect.left,
+      width: rect.width,
+      maxHeight: Math.max(0, Math.min(256, availableSpace))
+    });
+    return true;
+  }, [triggerId]);
+  const handleTriggerClick = (0, import_react.useCallback)(async () => {
+    if (disabled) return;
+    if (open) {
+      setDropdownOpen(false);
+      return;
+    }
+    if (await updateDropdownPosition()) {
+      setDropdownOpen(true);
+    }
+  }, [disabled, open, setDropdownOpen, updateDropdownPosition]);
+  (0, import_react.useEffect)(() => {
+    if (!open) return void 0;
+    const handleViewportChange = () => {
+      void updateDropdownPosition();
+    };
+    const unsubscribe = (0, import_miniapp.subscribeViewportChange)(handleViewportChange);
+    return () => {
+      positionRequestIdRef.current += 1;
+      unsubscribe();
+    };
+  }, [open, updateDropdownPosition]);
+  (0, import_react.useEffect)(() => {
+    if (disabled && open) {
+      setDropdownOpen(false);
+    }
+  }, [disabled, open, setDropdownOpen]);
+  (0, import_react.useEffect)(
+    () => () => {
+      positionRequestIdRef.current += 1;
+    },
+    []
+  );
+  const updateValue = (nextKeys) => {
+    const nextValue = multiMode ? nextKeys : nextKeys[0];
+    if (!hasValueProp) {
+      setInnerValue(nextValue);
+    }
+    onChange == null ? void 0 : onChange(nextValue, findSelectedNodes(treeData, nextKeys));
+  };
+  const toggleNode = (node) => {
+    if (disabled || node.disabled || isCheckable && node.disableCheckbox) {
+      return;
+    }
+    const nodeValue = getNodeValue(node);
+    if (multiMode) {
+      const nextKeys = selectedKeys.includes(nodeValue) ? selectedKeys.filter((key) => key !== nodeValue) : [...selectedKeys, nodeValue];
+      updateValue(nextKeys);
+      return;
+    }
+    updateValue([nodeValue]);
+    setDropdownOpen(false);
+  };
+  const toggleExpandedNode = (nodeKey) => {
+    setExpandedKeys(
+      (current) => current.includes(nodeKey) ? current.filter((key) => key !== nodeKey) : [...current, nodeKey]
+    );
+  };
+  const renderTree = (nodes, depth = 0) => nodes.map((node) => {
+    var _a;
+    const expanded = expandedKeys.includes(node.key);
+    const nodeValue = getNodeValue(node);
+    const selected = selectedKeys.includes(nodeValue);
+    const hasChildren = Boolean((_a = node.children) == null ? void 0 : _a.length);
+    const isExpanded = Boolean(hasChildren && (query.trim() || expanded));
+    const label = getNodeLabel(node);
+    const labelText = nodeText(label) || nodeValue;
+    const nodeInteractionDisabled = Boolean(
+      disabled || node.disabled || isCheckable && node.disableCheckbox
+    );
+    const nodePressed = pressedNodeKey === node.key && !nodeInteractionDisabled;
+    return /* @__PURE__ */ import_react.default.createElement(import_components.View, { key: node.key, "data-slot": "tree-select-node-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        role: "option",
+        ariaLabel: `${labelText}${selected ? "，已选中" : ""}${node.disabled ? "，已禁用" : ""}${isCheckable && node.disableCheckbox ? "，复选框已禁用" : ""}`,
+        "aria-selected": selected,
+        "aria-disabled": nodeInteractionDisabled,
+        tabIndex: nodeInteractionDisabled ? -1 : 0,
+        "data-slot": "tree-select-node",
+        "data-key": node.key,
+        "data-depth": depth,
+        "data-selected": selected ? "true" : "false",
+        "data-disabled": nodeInteractionDisabled ? "true" : "false",
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-tree-select__node`,
+          selected && `${config.prefixCls}-tree-select__node--selected`,
+          nodeInteractionDisabled && `${config.prefixCls}-tree-select__node--disabled`
+        ),
+        onClick: () => toggleNode(node),
+        onKeyDown: (event) => {
+          var _a2;
+          if (!isActivationKey(event) || nodeInteractionDisabled) return;
+          (_a2 = event.preventDefault) == null ? void 0 : _a2.call(event);
+          toggleNode(node);
+        },
+        onMouseDown: () => !nodeInteractionDisabled && setPressedNodeKey(node.key),
+        onMouseUp: () => setPressedNodeKey(null),
+        onMouseLeave: () => setPressedNodeKey(null),
+        onTouchStart: () => !nodeInteractionDisabled && setPressedNodeKey(node.key),
+        onTouchEnd: () => setPressedNodeKey(null),
+        onTouchCancel: () => setPressedNodeKey(null),
+        style: {
+          boxSizing: "border-box",
+          minHeight: controlTokens.height,
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          gap: controlTokens.gap,
+          paddingTop: tokens.nodePaddingY,
+          paddingBottom: tokens.nodePaddingY,
+          paddingRight: tokens.nodePaddingX,
+          paddingLeft: tokens.nodePaddingX + depth * 16,
+          borderRadius: radius.sm,
+          backgroundColor: selected ? colors.accent : nodePressed ? (0, import_theme.withOpacity)(colors.accent, 0.55) : "transparent",
+          opacity: disabled || node.disabled ? 0.45 : 1,
+          cursor: nodeInteractionDisabled ? "not-allowed" : "pointer",
+          transition: `background-color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, opacity ${motion.durationsMs.emphasis}ms ${motion.easing.standard}`
+        }
+      },
+      hasChildren ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          role: "button",
+          ariaLabel: `${isExpanded ? "收起" : "展开"}${labelText}`,
+          "aria-expanded": isExpanded,
+          "aria-disabled": disabled,
+          tabIndex: disabled ? -1 : 0,
+          "data-slot": "tree-select-expand",
+          className: `${config.prefixCls}-tree-select__expand`,
+          onClick: (event) => {
+            var _a2;
+            (_a2 = event.stopPropagation) == null ? void 0 : _a2.call(event);
+            toggleExpandedNode(node.key);
+          },
+          onKeyDown: (event) => {
+            var _a2, _b;
+            if (!isActivationKey(event) || disabled) return;
+            (_a2 = event.preventDefault) == null ? void 0 : _a2.call(event);
+            (_b = event.stopPropagation) == null ? void 0 : _b.call(event);
+            toggleExpandedNode(node.key);
+          },
+          style: {
+            width: 16,
+            height: 16,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: disabled ? "not-allowed" : "pointer"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_icon.Icon,
+          {
+            name: isExpanded ? "ChevronDown" : "ChevronRight",
+            size: 14,
+            color: colors["muted-foreground"]
+          }
+        )
+      ) : /* @__PURE__ */ import_react.default.createElement(import_components.View, { "data-slot": "tree-select-indent", style: { width: 16, height: 16 } }),
+      isCheckable ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          role: "checkbox",
+          ariaLabel: `${selected ? "取消选择" : "选择"}${labelText}`,
+          "aria-checked": selected,
+          "aria-disabled": nodeInteractionDisabled,
+          tabIndex: -1,
+          "data-slot": "tree-select-checkbox",
+          className: `${config.prefixCls}-tree-select__checkbox`,
+          style: {
+            width: 16,
+            height: 16,
+            boxSizing: "border-box",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: selected ? colors.primary : colors.border,
+            borderRadius: radius.sm,
+            backgroundColor: selected ? colors.primary : colors.background,
+            opacity: node.disableCheckbox ? 0.45 : 1
+          }
+        },
+        selected ? /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "Check", size: 11, color: colors["primary-foreground"] }) : null
+      ) : null,
+      /* @__PURE__ */ import_react.default.createElement(import_components.View, { "data-slot": "tree-select-node-content", style: { flex: 1, minWidth: 0 } }, renderNode(label, {
+        fontSize: tokens.itemFontSize,
+        fontWeight: tokens.itemFontWeight,
+        color: selected ? colors["accent-foreground"] : colors["popover-foreground"],
+        lineHeight: 1.4
+      }), node.description ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { marginTop: 2 } }, renderNode(node.description, {
+        fontSize: tokens.descriptionFontSize,
+        fontWeight: 400,
+        color: selected ? (0, import_theme.withOpacity)(colors["accent-foreground"], 0.75) : colors["muted-foreground"],
+        lineHeight: 1.4
+      })) : null)
+    ), isExpanded && renderTree(node.children, depth + 1));
+  });
+  const hasSelection = selectedKeys.length > 0;
+  const showClear = allowClear && hasSelection && !disabled;
+  const triggerBorderWidth = variant === "outline" || variant === "underlined" ? 2 : 1;
+  const isUnderlined = variant === "underlined";
+  const triggerBackground = variant === "filled" ? colors.muted : variant === "borderless" || isUnderlined ? "transparent" : colors.background;
+  const triggerBorder = variant === "borderless" ? "transparent" : open || triggerPressed ? colors.primary : colors.border;
+  const maxPanelHeight = (dropdownPosition == null ? void 0 : dropdownPosition.maxHeight) ?? 256;
+  const searchHeight = isSearchable ? controlTokens.height + 8 : 0;
+  const dropdownStyle = dropdownPosition ? {
+    position: "fixed",
+    top: dropdownPosition.top,
+    bottom: dropdownPosition.bottom,
+    left: dropdownPosition.left,
+    width: dropdownPosition.width
+  } : { position: "absolute", top: "calc(100% + 4px)", left: 0, right: 0, width: "100%" };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "tree-select",
+      "data-size": size,
+      "data-variant": variant,
+      "data-disabled": disabled ? "true" : "false",
+      className: (0, import_utils.classNames)(
+        `${config.prefixCls}-tree-select`,
+        `${config.prefixCls}-tree-select--${size}`,
+        `${config.prefixCls}-tree-select--${variant}`,
+        className
+      ),
+      style: { position: "relative", width: "100%", minWidth: 0, ...style },
+      onKeyDown: (event) => {
+        const key = event.key;
+        if (key === "Escape" && open) setDropdownOpen(false);
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        id: triggerId,
+        role: "combobox",
+        ariaLabel: nodeText(placeholder) || "请选择",
+        "aria-expanded": open,
+        "aria-controls": dropdownId,
+        "aria-haspopup": "listbox",
+        "aria-disabled": disabled,
+        "data-slot": "tree-select-trigger",
+        "data-open": open ? "true" : "false",
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-tree-select__trigger`,
+          `${config.prefixCls}-tree-select__trigger--${size}`,
+          `${config.prefixCls}-tree-select__trigger--${variant}`,
+          open && `${config.prefixCls}-tree-select__trigger--open`,
+          disabled && `${config.prefixCls}-tree-select__trigger--disabled`
+        ),
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          width: "100%",
+          minWidth: 0,
+          minHeight: multiMode && hasSelection ? controlTokens.minHeight : controlTokens.height,
+          paddingTop: multiMode && hasSelection ? 4 : 0,
+          paddingBottom: multiMode && hasSelection ? 4 : 0,
+          paddingLeft: isUnderlined ? 0 : controlTokens.inlinePadding,
+          paddingRight: isUnderlined ? 0 : controlTokens.inlinePadding,
+          gap: controlTokens.gap,
+          borderTopWidth: isUnderlined ? 0 : triggerBorderWidth,
+          borderRightWidth: isUnderlined ? 0 : triggerBorderWidth,
+          borderBottomWidth: triggerBorderWidth,
+          borderLeftWidth: isUnderlined ? 0 : triggerBorderWidth,
+          borderStyle: "solid",
+          borderColor: triggerBorder,
+          borderRadius: isUnderlined ? 0 : radius.md,
+          backgroundColor: triggerPressed && variant === "filled" ? colors.accent : triggerBackground,
+          boxShadow: open ? `0 0 0 1px ${(0, import_theme.withOpacity)(colors.ring, 0.18)}` : "none",
+          opacity: disabled ? 0.5 : 1,
+          cursor: disabled ? "not-allowed" : "pointer",
+          transition: `background-color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, border-color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, box-shadow ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, opacity ${motion.durationsMs.emphasis}ms ${motion.easing.standard}`
+        },
+        onClick: () => void handleTriggerClick(),
+        onMouseDown: () => !disabled && setTriggerPressed(true),
+        onMouseUp: () => setTriggerPressed(false),
+        onMouseLeave: () => setTriggerPressed(false),
+        onTouchStart: () => !disabled && setTriggerPressed(true),
+        onTouchEnd: () => setTriggerPressed(false),
+        onTouchCancel: () => setTriggerPressed(false),
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: (event) => {
+          var _a;
+          if (isActivationKey(event)) {
+            (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+            void handleTriggerClick();
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "tree-select-value",
+          className: `${config.prefixCls}-tree-select__value`,
+          style: {
+            flex: 1,
+            minWidth: 0,
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: "wrap",
+            alignItems: "center",
+            gap: 4,
+            overflow: "hidden"
+          }
+        },
+        !hasSelection ? renderNode(placeholder, {
+          minWidth: 0,
+          fontSize: controlTokens.textSize,
+          color: colors["muted-foreground"],
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }) : multiMode ? selectedKeys.map((selectedKey) => {
+          const node = selectedNodes.find((item) => getNodeValue(item) === selectedKey);
+          const nodeValue = selectedKey;
+          const nodeLabel = node ? getNodeLabel(node) : selectedKey;
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              key: nodeValue,
+              "data-slot": "tree-select-tag",
+              className: `${config.prefixCls}-tree-select__tag`,
+              style: {
+                display: "inline-flex",
+                flexDirection: "row",
+                alignItems: "center",
+                maxWidth: "100%",
+                gap: 4,
+                padding: size === "mini" ? "2px 6px" : size === "small" ? "2px 8px" : size === "large" ? "4px 10px" : "4px 8px",
+                borderRadius: radius.sm,
+                backgroundColor: colors.accent,
+                color: colors["accent-foreground"]
+              }
+            },
+            renderNode(nodeLabel, {
+              fontSize: tokens.tagFontSize,
+              fontWeight: 500,
+              color: colors["accent-foreground"],
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }),
+            !disabled ? /* @__PURE__ */ import_react.default.createElement(
+              import_components.View,
+              {
+                role: "button",
+                ariaLabel: `移除${nodeText(nodeLabel) || nodeValue}`,
+                tabIndex: 0,
+                "data-slot": "tree-select-tag-remove",
+                className: `${config.prefixCls}-tree-select__tag-remove`,
+                onClick: (event) => {
+                  var _a;
+                  (_a = event.stopPropagation) == null ? void 0 : _a.call(event);
+                  updateValue(selectedKeys.filter((key) => key !== nodeValue));
+                },
+                onKeyDown: (event) => {
+                  var _a, _b;
+                  if (!isActivationKey(event)) return;
+                  (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+                  (_b = event.stopPropagation) == null ? void 0 : _b.call(event);
+                  updateValue(selectedKeys.filter((key) => key !== nodeValue));
+                }
+              },
+              /* @__PURE__ */ import_react.default.createElement(
+                import_icon.Icon,
+                {
+                  name: "X",
+                  size: Math.max(10, tokens.tagFontSize),
+                  color: colors["muted-foreground"]
+                }
+              )
+            ) : null
+          );
+        }) : renderNode(getNodeLabel(selectedNodes[0] ?? { key: selectedKeys[0] }), {
+          minWidth: 0,
+          fontSize: controlTokens.textSize,
+          color: colors.foreground,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        })
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "tree-select-actions",
+          style: { display: "flex", flexDirection: "row", alignItems: "center", gap: 4 }
+        },
+        showClear ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            role: "button",
+            ariaLabel: nodeText(clearLabel),
+            tabIndex: 0,
+            "data-slot": "tree-select-clear",
+            className: `${config.prefixCls}-tree-select__clear`,
+            onClick: (event) => {
+              var _a;
+              (_a = event.stopPropagation) == null ? void 0 : _a.call(event);
+              updateValue([]);
+            },
+            onKeyDown: (event) => {
+              var _a, _b;
+              if (!isActivationKey(event)) return;
+              (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+              (_b = event.stopPropagation) == null ? void 0 : _b.call(event);
+              updateValue([]);
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Icon,
+            {
+              name: "X",
+              size: Math.max(12, controlTokens.iconSize - 2),
+              color: colors["muted-foreground"]
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "tree-select-arrow",
+            className: `${config.prefixCls}-tree-select__arrow`,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: controlTokens.iconSize,
+              height: controlTokens.iconSize,
+              transform: open ? "rotate(180deg)" : "rotate(0deg)",
+              transition: "transform var(--x-duration-emphasis) var(--x-easing-standard)"
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Icon,
+            {
+              name: "ChevronDown",
+              size: Math.max(12, controlTokens.iconSize - 2),
+              color: colors["muted-foreground"]
+            }
+          )
+        )
+      )
+    ),
+    open ? /* @__PURE__ */ import_react.default.createElement(
+      import_portal.Portal,
+      {
+        root: Boolean(dropdownPosition),
+        container: getPopupContainer ? resolvePopupContainer : void 0,
+        className: `${config.prefixCls}-tree-select__portal`,
+        hostStyle: portalThemeStyle
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "tree-select-backdrop",
+          "aria-hidden": true,
+          className: `${config.prefixCls}-tree-select__backdrop`,
+          catchMove: true,
+          onClick: () => setDropdownOpen(false),
+          style: {
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1099,
+            backgroundColor: "transparent"
+          }
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          id: dropdownId,
+          "data-slot": "tree-select-dropdown",
+          "data-position": (dropdownPosition == null ? void 0 : dropdownPosition.top) === void 0 ? "top" : "bottom",
+          className: `${config.prefixCls}-tree-select__dropdown`,
+          role: "listbox",
+          ariaLabel: `${nodeText(placeholder) || "请选择"}选项`,
+          style: {
+            ...dropdownStyle,
+            boxSizing: "border-box",
+            zIndex: 1100,
+            maxHeight: maxPanelHeight,
+            overflow: "hidden",
+            padding: size === "mini" ? 4 : size === "small" ? 6 : size === "large" ? 10 : 8,
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: colors.border,
+            borderRadius: radius.lg,
+            backgroundColor: colors.popover,
+            boxShadow: "var(--x-shadow-lg)",
+            animation: `x-tree-select-dropdown-enter ${motion.durationsMs.emphasis}ms ${motion.easing.standard}`
+          }
+        },
+        isSearchable ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "tree-select-search",
+            className: `${config.prefixCls}-tree-select__search`,
+            style: { paddingBottom: 8 }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_components.Input,
+            {
+              "data-slot": "tree-select-search-input",
+              className: `${config.prefixCls}-tree-select__search-input`,
+              value: query,
+              ariaLabel: nodeText(searchPlaceholder),
+              placeholder: `${nodeText(searchPlaceholder)}...`,
+              onInput: (event) => setQuery(event.detail.value),
+              style: {
+                boxSizing: "border-box",
+                width: "100%",
+                height: controlTokens.height,
+                paddingLeft: controlTokens.inlinePadding,
+                paddingRight: controlTokens.inlinePadding,
+                fontSize: controlTokens.textSize,
+                color: colors.foreground,
+                borderWidth: 1,
+                borderStyle: "solid",
+                borderColor: colors.input,
+                borderRadius: radius.md,
+                backgroundColor: colors.background
+              }
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.ScrollView,
+          {
+            scrollY: true,
+            "data-slot": "tree-select-tree",
+            className: `${config.prefixCls}-tree-select__tree`,
+            style: { maxHeight: Math.max(0, maxPanelHeight - searchHeight) }
+          },
+          filteredTree.length > 0 ? renderTree(filteredTree) : /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              "data-slot": "tree-select-empty",
+              className: `${config.prefixCls}-tree-select__empty`,
+              style: {
+                padding: 20,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              }
+            },
+            renderNode(emptyText, {
+              fontSize: tokens.itemFontSize,
+              color: colors["muted-foreground"],
+              textAlign: "center"
+            })
+          )
+        )
+      )
+    ) : null
+  );
+};
+TreeSelect.displayName = "TreeSelect";
+var treeSelect_default = TreeSelect;