@m4l/components 9.2.0 → 9.2.2

package/components/DragResizeWindow/types.d.ts

@@ -1,11 +1,12 @@
-import { ReactNode } from 'react';
+import { ReactNode, ForwardedRef } from 'react';
 import { DraggableCoreProps, DraggableData, DraggableEventHandler } from 'react-draggable';
 import { ContainerSize } from '../../utils/types';
 import { Theme } from '@mui/material/styles';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { DragResizeWindowSlots } from './slots/slots';
 import { COMPONENT_KEY_COMPONENT } from './constants';
 import { ResizeCallbackData, ResizeHandle } from '../extended/React-Resizable';
+import { ResizeDirection } from 're-resizable';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
 /**
  * Tipo que define la corrección de la posición
  * - nCorrection: Cantidad de corrección
@@ -44,7 +45,11 @@ export interface CurrentState extends Position {
     resizing?: {
         width: number;
         height: number;
-        handle: ResizeHandle;
+        handle: ResizeHandle | ResizeDirection;
+        startClientX?: number;
+        startClientY?: number;
+        startHeight?: number;
+        startWidth?: number;
     };
     /**
      * Posición inicial antes de comenzar el dragging o resizing
@@ -66,6 +71,10 @@ export interface CurrentState extends Position {
      * "overflowHeightAt" Indica en que valor estaba el Height antes de compactar padre en un resize
      */
     overflowHeightAt?: number;
+    /**
+     * "minConstraints" Indica los límites mínimos de la ventana
+     */
+    minConstraints?: [number, number];
 }
 /**
  * Representa una posición parcial, solo incluye las propiedades left y top.
@@ -117,9 +126,13 @@ export interface DefaultPosition {
     } | {
         top: number;
         height: number;
+    } | {
+        height: number;
     } | {
         bottom: number;
         height: number;
+    } | {
+        percent: number;
     };
     horizontal: {
         left: number;
@@ -130,8 +143,16 @@ export interface DefaultPosition {
     } | {
         right: number;
         width: number;
+    } | {
+        percent: number;
+    } | {
+        width: number;
     };
 }
+export interface DragResizeWindowRefHandler {
+    ensureVisible: () => void;
+    current: HTMLDivElement | null;
+}
 /**
  * Propiedades del componente DragResizeWindow, que incluye tanto los controles de arrastre como de redimensionamiento.
  */
@@ -233,6 +254,18 @@ export interface DragResizeWindowProps extends Partial<Omit<DraggableCoreProps,
      * "hidden" permite definir si la ventana está oculta o no. Por defecto es "false"
      */
     hidden?: boolean;
+    /**
+     * "allowResizeContainer" permite definir si se puede redimensionar el contenedor padre
+     */
+    allowHeightResizeContainer?: boolean;
+    /**
+     * "allowWidthResizeContainer" permite definir si se puede redimensionar el contenedor padre
+     */
+    allowWidthResizeContainer?: boolean;
+    /**
+     * "windowRef" permite definir una referencia a la ventana
+     */
+    windowRef?: ForwardedRef<HTMLDivElement | undefined>;
 }
 /**
  * Referencia del estado del componente DragResizeWindow.
@@ -243,6 +276,22 @@ export interface StateRef extends Pick<DragResizeWindowProps, 'bounds'>, Current
      * containerSize: Tamaño del contenedor padre la ultima vez que se actualizó
      */
     containerSize?: ContainerSize | undefined;
+    /**
+     * isAbove: Indica si el cursor esta por encima del contenedor padre and se esta arrastrando hacia arriba
+     */
+    isAbove?: boolean;
+    /**
+     * scrollTop: Valor del scroll del contenedor padre
+     */
+    scrollTop?: number;
+    /**
+     * scrollLeft: Valor del scroll del contenedor padre
+     */
+    scrollLeft?: number;
+    /**
+     * resizeByScroll: Indica si el resize se esta haciendo por scroll o el eventHandler del resize
+     */
+    resizeByScroll?: boolean;
 }
 /**
  * Tipos para los slots del componente DragResizeWindow.
@@ -264,4 +313,4 @@ export type DragResizeWindowOwnerState = {
 /**
  * Tipo de reglas de estilo para el componente DragResizeWindow.
  */
-export type DragResizeWindowStyles = Partial<OverridesStyleRules<DragResizeWindowSlotsType, typeof COMPONENT_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type DragResizeWindowStyles = M4LOverridesStyleRules<DragResizeWindowSlotsType, typeof COMPONENT_KEY_COMPONENT, Theme>;

package/components/DragResizeWindow/utils.d.ts

@@ -1,4 +1,4 @@
-import { Position } from './types';
+import { CurrentState } from './types';
 /**
  * Generates a style object with transform properties to position an element.
  *
@@ -9,4 +9,7 @@ import { Position } from './types';
  * @param {Position} position - An object containing `top`, `left`, `width`, and `height` properties.
  * @returns {Record<string, any>} A style object with applied transform, dimension, and positioning properties.
  */
-export declare function setTransform({ top, left, width, height }: Position): Record<string, any>;
+/**
+ * setTransform
+ */
+export declare function setTransform({ top, left, width, height, dragging }: CurrentState): Record<string, any>;

package/components/DragResizeWindow/utils.js

@@ -1,16 +1,35 @@
-function setTransform({ top, left, width, height }) {
-  const translate = `translate(${left}px,${top}px)`;
-  return {
-    transform: translate,
-    WebkitTransform: translate,
-    MozTransform: translate,
-    msTransform: translate,
-    OTransform: translate,
-    width: `${width}px`,
-    height: `${height}px`,
-    position: "absolute",
-    prop1: 1
-  };
+function setTransform({ top, left, width, height, dragging }) {
+  const roundedTop = Math.round(top);
+  const roundedLeft = Math.round(left);
+  const roundedWidth = Math.round(width);
+  const roundedHeight = Math.round(height);
+  if (dragging) {
+    return {
+      position: "absolute",
+      top: `${roundedTop}px`,
+      left: `${roundedLeft}px`,
+      width: `${roundedWidth}px`,
+      height: `${roundedHeight}px`,
+      pointerEvents: "none",
+      // Sin transiciones, sin transformaciones, sin filtros
+      transition: "none",
+      transform: "none",
+      filter: "none"
+      // Opcionalmente, usa una versión simplificada durante el arrastre
+    };
+  } else {
+    return {
+      position: "absolute",
+      top: `${roundedTop}px`,
+      left: `${roundedLeft}px`,
+      width: `${roundedWidth}px`,
+      height: `${roundedHeight}px`,
+      // Sin efectos especiales
+      transform: "none",
+      filter: "none",
+      transition: "none"
+    };
+  }
 }
 export {
   setTransform as s

package/components/DragResizeWindowRND/DragResizeWindowRND.d.ts

@@ -0,0 +1,19 @@
+import { DragResizeWindowPropsRND, DragResizeWindowRefHandler } from './types';
+/**
+ * Este component es un wrapper o ventana draggable y resizable al children.
+ * Características
+ *   - Permite definir bounds para que la ventana no se salga del contenedor padre.
+ *   - Es obligarlo pasarle como props el containerElement (HTMLElement) del padre.
+ *   - Reajusta el Resizable para que los handlers n, w, crezcan en la dirección correcta.
+ * Funcionamiento interno:
+ *   - DraggableCore clona el children y le agrega un handle para poder arrastrar la ventana
+ *   - DraggableCore recomienda pasarle el nodeRef del wrapper Element , para que no tenga que hacer FindDOMNode.
+ *   - DraggableCore No se le puede poner estilo, ya que no aporta className ni html, solo clona el children
+ *     internamente le agrega las clases propias del componente: react-draggable,react-draggable-dragging,react-draggable-dragged
+ *     Por lo tanto todo el estilo, va directamente a WrapperWindowRoot.
+ * Consideraciones:
+ * @param props
+ * @returns
+ */
+export declare const DragResizeWindowRND: import('react').ForwardRefExoticComponent<Omit<DragResizeWindowPropsRND, "ref"> & import('react').RefAttributes<DragResizeWindowRefHandler>>;
+export default DragResizeWindowRND;

package/components/DragResizeWindowRND/DragResizeWindowRND.js

@@ -0,0 +1,224 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo, useRef, useImperativeHandle } from "react";
+import clsx from "clsx";
+import { d as dragResizeWindowRNDClasses } from "./classes/index.js";
+import { D as DEFAULT_TRANSFORM_SCALE } from "./constants.js";
+import { u as useDragOptions } from "./hooks/useRNDDragOptions.js";
+import { u as useResizeOptions } from "./hooks/useRNDReResizeOptions.js";
+import { u as useRNDDimensionEffects } from "./hooks/useRNDDimensionEffects.js";
+import { R as RndStyled } from "./slots/DragResizeWindowRNDSlots.js";
+import { g as getInitialSize } from "./helpers/getInitialSize.js";
+const DragResizeWindowRND = forwardRef((props, ref) => {
+  const {
+    //Comunes
+    style,
+    className,
+    children,
+    defaultPosition = { vertical: { top: 0, height: 100 }, horizontal: { left: 0, width: 100 } },
+    containerElement,
+    containerSize,
+    transformScale = DEFAULT_TRANSFORM_SCALE,
+    bounds = { left: 5, top: 5, right: -5, bottom: -5 },
+    minWidth = 200,
+    minHeight = 100,
+    // maxWidth = 1000,
+    // maxHeight = 1000,
+    //Draggable
+    draggableHandle = `${dragResizeWindowRNDClasses.draggableHandle}`,
+    draggableCancel = `.${dragResizeWindowRNDClasses.draggableCancel}`,
+    draggable = true,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    onMouseDown,
+    //resizable
+    resizable = true,
+    onResizeStart,
+    onResize,
+    onResizeStop,
+    hidden,
+    allowHeightResizeContainer = false,
+    allowWidthResizeContainer = false,
+    windowRef,
+    //Otras
+    ...others
+  } = props;
+  const [currentState, setCurrentState] = useState(
+    () => getInitialSize(containerSize, defaultPosition, containerElement)
+  );
+  const minConstraints = useMemo(() => [minWidth, minHeight], [minWidth, minHeight]);
+  const stateRef = useRef({
+    bounds,
+    data: void 0,
+    dragging: void 0,
+    containerSize: containerSize ? { ...containerSize } : void 0,
+    x: currentState.x,
+    y: currentState.y,
+    width: currentState.width,
+    height: currentState.height,
+    minConstraints
+  });
+  if (containerSize && (stateRef.current.containerSize?.containerWidth !== containerSize.containerWidth || stateRef.current.containerSize?.containerHeight !== containerSize.containerHeight)) {
+    stateRef.current.containerSize = { ...containerSize };
+  }
+  const wrapperRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    /**
+     * "ensureVisible" enfoca la ventana para que esté visible, cuando se requiere desde afuera ubicarla en el contenedor padre
+     */
+    ensureVisible: () => {
+      if (!wrapperRef.current || !containerElement) {
+        return;
+      }
+      const containerRect = containerElement.getBoundingClientRect();
+      const elementRect = wrapperRef.current.getBoundingClientRect();
+      const elementHeight = elementRect.height;
+      const elementWidth = elementRect.width;
+      const relativeTop = elementRect.top - containerRect.top + containerElement.scrollTop;
+      const relativeLeft = elementRect.left - containerRect.left + containerElement.scrollLeft;
+      const relativeBottom = relativeTop + elementHeight;
+      const relativeRight = relativeLeft + elementWidth;
+      const containerViewportHeight = containerElement.clientHeight;
+      const containerViewportWidth = containerElement.clientWidth;
+      const containerRelativeBottom = containerElement.scrollTop + containerViewportHeight;
+      const tolerance = 0.5;
+      const isInViewportVertically = relativeTop >= containerElement.scrollTop - tolerance && relativeBottom <= containerRelativeBottom + tolerance;
+      const isInViewportHorizontally = relativeLeft >= containerElement.scrollLeft - tolerance && relativeRight <= containerElement.scrollLeft + containerViewportWidth + tolerance;
+      if (!isInViewportVertically || !isInViewportHorizontally) {
+        let newScrollTop, newScrollLeft;
+        if (elementHeight > containerViewportHeight) {
+          newScrollTop = relativeTop;
+        } else {
+          newScrollTop = relativeTop - containerViewportHeight / 2 + elementHeight / 2;
+        }
+        if (elementWidth > containerViewportWidth) {
+          newScrollLeft = relativeLeft;
+        } else {
+          newScrollLeft = relativeLeft - containerViewportWidth / 2 + elementWidth / 2;
+        }
+        containerElement.scrollTo({
+          top: Math.max(0, newScrollTop),
+          left: Math.max(0, newScrollLeft),
+          behavior: "smooth"
+        });
+      }
+    },
+    /**
+     * "current" devuelve el elemento DOM de la ventana
+     */
+    current: wrapperRef.current
+  }), [containerElement]);
+  const { localOnDragStart, localOnDrag, localOnDragStop } = useDragOptions({
+    allowHeightResizeContainer,
+    allowWidthResizeContainer,
+    containerElement,
+    transformScale,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    stateRef,
+    setCurrentState
+  });
+  const { localOnResize, localOnResizeStart, localOnResizeStop } = useResizeOptions({
+    allowHeightResizeContainer,
+    allowWidthResizeContainer,
+    containerElement,
+    onResizeStart,
+    onResize,
+    onResizeStop,
+    stateRef,
+    setCurrentState
+  });
+  useRNDDimensionEffects({
+    containerElement,
+    bounds,
+    containerSize,
+    setCurrentState,
+    stateRef,
+    minWindowWidth: minWidth,
+    minWindowHeight: minHeight,
+    wrapperRef,
+    currentState,
+    allowHeightResizeContainer,
+    allowWidthResizeContainer
+  });
+  const ownerState = {
+    hidden,
+    dragging: !!currentState.dragging,
+    resizing: !!currentState.resizing,
+    draggingActive: !!currentState.dragging,
+    x: currentState.x,
+    y: currentState.y,
+    width: currentState.width,
+    height: currentState.height
+  };
+  const classNameFinal = clsx(className, {
+    //Requerido para el componente Draggable
+    [dragResizeWindowRNDClasses.hidden]: hidden,
+    [dragResizeWindowRNDClasses.dragging]: !!currentState.dragging,
+    [dragResizeWindowRNDClasses.resizing]: !!currentState.resizing,
+    [dragResizeWindowRNDClasses.draggingActive]: !!currentState.dragging
+    // dropping: Boolean(droppingPosition),
+  });
+  const memoChildren = useMemo(() => {
+    return children;
+  }, [children]);
+  if (!containerElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    RndStyled,
+    {
+      ownerState,
+      ...others,
+      onMouseDown,
+      ref: (c) => {
+        if (c) {
+          wrapperRef.current = c.resizableElement.current;
+        }
+      },
+      style: { ...{}, ...style },
+      dragHandleClassName: draggableHandle,
+      enableResizing: resizable,
+      disableDragging: !draggable,
+      minWidth,
+      minHeight,
+      cancel: draggableCancel,
+      className: classNameFinal,
+      enableUserSelectHack: true,
+      resizeHandleStyles: {
+        //Se debe mover lo handler de resize para queden dentro de la ventana, o genería un scroll innecesario.
+        bottom: { bottom: "0px" },
+        right: { right: "0px" },
+        top: { top: "0px" },
+        left: { left: "0px" },
+        bottomRight: { bottom: "0px", right: "0px", height: "10px", width: "10px" },
+        bottomLeft: { bottom: "0px", left: "0px", height: "10px", width: "10px" },
+        topRight: { top: "0px", right: "0px", height: "10px", width: "10px" },
+        topLeft: { top: "0px", left: "0px", height: "10px", width: "10px" }
+      },
+      resizeHandleClasses: {
+        left: "resize-handle-left",
+        right: "resize-handle-right",
+        top: "resize-handle-top",
+        bottom: "resize-handle-bottom",
+        bottomRight: "resize-handle-bottom-right",
+        bottomLeft: "resize-handle-bottom-left",
+        topRight: "resize-handle-top-right",
+        topLeft: "resize-handle-top-left"
+      },
+      size: { width: currentState.width, height: currentState.height },
+      position: { x: currentState.x, y: currentState.y },
+      onDragStart: localOnDragStart,
+      onDrag: localOnDrag,
+      onDragStop: localOnDragStop,
+      onResizeStart: localOnResizeStart,
+      onResize: localOnResize,
+      onResizeStop: localOnResizeStop,
+      children: memoChildren
+    }
+  );
+});
+export {
+  DragResizeWindowRND as D
+};

package/components/DragResizeWindowRND/DragResizeWindowRND.styles.d.ts

@@ -0,0 +1,5 @@
+import { DragResizeWindowRNDStyles } from '../DragResizeWindowRND/types';
+/**
+ * Style definitions for the DragResizeWindow component.
+ */
+export declare const dragResizeWindowStyles: DragResizeWindowRNDStyles;

package/components/DragResizeWindowRND/DragResizeWindowRND.styles.js

@@ -0,0 +1,75 @@
+const CONTAINER_QUERY_NAME = "window_root";
+const dragResizeWindowStyles = {
+  /**
+   * Styles for the root container of the DragResizeWindow component.
+   * @param {Object} params - Object containing theme and ownerState properties.
+   * @param {Object} params.theme - Theme object for accessing theme variables.
+   * @param {Object} params.ownerState - Object holding the component's current state.
+   * @param {boolean} [params.ownerState.hidden] - Controls visibility; if true, sets the component to be hidden and disables pointer events.
+   * @returns {Object} - Style object for the root container.
+   */
+  root: ({ theme, ownerState }) => ({
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    position: "absolute",
+    left: "0px",
+    top: "0px",
+    width: "0px",
+    height: "0px",
+    backgroundColor: theme.vars.palette.background.default,
+    ...ownerState?.hidden ? {
+      visibility: "hidden",
+      pointerEvents: "none"
+    } : {}
+  }),
+  /**
+   * Styles for the icon formatter container in the DragResizeWindow component.
+   *
+   * This container serves as the base for resize icons, setting up initial styles
+   * like position, size, and default background color. Adjustments for cursor style
+   * and additional customization are also defined here.
+   * @returns {Object} - Style object for the icon formatter container.
+   */
+  iconResizeFormatterRoot: () => ({
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    position: "absolute",
+    left: "0px",
+    top: "0px",
+    width: "0px",
+    height: "0px",
+    backgroundColor: "gray",
+    cursor: "default"
+  }),
+  /**
+   * Styles for the rnd component in the DragResizeWindowRND component.
+   */
+  rnd: ({ ownerState }) => ({
+    transition: "none",
+    // Elimina transiciones para una mayor nitidez
+    backfaceVisibility: "hidden",
+    // Mejora la nitidez
+    WebkitFontSmoothing: "subpixel-antialiased",
+    // Mejora el texto
+    // ...(ownerState?.dragging && {
+    //   left: '0px',
+    //   top: '0px',
+    // }),
+    // ...(!(ownerState?.dragging) && {
+    //   left: `${ownerState?.x}px !important`,
+    //   top: `${ownerState?.y}px !important`,
+    //   transform: 'unset !important',
+    // }),
+    ...ownerState?.dragging || ownerState?.resizing && {
+      "&.react-draggable": {
+        pointerEvents: "auto !important",
+        userSelect: "none !important",
+        touchAction: "none !important",
+        prop1: "value1"
+      }
+    }
+  })
+};
+export {
+  dragResizeWindowStyles as d
+};

package/components/DragResizeWindowRND/classes/index.d.ts

@@ -0,0 +1,2 @@
+import { DraggableWindowRNDClasses } from './types';
+export declare const dragResizeWindowRNDClasses: DraggableWindowRNDClasses;

package/components/DragResizeWindowRND/classes/index.js

@@ -0,0 +1,18 @@
+import { generateUtilityClasses } from "@mui/material";
+import { C as COMPONENT_KEY_COMPONENT } from "../constants.js";
+const dragResizeWindowRNDClasses = generateUtilityClasses(
+  COMPONENT_KEY_COMPONENT,
+  [
+    /* elements */
+    "draggableHandle",
+    "draggableCancel",
+    // state
+    "dragging",
+    "resizing",
+    "hidden",
+    "draggingActive"
+  ]
+);
+export {
+  dragResizeWindowRNDClasses as d
+};

package/components/DragResizeWindowRND/classes/types.d.ts

@@ -0,0 +1,9 @@
+export interface DraggableWindowRNDClasses {
+    draggableHandle: string;
+    draggableCancel: string;
+    dragging: string;
+    resizing: string;
+    hidden: string;
+    draggingActive: string;
+}
+export type DraggableWindowRNDClassesKey = keyof DraggableWindowRNDClasses;

package/components/DragResizeWindowRND/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const COMPONENT_TEST_ID = "M4LDragResizeWindowRND";
+export declare const COMPONENT_KEY_COMPONENT = "M4LDragResizeWindowRND";
+export declare const DEFAULT_TRANSFORM_SCALE = 1;

package/components/DragResizeWindowRND/constants.js

@@ -0,0 +1,6 @@
+const COMPONENT_KEY_COMPONENT = "M4LDragResizeWindowRND";
+const DEFAULT_TRANSFORM_SCALE = 1;
+export {
+  COMPONENT_KEY_COMPONENT as C,
+  DEFAULT_TRANSFORM_SCALE as D
+};

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

@@ -0,0 +1,12 @@
+import { CurrentState, DraggableWindowBounds } from '../types';
+/**
+ * "expandingParentContainer": Encargada de manejar la expansión de la ventana padre
+ * 1. Si el ancho y alto fue compactado, los recupera si es el contenedor padre volvió a crecer
+ * 2. Si el left o top fue desplazado, recupera de nuevo las posiciones donde estaban.
+ *
+ * Consideraciones:
+ *    Si por alguna razón el cliente mueve o redimensiona la ventana,
+ *    se borran los flags que indican que hay que recuperar el ancho y alto, o el left y top.
+ *    (shrinkLeftTopAt, overflowDimensionAt)
+ */
+export declare const expandingParentContainer: (newState: CurrentState, containerDimension: number, dimension: "Width" | "Height", bounds?: DraggableWindowBounds) => void;

package/components/DragResizeWindowRND/helpers/expandingParentContainer.js

@@ -0,0 +1,31 @@
+const expandingParentContainer = (newState, containerDimension, dimension, bounds) => {
+  const lDimension = dimension === "Width" ? "width" : "height";
+  const leftTop = dimension === "Width" ? "x" : "y";
+  const shrinkLeftTopAt = dimension === "Width" ? "shrinkLeftAt" : "shrinkTopAt";
+  const overflowDimensionAt = dimension === "Width" ? "overflowWidthAt" : "overflowHeightAt";
+  const boundsLefTop = dimension === "Width" ? 0 : 0;
+  const initialPosition = dimension === "Width" ? 0 : 0;
+  const maxDimensionElement = containerDimension - boundsLefTop + initialPosition;
+  const valOverflowDimensionAt = newState[overflowDimensionAt];
+  if (valOverflowDimensionAt) {
+    if (valOverflowDimensionAt > maxDimensionElement) {
+      newState[lDimension] = maxDimensionElement;
+    } else {
+      newState[lDimension] = valOverflowDimensionAt;
+      newState[overflowDimensionAt] = void 0;
+    }
+  }
+  const valShrinkLeftTopAt = newState[shrinkLeftTopAt];
+  if (valShrinkLeftTopAt && !newState[overflowDimensionAt]) {
+    const dimensionAvailable = containerDimension - boundsLefTop - newState[lDimension] + initialPosition;
+    if (valShrinkLeftTopAt <= dimensionAvailable) {
+      newState[leftTop] = valShrinkLeftTopAt;
+      newState[shrinkLeftTopAt] = void 0;
+    } else {
+      newState[leftTop] = dimensionAvailable;
+    }
+  }
+};
+export {
+  expandingParentContainer as e
+};

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

@@ -0,0 +1,15 @@
+import { ContainerSize } from '../../../utils/types';
+import { CurrentState, DefaultPosition } from '../types';
+/**
+ * Calculates the initial size and position of an element based on the provided container size
+ * and default position values.
+ *
+ * This function returns an object with `top`, `left`, `width`, and `height` properties,
+ * which specify the initial position and size of the element. If values for `right` or `bottom`
+ * are provided instead of `top` and `left`, the function calculates the starting position based
+ * on the container dimensions, ensuring that the element is correctly positioned.
+ * @param {ContainerSize | undefined} containerSize - Object containing `containerHeight` and `containerWidth`. Defaults to 200 for both if not provided.
+ * @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;

package/components/DragResizeWindowRND/helpers/getInitialSize.js

@@ -0,0 +1,56 @@
+const getInitialSize = (containerSize, defaultPosition, containerElement) => {
+  let top;
+  let bottom;
+  let height;
+  let left;
+  let right;
+  let width;
+  const containerHeight = containerSize?.containerHeight || 200;
+  const containerWidth = containerSize?.containerWidth || 200;
+  const scrollTop = containerElement?.scrollTop || 0;
+  const scrollLeft = containerElement?.scrollLeft || 0;
+  if ("top" in defaultPosition.vertical) {
+    top = defaultPosition.vertical.top;
+  }
+  if ("bottom" in defaultPosition.vertical) {
+    bottom = defaultPosition.vertical.bottom;
+  }
+  if ("height" in defaultPosition.vertical) {
+    height = defaultPosition.vertical.height;
+  }
+  if ("left" in defaultPosition.horizontal) {
+    left = defaultPosition.horizontal.left;
+  }
+  if ("right" in defaultPosition.horizontal) {
+    right = defaultPosition.horizontal.right;
+  }
+  if ("width" in defaultPosition.horizontal) {
+    width = defaultPosition.horizontal.width;
+    if (!("left" in defaultPosition.horizontal)) {
+      left = scrollLeft + (containerWidth - width) / 2;
+    }
+  }
+  if ("height" in defaultPosition.vertical) {
+    height = defaultPosition.vertical.height;
+    if (!("top" in defaultPosition.vertical)) {
+      top = scrollTop + (containerHeight - height) / 2;
+    }
+  }
+  if ("percent" in defaultPosition.vertical) {
+    height = containerHeight * defaultPosition.vertical.percent;
+    top = (containerHeight - height) / 2;
+  }
+  if ("percent" in defaultPosition.horizontal) {
+    width = containerWidth * defaultPosition.horizontal.percent;
+    left = (containerWidth - width) / 2;
+  }
+  return {
+    y: Math.round(top ?? (bottom ? containerHeight - bottom - (height || 0) : 0)),
+    height: Math.round(height ?? containerHeight - (top || 0) - (bottom || 0)),
+    x: Math.round(left ?? (right ? containerWidth - right - (width || 0) : 0)),
+    width: Math.round(width ?? containerWidth - (left || 0) - (right || 0))
+  };
+};
+export {
+  getInitialSize as g
+};