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

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

@@ -1,52 +1,52 @@
-import { jsx as n, jsxs as G } from "react/jsx-runtime";
-import { useState as h, useRef as E, useCallback as D, useMemo as g, useEffect as y, memo as v } from "react";
+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 N, useDataTable as I, useDataTableSheetPortal as A } from "./data-table-context.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 P = {
+const _ = {
   default: 46,
   compact: 30,
   comfort: 52
 }, U = ({
-  children: a,
+  children: i,
   className: t
 }) => {
-  const [r, e] = h(null), [o, c] = h("medium"), [i, S] = h("full"), [s, m] = h("default"), d = E(z()), u = D((l) => {
-    d.current.registerScopedSheetDepth(l);
-  }, []), f = D((l) => {
-    e(l);
+  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 = {
     small: "12px",
     medium: "14px",
     large: "16px"
-  }[o], b = `${P[s]}px`, T = g(
+  }[o], b = `${_[s]}px`, T = u(
     () => ({
       gridApi: r,
-      registerApi: f,
-      registerScopedSheetDepth: u,
+      registerApi: p,
+      registerScopedSheetDepth: m,
       fontSize: o,
       setFontSize: c,
-      numericFormat: i,
+      numericFormat: a,
       setNumericFormat: S,
       rowHeight: s,
-      setRowHeight: m
+      setRowHeight: f
     }),
     [
       r,
-      f,
-      u,
+      p,
+      m,
       o,
-      i,
+      a,
       s
     ]
   );
   return /* @__PURE__ */ n(F.Provider, { value: T, children: /* @__PURE__ */ n(
-    N.Provider,
+    I.Provider,
     {
-      value: d.current,
+      value: l,
       children: /* @__PURE__ */ n(
         "div",
         {
@@ -59,19 +59,19 @@ const P = {
             "--ag-font-size": x,
             "--ag-row-height": b
           },
-          children: a
+          children: i
         }
       )
     }
   ) });
-}, w = {
+}, A = {
   full: "full_no",
   k: "thou",
   m: "mil",
   b: "bil",
   full_precision: "full_precision"
 }, k = v(function() {
-  const { setSheetTarget: t } = A();
+  const { setSheetTarget: t } = P();
   return /* @__PURE__ */ n(
     "div",
     {
@@ -83,8 +83,8 @@ const P = {
   className: t,
   children: r
 }) {
-  const { scopedSheetOpen: e } = A();
-  return /* @__PURE__ */ G(
+  const { scopedSheetOpen: e } = P();
+  return /* @__PURE__ */ E(
     "div",
     {
       className: H(
@@ -104,12 +104,12 @@ const P = {
   onGridReady: e,
   columnDefs: o,
   maintainColumnOrder: c = !0,
-  ...i
+  ...a
 }) {
   return /* @__PURE__ */ n(
     O,
     {
-      ...i,
+      ...a,
       columnDefs: o,
       rowHeight: t,
       onGridReady: e,
@@ -118,66 +118,71 @@ const P = {
     }
   );
 });
-function Z(a) {
+function Z(i) {
   const {
     registerApi: t,
     rowHeight: r,
     gridApi: e,
     numericFormat: o
-  } = I(), {
+  } = N(), {
     className: c,
-    onGridReady: i,
+    onGridReady: a,
     rowHeight: S,
     context: s,
-    columnDefs: m,
-    initialState: d,
-    maintainColumnOrder: u = !0,
-    ...f
-  } = a, x = P[r], b = S ?? x, { runtimeColumnDefs: T, extractedRuntimeDefaults: l } = g(
-    () => M(m ?? void 0),
-    [m]
-  ), _ = g(
-    () => j(d, l),
-    [d, l]
-  ), C = g(
+    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
+    ),
+    [l, y, m]
+  ), G = u(
     () => ({
       ...s,
-      formatType: w[o]
+      formatType: A[o]
     }),
     [s, o]
   );
-  y(() => {
+  w(() => {
     e?.resetRowHeights();
-  }, [r, e]), y(() => {
+  }, [r, e]), w(() => {
     if (e) {
-      const p = e.getGridOption("context") || {};
+      const h = e.getGridOption("context") || {};
       e.setGridOption("context", {
-        ...p,
-        formatType: w[o]
+        ...h,
+        formatType: A[o]
       }), e.refreshCells({ force: !0 });
     }
   }, [o, e]);
   const R = D(
-    (p) => {
-      t(p.api), i?.(p);
+    (h) => {
+      t(h.api), a?.(h);
     },
-    [t, i]
+    [t, a]
   );
   return /* @__PURE__ */ n(L, { className: c, children: /* @__PURE__ */ n(
     W,
     {
-      ...f,
-      columnDefs: T,
-      initialState: _,
-      maintainColumnOrder: u,
-      resolvedRowHeight: b,
-      mergedContext: C,
+      ...x,
+      columnDefs: d,
+      initialState: C,
+      maintainColumnOrder: p,
+      resolvedRowHeight: T,
+      mergedContext: G,
       onGridReady: R
     }
   ) });
 }
 const ee = ({
-  children: a,
+  children: i,
   className: t
 }) => /* @__PURE__ */ n(
   "div",
@@ -187,7 +192,7 @@ const ee = ({
       "flex items-center justify-between px-4 py-3 shrink-0 bg-canvas-elevated rounded-t-[inherit]",
       t
     ),
-    children: a
+    children: i
   }
 );
 export {

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

@@ -1,4 +1,5 @@
 import { AgGridWrapperProps } from '../ag-grid-react/ag-grid.types';
+import { SuppressInitialRuntimeState } from './data-table-column-def-pin';
 import type * as React from "react";
 /**
  * Root layout provider for data tables. Compose toolbar, sheet, and `DataTableContent` as children.
@@ -8,11 +9,16 @@ export type DataTableProps = {
     className?: string;
 };
 /**
- * AG Grid surface — forwards native `AgGridReact` props (rowData, columnDefs, rowModelType, treeData, …)
+ * AG Grid surface — forwards `AgGridReact` grid options (`rowData`, `columnDefs`, `rowModelType`, …)
  * with Impact Nova styling. See https://www.ag-grid.com/react-data-grid/grid-options/
  */
 export type DataTableContentProps<TData = unknown> = AgGridWrapperProps<TData> & {
     className?: string;
+    /**
+     * Skip injecting extracted column pinning/visibility into `initialState` on
+     * first paint — use when a saved view will apply immediately after mount.
+     */
+    suppressInitialRuntimeState?: SuppressInitialRuntimeState;
 };
 /**
  * Top bar above the grid. Optional — omit to remove the toolbar from the DOM.

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" })
           }
         )
       }