@rnaga/wp-next-ui 1.1.2 → 1.1.4

package/SortableList.d.ts

@@ -15,10 +15,25 @@ export declare const SortableList: <T extends any = string>(props: {
         label?: SxProps;
     };
     displayType: DisplayType;
+    /**
+     * Unique ID for this list. Used as a `data-drop-target-id` on the wrapper Box
+     * so that items dragged from another SortableList can be dropped here via
+     * the dragging list's `onDropToTarget` callback.
+     * Also used to prevent cross-list item swapping.
+     */
+    dropZoneId?: string;
     renderItem?: (item: SortableListItemType<T>) => JSX.Element;
     onDelete?: (index: number) => void;
     onEdit?: (index: number) => void;
-    onChange?: (items: SortableListItemType<T>[]) => void;
+    onChange?: (items: SortableListItemType<T>[], fromIndex: number, toIndex: number) => void;
+    onDrop?: (item: SortableListItemType<T>) => void;
+    onDropToTarget?: (item: SortableListItemType<T>, targetId: string) => void;
+    onDropTargetEnter?: (targetId: string) => void;
+    onDropTargetLeave?: (targetId: string) => void;
+    cursor?: {
+        idle?: string;
+        dragging?: string;
+    };
 }) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SortableList.d.ts.map

package/SortableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../src/SortableList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAEL,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC;AAE/D,KAAK,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,gBAAgB,CAAC;AAczE,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,GAAG,GAAG,MAAM,EAAE,OAAO;IAC1D,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC;IACF,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;CACvD,4CAgPA,CAAC"}
+{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../src/SortableList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAEL,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC;AAE/D,KAAK,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,gBAAgB,CAAC;AAczE,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,GAAG,GAAG,MAAM,EAAE,OAAO;IAC1D,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC;IACF,WAAW,EAAE,WAAW,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAChC,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,KACZ,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACjD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/C,4CA8TA,CAAC"}

package/SortableList.js

@@ -1,12 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useMouseMove } from "./hooks/use-mouse-move";
-import { createContext, useEffect, useRef, useState, } from "react";
+import { createContext, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { Box } from "@mui/material";
 import { ListBase } from "./ListBase";
 const SortableContext = createContext({});
 export const SortableList = (props) => {
-    const { size = "small", displayType = "vertical", renderItem, onDelete, onChange, onEdit, } = props;
+    const { size = "small", displayType = "vertical", renderItem, onDelete, onChange, onEdit, onDrop, onDropToTarget, onDropTargetEnter, onDropTargetLeave, cursor, dropZoneId, } = props;
+    // Stable unique ID for this list instance (used to tag items)
+    const generatedId = useId();
+    const listId = dropZoneId ?? generatedId;
     const [items, setItems] = useState([]);
     const targetRef = useRef(null);
+    const dropTargetRef = useRef(null);
     const refPos = useRef({ x: 0, y: 0 });
     const itemRefs = useRef(new Map());
     const draggedItemRef = useRef(null);
@@ -16,7 +21,6 @@ export const SortableList = (props) => {
         return items.find((item) => item.index === index);
     };
     const swapItems = (_e, fromIndex, toIndex) => {
-        console.log("Swapping items", fromIndex, toIndex);
         const currentItems = itemsRef.current;
         if (fromIndex < 0 ||
             toIndex < 0 ||
@@ -31,7 +35,7 @@ export const SortableList = (props) => {
         newItems[fromIndex].index = fromIndex;
         newItems[toIndex].index = toIndex;
         setItems(newItems);
-        onChange?.(newItems);
+        onChange?.(newItems, fromIndex, toIndex);
     };
     const handleDeltaChange = (e, delta) => {
         const dragged = draggedItemRef.current;
@@ -62,12 +66,18 @@ export const SortableList = (props) => {
             const sortableItem = el.closest("[data-sortable-item-index]");
             if (!sortableItem)
                 continue;
+            // Only accept items that belong to THIS list (same listId)
+            if (sortableItem.getAttribute("data-sortable-list-id") !== listId) {
+                continue;
+            }
             const itemIndex = sortableItem.getAttribute("data-sortable-item-index");
-            if (!itemIndex || itemIndex === String(index))
+            if (!itemIndex || itemIndex === String(index)) {
                 continue;
+            }
             const itemIndexNumber = parseInt(itemIndex);
-            if (itemIndexNumber < 0 || itemIndexNumber >= itemsRef.current.length)
+            if (itemIndexNumber < 0 || itemIndexNumber >= itemsRef.current.length) {
                 continue;
+            }
             foundTarget = sortableItem;
             break;
         }
@@ -78,13 +88,47 @@ export const SortableList = (props) => {
             foundTarget.style.border = "1px solid red";
         }
         targetRef.current = foundTarget;
+        // Check for external drop targets: both explicit [data-drop-target-id] elements
+        // and foreign SortableList drop zones ([data-sortable-drop-zone-id] that differ from this list)
+        {
+            let foundDropTarget = null;
+            if (!foundTarget) {
+                for (const el of elementsAtPoint) {
+                    // Look for explicit external drop targets (e.g. collection headers)
+                    const explicitTarget = el.closest("[data-drop-target-id]");
+                    if (explicitTarget) {
+                        foundDropTarget = explicitTarget;
+                        break;
+                    }
+                    // Look for foreign SortableList drop zones (different list ID)
+                    const dropZone = el.closest("[data-sortable-drop-zone-id]");
+                    if (dropZone &&
+                        dropZone.getAttribute("data-sortable-drop-zone-id") !== listId) {
+                        foundDropTarget = dropZone;
+                        break;
+                    }
+                }
+            }
+            if (dropTargetRef.current && dropTargetRef.current !== foundDropTarget) {
+                const leavingId = dropTargetRef.current.getAttribute("data-drop-target-id") ??
+                    dropTargetRef.current.getAttribute("data-sortable-drop-zone-id");
+                if (leavingId)
+                    onDropTargetLeave?.(leavingId);
+            }
+            if (foundDropTarget && foundDropTarget !== dropTargetRef.current) {
+                const enteringId = foundDropTarget.getAttribute("data-drop-target-id") ??
+                    foundDropTarget.getAttribute("data-sortable-drop-zone-id");
+                if (enteringId)
+                    onDropTargetEnter?.(enteringId);
+            }
+            dropTargetRef.current = foundDropTarget;
+        }
     };
     const handleMouseDown = (e) => {
         const dragged = draggedItemRef.current;
         if (!dragged)
             return;
         const { element, index } = dragged;
-        console.log("Mouse down on item", index);
         const rect = element.getBoundingClientRect();
         if (rect) {
             refPos.current.y = e.clientY - rect.top - rect.height / 2;
@@ -105,16 +149,34 @@ export const SortableList = (props) => {
         if (targetRef.current) {
             const toItemIndex = targetRef.current.getAttribute("data-sortable-item-index");
             swapItems(e, index, toItemIndex ? parseInt(toItemIndex) : -1);
-            targetRef.current?.style.removeProperty("border");
+            targetRef.current.style.removeProperty("border");
             targetRef.current = null;
         }
+        else if (dropTargetRef.current) {
+            // Dropped onto an external drop target or foreign SortableList drop zone
+            const targetId = dropTargetRef.current.getAttribute("data-drop-target-id") ??
+                dropTargetRef.current.getAttribute("data-sortable-drop-zone-id");
+            const droppedItem = itemsRef.current.find((i) => i.index === index);
+            if (droppedItem && targetId) {
+                onDropToTarget?.(droppedItem, targetId);
+            }
+            onDropTargetLeave?.(targetId ?? "");
+            dropTargetRef.current = null;
+        }
+        else {
+            // Dropped outside any list or target — fire onDrop
+            const droppedItem = itemsRef.current.find((i) => i.index === index);
+            if (droppedItem) {
+                onDrop?.(droppedItem);
+            }
+        }
         draggedItemRef.current = null;
     };
     const { initMouseMove } = useMouseMove({
         onDeltaChange: handleDeltaChange,
         onMouseUp: handleMouseUp,
         onMouseDown: handleMouseDown,
-        cursor: "grabbing",
+        cursor: cursor?.dragging ?? "grabbing",
         threshold: 1,
     });
     useEffect(() => {
@@ -126,26 +188,20 @@ export const SortableList = (props) => {
         }));
         setItems(initialItems);
     }, [props.enum]);
-    let sx = {};
-    if (props.displayType === "horizontal") {
-        sx = {
-            display: "flex",
-            flexDirection: "row",
-        };
-    }
-    else if (props.displayType === "horizontal-fit") {
-        sx = {
-            display: "flex",
-            flexDirection: "row",
-        };
-    }
-    else if (props.displayType === "grid") {
-        sx = {
-            display: "grid",
-            gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
-            gap: 1,
-        };
-    }
+    const sx = useMemo(() => {
+        if (props.displayType === "horizontal" ||
+            props.displayType === "horizontal-fit") {
+            return { display: "flex", flexDirection: "row" };
+        }
+        if (props.displayType === "grid") {
+            return {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+                gap: 1,
+            };
+        }
+        return {};
+    }, [props.displayType]);
     const handleItemMouseDown = (item, e) => {
         // Find the MuiListItem parent element
         const listItemElement = e.target.closest("[data-sortable-item-index]");
@@ -155,9 +211,6 @@ export const SortableList = (props) => {
             initMouseMove(listItemElement)(e);
         }
     };
-    const renderSortableItem = (item) => {
-        return renderItem ? renderItem(item) : item.label;
-    };
     return (_jsx(SortableContext.Provider, { value: {
             items,
             findItem: findItem,
@@ -165,11 +218,12 @@ export const SortableList = (props) => {
             refPos,
             targetRef,
             displayType,
-        }, children: _jsx(ListBase, { items: items, size: size, sx: { ...sx, ...props.sx }, displayType: displayType, renderItem: renderSortableItem, onDelete: onDelete, onEdit: onEdit, onMouseDown: handleItemMouseDown, getItemDataAttributes: (item) => ({
-                "data-sortable-item-index": item.index,
-            }), slotSxProps: {
-                listItem: {
-                    cursor: "move",
-                },
-            } }) }));
+        }, children: _jsx(Box, { "data-sortable-drop-zone-id": listId, children: _jsx(ListBase, { items: items, size: size, sx: { ...sx, ...props.sx }, displayType: displayType, renderItem: (item) => renderItem ? renderItem(item) : _jsx(_Fragment, { children: item.label }), onDelete: onDelete, onEdit: onEdit, onMouseDown: handleItemMouseDown, getItemDataAttributes: (item) => ({
+                    "data-sortable-item-index": item.index,
+                    "data-sortable-list-id": listId,
+                }), slotSxProps: {
+                    listItem: {
+                        cursor: cursor?.idle ?? "move",
+                    },
+                } }) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rnaga/wp-next-ui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "scripts": {
     "build": "node ../../scripts/build-ui.mjs",
     "release-old": "node ../../scripts/release.mjs",