npm - @handled-ai/design-system - Versions diffs - 0.14.8 → 0.14.10 - Mend

@handled-ai/design-system 0.14.8 → 0.14.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/components/data-table-filter.d.ts +3 -1
package/dist/components/data-table-filter.js +9 -3
package/dist/components/data-table-filter.js.map +1 -1
package/dist/components/virtualized-data-table.d.ts +6 -2
package/dist/components/virtualized-data-table.js +51 -20
package/dist/components/virtualized-data-table.js.map +1 -1
package/dist/index.d.ts +1 -1
package/dist/index.js.map +1 -1
package/package.json +1 -1
package/src/components/__tests__/virtualized-data-table-resize.test.tsx +524 -0
package/src/components/data-table-filter.tsx +12 -2
package/src/components/virtualized-data-table.tsx +40 -1
package/src/index.ts +1 -0

package/dist/components/data-table-filter.d.ts CHANGED Viewed

@@ -17,7 +17,9 @@ interface DataTableFilterProps {
     selectedFilters: Record<string, string[]>;
     onToggleFilter: (categoryId: string, option: string) => void;
     className?: string;
+    /** Minimum number of options before showing the sub-menu search input. Defaults to 8. */
+    optionSearchThreshold?: number;
 }
-declare function DataTableFilter({ categories, selectedFilters, onToggleFilter, className, }: DataTableFilterProps): React.JSX.Element;
+declare function DataTableFilter({ categories, selectedFilters, onToggleFilter, className, optionSearchThreshold, }: DataTableFilterProps): React.JSX.Element;
 export { DataTableFilter, type DataTableFilterCategory, type FilterOption };

package/dist/components/data-table-filter.js CHANGED Viewed

@@ -44,7 +44,8 @@ function DataTableFilter({
   categories,
   selectedFilters,
   onToggleFilter,
-  className
+  className,
+  optionSearchThreshold = 8
 }) {
   const [query, setQuery] = React.useState("");
   const [subQueries, setSubQueries] = React.useState({});
@@ -126,7 +127,7 @@ function DataTableFilter({
                   category.label
                 ] }),
                 /* @__PURE__ */ jsxs(DropdownMenuSubContent, { className: "max-h-[320px] w-52 overflow-y-auto p-1", children: [
-                  category.options.length > 7 && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                  category.options.length > optionSearchThreshold && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
                     /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }),
                     /* @__PURE__ */ jsx(
                       "input",
@@ -136,7 +137,12 @@ function DataTableFilter({
                         value: (_b = subQueries[category.id]) != null ? _b : "",
                         onChange: (e) => setSubQueries((prev) => __spreadProps(__spreadValues({}, prev), { [category.id]: e.target.value })),
                         onClick: (e) => e.stopPropagation(),
-                        onKeyDown: (e) => e.stopPropagation()
+                        onKeyDown: (e) => {
+                          const navKeys = ["ArrowDown", "ArrowUp", "Enter", "Escape", "Tab"];
+                          if (!navKeys.includes(e.key)) {
+                            e.stopPropagation();
+                          }
+                        }
                       }
                     )
                   ] }) }),

package/dist/components/data-table-filter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/components/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ListFilter, Search } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface FilterOption {\n label: string\n value: string\n}\n\nexport interface DataTableFilterCategory {\n id: string\n label: string\n icon: React.ComponentType<{ className?: string }>\n options: (string \| FilterOption)[]\n}\n\nfunction getOptionValue(option: string \| FilterOption): string {\n return typeof option === \"string\" ? option : option.value\n}\nfunction getOptionLabel(option: string \| FilterOption): string {\n return typeof option === \"string\" ? option : option.label\n}\n\ninterface DataTableFilterProps {\n categories: DataTableFilterCategory[]\n selectedFilters: Record<string, string[]>\n onToggleFilter: (categoryId: string, option: string) => void\n className?: string\n}\n\nexport function DataTableFilter({\n categories,\n selectedFilters,\n onToggleFilter,\n className,\n}: DataTableFilterProps) {\n const [query, setQuery] = React.useState(\"\")\n const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})\n\n const visibleCategories = React.useMemo(() => {\n const normalized = query.trim().toLowerCase()\n if (!normalized) {\n return categories\n }\n\n return categories.filter((category) => {\n if (category.label.toLowerCase().includes(normalized)) {\n return true\n }\n\n return category.options.some((option) =>\n getOptionLabel(option).toLowerCase().includes(normalized)\n )\n })\n }, [categories, query])\n\n const activeCount = React.useMemo(\n () =>\n Object.values(selectedFilters).reduce(\n (count, selected) => count + selected.length,\n 0\n ),\n [selectedFilters]\n )\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"outline\"\n size=\"sm\"\n className={cn(\n \"h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50\",\n className\n )}\n >\n <ListFilter className=\"h-3.5 w-3.5\" />\n Filter\n {activeCount > 0 ? (\n <span className=\"rounded bg-muted px-1.5 py-0 text-[10px] font-semibold\">\n {activeCount}\n </span>\n ) : null}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\" className=\"w-[240px] p-0\">\n <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-2\">\n <div className=\"relative\">\n <Search className=\"absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground\" />\n <input\n className=\"h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n placeholder=\"Search filters...\"\n value={query}\n onChange={(event) => setQuery(event.target.value)}\n onClick={(event) => event.stopPropagation()}\n onKeyDown={(event) => event.stopPropagation()}\n />\n </div>\n </div>\n\n <div className=\"max-h-[320px] overflow-y-auto p-1\">\n {visibleCategories.map((category) => {\n const subQuery = (subQueries[category.id] ?? \"\").trim().toLowerCase()\n const filteredOptions = subQuery\n ? category.options.filter((opt) =>\n getOptionLabel(opt).toLowerCase().includes(subQuery)\n )\n : category.options\n\n return (\n <DropdownMenuSub\n key={category.id}\n onOpenChange={(open) => {\n if (!open) {\n setSubQueries((prev) => {\n const next = { ...prev }\n delete next[category.id]\n return next\n })\n }\n }}\n >\n <DropdownMenuSubTrigger className=\"cursor-pointer py-1.5 text-xs\">\n <category.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n {category.label}\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent className=\"max-h-[320px] w-52 overflow-y-auto p-1\">\n {/* Submenu search — only for categories with many options /}\n {category.options.length > 7 && (\n <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-1.5\">\n <div className=\"relative\">\n <Search className=\"absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground\" />\n <input\n className=\"h-7 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n placeholder=\"Search...\"\n value={subQueries[category.id] ?? \"\"}\n onChange={(e) =>\n setSubQueries((prev) => ({ ...prev, [category.id]: e.target.value }))\n }\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n />\n </div>\n </div>\n )}\n {/ Filtered options */}\n {filteredOptions.map((option) => {\n const value = getOptionValue(option)\n const label = getOptionLabel(option)\n const selected = selectedFilters[category.id]?.includes(value) ?? false\n return (\n <DropdownMenuItem\n key={value}\n className=\"cursor-pointer justify-between text-xs\"\n onSelect={(event) => {\n event.preventDefault()\n onToggleFilter(category.id, value)\n }}\n >\n {label}\n {selected ? (\n <span className=\"text-[10px] font-semibold text-brand-purple\">\n Applied\n </span>\n ) : null}\n </DropdownMenuItem>\n )\n })}\n {filteredOptions.length === 0 && category.options.length > 0 && (\n <div className=\"p-2 text-center text-xs text-muted-foreground\">\n No matches\n </div>\n )}\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n )\n })}\n\n {visibleCategories.length === 0 ? (\n <div className=\"p-2 text-center text-xs text-muted-foreground\">\n No filters found\n </div>\n ) : null}\n </div>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n}\n"],"mappings":"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","names":["_a","_b"]}
1	+ {"version":3,"sources":["../../src/components/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ListFilter, Search } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface FilterOption {\n label: string\n value: string\n}\n\nexport interface DataTableFilterCategory {\n id: string\n label: string\n icon: React.ComponentType<{ className?: string }>\n options: (string \| FilterOption)[]\n}\n\nfunction getOptionValue(option: string \| FilterOption): string {\n return typeof option === \"string\" ? option : option.value\n}\nfunction getOptionLabel(option: string \| FilterOption): string {\n return typeof option === \"string\" ? option : option.label\n}\n\ninterface DataTableFilterProps {\n categories: DataTableFilterCategory[]\n selectedFilters: Record<string, string[]>\n onToggleFilter: (categoryId: string, option: string) => void\n className?: string\n /** Minimum number of options before showing the sub-menu search input. Defaults to 8. /\n optionSearchThreshold?: number\n}\n\nexport function DataTableFilter({\n categories,\n selectedFilters,\n onToggleFilter,\n className,\n optionSearchThreshold = 8,\n}: DataTableFilterProps) {\n const [query, setQuery] = React.useState(\"\")\n const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})\n\n const visibleCategories = React.useMemo(() => {\n const normalized = query.trim().toLowerCase()\n if (!normalized) {\n return categories\n }\n\n return categories.filter((category) => {\n if (category.label.toLowerCase().includes(normalized)) {\n return true\n }\n\n return category.options.some((option) =>\n getOptionLabel(option).toLowerCase().includes(normalized)\n )\n })\n }, [categories, query])\n\n const activeCount = React.useMemo(\n () =>\n Object.values(selectedFilters).reduce(\n (count, selected) => count + selected.length,\n 0\n ),\n [selectedFilters]\n )\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"outline\"\n size=\"sm\"\n className={cn(\n \"h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50\",\n className\n )}\n >\n <ListFilter className=\"h-3.5 w-3.5\" />\n Filter\n {activeCount > 0 ? (\n <span className=\"rounded bg-muted px-1.5 py-0 text-[10px] font-semibold\">\n {activeCount}\n </span>\n ) : null}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\" className=\"w-[240px] p-0\">\n <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-2\">\n <div className=\"relative\">\n <Search className=\"absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground\" />\n <input\n className=\"h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n placeholder=\"Search filters...\"\n value={query}\n onChange={(event) => setQuery(event.target.value)}\n onClick={(event) => event.stopPropagation()}\n onKeyDown={(event) => event.stopPropagation()}\n />\n </div>\n </div>\n\n <div className=\"max-h-[320px] overflow-y-auto p-1\">\n {visibleCategories.map((category) => {\n const subQuery = (subQueries[category.id] ?? \"\").trim().toLowerCase()\n const filteredOptions = subQuery\n ? category.options.filter((opt) =>\n getOptionLabel(opt).toLowerCase().includes(subQuery)\n )\n : category.options\n\n return (\n <DropdownMenuSub\n key={category.id}\n onOpenChange={(open) => {\n if (!open) {\n setSubQueries((prev) => {\n const next = { ...prev }\n delete next[category.id]\n return next\n })\n }\n }}\n >\n <DropdownMenuSubTrigger className=\"cursor-pointer py-1.5 text-xs\">\n <category.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n {category.label}\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent className=\"max-h-[320px] w-52 overflow-y-auto p-1\">\n {/ Submenu search — only for categories with many options /}\n {category.options.length > optionSearchThreshold && (\n <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-1.5\">\n <div className=\"relative\">\n <Search className=\"absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground\" />\n <input\n className=\"h-7 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n placeholder=\"Search...\"\n value={subQueries[category.id] ?? \"\"}\n onChange={(e) =>\n setSubQueries((prev) => ({ ...prev, [category.id]: e.target.value }))\n }\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => {\n // Allow navigation keys to propagate to Radix menu handling\n // so keyboard users can move to and select filtered options.\n const navKeys = [\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\", \"Tab\"]\n if (!navKeys.includes(e.key)) {\n e.stopPropagation()\n }\n }}\n />\n </div>\n </div>\n )}\n {/ Filtered options */}\n {filteredOptions.map((option) => {\n const value = getOptionValue(option)\n const label = getOptionLabel(option)\n const selected = selectedFilters[category.id]?.includes(value) ?? false\n return (\n <DropdownMenuItem\n key={value}\n className=\"cursor-pointer justify-between text-xs\"\n onSelect={(event) => {\n event.preventDefault()\n onToggleFilter(category.id, value)\n }}\n >\n {label}\n {selected ? (\n <span className=\"text-[10px] font-semibold text-brand-purple\">\n Applied\n </span>\n ) : null}\n </DropdownMenuItem>\n )\n })}\n {filteredOptions.length === 0 && category.options.length > 0 && (\n <div className=\"p-2 text-center text-xs text-muted-foreground\">\n No matches\n </div>\n )}\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n )\n })}\n\n {visibleCategories.length === 0 ? (\n <div className=\"p-2 text-center text-xs text-muted-foreground\">\n No filters found\n </div>\n ) : null}\n </div>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n}\n"],"mappings":"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","names":["_a","_b"]}

package/dist/components/virtualized-data-table.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ColumnDef, SortingState, OnChangeFn, ColumnFiltersState, VisibilityState } from '@tanstack/react-table';
+import { ColumnDef, ColumnSizingState, OnChangeFn, SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/react-table';
 interface VirtualizedDataTableProps<TData> {
     columns: ColumnDef<TData, any>[];
@@ -13,6 +13,10 @@ interface VirtualizedDataTableProps<TData> {
     reachBottomThreshold?: number;
     hasMore?: boolean;
     isFetchingMore?: boolean;
+    enableColumnResizing?: boolean;
+    columnResizeMode?: "onChange" | "onEnd";
+    columnSizing?: ColumnSizingState;
+    onColumnSizingChange?: OnChangeFn<ColumnSizingState>;
     sorting?: SortingState;
     onSortingChange?: OnChangeFn<SortingState>;
     columnFilters?: ColumnFiltersState;
@@ -25,6 +29,6 @@ interface VirtualizedDataTableProps<TData> {
     emptyDescription?: string;
     className?: string;
 }
-declare function VirtualizedDataTable<TData>({ columns, data, height, estimateRowHeight, overscan, onRowClick, getRowId, onReachBottom, reachBottomThreshold, hasMore, isFetchingMore, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, isLoading, emptyIcon, emptyMessage, emptyDescription, className, }: VirtualizedDataTableProps<TData>): React.JSX.Element;
+declare function VirtualizedDataTable<TData>({ columns, data, height, estimateRowHeight, overscan, onRowClick, getRowId, onReachBottom, reachBottomThreshold, hasMore, isFetchingMore, enableColumnResizing, columnResizeMode, columnSizing, onColumnSizingChange, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, isLoading, emptyIcon, emptyMessage, emptyDescription, className, }: VirtualizedDataTableProps<TData>): React.JSX.Element;
 export { VirtualizedDataTable, type VirtualizedDataTableProps };

package/dist/components/virtualized-data-table.js CHANGED Viewed

@@ -42,6 +42,10 @@ function VirtualizedDataTable({
   reachBottomThreshold = 5,
   hasMore = true,
   isFetchingMore,
+  enableColumnResizing = false,
+  columnResizeMode = "onEnd",
+  columnSizing,
+  onColumnSizingChange,
   sorting,
   onSortingChange,
   columnFilters,
@@ -63,6 +67,9 @@ function VirtualizedDataTable({
   const [internalColumnVisibility, setInternalColumnVisibility] = React.useState({});
   const resolvedColumnVisibility = columnVisibility != null ? columnVisibility : internalColumnVisibility;
   const resolvedOnColumnVisibilityChange = onColumnVisibilityChange != null ? onColumnVisibilityChange : setInternalColumnVisibility;
+  const [internalColumnSizing, setInternalColumnSizing] = React.useState({});
+  const resolvedColumnSizing = columnSizing != null ? columnSizing : internalColumnSizing;
+  const resolvedOnColumnSizingChange = onColumnSizingChange != null ? onColumnSizingChange : setInternalColumnSizing;
   const table = useReactTable(__spreadProps(__spreadValues({
     data,
     columns
@@ -70,11 +77,15 @@ function VirtualizedDataTable({
     state: {
       sorting: resolvedSorting,
       columnFilters: resolvedColumnFilters,
-      columnVisibility: resolvedColumnVisibility
+      columnVisibility: resolvedColumnVisibility,
+      columnSizing: resolvedColumnSizing
     },
     onSortingChange: resolvedOnSortingChange,
     onColumnFiltersChange: resolvedOnColumnFiltersChange,
     onColumnVisibilityChange: resolvedOnColumnVisibilityChange,
+    onColumnSizingChange: resolvedOnColumnSizingChange,
+    enableColumnResizing,
+    columnResizeMode,
     manualSorting: true,
     manualFiltering: true,
     manualPagination: true,
@@ -130,10 +141,13 @@ function VirtualizedDataTable({
           {
             className: "flex w-max min-w-full border-b border-border/50",
             role: "row",
-            children: headerGroup.headers.map((header, colIdx) => /* @__PURE__ */ jsx(
+            children: headerGroup.headers.map((header, colIdx) => /* @__PURE__ */ jsxs(
               "div",
               {
-                className: "h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap",
+                className: cn(
+                  "h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative",
+                  header.column.getCanResize() && "pr-4"
+                ),
                 style: {
                   width: header.getSize(),
                   minWidth: header.getSize()
@@ -141,24 +155,41 @@ function VirtualizedDataTable({
                 role: "columnheader",
                 "aria-colindex": colIdx + 1,
                 "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : header.column.getCanSort() ? "none" : void 0,
-                children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    className: "inline-flex items-center gap-1 hover:text-foreground transition-colors",
-                    onClick: header.column.getToggleSortingHandler(),
-                    children: [
-                      flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
+                children: [
+                  header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "inline-flex items-center gap-1 hover:text-foreground transition-colors",
+                      onClick: header.column.getToggleSortingHandler(),
+                      children: [
+                        flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        ),
+                        header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-40" })
+                      ]
+                    }
+                  ) : flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  ),
+                  header.column.getCanResize() && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      onMouseDown: header.getResizeHandler(),
+                      onTouchStart: header.getResizeHandler(),
+                      className: cn(
+                        "absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none",
+                        "after:absolute after:right-1.5 after:top-0 after:h-full after:w-px",
+                        "after:bg-transparent hover:after:bg-primary/30",
+                        header.column.getIsResizing() && "after:bg-primary/50"
                       ),
-                      header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-40" })
-                    ]
-                  }
-                ) : flexRender(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )
+                      role: "separator",
+                      "aria-orientation": "vertical"
+                    }
+                  )
+                ]
               },
               header.id
             ))

package/dist/components/virtualized-data-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/components/virtualized-data-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport {\n useReactTable,\n getCoreRowModel,\n flexRender,\n type ColumnDef,\n type SortingState,\n type ColumnFiltersState,\n type VisibilityState,\n type OnChangeFn,\n} from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface VirtualizedDataTableProps<TData> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n columns: ColumnDef<TData, any>[]\n data: TData[]\n\n // Virtualization\n height?: number \| string\n estimateRowHeight?: number\n overscan?: number\n\n // Row interaction\n onRowClick?: (row: TData) => void\n getRowId?: (original: TData, index: number) => string\n\n // Infinite scroll\n onReachBottom?: () => void\n reachBottomThreshold?: number\n hasMore?: boolean\n isFetchingMore?: boolean\n\n // Server-driven state (controlled) — omit for internal state\n sorting?: SortingState\n onSortingChange?: OnChangeFn<SortingState>\n columnFilters?: ColumnFiltersState\n onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n columnVisibility?: VisibilityState\n onColumnVisibilityChange?: OnChangeFn<VisibilityState>\n\n // Loading / Empty state\n isLoading?: boolean\n emptyIcon?: React.ReactNode\n emptyMessage?: string\n emptyDescription?: string\n\n // Styling\n className?: string\n}\n\nexport function VirtualizedDataTable<TData>({\n columns,\n data,\n height = 600,\n estimateRowHeight = 48,\n overscan = 8,\n onRowClick,\n getRowId,\n onReachBottom,\n reachBottomThreshold = 5,\n hasMore = true,\n isFetchingMore,\n sorting,\n onSortingChange,\n columnFilters,\n onColumnFiltersChange,\n columnVisibility,\n onColumnVisibilityChange,\n isLoading,\n emptyIcon,\n emptyMessage = \"No rows found\",\n emptyDescription = \"Try adjusting your filters\",\n className,\n}: VirtualizedDataTableProps<TData>) {\n // Controlled/uncontrolled state for sorting\n const [internalSorting, setInternalSorting] = React.useState<SortingState>([])\n const resolvedSorting = sorting ?? internalSorting\n const resolvedOnSortingChange = onSortingChange ?? setInternalSorting\n\n // Controlled/uncontrolled state for column filters\n const [internalColumnFilters, setInternalColumnFilters] =\n React.useState<ColumnFiltersState>([])\n const resolvedColumnFilters = columnFilters ?? internalColumnFilters\n const resolvedOnColumnFiltersChange =\n onColumnFiltersChange ?? setInternalColumnFilters\n\n // Controlled/uncontrolled state for column visibility\n const [internalColumnVisibility, setInternalColumnVisibility] =\n React.useState<VisibilityState>({})\n const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility\n const resolvedOnColumnVisibilityChange =\n onColumnVisibilityChange ?? setInternalColumnVisibility\n\n // TanStack Table setup\n const table = useReactTable({\n data,\n columns,\n ...(getRowId ? { getRowId } : {}),\n state: {\n sorting: resolvedSorting,\n columnFilters: resolvedColumnFilters,\n columnVisibility: resolvedColumnVisibility,\n },\n onSortingChange: resolvedOnSortingChange,\n onColumnFiltersChange: resolvedOnColumnFiltersChange,\n onColumnVisibilityChange: resolvedOnColumnVisibilityChange,\n manualSorting: true,\n manualFiltering: true,\n manualPagination: true,\n getCoreRowModel: getCoreRowModel(),\n })\n\n // Virtualizer setup\n const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n const rows = table.getRowModel().rows\n\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollContainerRef.current,\n estimateSize: () => estimateRowHeight,\n overscan,\n measureElement: (element) => element.getBoundingClientRect().height,\n })\n\n // Infinite scroll detection\n const lastTriggeredDataLengthRef = React.useRef<number>(0)\n\n // Derive a stable primitive for the last visible virtual-item index so the\n // effect below doesn't re-run on every render (getVirtualItems() returns a\n // new array reference each call).\n const virtualItems = virtualizer.getVirtualItems()\n const lastVirtualItemIndex =\n virtualItems.length > 0\n ? virtualItems[virtualItems.length - 1].index\n : -1\n\n React.useEffect(() => {\n if (!onReachBottom \|\| isFetchingMore \|\| hasMore === false) return\n if (lastVirtualItemIndex < 0) return\n if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return\n\n // Prevent re-firing until data.length changes (i.e. new page loaded).\n if (lastTriggeredDataLengthRef.current === data.length) return\n lastTriggeredDataLengthRef.current = data.length\n\n onReachBottom()\n }, [\n lastVirtualItemIndex,\n rows.length,\n data.length,\n onReachBottom,\n isFetchingMore,\n hasMore,\n reachBottomThreshold,\n ])\n\n return (\n <div className={cn(\n \"w-full\",\n typeof height === \"string\" && height.trim().endsWith(\"%\") && \"h-full\",\n className,\n )}>\n <div\n ref={scrollContainerRef}\n className=\"relative overflow-auto\"\n style={{\n height: typeof height === \"number\" ? `${height}px` : height,\n contain: \"strict\",\n }}\n role=\"table\"\n aria-rowcount={data.length}\n aria-colcount={table.getVisibleLeafColumns().length}\n >\n {/* Sticky header /}\n <div className=\"sticky top-0 z-10 bg-background\" role=\"rowgroup\">\n {table.getHeaderGroups().map((headerGroup) => (\n <div\n key={headerGroup.id}\n className=\"flex w-max min-w-full border-b border-border/50\"\n role=\"row\"\n >\n {headerGroup.headers.map((header, colIdx) => (\n <div\n key={header.id}\n className=\"h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap\"\n style={{\n width: header.getSize(),\n minWidth: header.getSize(),\n }}\n role=\"columnheader\"\n aria-colindex={colIdx + 1}\n aria-sort={\n header.column.getIsSorted() === \"asc\"\n ? \"ascending\"\n : header.column.getIsSorted() === \"desc\"\n ? \"descending\"\n : header.column.getCanSort()\n ? \"none\"\n : undefined\n }\n >\n {header.isPlaceholder ? null : header.column.getCanSort() ? (\n <button\n type=\"button\"\n className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n onClick={header.column.getToggleSortingHandler()}\n >\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n {header.column.getIsSorted() === \"asc\" ? (\n <ArrowUp className=\"w-3 h-3\" />\n ) : header.column.getIsSorted() === \"desc\" ? (\n <ArrowDown className=\"w-3 h-3\" />\n ) : (\n <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n )}\n </button>\n ) : (\n flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )\n )}\n </div>\n ))}\n </div>\n ))}\n </div>\n\n {/ Virtualized body or empty state /}\n {rows.length > 0 ? (\n <div\n role=\"rowgroup\"\n style={{\n height: virtualizer.getTotalSize(),\n width: \"100%\",\n position: \"relative\",\n }}\n >\n {virtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n return (\n <div\n key={row.id}\n data-index={virtualRow.index}\n ref={virtualizer.measureElement}\n className={cn(\n \"absolute left-0 w-max min-w-full flex group transition-colors\",\n onRowClick && \"cursor-pointer\",\n )}\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n role=\"row\"\n aria-rowindex={virtualRow.index + 2}\n onClick={() => onRowClick?.(row.original)}\n tabIndex={onRowClick ? 0 : undefined}\n onKeyDown={\n onRowClick\n ? (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault()\n onRowClick(row.original)\n }\n }\n : undefined\n }\n >\n {row.getVisibleCells().map((cell, colIdx) => (\n <div\n key={cell.id}\n className=\"px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50\"\n style={{\n width: cell.column.getSize(),\n minWidth: cell.column.getSize(),\n }}\n role=\"cell\"\n aria-colindex={colIdx + 1}\n >\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </div>\n ))}\n </div>\n )\n })}\n </div>\n ) : isLoading ? (\n <div className=\"flex flex-col items-center justify-center gap-2 text-muted-foreground py-20\">\n <Loader2 className=\"h-7 w-7 animate-spin opacity-60\" />\n <p className=\"text-sm font-medium\">Loading...</p>\n </div>\n ) : (\n <div className=\"flex flex-col items-center justify-center gap-1 text-muted-foreground py-20\">\n {emptyIcon ?? <SearchX className=\"h-7 w-7 opacity-40\" />}\n <p className=\"text-sm font-medium\">{emptyMessage}</p>\n <p className=\"text-xs\">{emptyDescription}</p>\n </div>\n )}\n\n {/ Loading indicator */}\n {isFetchingMore && (\n <div className=\"flex items-center justify-center py-4\">\n <Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../src/components/virtualized-data-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport {\n useReactTable,\n getCoreRowModel,\n flexRender,\n type ColumnDef,\n type SortingState,\n type ColumnFiltersState,\n type VisibilityState,\n type ColumnSizingState,\n type OnChangeFn,\n} from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface VirtualizedDataTableProps<TData> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n columns: ColumnDef<TData, any>[]\n data: TData[]\n\n // Virtualization\n height?: number \| string\n estimateRowHeight?: number\n overscan?: number\n\n // Row interaction\n onRowClick?: (row: TData) => void\n getRowId?: (original: TData, index: number) => string\n\n // Infinite scroll\n onReachBottom?: () => void\n reachBottomThreshold?: number\n hasMore?: boolean\n isFetchingMore?: boolean\n\n // Column resizing\n enableColumnResizing?: boolean\n columnResizeMode?: \"onChange\" \| \"onEnd\"\n columnSizing?: ColumnSizingState\n onColumnSizingChange?: OnChangeFn<ColumnSizingState>\n\n // Server-driven state (controlled) — omit for internal state\n sorting?: SortingState\n onSortingChange?: OnChangeFn<SortingState>\n columnFilters?: ColumnFiltersState\n onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n columnVisibility?: VisibilityState\n onColumnVisibilityChange?: OnChangeFn<VisibilityState>\n\n // Loading / Empty state\n isLoading?: boolean\n emptyIcon?: React.ReactNode\n emptyMessage?: string\n emptyDescription?: string\n\n // Styling\n className?: string\n}\n\nexport function VirtualizedDataTable<TData>({\n columns,\n data,\n height = 600,\n estimateRowHeight = 48,\n overscan = 8,\n onRowClick,\n getRowId,\n onReachBottom,\n reachBottomThreshold = 5,\n hasMore = true,\n isFetchingMore,\n enableColumnResizing = false,\n columnResizeMode = \"onEnd\",\n columnSizing,\n onColumnSizingChange,\n sorting,\n onSortingChange,\n columnFilters,\n onColumnFiltersChange,\n columnVisibility,\n onColumnVisibilityChange,\n isLoading,\n emptyIcon,\n emptyMessage = \"No rows found\",\n emptyDescription = \"Try adjusting your filters\",\n className,\n}: VirtualizedDataTableProps<TData>) {\n // Controlled/uncontrolled state for sorting\n const [internalSorting, setInternalSorting] = React.useState<SortingState>([])\n const resolvedSorting = sorting ?? internalSorting\n const resolvedOnSortingChange = onSortingChange ?? setInternalSorting\n\n // Controlled/uncontrolled state for column filters\n const [internalColumnFilters, setInternalColumnFilters] =\n React.useState<ColumnFiltersState>([])\n const resolvedColumnFilters = columnFilters ?? internalColumnFilters\n const resolvedOnColumnFiltersChange =\n onColumnFiltersChange ?? setInternalColumnFilters\n\n // Controlled/uncontrolled state for column visibility\n const [internalColumnVisibility, setInternalColumnVisibility] =\n React.useState<VisibilityState>({})\n const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility\n const resolvedOnColumnVisibilityChange =\n onColumnVisibilityChange ?? setInternalColumnVisibility\n\n // Controlled/uncontrolled state for column sizing\n const [internalColumnSizing, setInternalColumnSizing] =\n React.useState<ColumnSizingState>({})\n const resolvedColumnSizing = columnSizing ?? internalColumnSizing\n const resolvedOnColumnSizingChange =\n onColumnSizingChange ?? setInternalColumnSizing\n\n // TanStack Table setup\n const table = useReactTable({\n data,\n columns,\n ...(getRowId ? { getRowId } : {}),\n state: {\n sorting: resolvedSorting,\n columnFilters: resolvedColumnFilters,\n columnVisibility: resolvedColumnVisibility,\n columnSizing: resolvedColumnSizing,\n },\n onSortingChange: resolvedOnSortingChange,\n onColumnFiltersChange: resolvedOnColumnFiltersChange,\n onColumnVisibilityChange: resolvedOnColumnVisibilityChange,\n onColumnSizingChange: resolvedOnColumnSizingChange,\n enableColumnResizing,\n columnResizeMode,\n manualSorting: true,\n manualFiltering: true,\n manualPagination: true,\n getCoreRowModel: getCoreRowModel(),\n })\n\n // Virtualizer setup\n const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n const rows = table.getRowModel().rows\n\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollContainerRef.current,\n estimateSize: () => estimateRowHeight,\n overscan,\n measureElement: (element) => element.getBoundingClientRect().height,\n })\n\n // Infinite scroll detection\n const lastTriggeredDataLengthRef = React.useRef<number>(0)\n\n // Derive a stable primitive for the last visible virtual-item index so the\n // effect below doesn't re-run on every render (getVirtualItems() returns a\n // new array reference each call).\n const virtualItems = virtualizer.getVirtualItems()\n const lastVirtualItemIndex =\n virtualItems.length > 0\n ? virtualItems[virtualItems.length - 1].index\n : -1\n\n React.useEffect(() => {\n if (!onReachBottom \|\| isFetchingMore \|\| hasMore === false) return\n if (lastVirtualItemIndex < 0) return\n if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return\n\n // Prevent re-firing until data.length changes (i.e. new page loaded).\n if (lastTriggeredDataLengthRef.current === data.length) return\n lastTriggeredDataLengthRef.current = data.length\n\n onReachBottom()\n }, [\n lastVirtualItemIndex,\n rows.length,\n data.length,\n onReachBottom,\n isFetchingMore,\n hasMore,\n reachBottomThreshold,\n ])\n\n return (\n <div className={cn(\n \"w-full\",\n typeof height === \"string\" && height.trim().endsWith(\"%\") && \"h-full\",\n className,\n )}>\n <div\n ref={scrollContainerRef}\n className=\"relative overflow-auto\"\n style={{\n height: typeof height === \"number\" ? `${height}px` : height,\n contain: \"strict\",\n }}\n role=\"table\"\n aria-rowcount={data.length}\n aria-colcount={table.getVisibleLeafColumns().length}\n >\n {/* Sticky header /}\n <div className=\"sticky top-0 z-10 bg-background\" role=\"rowgroup\">\n {table.getHeaderGroups().map((headerGroup) => (\n <div\n key={headerGroup.id}\n className=\"flex w-max min-w-full border-b border-border/50\"\n role=\"row\"\n >\n {headerGroup.headers.map((header, colIdx) => (\n <div\n key={header.id}\n className={cn(\n \"h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative\",\n header.column.getCanResize() && \"pr-4\",\n )}\n style={{\n width: header.getSize(),\n minWidth: header.getSize(),\n }}\n role=\"columnheader\"\n aria-colindex={colIdx + 1}\n aria-sort={\n header.column.getIsSorted() === \"asc\"\n ? \"ascending\"\n : header.column.getIsSorted() === \"desc\"\n ? \"descending\"\n : header.column.getCanSort()\n ? \"none\"\n : undefined\n }\n >\n {header.isPlaceholder ? null : header.column.getCanSort() ? (\n <button\n type=\"button\"\n className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n onClick={header.column.getToggleSortingHandler()}\n >\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n {header.column.getIsSorted() === \"asc\" ? (\n <ArrowUp className=\"w-3 h-3\" />\n ) : header.column.getIsSorted() === \"desc\" ? (\n <ArrowDown className=\"w-3 h-3\" />\n ) : (\n <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n )}\n </button>\n ) : (\n flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )\n )}\n {header.column.getCanResize() && (\n <div\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n className={cn(\n \"absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none\",\n \"after:absolute after:right-1.5 after:top-0 after:h-full after:w-px\",\n \"after:bg-transparent hover:after:bg-primary/30\",\n header.column.getIsResizing() && \"after:bg-primary/50\",\n )}\n role=\"separator\"\n aria-orientation=\"vertical\"\n />\n )}\n </div>\n ))}\n </div>\n ))}\n </div>\n\n {/ Virtualized body or empty state /}\n {rows.length > 0 ? (\n <div\n role=\"rowgroup\"\n style={{\n height: virtualizer.getTotalSize(),\n width: \"100%\",\n position: \"relative\",\n }}\n >\n {virtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n return (\n <div\n key={row.id}\n data-index={virtualRow.index}\n ref={virtualizer.measureElement}\n className={cn(\n \"absolute left-0 w-max min-w-full flex group transition-colors\",\n onRowClick && \"cursor-pointer\",\n )}\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n role=\"row\"\n aria-rowindex={virtualRow.index + 2}\n onClick={() => onRowClick?.(row.original)}\n tabIndex={onRowClick ? 0 : undefined}\n onKeyDown={\n onRowClick\n ? (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault()\n onRowClick(row.original)\n }\n }\n : undefined\n }\n >\n {row.getVisibleCells().map((cell, colIdx) => (\n <div\n key={cell.id}\n className=\"px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50\"\n style={{\n width: cell.column.getSize(),\n minWidth: cell.column.getSize(),\n }}\n role=\"cell\"\n aria-colindex={colIdx + 1}\n >\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </div>\n ))}\n </div>\n )\n })}\n </div>\n ) : isLoading ? (\n <div className=\"flex flex-col items-center justify-center gap-2 text-muted-foreground py-20\">\n <Loader2 className=\"h-7 w-7 animate-spin opacity-60\" />\n <p className=\"text-sm font-medium\">Loading...</p>\n </div>\n ) : (\n <div className=\"flex flex-col items-center justify-center gap-1 text-muted-foreground py-20\">\n {emptyIcon ?? <SearchX className=\"h-7 w-7 opacity-40\" />}\n <p className=\"text-sm font-medium\">{emptyMessage}</p>\n <p className=\"text-xs\">{emptyDescription}</p>\n </div>\n )}\n\n {/ Loading indicator */}\n {isFetchingMore && (\n <div className=\"flex items-center justify-center py-4\">\n <Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts CHANGED Viewed

@@ -74,6 +74,7 @@ export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './comp
 export { VariableAutocomplete, VariableAutocompleteProps, VariableDef, VariableGroup } from './components/variable-autocomplete.js';
 export { ViewMode, ViewModeToggle, ViewModeToggleProps } from './components/view-mode-toggle.js';
 export { VirtualizedDataTable, VirtualizedDataTableProps } from './components/virtualized-data-table.js';
+export { ColumnSizingState } from '@tanstack/react-table';
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './charts/chart.js';
 export { CHART_CURSOR_STYLE, CHART_TOOLTIP_STYLE, ChartTooltipEntry, SimpleChartTooltip, SimpleChartTooltipProps } from './charts/chart-tooltip.js';
 export { BarChartComponent, BarChartComponentProps, BarSeries } from './charts/bar-chart-component.js';
@@ -95,6 +96,5 @@ import 'react';
 import 'radix-ui';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
-import '@tanstack/react-table';
 import 'recharts';
 import 'lucide-react';

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/*\n @handled-ai/design-system\n * UI components and utilities (shadcn-style, New York)\n /\n\n// Utilities\nexport { cn } from \"./lib/utils\"\nexport { BRAND_ICONS, BRAND_GRAPHICS } from \"./lib/icons\"\n\n// Hooks\nexport { useIsMobile } from \"./hooks/use-mobile\"\n\n// Components (light — no recharts/nivo/three transitive deps)\nexport from \"./components/activity-detail\"\nexport * from \"./components/activity-log\"\nexport * from \"./components/agent-popover\"\nexport * from \"./components/agent-widget\"\nexport * from \"./components/avatar\"\nexport * from \"./components/badge\"\nexport * from \"./components/button\"\nexport * from \"./components/card\"\nexport * from \"./components/compliance-badge\"\nexport * from \"./components/contact-chip\"\nexport * from \"./components/contact-list\"\nexport * from \"./components/dashboard-cards\"\nexport * from \"./components/data-table\"\nexport * from \"./components/data-table-display\"\nexport * from \"./components/data-table-filter\"\nexport * from \"./components/data-table-quick-views\"\nexport * from \"./components/data-table-toolbar\"\nexport * from \"./components/detail-view\"\nexport * from \"./components/dialog\"\nexport * from \"./components/dropdown-menu\"\nexport * from \"./components/empty-state\"\nexport * from \"./components/entity-panel\"\nexport * from \"./components/filter-chip\"\nexport * from \"./components/inbox-row\"\nexport * from \"./components/inbox-toolbar\"\nexport * from \"./components/inline-banner\"\nexport * from \"./components/input\"\nexport * from \"./components/insights-filter-bar\"\nexport * from \"./components/item-list\"\nexport * from \"./components/item-list-display\"\nexport * from \"./components/item-list-filter\"\nexport * from \"./components/item-list-toolbar\"\nexport * from \"./components/kbd-hint\"\nexport * from \"./components/label\"\nexport * from \"./components/message\"\nexport * from \"./components/metric-card\"\nexport * from \"./components/performance-metrics-table\"\nexport * from \"./components/preview-list\"\nexport * from \"./components/progress\"\nexport * from \"./components/quick-action-chat-area\"\nexport {\n QuickActionModal,\n type QuickActionPriority,\n type QuickActionTaskDraft,\n type QuickActionTemplate,\n} from \"./components/quick-action-modal\"\nexport * from \"./components/quick-action-sidebar-nav\"\nexport * from \"./components/recommended-actions-section\"\nexport * from \"./components/report-card\"\nexport * from \"./components/rich-text-toolbar\"\nexport * from \"./components/score-analysis-modal\"\nexport * from \"./components/score-breakdown\"\nexport * from \"./components/score-feedback\"\nexport * from \"./components/score-ring\"\nexport * from \"./components/scroll-area\"\nexport * from \"./components/select\"\nexport * from \"./components/separator\"\nexport * from \"./components/sheet\"\nexport * from \"./components/sidebar\"\nexport * from \"./components/signal-feedback-inline\"\nexport * from \"./components/simple-data-table\"\nexport * from \"./components/skeleton\"\nexport * from \"./components/status-badge\"\nexport * from \"./components/step-timeline\"\nexport * from \"./components/sticky-action-bar\"\nexport * from \"./components/styled-bar-list\"\nexport { DraftFeedbackInline } from \"./components/draft-feedback-inline\"\nexport type { DraftFeedbackInlineProps } from \"./components/draft-feedback-inline\"\nexport { AccountContactsPopover, BrandIcon } from \"./components/account-contacts-popover\"\nexport type { AccountContactsPopoverProps } from \"./components/account-contacts-popover\"\nexport * from \"./components/suggested-actions\"\nexport * from \"./components/switch\"\nexport * from \"./components/table\"\nexport * from \"./components/tabs\"\nexport * from \"./components/textarea\"\nexport * from \"./components/timeline-activity\"\nexport * from \"./components/tooltip\"\nexport * from \"./components/variable-autocomplete\"\nexport * from \"./components/view-mode-toggle\"\nexport * from \"./components/virtualized-data-table\"\n\n// Charts (re-exported for backward compatibility with root imports)\nexport * from \"./charts/index\"\n\n// Prototype template system (re-exported for backward compatibility)\nexport * from \"./prototype/prototype-config\"\nexport * from \"./prototype/prototype-shell\"\nexport * from \"./prototype/prototype-inbox-view\"\nexport * from \"./prototype/prototype-insights-view\"\nexport * from \"./prototype/prototype-accounts-view\"\nexport * from \"./prototype/prototype-admin-view\"\nexport * from \"./prototype/prototype-work-queue-view\"\n"],"mappings":"AAMA,SAAS,UAAU;AACnB,SAAS,aAAa,sBAAsB;AAG5C,SAAS,mBAAmB;AAG5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,OAIK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB,iBAAiB;AAElD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;~~AAGd~~,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
1	+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/*\n @handled-ai/design-system\n * UI components and utilities (shadcn-style, New York)\n /\n\n// Utilities\nexport { cn } from \"./lib/utils\"\nexport { BRAND_ICONS, BRAND_GRAPHICS } from \"./lib/icons\"\n\n// Hooks\nexport { useIsMobile } from \"./hooks/use-mobile\"\n\n// Components (light — no recharts/nivo/three transitive deps)\nexport from \"./components/activity-detail\"\nexport * from \"./components/activity-log\"\nexport * from \"./components/agent-popover\"\nexport * from \"./components/agent-widget\"\nexport * from \"./components/avatar\"\nexport * from \"./components/badge\"\nexport * from \"./components/button\"\nexport * from \"./components/card\"\nexport * from \"./components/compliance-badge\"\nexport * from \"./components/contact-chip\"\nexport * from \"./components/contact-list\"\nexport * from \"./components/dashboard-cards\"\nexport * from \"./components/data-table\"\nexport * from \"./components/data-table-display\"\nexport * from \"./components/data-table-filter\"\nexport * from \"./components/data-table-quick-views\"\nexport * from \"./components/data-table-toolbar\"\nexport * from \"./components/detail-view\"\nexport * from \"./components/dialog\"\nexport * from \"./components/dropdown-menu\"\nexport * from \"./components/empty-state\"\nexport * from \"./components/entity-panel\"\nexport * from \"./components/filter-chip\"\nexport * from \"./components/inbox-row\"\nexport * from \"./components/inbox-toolbar\"\nexport * from \"./components/inline-banner\"\nexport * from \"./components/input\"\nexport * from \"./components/insights-filter-bar\"\nexport * from \"./components/item-list\"\nexport * from \"./components/item-list-display\"\nexport * from \"./components/item-list-filter\"\nexport * from \"./components/item-list-toolbar\"\nexport * from \"./components/kbd-hint\"\nexport * from \"./components/label\"\nexport * from \"./components/message\"\nexport * from \"./components/metric-card\"\nexport * from \"./components/performance-metrics-table\"\nexport * from \"./components/preview-list\"\nexport * from \"./components/progress\"\nexport * from \"./components/quick-action-chat-area\"\nexport {\n QuickActionModal,\n type QuickActionPriority,\n type QuickActionTaskDraft,\n type QuickActionTemplate,\n} from \"./components/quick-action-modal\"\nexport * from \"./components/quick-action-sidebar-nav\"\nexport * from \"./components/recommended-actions-section\"\nexport * from \"./components/report-card\"\nexport * from \"./components/rich-text-toolbar\"\nexport * from \"./components/score-analysis-modal\"\nexport * from \"./components/score-breakdown\"\nexport * from \"./components/score-feedback\"\nexport * from \"./components/score-ring\"\nexport * from \"./components/scroll-area\"\nexport * from \"./components/select\"\nexport * from \"./components/separator\"\nexport * from \"./components/sheet\"\nexport * from \"./components/sidebar\"\nexport * from \"./components/signal-feedback-inline\"\nexport * from \"./components/simple-data-table\"\nexport * from \"./components/skeleton\"\nexport * from \"./components/status-badge\"\nexport * from \"./components/step-timeline\"\nexport * from \"./components/sticky-action-bar\"\nexport * from \"./components/styled-bar-list\"\nexport { DraftFeedbackInline } from \"./components/draft-feedback-inline\"\nexport type { DraftFeedbackInlineProps } from \"./components/draft-feedback-inline\"\nexport { AccountContactsPopover, BrandIcon } from \"./components/account-contacts-popover\"\nexport type { AccountContactsPopoverProps } from \"./components/account-contacts-popover\"\nexport * from \"./components/suggested-actions\"\nexport * from \"./components/switch\"\nexport * from \"./components/table\"\nexport * from \"./components/tabs\"\nexport * from \"./components/textarea\"\nexport * from \"./components/timeline-activity\"\nexport * from \"./components/tooltip\"\nexport * from \"./components/variable-autocomplete\"\nexport * from \"./components/view-mode-toggle\"\nexport * from \"./components/virtualized-data-table\"\nexport type { ColumnSizingState } from \"@tanstack/react-table\"\n\n// Charts (re-exported for backward compatibility with root imports)\nexport * from \"./charts/index\"\n\n// Prototype template system (re-exported for backward compatibility)\nexport * from \"./prototype/prototype-config\"\nexport * from \"./prototype/prototype-shell\"\nexport * from \"./prototype/prototype-inbox-view\"\nexport * from \"./prototype/prototype-insights-view\"\nexport * from \"./prototype/prototype-accounts-view\"\nexport * from \"./prototype/prototype-admin-view\"\nexport * from \"./prototype/prototype-work-queue-view\"\n"],"mappings":"AAMA,SAAS,UAAU;AACnB,SAAS,aAAa,sBAAsB;AAG5C,SAAS,mBAAmB;AAG5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,OAIK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB,iBAAiB;AAElD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.14.8",
+  "version": "0.14.10",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

package/src/components/__tests__/virtualized-data-table-resize.test.tsx ADDED Viewed

@@ -0,0 +1,524 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { VirtualizedDataTable } from "../virtualized-data-table";
+// Verify the barrel re-export compiles (type-only import used below in tests)
+import type { ColumnDef } from "@tanstack/react-table";
+import type { ColumnSizingState } from "../../index";
+type TestRow = { id: string; name: string; value: number };
+const testColumns: ColumnDef<TestRow, unknown>[] = [
+  { accessorKey: "name", header: "Name", size: 200, minSize: 100 },
+  { accessorKey: "value", header: "Value", size: 150, minSize: 80 },
+];
+const testData: TestRow[] = [
+  { id: "1", name: "Alpha", value: 10 },
+  { id: "2", name: "Beta", value: 20 },
+];
+// ─── Group 1: Feature disabled by default ─────────────────────────────────────
+describe("VirtualizedDataTable — resize disabled by default", () => {
+  it("does not render resize handles when enableColumnResizing is omitted", () => {
+    const { container } = render(
+      <VirtualizedDataTable columns={testColumns} data={testData} height={300} />,
+    );
+    expect(container.querySelectorAll('[role="separator"]').length).toBe(0);
+  });
+  it("does not render resize handles when enableColumnResizing={false} explicitly", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing={false}
+      />,
+    );
+    expect(container.querySelectorAll('[role="separator"]').length).toBe(0);
+  });
+});
+// ─── Group 2: Handles appear and are correctly structured ─────────────────────
+describe("VirtualizedDataTable — resize handles render when enabled", () => {
+  it("renders one resize handle per resizable column", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    expect(container.querySelectorAll('[role="separator"]').length).toBe(2);
+  });
+  it("each handle has aria-orientation='vertical'", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    container.querySelectorAll('[role="separator"]').forEach((sep) => {
+      expect(sep.getAttribute("aria-orientation")).toBe("vertical");
+    });
+  });
+  it("each handle has cursor-col-resize class", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    container.querySelectorAll('[role="separator"]').forEach((sep) => {
+      expect(sep.classList.contains("cursor-col-resize")).toBe(true);
+    });
+  });
+  it("header cells have 'relative' class when resizing is enabled", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    container.querySelectorAll('[role="columnheader"]').forEach((h) => {
+      expect((h as HTMLElement).classList.contains("relative")).toBe(true);
+    });
+  });
+  it("resizable header cells get pr-4 padding to prevent overlap with sort text", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    // Every header cell whose column can resize must have pr-4
+    container.querySelectorAll('[role="columnheader"]').forEach((h) => {
+      expect((h as HTMLElement).classList.contains("pr-4")).toBe(true);
+    });
+  });
+  it("non-resizable columns do NOT get pr-4 padding", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      { accessorKey: "name", header: "Name", size: 200, enableResizing: false },
+      { accessorKey: "value", header: "Value", size: 150 },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    // First column: enableResizing=false → no pr-4
+    expect((headers[0] as HTMLElement).classList.contains("pr-4")).toBe(false);
+    // Second column: resizable → has pr-4
+    expect((headers[1] as HTMLElement).classList.contains("pr-4")).toBe(true);
+  });
+  it("does not render a handle for a column with enableResizing: false", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      { accessorKey: "name", header: "Name", size: 200, enableResizing: false },
+      { accessorKey: "value", header: "Value", size: 150 },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    expect(container.querySelectorAll('[role="separator"]').length).toBe(1);
+  });
+});
+// ─── Group 3: Initial sizing from column defs ─────────────────────────────────
+describe("VirtualizedDataTable — initial column sizes", () => {
+  it("header cells render at their declared size", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    expect((headers[0] as HTMLElement).style.width).toBe("200px");
+    expect((headers[1] as HTMLElement).style.width).toBe("150px");
+  });
+  it("column cannot be dragged below its minSize (onChange mode)", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    // Start at x=200, drag far left past minSize=100 → delta of -150 would give 50px
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 50 });
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    expect(parseInt(header.style.width, 10)).toBeGreaterThanOrEqual(100);
+    fireEvent.mouseUp(document);
+  });
+});
+// ─── Group 4: columnResizeMode="onEnd" (new default) ─────────────────────────
+//
+// With onEnd, sizing state is committed at mouseUp, not during mousemove.
+// Width in the DOM should be unchanged mid-drag, then reflect the new size
+// after mouseUp.
+describe("VirtualizedDataTable — columnResizeMode onEnd (default)", () => {
+  it("header width does NOT change during mousemove (committed on mouseUp)", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        // columnResizeMode defaults to "onEnd" — do not pass it explicitly
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    const widthBeforeDrag = header.style.width;
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 260 }); // mid-drag: should not change yet
+    expect(header.style.width).toBe(widthBeforeDrag);
+    fireEvent.mouseUp(document);
+  });
+  it("header width changes after mouseUp completes the drag", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        // "onEnd" default
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    const widthBefore = parseInt(header.style.width, 10);
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 260 }); // +60px delta
+    fireEvent.mouseUp(document); // commits the resize
+    expect(parseInt(header.style.width, 10)).toBeGreaterThan(widthBefore);
+  });
+  it("onColumnSizingChange is called on mouseUp (not mousemove) in onEnd mode", () => {
+    const onSizingChange = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnSizing={{}}
+        onColumnSizingChange={onSizingChange}
+        // "onEnd" default
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 250 });
+    // Should NOT have been called yet mid-drag in onEnd mode
+    expect(onSizingChange).not.toHaveBeenCalled();
+    fireEvent.mouseUp(document);
+    // Now it should fire
+    expect(onSizingChange).toHaveBeenCalled();
+  });
+});
+// ─── Group 5: Drag changes column width (onChange mode) ───────────────────────
+describe("VirtualizedDataTable — drag resizing with columnResizeMode='onChange'", () => {
+  it("dragging right increases column width", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    const widthBefore = parseInt(header.style.width, 10);
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 260 }); // +60px delta
+    fireEvent.mouseUp(document);
+    expect(parseInt(header.style.width, 10)).toBeGreaterThan(widthBefore);
+  });
+  it("dragging left decreases column width", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    const widthBefore = parseInt(header.style.width, 10);
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 160 }); // -40px delta
+    fireEvent.mouseUp(document);
+    expect(parseInt(header.style.width, 10)).toBeLessThan(widthBefore);
+  });
+  it("dragging one column does not change the adjacent column's width", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separators = container.querySelectorAll('[role="separator"]');
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    const secondWidthBefore = parseInt((headers[1] as HTMLElement).style.width, 10);
+    fireEvent.mouseDown(separators[0], { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 260 });
+    fireEvent.mouseUp(document);
+    expect(parseInt((headers[1] as HTMLElement).style.width, 10)).toBe(secondWidthBefore);
+  });
+  it("does not throw during resize in uncontrolled mode (no sizing props)", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    expect(() => {
+      fireEvent.mouseDown(separator, { clientX: 200 });
+      fireEvent.mouseMove(document, { clientX: 250 });
+      fireEvent.mouseUp(document);
+    }).not.toThrow();
+  });
+});
+// ─── Group 6: Controlled mode ─────────────────────────────────────────────────
+describe("VirtualizedDataTable — controlled columnSizing", () => {
+  it("external columnSizing prop overrides the column def size", () => {
+    const sizing: ColumnSizingState = { name: 300 };
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnSizing={sizing}
+      />,
+    );
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    expect((headers[0] as HTMLElement).style.width).toBe("300px");
+    // Column not in sizing map keeps its column-def default
+    expect((headers[1] as HTMLElement).style.width).toBe("150px");
+  });
+  it("onColumnSizingChange is called when a resize drag occurs (onChange mode)", () => {
+    const onSizingChange = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+        columnSizing={{}}
+        onColumnSizingChange={onSizingChange}
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 250 });
+    expect(onSizingChange).toHaveBeenCalled();
+    fireEvent.mouseUp(document);
+  });
+  it("renders correctly when columnSizing is provided without onColumnSizingChange", () => {
+    const sizing: ColumnSizingState = { name: 280 };
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnSizing={sizing}
+      />,
+    );
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    expect(header.style.width).toBe("280px");
+  });
+});
+// ─── Group 7: Cell widths track header widths ─────────────────────────────────
+describe("VirtualizedDataTable — cell widths track column widths", () => {
+  it("row cells match the column width after a resize drag (onChange mode)", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 260 });
+    fireEvent.mouseUp(document);
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    const newHeaderWidth = header.style.width;
+    // Data rows (aria-rowindex present) are rendered by the virtualizer.
+    // In happy-dom (no layout engine) the virtualizer may produce zero virtual
+    // items; if rows are present, verify their first cell tracks the header width.
+    const rows = container.querySelectorAll('[role="row"]');
+    for (let i = 1; i < rows.length; i++) {
+      const firstCell = rows[i].querySelector('[role="cell"]') as HTMLElement | null;
+      if (firstCell) {
+        expect(firstCell.style.width).toBe(newHeaderWidth);
+      }
+    }
+  });
+});
+// ─── Group 8: No regressions with enableColumnResizing on ────────────────────
+describe("VirtualizedDataTable — no regressions with enableColumnResizing on", () => {
+  it("onSortingChange fires when a sortable header is clicked", () => {
+    const columnsWithSort: ColumnDef<TestRow, unknown>[] = [
+      { accessorKey: "name", header: "Name", size: 200, enableSorting: true },
+      { accessorKey: "value", header: "Value", size: 150, enableSorting: true },
+    ];
+    const onSortingChange = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columnsWithSort}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        sorting={[]}
+        onSortingChange={onSortingChange}
+      />,
+    );
+    const sortButton = container.querySelector('[role="columnheader"] button')!;
+    fireEvent.click(sortButton);
+    expect(onSortingChange).toHaveBeenCalled();
+  });
+  it("onRowClick prop is accepted without error; scroll container is present", () => {
+    // The virtualizer produces no virtual rows in happy-dom (no layout engine),
+    // so we verify the component mounts cleanly with onRowClick wired and that
+    // the table scroll container is in the DOM.
+    const onRowClick = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        onRowClick={onRowClick}
+      />,
+    );
+    expect(container.querySelector('[role="table"]')).not.toBeNull();
+    // If the virtualizer happens to render rows, clicking them calls onRowClick
+    const dataRows = Array.from(
+      container.querySelectorAll('[role="row"]'),
+    ).filter((r) => r.getAttribute("aria-rowindex") !== null);
+    if (dataRows.length > 0) {
+      fireEvent.click(dataRows[0]);
+      expect(onRowClick).toHaveBeenCalled();
+    }
+  });
+  it("empty state renders correctly when data is empty and resizing is enabled", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={[]}
+        height={300}
+        enableColumnResizing
+        emptyMessage="Nothing here"
+      />,
+    );
+    expect(container.textContent).toContain("Nothing here");
+  });
+});
+// ─── Group 9: Barrel re-export of ColumnSizingState ──────────────────────────
+describe("VirtualizedDataTable — ColumnSizingState barrel re-export", () => {
+  it("ColumnSizingState from the barrel index is compatible with the columnSizing prop", () => {
+    // This test is intentionally type-level: the import at the top of this file
+    // uses `import type { ColumnSizingState } from '../../index'`. If the barrel
+    // no longer re-exports it, tsc (run via `pnpm typecheck`) will error.
+    // At runtime we just verify the prop is accepted with a well-typed value.
+    const sizing: ColumnSizingState = { name: 250 };
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnSizing={sizing}
+      />,
+    );
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    expect(header.style.width).toBe("250px");
+  });
+});

package/src/components/data-table-filter.tsx CHANGED Viewed

@@ -39,6 +39,8 @@ interface DataTableFilterProps {
   selectedFilters: Record<string, string[]>
   onToggleFilter: (categoryId: string, option: string) => void
   className?: string
+  /** Minimum number of options before showing the sub-menu search input. Defaults to 8. */
+  optionSearchThreshold?: number
 }
 export function DataTableFilter({
@@ -46,6 +48,7 @@ export function DataTableFilter({
   selectedFilters,
   onToggleFilter,
   className,
+  optionSearchThreshold = 8,
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
   const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})
@@ -139,7 +142,7 @@ export function DataTableFilter({
                 </DropdownMenuSubTrigger>
                 <DropdownMenuSubContent className="max-h-[320px] w-52 overflow-y-auto p-1">
                   {/* Submenu search — only for categories with many options */}
-                  {category.options.length > 7 && (
+                  {category.options.length > optionSearchThreshold && (
                     <div className="sticky top-0 z-10 border-b border-border bg-popover p-1.5">
                       <div className="relative">
                         <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
@@ -151,7 +154,14 @@ export function DataTableFilter({
                             setSubQueries((prev) => ({ ...prev, [category.id]: e.target.value }))
                           }
                           onClick={(e) => e.stopPropagation()}
-                          onKeyDown={(e) => e.stopPropagation()}
+                          onKeyDown={(e) => {
+                            // Allow navigation keys to propagate to Radix menu handling
+                            // so keyboard users can move to and select filtered options.
+                            const navKeys = ["ArrowDown", "ArrowUp", "Enter", "Escape", "Tab"]
+                            if (!navKeys.includes(e.key)) {
+                              e.stopPropagation()
+                            }
+                          }}
                         />
                       </div>
                     </div>

package/src/components/virtualized-data-table.tsx CHANGED Viewed

@@ -10,6 +10,7 @@ import {
   type SortingState,
   type ColumnFiltersState,
   type VisibilityState,
+  type ColumnSizingState,
   type OnChangeFn,
 } from "@tanstack/react-table"
 import { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from "lucide-react"
@@ -36,6 +37,12 @@ export interface VirtualizedDataTableProps<TData> {
   hasMore?: boolean
   isFetchingMore?: boolean
+  // Column resizing
+  enableColumnResizing?: boolean
+  columnResizeMode?: "onChange" | "onEnd"
+  columnSizing?: ColumnSizingState
+  onColumnSizingChange?: OnChangeFn<ColumnSizingState>
   // Server-driven state (controlled) — omit for internal state
   sorting?: SortingState
   onSortingChange?: OnChangeFn<SortingState>
@@ -66,6 +73,10 @@ export function VirtualizedDataTable<TData>({
   reachBottomThreshold = 5,
   hasMore = true,
   isFetchingMore,
+  enableColumnResizing = false,
+  columnResizeMode = "onEnd",
+  columnSizing,
+  onColumnSizingChange,
   sorting,
   onSortingChange,
   columnFilters,
@@ -97,6 +108,13 @@ export function VirtualizedDataTable<TData>({
   const resolvedOnColumnVisibilityChange =
     onColumnVisibilityChange ?? setInternalColumnVisibility
+  // Controlled/uncontrolled state for column sizing
+  const [internalColumnSizing, setInternalColumnSizing] =
+    React.useState<ColumnSizingState>({})
+  const resolvedColumnSizing = columnSizing ?? internalColumnSizing
+  const resolvedOnColumnSizingChange =
+    onColumnSizingChange ?? setInternalColumnSizing
   // TanStack Table setup
   const table = useReactTable({
     data,
@@ -106,10 +124,14 @@ export function VirtualizedDataTable<TData>({
       sorting: resolvedSorting,
       columnFilters: resolvedColumnFilters,
       columnVisibility: resolvedColumnVisibility,
+      columnSizing: resolvedColumnSizing,
     },
     onSortingChange: resolvedOnSortingChange,
     onColumnFiltersChange: resolvedOnColumnFiltersChange,
     onColumnVisibilityChange: resolvedOnColumnVisibilityChange,
+    onColumnSizingChange: resolvedOnColumnSizingChange,
+    enableColumnResizing,
+    columnResizeMode,
     manualSorting: true,
     manualFiltering: true,
     manualPagination: true,
@@ -188,7 +210,10 @@ export function VirtualizedDataTable<TData>({
               {headerGroup.headers.map((header, colIdx) => (
                 <div
                   key={header.id}
-                  className="h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap"
+                  className={cn(
+                    "h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative",
+                    header.column.getCanResize() && "pr-4",
+                  )}
                   style={{
                     width: header.getSize(),
                     minWidth: header.getSize(),
@@ -229,6 +254,20 @@ export function VirtualizedDataTable<TData>({
                       header.getContext(),
                     )
                   )}
+                  {header.column.getCanResize() && (
+                    <div
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                      className={cn(
+                        "absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none",
+                        "after:absolute after:right-1.5 after:top-0 after:h-full after:w-px",
+                        "after:bg-transparent hover:after:bg-primary/30",
+                        header.column.getIsResizing() && "after:bg-primary/50",
+                      )}
+                      role="separator"
+                      aria-orientation="vertical"
+                    />
+                  )}
                 </div>
               ))}
             </div>

package/src/index.ts CHANGED Viewed

@@ -91,6 +91,7 @@ export * from "./components/tooltip"
 export * from "./components/variable-autocomplete"
 export * from "./components/view-mode-toggle"
 export * from "./components/virtualized-data-table"
+export type { ColumnSizingState } from "@tanstack/react-table"
 // Charts (re-exported for backward compatibility with root imports)
 export * from "./charts/index"