impact-nova 2.1.0-alpha.7 → 2.1.0-alpha.8

package/dist/components/data/data-table/indicator-legend.d.ts

@@ -1,8 +1,19 @@
+import { IndicatorType } from './column-indicator';
+export type IndicatorLegendEntry = {
+    type: IndicatorType;
+    /** Override the default i18n label for this entry */
+    label?: string;
+};
+export interface IndicatorLegendProps {
+    /** Legend entries; defaults to sort + filter */
+    entries?: IndicatorLegendEntry[];
+}
 /**
- * Legend showing the meaning of sort/filter indicator colors.
+ * Legend showing the meaning of column indicator badge colors.
  * Displayed in the Frozen Columns section header.
  *
  * @example
  * <IndicatorLegend />
+ * <IndicatorLegend entries={[{ type: 'sort' }, { type: 'filter' }, { type: 'nonSavable' }]} />
  */
-export declare const IndicatorLegend: React.FC;
+export declare const IndicatorLegend: React.FC<IndicatorLegendProps>;

package/dist/components/data/data-table/indicator-legend.js

@@ -1,20 +1,23 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useImpactNovaI18n as n } from "../../../i18n/use-impact-nova-i18n.js";
-import { ColumnIndicator as r } from "./column-indicator.js";
-const i = () => {
-  const { t: a } = n();
-  return /* @__PURE__ */ t("div", { className: "flex items-center gap-3 text-[10px] text-secondary-foreground", "data-component": "indicator-legend", children: [
-    /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ e(r, { type: "sort" }),
-      /* @__PURE__ */ e("span", { children: a("dataTable.indicatorSort") })
-    ] }),
-    /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ e(r, { type: "filter" }),
-      /* @__PURE__ */ e("span", { children: a("dataTable.indicatorSearch") })
-    ] })
-  ] });
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useImpactNovaI18n as r } from "../../../i18n/use-impact-nova-i18n.js";
+import { ColumnIndicator as i } from "./column-indicator.js";
+const c = [
+  { type: "sort" },
+  { type: "filter" }
+], d = {
+  sort: "indicatorSort",
+  filter: "indicatorSearch",
+  nonSavable: "indicatorNonSavable"
+}, s = ({
+  entries: a = c
+}) => {
+  const { t: o } = r();
+  return /* @__PURE__ */ t("div", { className: "flex items-center gap-3 text-[10px] text-secondary-foreground", "data-component": "indicator-legend", children: a.map((e) => /* @__PURE__ */ n("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ t(i, { type: e.type }),
+    /* @__PURE__ */ t("span", { children: e.label ?? o(`dataTable.${d[e.type]}`) })
+  ] }, e.type)) });
 };
-i.displayName = "IndicatorLegend";
+s.displayName = "IndicatorLegend";
 export {
-  i as IndicatorLegend
+  s as IndicatorLegend
 };

package/dist/components/data/data-table/pin-switch.js

@@ -1,22 +1,22 @@
 import { jsxs as m, jsx as i } from "react/jsx-runtime";
 import { useCallback as s } from "react";
 import { cn as n } from "../../../lib/utils.js";
-import { Pin as w } from "impact-nova-icons";
-import { useImpactNovaI18n as d } from "../../../i18n/use-impact-nova-i18n.js";
+import { Pin as d } from "impact-nova-icons";
+import { useImpactNovaI18n as w } from "../../../i18n/use-impact-nova-i18n.js";
 const u = ({
   value: e,
   onChange: r,
   disabled: t = !1,
   className: l
 }) => {
-  const { t: o } = d(), c = s(() => {
+  const { t: c } = w(), o = s(() => {
     t || r(e === "left" ? "right" : "left");
   }, [t, e, r]), f = s(
     (a) => {
-      t || (a.key === " " || a.key === "Enter") && (a.preventDefault(), c());
+      t || (a.key === " " || a.key === "Enter") && (a.preventDefault(), o());
     },
-    [t, c]
-  ), p = () => o(e === "left" ? "dataTable.pinSwitchPinnedLeft" : e === "right" ? "dataTable.pinSwitchPinnedRight" : "dataTable.pinSwitchNotPinned"), h = e === "right";
+    [t, o]
+  ), p = () => c(e === "left" ? "dataTable.pinSwitchPinnedLeft" : e === "right" ? "dataTable.pinSwitchPinnedRight" : "dataTable.pinSwitchNotPinned"), h = e === "right";
   return /* @__PURE__ */ m("div", { className: n("inline-flex items-center gap-2", l), "data-component": "pin-switch", children: [
     /* @__PURE__ */ i(
       "span",
@@ -37,7 +37,7 @@ const u = ({
         "aria-label": p(),
         "aria-disabled": t,
         tabIndex: t ? -1 : 0,
-        onClick: c,
+        onClick: o,
         onKeyDown: f,
         disabled: t,
         className: n(
@@ -49,10 +49,10 @@ const u = ({
           "div",
           {
             className: n(
-              "absolute flex w-5 h-5 p-0.5 justify-center items-center rounded bg-white shadow-elevation-pin-switch transition-all duration-200 ease-in-out",
+              "absolute flex w-5 h-5 p-0.5 justify-center items-center rounded bg-canvas-elevated shadow-elevation-pin-switch transition-all duration-200 ease-in-out",
               e === "right" ? "left-[calc(100%-22px)]" : "left-0.5"
             ),
-            children: /* @__PURE__ */ i(w, { className: "w-3 h-3 text-content" })
+            children: /* @__PURE__ */ i(d, { className: "w-3 h-3 text-content" })
           }
         )
       }

package/dist/components/data/data-table/use-data-table-column-list-sync.js

@@ -1,54 +1,55 @@
 import { useState as O, useRef as h, useCallback as a, useEffect as x } from "react";
 import { mergePartialOrderedColumnState as N } from "./data-table-column-state.js";
-import { afterSynchronousColumnApply as R, normalizeColumnPinned as q, GRID_AUTO_UNPIN_WAIT_MS as J, alignColumnTreePinMetadata as L, EXTERNAL_SYNC_DEBOUNCE_MS as Q, readGridColumnPinned as Z } from "./data-table-column-apply.js";
+import { afterSynchronousColumnApply as v, normalizeColumnPinned as q, GRID_AUTO_UNPIN_WAIT_MS as J, alignColumnTreePinMetadata as L, EXTERNAL_SYNC_DEBOUNCE_MS as Q, readGridColumnPinned as Z } from "./data-table-column-apply.js";
 import { buildColumnTreeFromGrid as $ } from "./build-column-tree-from-grid.js";
 import { computeColumnListSyncFingerprints as z, resolveColumnListSyncMode as A } from "./data-table-column-list-sync.js";
 import { subscribeGridApiEvent as j } from "../ag-grid-react/grid-api-event-subscription.js";
-function se({
-  gridApi: r,
+import { subscribeColumnIndicatorSync as ee } from "../ag-grid-react/column-indicator-sync-bus.js";
+function ie({
+  gridApi: o,
   frozenColumnsLabel: D,
   scrollableColumnsLabel: U
 }) {
-  const [K, b] = O([]), [V, W] = O(!1), [_, B] = O(!1), i = h(!1), E = h(null), S = h(0), y = h(""), G = h(""), C = a(() => !r || i.current ? null : $(r, {
+  const [K, R] = O([]), [V, W] = O(!1), [_, B] = O(!1), i = h(!1), E = h(null), S = h(0), y = h(""), G = h(""), C = a(() => !o || i.current ? null : $(o, {
     frozenColumns: D,
     scrollableColumns: U
-  }), [r, D, U]), I = a(
-    (t, e) => {
-      const o = y.current, l = z(t);
-      y.current = l.structural, G.current = l.indicators, b(t), W(!0), e === "structural" && o !== "" && B((n) => !n);
+  }), [o, D, U]), I = a(
+    (n, e) => {
+      const r = y.current, l = z(n);
+      y.current = l.structural, G.current = l.indicators, R(n), W(!0), e === "structural" && r !== "" && B((t) => !t);
     },
     []
-  ), m = a(
+  ), f = a(
     () => {
-      const t = C();
-      t && I(t, "structural");
+      const n = C();
+      n && I(n, "structural");
     },
     [I, C]
   ), k = a(
     () => {
-      const t = C();
-      if (!t) return;
+      const n = C();
+      if (!n) return;
       const e = A(
-        t,
+        n,
         y.current,
         G.current
       );
       if (e !== "skip") {
         if (e === "structural") {
-          const o = E.current?.querySelector(
+          const r = E.current?.querySelector(
             '[data-component="nested-list"] .overflow-y-auto'
           );
-          o && (S.current = o.scrollTop);
+          r && (S.current = r.scrollTop);
         }
-        I(t, e);
+        I(n, e);
       }
     },
     [I, C]
   );
   x(() => {
-    if (!r) return;
-    queueMicrotask(() => m());
-    const t = [
+    if (!o) return;
+    queueMicrotask(() => f());
+    const n = [
       "columnVisible",
       "columnPinned",
       "columnMoved",
@@ -65,127 +66,129 @@ function se({
       "newColumnsLoaded"
     ];
     let e = null;
-    const o = () => {
+    const r = () => {
       i.current || (e && clearTimeout(e), e = setTimeout(() => {
-        e = null, !(i.current || r.isDestroyed()) && k();
+        e = null, !(i.current || o.isDestroyed()) && k();
       }, Q));
-    }, l = t.map(
-      (u) => j(r, u, () => {
-        o();
+    }, l = n.map(
+      (t) => j(o, t, () => {
+        r();
       })
-    );
+    ), u = ee(() => {
+      r();
+    });
     return () => {
-      e && clearTimeout(e), l.forEach((u) => u());
+      e && clearTimeout(e), l.forEach((t) => t()), u();
     };
-  }, [r, m, k]), x(() => {
+  }, [o, f, k]), x(() => {
     if (S.current === 0) return;
-    const t = requestAnimationFrame(() => {
+    const n = requestAnimationFrame(() => {
       const e = E.current?.querySelector(
         '[data-component="nested-list"] .overflow-y-auto'
       );
       e && (e.scrollTop = S.current, S.current = 0);
     });
-    return () => cancelAnimationFrame(t);
+    return () => cancelAnimationFrame(n);
   }, [_]);
   const w = a(
-    (t) => {
-      const e = [], o = (l, u) => {
-        l.forEach((n) => {
-          if (n.id === "root-frozen") {
-            n.children && o(n.children, "left");
+    (n) => {
+      const e = [], r = (l, u) => {
+        l.forEach((t) => {
+          if (t.id === "root-frozen") {
+            t.children && r(t.children, "left");
             return;
           }
-          if (n.id === "root-scrollable") {
-            n.children && o(n.children, null);
+          if (t.id === "root-scrollable") {
+            t.children && r(t.children, null);
             return;
           }
-          if (n.category === "group" || n.children && n.children.length > 0)
-            n.children && o(n.children, u);
+          if (t.category === "group" || t.children && t.children.length > 0)
+            t.children && r(t.children, u);
           else {
             let c;
             if (u === null)
               c = null;
             else {
-              const d = n.data?.pinned;
+              const d = t.data?.pinned;
               c = d === "left" || d === "right" ? d : u;
             }
             e.push({
-              colId: n.id,
+              colId: t.id,
               pinned: c,
-              hide: !n.checked
+              hide: !t.checked
             });
           }
         });
       };
-      return o(t, null), e;
+      return r(n, null), e;
     },
     []
   ), g = a(
-    (t) => {
-      if (!r) return;
+    (n) => {
+      if (!o) return;
       i.current = !0;
-      const e = w(t);
+      const e = w(n);
       if (e.length === 0) {
-        R(() => {
+        v(() => {
           i.current = !1;
         });
         return;
       }
-      const o = r.getColumnState(), l = N(o, e), u = new Set(
-        o.filter((s) => q(s.pinned)).map((s) => s.colId)
-      ), n = l.filter(
+      const r = o.getColumnState(), l = N(r, e), u = new Set(
+        r.filter((s) => q(s.pinned)).map((s) => s.colId)
+      ), t = l.filter(
         (s) => q(s.pinned) && !u.has(s.colId)
-      ), p = new Set(n.map((s) => s.colId));
-      r.applyColumnState({ state: l, applyOrder: !0 });
+      ), p = new Set(t.map((s) => s.colId));
+      o.applyColumnState({ state: l, applyOrder: !0 });
       const c = () => {
-        i.current = !1, m();
+        i.current = !1, f();
       };
       if (p.size === 0) {
-        R(c);
+        v(c);
         return;
       }
-      let T = !1, d = null, P = null;
-      P = j(r, "columnPinned", () => {
-        if (T || r.isDestroyed()) return;
-        const s = r.getColumnState();
-        if (n.filter((v) => {
-          const f = s.find((F) => F.colId === v.colId);
-          return f && !f.pinned;
+      let b = !1, d = null, P = null;
+      P = j(o, "columnPinned", () => {
+        if (b || o.isDestroyed()) return;
+        const s = o.getColumnState();
+        if (t.filter((T) => {
+          const m = s.find((F) => F.colId === T.colId);
+          return m && !m.pinned;
         }).length > 0) {
-          T = !0, d && clearTimeout(d), P?.();
-          const v = l.filter(
-            (f) => f.pinned && !p.has(f.colId)
+          b = !0, d && clearTimeout(d), P?.();
+          const T = l.filter(
+            (m) => m.pinned && !p.has(m.colId)
           );
-          if (v.length > 0) {
-            const f = v[0], F = l.map(
-              (M) => M.colId === f.colId ? { ...M, pinned: null } : M
+          if (T.length > 0) {
+            const m = T[0], F = l.map(
+              (M) => M.colId === m.colId ? { ...M, pinned: null } : M
             );
-            r.applyColumnState({ state: F, applyOrder: !0 });
+            o.applyColumnState({ state: F, applyOrder: !0 });
           }
-          R(c);
+          v(c);
         }
       }), d = setTimeout(() => {
-        P?.(), T || c();
+        P?.(), b || c();
       }, J);
     },
-    [r, w, m]
+    [o, w, f]
   ), X = a(
-    (t) => {
-      g(L(t));
+    (n) => {
+      g(L(n));
     },
     [g]
   ), Y = a(
-    (t, e) => {
-      const o = L(t);
-      e || g(o), b(o);
-      const l = z(o);
+    (n, e) => {
+      const r = L(n);
+      e || g(r), R(r);
+      const l = z(r);
       y.current = l.structural, G.current = l.indicators;
     },
     [g]
   ), H = a(
-    (t, e) => {
-      if (b((u) => {
-        const n = (p) => p.map((c) => c.id === t ? {
+    (n, e) => {
+      if (R((u) => {
+        const t = (p) => p.map((c) => c.id === n ? {
           ...c,
           data: {
             ...c.data,
@@ -193,19 +196,19 @@ function se({
           }
         } : c.children ? {
           ...c,
-          children: n(c.children)
+          children: t(c.children)
         } : c);
-        return n(u);
-      }), !r) return;
+        return t(u);
+      }), !o) return;
       i.current = !0;
-      const o = r.getColumnState(), l = N(o, [
-        { colId: t, pinned: e }
+      const r = o.getColumnState(), l = N(r, [
+        { colId: n, pinned: e }
       ]);
-      r.applyColumnState({ state: l, applyOrder: !0 }), R(() => {
-        i.current = !1, Z(r, t) !== e && m();
+      o.applyColumnState({ state: l, applyOrder: !0 }), v(() => {
+        i.current = !1, Z(o, n) !== e && f();
       });
     },
-    [r, m]
+    [o, f]
   );
   return {
     items: K,
@@ -218,5 +221,5 @@ function se({
   };
 }
 export {
-  se as useDataTableColumnListSync
+  ie as useDataTableColumnListSync
 };

package/dist/components/data/nested-list/nested-list-change-detection.d.ts

@@ -0,0 +1,11 @@
+import { NestedListItem } from './nested-list.types';
+/** Above this count, apply/discard uses O(1) revision tracking instead of JSON comparison. */
+export declare const NESTED_LIST_REVISION_THRESHOLD = 1000;
+export declare function shouldUseNestedListRevisionTracking(itemCount: number): boolean;
+export declare function computeNestedListHasChanges(options: {
+    enableApplyDiscard: boolean;
+    items: NestedListItem[];
+    savedItems: NestedListItem[];
+    revision: number;
+    savedRevision: number;
+}): boolean;

package/dist/components/data/nested-list/nested-list-change-detection.js

@@ -0,0 +1,13 @@
+const S = 1e3;
+function o(e) {
+  return e > 1e3;
+}
+function a(e) {
+  const { enableApplyDiscard: i, items: s, savedItems: n, revision: t, savedRevision: r } = e;
+  return i ? o(s.length) ? t !== r : JSON.stringify(s) !== JSON.stringify(n) : !1;
+}
+export {
+  S as NESTED_LIST_REVISION_THRESHOLD,
+  a as computeNestedListHasChanges,
+  o as shouldUseNestedListRevisionTracking
+};