@handled-ai/design-system 0.18.51 → 0.18.53

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

@@ -264,6 +264,136 @@ describe("DataTableFilter", () => {
     expect(openItem!.querySelector("span.rounded-full")).toBeNull();
   });
 
+
+  it("renders a text category as a submenu with a text input", () => {
+    const textCategory: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      type: "text",
+      valuePlaceholder: "Enter callsign",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[textCategory]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const subTrigger = document.querySelector('[data-slot="dropdown-menu-sub-trigger"]');
+    expect(subTrigger).not.toBeNull();
+    expect(subTrigger!.textContent).toContain("Callsign");
+    expect(screen.getByLabelText("Callsign")).toBeDefined();
+    expect(screen.getByPlaceholderText("Enter callsign")).toBeDefined();
+    expect(screen.getByRole("button", { name: "Apply" })).toBeDefined();
+    expect(screen.queryByText("No matches")).toBeNull();
+  });
+
+  it("applies a trimmed text filter value", () => {
+    const onTextFilterChange = vi.fn();
+    const textCategory: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      type: "text",
+      valuePlaceholder: "Enter callsign",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[textCategory]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        textFilters={{}}
+        onTextFilterChange={onTextFilterChange}
+      />
+    );
+
+    fireEvent.change(screen.getByLabelText("Callsign"), {
+      target: { value: "  M42  " },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(onTextFilterChange).toHaveBeenCalledWith("callsign", "M42");
+  });
+
+  it("clears an active text filter value", () => {
+    const onTextFilterChange = vi.fn();
+    const textCategory: DataTableFilterCategory = {
+      id: "organizationId",
+      label: "Organization ID",
+      icon: ListFilter,
+      type: "text",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[textCategory]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        textFilters={{ organizationId: "ORG-123" }}
+        onTextFilterChange={onTextFilterChange}
+      />
+    );
+
+    expect(screen.getByLabelText("Organization ID")).toHaveProperty("value", "ORG-123");
+    fireEvent.click(screen.getByRole("button", { name: "Clear" }));
+
+    expect(onTextFilterChange).toHaveBeenCalledWith("organizationId", "");
+  });
+
+  it("includes active text filters in the filter count", () => {
+    const textCategory: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      type: "text",
+    };
+    const optionCategory: DataTableFilterCategory = {
+      id: "status",
+      label: "Status",
+      icon: ListFilter,
+      options: ["Open", "Closed"],
+    };
+
+    render(
+      <DataTableFilter
+        categories={[textCategory, optionCategory]}
+        selectedFilters={{ status: ["Open"] }}
+        onToggleFilter={() => {}}
+        textFilters={{ callsign: "  M42  " }}
+      />
+    );
+
+    const badge = screen.getByText("2");
+    expect(badge.tagName).toBe("SPAN");
+    expect(badge.className).toContain("bg-muted");
+  });
+
+  it("does not count blank text filter values as active", () => {
+    const textCategory: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      type: "text",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[textCategory]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        textFilters={{ callsign: "   " }}
+      />
+    );
+
+    const triggerButton = document.querySelector('[data-slot="dropdown-menu-trigger"]');
+    expect(triggerButton).not.toBeNull();
+    expect(triggerButton!.querySelector("span.bg-muted")).toBeNull();
+  });
+
   it("does not expose the condition builder entry point without condition fields", () => {
     render(<DataTableFilter {...defaultProps} />);
 

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

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest"
 import React from "react"
-import { render } from "@testing-library/react"
+import { render, screen } from "@testing-library/react"
 import { EntityMetadataGrid } from "../entity-panel"
 import { CalendarDays } from "lucide-react"
 
@@ -22,4 +22,30 @@ describe("EntityMetadataGrid", () => {
     expect(grid).not.toBeNull()
     expect(grid!.className).toContain("overflow-hidden")
   })
+
+  it("allows long labels and values to wrap within the panel", () => {
+    const { container } = render(
+      <EntityMetadataGrid
+        fields={[
+          {
+            icon: CalendarDays,
+            label: "Very Long Relationship Manager Owner Label",
+            value: (
+              <span>
+                Owner: Alexandria Cassandra Montgomery, RM: Benjamin Theodore
+                Kensington, ADM: Charlotte Evangeline Worthington-Smythe
+              </span>
+            ),
+          },
+        ]}
+      />
+    )
+
+    const grid = container.firstElementChild
+    expect(grid?.className).toContain("min-w-0")
+    expect(grid?.className).toContain("minmax(0,1fr)")
+    expect(screen.getByText("Very Long Relationship Manager Owner Label").className).toContain("[overflow-wrap:anywhere]")
+    expect(screen.getByText(/Owner: Alexandria/).parentElement?.className).toContain("[overflow-wrap:anywhere]")
+    expect(screen.getByText(/Owner: Alexandria/).parentElement?.className).not.toContain("truncate")
+  })
 })

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

@@ -119,8 +119,8 @@ describe("SignalPriorityPopover", () => {
 
     // Check head section
     expect(content.textContent).toContain("Why this is high priority")
-    expect(screen.getByTestId("priority-overall-score").textContent).toContain("79")
-    expect(screen.getByTestId("priority-overall-score").textContent).toContain("/100")
+    expect(content.textContent).toContain("79")
+    expect(content.textContent).toContain("/100")
     expect(content.textContent).toContain("High range")
     expect(content.textContent).toContain("60-79")
   })
@@ -188,50 +188,13 @@ describe("SignalPriorityPopover", () => {
     expect(row.textContent).not.toContain("Raises0/100")
   })
 
-  it("renders Contributing factors section label and shared-consumer-safe default formula label", () => {
+  it("renders Contributing factors section label", () => {
     render(<SignalPriorityPopover {...defaultProps} />)
     fireEvent.click(screen.getByTestId("priority-popover-trigger"))
 
     const content = screen.getByTestId("priority-popover-content")
     expect(content.textContent).toContain("Contributing factors")
-    expect(content.textContent).toContain("Priority factors")
-    expect(content.textContent).not.toContain("Score = weighted sum")
-    expect(content.textContent).not.toContain("Priority = weighted signals + calibration")
-  })
-
-  it("renders a custom formula label when provided", () => {
-    render(
-      <SignalPriorityPopover
-        {...defaultProps}
-        formulaLabel="Priority = weighted signals + calibration"
-      />,
-    )
-    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
-
-    const content = screen.getByTestId("priority-popover-content")
-    expect(content.textContent).toContain("Priority = weighted signals + calibration")
-  })
-
-
-  it("renders the overall score number by default while preserving factor row scores", () => {
-    render(<SignalPriorityPopover {...defaultProps} />)
-    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
-
-    expect(screen.getByTestId("priority-overall-score").textContent).toBe("79/100")
-    expect(screen.getByTestId("factor-row-test_severity").textContent).toContain("85/100")
-    expect(screen.getByTestId("factor-row-account_depth").textContent).toContain("30/100")
-  })
-
-  it("hides only the overall header score in label display mode", () => {
-    render(<SignalPriorityPopover {...defaultProps} scoreDisplay="label" />)
-    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
-
-    const header = screen.getByTestId("priority-popover-header")
-    expect(screen.queryByTestId("priority-overall-score")).toBeNull()
-    expect(header.textContent).toContain("Why this is high priority")
-    expect(header.textContent).not.toContain("79/100")
-    expect(screen.getByTestId("factor-row-test_severity").textContent).toContain("85/100")
-    expect(screen.getByTestId("factor-row-account_depth").textContent).toContain("30/100")
+    expect(content.textContent).toContain("Score = weighted sum")
   })
 
   it("renders score track bars with correct width percentage", () => {

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

@@ -28,13 +28,10 @@ export interface FilterOption {
   value: string
 }
 
-export interface DataTableFilterCategory {
+interface DataTableFilterCategoryBase {
   id: string
   label: string
   icon: React.ComponentType<{ className?: string }>
-  options: (string | FilterOption)[]
-  /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
-  type?: "multi" | "single" | "boolean"
   /**
    * Submenu search behavior. Defaults to the DataTableFilter
    * optionSearchThreshold prop. Use true to always show search or false to
@@ -43,6 +40,25 @@ export interface DataTableFilterCategory {
   searchable?: boolean | { threshold?: number }
 }
 
+export interface DataTableOptionFilterCategory extends DataTableFilterCategoryBase {
+  options: (string | FilterOption)[]
+  /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
+  type?: "multi" | "single" | "boolean"
+}
+
+export interface DataTableTextFilterCategory extends DataTableFilterCategoryBase {
+  /** Free-text filter behavior. Renders a top-level submenu with a text input. */
+  type: "text"
+  /** Placeholder shown in the text filter input. */
+  valuePlaceholder?: string
+  /** Not used for text filters; optional for backwards-compatible category shapes. */
+  options?: (string | FilterOption)[]
+}
+
+export type DataTableFilterCategory =
+  | DataTableOptionFilterCategory
+  | DataTableTextFilterCategory
+
 function getOptionValue(option: string | FilterOption): string {
   return typeof option === "string" ? option : option.value
 }
@@ -50,6 +66,111 @@ function getOptionLabel(option: string | FilterOption): string {
   return typeof option === "string" ? option : option.label
 }
 
+function isTextFilterCategory(
+  category: DataTableFilterCategory
+): category is DataTableTextFilterCategory {
+  return category.type === "text"
+}
+
+function TextFilterSubmenu({
+  category,
+  value,
+  onValueChange,
+}: {
+  category: DataTableTextFilterCategory
+  value: string
+  onValueChange?: (categoryId: string, value: string) => void
+}) {
+  const [draftValue, setDraftValue] = React.useState(value)
+
+  React.useEffect(() => {
+    setDraftValue(value)
+  }, [value])
+
+  const active = value.trim().length > 0
+  const applyValue = React.useCallback(() => {
+    onValueChange?.(category.id, draftValue.trim())
+  }, [category.id, draftValue, onValueChange])
+
+  return (
+    <DropdownMenuSub
+      onOpenChange={(open) => {
+        if (!open) {
+          setDraftValue(value)
+        }
+      }}
+    >
+      <DropdownMenuSubTrigger
+        className={cn(
+          "cursor-pointer py-1.5 text-xs",
+          active && "text-brand-purple"
+        )}
+      >
+        <category.icon
+          className={cn(
+            "mr-2 h-3.5 w-3.5 text-muted-foreground",
+            active && "text-brand-purple"
+          )}
+        />
+        {category.label}
+        {active ? <Check className="ml-auto h-4 w-4" /> : null}
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent className="w-64 p-2">
+        <div className="space-y-2">
+          <input
+            aria-label={category.label}
+            className="h-8 w-full rounded-md bg-muted/50 px-2 py-1 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted"
+            placeholder={
+              category.valuePlaceholder ??
+              `Enter ${category.label.toLowerCase()}...`
+            }
+            value={draftValue}
+            onChange={(event) => setDraftValue(event.target.value)}
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={(event) => {
+              event.stopPropagation()
+              if (event.key === "Enter") {
+                event.preventDefault()
+                applyValue()
+              }
+            }}
+          />
+          <div className="flex items-center justify-end gap-2">
+            {active ? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 text-xs"
+                onClick={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  setDraftValue("")
+                  onValueChange?.(category.id, "")
+                }}
+              >
+                Clear
+              </Button>
+            ) : null}
+            <Button
+              type="button"
+              size="sm"
+              className="h-7 px-2 text-xs"
+              onClick={(event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                applyValue()
+              }}
+            >
+              Apply
+            </Button>
+          </div>
+        </div>
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  )
+}
+
 export interface DataTableFilterProps {
   categories: DataTableFilterCategory[]
   selectedFilters: Record<string, string[]>
@@ -71,6 +192,10 @@ export interface DataTableFilterProps {
   onConditionFiltersChange?: (conditions: ConditionFilterValue[]) => void
   /** Dropdown entry label for the condition-builder panel. Default: "Add filter". */
   conditionBuilderLabel?: string
+  /** Active free-text filters keyed by category id. */
+  textFilters?: Record<string, string>
+  /** Callback when a free-text filter value is applied or cleared. */
+  onTextFilterChange?: (categoryId: string, value: string) => void
 }
 
 export function DataTableFilter({
@@ -86,6 +211,8 @@ export function DataTableFilter({
   conditionFilters = [],
   onConditionFiltersChange,
   conditionBuilderLabel = "Add filter",
+  textFilters = {},
+  onTextFilterChange,
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
   const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})
@@ -103,6 +230,10 @@ export function DataTableFilter({
         return true
       }
 
+      if (isTextFilterCategory(category)) {
+        return false
+      }
+
       return category.options.some((option) =>
         getOptionLabel(option).toLowerCase().includes(normalized)
       )
@@ -123,8 +254,16 @@ export function DataTableFilter({
       0
     )
 
-    return userCount + conditionFilters.length
-  }, [selectedFilters, conditionFilters.length])
+    const textCount = categories.reduce((count, category) => {
+      if (!isTextFilterCategory(category)) {
+        return count
+      }
+
+      return textFilters[category.id]?.trim() ? count + 1 : count
+    }, 0)
+
+    return userCount + conditionFilters.length + textCount
+  }, [categories, selectedFilters, conditionFilters.length, textFilters])
 
   /** Collect all preset chips to render */
   const presetChips = React.useMemo(() => {
@@ -135,9 +274,9 @@ export function DataTableFilter({
     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 option = category && !isTextFilterCategory(category)
+          ? category.options.find((opt) => getOptionValue(opt) === value)
+          : undefined
         const label = option ? getOptionLabel(option) : value
         const active = selectedFilters[categoryId]?.includes(value) ?? false
         chips.push({ categoryId, value, label, active })
@@ -208,6 +347,18 @@ export function DataTableFilter({
               )
             }
 
+            /* ── Free-text submenu ───────────────────────────────── */
+            if (isTextFilterCategory(category)) {
+              return (
+                <TextFilterSubmenu
+                  key={category.id}
+                  category={category}
+                  value={textFilters[category.id] ?? ""}
+                  onValueChange={onTextFilterChange}
+                />
+              )
+            }
+
             /* ── Sub-menu (single / multi) ──────────────────────── */
             const subQuery = (subQueries[category.id] ?? "").trim().toLowerCase()
             const filteredOptions = subQuery

package/src/components/entity-panel.tsx

@@ -258,14 +258,16 @@ 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] overflow-hidden">
+    <div className="mb-7 grid min-w-0 grid-cols-1 gap-x-4 gap-y-3 overflow-hidden text-[13px] md:grid-cols-[minmax(0,140px)_minmax(0,1fr)]">
       {fields.map((field, idx) => (
         <React.Fragment key={idx}>
-          <div className="flex items-center gap-1.5 text-muted-foreground text-[13px] font-normal">
-            <field.icon className="w-3.5 h-3.5 shrink-0" />
-            <span>{field.label}</span>
+          <div className="flex min-w-0 items-start gap-1.5 text-[13px] font-normal text-muted-foreground">
+            <field.icon className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+            <span className="min-w-0 break-words leading-relaxed [overflow-wrap:anywhere]">{field.label}</span>
+          </div>
+          <div className="min-w-0 whitespace-normal break-words leading-relaxed text-foreground [overflow-wrap:anywhere] [&_*]:max-w-full [&_*]:[overflow-wrap:anywhere] [&_a]:break-all">
+            {field.value}
           </div>
-          <div className="min-w-0 truncate text-foreground">{field.value}</div>
         </React.Fragment>
       ))}
     </div>