@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/select/select.tsx

@@ -1,188 +1,735 @@
 import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { Check, ChevronDown, Plus, X } from 'lucide-react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { cn } from '@/utils/cn';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/command/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/popover/popover';
 
-const Select = SelectPrimitive.Root;
-const SelectGroup = SelectPrimitive.Group;
-const SelectValue = SelectPrimitive.Value;
+// ─── Types ──────────────────────────────────────────────────────────────────
 
-export interface SelectTriggerProps
-  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+export interface SelectOption {
+  /** 选项值(受控比对依据;不可空字符串)。 */
+  value: string;
+  /** 显示文本(支持 ReactNode)。 */
+  label: React.ReactNode;
+  /** 用于搜索匹配的额外关键字 — 不传则用 label 字符串化结果 + value。 */
+  keywords?: string[];
+  /** 禁用此选项(不可被选中)。 */
+  disabled?: boolean;
+}
+
+export interface SelectOptionGroup {
+  /** 分组标题。 */
+  label: React.ReactNode;
+  /** 该组下的选项数组。 */
+  options: SelectOption[];
+}
+
+export type SelectValue = string | string[];
+
+export interface SelectProps {
+  /**
+   * 扁平选项列表(与 `groups` 二选一)— 等价 antd `<Select options>` 数据驱动模式。
+   */
+  options?: SelectOption[];
+  /**
+   * 分组选项列表 — 等价 antd `<Select.OptGroup>`,数据驱动版本。
+   */
+  groups?: SelectOptionGroup[];
+  /**
+   * 多选模式(antd `mode="multiple"` 并集)。开启后 `value` / `defaultValue` 为
+   * `string[]`,选中项以 Tag 形式回显。
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 启用搜索(antd `showSearch` 并集) — 弹层顶部出现搜索输入框。
+   * @default false
+   */
+  searchable?: boolean;
+  /**
+   * 允许创建新项(antd `mode="tag"` 并集) — 输入未匹配现有选项时,顶部显示
+   * "Create &lt;query&gt;" 项,Enter 或点击即创建并选中。配合 `multiple` 是经典 Tag 模式。
+   * 创建时通过 `onCreate(value)` 通知消费方(由消费方决定是否把新项追加到 `options`)。
+   * @default false
+   */
+  creatable?: boolean;
+  /** 创建新项时的回调(creatable 模式) — 消费方据此追加 options。 */
+  onCreate?: (value: string) => void;
+  /**
+   * 异步搜索(antd `onSearch` 并集)— 输入变化时触发,消费方据 `query` 拉接口刷新 `options`。
+   * 触发后默认**关闭本地 filter**(因为远端已经过滤过);如需保留本地 filter,设
+   * `filter={true}` 显式启用。
+   */
+  onSearch?: (query: string) => void;
+  /**
+   * 是否启用本地 filter:`true`(默认) / `false` / 自定义函数。
+   * 配合 `onSearch` 时通常设 `false` — 服务端已过滤,本地不再筛。
+   * @default true
+   */
+  filter?: boolean | ((query: string, option: SelectOption) => boolean);
+  /** 受控 value — 单选 `string`、多选 `string[]`。 */
+  value?: SelectValue;
+  /** uncontrolled 初值。 */
+  defaultValue?: SelectValue;
+  /** value 变化回调。 */
+  onChange?: ((value: string) => void) | ((value: string[]) => void);
+  /**
+   * 多选模式下展示的最大 Tag 数,超出折叠为 `+N`(antd `maxTagCount` 并集)。
+   */
+  maxTagCount?: number;
+  /**
+   * 触发器占位文本。
+   * @default "请选择..."
+   */
+  placeholder?: string;
   /**
-   * 触发器尺寸。
-   * @default "default"
+   * 搜索框占位文本(searchable / creatable 时生效)。
+   * @default "搜索..."
    */
-  size?: 'sm' | 'default' | 'lg';
+  searchPlaceholder?: string;
+  /**
+   * 无匹配项时的提示文本。
+   * @default "无匹配项"
+   */
+  emptyText?: string;
+  /**
+   * 搜索后无匹配项的分组是否隐藏(antd `hideEmptyOptionGroup` 并集)。
+   * @default true
+   */
+  hideEmptyOptionGroup?: boolean;
+  /**
+   * 显示清除按钮(antd `allowClear` 并集) — 触发器有值时右侧 ✕,点击清空。
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * 触发器尺寸 — 与 Button / Input 同档:`sm`(24) / `md`(32) / `lg`(36)。
+   * @default "md"
+   */
+  size?: 'sm' | 'md' | 'default' | 'lg';
+  /**
+   * 错误态(自动设置 `aria-invalid="true"`,渲染 destructive 边框)。
+   * @default false
+   */
+  error?: boolean;
+  /** 禁用整个组件。 */
+  disabled?: boolean;
+  /** 触发器额外类名(可覆盖宽度 / 边距等)。 */
+  className?: string;
+  /** 弹层 className。 */
+  contentClassName?: string;
+  /**
+   * 弹层挂载容器(antd `popupContainer` 并集) — 透传给 Popover Portal。
+   * 默认挂在 `document.body`;在内层滚动容器 / Dialog 内时常需指定。
+   */
+  container?: HTMLElement | null;
+  /**
+   * 虚拟滚动(antd `virtual`) — 选项数 ≥ `threshold` 时启用 react-virtual,
+   * 大数据集下显著优化首次渲染。注意:启用后本地 filter 仍生效但分组渲染受限
+   * (groups + virtual 同时启用时按 flatten 渲染),业务侧大数据集建议直接走 options。
+   * @default false (传 `true` 等价 `{ threshold: 100, itemHeight: 36 }`)
+   */
+  virtual?: boolean | { threshold?: number; itemHeight?: number };
 }
 
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  SelectTriggerProps
->(({ className, children, size = 'default', ...props }, ref) => {
-  const h =
-    size === 'sm'
-      ? 'h-8 px-2 text-xs'
-      : size === 'lg'
-      ? 'h-10 px-4'
-      : 'h-9 px-3 text-sm';
-  return (
-    <SelectPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        'flex w-full items-center justify-between rounded-md border border-input bg-background py-2 shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-        h,
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDown className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-});
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className,
-    )}
-    {...props}
-  >
-    <ChevronUp className="size-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+const triggerSizeCls = {
+  sm: 'min-h-6 px-2 text-xs',
+  md: 'min-h-8 px-3 text-xs',
+  default: 'min-h-8 px-3 text-xs',
+  lg: 'min-h-9 px-3 text-sm',
+} as const;
+
+const tagSizeCls = {
+  sm: 'h-4 text-xs px-1.5',
+  md: 'h-5 text-xs px-1.5',
+  default: 'h-5 text-xs px-1.5',
+  lg: 'h-6 text-xs px-2',
+} as const;
+
+function flatten(
+  options: SelectOption[] | undefined,
+  groups: SelectOptionGroup[] | undefined,
+): SelectOption[] {
+  if (groups && groups.length > 0) return groups.flatMap((g) => g.options);
+  return options ?? [];
+}
+
+function toArray(v: SelectValue | undefined): string[] {
+  if (Array.isArray(v)) return v;
+  if (typeof v === 'string' && v) return [v];
+  return [];
+}
+
+function defaultFilter(query: string, option: SelectOption): boolean {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  const text = [
+    option.value,
+    typeof option.label === 'string' ? option.label : '',
+    ...(option.keywords ?? []),
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase();
+  return text.includes(q);
+}
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
+/**
+ * 下拉选择 — 单组件覆盖 cd `Select` 全部模式:单选 / 多选 / 搜索 / 标签创建 / 远程异步 /
+ * 虚拟滚动。基于 Popover + cmdk Command,触发器复用 Button outline 视觉;`size` 三档
+ * 与 Button / Input 同档(24 / 32 / 36)。
+ *
+ * 对齐 antd Select API 形态(并集),原 Combobox 已合并到本组件。
+ */
+const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
+  (
+    {
+      options,
+      groups,
+      multiple = false,
+      searchable = false,
+      creatable = false,
+      onCreate,
+      onSearch,
+      filter = true,
+      value,
+      defaultValue,
+      onChange,
+      maxTagCount,
+      placeholder = '请选择...',
+      searchPlaceholder = '搜索...',
+      emptyText = '无匹配项',
+      hideEmptyOptionGroup = true,
+      clearable = false,
+      size = 'md',
+      error = false,
+      disabled,
       className,
-    )}
-    {...props}
-  >
-    <ChevronDown className="size-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
-
-export interface SelectContentProps
-  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
-  /**
-   * 浮层定位策略。`popper` 跟随 trigger 并自动避让边界;`item-aligned` 把当前选中项与
-   * trigger 对齐(类似原生 `<select>`)。默认 `popper` 与 antd Select 行为一致。
-   * @default "popper"
-   */
-  position?: React.ComponentPropsWithoutRef<
-    typeof SelectPrimitive.Content
-  >['position'];
+      contentClassName,
+      container,
+      virtual = false,
+    },
+    ref,
+  ) => {
+    const isMultiple = multiple === true;
+    const isControlled = value !== undefined;
+
+    // creatable / async 时,搜索框总开启
+    const hasSearchInput = searchable || creatable || !!onSearch;
+
+    // creatable + onSearch 时,本地 filter 默认关(服务端已过滤)
+    const effectiveFilter =
+      filter === true && !onSearch ? true : filter === false ? false : filter;
+
+    const [internal, setInternal] = React.useState<string[]>(() =>
+      toArray(defaultValue),
+    );
+    const selectedValues = isControlled ? toArray(value) : internal;
+
+    const flat = React.useMemo(
+      () => flatten(options, groups),
+      [options, groups],
+    );
+    const byValue = React.useMemo(() => {
+      const m = new Map<string, SelectOption>();
+      for (const o of flat) m.set(o.value, o);
+      return m;
+    }, [flat]);
+
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState('');
+
+    const handleQueryChange = (q: string) => {
+      setQuery(q);
+      onSearch?.(q);
+    };
+
+    const emit = (next: string[]) => {
+      if (!isControlled) setInternal(next);
+      if (isMultiple) {
+        (onChange as ((v: string[]) => void) | undefined)?.(next);
+      } else {
+        (onChange as ((v: string) => void) | undefined)?.(next[0] ?? '');
+      }
+    };
+
+    const toggle = (val: string) => {
+      const has = selectedValues.includes(val);
+      if (isMultiple) {
+        emit(
+          has
+            ? selectedValues.filter((v) => v !== val)
+            : [...selectedValues, val],
+        );
+      } else {
+        emit(has ? [] : [val]);
+        setOpen(false);
+      }
+    };
+
+    const handleCreate = (rawValue: string) => {
+      const val = rawValue.trim();
+      if (!val) return;
+      onCreate?.(val);
+      // 创建后立即选中
+      if (isMultiple) {
+        if (!selectedValues.includes(val)) emit([...selectedValues, val]);
+      } else {
+        emit([val]);
+        setOpen(false);
+      }
+      setQuery('');
+    };
+
+    const removeOne = (val: string) => {
+      emit(selectedValues.filter((v) => v !== val));
+    };
+
+    const clearAll = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      emit([]);
+    };
+
+    const selectedOptions = selectedValues.map(
+      (v) => byValue.get(v) ?? { value: v, label: v },
+    );
+
+    const visibleTags =
+      typeof maxTagCount === 'number' && isMultiple
+        ? selectedOptions.slice(0, maxTagCount)
+        : selectedOptions;
+    const hiddenCount =
+      typeof maxTagCount === 'number' && isMultiple
+        ? Math.max(0, selectedOptions.length - maxTagCount)
+        : 0;
+
+    const showClear = clearable && !disabled && selectedValues.length > 0;
+
+    // 是否展示 "Create xxx" 选项 — query 非空且未匹配现有 option
+    const queryTrim = query.trim();
+    const matchesExisting = flat.some(
+      (o) =>
+        o.value === queryTrim ||
+        (o.label === queryTrim && typeof o.label === 'string'),
+    );
+    const showCreateItem =
+      creatable && queryTrim.length > 0 && !matchesExisting;
+
+    // ─── Virtual mode threshold ─────────────────────────────
+    const virtualOpts =
+      virtual === true
+        ? { threshold: 100, itemHeight: 36 }
+        : virtual === false
+        ? null
+        : { threshold: 100, itemHeight: 36, ...virtual };
+    const useVirtual = !!virtualOpts && flat.length >= virtualOpts.threshold;
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            role="combobox"
+            aria-expanded={open}
+            aria-invalid={error || undefined}
+            disabled={disabled}
+            className={cn(
+              'group flex w-panel-sm cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-background py-1 shadow-sm ring-offset-background transition-colors',
+              'focus:outline-none focus:ring-1 focus:ring-ring',
+              'disabled:cursor-not-allowed disabled:opacity-50',
+              triggerSizeCls[size],
+              error && 'border-destructive focus:ring-destructive',
+              className,
+            )}
+          >
+            <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1">
+              {selectedOptions.length === 0 ? (
+                <span className="truncate text-muted-foreground">
+                  {placeholder}
+                </span>
+              ) : isMultiple ? (
+                <>
+                  {visibleTags.map((opt) => (
+                    <span
+                      key={opt.value}
+                      className={cn(
+                        'inline-flex items-center gap-1 rounded-sm border border-border bg-muted text-foreground',
+                        tagSizeCls[size],
+                      )}
+                    >
+                      <span className="truncate" style={{ maxWidth: '10rem' }}>
+                        {opt.label}
+                      </span>
+                      <span
+                        role="button"
+                        aria-label={`移除 ${opt.value}`}
+                        tabIndex={-1}
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (!disabled) removeOne(opt.value);
+                        }}
+                        className="rounded-sm opacity-60 transition-opacity hover:opacity-100"
+                      >
+                        <X className="size-3" />
+                      </span>
+                    </span>
+                  ))}
+                  {hiddenCount > 0 ? (
+                    <span
+                      className={cn(
+                        'inline-flex items-center rounded-sm border border-border bg-muted text-muted-foreground',
+                        tagSizeCls[size],
+                      )}
+                    >
+                      +{hiddenCount}
+                    </span>
+                  ) : null}
+                </>
+              ) : (
+                <span className="truncate text-foreground">
+                  {selectedOptions[0]?.label}
+                </span>
+              )}
+            </span>
+            <span className="flex shrink-0 items-center gap-1">
+              {showClear ? (
+                <span
+                  role="button"
+                  aria-label="清除"
+                  tabIndex={-1}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={clearAll}
+                  className="rounded-sm text-muted-foreground opacity-60 transition-opacity hover:opacity-100 group-hover:opacity-80"
+                >
+                  <X className="size-4" />
+                </span>
+              ) : null}
+              <ChevronDown
+                className={cn(
+                  'size-4 shrink-0 text-muted-foreground transition-transform',
+                  open && 'rotate-180',
+                )}
+              />
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          container={container ?? undefined}
+          className={cn('w-panel-sm p-0', contentClassName)}
+          align="start"
+          onOpenAutoFocus={(e) => {
+            if (!hasSearchInput) e.preventDefault();
+          }}
+        >
+          {useVirtual ? (
+            <VirtualList
+              flat={flat}
+              query={query}
+              filter={effectiveFilter}
+              onQueryChange={handleQueryChange}
+              hasSearchInput={hasSearchInput}
+              searchPlaceholder={searchPlaceholder}
+              emptyText={emptyText}
+              selectedValues={selectedValues}
+              isMultiple={isMultiple}
+              onSelect={toggle}
+              showCreateItem={showCreateItem}
+              queryTrim={queryTrim}
+              onCreate={handleCreate}
+              itemHeight={virtualOpts?.itemHeight ?? 36}
+            />
+          ) : (
+            <Command
+              shouldFilter={effectiveFilter !== false && hideEmptyOptionGroup}
+              filter={(value, search, keywords) => {
+                if (effectiveFilter === false) return 1;
+                if (typeof effectiveFilter === 'function') {
+                  const opt = byValue.get(value);
+                  return opt && effectiveFilter(search, opt) ? 1 : 0;
+                }
+                const text = `${value} ${
+                  keywords?.join(' ') ?? ''
+                }`.toLowerCase();
+                return text.includes(search.toLowerCase()) ? 1 : 0;
+              }}
+            >
+              {hasSearchInput ? (
+                <CommandInput
+                  placeholder={searchPlaceholder}
+                  value={query}
+                  onValueChange={handleQueryChange}
+                />
+              ) : null}
+              <CommandList>
+                {showCreateItem ? (
+                  <CommandGroup>
+                    <CommandItem
+                      value={`__create__${queryTrim}`}
+                      onSelect={() => handleCreate(queryTrim)}
+                      className="text-primary"
+                    >
+                      <Plus className="mr-1 size-4" />
+                      <span className="truncate">
+                        创建 &ldquo;{queryTrim}&rdquo;
+                      </span>
+                    </CommandItem>
+                  </CommandGroup>
+                ) : null}
+                <CommandEmpty>{emptyText}</CommandEmpty>
+                {groups && groups.length > 0 ? (
+                  groups.map((g, gi) => (
+                    <React.Fragment key={gi}>
+                      {gi > 0 ? <CommandSeparator /> : null}
+                      <CommandGroup heading={g.label as React.ReactNode}>
+                        {g.options.map((opt) => (
+                          <SelectListItem
+                            key={opt.value}
+                            opt={opt}
+                            checked={selectedValues.includes(opt.value)}
+                            onSelect={toggle}
+                            multiple={isMultiple}
+                          />
+                        ))}
+                      </CommandGroup>
+                    </React.Fragment>
+                  ))
+                ) : (
+                  <CommandGroup>
+                    {(options ?? []).map((opt) => (
+                      <SelectListItem
+                        key={opt.value}
+                        opt={opt}
+                        checked={selectedValues.includes(opt.value)}
+                        onSelect={toggle}
+                        multiple={isMultiple}
+                      />
+                    ))}
+                  </CommandGroup>
+                )}
+              </CommandList>
+            </Command>
+          )}
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+Select.displayName = 'Select';
+
+// ─── Item (cmdk path) ───────────────────────────────────────────────────────
+
+interface ItemProps {
+  opt: SelectOption;
+  checked: boolean;
+  multiple: boolean;
+  onSelect: (value: string) => void;
 }
 
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  SelectContentProps
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
+const SelectListItem = ({ opt, checked, multiple, onSelect }: ItemProps) => (
+  <CommandItem
+    value={opt.value}
+    keywords={[
+      typeof opt.label === 'string' ? opt.label : '',
+      ...(opt.keywords ?? []),
+    ].filter(Boolean)}
+    disabled={opt.disabled}
+    onSelect={() => onSelect(opt.value)}
+    aria-selected={checked || undefined}
+    className={cn(checked && 'bg-accent/40')}
+  >
+    {multiple ? (
+      <span
         className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+          'flex size-4 items-center justify-center rounded-sm border border-input',
+          checked
+            ? 'border-primary bg-primary text-primary-foreground'
+            : 'bg-background',
         )}
+        aria-hidden="true"
       >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-xs font-semibold text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
+        {checked ? <Check className="size-3" /> : null}
+      </span>
+    ) : (
+      <Check
+        className={cn(
+          'mr-1 size-4',
+          checked ? 'opacity-100 text-primary' : 'opacity-0',
+        )}
+      />
     )}
-    {...props}
-  >
-    <span className="absolute right-2 flex size-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="size-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
+    <span className="flex-1 truncate">{opt.label}</span>
+  </CommandItem>
+);
+
+// ─── Virtual list path ──────────────────────────────────────────────────────
+
+interface VirtualListProps {
+  flat: SelectOption[];
+  query: string;
+  filter: SelectProps['filter'];
+  onQueryChange: (q: string) => void;
+  hasSearchInput: boolean;
+  searchPlaceholder: string;
+  emptyText: string;
+  selectedValues: string[];
+  isMultiple: boolean;
+  onSelect: (value: string) => void;
+  showCreateItem: boolean;
+  queryTrim: string;
+  onCreate: (value: string) => void;
+  itemHeight: number;
+}
+
+const VirtualList = ({
+  flat,
+  query,
+  filter,
+  onQueryChange,
+  hasSearchInput,
+  searchPlaceholder,
+  emptyText,
+  selectedValues,
+  isMultiple,
+  onSelect,
+  showCreateItem,
+  queryTrim,
+  onCreate,
+  itemHeight,
+}: VirtualListProps) => {
+  const filtered = React.useMemo(() => {
+    if (filter === false) return flat;
+    if (typeof filter === 'function')
+      return flat.filter((o) => filter(query, o));
+    return flat.filter((o) => defaultFilter(query, o));
+  }, [flat, query, filter]);
+
+  const parentRef = React.useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: filtered.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => itemHeight,
+    overscan: 8,
+  });
+
+  return (
+    <div className="flex flex-col">
+      {hasSearchInput ? (
+        <div
+          className="flex items-center border-b border-border px-3"
+          cmdk-input-wrapper=""
+        >
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => onQueryChange(e.target.value)}
+            placeholder={searchPlaceholder}
+            className="flex h-8 w-full bg-transparent py-2 text-xs outline-none placeholder:text-muted-foreground"
+          />
+        </div>
+      ) : null}
+      {showCreateItem ? (
+        <div
+          role="option"
+          tabIndex={0}
+          onClick={() => onCreate(queryTrim)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') onCreate(queryTrim);
+          }}
+          className="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-xs text-primary hover:bg-accent"
+        >
+          <Plus className="size-4" />
+          <span className="truncate">创建 &ldquo;{queryTrim}&rdquo;</span>
+        </div>
+      ) : null}
+      {filtered.length === 0 && !showCreateItem ? (
+        <div className="px-2 py-6 text-center text-xs text-muted-foreground">
+          {emptyText}
+        </div>
+      ) : (
+        <div ref={parentRef} className="max-h-72 overflow-auto">
+          <div
+            style={{
+              height: virtualizer.getTotalSize(),
+              position: 'relative',
+              width: '100%',
+            }}
+          >
+            {virtualizer.getVirtualItems().map((vRow) => {
+              const opt = filtered[vRow.index];
+              if (!opt) return null;
+              const checked = selectedValues.includes(opt.value);
+              return (
+                <div
+                  key={opt.value}
+                  role="option"
+                  aria-selected={checked || undefined}
+                  data-disabled={opt.disabled || undefined}
+                  onClick={() => !opt.disabled && onSelect(opt.value)}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: vRow.size,
+                    transform: `translateY(${vRow.start}px)`,
+                  }}
+                  className={cn(
+                    'flex cursor-pointer items-center gap-2 px-2 text-xs',
+                    'hover:bg-accent hover:text-accent-foreground',
+                    checked && 'bg-accent/40',
+                    opt.disabled && 'cursor-not-allowed opacity-50',
+                  )}
+                >
+                  {isMultiple ? (
+                    <span
+                      className={cn(
+                        'flex size-4 items-center justify-center rounded-sm border border-input',
+                        checked
+                          ? 'border-primary bg-primary text-primary-foreground'
+                          : 'bg-background',
+                      )}
+                      aria-hidden="true"
+                    >
+                      {checked ? <Check className="size-3" /> : null}
+                    </span>
+                  ) : (
+                    <Check
+                      className={cn(
+                        'mr-1 size-4',
+                        checked ? 'opacity-100 text-primary' : 'opacity-0',
+                      )}
+                    />
+                  )}
+                  <span className="flex-1 truncate">{opt.label}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
 };
+
+export { Select };