impact-nova 1.7.25 → 1.7.27

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

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

package/dist/components/ui/nested-list/components/NestedListContent.d.ts

@@ -14,6 +14,7 @@ interface NestedListContentProps {
     onDragOver: (event: DragOverEvent) => void;
     onDragEnd: (event: DragEndEvent) => void;
     onDragCancel: () => void;
+    activeId: string | null;
 }
 export declare const NestedListContent: React.FC<NestedListContentProps>;
 export {};

package/dist/components/ui/nested-list/components/NestedListContent.js

@@ -1,74 +1,145 @@
-import { jsx as t } from "react/jsx-runtime";
-import z, { useRef as C } from "react";
-import { DndContext as S } from "@dnd-kit/core";
-import { SortableContext as w } from "@dnd-kit/sortable";
-import { useVirtualizer as y } from "@tanstack/react-virtual";
-import { customCollisionDetection as D } from "../hooks/useNestedListDragDrop.js";
-const _ = ({
-  isListCollapsed: a,
-  enableDragDrop: d,
-  sensors: c,
-  items: e,
-  renderItem: m,
-  onDragStart: f,
-  onDragOver: u,
-  onDragEnd: p,
-  onDragCancel: h
-}) => {
-  const r = C(null), n = y({
-    count: e.length,
-    getScrollElement: () => r.current,
-    estimateSize: () => 32,
-    overscan: 5
-  }), x = z.useMemo(() => e.map((o) => o.item.id), [e]);
-  if (a) return null;
-  const i = n.getVirtualItems(), g = n.getTotalSize(), v = i.length > 0 ? i[0].start : 0, l = /* @__PURE__ */ t(
+import { jsxs as z, jsx as c } from "react/jsx-runtime";
+import b, { useRef as P, useState as v, useEffect as R, useCallback as f } from "react";
+import { createPortal as T } from "react-dom";
+import { DndContext as X } from "@dnd-kit/core";
+import { SortableContext as $ } from "@dnd-kit/sortable";
+import { customCollisionDetection as j } from "../hooks/useNestedListDragDrop.js";
+import { Drag as H } from "../../../../icons/index.js";
+const q = "0 -2px 0 0 var(--color-primary)", G = "0 2px 0 0 var(--color-primary)", J = () => null, K = ({ item: u, pointerX: m, pointerY: p }) => T(
+  /* @__PURE__ */ c(
     "div",
     {
-      style: {
-        height: `${g + 48}px`,
-        width: "100%",
-        position: "relative"
-      },
-      children: /* @__PURE__ */ t(
+      className: "fixed z-50 pointer-events-none",
+      style: { top: `${p + 16}px`, left: `${m + 12}px` },
+      children: /* @__PURE__ */ z(
         "div",
         {
-          style: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            transform: `translateY(${v}px)`
-          },
-          children: i.map((o) => {
-            const { item: s, level: b } = e[o.index];
-            return /* @__PURE__ */ t(
-              "div",
-              {
-                "data-index": o.index,
-                ref: n.measureElement,
-                children: m(s, b)
-              },
-              s.id
-            );
-          })
+          className: "inline-flex items-center gap-1.5 bg-canvas-elevated border border-stroke-subtle rounded px-2.5 py-1 shadow-md",
+          children: [
+            /* @__PURE__ */ c(H, { size: "12px", className: "text-content-icon shrink-0" }),
+            /* @__PURE__ */ c("span", { className: "text-[13px] text-content capitalize select-none whitespace-nowrap", children: u.label })
+          ]
         }
       )
     }
-  );
-  return /* @__PURE__ */ t("div", { className: "flex flex-col min-h-0 h-full", children: /* @__PURE__ */ t("div", { ref: r, className: "flex-1 p-1 overflow-y-auto", children: d ? /* @__PURE__ */ t(
-    S,
-    {
-      sensors: c,
-      collisionDetection: D,
-      onDragStart: f,
-      onDragOver: u,
-      onDragEnd: p,
-      onDragCancel: h,
-      children: /* @__PURE__ */ t(w, { items: x, children: l })
+  ),
+  document.body
+), ne = ({
+  isListCollapsed: u,
+  enableDragDrop: m,
+  sensors: p,
+  items: n,
+  renderItem: L,
+  onDragStart: y,
+  onDragOver: w,
+  onDragEnd: N,
+  onDragCancel: C,
+  activeId: o
+}) => {
+  const E = P(null), [h, d] = v(null), [_, O] = v(0), [x, Y] = v(0);
+  R(() => {
+    if (!o) return;
+    const e = (t) => {
+      O(t.clientX), Y(t.clientY);
+    };
+    return window.addEventListener("pointermove", e), () => window.removeEventListener("pointermove", e);
+  }, [o]), R(() => {
+    if (!o) return;
+    const e = document.createElement("style");
+    return e.setAttribute("data-drag-cursor", "true"), e.textContent = "body, body * { cursor: grabbing !important; }", document.head.appendChild(e), () => {
+      e.remove();
+    };
+  }, [o]);
+  const g = b.useMemo(() => {
+    if (!h || !o) return null;
+    let e = h, t = "after";
+    if (e === "root-frozen" || e === "root-scrollable") {
+      const s = n.findIndex((l) => l.item.id === e);
+      if (s !== -1) {
+        const l = n.slice(s + 1).find(
+          (i) => i.item.id !== "root-frozen" && i.item.id !== "root-scrollable"
+        );
+        if (l)
+          e = l.item.id, t = "before";
+        else {
+          const i = n.slice(0, s).filter(
+            (a) => a.item.id !== "root-frozen" && a.item.id !== "root-scrollable"
+          );
+          i.length > 0 && (e = i[i.length - 1].item.id, t = "after");
+        }
+      }
+    } else {
+      const s = E.current;
+      if (s) {
+        const l = s.querySelector(`[data-item-id="${e}"]`);
+        if (l) {
+          const i = l.getBoundingClientRect(), a = i.top + i.height / 2;
+          t = x < a ? "before" : "after";
+        }
+      }
+    }
+    return { overId: e, position: t };
+  }, [h, o, x, n]), k = b.useMemo(() => n.map((e) => e.item.id), [n]), S = b.useMemo(() => o && n.find((e) => e.item.id === o) || null, [o, n]), A = f((e) => {
+    y(e);
+  }, [y]), B = f((e) => {
+    const { active: t, over: r } = e;
+    !r || t.id === r.id ? d(null) : d(r.id), w(e);
+  }, [w]), F = f((e) => {
+    d(null), N(e);
+  }, [N]), M = f(() => {
+    d(null), C();
+  }, [C]);
+  if (u) return null;
+  const D = () => {
+    const e = o !== null;
+    let t = null;
+    if (e && g) {
+      const r = n.findIndex((s) => s.item.id === g.overId);
+      r !== -1 && (t = g.position === "before" ? r : r + 1);
     }
-  ) : l }) });
+    return /* @__PURE__ */ c("div", { className: "w-full pb-12", children: n.map(({ item: r, level: s }, l) => {
+      const i = t === l, a = t === l + 1 && l === n.length - 1, I = i ? q : a ? G : void 0;
+      return /* @__PURE__ */ c(
+        "div",
+        {
+          className: "relative",
+          style: I ? { boxShadow: I } : void 0,
+          children: L(r, s)
+        },
+        r.id
+      );
+    }) });
+  };
+  return /* @__PURE__ */ z("div", { className: "flex flex-col min-h-0 h-full", children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        ref: E,
+        className: "flex-1 p-1 overflow-y-auto relative",
+        children: m ? /* @__PURE__ */ c(
+          X,
+          {
+            sensors: p,
+            collisionDetection: j,
+            onDragStart: A,
+            onDragOver: B,
+            onDragEnd: F,
+            onDragCancel: M,
+            children: /* @__PURE__ */ c($, { items: k, strategy: J, children: D() })
+          }
+        ) : D()
+      }
+    ),
+    o && S && /* @__PURE__ */ c(
+      K,
+      {
+        item: S.item,
+        pointerX: _,
+        pointerY: x
+      }
+    )
+  ] });
 };
 export {
-  _ as NestedListContent
+  ne as NestedListContent
 };