{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-grid-row-height-menu",
  "title": "Data Grid Row Height Menu",
  "description": "A row height menu component for the data grid to adjust row sizes",
  "dependencies": [
    "@tanstack/react-table",
    "lucide-react"
  ],
  "registryDependencies": [
    "select"
  ],
  "files": [
    {
      "path": "src/components/data-grid/data-grid-row-height-menu.tsx",
      "content": "\"use client\";\n\nimport type { Table } from \"@tanstack/react-table\";\nimport {\n  AlignVerticalSpaceAroundIcon,\n  ChevronsDownUpIcon,\n  EqualIcon,\n  MinusIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\n\nconst rowHeights = [\n  {\n    label: \"Short\",\n    value: \"short\" as const,\n    icon: MinusIcon,\n  },\n  {\n    label: \"Medium\",\n    value: \"medium\" as const,\n    icon: EqualIcon,\n  },\n  {\n    label: \"Tall\",\n    value: \"tall\" as const,\n    icon: AlignVerticalSpaceAroundIcon,\n  },\n  {\n    label: \"Extra Tall\",\n    value: \"extra-tall\" as const,\n    icon: ChevronsDownUpIcon,\n  },\n] as const;\n\ninterface DataGridRowHeightMenuProps<TData>\n  extends React.ComponentProps<typeof SelectContent> {\n  table: Table<TData>;\n  disabled?: boolean;\n}\n\nexport function DataGridRowHeightMenu<TData>({\n  table,\n  disabled,\n  ...props\n}: DataGridRowHeightMenuProps<TData>) {\n  const rowHeight = table.options.meta?.rowHeight;\n  const onRowHeightChange = table.options.meta?.onRowHeightChange;\n\n  const selectedRowHeight = React.useMemo(() => {\n    return (\n      rowHeights.find((opt) => opt.value === rowHeight) ?? {\n        label: \"Short\",\n        value: \"short\" as const,\n        icon: MinusIcon,\n      }\n    );\n  }, [rowHeight]);\n\n  return (\n    <Select\n      value={rowHeight}\n      onValueChange={onRowHeightChange}\n      disabled={disabled}\n    >\n      <SelectTrigger className=\"[&_svg:nth-child(2)]:hidden\">\n        <SelectValue placeholder=\"Row height\">\n          <selectedRowHeight.icon />\n          {selectedRowHeight.label}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectContent {...props}>\n        <SelectGroup>\n          {rowHeights.map((option) => (\n            <SelectItem key={option.value} value={option.value}>\n              <option.icon />\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  );\n}\n",
      "type": "registry:component",
      "target": "src/components/data-grid/data-grid-row-height-menu.tsx"
    }
  ],
  "type": "registry:component"
}