@handled-ai/design-system 0.14.7 → 0.14.10

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

@@ -15,11 +15,23 @@ import {
   DropdownMenuTrigger,
 } from "./dropdown-menu"
 
+export interface FilterOption {
+  label: string
+  value: string
+}
+
 export interface DataTableFilterCategory {
   id: string
   label: string
   icon: React.ComponentType<{ className?: string }>
-  options: string[]
+  options: (string | FilterOption)[]
+}
+
+function getOptionValue(option: string | FilterOption): string {
+  return typeof option === "string" ? option : option.value
+}
+function getOptionLabel(option: string | FilterOption): string {
+  return typeof option === "string" ? option : option.label
 }
 
 interface DataTableFilterProps {
@@ -27,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({
@@ -34,8 +48,10 @@ export function DataTableFilter({
   selectedFilters,
   onToggleFilter,
   className,
+  optionSearchThreshold = 8,
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
+  const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})
 
   const visibleCategories = React.useMemo(() => {
     const normalized = query.trim().toLowerCase()
@@ -49,7 +65,7 @@ export function DataTableFilter({
       }
 
       return category.options.some((option) =>
-        option.toLowerCase().includes(normalized)
+        getOptionLabel(option).toLowerCase().includes(normalized)
       )
     })
   }, [categories, query])
@@ -99,38 +115,89 @@ export function DataTableFilter({
         </div>
 
         <div className="max-h-[320px] overflow-y-auto p-1">
-          {visibleCategories.map((category) => (
-            <DropdownMenuSub key={category.id}>
-              <DropdownMenuSubTrigger className="cursor-pointer py-1.5 text-xs">
-                <category.icon className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
-                {category.label}
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent className="w-52 p-1">
-                {category.options.map((option) => {
-                  const selected =
-                    selectedFilters[category.id]?.includes(option) ?? false
+          {visibleCategories.map((category) => {
+            const subQuery = (subQueries[category.id] ?? "").trim().toLowerCase()
+            const filteredOptions = subQuery
+              ? category.options.filter((opt) =>
+                  getOptionLabel(opt).toLowerCase().includes(subQuery)
+                )
+              : category.options
 
-                  return (
-                    <DropdownMenuItem
-                      key={option}
-                      className="cursor-pointer justify-between text-xs"
-                      onSelect={(event) => {
-                        event.preventDefault()
-                        onToggleFilter(category.id, option)
-                      }}
-                    >
-                      {option}
-                      {selected ? (
-                        <span className="text-[10px] font-semibold text-brand-purple">
-                          Applied
-                        </span>
-                      ) : null}
-                    </DropdownMenuItem>
-                  )
-                })}
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-          ))}
+            return (
+              <DropdownMenuSub
+                key={category.id}
+                onOpenChange={(open) => {
+                  if (!open) {
+                    setSubQueries((prev) => {
+                      const next = { ...prev }
+                      delete next[category.id]
+                      return next
+                    })
+                  }
+                }}
+              >
+                <DropdownMenuSubTrigger className="cursor-pointer py-1.5 text-xs">
+                  <category.icon className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
+                  {category.label}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent className="max-h-[320px] w-52 overflow-y-auto p-1">
+                  {/* Submenu search — only for categories with many options */}
+                  {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" />
+                        <input
+                          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"
+                          placeholder="Search..."
+                          value={subQueries[category.id] ?? ""}
+                          onChange={(e) =>
+                            setSubQueries((prev) => ({ ...prev, [category.id]: e.target.value }))
+                          }
+                          onClick={(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>
+                  )}
+                  {/* Filtered options */}
+                  {filteredOptions.map((option) => {
+                    const value = getOptionValue(option)
+                    const label = getOptionLabel(option)
+                    const selected = selectedFilters[category.id]?.includes(value) ?? false
+                    return (
+                      <DropdownMenuItem
+                        key={value}
+                        className="cursor-pointer justify-between text-xs"
+                        onSelect={(event) => {
+                          event.preventDefault()
+                          onToggleFilter(category.id, value)
+                        }}
+                      >
+                        {label}
+                        {selected ? (
+                          <span className="text-[10px] font-semibold text-brand-purple">
+                            Applied
+                          </span>
+                        ) : null}
+                      </DropdownMenuItem>
+                    )
+                  })}
+                  {filteredOptions.length === 0 && category.options.length > 0 && (
+                    <div className="p-2 text-center text-xs text-muted-foreground">
+                      No matches
+                    </div>
+                  )}
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            )
+          })}
 
           {visibleCategories.length === 0 ? (
             <div className="p-2 text-center text-xs text-muted-foreground">

package/src/components/data-table.tsx

@@ -49,6 +49,7 @@ export type DataRow = {
   headcount: string
   lastFunding: string
   owner: string
+  ownerEmail?: string
   opportunityCount: number
   productAdoptionScore: number
   sourceSystem?: string
@@ -477,7 +478,7 @@ function isRowMatchingCategoryFilter(
     case "lastFunding":
       return options.includes(row.lastFunding)
     case "owner":
-      return options.includes(row.owner)
+      return options.includes(row.ownerEmail ?? row.owner)
     case "opportunityCount":
       return options.some((option) => {
         if (option === "3+") {

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

@@ -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

@@ -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"