impact-nova 1.3.0 → 1.5.2

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

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

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

@@ -1,67 +1,68 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import "react";
-import { useDataTable as c } from "./data-table-context.js";
-import { RadioGroup as s, RadioGroupItem as t } from "../radio-group.js";
-import { Label as a } from "../label.js";
-const h = () => {
-  const {
-    fontSize: n,
-    setFontSize: m,
+import { useDataTable as d } from "./data-table-context.js";
+import { RadioGroup as m, RadioGroupItem as l } from "../radio-group.js";
+import { Label as r } from "../label.js";
+import { useImpactNovaI18n as x } from "../../../i18n/ImpactNovaI18nContext.js";
+const b = () => {
+  const { t } = x(), {
+    fontSize: s,
+    setFontSize: o,
     numericFormat: i,
-    setNumericFormat: o
-  } = c();
-  return /* @__PURE__ */ l("div", { className: "flex flex-col gap-6 px-1 py-1", children: [
-    /* @__PURE__ */ l("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ e("h3", { className: "text-[12px] font-semibold text-[#8C8C8C]", children: "Font size" }),
-      /* @__PURE__ */ l(
-        s,
+    setNumericFormat: c
+  } = d();
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-6 px-1 py-1", children: [
+    /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e("h3", { className: "text-[12px] font-semibold text-[#8C8C8C]", children: t("dataTable.fontSize") }),
+      /* @__PURE__ */ a(
+        m,
         {
-          value: n,
+          value: s,
           orientation: "vertical",
-          onValueChange: (r) => m(r),
+          onValueChange: (n) => o(n),
           className: "flex flex-col",
           children: [
-            /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ e(t, { value: "small", id: "font-small" }),
-              /* @__PURE__ */ e(a, { htmlFor: "font-small", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: "Small" })
+            /* @__PURE__ */ a("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "small", id: "font-small" }),
+              /* @__PURE__ */ e(r, { htmlFor: "font-small", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: t("dataTable.fontSmall") })
             ] }),
-            /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ e(t, { value: "medium", id: "font-medium" }),
-              /* @__PURE__ */ e(a, { htmlFor: "font-medium", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: "Medium (default)" })
+            /* @__PURE__ */ a("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "medium", id: "font-medium" }),
+              /* @__PURE__ */ e(r, { htmlFor: "font-medium", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: t("dataTable.fontMediumDefault") })
             ] }),
-            /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ e(t, { value: "large", id: "font-large" }),
-              /* @__PURE__ */ e(a, { htmlFor: "font-large", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: "Large" })
+            /* @__PURE__ */ a("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "large", id: "font-large" }),
+              /* @__PURE__ */ e(r, { htmlFor: "font-large", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: t("dataTable.fontLarge") })
             ] })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ l("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ e("h3", { className: "text-[12px] font-semibold text-[#8C8C8C]", children: "Numeric Values" }),
-      /* @__PURE__ */ l(
-        s,
+    /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e("h3", { className: "text-[12px] font-semibold text-[#8C8C8C]", children: t("dataTable.numericValues") }),
+      /* @__PURE__ */ a(
+        m,
         {
           value: i,
           orientation: "vertical",
-          onValueChange: (r) => o(r),
+          onValueChange: (n) => c(n),
           className: "flex flex-col",
           children: [
-            /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ e(t, { value: "full", id: "num-full" }),
-              /* @__PURE__ */ e(a, { htmlFor: "num-full", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: "Full Number" })
+            /* @__PURE__ */ a("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "full", id: "num-full" }),
+              /* @__PURE__ */ e(r, { htmlFor: "num-full", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: t("dataTable.numericFull") })
             ] }),
-            /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ e(t, { value: "k", id: "num-k" }),
-              /* @__PURE__ */ e(a, { htmlFor: "num-k", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: "In K (Thousands)" })
+            /* @__PURE__ */ a("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "k", id: "num-k" }),
+              /* @__PURE__ */ e(r, { htmlFor: "num-k", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: t("dataTable.numericK") })
             ] }),
-            /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ e(t, { value: "m", id: "num-m" }),
-              /* @__PURE__ */ e(a, { htmlFor: "num-m", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: "In M (Millions)" })
+            /* @__PURE__ */ a("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "m", id: "num-m" }),
+              /* @__PURE__ */ e(r, { htmlFor: "num-m", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: t("dataTable.numericM") })
             ] }),
-            /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ e(t, { value: "b", id: "num-b" }),
-              /* @__PURE__ */ e(a, { htmlFor: "num-b", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: "In B (Billions)" })
+            /* @__PURE__ */ a("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "b", id: "num-b" }),
+              /* @__PURE__ */ e(r, { htmlFor: "num-b", className: "font-normal text-[13px] text-slate-700 cursor-pointer", children: t("dataTable.numericB") })
             ] })
           ]
         }
@@ -70,5 +71,5 @@ const h = () => {
   ] });
 };
 export {
-  h as DataTableFormatOptions
+  b as DataTableFormatOptions
 };

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

@@ -1,86 +1,87 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
 import "react";
-import { DropdownMenu as c, DropdownMenuTrigger as p, DropdownMenuContent as m, DropdownMenuItem as d, DropdownMenuSub as u, DropdownMenuSubTrigger as g, DropdownMenuSubContent as h, DropdownMenuRadioGroup as f, DropdownMenuRadioItem as a } from "../dropdown-menu.js";
-import { Button as x } from "../button.js";
-import { ThreeDots as C, Settings as D, Density as N, Stack as w, StackCompact as S, StackComfort as M } from "../../../icons/index.js";
+import { DropdownMenu as p, DropdownMenuTrigger as m, DropdownMenuContent as d, DropdownMenuItem as u, DropdownMenuSub as g, DropdownMenuSubTrigger as h, DropdownMenuSubContent as f, DropdownMenuRadioGroup as x, DropdownMenuRadioItem as n } from "../dropdown-menu.js";
+import { Button as D } from "../button.js";
+import { ThreeDots as N, Settings as b, Density as w, Stack as C, StackCompact as T, StackComfort as S } from "../../../icons/index.js";
 import { useDataTable as v } from "./data-table-context.js";
-import { DataTableSheetTrigger as P } from "./data-table-sheet.js";
-const H = ({
-  enableTableSettings: n = !0,
+import { DataTableSheetTrigger as M } from "./data-table-sheet.js";
+import { useImpactNovaI18n as P } from "../../../i18n/ImpactNovaI18nContext.js";
+const B = ({
+  enableTableSettings: s = !0,
   enableContentDensity: r = !0,
-  trigger: s
+  trigger: l
 }) => {
-  const { rowHeight: i, setRowHeight: l } = v();
-  return /* @__PURE__ */ t(c, { children: [
-    /* @__PURE__ */ o(p, { asChild: !0, children: s || /* @__PURE__ */ t(x, { variant: "secondary", size: "icon", "aria-label": "More", children: [
-      /* @__PURE__ */ o(C, { size: "sm" }),
-      /* @__PURE__ */ o("span", { className: "sr-only", children: "Open menu" })
+  const { t: o } = P(), { rowHeight: i, setRowHeight: c } = v();
+  return /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ a(m, { asChild: !0, children: l || /* @__PURE__ */ t(D, { variant: "secondary", size: "icon", "aria-label": o("dataTable.more"), children: [
+      /* @__PURE__ */ a(N, { size: "sm" }),
+      /* @__PURE__ */ a("span", { className: "sr-only", children: o("dataTable.openMenu") })
     ] }) }),
-    /* @__PURE__ */ t(m, { align: "end", className: "w-[240px] flex flex-col gap-[2px]", children: [
-      n && /* @__PURE__ */ o(P, { asChild: !0, children: /* @__PURE__ */ o(
-        d,
+    /* @__PURE__ */ t(d, { align: "end", className: "w-[240px] flex flex-col gap-[2px]", children: [
+      s && /* @__PURE__ */ a(M, { asChild: !0, children: /* @__PURE__ */ a(
+        u,
         {
           className: "flex cursor-pointer gap-2",
           onClick: (e) => e.stopPropagation(),
           onSelect: (e) => e.stopPropagation(),
           children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ o(D, { size: "sm", className: "text-slate-500" }),
-            /* @__PURE__ */ o("span", { children: "Table Settings" })
+            /* @__PURE__ */ a(b, { size: "sm", className: "text-slate-500" }),
+            /* @__PURE__ */ a("span", { children: o("dataTable.tableSettings") })
           ] })
         }
       ) }),
-      r && /* @__PURE__ */ t(u, { children: [
+      r && /* @__PURE__ */ t(g, { children: [
         /* @__PURE__ */ t(
-          g,
+          h,
           {
             className: "flex items-center gap-2 cursor-pointer",
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ o(N, { size: "sm", className: "text-slate-500" }),
-              /* @__PURE__ */ o("span", { children: "Content density" })
+              /* @__PURE__ */ a(w, { size: "sm", className: "text-slate-500" }),
+              /* @__PURE__ */ a("span", { children: o("dataTable.contentDensity") })
             ]
           }
         ),
-        /* @__PURE__ */ o(h, { className: "w-[190px]", children: /* @__PURE__ */ t(
-          f,
+        /* @__PURE__ */ a(f, { className: "w-[190px]", children: /* @__PURE__ */ t(
+          x,
           {
             value: i,
-            onValueChange: (e) => l(e),
+            onValueChange: (e) => c(e),
             className: "flex flex-col gap-0.5",
             children: [
-              /* @__PURE__ */ o(
-                a,
+              /* @__PURE__ */ a(
+                n,
                 {
                   value: "default",
                   onClick: (e) => e.stopPropagation(),
                   onSelect: (e) => e.stopPropagation(),
                   children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ o(w, { size: "sm", className: "text-slate-500" }),
-                    "Default"
+                    /* @__PURE__ */ a(C, { size: "sm", className: "text-slate-500" }),
+                    o("dataTable.densityDefault")
                   ] })
                 }
               ),
-              /* @__PURE__ */ o(
-                a,
+              /* @__PURE__ */ a(
+                n,
                 {
                   value: "compact",
                   onClick: (e) => e.stopPropagation(),
                   onSelect: (e) => e.stopPropagation(),
                   children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ o(S, { size: "sm", className: "text-slate-500" }),
-                    "Compact"
+                    /* @__PURE__ */ a(T, { size: "sm", className: "text-slate-500" }),
+                    o("dataTable.densityCompact")
                   ] })
                 }
               ),
-              /* @__PURE__ */ o(
-                a,
+              /* @__PURE__ */ a(
+                n,
                 {
                   value: "comfort",
                   onClick: (e) => e.stopPropagation(),
                   onSelect: (e) => e.stopPropagation(),
                   children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ o(M, { size: "sm", className: "text-slate-500" }),
-                    "Comfort"
+                    /* @__PURE__ */ a(S, { size: "sm", className: "text-slate-500" }),
+                    o("dataTable.densityComfort")
                   ] })
                 }
               )
@@ -92,5 +93,5 @@ const H = ({
   ] });
 };
 export {
-  H as DataTableViewOptions
+  B as DataTableViewOptions
 };