impact-nova 2.6.0-alpha.0 → 2.6.0

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

@@ -1,213 +1,328 @@
-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(
+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(
     "div",
     {
       className: "fixed z-50 pointer-events-none",
-      style: { top: `${N + 16}px`, left: `${u + 12}px` },
-      children: /* @__PURE__ */ b(
+      style: { top: `${R + 16}px`, left: `${p + 12}px` },
+      children: /* @__PURE__ */ C(
         "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__ */ 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 })
+            /* @__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 })
           ]
         }
       )
     }
   ),
   document.body
-), be = ({
-  isListCollapsed: d,
-  enableDragDrop: u,
-  sensors: N,
-  items: o,
-  renderItem: k,
-  onDragStart: R,
-  onDragOver: w,
-  onDragEnd: T,
-  onDragCancel: L,
-  activeId: l
+) : 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
 }) => {
-  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"
+  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"
         );
-        if (c)
-          t = c.item.id, n = "before";
+        if (d)
+          n = d.item.id, r = "before";
         else {
-          const i = o.slice(0, a).filter(
-            (f) => f.item.id !== "root-frozen" && f.item.id !== "root-scrollable"
+          const m = s.slice(0, o).filter(
+            (S) => S.item.id !== "root-frozen" && S.item.id !== "root-scrollable"
           );
-          i.length > 0 && (t = i[i.length - 1].item.id, n = "after");
+          m.length > 0 && (n = m[m.length - 1].item.id, r = "after");
         }
       }
     } else {
-      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";
+      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";
         }
       }
     }
-    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 { 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 window.addEventListener("pointermove", e), () => window.removeEventListener("pointermove", e);
-  }, [l, z, x]), P(() => {
-    if (!l) return;
+  }, [c, W, E]), re(() => {
+    if (!c) 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();
     };
-  }, [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
+  }, [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
   });
-  Z(() => {
-    if (!E)
+  H(() => {
+    if (P === 0)
       return;
-    const e = v.current;
+    const e = x.current;
     if (!e)
       return;
-    y.measure();
-    const r = new ResizeObserver(() => {
-      y.measure();
+    u.measure();
+    const t = new ResizeObserver(() => {
+      u.measure();
     });
-    return r.observe(e), () => {
-      r.disconnect();
+    return t.observe(e), () => {
+      t.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)
-      g(null), h(null);
+  }, [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);
     else {
-      const n = t.id;
-      g(n), h(x(n, S));
+      const r = n.id;
+      y(r), N(E(r, T));
     }
-    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(
+    $(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(
       "div",
       {
         className: "relative",
-        style: f ? { boxShadow: f } : void 0,
-        children: k(n, m, a)
+        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
+        })
       },
-      n.id
+      h.id
     );
-  }, H = () => {
-    const e = l !== null;
-    let r = null;
-    if (e && _) {
-      const t = o.findIndex(
-        (n) => n.item.id === _.overId
+  }, 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
       );
-      t !== -1 && (r = _.position === "before" ? t : t + 1);
+      t !== -1 && (e = D.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(
+    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(
             "div",
             {
-              "data-index": n.index,
-              ref: M,
+              "data-index": o.index,
+              ref: fe,
               className: "absolute left-0 top-0 w-full",
-              style: { transform: `translateY(${n.start}px)` },
-              children: D(m, n.index, r)
+              style: { transform: `translateY(${o.start}px)` },
+              children: F(d, o.index, e, a)
             },
-            m.item.id
+            d.item.id
           ) : null;
         }),
-        u ? /* @__PURE__ */ s(
+        p ? /* @__PURE__ */ i(
           "div",
           {
             "aria-hidden": !0,
             className: "absolute left-0 w-full h-8 shrink-0",
-            style: { top: O },
+            style: { top: Z },
             "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: "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: "flex flex-col min-h-0 h-full", children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ C("div", { className: "flex flex-col min-h-0 h-full", children: [
+    /* @__PURE__ */ i(
       "div",
       {
-        ref: v,
+        ref: x,
+        "data-slot": "nested-list-scroll",
         className: "flex-1 p-1 overflow-y-auto overflow-x-hidden relative",
-        children: u ? /* @__PURE__ */ s(
-          Q,
+        style: { overflowAnchor: "none" },
+        children: p && !f ? /* @__PURE__ */ i(
+          be,
           {
-            sensors: N,
-            collisionDetection: te,
-            onDragStart: j,
-            onDragOver: G,
-            onDragEnd: q,
-            onDragCancel: K,
-            children: /* @__PURE__ */ s(ee, { items: B, strategy: ce, children: H() })
+            sensors: O,
+            collisionDetection: Ee,
+            onDragStart: ve,
+            onDragOver: Ie,
+            onDragEnd: xe,
+            onDragCancel: we,
+            children: /* @__PURE__ */ i(ye, { items: me, strategy: Xe, children: M() })
           }
-        ) : H()
+        ) : M()
+      }
+    ),
+    c && Q && !f && /* @__PURE__ */ i(
+      ie,
+      {
+        item: Q.item,
+        pointerX: de,
+        pointerY: T,
+        isVisible: !0
       }
     ),
-    l && A && /* @__PURE__ */ s(
-      ue,
+    v && f && /* @__PURE__ */ i(
+      ie,
       {
-        item: A.item,
-        pointerX: X,
-        pointerY: S
+        item: v.draggedItem,
+        pointerX: v.pointerX,
+        pointerY: v.pointerY,
+        isVisible: v.isPointerInsideScrollContainer
       }
     )
   ] });
 };
 export {
-  be as NestedListContent
+  nt as NestedListContent
 };

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

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