Icon Picker Virtualized

1"use client";
2 
3import * as React from "react";
4import { icons } from "lucide-react";
5 
6import { experimental_VGrid as VGrid } from "virtua";
7 
8import { cn } from "@/lib/utils";
9import { Input } from "@/components/ui/input";
10import { useDebounce } from "@/hooks/use-debounce";
11 
12const IconItem = React.memo(
13  ({
14    iconName,
15    setSelectedIcon,
16    selectedIcon,
17  }: {
18    iconName: string;
19    setSelectedIcon?: (iconName: string) => void;
20    selectedIcon?: string | null;
21  }) => {
22    const Icon = icons[iconName as keyof typeof icons];
23    const handleClick = React.useCallback(() => {
24      setSelectedIcon?.(iconName);
25    }, [iconName, setSelectedIcon]);
26    return (
27      <div className="flex items-center justify-center size-full">
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      </div>
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()) {
64        return iconsMap;
65      }
66      return iconsMap.filter((iconName) =>
67        iconName.toLowerCase().includes(debouncedSearchQuery.toLowerCase()),
68      );
69    }, [debouncedSearchQuery, iconsMap]);
70 
71    const handleSearchChange = React.useCallback(
72      (e: React.ChangeEvent<HTMLInputElement>) => {
73        setSearchQuery(e.target.value);
74      },
75      [],
76    );
77 
78    const ITEMS_PER_ROW = 9;
79    const ITEM_SIZE = 28; // size-7 corresponds to 28px
80 
81    const gridKey = React.useMemo(
82      () => `icon-grid-${filteredIcons.length}`,
83      [filteredIcons.length],
84    );
85 
86// … truncated