impact-nova 3.0.0-alpha.4 → 3.0.0-alpha.6

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,65 +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(
+          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,
+              j,
               {
                 className: r ? "order-last self-center" : "order-first self-center"
               }
             ),
-            /* @__PURE__ */ i(z, { className: "min-w-0", children: /* @__PURE__ */ i(D, { className: "whitespace-normal normal-case", children: d(e.option) }) })
+            /* @__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,
             {
@@ -134,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;
 }
@@ -1777,6 +1776,16 @@ html.iris-agent-session *:not(.iris-agent-cursor):not(.iris-agent-cursor *):not(
   overflow: hidden;
 }
 
+/* AG Grid 36 sticky left/right pin is trapped by overflow:hidden on the header
+   row, so pinned headers scroll with the center columns. Keep the clip for
+   unpinned lists; open overflow when a pin region has cells. */
+[data-component="ag-grid-react"][data-variant="list"]
+  .ag-header-row:has(.ag-grid-pinned-left-cells .ag-header-cell),
+[data-component="ag-grid-react"][data-variant="list"]
+  .ag-header-row:has(.ag-grid-pinned-right-cells .ag-header-cell) {
+  overflow: visible;
+}
+
 [data-component="ag-grid-react"][data-variant="list"] .ag-header-cell,
 [data-component="ag-grid-react"][data-variant="list"] .ag-header-group-cell {
   height: var(--in-ag-list-header-height);
@@ -1794,22 +1803,40 @@ html.iris-agent-session *:not(.iris-agent-cursor):not(.iris-agent-cursor *):not(
   border-radius: var(--in-ag-list-radius);
 }
 
-[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-left-header:has(.ag-header-cell) {
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-left-header:has(.ag-header-cell),
+[data-component="ag-grid-react"][data-variant="list"]
+  .ag-header-row
+  > .ag-grid-pinned-left-cells:has(.ag-header-cell) {
   border-radius: var(--in-ag-list-radius) 0 0 var(--in-ag-list-radius);
+  background-color: var(--color-surface-muted);
+  z-index: 2;
 }
 
 [data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-left-header .ag-header-cell) .ag-header-viewport,
-[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-left-header .ag-header-cell) .ag-header-row {
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-left-header .ag-header-cell) .ag-header-row,
+[data-component="ag-grid-react"][data-variant="list"]:has(
+    .ag-header-row > .ag-grid-pinned-left-cells .ag-header-cell
+  )
+  .ag-header-row {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-right-header:has(.ag-header-cell) {
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-right-header:has(.ag-header-cell),
+[data-component="ag-grid-react"][data-variant="list"]
+  .ag-header-row
+  > .ag-grid-pinned-right-cells:has(.ag-header-cell) {
   border-radius: 0 var(--in-ag-list-radius) var(--in-ag-list-radius) 0;
+  background-color: var(--color-surface-muted);
+  z-index: 2;
 }
 
 [data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-right-header .ag-header-cell) .ag-header-viewport,
-[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-right-header .ag-header-cell) .ag-header-row {
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-right-header .ag-header-cell) .ag-header-row,
+[data-component="ag-grid-react"][data-variant="list"]:has(
+    .ag-header-row > .ag-grid-pinned-right-cells .ag-header-cell
+  )
+  .ag-header-row {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }