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

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

@@ -1,288 +1,85 @@
-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();
-  }
-  return P.reverse(), P;
-}
-const be = 300, K = 100, xe = ({
-  enableApplyDiscard: k = !1,
-  showSearch: P = !0,
-  showSelectAll: g = !0,
-  showCollapse: w = !0
+import { jsxs as A, jsx as n } from "react/jsx-runtime";
+import { useRef as T, useState as z, useCallback as o } from "react";
+import { useDataTable as D } from "./data-table-context.js";
+import { NestedList as F } from "../nested-list/nested-list.js";
+import { SelectionMode as P } from "../nested-list/nested-list.types.js";
+import { useImpactNovaI18n as R } from "../../../i18n/use-impact-nova-i18n.js";
+import { PinSwitch as k } from "./pin-switch.js";
+import { ColumnIndicator as c } from "./column-indicator.js";
+import { IndicatorLegend as j } from "./indicator-legend.js";
+import { useDataTableColumnListSync as E } from "./use-data-table-column-list-sync.js";
+const Q = ({
+  enableApplyDiscard: a = !1,
+  showSearch: u = !0,
+  showSelectAll: d = !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");
-    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,
-        checked: !0,
-        children: [],
-        category: "group"
-      };
-      return o.push(D), e.set(v, { list: o, node: D }), D;
-    };
-    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");
-      if (a === "") return;
-      if (a == null) {
-        const I = o.getColDef();
-        if (I.headerName === "") return;
-        a = I.headerName || I.field || r.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,
-        label: a,
-        checked: b,
-        data: {
-          hasSortApplied: v,
-          hasFilterApplied: A,
-          pinned: _
-        }
-      };
-      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);
-      } else
-        j.push(R);
-    });
-    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;
-    };
-    d(s), d(c);
-    const E = [
-      {
-        id: "root-frozen",
-        label: G("dataTable.frozenColumns"),
-        checked: L > 0 && u === L,
-        children: s,
-        category: "structure",
-        isDragDisabled: !0
-      },
-      {
-        id: "root-scrollable",
-        label: G("dataTable.scrollableColumns"),
-        checked: O > 0 && C === O,
-        children: c,
-        category: "structure",
-        isDragDisabled: !0
-      }
-    ];
-    $(E), ee(!0);
-  }, [l, G]);
-  J(() => {
-    if (!l) return;
-    const n = setTimeout(() => x(), 0), i = [
-      "columnVisible",
-      "columnPinned",
-      "columnMoved",
-      "newColumnsLoaded",
-      "gridReady",
-      "columnGroupOpened",
-      "columnRowGroupChanged",
-      "columnPivotModeChanged",
-      "columnEverythingChanged",
-      "dragStopped",
-      "columnValueChanged",
-      "displayedColumnsChanged",
-      "sortChanged",
-      "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);
-    };
-    if (!l.isDestroyed()) {
-      const c = pe(l, i, s);
-      return () => {
-        clearTimeout(n), t && clearTimeout(t), c();
-      };
-    }
-    return () => {
-      clearTimeout(n), 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);
-    });
-    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;
-        }
-        if (e.id === "root-scrollable") {
-          e.children && t(e.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)) {
-          let p;
-          if (c === null)
-            p = null;
-          else {
-            const h = e.data?.pinned;
-            p = h === "left" || h === "right" ? h : c;
-          }
-          i.push({
-            colId: e.id,
-            pinned: p,
-            hide: !e.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;
-    }
-    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();
-    };
-    if (y.size === 0) {
-      setTimeout(f, K);
-      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;
-      }).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
-          );
-          l.applyColumnState({ state: E, applyOrder: !0 });
-        }
-        setTimeout(f, K);
-      }
-    }), 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,
-        data: {
-          ...e.data,
-          pinned: i
+  const { gridApi: p } = D(), { t } = R(), f = T({}), [h, C] = z({}), {
+    items: b,
+    isReady: g,
+    externalSyncKey: S,
+    listWrapperRef: x,
+    handleChange: s,
+    handleSubmit: I,
+    handlePinChange: i
+  } = E({
+    gridApi: p,
+    frozenColumnsLabel: t("dataTable.frozenColumns"),
+    scrollableColumnsLabel: t("dataTable.scrollableColumns")
+  }), L = o(
+    (e) => {
+      s(e, a);
+    },
+    [a, s]
+  ), N = o(
+    (e, r) => {
+      if (!r.isLeaf) return null;
+      const l = e.data;
+      return !l?.hasSortApplied && !l?.hasFilterApplied ? null : /* @__PURE__ */ A("span", { className: "inline-flex items-center gap-1 ml-1.5 shrink-0", children: [
+        l?.hasSortApplied && /* @__PURE__ */ n(c, { type: "sort" }),
+        l?.hasFilterApplied && /* @__PURE__ */ n(c, { type: "filter" })
+      ] });
+    },
+    []
+  ), v = o(
+    (e, r) => {
+      const l = e.data;
+      return e.category === "structure" ? e.id !== "root-frozen" ? null : /* @__PURE__ */ n(j, {}) : !r.isLeaf || !(l?.pinned === "left" || l?.pinned === "right") ? null : /* @__PURE__ */ n(
+        k,
+        {
+          value: l?.pinned ?? null,
+          onChange: (y) => i(e.id, y),
+          className: "shrink-0"
         }
-      } : e.children ? {
-        ...e,
-        children: s(e.children)
-      } : e);
-      return s(t);
-    }), l && l.applyColumnState({
-      state: [{ colId: n, pinned: i }]
-    });
-  }, [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" })
-    ] });
-  }, []), 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,
-      {
-        value: t?.pinned ?? null,
-        onChange: (c) => H(n.id, c),
-        className: "shrink-0"
-      }
-    );
-  }, [H]);
-  return Z ? /* @__PURE__ */ S("div", { ref: U, className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ S(
-    ae,
+      );
+    },
+    [i]
+  );
+  return g ? /* @__PURE__ */ n("div", { ref: x, className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ n(
+    F,
     {
-      items: X,
-      onChange: re,
-      onSubmit: ne,
-      renderLabelExtras: le,
-      renderActions: oe,
-      enableApplyDiscard: k,
-      enableSearch: P,
-      enableSelectAll: g,
+      items: b,
+      onChange: L,
+      onSubmit: I,
+      renderLabelExtras: N,
+      renderActions: v,
+      enableApplyDiscard: a,
+      enableSearch: u,
+      enableSelectAll: d,
       enableDragDrop: !0,
       enableCollapse: !0,
-      enableGlobalCollapse: w,
-      selectionMode: ue.CASCADE_DOWN,
-      searchPlaceholder: G("dataTable.searchColumnsPlaceholder"),
+      enableGlobalCollapse: m,
+      selectionMode: P.CASCADE_DOWN,
+      searchPlaceholder: t("dataTable.searchColumnsPlaceholder"),
       className: "h-full",
-      initialCollapsedItems: V.current,
-      onCollapseChange: (n) => {
-        V.current = n;
+      initialCollapsedItems: h,
+      onCollapseChange: (e) => {
+        f.current = e, C(e);
       }
     },
-    B ? "sync-a" : "sync-b"
-  ) }) : /* @__PURE__ */ S("div", { className: "p-4 text-[13px] text-content-placeholder", children: G("dataTable.loadingColumns") });
+    S ? "sync-a" : "sync-b"
+  ) }) : /* @__PURE__ */ n("div", { className: "p-4 text-[13px] text-content-placeholder", children: t("dataTable.loadingColumns") });
 };
 export {
-  xe as DataTableColumnList
+  Q 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
 };

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

@@ -26,8 +26,8 @@ const Ae = ["default", "active", "system"], Ye = ({
   isLoadingViews: L = !1,
   customListContent: _,
   disableApply: ie = !1,
-  className: le,
-  onSaveViewClick: re,
+  className: re,
+  onSaveViewClick: le,
   onApply: se,
   onCancel: oe,
   onEditView: de,
@@ -55,26 +55,26 @@ const Ae = ["default", "active", "system"], Ye = ({
   n.useEffect(() => {
     const e = u && !K.current;
     if (K.current = u, e) {
-      const l = o.find((c) => c.isActive);
-      M(l?.id ?? null), S("All"), z(""), D("");
+      const r = o.find((c) => c.isActive);
+      M(r?.id ?? null), S("All"), z(""), D("");
     }
   }, [u, o]);
   const g = n.useMemo(() => v === "All" ? o : o.filter((e) => e.viewType === v), [o, v]), f = w.trim().toLowerCase(), T = n.useCallback(
-    (e, l) => l ? (e.viewName ?? "").trim().toLowerCase().includes(l) : !0,
+    (e, r) => r ? (e.viewName ?? "").trim().toLowerCase().includes(r) : !0,
     []
   ), A = n.useMemo(() => {
     let e = g;
-    return f && (e = e.filter((l) => T(l, f))), e;
+    return f && (e = e.filter((r) => T(r, f))), e;
   }, [g, f, T]), h = n.useMemo(() => {
     if (g.length === 0) return [];
     const e = Object.groupBy(g, Me);
-    return Ae.flatMap((l) => {
-      const c = e[l]?.[0];
+    return Ae.flatMap((r) => {
+      const c = e[r]?.[0];
       return c ? f && !T(c, f) ? [] : [c] : [];
     });
   }, [g, f, T]), P = n.useMemo(() => {
-    const e = new Set(h.map((l) => l.id));
-    return A.filter((l) => !e.has(l.id));
+    const e = new Set(h.map((r) => r.id));
+    return A.filter((r) => !e.has(r.id));
   }, [A, h]), G = N === null ? null : o.find((e) => e.id === N) ?? null, fe = () => {
     se?.(G, { activeView: d }), p(!1);
   }, he = () => {
@@ -84,23 +84,23 @@ const Ae = ["default", "active", "system"], Ye = ({
   };
   if (!b)
     return null;
-  const ve = o.length > 0, H = (e, l, c) => {
-    const O = N === e.id, s = me === e.id, J = l === "priority" && !!e.isActive, xe = l === "list" && !!e.isActive;
+  const ve = o.length > 0, H = (e, r, c) => {
+    const O = N === e.id, s = me === e.id, J = r === "priority" && !!e.isActive, xe = r === "list" && !!e.isActive;
     return /* @__PURE__ */ i(
       "div",
       {
         tabIndex: 0,
         className: k(
           "mb-1 flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-left text-sm font-medium font-['Manrope'] transition-all duration-300 relative overflow-hidden",
-          !s && "hover:bg-muted",
+          !s && "hover:bg-canvas-muted",
           !s && J && !O && "bg-primary/10 dark:bg-primary/15",
           !s && O && "bg-badge-info-muted text-badge-info-foreground",
           !s && !O && !J && "text-foreground",
           s && "pointer-events-none"
         ),
         onClick: () => !s && M(e.id),
-        onKeyDown: (r) => {
-          (r.key === "Enter" || r.key === " ") && (r.preventDefault(), s || M(e.id));
+        onKeyDown: (l) => {
+          (l.key === "Enter" || l.key === " ") && (l.preventDefault(), s || M(e.id));
         },
         children: [
           s && /* @__PURE__ */ t(
@@ -135,8 +135,8 @@ const Ae = ["default", "active", "system"], Ye = ({
                 size: "iconSm",
                 className: "text-foreground hover:text-content-charcoal",
                 "aria-label": a("dataTable.savedViewsEdit"),
-                onClick: (r) => {
-                  r.stopPropagation(), r.preventDefault(), p(!1), de?.(e, { activeView: d });
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), p(!1), de?.(e, { activeView: d });
                 },
                 children: /* @__PURE__ */ t(Ne, { className: "size-3.5" })
               }
@@ -149,8 +149,8 @@ const Ae = ["default", "active", "system"], Ye = ({
                 size: "iconSm",
                 className: "text-foreground hover:text-destructive",
                 "aria-label": a("dataTable.savedViewsDelete"),
-                onClick: (r) => {
-                  r.stopPropagation(), r.preventDefault(), p(!1), $(e);
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), p(!1), $(e);
                 },
                 children: /* @__PURE__ */ t(Te, { className: "size-3.5" })
               }
@@ -164,8 +164,8 @@ const Ae = ["default", "active", "system"], Ye = ({
                 className: "text-yellow-500 hover:text-yellow-600 disabled:opacity-50",
                 "aria-label": a("dataTable.savedViewsDefaultAction"),
                 disabled: s,
-                onClick: (r) => {
-                  r.stopPropagation(), r.preventDefault(), s || (y(e.id), setTimeout(() => y(null), 1200), U?.(e, { activeView: d }));
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), s || (y(e.id), setTimeout(() => y(null), 1200), U?.(e, { activeView: d }));
                 },
                 children: s ? /* @__PURE__ */ t("div", { className: "size-3.5 animate-spin motion-reduce:animate-none rounded-full border-2 border-yellow-500 border-t-transparent" }) : /* @__PURE__ */ t(I, { className: "size-3.5 fill-current text-yellow-500" })
               }
@@ -178,8 +178,8 @@ const Ae = ["default", "active", "system"], Ye = ({
                 className: "text-yellow-500 hover:text-yellow-600 disabled:opacity-50",
                 "aria-label": a("dataTable.savedViewsSetDefault"),
                 disabled: s,
-                onClick: (r) => {
-                  r.stopPropagation(), r.preventDefault(), s || (y(e.id), setTimeout(() => y(null), 1200), U?.(e, { activeView: d }));
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), s || (y(e.id), setTimeout(() => y(null), 1200), U?.(e, { activeView: d }));
                 },
                 children: s ? /* @__PURE__ */ t("div", { className: "size-3.5 animate-spin motion-reduce:animate-none rounded-full border-2 border-yellow-500 border-t-transparent" }) : /* @__PURE__ */ t(I, { className: "size-3.5 text-yellow-500" })
               }
@@ -197,7 +197,7 @@ const Ae = ["default", "active", "system"], Ye = ({
         "data-component": "data-table-saved-views",
         className: k(
           "mb-2 mx-4 flex min-w-0 flex-nowrap items-center justify-between gap-2 rounded-lg bg-feedback-success-surface px-2 py-3",
-          le
+          re
         ),
         children: [
           L ? /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: [
@@ -302,7 +302,7 @@ const Ae = ["default", "active", "system"], Ye = ({
                       prefix: /* @__PURE__ */ t(
                         ye,
                         {
-                          className: "size-4 shrink-0 text-content-muted",
+                          className: "size-4 shrink-0 text-secondary-foreground",
                           "aria-hidden": !0
                         }
                       ),
@@ -369,7 +369,7 @@ const Ae = ["default", "active", "system"], Ye = ({
               size: "sm",
               className: "shrink-0 font-['Manrope']",
               onClick: () => {
-                p(!1), re?.({ activeView: d });
+                p(!1), le?.({ activeView: d });
               },
               children: a("dataTable.savedViewsSave")
             }

package/dist/components/data/data-table/data-table-sheet-portal-store.d.ts

@@ -0,0 +1,13 @@
+export interface DataTableSheetPortalSnapshot {
+    sheetTarget: HTMLDivElement | null;
+    scopedSheetOpen: boolean;
+}
+export interface DataTableSheetPortalStore {
+    getSnapshot: () => DataTableSheetPortalSnapshot;
+    subscribe: (listener: () => void) => () => void;
+    setSheetTarget: (sheetTarget: HTMLDivElement | null) => void;
+    registerScopedSheetDepth: (delta: 1 | -1) => void;
+    reset: () => void;
+}
+export declare function createDataTableSheetPortalStore(): DataTableSheetPortalStore;
+export declare function useDataTableSheetPortalSnapshot(store: DataTableSheetPortalStore): DataTableSheetPortalSnapshot;

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

@@ -0,0 +1,36 @@
+import { useSyncExternalStore as o } from "react";
+function p() {
+  let t = 0, n = {
+    sheetTarget: null,
+    scopedSheetOpen: !1
+  };
+  const r = /* @__PURE__ */ new Set(), a = () => {
+    r.forEach((e) => e());
+  };
+  return {
+    getSnapshot: () => n,
+    subscribe: (e) => (r.add(e), () => r.delete(e)),
+    setSheetTarget: (e) => {
+      n.sheetTarget !== e && (n = { ...n, sheetTarget: e }, a());
+    },
+    registerScopedSheetDepth: (e) => {
+      t = Math.max(0, t + e);
+      const s = t > 0;
+      n.scopedSheetOpen !== s && (n = { ...n, scopedSheetOpen: s }, a());
+    },
+    reset: () => {
+      t = 0, n = { sheetTarget: null, scopedSheetOpen: !1 }, a();
+    }
+  };
+}
+function S(t) {
+  return o(
+    t.subscribe,
+    t.getSnapshot,
+    t.getSnapshot
+  );
+}
+export {
+  p as createDataTableSheetPortalStore,
+  S as useDataTableSheetPortalSnapshot
+};

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

@@ -1,10 +1,7 @@
 import { default as React } from 'react';
-export declare const DataTableSheet: ({ children, defaultOpen, open: controlledOpen, onOpenChange, }: {
-    children: React.ReactNode;
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+import { DataTableSheetProps } from './data-table.types';
+export type { DataTableSheetProps } from './data-table.types';
+export declare const DataTableSheet: ({ children, defaultOpen, open: controlledOpen, onOpenChange, }: DataTableSheetProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DataTableSheetTrigger: ({ children, asChild, }: {
     children: React.ReactNode;
     asChild?: boolean;