@handled-ai/design-system 0.16.1 → 0.17.0

package/src/components/__tests__/contextual-quick-action-launcher.test.tsx

@@ -0,0 +1,193 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import {
+  ContextualQuickActionLauncher,
+  type ContextualQuickActionItem,
+} from "../contextual-quick-action-launcher";
+
+vi.mock("../dropdown-menu", async () => {
+  const ReactMod = await import("react");
+
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const DropdownMenu = ({ children, open, defaultOpen, onOpenChange }: any) => {
+    const [internalOpen, setInternalOpen] = ReactMod.useState(defaultOpen ?? false);
+    const isControlled = open !== undefined;
+    const currentOpen = isControlled ? open : internalOpen;
+    const setOpen = (nextOpen: boolean) => {
+      if (!isControlled) setInternalOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    };
+
+    return ReactMod.createElement(
+      "div",
+      {
+        "data-slot": "dropdown-menu",
+        "data-open": currentOpen ? "true" : "false",
+      },
+      ReactMod.Children.map(children, (child: any) => {
+        if (!ReactMod.isValidElement(child)) return child;
+        return ReactMod.cloneElement(child, { __open: currentOpen, __setOpen: setOpen } as any);
+      })
+    );
+  };
+
+  const DropdownMenuTrigger = ({ children, asChild, __open, __setOpen, ...props }: any) => {
+    const childProps = {
+      "data-slot": "dropdown-menu-trigger",
+      "aria-expanded": __open ? "true" : "false",
+      onClick: () => __setOpen?.(!__open),
+      ...props,
+    };
+    if (asChild && ReactMod.isValidElement(children)) {
+      return ReactMod.cloneElement(children, childProps);
+    }
+    return ReactMod.createElement("button", childProps, children);
+  };
+
+  const DropdownMenuContent = ({
+    children,
+    __open,
+    __setOpen: _setOpen,
+    className,
+    align: _align,
+    side: _side,
+    sideOffset: _sideOffset,
+    ...props
+  }: any) => {
+    if (!__open) return null;
+    return ReactMod.createElement(
+      "div",
+      { "data-slot": "dropdown-menu-content", role: "menu", className, ...props },
+      children
+    );
+  };
+
+  const DropdownMenuItem = ({ children, onSelect, disabled, className, ...props }: any) =>
+    ReactMod.createElement(
+      "button",
+      {
+        "data-slot": "dropdown-menu-item",
+        role: "menuitem",
+        type: "button",
+        disabled,
+        className,
+        onClick: (event: any) => onSelect?.(event),
+        ...props,
+      },
+      children
+    );
+
+  const DropdownMenuSeparator = ({ className, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-separator", className, ...props });
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+
+  return {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+  };
+});
+
+const items: ContextualQuickActionItem[] = [
+  {
+    id: "create-opportunity",
+    label: "Create an opportunity",
+    description: "New sales or expansion deal",
+    icon: <span data-testid="salesforce-icon">SF</span>,
+  },
+  {
+    id: "update-opportunity",
+    label: "Update an opportunity",
+    description: "Edit stage, close date, or details",
+    disabled: true,
+    disabledReason: "No opportunity",
+  },
+];
+
+function renderLauncher(
+  props: Partial<React.ComponentProps<typeof ContextualQuickActionLauncher>> = {}
+) {
+  return render(
+    <ContextualQuickActionLauncher
+      contextLabel="Supabase"
+      contextSecondary="Account"
+      items={items}
+      onSelect={() => {}}
+      {...props}
+    />
+  );
+}
+
+describe("ContextualQuickActionLauncher", () => {
+  it("renders the accessible trigger name", () => {
+    renderLauncher();
+
+    expect(screen.getByRole("button", { name: /quick action/i })).not.toBeNull();
+  });
+
+  it("opens and closes in uncontrolled mode", () => {
+    renderLauncher();
+
+    expect(screen.queryByText("Acting on")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /quick action/i }));
+    expect(screen.getByText("Acting on")).not.toBeNull();
+    expect(screen.getByText("Supabase")).not.toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /quick action/i }));
+    expect(screen.queryByText("Acting on")).toBeNull();
+  });
+
+  it("selects enabled items and closes the menu", () => {
+    const onSelect = vi.fn();
+    renderLauncher({ onSelect });
+
+    fireEvent.click(screen.getByRole("button", { name: /quick action/i }));
+    fireEvent.click(screen.getByRole("menuitem", { name: /create an opportunity/i }));
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(items[0]);
+    expect(screen.queryByText("Acting on")).toBeNull();
+  });
+
+  it("does not select disabled items", () => {
+    const onSelect = vi.fn();
+    renderLauncher({ onSelect });
+
+    fireEvent.click(screen.getByRole("button", { name: /quick action/i }));
+    fireEvent.click(screen.getByRole("menuitem", { name: /update an opportunity/i }));
+
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(screen.getByText("No opportunity")).not.toBeNull();
+  });
+
+  it("calls browse all and closes the menu", () => {
+    const onBrowseAll = vi.fn();
+    renderLauncher({ onBrowseAll });
+
+    fireEvent.click(screen.getByRole("button", { name: /quick action/i }));
+    fireEvent.click(screen.getByRole("button", { name: /browse all actions/i }));
+
+    expect(onBrowseAll).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText("Acting on")).toBeNull();
+  });
+
+  it("renders optional hint text", () => {
+    renderLauncher({ showHint: true });
+
+    expect(screen.getByText(/or press/i)).not.toBeNull();
+    expect(screen.getByText("⌘K")).not.toBeNull();
+    expect(screen.getByText(/for all actions/i)).not.toBeNull();
+  });
+
+  it("uses pointer-events-auto on portalled content", () => {
+    renderLauncher({ defaultOpen: true });
+
+    const content = document.querySelector('[data-slot="dropdown-menu-content"]');
+    expect(content?.className).toContain("pointer-events-auto");
+  });
+});

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

@@ -151,6 +151,32 @@ describe("DataTableConditionFilter", () => {
     expect(onConditionsChange).toHaveBeenCalledWith([]);
   });
 
+
+  it("preserves an in-progress draft when fields are recreated with the same definition", () => {
+    const { rerender } = render(
+      <DataTableConditionFilter
+        fields={[...allFields]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Enter value..."), {
+      target: { value: "Acme" },
+    });
+
+    rerender(
+      <DataTableConditionFilter
+        fields={[...allFields]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect((screen.getByPlaceholderText("Enter value...") as HTMLInputElement).value).toBe("Acme");
+  });
+
   it("commits a text draft with Apply after a value is entered", () => {
     render(
       <DataTableConditionFilter

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

@@ -294,6 +294,27 @@ describe("DataTableFilter", () => {
     expect(screen.getByText("Filter builder")).toBeDefined();
   });
 
+
+  it("opens the condition builder without closing the menu selection", () => {
+    render(
+      <DataTableFilter
+        {...defaultProps}
+        conditionFields={[{ id: "name", label: "Name", type: "text" }]}
+      />
+    );
+
+    const builderEntry = document.querySelector('[data-slot="popover-trigger"]');
+    expect(builderEntry).not.toBeNull();
+
+    const preventDefaultSpy = vi.fn();
+    const mockEvent = new MouseEvent("click", { bubbles: true });
+    Object.defineProperty(mockEvent, "preventDefault", { value: preventDefaultSpy });
+    builderEntry!.dispatchEvent(mockEvent);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+    expect(screen.getByText("Filter builder")).toBeDefined();
+  });
+
   it("uses the custom condition builder label when provided", () => {
     render(
       <DataTableFilter

package/src/components/contextual-quick-action-launcher.tsx

@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight, ChevronDown, Zap } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+
+export interface ContextualQuickActionItem {
+  id: string
+  label: string
+  description?: string
+  icon?: React.ReactNode
+  disabled?: boolean
+  disabledReason?: string
+}
+
+export interface ContextualQuickActionContextLabelProps {
+  contextLabel: string
+  contextSecondary?: string
+  className?: string
+}
+
+export interface ContextualQuickActionLauncherProps {
+  contextLabel: string
+  contextSecondary?: string
+  items: ContextualQuickActionItem[]
+  onSelect: (item: ContextualQuickActionItem) => void
+  onBrowseAll?: () => void
+  showHint?: boolean
+  align?: "start" | "end"
+  className?: string
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+function ContextualQuickActionContextLabel({
+  contextLabel,
+  contextSecondary,
+  className,
+}: ContextualQuickActionContextLabelProps) {
+  return (
+    <div
+      data-slot="contextual-quick-action-context-label"
+      className={cn(
+        "-mx-1 -mt-1 mb-1 flex items-center gap-1.5 border-b px-3 py-2 text-[11px] text-muted-foreground",
+        className
+      )}
+    >
+      <Zap className="h-3 w-3 shrink-0" strokeWidth={2.25} aria-hidden="true" />
+      <span>Acting on</span>
+      <strong className="max-w-[180px] truncate font-semibold text-foreground">
+        {contextLabel}
+      </strong>
+      {contextSecondary ? (
+        <span className="min-w-0 truncate text-muted-foreground">
+          · {contextSecondary}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+function DefaultActionIcon() {
+  return <Zap className="h-3.5 w-3.5" aria-hidden="true" />
+}
+
+function ContextualQuickActionLauncher({
+  contextLabel,
+  contextSecondary,
+  items,
+  onSelect,
+  onBrowseAll,
+  showHint = false,
+  align = "start",
+  className,
+  open,
+  defaultOpen,
+  onOpenChange,
+}: ContextualQuickActionLauncherProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false)
+  const isControlled = open !== undefined
+  const isOpen = isControlled ? open : uncontrolledOpen
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen)
+      }
+      onOpenChange?.(nextOpen)
+    },
+    [isControlled, onOpenChange]
+  )
+
+  const closeMenu = React.useCallback(() => {
+    handleOpenChange(false)
+  }, [handleOpenChange])
+
+  const handleSelect = React.useCallback(
+    (item: ContextualQuickActionItem, event?: Event) => {
+      if (item.disabled) {
+        event?.preventDefault()
+        return
+      }
+
+      onSelect(item)
+      closeMenu()
+    },
+    [closeMenu, onSelect]
+  )
+
+  const handleBrowseAll = React.useCallback(() => {
+    onBrowseAll?.()
+    closeMenu()
+  }, [closeMenu, onBrowseAll])
+
+  return (
+    <div
+      data-slot="contextual-quick-action-launcher"
+      className={cn("inline-flex items-center gap-2", className)}
+    >
+      <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            data-slot="contextual-quick-action-trigger"
+            data-state={isOpen ? "open" : "closed"}
+            className={cn(
+              "inline-flex h-8 items-center gap-2 rounded-lg border border-border bg-background py-1.5 pr-2.5 pl-2 text-xs font-medium text-foreground shadow-sm transition-colors hover:border-muted-foreground/40 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "data-[state=open]:border-foreground data-[state=open]:bg-foreground data-[state=open]:text-background data-[state=open]:hover:bg-foreground"
+            )}
+          >
+            <span
+              className={cn(
+                "inline-flex h-[18px] w-[18px] items-center justify-center rounded bg-foreground/[0.04]",
+                isOpen && "bg-background/15"
+              )}
+            >
+              <Zap className="h-3 w-3" strokeWidth={2} aria-hidden="true" />
+            </span>
+            <span className="tracking-[-0.005em]">Quick action</span>
+            <ChevronDown className="h-3 w-3 opacity-60" strokeWidth={2} aria-hidden="true" />
+          </button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          align={align}
+          side="bottom"
+          sideOffset={6}
+          className="pointer-events-auto w-[308px] rounded-[10px] p-1.5 text-[12.5px] shadow-[0_12px_28px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.04)]"
+        >
+          <ContextualQuickActionContextLabel
+            contextLabel={contextLabel}
+            contextSecondary={contextSecondary}
+          />
+
+          {items.map((item) => (
+            <DropdownMenuItem
+              key={item.id}
+              disabled={item.disabled}
+              onSelect={(event) => handleSelect(item, event)}
+              className={cn(
+                "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus:bg-accent data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100",
+                item.disabled && "text-muted-foreground"
+              )}
+            >
+              <span
+                data-slot="contextual-quick-action-item-icon"
+                className={cn(
+                  "flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-md bg-secondary text-foreground",
+                  item.disabled && "opacity-60"
+                )}
+              >
+                {item.icon ?? <DefaultActionIcon />}
+              </span>
+              <span className="min-w-0 flex-1">
+                <span className="block truncate text-[12.5px] font-medium leading-tight text-current">
+                  {item.label}
+                </span>
+                {item.description ? (
+                  <span className="mt-0.5 block truncate text-[11px] leading-tight text-muted-foreground">
+                    {item.description}
+                  </span>
+                ) : null}
+              </span>
+              {item.disabled && item.disabledReason ? (
+                <span className="ml-auto shrink-0 text-[10.5px] italic text-muted-foreground/80">
+                  {item.disabledReason}
+                </span>
+              ) : null}
+            </DropdownMenuItem>
+          ))}
+
+          <DropdownMenuSeparator className="-mx-1.5 my-1" />
+          <div className="flex items-center justify-between px-2 py-1.5 text-[11px] text-muted-foreground">
+            <button
+              type="button"
+              className="inline-flex items-center gap-1 font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              onClick={handleBrowseAll}
+            >
+              Browse all actions
+              <ArrowRight className="h-3 w-3" strokeWidth={2} aria-hidden="true" />
+            </button>
+            <span className="inline-flex items-center rounded border border-border px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground">
+              ⌘K
+            </span>
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {showHint ? (
+        <span className="text-[11px] text-muted-foreground">
+          Or press{" "}
+          <span className="inline-flex items-center rounded border border-border bg-muted/40 px-1 py-0.5 text-[10px] font-medium leading-none">
+            ⌘K
+          </span>{" "}
+          for all actions
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+export { ContextualQuickActionContextLabel, ContextualQuickActionLauncher }

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

@@ -171,6 +171,27 @@ function isCompleteCondition(
   return condition.value !== null && condition.value !== ""
 }
 
+function getConditionsSignature(conditions: ConditionFilterValue[]): string {
+  return conditions
+    .map((condition) => `${condition.id}:${condition.field}:${condition.operator}:${String(condition.value)}`)
+    .join(";")
+}
+
+function getFieldsSignature(fields: ConditionFieldDef[]): string {
+  return fields
+    .map((field) => `${field.id}:${field.type}:${field.label}:${(field.operators ?? []).join("|")}`)
+    .join(";")
+}
+
+function getCommittedConditions(
+  drafts: ConditionFilterValue[],
+  fields: ConditionFieldDef[],
+): ConditionFilterValue[] {
+  return drafts
+    .map((condition) => normalizeCondition(condition, fields))
+    .filter((condition) => isCompleteCondition(condition, fields))
+}
+
 function getFieldIcon(type: ConditionFieldDef["type"]) {
   if (type === "currency") return DollarSign
   if (type === "number") return Hash
@@ -363,17 +384,26 @@ function DataTableConditionFilter({
     conditions.map((condition) => normalizeCondition(condition, fields)),
   )
 
+  const fieldsSignature = React.useMemo(() => getFieldsSignature(fields), [fields])
+  const conditionsSignature = React.useMemo(() => getConditionsSignature(conditions), [conditions])
+  const fieldsRef = React.useRef(fields)
+
+  React.useEffect(() => {
+    setDrafts(conditions.map((condition) => normalizeCondition(condition, fieldsRef.current)))
+  }, [conditionsSignature])
+
   React.useEffect(() => {
-    setDrafts(conditions.map((condition) => normalizeCondition(condition, fields)))
-  }, [conditions, fields])
+    if (fieldsRef.current !== fields) {
+      fieldsRef.current = fields
+      setDrafts((current) => current.map((condition) => normalizeCondition(condition, fields)))
+    }
+    // Depend on a structural signature so inline-but-equivalent field arrays do
+    // not wipe in-progress drafts before Apply.
+  }, [fieldsSignature, fields])
 
   const commitDrafts = React.useCallback(
     (nextDrafts: ConditionFilterValue[] = drafts) => {
-      onConditionsChange(
-        nextDrafts
-          .map((condition) => normalizeCondition(condition, fields))
-          .filter((condition) => isCompleteCondition(condition, fields)),
-      )
+      onConditionsChange(getCommittedConditions(nextDrafts, fields))
     },
     [drafts, fields, onConditionsChange],
   )
@@ -381,12 +411,10 @@ function DataTableConditionFilter({
   const handleAdd = () => {
     const firstField = fields[0]
     if (!firstField) return
-    const committedDrafts = drafts.filter((condition) =>
-      isCompleteCondition(condition, fields),
-    )
+    const committedDrafts = getCommittedConditions(drafts, fields)
     const nextDrafts = [...committedDrafts, createDraftCondition(firstField)]
     setDrafts(nextDrafts)
-    commitDrafts(committedDrafts)
+    onConditionsChange(committedDrafts)
   }
 
   const handleUpdate = (index: number, updated: ConditionFilterValue) => {

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

@@ -111,29 +111,13 @@ export function DataTableFilter({
   )
 
   const activeCount = React.useMemo(() => {
-    // Count user-selected filters
     const userCount = Object.values(selectedFilters).reduce(
       (count, selected) => count + selected.length,
       0
     )
 
-    // Count active preset filters (those that are in presetFilters AND currently active in selectedFilters)
-    const presetCount = 0
-    if (presetFilters) {
-      for (const [categoryId, presetValues] of Object.entries(presetFilters)) {
-        for (const value of presetValues) {
-          // Only count if the preset is active (in selectedFilters) but NOT already counted as a user filter
-          if (selectedFilters[categoryId]?.includes(value)) {
-            // Already counted in userCount, skip
-          } else {
-            // Not in selectedFilters — it's an inactive preset, don't count
-          }
-        }
-      }
-    }
-
-    return userCount + presetCount + conditionFilters.length
-  }, [selectedFilters, presetFilters, conditionFilters.length])
+    return userCount + conditionFilters.length
+  }, [selectedFilters, conditionFilters.length])
 
   /** Collect all preset chips to render */
   const presetChips = React.useMemo(() => {
@@ -345,7 +329,7 @@ export function DataTableFilter({
                   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"
+                  className="z-50 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