@handled-ai/design-system 0.16.0 → 0.16.1

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

@@ -0,0 +1,513 @@
+"use client"
+
+import * as React from "react"
+import {
+  CalendarDays,
+  DollarSign,
+  Eye,
+  Hash,
+  MoreHorizontal,
+  Plus,
+  Trash2,
+  Type,
+} from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select"
+
+// ── Types ──────────────────────────────────────────────────────
+
+export type ConditionOperator =
+  | "eq"
+  | "neq"
+  | "gt"
+  | "gte"
+  | "lt"
+  | "lte"
+  | "in"
+  | "is_null"
+  | "is_not_null"
+
+export interface ConditionFieldDef {
+  /** Unique field key (e.g., "Account_Balance__c") */
+  id: string
+  /** Display label (e.g., "Account Balance") */
+  label: string
+  /** Field data type — determines which operators are available and how the value input renders */
+  type: "text" | "number" | "currency" | "date"
+  /** Allowed operators for this field. Defaults based on type if not provided. */
+  operators?: ConditionOperator[]
+}
+
+export interface ConditionFilterValue {
+  /** Stable identity — used as React key to avoid stale-state bugs on removal */
+  id: string
+  field: string
+  operator: ConditionOperator
+  value: string | number | null
+}
+
+interface DataTableConditionFilterProps {
+  /** Available fields the user can filter on */
+  fields: ConditionFieldDef[]
+  /** Current active conditions */
+  conditions: ConditionFilterValue[]
+  /** Called when conditions change (add, update, remove) */
+  onConditionsChange: (conditions: ConditionFilterValue[]) => void
+  className?: string
+}
+
+// ── Constants ──────────────────────────────────────────────────
+
+const OPERATOR_LABELS: Record<ConditionOperator, string> = {
+  eq: "=",
+  neq: "≠",
+  gt: ">",
+  gte: "≥",
+  lt: "<",
+  lte: "≤",
+  in: "contains",
+  is_null: "is empty",
+  is_not_null: "is not empty",
+}
+
+const NUMERIC_OPERATORS: ConditionOperator[] = [
+  "eq",
+  "neq",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "is_null",
+  "is_not_null",
+]
+
+const DEFAULT_OPERATORS: Record<ConditionFieldDef["type"], ConditionOperator[]> = {
+  text: ["eq", "neq", "is_null", "is_not_null"],
+  number: NUMERIC_OPERATORS,
+  currency: NUMERIC_OPERATORS,
+  date: ["gt", "gte", "lt", "lte", "eq", "neq", "is_null", "is_not_null"],
+}
+
+/** Generate a stable unique ID for a new condition row. */
+function generateConditionId(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID()
+  }
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+// ── Helpers ────────────────────────────────────────────────────
+
+function getOperators(field: ConditionFieldDef): ConditionOperator[] {
+  return (field.operators ?? DEFAULT_OPERATORS[field.type]).filter((op) => op !== "in")
+}
+
+function isUnaryOperator(op: ConditionOperator): boolean {
+  return op === "is_null" || op === "is_not_null"
+}
+
+function getDefaultOperator(field: ConditionFieldDef): ConditionOperator {
+  return getOperators(field)[0] ?? "eq"
+}
+
+function createDraftCondition(field: ConditionFieldDef): ConditionFilterValue {
+  return {
+    id: generateConditionId(),
+    field: field.id,
+    operator: getDefaultOperator(field),
+    value: null,
+  }
+}
+
+function normalizeCondition(
+  condition: ConditionFilterValue,
+  fields: ConditionFieldDef[],
+): ConditionFilterValue {
+  const field = fields.find((f) => f.id === condition.field) ?? fields[0]
+  if (!field) return condition
+
+  const operators = getOperators(field)
+  const operator = operators.includes(condition.operator)
+    ? condition.operator
+    : getDefaultOperator(field)
+
+  return {
+    ...condition,
+    field: field.id,
+    operator,
+    value: isUnaryOperator(operator) ? null : condition.value,
+  }
+}
+
+function parseConditionValue(
+  raw: string,
+  fieldType: ConditionFieldDef["type"],
+): string | number | null {
+  if (raw === "") return null
+  if (fieldType === "number" || fieldType === "currency") {
+    const parsed = Number(raw)
+    return Number.isNaN(parsed) ? null : parsed
+  }
+  return raw
+}
+
+function isCompleteCondition(
+  condition: ConditionFilterValue,
+  fields: ConditionFieldDef[],
+): boolean {
+  const field = fields.find((f) => f.id === condition.field)
+  if (!field) return false
+  if (!getOperators(field).includes(condition.operator)) return false
+  if (isUnaryOperator(condition.operator)) return true
+  return condition.value !== null && condition.value !== ""
+}
+
+function getFieldIcon(type: ConditionFieldDef["type"]) {
+  if (type === "currency") return DollarSign
+  if (type === "number") return Hash
+  if (type === "date") return CalendarDays
+  return Type
+}
+
+// ── Condition Row ──────────────────────────────────────────────
+
+interface ConditionRowProps {
+  condition: ConditionFilterValue
+  fields: ConditionFieldDef[]
+  index: number
+  onChange: (updated: ConditionFilterValue) => void
+  onRemove: () => void
+  onCommit: () => void
+}
+
+function ConditionRow({
+  condition,
+  fields,
+  index,
+  onChange,
+  onRemove,
+  onCommit,
+}: ConditionRowProps) {
+  const fieldDef = fields.find((f) => f.id === condition.field) ?? fields[0]
+  const operators = getOperators(fieldDef)
+  const isUnary = isUnaryOperator(condition.operator)
+  const FieldIcon = getFieldIcon(fieldDef.type)
+
+  const handleFieldChange = (newFieldId: string) => {
+    const newFieldDef = fields.find((f) => f.id === newFieldId) ?? fields[0]
+    if (!newFieldDef) return
+    onChange({
+      ...condition,
+      field: newFieldDef.id,
+      operator: getDefaultOperator(newFieldDef),
+      value: null,
+    })
+  }
+
+  const handleOperatorChange = (newOp: ConditionOperator) => {
+    onChange({
+      ...condition,
+      operator: newOp,
+      value: isUnaryOperator(newOp) ? null : condition.value,
+    })
+  }
+
+  const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({
+      ...condition,
+      value: parseConditionValue(event.target.value, fieldDef.type),
+    })
+  }
+
+  return (
+    <div
+      className="grid grid-cols-[52px_minmax(150px,1fr)_120px_minmax(140px,1fr)_auto] items-center gap-2 rounded-lg border border-border/70 bg-background p-2 shadow-sm"
+      data-slot="condition-row"
+    >
+      <div className="text-xs font-medium text-muted-foreground">
+        {index === 0 ? "Where" : "And"}
+      </div>
+
+      <Select value={condition.field} onValueChange={handleFieldChange}>
+        <SelectTrigger className="h-8 w-full justify-start gap-2" size="sm">
+          <FieldIcon className="h-3.5 w-3.5 text-muted-foreground" />
+          <SelectValue placeholder={fieldDef.label} />
+        </SelectTrigger>
+        <SelectContent>
+          {fields.map((field) => {
+            const Icon = getFieldIcon(field.type)
+            return (
+              <SelectItem key={field.id} value={field.id}>
+                <span className="inline-flex items-center gap-2">
+                  <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+                  {field.label}
+                </span>
+              </SelectItem>
+            )
+          })}
+        </SelectContent>
+      </Select>
+
+      <Select
+        value={condition.operator}
+        onValueChange={(value) => handleOperatorChange(value as ConditionOperator)}
+      >
+        <SelectTrigger className="h-8 w-full" size="sm">
+          <SelectValue placeholder="Operator" />
+        </SelectTrigger>
+        <SelectContent>
+          {operators.map((op) => (
+            <SelectItem key={op} value={op}>
+              {OPERATOR_LABELS[op]}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {isUnary ? (
+        <div className="h-8 rounded-md border border-dashed border-border/70 bg-muted/30 px-3 py-1.5 text-xs text-muted-foreground">
+          No value needed
+        </div>
+      ) : (
+        <div className="relative flex items-center">
+          {fieldDef.type === "currency" ? (
+            <span className="pointer-events-none absolute left-2 text-sm text-muted-foreground">
+              $
+            </span>
+          ) : null}
+          <Input
+            type={
+              fieldDef.type === "number" || fieldDef.type === "currency"
+                ? "number"
+                : fieldDef.type === "date"
+                  ? "date"
+                  : "text"
+            }
+            value={condition.value != null ? String(condition.value) : ""}
+            onChange={handleValueChange}
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={(event) => {
+              event.stopPropagation()
+              if (event.key === "Enter") {
+                onCommit()
+              }
+            }}
+            placeholder={
+              fieldDef.type === "currency"
+                ? "Amount"
+                : fieldDef.type === "number"
+                  ? "Enter number..."
+                  : fieldDef.type === "date"
+                    ? ""
+                    : "Enter value..."
+            }
+            className={cn("h-8", fieldDef.type === "currency" && "pl-6")}
+          />
+        </div>
+      )}
+
+      <div className="flex items-center gap-1">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-muted-foreground"
+          aria-label="Toggle condition visibility"
+          onClick={(event) => event.preventDefault()}
+        >
+          <Eye className="size-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-muted-foreground"
+          aria-label="More condition actions"
+          onClick={(event) => event.preventDefault()}
+        >
+          <MoreHorizontal className="size-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-muted-foreground hover:text-destructive"
+          onClick={onRemove}
+          aria-label="Remove condition"
+        >
+          <Trash2 className="size-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// ── Main Component ─────────────────────────────────────────────
+
+function DataTableConditionFilter({
+  fields,
+  conditions,
+  onConditionsChange,
+  className,
+}: DataTableConditionFilterProps) {
+  const [drafts, setDrafts] = React.useState<ConditionFilterValue[]>(() =>
+    conditions.map((condition) => normalizeCondition(condition, fields)),
+  )
+
+  React.useEffect(() => {
+    setDrafts(conditions.map((condition) => normalizeCondition(condition, fields)))
+  }, [conditions, fields])
+
+  const commitDrafts = React.useCallback(
+    (nextDrafts: ConditionFilterValue[] = drafts) => {
+      onConditionsChange(
+        nextDrafts
+          .map((condition) => normalizeCondition(condition, fields))
+          .filter((condition) => isCompleteCondition(condition, fields)),
+      )
+    },
+    [drafts, fields, onConditionsChange],
+  )
+
+  const handleAdd = () => {
+    const firstField = fields[0]
+    if (!firstField) return
+    const committedDrafts = drafts.filter((condition) =>
+      isCompleteCondition(condition, fields),
+    )
+    const nextDrafts = [...committedDrafts, createDraftCondition(firstField)]
+    setDrafts(nextDrafts)
+    commitDrafts(committedDrafts)
+  }
+
+  const handleUpdate = (index: number, updated: ConditionFilterValue) => {
+    setDrafts((current) => {
+      const next = [...current]
+      next[index] = normalizeCondition(updated, fields)
+      return next
+    })
+  }
+
+  const handleRemove = (index: number) => {
+    setDrafts((current) => {
+      const next = current.filter((_, currentIndex) => currentIndex !== index)
+      commitDrafts(next)
+      return next
+    })
+  }
+
+  const handleClear = () => {
+    setDrafts([])
+    onConditionsChange([])
+  }
+
+  const hasAppliedConditions = conditions.length > 0
+  const hasDrafts = drafts.length > 0
+
+  return (
+    <div
+      className={cn(
+        "w-[min(760px,calc(100vw-2rem))] rounded-xl border border-border bg-background p-3 text-foreground shadow-xl",
+        className,
+      )}
+      data-slot="condition-filter"
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        if (event.key !== "Escape") {
+          event.stopPropagation()
+        }
+      }}
+    >
+      <div className="mb-3 flex items-center justify-between gap-3 border-b border-border/70 pb-3">
+        <div>
+          <div className="text-sm font-semibold">Filter builder</div>
+          <div className="text-xs text-muted-foreground">
+            Build field, operator, and value conditions.
+          </div>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-8 text-xs text-destructive hover:text-destructive"
+          onClick={handleClear}
+          disabled={!hasAppliedConditions && !hasDrafts}
+        >
+          Clear filters
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {drafts.map((condition, index) => (
+          <ConditionRow
+            key={condition.id}
+            condition={condition}
+            fields={fields}
+            index={index}
+            onChange={(updated) => handleUpdate(index, updated)}
+            onRemove={() => handleRemove(index)}
+            onCommit={() => commitDrafts()}
+          />
+        ))}
+      </div>
+
+      {!hasDrafts ? (
+        <div className="rounded-lg border border-dashed border-border/80 bg-muted/20 px-3 py-5 text-center text-xs text-muted-foreground">
+          No builder filters yet. Add a filter to start a condition row.
+        </div>
+      ) : null}
+
+      <div className="mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-border/70 pt-3">
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-8 text-xs text-muted-foreground"
+            onClick={handleAdd}
+          >
+            <Plus className="mr-1 size-3.5" />
+            Add filter
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-8 text-xs text-muted-foreground opacity-60"
+            disabled
+            aria-disabled="true"
+          >
+            <Plus className="mr-1 size-3.5" />
+            Add filter group
+          </Button>
+        </div>
+        <Button
+          type="button"
+          size="sm"
+          className="h-8 text-xs"
+          onClick={() => commitDrafts()}
+        >
+          Apply
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export {
+  DataTableConditionFilter,
+  OPERATOR_LABELS,
+  DEFAULT_OPERATORS,
+  generateConditionId,
+  getOperators,
+}
+export type { DataTableConditionFilterProps }

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

@@ -1,10 +1,17 @@
 "use client"
 
 import * as React from "react"
-import { ListFilter, Search } from "lucide-react"
+import { Check, ListFilter, Plus, Search } from "lucide-react"
+
+import { Popover as PopoverPrimitive } from "radix-ui"
 
 import { cn } from "../lib/utils"
 import { Button } from "./button"
+import {
+  DataTableConditionFilter,
+  type ConditionFieldDef,
+  type ConditionFilterValue,
+} from "./data-table-condition-filter"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,6 +32,8 @@ export interface DataTableFilterCategory {
   label: string
   icon: React.ComponentType<{ className?: string }>
   options: (string | FilterOption)[]
+  /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
+  type?: "multi" | "single" | "boolean"
 }
 
 function getOptionValue(option: string | FilterOption): string {
@@ -47,6 +56,14 @@ export interface DataTableFilterProps {
   onTogglePreset?: (categoryId: string, option: string) => void
   /** Label shown on preset chips to distinguish from user-applied filters. Default: "Default". */
   presetLabel?: string
+  /** Fields exposed in the unified condition-builder panel. */
+  conditionFields?: ConditionFieldDef[]
+  /** Active builder-managed field/operator/value conditions. */
+  conditionFilters?: ConditionFilterValue[]
+  /** Callback when builder-managed conditions are applied, removed, or cleared. */
+  onConditionFiltersChange?: (conditions: ConditionFilterValue[]) => void
+  /** Dropdown entry label for the condition-builder panel. Default: "Add filter". */
+  conditionBuilderLabel?: string
 }
 
 export function DataTableFilter({
@@ -58,9 +75,15 @@ export function DataTableFilter({
   presetFilters,
   onTogglePreset,
   presetLabel = "Default",
+  conditionFields = [],
+  conditionFilters = [],
+  onConditionFiltersChange,
+  conditionBuilderLabel = "Add filter",
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
   const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})
+  const [conditionBuilderOpen, setConditionBuilderOpen] = React.useState(false)
+  const hasConditionBuilder = conditionFields.length > 0
 
   const visibleCategories = React.useMemo(() => {
     const normalized = query.trim().toLowerCase()
@@ -95,7 +118,7 @@ export function DataTableFilter({
     )
 
     // Count active preset filters (those that are in presetFilters AND currently active in selectedFilters)
-    let presetCount = 0
+    const presetCount = 0
     if (presetFilters) {
       for (const [categoryId, presetValues] of Object.entries(presetFilters)) {
         for (const value of presetValues) {
@@ -109,8 +132,8 @@ export function DataTableFilter({
       }
     }
 
-    return userCount + presetCount
-  }, [selectedFilters, presetFilters])
+    return userCount + presetCount + conditionFilters.length
+  }, [selectedFilters, presetFilters, conditionFilters.length])
 
   /** Collect all preset chips to render */
   const presetChips = React.useMemo(() => {
@@ -170,6 +193,31 @@ export function DataTableFilter({
 
         <div className="max-h-[320px] overflow-y-auto p-1">
           {visibleCategories.map((category) => {
+            const filterType = category.type ?? "multi"
+
+            /* ── Boolean toggle ─────────────────────────────────── */
+            if (filterType === "boolean") {
+              const active = selectedFilters[category.id]?.includes("true") ?? false
+              return (
+                <DropdownMenuItem
+                  key={category.id}
+                  className={cn(
+                    "cursor-pointer py-1.5 text-xs",
+                    active && "text-brand-purple"
+                  )}
+                  onSelect={(event) => {
+                    event.preventDefault()
+                    onToggleFilter(category.id, "true")
+                  }}
+                >
+                  <category.icon className="mr-2 h-3.5 w-3.5" />
+                  {category.label}
+                  {active ? <Check className="ml-auto h-4 w-4" /> : null}
+                </DropdownMenuItem>
+              )
+            }
+
+            /* ── Sub-menu (single / multi) ──────────────────────── */
             const subQuery = (subQueries[category.id] ?? "").trim().toLowerCase()
             const filteredOptions = subQuery
               ? category.options.filter((opt) =>
@@ -241,6 +289,8 @@ export function DataTableFilter({
                             <span className="text-brand-purple text-[10px] font-semibold">
                               {presetLabel}
                             </span>
+                          ) : filterType === "single" ? (
+                            <span className="h-1.5 w-1.5 rounded-full bg-current" />
                           ) : (
                             <span className="text-[10px] font-semibold text-brand-purple">
                               Applied
@@ -266,6 +316,54 @@ export function DataTableFilter({
             </div>
           ) : null}
         </div>
+
+        {hasConditionBuilder ? (
+          <div className="border-t border-border p-1">
+            <PopoverPrimitive.Root
+              open={conditionBuilderOpen}
+              onOpenChange={setConditionBuilderOpen}
+            >
+              <PopoverPrimitive.Trigger asChild>
+                <DropdownMenuItem
+                  className="cursor-pointer py-1.5 text-xs"
+                  onSelect={(event) => {
+                    event.preventDefault()
+                    setConditionBuilderOpen(true)
+                  }}
+                >
+                  <Plus className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
+                  {conditionBuilderLabel}
+                  {conditionFilters.length > 0 ? (
+                    <span className="ml-auto rounded bg-muted px-1.5 py-0 text-[10px] font-semibold">
+                      {conditionFilters.length}
+                    </span>
+                  ) : null}
+                </DropdownMenuItem>
+              </PopoverPrimitive.Trigger>
+              <PopoverPrimitive.Portal>
+                <PopoverPrimitive.Content
+                  align="start"
+                  side="right"
+                  sideOffset={8}
+                  className="z-60 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+                  onEscapeKeyDown={() => setConditionBuilderOpen(false)}
+                  onInteractOutside={(event) => {
+                    const target = event.target as HTMLElement | null
+                    if (target?.closest('[data-slot="dropdown-menu-content"]')) {
+                      event.preventDefault()
+                    }
+                  }}
+                >
+                  <DataTableConditionFilter
+                    fields={conditionFields}
+                    conditions={conditionFilters}
+                    onConditionsChange={onConditionFiltersChange ?? (() => {})}
+                  />
+                </PopoverPrimitive.Content>
+              </PopoverPrimitive.Portal>
+            </PopoverPrimitive.Root>
+          </div>
+        ) : null}
       </DropdownMenuContent>
     </DropdownMenu>
   )

package/src/index.ts

@@ -25,6 +25,7 @@ export * from "./components/contact-chip"
 export * from "./components/contact-list"
 export * from "./components/dashboard-cards"
 export * from "./components/data-table"
+export * from "./components/data-table-condition-filter"
 export * from "./components/data-table-display"
 export * from "./components/data-table-filter"
 export * from "./components/data-table-quick-views"