impact-nova 2.6.0-alpha.0 → 2.6.0

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

@@ -1,45 +1,46 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import C, { useMemo as R } from "react";
-import { useSortable as j } from "@dnd-kit/sortable";
-import { useDroppable as _ } from "@dnd-kit/core";
-import { Checkbox as H } from "../../../forms/checkbox/checkbox.js";
-import { ChevronRight as D, Drag as $ } from "impact-nova-icons";
+import j, { useMemo as _ } from "react";
+import { useSortable as D } from "@dnd-kit/sortable";
+import { useDroppable as H } from "@dnd-kit/core";
+import { Checkbox as $ } from "../../../forms/checkbox/checkbox.js";
+import { ChevronRight as E, Drag as z } from "impact-nova-icons";
 import { cn as d } from "../../../../lib/utils.js";
-import { useImpactNovaI18n as v } from "../../../../i18n/use-impact-nova-i18n.js";
-import { isNestedListSubtreeIndeterminate as E } from "../nested-list-tree-utils.js";
-const z = "flex shrink-0 items-center h-5 gap-0.5", A = "flex h-5 w-4 shrink-0 items-center justify-center", O = "flex h-5 w-5 shrink-0 cursor-grab active:cursor-grabbing items-center justify-center rounded-sm text-content-icon transition-colors hover:bg-canvas-muted hover:text-content", P = (e, r) => {
-  const s = "group flex items-start gap-2 py-1 pr-2 rounded transition-colors duration-150 min-w-0";
-  return e ? d(s, "opacity-40 bg-canvas-muted") : r ? d(s, "bg-feedback-error-surface border border-destructive animate-pulse") : d(s, "hover:bg-canvas-muted");
-}, G = ({ item: e, isAnyDragging: r, renderActions: s }) => {
-  const { t: n } = v(), a = !e.children || e.children.length === 0, {
-    setNodeRef: l,
+import { useImpactNovaI18n as N } from "../../../../i18n/use-impact-nova-i18n.js";
+import { isNestedListSubtreeIndeterminate as A } from "../nested-list-tree-utils.js";
+const O = "flex shrink-0 items-center h-5 gap-0.5", P = "flex h-5 w-4 shrink-0 items-center justify-center", V = "flex h-5 w-5 shrink-0 cursor-grab active:cursor-grabbing items-center justify-center rounded-sm text-content-icon transition-colors hover:bg-canvas-muted hover:text-content", G = (e, r) => {
+  const a = "group flex items-start gap-2 py-1 pr-2 rounded transition-colors duration-150 min-w-0";
+  return e ? d(a, "opacity-40 bg-canvas-muted") : r ? d(a, "bg-feedback-error-surface border border-destructive animate-pulse") : d(a, "hover:bg-canvas-muted");
+}, M = ({ item: e, isAnyDragging: r, renderActions: a }) => {
+  const { t: n } = N(), l = e.data?.hasVirtualColumnChildren === !0, s = (!e.children || e.children.length === 0) && !l, {
+    setNodeRef: h,
     isOver: o
-  } = _({
+  } = H({
     id: `droppable-${e.id}`,
     data: { sectionId: e.id },
-    disabled: !a
+    disabled: !s
   });
-  return /* @__PURE__ */ c("div", { ref: a ? l : void 0, children: [
+  return /* @__PURE__ */ c("div", { ref: s ? h : void 0, children: [
     /* @__PURE__ */ c(
       "div",
       {
         className: d(
           "flex items-center justify-between px-2 py-0 text-xs font-[500] leading-4 text-navigation-muted select-none",
           e.id === "root-scrollable" ? "mt-2 pt-2 pb-1 border-t border-solid border-stroke-subtle" : "mt-1 pb-1",
-          o && r && a && "bg-canvas-tint rounded"
+          o && r && s && "bg-canvas-tint rounded"
         ),
         children: [
           /* @__PURE__ */ c("div", { className: "flex items-center", children: [
             e.label,
-            o && r && a && /* @__PURE__ */ t("span", { className: "ml-2 text-brand text-[11px]", children: n("nestedList.dropHere") })
+            o && r && s && /* @__PURE__ */ t("span", { className: "ml-2 text-brand text-[11px]", children: n("nestedList.dropHere") })
           ] }),
-          s?.(e, { isLeaf: !1, level: 0 })
+          a?.(e, { isLeaf: !1, level: 0 })
         ]
       }
     ),
-    a && /* @__PURE__ */ t(
+    s && /* @__PURE__ */ t(
       "div",
       {
+        "data-section-droppable": e.id,
         className: d(
           "mx-2 my-1 rounded border-2 border-dashed min-h-[36px] flex items-center justify-center text-[11px] transition-colors",
           o && r ? "border-brand bg-canvas-tint text-brand" : "border-stroke-hairline text-content-empty"
@@ -48,36 +49,37 @@ const z = "flex shrink-0 items-center h-5 gap-0.5", A = "flex h-5 w-4 shrink-0 i
       }
     )
   ] });
-}, M = ({
+}, T = ({
   item: e,
   level: r,
-  indentLevel: s,
+  indentLevel: a,
   isCollapsed: n,
-  onToggle: a,
-  onToggleCollapse: l,
-  isAnyDragging: o = !1,
-  enableDragDrop: N = !0,
-  enableCollapse: g = !0,
-  shouldBlink: k = !1,
-  isDragDisabled: u = !1,
-  renderLabelExtras: f,
-  renderActions: m
+  onToggle: l,
+  onToggleCollapse: s,
+  isAnyDragging: h = !1,
+  enableDragDrop: o = !0,
+  dragMode: k = "sortable",
+  enableCollapse: L = !0,
+  shouldBlink: y = !1,
+  isDragDisabled: m = !1,
+  renderLabelExtras: x,
+  renderActions: v
 }) => {
-  const { t: h } = v(), x = e.category === "structure", p = e.children && e.children.length > 0, b = !p && e.category !== "structure", L = R(() => !e.children || e.children.length === 0 ? !1 : E(e.children), [e.children]), {
-    attributes: y,
+  const { t: u } = N(), g = e.category === "structure", p = e.children && e.children.length > 0, b = !p && e.category !== "structure", C = _(() => !e.children || e.children.length === 0 ? !1 : A(e.children), [e.children]), f = k === "virtual-index", {
+    attributes: I,
     listeners: S,
     setNodeRef: w,
-    isDragging: I
-  } = j({
+    isDragging: R
+  } = D({
     id: e.id,
     data: {
       level: r,
       hasChildren: p,
       isExpanded: !n
     },
-    disabled: x || e.disabled || u
+    disabled: g || e.disabled || m || f
   });
-  return x ? /* @__PURE__ */ t(G, { item: e, isAnyDragging: o, renderActions: m }) : /* @__PURE__ */ t(
+  return g ? /* @__PURE__ */ t(M, { item: e, isAnyDragging: h, renderActions: v }) : /* @__PURE__ */ t(
     "div",
     {
       ref: w,
@@ -90,24 +92,24 @@ const z = "flex shrink-0 items-center h-5 gap-0.5", A = "flex h-5 w-4 shrink-0 i
       children: /* @__PURE__ */ c(
         "div",
         {
-          className: P(I, k),
+          className: G(R, y),
           style: {
-            paddingLeft: `${8 + s * 20}px`
+            paddingLeft: `${8 + a * 20}px`
           },
           children: [
-            /* @__PURE__ */ c("div", { className: z, children: [
-              /* @__PURE__ */ t("div", { className: A, children: g && p && /* @__PURE__ */ t(
+            /* @__PURE__ */ c("div", { className: O, children: [
+              /* @__PURE__ */ t("div", { className: P, children: L && p && /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
                   onClick: (i) => {
-                    i.stopPropagation(), l(e.id);
+                    i.stopPropagation(), s(e.id);
                   },
                   onMouseDown: (i) => i.stopPropagation(),
                   className: "flex h-4 w-4 items-center justify-center rounded-full p-0 hover:bg-canvas-muted transition-colors text-content-icon hover:text-brand",
-                  "aria-label": h(n ? "nestedList.expand" : "nestedList.collapse"),
+                  "aria-label": u(n ? "nestedList.expand" : "nestedList.collapse"),
                   children: /* @__PURE__ */ t(
-                    D,
+                    E,
                     {
                       size: "16px",
                       className: d("transition-transform", !n && "rotate-90")
@@ -116,23 +118,23 @@ const z = "flex shrink-0 items-center h-5 gap-0.5", A = "flex h-5 w-4 shrink-0 i
                 }
               ) }),
               /* @__PURE__ */ t("div", { className: "flex h-5 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ t(
-                H,
+                $,
                 {
                   id: `checkbox-${e.id}`,
-                  checked: L ? "indeterminate" : e.checked,
-                  onCheckedChange: () => a(e.id),
+                  checked: C ? "indeterminate" : e.checked,
+                  onCheckedChange: () => l(e.id),
                   disabled: e.disabled,
                   className: "mr-0",
                   "aria-label": e.label
                 }
               ) }),
-              N && !u ? /* @__PURE__ */ t(
+              o && !m ? /* @__PURE__ */ t(
                 "div",
                 {
-                  ...y,
-                  ...S,
-                  "aria-label": `${h("aria.dragHandle")}: ${e.label}`,
-                  className: O,
+                  ...f ? {} : { ...I, ...S },
+                  "aria-label": `${u("aria.dragHandle")}: ${e.label}`,
+                  className: V,
+                  "data-drag-handle": "true",
                   style: {
                     pointerEvents: "auto",
                     position: "relative",
@@ -140,9 +142,9 @@ const z = "flex shrink-0 items-center h-5 gap-0.5", A = "flex h-5 w-4 shrink-0 i
                     touchAction: "none"
                   },
                   onPointerDown: (i) => {
-                    i.stopPropagation();
+                    f || i.stopPropagation();
                   },
-                  children: /* @__PURE__ */ t($, { size: "14px" })
+                  children: /* @__PURE__ */ t(z, { size: "14px" })
                 }
               ) : /* @__PURE__ */ t("div", { className: "w-5 shrink-0", "aria-hidden": !0 })
             ] }),
@@ -154,16 +156,16 @@ const z = "flex shrink-0 items-center h-5 gap-0.5", A = "flex h-5 w-4 shrink-0 i
                 children: /* @__PURE__ */ t("span", { className: "break-words", children: e.label })
               }
             ),
-            f?.(e, { isLeaf: b, level: r }) ? /* @__PURE__ */ t("div", { className: "shrink-0 self-center flex items-center", children: f(e, { isLeaf: b, level: r }) }) : null,
-            /* @__PURE__ */ t("div", { className: "shrink-0 self-center flex items-center", children: m?.(e, { isLeaf: b, level: r }) })
+            x?.(e, { isLeaf: b, level: r }) ? /* @__PURE__ */ t("div", { className: "shrink-0 self-center flex items-center", children: x(e, { isLeaf: b, level: r }) }) : null,
+            /* @__PURE__ */ t("div", { className: "shrink-0 self-center flex items-center", children: v?.(e, { isLeaf: b, level: r }) })
           ]
         }
       )
     }
   );
-}, W = C.memo(M);
+}, Y = j.memo(T);
 export {
-  O as DRAG_HANDLE_CLASS,
-  z as LEADING_RAIL_CLASS,
-  W as SortableItem
+  V as DRAG_HANDLE_CLASS,
+  O as LEADING_RAIL_CLASS,
+  Y as SortableItem
 };

package/dist/components/data/nested-list/hooks/useNestedListDragDrop.d.ts

@@ -1,34 +1,24 @@
 import { DragEndEvent, CollisionDetection } from '@dnd-kit/core';
 import { NestedListItem } from '../nested-list.types';
-/**
- * Custom collision detection: closestCorners but filters out section header
- * sortable nodes from results. This prevents headers from "stealing" drops
- * that should target child items.
- *
- * - When children exist nearby: header is filtered → closest child wins →
- *   handleCrossParentReorder gives precise positioning
- * - When section is empty: only the droppable node (droppable-root-*)
- *   exists → not filtered → handleDropOnSection handles it
- * - Edge case (no children nearby): headers are included as fallback
- */
+import { findNestedListItemLevel, findNestedListParentId } from '../nested-list-drop-engine';
 export declare const customCollisionDetection: CollisionDetection;
-declare function findItemLevel(items: NestedListItem[], itemId: string, currentLevel?: number): number | null;
-declare function findParentId(items: NestedListItem[], itemId: string, parentId?: string | null): string | null;
-/**
- * Find the direct child of a section that contains (or is) the given item.
- * Returns the level-1 ancestor's ID within the section.
- */
 interface UseNestedListDragDropProps {
     items: NestedListItem[];
     onDragEnd?: (activeId: string, overId: string | null) => void;
     collapsedItems?: Record<string, boolean>;
     canDrag?: (item: NestedListItem, level: number) => boolean;
+    isValidDropTarget?: (options: {
+        activeItemId: string;
+        overItemId: string;
+        items: NestedListItem[];
+        insertAfter?: boolean;
+    }) => boolean;
 }
-export declare const useNestedListDragDrop: ({ items, onDragEnd, collapsedItems, canDrag, }: UseNestedListDragDropProps) => {
+export declare const useNestedListDragDrop: ({ items, onDragEnd, collapsedItems, canDrag, isValidDropTarget, }: UseNestedListDragDropProps) => {
     sensors: import('@dnd-kit/core').SensorDescriptor<import('@dnd-kit/core').SensorOptions>[];
     handleDragEnd: (event: DragEndEvent, setItems: (updater: (prevItems: NestedListItem[]) => NestedListItem[]) => void) => void;
     isValidDrop: (activeItemId: string | null, overItemId: string | null) => boolean;
-    findItemLevel: typeof findItemLevel;
-    findParentId: typeof findParentId;
+    findItemLevel: typeof findNestedListItemLevel;
+    findParentId: typeof findNestedListParentId;
 };
 export {};

package/dist/components/data/nested-list/hooks/useNestedListDragDrop.js

@@ -1,247 +1,58 @@
-import { useCallback as F } from "react";
-import { useSensors as Z, useSensor as V, MouseSensor as $, TouchSensor as E, closestCenter as p } from "@dnd-kit/core";
-import { arrayMove as k } from "@dnd-kit/sortable";
-const W = "droppable-", _ = /* @__PURE__ */ new Set(["root-frozen", "root-scrollable"]);
-function X(f) {
-  if (f.startsWith(W)) {
-    const r = f.slice(W.length);
-    if (_.has(r)) return r;
-  }
-  return null;
-}
-function q(f, r, d) {
-  return f.map((e) => {
-    if (e.children && e.children.length > 0) {
-      const C = e.children.findIndex(
-        (P) => P.id === r
-      ), b = e.children.findIndex(
-        (P) => P.id === d
-      );
-      if (C !== -1 && b !== -1) {
-        const P = k(e.children, C, b);
-        return {
-          ...e,
-          children: P
-        };
-      }
-      return {
-        ...e,
-        children: q(e.children, r, d)
-      };
-    }
-    return e;
-  });
-}
-const nn = (f) => {
-  const r = p(f), d = r.filter(
-    (e) => !_.has(e.id)
+import { useCallback as S } from "react";
+import { useSensors as C, useSensor as N, MouseSensor as _, TouchSensor as b, closestCenter as x } from "@dnd-kit/core";
+import { applyNestedListDragEndEvent as y, findNestedListItemById as P, findNestedListItemLevel as L, getSectionIdFromDroppable as k, findNestedListParentId as B } from "../nested-list-drop-engine.js";
+import { NESTED_LIST_SECTION_IDS as d } from "../nested-list-constants.js";
+const j = (r) => {
+  const u = x(r), l = u.filter(
+    (t) => !d.has(t.id)
   );
-  return d.length > 0 ? d : r;
-};
-function M(f, r) {
-  for (const d of f) {
-    if (d.id === r) return d;
-    if (d.children) {
-      const e = M(d.children, r);
-      if (e) return e;
-    }
-  }
-}
-function T(f, r, d = 0) {
-  for (const e of f) {
-    if (e.id === r) return d;
-    if (e.children) {
-      const C = T(e.children, r, d + 1);
-      if (C !== null) return C;
-    }
-  }
-  return null;
-}
-function G(f, r, d = null) {
-  for (const e of f) {
-    if (e.id === r) return d;
-    if (e.children) {
-      const C = G(e.children, r, e.id);
-      if (C !== null) return C;
-    }
-  }
-  return null;
-}
-function j(f, r) {
-  for (const d of f) {
-    if (d.id === r) return null;
-    if (d.children && M(d.children, r))
-      return d.id;
-  }
-  return null;
-}
-const rn = ({
-  items: f,
-  onDragEnd: r,
-  collapsedItems: d = {},
-  canDrag: e
+  return l.length > 0 ? l : u;
+}, q = ({
+  items: r,
+  onDragEnd: u,
+  collapsedItems: l = {},
+  canDrag: t,
+  isValidDropTarget: f
 }) => {
-  const C = Z(
-    V($),
-    V(E)
-  ), b = F(
-    (o, c, u) => {
-      const s = G(o, u);
-      if (!s) return null;
-      const n = o.findIndex(
-        (i) => i.id === s
-      ), t = o.findIndex(
-        (i) => i.id === c
-      );
-      if (n !== -1 && t !== -1) {
-        const i = k(
-          o,
-          t,
-          n
-        );
-        return r?.(c, s), i;
-      }
-      return null;
-    },
-    [r]
-  ), P = F(
-    (o, c, u) => {
-      const s = o.findIndex((t) => t.id === c), n = o.findIndex((t) => t.id === u);
-      if (s !== -1 && n !== -1) {
-        const t = k(o, s, n);
-        return r?.(c, u), t;
-      }
-      return null;
-    },
-    [r]
-  ), z = F(
-    (o, c, u) => {
-      const s = q(o, c, u);
-      return r?.(c, u), s;
-    },
-    [r]
-  ), w = F(
-    (o, c, u, s = !1) => {
-      const n = M(o, c);
-      if (!n) return null;
-      const t = (h) => h.filter((l) => l.id !== c).map(
-        (l) => l.children ? { ...l, children: t(l.children) } : l
-      ).filter((l) => !(l.children && l.children.length === 0 && l.category === "group")), i = M(o, u), a = !n.children || n.children.length === 0, R = i?.children && i.children.length > 0, Y = d[u] === !0, B = a && R && !Y && s, N = (h) => {
-        for (let l = 0; l < h.length; l++) {
-          if (h[l].id === u)
-            if (B) {
-              const L = {
-                ...h[l],
-                children: [n, ...h[l].children || []]
-              }, x = [...h];
-              return x[l] = L, { nodes: x, inserted: !0 };
-            } else {
-              const L = [...h], x = s ? l + 1 : l;
-              return L.splice(x, 0, n), { nodes: L, inserted: !0 };
-            }
-          if (h[l].children) {
-            const L = N(h[l].children);
-            if (L.inserted) {
-              const x = [...h];
-              return x[l] = { ...h[l], children: L.nodes }, { nodes: x, inserted: !0 };
-            }
-          }
-        }
-        return { nodes: h, inserted: !1 };
-      }, S = t(o), { nodes: O, inserted: g } = N(S);
-      return g ? (r?.(c, u), O) : null;
-    },
-    [r, d]
-  ), A = F(
-    (o, c, u) => {
-      const s = M(o, c);
-      if (!s) return o;
-      const n = (i) => i.filter((a) => a.id !== c).map(
-        (a) => a.children ? { ...a, children: n(a.children) } : a
-      ), t = o.map((i) => {
-        let a = i.children ? n(i.children) : [];
-        return i.id === u && (a = [s, ...a]), { ...i, children: a };
-      });
-      return r?.(c, u), t;
-    },
-    [r]
-  ), J = F(
-    (o, c) => {
-      const { active: u, over: s } = o;
-      !s || u.id === s.id || c((n) => {
-        const t = u.id, i = s.id;
-        if (e) {
-          const S = M(n, t), O = T(n, t);
-          if (S && O !== null && !e(S, O))
-            return n;
-        }
-        const a = X(i);
-        if (a)
-          return A(n, t, a);
-        const R = T(n, t), Y = T(n, i), B = G(n, t), N = G(n, i);
-        if (_.has(i) && R !== null && R > 0)
-          return A(n, t, i);
-        if (R === 0 && Y !== null && Y > 0)
-          return b(
-            n,
-            t,
-            i
-          ) || n;
-        if (R === null || Y === null)
-          return n;
-        if (R > 0 && Y > 0 && B !== N) {
-          const S = j(n, t), O = j(n, i);
-          if (S && O && S !== O) {
-            const x = u.rect.current.translated, y = s.rect;
-            let H = !1;
-            if (x && y) {
-              const Q = x.top + x.height / 2, U = y.top + y.height / 2;
-              H = Q > U;
-            }
-            return w(n, t, i, H) || n;
-          }
-          const g = u.rect.current.translated, h = s.rect;
-          let l = !1;
-          if (g && h) {
-            const x = g.top + g.height / 2, y = h.top + h.height / 2;
-            l = x > y;
-          }
-          return w(n, t, i, l) || n;
-        }
-        return R === 0 ? P(n, t, i) || n : z(n, t, i);
+  const h = C(
+    N(_),
+    N(b)
+  ), p = S(
+    (n, e) => {
+      const { active: o, over: s } = n;
+      !s || o.id === s.id || e((i) => {
+        const c = y(i, n, {
+          collapsedItems: l,
+          canDrag: t,
+          isValidDropTarget: f
+        });
+        return c !== i && u?.(o.id, s.id), c;
       });
     },
-    [
-      b,
-      P,
-      z,
-      w,
-      A,
-      e
-    ]
-  ), K = F(
-    (o, c) => {
-      if (!o || !c || o === c)
+    [l, t, f, u]
+  ), E = S(
+    (n, e) => {
+      if (!n || !e || n === e || f && !f({ activeItemId: n, overItemId: e, items: r }))
         return !1;
-      if (e) {
-        const n = M(f, o), t = T(f, o);
-        if (n && t !== null && !e(n, t))
+      if (t) {
+        const i = P(r, n), c = L(r, n);
+        if (i && c !== null && !t(i, c))
           return !1;
       }
-      const u = o ? T(f, o) : null, s = c ? T(f, c) : null;
-      return X(c) !== null || _.has(c) ? !0 : u === null || s === null ? !1 : u === 0 && s > 0 || u === s || u > 0 && s > 0;
+      const o = n ? L(r, n) : null, s = e ? L(r, e) : null;
+      return k(e) !== null || d.has(e) ? !0 : o === null || s === null ? !1 : o === 0 && s > 0 || o === s || o > 0 && s > 0;
     },
-    [f, e]
+    [r, t, f]
   );
   return {
-    sensors: C,
-    handleDragEnd: J,
-    isValidDrop: K,
-    findItemLevel: T,
-    findParentId: G
+    sensors: h,
+    handleDragEnd: p,
+    isValidDrop: E,
+    findItemLevel: L,
+    findParentId: B
   };
 };
 export {
-  nn as customCollisionDetection,
-  rn as useNestedListDragDrop
+  j as customCollisionDetection,
+  q as useNestedListDragDrop
 };

package/dist/components/data/nested-list/hooks/useVirtualNestedListDrag.d.ts

@@ -0,0 +1,24 @@
+import { NestedListItem } from '../nested-list.types';
+import { FlatNestedListRow, VirtualDropRowGeometry, VirtualDropTarget } from '../nested-list-virtual-drop';
+export type VirtualDragSession = {
+    draggedId: string;
+    draggedItem: NestedListItem;
+    dropTarget: VirtualDropTarget | null;
+    pointerX: number;
+    pointerY: number;
+    isPointerInsideScrollContainer: boolean;
+} | null;
+export interface UseVirtualNestedListDragOptions {
+    items: FlatNestedListRow[];
+    scrollElementRef: React.RefObject<HTMLDivElement | null>;
+    virtualizer: VirtualDropRowGeometry;
+    estimateRowSize: (index: number) => number;
+    onDrop: (activeId: string, overId: string, insertAfter: boolean) => void;
+    collapsedItems?: Record<string, boolean>;
+}
+export declare function useVirtualNestedListDrag({ items, scrollElementRef, virtualizer, estimateRowSize, onDrop, collapsedItems, }: UseVirtualNestedListDragOptions): {
+    dragSession: VirtualDragSession;
+    handlePointerDown: (event: React.PointerEvent, itemId: string) => void;
+    handleKeyboardReorder: (itemId: string, direction: "up" | "down") => void;
+    isDragging: boolean;
+};