impact-nova 2.2.3 → 2.2.5

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

@@ -1,151 +1,213 @@
-import { jsxs as O, jsx as a } from "react/jsx-runtime";
-import L, { useRef as j, useState as h, useCallback as f, useEffect as _ } from "react";
-import { createPortal as H } from "react-dom";
-import { DndContext as M } from "@dnd-kit/core";
-import { SortableContext as q } from "@dnd-kit/sortable";
-import { customCollisionDetection as G } from "../hooks/useNestedListDragDrop.js";
-import { Drag as J } from "impact-nova-icons";
-const K = "0 -2px 0 0 var(--color-primary)", Q = "0 2px 0 0 var(--color-primary)", U = () => null, V = ({ item: x, pointerX: v, pointerY: g }) => H(
-  /* @__PURE__ */ a(
+import { jsxs as b, jsx as s } from "react/jsx-runtime";
+import V, { useRef as W, useState as I, useCallback as p, useEffect as P, useLayoutEffect as Z } from "react";
+import { createPortal as J } from "react-dom";
+import { DndContext as Q } from "@dnd-kit/core";
+import { SortableContext as ee } from "@dnd-kit/sortable";
+import { customCollisionDetection as te } from "../hooks/useNestedListDragDrop.js";
+import { Drag as ne } from "impact-nova-icons";
+import { useVirtualizedRows as re } from "../../../../lib/virtualized/useVirtualizedRows.js";
+import { NESTED_LIST_VIRTUALIZATION_THRESHOLD as oe, NESTED_LIST_VIRTUAL_OVERSCAN as le, NESTED_LIST_VIRTUAL_ROW_ESTIMATE_PX as Y } from "../nested-list-constants.js";
+const ie = "0 -2px 0 0 var(--color-primary)", se = "0 2px 0 0 var(--color-primary)", ce = () => null, ae = 32;
+function de(d) {
+  return d ? d.item.id === "root-scrollable" ? 36 : d.item.category === "structure" ? 28 : Y : Y;
+}
+const ue = ({ item: d, pointerX: u, pointerY: N }) => J(
+  /* @__PURE__ */ s(
     "div",
     {
       className: "fixed z-50 pointer-events-none",
-      style: { top: `${g + 16}px`, left: `${v + 12}px` },
-      children: /* @__PURE__ */ O(
+      style: { top: `${N + 16}px`, left: `${u + 12}px` },
+      children: /* @__PURE__ */ b(
         "div",
         {
           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__ */ a(J, { size: "12px", className: "text-content-icon shrink-0" }),
-            /* @__PURE__ */ a("span", { className: "text-[13px] text-content capitalize select-none whitespace-nowrap", children: x.label })
+            /* @__PURE__ */ s(ne, { size: "12px", className: "text-content-icon shrink-0" }),
+            /* @__PURE__ */ s("span", { className: "text-[13px] text-content capitalize select-none whitespace-nowrap", children: d.label })
           ]
         }
       )
     }
   ),
   document.body
-), le = ({
-  isListCollapsed: x,
-  enableDragDrop: v,
-  sensors: g,
-  items: n,
-  renderItem: Y,
-  onDragStart: y,
-  onDragOver: I,
-  onDragEnd: N,
-  onDragCancel: C,
-  activeId: o
+), be = ({
+  isListCollapsed: d,
+  enableDragDrop: u,
+  sensors: N,
+  items: o,
+  renderItem: k,
+  onDragStart: R,
+  onDragOver: w,
+  onDragEnd: T,
+  onDragCancel: L,
+  activeId: l
 }) => {
-  const E = j(null), [S, m] = h(null), [k, A] = h(0), [b, B] = h(0), p = f((e, r) => {
-    if (!e || !o) return null;
-    let t = e, l = "after";
+  const v = W(null), [z, g] = I(null), [X, F] = I(0), [S, $] = I(0), x = p((e, r) => {
+    if (!e || !l) return null;
+    let t = e, n = "after";
     if (t === "root-frozen" || t === "root-scrollable") {
-      const s = n.findIndex((c) => c.item.id === t);
-      if (s !== -1) {
-        const c = n.slice(s + 1).find(
+      const a = o.findIndex((c) => c.item.id === t);
+      if (a !== -1) {
+        const c = o.slice(a + 1).find(
           (i) => i.item.id !== "root-frozen" && i.item.id !== "root-scrollable"
         );
         if (c)
-          t = c.item.id, l = "before";
+          t = c.item.id, n = "before";
         else {
-          const i = n.slice(0, s).filter(
-            (d) => d.item.id !== "root-frozen" && d.item.id !== "root-scrollable"
+          const i = o.slice(0, a).filter(
+            (f) => f.item.id !== "root-frozen" && f.item.id !== "root-scrollable"
           );
-          i.length > 0 && (t = i[i.length - 1].item.id, l = "after");
+          i.length > 0 && (t = i[i.length - 1].item.id, n = "after");
         }
       }
     } else {
-      const s = E.current;
-      if (s) {
-        const c = s.querySelector(`[data-item-id="${t}"]`);
+      const a = v.current;
+      if (a) {
+        const c = a.querySelector(`[data-item-id="${t}"]`);
         if (c) {
-          const i = c.getBoundingClientRect(), d = i.top + i.height / 2;
-          l = r < d ? "before" : "after";
+          const i = c.getBoundingClientRect(), f = i.top + i.height / 2;
+          n = r < f ? "before" : "after";
         }
       }
     }
-    return { overId: t, position: l };
-  }, [o, n]), [w, u] = h(null);
-  _(() => {
-    if (!o) return;
+    return { overId: t, position: n };
+  }, [l, o]), [_, h] = I(null);
+  P(() => {
+    if (!l) return;
     const e = (r) => {
-      A(r.clientX), B(r.clientY), u(p(S, r.clientY));
+      F(r.clientX), $(r.clientY), h(x(z, r.clientY));
     };
     return window.addEventListener("pointermove", e), () => window.removeEventListener("pointermove", e);
-  }, [o, S, p]), _(() => {
-    if (!o) return;
+  }, [l, z, x]), P(() => {
+    if (!l) 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 F = L.useMemo(() => n.map((e) => e.item.id), [n]), D = L.useMemo(() => o && n.find((e) => e.item.id === o) || null, [o, n]), P = f((e) => {
-    y(e);
-  }, [y]), T = f((e) => {
+  }, [l]);
+  const B = V.useMemo(() => o.map((e) => e.item.id), [o]), E = !u && o.length >= oe, { virtualizer: y, virtualItems: C, totalSize: O, measureElement: M } = re({
+    scrollElementRef: v,
+    rowCount: E ? o.length : 0,
+    estimateSize: (e) => de(o[e]),
+    overscan: le,
+    getItemKey: (e) => o[e]?.item.id ?? e
+  });
+  Z(() => {
+    if (!E)
+      return;
+    const e = v.current;
+    if (!e)
+      return;
+    y.measure();
+    const r = new ResizeObserver(() => {
+      y.measure();
+    });
+    return r.observe(e), () => {
+      r.disconnect();
+    };
+  }, [E, o.length, y]);
+  const U = E && C.length > 0, A = V.useMemo(() => l && o.find((e) => e.item.id === l) || null, [l, o]), j = p((e) => {
+    R(e);
+  }, [R]), G = p((e) => {
     const { active: r, over: t } = e;
     if (!t || r.id === t.id)
-      m(null), u(null);
+      g(null), h(null);
     else {
-      const l = t.id;
-      m(l), u(p(l, b));
+      const n = t.id;
+      g(n), h(x(n, S));
     }
-    I(e);
-  }, [I, p, b]), X = f((e) => {
-    m(null), u(null), N(e);
-  }, [N]), $ = f(() => {
-    m(null), u(null), C();
-  }, [C]);
-  if (x) return null;
-  const R = () => {
-    const e = o !== null;
+    w(e);
+  }, [w, x, S]), q = p((e) => {
+    g(null), h(null), T(e);
+  }, [T]), K = p(() => {
+    g(null), h(null), L();
+  }, [L]);
+  if (d) return null;
+  const D = (e, r, t) => {
+    const { item: n, level: m, indentLevel: a } = e, c = t === r, i = t === r + 1 && r === o.length - 1, f = c ? ie : i ? se : void 0;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        className: "relative",
+        style: f ? { boxShadow: f } : void 0,
+        children: k(n, m, a)
+      },
+      n.id
+    );
+  }, H = () => {
+    const e = l !== null;
     let r = null;
-    if (e && w) {
-      const t = n.findIndex((l) => l.item.id === w.overId);
-      t !== -1 && (r = w.position === "before" ? t : t + 1);
-    }
-    return /* @__PURE__ */ a("div", { className: "w-full pb-12", children: n.map(({ item: t, level: l, indentLevel: z }, s) => {
-      const c = r === s, i = r === s + 1 && s === n.length - 1, d = c ? K : i ? Q : void 0;
-      return /* @__PURE__ */ a(
-        "div",
-        {
-          className: "relative",
-          style: d ? { boxShadow: d } : void 0,
-          children: Y(t, l, z)
-        },
-        t.id
+    if (e && _) {
+      const t = o.findIndex(
+        (n) => n.item.id === _.overId
       );
-    }) });
+      t !== -1 && (r = _.position === "before" ? t : t + 1);
+    }
+    if (U) {
+      const t = O + (u ? ae : 0);
+      return /* @__PURE__ */ b("div", { className: "w-full relative", style: { height: t }, children: [
+        C.map((n) => {
+          const m = o[n.index];
+          return m ? /* @__PURE__ */ s(
+            "div",
+            {
+              "data-index": n.index,
+              ref: M,
+              className: "absolute left-0 top-0 w-full",
+              style: { transform: `translateY(${n.start}px)` },
+              children: D(m, n.index, r)
+            },
+            m.item.id
+          ) : null;
+        }),
+        u ? /* @__PURE__ */ s(
+          "div",
+          {
+            "aria-hidden": !0,
+            className: "absolute left-0 w-full h-8 shrink-0",
+            style: { top: O },
+            "data-slot": "drag-drop-tail"
+          }
+        ) : null
+      ] });
+    }
+    return /* @__PURE__ */ b("div", { className: "w-full", children: [
+      o.map(
+        (t, n) => D(t, n, r)
+      ),
+      u ? /* @__PURE__ */ s("div", { "aria-hidden": !0, className: "h-8 shrink-0", "data-slot": "drag-drop-tail" }) : null
+    ] });
   };
-  return /* @__PURE__ */ O("div", { className: "flex flex-col min-h-0 h-full", children: [
-    /* @__PURE__ */ a(
+  return /* @__PURE__ */ b("div", { className: "flex flex-col min-h-0 h-full", children: [
+    /* @__PURE__ */ s(
       "div",
       {
-        ref: E,
+        ref: v,
         className: "flex-1 p-1 overflow-y-auto overflow-x-hidden relative",
-        children: v ? /* @__PURE__ */ a(
-          M,
+        children: u ? /* @__PURE__ */ s(
+          Q,
           {
-            sensors: g,
-            collisionDetection: G,
-            onDragStart: P,
-            onDragOver: T,
-            onDragEnd: X,
-            onDragCancel: $,
-            children: /* @__PURE__ */ a(q, { items: F, strategy: U, children: R() })
+            sensors: N,
+            collisionDetection: te,
+            onDragStart: j,
+            onDragOver: G,
+            onDragEnd: q,
+            onDragCancel: K,
+            children: /* @__PURE__ */ s(ee, { items: B, strategy: ce, children: H() })
           }
-        ) : R()
+        ) : H()
       }
     ),
-    o && D && /* @__PURE__ */ a(
-      V,
+    l && A && /* @__PURE__ */ s(
+      ue,
       {
-        item: D.item,
-        pointerX: k,
-        pointerY: b
+        item: A.item,
+        pointerX: X,
+        pointerY: S
       }
     )
   ] });
 };
 export {
-  le as NestedListContent
+  be as NestedListContent
 };

package/dist/components/data/nested-list/nested-list-constants.d.ts

@@ -0,0 +1,4 @@
+/** Flat row count at or above which NestedListContent virtualizes rows. */
+export declare const NESTED_LIST_VIRTUALIZATION_THRESHOLD = 80;
+export declare const NESTED_LIST_VIRTUAL_ROW_ESTIMATE_PX = 32;
+export declare const NESTED_LIST_VIRTUAL_OVERSCAN = 12;

package/dist/components/data/nested-list/nested-list-constants.js

@@ -0,0 +1,6 @@
+const T = 80, _ = 32, E = 12;
+export {
+  T as NESTED_LIST_VIRTUALIZATION_THRESHOLD,
+  E as NESTED_LIST_VIRTUAL_OVERSCAN,
+  _ as NESTED_LIST_VIRTUAL_ROW_ESTIMATE_PX
+};

package/dist/components/data/nested-list/nested-list-tree-utils.d.ts

@@ -0,0 +1,3 @@
+import { NestedListItem } from './nested-list.types';
+export declare function countNestedListLeaves(items: NestedListItem[]): number;
+export declare function buildCollapsedStateForAllGroups(items: NestedListItem[]): Record<string, boolean>;

package/dist/components/data/nested-list/nested-list-tree-utils.js

@@ -0,0 +1,24 @@
+function r(l) {
+  let t = 0;
+  const n = (o) => {
+    for (const e of o)
+      e.children && e.children.length > 0 ? n(e.children) : t += 1;
+  };
+  return n(l), t;
+}
+function c(l) {
+  const t = {}, n = (o) => {
+    for (const e of o) {
+      if (e.category === "structure") {
+        e.children && e.children.length > 0 && n(e.children);
+        continue;
+      }
+      e.children && e.children.length > 0 && (t[e.id] = !0, n(e.children));
+    }
+  };
+  return n(l), t;
+}
+export {
+  c as buildCollapsedStateForAllGroups,
+  r as countNestedListLeaves
+};