@m4l/components 9.2.0 → 9.2.2

package/components/DragResizeWindowRND/hooks/useRNDReResizeOptions.js

@@ -0,0 +1,173 @@
+import { useEffect, useCallback } from "react";
+const useResizeOptions = (props) => {
+  const { onResizeStart, onResize, onResizeStop, stateRef, setCurrentState, containerElement, allowHeightResizeContainer, allowWidthResizeContainer } = props;
+  useEffect(() => {
+    if (!containerElement) {
+      return;
+    }
+    const handleScroll = (e) => {
+      const scrollTop = e.target.scrollTop;
+      const scrollLeft = e.target.scrollLeft;
+      if (stateRef.current.resizing) {
+        console.warn("handleScroll IMPLEMENTAR", scrollTop, scrollLeft);
+      }
+    };
+    containerElement.addEventListener("scroll", handleScroll);
+    return () => {
+      containerElement?.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerElement, setCurrentState, stateRef]);
+  const localOnResizeStart = useCallback(
+    (e, dir, elementRef) => {
+      if (onResizeStart) {
+        onResizeStart(e, dir, elementRef);
+      }
+      const widthInitial = stateRef.current.width;
+      const heightInitial = stateRef.current.height;
+      const resizing = {
+        x: stateRef.current.x,
+        y: stateRef.current.y,
+        width: widthInitial,
+        height: heightInitial,
+        handle: dir,
+        widthInitial,
+        heightInitial
+      };
+      const newState = {
+        x: stateRef.current.x,
+        width: stateRef.current.width,
+        y: stateRef.current.y,
+        height: stateRef.current.height
+      };
+      setCurrentState({
+        ...newState,
+        resizing
+      });
+      stateRef.current = {
+        ...stateRef.current,
+        ...newState,
+        resizing
+      };
+    },
+    [onResizeStart, setCurrentState, stateRef]
+  );
+  const localOnResize = useCallback(
+    (_e, dir, _elementRef, delta, position) => {
+      if (!stateRef.current.resizing) {
+        return;
+      }
+      if (!containerElement) {
+        return;
+      }
+      if (onResize) {
+        onResize(_e, dir, _elementRef, delta, position);
+      }
+      const widthByDelta = (stateRef.current.resizing?.widthInitial || 0) + delta.width;
+      const heightByDelta = (stateRef.current.resizing?.heightInitial || 0) + delta.height;
+      const xRounded = Math.round(position.x);
+      const yRounded = Math.round(position.y);
+      const newState = {
+        x: xRounded,
+        width: widthByDelta,
+        y: yRounded,
+        height: heightByDelta
+      };
+      let newScrollLeft;
+      let newScrollTop;
+      const containerWidth = stateRef.current.containerSize?.containerWidth || containerElement.clientWidth;
+      const containerHeight = stateRef.current.containerSize?.containerHeight || containerElement.clientHeight;
+      const right = newState.x + newState.width;
+      if (right > containerWidth) {
+        if (!allowWidthResizeContainer) {
+          if (dir.includes("right")) {
+            const containerViewportRight = containerElement.scrollLeft + containerWidth;
+            if (right > containerViewportRight) {
+              newScrollLeft = right - containerWidth + 100;
+            }
+          }
+        }
+      }
+      const bottom = newState.y + newState.height;
+      if (bottom > containerHeight) {
+        if (allowHeightResizeContainer) {
+          if (dir.includes("bottom")) {
+            const containerViewportBottom = containerElement.scrollTop + containerHeight;
+            if (bottom > containerViewportBottom) {
+              newScrollTop = bottom - containerHeight + 100;
+            }
+          }
+        }
+      }
+      if (newScrollLeft !== void 0 || newScrollTop !== void 0) {
+        setTimeout(() => {
+          containerElement.scrollTo({
+            left: newScrollLeft,
+            top: newScrollTop,
+            behavior: "instant"
+          });
+        }, 10);
+      }
+    },
+    [allowHeightResizeContainer, allowWidthResizeContainer, containerElement, onResize, stateRef]
+  );
+  const localOnResizeStop = useCallback(
+    (e, dir, elementRef, delta, position) => {
+      if (onResizeStop) {
+        onResizeStop(e, dir, elementRef, delta, position);
+      }
+      const bounds = {
+        left: stateRef.current.bounds?.left || 0,
+        top: stateRef.current.bounds?.top || 0,
+        right: stateRef.current.bounds?.right || 0,
+        bottom: stateRef.current.bounds?.bottom || 0
+      };
+      const widthByDelta = (stateRef.current.resizing?.widthInitial || 0) + delta.width;
+      const heightByDelta = (stateRef.current.resizing?.heightInitial || 0) + delta.height;
+      const newState = {
+        x: position.x,
+        width: widthByDelta,
+        y: position.y,
+        height: heightByDelta
+      };
+      if (!containerElement) {
+        return;
+      }
+      const containerWidth = stateRef.current.containerSize?.containerWidth || containerElement.clientWidth;
+      const containerHeight = stateRef.current.containerSize?.containerHeight || containerElement.clientHeight;
+      if (newState.x < bounds.left) {
+        newState.x = bounds.left;
+        newState.width = widthByDelta - (bounds.left - position.x);
+      } else if (newState.x + newState.width > containerWidth + bounds.right) {
+        if (!allowWidthResizeContainer) {
+          newState.width = containerWidth - newState.x + bounds.right;
+        }
+      }
+      if (newState.y < bounds.top) {
+        newState.y = bounds.top;
+        newState.height = heightByDelta - (bounds.top - position.y);
+      } else if (newState.y + newState.height > containerHeight + bounds.bottom) {
+        if (!allowHeightResizeContainer) {
+          newState.height = containerHeight - newState.y + bounds.bottom;
+        }
+      }
+      const xRounded = Math.round(newState.x);
+      const yRounded = Math.round(newState.y);
+      newState.x = xRounded;
+      newState.y = yRounded;
+      setCurrentState({
+        ...newState,
+        resizing: void 0
+      });
+      stateRef.current = {
+        ...stateRef.current,
+        ...newState,
+        resizing: void 0
+      };
+    },
+    [allowHeightResizeContainer, allowWidthResizeContainer, containerElement, onResizeStop, setCurrentState, stateRef]
+  );
+  return { localOnResize, localOnResizeStart, localOnResizeStop };
+};
+export {
+  useResizeOptions as u
+};

package/components/DragResizeWindowRND/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const ICONS: {
+    RESIZE: string;
+};

package/components/DragResizeWindowRND/index.d.ts

@@ -0,0 +1,2 @@
+export { DragResizeWindowRND } from './DragResizeWindowRND';
+export { dragResizeWindowRNDClasses } from './classes/index';

package/components/DragResizeWindowRND/index.js

@@ -0,0 +1 @@
+

package/components/DragResizeWindowRND/slots/DragResizeWindowRNDSlots.d.ts

@@ -0,0 +1,12 @@
+import { Rnd } from 'react-rnd';
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const IconResizeFormatterStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const RndStyled: import('@emotion/styled').StyledComponent<Pick<import('react-rnd').Props, keyof import('react-rnd').Props> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: any;
+}, {}, {
+    ref?: import('react').Ref<Rnd> | undefined;
+}>;

package/components/DragResizeWindowRND/slots/DragResizeWindowRNDSlots.js

@@ -0,0 +1,19 @@
+import { styled } from "@mui/material/styles";
+import { C as COMPONENT_KEY_COMPONENT } from "../constants.js";
+import { d as dragResizeWindowStyles } from "../DragResizeWindowRND.styles.js";
+import { D as DragResizeWindowRNDSlots } from "./slots.js";
+import { R as Rnd } from "../../../not_recognized/index.js";
+styled("div", { name: COMPONENT_KEY_COMPONENT, slot: DragResizeWindowRNDSlots.root })(
+  dragResizeWindowStyles?.root
+);
+styled("div", {
+  name: COMPONENT_KEY_COMPONENT,
+  slot: DragResizeWindowRNDSlots.iconResizeFormatterRoot
+})(dragResizeWindowStyles?.iconResizeFormatterRoot);
+const RndStyled = styled(Rnd, {
+  name: COMPONENT_KEY_COMPONENT,
+  slot: DragResizeWindowRNDSlots.rnd
+})(dragResizeWindowStyles?.rnd);
+export {
+  RndStyled as R
+};

package/components/DragResizeWindowRND/slots/slots.d.ts

@@ -0,0 +1,5 @@
+export declare enum DragResizeWindowRNDSlots {
+    root = "root",
+    iconResizeFormatterRoot = "iconResizeFormatterRoot",
+    rnd = "rnd"
+}

package/components/DragResizeWindowRND/slots/slots.js

@@ -0,0 +1,9 @@
+var DragResizeWindowRNDSlots = /* @__PURE__ */ ((DragResizeWindowRNDSlots2) => {
+  DragResizeWindowRNDSlots2["root"] = "root";
+  DragResizeWindowRNDSlots2["iconResizeFormatterRoot"] = "iconResizeFormatterRoot";
+  DragResizeWindowRNDSlots2["rnd"] = "rnd";
+  return DragResizeWindowRNDSlots2;
+})(DragResizeWindowRNDSlots || {});
+export {
+  DragResizeWindowRNDSlots as D
+};

package/components/DragResizeWindowRND/types.d.ts

@@ -0,0 +1,295 @@
+import { ReactNode, ForwardedRef } from 'react';
+import { DraggableData } from 'react-draggable';
+import { ContainerSize } from '../../utils/types';
+import { Theme } from '@mui/material/styles';
+import { DragResizeWindowRNDSlots } 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';
+import { Props as RndProps } from 'react-rnd';
+/**
+ * Tipo que define la corrección de la posición
+ * - nCorrection: Cantidad de corrección
+ * - x: Coordenada x
+ * - y: Coordenada y
+ */
+export type CorrectionPosition = {
+    nCorrection: number;
+    x: number;
+    y: number;
+};
+/**
+ * Tipo que representa la posición de la ventana (o cualquier otro elemento arrastrable/redimensionable).
+ * - left: Coordenada x
+ * - top: Coordenada y
+ * - width: Ancho
+ * - height: Alto
+ */
+export type Position = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export interface CurrentState extends Position {
+    /**
+     * "dragging" indica la posición actual cuando se está moviendo el ventana
+     */
+    dragging?: {
+        y: number;
+        x: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * "resizing" indica el tamaño actual cuando se está redimensionando el ventana
+     */
+    resizing?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        handle: ResizeDirection;
+        widthInitial: number;
+        heightInitial: number;
+    };
+    /**
+     * Posición inicial antes de comenzar el dragging o resizing
+     */
+    initialPosition?: Position;
+    /**
+     * "shrinkLeftAt" Indica en que valor estaba el left antes de compactar padre en un resize
+     */
+    shrinkLeftAt?: number;
+    /**
+     * "shrinkTopAt" Indica en que valor estaba el top antes de compactar padre en un resize
+     */
+    shrinkTopAt?: number;
+    /**
+     * "overflowWidthAt" Indica en que valor estaba el width antes de compactar padre en un resize
+     */
+    overflowWidthAt?: number;
+    /**
+     * "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.
+ * - left: Coordenada x
+ * - top: Coordenada y
+ */
+export type PartialPosition = {
+    x: number;
+    y: number;
+};
+/**
+ * Tipo que define los límites de movimiento de la ventana arrastrable.
+ */
+export type DraggableWindowBounds = {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+};
+/**
+ * Tipo de callback para el evento de redimensionamiento.
+ */
+export type ResizeCallback = ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | undefined;
+/**
+ * Tipo para el componente o la función que define el handle para redimensionar la ventana.
+ */
+export type ResizeHandleComponente = React.ReactNode | ((resizeHandle: ResizeHandle, ref: React.RefObject<any>) => React.ReactNode) | undefined;
+/**
+ * Parámetros relacionados con el tamaño del contenedor, usado en la posición y redimensionamiento.
+ */
+export type PositionParams = ContainerSize;
+/**
+ * Acción que se realiza en el contenedor (igual, encogiéndose o expandiéndose).
+ */
+export type ContainerAction = 'equals' | 'shrinking' | 'expanding';
+/**
+ * Referencia para el componente DragResizeWindow.
+ */
+export type DraggableWindowRefProps = {
+    current: HTMLDivElement | null;
+};
+/**
+ * Tipo que representa las posiciones predeterminadas (vertical y horizontal) de la ventana.
+ */
+export interface DefaultPosition {
+    vertical: {
+        top: number;
+        bottom: number;
+    } | {
+        top: number;
+        height: number;
+    } | {
+        height: number;
+    } | {
+        bottom: number;
+        height: number;
+    } | {
+        percent: number;
+    };
+    horizontal: {
+        left: number;
+        right: number;
+    } | {
+        left: number;
+        width: number;
+    } | {
+        right: number;
+        width: number;
+    } | {
+        percent: number;
+    } | {
+        width: number;
+    };
+}
+export interface DragResizeWindowRefHandler {
+    ensureVisible: () => void;
+    current: HTMLElement | null;
+}
+/**
+ * Propiedades del componente DragResizeWindow, que incluye tanto los controles de arrastre como de redimensionamiento.
+ */
+export interface DragResizeWindowPropsRND extends Partial<Omit<RndProps, 'handle' | 'cancel'>> {
+    children: ReactNode;
+    /**
+     * "className" permite identificar si es placeHolder y estilar
+     */
+    className?: string;
+    /**
+     * Inline-style object to pass to the root element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * zIndex: Permite modificar en los ventanas freeMove (popups) el zIndex
+     */
+    zIndex?: number;
+    /**
+     * defaultPosition permite definir la posición inicial de la ventana
+     * TODO: Debe también recibir anchorEl y anchorPosition y calcular la posición en base a este
+     */
+    defaultPosition?: DefaultPosition;
+    /**
+     * "bounds" permite definir los limites de movimiento de la ventana
+     */
+    bounds?: DraggableWindowBounds;
+    /**
+     *
+     * we should set scale coefficient to avoid render artifacts while dragging.
+     */
+    transformScale?: number | undefined;
+    /**
+     * "containerElement" contenedor padre
+     */
+    containerElement?: HTMLElement;
+    /**
+     * "containerSize" tamaño del contenedor padre
+     */
+    containerSize?: ContainerSize | undefined;
+    /**
+     * "draggable" permite definir si la ventana es "draggable" o no. Por defecto es "true
+     */
+    draggable?: boolean;
+    /**
+     * "handle" permite definir el elemento que se debe usar para arrastrar la ventana
+     * Ejemplo: ".handle_title", default  `.${draggableWindowClasses.draggableHandle}`
+     */
+    draggableHandle?: string;
+    /**
+     * "cancel" permite definir el elemento que no se debe usar para arrastrar la ventana
+     * Ejemplo: ".title_buttons"
+     */
+    draggableCancel?: string;
+    /**
+     * "resizable" permite definir si la ventana es "resizable" o no. Por defecto es "true
+     */
+    resizable?: boolean;
+    /**
+     * "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.
+ */
+export interface StateRef extends Pick<DragResizeWindowPropsRND, 'bounds'>, CurrentState {
+    data?: DraggableData;
+    /**
+     * 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;
+    /**
+     * lastScrollTop: Valor del scroll del contenedor padre la ultima vez que se actualizó
+     */
+    lastScrollTop?: number;
+    /**
+     * lastScrollLeft: Valor del scroll del contenedor padre la ultima vez que se actualizó
+     */
+    lastScrollLeft?: 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.
+ */
+export type DragResizeWindowRNDSlotsType = keyof typeof DragResizeWindowRNDSlots;
+/**
+ * Propiedades del estado propietario del componente DragResizeWindow.
+ */
+export type DragResizeWindowOwnerState = {
+    /**
+     * "dragging" indica la posición actual cuando se está moviendo el ventana
+     */
+    dragging?: boolean;
+    /**
+     * "resizing" indica el tamaño actual cuando se está redimensionando el ventana
+     */
+    resizing?: boolean;
+    /**
+     * "draggingActive" indica si la ventana está activa
+     */
+    draggingActive?: boolean;
+    /**
+     * "hidden" permite definir si la ventana está oculta o no. Por defecto es "false
+     */
+    hidden?: boolean;
+    /**
+     * "x" indica la posición x de la ventana
+     */
+    x?: number;
+    /**
+     * "y" indica la posición y de la ventana
+     */
+    y?: number;
+};
+/**
+ * Tipo de reglas de estilo para el componente DragResizeWindow.
+ */
+export type DragResizeWindowRNDStyles = M4LOverridesStyleRules<DragResizeWindowRNDSlotsType, typeof COMPONENT_KEY_COMPONENT, Theme>;

package/components/DragResizeWindowRND/utils.d.ts

@@ -0,0 +1,15 @@
+import { CurrentState } from './types';
+/**
+ * Generates a style object with transform properties to position an element.
+ *
+ * This function returns a style object that positions an element absolutely at the
+ * specified `top` and `left` coordinates, and sets its `width` and `height`.
+ * It uses the `translate` transform to apply the positioning for smooth rendering
+ * across browsers.
+ * @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.
+ */
+/**
+ * setTransform
+ */
+export declare function setTransform({ y: top, x: left, width, height, dragging }: CurrentState): Record<string, any>;