@m4l/components 9.2.46 → 9.2.47

package/components/DragResizeWindowRND/DragResizeWindowRND.js

@@ -44,7 +44,7 @@ const DragResizeWindowRND = forwardRef((props, ref) => {
     ...others
   } = props;
   const [currentState, setCurrentState] = useState(
-    () => getInitialSize(containerSize, defaultPosition, containerElement)
+    () => getInitialSize(containerSize, defaultPosition, containerElement, allowHeightResizeContainer, allowWidthResizeContainer)
   );
   const minConstraints = useMemo(() => [minWidth, minHeight], [minWidth, minHeight]);
   const stateRef = useRef({

package/components/DragResizeWindowRND/helpers/getInitialSize.d.ts

@@ -12,4 +12,4 @@ import { CurrentState, DefaultPosition } from '../types';
  * @param {DefaultPosition} defaultPosition - Object defining the default vertical and horizontal positions (`top`, `bottom`, `height`, `left`, `right`, `width`).
  * @returns {CurrentState} - The initial size and position of the element with `top`, `left`, `width`, and `height` properties.
  */
-export declare const getInitialSize: (containerSize: ContainerSize | undefined, defaultPosition: DefaultPosition, containerElement: HTMLElement | undefined) => CurrentState;
+export declare const getInitialSize: (containerSize: ContainerSize | undefined, defaultPosition: DefaultPosition, containerElement: HTMLElement | undefined, allowHeightResizeContainer: boolean, allowWidthResizeContainer: boolean) => CurrentState;

package/components/DragResizeWindowRND/helpers/getInitialSize.js

@@ -1,10 +1,11 @@
-const getInitialSize = (containerSize, defaultPosition, containerElement) => {
+const getInitialSize = (containerSize, defaultPosition, containerElement, allowHeightResizeContainer, allowWidthResizeContainer) => {
   let top;
   let bottom;
   let height;
   let left;
   let right;
   let width;
+  const LIMIT_PX = 20;
   const containerHeight = containerSize?.containerHeight || 200;
   const containerWidth = containerSize?.containerWidth || 200;
   const scrollTop = containerElement?.scrollTop || 0;
@@ -26,13 +27,13 @@ const getInitialSize = (containerSize, defaultPosition, containerElement) => {
   }
   if ("width" in defaultPosition.horizontal) {
     width = defaultPosition.horizontal.width;
-    if (!("left" in defaultPosition.horizontal)) {
+    if (!("left" in defaultPosition.horizontal) && !("right" in defaultPosition.horizontal)) {
       left = scrollLeft + (containerWidth - width) / 2;
     }
   }
   if ("height" in defaultPosition.vertical) {
     height = defaultPosition.vertical.height;
-    if (!("top" in defaultPosition.vertical)) {
+    if (!("top" in defaultPosition.vertical) && !("bottom" in defaultPosition.vertical)) {
       top = scrollTop + (containerHeight - height) / 2;
     }
   }
@@ -44,12 +45,31 @@ const getInitialSize = (containerSize, defaultPosition, containerElement) => {
     width = containerWidth * defaultPosition.horizontal.percent;
     left = (containerWidth - width) / 2;
   }
-  return {
-    y: Math.round(top ?? (bottom ? containerHeight - bottom - (height || 0) : 0)),
+  const initialSize = {
+    y: Math.round(top ?? (bottom !== void 0 ? containerHeight + bottom - (height || 0) : 0)),
     height: Math.round(height ?? containerHeight - (top || 0) - (bottom || 0)),
-    x: Math.round(left ?? (right ? containerWidth - right - (width || 0) : 0)),
+    x: Math.round(left ?? (right !== void 0 ? containerWidth + right - (width || 0) : 0)),
     width: Math.round(width ?? containerWidth - (left || 0) - (right || 0))
   };
+  if (!allowHeightResizeContainer) {
+    const boundTop = 0 + LIMIT_PX;
+    const boundBottom = Math.max(containerHeight - LIMIT_PX - (height || 0), LIMIT_PX);
+    initialSize.y = Math.max(initialSize.y, boundTop);
+    initialSize.height = Math.min(initialSize.height, containerHeight - LIMIT_PX);
+    if (initialSize.y > boundBottom) {
+      initialSize.y = boundBottom;
+    }
+  }
+  if (!allowWidthResizeContainer) {
+    const boundLeft = 0 + LIMIT_PX;
+    const boundRight = Math.max(containerWidth - LIMIT_PX - (width || 0), LIMIT_PX);
+    initialSize.x = Math.max(initialSize.x, boundLeft);
+    initialSize.width = Math.min(initialSize.width, containerWidth - LIMIT_PX);
+    if (initialSize.x > boundRight) {
+      initialSize.x = boundRight;
+    }
+  }
+  return initialSize;
 };
 export {
   getInitialSize as g

package/components/DragResizeWindowRND/hooks/useRNDDragOptions.js

@@ -18,6 +18,7 @@ const useDragOptions = (props) => {
       if (!containerElement) {
         return;
       }
+      e.stopPropagation();
       if (onDragStart) {
         if (onDragStart(e, draggableData) === false) {
           return false;
@@ -53,6 +54,7 @@ const useDragOptions = (props) => {
   );
   const localOnDrag = useCallback((e, draggableData) => {
     const { x, y, deltaX, deltaY } = draggableData;
+    e.stopPropagation();
     if (!stateRef.current.dragging) {
       return;
     }

package/components/ModalDialog/ModalDialog.js

@@ -3,26 +3,28 @@ import { u as useModal } from "../../hooks/useModal/index.js";
 import { useIsMobile } from "@m4l/graphics";
 import { u as useStateRef } from "../../hooks/useStateRef/index.js";
 import { Paper } from "@mui/material";
+import { u as useSizeContainer } from "../../hooks/useSizeContainer/index.js";
 import { D as DialogRootStyled, P as PaperModalDialogStyled } from "./slots/ModalDialogSlots.js";
 import { D as DragResizeWindowRND } from "../DragResizeWindowRND/DragResizeWindowRND.js";
 const DraggablePaperComponent = (ref, dialogProperties) => {
   return (props) => {
-    const { initialWidth, initialHeight, maxWidth, maxHeight } = dialogProperties;
-    if (!ref) {
-      return props.children;
+    const containerSize = useSizeContainer(ref);
+    const { initialWidth, initialHeight = 100, maxWidth, maxHeight } = dialogProperties;
+    if (!ref || !containerSize) {
+      return null;
     }
-    const topPosition = Math.max(0, window.innerHeight / 2 - (initialHeight ?? 100) / 2);
     const leftPosition = Math.max(0, window.innerWidth / 2 - (initialWidth ?? 100) / 2);
     return /* @__PURE__ */ jsx(
       DragResizeWindowRND,
       {
         containerElement: ref,
+        containerSize,
         minWindowWidth: maxWidth,
         minWindowHeight: maxHeight,
         bounds: { left: 0, top: 0, right: 0, bottom: 0 },
         resizeHandles: ["se", "nw", "sw", "ne", "n", "e", "s", "w"],
         defaultPosition: {
-          vertical: { top: topPosition, height: initialHeight ?? 100 },
+          vertical: { height: initialHeight },
           horizontal: { left: leftPosition, width: initialWidth ?? 100 }
         },
         children: /* @__PURE__ */ jsx(PaperModalDialogStyled, { ...props, children: props.children })

package/hooks/useSizeWindow/index.d.ts

@@ -2,5 +2,6 @@
  * Hook that returns the height of the navigator window
  */
 export declare const useSizeWindow: () => {
-    windowHeight: number;
+    height: number;
+    width: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.46",
+  "version": "9.2.47",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"

package/storybook/components/DragResizeWindowRND/stories/DragResizeWindowRND.stories.d.ts

@@ -5,4 +5,6 @@ type Story = StoryObj<typeof DragResizeWindowRND>;
 export declare const Default: Story;
 export declare const AllowHeightResizeContainer: Story;
 export declare const Hidden: Story;
+export declare const WithTopLeftNegative: Story;
+export declare const WithBottomRightPositive: Story;
 export default meta;