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

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

@@ -1,8 +1,8 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import d, { useState as b, useEffect as f, useCallback as T } from "react";
+import d, { useState as b, useEffect as u, useCallback as T } from "react";
 import { createPortal as g } from "react-dom";
 import { Cross as C } from "impact-nova-icons";
-import { cn as m } from "../../../lib/utils.js";
+import { cn as f } from "../../../lib/utils.js";
 import { Button as x } from "../../primitives/button/button.js";
 import { useDataTable as w, useDataTableSheetPortal as D } from "./data-table-context.js";
 import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as v } from "./data-table-constants.js";
@@ -13,16 +13,18 @@ const I = ({
   open: e,
   onOpenChange: o
 }) => {
-  const { registerScopedSheetDepth: a } = w(), [s, i] = b(r), l = e !== void 0 ? e : s, p = d.useRef(o);
-  f(() => {
-    p.current = o;
+  const { registerScopedSheetDepth: a } = w(), [s, i] = b(r), l = e !== void 0 ? e : s, h = d.useRef(o);
+  u(() => {
+    h.current = o;
   });
-  const y = T((u) => {
-    e === void 0 && i(u), p.current?.(u);
+  const y = T((p) => {
+    e === void 0 && i(p), h.current?.(p);
   }, [e]);
-  return f(() => {
+  return u(() => {
     if (l)
-      return a(1), () => a(-1);
+      return a(1), () => {
+        a(-1);
+      };
   }, [l, a]), /* @__PURE__ */ t(N.Provider, { value: y, children: /* @__PURE__ */ t(k.Provider, { value: l, children: n }) });
 }, M = ({
   children: n,
@@ -49,7 +51,7 @@ const I = ({
   return /* @__PURE__ */ c(
     "div",
     {
-      className: m(
+      className: f(
         "flex shrink-0 flex-row justify-between items-center px-4 py-3 mb-2 bg-brand-tint",
         e
       ),
@@ -78,14 +80,12 @@ const I = ({
   children: n,
   className: r
 }) => {
-  const { open: e } = S(), { sheetTarget: o } = D(), [a, s] = b(e);
-  if (f(() => {
-    e && s(!0);
-  }, [e]), !a) return null;
+  const { open: e } = S(), { sheetTarget: o } = D(), [a, s] = b(!1);
+  if (e && !a && s(!0), !a) return null;
   const i = /* @__PURE__ */ c(
     "div",
     {
-      className: m(
+      className: f(
         "-my-px flex h-[calc(100%_+_2px)]",
         e && "animate-in slide-in-from-right-[100%] duration-200 ease-in-out fade-in fill-mode-forwards motion-reduce:animate-none motion-reduce:transition-none"
       ),
@@ -99,7 +99,7 @@ const I = ({
           "div",
           {
             "data-component": "data-table-sheet-panel",
-            className: m(
+            className: f(
               "relative flex h-full w-[355px] flex-col overflow-y-auto bg-canvas-elevated border-t border-l border-stroke-hairline pointer-events-auto shadow-elevation-floating",
               r
             ),
@@ -109,7 +109,7 @@ const I = ({
         /* @__PURE__ */ t("div", { className: "w-[16px] bg-canvas-elevated border-l border-stroke-hairline shrink-0" })
       ]
     }
-  ), h = /* @__PURE__ */ t(
+  ), m = /* @__PURE__ */ t(
     "div",
     {
       className: "pointer-events-none absolute inset-0 z-[35] flex justify-end overflow-x-hidden overflow-y-visible",
@@ -117,7 +117,7 @@ const I = ({
       children: i
     }
   );
-  return o ? g(h, o) : /* @__PURE__ */ t(
+  return o ? g(m, o) : /* @__PURE__ */ t(
     "div",
     {
       className: "pointer-events-none fixed inset-0 z-[35] flex justify-end overflow-x-hidden overflow-y-visible",

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

@@ -1,51 +1,52 @@
-import { jsx as n, jsxs as P } from "react/jsx-runtime";
-import { useState as f, useRef as _, useCallback as x, useMemo as y, useEffect as v, memo as S } from "react";
-import { AgGridWrapper as G } from "../ag-grid-react/index.js";
+import { jsx as n, jsxs as R } from "react/jsx-runtime";
+import { useState as g, useMemo as m, useCallback as D, useEffect as y, memo as v } from "react";
+import { AgGridWrapper as E } from "../ag-grid-react/index.js";
 import { cn as H } from "../../../lib/utils.js";
-import { DataTableContext as C, DataTableSheetPortalStoreContext as R, useDataTable as E, useDataTableSheetPortal as w } from "./data-table-context.js";
-import { createDataTableSheetPortalStore as O } from "./data-table-sheet-portal-store.js";
-import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as F } from "./data-table-constants.js";
-const A = {
+import { DataTableContext as O, DataTableSheetPortalStoreContext as F, useDataTable as N, useDataTableSheetPortal as A } from "./data-table-context.js";
+import { createDataTableSheetPortalStore as I } from "./data-table-sheet-portal-store.js";
+import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as z } from "./data-table-constants.js";
+import { extractRuntimeColumnDefs as B, mergeInitialGridRuntimeState as M } from "./data-table-column-def-pin.js";
+const P = {
   default: 46,
   compact: 30,
   comfort: 52
-}, V = ({
+}, Q = ({
   children: a,
   className: t
 }) => {
-  const [r, e] = f(null), [o, c] = f("medium"), [s, p] = f("full"), [l, h] = f("default"), d = _(O()), m = x((i) => {
-    d.current.registerScopedSheetDepth(i);
-  }, []), u = x((i) => {
-    e(i);
-  }, []), g = {
+  const [r, e] = g(null), [o, d] = g("medium"), [i, S] = g("full"), [s, u] = g("default"), l = m(() => I(), []), f = D((c) => {
+    l.registerScopedSheetDepth(c);
+  }, [l]), p = D((c) => {
+    e(c);
+  }, []), x = {
     small: "12px",
     medium: "14px",
     large: "16px"
-  }[o], b = `${A[l]}px`, T = y(
+  }[o], b = `${P[s]}px`, T = m(
     () => ({
       gridApi: r,
-      registerApi: u,
-      registerScopedSheetDepth: m,
+      registerApi: p,
+      registerScopedSheetDepth: f,
       fontSize: o,
-      setFontSize: c,
-      numericFormat: s,
-      setNumericFormat: p,
-      rowHeight: l,
-      setRowHeight: h
+      setFontSize: d,
+      numericFormat: i,
+      setNumericFormat: S,
+      rowHeight: s,
+      setRowHeight: u
     }),
     [
       r,
-      u,
-      m,
+      p,
+      f,
       o,
-      s,
-      l
+      i,
+      s
     ]
   );
-  return /* @__PURE__ */ n(C.Provider, { value: T, children: /* @__PURE__ */ n(
-    R.Provider,
+  return /* @__PURE__ */ n(O.Provider, { value: T, children: /* @__PURE__ */ n(
+    F.Provider,
     {
-      value: d.current,
+      value: l,
       children: /* @__PURE__ */ n(
         "div",
         {
@@ -55,7 +56,7 @@ const A = {
             t
           ),
           style: {
-            "--ag-font-size": g,
+            "--ag-font-size": x,
             "--ag-row-height": b
           },
           children: a
@@ -63,14 +64,14 @@ const A = {
       )
     }
   ) });
-}, D = {
+}, w = {
   full: "full_no",
   k: "thou",
   m: "mil",
   b: "bil",
   full_precision: "full_precision"
-}, N = S(function() {
-  const { setSheetTarget: t } = w();
+}, j = v(function() {
+  const { setSheetTarget: t } = A();
   return /* @__PURE__ */ n(
     "div",
     {
@@ -78,96 +79,104 @@ const A = {
       className: "absolute inset-0 pointer-events-none z-[39] flex overflow-x-hidden overflow-y-visible"
     }
   );
-}), z = S(function({
+}), k = v(function({
   className: t,
   children: r
 }) {
-  const { scopedSheetOpen: e } = w();
-  return /* @__PURE__ */ P(
+  const { scopedSheetOpen: e } = A();
+  return /* @__PURE__ */ R(
     "div",
     {
       className: H(
         "relative flex-1 min-h-0 w-full bg-canvas-elevated rounded-b-[inherit] grid-rounded-bottom",
         t
       ),
-      style: e ? { minHeight: F } : void 0,
+      style: e ? { minHeight: z } : void 0,
       children: [
         r,
-        /* @__PURE__ */ n(N, {})
+        /* @__PURE__ */ n(j, {})
       ]
     }
   );
-}), B = S(function({
+}), L = v(function({
   resolvedRowHeight: t,
   mergedContext: r,
   onGridReady: e,
   columnDefs: o,
-  maintainColumnOrder: c = !0,
-  ...s
+  maintainColumnOrder: d = !0,
+  ...i
 }) {
   return /* @__PURE__ */ n(
-    G,
+    E,
     {
-      ...s,
+      ...i,
       columnDefs: o,
       rowHeight: t,
       onGridReady: e,
       context: r,
-      maintainColumnOrder: c
+      maintainColumnOrder: d
     }
   );
 });
-function Y(a) {
+function U(a) {
   const {
     registerApi: t,
     rowHeight: r,
     gridApi: e,
     numericFormat: o
-  } = E(), {
-    className: c,
-    onGridReady: s,
-    rowHeight: p,
-    context: l,
-    columnDefs: h,
-    maintainColumnOrder: d = !0,
-    ...m
-  } = a, u = A[r], g = p ?? u, b = y(
+  } = N(), {
+    className: d,
+    onGridReady: i,
+    rowHeight: S,
+    context: s,
+    columnDefs: u,
+    initialState: l,
+    maintainColumnOrder: f = !0,
+    ...p
+  } = a, x = P[r], b = S ?? x, { runtimeColumnDefs: T, extractedRuntimeDefaults: c } = m(
+    () => B(u ?? void 0),
+    [u]
+  ), _ = m(
+    () => M(l, c),
+    [l, c]
+  ), C = m(
     () => ({
-      ...l,
-      formatType: D[o]
+      ...s,
+      formatType: w[o]
     }),
-    [l, o]
+    [s, o]
   );
-  v(() => {
+  y(() => {
     e?.resetRowHeights();
-  }, [r, e]), v(() => {
+  }, [r, e]), y(() => {
     if (e) {
-      const i = e.getGridOption("context") || {};
+      const h = e.getGridOption("context") || {};
       e.setGridOption("context", {
-        ...i,
-        formatType: D[o]
+        ...h,
+        formatType: w[o]
       }), e.refreshCells({ force: !0 });
     }
   }, [o, e]);
-  const T = x(
-    (i) => {
-      t(i.api), s?.(i);
+  const G = D(
+    (h) => {
+      t(h.api), i?.(h);
     },
-    [t, s]
+    [t, i]
   );
-  return /* @__PURE__ */ n(z, { className: c, children: /* @__PURE__ */ n(
-    B,
+  return /* @__PURE__ */ n(k, { className: d, children: /* @__PURE__ */ n(
+    L,
     {
-      ...m,
-      columnDefs: h,
-      maintainColumnOrder: d,
-      resolvedRowHeight: g,
-      mergedContext: b,
-      onGridReady: T
+      ...p,
+      columnDefs: T,
+      initialState: _,
+      maintainColumnOrder: f,
+      resolvedRowHeight: b,
+      mergedContext: C,
+      onGridReady: G
     }
   ) });
 }
-const $ = ({
+const Z = ({
   children: a,
   className: t
 }) => /* @__PURE__ */ n(
@@ -182,7 +191,7 @@ const $ = ({
   }
 );
 export {
-  V as DataTable,
-  Y as DataTableContent,
-  $ as DataTableToolbar
+  Q as DataTable,
+  U as DataTableContent,
+  Z as DataTableToolbar
 };

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

@@ -0,0 +1,16 @@
+import { GridApi } from 'ag-grid-community';
+import { NestedListItem } from '../nested-list/nested-list.types';
+export interface UseDataTableColumnListSyncOptions {
+    gridApi: GridApi | null;
+    frozenColumnsLabel: string;
+    scrollableColumnsLabel: string;
+}
+export declare function useDataTableColumnListSync({ gridApi, frozenColumnsLabel, scrollableColumnsLabel, }: UseDataTableColumnListSyncOptions): {
+    items: NestedListItem[];
+    isReady: boolean;
+    externalSyncKey: boolean;
+    listWrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleChange: (currentItems: NestedListItem[], enableApplyDiscard: boolean) => void;
+    handleSubmit: (finalItems: NestedListItem[]) => void;
+    handlePinChange: (itemId: string, newPinned: "left" | "right" | null) => void;
+};

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

@@ -0,0 +1,222 @@
+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 { 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,
+  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, {
+    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);
+    },
+    []
+  ), m = a(
+    () => {
+      const t = C();
+      t && I(t, "structural");
+    },
+    [I, C]
+  ), k = a(
+    () => {
+      const t = C();
+      if (!t) return;
+      const e = A(
+        t,
+        y.current,
+        G.current
+      );
+      if (e !== "skip") {
+        if (e === "structural") {
+          const o = E.current?.querySelector(
+            '[data-component="nested-list"] .overflow-y-auto'
+          );
+          o && (S.current = o.scrollTop);
+        }
+        I(t, e);
+      }
+    },
+    [I, C]
+  );
+  x(() => {
+    if (!r) return;
+    queueMicrotask(() => m());
+    const t = [
+      "columnVisible",
+      "columnPinned",
+      "columnMoved",
+      "gridReady",
+      "columnGroupOpened",
+      "columnRowGroupChanged",
+      "columnPivotModeChanged",
+      "columnEverythingChanged",
+      "dragStopped",
+      "columnValueChanged",
+      "displayedColumnsChanged",
+      "sortChanged",
+      "filterChanged",
+      "newColumnsLoaded"
+    ];
+    let e = null;
+    const o = () => {
+      i.current || (e && clearTimeout(e), e = setTimeout(() => {
+        e = null, !(i.current || r.isDestroyed()) && k();
+      }, Q));
+    }, l = t.map(
+      (u) => j(r, u, () => {
+        o();
+      })
+    );
+    return () => {
+      e && clearTimeout(e), l.forEach((u) => u());
+    };
+  }, [r, m, k]), x(() => {
+    if (S.current === 0) return;
+    const t = requestAnimationFrame(() => {
+      const e = E.current?.querySelector(
+        '[data-component="nested-list"] .overflow-y-auto'
+      );
+      e && (e.scrollTop = S.current, S.current = 0);
+    });
+    return () => cancelAnimationFrame(t);
+  }, [_]);
+  const w = a(
+    (t) => {
+      const e = [], o = (l, u) => {
+        l.forEach((n) => {
+          if (n.id === "root-frozen") {
+            n.children && o(n.children, "left");
+            return;
+          }
+          if (n.id === "root-scrollable") {
+            n.children && o(n.children, null);
+            return;
+          }
+          if (n.category === "group" || n.children && n.children.length > 0)
+            n.children && o(n.children, u);
+          else {
+            let c;
+            if (u === null)
+              c = null;
+            else {
+              const d = n.data?.pinned;
+              c = d === "left" || d === "right" ? d : u;
+            }
+            e.push({
+              colId: n.id,
+              pinned: c,
+              hide: !n.checked
+            });
+          }
+        });
+      };
+      return o(t, null), e;
+    },
+    []
+  ), g = a(
+    (t) => {
+      if (!r) return;
+      i.current = !0;
+      const e = w(t);
+      if (e.length === 0) {
+        R(() => {
+          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(
+        (s) => q(s.pinned) && !u.has(s.colId)
+      ), p = new Set(n.map((s) => s.colId));
+      r.applyColumnState({ state: l, applyOrder: !0 });
+      const c = () => {
+        i.current = !1, m();
+      };
+      if (p.size === 0) {
+        R(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;
+        }).length > 0) {
+          T = !0, d && clearTimeout(d), P?.();
+          const v = l.filter(
+            (f) => f.pinned && !p.has(f.colId)
+          );
+          if (v.length > 0) {
+            const f = v[0], F = l.map(
+              (M) => M.colId === f.colId ? { ...M, pinned: null } : M
+            );
+            r.applyColumnState({ state: F, applyOrder: !0 });
+          }
+          R(c);
+        }
+      }), d = setTimeout(() => {
+        P?.(), T || c();
+      }, J);
+    },
+    [r, w, m]
+  ), X = a(
+    (t) => {
+      g(L(t));
+    },
+    [g]
+  ), Y = a(
+    (t, e) => {
+      const o = L(t);
+      e || g(o), b(o);
+      const l = z(o);
+      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 ? {
+          ...c,
+          data: {
+            ...c.data,
+            pinned: e
+          }
+        } : c.children ? {
+          ...c,
+          children: n(c.children)
+        } : c);
+        return n(u);
+      }), !r) return;
+      i.current = !0;
+      const o = r.getColumnState(), l = N(o, [
+        { colId: t, pinned: e }
+      ]);
+      r.applyColumnState({ state: l, applyOrder: !0 }), R(() => {
+        i.current = !1, Z(r, t) !== e && m();
+      });
+    },
+    [r, m]
+  );
+  return {
+    items: K,
+    isReady: V,
+    externalSyncKey: _,
+    listWrapperRef: E,
+    handleChange: Y,
+    handleSubmit: X,
+    handlePinChange: H
+  };
+}
+export {
+  se as useDataTableColumnListSync
+};

package/dist/components/forms/select/hooks/useSelectValueState.d.ts

@@ -0,0 +1,19 @@
+import { Option, PropsValue } from '../select.types';
+export interface UseSelectValueStateParams<OptionType> {
+    value: PropsValue<OptionType> | undefined;
+    defaultValue: PropsValue<OptionType> | undefined;
+    isMulti: boolean;
+    onChange?: unknown;
+}
+export interface UseSelectValueStateResult<OptionType> {
+    usesMenuSession: boolean;
+    currentValue: PropsValue<OptionType>;
+    setCurrentValue: (next: PropsValue<OptionType>) => void;
+    beginMenuSession: () => void;
+    endMenuSession: () => PropsValue<OptionType> | undefined;
+}
+/**
+ * Controlled selects without `onChange` keep edits in a menu session so
+ * `onMenuClose` can batch-commit without stale `value` props.
+ */
+export declare function useSelectValueState<OptionType extends Option = Option>({ value, defaultValue, isMulti, onChange, }: UseSelectValueStateParams<OptionType>): UseSelectValueStateResult<OptionType>;

package/dist/components/forms/select/hooks/useSelectValueState.js

@@ -0,0 +1,41 @@
+import { useState as i, useRef as v, useCallback as r } from "react";
+import { cloneSelectValue as M } from "../utils/select.js";
+function h({
+  value: c,
+  defaultValue: V,
+  isMulti: s,
+  onChange: f
+}) {
+  const u = c !== void 0, e = u && f === void 0, [S, d] = i(
+    V ?? (s ? [] : null)
+  ), [a, l] = i(null), o = v(null), t = u ? c : S, m = e && a !== null ? a : t, p = r(
+    (n) => {
+      if (!u) {
+        d(n);
+        return;
+      }
+      e && (o.current = n, l(n));
+    },
+    [u, e]
+  ), C = r(() => {
+    if (!e)
+      return;
+    const n = M(t, s);
+    o.current = n, l(n);
+  }, [e, t, s]), b = r(() => {
+    if (!e)
+      return;
+    const n = o.current ?? t;
+    return o.current = null, l(null), n;
+  }, [e, t]);
+  return {
+    usesMenuSession: e,
+    currentValue: m,
+    setCurrentValue: p,
+    beginMenuSession: C,
+    endMenuSession: b
+  };
+}
+export {
+  h as useSelectValueState
+};

package/dist/components/forms/select/index.js

@@ -1,13 +1,14 @@
 import { Select as n } from "./select.js";
-import { cx as r, getIndeterminateState as i, getLeafOptions as c, getSelectedCount as S, getSequence as a, isInvertedSelection as d, isOptionArray as g, isSelected as l } from "./utils/select.js";
+import { cloneSelectValue as c, cx as r, getIndeterminateState as i, getLeafOptions as l, getSelectedCount as S, getSequence as a, isInvertedSelection as d, isOptionArray as g, isSelected as p } from "./utils/select.js";
 export {
   n as Select,
+  c as cloneSelectValue,
   r as cx,
   i as getIndeterminateState,
-  c as getLeafOptions,
+  l as getLeafOptions,
   S as getSelectedCount,
   a as getSequence,
   d as isInvertedSelection,
   g as isOptionArray,
-  l as isSelected
+  p as isSelected
 };