@rnaga/wp-next-ui 1.0.8 → 1.0.10

package/Checkmarks.d.ts

@@ -0,0 +1,17 @@
+import { Button } from "./Button";
+import { RefObject } from "react";
+export type CheckmarksItem = {
+    label: string;
+    value: string;
+};
+export declare const Checkmarks: (props: {
+    ref?: RefObject<HTMLElement | null>;
+    items: CheckmarksItem[];
+    onChange: (values: string[], items: CheckmarksItem[]) => void;
+    label?: string;
+    size?: "small" | "medium";
+    values?: string[];
+    showArrowIcon?: boolean;
+    disabled?: boolean;
+} & Omit<Parameters<typeof Button>[0], "onChange" | "ref" | "label" | "value" | "children" | "disabled">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Checkmarks.d.ts.map

package/Checkmarks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkmarks.d.ts","sourceRoot":"","sources":["../src/Checkmarks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAKlC,OAAO,EAAY,SAAS,EAAuB,MAAM,OAAO,CAAC;AAKjE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO;IACL,GAAG,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CACN,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,EAC5B,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CACjE,4CAoJF,CAAC"}

package/Checkmarks.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import { Fragment, useEffect, useState } from "react";
+import { Typography } from "./Typography";
+import { useWPTheme } from "./ThemeRegistry";
+import { Checkbox } from "./Checkbox";
+export const Checkmarks = (props) => {
+    const { onChange, label, ref: buttonRef, size, showArrowIcon = true, disabled = false, values = [], ...rest } = props;
+    const fontSize = size == "medium" ? 14 : 12;
+    const { wpTheme } = useWPTheme();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const [selectedValues, setSelectedValues] = useState(values);
+    const [buttonWidth, setButtonWidth] = useState("100px");
+    const [items, setItems] = useState();
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleToggle = (value, item) => {
+        const newSelectedValues = selectedValues.includes(value)
+            ? selectedValues.filter((v) => v !== value)
+            : [...selectedValues, value];
+        setSelectedValues(newSelectedValues);
+        const selectedItems = props.items.filter((item) => newSelectedValues.includes(item.value));
+        onChange(newSelectedValues, selectedItems);
+    };
+    useEffect(() => {
+        setSelectedValues(values);
+    }, [values]);
+    useEffect(() => {
+        setItems(props.items);
+    }, [props.items]);
+    const buttonLabel = selectedValues.length > 0
+        ? `${selectedValues.length} selected`
+        : label || "Select items";
+    return (_jsxs(Fragment, { children: [_jsxs(Button, { ...rest, id: "checkmarks-button", size: "small", disabled: disabled, "aria-controls": open ? "checkmarks-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: handleClick, sx: {
+                    textTransform: "none",
+                    border: "1px solid",
+                    borderColor: wpTheme.border.color,
+                    justifyContent: "space-between",
+                    height: size == "medium" ? 32 : 24,
+                    backgroundColor: wpTheme.background.color,
+                    color: wpTheme.text.color,
+                    ...rest.sx,
+                }, ref: (ref) => {
+                    if (ref) {
+                        setButtonWidth(ref.clientWidth + "px");
+                        if (buttonRef) {
+                            buttonRef.current = ref;
+                        }
+                    }
+                }, children: [_jsx(Typography, { fontSize: fontSize, sx: {
+                            ...(disabled ? { opacity: 0.5 } : {}),
+                        }, children: buttonLabel }), disabled === false && (_jsxs(_Fragment, { children: [showArrowIcon && !open && _jsx(ArrowDropDownIcon, { fontSize: "small" }), showArrowIcon && open && _jsx(ArrowDropUpIcon, { fontSize: "small" })] }))] }), _jsx(Menu, { id: "checkmarks-menu", anchorEl: anchorEl, open: disabled === true ? false : open, onClose: handleClose, sx: {
+                    width: "100%",
+                }, children: items?.map((item, index) => {
+                    const isChecked = selectedValues.includes(item.value);
+                    return (_jsxs(MenuItem, { onClick: (e) => {
+                            handleToggle(item.value, item);
+                        }, sx: {
+                            width: buttonWidth,
+                        }, children: [_jsx(Checkbox, { checked: isChecked, size: size, sx: {
+                                    padding: 0,
+                                    marginRight: 1,
+                                } }), _jsx(Typography, { fontSize: fontSize, sx: {
+                                    minHeight: size == "medium" ? 20 : 16,
+                                }, component: "div", children: item.label })] }, index));
+                }) })] }, label));
+};

package/Input.d.ts

@@ -10,5 +10,6 @@ export declare const Input: (props: {
     clearable?: boolean;
     readOnly?: boolean;
     removeBorderOnFocus?: boolean;
+    isEmpty?: boolean;
 } & Omit<Parameters<typeof MuiInput>[0], "onChange" | "value" | "onBlur" | "size" | "readOnly">) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Input.d.ts.map

package/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAKnE,eAAO,MAAM,KAAK,GAChB,OAAO;IACL,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,GAAG,IAAI,CACN,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,EAC9B,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CACtD,4CA+HF,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAKnE,eAAO,MAAM,KAAK,GAChB,OAAO;IACL,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CACN,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,EAC9B,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CACtD,4CAsIF,CAAC"}

package/Input.js

@@ -3,7 +3,7 @@ import { Box, IconButton, Input as MuiInput } from "@mui/material";
 import { useEffect, useState } from "react";
 import ClearIcon from "@mui/icons-material/Clear";
 export const Input = (props) => {
-    const { onChange, onBlur, onClear, canClear, size, disableBorder, sx, readOnly = false, clearable = false, removeBorderOnFocus = false, multiline, value: _value, ...rest } = props;
+    const { onChange, onBlur, onClear, canClear, size, disableBorder, sx, readOnly = false, clearable = false, removeBorderOnFocus = false, multiline, value: _value, isEmpty, ...rest } = props;
     const [value, setValue] = useState(_value ?? "");
     const handleChange = (e) => {
         const value = e.target.value;
@@ -26,6 +26,11 @@ export const Input = (props) => {
             return;
         setValue(_value);
     }, [_value]);
+    useEffect(() => {
+        if (isEmpty === true) {
+            setValue("");
+        }
+    }, [isEmpty]);
     return (_jsx(MuiInput, { disableUnderline: true, readOnly: readOnly, onBlur: handleBlur, value: value, onChange: handleChange, multiline: multiline, 
         // onFocus={(e) => e.target.select?.()}
         sx: {

package/ListBase.d.ts

@@ -40,6 +40,7 @@ export type ListBaseProps<T = string> = {
     onMouseDown?: (item: ListItemType<T>, event: React.MouseEvent) => void;
     itemEventHandlers?: ListItemEventHandlers<T>;
     getItemSx?: (item: ListItemType<T>, index: number) => SxProps;
+    getItemDataAttributes?: (item: ListItemType<T>, index: number) => Record<string, string | number>;
     dataAttributes?: Record<string, string | number>;
     slotSxProps?: {
         listItem?: SxProps;

package/ListBase.d.ts.map

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

package/ListBase.js

@@ -10,7 +10,7 @@ export const ListItem = (props) => {
     const { item, index, size, dataAttributes, sx } = props;
     const ref = useRef(null);
     const [isHovered, setIsHovered] = useState(false);
-    const { displayType, renderItem, onDelete, onEdit, itemEventHandlers, getItemSx, slotSxProps, editable, } = useContext(ListContext);
+    const { displayType, renderItem, onDelete, onEdit, itemEventHandlers, getItemSx, getItemDataAttributes, slotSxProps, editable, } = useContext(ListContext);
     const { wpTheme } = useWPTheme();
     const handleEvent = (handler) => {
         return handler
@@ -30,7 +30,11 @@ export const ListItem = (props) => {
         ...(slotSxProps?.listItem || {}),
         ...sx,
     };
-    return (_jsxs(MuiListItem, { ref: ref, value: item.value, onClick: handleEvent(itemEventHandlers?.onClick), onMouseDown: handleEvent(itemEventHandlers?.onMouseDown), onMouseUp: handleEvent(itemEventHandlers?.onMouseUp), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleEvent(itemEventHandlers?.onDoubleClick), onContextMenu: handleEvent(itemEventHandlers?.onContextMenu), onMouseOver: handleEvent(itemEventHandlers?.onMouseOver), ...(dataAttributes || {}), sx: {
+    const itemDataAttributes = {
+        ...(dataAttributes || {}),
+        ...(getItemDataAttributes ? getItemDataAttributes(item, index) : {}),
+    };
+    return (_jsxs(MuiListItem, { ref: ref, value: item.value, onClick: handleEvent(itemEventHandlers?.onClick), onMouseDown: handleEvent(itemEventHandlers?.onMouseDown), onMouseUp: handleEvent(itemEventHandlers?.onMouseUp), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleEvent(itemEventHandlers?.onDoubleClick), onContextMenu: handleEvent(itemEventHandlers?.onContextMenu), onMouseOver: handleEvent(itemEventHandlers?.onMouseOver), ...itemDataAttributes, sx: {
             position: "relative",
             "&:hover": {
                 backgroundColor: wpTheme.background.hoverColor,
@@ -60,7 +64,7 @@ export const ListItem = (props) => {
                     } }) }))] }));
 };
 export const ListBase = (props) => {
-    const { items, size = "small", displayType = "vertical", renderItem, onDelete, onEdit, onClick, onMouseDown, itemEventHandlers, getItemSx, dataAttributes, slotSxProps, editable = false, } = props;
+    const { items, size = "small", displayType = "vertical", renderItem, onDelete, onEdit, onClick, onMouseDown, itemEventHandlers, getItemSx, getItemDataAttributes, dataAttributes, slotSxProps, editable = false, } = props;
     const listItems = items.map((item, index) => ({
         index,
         value: item.value,
@@ -100,6 +104,7 @@ export const ListBase = (props) => {
             onEdit,
             itemEventHandlers: mergedEventHandlers,
             getItemSx: getItemSx,
+            getItemDataAttributes: getItemDataAttributes,
             slotSxProps,
             editable,
         }, children: _jsx(MuiList, { sx: { ...sx, ...props.sx }, children: listItems.map((item, index) => (_jsx(ListItem, { item: item, index: index, size: size, dataAttributes: dataAttributes, sx: slotSxProps?.listItem }, item.index))) }) }));

package/SortableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../src/SortableList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,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,4CA2MA,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,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"}

package/SortableList.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
 import { useMouseMove } from "./hooks/use-mouse-move";
 import { createContext, useEffect, useRef, useState, } from "react";
 import { ListBase } from "./ListBase";
@@ -9,18 +8,23 @@ export const SortableList = (props) => {
     const [items, setItems] = useState([]);
     const targetRef = useRef(null);
     const refPos = useRef({ x: 0, y: 0 });
+    const itemRefs = useRef(new Map());
+    const draggedItemRef = useRef(null);
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
     const findItem = (index) => {
         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 ||
-            fromIndex >= items.length ||
-            toIndex >= items.length) {
+            fromIndex >= currentItems.length ||
+            toIndex >= currentItems.length) {
             return;
         }
-        const newItems = [...items];
+        const newItems = [...currentItems];
         const temp = newItems[fromIndex];
         newItems[fromIndex] = newItems[toIndex];
         newItems[toIndex] = temp;
@@ -29,6 +33,90 @@ export const SortableList = (props) => {
         setItems(newItems);
         onChange?.(newItems);
     };
+    const handleDeltaChange = (e, delta) => {
+        const dragged = draggedItemRef.current;
+        if (!dragged)
+            return;
+        const { element, index } = dragged;
+        const rect = element.getBoundingClientRect();
+        if (!rect)
+            return;
+        let newY;
+        let newX;
+        const transformValues = [];
+        if (["horizontal", "horizontal-fit", "grid"].includes(displayType)) {
+            newX = refPos.current.x + delta.x;
+            transformValues.push(`translateX(${newX}px)`);
+            refPos.current.x = newX;
+        }
+        if (displayType === "vertical" || displayType === "grid") {
+            newY = refPos.current.y + delta.y;
+            transformValues.push(`translateY(${newY}px)`);
+            refPos.current.y = newY;
+        }
+        element.style.transform = transformValues.join(" ");
+        const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
+        let foundTarget = null;
+        for (const el of elementsAtPoint) {
+            // Find the sortable item container (could be the element itself or an ancestor)
+            const sortableItem = el.closest("[data-sortable-item-index]");
+            if (!sortableItem)
+                continue;
+            const itemIndex = sortableItem.getAttribute("data-sortable-item-index");
+            if (!itemIndex || itemIndex === String(index))
+                continue;
+            const itemIndexNumber = parseInt(itemIndex);
+            if (itemIndexNumber < 0 || itemIndexNumber >= itemsRef.current.length)
+                continue;
+            foundTarget = sortableItem;
+            break;
+        }
+        if (targetRef.current && targetRef.current !== foundTarget) {
+            targetRef.current.style.removeProperty("border");
+        }
+        if (foundTarget && foundTarget !== targetRef.current) {
+            foundTarget.style.border = "1px solid red";
+        }
+        targetRef.current = foundTarget;
+    };
+    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;
+            refPos.current.x = 0;
+            element.style.zIndex = "100000";
+            element.style.transform = `translate(${refPos.current.x}px, ${refPos.current.y}px)`;
+        }
+    };
+    const handleMouseUp = (e) => {
+        const dragged = draggedItemRef.current;
+        if (!dragged)
+            return;
+        const { element, index } = dragged;
+        refPos.current.y = 0;
+        refPos.current.x = 0;
+        element.style.removeProperty("transform");
+        element.style.removeProperty("z-index");
+        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 = null;
+        }
+        draggedItemRef.current = null;
+    };
+    const { initMouseMove } = useMouseMove({
+        onDeltaChange: handleDeltaChange,
+        onMouseUp: handleMouseUp,
+        onMouseDown: handleMouseDown,
+        cursor: "grabbing",
+        threshold: 1,
+    });
     useEffect(() => {
         const initialItems = props.enum.map((item, index) => ({
             index,
@@ -58,83 +146,17 @@ export const SortableList = (props) => {
             gap: 1,
         };
     }
-    const renderSortableItem = (item) => {
-        return (_jsx(Box, { ref: item.ref, onMouseDown: initMouseMoveForItem(item), "data-sortable-item-index": item.index, sx: {
-                cursor: "move",
-            }, children: renderItem ? renderItem(item) : item.label }));
+    const handleItemMouseDown = (item, e) => {
+        // Find the MuiListItem parent element
+        const listItemElement = e.target.closest("[data-sortable-item-index]");
+        if (listItemElement) {
+            itemRefs.current.set(item.index, listItemElement);
+            draggedItemRef.current = { index: item.index, element: listItemElement };
+            initMouseMove(listItemElement)(e);
+        }
     };
-    const initMouseMoveForItem = (item) => {
-        const ref = item.ref;
-        if (!ref)
-            return () => { };
-        const handleDeltaChange = (e, delta) => {
-            const rect = ref.current?.getBoundingClientRect();
-            if (!rect)
-                return;
-            let newY;
-            let newX;
-            const transformValues = [];
-            if (["horizontal", "horizontal-fit", "grid"].includes(displayType)) {
-                newX = refPos.current.x + delta.x;
-                transformValues.push(`translateX(${newX}px)`);
-                refPos.current.x = newX;
-            }
-            if (displayType === "vertical" || displayType === "grid") {
-                newY = refPos.current.y + delta.y;
-                transformValues.push(`translateY(${newY}px)`);
-                refPos.current.y = newY;
-            }
-            ref.current.style.transform = transformValues.join(" ");
-            const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
-            for (const element of elementsAtPoint) {
-                const itemIndex = element.getAttribute("data-sortable-item-index");
-                if (!itemIndex || itemIndex === String(item.index)) {
-                    if (targetRef.current) {
-                        targetRef.current.style.removeProperty("border");
-                        targetRef.current = null;
-                    }
-                    continue;
-                }
-                const itemIndexNumber = parseInt(itemIndex);
-                if (itemIndexNumber < 0 || itemIndexNumber >= items.length)
-                    continue;
-                if (targetRef.current) {
-                    targetRef.current.style.removeProperty("border");
-                }
-                targetRef.current = element;
-                targetRef.current.style.border = "1px solid red";
-                break;
-            }
-        };
-        const handleMouseDown = (e) => {
-            const rect = ref.current?.getBoundingClientRect();
-            if (rect) {
-                refPos.current.y = e.clientY - rect.top - rect.height / 2;
-                refPos.current.x = 0;
-                ref.current.style.zIndex = "100000";
-                ref.current.style.transform = `translate(${refPos.current.x}px, ${refPos.current.y}px)`;
-            }
-        };
-        const handleMouseUp = (e) => {
-            refPos.current.y = 0;
-            refPos.current.x = 0;
-            ref.current?.style.removeProperty("transform");
-            ref.current?.style.removeProperty("z-index");
-            if (targetRef.current) {
-                const toItemIndex = targetRef.current.getAttribute("data-sortable-item-index");
-                swapItems(e, item.index, toItemIndex ? parseInt(toItemIndex) : -1);
-                targetRef.current?.style.removeProperty("border");
-                targetRef.current = null;
-            }
-        };
-        const { initMouseMove } = useMouseMove({
-            onDeltaChange: handleDeltaChange,
-            onMouseUp: handleMouseUp,
-            onMouseDown: handleMouseDown,
-            cursor: "grabbing",
-            threshold: 1,
-        });
-        return initMouseMove(ref);
+    const renderSortableItem = (item) => {
+        return renderItem ? renderItem(item) : item.label;
     };
     return (_jsx(SortableContext.Provider, { value: {
             items,
@@ -143,5 +165,11 @@ 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 }) }));
+        }, 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",
+                },
+            } }) }));
 };

package/package.json

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