@handled-ai/design-system 0.14.10 → 0.16.0

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

@@ -34,13 +34,19 @@ function getOptionLabel(option: string | FilterOption): string {
   return typeof option === "string" ? option : option.label
 }
 
-interface DataTableFilterProps {
+export interface DataTableFilterProps {
   categories: DataTableFilterCategory[]
   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
+  /** Filters applied by default. Shown as distinct chips that can be toggled off but not dismissed. */
+  presetFilters?: Record<string, string[]>
+  /** Callback when a preset filter is toggled on/off. */
+  onTogglePreset?: (categoryId: string, option: string) => void
+  /** Label shown on preset chips to distinguish from user-applied filters. Default: "Default". */
+  presetLabel?: string
 }
 
 export function DataTableFilter({
@@ -49,6 +55,9 @@ export function DataTableFilter({
   onToggleFilter,
   className,
   optionSearchThreshold = 8,
+  presetFilters,
+  onTogglePreset,
+  presetLabel = "Default",
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
   const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})
@@ -70,16 +79,61 @@ export function DataTableFilter({
     })
   }, [categories, query])
 
-  const activeCount = React.useMemo(
-    () =>
-      Object.values(selectedFilters).reduce(
-        (count, selected) => count + selected.length,
-        0
-      ),
-    [selectedFilters]
+  /** Check if a specific option is a preset filter */
+  const isPresetOption = React.useCallback(
+    (categoryId: string, value: string): boolean => {
+      return presetFilters?.[categoryId]?.includes(value) ?? false
+    },
+    [presetFilters]
   )
 
-  return (
+  const activeCount = React.useMemo(() => {
+    // Count user-selected filters
+    const userCount = Object.values(selectedFilters).reduce(
+      (count, selected) => count + selected.length,
+      0
+    )
+
+    // Count active preset filters (those that are in presetFilters AND currently active in selectedFilters)
+    let presetCount = 0
+    if (presetFilters) {
+      for (const [categoryId, presetValues] of Object.entries(presetFilters)) {
+        for (const value of presetValues) {
+          // Only count if the preset is active (in selectedFilters) but NOT already counted as a user filter
+          if (selectedFilters[categoryId]?.includes(value)) {
+            // Already counted in userCount, skip
+          } else {
+            // Not in selectedFilters — it's an inactive preset, don't count
+          }
+        }
+      }
+    }
+
+    return userCount + presetCount
+  }, [selectedFilters, presetFilters])
+
+  /** Collect all preset chips to render */
+  const presetChips = React.useMemo(() => {
+    if (!presetFilters) return []
+
+    const chips: { categoryId: string; value: string; label: string; active: boolean }[] = []
+
+    for (const [categoryId, values] of Object.entries(presetFilters)) {
+      const category = categories.find((c) => c.id === categoryId)
+      for (const value of values) {
+        const option = category?.options.find(
+          (opt) => getOptionValue(opt) === value
+        )
+        const label = option ? getOptionLabel(option) : value
+        const active = selectedFilters[categoryId]?.includes(value) ?? false
+        chips.push({ categoryId, value, label, active })
+      }
+    }
+
+    return chips
+  }, [presetFilters, categories, selectedFilters])
+
+  const triggerButton = (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
@@ -171,6 +225,7 @@ export function DataTableFilter({
                     const value = getOptionValue(option)
                     const label = getOptionLabel(option)
                     const selected = selectedFilters[category.id]?.includes(value) ?? false
+                    const isPreset = isPresetOption(category.id, value)
                     return (
                       <DropdownMenuItem
                         key={value}
@@ -182,9 +237,15 @@ export function DataTableFilter({
                       >
                         {label}
                         {selected ? (
-                          <span className="text-[10px] font-semibold text-brand-purple">
-                            Applied
-                          </span>
+                          isPreset ? (
+                            <span className="text-brand-purple text-[10px] font-semibold">
+                              {presetLabel}
+                            </span>
+                          ) : (
+                            <span className="text-[10px] font-semibold text-brand-purple">
+                              Applied
+                            </span>
+                          )
                         ) : null}
                       </DropdownMenuItem>
                     )
@@ -208,4 +269,33 @@ export function DataTableFilter({
       </DropdownMenuContent>
     </DropdownMenu>
   )
+
+  // If there are preset chips, wrap trigger + chips together
+  if (presetChips.length > 0) {
+    return (
+      <div className="flex flex-wrap items-center gap-1.5">
+        {triggerButton}
+        {presetChips.map((chip) => (
+          <button
+            key={`${chip.categoryId}-${chip.value}`}
+            type="button"
+            onClick={() => onTogglePreset?.(chip.categoryId, chip.value)}
+            className={cn(
+              "inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-medium transition-colors",
+              chip.active
+                ? "border-dashed border-brand-purple/30 bg-brand-purple/5 text-brand-purple/80"
+                : "border-border/40 bg-transparent text-muted-foreground/60 line-through"
+            )}
+          >
+            <span className="text-brand-purple/50 text-[10px]">
+              {presetLabel}:{" "}
+            </span>
+            {chip.label}
+          </button>
+        ))}
+      </div>
+    )
+  }
+
+  return triggerButton
 }

package/src/components/entity-panel.tsx

@@ -242,7 +242,7 @@ export interface EntityMetadataField {
 
 export function EntityMetadataGrid({ fields }: { fields: EntityMetadataField[] }) {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-[140px_1fr] gap-y-3 gap-x-4 mb-7 text-[13px]">
+    <div className="grid grid-cols-1 md:grid-cols-[140px_1fr] gap-y-3 gap-x-4 mb-7 text-[13px] overflow-hidden">
       {fields.map((field, idx) => (
         <React.Fragment key={idx}>
           <div className="flex items-center gap-1.5 text-muted-foreground text-[13px] font-normal">

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

@@ -13,10 +13,26 @@ import {
   type ColumnSizingState,
   type OnChangeFn,
 } from "@tanstack/react-table"
-import { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from "lucide-react"
+import type { RowData } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, EyeOff, Check, SearchX, Loader2 } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "./dropdown-menu"
 
 import { cn } from "../lib/utils"
 
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    /** Server-side sort key for this column. Enables sort in the header menu when onColumnSort is also provided. */
+    sortKey?: string
+  }
+}
+
 export interface VirtualizedDataTableProps<TData> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   columns: ColumnDef<TData, any>[]
@@ -57,6 +73,16 @@ export interface VirtualizedDataTableProps<TData> {
   emptyMessage?: string
   emptyDescription?: string
 
+  // Column header menu
+  /** Called when user requests sorting from column header. columnId is the column's meta.sortKey. */
+  onColumnSort?: (columnId: string, direction: "asc" | "desc") => void
+  /** Called when user hides a column from the header menu. */
+  onColumnHide?: (columnId: string) => void
+  /** The currently active sort column ID — matches a column's meta.sortKey. Used for visual indicators and aria-sort. */
+  activeSortColumn?: string | null
+  /** The current sort direction. Used for visual indicators and aria-sort. */
+  activeSortDirection?: "asc" | "desc"
+
   // Styling
   className?: string
 }
@@ -83,6 +109,10 @@ export function VirtualizedDataTable<TData>({
   onColumnFiltersChange,
   columnVisibility,
   onColumnVisibilityChange,
+  onColumnSort,
+  onColumnHide,
+  activeSortColumn,
+  activeSortDirection,
   isLoading,
   emptyIcon,
   emptyMessage = "No rows found",
@@ -207,69 +237,150 @@ export function VirtualizedDataTable<TData>({
               className="flex w-max min-w-full border-b border-border/50"
               role="row"
             >
-              {headerGroup.headers.map((header, colIdx) => (
-                <div
-                  key={header.id}
-                  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(),
-                  }}
-                  role="columnheader"
-                  aria-colindex={colIdx + 1}
-                  aria-sort={
-                    header.column.getIsSorted() === "asc"
-                      ? "ascending"
-                      : header.column.getIsSorted() === "desc"
-                        ? "descending"
-                        : header.column.getCanSort()
-                          ? "none"
-                          : undefined
+              {headerGroup.headers.map((header, colIdx) => {
+                const sortKey = header.column.columnDef.meta?.sortKey
+                const canServerSort = Boolean(sortKey && onColumnSort)
+
+                const resolvedAriaSort = (() => {
+                  if (activeSortColumn !== undefined) {
+                    // Server-driven
+                    if (!sortKey) return undefined
+                    if (activeSortColumn === sortKey) return activeSortDirection === "asc" ? "ascending" as const : "descending" as const
+                    return "none" as const
                   }
-                >
-                  {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                    <button
-                      type="button"
-                      className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
-                      onClick={header.column.getToggleSortingHandler()}
-                    >
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
-                      {header.column.getIsSorted() === "asc" ? (
-                        <ArrowUp className="w-3 h-3" />
-                      ) : header.column.getIsSorted() === "desc" ? (
-                        <ArrowDown className="w-3 h-3" />
-                      ) : (
-                        <ArrowUpDown className="w-3 h-3 opacity-40" />
-                      )}
-                    </button>
-                  ) : (
-                    flexRender(
-                      header.column.columnDef.header,
-                      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>
-              ))}
+                  // Fallback to TanStack state
+                  const sorted = header.column.getIsSorted()
+                  if (sorted === "asc") return "ascending" as const
+                  if (sorted === "desc") return "descending" as const
+                  if (header.column.getCanSort()) return "none" as const
+                  return undefined
+                })()
+
+                const sortIcon = (() => {
+                  if (!canServerSort) return null
+                  if (activeSortColumn === sortKey && activeSortDirection === "asc") return <ArrowUp className="w-3 h-3" />
+                  if (activeSortColumn === sortKey && activeSortDirection === "desc") return <ArrowDown className="w-3 h-3" />
+                  return <ArrowUpDown className="w-3 h-3 opacity-40" />
+                })()
+
+                const handleHeaderClick = canServerSort ? () => {
+                  const newDir = activeSortColumn === sortKey
+                    ? (activeSortDirection === "asc" ? "desc" : "asc")
+                    : "asc"
+                  onColumnSort!(sortKey!, newDir)
+                } : undefined
+
+                return (
+                  <div
+                    key={header.id}
+                    className={cn(
+                      "group/header 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(),
+                    }}
+                    role="columnheader"
+                    aria-colindex={colIdx + 1}
+                    aria-sort={resolvedAriaSort}
+                  >
+                    {header.isPlaceholder ? null : (
+                      <>
+                        {canServerSort ? (
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+                            onClick={handleHeaderClick}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {sortIcon}
+                          </button>
+                        ) : header.column.getCanSort() ? (
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                            {header.column.getIsSorted() === "asc" ? (
+                              <ArrowUp className="w-3 h-3" />
+                            ) : header.column.getIsSorted() === "desc" ? (
+                              <ArrowDown className="w-3 h-3" />
+                            ) : (
+                              <ArrowUpDown className="w-3 h-3 opacity-40" />
+                            )}
+                          </button>
+                        ) : (
+                          flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )
+                        )}
+                        {(canServerSort || header.column.getCanSort() || header.column.getCanHide()) && (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <button
+                                type="button"
+                                className="ml-1 inline-flex items-center hover:text-foreground transition-all opacity-0 group-hover/header:opacity-100"
+                                aria-label="Column actions"
+                              >
+                                <ChevronDown className="w-3 h-3" />
+                              </button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="w-48">
+                              <DropdownMenuItem
+                                disabled={!canServerSort}
+                                onClick={() => canServerSort && onColumnSort!(sortKey!, "asc")}
+                              >
+                                <ArrowUp className="w-3.5 h-3.5 mr-2" />
+                                Sort ascending
+                                {activeSortColumn === sortKey && activeSortDirection === "asc" && <Check className="w-3.5 h-3.5 ml-auto" />}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                disabled={!canServerSort}
+                                onClick={() => canServerSort && onColumnSort!(sortKey!, "desc")}
+                              >
+                                <ArrowDown className="w-3.5 h-3.5 mr-2" />
+                                Sort descending
+                                {activeSortColumn === sortKey && activeSortDirection === "desc" && <Check className="w-3.5 h-3.5 ml-auto" />}
+                              </DropdownMenuItem>
+                              {header.column.getCanHide() && (
+                                <>
+                                  <DropdownMenuSeparator />
+                                  <DropdownMenuItem
+                                    onClick={() => onColumnHide ? onColumnHide(header.column.id) : header.column.toggleVisibility(false)}
+                                  >
+                                    <EyeOff className="w-3.5 h-3.5 mr-2" />
+                                    Hide column
+                                  </DropdownMenuItem>
+                                </>
+                              )}
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        )}
+                      </>
+                    )}
+                    {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>
           ))}
         </div>

package/src/index.ts

@@ -19,6 +19,7 @@ export * from "./components/avatar"
 export * from "./components/badge"
 export * from "./components/button"
 export * from "./components/card"
+export { CollapsibleSection, type CollapsibleSectionProps } from "./components/collapsible-section"
 export * from "./components/compliance-badge"
 export * from "./components/contact-chip"
 export * from "./components/contact-list"