impact-nova 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/components/primitives/iris/iris.js

@@ -1,13 +1,13 @@
-import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import * as x from "react";
-import { Alan as C } from "impact-nova-icons";
-import { Button as p } from "../button/button.js";
-import { Popover as B, PopoverTrigger as z, PopoverContent as k } from "../../feedback/popover/popover.js";
-import { OverflowTooltip as A } from "../../feedback/tooltip/overflow-tooltip.js";
-import { createComponent as f } from "../../../lib/primitives/create-component.js";
+import { Alan as N } from "impact-nova-icons";
+import { Button as w } from "../button/button.js";
+import { Popover as B, PopoverTrigger as z, PopoverContent as T } from "../../feedback/popover/popover.js";
+import { IrisInsightTruncatedText as A } from "./iris-insight-truncated-text.js";
+import { createComponent as g } from "../../../lib/primitives/create-component.js";
 import { cn as l } from "../../../lib/utils.js";
-import { IrisAlanGradientIcon as I } from "./iris-alan-gradient-icon.js";
-import { irisButtonToButtonSize as V, irisButtonVariants as O, irisChromeWrapperVariants as P, irisIconChromeWrapperVariants as T, irisIconFilledButtonVariants as S, irisIconButtonToButtonSize as j, irisIconButtonVariants as y, irisMenuVariants as M } from "./iris.variants.js";
+import { IrisAlanGradientIcon as v } from "./iris-alan-gradient-icon.js";
+import { irisButtonToButtonSize as V, irisButtonVariants as k, irisChromeWrapperVariants as P, irisIconChromeWrapperVariants as S, irisIconFilledButtonVariants as j, irisIconButtonToButtonSize as y, irisIconButtonVariants as M, irisMenuVariants as O } from "./iris.variants.js";
 import { IrisControlProvider as _, IrisControlRegion as $ } from "./iris-control-region.js";
 import { IrisAgentCursor as ii } from "./iris-agent-cursor.js";
 import { useIrisControl as ni } from "./iris-control-context.js";
@@ -15,95 +15,96 @@ const G = {
   sm: 14,
   md: 16,
   lg: 16
-}, U = f(
+}, U = g(
   "IrisButton",
   ({
     className: n,
     size: i = "md",
     shape: o = "default",
-    children: e,
-    type: s = "button",
+    children: s,
+    type: e = "button",
     ...r
-  }, a) => /* @__PURE__ */ t("span", { className: P({ shape: o }), children: /* @__PURE__ */ g(
-    p,
+  }, a) => /* @__PURE__ */ t("span", { className: P({ shape: o }), children: /* @__PURE__ */ p(
+    w,
     {
       ref: a,
-      type: s,
+      type: e,
       variant: "ghost",
       size: V[i],
       "data-component": "iris-button",
       "data-size": i,
       "data-shape": o,
-      className: l(O({ size: i }), n),
+      className: l(k({ size: i }), n),
       ...r,
       children: [
-        /* @__PURE__ */ t(I, { size: G[i] }),
-        e ?? "Ask Iris"
+        /* @__PURE__ */ t(v, { size: G[i] }),
+        s ?? "Ask Iris"
       ]
     }
   ) })
-), R = f(
+), R = g(
   "IrisIconButton",
   ({
     className: n,
     appearance: i = "outline",
     size: o = "md",
-    shape: e = "default",
-    type: s = "button",
+    shape: s = "default",
+    type: e = "button",
     "aria-label": r = "Ask Iris",
     ...a
-  }, m) => {
-    const c = T({ appearance: i, shape: e }), d = i === "filled" ? /* @__PURE__ */ t(C, { size: 16, className: "text-brand-foreground" }) : /* @__PURE__ */ t(I, { size: 16 });
-    return i === "filled" ? /* @__PURE__ */ t("span", { className: c, children: /* @__PURE__ */ t(
+  }, d) => {
+    const m = S({ appearance: i, shape: s }), c = i === "filled" ? /* @__PURE__ */ t(N, { size: 16, className: "text-brand-foreground" }) : /* @__PURE__ */ t(v, { size: 16 });
+    return i === "filled" ? /* @__PURE__ */ t("span", { className: m, children: /* @__PURE__ */ t(
       "button",
       {
-        ref: m,
-        type: s,
+        ref: d,
+        type: e,
         "data-component": "iris-icon-button",
         "data-appearance": i,
         "data-size": o,
-        "data-shape": e,
+        "data-shape": s,
         "aria-label": r,
-        className: l(S({ size: o }), n),
+        className: l(j({ size: o }), n),
         ...a,
-        children: d
+        children: c
       }
-    ) }) : /* @__PURE__ */ t("span", { className: c, children: /* @__PURE__ */ t(
-      p,
+    ) }) : /* @__PURE__ */ t("span", { className: m, children: /* @__PURE__ */ t(
+      w,
       {
-        ref: m,
-        type: s,
+        ref: d,
+        type: e,
         variant: "ghost",
-        size: j[o],
+        size: y[o],
         "data-component": "iris-icon-button",
         "data-appearance": i,
         "data-size": o,
-        "data-shape": e,
+        "data-shape": s,
         "aria-label": r,
-        className: l(y({ size: o }), n),
+        className: l(M({ size: o }), n),
         ...a,
-        children: d
+        children: c
       }
     ) });
   }
-), N = f(
+), C = g(
   "IrisMenu",
   ({
     className: n,
     appearance: i = "loading",
     children: o,
-    onAskInChat: e,
-    askInChatLabel: s = "Ask in chat",
-    ...r
-  }, a) => {
-    const m = i === "loading" || i === "status", c = i === "card", d = /* @__PURE__ */ g(
+    onAskInChat: s,
+    askInChatLabel: e = "Ask in chat",
+    overflowTooltipContent: r,
+    ...a
+  }, d) => {
+    const m = i === "loading" || i === "status", c = i === "card", f = r ?? (typeof o == "string" ? o : void 0), u = /* @__PURE__ */ p(
       "div",
       {
-        ref: a,
+        ref: d,
         "data-component": "iris-menu",
         "data-appearance": i,
-        className: l(M({ appearance: i }), n),
-        ...r,
+        className: l(O({ appearance: i }), n),
+        ...a,
         children: [
           m && /* @__PURE__ */ t(
             "span",
@@ -112,7 +113,7 @@ const G = {
                 "inline-flex shrink-0 items-center justify-center",
                 i === "status" ? "size-4" : "size-6"
               ),
-              children: /* @__PURE__ */ t(I, { size: i === "status" ? 16 : 20 })
+              children: /* @__PURE__ */ t(v, { size: i === "status" ? 16 : 20 })
             }
           ),
           /* @__PURE__ */ t(
@@ -125,20 +126,10 @@ const G = {
                 i === "status" && "min-w-0 flex-1 overflow-hidden",
                 i === "loading" && "whitespace-nowrap"
               ),
-              children: i === "status" ? /* @__PURE__ */ t(
-                A,
-                {
-                  triggerClassName: "block w-full min-w-0 truncate whitespace-nowrap normal-case",
-                  contentClassName: "iris-menu-overflow-tooltip",
-                  variant: "secondary",
-                  side: "top",
-                  sideOffset: 10,
-                  children: o
-                }
-              ) : o
+              children: i === "status" ? /* @__PURE__ */ t(A, { overflowTooltipContent: f, children: o }) : o
             }
           ),
-          c && e && /* @__PURE__ */ t(p, { variant: "outline", size: "sm", className: "max-h-7 capitalize", onClick: e, children: s })
+          c && s && /* @__PURE__ */ t(w, { variant: "outline", size: "sm", className: "max-h-7 capitalize", onClick: s, children: e })
         ]
       }
     );
@@ -147,41 +138,41 @@ const G = {
       {
         className: l(
           "iris-edge-wash-shell iris-edge-wash-shell--menu rounded-xl motion-reduce:animate-none",
-          i === "status" && "iris-edge-wash-shell--fluid iris-edge-wash-shell--menu-plain"
+          i === "status" && "iris-edge-wash-shell--fluid iris-edge-wash-shell--menu-plain w-full min-w-0"
         ),
-        children: d
+        children: u
       }
-    ) : d;
+    ) : u;
   }
-), X = f(
+), X = g(
   "IrisInsight",
   ({
     status: n = "idle",
     iconSize: i = "md",
     iconAppearance: o = "outline",
-    loadingLabel: e = "Gathering insights...",
-    onTriggerClick: s,
+    loadingLabel: s = "Gathering insights...",
+    onTriggerClick: e,
     onAskInChat: r,
     askInChatLabel: a,
-    className: m,
-    children: c
-  }, d) => {
-    const [w, v] = x.useState(!1), u = n === "loading" || n === "ready", b = n === "loading";
+    className: d,
+    children: m
+  }, c) => {
+    const [f, u] = x.useState(!1), h = n === "loading" || n === "ready", b = n === "loading";
     return x.useEffect(() => {
-      n === "loading" && v(!0);
+      n === "loading" && u(!0);
     }, [n]), /* @__PURE__ */ t(
       "div",
       {
-        ref: d,
+        ref: c,
         "data-component": "iris",
         "data-status": n,
-        className: l("relative inline-flex items-start", m),
-        children: /* @__PURE__ */ g(
+        className: l("relative inline-flex items-start", d),
+        children: /* @__PURE__ */ p(
           B,
           {
-            open: u ? w : !1,
-            onOpenChange: (h) => {
-              u && v(h);
+            open: h ? f : !1,
+            onOpenChange: (I) => {
+              h && u(I);
             },
             children: [
               /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ t(
@@ -189,26 +180,26 @@ const G = {
                 {
                   size: i,
                   appearance: b ? "filled" : o,
-                  "aria-expanded": w && u,
-                  onClick: (h) => {
-                    n === "idle" && (s?.(), h.preventDefault());
+                  "aria-expanded": f && h,
+                  onClick: (I) => {
+                    n === "idle" && (e?.(), I.preventDefault());
                   }
                 }
               ) }),
-              u && /* @__PURE__ */ t(
-                k,
+              h && /* @__PURE__ */ t(
+                T,
                 {
                   align: "end",
                   side: "bottom",
                   sideOffset: 7,
                   className: "w-auto border-0 bg-transparent p-0 shadow-none motion-reduce:animate-none",
-                  children: n === "loading" ? /* @__PURE__ */ t(N, { appearance: "loading", children: e }) : /* @__PURE__ */ t(
-                    N,
+                  children: n === "loading" ? /* @__PURE__ */ t(C, { appearance: "loading", children: s }) : /* @__PURE__ */ t(
+                    C,
                     {
                       appearance: "card",
                       onAskInChat: r,
                       askInChatLabel: a,
-                      children: c
+                      children: m
                     }
                   )
                 }
@@ -227,6 +218,7 @@ export {
   $ as IrisControlRegion,
   R as IrisIconButton,
   X as IrisInsight,
-  N as IrisMenu,
+  A as IrisInsightTruncatedText,
+  C as IrisMenu,
   ni as useIrisControl
 };

package/dist/components/primitives/iris/iris.types.d.ts

@@ -19,6 +19,15 @@ export type IrisMenuProps = React.HTMLAttributes<HTMLDivElement> & {
     appearance?: IrisMenuAppearance;
     onAskInChat?: () => void;
     askInChatLabel?: string;
+    /** Tooltip body when `children` is not a plain string (e.g. formatted insight copy). */
+    overflowTooltipContent?: React.ReactNode;
+};
+export type IrisInsightTruncatedTextProps = {
+    children: React.ReactNode;
+    overflowTooltipContent?: React.ReactNode;
+    className?: string;
+    triggerClassName?: string;
+    as?: "span" | "p" | "div";
 };
 export type IrisInsightStatus = "idle" | "loading" | "ready";
 export type IrisInsightProps = {

package/dist/form-react/Fields/VirtualizedListField.js

@@ -1,11 +1,12 @@
-import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import { jsx as i, jsxs as S } from "react/jsx-runtime";
 import { useState as b } from "react";
-import { Controller as k } from "react-hook-form";
-import { ChoiceCardGroup as I, ChoiceCard as j, ChoiceCardIndicator as q, ChoiceCardContent as z, ChoiceCardTitle as D } from "../../components/forms/choice-card/choice-card.js";
+import { Controller as O } from "react-hook-form";
+import { ChoiceCardGroup as k, ChoiceCard as I, ChoiceCardIndicator as j, ChoiceCardContent as q, ChoiceCardTitle as z } from "../../components/forms/choice-card/choice-card.js";
 import { SkuPickerChrome as B } from "../../components/data/expandable-list-item/sku-picker-chrome.js";
-import { cn as S } from "../../lib/utils.js";
-import { getFieldTestId as M } from "../utils/fieldTestIds.js";
-function P(e) {
+import { nextAlphabeticalSortDirection as M, compareAlphabeticalValues as P } from "../../lib/alphabetical-sort.js";
+import { cn as y } from "../../lib/utils.js";
+import { getFieldTestId as E } from "../utils/fieldTestIds.js";
+function G(e) {
   if (!Array.isArray(e))
     return [];
   const r = [];
@@ -13,49 +14,53 @@ function P(e) {
     typeof t == "string" && r.push(t);
   return r;
 }
-function y(e, r, t) {
+function x(e, r, t) {
   if (t === "single") {
-    const l = Array.from(r).find((o) => !e.includes(o));
-    return l ? [l] : Array.from(r).slice(0, 1);
+    const n = Array.from(r).find((s) => !e.includes(s));
+    return n ? [n] : Array.from(r).slice(0, 1);
   }
   const a = [];
-  for (const l of e)
-    r.has(l) && a.push(l);
-  for (const l of r)
-    e.includes(l) || a.push(l);
+  for (const n of e)
+    r.has(n) && a.push(n);
+  for (const n of r)
+    e.includes(n) || a.push(n);
   return a;
 }
 function d(e) {
   return typeof e.label == "string" ? e.label : e.value;
 }
-function E(e, r, t) {
-  const a = r.trim().toLowerCase(), l = e.filter(
-    (o) => d(o).toLowerCase().includes(a)
+function R(e, r, t) {
+  const a = r.trim().toLowerCase(), n = e.filter(
+    (s) => d(s).toLowerCase().includes(a)
+  );
+  return t === "none" ? n : n.sort(
+    (s, f) => P(
+      d(s),
+      d(f),
+      t
+    )
   );
-  return t ? l.sort(
-    (o, f) => d(o).localeCompare(d(f))
-  ) : l;
 }
-function G(e, r) {
+function _(e, r) {
   let t = 0;
   for (const a of e)
     if (a.isDisabled !== !0 && (t += 1, !r.includes(a.value)))
       return !1;
   return t > 0;
 }
-function R(e, r) {
+function $(e, r) {
   const t = [];
   for (const a of r) {
-    const l = e.find((o) => o.value === a);
-    if (l && (t.push(d(l)), t.length === 5))
+    const n = e.find((s) => s.value === a);
+    if (n && (t.push(d(n)), t.length === 5))
       break;
   }
   return t;
 }
-function _(e) {
+function H(e) {
   const r = e.view === "card";
   return /* @__PURE__ */ i(
-    I,
+    k,
     {
       type: "multiple",
       value: e.selected ? [e.option.value] : [],
@@ -64,60 +69,65 @@ function _(e) {
       },
       disabled: e.disabled,
       className: "min-w-0 w-full",
-      children: /* @__PURE__ */ x(
-        j,
+      children: /* @__PURE__ */ S(
+        I,
         {
           value: e.option.value,
           size: "sm",
           disabled: e.disabled,
           "aria-label": d(e.option),
-          className: S(
-            "w-full min-w-0",
-            !r && "items-center justify-start gap-3 rounded-none border-0 bg-transparent p-0 shadow-none hover:border-0 data-[selected]:border-0 data-[selected]:bg-transparent data-[selected]:shadow-none"
+          className: y(
+            "w-full min-w-0 items-center",
+            !r && "justify-start gap-3 rounded-none border-0 bg-transparent p-0 shadow-none hover:border-0 data-[selected]:border-0 data-[selected]:bg-transparent data-[selected]:shadow-none"
           ),
           children: [
-            /* @__PURE__ */ i(q, { className: r ? "order-last" : "order-first" }),
-            /* @__PURE__ */ i(z, { className: "min-w-0", children: /* @__PURE__ */ i(D, { className: "whitespace-normal normal-case", children: d(e.option) }) })
+            /* @__PURE__ */ i(
+              j,
+              {
+                className: r ? "order-last self-center" : "order-first self-center"
+              }
+            ),
+            /* @__PURE__ */ i(q, { className: "min-w-0", children: /* @__PURE__ */ i(z, { className: "whitespace-normal normal-case", children: d(e.option) }) })
           ]
         }
       )
     }
   );
 }
-const X = ({
+const F = ({
   field: e,
   validationRules: r,
   isDisabled: t,
   formHelpers: a
 }) => {
-  const [l, o] = b(""), [f, N] = b(!1), [m, A] = b("card");
+  const [n, s] = b(""), [f, N] = b("none"), [m, V] = b("card");
   if (e.fieldType !== "virtualized_list") return null;
-  const C = e.options ?? [], g = e.selectionMode ?? "multi", L = a.form.control, h = E(C, l, f);
+  const C = e.options ?? [], g = e.selectionMode ?? "multi", A = a.form.control, h = R(C, n, f);
   return /* @__PURE__ */ i(
-    k,
+    O,
     {
       name: e.id,
-      control: L,
+      control: A,
       disabled: t,
       rules: r,
       render: ({ field: u, fieldState: p }) => {
-        const c = P(u.value), v = !!p.error, w = v ? p.error?.message : e.helpText, T = (n) => {
-          if (t || n.isDisabled === !0)
+        const c = G(u.value), v = !!p.error, w = v ? p.error?.message : e.helpText, L = (l) => {
+          if (t || l.isDisabled === !0)
             return;
-          const s = new Set(c);
-          s.has(n.value) ? s.delete(n.value) : s.add(n.value), u.onChange(y(c, s, g));
-        }, V = () => {
+          const o = new Set(c);
+          o.has(l.value) ? o.delete(l.value) : o.add(l.value), u.onChange(x(c, o, g));
+        }, T = () => {
           if (g === "single") {
-            const s = h.find((O) => O.isDisabled !== !0);
-            u.onChange(s ? [s.value] : []);
+            const o = h.find((D) => D.isDisabled !== !0);
+            u.onChange(o ? [o.value] : []);
             return;
           }
-          const n = new Set(c);
-          for (const s of h)
-            s.isDisabled !== !0 && n.add(s.value);
-          u.onChange(y(c, n, "multi"));
+          const l = new Set(c);
+          for (const o of h)
+            o.isDisabled !== !0 && l.add(o.value);
+          u.onChange(x(c, l, "multi"));
         };
-        return /* @__PURE__ */ x("div", { "data-testid": M(e.id), children: [
+        return /* @__PURE__ */ S("div", { "data-testid": E(e.id), children: [
           /* @__PURE__ */ i(
             B,
             {
@@ -129,41 +139,41 @@ const X = ({
               searchLabel: e.label ? `Search ${e.label}` : "Search",
               showBack: !1,
               view: m,
-              search: l,
-              sortAlphabetically: f,
+              search: n,
+              sortDirection: f,
               selectedCount: c.length,
-              allSelected: G(h, c),
-              previewCodes: R(C, c),
-              onSearchChange: o,
-              onViewChange: A,
-              onToggleSort: () => N((n) => !n),
-              onSelectAll: V,
+              allSelected: _(h, c),
+              previewCodes: $(C, c),
+              onSearchChange: s,
+              onViewChange: V,
+              onToggleSort: () => N((l) => M(l)),
+              onSelectAll: T,
               onClear: () => u.onChange([]),
               children: /* @__PURE__ */ i(
                 "div",
                 {
                   className: m === "card" ? "grid w-full grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3" : "flex w-full flex-col gap-2",
-                  children: h.map((n) => /* @__PURE__ */ i(
-                    _,
+                  children: h.map((l) => /* @__PURE__ */ i(
+                    H,
                     {
-                      option: n,
-                      selected: c.includes(n.value),
-                      disabled: t || n.isDisabled === !0,
+                      option: l,
+                      selected: c.includes(l.value),
+                      disabled: t || l.isDisabled === !0,
                       view: m,
-                      onToggle: () => T(n)
+                      onToggle: () => L(l)
                     },
-                    n.value
+                    l.value
                   ))
                 }
               )
             }
           ),
-          w ? /* @__PURE__ */ i("p", { className: S("mt-1 text-xs", v ? "text-destructive" : "text-content-tertiary"), children: w }) : null
+          w ? /* @__PURE__ */ i("p", { className: y("mt-1 text-xs", v ? "text-destructive" : "text-content-tertiary"), children: w }) : null
         ] });
       }
     }
   );
 };
 export {
-  X as VirtualizedListField
+  F as VirtualizedListField
 };

package/dist/impact-nova-components.css

@@ -832,7 +832,7 @@
   border-color: var(--color-iris-border-violet);
 }
 
-/* Status overflow tooltip — menu wrap chrome (gradient fill + animated ring + arrow). */
+/* Status overflow tooltip — white fill + iris animated ring (same as menu wrap). */
 .iris-menu-overflow-tooltip {
   --iris-border-angle: 0deg;
   position: relative;
@@ -842,10 +842,9 @@
   border: 0 !important;
   border-radius: 12px !important;
   padding: 8px 12px !important;
-  background: linear-gradient(90deg, var(--color-iris-menu-surface-from) 0%, var(--color-iris-menu-surface-to) 100%) !important;
+  background: var(--color-surface-elevated) !important;
   color: var(--color-foreground-title) !important;
   box-shadow: var(--shadow-iris-menu), inset 0 0 0 1px var(--color-iris-border-violet);
-  backdrop-filter: blur(3px);
   font-weight: 500;
   text-transform: none;
 }
@@ -870,7 +869,7 @@
   }
 }
 .iris-menu-overflow-tooltip > svg {
-  fill: var(--color-iris-menu-surface-to) !important;
+  fill: var(--color-surface-elevated) !important;
   stroke: var(--color-iris-border-violet);
   stroke-width: 1px;
 }