impact-nova 1.6.7 → 1.7.0

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

@@ -1,89 +1,82 @@
-import { jsx as R } from "react/jsx-runtime";
-import { useState as j, useRef as w, useCallback as p, useEffect as A } from "react";
-import { useDataTable as B } from "./data-table-context.js";
-import { NestedList as H } from "../nested-list/nested-list.js";
-import { SelectionMode as J } from "../types/nested-list.types.js";
+import { jsx as M } from "react/jsx-runtime";
+import { useState as z, useRef as P, useCallback as h, useEffect as _ } from "react";
+import { useDataTable as q } from "./data-table-context.js";
+import { NestedList as B } from "../nested-list/nested-list.js";
+import { SelectionMode as H } from "../types/nested-list.types.js";
+import { mergePartialOrderedColumnState as J } from "./data-table-column-state.js";
 import { useImpactNovaI18n as K } from "../../../i18n/ImpactNovaI18nContext.js";
-function Q(d, I) {
-  let f = null;
-  return ((...v) => {
-    f && clearTimeout(f), f = setTimeout(() => d(...v), I);
-  });
-}
 const le = ({
-  enableApplyDiscard: d = !1,
-  showSearch: I = !0,
-  showSelectAll: f = !0,
-  showCollapse: v = !0
+  enableApplyDiscard: b = !1,
+  showSearch: R = !0,
+  showSelectAll: w = !0,
+  showCollapse: L = !0
 }) => {
-  const { gridApi: r } = B(), { t: h } = K(), [F, x] = j([]), [U, V] = j(!1), S = w(!1), W = w(/* @__PURE__ */ new Map()), g = p(() => {
-    if (!r || S.current) return;
-    const o = r.getColumnState(), n = new Map(o.map((t) => [t.colId, t]));
-    W.current = n;
-    const s = r.getColumns() || [], i = new Map(s.map((t) => [t.getColId(), t])), u = [], e = [], y = /* @__PURE__ */ new Map(), T = (t, c) => {
-      const l = t.getGroupId();
-      let a = y.get(l);
-      if (a) return a;
-      const m = t.getOriginalParent(), b = m ? T(m, c).children : c, D = t.getColGroupDef();
-      return a = {
-        id: l,
-        label: D?.headerName || l,
+  const { gridApi: l } = q(), { t: d } = K(), [j, N] = z([]), [A, F] = z(!1), m = P(!1), U = P(/* @__PURE__ */ new Map()), D = h(() => {
+    if (!l || m.current) return;
+    const n = l.getColumnState(), a = new Map(n.map((t) => [t.colId, t]));
+    U.current = a;
+    const o = l.getColumns() || [], u = new Map(o.map((t) => [t.getColId(), t])), c = [], e = [], S = /* @__PURE__ */ new Map(), T = (t, i) => {
+      const r = t.getGroupId();
+      let s = S.get(r);
+      if (s) return s;
+      const f = t.getOriginalParent(), g = f ? T(f, i).children : i, C = t.getColGroupDef();
+      return s = {
+        id: r,
+        label: C?.headerName || r,
         checked: !0,
         children: [],
         category: "group"
-      }, y.set(l, a), b.push(a), a;
+      }, S.set(r, s), g.push(s), s;
     };
-    let k = 0, L = 0, G = 0, P = 0;
-    o.forEach((t) => {
-      const c = i.get(t.colId);
-      if (!c) return;
-      let l = r.getDisplayNameForColumn(c, "header");
-      if (l === "") return;
-      if (l == null) {
-        const E = c.getColDef();
-        if (E.headerName === "") return;
-        l = E.headerName || E.field || t.colId;
+    let v = 0, O = 0, I = 0, x = 0;
+    n.forEach((t) => {
+      const i = u.get(t.colId);
+      if (!i) return;
+      let r = l.getDisplayNameForColumn(i, "header");
+      if (r === "") return;
+      if (r == null) {
+        const G = i.getColDef();
+        if (G.headerName === "") return;
+        r = G.headerName || G.field || t.colId;
       }
-      if (!l || l.trim() === "")
+      if (!r || r.trim() === "")
         return;
-      const a = !t.hide, m = {
+      const s = !t.hide, f = {
         id: t.colId,
-        label: l,
-        checked: a
+        label: r,
+        checked: s
       };
-      t.pinned ? (k++, a && L++) : (G++, a && P++);
-      const b = t.pinned ? u : e, D = c.getOriginalParent();
-      D?.getColGroupDef().children ? T(D, b).children.push(m) : b.push(m);
+      t.pinned ? (v++, s && O++) : (I++, s && x++);
+      const g = t.pinned ? c : e, C = i.getOriginalParent();
+      C?.getColGroupDef().children ? T(C, g).children.push(f) : g.push(f);
     });
-    const M = (t) => {
-      let c = t.length > 0;
-      for (const l of t)
-        l.children && (l.checked = M(l.children)), l.checked || (c = !1);
-      return c;
+    const k = (t) => {
+      let i = t.length > 0;
+      for (const r of t)
+        r.children && (r.checked = k(r.children)), r.checked || (i = !1);
+      return i;
     };
-    M(u), M(e);
-    const N = [];
-    u.length > 0 && N.push({
+    k(c), k(e);
+    const y = [];
+    c.length > 0 && y.push({
       id: "root-frozen",
-      label: h("dataTable.frozenColumns"),
-      checked: k > 0 && L === k,
-      children: u,
+      label: d("dataTable.frozenColumns"),
+      checked: v > 0 && O === v,
+      children: c,
       category: "structure",
       isDragDisabled: !0
-    }), e.length > 0 && N.push({
+    }), e.length > 0 && y.push({
       id: "root-scrollable",
-      label: h("dataTable.scrollableColumns"),
-      checked: G > 0 && P === G,
+      label: d("dataTable.scrollableColumns"),
+      checked: I > 0 && x === I,
       children: e,
       category: "structure",
       isDragDisabled: !0
-    }), x(N), V(!0);
-  }, [r, h]), z = w(null);
-  A(() => {
-    z.current = Q(g, 150);
-  }, [g]), A(() => {
-    if (!r) return;
-    const o = setTimeout(() => g(), 0), n = [
+    }), N(y), F(!0);
+  }, [l, d]);
+  _(() => {
+    if (!l) return;
+    const n = setTimeout(() => D(), 0), a = [
       "columnVisible",
       "columnPinned",
       "columnMoved",
@@ -93,64 +86,75 @@ const le = ({
       "columnRowGroupChanged",
       "columnPivotModeChanged",
       "columnEverythingChanged"
-    ], s = () => {
-      z.current?.();
+    ];
+    let o = null;
+    const u = () => {
+      o && clearTimeout(o), o = setTimeout(() => {
+        o = null, D();
+      }, 150);
     };
-    return r.isDestroyed() || n.forEach((i) => r.addEventListener(i, s)), () => {
-      clearTimeout(o), r.isDestroyed() || n.forEach((i) => r.removeEventListener(i, s));
+    return l.isDestroyed() || a.forEach((c) => l.addEventListener(c, u)), () => {
+      clearTimeout(n), o && clearTimeout(o), l.isDestroyed() || a.forEach((c) => l.removeEventListener(c, u));
     };
-  }, [r, g]);
-  const O = p((o) => {
-    const n = [], s = (i, u) => {
-      i.forEach((e) => {
+  }, [l, D]);
+  const E = h((n) => {
+    const a = [], o = (u, c) => {
+      u.forEach((e) => {
         if (e.id === "root-frozen") {
-          e.children && s(e.children, "left");
+          e.children && o(e.children, "left");
           return;
         }
         if (e.id === "root-scrollable") {
-          e.children && s(e.children, null);
+          e.children && o(e.children, null);
           return;
         }
-        e.category === "group" || e.children && e.children.length > 0 ? e.children && s(e.children, u) : r?.getColumn(e.id) && n.push({
+        e.category === "group" || e.children && e.children.length > 0 ? e.children && o(e.children, c) : l?.getColumn(e.id) && a.push({
           colId: e.id,
-          pinned: u,
+          pinned: c,
           hide: !e.checked
         });
       });
     };
-    return s(o, null), n;
-  }, [r]), C = p((o) => {
-    if (!r) return;
-    S.current = !0;
-    const n = O(o);
-    n.length > 0 && r.applyColumnState({
-      state: n,
+    return o(n, null), a;
+  }, [l]), p = h((n) => {
+    if (!l) return;
+    m.current = !0;
+    const a = E(n);
+    if (a.length === 0) {
+      setTimeout(() => {
+        m.current = !1;
+      }, 300);
+      return;
+    }
+    const o = l.getColumnState(), u = J(o, a);
+    l.applyColumnState({
+      state: u,
       applyOrder: !0
     }), setTimeout(() => {
-      S.current = !1;
+      m.current = !1;
     }, 300);
-  }, [r, O]), _ = p((o) => {
-    C(o);
-  }, [C]), q = p((o) => {
-    d || C(o), x(o);
-  }, [d, C]);
-  return U ? /* @__PURE__ */ R("div", { className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ R(
-    H,
+  }, [l, E]), V = h((n) => {
+    p(n);
+  }, [p]), W = h((n) => {
+    b || p(n), N(n);
+  }, [b, p]);
+  return A ? /* @__PURE__ */ M("div", { className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ M(
+    B,
     {
-      items: F,
-      onChange: q,
-      onSubmit: _,
-      enableApplyDiscard: d,
-      enableSearch: I,
-      enableSelectAll: f,
+      items: j,
+      onChange: W,
+      onSubmit: V,
+      enableApplyDiscard: b,
+      enableSearch: R,
+      enableSelectAll: w,
       enableDragDrop: !0,
       enableCollapse: !0,
-      enableGlobalCollapse: v,
-      selectionMode: J.CASCADE_DOWN,
-      searchPlaceholder: h("dataTable.searchColumnsPlaceholder"),
+      enableGlobalCollapse: L,
+      selectionMode: H.CASCADE_DOWN,
+      searchPlaceholder: d("dataTable.searchColumnsPlaceholder"),
       className: "h-full"
     }
-  ) }) : /* @__PURE__ */ R("div", { className: "p-4 text-[13px] text-content-placeholder", children: h("dataTable.loadingColumns") });
+  ) }) : /* @__PURE__ */ M("div", { className: "p-4 text-[13px] text-content-placeholder", children: d("dataTable.loadingColumns") });
 };
 export {
   le as DataTableColumnList

package/dist/components/ui/data-table/data-table-column-state.d.ts

@@ -0,0 +1,16 @@
+import { ColumnState } from 'ag-grid-community';
+/**
+ * AG Grid’s documented flow for programmatic column changes is:
+ * `getColumnState()` → adjust the fields you care about (order, hide, pinned, …) →
+ * `applyColumnState({ state, applyOrder: true })`.
+ *
+ * The column-picker UI only edits visibility, pinning, and order for columns it lists.
+ * This helper merges that **partial** ordered slice with the existing full state so every
+ * column stays represented (sort index, width, flex, pivot state, etc.) and `applyOrder`
+ * receives a complete ordered array — as intended for `applyColumnState`, without relying
+ * on incidental merge behaviour inside the grid.
+ *
+ * Complexity: O(N) time, O(N) extra map/set memory for one pass over `prevState` and
+ * `partial` (unavoidable when applying global order for N columns).
+ */
+export declare function mergePartialOrderedColumnState(prevState: ColumnState[], partial: ColumnState[]): ColumnState[];

package/dist/components/ui/data-table/data-table-column-state.js

@@ -0,0 +1,29 @@
+function f(e, t) {
+  if (t.length === 0)
+    return e;
+  const c = /* @__PURE__ */ new Map();
+  for (let n = 0; n < e.length; n++) {
+    const o = e[n];
+    c.set(o.colId, o);
+  }
+  const l = /* @__PURE__ */ new Set();
+  for (let n = 0; n < t.length; n++)
+    l.add(t[n].colId);
+  let d = 0;
+  for (let n = 0; n < e.length; n++)
+    l.has(e[n].colId) || d++;
+  const s = new Array(t.length + d);
+  let g = 0;
+  for (let n = 0; n < t.length; n++) {
+    const o = t[n], i = c.get(o.colId);
+    s[g++] = i !== void 0 ? Object.assign({}, i, o) : Object.assign({}, o);
+  }
+  for (let n = 0; n < e.length; n++) {
+    const o = e[n];
+    l.has(o.colId) || (s[g++] = o);
+  }
+  return s;
+}
+export {
+  f as mergePartialOrderedColumnState
+};

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

@@ -1,6 +1,9 @@
 /**
- * Minimum height (px) for the `DataTableContent` region (grid + sheet portal host).
- * The scoped settings sheet portals into `absolute inset-0` over this area; the host must be
- * at least this tall or the overlay is clipped and cannot show a usable panel.
+ * 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).
  */
 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`). */
+export declare const TABLE_VIEWPORT_SHELL_EXPANDED_CLASS: "table-viewport-shell--expanded";

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

@@ -1,4 +1,5 @@
-const _ = 400;
+const _ = 400, E = "table-viewport-shell--expanded";
 export {
-  _ as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX
+  _ as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
+  E as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS
 };

package/dist/components/ui/data-table/data-table-view-menu.d.ts

@@ -0,0 +1,16 @@
+import { DropdownMenuTrigger } from '../dropdown-menu';
+import * as React from "react";
+export declare const DataTableViewMenuTrigger: {
+    ({ asChild, children, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuTrigger>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DataTableViewMenuContent: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-dropdown-menu').DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    portalled?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DataTableViewMenuSettingsItem: () => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableViewMenuDensity: () => import("react/jsx-runtime").JSX.Element;
+export interface DataTableViewMenuViewportExpandProps {
+    expanded: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+}
+export declare const DataTableViewMenuViewportExpand: ({ expanded, onExpandedChange, }: DataTableViewMenuViewportExpandProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/data-table/data-table-view-menu.js

@@ -0,0 +1,133 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import * as p from "react";
+import { DropdownMenuContent as m, DropdownMenuSub as d, DropdownMenuSubTrigger as u, DropdownMenuSubContent as g, DropdownMenuRadioGroup as f, DropdownMenuRadioItem as l, DropdownMenuItem as c, DropdownMenuTrigger as h } from "../dropdown-menu.js";
+import { Button as x } from "../button.js";
+import { cn as b } from "../../../lib/utils.js";
+import { Density as T, Stack as D, StackCompact as N, StackComfort as w, Settings as C, ThreeDots as M, Collapse as S, Expand as v } from "../../../icons/index.js";
+import { useDataTable as P } from "./data-table-context.js";
+import { DataTableSheetTrigger as y } from "./data-table-sheet.js";
+import { useImpactNovaI18n as r } from "../../../i18n/ImpactNovaI18nContext.js";
+const k = ({
+  asChild: a,
+  children: n,
+  ...s
+}) => {
+  const { t: e } = r(), i = a ?? !!n;
+  return /* @__PURE__ */ t(h, { asChild: i, ...s, children: i ? n : /* @__PURE__ */ o(x, { variant: "secondary", size: "icon", "aria-label": e("dataTable.more"), children: [
+    /* @__PURE__ */ t(M, { size: "sm" }),
+    /* @__PURE__ */ t("span", { className: "sr-only", children: e("dataTable.openMenu") })
+  ] }) });
+};
+k.displayName = "DataTableViewMenuTrigger";
+const z = p.forwardRef(({ className: a, align: n = "end", ...s }, e) => /* @__PURE__ */ t(
+  m,
+  {
+    ref: e,
+    align: n,
+    className: b("w-[240px] flex flex-col gap-[2px]", a),
+    ...s
+  }
+));
+z.displayName = "DataTableViewMenuContent";
+const G = () => {
+  const { t: a } = r();
+  return /* @__PURE__ */ t(y, { asChild: !0, children: /* @__PURE__ */ t(
+    c,
+    {
+      className: "flex cursor-pointer gap-2",
+      onClick: (n) => n.stopPropagation(),
+      onSelect: (n) => n.stopPropagation(),
+      children: /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ t(C, { size: "sm", className: "text-content-muted" }),
+        /* @__PURE__ */ t("span", { children: a("dataTable.tableSettings") })
+      ] })
+    }
+  ) });
+}, q = () => {
+  const { t: a } = r(), { rowHeight: n, setRowHeight: s } = P();
+  return /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ o(
+      u,
+      {
+        className: "flex items-center gap-2 cursor-pointer",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ t(T, { size: "sm", className: "text-content-muted" }),
+          /* @__PURE__ */ t("span", { children: a("dataTable.contentDensity") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(g, { className: "w-[190px]", children: /* @__PURE__ */ o(
+      f,
+      {
+        value: n,
+        onValueChange: (e) => s(e),
+        className: "flex flex-col gap-0.5",
+        children: [
+          /* @__PURE__ */ t(
+            l,
+            {
+              value: "default",
+              onClick: (e) => e.stopPropagation(),
+              onSelect: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ t(D, { size: "sm", className: "text-content-muted" }),
+                a("dataTable.densityDefault")
+              ] })
+            }
+          ),
+          /* @__PURE__ */ t(
+            l,
+            {
+              value: "compact",
+              onClick: (e) => e.stopPropagation(),
+              onSelect: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ t(N, { size: "sm", className: "text-content-muted" }),
+                a("dataTable.densityCompact")
+              ] })
+            }
+          ),
+          /* @__PURE__ */ t(
+            l,
+            {
+              value: "comfort",
+              onClick: (e) => e.stopPropagation(),
+              onSelect: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ t(w, { size: "sm", className: "text-content-muted" }),
+                a("dataTable.densityComfort")
+              ] })
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}, F = ({
+  expanded: a,
+  onExpandedChange: n
+}) => {
+  const { t: s } = r();
+  return /* @__PURE__ */ t(
+    c,
+    {
+      className: "flex cursor-pointer gap-2",
+      onClick: (e) => e.stopPropagation(),
+      onSelect: (e) => {
+        e.stopPropagation(), n(!a);
+      },
+      children: /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+        a ? /* @__PURE__ */ t(S, { size: "sm", className: "text-content-muted" }) : /* @__PURE__ */ t(v, { size: "sm", className: "text-content-muted" }),
+        /* @__PURE__ */ t("span", { children: s(a ? "dataTable.tableCollapse" : "dataTable.tableExpand") })
+      ] })
+    }
+  );
+};
+export {
+  z as DataTableViewMenuContent,
+  q as DataTableViewMenuDensity,
+  G as DataTableViewMenuSettingsItem,
+  k as DataTableViewMenuTrigger,
+  F as DataTableViewMenuViewportExpand
+};

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

@@ -1,6 +1,6 @@
 import { jsx as c, jsxs as C } from "react/jsx-runtime";
-import { useState as s, useRef as E, useCallback as A, useMemo as H, useEffect as _ } from "react";
-import { AgGridWrapper as O } from "../ag-grid-react/index.js";
+import { useState as s, useRef as O, useCallback as A, useMemo as H, useEffect as _ } from "react";
+import { AgGridWrapper as E } from "../ag-grid-react/index.js";
 import { cn as y } from "../../../lib/utils.js";
 import { DataTableContext as D, useDataTable as P } from "./data-table-context.js";
 import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as F } from "./data-table-constants.js";
@@ -27,15 +27,15 @@ const R = {
   children: o,
   className: e
 }) => {
-  const [t, d] = s(null), [r, u] = s(null), [n, p] = s("medium"), [f, h] = s("full"), [a, m] = s("default"), [g, x] = s(!1), l = E(0), T = A((S) => {
-    l.current = Math.max(0, l.current + S), x(l.current > 0);
-  }, []), b = A((S) => {
-    d(S);
+  const [t, d] = s(null), [r, u] = s(null), [i, p] = s("medium"), [f, h] = s("full"), [a, m] = s("default"), [g, x] = s(!1), l = O(0), T = A((n) => {
+    l.current = Math.max(0, l.current + n), x(l.current > 0);
+  }, []), b = A((n) => {
+    d(n);
   }, []), v = {
     small: "12px",
     medium: "14px",
     large: "16px"
-  }[n], i = `${R[a]}px`;
+  }[i], S = `${R[a]}px`;
   return /* @__PURE__ */ c(D.Provider, { value: {
     gridApi: t,
     registerApi: b,
@@ -43,7 +43,7 @@ const R = {
     setSheetTarget: u,
     scopedSheetOpen: g,
     registerScopedSheetDepth: T,
-    fontSize: n,
+    fontSize: i,
     setFontSize: p,
     numericFormat: f,
     setNumericFormat: h,
@@ -56,7 +56,7 @@ const R = {
       className: y("flex flex-col w-full min-h-0 rounded-[inherit]", e),
       style: {
         "--ag-font-size": v,
-        "--ag-row-height": i
+        "--ag-row-height": S
       },
       children: o
     }
@@ -74,24 +74,32 @@ function X(o) {
     rowHeight: d,
     gridApi: r,
     scopedSheetOpen: u,
-    numericFormat: n
-  } = P(), { className: p, onGridReady: f, rowHeight: h, context: a, columnDefs: m, ...g } = o, x = R[d], l = h ?? x, T = H(() => G(m), [m]), b = H(() => ({
+    numericFormat: i
+  } = P(), {
+    className: p,
+    onGridReady: f,
+    rowHeight: h,
+    context: a,
+    columnDefs: m,
+    maintainColumnOrder: g = !0,
+    ...x
+  } = o, l = R[d], T = h ?? l, b = H(() => G(m), [m]), v = H(() => ({
     ...a,
-    formatType: w[n]
-  }), [a, n]);
+    formatType: w[i]
+  }), [a, i]);
   _(() => {
     r?.resetRowHeights();
   }, [d, r]), _(() => {
     if (r) {
-      const i = r.getGridOption("context") || {};
+      const n = r.getGridOption("context") || {};
       r.setGridOption("context", {
-        ...i,
-        formatType: w[n]
+        ...n,
+        formatType: w[i]
       }), r.refreshCells({ force: !0 });
     }
-  }, [n, r]);
-  const v = (i) => {
-    e(i.api), f?.(i);
+  }, [i, r]);
+  const S = (n) => {
+    e(n.api), f?.(n);
   };
   return /* @__PURE__ */ C(
     "div",
@@ -100,23 +108,24 @@ function X(o) {
         "relative flex-1 min-h-0 w-full bg-canvas-elevated rounded-b-[inherit] grid-rounded-bottom",
         p
       ),
-      style: u ? { minHeight: F } : void 0,
       children: [
         /* @__PURE__ */ c(
-          O,
+          E,
           {
-            ...g,
-            columnDefs: T,
-            rowHeight: l,
-            onGridReady: v,
-            context: b
+            ...x,
+            columnDefs: b,
+            rowHeight: T,
+            onGridReady: S,
+            context: v,
+            maintainColumnOrder: g
           }
         ),
         /* @__PURE__ */ c(
           "div",
           {
             ref: t,
-            className: "absolute inset-0 pointer-events-none z-[39] flex overflow-x-hidden overflow-y-visible"
+            className: "absolute inset-0 pointer-events-none z-[39] flex overflow-x-hidden overflow-y-visible",
+            style: u ? { minHeight: F } : void 0
           }
         )
       ]

package/dist/components/ui/data-table/index.d.ts

@@ -4,4 +4,4 @@ export * from './data-table-column-list';
 export * from './data-table-context';
 export * from './data-table-format-options';
 export * from './data-table-sheet';
-export * from './data-table-view-options';
+export * from './data-table-view-menu';