impact-nova 2.0.9 → 2.1.0-alpha.2

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

@@ -0,0 +1,288 @@
+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
+}) => {
+  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
+        }
+      } : 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,
+    {
+      items: X,
+      onChange: re,
+      onSubmit: ne,
+      renderLabelExtras: le,
+      renderActions: oe,
+      enableApplyDiscard: k,
+      enableSearch: P,
+      enableSelectAll: g,
+      enableDragDrop: !0,
+      enableCollapse: !0,
+      enableGlobalCollapse: w,
+      selectionMode: ue.CASCADE_DOWN,
+      searchPlaceholder: G("dataTable.searchColumnsPlaceholder"),
+      className: "h-full",
+      initialCollapsedItems: V.current,
+      onCollapseChange: (n) => {
+        V.current = n;
+      }
+    },
+    B ? "sync-a" : "sync-b"
+  ) }) : /* @__PURE__ */ S("div", { className: "p-4 text-[13px] text-content-placeholder", children: G("dataTable.loadingColumns") });
+};
+export {
+  xe as DataTableColumnList
+};

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

@@ -0,0 +1,30 @@
+import { GridApi } from 'ag-grid-community';
+export type DataTableFontSize = "small" | "medium" | "large";
+export type DataTableNumericFormat = "full" | "k" | "m" | "b" | "full_precision";
+export type DataTableRowHeight = "default" | "compact" | "comfort";
+export interface DataTableContextValue {
+    gridApi: GridApi | null;
+    registerApi: (api: GridApi) => void;
+    /** Call `+1` when a sheet opens, `-1` when it closes or unmounts (supports multiple sheets). */
+    registerScopedSheetDepth: (delta: 1 | -1) => void;
+    fontSize: DataTableFontSize;
+    setFontSize: (size: DataTableFontSize) => void;
+    numericFormat: DataTableNumericFormat;
+    setNumericFormat: (format: DataTableNumericFormat) => void;
+    rowHeight: DataTableRowHeight;
+    setRowHeight: (height: DataTableRowHeight) => void;
+}
+export declare const DataTableContext: import('react').Context<DataTableContextValue | 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 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-format-options.js

@@ -0,0 +1,78 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useDataTable as d } from "./data-table-context.js";
+import { RadioGroup as o, RadioGroupItem as l } from "../../forms/radio-group/radio-group.js";
+import { Label as n } from "../../forms/label/label.js";
+import { useImpactNovaI18n as u } from "../../../i18n/use-impact-nova-i18n.js";
+const v = () => {
+  const { t: a } = u(), {
+    fontSize: i,
+    setFontSize: c,
+    numericFormat: m,
+    setNumericFormat: s
+  } = d();
+  return /* @__PURE__ */ t("div", { className: "flex flex-col gap-6 px-1 py-1", "data-component": "data-table-format-options", children: [
+    /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e("h3", { className: "text-[12px] font-semibold text-content-icon", children: a("dataTable.fontSize") }),
+      /* @__PURE__ */ t(
+        o,
+        {
+          value: i,
+          orientation: "vertical",
+          onValueChange: (r) => c(r),
+          className: "flex flex-col",
+          children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "small", id: "font-small" }),
+              /* @__PURE__ */ e(n, { htmlFor: "font-small", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.fontSmall") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "medium", id: "font-medium" }),
+              /* @__PURE__ */ e(n, { htmlFor: "font-medium", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.fontMediumDefault") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "large", id: "font-large" }),
+              /* @__PURE__ */ e(n, { htmlFor: "font-large", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.fontLarge") })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e("h3", { className: "text-[12px] font-semibold text-content-icon", children: a("dataTable.numericValues") }),
+      /* @__PURE__ */ t(
+        o,
+        {
+          value: m,
+          orientation: "vertical",
+          onValueChange: (r) => s(r),
+          className: "flex flex-col",
+          children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "full", id: "num-full" }),
+              /* @__PURE__ */ e(n, { htmlFor: "num-full", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.numericFull") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "k", id: "num-k" }),
+              /* @__PURE__ */ e(n, { htmlFor: "num-k", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.numericK") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "m", id: "num-m" }),
+              /* @__PURE__ */ e(n, { htmlFor: "num-m", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.numericM") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "b", id: "num-b" }),
+              /* @__PURE__ */ e(n, { htmlFor: "num-b", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.numericB") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "full_precision", id: "num-full-precision" }),
+              /* @__PURE__ */ e(n, { htmlFor: "num-full-precision", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.numericFullPrecision") })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  v as DataTableFormatOptions
+};

package/dist/components/data/data-table/data-table-saved-views.d.ts

@@ -0,0 +1,2 @@
+import { DataTableSavedViewsProps } from './data-table-saved-views.types';
+export declare const DataTableSavedViews: ({ isSaveViewEnabled, views, activeViewSummary, viewTypeOptions, menuOpen: menuOpenControlled, defaultMenuOpen, onMenuOpenChange, onSearch, isLoadingViews, customListContent, disableApply, className, onSaveViewClick, onApply, onCancel, onEditView, onDeleteView, onSetDefaultView, }: DataTableSavedViewsProps) => import("react/jsx-runtime").JSX.Element | null;