@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

package/src/components/agent-helper/form-select/index.tsx

@@ -1,732 +1,732 @@
-import {
-  forwardRef,
-  useState,
-  useRef,
-  useEffect,
-  useMemo,
-  useCallback,
-  useLayoutEffect,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '../../../lib/utils';
-import { transCls } from '../../../const/ui';
-import { SolidArrowDownIcon, SearchIcon } from '../../bs-icons';
-import { useSelectPopoverPosition } from '../../../hooks/use-select-popover-position';
-
-const FolderIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-    <path d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z" fill="#6F81BD"/>
-  </svg>
-);
-
-/** Close X icon (12x12) for chip dismiss in multiple mode */
-const CloseIcon = () => (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
-    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
-  </svg>
-);
-
-/** More dots icon (12x12) for overflow chip in multiple mode */
-const MoreIcon = () => (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
-    <circle cx="2" cy="6" r="1" fill="#999999" />
-    <circle cx="6" cy="6" r="1" fill="#999999" />
-    <circle cx="10" cy="6" r="1" fill="#999999" />
-  </svg>
-);
-
-// ── Types ─────────────────────────────────────────────────────────
-
-export interface FormSelectItem {
-  id: string;
-  name: string;
-  icon?: number;
-  type?: string;
-  parent?: string;
-  itemType?: 'form' | 'group';
-}
-
-export interface FormSelectChangeResult {
-  /** Set in single-select mode. */
-  form?: FormSelectItem;
-  /** Set in multiple mode — the full selection after the change. */
-  forms?: FormSelectItem[];
-}
-
-export interface FormSelectProps {
-  items: FormSelectItem[];
-  /** Enable multi-select mode. Default false (single-select). */
-  multiple?: boolean;
-  /** Controlled value — form id in single mode, form id array in multiple mode. */
-  value?: string | string[];
-  /** Uncontrolled default value — same shape as `value`. */
-  defaultValue?: string | string[];
-  onChange?: (result: FormSelectChangeResult) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-  /** Allow selecting an empty value as the first option. Only effective in single mode. */
-  allowEmpty?: boolean;
-  /** Label for the empty option. Default "无". */
-  emptyLabel?: string;
-  /** Max visible chips in the trigger in multiple mode (default 4). */
-  maxVisibleChips?: number;
-  popoverOnly?: boolean;
-}
-
-// ── Tree types ────────────────────────────────────────────────────
-
-interface FormTreeItem {
-  id: string;
-  name: string;
-  icon: number;
-  type: string;
-  itemType: 'form' | 'group';
-  children: FormTreeItem[];
-  depth: number;
-  form: FormSelectItem | null;
-}
-
-// ── Depth padding ─────────────────────────────────────────────────
-
-const DEPTH_PADDING: Record<number, string> = {
-  0: 'pl-[10px]',
-  1: 'pl-[32px]',
-  2: 'pl-[54px]',
-  3: 'pl-[76px]',
-};
-
-function getDepthPadding(depth: number): string {
-  return DEPTH_PADDING[Math.min(depth, 3)] ?? DEPTH_PADDING[3];
-}
-
-// ── Tree builder ──────────────────────────────────────────────────
-
-function buildFormTree(items: FormSelectItem[], searchQuery: string): FormTreeItem[] {
-  const lowerQuery = searchQuery.toLowerCase().trim();
-
-  // Build parent → children map
-  const childrenByParent = new Map<string, FormSelectItem[]>();
-  for (const item of items) {
-    const parentKey = item.parent || '0';
-    if (!childrenByParent.has(parentKey)) {
-      childrenByParent.set(parentKey, []);
-    }
-    childrenByParent.get(parentKey)!.push(item);
-  }
-
-  // Root parents: any parent key that is '0' or not in items
-  const allItemIds = new Set(items.map((i) => i.id));
-  const allParentKeys = new Set(childrenByParent.keys());
-  const rootParents = Array.from(allParentKeys).filter(
-    (p) => p === '0' || !allItemIds.has(p),
-  );
-
-  function buildRecursive(parentId: string, depth: number): FormTreeItem[] {
-    const childItems = childrenByParent.get(parentId) || [];
-    const nodes: FormTreeItem[] = [];
-
-    for (const item of childItems) {
-      const isGroup = item.itemType === 'group';
-      const children = buildRecursive(item.id, depth + 1);
-      const nameMatch = !lowerQuery || item?.name?.toLowerCase().includes(lowerQuery);
-
-      if (isGroup) {
-        if (nameMatch || children.length > 0) {
-          nodes.push({
-            id: item.id,
-            name: item.name,
-            icon: item.icon ?? 0,
-            type: item.type ?? 'group',
-            itemType: 'group',
-            children,
-            depth,
-            form: item,
-          });
-        }
-      } else {
-        if (nameMatch) {
-          nodes.push({
-            id: item.id,
-            name: item.name,
-            icon: item.icon ?? 0,
-            type: item.type ?? 'form',
-            itemType: 'form',
-            children: [],
-            depth,
-            form: item,
-          });
-        }
-      }
-    }
-
-    return nodes;
-  }
-
-  const result: FormTreeItem[] = [];
-  for (const rootId of rootParents) {
-    result.push(...buildRecursive(rootId, 0));
-  }
-  return result;
-}
-
-// ── Form Icon ─────────────────────────────────────────────────────
-
-function getFormIconClass(icon: number): string {
-  const isNew = icon >= 25;
-  const newStr = isNew ? '-new' : '';
-  return `node-icon icon-bsy-form${newStr} icon${newStr}-bsy-form-${icon}`;
-}
-
-// ── Entry Item ────────────────────────────────────────────────────
-
-function FormEntryItem({
-  item,
-  depth,
-  isSelected,
-  onClick,
-}: {
-  item: FormTreeItem;
-  depth: number;
-  isSelected: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <div
-      className={cn(
-        'flex items-center justify-between h-[34px] px-[10px] cursor-pointer rounded-[4px] shrink-0',
-        getDepthPadding(depth),
-        isSelected ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
-        transCls,
-      )}
-      onClick={onClick}
-    >
-      <span className="flex items-center gap-[6px] min-w-0 flex-1">
-        <i
-          className={getFormIconClass(item.icon)}
-          style={{ fontSize: 16, lineHeight: 1 }}
-        />
-        <span className="text-[14px] leading-[normal] truncate">
-          {item.name}
-        </span>
-      </span>
-    </div>
-  );
-}
-
-// ── Tree Item Node ────────────────────────────────────────────────
-
-function FormTreeItemNode({
-  item,
-  selectedIds,
-  onSelect,
-}: {
-  item: FormTreeItem;
-  selectedIds: Set<string>;
-  onSelect: (item: FormSelectItem) => void;
-}) {
-  const [expanded, setExpanded] = useState(true);
-
-  if (item.itemType === 'group') {
-    return (
-      <div>
-        <div
-          className={cn(
-            'flex items-center gap-[6px] h-[34px] px-[10px] cursor-pointer rounded-[4px]',
-            getDepthPadding(item.depth),
-            'hover:bg-[#EFF0F6]',
-            transCls,
-          )}
-          onClick={() => setExpanded(!expanded)}
-        >
-          <span
-            className={cn(
-              'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
-              transCls,
-              expanded && 'rotate-90',
-            )}
-          >
-            <SolidArrowDownIcon className="-rotate-90" size={16} />
-          </span>
-          <FolderIcon />
-          <span className="text-[14px] text-[#030303] truncate">
-            {item.name}
-          </span>
-        </div>
-        {expanded &&
-          item.children.map((child) => (
-            <FormTreeItemNode
-              key={child.id}
-              item={child}
-              selectedIds={selectedIds}
-              onSelect={onSelect}
-            />
-          ))}
-      </div>
-    );
-  }
-
-  return (
-    <FormEntryItem
-      item={item}
-      depth={item.depth}
-      isSelected={selectedIds.has(item.id)}
-      onClick={() => {
-        if (item.form) {
-          onSelect(item.form);
-        }
-      }}
-    />
-  );
-}
-
-// ── Popover ───────────────────────────────────────────────────────
-
-function FormPopover({
-  searchQuery,
-  onSearchChange,
-  tree,
-  selectedIds,
-  onSelect,
-  hasSearch,
-  allowEmpty,
-  emptyLabel,
-  onEmptySelect,
-}: {
-  searchQuery: string;
-  onSearchChange: (v: string) => void;
-  tree: FormTreeItem[];
-  selectedIds: Set<string>;
-  onSelect: (item: FormSelectItem) => void;
-  hasSearch: boolean;
-  allowEmpty: boolean;
-  emptyLabel: string;
-  onEmptySelect: () => void;
-}) {
-  return (
-    <div
-      className={cn(
-        'bg-white rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]',
-        'flex flex-col gap-[4px]',
-      )}
-    >
-      {/* Search input */}
-      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
-        <SearchIcon />
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={(e) => onSearchChange(e.target.value)}
-          placeholder="输入表单名称来搜索"
-          className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
-        />
-      </div>
-
-      {/* Empty option */}
-      {allowEmpty && !hasSearch && (
-        <div
-          className={cn(
-            'flex items-center h-[34px] px-[10px] cursor-pointer rounded-[4px] shrink-0',
-            selectedIds.size === 0 ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
-            transCls,
-          )}
-          onClick={onEmptySelect}
-        >
-          <span className="text-[14px] leading-[normal] truncate">{emptyLabel}</span>
-        </div>
-      )}
-
-      {/* Form list */}
-      <div className="flex flex-col gap-0 max-h-[400px] overflow-y-auto">
-        {tree.length > 0 ? (
-          tree.map((node) => (
-            <FormTreeItemNode
-              key={node.id}
-              item={node}
-              selectedIds={selectedIds}
-              onSelect={onSelect}
-            />
-          ))
-        ) : hasSearch ? (
-          <div className="text-[12px] text-[#999999] py-[8px] text-center">
-            无匹配结果
-          </div>
-        ) : (
-          <div className="text-[12px] text-[#999999] py-[8px] text-center">
-            暂无表单
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ── Main Component ────────────────────────────────────────────────
-
-export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
-  (
-    {
-      items,
-      multiple = false,
-      value: controlledValue,
-      defaultValue,
-      onChange,
-      placeholder = '请选择表单',
-      disabled = false,
-      className,
-      allowEmpty = false,
-      emptyLabel = '无',
-      maxVisibleChips = 4,
-      popoverOnly,
-    },
-    ref,
-  ) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [searchQuery, setSearchQuery] = useState('');
-    const [internalValue, setInternalValue] = useState<
-      string | string[] | undefined
-    >(defaultValue);
-    const triggerRef = useRef<HTMLDivElement>(null);
-    const popoverRef = useRef<HTMLDivElement>(null);
-    const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
-
-    const { popoverStyle, updatePopoverPosition } =
-      useSelectPopoverPosition(triggerRef);
-
-    const resolvedValue = controlledValue ?? internalValue;
-
-    const selectedIds = useMemo(() => {
-      if (Array.isArray(resolvedValue)) {
-        return new Set(resolvedValue);
-      }
-      return new Set(resolvedValue ? [resolvedValue] : []);
-    }, [resolvedValue]);
-
-    const selectedFormId = Array.isArray(resolvedValue)
-      ? undefined
-      : resolvedValue;
-
-    // Build the form tree
-    const tree = useMemo(() => {
-      return buildFormTree(items, searchQuery);
-    }, [items, searchQuery]);
-
-    // Find selected form (single mode trigger display)
-    const selectedForm = useMemo(() => {
-      if (!selectedFormId) return null;
-      return items.find((item) => item.id === selectedFormId && item.itemType !== 'group') ?? null;
-    }, [items, selectedFormId]);
-
-    // Selected forms (multiple mode chips)
-    const selectedForms = useMemo(() => {
-      if (!multiple) return [];
-      return items.filter(
-        (item) => selectedIds.has(item.id) && item.itemType !== 'group',
-      );
-    }, [multiple, items, selectedIds]);
-
-    const visibleChips = selectedForms.slice(0, maxVisibleChips);
-    const overflowCount = selectedForms.length - visibleChips.length;
-
-    const hasSearch = searchQuery.trim().length > 0;
-
-    const setTriggerRef = useCallback((node: HTMLDivElement | null) => {
-      (triggerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
-      if (!node) {
-        setPortalContainer(null);
-        return;
-      }
-      const rootNode = node.getRootNode();
-      if (rootNode instanceof ShadowRoot) {
-        const existing = rootNode.querySelector<HTMLElement>(
-          '[data-bs-form-select-portal]',
-        );
-        if (existing) {
-          setPortalContainer(existing);
-          return;
-        }
-        // Append portal inside the React root container so React event
-        // delegation sees events from portal content. The React root is
-        // the element that ReactDOM.createRoot() was called on.
-        const reactRoot = rootNode.getElementById('ai-office-container') || rootNode;
-        const container = document.createElement('div');
-        container.setAttribute('data-bs-form-select-portal', 'true');
-        reactRoot.appendChild(container);
-        setPortalContainer(container);
-        return;
-      }
-      setPortalContainer(null);
-    }, []);
-
-    // ── Handlers ──────────────────────────────────────────────────
-
-    const handleClose = useCallback(() => {
-      setIsOpen(false);
-      setSearchQuery('');
-    }, []);
-
-    const handleToggle = useCallback(() => {
-      if (disabled) return;
-      if (isOpen) {
-        handleClose();
-      } else {
-        setIsOpen(true);
-        updatePopoverPosition();
-      }
-    }, [disabled, isOpen, handleClose, updatePopoverPosition]);
-
-    // Single mode: pick one and close. Multiple mode: toggle and stay open.
-    const handleSelect = useCallback(
-      (form: FormSelectItem) => {
-        if (!multiple) {
-          setInternalValue(form.id);
-          onChange?.({ form });
-          handleClose();
-          return;
-        }
-        const nextIds = selectedIds.has(form.id)
-          ? [...selectedIds].filter((id) => id !== form.id)
-          : [...selectedIds, form.id];
-        setInternalValue(nextIds);
-        onChange?.({
-          forms: items.filter(
-            (item) => nextIds.includes(item.id) && item.itemType !== 'group',
-          ),
-        });
-      },
-      [multiple, selectedIds, items, onChange, handleClose],
-    );
-
-    const handleRemoveChip = useCallback(
-      (formId: string, e: React.MouseEvent) => {
-        e.stopPropagation();
-        if (disabled) return;
-        const nextIds = [...selectedIds].filter((id) => id !== formId);
-        setInternalValue(nextIds);
-        onChange?.({
-          forms: items.filter(
-            (item) => nextIds.includes(item.id) && item.itemType !== 'group',
-          ),
-        });
-      },
-      [disabled, selectedIds, items, onChange],
-    );
-
-    const handleEmptySelect = useCallback(() => {
-      setInternalValue('');
-      onChange?.({});
-      handleClose();
-    }, [onChange, handleClose]);
-
-    // ── Event listeners ───────────────────────────────────────────
-
-    // Click-outside: close popover when clicking outside both the trigger and popover.
-    // Uses native mousedown on the trigger's root node (ShadowRoot or document) so it
-    // works regardless of stacking contexts. Mousedown events on the popover itself are
-    // stopped from propagating, so this listener only sees external clicks.
-    useEffect(() => {
-      if (!isOpen) return;
-
-      const rootNode = triggerRef.current?.getRootNode() as Document | ShadowRoot | undefined;
-      const eventTarget = rootNode ?? document;
-
-      const handleClickOutside = (e: Event) => {
-        const target = e.target as HTMLElement;
-        if (
-          (popoverRef.current && popoverRef.current.contains(target)) ||
-          (triggerRef.current && triggerRef.current.contains(target))
-        ) {
-          return;
-        }
-        handleClose();
-      };
-
-      eventTarget.addEventListener('mousedown', handleClickOutside);
-
-      return () => {
-        eventTarget.removeEventListener('mousedown', handleClickOutside);
-      };
-    }, [isOpen, handleClose]);
-
-    // Keep popover positioned correctly when the viewport resizes
-    useEffect(() => {
-      if (!isOpen) return;
-
-      const handleResize = () => {
-        updatePopoverPosition();
-      };
-
-      window.addEventListener('resize', handleResize);
-      return () => window.removeEventListener('resize', handleResize);
-    }, [isOpen, updatePopoverPosition]);
-
-    // Poll popover position every frame to track scroll (scroll events aren't
-    // composed, so they don't cross shadow boundaries)
-    useLayoutEffect(() => {
-      if (!isOpen) return;
-
-      let rafId: number;
-      const poll = () => {
-        updatePopoverPosition();
-        rafId = requestAnimationFrame(poll);
-      };
-      rafId = requestAnimationFrame(poll);
-
-      return () => cancelAnimationFrame(rafId);
-    }, [isOpen, updatePopoverPosition]);
-
-    // Keyboard: close on Escape
-    useEffect(() => {
-      if (!isOpen) return;
-
-      const handleEscape = (e: Event) => {
-        if ((e as KeyboardEvent).key === 'Escape') {
-          handleClose();
-        }
-      };
-
-      const rootNode = triggerRef.current?.getRootNode() as Document | ShadowRoot | undefined;
-      const eventTarget = rootNode ?? document;
-      eventTarget.addEventListener('keydown', handleEscape);
-      return () => eventTarget.removeEventListener('keydown', handleEscape);
-    }, [isOpen, handleClose]);
-
-    // Prevent native events inside the popover from bubbling to document-
-    // level listeners (e.g. Radix DismissableLayer, react-remove-scroll).
-    // Without this, a parent Drawer would: (a) close on click, (b) capture
-    // wheel events making the popover list unscrollable.
-    useEffect(() => {
-      if (!isOpen) return;
-      const el = popoverRef.current;
-      if (!el) return;
-
-      const blockEvents = (e: Event) => e.stopPropagation();
-      el.addEventListener('mousedown', blockEvents);
-      el.addEventListener('pointerdown', blockEvents);
-      el.addEventListener('wheel', blockEvents);
-      return () => {
-        el.removeEventListener('mousedown', blockEvents);
-        el.removeEventListener('pointerdown', blockEvents);
-        el.removeEventListener('wheel', blockEvents);
-      };
-    }, [isOpen]);
-
-    // ── Render ────────────────────────────────────────────────────
-
-    const hasMultiSelection = multiple && selectedForms.length > 0;
-
-    if (popoverOnly) {
-      return (
-        <FormPopover
-          searchQuery={searchQuery}
-          onSearchChange={setSearchQuery}
-          tree={tree}
-          selectedIds={selectedIds}
-          onSelect={handleSelect}
-          hasSearch={hasSearch}
-          allowEmpty={allowEmpty && !multiple}
-          emptyLabel={emptyLabel}
-          onEmptySelect={handleEmptySelect}
-        />
-      );
-    }
-
-    return (
-      <div ref={ref} className={cn('relative inline-flex min-w-0 w-full', className)}>
-        {/* Trigger */}
-        <div
-          ref={setTriggerRef}
-          className={cn(
-            'flex items-center gap-[10px] px-[10px] py-[7px] rounded-[4px] cursor-pointer select-none w-full',
-            'bg-white border',
-            isOpen
-              ? 'border-[#0265FF]'
-              : 'border-[#E0E0E0] hover:border-[#0265FF]',
-            transCls,
-            disabled && 'opacity-50 cursor-not-allowed',
-          )}
-          onClick={handleToggle}
-        >
-          {hasMultiSelection ? (
-            <span className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
-              {visibleChips.map((form) => (
-                <span
-                  key={form.id}
-                  className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0 max-w-[160px]"
-                  onClick={(e) => handleRemoveChip(form.id, e)}
-                >
-                  <i
-                    className={getFormIconClass(form.icon ?? 0)}
-                    style={{ fontSize: 14, lineHeight: 1 }}
-                  />
-                  <span className="text-[14px] text-[#030303] truncate leading-[normal]">
-                    {form.name}
-                  </span>
-                  <span className="cursor-pointer flex items-center shrink-0 hover:bg-[#EFF0F6]">
-                    <CloseIcon />
-                  </span>
-                </span>
-              ))}
-              {overflowCount > 0 && (
-                <span className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0">
-                  <span className="text-[14px] text-[#030303] leading-[normal]">
-                    +{overflowCount}
-                  </span>
-                  <MoreIcon />
-                </span>
-              )}
-            </span>
-          ) : (
-            <span className="flex items-center gap-[6px] min-w-0 flex-1">
-              {selectedForm ? (
-                <>
-                  <i
-                    className={getFormIconClass(selectedForm.icon ?? 0)}
-                    style={{ fontSize: 16, lineHeight: 1 }}
-                  />
-                  <span className="text-[14px] text-[#030303] leading-[normal] truncate">
-                    {selectedForm.name}
-                  </span>
-                </>
-              ) : (
-                <span className="text-[14px] text-[#999999] leading-[normal] truncate">
-                  {allowEmpty && !multiple ? emptyLabel : placeholder}
-                </span>
-              )}
-            </span>
-          )}
-          <span
-            className={cn(
-              'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
-              transCls,
-              isOpen && 'rotate-180',
-            )}
-          >
-            <SolidArrowDownIcon size={16} />
-          </span>
-        </div>
-
-        {/* Popover */}
-        {isOpen &&
-          createPortal(
-            <div ref={popoverRef} style={popoverStyle}>
-              <FormPopover
-                searchQuery={searchQuery}
-                onSearchChange={setSearchQuery}
-                tree={tree}
-                selectedIds={selectedIds}
-                onSelect={handleSelect}
-                hasSearch={hasSearch}
-                allowEmpty={allowEmpty && !multiple}
-                emptyLabel={emptyLabel}
-                onEmptySelect={handleEmptySelect}
-              />
-            </div>,
-            portalContainer || document.body,
-          )}
-      </div>
-    );
-  },
-);
-
-FormSelect.displayName = 'FormSelect';
+import {
+  forwardRef,
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+  useLayoutEffect,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { SolidArrowDownIcon, SearchIcon } from '../../bs-icons';
+import { useSelectPopoverPosition } from '../../../hooks/use-select-popover-position';
+
+const FolderIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z" fill="#6F81BD"/>
+  </svg>
+);
+
+/** Close X icon (12x12) for chip dismiss in multiple mode */
+const CloseIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
+    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
+  </svg>
+);
+
+/** More dots icon (12x12) for overflow chip in multiple mode */
+const MoreIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
+    <circle cx="2" cy="6" r="1" fill="#999999" />
+    <circle cx="6" cy="6" r="1" fill="#999999" />
+    <circle cx="10" cy="6" r="1" fill="#999999" />
+  </svg>
+);
+
+// ── Types ─────────────────────────────────────────────────────────
+
+export interface FormSelectItem {
+  id: string;
+  name: string;
+  icon?: number;
+  type?: string;
+  parent?: string;
+  itemType?: 'form' | 'group';
+}
+
+export interface FormSelectChangeResult {
+  /** Set in single-select mode. */
+  form?: FormSelectItem;
+  /** Set in multiple mode — the full selection after the change. */
+  forms?: FormSelectItem[];
+}
+
+export interface FormSelectProps {
+  items: FormSelectItem[];
+  /** Enable multi-select mode. Default false (single-select). */
+  multiple?: boolean;
+  /** Controlled value — form id in single mode, form id array in multiple mode. */
+  value?: string | string[];
+  /** Uncontrolled default value — same shape as `value`. */
+  defaultValue?: string | string[];
+  onChange?: (result: FormSelectChangeResult) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  /** Allow selecting an empty value as the first option. Only effective in single mode. */
+  allowEmpty?: boolean;
+  /** Label for the empty option. Default "无". */
+  emptyLabel?: string;
+  /** Max visible chips in the trigger in multiple mode (default 4). */
+  maxVisibleChips?: number;
+  popoverOnly?: boolean;
+}
+
+// ── Tree types ────────────────────────────────────────────────────
+
+interface FormTreeItem {
+  id: string;
+  name: string;
+  icon: number;
+  type: string;
+  itemType: 'form' | 'group';
+  children: FormTreeItem[];
+  depth: number;
+  form: FormSelectItem | null;
+}
+
+// ── Depth padding ─────────────────────────────────────────────────
+
+const DEPTH_PADDING: Record<number, string> = {
+  0: 'pl-[10px]',
+  1: 'pl-[32px]',
+  2: 'pl-[54px]',
+  3: 'pl-[76px]',
+};
+
+function getDepthPadding(depth: number): string {
+  return DEPTH_PADDING[Math.min(depth, 3)] ?? DEPTH_PADDING[3];
+}
+
+// ── Tree builder ──────────────────────────────────────────────────
+
+function buildFormTree(items: FormSelectItem[], searchQuery: string): FormTreeItem[] {
+  const lowerQuery = searchQuery.toLowerCase().trim();
+
+  // Build parent → children map
+  const childrenByParent = new Map<string, FormSelectItem[]>();
+  for (const item of items) {
+    const parentKey = item.parent || '0';
+    if (!childrenByParent.has(parentKey)) {
+      childrenByParent.set(parentKey, []);
+    }
+    childrenByParent.get(parentKey)!.push(item);
+  }
+
+  // Root parents: any parent key that is '0' or not in items
+  const allItemIds = new Set(items.map((i) => i.id));
+  const allParentKeys = new Set(childrenByParent.keys());
+  const rootParents = Array.from(allParentKeys).filter(
+    (p) => p === '0' || !allItemIds.has(p),
+  );
+
+  function buildRecursive(parentId: string, depth: number): FormTreeItem[] {
+    const childItems = childrenByParent.get(parentId) || [];
+    const nodes: FormTreeItem[] = [];
+
+    for (const item of childItems) {
+      const isGroup = item.itemType === 'group';
+      const children = buildRecursive(item.id, depth + 1);
+      const nameMatch = !lowerQuery || item?.name?.toLowerCase().includes(lowerQuery);
+
+      if (isGroup) {
+        if (nameMatch || children.length > 0) {
+          nodes.push({
+            id: item.id,
+            name: item.name,
+            icon: item.icon ?? 0,
+            type: item.type ?? 'group',
+            itemType: 'group',
+            children,
+            depth,
+            form: item,
+          });
+        }
+      } else {
+        if (nameMatch) {
+          nodes.push({
+            id: item.id,
+            name: item.name,
+            icon: item.icon ?? 0,
+            type: item.type ?? 'form',
+            itemType: 'form',
+            children: [],
+            depth,
+            form: item,
+          });
+        }
+      }
+    }
+
+    return nodes;
+  }
+
+  const result: FormTreeItem[] = [];
+  for (const rootId of rootParents) {
+    result.push(...buildRecursive(rootId, 0));
+  }
+  return result;
+}
+
+// ── Form Icon ─────────────────────────────────────────────────────
+
+function getFormIconClass(icon: number): string {
+  const isNew = icon >= 25;
+  const newStr = isNew ? '-new' : '';
+  return `node-icon icon-bsy-form${newStr} icon${newStr}-bsy-form-${icon}`;
+}
+
+// ── Entry Item ────────────────────────────────────────────────────
+
+function FormEntryItem({
+  item,
+  depth,
+  isSelected,
+  onClick,
+}: {
+  item: FormTreeItem;
+  depth: number;
+  isSelected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between h-[34px] px-[10px] cursor-pointer rounded-[4px] shrink-0',
+        getDepthPadding(depth),
+        isSelected ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
+        transCls,
+      )}
+      onClick={onClick}
+    >
+      <span className="flex items-center gap-[6px] min-w-0 flex-1">
+        <i
+          className={getFormIconClass(item.icon)}
+          style={{ fontSize: 16, lineHeight: 1 }}
+        />
+        <span className="text-[14px] leading-[normal] truncate">
+          {item.name}
+        </span>
+      </span>
+    </div>
+  );
+}
+
+// ── Tree Item Node ────────────────────────────────────────────────
+
+function FormTreeItemNode({
+  item,
+  selectedIds,
+  onSelect,
+}: {
+  item: FormTreeItem;
+  selectedIds: Set<string>;
+  onSelect: (item: FormSelectItem) => void;
+}) {
+  const [expanded, setExpanded] = useState(true);
+
+  if (item.itemType === 'group') {
+    return (
+      <div>
+        <div
+          className={cn(
+            'flex items-center gap-[6px] h-[34px] px-[10px] cursor-pointer rounded-[4px]',
+            getDepthPadding(item.depth),
+            'hover:bg-[#EFF0F6]',
+            transCls,
+          )}
+          onClick={() => setExpanded(!expanded)}
+        >
+          <span
+            className={cn(
+              'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
+              transCls,
+              expanded && 'rotate-90',
+            )}
+          >
+            <SolidArrowDownIcon className="-rotate-90" size={16} />
+          </span>
+          <FolderIcon />
+          <span className="text-[14px] text-[#030303] truncate">
+            {item.name}
+          </span>
+        </div>
+        {expanded &&
+          item.children.map((child) => (
+            <FormTreeItemNode
+              key={child.id}
+              item={child}
+              selectedIds={selectedIds}
+              onSelect={onSelect}
+            />
+          ))}
+      </div>
+    );
+  }
+
+  return (
+    <FormEntryItem
+      item={item}
+      depth={item.depth}
+      isSelected={selectedIds.has(item.id)}
+      onClick={() => {
+        if (item.form) {
+          onSelect(item.form);
+        }
+      }}
+    />
+  );
+}
+
+// ── Popover ───────────────────────────────────────────────────────
+
+function FormPopover({
+  searchQuery,
+  onSearchChange,
+  tree,
+  selectedIds,
+  onSelect,
+  hasSearch,
+  allowEmpty,
+  emptyLabel,
+  onEmptySelect,
+}: {
+  searchQuery: string;
+  onSearchChange: (v: string) => void;
+  tree: FormTreeItem[];
+  selectedIds: Set<string>;
+  onSelect: (item: FormSelectItem) => void;
+  hasSearch: boolean;
+  allowEmpty: boolean;
+  emptyLabel: string;
+  onEmptySelect: () => void;
+}) {
+  return (
+    <div
+      className={cn(
+        'bg-white rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]',
+        'flex flex-col gap-[4px]',
+      )}
+    >
+      {/* Search input */}
+      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+        <SearchIcon />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="输入表单名称来搜索"
+          className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
+        />
+      </div>
+
+      {/* Empty option */}
+      {allowEmpty && !hasSearch && (
+        <div
+          className={cn(
+            'flex items-center h-[34px] px-[10px] cursor-pointer rounded-[4px] shrink-0',
+            selectedIds.size === 0 ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
+            transCls,
+          )}
+          onClick={onEmptySelect}
+        >
+          <span className="text-[14px] leading-[normal] truncate">{emptyLabel}</span>
+        </div>
+      )}
+
+      {/* Form list */}
+      <div className="flex flex-col gap-0 max-h-[400px] overflow-y-auto">
+        {tree.length > 0 ? (
+          tree.map((node) => (
+            <FormTreeItemNode
+              key={node.id}
+              item={node}
+              selectedIds={selectedIds}
+              onSelect={onSelect}
+            />
+          ))
+        ) : hasSearch ? (
+          <div className="text-[12px] text-[#999999] py-[8px] text-center">
+            无匹配结果
+          </div>
+        ) : (
+          <div className="text-[12px] text-[#999999] py-[8px] text-center">
+            暂无表单
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Main Component ────────────────────────────────────────────────
+
+export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
+  (
+    {
+      items,
+      multiple = false,
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      placeholder = '请选择表单',
+      disabled = false,
+      className,
+      allowEmpty = false,
+      emptyLabel = '无',
+      maxVisibleChips = 4,
+      popoverOnly,
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [internalValue, setInternalValue] = useState<
+      string | string[] | undefined
+    >(defaultValue);
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const popoverRef = useRef<HTMLDivElement>(null);
+    const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+    const { popoverStyle, updatePopoverPosition } =
+      useSelectPopoverPosition(triggerRef);
+
+    const resolvedValue = controlledValue ?? internalValue;
+
+    const selectedIds = useMemo(() => {
+      if (Array.isArray(resolvedValue)) {
+        return new Set(resolvedValue);
+      }
+      return new Set(resolvedValue ? [resolvedValue] : []);
+    }, [resolvedValue]);
+
+    const selectedFormId = Array.isArray(resolvedValue)
+      ? undefined
+      : resolvedValue;
+
+    // Build the form tree
+    const tree = useMemo(() => {
+      return buildFormTree(items, searchQuery);
+    }, [items, searchQuery]);
+
+    // Find selected form (single mode trigger display)
+    const selectedForm = useMemo(() => {
+      if (!selectedFormId) return null;
+      return items.find((item) => item.id === selectedFormId && item.itemType !== 'group') ?? null;
+    }, [items, selectedFormId]);
+
+    // Selected forms (multiple mode chips)
+    const selectedForms = useMemo(() => {
+      if (!multiple) return [];
+      return items.filter(
+        (item) => selectedIds.has(item.id) && item.itemType !== 'group',
+      );
+    }, [multiple, items, selectedIds]);
+
+    const visibleChips = selectedForms.slice(0, maxVisibleChips);
+    const overflowCount = selectedForms.length - visibleChips.length;
+
+    const hasSearch = searchQuery.trim().length > 0;
+
+    const setTriggerRef = useCallback((node: HTMLDivElement | null) => {
+      (triggerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      if (!node) {
+        setPortalContainer(null);
+        return;
+      }
+      const rootNode = node.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        const existing = rootNode.querySelector<HTMLElement>(
+          '[data-bs-form-select-portal]',
+        );
+        if (existing) {
+          setPortalContainer(existing);
+          return;
+        }
+        // Append portal inside the React root container so React event
+        // delegation sees events from portal content. The React root is
+        // the element that ReactDOM.createRoot() was called on.
+        const reactRoot = rootNode.getElementById('ai-office-container') || rootNode;
+        const container = document.createElement('div');
+        container.setAttribute('data-bs-form-select-portal', 'true');
+        reactRoot.appendChild(container);
+        setPortalContainer(container);
+        return;
+      }
+      setPortalContainer(null);
+    }, []);
+
+    // ── Handlers ──────────────────────────────────────────────────
+
+    const handleClose = useCallback(() => {
+      setIsOpen(false);
+      setSearchQuery('');
+    }, []);
+
+    const handleToggle = useCallback(() => {
+      if (disabled) return;
+      if (isOpen) {
+        handleClose();
+      } else {
+        setIsOpen(true);
+        updatePopoverPosition();
+      }
+    }, [disabled, isOpen, handleClose, updatePopoverPosition]);
+
+    // Single mode: pick one and close. Multiple mode: toggle and stay open.
+    const handleSelect = useCallback(
+      (form: FormSelectItem) => {
+        if (!multiple) {
+          setInternalValue(form.id);
+          onChange?.({ form });
+          handleClose();
+          return;
+        }
+        const nextIds = selectedIds.has(form.id)
+          ? [...selectedIds].filter((id) => id !== form.id)
+          : [...selectedIds, form.id];
+        setInternalValue(nextIds);
+        onChange?.({
+          forms: items.filter(
+            (item) => nextIds.includes(item.id) && item.itemType !== 'group',
+          ),
+        });
+      },
+      [multiple, selectedIds, items, onChange, handleClose],
+    );
+
+    const handleRemoveChip = useCallback(
+      (formId: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (disabled) return;
+        const nextIds = [...selectedIds].filter((id) => id !== formId);
+        setInternalValue(nextIds);
+        onChange?.({
+          forms: items.filter(
+            (item) => nextIds.includes(item.id) && item.itemType !== 'group',
+          ),
+        });
+      },
+      [disabled, selectedIds, items, onChange],
+    );
+
+    const handleEmptySelect = useCallback(() => {
+      setInternalValue('');
+      onChange?.({});
+      handleClose();
+    }, [onChange, handleClose]);
+
+    // ── Event listeners ───────────────────────────────────────────
+
+    // Click-outside: close popover when clicking outside both the trigger and popover.
+    // Uses native mousedown on the trigger's root node (ShadowRoot or document) so it
+    // works regardless of stacking contexts. Mousedown events on the popover itself are
+    // stopped from propagating, so this listener only sees external clicks.
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const rootNode = triggerRef.current?.getRootNode() as Document | ShadowRoot | undefined;
+      const eventTarget = rootNode ?? document;
+
+      const handleClickOutside = (e: Event) => {
+        const target = e.target as HTMLElement;
+        if (
+          (popoverRef.current && popoverRef.current.contains(target)) ||
+          (triggerRef.current && triggerRef.current.contains(target))
+        ) {
+          return;
+        }
+        handleClose();
+      };
+
+      eventTarget.addEventListener('mousedown', handleClickOutside);
+
+      return () => {
+        eventTarget.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [isOpen, handleClose]);
+
+    // Keep popover positioned correctly when the viewport resizes
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const handleResize = () => {
+        updatePopoverPosition();
+      };
+
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }, [isOpen, updatePopoverPosition]);
+
+    // Poll popover position every frame to track scroll (scroll events aren't
+    // composed, so they don't cross shadow boundaries)
+    useLayoutEffect(() => {
+      if (!isOpen) return;
+
+      let rafId: number;
+      const poll = () => {
+        updatePopoverPosition();
+        rafId = requestAnimationFrame(poll);
+      };
+      rafId = requestAnimationFrame(poll);
+
+      return () => cancelAnimationFrame(rafId);
+    }, [isOpen, updatePopoverPosition]);
+
+    // Keyboard: close on Escape
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const handleEscape = (e: Event) => {
+        if ((e as KeyboardEvent).key === 'Escape') {
+          handleClose();
+        }
+      };
+
+      const rootNode = triggerRef.current?.getRootNode() as Document | ShadowRoot | undefined;
+      const eventTarget = rootNode ?? document;
+      eventTarget.addEventListener('keydown', handleEscape);
+      return () => eventTarget.removeEventListener('keydown', handleEscape);
+    }, [isOpen, handleClose]);
+
+    // Prevent native events inside the popover from bubbling to document-
+    // level listeners (e.g. Radix DismissableLayer, react-remove-scroll).
+    // Without this, a parent Drawer would: (a) close on click, (b) capture
+    // wheel events making the popover list unscrollable.
+    useEffect(() => {
+      if (!isOpen) return;
+      const el = popoverRef.current;
+      if (!el) return;
+
+      const blockEvents = (e: Event) => e.stopPropagation();
+      el.addEventListener('mousedown', blockEvents);
+      el.addEventListener('pointerdown', blockEvents);
+      el.addEventListener('wheel', blockEvents);
+      return () => {
+        el.removeEventListener('mousedown', blockEvents);
+        el.removeEventListener('pointerdown', blockEvents);
+        el.removeEventListener('wheel', blockEvents);
+      };
+    }, [isOpen]);
+
+    // ── Render ────────────────────────────────────────────────────
+
+    const hasMultiSelection = multiple && selectedForms.length > 0;
+
+    if (popoverOnly) {
+      return (
+        <FormPopover
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          tree={tree}
+          selectedIds={selectedIds}
+          onSelect={handleSelect}
+          hasSearch={hasSearch}
+          allowEmpty={allowEmpty && !multiple}
+          emptyLabel={emptyLabel}
+          onEmptySelect={handleEmptySelect}
+        />
+      );
+    }
+
+    return (
+      <div ref={ref} className={cn('relative inline-flex min-w-0 w-full', className)}>
+        {/* Trigger */}
+        <div
+          ref={setTriggerRef}
+          className={cn(
+            'flex items-center gap-[10px] px-[10px] py-[7px] rounded-[4px] cursor-pointer select-none w-full',
+            'bg-white border',
+            isOpen
+              ? 'border-[#0265FF]'
+              : 'border-[#E0E0E0] hover:border-[#0265FF]',
+            transCls,
+            disabled && 'opacity-50 cursor-not-allowed',
+          )}
+          onClick={handleToggle}
+        >
+          {hasMultiSelection ? (
+            <span className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+              {visibleChips.map((form) => (
+                <span
+                  key={form.id}
+                  className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0 max-w-[160px]"
+                  onClick={(e) => handleRemoveChip(form.id, e)}
+                >
+                  <i
+                    className={getFormIconClass(form.icon ?? 0)}
+                    style={{ fontSize: 14, lineHeight: 1 }}
+                  />
+                  <span className="text-[14px] text-[#030303] truncate leading-[normal]">
+                    {form.name}
+                  </span>
+                  <span className="cursor-pointer flex items-center shrink-0 hover:bg-[#EFF0F6]">
+                    <CloseIcon />
+                  </span>
+                </span>
+              ))}
+              {overflowCount > 0 && (
+                <span className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0">
+                  <span className="text-[14px] text-[#030303] leading-[normal]">
+                    +{overflowCount}
+                  </span>
+                  <MoreIcon />
+                </span>
+              )}
+            </span>
+          ) : (
+            <span className="flex items-center gap-[6px] min-w-0 flex-1">
+              {selectedForm ? (
+                <>
+                  <i
+                    className={getFormIconClass(selectedForm.icon ?? 0)}
+                    style={{ fontSize: 16, lineHeight: 1 }}
+                  />
+                  <span className="text-[14px] text-[#030303] leading-[normal] truncate">
+                    {selectedForm.name}
+                  </span>
+                </>
+              ) : (
+                <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                  {allowEmpty && !multiple ? emptyLabel : placeholder}
+                </span>
+              )}
+            </span>
+          )}
+          <span
+            className={cn(
+              'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
+              transCls,
+              isOpen && 'rotate-180',
+            )}
+          >
+            <SolidArrowDownIcon size={16} />
+          </span>
+        </div>
+
+        {/* Popover */}
+        {isOpen &&
+          createPortal(
+            <div ref={popoverRef} style={popoverStyle}>
+              <FormPopover
+                searchQuery={searchQuery}
+                onSearchChange={setSearchQuery}
+                tree={tree}
+                selectedIds={selectedIds}
+                onSelect={handleSelect}
+                hasSearch={hasSearch}
+                allowEmpty={allowEmpty && !multiple}
+                emptyLabel={emptyLabel}
+                onEmptySelect={handleEmptySelect}
+              />
+            </div>,
+            portalContainer || document.body,
+          )}
+      </div>
+    );
+  },
+);
+
+FormSelect.displayName = 'FormSelect';