impact-nova 1.7.39 → 1.7.41

package/dist/components/ui/ag-grid-react/index.js

@@ -13,13 +13,13 @@ import { AG_GRID_VALUE_FORMATTERS as ye } from "./value-formatters.js";
 /* empty css                */
 const be = re(() => import("./headers/advanced-filter/advanced-filter-dialog.js"));
 ie.registerModules([se, ce, ue]);
-const x = "
", T = "", H = (s) => {
+const x = "
", I = "", H = (s) => {
   if (!s) return;
   const r = s.cellRendererParams?.splits;
   if (Array.isArray(r) && r.length > 0) return r;
   const l = s.cellEditorParams?.splits;
   if (Array.isArray(l) && l.length > 0) return l;
-}, V = (s, r) => {
+}, _ = (s, r) => {
   const l = [];
   for (const g of r) {
     const f = g?.field?.split(".").pop();
@@ -44,7 +44,7 @@ const x = "
", T = "", H = (s) => {
     l.push("");
   }
   return l;
-}, _ = (s) => {
+}, V = (s) => {
   if (typeof navigator < "u" && navigator.clipboard?.writeText) {
     navigator.clipboard.writeText(s).catch(() => K(s));
     return;
@@ -69,7 +69,7 @@ function De({
   onGridReady: a,
   ...u
 }) {
-  const c = b(null), h = b(null), [F, w] = j(null), [I, E] = j(!1), [O, D] = j(null), [W, L] = j(!1), M = b(null), P = b(null), S = b(null), U = v(() => [], []), $ = C(() => ({
+  const c = b(null), h = b(null), [F, w] = j(null), [P, M] = j(!1), [O, D] = j(null), [W, L] = j(!1), S = b(null), T = b(null), E = b(null), U = v(() => [], []), $ = C(() => ({
     numericColumn: {
       cellClass: "ag-right-aligned-cell",
       headerClass: "ag-right-aligned-header",
@@ -102,10 +102,10 @@ function De({
       c.current.setGridOption("context", { ...e, activeSearchColumnId: null }), c.current.refreshHeader();
     },
     openAdvancedFilter: (e) => {
-      D(e || null), E(!0);
+      D(e || null), M(!0);
     },
     closeAdvancedFilter: () => {
-      E(!1), D(null);
+      M(!1), D(null);
     },
     applyAdvancedFilter: (e) => {
       if (!c.current) return;
@@ -113,17 +113,17 @@ function De({
       c.current.setFilterModel(t), c.current.onFilterChanged();
     },
     openMenu: (e, t, o = "column") => {
-      M.current = e, P.current = t, S.current = o, L(!0);
+      S.current = e, T.current = t, E.current = o, L(!0);
     },
     closeMenu: () => {
-      M.current = null, P.current = null, S.current = null, L(!1);
+      S.current = null, T.current = null, E.current = null, L(!1);
     },
     // Getters read from refs - O(1) per header, no memory allocation
     get activeMenuColumnId() {
-      return M.current;
+      return S.current;
     },
     get activeMenuVariant() {
-      return S.current;
+      return E.current;
     }
   }), []), q = v((e) => {
     c.current = e.api, w(e.api);
@@ -157,7 +157,7 @@ function De({
     suppressHeaderKeyboardEvent: (e) => {
       const { event: t } = e, o = t.target;
       if (o.tagName === "INPUT" || o.tagName === "TEXTAREA")
-        return !(t.key === "Enter" || t.key === "Escape" || t.key === "Tab");
+        return !(t.key === "Escape" || t.key === "Tab");
       if (t.key === "Enter" || t.key === " ") {
         const n = o.closest(".ag-header-cell");
         if (n) {
@@ -189,12 +189,12 @@ function De({
     if (t == null || typeof t != "object") return t;
     const o = H(e.column?.getColDef());
     if (o && o.length > 0) {
-      const n = V(t, o);
+      const n = _(t, o);
       if (o.length === 1) {
         const d = o[0]?.field?.split(".").pop(), y = d ? t[d] : void 0;
         return y && typeof y == "object" && "value" in y ? y.value ?? "" : n[0];
       }
-      return T + n.join(x);
+      return I + n.join(x);
     }
     const i = Object.entries(t).map(([, n]) => n && typeof n == "object" && "value" in n ? n.value : typeof n != "object" && typeof n < "u" ? n : null).filter((n) => n != null);
     return i.length === 0 ? "" : i.length === 1 ? i[0] : i.join(x);
@@ -211,8 +211,8 @@ function De({
     return e.value;
   }, []), Y = v((e) => {
     const t = e?.data ?? "";
-    if (!t.includes(x) && !t.includes(T)) {
-      _(t);
+    if (!t.includes(x) && !t.includes(I)) {
+      V(t);
       return;
     }
     const o = [], i = t.split(`
@@ -223,7 +223,7 @@ function De({
         o.push("");
         continue;
       }
-      const k = d.split("	").map((p) => p.startsWith(T) ? { isSplit: !0, slots: p.slice(1).split(x) } : { isSplit: !1, slots: p.split(x) }), N = Math.max(1, ...k.map((p) => p.slots.length));
+      const k = d.split("	").map((p) => p.startsWith(I) ? { isSplit: !0, slots: p.slice(1).split(x) } : { isSplit: !1, slots: p.split(x) }), N = Math.max(1, ...k.map((p) => p.slots.length));
       if (N === 1) {
         o.push(k.map((p) => p.slots[0] ?? "").join("	"));
         continue;
@@ -233,7 +233,7 @@ function De({
         o.push(te.join("	"));
       }
     }
-    _(o.join(`
+    V(o.join(`
 `));
   }, []), R = v((e) => {
     const t = e.value;
@@ -241,7 +241,7 @@ function De({
     if (typeof t != "object") return String(t);
     const o = H(e.column?.getColDef());
     if (o && o.length > 0) {
-      const n = V(t, o);
+      const n = _(t, o);
       return o.length === 1 ? n[0] : n.join(`
 `);
     }
@@ -293,7 +293,7 @@ function De({
     /* @__PURE__ */ m(
       xe,
       {
-        isOpen: I,
+        isOpen: P,
         columnId: O,
         gridApi: F,
         onClose: A.closeAdvancedFilter,
@@ -304,10 +304,10 @@ function De({
       Fe,
       {
         isOpen: W,
-        columnId: M.current,
+        columnId: S.current,
         gridApi: F,
-        anchor: P.current,
-        variant: S.current,
+        anchor: T.current,
+        variant: E.current,
         onClose: A.closeMenu
       }
     )
@@ -323,7 +323,7 @@ function xe({
   if (!s || !r || !l) return null;
   const a = l.getColumn(r);
   if (!a) return null;
-  const u = a.getColDef(), c = u.headerComponentParams, h = he(u), F = h.text !== -1 || h.number !== -1 || h.date !== -1, w = h.set !== -1, E = u.filter === "agMultiColumnFilter" && (F || w) ? "multi" : u.filter === "agNumberColumnFilter" ? "number" : u.filter === "agDateColumnFilter" ? "date" : u.filter === "agSetColumnFilter" || c?.selectOptions ? "select" : "text", O = Ce(l.getFilterModel());
+  const u = a.getColDef(), c = u.headerComponentParams, h = he(u), F = h.text !== -1 || h.number !== -1 || h.date !== -1, w = h.set !== -1, M = u.filter === "agMultiColumnFilter" && (F || w) ? "multi" : u.filter === "agNumberColumnFilter" ? "number" : u.filter === "agDateColumnFilter" ? "date" : u.filter === "agSetColumnFilter" || c?.selectOptions ? "select" : "text", O = Ce(l.getFilterModel());
   return /* @__PURE__ */ m(le, { fallback: null, children: /* @__PURE__ */ m(
     be,
     {
@@ -332,10 +332,9 @@ function xe({
       onApply: f,
       columnId: r,
       columnLabel: u.headerName || r,
-      columnType: E,
+      columnType: M,
       selectOptions: c?.selectOptions,
       isMultiSelect: c?.isMultiSelect,
-      datePickerVariant: c?.datePickerVariant,
       initialModel: O,
       api: l
     }

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

@@ -0,0 +1,17 @@
+export type IndicatorType = 'sort' | 'filter';
+interface ColumnIndicatorProps {
+    /** Type of indicator - determines color and label */
+    type: IndicatorType;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Small colored badge indicating column state (sorted or filtered).
+ * Uses design tokens for colors and i18n for accessibility labels.
+ *
+ * @example
+ * <ColumnIndicator type="sort" />
+ * <ColumnIndicator type="filter" />
+ */
+export declare const ColumnIndicator: React.FC<ColumnIndicatorProps>;
+export {};

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

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as n } from "../../../lib/utils.js";
+import { useImpactNovaI18n as s } from "../../../i18n/ImpactNovaI18nContext.js";
+const c = ({
+  type: r,
+  className: l
+}) => {
+  const { t: a } = s(), t = {
+    sort: {
+      colorClass: "bg-indicator-sort",
+      label: a("dataTable.indicatorSortedAriaLabel")
+    },
+    filter: {
+      colorClass: "bg-indicator-filter",
+      label: a("dataTable.indicatorFilteredAriaLabel")
+    }
+  }, { colorClass: i, label: o } = t[r];
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: n("w-2 h-2 rounded-[2px] inline-block shrink-0", i, l),
+      title: o,
+      "aria-label": o
+    }
+  );
+};
+c.displayName = "ColumnIndicator";
+export {
+  c as ColumnIndicator
+};

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

@@ -1,106 +1,114 @@
-import { jsx as U } from "react/jsx-runtime";
-import { useState as j, useRef as R, useCallback as L, useEffect as B } from "react";
-import { useDataTable as ee } from "./data-table-context.js";
-import { NestedList as te } from "../nested-list/nested-list.js";
-import { SelectionMode as ne } from "../types/nested-list.types.js";
-import { mergePartialOrderedColumnState as le } from "./data-table-column-state.js";
-import { useImpactNovaI18n as oe } from "../../../i18n/ImpactNovaI18nContext.js";
-function re(v) {
-  const T = [];
-  let h = v.getOriginalParent();
-  for (; h; ) {
-    const M = h.getColGroupDef();
-    M?.headerName && M?.children && T.push(h), h = h.getOriginalParent();
+import { jsxs as ce, jsx as y } from "react/jsx-runtime";
+import { useState as W, useRef as R, useCallback as g, 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 de } from "../types/nested-list.types.js";
+import { mergePartialOrderedColumnState as ue } from "./data-table-column-state.js";
+import { PinSwitch as fe } from "./pin-switch.js";
+import { ColumnIndicator as Q } from "./column-indicator.js";
+import { IndicatorLegend as pe } from "./indicator-legend.js";
+import { useImpactNovaI18n as he } from "../../../i18n/ImpactNovaI18nContext.js";
+function me(E) {
+  const P = [];
+  let C = E.getOriginalParent();
+  for (; C; ) {
+    const w = C.getColGroupDef();
+    w?.headerName && w?.children && P.push(C), C = C.getOriginalParent();
   }
-  return T.reverse(), T;
+  return P.reverse(), P;
 }
-const ce = 300, q = 100, he = ({
-  enableApplyDiscard: v = !1,
-  showSearch: T = !0,
-  showSelectAll: h = !0,
-  showCollapse: M = !0
+const ge = 300, K = 100, Ee = ({
+  enableApplyDiscard: E = !1,
+  showSearch: P = !0,
+  showSelectAll: C = !0,
+  showCollapse: w = !0
 }) => {
-  const { gridApi: e } = ee(), { t: D } = oe(), [Y, F] = j([]), [H, J] = j(!1), k = R(!1), z = R(null), x = R(0), W = R({}), [K, Q] = j(!1), E = L(() => {
-    if (!e || k.current) return;
-    const r = e.getColumnState(), u = e.getColumns() || [], c = new Map(u.map((l) => [l.getColId(), l])), i = [], s = [], t = /* @__PURE__ */ new Map(), S = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
-    f.set(i, "f"), f.set(s, "s");
-    let P = 0;
-    const G = (l) => {
-      let n = f.get(l);
-      return n === void 0 && (n = `n${P++}`, f.set(l, n)), n;
-    }, N = (l, n) => {
-      const o = l.getGroupId(), C = G(n), I = `${o}::${C}`, b = t.get(I);
-      if (b && b.list === n && n[n.length - 1] === b.node)
-        return b.node;
-      const y = S.get(I) || 0;
-      S.set(I, y + 1);
-      const p = l.getColGroupDef(), w = {
-        id: y === 0 ? `${o}__${C}` : `${o}__${C}__${y}`,
-        label: p?.headerName || o,
+  const { gridApi: n } = se(), { t: L } = he(), [X, F] = W([]), [Z, ee] = W(!1), N = R(!1), $ = R(null), M = R(0), V = R({}), [B, te] = W(!1), x = g(() => {
+    if (!n || N.current) return;
+    const r = n.getColumnState(), i = n.getColumns() || [], t = new Map(i.map((o) => [o.getColId(), o])), s = [], l = [], e = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
+    f.set(s, "f"), f.set(l, "s");
+    let p = 0;
+    const T = (o) => {
+      let c = f.get(o);
+      return c === void 0 && (c = `n${p++}`, f.set(o, c)), c;
+    }, h = (o, c) => {
+      const a = o.getGroupId(), S = T(c), D = `${a}::${S}`, k = e.get(D);
+      if (k && k.list === c && c[c.length - 1] === k.node)
+        return k.node;
+      const _ = v.get(D) || 0;
+      v.set(D, _ + 1);
+      const O = o.getColGroupDef(), A = {
+        id: _ === 0 ? `${a}__${S}` : `${a}__${S}__${_}`,
+        label: O?.headerName || a,
         checked: !0,
         children: [],
         category: "group"
       };
-      return n.push(w), t.set(I, { list: n, node: w }), w;
+      return c.push(A), e.set(D, { list: c, node: A }), A;
     };
-    let a = 0, $ = 0, m = 0, d = 0;
-    r.forEach((l) => {
-      const n = c.get(l.colId);
-      if (!n) return;
-      let o = e.getDisplayNameForColumn(n, "header");
-      if (o === "") return;
-      if (o == null) {
-        const p = n.getColDef();
-        if (p.headerName === "") return;
-        o = p.headerName || p.field || l.colId;
+    let d = 0, j = 0, m = 0, u = 0;
+    r.forEach((o) => {
+      const c = t.get(o.colId);
+      if (!c) return;
+      let a = n.getDisplayNameForColumn(c, "header");
+      if (a === "") return;
+      if (a == null) {
+        const b = c.getColDef();
+        if (b.headerName === "") return;
+        a = b.headerName || b.field || o.colId;
       }
-      if (!o || o.trim() === "")
+      if (!a || a.trim() === "")
         return;
-      const C = !l.hide, I = {
-        id: l.colId,
-        label: o,
-        checked: C
+      const S = !o.hide, D = !!o.sort, k = c.isFilterActive(), _ = o.pinned === "left" ? "left" : o.pinned === "right" ? "right" : null, O = {
+        id: o.colId,
+        label: a,
+        checked: S,
+        data: {
+          hasSortApplied: D,
+          hasFilterApplied: k,
+          pinned: _
+        }
       };
-      l.pinned ? (a++, C && $++) : (m++, C && d++);
-      const b = l.pinned ? i : s, y = re(n);
-      if (y.length > 0) {
-        let p = b, O = null;
-        for (const w of y)
-          O = N(w, p), p = O.children;
-        O.children.push(I);
+      o.pinned ? (d++, S && j++) : (m++, S && u++);
+      const U = o.pinned ? s : l, A = me(c);
+      if (A.length > 0) {
+        let b = U, q = null;
+        for (const ie of A)
+          q = h(ie, b), b = q.children;
+        q.children.push(O);
       } else
-        b.push(I);
+        U.push(O);
     });
-    const g = (l) => {
-      let n = l.length > 0;
-      for (const o of l)
-        o.children && (o.checked = g(o.children)), o.checked || (n = !1);
-      return n;
+    const I = (o) => {
+      let c = o.length > 0;
+      for (const a of o)
+        a.children && (a.checked = I(a.children)), a.checked || (c = !1);
+      return c;
     };
-    g(i), g(s);
-    const _ = [
+    I(s), I(l);
+    const G = [
       {
         id: "root-frozen",
-        label: D("dataTable.frozenColumns"),
-        checked: a > 0 && $ === a,
-        children: i,
+        label: L("dataTable.frozenColumns"),
+        checked: d > 0 && j === d,
+        children: s,
         category: "structure",
         isDragDisabled: !0
       },
       {
         id: "root-scrollable",
-        label: D("dataTable.scrollableColumns"),
-        checked: m > 0 && d === m,
-        children: s,
+        label: L("dataTable.scrollableColumns"),
+        checked: m > 0 && u === m,
+        children: l,
         category: "structure",
         isDragDisabled: !0
       }
     ];
-    F(_), J(!0);
-  }, [e, D]);
-  B(() => {
-    if (!e) return;
-    const r = setTimeout(() => E(), 0), u = [
+    F(G), ee(!0);
+  }, [n, L]);
+  J(() => {
+    if (!n) return;
+    const r = setTimeout(() => x(), 0), i = [
       "columnVisible",
       "columnPinned",
       "columnMoved",
@@ -112,115 +120,163 @@ const ce = 300, q = 100, he = ({
       "columnEverythingChanged",
       "dragStopped",
       "columnValueChanged",
-      "displayedColumnsChanged"
+      "displayedColumnsChanged",
+      "sortChanged",
+      "filterChanged"
     ];
-    let c = null;
-    const i = () => {
-      c && clearTimeout(c), c = setTimeout(() => {
-        if (c = null, k.current) return;
-        const s = z.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
-        s && (x.current = s.scrollTop), E(), Q((t) => !t);
+    let t = null;
+    const s = () => {
+      t && clearTimeout(t), t = setTimeout(() => {
+        if (t = null, N.current) return;
+        const l = $.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
+        l && (M.current = l.scrollTop), x(), te((e) => !e);
       }, 150);
     };
-    return e.isDestroyed() || u.forEach((s) => e.addEventListener(s, i)), () => {
-      clearTimeout(r), c && clearTimeout(c), e.isDestroyed() || u.forEach((s) => e.removeEventListener(s, i));
+    return n.isDestroyed() || i.forEach((l) => n.addEventListener(l, s)), () => {
+      clearTimeout(r), t && clearTimeout(t), n.isDestroyed() || i.forEach((l) => n.removeEventListener(l, s));
     };
-  }, [e, E]), B(() => {
-    if (x.current === 0) return;
+  }, [n, x]), J(() => {
+    if (M.current === 0) return;
     const r = requestAnimationFrame(() => {
-      const u = z.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
-      u && (u.scrollTop = x.current, x.current = 0);
+      const i = $.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
+      i && (i.scrollTop = M.current, M.current = 0);
     });
     return () => cancelAnimationFrame(r);
-  }, [K]);
-  const V = L((r) => {
-    const u = [], c = (i, s) => {
-      i.forEach((t) => {
-        if (t.id === "root-frozen") {
-          t.children && c(t.children, "left");
+  }, [B]);
+  const Y = g((r) => {
+    const i = [], t = (s, l) => {
+      s.forEach((e) => {
+        if (e.id === "root-frozen") {
+          e.children && t(e.children, "left");
           return;
         }
-        if (t.id === "root-scrollable") {
-          t.children && c(t.children, null);
+        if (e.id === "root-scrollable") {
+          e.children && t(e.children, null);
           return;
         }
-        t.category === "group" || t.children && t.children.length > 0 ? t.children && c(t.children, s) : e?.getColumn(t.id) && u.push({
-          colId: t.id,
-          pinned: s,
-          hide: !t.checked
-        });
+        if (e.category === "group" || e.children && e.children.length > 0)
+          e.children && t(e.children, l);
+        else if (n?.getColumn(e.id)) {
+          let p;
+          if (l === null)
+            p = null;
+          else {
+            const h = e.data?.pinned;
+            p = h === "left" || h === "right" ? h : l;
+          }
+          i.push({
+            colId: e.id,
+            pinned: p,
+            hide: !e.checked
+          });
+        }
       });
     };
-    return c(r, null), u;
-  }, [e]), A = L((r) => {
-    if (!e) return;
-    k.current = !0;
-    const u = V(r);
-    if (u.length === 0) {
+    return t(r, null), i;
+  }, [n]), z = g((r) => {
+    if (!n) return;
+    N.current = !0;
+    const i = Y(r);
+    if (i.length === 0) {
       setTimeout(() => {
-        k.current = !1;
-      }, q);
+        N.current = !1;
+      }, K);
       return;
     }
-    const c = e.getColumnState(), i = le(c, u), s = new Set(c.filter((a) => a.pinned).map((a) => a.colId)), t = i.filter((a) => a.pinned && !s.has(a.colId)), S = new Set(t.map((a) => a.colId));
-    e.applyColumnState({ state: i, applyOrder: !0 });
+    const t = n.getColumnState(), s = ue(t, i), l = new Set(t.filter((d) => d.pinned).map((d) => d.colId)), e = s.filter((d) => d.pinned && !l.has(d.colId)), v = new Set(e.map((d) => d.colId));
+    n.applyColumnState({ state: s, applyOrder: !0 });
     const f = () => {
-      k.current = !1, E();
+      N.current = !1, x();
     };
-    if (S.size === 0) {
-      setTimeout(f, q);
+    if (v.size === 0) {
+      setTimeout(f, K);
       return;
     }
-    let P = !1, G = null;
-    const N = () => {
-      if (P || e.isDestroyed()) return;
-      const a = e.getColumnState();
-      if (t.filter((m) => {
-        const d = a.find((g) => g.colId === m.colId);
-        return d && !d.pinned;
+    let p = !1, T = null;
+    const h = () => {
+      if (p || n.isDestroyed()) return;
+      const d = n.getColumnState();
+      if (e.filter((m) => {
+        const u = d.find((I) => I.colId === m.colId);
+        return u && !u.pinned;
       }).length > 0) {
-        P = !0, G && clearTimeout(G), e.removeEventListener("columnPinned", N);
-        const m = i.filter((d) => d.pinned && !S.has(d.colId));
+        p = !0, T && clearTimeout(T), n.removeEventListener("columnPinned", h);
+        const m = s.filter((u) => u.pinned && !v.has(u.colId));
         if (m.length > 0) {
-          const d = m[0], g = i.map(
-            (_) => _.colId === d.colId ? { ..._, pinned: null } : _
+          const u = m[0], I = s.map(
+            (G) => G.colId === u.colId ? { ...G, pinned: null } : G
           );
-          e.applyColumnState({ state: g, applyOrder: !0 });
+          n.applyColumnState({ state: I, applyOrder: !0 });
         }
-        setTimeout(f, q);
+        setTimeout(f, K);
       }
     };
-    e.addEventListener("columnPinned", N), G = setTimeout(() => {
-      e.removeEventListener("columnPinned", N), P || f();
-    }, ce);
-  }, [e, V, E]), X = L((r) => {
-    A(r);
-  }, [A]), Z = L((r) => {
-    v || A(r), F(r);
-  }, [v, A]);
-  return H ? /* @__PURE__ */ U("div", { ref: z, className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ U(
-    te,
+    n.addEventListener("columnPinned", h), T = setTimeout(() => {
+      n.removeEventListener("columnPinned", h), p || f();
+    }, ge);
+  }, [n, Y, x]), ne = g((r) => {
+    z(r);
+  }, [z]), re = g((r) => {
+    E || z(r), F(r);
+  }, [E, z]), H = g((r, i) => {
+    F((t) => {
+      const s = (l) => l.map((e) => e.id === r ? {
+        ...e,
+        data: {
+          ...e.data,
+          pinned: i
+        }
+      } : e.children ? {
+        ...e,
+        children: s(e.children)
+      } : e);
+      return s(t);
+    }), n && n.applyColumnState({
+      state: [{ colId: r, pinned: i }]
+    });
+  }, [n]), le = g((r, i) => {
+    if (!i.isLeaf) return null;
+    const t = r.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__ */ y(Q, { type: "sort" }),
+      t?.hasFilterApplied && /* @__PURE__ */ y(Q, { type: "filter" })
+    ] });
+  }, []), oe = g((r, i) => {
+    const t = r.data;
+    return r.category === "structure" ? r.id !== "root-frozen" ? null : /* @__PURE__ */ y(pe, {}) : !i.isLeaf || !(t?.pinned === "left" || t?.pinned === "right") ? null : /* @__PURE__ */ y(
+      fe,
+      {
+        value: t?.pinned ?? null,
+        onChange: (l) => H(r.id, l),
+        className: "shrink-0"
+      }
+    );
+  }, [H]);
+  return Z ? /* @__PURE__ */ y("div", { ref: $, className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ y(
+    ae,
     {
-      items: Y,
-      onChange: Z,
-      onSubmit: X,
-      enableApplyDiscard: v,
-      enableSearch: T,
-      enableSelectAll: h,
+      items: X,
+      onChange: re,
+      onSubmit: ne,
+      renderLabelExtras: le,
+      renderActions: oe,
+      enableApplyDiscard: E,
+      enableSearch: P,
+      enableSelectAll: C,
       enableDragDrop: !0,
       enableCollapse: !0,
-      enableGlobalCollapse: M,
-      selectionMode: ne.CASCADE_DOWN,
-      searchPlaceholder: D("dataTable.searchColumnsPlaceholder"),
+      enableGlobalCollapse: w,
+      selectionMode: de.CASCADE_DOWN,
+      searchPlaceholder: L("dataTable.searchColumnsPlaceholder"),
       className: "h-full",
-      initialCollapsedItems: W.current,
+      initialCollapsedItems: V.current,
       onCollapseChange: (r) => {
-        W.current = r;
+        V.current = r;
       }
     },
-    K ? "sync-a" : "sync-b"
-  ) }) : /* @__PURE__ */ U("div", { className: "p-4 text-[13px] text-content-placeholder", children: D("dataTable.loadingColumns") });
+    B ? "sync-a" : "sync-b"
+  ) }) : /* @__PURE__ */ y("div", { className: "p-4 text-[13px] text-content-placeholder", children: L("dataTable.loadingColumns") });
 };
 export {
-  he as DataTableColumnList
+  Ee as DataTableColumnList
 };