@handled-ai/design-system 0.15.1 → 0.16.0

package/src/components/__tests__/data-table-filter-presets.test.tsx

@@ -0,0 +1,209 @@
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, fireEvent } from "@testing-library/react"
+import { DataTableFilter } from "../data-table-filter"
+import { ListFilter } from "lucide-react"
+
+const categories = [
+  {
+    id: "status",
+    label: "Status",
+    icon: ListFilter,
+    options: [
+      { value: "open", label: "Open" },
+      { value: "closed", label: "Closed" },
+    ],
+  },
+  {
+    id: "type",
+    label: "Type",
+    icon: ListFilter,
+    options: [
+      { value: "churn", label: "Churn-Risk" },
+      { value: "other", label: "Other" },
+    ],
+  },
+]
+
+describe("DataTableFilter – preset support", () => {
+  it("renders preset chips below trigger button", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    // Should have a wrapper div with flex-wrap
+    const wrapper = container.firstElementChild
+    expect(wrapper).not.toBeNull()
+    expect(wrapper!.className).toContain("flex")
+    expect(wrapper!.className).toContain("flex-wrap")
+
+    // Should have a preset chip button (not the dropdown trigger)
+    const buttons = container.querySelectorAll("button")
+    // One trigger button + one preset chip
+    expect(buttons.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it("preset chips show 'Default:' prefix label", () => {
+    const { getByText } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    // The chip should contain the label text
+    expect(getByText("Open")).not.toBeNull()
+  })
+
+  it("preset chips have no X dismiss button", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    // No X icon — preset chips should not have a dismiss button with aria-label close or X text
+    const allButtons = container.querySelectorAll("button")
+    for (const btn of allButtons) {
+      const text = btn.textContent ?? ""
+      // Preset chip buttons should not have just "X" as text content
+      if (text.includes("Open") && text.includes("Default")) {
+        // This is the preset chip, should not contain an "×" or "X" dismiss icon child
+        const xIcon = btn.querySelector('[data-testid="dismiss"]')
+        expect(xIcon).toBeNull()
+      }
+    }
+  })
+
+  it("clicking preset chip calls onTogglePreset", () => {
+    const onTogglePreset = vi.fn()
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={onTogglePreset}
+      />
+    )
+
+    // Find the preset chip button (contains "Open" and "Default")
+    const buttons = container.querySelectorAll("button")
+    const presetChip = Array.from(buttons).find(
+      (btn) => btn.textContent?.includes("Open") && btn.textContent?.includes("Default")
+    )
+    expect(presetChip).not.toBeUndefined()
+
+    fireEvent.click(presetChip!)
+    expect(onTogglePreset).toHaveBeenCalledWith("status", "open")
+  })
+
+  it("deactivated preset chips show muted/line-through style", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    // Find the preset chip
+    const buttons = container.querySelectorAll("button")
+    const presetChip = Array.from(buttons).find(
+      (btn) => btn.textContent?.includes("Open") && btn.textContent?.includes("Default")
+    )
+    expect(presetChip).not.toBeUndefined()
+    expect(presetChip!.className).toContain("line-through")
+    expect(presetChip!.className).toContain("text-muted-foreground/60")
+  })
+
+  it("active preset chips show brand-purple style", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    const buttons = container.querySelectorAll("button")
+    const presetChip = Array.from(buttons).find(
+      (btn) => btn.textContent?.includes("Open") && btn.textContent?.includes("Default")
+    )
+    expect(presetChip).not.toBeUndefined()
+    expect(presetChip!.className).toContain("border-brand-purple/30")
+    expect(presetChip!.className).toContain("bg-brand-purple/5")
+    expect(presetChip!.className).not.toContain("line-through")
+  })
+
+  it("uses custom presetLabel", () => {
+    const { getByText } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+        presetLabel="Preset"
+      />
+    )
+
+    // The label prefix should show "Preset: "
+    const presetPrefix = getByText(/Preset:/)
+    expect(presetPrefix).not.toBeNull()
+  })
+
+  it("renders multiple preset chips for multiple categories", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"], type: ["churn"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"], type: ["churn"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    const buttons = container.querySelectorAll("button")
+    const presetChips = Array.from(buttons).filter(
+      (btn) => btn.textContent?.includes("Default")
+    )
+    // Two preset chips (one for status:open, one for type:churn)
+    expect(presetChips.length).toBe(2)
+  })
+
+  it("does not render wrapper div when no preset filters", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+      />
+    )
+
+    // Without presets, the root should be the DropdownMenu
+    // which doesn't have flex-wrap class
+    const wrapper = container.firstElementChild
+    // The button should be the first interactive child (DropdownMenu renders button)
+    const button = container.querySelector("button")
+    expect(button).not.toBeNull()
+    expect(button!.textContent).toContain("Filter")
+  })
+})

package/src/components/__tests__/entity-metadata-grid.test.tsx

@@ -0,0 +1,25 @@
+import { describe, it, expect } from "vitest"
+import React from "react"
+import { render } from "@testing-library/react"
+import { EntityMetadataGrid } from "../entity-panel"
+import { CalendarDays } from "lucide-react"
+
+describe("EntityMetadataGrid", () => {
+  it("has overflow-hidden on the grid container", () => {
+    const { container } = render(
+      <EntityMetadataGrid
+        fields={[
+          {
+            icon: CalendarDays,
+            label: "Test",
+            value: "Some value",
+          },
+        ]}
+      />
+    )
+
+    const grid = container.firstElementChild
+    expect(grid).not.toBeNull()
+    expect(grid!.className).toContain("overflow-hidden")
+  })
+})

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

@@ -414,7 +414,6 @@ describe("VirtualizedDataTable — consistent header styling", () => {
       />,
     );
 
-    const headers = container.querySelectorAll('[role="columnheader"]');
     // Get the sort buttons (not the dropdown triggers)
     const sortButtons = Array.from(
       container.querySelectorAll('[role="columnheader"] button'),

package/src/components/collapsible-section.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+import { cn } from "../lib/utils"
+
+export interface CollapsibleSectionProps {
+  /** Total number of items (used in the expansion bar label). */
+  count: number
+  /** Items to show before collapsing. Default: 5. */
+  maxItems?: number
+  /** Children to render — the component slices React.Children.toArray(children) at maxItems. */
+  children: React.ReactNode
+  /** Start expanded. Default: false. */
+  defaultExpanded?: boolean
+  /** Custom label for the expansion bar. Default: "Show all {count}". */
+  expandLabel?: string
+  /** Custom label when expanded. Default: "Show less". */
+  collapseLabel?: string
+  className?: string
+}
+
+export function CollapsibleSection({
+  count,
+  maxItems = 5,
+  children,
+  defaultExpanded = false,
+  expandLabel,
+  collapseLabel,
+  className,
+}: CollapsibleSectionProps) {
+  const [expanded, setExpanded] = React.useState(defaultExpanded)
+
+  const items = React.Children.toArray(children)
+  const visible = expanded ? items : items.slice(0, maxItems)
+  const showBar = items.length > maxItems
+
+  return (
+    <div className={className}>
+      {visible}
+      {showBar && (
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center justify-between w-full px-3 py-1.5 mt-1 text-xs font-medium text-muted-foreground border border-border/50 rounded-md hover:bg-muted/30 transition-colors cursor-pointer"
+        >
+          <span>
+            {expanded
+              ? (collapseLabel ?? "Show less")
+              : (expandLabel ?? `Show all ${count}`)}
+          </span>
+          <ChevronDown
+            className={cn(
+              "h-3.5 w-3.5 transition-transform duration-200",
+              expanded && "rotate-180"
+            )}
+          />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/contact-list.tsx

@@ -1,7 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { Plus, X } from "lucide-react"
+import { ChevronDown, Plus, X } from "lucide-react"
+import { cn } from "../lib/utils"
 import { Badge } from "./badge"
 import { Button } from "./button"
 
@@ -35,6 +36,8 @@ export interface ContactListProps {
   contacts: ContactItem[]
   onAdd?: () => void
   addLabel?: string
+  /** Maximum contacts to show before collapsing. Shows expansion bar when exceeded. Undefined = show all (backward compatible). */
+  maxItems?: number
 }
 
 const badgeColors: Record<string, string> = {
@@ -96,7 +99,12 @@ function ContactRow({ contact }: { contact: ContactItem }) {
   )
 }
 
-export function ContactList({ title, count, contacts, onAdd, addLabel }: ContactListProps) {
+export function ContactList({ title, count, contacts, onAdd, addLabel, maxItems }: ContactListProps) {
+  const [expanded, setExpanded] = React.useState(false)
+
+  const visibleContacts = maxItems != null && !expanded ? contacts.slice(0, maxItems) : contacts
+  const showExpansionBar = maxItems != null && contacts.length > maxItems
+
   return (
     <div className="space-y-2.5">
       <div className="flex items-center justify-between">
@@ -112,10 +120,21 @@ export function ContactList({ title, count, contacts, onAdd, addLabel }: Contact
       </div>
 
       <div className="space-y-0">
-        {contacts.map((contact) => (
+        {visibleContacts.map((contact) => (
           <ContactRow key={contact.id} contact={contact} />
         ))}
       </div>
+
+      {showExpansionBar && (
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center justify-between w-full px-3 py-1.5 mt-1 text-xs font-medium text-muted-foreground border border-border/50 rounded-md hover:bg-muted/30 transition-colors"
+        >
+          <span>{expanded ? "Show less" : `Show all ${contacts.length} contacts`}</span>
+          <ChevronDown className={cn("h-3.5 w-3.5 transition-transform duration-200", expanded && "rotate-180")} />
+        </button>
+      )}
     </div>
   )
 }

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