impact-nova 2.0.9 → 2.1.0-alpha.10

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 v } from "../../../forms/checkbox/checkbox.js";
+import { Input as N } 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: a,
+  isIndeterminate: m = !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-canvas-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(
+        v,
+        {
+          checked: m ? "indeterminate" : a,
+          onCheckedChange: d
+        }
+      ),
+      n ? /* @__PURE__ */ t("div", { className: "flex-1 ml-auto", children: /* @__PURE__ */ t(
+        N,
+        {
+          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(
+      v,
+      {
+        checked: m ? "indeterminate" : a,
+        onCheckedChange: d
+      }
+    ),
+    n ? /* @__PURE__ */ t("div", { className: "flex-1 ml-auto", children: /* @__PURE__ */ t(
+      N,
+      {
+        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,31 @@
+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;
+}
+declare const LEADING_RAIL_CLASS = "flex shrink-0 items-center h-5 gap-0.5";
+declare const DRAG_HANDLE_CLASS = "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";
+export { LEADING_RAIL_CLASS, DRAG_HANDLE_CLASS };
+export declare const SortableItem: React.NamedExoticComponent<SortableItemProps>;

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

@@ -0,0 +1,168 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import R, { useMemo as j } from "react";
+import { useSortable as _ } from "@dnd-kit/sortable";
+import { useDroppable as H } from "@dnd-kit/core";
+import { Checkbox as D } from "../../../forms/checkbox/checkbox.js";
+import { ChevronRight as $, Drag as E } from "impact-nova-icons";
+import { cn as d } from "../../../../lib/utils.js";
+import { useImpactNovaI18n as k } from "../../../../i18n/use-impact-nova-i18n.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 } = k(), a = !e.children || e.children.length === 0, {
+    setNodeRef: l,
+    isOver: o
+  } = H({
+    id: `droppable-${e.id}`,
+    data: { sectionId: e.id },
+    disabled: !a
+  });
+  return /* @__PURE__ */ i("div", { ref: a ? l : void 0, children: [
+    /* @__PURE__ */ i(
+      "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"
+        ),
+        children: [
+          /* @__PURE__ */ i("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") })
+          ] }),
+          s?.(e, { isLeaf: !1, level: 0 })
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ t(
+      "div",
+      {
+        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"
+        ),
+        children: n(o && r ? "nestedList.releaseToDrop" : "nestedList.dragHere")
+      }
+    )
+  ] });
+}, M = ({
+  item: e,
+  level: r,
+  indentLevel: s,
+  isCollapsed: n,
+  onToggle: a,
+  onToggleCollapse: l,
+  isAnyDragging: o = !1,
+  enableDragDrop: N = !0,
+  enableCollapse: g = !0,
+  shouldBlink: y = !1,
+  isDragDisabled: f = !1,
+  renderLabelExtras: m,
+  renderActions: x
+}) => {
+  const { t: h } = k(), v = e.category === "structure", p = e.children && e.children.length > 0, b = !p && e.category !== "structure", C = j(() => !e.children || e.children.length === 0 || e.children.every((u) => u.checked) ? !1 : e.children.some((u) => u.checked), [e.children]), {
+    attributes: L,
+    listeners: w,
+    setNodeRef: S,
+    isDragging: I
+  } = _({
+    id: e.id,
+    data: {
+      level: r,
+      hasChildren: p,
+      isExpanded: !n
+    },
+    disabled: v || e.disabled || f
+  });
+  return v ? /* @__PURE__ */ t(G, { item: e, isAnyDragging: o, renderActions: x }) : /* @__PURE__ */ t(
+    "div",
+    {
+      ref: S,
+      className: "relative",
+      "data-item-id": e.id,
+      "data-level": r,
+      "data-checked": e.checked,
+      "data-disabled": e.disabled,
+      "data-collapsed": n,
+      children: /* @__PURE__ */ i(
+        "div",
+        {
+          className: P(I, y),
+          style: {
+            paddingLeft: `${8 + s * 20}px`
+          },
+          children: [
+            /* @__PURE__ */ i("div", { className: z, children: [
+              /* @__PURE__ */ t("div", { className: A, children: g && p && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: (c) => {
+                    c.stopPropagation(), l(e.id);
+                  },
+                  onMouseDown: (c) => c.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"),
+                  children: /* @__PURE__ */ t(
+                    $,
+                    {
+                      size: "16px",
+                      className: d("transition-transform", !n && "rotate-90")
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ t("div", { className: "flex h-5 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ t(
+                D,
+                {
+                  id: `checkbox-${e.id}`,
+                  checked: C ? "indeterminate" : e.checked,
+                  onCheckedChange: () => a(e.id),
+                  disabled: e.disabled,
+                  className: "mr-0",
+                  "aria-label": e.label
+                }
+              ) }),
+              N && !f ? /* @__PURE__ */ t(
+                "div",
+                {
+                  ...L,
+                  ...w,
+                  "aria-label": `${h("aria.dragHandle")}: ${e.label}`,
+                  className: O,
+                  style: {
+                    pointerEvents: "auto",
+                    position: "relative",
+                    zIndex: 30,
+                    touchAction: "none"
+                  },
+                  onPointerDown: (c) => {
+                    c.stopPropagation();
+                  },
+                  children: /* @__PURE__ */ t(E, { size: "14px" })
+                }
+              ) : /* @__PURE__ */ t("div", { className: "w-5 shrink-0", "aria-hidden": !0 })
+            ] }),
+            /* @__PURE__ */ t(
+              "label",
+              {
+                htmlFor: `checkbox-${e.id}`,
+                className: "min-w-0 flex-1 min-h-5 text-[13px] leading-5 text-content capitalize cursor-pointer select-none",
+                children: /* @__PURE__ */ t("span", { className: "break-words", children: e.label })
+              }
+            ),
+            m?.(e, { isLeaf: b, level: r }) ? /* @__PURE__ */ t("div", { className: "shrink-0 self-center flex items-center", children: m(e, { isLeaf: b, level: r }) }) : null,
+            /* @__PURE__ */ t("div", { className: "shrink-0 self-center flex items-center", children: x?.(e, { isLeaf: b, level: r }) })
+          ]
+        }
+      )
+    }
+  );
+}, W = R.memo(M);
+export {
+  O as DRAG_HANDLE_CLASS,
+  z as LEADING_RAIL_CLASS,
+  W 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 {};