Icon Picker Virtualized

1"use client";
2 
3import * as React from "react";
4import { icons } from "lucide-react";
5import { useVirtualizer } from "@tanstack/react-virtual";
6 
7import { cn } from "@/lib/utils";
8import { Input } from "@/components/ui/input";
9import { useDebounce } from "@/hooks/use-debounce";
10 
11const IconItem = React.memo(
12  ({
13    iconName,
14    setSelectedIcon,
15    selectedIcon,
16  }: {
17    iconName: string;
18    setSelectedIcon?: (iconName: string) => void;
19    selectedIcon?: string | null;
20  }) => {
21    const Icon = icons[iconName as keyof typeof icons];
22 
23    const handleClick = React.useCallback(() => {
24      setSelectedIcon?.(iconName);
25    }, [iconName, setSelectedIcon]);
26 
27    return (
28      <button
29        className={cn(
30          "flex items-center justify-center size-7 rounded-md cursor-pointer text-popover-foreground/70 hover:bg-muted hover:text-popover-foreground transition-colors",
31          selectedIcon === iconName &&
32            "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
33        )}
34        onClick={handleClick}
35        title={iconName}
36        aria-label={`Select ${iconName} icon`}
37        aria-pressed={selectedIcon === iconName}
38      >
39        <Icon size={16} />
40      </button>
41    );
42  },
43);
44 
45IconItem.displayName = "IconItem";
46 
47const IconPicker = React.memo(
48  ({
49    setSelectedIcon,
50    selectedIcon,
51    className,
52    ...props
53  }: {
54    setSelectedIcon?: (iconName: string) => void;
55    selectedIcon?: string | null;
56  } & React.ComponentProps<"div">) => {
57    const [searchQuery, setSearchQuery] = React.useState("");
58    const debouncedSearchQuery = useDebounce(searchQuery, 200);
59 
60    const iconsMap = React.useMemo(() => Object.keys(icons), []);
61 
62    const filteredIcons = React.useMemo(() => {
63      if (!debouncedSearchQuery.trim()) return iconsMap;
64      return iconsMap.filter((iconName) =>
65        iconName.toLowerCase().includes(debouncedSearchQuery.toLowerCase()),
66      );
67    }, [iconsMap, debouncedSearchQuery]);
68 
69    const handleSearchChange = React.useCallback(
70      (e: React.ChangeEvent<HTMLInputElement>) => {
71        setSearchQuery(e.target.value);
72      },
73      [],
74    );
75 
76    const parentRef = React.useRef<HTMLDivElement>(null);
77 
78    const ITEMS_PER_ROW = 9;
79    const totalRows = Math.ceil(filteredIcons.length / ITEMS_PER_ROW);
80 
81    const rowVirtualizerForGrid = useVirtualizer({
82      count: totalRows,
83      getScrollElement: () => parentRef.current,
84      estimateSize: () => 28,
85      overscan: 10,
86// … truncated