impact-nova 2.5.16 → 2.5.17

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

@@ -1,328 +1,213 @@
-import { jsxs as C, jsx as i } from "react/jsx-runtime";
-import G, { useRef as ne, useState as L, useCallback as I, useEffect as re, useLayoutEffect as H } from "react";
-import { createPortal as Ne } from "react-dom";
-import { DndContext as be } from "@dnd-kit/core";
-import { SortableContext as ye } from "@dnd-kit/sortable";
-import { customCollisionDetection as Ee } from "../hooks/useNestedListDragDrop.js";
-import { Drag as Ae } from "impact-nova-icons";
-import { useVirtualizedRows as Le } from "../../../../lib/virtualized/useVirtualizedRows.js";
-import { NESTED_LIST_VIRTUAL_OVERSCAN as Ce, NESTED_LIST_VIRTUALIZATION_THRESHOLD as ze } from "../nested-list-constants.js";
-import { estimateNestedListRowHeight as X } from "../nested-list-row-estimates.js";
-import { useVirtualNestedListDrag as Re } from "../hooks/useVirtualNestedListDrag.js";
-import { insertGapIndexFromDropTarget as Oe, isInsertGapVisibleOnMountedRows as _e, getInsertGapOffsetY as Te } from "../nested-list-virtual-drop.js";
-import { createLazyFlatRowList as De } from "../nested-list-lazy-flat-rows.js";
-import { findNestedListRowIndexByItemId as Pe, resolveNestedListRowOffset as Ye, captureNestedListScrollAnchor as Fe, restoreNestedListScrollAnchor as Ge } from "../nested-list-scroll-anchor.js";
-const oe = "0 -2px 0 0 var(--color-primary)", He = "0 2px 0 0 var(--color-primary)", Xe = () => null, se = 32, ie = ({ item: z, pointerX: p, pointerY: R, isVisible: O }) => O ? Ne(
-  /* @__PURE__ */ i(
+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: `${R + 16}px`, left: `${p + 12}px` },
-      children: /* @__PURE__ */ C(
+      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__ */ i(Ae, { size: "12px", className: "text-content-icon shrink-0" }),
-            /* @__PURE__ */ i("span", { className: "text-[13px] text-content capitalize select-none whitespace-nowrap", children: z.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
-) : null, nt = ({
-  isListCollapsed: z,
-  enableDragDrop: p,
-  dragMode: R = "sortable",
-  sensors: O,
-  items: s,
-  flatVirtualRowModel: l = null,
-  renderItem: le,
-  onDragStart: k,
-  onDragOver: $,
-  onDragEnd: j,
-  onDragCancel: B,
-  activeId: c,
-  onToggleCollapse: U,
-  toggleCollapseHandlerRef: q,
-  collapsedItems: ce = {},
-  onVirtualDrop: K
+), be = ({
+  isListCollapsed: d,
+  enableDragDrop: u,
+  sensors: N,
+  items: o,
+  renderItem: k,
+  onDragStart: R,
+  onDragOver: w,
+  onDragEnd: T,
+  onDragCancel: L,
+  activeId: l
 }) => {
-  const x = ne(null), _ = ne(null), [W, y] = L(null), [de, ae] = L(0), [T, ue] = L(0), E = I((e, t) => {
-    if (!e || !c) return null;
-    let n = e, r = "after";
-    if (n === "root-frozen" || n === "root-scrollable") {
-      const o = s.findIndex((d) => d.item.id === n);
-      if (o !== -1) {
-        const d = s.slice(o + 1).find(
-          (m) => m.item.id !== "root-frozen" && m.item.id !== "root-scrollable"
+  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 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 (d)
-          n = d.item.id, r = "before";
+        if (c)
+          t = c.item.id, n = "before";
         else {
-          const m = s.slice(0, o).filter(
-            (S) => S.item.id !== "root-frozen" && S.item.id !== "root-scrollable"
+          const i = o.slice(0, a).filter(
+            (f) => f.item.id !== "root-frozen" && f.item.id !== "root-scrollable"
           );
-          m.length > 0 && (n = m[m.length - 1].item.id, r = "after");
+          i.length > 0 && (t = i[i.length - 1].item.id, n = "after");
         }
       }
     } else {
-      const o = x.current;
-      if (o) {
-        const d = o.querySelector(`[data-item-id="${n}"]`);
-        if (d) {
-          const m = d.getBoundingClientRect(), S = m.top + m.height / 2;
-          r = t < S ? "before" : "after";
+      const a = v.current;
+      if (a) {
+        const c = a.querySelector(`[data-item-id="${t}"]`);
+        if (c) {
+          const i = c.getBoundingClientRect(), f = i.top + i.height / 2;
+          n = r < f ? "before" : "after";
         }
       }
     }
-    return { overId: n, position: r };
-  }, [c, s]), [D, N] = L(null);
-  re(() => {
-    if (!c) return;
-    const e = (t) => {
-      ae(t.clientX), ue(t.clientY), N(E(W, t.clientY));
+    return { overId: t, position: n };
+  }, [l, o]), [_, h] = I(null);
+  P(() => {
+    if (!l) return;
+    const e = (r) => {
+      F(r.clientX), $(r.clientY), h(x(z, r.clientY));
     };
     return window.addEventListener("pointermove", e), () => window.removeEventListener("pointermove", e);
-  }, [c, W, E]), re(() => {
-    if (!c) 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();
     };
-  }, [c]);
-  const me = G.useMemo(
-    () => l ? [] : s.map((e) => e.item.id),
-    [l, s]
-  ), f = p && R === "virtual-index", A = G.useMemo(
-    () => l ? De(l) : s,
-    [l, s]
-  ), a = l?.rowCount ?? s.length, w = (f || !p) && a >= ze, P = f || w ? a : 0, g = I(
-    (e) => l ? l.getRowAt(e) : s[e],
-    [l, s]
-  ), b = I(
-    (e) => X(g(e)?.item),
-    [g]
-  ), { virtualizer: u, virtualItems: Y, totalSize: Z, measureElement: fe } = Le({
-    scrollElementRef: x,
-    rowCount: P,
-    estimateSize: b,
-    overscan: Ce,
-    getItemKey: (e) => g(e)?.item.id ?? e,
-    scrollPaddingEnd: p ? se : void 0
+  }, [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
   });
-  H(() => {
-    if (P === 0)
+  Z(() => {
+    if (!E)
       return;
-    const e = x.current;
+    const e = v.current;
     if (!e)
       return;
-    u.measure();
-    const t = new ResizeObserver(() => {
-      u.measure();
+    y.measure();
+    const r = new ResizeObserver(() => {
+      y.measure();
     });
-    return t.observe(e), () => {
-      t.disconnect();
+    return r.observe(e), () => {
+      r.disconnect();
     };
-  }, [P, u]);
-  const J = I(
-    (e) => {
-      if (w && x.current) {
-        const t = Pe({
-          rowCount: a,
-          getRowAtIndex: g,
-          anchorItemId: e
-        }), n = Ye({
-          virtualizer: u,
-          rowIndex: t,
-          estimateRowSize: b
-        }), r = Fe({
-          scrollElement: x.current,
-          anchorItemId: e,
-          anchorRowIndex: t,
-          rowOffset: n
-        });
-        r && (_.current = r), u.shouldAdjustScrollPositionOnItemSizeChange = () => !1;
-      }
-      U(e);
-    },
-    [b, g, U, a, w, u]
-  );
-  H(() => {
-    q.current = J;
-  }, [J, q]), H(() => {
-    const e = _.current, t = x.current;
-    !e || !t || !w || (Ge({
-      scrollElement: t,
-      capture: e,
-      virtualizer: u,
-      estimateRowSize: b
-    }), _.current = null, u.shouldAdjustScrollPositionOnItemSizeChange = void 0);
-  }, [b, a, w, u]);
-  const he = w && Y.length > 0, pe = I((e, t, n) => {
-    K?.(e, t, n);
-  }, [K]), {
-    dragSession: v,
-    handlePointerDown: ge
-  } = Re({
-    items: A,
-    scrollElementRef: x,
-    virtualizer: u,
-    estimateRowSize: (e) => X(g(e)?.item),
-    onDrop: pe,
-    collapsedItems: ce
-  }), Q = G.useMemo(() => {
-    if (!c) return null;
-    if (l) {
-      for (let e = 0; e < l.rowCount; e += 1) {
-        const t = l.getRowAt(e);
-        if (t.item.id === c)
-          return t;
-      }
-      return null;
-    }
-    return s.find((e) => e.item.id === c) || null;
-  }, [c, l, s]), ve = I((e) => {
-    k(e);
-  }, [k]), Ie = I((e) => {
-    const { active: t, over: n } = e;
-    if (!n || t.id === n.id)
-      y(null), N(null);
+  }, [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)
+      g(null), h(null);
     else {
-      const r = n.id;
-      y(r), N(E(r, T));
+      const n = t.id;
+      g(n), h(x(n, S));
     }
-    $(e);
-  }, [$, E, T]), xe = I((e) => {
-    y(null), N(null), j(e);
-  }, [j]), we = I(() => {
-    y(null), N(null), B();
-  }, [B]);
-  if (z) return null;
-  const V = !f || !v?.dropTarget ? null : Oe(A, v.dropTarget), F = (e, t, n, r) => {
-    const { item: h, level: o, indentLevel: d } = e, m = n === t, S = n === r && t === r - 1, ee = m ? oe : S ? He : void 0, Se = f && v?.draggedId === h.id;
-    return /* @__PURE__ */ i(
+    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: {
-          ...ee ? { boxShadow: ee } : void 0,
-          ...Se ? { opacity: 0.4 } : void 0
-        },
-        onPointerDownCapture: f && !h.isDragDisabled && h.category !== "structure" ? (te) => {
-          te.target.closest('[data-drag-handle="true"]') && ge(te, h.id);
-        } : void 0,
-        children: le(h, o, d, {
-          isAnyDragging: c !== null || v !== null
-        })
+        style: f ? { boxShadow: f } : void 0,
+        children: k(n, m, a)
       },
-      h.id
+      n.id
     );
-  }, M = () => {
-    let e = null;
-    if (f && V !== null)
-      e = V;
-    else if (c !== null && D) {
-      const t = A.findIndex(
-        (n) => n.item.id === D.overId
+  }, H = () => {
+    const e = l !== null;
+    let r = null;
+    if (e && _) {
+      const t = o.findIndex(
+        (n) => n.item.id === _.overId
       );
-      t !== -1 && (e = D.position === "before" ? t : t + 1);
+      t !== -1 && (r = _.position === "before" ? t : t + 1);
     }
-    if (he) {
-      const t = Z + (p ? se : 0), n = Y.map((o) => o.index), r = e !== null && f && !_e(e, n, a), h = r && e !== null ? Te(
-        e,
-        u,
-        (o) => X(g(o)?.item),
-        a
-      ) : null;
-      return /* @__PURE__ */ C("div", { className: "w-full relative", style: { height: t }, children: [
-        r && h !== null ? /* @__PURE__ */ i(
-          "div",
-          {
-            "aria-hidden": !0,
-            className: "absolute left-0 w-full h-0 pointer-events-none z-10",
-            style: {
-              top: `${h}px`,
-              boxShadow: oe
-            }
-          }
-        ) : null,
-        Y.map((o) => {
-          const d = g(o.index);
-          return d ? /* @__PURE__ */ i(
+    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": o.index,
-              ref: fe,
+              "data-index": n.index,
+              ref: M,
               className: "absolute left-0 top-0 w-full",
-              style: { transform: `translateY(${o.start}px)` },
-              children: F(d, o.index, e, a)
+              style: { transform: `translateY(${n.start}px)` },
+              children: D(m, n.index, r)
             },
-            d.item.id
+            m.item.id
           ) : null;
         }),
-        p ? /* @__PURE__ */ i(
+        u ? /* @__PURE__ */ s(
           "div",
           {
             "aria-hidden": !0,
             className: "absolute left-0 w-full h-8 shrink-0",
-            style: { top: Z },
+            style: { top: O },
             "data-slot": "drag-drop-tail"
           }
         ) : null
       ] });
     }
-    return /* @__PURE__ */ C("div", { className: "w-full", children: [
-      a > 0 && s.length === 0 ? Array.from({ length: a }, (t, n) => {
-        const r = g(n);
-        return r ? /* @__PURE__ */ i("div", { "data-index": n, children: F(r, n, e, a) }, r.item.id) : null;
-      }) : s.map((t, n) => /* @__PURE__ */ i("div", { "data-index": n, children: F(t, n, e, A.length) }, t.item.id)),
-      p ? /* @__PURE__ */ i("div", { "aria-hidden": !0, className: "h-8 shrink-0", "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__ */ C("div", { className: "flex flex-col min-h-0 h-full", children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ b("div", { className: "flex flex-col min-h-0 h-full", children: [
+    /* @__PURE__ */ s(
       "div",
       {
-        ref: x,
-        "data-slot": "nested-list-scroll",
+        ref: v,
         className: "flex-1 p-1 overflow-y-auto overflow-x-hidden relative",
-        style: { overflowAnchor: "none" },
-        children: p && !f ? /* @__PURE__ */ i(
-          be,
+        children: u ? /* @__PURE__ */ s(
+          Q,
           {
-            sensors: O,
-            collisionDetection: Ee,
-            onDragStart: ve,
-            onDragOver: Ie,
-            onDragEnd: xe,
-            onDragCancel: we,
-            children: /* @__PURE__ */ i(ye, { items: me, strategy: Xe, children: M() })
+            sensors: N,
+            collisionDetection: te,
+            onDragStart: j,
+            onDragOver: G,
+            onDragEnd: q,
+            onDragCancel: K,
+            children: /* @__PURE__ */ s(ee, { items: B, strategy: ce, children: H() })
           }
-        ) : M()
-      }
-    ),
-    c && Q && !f && /* @__PURE__ */ i(
-      ie,
-      {
-        item: Q.item,
-        pointerX: de,
-        pointerY: T,
-        isVisible: !0
+        ) : H()
       }
     ),
-    v && f && /* @__PURE__ */ i(
-      ie,
+    l && A && /* @__PURE__ */ s(
+      ue,
       {
-        item: v.draggedItem,
-        pointerX: v.pointerX,
-        pointerY: v.pointerY,
-        isVisible: v.isPointerInsideScrollContainer
+        item: A.item,
+        pointerX: X,
+        pointerY: S
       }
     )
   ] });
 };
 export {
-  nt as NestedListContent
+  be as NestedListContent
 };

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { NestedListItem, NestedListDragMode } from '../nested-list.types';
+import { NestedListItem } from '../nested-list.types';
 interface SortableItemProps {
     item: NestedListItem;
     level: number;
@@ -11,7 +11,6 @@ interface SortableItemProps {
     isOver?: boolean;
     isValidDrop?: boolean;
     enableDragDrop?: boolean;
-    dragMode?: NestedListDragMode;
     enableCollapse?: boolean;
     shouldBlink?: boolean;
     isDragDisabled?: boolean;