@handled-ai/design-system 0.18.10 → 0.18.12

package/dist/components/account-contacts-popover.d.ts

@@ -12,11 +12,15 @@ 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;
     iconMap?: SuggestedActionsIconMap;
 }
-declare function AccountContactsPopover({ contacts, onSelect, onSelectTo, onSelectCc, onSelectBcc, onViewAll, onOpenRecentActivity, trigger, iconMap, }: AccountContactsPopoverProps): React.JSX.Element;
+declare function AccountContactsPopover({ contacts, onSelect, onSelectTo, onSelectCc, onSelectBcc, defaultSelectLabel, onSelectSwitch, onViewAll, onOpenRecentActivity, trigger, iconMap, }: AccountContactsPopoverProps): React.JSX.Element;
 
 export { AccountContactsPopover, type AccountContactsPopoverProps, BrandIcon };

package/dist/components/account-contacts-popover.js

@@ -24,6 +24,8 @@ function AccountContactsPopover({
   onSelectTo,
   onSelectCc,
   onSelectBcc,
+  defaultSelectLabel,
+  onSelectSwitch,
   onViewAll,
   onOpenRecentActivity,
   trigger,
@@ -32,6 +34,15 @@ function AccountContactsPopover({
   const [open, setOpen] = React.useState(false);
   const triggerRef = React.useRef(null);
   const [popoverStyle, setPopoverStyle] = React.useState({});
+  const resolvedDefaultSelectLabel = defaultSelectLabel != null ? defaultSelectLabel : onSelectSwitch ? "Switch" : void 0;
+  const handleDefaultSelect = React.useCallback((contact) => {
+    if (onSelectSwitch) {
+      onSelectSwitch(contact);
+    } else {
+      (onSelectTo != null ? onSelectTo : onSelect)(contact);
+    }
+    setOpen(false);
+  }, [onSelect, onSelectSwitch, onSelectTo]);
   React.useEffect(() => {
     if (open && triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
@@ -59,10 +70,8 @@ function AccountContactsPopover({
             "div",
             {
               role: "button",
-              onClick: () => {
-                (onSelectTo != null ? onSelectTo : onSelect)(c);
-                setOpen(false);
-              },
+              onClick: () => handleDefaultSelect(c),
+              "aria-label": resolvedDefaultSelectLabel ? `${resolvedDefaultSelectLabel} ${c.name}` : void 0,
               className: "flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer",
               children: [
                 /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0", children: c.name.split(" ").map((n) => n[0]).join("") }),
@@ -95,6 +104,18 @@ function AccountContactsPopover({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "ml-2 flex items-center gap-1.5 shrink-0", children: [
+                  resolvedDefaultSelectLabel && /* @__PURE__ */ jsx(
+                    "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",
+                      children: resolvedDefaultSelectLabel
+                    }
+                  ),
                   onSelectTo && /* @__PURE__ */ jsx(
                     "button",
                     {

package/dist/components/account-contacts-popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/account-contacts-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Clock,\n  ExternalLink,\n} from \"lucide-react\"\nimport type { SuggestedContact, SuggestedActionsIconMap } from \"./suggested-actions\"\n\n// ---------------------------------------------------------------------------\n// BrandIcon\n// ---------------------------------------------------------------------------\n\nexport function BrandIcon({ src, alt, className }: { src: string; alt: string; className?: string }) {\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={`${className ?? \"\"} object-contain`}\n      draggable={false}\n    />\n  )\n}\n\n// ---------------------------------------------------------------------------\n// AccountContactsPopover\n// ---------------------------------------------------------------------------\n\nexport interface AccountContactsPopoverProps {\n  contacts: SuggestedContact[]\n  onSelect: (contact: SuggestedContact) => void\n  onSelectTo?: (contact: SuggestedContact) => void\n  onSelectCc?: (contact: SuggestedContact) => void\n  onSelectBcc?: (contact: SuggestedContact) => void\n  onViewAll?: () => void\n  onOpenRecentActivity?: () => void\n  trigger: React.ReactNode\n  iconMap?: SuggestedActionsIconMap\n}\n\nexport function AccountContactsPopover({\n  contacts,\n  onSelect,\n  onSelectTo,\n  onSelectCc,\n  onSelectBcc,\n  onViewAll,\n  onOpenRecentActivity,\n  trigger,\n  iconMap,\n}: AccountContactsPopoverProps) {\n  const [open, setOpen] = React.useState(false)\n  const triggerRef = React.useRef<HTMLDivElement>(null)\n  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})\n\n  React.useEffect(() => {\n    if (open && triggerRef.current) {\n      const rect = triggerRef.current.getBoundingClientRect()\n      const popoverWidth = Math.min(448, window.innerWidth - 32)\n      let left = rect.right - popoverWidth\n      if (left < 16) left = 16\n      if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth\n      const popoverHeight = 320;\n      const spaceBelow = window.innerHeight - rect.bottom - 8;\n      const spaceAbove = rect.top - 8;\n      const placeAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow;\n      const top = placeAbove ? rect.top - popoverHeight - 4 : rect.bottom + 4;\n      setPopoverStyle({ position: \"fixed\", top: Math.max(8, top), left, maxHeight: placeAbove ? spaceAbove : spaceBelow })\n    }\n  }, [open])\n\n  return (\n    <div>\n      <div ref={triggerRef} onClick={() => setOpen(!open)}>{trigger}</div>\n      {open && (\n        <>\n          <div className=\"fixed inset-0 z-40\" onClick={() => setOpen(false)} />\n          <div style={popoverStyle} className=\"fixed bg-background border border-border rounded-lg shadow-xl z-50 w-[28rem] max-w-[calc(100vw-2rem)] py-2 animate-in fade-in slide-in-from-top-1 duration-150 overflow-y-auto\">\n            <div className=\"px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide\">\n              Account Contacts\n            </div>\n            <div className=\"max-h-48 overflow-y-auto\">\n              {contacts.map((c, i) => (\n                <div\n                  key={i}\n                  role=\"button\"\n                  onClick={() => { (onSelectTo ?? onSelect)(c); setOpen(false) }}\n                  className=\"flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer\"\n                >\n                  <div className=\"w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0\">\n                    {c.name.split(\" \").map((n) => n[0]).join(\"\")}\n                  </div>\n                  <div className=\"flex-1 min-w-0 overflow-hidden\">\n                    <div className=\"truncate text-sm font-medium text-foreground\">{c.name}</div>\n                    <div className=\"truncate text-xs text-muted-foreground leading-tight\">\n                      {c.role} · {c.email ?? c.emails?.[0] ?? c.phone ?? c.phones?.[0] ?? \"\"}\n                    </div>\n                    {c.lastActivity && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onOpenRecentActivity?.()\n                          setOpen(false)\n                        }}\n                        className=\"mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n                      >\n                        <Clock className=\"w-3 h-3 shrink-0\" />\n                        <span className=\"shrink-0 font-medium\">Last activity</span>\n                        <span className=\"shrink-0 text-muted-foreground/60\">·</span>\n                        <span className=\"shrink-0\">{c.lastActivity.date}</span>\n                        <span className=\"shrink-0 text-muted-foreground/60\">·</span>\n                        <span className=\"truncate capitalize\">{c.lastActivity.type}</span>\n                      </button>\n                    )}\n                  </div>\n                  <div className=\"ml-2 flex items-center gap-1.5 shrink-0\">\n                    {onSelectTo && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectTo(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        To\n                      </button>\n                    )}\n                    {onSelectCc && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectCc(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        Cc\n                      </button>\n                    )}\n                    {onSelectBcc && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectBcc(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        Bcc\n                      </button>\n                    )}\n                    <button\n                      type=\"button\"\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        if (c.salesforceUrl) {\n                          window.open(c.salesforceUrl, \"_blank\", \"noopener,noreferrer\")\n                        } else {\n                          onViewAll?.()\n                        }\n                      }}\n                      className=\"h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0\"\n                      aria-label={`Open ${c.name} in Salesforce`}\n                    >\n                      {iconMap?.salesforce ? (\n                        <BrandIcon src={iconMap.salesforce} alt=\"Salesforce\" className=\"w-3.5 h-3.5\" />\n                      ) : (\n                        <ExternalLink className=\"w-3.5 h-3.5 text-muted-foreground\" />\n                      )}\n                    </button>\n                  </div>\n                </div>\n              ))}\n            </div>\n            {onViewAll && (\n              <>\n                <div className=\"h-px bg-border mx-3 my-1\" />\n                <button\n                  onClick={() => { onViewAll(); setOpen(false) }}\n                  className=\"flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n                >\n                  <ExternalLink className=\"w-3 h-3\" />\n                  View all contacts\n                </button>\n              </>\n            )}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/account-contacts-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Clock,\n  ExternalLink,\n} from \"lucide-react\"\nimport type { SuggestedContact, SuggestedActionsIconMap } from \"./suggested-actions\"\n\n// ---------------------------------------------------------------------------\n// BrandIcon\n// ---------------------------------------------------------------------------\n\nexport function BrandIcon({ src, alt, className }: { src: string; alt: string; className?: string }) {\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={`${className ?? \"\"} object-contain`}\n      draggable={false}\n    />\n  )\n}\n\n// ---------------------------------------------------------------------------\n// AccountContactsPopover\n// ---------------------------------------------------------------------------\n\nexport interface AccountContactsPopoverProps {\n  contacts: SuggestedContact[]\n  onSelect: (contact: SuggestedContact) => void\n  onSelectTo?: (contact: SuggestedContact) => void\n  onSelectCc?: (contact: SuggestedContact) => void\n  onSelectBcc?: (contact: SuggestedContact) => void\n  /** Label for the default contact row action. Defaults to \"Add\" or \"Switch\" when onSelectSwitch is provided. */\n  defaultSelectLabel?: string\n  /** Optional replacement-selection callback. When provided, row clicks call this instead of additive onSelect/onSelectTo. */\n  onSelectSwitch?: (contact: SuggestedContact) => void\n  onViewAll?: () => void\n  onOpenRecentActivity?: () => void\n  trigger: React.ReactNode\n  iconMap?: SuggestedActionsIconMap\n}\n\nexport function AccountContactsPopover({\n  contacts,\n  onSelect,\n  onSelectTo,\n  onSelectCc,\n  onSelectBcc,\n  defaultSelectLabel,\n  onSelectSwitch,\n  onViewAll,\n  onOpenRecentActivity,\n  trigger,\n  iconMap,\n}: AccountContactsPopoverProps) {\n  const [open, setOpen] = React.useState(false)\n  const triggerRef = React.useRef<HTMLDivElement>(null)\n  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})\n  const resolvedDefaultSelectLabel = defaultSelectLabel ?? (onSelectSwitch ? \"Switch\" : undefined)\n  const handleDefaultSelect = React.useCallback((contact: SuggestedContact) => {\n    if (onSelectSwitch) {\n      onSelectSwitch(contact)\n    } else {\n      (onSelectTo ?? onSelect)(contact)\n    }\n    setOpen(false)\n  }, [onSelect, onSelectSwitch, onSelectTo])\n\n  React.useEffect(() => {\n    if (open && triggerRef.current) {\n      const rect = triggerRef.current.getBoundingClientRect()\n      const popoverWidth = Math.min(448, window.innerWidth - 32)\n      let left = rect.right - popoverWidth\n      if (left < 16) left = 16\n      if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth\n      const popoverHeight = 320;\n      const spaceBelow = window.innerHeight - rect.bottom - 8;\n      const spaceAbove = rect.top - 8;\n      const placeAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow;\n      const top = placeAbove ? rect.top - popoverHeight - 4 : rect.bottom + 4;\n      setPopoverStyle({ position: \"fixed\", top: Math.max(8, top), left, maxHeight: placeAbove ? spaceAbove : spaceBelow })\n    }\n  }, [open])\n\n  return (\n    <div>\n      <div ref={triggerRef} onClick={() => setOpen(!open)}>{trigger}</div>\n      {open && (\n        <>\n          <div className=\"fixed inset-0 z-40\" onClick={() => setOpen(false)} />\n          <div style={popoverStyle} className=\"fixed bg-background border border-border rounded-lg shadow-xl z-50 w-[28rem] max-w-[calc(100vw-2rem)] py-2 animate-in fade-in slide-in-from-top-1 duration-150 overflow-y-auto\">\n            <div className=\"px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide\">\n              Account Contacts\n            </div>\n            <div className=\"max-h-48 overflow-y-auto\">\n              {contacts.map((c, i) => (\n                <div\n                  key={i}\n                  role=\"button\"\n                  onClick={() => handleDefaultSelect(c)}\n                  aria-label={resolvedDefaultSelectLabel ? `${resolvedDefaultSelectLabel} ${c.name}` : undefined}\n                  className=\"flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer\"\n                >\n                  <div className=\"w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0\">\n                    {c.name.split(\" \").map((n) => n[0]).join(\"\")}\n                  </div>\n                  <div className=\"flex-1 min-w-0 overflow-hidden\">\n                    <div className=\"truncate text-sm font-medium text-foreground\">{c.name}</div>\n                    <div className=\"truncate text-xs text-muted-foreground leading-tight\">\n                      {c.role} · {c.email ?? c.emails?.[0] ?? c.phone ?? c.phones?.[0] ?? \"\"}\n                    </div>\n                    {c.lastActivity && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onOpenRecentActivity?.()\n                          setOpen(false)\n                        }}\n                        className=\"mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n                      >\n                        <Clock className=\"w-3 h-3 shrink-0\" />\n                        <span className=\"shrink-0 font-medium\">Last activity</span>\n                        <span className=\"shrink-0 text-muted-foreground/60\">·</span>\n                        <span className=\"shrink-0\">{c.lastActivity.date}</span>\n                        <span className=\"shrink-0 text-muted-foreground/60\">·</span>\n                        <span className=\"truncate capitalize\">{c.lastActivity.type}</span>\n                      </button>\n                    )}\n                  </div>\n                  <div className=\"ml-2 flex items-center gap-1.5 shrink-0\">\n                    {resolvedDefaultSelectLabel && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          handleDefaultSelect(c)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        {resolvedDefaultSelectLabel}\n                      </button>\n                    )}\n                    {onSelectTo && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectTo(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        To\n                      </button>\n                    )}\n                    {onSelectCc && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectCc(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        Cc\n                      </button>\n                    )}\n                    {onSelectBcc && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectBcc(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        Bcc\n                      </button>\n                    )}\n                    <button\n                      type=\"button\"\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        if (c.salesforceUrl) {\n                          window.open(c.salesforceUrl, \"_blank\", \"noopener,noreferrer\")\n                        } else {\n                          onViewAll?.()\n                        }\n                      }}\n                      className=\"h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0\"\n                      aria-label={`Open ${c.name} in Salesforce`}\n                    >\n                      {iconMap?.salesforce ? (\n                        <BrandIcon src={iconMap.salesforce} alt=\"Salesforce\" className=\"w-3.5 h-3.5\" />\n                      ) : (\n                        <ExternalLink className=\"w-3.5 h-3.5 text-muted-foreground\" />\n                      )}\n                    </button>\n                  </div>\n                </div>\n              ))}\n            </div>\n            {onViewAll && (\n              <>\n                <div className=\"h-px bg-border mx-3 my-1\" />\n                <button\n                  onClick={() => { onViewAll(); setOpen(false) }}\n                  className=\"flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n                >\n                  <ExternalLink className=\"w-3 h-3\" />\n                  View all contacts\n                </button>\n              </>\n            )}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/badge.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/components/data-table-condition-filter.d.ts

@@ -1,22 +1,33 @@
 import * as React from 'react';
 
 type ConditionOperator = "eq" | "neq" | "gt" | "gte" | "lt" | "lte" | "in" | "is_null" | "is_not_null";
+interface ConditionOptionObject {
+    label: string;
+    value: string;
+}
+type ConditionFieldOption = string | ConditionOptionObject;
 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;
+    };
 }
 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;
+    value: string | number | string[] | null;
 }
 interface DataTableConditionFilterProps {
     /** Available fields the user can filter on */
@@ -28,10 +39,11 @@ interface DataTableConditionFilterProps {
     className?: string;
 }
 declare const OPERATOR_LABELS: Record<ConditionOperator, string>;
+declare function shouldShowOptionSearch(searchable: ConditionFieldDef["searchable"], optionCount: number, defaultThreshold?: number): boolean;
 declare const DEFAULT_OPERATORS: Record<ConditionFieldDef["type"], ConditionOperator[]>;
 /** Generate a stable unique ID for a new condition row. */
 declare function generateConditionId(): string;
 declare function getOperators(field: ConditionFieldDef): ConditionOperator[];
 declare function DataTableConditionFilter({ fields, conditions, onConditionsChange, className, }: DataTableConditionFilterProps): React.JSX.Element;
 
-export { type ConditionFieldDef, type ConditionFilterValue, type ConditionOperator, DEFAULT_OPERATORS, DataTableConditionFilter, type DataTableConditionFilterProps, OPERATOR_LABELS, generateConditionId, getOperators };
+export { type ConditionFieldDef, type ConditionFieldOption, type ConditionFilterValue, type ConditionOperator, type ConditionOptionObject, DEFAULT_OPERATORS, DataTableConditionFilter, type DataTableConditionFilterProps, OPERATOR_LABELS, generateConditionId, getOperators, shouldShowOptionSearch };

package/dist/components/data-table-condition-filter.js

@@ -23,14 +23,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
-  CalendarDays,
-  DollarSign,
+  Check,
   Eye,
-  Hash,
   MoreHorizontal,
   Plus,
-  Trash2,
-  Type
+  Trash2
 } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
@@ -49,7 +46,7 @@ const OPERATOR_LABELS = {
   gte: "\u2265",
   lt: "<",
   lte: "\u2264",
-  in: "contains",
+  in: "is any of",
   is_null: "is empty",
   is_not_null: "is not empty"
 };
@@ -63,11 +60,21 @@ const NUMERIC_OPERATORS = [
   "is_null",
   "is_not_null"
 ];
+const NAV_KEYS = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Enter", "Escape", "Tab"]);
+function shouldShowOptionSearch(searchable, optionCount, defaultThreshold = 8) {
+  var _a;
+  if (searchable === true) return true;
+  if (searchable === false) return false;
+  const threshold = typeof searchable === "object" ? (_a = searchable.threshold) != null ? _a : defaultThreshold : defaultThreshold;
+  return optionCount > threshold;
+}
 const DEFAULT_OPERATORS = {
   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"]
+  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"]
 };
 function generateConditionId() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
@@ -77,7 +84,7 @@ function generateConditionId() {
 }
 function getOperators(field) {
   var _a;
-  return ((_a = field.operators) != null ? _a : DEFAULT_OPERATORS[field.type]).filter((op) => op !== "in");
+  return (_a = field.operators) != null ? _a : DEFAULT_OPERATORS[field.type];
 }
 function isUnaryOperator(op) {
   return op === "is_null" || op === "is_not_null";
@@ -94,6 +101,13 @@ function createDraftCondition(field) {
     value: null
   };
 }
+function normalizeConditionValue(value, field, operator) {
+  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, fields) {
   var _a;
   const field = (_a = fields.find((f) => f.id === condition.field)) != null ? _a : fields[0];
@@ -103,7 +117,7 @@ function normalizeCondition(condition, fields) {
   return __spreadProps(__spreadValues({}, condition), {
     field: field.id,
     operator,
-    value: isUnaryOperator(operator) ? null : condition.value
+    value: normalizeConditionValue(condition.value, field, operator)
   });
 }
 function parseConditionValue(raw, fieldType) {
@@ -119,25 +133,164 @@ function isCompleteCondition(condition, fields) {
   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) {
+  return Array.isArray(value) ? JSON.stringify(value) : String(value);
 }
 function getConditionsSignature(conditions) {
-  return conditions.map((condition) => `${condition.id}:${condition.field}:${condition.operator}:${String(condition.value)}`).join(";");
+  return conditions.map((condition) => `${condition.id}:${condition.field}:${condition.operator}:${getConditionValueSignature(condition.value)}`).join(";");
+}
+function normalizeFieldOptions(field) {
+  var _a;
+  return ((_a = field.options) != null ? _a : []).map(
+    (option) => typeof option === "string" ? { label: option, value: option } : option
+  );
 }
 function getFieldsSignature(fields) {
   return fields.map((field) => {
-    var _a;
-    return `${field.id}:${field.type}:${field.label}:${((_a = field.operators) != null ? _a : []).join("|")}`;
+    var _a, _b, _c;
+    const optionsSignature = normalizeFieldOptions(field).map((option) => `${option.label}:${option.value}`).join("|");
+    const searchSignature = typeof field.searchable === "object" ? `threshold:${(_a = field.searchable.threshold) != null ? _a : ""}` : String((_b = field.searchable) != null ? _b : "");
+    return `${field.id}:${field.type}:${field.label}:${((_c = field.operators) != null ? _c : []).join("|")}:${optionsSignature}:${searchSignature}`;
   }).join(";");
 }
 function getCommittedConditions(drafts, fields) {
   return drafts.map((condition) => normalizeCondition(condition, fields)).filter((condition) => isCompleteCondition(condition, fields));
 }
-function getFieldIcon(type) {
-  if (type === "currency") return DollarSign;
-  if (type === "number") return Hash;
-  if (type === "date") return CalendarDays;
-  return Type;
+function getInputType(fieldType) {
+  if (fieldType === "number" || fieldType === "currency") return "number";
+  if (fieldType === "date") return "date";
+  return "text";
+}
+function getInputPlaceholder(fieldType) {
+  if (fieldType === "currency") return "Amount";
+  if (fieldType === "number") return "Enter number...";
+  if (fieldType === "date") return "";
+  return "Enter value...";
+}
+function SelectConditionValueInput({
+  condition,
+  fieldDef,
+  onSelectValueChange
+}) {
+  const [query, setQuery] = React.useState("");
+  const options = normalizeFieldOptions(fieldDef);
+  const showSearch = shouldShowOptionSearch(fieldDef.searchable, options.length);
+  const normalizedQuery = showSearch ? query.trim().toLowerCase() : "";
+  const filteredOptions = normalizedQuery ? options.filter((option) => option.label.toLowerCase().includes(normalizedQuery)) : options;
+  React.useEffect(() => {
+    setQuery("");
+  }, [fieldDef.id]);
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: typeof condition.value === "string" ? condition.value : "",
+      onValueChange: onSelectValueChange,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-full", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select value..." }) }),
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          showSearch ? /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover p-1.5", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              onClick: (event) => event.stopPropagation(),
+              onKeyDown: (event) => {
+                if (!NAV_KEYS.has(event.key)) {
+                  event.stopPropagation();
+                }
+              },
+              placeholder: "Search options...",
+              className: "h-7 text-xs"
+            }
+          ) }) : null,
+          filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) : /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: "No options" })
+        ] })
+      ]
+    }
+  );
+}
+function MultiSelectConditionValueInput({
+  condition,
+  fieldDef,
+  onMultiSelectValueToggle
+}) {
+  const selectedValues = Array.isArray(condition.value) ? condition.value : [];
+  const options = normalizeFieldOptions(fieldDef);
+  return /* @__PURE__ */ jsx("div", { className: "max-h-28 overflow-y-auto rounded-md border border-border bg-background p-1", children: options.length > 0 ? options.map((option) => {
+    const checked = selectedValues.includes(option.value);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        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);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "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",
+              children: checked ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : null
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label })
+        ]
+      },
+      option.value
+    );
+  }) : /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-xs text-muted-foreground", children: "No options" }) });
+}
+function ScalarConditionValueInput({
+  condition,
+  fieldDef,
+  onValueChange,
+  onCommit
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+    fieldDef.type === "currency" ? /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 text-sm text-muted-foreground", children: "$" }) : null,
+    /* @__PURE__ */ jsx(
+      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")
+      }
+    )
+  ] });
+}
+function ConditionValueInput(props) {
+  if (props.fieldDef.type === "select") {
+    return /* @__PURE__ */ jsx(SelectConditionValueInput, __spreadValues({}, props));
+  }
+  if (props.fieldDef.type === "multi_select") {
+    return /* @__PURE__ */ jsx(MultiSelectConditionValueInput, __spreadValues({}, props));
+  }
+  return /* @__PURE__ */ jsx(ScalarConditionValueInput, __spreadValues({}, props));
 }
 function ConditionRow({
   condition,
@@ -151,7 +304,6 @@ function ConditionRow({
   const fieldDef = (_a = fields.find((f) => f.id === condition.field)) != null ? _a : fields[0];
   const operators = getOperators(fieldDef);
   const isUnary = isUnaryOperator(condition.operator);
-  const FieldIcon = getFieldIcon(fieldDef.type);
   const handleFieldChange = (newFieldId) => {
     var _a2;
     const newFieldDef = (_a2 = fields.find((f) => f.id === newFieldId)) != null ? _a2 : fields[0];
@@ -165,7 +317,7 @@ function ConditionRow({
   const handleOperatorChange = (newOp) => {
     onChange(__spreadProps(__spreadValues({}, condition), {
       operator: newOp,
-      value: isUnaryOperator(newOp) ? null : condition.value
+      value: normalizeConditionValue(condition.value, fieldDef, newOp)
     }));
   };
   const handleValueChange = (event) => {
@@ -173,6 +325,18 @@ function ConditionRow({
       value: parseConditionValue(event.target.value, fieldDef.type)
     }));
   };
+  const handleSelectValueChange = (value) => {
+    onChange(__spreadProps(__spreadValues({}, condition), {
+      value
+    }));
+  };
+  const handleMultiSelectValueToggle = (value) => {
+    const currentValues = Array.isArray(condition.value) ? condition.value : [];
+    const nextValues = currentValues.includes(value) ? currentValues.filter((currentValue) => currentValue !== value) : [...currentValues, value];
+    onChange(__spreadProps(__spreadValues({}, condition), {
+      value: nextValues
+    }));
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -181,17 +345,8 @@ function ConditionRow({
       children: [
         /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: index === 0 ? "Where" : "And" }),
         /* @__PURE__ */ jsxs(Select, { value: condition.field, onValueChange: handleFieldChange, children: [
-          /* @__PURE__ */ jsxs(SelectTrigger, { className: "h-8 w-full justify-start gap-2", size: "sm", children: [
-            /* @__PURE__ */ jsx(FieldIcon, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-            /* @__PURE__ */ jsx(SelectValue, { placeholder: fieldDef.label })
-          ] }),
-          /* @__PURE__ */ jsx(SelectContent, { children: fields.map((field) => {
-            const Icon = getFieldIcon(field.type);
-            return /* @__PURE__ */ jsx(SelectItem, { value: field.id, children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-              field.label
-            ] }) }, field.id);
-          }) })
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-full justify-start gap-2", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: fieldDef.label }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: fields.map((field) => /* @__PURE__ */ jsx(SelectItem, { value: field.id, children: field.label }, field.id)) })
         ] }),
         /* @__PURE__ */ jsxs(
           Select,
@@ -204,26 +359,17 @@ function ConditionRow({
             ]
           }
         ),
-        isUnary ? /* @__PURE__ */ jsx("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", children: "No value needed" }) : /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
-          fieldDef.type === "currency" ? /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 text-sm text-muted-foreground", children: "$" }) : null,
-          /* @__PURE__ */ jsx(
-            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")
-            }
-          )
-        ] }),
+        isUnary ? /* @__PURE__ */ jsx("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", children: "No value needed" }) : /* @__PURE__ */ jsx(
+          ConditionValueInput,
+          {
+            condition,
+            fieldDef,
+            onValueChange: handleValueChange,
+            onSelectValueChange: handleSelectValueChange,
+            onMultiSelectValueToggle: handleMultiSelectValueToggle,
+            onCommit
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -419,6 +565,7 @@ export {
   DataTableConditionFilter,
   OPERATOR_LABELS,
   generateConditionId,
-  getOperators
+  getOperators,
+  shouldShowOptionSearch
 };
 //# sourceMappingURL=data-table-condition-filter.js.map