impact-nova 2.2.3 → 2.2.4

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

@@ -1,57 +1,57 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
-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 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";
-import { DataTableSheetApiContext as N, DataTableSheetStateContext as k, useDataTableSheet as S, useDataTableSheetApi as _ } from "./data-table-sheet-context.js";
+import d, { useState as v, useEffect as p, useCallback as T } from "react";
+import { createPortal as C } from "react-dom";
+import { Cross as g } from "impact-nova-icons";
+import { cn as h } from "../../../lib/utils.js";
+import { Button as b } from "../../primitives/button/button.js";
+import { useDataTable as k, useDataTableSheetPortal as D } from "./data-table-context.js";
+import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as N } from "./data-table-constants.js";
+import { DataTableSheetApiContext as w, DataTableSheetStateContext as _, useDataTableSheet as x, useDataTableSheetApi as y } from "./data-table-sheet-context.js";
 const I = ({
   children: n,
   defaultOpen: r = !1,
   open: e,
-  onOpenChange: o
+  onOpenChange: a
 }) => {
-  const { registerScopedSheetDepth: a } = w(), [s, i] = b(r), l = e !== void 0 ? e : s, h = d.useRef(o);
-  u(() => {
-    h.current = o;
+  const { registerScopedSheetDepth: o } = k(), [s, l] = v(r), i = e !== void 0 ? e : s, m = d.useRef(a);
+  p(() => {
+    m.current = a;
   });
-  const y = T((p) => {
-    e === void 0 && i(p), h.current?.(p);
+  const S = T((u) => {
+    e === void 0 && l(u), m.current?.(u);
   }, [e]);
-  return u(() => {
-    if (l)
-      return a(1), () => {
-        a(-1);
+  return p(() => {
+    if (i)
+      return o(1), () => {
+        o(-1);
       };
-  }, [l, a]), /* @__PURE__ */ t(N.Provider, { value: y, children: /* @__PURE__ */ t(k.Provider, { value: l, children: n }) });
+  }, [i, o]), /* @__PURE__ */ t(w.Provider, { value: S, children: /* @__PURE__ */ t(_.Provider, { value: i, children: n }) });
 }, M = ({
   children: n,
   asChild: r
 }) => {
-  const { setOpen: e, open: o } = S(), a = () => {
-    e(!o);
+  const { setOpen: e, open: a } = x(), o = () => {
+    e(!a);
   };
   if (r) {
     const s = d.Children.only(n);
     return d.cloneElement(s, {
-      onClick: (i) => {
-        s.props.onClick?.(i), a();
+      onClick: (l) => {
+        s.props.onClick?.(l), o();
       }
     });
   }
-  return /* @__PURE__ */ t(x, { variant: "outline", onClick: a, children: n });
+  return /* @__PURE__ */ t(b, { variant: "outline", onClick: o, children: n });
 }, G = ({
   title: n,
   children: r,
   className: e
 }) => {
-  const { setOpen: o } = _();
+  const { setOpen: a } = y();
   return /* @__PURE__ */ c(
     "div",
     {
-      className: f(
+      className: h(
         "flex shrink-0 flex-row justify-between items-center px-4 py-3 mb-2 bg-brand-tint",
         e
       ),
@@ -60,7 +60,7 @@ const I = ({
         /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
           r,
           /* @__PURE__ */ t(
-            x,
+            b,
             {
               type: "button",
               variant: "ghost",
@@ -68,8 +68,8 @@ const I = ({
               "data-component": "data-table-sheet-close",
               className: "close_icon h-6 w-6 rounded-full hover:bg-muted/50",
               "aria-label": "Close",
-              onClick: () => o(!1),
-              children: /* @__PURE__ */ t(C, { className: "!h-3 !w-3 text-content-icon" })
+              onClick: () => a(!1),
+              children: /* @__PURE__ */ t(g, { className: "!h-3 !w-3 text-content-icon" })
             }
           )
         ] })
@@ -80,27 +80,24 @@ const I = ({
   children: n,
   className: r
 }) => {
-  const { open: e } = S(), { sheetTarget: o } = D(), [a, s] = b(!1);
-  if (e && !a && s(!0), !a) return null;
-  const i = /* @__PURE__ */ c(
+  const { open: e } = x(), { sheetTarget: a } = D(), [o, s] = v(!1);
+  if (e && !o && s(!0), !o) return null;
+  const l = /* @__PURE__ */ c(
     "div",
     {
-      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"
+      "aria-hidden": !e,
+      className: h(
+        "flex h-full max-h-full shrink-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none",
+        e ? "translate-x-0" : "translate-x-full pointer-events-none"
       ),
-      style: {
-        minHeight: v,
-        display: e ? void 0 : "none"
-      },
       children: [
         /* @__PURE__ */ t("div", { className: "w-[10px] bg-canvas-elevated border-l border-stroke-hairline shrink-0" }),
         /* @__PURE__ */ t(
           "div",
           {
             "data-component": "data-table-sheet-panel",
-            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",
+            className: h(
+              "relative flex h-full min-h-0 w-[355px] flex-col overflow-hidden bg-canvas-elevated border-t border-l border-stroke-hairline pointer-events-auto shadow-elevation-floating",
               r
             ),
             children: n
@@ -109,23 +106,23 @@ const I = ({
         /* @__PURE__ */ t("div", { className: "w-[16px] bg-canvas-elevated border-l border-stroke-hairline shrink-0" })
       ]
     }
-  ), m = /* @__PURE__ */ t(
+  ), f = /* @__PURE__ */ t(
     "div",
     {
-      className: "pointer-events-none absolute inset-0 z-[35] flex justify-end overflow-x-hidden overflow-y-visible",
-      style: { display: e ? void 0 : "none" },
-      children: i
+      "aria-hidden": !e,
+      className: "pointer-events-none absolute inset-0 z-[35] flex justify-end overflow-hidden",
+      children: l
     }
   );
-  return o ? g(m, o) : /* @__PURE__ */ t(
+  return a ? C(f, a) : /* @__PURE__ */ t(
     "div",
     {
+      "aria-hidden": !e,
       className: "pointer-events-none fixed inset-0 z-[35] flex justify-end overflow-x-hidden overflow-y-visible",
       style: {
-        minHeight: v,
-        display: e ? void 0 : "none"
+        minHeight: N
       },
-      children: i
+      children: l
     }
   );
 };

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

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

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

@@ -1,41 +1,42 @@
 import { DataTable as t, DataTableContent as o, DataTableToolbar as r } from "./data-table.js";
-import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as l, TABLE_VIEWPORT_SHELL_EXPANDED_CLASS as D } from "./data-table-constants.js";
+import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as D, DATA_TABLE_SHEET_SLIDE_TRANSITION_MS as l, TABLE_VIEWPORT_SHELL_EXPANDED_CLASS as S } from "./data-table-constants.js";
 import { DataTableColumnList as n } from "./data-table-column-list.js";
-import { DataTableContext as i, DataTableSheetPortalStoreContext as m, useDataTable as p, useDataTableSheetPortal as x, useDataTableSheetPortalStore as f } from "./data-table-context.js";
-import { DataTableFormatOptions as E } from "./data-table-format-options.js";
-import { DataTableSheet as h, DataTableSheetContent as s, DataTableSheetHeader as C, DataTableSheetTrigger as w } from "./data-table-sheet.js";
-import { useDataTableSheet as V, useDataTableSheetApi as A } from "./data-table-sheet-context.js";
-import { DataTableViewMenuContent as d, DataTableViewMenuDensity as g, DataTableViewMenuSettingsItem as H, DataTableViewMenuTrigger as I, DataTableViewMenuViewportExpand as M } from "./data-table-view-menu.js";
+import { DataTableContext as m, DataTableSheetPortalStoreContext as p, useDataTable as _, useDataTableSheetPortal as x, useDataTableSheetPortalStore as E } from "./data-table-context.js";
+import { DataTableFormatOptions as u } from "./data-table-format-options.js";
+import { DataTableSheet as h, DataTableSheetContent as s, DataTableSheetHeader as C, DataTableSheetTrigger as I } from "./data-table-sheet.js";
+import { useDataTableSheet as w, useDataTableSheetApi as P } from "./data-table-sheet-context.js";
+import { DataTableViewMenuContent as H, DataTableViewMenuDensity as M, DataTableViewMenuSettingsItem as d, DataTableViewMenuTrigger as g, DataTableViewMenuViewportExpand as O } from "./data-table-view-menu.js";
 import { DataTableSavedViews as c } from "./data-table-saved-views.js";
-import { PinSwitch as N } from "./pin-switch.js";
+import { PinSwitch as R } from "./pin-switch.js";
 import { ColumnIndicator as v } from "./column-indicator.js";
 import { IndicatorLegend as F } from "./indicator-legend.js";
 export {
   v as ColumnIndicator,
-  l as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
+  D as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
+  l as DATA_TABLE_SHEET_SLIDE_TRANSITION_MS,
   t as DataTable,
   n as DataTableColumnList,
   o as DataTableContent,
-  i as DataTableContext,
-  E as DataTableFormatOptions,
+  m as DataTableContext,
+  u as DataTableFormatOptions,
   c as DataTableSavedViews,
   h as DataTableSheet,
   s as DataTableSheetContent,
   C as DataTableSheetHeader,
-  m as DataTableSheetPortalStoreContext,
-  w as DataTableSheetTrigger,
+  p as DataTableSheetPortalStoreContext,
+  I as DataTableSheetTrigger,
   r as DataTableToolbar,
-  d as DataTableViewMenuContent,
-  g as DataTableViewMenuDensity,
-  H as DataTableViewMenuSettingsItem,
-  I as DataTableViewMenuTrigger,
-  M as DataTableViewMenuViewportExpand,
+  H as DataTableViewMenuContent,
+  M as DataTableViewMenuDensity,
+  d as DataTableViewMenuSettingsItem,
+  g as DataTableViewMenuTrigger,
+  O as DataTableViewMenuViewportExpand,
   F as IndicatorLegend,
-  N as PinSwitch,
-  D as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS,
-  p as useDataTable,
-  V as useDataTableSheet,
-  A as useDataTableSheetApi,
+  R as PinSwitch,
+  S as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS,
+  _ as useDataTable,
+  w as useDataTableSheet,
+  P as useDataTableSheetApi,
   x as useDataTableSheetPortal,
-  f as useDataTableSheetPortalStore
+  E as useDataTableSheetPortalStore
 };

package/dist/components/data/data-table/patch-column-tree-indicators-from-grid.d.ts

@@ -0,0 +1,3 @@
+import { GridApi } from 'ag-grid-community';
+import { NestedListItem } from '../nested-list/nested-list.types';
+export declare function patchColumnTreeIndicatorsFromGrid(rootItems: NestedListItem[], gridApi: GridApi): NestedListItem[];

package/dist/components/data/data-table/patch-column-tree-indicators-from-grid.js

@@ -0,0 +1,24 @@
+function h(n, c) {
+  const e = c.getGridOption("context"), a = typeof e?.activeSearchColumnId == "string" ? e.activeSearchColumnId : null, o = new Map(
+    c.getColumnState().map((r) => [r.colId, r])
+  ), i = (r) => r.map((t) => {
+    if ((t.category === "group" || t.children && t.children.length > 0) && t.children)
+      return {
+        ...t,
+        children: i(t.children)
+      };
+    const l = c.getColumn(t.id), s = o.get(t.id), u = t.data;
+    return {
+      ...t,
+      data: {
+        ...u,
+        hasSortApplied: !!s?.sort,
+        hasFilterApplied: l?.isFilterActive() === !0 || a === t.id
+      }
+    };
+  });
+  return i(n);
+}
+export {
+  h as patchColumnTreeIndicatorsFromGrid
+};

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

@@ -4,8 +4,9 @@ export interface UseDataTableColumnListSyncOptions {
     gridApi: GridApi | null;
     frozenColumnsLabel: string;
     scrollableColumnsLabel: string;
+    isSyncActive?: boolean;
 }
-export declare function useDataTableColumnListSync({ gridApi, frozenColumnsLabel, scrollableColumnsLabel, }: UseDataTableColumnListSyncOptions): {
+export declare function useDataTableColumnListSync({ gridApi, frozenColumnsLabel, scrollableColumnsLabel, isSyncActive, }: UseDataTableColumnListSyncOptions): {
     items: NestedListItem[];
     isReady: boolean;
     externalSyncKey: boolean;