@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/select/select.tsx

@@ -1,735 +0,0 @@
-import * as React from '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';
-
-// ─── Types ──────────────────────────────────────────────────────────────────
-
-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;
-  /**
-   * 搜索框占位文本(searchable / creatable 时生效)。
-   * @default "搜索..."
-   */
-  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 };
-}
-
-// ─── 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,
-      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 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(
-          '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>
-  </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 };