@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/tree/utils.ts

@@ -0,0 +1,269 @@
+/**
+ * Tree / TreeSelect 共用算法工具。
+ *
+ * - 抽离自原 `tree-select/index.tsx`，泛化为接受 `getKey` 适配 `key` / `value` 两种字段命名。
+ * - 全为纯函数，无副作用，便于在 Tree 与 TreeSelect 间共享。
+ */
+import * as React from 'react';
+
+/** 所有树节点共享的可选基础字段。 */
+export interface TreeNodeBase {
+  /** 整体禁用：不可选 / 不可勾选 / 不可展开收起。 */
+  disabled?: boolean;
+  /** 仅禁用复选框（多选 / 勾选下生效）。 */
+  disableCheckbox?: boolean;
+  /** 强制叶子节点：无展开箭头 / 不参与 cascade。 */
+  isLeaf?: boolean;
+}
+
+/** 在数据树中按 key 查找节点。 */
+export function findNode<T extends { children?: T[] }>(
+  data: T[],
+  key: string,
+  getKey: (n: T) => string,
+): T | undefined {
+  for (const node of data) {
+    if (getKey(node) === key) return node;
+    if (node.children) {
+      const found = findNode(node.children, key, getKey);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+/** 收集整棵树所有节点 key（含中间节点）。 */
+export function getAllKeys<T extends { children?: T[] }>(
+  data: T[],
+  getKey: (n: T) => string,
+): string[] {
+  const keys: string[] = [];
+  const walk = (nodes: T[]) => {
+    for (const node of nodes) {
+      keys.push(getKey(node));
+      if (node.children) walk(node.children);
+    }
+  };
+  walk(data);
+  return keys;
+}
+
+/** 收集节点下所有未禁用 / 未 disableCheckbox 的后代 key（含自身）。 */
+export function collectCheckable<T extends TreeNodeBase & { children?: T[] }>(
+  node: T,
+  getKey: (n: T) => string,
+): string[] {
+  const out: string[] = [];
+  const walk = (n: T) => {
+    if (n.disabled || n.disableCheckbox) return;
+    out.push(getKey(n));
+    n.children?.forEach(walk);
+  };
+  walk(node);
+  return out;
+}
+
+/**
+ * 节点是否 fully checked —— 对齐 antd `rc-tree` `conductCheck` 语义：
+ * - 叶子（或所有子均不可勾选）：`checked.has(self)`
+ * - 非叶子：所有 checkable 子均 fully checked，不依赖 self 在 set 中
+ *   （避免受控展开后 parent in set 误判为 fully，导致取消子项被压缩推导反吐）。
+ */
+export function isFullyChecked<T extends TreeNodeBase & { children?: T[] }>(
+  node: T,
+  checked: Set<string>,
+  getKey: (n: T) => string,
+): boolean {
+  const children = node.children?.filter(
+    (c) => !c.disabled && !c.disableCheckbox,
+  );
+  if (!children || children.length === 0) {
+    return checked.has(getKey(node));
+  }
+  return children.every((c) => isFullyChecked(c, checked, getKey));
+}
+
+/** 是否处于半选状态：自身未 fully checked 但有任一后代被选。 */
+export function isIndeterminate<T extends TreeNodeBase & { children?: T[] }>(
+  node: T,
+  checked: Set<string>,
+  getKey: (n: T) => string,
+): boolean {
+  if (isFullyChecked(node, checked, getKey)) return false;
+  const stack: T[] = node.children ? [...node.children] : [];
+  while (stack.length) {
+    const cur = stack.pop()!;
+    if (checked.has(getKey(cur))) return true;
+    if (cur.children) stack.push(...cur.children);
+  }
+  return false;
+}
+
+/** 把内部完整 checkedSet 按策略压缩为出参。 */
+export function applyCheckedStrategy<
+  T extends TreeNodeBase & { children?: T[] },
+>(
+  data: T[],
+  checked: Set<string>,
+  strategy: 'parent' | 'child' | 'all',
+  getKey: (n: T) => string,
+): string[] {
+  const out: string[] = [];
+  const walk = (nodes: T[]) => {
+    for (const node of nodes) {
+      const fully = isFullyChecked(node, checked, getKey);
+      if (strategy === 'parent') {
+        if (fully) {
+          out.push(getKey(node));
+          continue;
+        }
+        if (node.children) walk(node.children);
+      } else if (strategy === 'child') {
+        const isLeaf =
+          node.isLeaf ?? (!node.children || node.children.length === 0);
+        if (isLeaf && (fully || checked.has(getKey(node)))) {
+          out.push(getKey(node));
+        }
+        if (node.children) walk(node.children);
+      } else {
+        if (fully || checked.has(getKey(node))) out.push(getKey(node));
+        if (node.children) walk(node.children);
+      }
+    }
+  };
+  walk(data);
+  return out;
+}
+
+/** 父子联动模式：勾选 / 取消时同步 ancestor / descendant。 */
+export function toggleWithCascade<T extends TreeNodeBase & { children?: T[] }>(
+  data: T[],
+  current: Set<string>,
+  target: T,
+  nextChecked: boolean,
+  getKey: (n: T) => string,
+): Set<string> {
+  const next = new Set(current);
+  // 1. 同步所有可勾选后代（含自身）
+  for (const v of collectCheckable(target, getKey)) {
+    if (nextChecked) next.add(v);
+    else next.delete(v);
+  }
+  // 2. 找到 target 的祖先链，倒序回算
+  const parents: T[] = [];
+  const walk = (nodes: T[], chain: T[]): boolean => {
+    for (const node of nodes) {
+      if (node === target) {
+        parents.push(...chain);
+        return true;
+      }
+      if (node.children && walk(node.children, [...chain, node])) return true;
+    }
+    return false;
+  };
+  walk(data, []);
+  for (let i = parents.length - 1; i >= 0; i--) {
+    const p = parents[i]!;
+    if (isFullyChecked(p, next, getKey)) next.add(getKey(p));
+    else next.delete(getKey(p));
+  }
+  return next;
+}
+
+/** 收集树中所有节点的半选 key 列表（用于 onCheck info）。 */
+export function collectIndeterminateKeys<
+  T extends TreeNodeBase & { children?: T[] },
+>(data: T[], checked: Set<string>, getKey: (n: T) => string): string[] {
+  const out: string[] = [];
+  const walk = (nodes: T[]) => {
+    for (const node of nodes) {
+      if (isIndeterminate(node, checked, getKey)) out.push(getKey(node));
+      if (node.children) walk(node.children);
+    }
+  };
+  walk(data);
+  return out;
+}
+
+// ─── 展平 / 自动展开父级 ────────────────────────────────────────────────────
+
+/** 扁平节点（虚拟滚动消费）。 */
+export interface FlatTreeNode<T> {
+  /** 当前节点。 */
+  node: T;
+  /** 层级，根 = 0。 */
+  level: number;
+  /** 父节点 key 链（自顶向下，不含自身）。 */
+  parentKeys: string[];
+  /** 是否叶子。 */
+  isLeaf: boolean;
+}
+
+/** 按 expandedKeys 展开当前可见节点列表，root → leaf 顺序。 */
+export function flattenVisible<T extends { children?: T[]; isLeaf?: boolean }>(
+  data: T[],
+  expandedKeys: Set<string>,
+  getKey: (n: T) => string,
+): FlatTreeNode<T>[] {
+  const out: FlatTreeNode<T>[] = [];
+  const walk = (nodes: T[], level: number, chain: string[]) => {
+    for (const node of nodes) {
+      const key = getKey(node);
+      const hasChildren = !!(node.children && node.children.length > 0);
+      const isLeaf = node.isLeaf ?? !hasChildren;
+      out.push({ node, level, parentKeys: chain, isLeaf });
+      if (hasChildren && expandedKeys.has(key)) {
+        walk(node.children!, level + 1, [...chain, key]);
+      }
+    }
+  };
+  walk(data, 0, []);
+  return out;
+}
+
+/** 把命中节点的所有祖先 key 自动并入展开集合（autoExpandParent 用）。 */
+export function expandWithParents<T extends { children?: T[] }>(
+  data: T[],
+  keys: string[],
+  getKey: (n: T) => string,
+): string[] {
+  const target = new Set(keys);
+  const out = new Set(keys);
+  const walk = (nodes: T[], chain: string[]): boolean => {
+    let hit = false;
+    for (const node of nodes) {
+      const key = getKey(node);
+      const childHit = node.children
+        ? walk(node.children, [...chain, key])
+        : false;
+      if (target.has(key) || childHit) {
+        // 把当前节点的祖先加进来
+        for (const k of chain) out.add(k);
+        hit = true;
+      }
+    }
+    return hit;
+  };
+  walk(data, []);
+  return Array.from(out);
+}
+
+// ─── React 受控/非受控辅助 ──────────────────────────────────────────────────
+
+/** 用受控值 + 默认值计算最终值，并返回 setter（仅在非受控时生效）。 */
+export function useControllableState<T>(
+  controlled: T | undefined,
+  defaultValue: T,
+): [T, (next: T) => T] {
+  const [internal, setInternal] = React.useState<T>(defaultValue);
+  const isControlled = controlled !== undefined;
+  const value = isControlled ? (controlled as T) : internal;
+  const set = React.useCallback(
+    (next: T) => {
+      if (!isControlled) setInternal(next);
+      return next;
+    },
+    [isControlled],
+  );
+  return [value, set];
+}

package/src/components/tree-select/index.tsx

@@ -0,0 +1,400 @@
+/**
+ * 树选择 TreeSelect
+ *
+ * 树形结构数据的下拉选择控件，基于 Popover + 内嵌 Tree 渲染。支持单选 / 多选（父子联动 / 独立勾选）、
+ * 内置或外部接管的搜索、受控开合等业界主流能力。
+ *
+ * @when
+ * - 组织架构选择（部门 / 团队）
+ * - 分类目录的层级选择
+ * - 需要树形展示的下拉单选 / 多选
+ * - 多选场景下需要父子联动勾选并按策略回填值时
+ */
+'use client';
+
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ChevronDownIcon, XIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Spinner } from '@/components/spinner';
+import { Tree } from '@/components/tree';
+import type { TreeNode } from '@/components/tree';
+import { findNode } from '@/components/tree/utils';
+
+// ─── Variants ────────────────────────────────────────────────────────────────
+
+const treeSelectTriggerVariants = cva(
+  'flex w-fit min-w-36 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent px-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
+  {
+    variants: {
+      size: {
+        sm: 'h-7',
+        default: 'h-8',
+        lg: 'h-9 text-sm',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+);
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface TreeSelectNode {
+  /** 唯一标识。 */
+  value: string;
+  /** 显示文本。 */
+  label: string;
+  /** 子节点。 */
+  children?: TreeSelectNode[];
+  /** 是否禁用整个节点（不可选 / 不可勾选）。 */
+  disabled?: boolean;
+  /** 是否禁用复选框，仅在 multiple 下生效。 */
+  disableCheckbox?: boolean;
+  /** 是否是叶子节点（无子节点时强制叶子样式）。 */
+  isLeaf?: boolean;
+}
+
+interface TreeSelectProps
+  extends Omit<
+      React.ComponentProps<'div'>,
+      'onChange' | 'defaultValue' | 'value'
+    >,
+    VariantProps<typeof treeSelectTriggerVariants> {
+  /** 树形数据源。 */
+  treeData: TreeSelectNode[];
+  /** 选中值（受控）：单选为 string，多选为 string[]。 */
+  value?: string | string[];
+  /** 默认选中值（非受控）。 */
+  defaultValue?: string | string[];
+  /**
+   * 选择回调。
+   * - 单选 → value 为 string，selectedNodes 为单元素数组
+   * - 多选 → value 为 string[]，按 showCheckedStrategy 过滤
+   */
+  onChange?: (
+    value: string | string[],
+    info: { selectedNodes: TreeSelectNode[] },
+  ) => void;
+  /** 占位文本。@default '请选择' */
+  placeholder?: string;
+  /** 是否禁用。@default false */
+  disabled?: boolean;
+  /** 触发器尺寸：sm 28px / default 32px / lg 36px，对齐 Button、Input、Select 三档规范。 */
+  size?: 'sm' | 'default' | 'lg';
+  /** 是否多选。@default false */
+  multiple?: boolean;
+  /**
+   * 多选下父子节点勾选是否独立（不联动），仅在 multiple=true 时生效。
+   * @default false
+   */
+  checkStrictly?: boolean;
+  /**
+   * 多选回填策略：
+   * - 'parent' 父级全选时仅返回父级（默认）
+   * - 'child' 仅返回叶子节点
+   * - 'all' 全量返回
+   * 仅在 multiple=true 且 checkStrictly=false 时生效。
+   * @default 'parent'
+   */
+  showCheckedStrategy?: 'parent' | 'child' | 'all';
+  /**
+   * 是否允许清空：有选中且非 disabled / loading 时，右侧 chevron 切为 × 按钮。
+   * 与 Select 一致：右侧图标优先级 loading > clear > chevron，三者互斥占同一位置。
+   * @default true
+   */
+  allowClear?: boolean;
+  /**
+   * 加载态：将右侧图标替换为旋转 spinner，并标记 data-loading="true" 供外部样式穿透。
+   * @default false
+   */
+  loading?: boolean;
+  /** 是否显示弹层内置搜索框。@default false */
+  showSearch?: boolean;
+  /** 搜索回调；提供后内部不再做本地过滤，由外部接管 treeData。 */
+  onSearch?: (keyword: string) => void;
+  /** 内置搜索的过滤字段。@default 'label' */
+  treeNodeFilterProp?: 'label' | 'value';
+  /** 默认展开所有节点。@default false */
+  defaultExpandAll?: boolean;
+  /** 默认展开节点 value 列表。 */
+  defaultExpandedKeys?: string[];
+  /** 受控开合。 */
+  open?: boolean;
+  /** 默认开合（非受控）。 */
+  defaultOpen?: boolean;
+  /** 开合变化回调。 */
+  onOpenChange?: (open: boolean) => void;
+  /** 无数据时显示内容。@default '暂无数据' */
+  notFoundContent?: React.ReactNode;
+  /** 透传到 PopoverContent。 */
+  popoverProps?: React.ComponentProps<typeof PopoverPrimitive.Content>;
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+const getValue = (n: TreeSelectNode) => n.value;
+
+/** 把 TreeSelectNode 树映射为 Tree 消费的 TreeNode 形态（key = value）。 */
+function toTreeNodes(nodes: TreeSelectNode[]): TreeNode[] {
+  return nodes.map((n) => ({
+    key: n.value,
+    label: n.label,
+    disabled: n.disabled,
+    disableCheckbox: n.disableCheckbox,
+    isLeaf: n.isLeaf,
+    children: n.children ? toTreeNodes(n.children) : undefined,
+  }));
+}
+
+// ─── TreeSelect ─────────────────────────────────────────────────────────────
+
+function TreeSelect({
+  treeData,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  placeholder = '请选择',
+  disabled = false,
+  size = 'default',
+  multiple = false,
+  checkStrictly = false,
+  showCheckedStrategy = 'parent',
+  allowClear = true,
+  loading = false,
+  showSearch = false,
+  onSearch,
+  treeNodeFilterProp = 'label',
+  defaultExpandAll = false,
+  defaultExpandedKeys,
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  notFoundContent = '暂无数据',
+  popoverProps,
+  className,
+  ...props
+}: TreeSelectProps) {
+  // ── 选中态（内部完整集合）─────────────────────────────────────────────────
+  const [internalValue, setInternalValue] = React.useState<string[]>(() => {
+    if (defaultValue === undefined) return [];
+    return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+  });
+
+  const isControlled = controlledValue !== undefined;
+  const selectedFromProp = React.useMemo<string[]>(() => {
+    if (!isControlled) return internalValue;
+    if (Array.isArray(controlledValue)) return controlledValue;
+    return controlledValue ? [controlledValue] : [];
+  }, [isControlled, controlledValue, internalValue]);
+
+  // ── 弹层 open ─────────────────────────────────────────────────────────────
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = (next: boolean) => {
+    if (controlledOpen === undefined) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  // ── 搜索关键字 ────────────────────────────────────────────────────────────
+  const [search, setSearch] = React.useState('');
+
+  // ── 搜索过滤（仅在未提供 onSearch 时本地过滤）─────────────────────────────
+  const filterTree = React.useCallback(
+    (nodes: TreeSelectNode[], keyword: string): TreeSelectNode[] => {
+      if (!keyword) return nodes;
+      const kw = keyword.toLowerCase();
+      return nodes
+        .map((node) => {
+          const childrenMatch = node.children
+            ? filterTree(node.children, keyword)
+            : [];
+          const field =
+            treeNodeFilterProp === 'value' ? node.value : node.label;
+          const selfMatch = String(field).toLowerCase().includes(kw);
+          if (selfMatch || childrenMatch.length > 0) {
+            return { ...node, children: childrenMatch };
+          }
+          return null;
+        })
+        .filter(Boolean) as TreeSelectNode[];
+    },
+    [treeNodeFilterProp],
+  );
+
+  const displayData =
+    showSearch && !onSearch && search ? filterTree(treeData, search) : treeData;
+  const treeForRender = React.useMemo(
+    () => toTreeNodes(displayData),
+    [displayData],
+  );
+
+  // ── 显示文案 ─────────────────────────────────────────────────────────────
+  const displayText = React.useMemo(() => {
+    if (multiple) {
+      if (selectedFromProp.length === 0) return '';
+      return selectedFromProp
+        .map((v) => findNode(treeData, v, getValue)?.label ?? v)
+        .join(', ');
+    }
+    const single = selectedFromProp[0];
+    if (!single) return '';
+    return findNode(treeData, single, getValue)?.label ?? single;
+  }, [multiple, selectedFromProp, treeData]);
+
+  const hasValue = multiple
+    ? selectedFromProp.length > 0
+    : Boolean(selectedFromProp[0]);
+  const showClear = !loading && allowClear && hasValue && !disabled;
+
+  // ── 处理 ──────────────────────────────────────────────────────────────
+  const handleClear = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isControlled) setInternalValue([]);
+    if (multiple) onChange?.([], { selectedNodes: [] });
+    else onChange?.('', { selectedNodes: [] });
+  };
+
+  const handleSearchChange = (v: string) => {
+    setSearch(v);
+    onSearch?.(v);
+  };
+
+  // ── 计算 Tree 受控入参 ─────────────────────────────────────────────────
+  // 单选：selectedKeys 取 selectedFromProp[0]
+  // 多选：checkedKeys 取 selectedFromProp（外部值，可能是策略压缩后的；
+  //        Tree 内部会按照 checkStrictly=false 时自动展开为完整集合）
+  const treeSelectedKeys = !multiple ? selectedFromProp.slice(0, 1) : undefined;
+  const treeCheckedKeys = multiple ? selectedFromProp : undefined;
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <div
+        data-slot="tree-select"
+        className={cn('relative inline-block', className)}
+        {...props}
+      >
+        <PopoverPrimitive.Trigger asChild>
+          <button
+            type="button"
+            data-slot="tree-select-trigger"
+            data-size={size}
+            data-loading={loading ? 'true' : undefined}
+            disabled={disabled}
+            className={cn(treeSelectTriggerVariants({ size }))}
+          >
+            <span
+              className={cn(
+                'truncate',
+                !displayText && 'text-muted-foreground',
+              )}
+            >
+              {displayText || placeholder}
+            </span>
+            {showClear ? (
+              <span
+                role="button"
+                aria-label="清除"
+                tabIndex={-1}
+                data-slot="tree-select-clear"
+                onPointerDown={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                }}
+                onClick={handleClear}
+                className="inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground"
+              >
+                <XIcon className="size-3.5" />
+              </span>
+            ) : loading ? (
+              <Spinner size="md" tone="muted" className="pointer-events-none" />
+            ) : (
+              <ChevronDownIcon
+                className={cn(
+                  'pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform',
+                  open && 'rotate-180',
+                )}
+              />
+            )}
+          </button>
+        </PopoverPrimitive.Trigger>
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content
+            data-slot="tree-select-content"
+            sideOffset={4}
+            align="start"
+            {...popoverProps}
+            className={cn(
+              'z-50 min-w-(--radix-popover-trigger-width) origin-(--radix-popover-content-transform-origin) rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+              popoverProps?.className,
+            )}
+          >
+            {showSearch && (
+              <div className="mb-1 border-b border-border pb-1">
+                <input
+                  type="text"
+                  data-slot="tree-select-search"
+                  value={search}
+                  onChange={(e) => handleSearchChange(e.target.value)}
+                  placeholder="搜索"
+                  className="w-full bg-transparent px-1.5 py-1 text-xs outline-none placeholder:text-muted-foreground"
+                />
+              </div>
+            )}
+            <div className="max-h-56 overflow-y-auto">
+              {treeForRender.length === 0 ? (
+                <div
+                  data-slot="tree-select-empty"
+                  className="py-4 text-center text-xs text-muted-foreground"
+                >
+                  {notFoundContent}
+                </div>
+              ) : (
+                <Tree
+                  data-slot="tree-select-tree"
+                  treeData={treeForRender}
+                  size="sm"
+                  blockNode
+                  defaultExpandAll={defaultExpandAll}
+                  defaultExpandedKeys={defaultExpandedKeys}
+                  // 单选：用 selectedKeys + onSelect（点击后关闭弹层）
+                  selectable={!multiple}
+                  selectedKeys={treeSelectedKeys}
+                  onSelect={(_, info) => {
+                    if (multiple) return;
+                    const node = info.node;
+                    if (!isControlled) setInternalValue([node.key]);
+                    const original = findNode(treeData, node.key, getValue);
+                    onChange?.(node.key, {
+                      selectedNodes: original ? [original] : [],
+                    });
+                    setOpen(false);
+                  }}
+                  // 多选：用 checkable + checkStrictly + checkedStrategy
+                  checkable={multiple}
+                  checkStrictly={checkStrictly}
+                  checkedStrategy={showCheckedStrategy}
+                  checkedKeys={treeCheckedKeys}
+                  onCheck={(outputKeys, info) => {
+                    if (!multiple) return;
+                    const fullKeys = info.checkedNodes.map((n) => n.key);
+                    if (!isControlled) setInternalValue(fullKeys);
+                    const originalNodes = info.checkedNodes
+                      .map((n) => findNode(treeData, n.key, getValue))
+                      .filter(Boolean) as TreeSelectNode[];
+                    onChange?.(outputKeys, { selectedNodes: originalNodes });
+                  }}
+                />
+              )}
+            </div>
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      </div>
+    </PopoverPrimitive.Root>
+  );
+}
+
+export { TreeSelect, treeSelectTriggerVariants };
+export type { TreeSelectProps, TreeSelectNode };