impact-nova 1.7.50 → 1.8.0

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

@@ -1,11 +1,11 @@
 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(
+import b, { useRef as T, useState as v, useEffect as R, useCallback as f } from "react";
+import { createPortal as X } from "react-dom";
+import { DndContext as $ } from "@dnd-kit/core";
+import { SortableContext as j } from "@dnd-kit/sortable";
+import { customCollisionDetection as H } from "../hooks/useNestedListDragDrop.js";
+import { Drag as q } from "../../../../icons/index.js";
+const G = "0 -2px 0 0 var(--color-primary)", J = "0 2px 0 0 var(--color-primary)", K = () => null, Q = ({ item: u, pointerX: m, pointerY: p }) => X(
   /* @__PURE__ */ c(
     "div",
     {
@@ -16,7 +16,7 @@ const q = "0 -2px 0 0 var(--color-primary)", G = "0 2px 0 0 var(--color-primary)
         {
           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(q, { size: "12px", className: "text-content-icon shrink-0" }),
             /* @__PURE__ */ c("span", { className: "text-[13px] text-content capitalize select-none whitespace-nowrap", children: u.label })
           ]
         }
@@ -24,66 +24,66 @@ const q = "0 -2px 0 0 var(--color-primary)", G = "0 2px 0 0 var(--color-primary)
     }
   ),
   document.body
-), ne = ({
+), oe = ({
   isListCollapsed: u,
   enableDragDrop: m,
   sensors: p,
-  items: n,
+  items: o,
   renderItem: L,
   onDragStart: w,
   onDragOver: y,
   onDragEnd: N,
   onDragCancel: C,
-  activeId: o
+  activeId: r
 }) => {
-  const E = P(null), [h, d] = v(null), [_, O] = v(0), [x, Y] = v(0);
+  const E = T(null), [h, d] = v(null), [_, O] = v(0), [x, Y] = v(0);
   R(() => {
-    if (!o) return;
+    if (!r) return;
     const e = (t) => {
       O(t.clientX), Y(t.clientY);
     };
     return window.addEventListener("pointermove", e), () => window.removeEventListener("pointermove", e);
-  }, [o]), R(() => {
-    if (!o) return;
+  }, [r]), R(() => {
+    if (!r) 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]);
+  }, [r]);
   const g = b.useMemo(() => {
-    if (!h || !o) return null;
+    if (!h || !r) 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"
+      const i = o.findIndex((s) => s.item.id === e);
+      if (i !== -1) {
+        const s = o.slice(i + 1).find(
+          (n) => n.item.id !== "root-frozen" && n.item.id !== "root-scrollable"
         );
-        if (l)
-          e = l.item.id, t = "before";
+        if (s)
+          e = s.item.id, t = "before";
         else {
-          const i = n.slice(0, s).filter(
+          const n = o.slice(0, i).filter(
             (a) => a.item.id !== "root-frozen" && a.item.id !== "root-scrollable"
           );
-          i.length > 0 && (e = i[i.length - 1].item.id, t = "after");
+          n.length > 0 && (e = n[n.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;
+      const i = E.current;
+      if (i) {
+        const s = i.querySelector(`[data-item-id="${e}"]`);
+        if (s) {
+          const n = s.getBoundingClientRect(), a = n.top + n.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) => {
+  }, [h, r, x, o]), k = b.useMemo(() => o.map((e) => e.item.id), [o]), S = b.useMemo(() => r && o.find((e) => e.item.id === r) || null, [r, o]), A = f((e) => {
     w(e);
   }, [w]), B = f((e) => {
-    const { active: t, over: r } = e;
-    !r || t.id === r.id ? d(null) : d(r.id), y(e);
+    const { active: t, over: l } = e;
+    !l || t.id === l.id ? d(null) : d(l.id), y(e);
   }, [y]), F = f((e) => {
     d(null), N(e);
   }, [N]), M = f(() => {
@@ -91,22 +91,22 @@ const q = "0 -2px 0 0 var(--color-primary)", G = "0 2px 0 0 var(--color-primary)
   }, [C]);
   if (u) return null;
   const D = () => {
-    const e = o !== null;
+    const e = r !== 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);
+      const l = o.findIndex((i) => i.item.id === g.overId);
+      l !== -1 && (t = g.position === "before" ? l : l + 1);
     }
-    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: "w-full pb-12", children: o.map(({ item: l, level: i, indentLevel: s }, n) => {
+      const a = t === n, P = t === n + 1 && n === o.length - 1, I = a ? G : P ? J : void 0;
       return /* @__PURE__ */ c(
         "div",
         {
           className: "relative",
           style: I ? { boxShadow: I } : void 0,
-          children: L(r, s)
+          children: L(l, i, s)
         },
-        r.id
+        l.id
       );
     }) });
   };
@@ -117,21 +117,21 @@ const q = "0 -2px 0 0 var(--color-primary)", G = "0 2px 0 0 var(--color-primary)
         ref: E,
         className: "flex-1 p-1 overflow-y-auto overflow-x-hidden relative",
         children: m ? /* @__PURE__ */ c(
-          X,
+          $,
           {
             sensors: p,
-            collisionDetection: j,
+            collisionDetection: H,
             onDragStart: A,
             onDragOver: B,
             onDragEnd: F,
             onDragCancel: M,
-            children: /* @__PURE__ */ c($, { items: k, strategy: J, children: D() })
+            children: /* @__PURE__ */ c(j, { items: k, strategy: K, children: D() })
           }
         ) : D()
       }
     ),
-    o && S && /* @__PURE__ */ c(
-      K,
+    r && S && /* @__PURE__ */ c(
+      Q,
       {
         item: S.item,
         pointerX: _,
@@ -141,5 +141,5 @@ const q = "0 -2px 0 0 var(--color-primary)", G = "0 2px 0 0 var(--color-primary)
   ] });
 };
 export {
-  ne as NestedListContent
+  oe as NestedListContent
 };

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

@@ -3,6 +3,7 @@ import { NestedListItem } from '../../types/nested-list.types';
 interface SortableItemProps {
     item: NestedListItem;
     level: number;
+    indentLevel: number;
     isCollapsed: boolean;
     onToggle: (itemId: string) => void;
     onToggleCollapse: (itemId: string) => void;

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

@@ -1,87 +1,88 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import S, { useMemo as j } from "react";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import R, { useMemo as S } from "react";
 import { useSortable as z } from "@dnd-kit/sortable";
 import { useDroppable as D } from "@dnd-kit/core";
 import { Checkbox as H } from "../../checkbox.js";
 import { ChevronRight as P, Drag as _ } from "../../../../icons/index.js";
-import { cn as a } from "../../../../lib/utils.js";
-import { useImpactNovaI18n as g } from "../../../../i18n/ImpactNovaI18nContext.js";
+import { cn as c } from "../../../../lib/utils.js";
+import { useImpactNovaI18n as v } from "../../../../i18n/ImpactNovaI18nContext.js";
 const $ = (e, r) => {
-  const n = "flex items-center gap-1 py-[3px] px-2 rounded transition-colors duration-150 min-w-0";
-  return e ? a(n, "opacity-40 bg-canvas-muted") : r ? a(n, "bg-feedback-error-surface border border-destructive animate-pulse") : a(n, "hover:bg-canvas-muted");
+  const n = "flex items-start gap-1 py-[3px] pr-2 rounded transition-colors duration-150 min-w-0";
+  return e ? c(n, "opacity-40 bg-canvas-muted") : r ? c(n, "bg-feedback-error-surface border border-destructive animate-pulse") : c(n, "hover:bg-canvas-muted");
 }, E = ({ item: e, isAnyDragging: r, renderActions: n }) => {
-  const { t: d } = g(), s = !e.children || e.children.length === 0, {
-    setNodeRef: p,
-    isOver: c
+  const { t: s } = v(), a = !e.children || e.children.length === 0, {
+    setNodeRef: l,
+    isOver: o
   } = D({
     id: `droppable-${e.id}`,
     data: { sectionId: e.id },
-    disabled: !s
+    disabled: !a
   });
-  return /* @__PURE__ */ l("div", { ref: s ? p : void 0, children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ i("div", { ref: a ? l : void 0, children: [
+    /* @__PURE__ */ i(
       "div",
       {
-        className: a(
+        className: c(
           "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",
-          c && r && s && "bg-canvas-tint rounded"
+          o && r && a && "bg-canvas-tint rounded"
         ),
         children: [
-          /* @__PURE__ */ l("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ i("div", { className: "flex items-center", children: [
             e.label,
-            c && r && s && /* @__PURE__ */ t("span", { className: "ml-2 text-brand text-[11px]", children: d("nestedList.dropHere") })
+            o && r && a && /* @__PURE__ */ t("span", { className: "ml-2 text-brand text-[11px]", children: s("nestedList.dropHere") })
           ] }),
           n?.(e, { isLeaf: !1, level: 0 })
         ]
       }
     ),
-    s && /* @__PURE__ */ t(
+    a && /* @__PURE__ */ t(
       "div",
       {
-        className: a(
+        className: c(
           "mx-2 my-1 rounded border-2 border-dashed min-h-[36px] flex items-center justify-center text-[11px] transition-colors",
-          c && r ? "border-brand bg-canvas-tint text-brand" : "border-stroke-hairline text-content-empty"
+          o && r ? "border-brand bg-canvas-tint text-brand" : "border-stroke-hairline text-content-empty"
         ),
-        children: d(c && r ? "nestedList.releaseToDrop" : "nestedList.dragHere")
+        children: s(o && r ? "nestedList.releaseToDrop" : "nestedList.dragHere")
       }
     )
   ] });
 }, O = ({
   item: e,
   level: r,
-  isCollapsed: n,
-  onToggle: d,
-  onToggleCollapse: s,
-  isAnyDragging: p = !1,
-  isOver: c = !1,
-  isValidDrop: M = !1,
-  enableDragDrop: k = !0,
-  enableCollapse: h = !0,
+  indentLevel: n,
+  isCollapsed: s,
+  onToggle: a,
+  onToggleCollapse: l,
+  isAnyDragging: o = !1,
+  isOver: M = !1,
+  isValidDrop: F = !1,
+  enableDragDrop: g = !0,
+  enableCollapse: k = !0,
   shouldBlink: N = !1,
-  isDragDisabled: u = !1,
+  isDragDisabled: b = !1,
   renderLabelExtras: y,
   renderActions: f
 }) => {
-  const { t: m } = g(), x = e.category === "structure", i = e.children && e.children.length > 0, v = !i && e.category !== "structure", C = j(() => !e.children || e.children.length === 0 || e.children.every((b) => b.checked) ? !1 : e.children.some((b) => b.checked), [e.children]), {
-    attributes: I,
-    listeners: w,
+  const { t: m } = v(), u = e.category === "structure", p = e.children && e.children.length > 0, x = !p && e.category !== "structure", w = S(() => !e.children || e.children.length === 0 || e.children.every((h) => h.checked) ? !1 : e.children.some((h) => h.checked), [e.children]), {
+    attributes: C,
+    listeners: I,
     setNodeRef: L,
-    isDragging: R,
+    isDragging: j,
     // transform and transition intentionally not applied — we use a custom
     // FloatingClone and manual insertion line instead of dnd-kit's built-in animations.
-    transform: F,
-    transition: T
+    transform: T,
+    transition: V
   } = z({
     id: e.id,
     data: {
       level: r,
-      hasChildren: i,
-      isExpanded: !n
+      hasChildren: p,
+      isExpanded: !s
     },
-    disabled: x || e.disabled || u
+    disabled: u || e.disabled || b
   });
-  return x ? /* @__PURE__ */ t(E, { item: e, isAnyDragging: p, renderActions: f }) : /* @__PURE__ */ t(
+  return u ? /* @__PURE__ */ t(E, { item: e, isAnyDragging: o, renderActions: f }) : /* @__PURE__ */ t(
     "div",
     {
       ref: L,
@@ -90,79 +91,80 @@ const $ = (e, r) => {
       "data-level": r,
       "data-checked": e.checked,
       "data-disabled": e.disabled,
-      "data-collapsed": n,
-      children: /* @__PURE__ */ l(
+      "data-collapsed": s,
+      children: /* @__PURE__ */ i(
         "div",
         {
-          className: $(R, N),
+          className: $(j, N),
           style: {
-            paddingLeft: `${8 + r * 20}px`
+            paddingLeft: `${8 + n * 20}px`
           },
           children: [
-            h && i && /* @__PURE__ */ t(
+            /* @__PURE__ */ t("div", { className: "shrink-0 w-4 h-4 flex items-center justify-center", children: k && p && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                onClick: (o) => {
-                  o.stopPropagation(), s(e.id);
+                onClick: (d) => {
+                  d.stopPropagation(), l(e.id);
                 },
-                onMouseDown: (o) => o.stopPropagation(),
-                className: "p-1 hover:bg-muted rounded-full transition-colors flex items-center text-content-icon hover:text-brand",
-                "aria-label": m(n ? "nestedList.expand" : "nestedList.collapse"),
+                onMouseDown: (d) => d.stopPropagation(),
+                className: "flex h-4 w-4 items-center justify-center rounded-full p-0 hover:bg-muted transition-colors text-content-icon hover:text-brand",
+                "aria-label": m(s ? "nestedList.expand" : "nestedList.collapse"),
                 children: /* @__PURE__ */ t(
                   P,
                   {
                     size: "16px",
-                    className: a("transition-transform", !n && "rotate-90")
+                    className: c("transition-transform", !s && "rotate-90")
                   }
                 )
               }
-            ),
-            (!h || !i) && /* @__PURE__ */ t("div", { className: "w-6" }),
-            /* @__PURE__ */ t(
+            ) }),
+            /* @__PURE__ */ t("div", { className: "shrink-0 mt-0.5", children: /* @__PURE__ */ t(
               H,
               {
                 id: `checkbox-${e.id}`,
-                checked: C ? "indeterminate" : e.checked,
-                onCheckedChange: () => d(e.id),
-                disabled: e.disabled
+                checked: w ? "indeterminate" : e.checked,
+                onCheckedChange: () => a(e.id),
+                disabled: e.disabled,
+                className: "mr-0"
               }
-            ),
-            k && !u && /* @__PURE__ */ t(
+            ) }),
+            g && !b && /* @__PURE__ */ t(
               "div",
               {
+                ...C,
                 ...I,
-                ...w,
-                className: "cursor-grab active:cursor-grabbing p-0 hover:bg-muted rounded flex items-center",
+                className: "shrink-0 mt-0.5 cursor-grab active:cursor-grabbing p-0 hover:bg-muted rounded flex items-center h-4",
                 style: {
                   pointerEvents: "auto",
                   position: "relative",
                   zIndex: 30,
                   touchAction: "none"
                 },
-                onPointerDown: (o) => {
-                  o.stopPropagation();
+                onPointerDown: (d) => {
+                  d.stopPropagation();
                 },
                 children: /* @__PURE__ */ t(_, { size: "14px", className: "text-content-icon" })
               }
             ),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ i(
               "label",
               {
                 htmlFor: `checkbox-${e.id}`,
-                className: "text-[13px] text-content capitalize ml-1 cursor-pointer select-none min-w-0",
-                children: /* @__PURE__ */ t("span", { className: "break-words", children: e.label })
+                className: "min-w-0 flex-1 flex flex-wrap items-center gap-x-1.5 gap-y-0 text-[13px] leading-5 text-content capitalize cursor-pointer select-none",
+                children: [
+                  /* @__PURE__ */ t("span", { className: "break-words", children: e.label }),
+                  y?.(e, { isLeaf: x, level: r })
+                ]
               }
             ),
-            y?.(e, { isLeaf: v, level: r }),
-            /* @__PURE__ */ t("div", { className: "flex-1" }),
-            f?.(e, { isLeaf: v, level: r })
+            /* @__PURE__ */ t("div", { className: "shrink-0 mt-0.5", children: f?.(e, { isLeaf: x, level: r }) })
           ]
         }
       )
     }
   );
-}, X = S.memo(O);
+}, Y = R.memo(O);
 export {
-  X as SortableItem
+  Y as SortableItem
 };