@reforma/components 0.4.1 → 0.6.0

package/dist/SortableList/SortableList.d.ts

@@ -35,13 +35,19 @@ interface SortableListBaseProps<T> {
     items: readonly T[];
     getKey?: (item: T, path: readonly number[]) => string;
     getTextValue: (item: T) => string;
-    onChange: (items: T[]) => void;
+    /** `move` is the dragged item and its index among its new siblings. */
+    onChange: (items: T[], move: {
+        item: T;
+        index: number;
+    }) => void;
     children: (item: T, props: SortableListItemRenderProps<T>) => ReactNode;
     canDrop?: (context: SortableListDropContext<T>) => boolean;
     getDragHandleOptions?: (item: T, context: SortableListItemContext<T>) => SortableListDragHandleOptions;
     className?: string;
     gap?: 'sm' | 'md';
     nestedGap?: 'sm' | 'md';
+    /** `false` drops the grip: the whole item starts a drag. Default `true`. */
+    handle?: boolean;
     'aria-label': string;
 }
 interface FlatSortableListProps {
@@ -56,12 +62,12 @@ interface NestedSortableListProps<T> {
 }
 export type SortableListProps<T> = SortableListBaseProps<T> & (FlatSortableListProps | NestedSortableListProps<T>);
 /**
- * Sortable collection with a dedicated pointer handle and optional child groups.
+ * Sortable collection with a pointer handle (or whole-item drag) and optional child groups.
  *
  * The rendered item is the complete draggable surface. Child collections can
  * accept moves when the caller's drop rules allow it.
  */
-export declare function SortableList<T>({ items, getKey: getItemKey, getTextValue, getChildren, setChildren, canHaveChildren, onChange, children, canDrop, getDragHandleOptions, className, gap, nestedGap, 'aria-label': ariaLabel, }: SortableListProps<T>): import("react").JSX.Element;
+export declare function SortableList<T>({ items, getKey: getItemKey, getTextValue, getChildren, setChildren, canHaveChildren, onChange, children, canDrop, getDragHandleOptions, className, gap, nestedGap, handle, 'aria-label': ariaLabel, }: SortableListProps<T>): import("react").JSX.Element;
 export declare namespace SortableList {
     var displayName: string;
 }

package/dist/SortableList/SortableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../../src/SortableList/SortableList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../../src/SortableList/SortableList.tsx"],"names":[],"mappings":"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"}

package/dist/SortableList/SortableList.js

@@ -1,192 +1,203 @@
-import { DragDropProvider as Z, PointerSensor as G, DragOverlay as ee, useDroppable as ne } from "@dnd-kit/react";
-import { isSortable as _, useSortable as te } from "@dnd-kit/react/sortable";
-import { DotsDrag as re } from "@reforma/icons/14";
-import { cn as ie } from "@reforma/lib";
-import { useRef as j, useCallback as oe, useMemo as ae } from "react";
-import { For as F } from "../For/For.js";
+import { DragDropProvider as ee, PointerSensor as ne, DragOverlay as te, useDroppable as re } from "@dnd-kit/react";
+import { isSortable as _, useSortable as ie } from "@dnd-kit/react/sortable";
+import { DotsDrag as oe } from "@reforma/icons/14";
+import { cn as ae } from "@reforma/lib";
+import { useCallback as le, useMemo as se, useState as de } from "react";
+import { For as j } from "../For/For.js";
+import { Show as ce } from "../Show/Show.js";
 import f from "./SortableList.module.css.js";
-import { buildSortableTree as le, moveSortableTreeNodeToIndex as se, restoreSortableTree as ce, findSortableTreeNode as $ } from "./sortableTree.js";
-import { jsxs as w, jsx as o } from "react/jsx-runtime";
-const A = "reforma-sortable:root", D = "reforma-sortable:children:", de = "reforma-sortable:item", ue = "reforma-sortable:collection", fe = [G], me = "sortable:primitive:";
-function ge({
+import { buildSortableTree as ue, moveSortableTreeNodeToIndex as fe, restoreSortableTree as me, findSortableTreeNode as $ } from "./sortableTree.js";
+import { jsxs as A, jsx as o } from "react/jsx-runtime";
+const H = "reforma-sortable:root", D = "reforma-sortable:children:", ve = "reforma-sortable:item", pe = "reforma-sortable:collection", ge = [ne], he = "sortable:primitive:", w = /* @__PURE__ */ new WeakMap();
+let F = 0;
+function be({
   items: e,
   getKey: n,
   getTextValue: t,
   getChildren: r,
   setChildren: i,
   canHaveChildren: a,
-  onChange: u,
-  children: h,
-  canDrop: m,
+  onChange: c,
+  children: m,
+  canDrop: v,
   getDragHandleOptions: x,
   className: P,
-  gap: y = "md",
-  nestedGap: s = y,
-  "aria-label": S
+  gap: b = "md",
+  nestedGap: S = b,
+  handle: u = !0,
+  "aria-label": I
 }) {
-  const g = j({
-    nextId: 0,
-    objectKeys: /* @__PURE__ */ new WeakMap()
-  }), T = oe((c, v) => {
-    const C = n?.(c, v);
-    if (C != null)
-      return C;
-    if (typeof c != "object" || c == null)
-      return `${me}${v.join(".")}`;
-    const d = g.current.objectKeys.get(c);
+  const y = le((s, g) => {
+    const E = n?.(s, g);
+    if (E != null)
+      return E;
+    if (typeof s != "object" || s == null)
+      return `${he}${g.join(".")}`;
+    const d = w.get(s);
     if (d)
       return d;
-    const b = `sortable:item:${g.current.nextId}`;
-    return g.current.nextId += 1, g.current.objectKeys.set(c, b), b;
-  }, [n]), p = ae(() => le(e, {
-    getKey: T,
+    const h = `sortable:item:${F}`;
+    return F += 1, w.set(s, h), h;
+  }, [n]), p = se(() => ue(e, {
+    getKey: y,
     getTextValue: t,
     getChildren: r,
     canHaveChildren: a
-  }), [a, r, T, t, e]), I = j({
+  }), [a, r, y, t, e]), [N, Q] = de({
     items: e,
     revision: 0
   });
-  I.current.items !== e && (I.current = {
+  N.items !== e && Q({
     items: e,
-    revision: I.current.revision + 1
+    revision: N.revision + 1
   });
-  function J(c) {
+  function U(s) {
     const {
-      canceled: v,
-      operation: C
-    } = c, {
+      canceled: g,
+      operation: E
+    } = s, {
       source: d,
-      target: b
-    } = C;
-    if (v || !d || !_(d))
+      target: h
+    } = E;
+    if (g || !d || !_(d))
       return;
-    const E = O(d)?.node;
-    if (!E)
+    const T = O(d)?.node;
+    if (!T)
       return;
-    const N = q(b), L = N?.kind === "node" ? N.node : null;
+    const C = J(h), L = C?.kind === "node" ? C.node : null;
     let l;
-    if (N?.kind === "collection" ? l = {
-      parentNode: N.parentNode,
-      index: N.parentNode?.children.length ?? p.length,
+    if (C?.kind === "collection" ? l = {
+      parentNode: C.parentNode,
+      index: C.parentNode?.children.length ?? p.length,
       dropPosition: "end"
-    } : L && b && _(b) ? l = ve(p, b.group, d.index, L) : l = null, !l)
+    } : L && h && _(h) ? l = xe(p, h.group, d.index, L) : l = null, !l)
       return;
-    const Q = W(E, l.parentNode, L, l.dropPosition);
-    if (!X(E, l.parentNode) || m && !m(Q))
+    const Z = X(T, l.parentNode, L, l.dropPosition);
+    if (!z(T, l.parentNode) || v && !v(Z))
       return;
-    const K = V(d.initialGroup), R = l.parentNode?.id ?? null;
+    const K = q(d.initialGroup), R = l.parentNode?.id ?? null;
     if (K !== void 0 && K === R && d.initialIndex === l.index)
       return;
-    const U = se(p, E.id, R, l.index);
-    u(ce(U, i));
+    const G = fe(p, T.id, R, l.index);
+    c(me(G, i), {
+      item: T.value,
+      index: l.index
+    });
   }
-  return /* @__PURE__ */ w(Z, {
-    sensors: fe,
-    onDragEnd: J,
-    children: [/* @__PURE__ */ o(H, {
-      nodes: p,
-      rootNodes: p,
-      parentNode: null,
-      renderItem: h,
-      canDrop: m,
-      getDragHandleOptions: x,
-      className: P,
-      gap: y,
-      nestedGap: s,
-      ariaLabel: S
-    }), /* @__PURE__ */ o(ee, {
-      className: f.dragOverlay,
-      dropAnimation: {
-        duration: 160,
-        easing: "cubic-bezier(0.25, 1, 0.5, 1)"
-      },
-      children: (c) => {
-        const v = O(c)?.node;
-        return v ? /* @__PURE__ */ o(M, {
-          node: v,
-          renderItem: h,
-          nestedGap: s
-        }) : null;
-      }
-    })]
-  }, I.current.revision);
+  return /* @__PURE__ */ A(
+    ee,
+    {
+      sensors: ge,
+      onDragEnd: U,
+      children: [/* @__PURE__ */ o(M, {
+        nodes: p,
+        rootNodes: p,
+        parentNode: null,
+        renderItem: m,
+        canDrop: v,
+        getDragHandleOptions: x,
+        className: P,
+        gap: b,
+        nestedGap: S,
+        handle: u,
+        ariaLabel: I
+      }), /* @__PURE__ */ o(te, {
+        className: f.dragOverlay,
+        dropAnimation: {
+          duration: 160,
+          easing: "cubic-bezier(0.25, 1, 0.5, 1)"
+        },
+        children: (s) => {
+          const g = O(s)?.node;
+          return g ? /* @__PURE__ */ o(Y, {
+            node: g,
+            renderItem: m,
+            nestedGap: S
+          }) : null;
+        }
+      })]
+    },
+    r ? N.revision : void 0
+  );
 }
-function H({
+function M({
   nodes: e,
   rootNodes: n,
   parentNode: t,
   renderItem: r,
   canDrop: i,
   getDragHandleOptions: a,
-  className: u,
-  gap: h,
-  nestedGap: m,
-  ariaLabel: x
+  className: c,
+  gap: m,
+  nestedGap: v,
+  handle: x,
+  ariaLabel: P
 }) {
   const {
-    ref: P,
-    isDropTarget: y
-  } = ne({
-    id: be(t),
-    type: ue,
+    ref: b,
+    isDropTarget: S
+  } = re({
+    id: Pe(t),
+    type: pe,
     data: {
       kind: "collection",
       parentNode: t
     },
     disabled: e.length > 0,
     collisionPriority: 1,
-    accept: (s) => B(s, t, null, "end", i)
+    accept: (u) => W(u, t, null, "end", i)
   });
   return /* @__PURE__ */ o("div", {
-    ref: P,
+    ref: b,
     role: "list",
-    className: ie(f.list, u),
-    "data-gap": h,
-    "data-drop-target": y || void 0,
-    "aria-label": x,
-    children: /* @__PURE__ */ o(F, {
+    className: ae(f.list, c),
+    "data-gap": m,
+    "data-drop-target": S || void 0,
+    "aria-label": P,
+    children: /* @__PURE__ */ o(j, {
       each: e,
-      children: (s) => /* @__PURE__ */ o(pe, {
-        node: s,
+      children: (u) => /* @__PURE__ */ o(Se, {
+        node: u,
         rootNodes: n,
         renderItem: r,
         canDrop: i,
         getDragHandleOptions: a,
-        nestedGap: m
-      }, s.id)
+        nestedGap: v,
+        handle: x
+      }, u.id)
     })
   });
 }
-function pe({
+function Se({
   node: e,
   rootNodes: n,
   renderItem: t,
   canDrop: r,
   getDragHandleOptions: i,
-  nestedGap: a
+  nestedGap: a,
+  handle: c
 }) {
-  const u = Y(e), {
-    alignment: h = "center",
-    edgeOffset: m = "none",
-    variant: x = "plain"
-  } = i?.(e.value, u) ?? {}, {
-    handleRef: P,
-    ref: y,
-    targetRef: s,
-    isDragging: S,
-    isDropTarget: g
-  } = te({
+  const m = B(e), {
+    alignment: v = "center",
+    edgeOffset: x = "none",
+    variant: P = "plain"
+  } = i?.(e.value, m) ?? {}, {
+    handleRef: b,
+    ref: S,
+    targetRef: u,
+    isDragging: I,
+    isDropTarget: y
+  } = ie({
     id: e.id,
     index: e.index,
-    group: z(he(n, e)),
-    type: de,
+    group: V(ye(n, e)),
+    type: ve,
     data: {
       kind: "node",
       node: e
     },
-    accept: (p) => B(p, e.parent == null ? null : k(n, e), e, "before", r)
-  }), T = e.canHaveChildren ? /* @__PURE__ */ o(H, {
+    accept: (N) => W(N, e.parent == null ? null : k(n, e), e, "before", r)
+  }), p = e.canHaveChildren ? /* @__PURE__ */ o(M, {
     nodes: e.children,
     rootNodes: n,
     parentNode: e,
@@ -195,44 +206,48 @@ function pe({
     getDragHandleOptions: i,
     gap: a,
     nestedGap: a,
+    handle: c,
     ariaLabel: `${e.textValue} items`
   }) : null;
-  return /* @__PURE__ */ w("div", {
-    ref: y,
+  return /* @__PURE__ */ A("div", {
+    ref: S,
     role: "listitem",
     className: f.item,
     "data-level": e.level,
-    "data-dragging": S || void 0,
-    "data-drop-target": g || void 0,
+    "data-dragging": I || void 0,
+    "data-drop-target": y || void 0,
     children: [/* @__PURE__ */ o("div", {
-      ref: s,
+      ref: u,
       className: f.dropTarget,
       "data-container": e.canHaveChildren || void 0,
       "aria-hidden": !0
-    }), /* @__PURE__ */ o("span", {
-      ref: P,
-      className: f.dragHandle,
-      "data-alignment": h,
-      "data-edge-offset": m,
-      "data-variant": x,
-      "aria-hidden": !0,
-      children: /* @__PURE__ */ o(re, {
+    }), /* @__PURE__ */ o(ce, {
+      when: c,
+      children: /* @__PURE__ */ o("span", {
+        ref: b,
+        className: f.dragHandle,
+        "data-alignment": v,
+        "data-edge-offset": x,
+        "data-variant": P,
         "aria-hidden": !0,
-        width: 14,
-        height: 14
+        children: /* @__PURE__ */ o(oe, {
+          "aria-hidden": !0,
+          width: 14,
+          height: 14
+        })
       })
     }), /* @__PURE__ */ o("div", {
       className: f.content,
       children: t(e.value, {
-        ...u,
-        nestedItems: T,
-        isDragging: S,
-        isDropTarget: g
+        ...m,
+        nestedItems: p,
+        isDragging: I,
+        isDropTarget: y
       })
     })]
   });
 }
-function M({
+function Y({
   node: e,
   renderItem: n,
   nestedGap: t
@@ -240,9 +255,9 @@ function M({
   const r = e.canHaveChildren ? /* @__PURE__ */ o("div", {
     className: f.previewList,
     "data-gap": t,
-    children: /* @__PURE__ */ o(F, {
+    children: /* @__PURE__ */ o(j, {
       each: e.children,
-      children: (i) => /* @__PURE__ */ o(M, {
+      children: (i) => /* @__PURE__ */ o(Y, {
         node: i,
         renderItem: n,
         nestedGap: t
@@ -252,14 +267,14 @@ function M({
   return /* @__PURE__ */ o("div", {
     className: f.dragPreviewItem,
     children: n(e.value, {
-      ...Y(e),
+      ...B(e),
       nestedItems: r,
       isDragging: !1,
       isDropTarget: !1
     })
   });
 }
-function Y(e) {
+function B(e) {
   return {
     level: e.level,
     parent: e.parent,
@@ -271,11 +286,11 @@ function Y(e) {
     canHaveChildren: e.canHaveChildren
   };
 }
-function B(e, n, t, r, i) {
+function W(e, n, t, r, i) {
   const a = O(e)?.node;
-  return !a || !X(a, n) ? !1 : i?.(W(a, n, t, r)) ?? !0;
+  return !a || !z(a, n) ? !1 : i?.(X(a, n, t, r)) ?? !0;
 }
-function W(e, n, t, r) {
+function X(e, n, t, r) {
   return {
     items: [e.value],
     target: t?.value ?? null,
@@ -286,36 +301,36 @@ function W(e, n, t, r) {
     dropPosition: r
   };
 }
-function X(e, n) {
+function z(e, n) {
   return n == null || n.id !== e.id && $(e.children, n.id) == null;
 }
-function ve(e, n, t, r) {
-  const i = V(n);
+function xe(e, n, t, r) {
+  const i = q(n);
   if (i === void 0)
     return null;
   const a = i == null ? null : $(e, i);
   if (i != null && !a)
     return null;
-  const u = r != null && t > r.index;
+  const c = r != null && t > r.index;
   return {
     parentNode: a,
     index: t,
-    dropPosition: u ? "after" : "before"
+    dropPosition: c ? "after" : "before"
   };
 }
-function be(e) {
-  return z(e?.id ?? null);
-}
-function z(e) {
-  return e == null ? A : `${D}${e}`;
+function Pe(e) {
+  return V(e?.id ?? null);
 }
 function V(e) {
-  if (e === A)
+  return e == null ? H : `${D}${e}`;
+}
+function q(e) {
+  if (e === H)
     return null;
   if (typeof e == "string" && e.startsWith(D))
     return e.slice(D.length);
 }
-function he(e, n) {
+function ye(e, n) {
   return k(e, n)?.id ?? null;
 }
 function k(e, n) {
@@ -328,7 +343,7 @@ function k(e, n) {
   }
   return null;
 }
-function q(e) {
+function J(e) {
   const n = e?.data;
   return n?.kind === "node" && "node" in n ? {
     kind: "node",
@@ -339,11 +354,11 @@ function q(e) {
   } : null;
 }
 function O(e) {
-  const n = q(e);
+  const n = J(e);
   return n?.kind === "node" ? n : null;
 }
-ge.displayName = "SortableList";
+be.displayName = "SortableList";
 export {
-  ge as SortableList
+  be as SortableList
 };
 //# sourceMappingURL=SortableList.js.map