@rnaga/wp-next-ui 1.0.6 → 1.0.8

package/Button.d.ts

@@ -6,5 +6,6 @@ export declare const Button: (props: {
     bold?: boolean;
     loading?: boolean;
     color?: "info" | "success" | "warning" | "error" | "primary" | "secondary";
-} & Omit<Parameters<typeof MuiButton>[0], "children" | "size">) => import("react/jsx-runtime").JSX.Element;
+    endIcon?: React.ReactNode;
+} & Omit<Parameters<typeof MuiButton>[0], "children" | "size" | "endIcon">) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

package/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AAIpD,eAAO,MAAM,MAAM,GACjB,OAAO;IACL,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;CAC5E,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,4CAyB/D,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AAIpD,eAAO,MAAM,MAAM,GACjB,OAAO;IACL,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC3E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC,4CAkC3E,CAAC"}

package/Button.js

@@ -3,7 +3,7 @@ import { Button as MuiButton } from "@mui/material";
 import { CircularProgress } from "@mui/material";
 import { useWPTheme } from "./ThemeRegistry";
 export const Button = (props) => {
-    const { children, size, component, bold, loading, color, disabled, ...rest } = props;
+    const { children, size, component, bold, loading, color, disabled, endIcon, ...rest } = props;
     const { wpTheme } = useWPTheme();
     return (_jsx(MuiButton, { ...rest, component: component, variant: "contained", size: "small", disableElevation: true, disabled: loading || disabled === true, sx: {
             textTransform: "none",
@@ -11,5 +11,5 @@ export const Button = (props) => {
             ...(bold ? { fontWeight: "bold" } : {}),
             ...(color ? { backgroundColor: wpTheme.colors[color] } : {}),
             ...rest.sx,
-        }, endIcon: loading ? _jsx(CircularProgress, { size: 20 }) : null, children: children }));
+        }, endIcon: loading ? _jsx(CircularProgress, { size: 20 }) : endIcon, children: children }));
 };

package/DraggableBox.d.ts

@@ -10,13 +10,18 @@
  * - size: Sets the Typography size ("small" | "medium").
  * - targetRef: Reference to an element whose relative position determines the box's initial placement.
  * - sx: Style overrides for the outer Box wrapping the content.
- * - slotSxProps: Style overrides for the header and title.
+ * - slotSxProps: Style overrides for the header, title, and border (width, color).
  */
 import React, { RefObject } from "react";
 import { SxProps } from "@mui/material";
 type SlotSxProps = {
     header?: SxProps;
     title?: SxProps;
+    content?: SxProps;
+    border?: {
+        width?: number;
+        color?: string;
+    };
 };
 export declare const DraggableBox: (props: {
     children: React.ReactNode;
@@ -35,6 +40,7 @@ export declare const DraggableBox: (props: {
     zIndexLayer?: number;
     placement?: "target" | "left";
     resizable?: boolean;
+    onResize?: (width: number, height: number, event?: Event) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DraggableBox.d.ts.map

package/DraggableBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableBox.d.ts","sourceRoot":"","sources":["../src/DraggableBox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,EAAmB,OAAO,EAAE,MAAM,eAAe,CAAC;AAOzD,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,GAAG,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,4CAkbA,CAAC"}
+{"version":3,"file":"DraggableBox.d.ts","sourceRoot":"","sources":["../src/DraggableBox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,EAAmB,OAAO,EAAE,MAAM,eAAe,CAAC;AAOzD,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,GAAG,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACnE,4CA4cA,CAAC"}

package/DraggableBox.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - size: Sets the Typography size ("small" | "medium").
  * - targetRef: Reference to an element whose relative position determines the box's initial placement.
  * - sx: Style overrides for the outer Box wrapping the content.
- * - slotSxProps: Style overrides for the header and title.
+ * - slotSxProps: Style overrides for the header, title, and border (width, color).
  */
 import { useCallback, useEffect, useRef, useState, } from "react";
 import { Box, IconButton } from "@mui/material";
@@ -21,7 +21,7 @@ import { Background } from "./Background";
 import { Portal } from "./portal";
 export const DraggableBox = (props) => {
     // Destructure props
-    const { children, targetRef, ref: selfRef, title, size, onClose, open, sx, slotSxProps, offset: initialOffset = {}, zIndexLayer = 0, placement = "left", resizable = false, } = props;
+    const { children, targetRef, ref: selfRef, title, size, onClose, open, sx, slotSxProps, offset: initialOffset = {}, zIndexLayer = 0, placement = "left", resizable = false, onResize, } = props;
     // Provide default offset values for the box
     const { left = 0, top = 0 } = initialOffset;
     // Reference to the draggable box DOM element
@@ -37,7 +37,19 @@ export const DraggableBox = (props) => {
     // Determines if the box is currently being resized and from which direction
     const [isResizing, setIsResizing] = useState(null);
     // Stores the initial mouse position when resizing starts
-    const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
+    const [resizeStart, setResizeStart] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    /**
+     * Updates the box size and triggers the onResize callback.
+     */
+    const updateBoxSize = useCallback((width, height, event) => {
+        setBoxSize({ width, height });
+        onResize?.(width, height, event);
+    }, [onResize]);
     /**
      * Ensures the new position is within the browser window bounds.
      * Returns null if the position would place the box partially off-screen.
@@ -137,7 +149,7 @@ export const DraggableBox = (props) => {
             if (isResizing.includes("top")) {
                 newHeight = Math.max(200, resizeStart.height - deltaY);
             }
-            setBoxSize({ width: newWidth, height: newHeight });
+            updateBoxSize(newWidth, newHeight, e);
         }
     };
     // Called when the mouse is released. Ends the dragging session.
@@ -179,8 +191,8 @@ export const DraggableBox = (props) => {
         if (direction.includes("bottom") || direction.includes("top")) {
             newHeight = Math.max(200, newHeight + delta);
         }
-        setBoxSize({ width: newWidth, height: newHeight });
-    }, [boxSize.width, boxSize.height]);
+        updateBoxSize(newWidth, newHeight, e.nativeEvent);
+    }, [boxSize.width, boxSize.height, updateBoxSize]);
     /**
      * Subscribes to mousemove and mouseup while dragging or resizing; unsubscribes otherwise.
      * This ensures we only respond to these events when necessary.
@@ -198,7 +210,7 @@ export const DraggableBox = (props) => {
             window.removeEventListener("mousemove", handleMouseMove);
             window.removeEventListener("mouseup", handleMouseUp);
         };
-    }, [isDragging, isResizing, offset, resizeStart]);
+    }, [isDragging, isResizing, offset, resizeStart, updateBoxSize]);
     /**
      * Observes changes to the box size and repositions if part of the box
      * moves off-screen. This keeps the box fully visible upon resizing.
@@ -240,8 +252,11 @@ export const DraggableBox = (props) => {
                         height: boxSize.height || "auto",
                         zIndex: 1000 + zIndexLayer,
                         bgcolor: "background.paper",
-                        borderRadius: 2,
+                        borderRadius: 1,
                         p: 1,
+                        border: `${slotSxProps?.border?.width ?? 1}px solid`,
+                        borderColor: slotSxProps?.border?.color ?? "grey.500",
+                        transform: "translateZ(0)",
                         ...sx,
                     }, children: [_jsxs(Box, { sx: {
                                 height: 30,
@@ -264,7 +279,9 @@ export const DraggableBox = (props) => {
                                         "&:hover": {
                                             bgcolor: "action.hover",
                                         },
-                                    }, children: _jsx(CloseIcon, { fontSize: "small" }) })] }), _jsx(Box, { children: children }), resizable && (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
+                                    }, children: _jsx(CloseIcon, { fontSize: "small" }) })] }), _jsx(Box, { sx: {
+                                ...slotSxProps?.content,
+                            }, children: children }), resizable && (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
                                         position: "absolute",
                                         right: 0,
                                         top: 0,

package/ListBase.d.ts

@@ -0,0 +1,50 @@
+import { SxProps } from "@mui/material";
+import { JSX, RefObject } from "react";
+export type ListItemType<T = string> = {
+    index: number;
+    value: T;
+    label: string;
+    ref?: RefObject<HTMLElement | null>;
+};
+type DisplayType = "vertical" | "horizontal" | "grid" | "horizontal-fit";
+type ListItemEventHandlers<T = string> = {
+    onClick?: (item: ListItemType<T>, event: React.MouseEvent) => void;
+    onMouseDown?: (item: ListItemType<T>, event: React.MouseEvent) => void;
+    onMouseUp?: (item: ListItemType<T>, event: React.MouseEvent) => void;
+    onMouseEnter?: (item: ListItemType<T>, event: React.MouseEvent) => void;
+    onMouseLeave?: (item: ListItemType<T>, event: React.MouseEvent) => void;
+    onDoubleClick?: (item: ListItemType<T>, event: React.MouseEvent) => void;
+    onContextMenu?: (item: ListItemType<T>, event: React.MouseEvent) => void;
+    onMouseOver?: (item: ListItemType<T>, event: React.MouseEvent) => void;
+};
+export declare const ListItem: (props: {
+    item: ListItemType<any>;
+    index: number;
+    size: "small" | "medium";
+    dataAttributes?: Record<string, string | number>;
+    sx?: SxProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export type ListBaseProps<T = string> = {
+    items: {
+        value: T;
+        label: string;
+    }[];
+    size?: "small" | "medium";
+    sx?: SxProps;
+    displayType?: DisplayType;
+    renderItem?: (item: ListItemType<T>) => JSX.Element;
+    onDelete?: (index: number) => void;
+    onEdit?: (index: number) => void;
+    editable?: boolean;
+    onClick?: (item: ListItemType<T>, event: React.MouseEvent) => void;
+    onMouseDown?: (item: ListItemType<T>, event: React.MouseEvent) => void;
+    itemEventHandlers?: ListItemEventHandlers<T>;
+    getItemSx?: (item: ListItemType<T>, index: number) => SxProps;
+    dataAttributes?: Record<string, string | number>;
+    slotSxProps?: {
+        listItem?: SxProps;
+    };
+};
+export declare const ListBase: <T extends any = string>(props: ListBaseProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ListBase.d.ts.map

package/ListBase.d.ts.map

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

package/ListBase.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconButton, List as MuiList, ListItem as MuiListItem, } from "@mui/material";
+import { Typography } from "./Typography";
+import { createContext, useContext, useRef, useState, } from "react";
+import { Close } from "@mui/icons-material";
+import EditIcon from "@mui/icons-material/Edit";
+import { useWPTheme } from "./ThemeRegistry";
+const ListContext = createContext({});
+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 { wpTheme } = useWPTheme();
+    const handleEvent = (handler) => {
+        return handler
+            ? (event) => handler(item, event)
+            : undefined;
+    };
+    const handleMouseEnter = (event) => {
+        setIsHovered(true);
+        itemEventHandlers?.onMouseEnter?.(item, event);
+    };
+    const handleMouseLeave = (event) => {
+        setIsHovered(false);
+        itemEventHandlers?.onMouseLeave?.(item, event);
+    };
+    const customSx = {
+        ...(getItemSx ? getItemSx(item, index) : {}),
+        ...(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: {
+            position: "relative",
+            "&:hover": {
+                backgroundColor: wpTheme.background.hoverColor,
+            },
+            border: (theme) => `1px solid ${theme.palette.divider}`,
+            p: 0,
+            width: displayType === "horizontal" ? "auto" : "100%",
+            display: "flex",
+            ...customSx,
+        }, children: [_jsx(Box, { sx: { flexGrow: 1, display: "flex", alignItems: "center" }, children: renderItem ? (renderItem(item)) : (_jsx(Typography, { size: size, sx: {
+                        p: 0.5,
+                    }, children: item.label })) }), (onEdit || editable) && isHovered && (_jsx(IconButton, { size: "small", sx: {
+                    height: "100%",
+                }, onMouseDown: (e) => {
+                    onEdit && e.stopPropagation();
+                    onEdit?.(index);
+                }, children: _jsx(EditIcon, { sx: {
+                        fontSize: size === "small" ? "small" : "medium",
+                    } }) })), onDelete && (_jsx(IconButton, { size: "small", sx: {
+                    height: "100%",
+                }, onMouseDown: (e) => {
+                    e.stopPropagation();
+                    console.log("Removing item at index", index);
+                    onDelete?.(index);
+                }, children: _jsx(Close, { sx: {
+                        fontSize: size === "small" ? "small" : "medium",
+                    } }) }))] }));
+};
+export const ListBase = (props) => {
+    const { items, size = "small", displayType = "vertical", renderItem, onDelete, onEdit, onClick, onMouseDown, itemEventHandlers, getItemSx, dataAttributes, slotSxProps, editable = false, } = props;
+    const listItems = items.map((item, index) => ({
+        index,
+        value: item.value,
+        label: item.label,
+    }));
+    let sx = {};
+    if (displayType === "horizontal") {
+        sx = {
+            display: "flex",
+            flexDirection: "row",
+        };
+    }
+    else if (displayType === "horizontal-fit") {
+        sx = {
+            display: "flex",
+            flexDirection: "row",
+        };
+    }
+    else if (displayType === "grid") {
+        sx = {
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+            gap: 1,
+        };
+    }
+    // Merge standalone onClick/onMouseDown/onMouseOver with itemEventHandlers
+    const mergedEventHandlers = {
+        ...itemEventHandlers,
+        onClick: onClick || itemEventHandlers?.onClick,
+        onMouseDown: onMouseDown || itemEventHandlers?.onMouseDown,
+    };
+    return (_jsx(ListContext.Provider, { value: {
+            items: listItems,
+            displayType,
+            renderItem: renderItem,
+            onDelete,
+            onEdit,
+            itemEventHandlers: mergedEventHandlers,
+            getItemSx: getItemSx,
+            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

@@ -1,11 +1,7 @@
 import { SxProps } from "@mui/material";
-import { JSX, RefObject } from "react";
-export type SortableListItemType<T = string> = {
-    index: number;
-    value: T;
-    label: string;
-    ref: RefObject<HTMLElement | null>;
-};
+import { ListItemType } from "./ListBase";
+import { JSX } from "react";
+export type SortableListItemType<T = string> = ListItemType<T>;
 type DisplayType = "vertical" | "horizontal" | "grid" | "horizontal-fit";
 export type SortableListProps = Parameters<typeof SortableList>[0];
 export declare const SortableList: <T extends any = string>(props: {

package/SortableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../src/SortableList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmC,OAAO,EAAE,MAAM,eAAe,CAAC;AAGzE,OAAO,EAEL,GAAG,EACH,SAAS,EAKV,MAAM,OAAO,CAAC;AAQf,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,MAAM,IAAI;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACpC,CAAC;AAEF,KAAK,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,gBAAgB,CAAC;AAgOzE,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,4CAmGA,CAAC"}
+{"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"}

package/SortableList.js

@@ -1,130 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, IconButton, List, ListItem } from "@mui/material";
-import { Typography } from "./Typography";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
 import { useMouseMove } from "./hooks/use-mouse-move";
-import { createContext, useContext, useEffect, useRef, useState, } from "react";
-import { Close } from "@mui/icons-material";
-import EditIcon from "@mui/icons-material/Edit";
-import { useWPTheme } from "./ThemeRegistry";
-const Context = createContext({});
-const SortableListItem = (props) => {
-    const { index, size } = props;
-    const ref = useRef(null);
-    const { findItem, swapItems, refPos, targetRef, items, displayType, renderItem, onDelete, onEdit, } = useContext(Context);
-    const item = findItem(index);
-    const { wpTheme } = useWPTheme();
-    const handleDeltaChange = (e, delta) => {
-        // Get the rect of the item being dragged
-        const rect = ref.current?.getBoundingClientRect();
-        if (!rect) {
-            console.warn("SortableListItem ref is not set or does not have a bounding rect.");
-            return;
-        }
-        let newY, newX, transformValues = [];
-        //if (displayType === "horizontal" || displayType === "grid") {
-        if (["horizontal", "horizontal-fit", "grid"].includes(displayType)) {
-            newX = refPos.current.x + delta.x; // Update the X position relative to the element
-            transformValues.push(`translateX(${newX}px)`);
-            refPos.current.x = newX; // Update the reference position
-        }
-        if (displayType === "vertical" || displayType === "grid") {
-            newY = refPos.current.y + delta.y; // Update the Y position relative to the element
-            transformValues.push(`translateY(${newY}px)`);
-            refPos.current.y = newY; // Update the reference position
-        }
-        ref.current.style.transform = transformValues.join(" ");
-        // Get elements on the currrent moust position
-        const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
-        // timeoutId.current = setTimeout(() => {
-        for (const element of elementsAtPoint) {
-            // get the data attribute
-            const itemIndex = element.getAttribute("data-sortable-item-index");
-            if (!itemIndex) {
-                // Skip if the element does not have the data attribute
-                continue;
-            }
-            // Skip if itemValue is null or the same as the current value
-            if (itemIndex === String(index)) {
-                if (targetRef.current) {
-                    targetRef.current.style.removeProperty("border");
-                    targetRef.current = null;
-                }
-                continue;
-            }
-            const itemIndexNumber = parseInt(itemIndex);
-            if (itemIndexNumber < 0 || itemIndexNumber >= items.length) {
-                continue; // Skip invalid indices
-            }
-            if (targetRef.current) {
-                targetRef.current.style.removeProperty("border");
-            }
-            targetRef.current = element;
-            targetRef.current.style.border = "1px solid red";
-            break;
-        }
-    };
-    const handleMouseDown = (e) => {
-        console.log("mouse down on item", index, e);
-        const rect = ref.current?.getBoundingClientRect();
-        if (rect) {
-            refPos.current.y = e.clientY - rect.top - rect.height / 2; // Calculate the initial Y offset
-            refPos.current.x = 0;
-            ref.current.style.zIndex = "100000"; // Bring the item to the front
-            ref.current.style.transform = `translate(${refPos.current.x}px, ${refPos.current.y}px)`;
-        }
-    };
-    const handleMouseUp = (e) => {
-        refPos.current.y = 0; // Reset Y position
-        refPos.current.x = 0; // Reset X position
-        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, 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,
-    });
-    // Assign the ref to the item
-    useEffect(() => {
-        item.ref = ref;
-    }, [item]);
-    return (_jsxs(ListItem, { ref: ref, value: item.value, onMouseDown: initMouseMove(ref), "data-sortable-item-index": index, sx: {
-            position: "relative",
-            cursor: "move",
-            "&:hover": {
-                backgroundColor: wpTheme.background.hoverColor, // Use theme hover color
-            },
-            border: (theme) => `1px solid ${theme.palette.divider}`,
-            p: 0,
-            width: displayType === "horizontal" ? "auto" : "100%",
-            display: "flex",
-        }, children: [_jsx(Box, { sx: { flexGrow: 1, display: "flex", alignItems: "center" }, children: renderItem ? (renderItem(item)) : (_jsx(Typography, { size: size, sx: {
-                        p: 0.5,
-                    }, children: item.label })) }), onEdit && (_jsx(IconButton, { size: "small", sx: {
-                    height: "100%",
-                }, onMouseDown: (e) => {
-                    e.stopPropagation();
-                    onEdit?.(index);
-                }, children: _jsx(EditIcon, { sx: {
-                        fontSize: size === "small" ? "small" : "medium",
-                    } }) })), onDelete && (_jsx(IconButton, { size: "small", sx: {
-                    height: "100%",
-                }, onMouseDown: (e) => {
-                    e.stopPropagation();
-                    console.log("Removing item at index", index);
-                    onDelete?.(index);
-                }, children: _jsx(Close, { sx: {
-                        fontSize: size === "small" ? "small" : "medium",
-                    } }) }))] }));
-};
+import { createContext, useEffect, useRef, useState, } from "react";
+import { ListBase } from "./ListBase";
+const SortableContext = createContext({});
 export const SortableList = (props) => {
     const { size = "small", displayType = "vertical", renderItem, onDelete, onChange, onEdit, } = props;
     const [items, setItems] = useState([]);
@@ -133,7 +12,7 @@ export const SortableList = (props) => {
     const findItem = (index) => {
         return items.find((item) => item.index === index);
     };
-    const swapItems = (e, fromIndex, toIndex) => {
+    const swapItems = (_e, fromIndex, toIndex) => {
         console.log("Swapping items", fromIndex, toIndex);
         if (fromIndex < 0 ||
             toIndex < 0 ||
@@ -141,18 +20,16 @@ export const SortableList = (props) => {
             toIndex >= items.length) {
             return;
         }
-        // Swap items in the state
         const newItems = [...items];
         const temp = newItems[fromIndex];
         newItems[fromIndex] = newItems[toIndex];
         newItems[toIndex] = temp;
-        newItems[fromIndex].index = fromIndex; // Update index after swap
-        newItems[toIndex].index = toIndex; // Update index after swap
+        newItems[fromIndex].index = fromIndex;
+        newItems[toIndex].index = toIndex;
         setItems(newItems);
         onChange?.(newItems);
     };
     useEffect(() => {
-        // Initialize items from the enum prop
         const initialItems = props.enum.map((item, index) => ({
             index,
             value: item.value,
@@ -181,15 +58,90 @@ export const SortableList = (props) => {
             gap: 1,
         };
     }
-    return (_jsx(Context, { value: {
+    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 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);
+    };
+    return (_jsx(SortableContext.Provider, { value: {
             items,
             findItem: findItem,
             swapItems,
             refPos,
             targetRef,
             displayType,
-            renderItem: renderItem,
-            onDelete,
-            onEdit,
-        }, children: _jsx(List, { sx: { ...sx, ...props.sx }, children: items.map((item, index) => (_jsx(SortableListItem, { index: index, size: size }, item.index))) }) }));
+        }, children: _jsx(ListBase, { items: items, size: size, sx: { ...sx, ...props.sx }, displayType: displayType, renderItem: renderSortableItem, onDelete: onDelete, onEdit: onEdit }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rnaga/wp-next-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "scripts": {
     "build": "node ../../scripts/build-ui.mjs",
     "release-old": "node ../../scripts/release.mjs",
@@ -17,7 +17,9 @@
   "license": "MIT",
   "description": "User Interface components for WP Next",
   "dependencies": {
+    "@mui/icons-material": "^7.3.6",
     "@mui/material": "^7.0.2",
+    "@mui/x-date-pickers": "^7.29.4",
     "@rnaga/wp-next-core": "^1.0"
   },
   "devDependencies": {