@handled-ai/design-system 0.15.1 → 0.16.1

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

@@ -1,9 +1,80 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import React from "react";
-import { render } from "@testing-library/react";
-import { DataTableFilter } from "../data-table-filter";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { ListFilter } from "lucide-react";
 
+import { DataTableFilter } from "../data-table-filter";
+import type { DataTableFilterCategory } from "../data-table-filter";
+import type { ConditionFieldDef } from "../data-table-condition-filter";
+
+/**
+ * Radix DropdownMenu renders content inside a portal which makes it
+ * difficult to test in happy-dom. We mock the DropdownMenu primitives
+ * to render children inline so we can assert on the component's
+ * rendering logic directly.
+ */
+vi.mock("../dropdown-menu", async () => {
+  const ReactMod = await import("react");
+
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const DropdownMenu = ({ children, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu", ...props }, children);
+  const DropdownMenuTrigger = ({ children, asChild, ...props }: any) => {
+    if (asChild && ReactMod.isValidElement(children)) {
+      return ReactMod.cloneElement(children, { "data-slot": "dropdown-menu-trigger", ...props } as any);
+    }
+    return ReactMod.createElement("button", { "data-slot": "dropdown-menu-trigger", ...props }, children);
+  };
+  const DropdownMenuContent = ({ children, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-content", ...props }, children);
+  const DropdownMenuItem = ({ children, onSelect, className, ...props }: any) =>
+    ReactMod.createElement(
+      "div",
+      {
+        "data-slot": "dropdown-menu-item",
+        role: "menuitem",
+        className,
+        onClick: (e: any) => onSelect?.(e),
+        ...props,
+      },
+      children
+    );
+  const DropdownMenuSub = ({ children, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-sub", ...props }, children);
+  const DropdownMenuSubTrigger = ({ children, className, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-sub-trigger", role: "menuitem", className, ...props }, children);
+  const DropdownMenuSubContent = ({ children, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-sub-content", ...props }, children);
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+
+  return {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSub,
+    DropdownMenuSubTrigger,
+    DropdownMenuSubContent,
+  };
+});
+
+vi.mock("radix-ui", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("radix-ui")>();
+  const ReactMod = await import("react");
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const Root = ({ children }: any) => ReactMod.createElement("div", { "data-slot": "popover-root" }, children);
+  const Trigger = ({ children, asChild, ...props }: any) => {
+    if (asChild && ReactMod.isValidElement(children)) {
+      return ReactMod.cloneElement(children, { "data-slot": "popover-trigger", ...props } as any);
+    }
+    return ReactMod.createElement("button", { "data-slot": "popover-trigger", ...props }, children);
+  };
+  const Portal = ({ children }: any) => ReactMod.createElement(ReactMod.Fragment, null, children);
+  const Content = ({ children, ...props }: any) => ReactMod.createElement("div", { "data-slot": "popover-content", ...props }, children);
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+  return { ...actual, Popover: { Root, Trigger, Portal, Content } };
+});
+
 const defaultProps = {
   categories: [
     {
@@ -38,4 +109,200 @@ describe("DataTableFilter", () => {
     expect(button!.className).toContain("text-primary-foreground");
     expect(button!.className).toContain("h-8");
   });
+
+  it("renders boolean category as direct toggle row", () => {
+    const onToggle = vi.fn();
+    const boolCategory: DataTableFilterCategory = {
+      id: "archived",
+      label: "Archived",
+      icon: ListFilter,
+      options: [],
+      type: "boolean",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[boolCategory]}
+        selectedFilters={{}}
+        onToggleFilter={onToggle}
+      />
+    );
+
+    const item = screen.getByText("Archived").closest('[data-slot="dropdown-menu-item"]');
+    expect(item).not.toBeNull();
+    expect(document.querySelector('[data-slot="dropdown-menu-sub-trigger"]')).toBeNull();
+
+    fireEvent.click(item!);
+    expect(onToggle).toHaveBeenCalledWith("archived", "true");
+  });
+
+  it("shows check icon on active boolean category", () => {
+    const boolCategory: DataTableFilterCategory = {
+      id: "archived",
+      label: "Archived",
+      icon: ListFilter,
+      options: [],
+      type: "boolean",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[boolCategory]}
+        selectedFilters={{ archived: ["true"] }}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const item = screen.getByText("Archived").closest('[data-slot="dropdown-menu-item"]');
+    expect(item).not.toBeNull();
+    expect(item!.className).toContain("text-brand-purple");
+    expect(item!.querySelector("svg.ml-auto")).not.toBeNull();
+  });
+
+  it("renders single-select category with submenu", () => {
+    const singleCategory: DataTableFilterCategory = {
+      id: "priority",
+      label: "Priority",
+      icon: ListFilter,
+      options: ["High", "Medium", "Low"],
+      type: "single",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[singleCategory]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const subTrigger = document.querySelector('[data-slot="dropdown-menu-sub-trigger"]');
+    expect(subTrigger).not.toBeNull();
+    expect(subTrigger!.textContent).toContain("Priority");
+  });
+
+  it("shows filled circle indicator for selected single-select option", () => {
+    const singleCategory: DataTableFilterCategory = {
+      id: "priority",
+      label: "Priority",
+      icon: ListFilter,
+      options: ["High", "Medium", "Low"],
+      type: "single",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[singleCategory]}
+        selectedFilters={{ priority: ["High"] }}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const highItem = screen.getByText("High").closest('[data-slot="dropdown-menu-item"]');
+    expect(highItem).not.toBeNull();
+    expect(highItem!.querySelector("span.rounded-full")).not.toBeNull();
+    expect(highItem!.textContent).not.toContain("Applied");
+
+    const mediumItem = screen.getByText("Medium").closest('[data-slot="dropdown-menu-item"]');
+    expect(mediumItem).not.toBeNull();
+    expect(mediumItem!.querySelector("span.rounded-full")).toBeNull();
+  });
+
+  it("boolean category keeps dropdown open on click", () => {
+    const onToggle = vi.fn();
+    const boolCategory: DataTableFilterCategory = {
+      id: "archived",
+      label: "Archived",
+      icon: ListFilter,
+      options: [],
+      type: "boolean",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[boolCategory]}
+        selectedFilters={{}}
+        onToggleFilter={onToggle}
+      />
+    );
+
+    const item = screen.getByText("Archived").closest('[data-slot="dropdown-menu-item"]');
+    expect(item).not.toBeNull();
+
+    const preventDefaultSpy = vi.fn();
+    const mockEvent = new MouseEvent("click", { bubbles: true });
+    Object.defineProperty(mockEvent, "preventDefault", { value: preventDefaultSpy });
+    item!.dispatchEvent(mockEvent);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+    expect(onToggle).toHaveBeenCalledWith("archived", "true");
+  });
+
+  it("multi-select category still works as before", () => {
+    const multiCategory: DataTableFilterCategory = {
+      id: "status",
+      label: "Status",
+      icon: ListFilter,
+      options: ["Open", "Closed"],
+    };
+
+    render(
+      <DataTableFilter
+        categories={[multiCategory]}
+        selectedFilters={{ status: ["Open"] }}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const subTrigger = document.querySelector('[data-slot="dropdown-menu-sub-trigger"]');
+    expect(subTrigger).not.toBeNull();
+    expect(subTrigger!.textContent).toContain("Status");
+
+    const openItem = screen.getByText("Open").closest('[data-slot="dropdown-menu-item"]');
+    expect(openItem).not.toBeNull();
+    expect(openItem!.textContent).toContain("Applied");
+    expect(openItem!.querySelector("span.rounded-full")).toBeNull();
+  });
+
+  it("does not expose the condition builder entry point without condition fields", () => {
+    render(<DataTableFilter {...defaultProps} />);
+
+    expect(screen.queryByText("Add filter")).toBeNull();
+    expect(document.querySelector('[data-slot="condition-filter"]')).toBeNull();
+  });
+
+  it("exposes a condition builder popover entry point when condition fields are provided", () => {
+    const conditionFields: ConditionFieldDef[] = [
+      { id: "balance", label: "Account Balance", type: "currency" },
+    ];
+
+    render(
+      <DataTableFilter
+        {...defaultProps}
+        conditionFields={conditionFields}
+        conditionFilters={[
+          { id: "c-1", field: "balance", operator: "gt", value: 1000 },
+        ]}
+        onConditionFiltersChange={() => {}}
+      />
+    );
+
+    const builderEntry = document.querySelector('[data-slot="popover-trigger"]');
+    expect(builderEntry).not.toBeNull();
+    expect(builderEntry!.textContent).toContain("1");
+    expect(document.querySelector('[data-slot="condition-filter"]')).not.toBeNull();
+    expect(screen.getByText("Filter builder")).toBeDefined();
+  });
+
+  it("uses the custom condition builder label when provided", () => {
+    render(
+      <DataTableFilter
+        {...defaultProps}
+        conditionFields={[{ id: "name", label: "Name", type: "text" }]}
+        conditionBuilderLabel="Advanced filters"
+      />
+    );
+
+    expect(screen.getByText("Advanced filters")).toBeDefined();
+  });
 });

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>
   )
 }