@handled-ai/design-system 0.16.0 → 0.16.1

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

@@ -0,0 +1,397 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  DataTableConditionFilter,
+  type ConditionFieldDef,
+  type ConditionFilterValue,
+  generateConditionId,
+  getOperators,
+} from "../data-table-condition-filter";
+
+// ── Mock Radix Select with inline option elements ───────────────
+vi.mock("../select", () => {
+  const SelectMockContext = React.createContext<{
+    value?: string;
+    onValueChange?: (v: string) => void;
+  }>({});
+
+  const Select = ({
+    children,
+    value,
+    onValueChange,
+  }: {
+    children: React.ReactNode;
+    value?: string;
+    onValueChange?: (v: string) => void;
+  }) => (
+    <SelectMockContext.Provider value={{ value, onValueChange }}>
+      {children}
+    </SelectMockContext.Provider>
+  );
+
+  const SelectTrigger = ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+    size?: string;
+  }) => (
+    <span data-slot="select-trigger" className={className}>
+      {children}
+    </span>
+  );
+
+  const SelectValue = ({ placeholder }: { placeholder?: string }) => {
+    const ctx = React.useContext(SelectMockContext);
+    return <span data-slot="select-value">{ctx.value ?? placeholder}</span>;
+  };
+
+  const SelectContent = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+
+  const SelectItem = ({
+    children,
+    value,
+  }: {
+    children: React.ReactNode;
+    value: string;
+  }) => {
+    const ctx = React.useContext(SelectMockContext);
+    return (
+      <option
+        data-slot="select-item"
+        value={value}
+        data-selected={ctx.value === value ? "true" : undefined}
+        onClick={() => ctx.onValueChange?.(value)}
+      >
+        {children}
+      </option>
+    );
+  };
+
+  return {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+  };
+});
+
+const textField: ConditionFieldDef = {
+  id: "name",
+  label: "Name",
+  type: "text",
+};
+
+const numberField: ConditionFieldDef = {
+  id: "balance",
+  label: "Account Balance",
+  type: "number",
+};
+
+const currencyField: ConditionFieldDef = {
+  id: "revenue",
+  label: "Revenue",
+  type: "currency",
+};
+
+const dateField: ConditionFieldDef = {
+  id: "created_at",
+  label: "Created At",
+  type: "date",
+};
+
+const allFields: ConditionFieldDef[] = [
+  textField,
+  numberField,
+  currencyField,
+  dateField,
+];
+
+describe("DataTableConditionFilter", () => {
+  let onConditionsChange: ReturnType<typeof vi.fn<(conditions: ConditionFilterValue[]) => void>>;
+
+  beforeEach(() => {
+    onConditionsChange = vi.fn<(conditions: ConditionFilterValue[]) => void>();
+  });
+
+  it("renders a polished empty panel with Add filter, disabled Add filter group, and quiet Clear filters", () => {
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(screen.getByText("Filter builder")).toBeDefined();
+    expect(screen.getByText("No builder filters yet. Add a filter to start a condition row.")).toBeDefined();
+    expect(screen.getByText("Add filter")).toBeDefined();
+    expect(screen.getByText("Add filter group")).toBeDefined();
+    expect(screen.getByText("Add filter group").closest("button")?.hasAttribute("disabled")).toBe(true);
+    expect(screen.getByText("Clear filters").closest("button")?.hasAttribute("disabled")).toBe(true);
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(0);
+  });
+
+  it("clicking Add filter creates a draft row without emitting an incomplete condition", () => {
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(1);
+    expect(screen.getByText("Where")).toBeDefined();
+    expect(onConditionsChange).toHaveBeenCalledWith([]);
+  });
+
+  it("commits a text draft with Apply after a value is entered", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Enter value..."), {
+      target: { value: "Acme" },
+    });
+    fireEvent.click(screen.getByText("Apply"));
+
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed).toHaveLength(1);
+    expect(committed?.[0]).toMatchObject({ field: "name", operator: "eq", value: "Acme" });
+  });
+
+  it("Enter in the value field commits the current draft row", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    const valueInput = screen.getByPlaceholderText("Enter value...");
+    fireEvent.change(valueInput, { target: { value: "Acme" } });
+    fireEvent.keyDown(valueInput, { key: "Enter" });
+
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed?.[0]).toMatchObject({ field: "name", operator: "eq", value: "Acme" });
+  });
+
+  it("adding another row commits existing complete drafts and labels rows Where/And", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Enter value..."), {
+      target: { value: "Acme" },
+    });
+    fireEvent.click(screen.getByText("Add filter"));
+
+    expect(screen.getByText("Where")).toBeDefined();
+    expect(screen.getByText("And")).toBeDefined();
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed).toHaveLength(1);
+    expect(committed?.[0].value).toBe("Acme");
+  });
+
+  it("changing field resets operator and clears value", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "eq", value: "test" },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const balanceOption = Array.from(container.querySelectorAll('[data-slot="select-item"]'))
+      .find((opt) => opt.textContent?.includes("Account Balance"));
+    expect(balanceOption).not.toBeUndefined();
+    fireEvent.click(balanceOption!);
+    fireEvent.click(screen.getByText("Apply"));
+
+    // The updated row is incomplete after field change, so Apply omits it.
+    expect(onConditionsChange.mock.calls.at(-1)?.[0]).toEqual([]);
+  });
+
+  it("hides value input for unary operators and commits null values", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "is_null", value: null },
+      { id: "c-2", field: "balance", operator: "is_not_null", value: null },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(2);
+    expect(container.querySelectorAll("input")).toHaveLength(0);
+    expect(screen.getAllByText("No value needed")).toHaveLength(2);
+
+    fireEvent.click(screen.getByText("Apply"));
+    expect(onConditionsChange.mock.calls.at(-1)?.[0]).toEqual(conditions);
+  });
+
+  it("removing a condition row commits remaining rows", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "eq", value: "test" },
+      { id: "c-2", field: "balance", operator: "gt", value: 100 },
+    ];
+
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getAllByRole("button", { name: "Remove condition" })[0]);
+
+    const updated = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(updated).toHaveLength(1);
+    expect(updated?.[0]).toMatchObject({ field: "balance", operator: "gt", value: 100 });
+  });
+
+  it("clears all builder conditions", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[{ id: "c-1", field: "name", operator: "eq", value: "test" }]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Clear filters"));
+
+    expect(onConditionsChange).toHaveBeenCalledWith([]);
+  });
+
+  it("renders currency prefix, parses currency as a number, and renders number inputs", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "revenue", operator: "eq", value: 5000 },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(screen.getByText("$")).toBeDefined();
+    const input = container.querySelector('input[type="number"]');
+    expect(input).not.toBeNull();
+    fireEvent.change(input!, { target: { value: "6500" } });
+    fireEvent.click(screen.getByText("Apply"));
+
+    expect(onConditionsChange.mock.calls.at(-1)?.[0][0].value).toBe(6500);
+  });
+
+  it("renders and commits date values with a date input", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "created_at", operator: "gte", value: "2026-01-01" },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const input = container.querySelector('input[type="date"]');
+    expect(input).not.toBeNull();
+    fireEvent.change(input!, { target: { value: "2026-02-03" } });
+    fireEvent.click(screen.getByText("Apply"));
+
+    expect(onConditionsChange.mock.calls.at(-1)?.[0][0].value).toBe("2026-02-03");
+  });
+
+  it("renders all provided conditions", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "eq", value: "Acme" },
+      { id: "c-2", field: "balance", operator: "gt", value: 100 },
+      { id: "c-3", field: "revenue", operator: "gte", value: 50000 },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(3);
+    expect(screen.getByText("Where")).toBeDefined();
+    expect(screen.getAllByText("And")).toHaveLength(2);
+  });
+
+  it("operator options are scalar only and exclude in/contains", () => {
+    expect(getOperators(textField)).toEqual(["eq", "neq", "is_null", "is_not_null"]);
+    expect(getOperators({ ...textField, operators: ["eq", "in", "is_null"] })).toEqual(["eq", "is_null"]);
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[{ id: "c-1", field: "name", operator: "eq", value: null }]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const optionTexts = Array.from(container.querySelectorAll('[data-slot="select-item"]'))
+      .map((el) => el.textContent);
+    expect(optionTexts).not.toContain("contains");
+    expect(optionTexts).toContain("is empty");
+  });
+
+  it("operator options change based on field type", () => {
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[{ id: "c-1", field: "balance", operator: "eq", value: null }]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const optionTexts = Array.from(container.querySelectorAll('[data-slot="select-item"]'))
+      .map((el) => el.textContent);
+    expect(optionTexts).toContain(">");
+    expect(optionTexts).toContain("≥");
+    expect(optionTexts).toContain("<");
+    expect(optionTexts).toContain("≤");
+    expect(optionTexts).not.toContain("contains");
+  });
+
+  it("generateConditionId returns unique values", () => {
+    const ids = new Set(Array.from({ length: 100 }, () => generateConditionId()));
+    expect(ids.size).toBe(100);
+  });
+});

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

@@ -200,7 +200,7 @@ describe("DataTableFilter – preset support", () => {
 
     // Without presets, the root should be the DropdownMenu
     // which doesn't have flex-wrap class
-    const wrapper = container.firstElementChild
+    const _wrapper = container.firstElementChild
     // The button should be the first interactive child (DropdownMenu renders button)
     const button = container.querySelector("button")
     expect(button).not.toBeNull()

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();
+  });
 });