impact-nova 2.0.9 → 2.1.0-alpha.2

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

@@ -0,0 +1,151 @@
+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(
+    "div",
+    {
+      className: "fixed z-50 pointer-events-none",
+      style: { top: `${g + 16}px`, left: `${v + 12}px` },
+      children: /* @__PURE__ */ O(
+        "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 })
+          ]
+        }
+      )
+    }
+  ),
+  document.body
+), le = ({
+  isListCollapsed: x,
+  enableDragDrop: v,
+  sensors: g,
+  items: n,
+  renderItem: Y,
+  onDragStart: y,
+  onDragOver: I,
+  onDragEnd: N,
+  onDragCancel: C,
+  activeId: o
+}) => {
+  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";
+    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(
+          (i) => i.item.id !== "root-frozen" && i.item.id !== "root-scrollable"
+        );
+        if (c)
+          t = c.item.id, l = "before";
+        else {
+          const i = n.slice(0, s).filter(
+            (d) => d.item.id !== "root-frozen" && d.item.id !== "root-scrollable"
+          );
+          i.length > 0 && (t = i[i.length - 1].item.id, l = "after");
+        }
+      }
+    } else {
+      const s = E.current;
+      if (s) {
+        const c = s.querySelector(`[data-item-id="${t}"]`);
+        if (c) {
+          const i = c.getBoundingClientRect(), d = i.top + i.height / 2;
+          l = r < d ? "before" : "after";
+        }
+      }
+    }
+    return { overId: t, position: l };
+  }, [o, n]), [w, u] = h(null);
+  _(() => {
+    if (!o) return;
+    const e = (r) => {
+      A(r.clientX), B(r.clientY), u(p(S, r.clientY));
+    };
+    return window.addEventListener("pointermove", e), () => window.removeEventListener("pointermove", e);
+  }, [o, S, p]), _(() => {
+    if (!o) 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) => {
+    const { active: r, over: t } = e;
+    if (!t || r.id === t.id)
+      m(null), u(null);
+    else {
+      const l = t.id;
+      m(l), u(p(l, b));
+    }
+    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;
+    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
+      );
+    }) });
+  };
+  return /* @__PURE__ */ O("div", { className: "flex flex-col min-h-0 h-full", children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: E,
+        className: "flex-1 p-1 overflow-y-auto overflow-x-hidden relative",
+        children: v ? /* @__PURE__ */ a(
+          M,
+          {
+            sensors: g,
+            collisionDetection: G,
+            onDragStart: P,
+            onDragOver: T,
+            onDragEnd: X,
+            onDragCancel: $,
+            children: /* @__PURE__ */ a(q, { items: F, strategy: U, children: R() })
+          }
+        ) : R()
+      }
+    ),
+    o && D && /* @__PURE__ */ a(
+      V,
+      {
+        item: D.item,
+        pointerX: k,
+        pointerY: b
+      }
+    )
+  ] });
+};
+export {
+  le as NestedListContent
+};

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { NestedListItem } from '../nested-list.types';
+interface NestedListDragOverlayProps {
+    activeItem: NestedListItem | null;
+}
+export declare const NestedListDragOverlay: React.FC<NestedListDragOverlayProps>;
+export {};

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

@@ -0,0 +1,89 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import "react";
+import { Checkbox as N } from "../../../forms/checkbox/checkbox.js";
+import { Input as v } from "../../../forms/input/input.js";
+import { ChevronRight as k, Search as g } from "impact-nova-icons";
+import { cn as C } from "../../../../lib/utils.js";
+import { useImpactNovaI18n as z } from "../../../../i18n/use-impact-nova-i18n.js";
+const E = ({
+  hasItemsWithChildren: r,
+  isListCollapsed: c,
+  onCollapseAll: y,
+  enableSearch: n,
+  enableSelectAll: e,
+  groupLabel: i,
+  allChecked: m,
+  isIndeterminate: a = !1,
+  onSelectAll: d,
+  searchText: x,
+  onSearchChange: l,
+  searchPlaceholder: p,
+  selectAllLabel: f = "Select All",
+  enableCollapse: s = !0
+}) => {
+  const { t: u } = z();
+  if (!(n || e || i || s && r)) return null;
+  const h = /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      onClick: y,
+      className: "p-1 hover:bg-muted rounded-full transition-colors flex items-center text-content-icon hover:text-brand",
+      "aria-label": u(c ? "nestedList.expandAll" : "nestedList.collapseAll"),
+      children: /* @__PURE__ */ t(
+        k,
+        {
+          size: "16px",
+          className: C("transition-transform", !c && "rotate-90")
+        }
+      )
+    }
+  );
+  return i ? /* @__PURE__ */ o("div", { className: "mb-3", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center gap-1 mb-2", children: [
+      s && r && h,
+      /* @__PURE__ */ t("span", { className: "text-[13px] font-semibold text-content-tertiary", children: i })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
+      e && /* @__PURE__ */ t(
+        N,
+        {
+          checked: a ? "indeterminate" : m,
+          onCheckedChange: d
+        }
+      ),
+      n ? /* @__PURE__ */ t("div", { className: "flex-1 ml-auto", children: /* @__PURE__ */ t(
+        v,
+        {
+          type: "text",
+          placeholder: p,
+          value: x || "",
+          onChange: l,
+          prefix: /* @__PURE__ */ t(g, { size: "14px", color: "currentColor" })
+        }
+      ) }) : e && /* @__PURE__ */ t("span", { className: "flex-1 ml-auto text-[13px] font-semibold text-content-tertiary", children: f })
+    ] })
+  ] }) : /* @__PURE__ */ o("div", { className: "flex items-center gap-1 mb-3", children: [
+    s && r && h,
+    e && /* @__PURE__ */ t(
+      N,
+      {
+        checked: a ? "indeterminate" : m,
+        onCheckedChange: d
+      }
+    ),
+    n ? /* @__PURE__ */ t("div", { className: "flex-1 ml-auto", children: /* @__PURE__ */ t(
+      v,
+      {
+        type: "text",
+        placeholder: p,
+        value: x || "",
+        onChange: l,
+        prefix: /* @__PURE__ */ t(g, { size: "14px", color: "currentColor" })
+      }
+    ) }) : e && /* @__PURE__ */ t("span", { className: "flex-1 ml-auto text-[13px] font-semibold text-content-tertiary", children: f })
+  ] });
+};
+export {
+  E as NestedListHeader
+};

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

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { NestedListItem } from '../nested-list.types';
+interface SortableItemProps {
+    item: NestedListItem;
+    level: number;
+    indentLevel: number;
+    isCollapsed: boolean;
+    onToggle: (itemId: string) => void;
+    onToggleCollapse: (itemId: string) => void;
+    isAnyDragging?: boolean;
+    isOver?: boolean;
+    isValidDrop?: boolean;
+    enableDragDrop?: boolean;
+    enableCollapse?: boolean;
+    shouldBlink?: boolean;
+    isDragDisabled?: boolean;
+    /** Render content right after the label (e.g., indicators) */
+    renderLabelExtras?: (item: NestedListItem, context: {
+        isLeaf: boolean;
+        level: number;
+    }) => React.ReactNode;
+    /** Render content at the end of the row (e.g., actions, switches) */
+    renderActions?: (item: NestedListItem, context: {
+        isLeaf: boolean;
+        level: number;
+    }) => React.ReactNode;
+}
+export declare const SortableItem: React.NamedExoticComponent<SortableItemProps>;
+export {};

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

@@ -0,0 +1,166 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import R, { useMemo as $ } from "react";
+import { useSortable as H } from "@dnd-kit/sortable";
+import { useDroppable as S } from "@dnd-kit/core";
+import { Checkbox as z } from "../../../forms/checkbox/checkbox.js";
+import { ChevronRight as P, Drag as D } from "impact-nova-icons";
+import { cn as c } from "../../../../lib/utils.js";
+import { useImpactNovaI18n as v } from "../../../../i18n/use-impact-nova-i18n.js";
+const E = (e, r) => {
+  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");
+}, M = ({ item: e, isAnyDragging: r, renderActions: n }) => {
+  const { t: a } = v(), s = !e.children || e.children.length === 0, {
+    setNodeRef: i,
+    isOver: o
+  } = S({
+    id: `droppable-${e.id}`,
+    data: { sectionId: e.id },
+    disabled: !s
+  });
+  return /* @__PURE__ */ l("div", { ref: s ? i : void 0, children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        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",
+          o && r && s && "bg-canvas-tint rounded"
+        ),
+        children: [
+          /* @__PURE__ */ l("div", { className: "flex items-center", children: [
+            e.label,
+            o && r && s && /* @__PURE__ */ t("span", { className: "ml-2 text-brand text-[11px]", children: a("nestedList.dropHere") })
+          ] }),
+          n?.(e, { isLeaf: !1, level: 0 })
+        ]
+      }
+    ),
+    s && /* @__PURE__ */ t(
+      "div",
+      {
+        className: c(
+          "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"
+        ),
+        children: a(o && r ? "nestedList.releaseToDrop" : "nestedList.dragHere")
+      }
+    )
+  ] });
+}, O = ({
+  item: e,
+  level: r,
+  indentLevel: n,
+  isCollapsed: a,
+  onToggle: s,
+  onToggleCollapse: i,
+  isAnyDragging: o = !1,
+  enableDragDrop: g = !0,
+  enableCollapse: k = !0,
+  shouldBlink: N = !1,
+  isDragDisabled: u = !1,
+  renderLabelExtras: y,
+  renderActions: f
+}) => {
+  const { t: h } = v(), m = e.category === "structure", p = e.children && e.children.length > 0, x = !p && e.category !== "structure", w = $(() => !e.children || e.children.length === 0 || e.children.every((b) => b.checked) ? !1 : e.children.some((b) => b.checked), [e.children]), {
+    attributes: C,
+    listeners: I,
+    setNodeRef: L,
+    isDragging: j
+  } = H({
+    id: e.id,
+    data: {
+      level: r,
+      hasChildren: p,
+      isExpanded: !a
+    },
+    disabled: m || e.disabled || u
+  });
+  return m ? /* @__PURE__ */ t(M, { item: e, isAnyDragging: o, renderActions: f }) : /* @__PURE__ */ t(
+    "div",
+    {
+      ref: L,
+      className: "relative",
+      "data-item-id": e.id,
+      "data-level": r,
+      "data-checked": e.checked,
+      "data-disabled": e.disabled,
+      "data-collapsed": a,
+      children: /* @__PURE__ */ l(
+        "div",
+        {
+          className: E(j, N),
+          style: {
+            paddingLeft: `${8 + n * 20}px`
+          },
+          children: [
+            /* @__PURE__ */ t("div", { className: "shrink-0 w-4 h-4 flex items-center justify-center", children: k && p && /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: (d) => {
+                  d.stopPropagation(), i(e.id);
+                },
+                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": h(a ? "nestedList.expand" : "nestedList.collapse"),
+                children: /* @__PURE__ */ t(
+                  P,
+                  {
+                    size: "16px",
+                    className: c("transition-transform", !a && "rotate-90")
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ t("div", { className: "shrink-0 mt-0.5", children: /* @__PURE__ */ t(
+              z,
+              {
+                id: `checkbox-${e.id}`,
+                checked: w ? "indeterminate" : e.checked,
+                onCheckedChange: () => s(e.id),
+                disabled: e.disabled,
+                className: "mr-0",
+                "aria-label": e.label
+              }
+            ) }),
+            g && !u && /* @__PURE__ */ t(
+              "div",
+              {
+                ...C,
+                ...I,
+                "aria-label": `${h("aria.dragHandle")}: ${e.label}`,
+                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: (d) => {
+                  d.stopPropagation();
+                },
+                children: /* @__PURE__ */ t(D, { size: "14px", className: "text-content-icon" })
+              }
+            ),
+            /* @__PURE__ */ l(
+              "label",
+              {
+                htmlFor: `checkbox-${e.id}`,
+                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 })
+                ]
+              }
+            ),
+            /* @__PURE__ */ t("div", { className: "shrink-0 mt-0.5", children: f?.(e, { isLeaf: x, level: r }) })
+          ]
+        }
+      )
+    }
+  );
+}, U = R.memo(O);
+export {
+  U as SortableItem
+};

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

@@ -0,0 +1,34 @@
+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
+ */
+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;
+}
+export declare const useNestedListDragDrop: ({ items, onDragEnd, collapsedItems, canDrag, }: 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;
+};
+export {};