@handled-ai/design-system 0.18.14 → 0.18.15

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

@@ -8,7 +8,7 @@ declare function BrandIcon({ src, alt, className }: {
 }): React.JSX.Element;
 interface AccountContactsPopoverProps {
     contacts: SuggestedContact[];
-    onSelect: (contact: SuggestedContact) => void;
+    onSelect?: (contact: SuggestedContact) => void;
     onSelectTo?: (contact: SuggestedContact) => void;
     onSelectCc?: (contact: SuggestedContact) => void;
     onSelectBcc?: (contact: SuggestedContact) => void;

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

@@ -34,14 +34,19 @@ 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 isSwitchMode = Boolean(onSelectSwitch);
+  const resolvedDefaultSelectLabel = defaultSelectLabel != null ? defaultSelectLabel : isSwitchMode ? "Switch" : void 0;
   const handleDefaultSelect = React.useCallback((contact) => {
     if (onSelectSwitch) {
       onSelectSwitch(contact);
-    } else {
-      (onSelectTo != null ? onSelectTo : onSelect)(contact);
+      setOpen(false);
+      return;
+    }
+    const additiveSelect = onSelectTo != null ? onSelectTo : onSelect;
+    if (additiveSelect) {
+      additiveSelect(contact);
+      setOpen(false);
     }
-    setOpen(false);
   }, [onSelect, onSelectSwitch, onSelectTo]);
   React.useEffect(() => {
     if (open && triggerRef.current) {
@@ -116,7 +121,7 @@ function AccountContactsPopover({
                       children: resolvedDefaultSelectLabel
                     }
                   ),
-                  onSelectTo && /* @__PURE__ */ jsx(
+                  !isSwitchMode && onSelectTo && /* @__PURE__ */ jsx(
                     "button",
                     {
                       type: "button",
@@ -129,7 +134,7 @@ function AccountContactsPopover({
                       children: "To"
                     }
                   ),
-                  onSelectCc && /* @__PURE__ */ jsx(
+                  !isSwitchMode && onSelectCc && /* @__PURE__ */ jsx(
                     "button",
                     {
                       type: "button",
@@ -142,7 +147,7 @@ function AccountContactsPopover({
                       children: "Cc"
                     }
                   ),
-                  onSelectBcc && /* @__PURE__ */ jsx(
+                  !isSwitchMode && onSelectBcc && /* @__PURE__ */ jsx(
                     "button",
                     {
                       type: "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  /** 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":[]}
+{"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 isSwitchMode = Boolean(onSelectSwitch)\n  const resolvedDefaultSelectLabel = defaultSelectLabel ?? (isSwitchMode ? \"Switch\" : undefined)\n  const handleDefaultSelect = React.useCallback((contact: SuggestedContact) => {\n    if (onSelectSwitch) {\n      onSelectSwitch(contact)\n      setOpen(false)\n      return\n    }\n\n    const additiveSelect = onSelectTo ?? onSelect\n    if (additiveSelect) {\n      additiveSelect(contact)\n      setOpen(false)\n    }\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                    {!isSwitchMode && 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                    {!isSwitchMode && 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                    {!isSwitchMode && 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.18.14",
+  "version": "0.18.15",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

package/src/components/__tests__/account-contacts-popover.test.tsx

@@ -36,17 +36,16 @@ describe("AccountContactsPopover", () => {
     expect(screen.queryByRole("button", { name: "Add" })).toBeNull()
   })
 
-  it("uses switch selection for default row clicks when onSelectSwitch is provided", () => {
-    const onSelect = vi.fn()
-    const onSelectTo = vi.fn()
+  it("uses switch selection without additive callbacks when onSelectSwitch is provided", () => {
     const onSelectSwitch = vi.fn()
 
     render(
       <AccountContactsPopover
         contacts={contacts}
-        onSelect={onSelect}
-        onSelectTo={onSelectTo}
         onSelectSwitch={onSelectSwitch}
+        onSelectTo={vi.fn()}
+        onSelectCc={vi.fn()}
+        onSelectBcc={vi.fn()}
         trigger={<button type="button">Contacts</button>}
       />,
     )
@@ -55,8 +54,9 @@ describe("AccountContactsPopover", () => {
     fireEvent.click(screen.getByRole("button", { name: /switch alex admin/i }))
 
     expect(onSelectSwitch).toHaveBeenCalledWith(contacts[0])
-    expect(onSelectTo).not.toHaveBeenCalled()
-    expect(onSelect).not.toHaveBeenCalled()
+    expect(screen.queryByRole("button", { name: "To" })).toBeNull()
+    expect(screen.queryByRole("button", { name: "Cc" })).toBeNull()
+    expect(screen.queryByRole("button", { name: "Bcc" })).toBeNull()
   })
 
   it("allows custom default select label for switch action copy", () => {

package/src/components/account-contacts-popover.tsx

@@ -28,7 +28,7 @@ export function BrandIcon({ src, alt, className }: { src: string; alt: string; c
 
 export interface AccountContactsPopoverProps {
   contacts: SuggestedContact[]
-  onSelect: (contact: SuggestedContact) => void
+  onSelect?: (contact: SuggestedContact) => void
   onSelectTo?: (contact: SuggestedContact) => void
   onSelectCc?: (contact: SuggestedContact) => void
   onSelectBcc?: (contact: SuggestedContact) => void
@@ -58,14 +58,20 @@ export function AccountContactsPopover({
   const [open, setOpen] = React.useState(false)
   const triggerRef = React.useRef<HTMLDivElement>(null)
   const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})
-  const resolvedDefaultSelectLabel = defaultSelectLabel ?? (onSelectSwitch ? "Switch" : undefined)
+  const isSwitchMode = Boolean(onSelectSwitch)
+  const resolvedDefaultSelectLabel = defaultSelectLabel ?? (isSwitchMode ? "Switch" : undefined)
   const handleDefaultSelect = React.useCallback((contact: SuggestedContact) => {
     if (onSelectSwitch) {
       onSelectSwitch(contact)
-    } else {
-      (onSelectTo ?? onSelect)(contact)
+      setOpen(false)
+      return
+    }
+
+    const additiveSelect = onSelectTo ?? onSelect
+    if (additiveSelect) {
+      additiveSelect(contact)
+      setOpen(false)
     }
-    setOpen(false)
   }, [onSelect, onSelectSwitch, onSelectTo])
 
   React.useEffect(() => {
@@ -143,7 +149,7 @@ export function AccountContactsPopover({
                         {resolvedDefaultSelectLabel}
                       </button>
                     )}
-                    {onSelectTo && (
+                    {!isSwitchMode && onSelectTo && (
                       <button
                         type="button"
                         onClick={(e) => {
@@ -156,7 +162,7 @@ export function AccountContactsPopover({
                         To
                       </button>
                     )}
-                    {onSelectCc && (
+                    {!isSwitchMode && onSelectCc && (
                       <button
                         type="button"
                         onClick={(e) => {
@@ -169,7 +175,7 @@ export function AccountContactsPopover({
                         Cc
                       </button>
                     )}
-                    {onSelectBcc && (
+                    {!isSwitchMode && onSelectBcc && (
                       <button
                         type="button"
                         onClick={(e) => {