@rnaga/wp-next-ui 1.0.4 → 1.0.6

package/DraggableBox.d.ts

@@ -34,6 +34,7 @@ export declare const DraggableBox: (props: {
     slotSxProps?: SlotSxProps;
     zIndexLayer?: number;
     placement?: "target" | "left";
+    resizable?: boolean;
 }) => 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,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAMtD,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;CAC/B,4CAqNA,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;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"}

package/DraggableBox.js

@@ -14,13 +14,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - slotSxProps: Style overrides for the header and title.
  */
 import { useCallback, useEffect, useRef, useState, } from "react";
-import { Box } from "@mui/material";
+import { Box, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 import { Typography } from "./Typography";
 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", } = props;
+    const { children, targetRef, ref: selfRef, title, size, onClose, open, sx, slotSxProps, offset: initialOffset = {}, zIndexLayer = 0, placement = "left", resizable = false, } = props;
     // Provide default offset values for the box
     const { left = 0, top = 0 } = initialOffset;
     // Reference to the draggable box DOM element
@@ -31,6 +32,12 @@ export const DraggableBox = (props) => {
     const [isDragging, setIsDragging] = useState(false);
     // Stores the mouse down offset within the box
     const [offset, setOffset] = useState({ x: 0, y: 0 });
+    // State to store the current size of the draggable box
+    const [boxSize, setBoxSize] = useState({ width: 0, height: 0 });
+    // 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 });
     /**
      * Ensures the new position is within the browser window bounds.
      * Returns null if the position would place the box partially off-screen.
@@ -46,35 +53,51 @@ export const DraggableBox = (props) => {
     };
     /**
      * Callback ref to get the DOM element for the draggable box.
-     * Requires a targetRef to position the box relative to another element.
+     * Positions the box relative to a target element if provided, or centers it on screen.
      */
     const callbackRef = useCallback((ref) => {
-        if (!ref || !targetRef?.current)
+        if (!ref)
             return;
         boxRef.current = ref;
         if (selfRef) {
             // If a selfRef is provided, assign the boxRef to it
             selfRef.current = ref;
         }
-        // Calculate the referenced element’s position
-        const rect = targetRef.current.getBoundingClientRect();
         const boxWidth = boxRef.current.offsetWidth || 0;
         const boxHeight = boxRef.current.offsetHeight || 0;
-        // Compute initial position based on target element
-        let newX = rect.left + left - boxWidth;
-        let newY = rect.bottom - boxHeight / 2 + top;
-        // if placemenet is "target", x and y are relative to the target element
-        if (placement === "target") {
-            newX = rect.left;
-            newY = rect.top;
+        let newX;
+        let newY;
+        if (targetRef?.current) {
+            // Calculate the referenced element's position
+            const rect = targetRef.current.getBoundingClientRect();
+            // Compute initial position based on target element
+            newX = rect.left + left - boxWidth;
+            newY = rect.bottom - boxHeight / 2 + top;
+            // if placement is "target", x and y are relative to the target element
+            if (placement === "target") {
+                newX = rect.left;
+                newY = rect.top;
+            }
+        }
+        else {
+            // Center the box on screen if no targetRef is provided
+            newX = (window.innerWidth - boxWidth) / 2 + left;
+            newY = (window.innerHeight - boxHeight) / 2 + top;
         }
         // If the box goes off-screen at the bottom, adjust upward
         if (newY + boxHeight > window.innerHeight) {
             newY = window.innerHeight - boxHeight;
         }
+        // If the box goes off-screen at the right, adjust leftward
+        if (newX + boxWidth > window.innerWidth) {
+            newX = window.innerWidth - boxWidth;
+        }
+        // Ensure minimum position is not negative
+        newX = Math.max(0, newX);
+        newY = Math.max(0, newY);
         // Store the position state
         setPosition({ x: newX, y: newY });
-    }, [targetRef, left, top]);
+    }, [targetRef, left, top, placement, selfRef]);
     /**
      * Called when the user presses the mouse button within the box header.
      * Captures the offset from the mouse position to the box's top-left corner.
@@ -91,21 +114,79 @@ export const DraggableBox = (props) => {
      * Updates the box position while respecting window bounds.
      */
     const handleMouseMove = (e) => {
-        if (!isDragging || !boxRef.current)
-            return;
-        const { offsetWidth, offsetHeight } = boxRef.current;
-        const newPos = clampPosition(e.clientX - offset.x, e.clientY - offset.y, offsetWidth, offsetHeight);
-        if (newPos)
-            setPosition(newPos);
+        if (isDragging && boxRef.current) {
+            const { offsetWidth, offsetHeight } = boxRef.current;
+            const newPos = clampPosition(e.clientX - offset.x, e.clientY - offset.y, offsetWidth, offsetHeight);
+            if (newPos)
+                setPosition(newPos);
+        }
+        if (isResizing && boxRef.current) {
+            const deltaX = e.clientX - resizeStart.x;
+            const deltaY = e.clientY - resizeStart.y;
+            let newWidth = resizeStart.width;
+            let newHeight = resizeStart.height;
+            if (isResizing.includes("right")) {
+                newWidth = Math.max(300, resizeStart.width + deltaX);
+            }
+            if (isResizing.includes("left")) {
+                newWidth = Math.max(300, resizeStart.width - deltaX);
+            }
+            if (isResizing.includes("bottom")) {
+                newHeight = Math.max(200, resizeStart.height + deltaY);
+            }
+            if (isResizing.includes("top")) {
+                newHeight = Math.max(200, resizeStart.height - deltaY);
+            }
+            setBoxSize({ width: newWidth, height: newHeight });
+        }
     };
     // Called when the mouse is released. Ends the dragging session.
-    const handleMouseUp = () => setIsDragging(false);
+    const handleMouseUp = () => {
+        setIsDragging(false);
+        setIsResizing(null);
+    };
+    /**
+     * Called when the user presses the mouse button on a resize handle.
+     * Captures the initial state for resizing.
+     */
+    const handleResizeMouseDown = useCallback((e, direction) => {
+        e.stopPropagation();
+        setIsResizing(direction);
+        const rect = boxRef.current?.getBoundingClientRect();
+        if (rect) {
+            setResizeStart({
+                x: e.clientX,
+                y: e.clientY,
+                width: rect.width,
+                height: rect.height,
+            });
+        }
+    }, []);
+    /**
+     * Handles mouse wheel events on resize handles to adjust size.
+     */
+    const handleResizeWheel = useCallback((e, direction) => {
+        e.preventDefault();
+        if (!boxRef.current)
+            return;
+        const rect = boxRef.current.getBoundingClientRect();
+        const delta = e.deltaY > 0 ? -10 : 10;
+        let newWidth = boxSize.width || rect.width;
+        let newHeight = boxSize.height || rect.height;
+        if (direction.includes("right") || direction.includes("left")) {
+            newWidth = Math.max(300, newWidth + delta);
+        }
+        if (direction.includes("bottom") || direction.includes("top")) {
+            newHeight = Math.max(200, newHeight + delta);
+        }
+        setBoxSize({ width: newWidth, height: newHeight });
+    }, [boxSize.width, boxSize.height]);
     /**
-     * Subscribes to mousemove and mouseup while dragging; unsubscribes otherwise.
+     * Subscribes to mousemove and mouseup while dragging or resizing; unsubscribes otherwise.
      * This ensures we only respond to these events when necessary.
      */
     useEffect(() => {
-        if (isDragging) {
+        if (isDragging || isResizing) {
             window.addEventListener("mousemove", handleMouseMove);
             window.addEventListener("mouseup", handleMouseUp);
         }
@@ -117,7 +198,7 @@ export const DraggableBox = (props) => {
             window.removeEventListener("mousemove", handleMouseMove);
             window.removeEventListener("mouseup", handleMouseUp);
         };
-    }, [isDragging, offset]);
+    }, [isDragging, isResizing, offset, resizeStart]);
     /**
      * Observes changes to the box size and repositions if part of the box
      * moves off-screen. This keeps the box fully visible upon resizing.
@@ -155,17 +236,88 @@ export const DraggableBox = (props) => {
                         top: position.y,
                         userSelect: "none",
                         minWidth: 300,
+                        width: boxSize.width || "auto",
+                        height: boxSize.height || "auto",
                         zIndex: 1000 + zIndexLayer,
                         bgcolor: "background.paper",
                         borderRadius: 2,
                         p: 1,
                         ...sx,
-                    }, children: [_jsx(Box, { sx: {
+                    }, children: [_jsxs(Box, { sx: {
                                 height: 30,
                                 cursor: "move",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
                                 ...slotSxProps?.header,
-                            }, onMouseDown: handleMouseDown, children: _jsx(Typography, { size: size, sx: {
-                                    p: 0.5,
-                                    ...slotSxProps?.title,
-                                }, bold: true, children: title }) }), _jsx(Box, { children: children })] }) })] }));
+                            }, onMouseDown: handleMouseDown, children: [_jsx(Typography, { size: size, sx: {
+                                        p: 0.5,
+                                        flexGrow: 1,
+                                        ...slotSxProps?.title,
+                                    }, bold: true, children: title }), _jsx(IconButton, { size: "small", onClick: (e) => {
+                                        e.stopPropagation();
+                                        onClose();
+                                    }, onMouseDown: (e) => {
+                                        e.stopPropagation();
+                                    }, sx: {
+                                        padding: 0.5,
+                                        "&:hover": {
+                                            bgcolor: "action.hover",
+                                        },
+                                    }, children: _jsx(CloseIcon, { fontSize: "small" }) })] }), _jsx(Box, { children: children }), resizable && (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
+                                        position: "absolute",
+                                        right: 0,
+                                        top: 0,
+                                        bottom: 0,
+                                        width: 8,
+                                        cursor: "ew-resize",
+                                        "&:hover": {
+                                            bgcolor: "primary.main",
+                                            opacity: 0.3,
+                                        },
+                                    }, onMouseDown: (e) => handleResizeMouseDown(e, "right"), onWheel: (e) => handleResizeWheel(e, "right") }), _jsx(Box, { sx: {
+                                        position: "absolute",
+                                        bottom: 0,
+                                        left: 0,
+                                        right: 0,
+                                        height: 8,
+                                        cursor: "ns-resize",
+                                        "&:hover": {
+                                            bgcolor: "primary.main",
+                                            opacity: 0.3,
+                                        },
+                                    }, onMouseDown: (e) => handleResizeMouseDown(e, "bottom"), onWheel: (e) => handleResizeWheel(e, "bottom") }), _jsx(Box, { sx: {
+                                        position: "absolute",
+                                        bottom: 0,
+                                        right: 0,
+                                        width: 16,
+                                        height: 16,
+                                        cursor: "nwse-resize",
+                                        "&:hover": {
+                                            bgcolor: "primary.main",
+                                            opacity: 0.3,
+                                        },
+                                    }, onMouseDown: (e) => handleResizeMouseDown(e, "bottom-right"), onWheel: (e) => handleResizeWheel(e, "bottom-right") }), _jsx(Box, { sx: {
+                                        position: "absolute",
+                                        left: 0,
+                                        top: 0,
+                                        bottom: 0,
+                                        width: 8,
+                                        cursor: "ew-resize",
+                                        "&:hover": {
+                                            bgcolor: "primary.main",
+                                            opacity: 0.3,
+                                        },
+                                    }, onMouseDown: (e) => handleResizeMouseDown(e, "left"), onWheel: (e) => handleResizeWheel(e, "left") }), _jsx(Box, { sx: {
+                                        position: "absolute",
+                                        top: 0,
+                                        left: 0,
+                                        right: 0,
+                                        height: 8,
+                                        cursor: "ns-resize",
+                                        "&:hover": {
+                                            bgcolor: "primary.main",
+                                            opacity: 0.3,
+                                        },
+                                    }, onMouseDown: (e) => handleResizeMouseDown(e, "top"), onWheel: (e) => handleResizeWheel(e, "top") })] }))] }) })] }));
 };