@rnaga/wp-next-ui 1.0.9 → 1.0.11

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/InputColor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputColor.d.ts","sourceRoot":"","sources":["../src/InputColor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAoB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAO,OAAO,EAAE,MAAM,eAAe,CAAC;AAK7C,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAUzC,CAAC;AA2IJ,eAAO,MAAM,UAAU,GACrB,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,KAAK,CAAC,EAAE,aAAa,CAAC;KACvB,CAAC;CACH,4CA6DF,CAAC"}
+{"version":3,"file":"InputColor.d.ts","sourceRoot":"","sources":["../src/InputColor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAO,OAAO,EAAE,MAAM,eAAe,CAAC;AAK7C,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAUzC,CAAC;AA2IJ,eAAO,MAAM,UAAU,GACrB,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,KAAK,CAAC,EAAE,aAAa,CAAC;KACvB,CAAC;CACH,4CAiEF,CAAC"}

package/InputColor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Input } from "./Input";
 import { Box } from "@mui/material";
 export const isColorString = (src) => /^#([\da-f]{3}|[\da-f]{6})$/i.test(src) ||
@@ -117,6 +117,9 @@ export const InputColor = (props) => {
         setValue(value);
         onBlur(value);
     };
+    useEffect(() => {
+        setValue(`${props.value ?? ""}`);
+    }, [props.value]);
     return (_jsxs(Box, { sx: { display: "flex", gap: 1, alignItems: "center", ...sx }, children: [_jsx(Input, { size: size, onChange: (value) => {
                     handleChange(value);
                 }, onBlur: (value) => {

package/InputMultiple.js

@@ -43,7 +43,7 @@ export const InputMultiple = (props) => {
                     size: size ?? "small",
                     sx: {
                         zIndex: 9999,
-                        height: size == "medium" ? 32 : 24,
+                        minHeight: size == "medium" ? 32 : 24,
                         ...slotSxProps?.input,
                     },
                     ...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/SelectFreeSoloAutocomplete.d.ts

@@ -0,0 +1,16 @@
+import { SxProps } from "@mui/material";
+import { type SlotSxProps } from "./SelectAutocomplete";
+type Item = {
+    label: string;
+    value: string | number;
+};
+export declare const SelectFreeSoloAutocomplete: (props: {
+    onChange: (value: string, item: Item) => void;
+    size?: "small" | "medium";
+    slotSxProps?: SlotSxProps;
+    items: Item[];
+    value?: string;
+    sx?: SxProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectFreeSoloAutocomplete.d.ts.map

package/SelectFreeSoloAutocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFreeSoloAutocomplete.d.ts","sourceRoot":"","sources":["../src/SelectFreeSoloAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,OAAO,EAAE,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAO5E,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,OAAO;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,4CAuGA,CAAC"}

package/SelectFreeSoloAutocomplete.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autocomplete, ListItem } from "@mui/material";
+import { useMemo, useState } from "react";
+import { SelectAutocomplete } from "./SelectAutocomplete";
+import { Typography } from "./Typography";
+const sxSelectAutocomplete = SelectAutocomplete.sx;
+const SelectAutocompleteTextField = SelectAutocomplete.TextField;
+const Wrapper = SelectAutocomplete.Wrapper;
+export const SelectFreeSoloAutocomplete = (props) => {
+    const { onChange, size, items, value, slotSxProps, sx } = props;
+    const [inputValue, setInputValue] = useState("");
+    const currentValue = useMemo(() => {
+        if (!value) {
+            return undefined;
+        }
+        const item = items.find((item) => item.value == value);
+        return item
+            ? { label: item.label, id: `${item.value}` }
+            : { label: `${value}`, id: `${value}` };
+    }, [value, items]);
+    return (_jsx(Wrapper, { size: size, slotSxProps: slotSxProps, children: _jsx(Autocomplete, { size: "small", freeSolo: true, value: currentValue ?? { label: "", id: "" }, inputValue: inputValue !== "" ? inputValue : currentValue?.label ?? "", options: items.map((item) => ({
+                label: item.label,
+                id: `${item.value}`,
+            })), onInputChange: (_, newInputValue, reason) => {
+                if (reason === "input") {
+                    setInputValue(newInputValue);
+                }
+                else {
+                    setInputValue("");
+                }
+            }, onChange: (_, newValue, reason) => {
+                if (reason === "createOption" && typeof newValue === "string") {
+                    const item = { label: newValue, value: newValue };
+                    onChange(newValue, item);
+                    setInputValue("");
+                }
+                else if (reason === "selectOption" &&
+                    typeof newValue === "object" &&
+                    newValue !== null) {
+                    const item = {
+                        label: newValue.label,
+                        value: newValue.id,
+                    };
+                    onChange(newValue.id, item);
+                    setInputValue("");
+                }
+            }, getOptionLabel: (option) => {
+                if (typeof option === "string") {
+                    return option;
+                }
+                return option.label;
+            }, renderInput: (params) => (_jsx(SelectAutocompleteTextField, { params: params, size: size, sx: slotSxProps?.textField })), sx: sxSelectAutocomplete({
+                size: size ?? "small",
+                sx: slotSxProps?.input ?? sx,
+            }), renderOption: (props, option, state) => {
+                const { key, ...restProps } = props;
+                if (state.selected) {
+                    return null;
+                }
+                return (_jsx(ListItem, { ...restProps, onClick: (e) => {
+                        const item = {
+                            label: option.label,
+                            value: option.id,
+                        };
+                        onChange(option.id, item);
+                        setInputValue("");
+                        restProps?.onClick && restProps.onClick(e);
+                    }, children: _jsx(Typography, { size: size, sx: slotSxProps?.options, children: option.label }) }, key));
+            }, disableClearable: true }) }));
+};

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.9",
+  "version": "1.0.11",
   "scripts": {
     "build": "node ../../scripts/build-ui.mjs",
     "release-old": "node ../../scripts/release.mjs",