npm - @handled-ai/design-system - Versions diffs - 0.18.38 → 0.18.40 - Mend

@handled-ai/design-system 0.18.38 → 0.18.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/charts/chart.d.ts +1 -1
package/dist/components/draft-feedback-inline.d.ts +1 -1
package/dist/components/draft-feedback-inline.js +10 -10
package/dist/components/draft-feedback-inline.js.map +1 -1
package/dist/components/email-recipient-field.js +107 -166
package/dist/components/email-recipient-field.js.map +1 -1
package/dist/components/related-record-action-card.d.ts +19 -0
package/dist/components/related-record-action-card.js +150 -0
package/dist/components/related-record-action-card.js.map +1 -0
package/dist/components/score-feedback.js +6 -6
package/dist/components/score-feedback.js.map +1 -1
package/dist/components/suggested-actions.js +17 -5
package/dist/components/suggested-actions.js.map +1 -1
package/dist/index.d.ts +1 -0
package/dist/index.js +1 -0
package/dist/index.js.map +1 -1
package/package.json +1 -1
package/src/components/__tests__/draft-feedback-inline.test.tsx +72 -0
package/src/components/__tests__/email-recipient-field.test.tsx +116 -1
package/src/components/__tests__/related-record-action-card.test.tsx +123 -0
package/src/components/__tests__/suggested-actions-feedback-header.test.tsx +86 -0
package/src/components/draft-feedback-inline.tsx +13 -13
package/src/components/email-recipient-field.tsx +55 -101
package/src/components/related-record-action-card.tsx +169 -0
package/src/components/score-feedback.tsx +7 -7
package/src/components/suggested-actions.tsx +19 -5
package/src/index.ts +1 -0

package/src/components/email-recipient-field.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client"
 import * as React from "react"
-import { createPortal } from "react-dom"
+import { Popover as PopoverPrimitive } from "radix-ui"
 import {
   Check,
   ChevronDown,
@@ -110,82 +110,27 @@ function RecipientChipPill({
   )
 }
-function ContactPickerPopover({
-  triggerRef,
+// Contents of the contact picker dropdown. Rendered inside a Radix
+// `Popover.Content` so its focus scope pushes onto the focus-scope stack and
+// PAUSES any parent modal's scope (e.g. the quick-action Dialog). This is what
+// makes the search input typeable: a plain `createPortal(..., document.body)`
+// element renders outside the Dialog's `DialogContent`, so the Dialog's
+// FocusScope kept yanking focus back (input un-typeable) and its modal
+// `pointer-events: none` on <body> left the portal click-dead. A stacked Radix
+// Popover layer gets `pointer-events: auto` and its own (paused-parent) focus
+// scope, fixing both. See WIT-800 / WIT-770.
+function ContactPickerContents({
   contacts,
   addedEmails,
   onSelect,
   onAddEmail,
-  onClose,
 }: {
-  triggerRef: React.RefObject<HTMLElement | null>
   contacts: SuggestedContact[]
   addedEmails: Set<string>
   onSelect: (contact: SuggestedContact) => void
   onAddEmail: (email: string) => void
-  onClose: () => void
 }) {
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  const searchRef = React.useRef<HTMLInputElement>(null)
   const [query, setQuery] = React.useState("")
-  const [style, setStyle] = React.useState<React.CSSProperties>({
-    position: "fixed",
-    top: -9999,
-    left: -9999,
-  })
-  React.useEffect(() => {
-    const trigger = triggerRef.current
-    if (!trigger) return
-    const rect = trigger.getBoundingClientRect()
-    const width = Math.min(448, window.innerWidth - 32)
-    let left = rect.left
-    if (left + width > window.innerWidth - 16) {
-      left = window.innerWidth - 16 - width
-    }
-    if (left < 16) left = 16
-    const popoverHeight = 280
-    const spaceBelow = window.innerHeight - rect.bottom - 4
-    const spaceAbove = rect.top - 4
-    const placeAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow
-    let top = placeAbove ? rect.top - popoverHeight - 4 : rect.bottom + 4
-    if (top < 16) top = 16
-    setStyle({ position: "fixed", top, left, width })
-  }, [triggerRef])
-  React.useEffect(() => {
-    searchRef.current?.focus()
-    const trigger = triggerRef.current
-    return () => {
-      if (trigger && typeof trigger.focus === "function") {
-        trigger.focus()
-      }
-    }
-  }, [triggerRef])
-  React.useEffect(() => {
-    function handleMouseDown(event: MouseEvent) {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target as Node) &&
-        !triggerRef.current?.contains(event.target as Node)
-      ) {
-        onClose()
-      }
-    }
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        event.stopPropagation()
-        onClose()
-      }
-    }
-    document.addEventListener("mousedown", handleMouseDown)
-    document.addEventListener("keydown", handleKeyDown)
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown)
-      document.removeEventListener("keydown", handleKeyDown)
-    }
-  }, [onClose, triggerRef])
   const normalizedQuery = query.trim().toLowerCase()
   const filtered = normalizedQuery
@@ -209,16 +154,11 @@ function ContactPickerPopover({
     }
   }
-  return createPortal(
-    <div
-      ref={containerRef}
-      style={style}
-      className="bg-background border rounded-lg shadow-xl z-50 pointer-events-auto"
-    >
+  return (
+    <>
       <div className="flex items-center gap-2 px-3 py-2.5 border-b border-border/50">
         <Search className="size-4 text-muted-foreground shrink-0" />
         <input
-          ref={searchRef}
           autoFocus
           value={query}
           onChange={(event) => setQuery(event.target.value)}
@@ -229,7 +169,16 @@ function ContactPickerPopover({
       </div>
       <div role="listbox" className="max-h-[208px] overflow-y-auto p-1">
-        {filtered.length === 0 ? (
+        {contacts.length === 0 ? (
+          <div className="px-3 py-5 text-center text-[13px] text-muted-foreground">
+            <div className="font-medium text-foreground/80">
+              No contacts for this account
+            </div>
+            <div className="mt-1">
+              Type an email address above and press Enter to add a recipient.
+            </div>
+          </div>
+        ) : filtered.length === 0 ? (
           <div className="px-3 py-4 text-center text-[13px] text-muted-foreground">
             <div>No contact matches &lsquo;{query}&rsquo;.</div>
             {queryIsEmail ? (
@@ -296,8 +245,7 @@ function ContactPickerPopover({
         <CornerDownLeft className="size-3 shrink-0" />
         <span>Type an address and press Enter to add someone not listed.</span>
       </div>
-    </div>,
-    document.body,
+    </>
   )
 }
@@ -317,7 +265,6 @@ export function EmailRecipientField({
 }: EmailRecipientFieldProps) {
   const [value, setValue] = React.useState("")
   const [pickerOpen, setPickerOpen] = React.useState(false)
-  const contactsTriggerRef = React.useRef<HTMLButtonElement>(null)
   const hasUnconfirmed = recipients.some((r) => !r.confirmed)
   const state: "default" | "amber" =
@@ -418,16 +365,37 @@ export function EmailRecipientField({
         {showPicker || showCcBcc ? (
           <div className="flex gap-1.5 mt-2">
             {showPicker ? (
-              <button
-                ref={contactsTriggerRef}
-                type="button"
-                onClick={() => setPickerOpen((open) => !open)}
-                className="inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]"
-              >
-                <Users className="size-3" />
-                Contacts
-                <ChevronDown className="size-3" />
-              </button>
+              <PopoverPrimitive.Root open={pickerOpen} onOpenChange={setPickerOpen}>
+                <PopoverPrimitive.Trigger asChild>
+                  <button
+                    type="button"
+                    className="inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]"
+                  >
+                    <Users className="size-3" />
+                    Contacts
+                    <ChevronDown className="size-3" />
+                  </button>
+                </PopoverPrimitive.Trigger>
+                <PopoverPrimitive.Portal>
+                  <PopoverPrimitive.Content
+                    side="bottom"
+                    align="start"
+                    sideOffset={4}
+                    collisionPadding={16}
+                    className="z-50 w-[min(448px,calc(100vw-2rem))] rounded-lg border bg-background shadow-xl p-0"
+                  >
+                    <ContactPickerContents
+                      contacts={contacts}
+                      addedEmails={added}
+                      onSelect={selectContact}
+                      onAddEmail={(email) => {
+                        addEmail(email)
+                        setPickerOpen(false)
+                      }}
+                    />
+                  </PopoverPrimitive.Content>
+                </PopoverPrimitive.Portal>
+              </PopoverPrimitive.Root>
             ) : null}
             {showCcBcc ? (
               <button
@@ -441,20 +409,6 @@ export function EmailRecipientField({
             ) : null}
           </div>
         ) : null}
-        {pickerOpen ? (
-          <ContactPickerPopover
-            triggerRef={contactsTriggerRef}
-            contacts={contacts}
-            addedEmails={added}
-            onSelect={selectContact}
-            onAddEmail={(email) => {
-              addEmail(email)
-              setPickerOpen(false)
-            }}
-            onClose={() => setPickerOpen(false)}
-          />
-        ) : null}
       </div>
     </div>
   )

package/src/components/related-record-action-card.tsx ADDED Viewed

@@ -0,0 +1,169 @@
+"use client"
+import * as React from "react"
+import { ExternalLink } from "lucide-react"
+import { BRAND_ICONS } from "../lib/icons"
+import { cn } from "../lib/utils"
+export type RelatedRecordActionCardKind = "case" | "account" | "opportunity" | "salesforce" | "generic"
+export type RelatedRecordActionIcon = "salesforce" | React.ReactNode
+export interface RelatedRecordActionCardProps {
+  kind: RelatedRecordActionCardKind
+  label: string
+  subtitle?: string
+  disabledReason?: string
+  href?: string
+  external?: boolean
+  icon?: RelatedRecordActionIcon
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  className?: string
+  testId?: string
+}
+function renderActionIcon(icon: RelatedRecordActionIcon | undefined, kind: RelatedRecordActionCardKind) {
+  if (icon === "salesforce" || kind === "salesforce") {
+    return (
+      <img
+        src={BRAND_ICONS.salesforce}
+        alt="Salesforce"
+        className="h-4 w-4 object-contain"
+        draggable={false}
+      />
+    )
+  }
+  if (icon) {
+    return icon
+  }
+  return <span aria-hidden="true">{kind.slice(0, 1).toUpperCase()}</span>
+}
+export function RelatedRecordActionCard({
+  kind,
+  label,
+  subtitle,
+  disabledReason,
+  href,
+  external,
+  icon,
+  onClick,
+  className,
+  testId,
+}: RelatedRecordActionCardProps) {
+  const isDisabled = Boolean(disabledReason) || (!href && !onClick)
+  const content = (
+    <>
+      <span
+        data-slot="related-record-action-card-icon"
+        className={cn(
+          "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors",
+          isDisabled
+            ? "border-border/60 bg-muted/40 text-muted-foreground"
+            : "border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary"
+        )}
+      >
+        {renderActionIcon(icon, kind)}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span
+          data-slot="related-record-action-card-label"
+          className={cn(
+            "block truncate text-sm font-medium transition-colors",
+            isDisabled ? "text-muted-foreground" : "text-foreground group-active:text-primary"
+          )}
+        >
+          {label}
+        </span>
+        {subtitle && (
+          <span
+            data-slot="related-record-action-card-subtitle"
+            className="mt-0.5 block truncate text-xs text-muted-foreground"
+          >
+            {subtitle}
+          </span>
+        )}
+        {disabledReason && (
+          <span
+            data-slot="related-record-action-card-disabled-reason"
+            className="mt-1 block text-xs text-muted-foreground"
+          >
+            {disabledReason}
+          </span>
+        )}
+      </span>
+      {external && (
+        <>
+          <span className="sr-only">opens in a new tab</span>
+          <ExternalLink
+            aria-hidden="true"
+            data-slot="related-record-action-card-external-icon"
+            className={cn(
+              "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors",
+              isDisabled ? "" : "group-active:text-primary"
+            )}
+          />
+        </>
+      )}
+    </>
+  )
+  if (isDisabled) {
+    return (
+      <div
+        aria-disabled="true"
+        data-kind={kind}
+        data-slot="related-record-action-card"
+        data-testid={testId}
+        className={cn(
+          "group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors",
+          "cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70",
+          className
+        )}
+      >
+        {content}
+      </div>
+    )
+  }
+  if (href) {
+    return (
+      <a
+        href={href}
+        target={external ? "_blank" : undefined}
+        rel={external ? "noopener noreferrer" : undefined}
+        data-kind={kind}
+        data-slot="related-record-action-card"
+        data-testid={testId}
+        className={cn(
+          "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
+          "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
+          className
+        )}
+      >
+        {content}
+      </a>
+    )
+  }
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      data-kind={kind}
+      data-slot="related-record-action-card"
+      data-testid={testId}
+      className={cn(
+        "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
+        "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
+        className
+      )}
+    >
+      {content}
+    </button>
+  )
+}

package/src/components/score-feedback.tsx CHANGED Viewed

@@ -149,7 +149,7 @@ function Trigger({ className }: { className?: string }) {
           className,
         )}
       >
-        <Check className="w-3 h-3 text-emerald-500" />
+        <Check className="w-3 h-3 text-foreground" />
         <span className="text-[11px] text-muted-foreground">{label}</span>
       </button>
     )
@@ -163,11 +163,11 @@ function Trigger({ className }: { className?: string }) {
         className={cn(
           "p-1.5 rounded transition-colors",
           thumbState === "up"
-            ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
+            ? "bg-muted text-foreground"
             : "hover:bg-muted text-muted-foreground hover:text-foreground"
         )}
       >
-        <ThumbsUp className="w-3.5 h-3.5" fill={thumbState === "up" ? "currentColor" : "none"} />
+        <ThumbsUp className="w-3.5 h-3.5" />
       </button>
       <button
         type="button"
@@ -175,11 +175,11 @@ function Trigger({ className }: { className?: string }) {
         className={cn(
           "p-1.5 rounded transition-colors",
           thumbState === "down"
-            ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
+            ? "bg-muted text-foreground"
             : "hover:bg-muted text-muted-foreground hover:text-foreground"
         )}
       >
-        <ThumbsDown className="w-3.5 h-3.5" fill={thumbState === "down" ? "currentColor" : "none"} />
+        <ThumbsDown className="w-3.5 h-3.5" />
       </button>
     </div>
   )
@@ -219,8 +219,8 @@ function Panel({ className }: { className?: string }) {
                   "px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors",
                   selectedPills.includes(pill)
                     ? thumbState === "up"
-                      ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800"
-                      : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800"
+                      ? "bg-muted text-foreground border-border"
+                      : "bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800"
                     : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
                 )}
               >

package/src/components/suggested-actions.tsx CHANGED Viewed

@@ -925,6 +925,14 @@ function SuggestedActionCard({
   )
   const [showAiEdit, setShowAiEdit] = React.useState(false)
   const [feedbackOpen, setFeedbackOpen] = React.useState(false)
+  const [feedbackDirection, setFeedbackDirection] = React.useState<"up" | "down" | null>(null)
+  const handleThumbClick = (dir: "up" | "down") => {
+    if (feedbackOpen && feedbackDirection === dir) {
+      setFeedbackOpen(false); setFeedbackDirection(null)
+    } else {
+      setFeedbackDirection(dir); setFeedbackOpen(true)
+    }
+  }
   const [followUpEnabled, setFollowUpEnabled] = React.useState(action.followUp?.enabled ?? false)
   const [threadExpanded, setThreadExpanded] = React.useState(false)
   const [expandedMessageId, setExpandedMessageId] = React.useState<string | null>(null)
@@ -1016,18 +1024,22 @@ function SuggestedActionCard({
         </div>
         <div className="flex items-center gap-1.5">
           <button
-            onClick={() => setFeedbackOpen(!feedbackOpen)}
+            onClick={() => handleThumbClick("up")}
             className={`p-1.5 rounded transition-colors ${
-              feedbackOpen
-                ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
+              feedbackOpen && feedbackDirection === "up"
+                ? "bg-muted text-foreground"
                 : "hover:bg-muted text-muted-foreground hover:text-foreground"
             }`}
           >
             <ThumbsUp className="w-3.5 h-3.5" />
           </button>
           <button
-            onClick={() => setFeedbackOpen(!feedbackOpen)}
-            className="p-1.5 rounded transition-colors hover:bg-muted text-muted-foreground hover:text-foreground"
+            onClick={() => handleThumbClick("down")}
+            className={`p-1.5 rounded transition-colors ${
+              feedbackOpen && feedbackDirection === "down"
+                ? "bg-muted text-foreground"
+                : "hover:bg-muted text-muted-foreground hover:text-foreground"
+            }`}
           >
             <ThumbsDown className="w-3.5 h-3.5" />
           </button>
@@ -1047,6 +1059,8 @@ function SuggestedActionCard({
       {feedbackOpen && (
         <div className="px-5 py-3 border-b border-border/40 animate-in fade-in slide-in-from-top-2 duration-200">
           <DraftFeedbackInline
+            key={`feedback-${feedbackDirection}`}
+            initialDirection={feedbackDirection}
             onRegenerateRequest={(pills, detail) => {
               onFeedback?.("down", pills, detail)
             }}

package/src/index.ts CHANGED Viewed

@@ -46,6 +46,7 @@ export * from "./components/dialog"
 export * from "./components/dropdown-menu"
 export * from "./components/empty-state"
 export * from "./components/entity-panel"
+export * from "./components/related-record-action-card"
 export { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from "./components/feedback-primitives"
 export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } from "./components/feedback-primitives"
 export { SignalPriorityPopover } from "./components/signal-priority-popover"