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

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

@@ -1,115 +1,117 @@
-import { jsxs as ce, jsx as S } from "react/jsx-runtime";
-import { useState as W, useRef as F, useCallback as m, useEffect as J } from "react";
-import { useDataTable as se } from "./data-table-context.js";
-import { NestedList as ae } from "../nested-list/nested-list.js";
-import { SelectionMode as ue } from "../nested-list/nested-list.types.js";
-import { useImpactNovaI18n as de } from "../../../i18n/use-impact-nova-i18n.js";
-import { mergePartialOrderedColumnState as fe } from "./data-table-column-state.js";
-import { subscribeGridApiEvents as pe, subscribeGridApiEvent as he } from "../ag-grid-react/grid-api-event-subscription.js";
-import { PinSwitch as me } from "./pin-switch.js";
-import { ColumnIndicator as Q } from "./column-indicator.js";
-import { IndicatorLegend as ge } from "./indicator-legend.js";
-function Ce(k) {
-  const P = [];
-  let g = k.getOriginalParent();
-  for (; g; ) {
-    const w = g.getColGroupDef();
-    w?.headerName && w?.children && P.push(g), g = g.getOriginalParent();
+import { jsxs as ae, jsx as v } from "react/jsx-runtime";
+import { useState as K, useRef as L, useCallback as C, useEffect as J } from "react";
+import { useDataTable as ue } from "./data-table-context.js";
+import { NestedList as de } from "../nested-list/nested-list.js";
+import { SelectionMode as fe } from "../nested-list/nested-list.types.js";
+import { useImpactNovaI18n as pe } from "../../../i18n/use-impact-nova-i18n.js";
+import { mergePartialOrderedColumnState as Q } from "./data-table-column-state.js";
+import { afterSynchronousColumnApply as U, GRID_AUTO_UNPIN_WAIT_MS as he, readGridColumnPinned as me, EXTERNAL_SYNC_DEBOUNCE_MS as ge } from "./data-table-column-apply.js";
+import { subscribeGridApiEvents as Ce, subscribeGridApiEvent as be } from "../ag-grid-react/grid-api-event-subscription.js";
+import { PinSwitch as Se } from "./pin-switch.js";
+import { ColumnIndicator as Z } from "./column-indicator.js";
+import { IndicatorLegend as Ie } from "./indicator-legend.js";
+function ye(P) {
+  const E = [];
+  let b = P.getOriginalParent();
+  for (; b; ) {
+    const M = b.getColGroupDef();
+    M?.headerName && M?.children && E.push(b), b = b.getOriginalParent();
   }
-  return P.reverse(), P;
+  return E.reverse(), E;
 }
-const be = 300, K = 100, xe = ({
-  enableApplyDiscard: k = !1,
-  showSearch: P = !0,
-  showSelectAll: g = !0,
-  showCollapse: w = !0
+const Me = ({
+  enableApplyDiscard: P = !1,
+  showSearch: E = !0,
+  showSelectAll: b = !0,
+  showCollapse: M = !0
 }) => {
-  const { gridApi: l } = se(), { t: G } = de(), [X, $] = W([]), [Z, ee] = W(!1), N = F(!1), U = F(null), M = F(0), V = F({}), [B, te] = W(!1), x = m(() => {
-    if (!l || N.current) return;
-    const n = l.getColumnState(), i = l.getColumns() || [], t = new Map(i.map((r) => [r.getColId(), r])), s = [], c = [], e = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
-    f.set(s, "f"), f.set(c, "s");
+  const { gridApi: n } = ue(), { t: x } = pe(), [ee, $] = K([]), [te, ne] = K(!1), m = L(!1), j = L(null), O = L(0), V = L({}), [X, re] = K(!1), S = C(() => {
+    if (!n || m.current) return;
+    const e = n.getColumnState(), t = n.getAllGridColumns?.() ?? n.getColumns() ?? [], o = new Map(t.map((l) => [l.getColId(), l])), i = [], u = [], r = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map();
+    s.set(i, "f"), s.set(u, "s");
     let p = 0;
-    const T = (r) => {
-      let o = f.get(r);
-      return o === void 0 && (o = `n${p++}`, f.set(r, o)), o;
-    }, h = (r, o) => {
-      const a = r.getGroupId(), b = T(o), v = `${a}::${b}`, A = e.get(v);
-      if (A && A.list === o && o[o.length - 1] === A.node)
-        return A.node;
-      const _ = y.get(v) || 0;
-      y.set(v, _ + 1);
-      const R = r.getColGroupDef(), D = {
-        id: _ === 0 ? `${a}__${b}` : `${a}__${b}__${_}`,
-        label: R?.headerName || a,
+    const A = (l) => {
+      let c = s.get(l);
+      return c === void 0 && (c = `n${p++}`, s.set(l, c)), c;
+    }, h = (l, c) => {
+      const a = l.getGroupId(), y = A(c), T = `${a}::${y}`, k = r.get(T);
+      if (k && k.list === c && c[c.length - 1] === k.node)
+        return k.node;
+      const D = g.get(T) || 0;
+      g.set(T, D + 1);
+      const w = l.getColGroupDef(), N = {
+        id: D === 0 ? `${a}__${y}` : `${a}__${y}__${D}`,
+        label: w?.headerName || a,
         checked: !0,
         children: [],
         category: "group"
       };
-      return o.push(D), e.set(v, { list: o, node: D }), D;
+      return c.push(N), r.set(T, { list: c, node: N }), N;
     };
-    let L = 0, u = 0, O = 0, C = 0;
-    n.forEach((r) => {
-      const o = t.get(r.colId);
-      if (!o) return;
-      let a = l.getDisplayNameForColumn(o, "header");
+    let z = 0, d = 0, F = 0, I = 0;
+    e.forEach((l) => {
+      const c = o.get(l.colId) ?? n.getColumn(l.colId);
+      if (!c) return;
+      let a = n.getDisplayNameForColumn(c, "header");
       if (a === "") return;
       if (a == null) {
-        const I = o.getColDef();
-        if (I.headerName === "") return;
-        a = I.headerName || I.field || r.colId;
+        const G = c.getColDef();
+        if (G.headerName === "") return;
+        a = G.headerName || G.field || l.colId;
       }
       if (!a || a.trim() === "")
         return;
-      const b = !r.hide, v = !!r.sort, A = o.isFilterActive(), _ = r.pinned === "left" ? "left" : r.pinned === "right" ? "right" : null, R = {
-        id: r.colId,
+      const y = !l.hide, T = !!l.sort, k = c.isFilterActive(), D = l.pinned ?? c.getPinned() ?? null, w = D === "left" ? "left" : D === "right" ? "right" : null, q = {
+        id: l.colId,
         label: a,
-        checked: b,
+        checked: y,
         data: {
-          hasSortApplied: v,
-          hasFilterApplied: A,
-          pinned: _
+          hasSortApplied: T,
+          hasFilterApplied: k,
+          pinned: w
         }
       };
-      r.pinned ? (L++, b && u++) : (O++, b && C++);
-      const j = r.pinned ? s : c, D = Ce(o);
-      if (D.length > 0) {
-        let I = j, q = null;
-        for (const ie of D)
-          q = h(ie, I), I = q.children;
-        q.children.push(R);
+      w ? (z++, y && d++) : (F++, y && I++);
+      const N = w ? i : u, W = ye(c);
+      if (W.length > 0) {
+        let G = N, B = null;
+        for (const se of W)
+          B = h(se, G), G = B.children;
+        B.children.push(q);
       } else
-        j.push(R);
+        N.push(q);
     });
-    const d = (r) => {
-      let o = r.length > 0;
-      for (const a of r)
-        a.children && (a.checked = d(a.children)), a.checked || (o = !1);
-      return o;
+    const f = (l) => {
+      let c = l.length > 0;
+      for (const a of l)
+        a.children && (a.checked = f(a.children)), a.checked || (c = !1);
+      return c;
     };
-    d(s), d(c);
-    const E = [
+    f(i), f(u);
+    const _ = [
       {
         id: "root-frozen",
-        label: G("dataTable.frozenColumns"),
-        checked: L > 0 && u === L,
-        children: s,
+        label: x("dataTable.frozenColumns"),
+        checked: z > 0 && d === z,
+        children: i,
         category: "structure",
         isDragDisabled: !0
       },
       {
         id: "root-scrollable",
-        label: G("dataTable.scrollableColumns"),
-        checked: O > 0 && C === O,
-        children: c,
+        label: x("dataTable.scrollableColumns"),
+        checked: F > 0 && I === F,
+        children: u,
         category: "structure",
         isDragDisabled: !0
       }
     ];
-    $(E), ee(!0);
-  }, [l, G]);
+    $(_), ne(!0);
+  }, [n, x]);
   J(() => {
-    if (!l) return;
-    const n = setTimeout(() => x(), 0), i = [
+    if (!n) return;
+    queueMicrotask(() => S());
+    const e = [
       "columnVisible",
       "columnPinned",
       "columnMoved",
@@ -126,163 +128,168 @@ const be = 300, K = 100, xe = ({
       "filterChanged"
     ];
     let t = null;
-    const s = () => {
-      t && clearTimeout(t), t = setTimeout(() => {
-        if (t = null, N.current) return;
-        const c = U.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
-        c && (M.current = c.scrollTop), x(), te((e) => !e);
-      }, 150);
+    const o = () => {
+      m.current || (t && clearTimeout(t), t = setTimeout(() => {
+        if (t = null, m.current) return;
+        const i = j.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
+        i && (O.current = i.scrollTop), S(), re((u) => !u);
+      }, ge));
     };
-    if (!l.isDestroyed()) {
-      const c = pe(l, i, s);
+    if (!n.isDestroyed()) {
+      const i = Ce(n, e, o);
       return () => {
-        clearTimeout(n), t && clearTimeout(t), c();
+        t && clearTimeout(t), i();
       };
     }
     return () => {
-      clearTimeout(n), t && clearTimeout(t);
+      t && clearTimeout(t);
     };
-  }, [l, x]), J(() => {
-    if (M.current === 0) return;
-    const n = requestAnimationFrame(() => {
-      const i = U.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
-      i && (i.scrollTop = M.current, M.current = 0);
+  }, [n, S]), J(() => {
+    if (O.current === 0) return;
+    const e = requestAnimationFrame(() => {
+      const t = j.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
+      t && (t.scrollTop = O.current, O.current = 0);
     });
-    return () => cancelAnimationFrame(n);
-  }, [B]);
-  const Y = m((n) => {
-    const i = [], t = (s, c) => {
-      s.forEach((e) => {
-        if (e.id === "root-frozen") {
-          e.children && t(e.children, "left");
+    return () => cancelAnimationFrame(e);
+  }, [X]);
+  const Y = C((e) => {
+    const t = [], o = (i, u) => {
+      i.forEach((r) => {
+        if (r.id === "root-frozen") {
+          r.children && o(r.children, "left");
           return;
         }
-        if (e.id === "root-scrollable") {
-          e.children && t(e.children, null);
+        if (r.id === "root-scrollable") {
+          r.children && o(r.children, null);
           return;
         }
-        if (e.category === "group" || e.children && e.children.length > 0)
-          e.children && t(e.children, c);
-        else if (l?.getColumn(e.id)) {
+        if (r.category === "group" || r.children && r.children.length > 0)
+          r.children && o(r.children, u);
+        else if (n?.getColumn(r.id)) {
           let p;
-          if (c === null)
+          if (u === null)
             p = null;
           else {
-            const h = e.data?.pinned;
-            p = h === "left" || h === "right" ? h : c;
+            const h = r.data?.pinned;
+            p = h === "left" || h === "right" ? h : u;
           }
-          i.push({
-            colId: e.id,
+          t.push({
+            colId: r.id,
             pinned: p,
-            hide: !e.checked
+            hide: !r.checked
           });
         }
       });
     };
-    return t(n, null), i;
-  }, [l]), z = m((n) => {
-    if (!l) return;
-    N.current = !0;
-    const i = Y(n);
-    if (i.length === 0) {
-      setTimeout(() => {
-        N.current = !1;
-      }, K);
+    return o(e, null), t;
+  }, [n]), R = C((e) => {
+    if (!n) return;
+    m.current = !0;
+    const t = Y(e);
+    if (t.length === 0) {
+      U(() => {
+        m.current = !1;
+      });
       return;
     }
-    const t = l.getColumnState(), s = fe(t, i), c = new Set(t.filter((u) => u.pinned).map((u) => u.colId)), e = s.filter((u) => u.pinned && !c.has(u.colId)), y = new Set(e.map((u) => u.colId));
-    l.applyColumnState({ state: s, applyOrder: !0 });
-    const f = () => {
-      N.current = !1, x();
+    const o = n.getColumnState(), i = Q(o, t), u = new Set(o.filter((d) => d.pinned).map((d) => d.colId)), r = i.filter((d) => d.pinned && !u.has(d.colId)), g = new Set(r.map((d) => d.colId));
+    n.applyColumnState({ state: i, applyOrder: !0 });
+    const s = () => {
+      m.current = !1, S();
     };
-    if (y.size === 0) {
-      setTimeout(f, K);
+    if (g.size === 0) {
+      U(s);
       return;
     }
-    let p = !1, T = null, h = null;
-    h = he(l, "columnPinned", () => {
-      if (p || l.isDestroyed()) return;
-      const u = l.getColumnState();
-      if (e.filter((C) => {
-        const d = u.find((E) => E.colId === C.colId);
-        return d && !d.pinned;
+    let p = !1, A = null, h = null;
+    h = be(n, "columnPinned", () => {
+      if (p || n.isDestroyed()) return;
+      const d = n.getColumnState();
+      if (r.filter((I) => {
+        const f = d.find((_) => _.colId === I.colId);
+        return f && !f.pinned;
       }).length > 0) {
-        p = !0, T && clearTimeout(T), h?.();
-        const C = s.filter((d) => d.pinned && !y.has(d.colId));
-        if (C.length > 0) {
-          const d = C[0], E = s.map(
-            (r) => r.colId === d.colId ? { ...r, pinned: null } : r
+        p = !0, A && clearTimeout(A), h?.();
+        const I = i.filter((f) => f.pinned && !g.has(f.colId));
+        if (I.length > 0) {
+          const f = I[0], _ = i.map(
+            (l) => l.colId === f.colId ? { ...l, pinned: null } : l
           );
-          l.applyColumnState({ state: E, applyOrder: !0 });
+          n.applyColumnState({ state: _, applyOrder: !0 });
         }
-        setTimeout(f, K);
+        U(s);
       }
-    }), T = setTimeout(() => {
-      h?.(), p || f();
-    }, be);
-  }, [l, Y, x]), ne = m((n) => {
-    z(n);
-  }, [z]), re = m((n) => {
-    k || z(n), $(n);
-  }, [k, z]), H = m((n, i) => {
-    $((t) => {
-      const s = (c) => c.map((e) => e.id === n ? {
-        ...e,
+    }), A = setTimeout(() => {
+      h?.(), p || s();
+    }, he);
+  }, [n, Y, S]), le = C((e) => {
+    R(e);
+  }, [R]), oe = C((e) => {
+    P || R(e), $(e);
+  }, [P, R]), H = C((e, t) => {
+    if ($((u) => {
+      const r = (g) => g.map((s) => s.id === e ? {
+        ...s,
         data: {
-          ...e.data,
-          pinned: i
+          ...s.data,
+          pinned: t
         }
-      } : e.children ? {
-        ...e,
-        children: s(e.children)
-      } : e);
-      return s(t);
-    }), l && l.applyColumnState({
-      state: [{ colId: n, pinned: i }]
+      } : s.children ? {
+        ...s,
+        children: r(s.children)
+      } : s);
+      return r(u);
+    }), !n) return;
+    m.current = !0;
+    const o = n.getColumnState(), i = Q(o, [
+      { colId: e, pinned: t }
+    ]);
+    n.applyColumnState({ state: i, applyOrder: !0 }), U(() => {
+      m.current = !1, me(n, e) !== t && S();
     });
-  }, [l]), le = m((n, i) => {
-    if (!i.isLeaf) return null;
-    const t = n.data;
-    return !t?.hasSortApplied && !t?.hasFilterApplied ? null : /* @__PURE__ */ ce("span", { className: "inline-flex items-center gap-1 ml-1.5 shrink-0", children: [
-      t?.hasSortApplied && /* @__PURE__ */ S(Q, { type: "sort" }),
-      t?.hasFilterApplied && /* @__PURE__ */ S(Q, { type: "filter" })
+  }, [n, S]), ce = C((e, t) => {
+    if (!t.isLeaf) return null;
+    const o = e.data;
+    return !o?.hasSortApplied && !o?.hasFilterApplied ? null : /* @__PURE__ */ ae("span", { className: "inline-flex items-center gap-1 ml-1.5 shrink-0", children: [
+      o?.hasSortApplied && /* @__PURE__ */ v(Z, { type: "sort" }),
+      o?.hasFilterApplied && /* @__PURE__ */ v(Z, { type: "filter" })
     ] });
-  }, []), oe = m((n, i) => {
-    const t = n.data;
-    return n.category === "structure" ? n.id !== "root-frozen" ? null : /* @__PURE__ */ S(ge, {}) : !i.isLeaf || !(t?.pinned === "left" || t?.pinned === "right") ? null : /* @__PURE__ */ S(
-      me,
+  }, []), ie = C((e, t) => {
+    const o = e.data;
+    return e.category === "structure" ? e.id !== "root-frozen" ? null : /* @__PURE__ */ v(Ie, {}) : !t.isLeaf || !(o?.pinned === "left" || o?.pinned === "right") ? null : /* @__PURE__ */ v(
+      Se,
       {
-        value: t?.pinned ?? null,
-        onChange: (c) => H(n.id, c),
+        value: o?.pinned ?? null,
+        onChange: (u) => H(e.id, u),
         className: "shrink-0"
       }
     );
   }, [H]);
-  return Z ? /* @__PURE__ */ S("div", { ref: U, className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ S(
-    ae,
+  return te ? /* @__PURE__ */ v("div", { ref: j, className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ v(
+    de,
     {
-      items: X,
-      onChange: re,
-      onSubmit: ne,
-      renderLabelExtras: le,
-      renderActions: oe,
-      enableApplyDiscard: k,
-      enableSearch: P,
-      enableSelectAll: g,
+      items: ee,
+      onChange: oe,
+      onSubmit: le,
+      renderLabelExtras: ce,
+      renderActions: ie,
+      enableApplyDiscard: P,
+      enableSearch: E,
+      enableSelectAll: b,
       enableDragDrop: !0,
       enableCollapse: !0,
-      enableGlobalCollapse: w,
-      selectionMode: ue.CASCADE_DOWN,
-      searchPlaceholder: G("dataTable.searchColumnsPlaceholder"),
+      enableGlobalCollapse: M,
+      selectionMode: fe.CASCADE_DOWN,
+      searchPlaceholder: x("dataTable.searchColumnsPlaceholder"),
       className: "h-full",
       initialCollapsedItems: V.current,
-      onCollapseChange: (n) => {
-        V.current = n;
+      onCollapseChange: (e) => {
+        V.current = e;
       }
     },
-    B ? "sync-a" : "sync-b"
-  ) }) : /* @__PURE__ */ S("div", { className: "p-4 text-[13px] text-content-placeholder", children: G("dataTable.loadingColumns") });
+    X ? "sync-a" : "sync-b"
+  ) }) : /* @__PURE__ */ v("div", { className: "p-4 text-[13px] text-content-placeholder", children: x("dataTable.loadingColumns") });
 };
 export {
-  xe as DataTableColumnList
+  Me as DataTableColumnList
 };

package/dist/components/data/data-table/data-table-constants.d.ts

@@ -1,8 +1,7 @@
 /**
- * Minimum height (px) for the **scoped sheet portal host** (`sheetTarget`), not the grid
- * flex child. Applied only while a sheet is open so the overlay can extend to this height
- * without resizing the grid’s own layout box (avoids unnecessary layout-driven grid
- * refreshes on sheet open/close).
+ * Minimum height (px) for the scoped settings sheet host while open.
+ * Applied on `DataTableContent`'s layout frame (not the absolute portal layer)
+ * so short grids grow enough for a usable column list without re-rendering AG Grid.
  */
 export declare const DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX = 400;
 /** DOM class toggled imperatively for viewport-fill table shell (styles in `src/index.scss`). */

package/dist/components/data/data-table/data-table-context.d.ts

@@ -1,4 +1,5 @@
 import { GridApi } from 'ag-grid-community';
+import { DataTableSheetPortalStore } from './data-table-sheet-portal-store';
 export type DataTableFontSize = "small" | "medium" | "large";
 export type DataTableNumericFormat = "full" | "k" | "m" | "b" | "full_precision";
 export type DataTableRowHeight = "default" | "compact" | "comfort";
@@ -15,16 +16,12 @@ export interface DataTableContextValue {
     setRowHeight: (height: DataTableRowHeight) => void;
 }
 export declare const DataTableContext: import('react').Context<DataTableContextValue | null>;
+export declare const DataTableSheetPortalStoreContext: import('react').Context<DataTableSheetPortalStore | null>;
 export declare const useDataTable: () => DataTableContextValue;
-/**
- * Separate context for sheet-portal state that changes on every sheet open/close.
- * Isolated from `DataTableContext` so that `scopedSheetOpen` toggling does NOT
- * force grid consumers (`DataTableContent`, `AgGridWrapper`) to re-render.
- */
+export declare const useDataTableSheetPortalStore: () => DataTableSheetPortalStore;
 export interface DataTableSheetPortalContextValue {
     sheetTarget: HTMLDivElement | null;
     setSheetTarget: (node: HTMLDivElement | null) => void;
     scopedSheetOpen: boolean;
 }
-export declare const DataTableSheetPortalContext: import('react').Context<DataTableSheetPortalContextValue | null>;
 export declare const useDataTableSheetPortal: () => DataTableSheetPortalContextValue;

package/dist/components/data/data-table/data-table-context.js

@@ -1,20 +1,31 @@
 import { createContext as e, useContext as a } from "react";
-const o = e(
+import { useDataTableSheetPortalSnapshot as s } from "./data-table-sheet-portal-store.js";
+const n = e(
   null
-), l = () => {
-  const t = a(o);
+), l = e(null), b = () => {
+  const t = a(n);
   if (!t)
     throw new Error("useDataTable must be used within a DataTable");
   return t;
-}, n = e(null), s = () => {
-  const t = a(n);
+}, u = () => {
+  const t = a(l);
   if (!t)
-    throw new Error("useDataTableSheetPortal must be used within a DataTable");
+    throw new Error(
+      "useDataTableSheetPortalStore must be used within a DataTable"
+    );
   return t;
+}, c = () => {
+  const t = u(), { sheetTarget: o, scopedSheetOpen: r } = s(t);
+  return {
+    sheetTarget: o,
+    scopedSheetOpen: r,
+    setSheetTarget: t.setSheetTarget
+  };
 };
 export {
-  o as DataTableContext,
-  n as DataTableSheetPortalContext,
-  l as useDataTable,
-  s as useDataTableSheetPortal
+  n as DataTableContext,
+  l as DataTableSheetPortalStoreContext,
+  b as useDataTable,
+  c as useDataTableSheetPortal,
+  u as useDataTableSheetPortalStore
 };