@rnaga/wp-next-ui 1.0.6 → 1.0.7

package/DraggableBox.d.ts

@@ -10,13 +10,17 @@
  * - 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;
+    border?: {
+        width?: number;
+        color?: string;
+    };
 };
 export declare const DraggableBox: (props: {
     children: React.ReactNode;

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,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;CACrB,4CA0bA,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";
@@ -37,7 +37,12 @@ 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,
+    });
     /**
      * Ensures the new position is within the browser window bounds.
      * Returns null if the position would place the box partially off-screen.
@@ -240,8 +245,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,

package/package.json

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