Function SearchMenu

packages/dev/s2-docs/src/SearchMenu.tsx:69–332

(props: SearchMenuProps)

}

export function SearchMenu(props: SearchMenuProps) {
  let {pages, currentPage} = useRouter();
  let {onClose, overlayId, isSearchOpen} = props;

  const searchRef = useRef<TextFieldRef<HTMLInputElement> | null>(null);
  const iconFilter = useIconFilter();

  const {
    selectedLibrary,
    setSelectedLibrary,
    orderedLibraries: orderedTabs,
    searchValue,
    setSearchValue,
    sectionTagsForDisplay,
    selectedTagId,
    handleTagSelectionChange,
    filteredIcons,
    isIconsSelected,
    selectedItems,
    selectedSectionName,
    getPlaceholderText,
    sections
  } = useSearchMenuState({
    pages,
    currentPage,
    initialSearchValue: props.initialSearchValue,
    initialTag: props.initialTag,
    isOpen: isSearchOpen
  });

  const filteredColors = useFilteredColors(searchValue);

  // Auto-focus search field when menu opens
  useEffect(() => {
    if (isSearchOpen) {
      const timer = setTimeout(() => {
        searchRef.current?.focus();
      }, 0);
      return () => clearTimeout(timer);
    }
  }, [isSearchOpen]);

  const handleTabSelectionChange = useCallback(
    (key: Key) => {
      setSelectedLibrary(key as Library);
      // Focus main search field of the newly selected tab
      setTimeout(() => {
        const lib = key as Library;
        const expectedLabel = `Search ${TAB_DEFS[lib].label}`;
        if (
          searchRef.current &&
          searchRef.current.getInputElement()?.getAttribute('aria-label') === expectedLabel
        ) {
          searchRef.current.focus();
        }
      }, 10);
    },
    [setSelectedLibrary]