ItemPicker() — ui Function Reference

Architecture documentation for the ItemPicker() function in item-picker.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem calls 1

Entity Profile

DesignEngine→ PreviewSystem→ ItemPicker() — ui Function Reference

Dependency Diagram

graph TD
  e4102ad3_2d39_c1dc_41d5_eb1b78c42be4["ItemPicker()"]
  4c6a85bd_ede3_a357_edb5_0823fadf5bba["item-picker.tsx"]
  e4102ad3_2d39_c1dc_41d5_eb1b78c42be4 -->|defined in| 4c6a85bd_ede3_a357_edb5_0823fadf5bba
  8229567e_4180_df66_17c5_be9eb58e09b3["cachedGroupedItems()"]
  e4102ad3_2d39_c1dc_41d5_eb1b78c42be4 -->|calls| 8229567e_4180_df66_17c5_be9eb58e09b3
  style e4102ad3_2d39_c1dc_41d5_eb1b78c42be4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/item-picker.tsx lines 34–165

export function ItemPicker({
  items,
}: {
  items: Pick<RegistryItem, "name" | "title" | "type">[]
}) {
  const [open, setOpen] = React.useState(false)
  const [params, setParams] = useDesignSystemSearchParams()

  const groupedItems = React.useMemo(() => cachedGroupedItems(items), [items])

  const currentItem = React.useMemo(
    () => items.find((item) => item.name === params.item) ?? null,
    [items, params.item]
  )

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if ((e.key === "k" || e.key === "p") && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }

    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [])

  const handleSelect = React.useCallback(
    (item: Pick<RegistryItem, "name" | "title" | "type">) => {
      setParams({ item: item.name })
      setOpen(false)
    },
    [setParams]
  )

  const comboboxValue = React.useMemo(() => {
    return currentItem ?? null
  }, [currentItem])

  return (
    <Combobox
      autoHighlight
      items={groupedItems}
      value={comboboxValue}
      onValueChange={(value) => {
        if (value) {
          handleSelect(value)
        }
      }}
      open={open}
      onOpenChange={setOpen}
      itemToStringValue={(item) => {
        if (!item) {
          return ""
        }
        // Handle both groups and items.
        if ("items" in item) {
          return item.title ?? ""
        }
        return item.title ?? item.name ?? ""
      }}
    >
      <ComboboxTrigger
        render={
          <Button
            variant="outline"
            aria-label="Select item"
            size="sm"
            className="data-popup-open:bg-muted dark:data-popup-open:bg-muted/50 bg-muted/50 sm:bg-background md:dark:bg-background border-foreground/10 dark:bg-muted/50 h-[calc(--spacing(13.5))] flex-1 touch-manipulation justify-between gap-2 rounded-xl pr-4! pl-2.5 text-left shadow-none select-none *:data-[slot=combobox-trigger-icon]:hidden sm:h-8 sm:max-w-56 sm:rounded-lg sm:pr-2! xl:max-w-64"
          />
        }
      >
        <ComboboxValue>
          {(value) => (
            <>
              <div className="flex flex-col justify-start text-left sm:hidden">
                <div className="text-muted-foreground text-xs font-normal">
                  Preview
                </div>
                <div className="text-foreground text-sm font-medium">
                  {value?.title || "Not Found"}