@handled-ai/design-system 0.18.10 → 0.18.11

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

@@ -3,6 +3,7 @@
 import * as React from "react"
 import {
   CalendarDays,
+  Check,
   DollarSign,
   Eye,
   Hash,
@@ -10,6 +11,7 @@ import {
   Plus,
   Trash2,
   Type,
+  type LucideIcon,
 } from "lucide-react"
 
 import { cn } from "../lib/utils"
@@ -36,15 +38,26 @@ export type ConditionOperator =
   | "is_null"
   | "is_not_null"
 
+export interface ConditionOptionObject {
+  label: string
+  value: string
+}
+
+export type ConditionFieldOption = string | ConditionOptionObject
+
 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"
+  type: "text" | "number" | "currency" | "date" | "select" | "multi_select"
   /** Allowed operators for this field. Defaults based on type if not provided. */
   operators?: ConditionOperator[]
+  /** Options used by select and multi-select fields. Strings use the same label and value. */
+  options?: ConditionFieldOption[]
+  /** Show a search box for option-backed value inputs. */
+  searchable?: boolean | { threshold?: number }
 }
 
 export interface ConditionFilterValue {
@@ -52,7 +65,7 @@ export interface ConditionFilterValue {
   id: string
   field: string
   operator: ConditionOperator
-  value: string | number | null
+  value: string | number | string[] | null
 }
 
 interface DataTableConditionFilterProps {
@@ -74,7 +87,7 @@ const OPERATOR_LABELS: Record<ConditionOperator, string> = {
   gte: "≥",
   lt: "<",
   lte: "≤",
-  in: "contains",
+  in: "is any of",
   is_null: "is empty",
   is_not_null: "is not empty",
 }
@@ -95,6 +108,8 @@ const DEFAULT_OPERATORS: Record<ConditionFieldDef["type"], ConditionOperator[]>
   number: NUMERIC_OPERATORS,
   currency: NUMERIC_OPERATORS,
   date: ["gt", "gte", "lt", "lte", "eq", "neq", "is_null", "is_not_null"],
+  select: ["eq", "neq", "is_null", "is_not_null"],
+  multi_select: ["in", "is_null", "is_not_null"],
 }
 
 /** Generate a stable unique ID for a new condition row. */
@@ -108,7 +123,7 @@ function generateConditionId(): string {
 // ── Helpers ────────────────────────────────────────────────────
 
 function getOperators(field: ConditionFieldDef): ConditionOperator[] {
-  return (field.operators ?? DEFAULT_OPERATORS[field.type]).filter((op) => op !== "in")
+  return field.operators ?? DEFAULT_OPERATORS[field.type]
 }
 
 function isUnaryOperator(op: ConditionOperator): boolean {
@@ -128,6 +143,18 @@ function createDraftCondition(field: ConditionFieldDef): ConditionFilterValue {
   }
 }
 
+function normalizeConditionValue(
+  value: ConditionFilterValue["value"],
+  field: ConditionFieldDef,
+  operator: ConditionOperator,
+): ConditionFilterValue["value"] {
+  if (isUnaryOperator(operator)) return null
+  if (field.type === "multi_select") {
+    return Array.isArray(value) ? value : null
+  }
+  return Array.isArray(value) ? null : value
+}
+
 function normalizeCondition(
   condition: ConditionFilterValue,
   fields: ConditionFieldDef[],
@@ -144,7 +171,7 @@ function normalizeCondition(
     ...condition,
     field: field.id,
     operator,
-    value: isUnaryOperator(operator) ? null : condition.value,
+    value: normalizeConditionValue(condition.value, field, operator),
   }
 }
 
@@ -168,18 +195,40 @@ function isCompleteCondition(
   if (!field) return false
   if (!getOperators(field).includes(condition.operator)) return false
   if (isUnaryOperator(condition.operator)) return true
-  return condition.value !== null && condition.value !== ""
+  if (field.type === "multi_select") {
+    return Array.isArray(condition.value) && condition.value.length > 0
+  }
+  return condition.value !== null && condition.value !== "" && !Array.isArray(condition.value)
+}
+
+function getConditionValueSignature(value: ConditionFilterValue["value"]): string {
+  return Array.isArray(value) ? JSON.stringify(value) : String(value)
 }
 
 function getConditionsSignature(conditions: ConditionFilterValue[]): string {
   return conditions
-    .map((condition) => `${condition.id}:${condition.field}:${condition.operator}:${String(condition.value)}`)
+    .map((condition) => `${condition.id}:${condition.field}:${condition.operator}:${getConditionValueSignature(condition.value)}`)
     .join(";")
 }
 
+function normalizeFieldOptions(field: ConditionFieldDef): ConditionOptionObject[] {
+  return (field.options ?? []).map((option) =>
+    typeof option === "string" ? { label: option, value: option } : option,
+  )
+}
+
 function getFieldsSignature(fields: ConditionFieldDef[]): string {
   return fields
-    .map((field) => `${field.id}:${field.type}:${field.label}:${(field.operators ?? []).join("|")}`)
+    .map((field) => {
+      const optionsSignature = normalizeFieldOptions(field)
+        .map((option) => `${option.label}:${option.value}`)
+        .join("|")
+      const searchSignature =
+        typeof field.searchable === "object"
+          ? `threshold:${field.searchable.threshold ?? ""}`
+          : String(field.searchable ?? "")
+      return `${field.id}:${field.type}:${field.label}:${(field.operators ?? []).join("|")}:${optionsSignature}:${searchSignature}`
+    })
     .join(";")
 }
 
@@ -192,15 +241,198 @@ function getCommittedConditions(
     .filter((condition) => isCompleteCondition(condition, fields))
 }
 
-function getFieldIcon(type: ConditionFieldDef["type"]) {
-  if (type === "currency") return DollarSign
-  if (type === "number") return Hash
-  if (type === "date") return CalendarDays
-  return Type
+const FIELD_ICON_BY_TYPE: Record<ConditionFieldDef["type"], LucideIcon> = {
+  text: Type,
+  number: Hash,
+  currency: DollarSign,
+  date: CalendarDays,
+  select: MoreHorizontal,
+  multi_select: MoreHorizontal,
+}
+
+function getFieldIcon(type: ConditionFieldDef["type"]): LucideIcon {
+  return FIELD_ICON_BY_TYPE[type]
 }
 
 // ── Condition Row ──────────────────────────────────────────────
 
+function getInputType(fieldType: ConditionFieldDef["type"]): "text" | "number" | "date" {
+  if (fieldType === "number" || fieldType === "currency") return "number"
+  if (fieldType === "date") return "date"
+  return "text"
+}
+
+function getInputPlaceholder(fieldType: ConditionFieldDef["type"]): string {
+  if (fieldType === "currency") return "Amount"
+  if (fieldType === "number") return "Enter number..."
+  if (fieldType === "date") return ""
+  return "Enter value..."
+}
+
+interface ConditionValueInputProps {
+  condition: ConditionFilterValue
+  fieldDef: ConditionFieldDef
+  onValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onSelectValueChange: (value: string) => void
+  onMultiSelectValueToggle: (value: string) => void
+  onCommit: () => void
+}
+
+function shouldShowOptionSearch(
+  fieldDef: ConditionFieldDef,
+  optionCount: number,
+): boolean {
+  if (fieldDef.searchable === true) return true
+  if (fieldDef.searchable === false) return false
+  if (typeof fieldDef.searchable === "object") {
+    return optionCount >= (fieldDef.searchable.threshold ?? 8)
+  }
+  return false
+}
+
+function SelectConditionValueInput({
+  condition,
+  fieldDef,
+  onSelectValueChange,
+}: Pick<ConditionValueInputProps, "condition" | "fieldDef" | "onSelectValueChange">) {
+  const [query, setQuery] = React.useState("")
+  const options = normalizeFieldOptions(fieldDef)
+  const normalizedQuery = query.trim().toLowerCase()
+  const filteredOptions = normalizedQuery
+    ? options.filter((option) => option.label.toLowerCase().includes(normalizedQuery))
+    : options
+  const showSearch = shouldShowOptionSearch(fieldDef, options.length)
+
+  return (
+    <Select
+      value={typeof condition.value === "string" ? condition.value : ""}
+      onValueChange={onSelectValueChange}
+    >
+      <SelectTrigger className="h-8 w-full" size="sm">
+        <SelectValue placeholder="Select value..." />
+      </SelectTrigger>
+      <SelectContent>
+        {showSearch ? (
+          <div className="sticky top-0 z-10 border-b border-border bg-popover p-1.5">
+            <Input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={(event) => event.stopPropagation()}
+              placeholder="Search options..."
+              className="h-7 text-xs"
+            />
+          </div>
+        ) : null}
+        {filteredOptions.length > 0 ? (
+          filteredOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))
+        ) : (
+          <div className="px-2 py-1.5 text-xs text-muted-foreground">No options</div>
+        )}
+      </SelectContent>
+    </Select>
+  )
+}
+
+function MultiSelectConditionValueInput({
+  condition,
+  fieldDef,
+  onMultiSelectValueToggle,
+}: Pick<ConditionValueInputProps, "condition" | "fieldDef" | "onMultiSelectValueToggle">) {
+  const selectedValues = Array.isArray(condition.value) ? condition.value : []
+  const options = normalizeFieldOptions(fieldDef)
+
+  return (
+    <div className="max-h-28 overflow-y-auto rounded-md border border-border bg-background p-1">
+      {options.length > 0 ? (
+        options.map((option) => {
+          const checked = selectedValues.includes(option.value)
+          return (
+            <button
+              key={option.value}
+              type="button"
+              role="checkbox"
+              aria-checked={checked}
+              className={cn(
+                "flex w-full items-center gap-2 rounded-sm px-2 py-1 text-left text-xs hover:bg-muted",
+                checked && "text-brand-purple",
+              )}
+              onClick={(event) => {
+                event.stopPropagation()
+                onMultiSelectValueToggle(option.value)
+              }}
+            >
+              <span
+                className={cn(
+                  "flex h-3.5 w-3.5 items-center justify-center rounded-sm border border-border",
+                  checked && "border-brand-purple bg-brand-purple text-white",
+                )}
+                aria-hidden="true"
+              >
+                {checked ? <Check className="h-3 w-3" /> : null}
+              </span>
+              <span className="min-w-0 flex-1 truncate">{option.label}</span>
+            </button>
+          )
+        })
+      ) : (
+        <div className="px-2 py-1 text-xs text-muted-foreground">No options</div>
+      )}
+    </div>
+  )
+}
+
+function ScalarConditionValueInput({
+  condition,
+  fieldDef,
+  onValueChange,
+  onCommit,
+}: Pick<ConditionValueInputProps, "condition" | "fieldDef" | "onValueChange" | "onCommit">) {
+  return (
+    <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={getInputType(fieldDef.type)}
+        value={
+          condition.value != null && !Array.isArray(condition.value)
+            ? String(condition.value)
+            : ""
+        }
+        onChange={onValueChange}
+        onClick={(event) => event.stopPropagation()}
+        onKeyDown={(event) => {
+          event.stopPropagation()
+          if (event.key === "Enter") {
+            onCommit()
+          }
+        }}
+        placeholder={getInputPlaceholder(fieldDef.type)}
+        className={cn("h-8", fieldDef.type === "currency" && "pl-6")}
+      />
+    </div>
+  )
+}
+
+function ConditionValueInput(props: ConditionValueInputProps) {
+  if (props.fieldDef.type === "select") {
+    return <SelectConditionValueInput {...props} />
+  }
+
+  if (props.fieldDef.type === "multi_select") {
+    return <MultiSelectConditionValueInput {...props} />
+  }
+
+  return <ScalarConditionValueInput {...props} />
+}
+
 interface ConditionRowProps {
   condition: ConditionFilterValue
   fields: ConditionFieldDef[]
@@ -238,7 +470,7 @@ function ConditionRow({
     onChange({
       ...condition,
       operator: newOp,
-      value: isUnaryOperator(newOp) ? null : condition.value,
+      value: normalizeConditionValue(condition.value, fieldDef, newOp),
     })
   }
 
@@ -249,6 +481,26 @@ function ConditionRow({
     })
   }
 
+  const handleSelectValueChange = (value: string) => {
+    onChange({
+      ...condition,
+      value,
+    })
+  }
+
+  const handleMultiSelectValueToggle = (value: string) => {
+    const currentValues = Array.isArray(condition.value) ? condition.value : []
+    const nextValues = currentValues.includes(value)
+      ? currentValues.filter((currentValue) => currentValue !== value)
+      : [...currentValues, value]
+
+    onChange({
+      ...condition,
+      value: nextValues,
+    })
+  }
+
+
   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"
@@ -299,41 +551,14 @@ function ConditionRow({
           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>
+        <ConditionValueInput
+          condition={condition}
+          fieldDef={fieldDef}
+          onValueChange={handleValueChange}
+          onSelectValueChange={handleSelectValueChange}
+          onMultiSelectValueToggle={handleMultiSelectValueToggle}
+          onCommit={onCommit}
+        />
       )}
 
       <div className="flex items-center gap-1">

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

@@ -160,7 +160,7 @@ export function DataTableFilter({
           <ListFilter className="h-3.5 w-3.5" />
           Filter
           {activeCount > 0 ? (
-            <span className="rounded bg-muted px-1.5 py-0 text-[10px] font-semibold text-foreground">
+            <span className="rounded bg-muted px-1.5 py-0 text-[10px] font-semibold">
               {activeCount}
             </span>
           ) : null}