@handled-ai/design-system 0.18.10 → 0.18.12

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

@@ -103,6 +103,23 @@ const dateField: ConditionFieldDef = {
   type: "date",
 };
 
+const selectField: ConditionFieldDef = {
+  id: "stage",
+  label: "Stage",
+  type: "select",
+  options: [
+    { label: "Qualified", value: "qualified" },
+    { label: "Disqualified", value: "disqualified" },
+  ],
+};
+
+const multiSelectField: ConditionFieldDef = {
+  id: "industry",
+  label: "Industry",
+  type: "multi_select",
+  options: ["Finance", { label: "Healthcare", value: "healthcare" }, "Education"],
+};
+
 const allFields: ConditionFieldDef[] = [
   textField,
   numberField,
@@ -110,6 +127,12 @@ const allFields: ConditionFieldDef[] = [
   dateField,
 ];
 
+const optionFields: ConditionFieldDef[] = [
+  textField,
+  selectField,
+  multiSelectField,
+];
+
 describe("DataTableConditionFilter", () => {
   let onConditionsChange: ReturnType<typeof vi.fn<(conditions: ConditionFilterValue[]) => void>>;
 
@@ -117,6 +140,35 @@ describe("DataTableConditionFilter", () => {
     onConditionsChange = vi.fn<(conditions: ConditionFilterValue[]) => void>();
   });
 
+  const renderOptionFilter = () => {
+    const result = render(
+      <DataTableConditionFilter
+        fields={optionFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    return result;
+  };
+
+  const chooseField = (container: HTMLElement, label: string) => {
+    const fieldOption = Array.from(container.querySelectorAll('[data-slot="select-item"]')).find(
+      (opt) => opt.textContent?.includes(label),
+    );
+    expect(fieldOption).not.toBeUndefined();
+    fireEvent.click(fieldOption!);
+  };
+
+  const expectFieldTriggerHasNoFieldTypeIcon = (container: HTMLElement) => {
+    const fieldTrigger = container.querySelector('[data-slot="condition-row"] [data-slot="select-trigger"]');
+    expect(fieldTrigger).not.toBeNull();
+    expect(fieldTrigger?.querySelector("svg.lucide-ellipsis")).toBeNull();
+    expect(fieldTrigger?.querySelector("svg.lucide-list-filter")).toBeNull();
+    expect(fieldTrigger?.querySelector("svg.lucide-list-checks")).toBeNull();
+  };
+
   it("renders a polished empty panel with Add filter, disabled Add filter group, and quiet Clear filters", () => {
     const { container } = render(
       <DataTableConditionFilter
@@ -151,7 +203,6 @@ describe("DataTableConditionFilter", () => {
     expect(onConditionsChange).toHaveBeenCalledWith([]);
   });
 
-
   it("preserves an in-progress draft when fields are recreated with the same definition", () => {
     const { rerender } = render(
       <DataTableConditionFilter
@@ -197,6 +248,182 @@ describe("DataTableConditionFilter", () => {
     expect(committed?.[0]).toMatchObject({ field: "name", operator: "eq", value: "Acme" });
   });
 
+  it("renders select options and commits an eq condition", () => {
+    const { container } = renderOptionFilter();
+    chooseField(container, "Stage");
+
+    expectFieldTriggerHasNoFieldTypeIcon(container);
+
+    expect(getOperators(selectField)).toEqual(["eq", "neq", "is_null", "is_not_null"]);
+    fireEvent.click(screen.getByText("Qualified"));
+    fireEvent.click(screen.getByText("Apply"));
+
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed).toHaveLength(1);
+    expect(committed?.[0]).toMatchObject({
+      field: "stage",
+      operator: "eq",
+      value: "qualified",
+    });
+  });
+
+  it("filters searchable select options before committing a selected value", () => {
+    const searchableOwnerField: ConditionFieldDef = {
+      id: "owner",
+      label: "Owner",
+      type: "select",
+      searchable: true,
+      options: [
+        { label: "Alice Adams", value: "alice@example.com" },
+        { label: "Bob Brown", value: "bob@example.com" },
+      ],
+    };
+
+    render(
+      <DataTableConditionFilter
+        fields={[searchableOwnerField]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Search options..."), {
+      target: { value: "bob" },
+    });
+
+    expect(screen.queryByText("Alice Adams")).toBeNull();
+    fireEvent.click(screen.getByText("Bob Brown"));
+    fireEvent.click(screen.getByText("Apply"));
+
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed).toHaveLength(1);
+    expect(committed?.[0]).toMatchObject({
+      field: "owner",
+      operator: "eq",
+      value: "bob@example.com",
+    });
+  });
+
+  it("uses DataTableFilter threshold semantics for option search", () => {
+    const thresholdField: ConditionFieldDef = {
+      id: "threshold",
+      label: "Threshold",
+      type: "select",
+      searchable: { threshold: 2 },
+      options: [
+        { label: "One", value: "one" },
+        { label: "Two", value: "two" },
+      ],
+    };
+    const aboveThresholdField: ConditionFieldDef = {
+      ...thresholdField,
+      id: "above_threshold",
+      options: [
+        { label: "One", value: "one" },
+        { label: "Two", value: "two" },
+        { label: "Three", value: "three" },
+      ],
+    };
+
+    const { rerender } = render(
+      <DataTableConditionFilter
+        fields={[thresholdField]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    expect(screen.queryByPlaceholderText("Search options...")).toBeNull();
+
+    rerender(
+      <DataTableConditionFilter
+        fields={[aboveThresholdField]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+    expect(screen.getByPlaceholderText("Search options...")).toBeDefined();
+  });
+
+  it("does not apply a stale search query after switching to a non-searchable select field", () => {
+    const searchableOwnerField: ConditionFieldDef = {
+      id: "owner",
+      label: "Owner",
+      type: "select",
+      searchable: true,
+      options: [
+        { label: "Alice Adams", value: "alice@example.com" },
+        { label: "Bob Brown", value: "bob@example.com" },
+      ],
+    };
+    const statusField: ConditionFieldDef = {
+      id: "status",
+      label: "Status",
+      type: "select",
+      searchable: false,
+      options: [
+        { label: "Active", value: "active" },
+        { label: "Inactive", value: "inactive" },
+      ],
+    };
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={[searchableOwnerField, statusField]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Search options..."), {
+      target: { value: "bob" },
+    });
+    chooseField(container, "Status");
+
+    expect(screen.queryByPlaceholderText("Search options...")).toBeNull();
+    expect(screen.getByText("Active")).toBeDefined();
+    expect(screen.getByText("Inactive")).toBeDefined();
+    expect(screen.queryByText("No options")).toBeNull();
+  });
+
+  it("renders multi-select checkboxes, toggles multiple options, and commits an in condition", () => {
+    const { container } = renderOptionFilter();
+    chooseField(container, "Industry");
+
+    expectFieldTriggerHasNoFieldTypeIcon(container);
+
+    expect(getOperators(multiSelectField)).toEqual(["in", "is_null", "is_not_null"]);
+
+    const financeCheckbox = screen.getByRole("checkbox", { name: "Finance" });
+    const healthcareCheckbox = screen.getByRole("checkbox", { name: "Healthcare" });
+    fireEvent.click(financeCheckbox);
+    fireEvent.click(healthcareCheckbox);
+
+    expect(financeCheckbox.getAttribute("aria-checked")).toBe("true");
+    expect(healthcareCheckbox.getAttribute("aria-checked")).toBe("true");
+
+    fireEvent.click(screen.getByText("Apply"));
+
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed).toHaveLength(1);
+    expect(committed?.[0]).toMatchObject({
+      field: "industry",
+      operator: "in",
+      value: ["Finance", "healthcare"],
+    });
+  });
+
+  it("omits incomplete multi-select conditions until at least one option is selected", () => {
+    const { container } = renderOptionFilter();
+    chooseField(container, "Industry");
+    fireEvent.click(screen.getByText("Apply"));
+
+    expect(onConditionsChange.mock.calls.at(-1)?.[0]).toEqual([]);
+  });
+
   it("Enter in the value field commits the current draft row", () => {
     render(
       <DataTableConditionFilter
@@ -380,9 +607,13 @@ describe("DataTableConditionFilter", () => {
     expect(screen.getAllByText("And")).toHaveLength(2);
   });
 
-  it("operator options are scalar only and exclude in/contains", () => {
+  it("operator options respect the selected field definition", () => {
     expect(getOperators(textField)).toEqual(["eq", "neq", "is_null", "is_not_null"]);
-    expect(getOperators({ ...textField, operators: ["eq", "in", "is_null"] })).toEqual(["eq", "is_null"]);
+    expect(getOperators({ ...textField, operators: ["eq", "in", "is_null"] })).toEqual([
+      "eq",
+      "in",
+      "is_null",
+    ]);
 
     const { container } = render(
       <DataTableConditionFilter
@@ -392,9 +623,10 @@ describe("DataTableConditionFilter", () => {
       />,
     );
 
-    const optionTexts = Array.from(container.querySelectorAll('[data-slot="select-item"]'))
-      .map((el) => el.textContent);
-    expect(optionTexts).not.toContain("contains");
+    const optionTexts = Array.from(container.querySelectorAll('[data-slot="select-item"]')).map(
+      (el) => el.textContent,
+    );
+    expect(optionTexts).not.toContain("is any of");
     expect(optionTexts).toContain("is empty");
   });
 
@@ -413,7 +645,7 @@ describe("DataTableConditionFilter", () => {
     expect(optionTexts).toContain("≥");
     expect(optionTexts).toContain("<");
     expect(optionTexts).toContain("≤");
-    expect(optionTexts).not.toContain("contains");
+    expect(optionTexts).not.toContain("is any of");
   });
 
   it("generateConditionId returns unique values", () => {

package/src/components/__tests__/entity-panel-header.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen } from "@testing-library/react"
+
+import { EntityPanel, EntityPanelHeader } from "../entity-panel"
+
+function renderHeader(node: React.ReactNode) {
+  return render(
+    <EntityPanel isOpen onClose={vi.fn()}>
+      {node}
+    </EntityPanel>,
+  )
+}
+
+describe("EntityPanelHeader", () => {
+  it("preserves headerAction and panel controls", () => {
+    renderHeader(
+      <EntityPanelHeader
+        title="Acme Corp"
+        headerAction={<button type="button">Mercury Admin</button>}
+      />,
+    )
+
+    expect(screen.getByText("Acme Corp")).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Mercury Admin" })).toBeTruthy()
+    expect(screen.getByTitle("Copy Link")).toBeTruthy()
+    expect(screen.getByTitle("Wide")).toBeTruthy()
+    expect(screen.getByTitle("Close")).toBeTruthy()
+  })
+
+  it("renders subtitle and secondary action on the secondary row", () => {
+    renderHeader(
+      <EntityPanelHeader
+        title="Acme Corp"
+        subtitle="Preferred account · Treasury"
+        headerSecondaryAction={<button type="button">Quick action</button>}
+      />,
+    )
+
+    expect(screen.getByText("Preferred account · Treasury")).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Quick action" })).toBeTruthy()
+    expect(screen.getByTitle("Copy Link")).toBeTruthy()
+  })
+})

package/src/components/__tests__/signal-priority-popover.test.tsx

@@ -157,6 +157,36 @@ describe("SignalPriorityPopover", () => {
     expect(neutralRow.textContent).toContain("50")
   })
 
+
+  it("keeps default direction and score labels unchanged", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const row = screen.getByTestId("factor-row-test_severity")
+    expect(row.textContent).toContain("Raises")
+    expect(row.textContent).toContain("85")
+    expect(row.textContent).toContain("/100")
+  })
+
+  it("renders custom direction and display value labels", () => {
+    const customFactors: PriorityFactor[] = [
+      {
+        ...mockFactors[0],
+        directionLabel: "Raises urgency",
+        displayValueLabel: "Open window",
+        score: 0,
+      },
+    ]
+
+    render(<SignalPriorityPopover {...defaultProps} factors={customFactors} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const row = screen.getByTestId("factor-row-test_severity")
+    expect(row.textContent).toContain("Raises urgency")
+    expect(row.textContent).toContain("Open window")
+    expect(row.textContent).not.toContain("Raises0/100")
+  })
+
   it("renders Contributing factors section label", () => {
     render(<SignalPriorityPopover {...defaultProps} />)
     fireEvent.click(screen.getByTestId("priority-popover-trigger"))

package/src/components/account-contacts-popover.tsx

@@ -32,6 +32,10 @@ export interface AccountContactsPopoverProps {
   onSelectTo?: (contact: SuggestedContact) => void
   onSelectCc?: (contact: SuggestedContact) => void
   onSelectBcc?: (contact: SuggestedContact) => void
+  /** Label for the default contact row action. Defaults to "Add" or "Switch" when onSelectSwitch is provided. */
+  defaultSelectLabel?: string
+  /** Optional replacement-selection callback. When provided, row clicks call this instead of additive onSelect/onSelectTo. */
+  onSelectSwitch?: (contact: SuggestedContact) => void
   onViewAll?: () => void
   onOpenRecentActivity?: () => void
   trigger: React.ReactNode
@@ -44,6 +48,8 @@ export function AccountContactsPopover({
   onSelectTo,
   onSelectCc,
   onSelectBcc,
+  defaultSelectLabel,
+  onSelectSwitch,
   onViewAll,
   onOpenRecentActivity,
   trigger,
@@ -52,6 +58,15 @@ export function AccountContactsPopover({
   const [open, setOpen] = React.useState(false)
   const triggerRef = React.useRef<HTMLDivElement>(null)
   const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})
+  const resolvedDefaultSelectLabel = defaultSelectLabel ?? (onSelectSwitch ? "Switch" : undefined)
+  const handleDefaultSelect = React.useCallback((contact: SuggestedContact) => {
+    if (onSelectSwitch) {
+      onSelectSwitch(contact)
+    } else {
+      (onSelectTo ?? onSelect)(contact)
+    }
+    setOpen(false)
+  }, [onSelect, onSelectSwitch, onSelectTo])
 
   React.useEffect(() => {
     if (open && triggerRef.current) {
@@ -84,7 +99,8 @@ export function AccountContactsPopover({
                 <div
                   key={i}
                   role="button"
-                  onClick={() => { (onSelectTo ?? onSelect)(c); setOpen(false) }}
+                  onClick={() => handleDefaultSelect(c)}
+                  aria-label={resolvedDefaultSelectLabel ? `${resolvedDefaultSelectLabel} ${c.name}` : undefined}
                   className="flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer"
                 >
                   <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0">
@@ -115,6 +131,18 @@ export function AccountContactsPopover({
                     )}
                   </div>
                   <div className="ml-2 flex items-center gap-1.5 shrink-0">
+                    {resolvedDefaultSelectLabel && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleDefaultSelect(c)
+                        }}
+                        className="h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40"
+                      >
+                        {resolvedDefaultSelectLabel}
+                      </button>
+                    )}
                     {onSelectTo && (
                       <button
                         type="button"