@m4l/components 0.1.80 → 0.1.82

package/components/GridLayout/{Responsive/index.1671380a.js → subcomponents/Responsive/index.e589d8bf.js}

@@ -1,7 +1,7 @@
-import { c as cloneLayoutItem, a as cloneLayout, b as compact, d as correctBounds, G as GridLayout, n as noop } from "../index.a792aacb.js";
+import { r as cloneLayoutItem, t as cloneLayout, u as compact, v as correctBounds, w as isEqualLayout, x as DEFAULT_RESPONSIVE_BREAKPOINTS, m as DEFAULT_CONTAINER_PADDING, l as DEFAULT_MARGIN, y as DEFAULT_RESPONSIVE_COLS, o as DEFAULT_COLAPSED_HEIGHT, i as DEFAULT_ROW_HEIGHT, z as isEqualLayouts, G as GridLayout, A as noop } from "../../index.76bccc4f.js";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useFirstRender } from "@m4l/graphics";
-import { d as deepEqual } from "../../../node_modules.d73a220d.js";
+import { d as deepEqual } from "../../../../node_modules.d73a220d.js";
 import { jsx } from "react/jsx-runtime";
 function getBreakpointFromWidth(breakpoints, width) {
   const sorted = sortBreakpoints(breakpoints);
@@ -21,7 +21,7 @@ function getColsFromBreakpoint(breakpoint, cols) {
   }
   return cols[breakpoint];
 }
-function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType, brekpointsCols, colapsedHeight) {
+function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType, brekpointsCols, colapsedHeight, rowHeight) {
   let layout = layouts[breakpoint];
   const breakpointsSorted = sortBreakpoints(breakpoints);
   const indexBreakointInit = breakpointsSorted.indexOf(breakpoint);
@@ -61,10 +61,11 @@ function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBr
   }
   layout = cloneLayout(layout);
   const ret = compact(
-    correctBounds(layout, { cols }, colapsedHeight),
+    correctBounds(layout, { cols }, colapsedHeight, rowHeight),
     compactType,
     cols,
-    colapsedHeight
+    colapsedHeight,
+    rowHeight
   );
   return ret;
 }
@@ -138,67 +139,42 @@ function cloneLayouts(layouts, layoutItemReplaceProps) {
   }
   return newLayouts;
 }
-function isEqualLayoutItem(layoutA, layoutB) {
-  if (layoutA.i !== layoutB.i) {
-    return false;
-  } else if (layoutA.x !== layoutB.x || layoutA.y !== layoutB.y || layoutA.w !== layoutB.w || layoutA.h !== layoutB.h || layoutA.colapsed !== layoutB.colapsed || layoutA.visible !== layoutB.visible || layoutA.freeMove !== layoutB.freeMove) {
-    return false;
-  }
-  return true;
-}
-function isEqualLayout(layoutA, layoutB) {
-  if (layoutA.length !== layoutB.length) {
-    return false;
-  }
-  for (let index = 0; index < layoutA.length; index++) {
-    if (!isEqualLayoutItem(layoutA[index], layoutB[index])) {
-      return false;
-    }
-  }
-  return true;
-}
-function isEqualLayouts(layoutsA, layoutsB) {
-  if (Object.keys(layoutsA).length !== Object.keys(layoutsB).length) {
-    return false;
-  }
-  for (const breakPoint in layoutsA) {
-    if (layoutsB[breakPoint]) {
-      if (!isEqualLayout(layoutsA[breakPoint], layoutsB[breakPoint])) {
-        return false;
-      }
-    } else {
-      return false;
-    }
-  }
-  return true;
-}
 function generateInitialState(props) {
   const {
-    width,
+    containerWidth,
     breakpoint,
-    breakpoints,
-    containerPadding = [10, 10],
-    containerMargin = [10, 10],
+    breakpoints = DEFAULT_RESPONSIVE_BREAKPOINTS,
+    containerPadding = DEFAULT_CONTAINER_PADDING,
+    containerMargin = DEFAULT_MARGIN,
     layouts: defaultLayouts = {},
-    cols,
+    cols = DEFAULT_RESPONSIVE_COLS,
     compactType = null,
-    colapsedHeight = 2
+    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
+    rowHeight = DEFAULT_ROW_HEIGHT
   } = props;
-  const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, width);
-  const colNo = getColsFromBreakpoint(newBreakpoint, cols);
+  const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, containerWidth);
+  const newCols = getColsFromBreakpoint(newBreakpoint, cols);
   let fireOnLoadLayoutChange = true;
-  const initialLayout = findOrGenerateResponsiveLayout(defaultLayouts, breakpoints, newBreakpoint, newBreakpoint, colNo, compactType, {
-    [newBreakpoint]: colNo
-  }, colapsedHeight);
+  const initialLayout = findOrGenerateResponsiveLayout(
+    defaultLayouts,
+    breakpoints,
+    newBreakpoint,
+    newBreakpoint,
+    newCols,
+    compactType,
+    { [newBreakpoint]: newCols },
+    colapsedHeight,
+    rowHeight
+  );
   if (defaultLayouts[newBreakpoint]) {
-    if (deepEqual(defaultLayouts[newBreakpoint], initialLayout)) {
+    if (isEqualLayout(defaultLayouts[newBreakpoint], initialLayout)) {
       fireOnLoadLayoutChange = false;
     }
   }
   const ret = {
-    layout: initialLayout,
+    breakpointLayout: initialLayout,
     breakpoint: newBreakpoint,
-    cols: colNo,
+    cols: newCols,
     contaierMargin: getIndentationValue(containerMargin, newBreakpoint),
     contaierPadding: getIndentationValue(containerPadding, newBreakpoint),
     fireOnLoadLayoutChange
@@ -207,137 +183,119 @@ function generateInitialState(props) {
 }
 function Responsive(props) {
   const {
-    width,
-    height,
+    layoutItemRender,
+    containerWidth,
+    containerHeight,
     breakpoint,
     compactType = null,
-    breakpoints = {
-      lg: 1200,
-      md: 996,
-      sm: 768,
-      xs: 480,
-      xxs: 1
-    },
-    cols = {
-      lg: 12,
-      md: 10,
-      sm: 6,
-      xs: 4,
-      xxs: 2
-    },
-    containerPadding = [10, 10],
-    containerMargin = [10, 10],
+    breakpoints = DEFAULT_RESPONSIVE_BREAKPOINTS,
+    cols = DEFAULT_RESPONSIVE_COLS,
+    containerPadding = DEFAULT_CONTAINER_PADDING,
+    containerMargin = DEFAULT_MARGIN,
     layouts = {},
-    onBreakpointChange = noop,
     onLayoutChange = noop,
     onContainerChange = noop,
-    layoutItemRender,
-    colapsedHeight = 2,
+    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
+    rowHeight = DEFAULT_ROW_HEIGHT,
     ...other
   } = props;
   const [currentState, setCurrentState] = useState(() => generateInitialState(props));
-  const refLayouts = useRef({
+  const refState = useRef({
     layouts: {
       ...layouts,
-      [currentState.breakpoint]: currentState.layout
+      [currentState.breakpoint]: currentState.breakpointLayout
     },
-    breakpoint: currentState.breakpoint,
+    cols,
+    currentBreakpointCols: currentState.cols,
+    currentBreakpoint: currentState.breakpoint,
     breakpoints,
-    width,
-    height
+    containerWidth,
+    containerHeight
   });
-  const isFirstRender = useFirstRender([width, height, layouts]);
+  const isFirstRenderFull = useFirstRender([containerWidth, containerHeight, layouts, breakpoint, breakpoints, cols]);
+  const isFirstRenderBreakpointLayout = useFirstRender([currentState.breakpointLayout]);
   useEffect(() => {
-    onContainerChange({
-      containerWidth: refLayouts.current.width,
-      containerHeight: refLayouts.current.height,
-      containerMargin: currentState.contaierMargin,
-      containerPadding: currentState.contaierPadding,
-      breakpoint: currentState.breakpoint,
-      cols: currentState.cols
-    });
-    if (currentState.fireOnLoadLayoutChange) {
-      onLayoutChange(currentState.layout, {
-        ...layouts,
-        [currentState.breakpoint]: currentState.layout
-      });
+    if (!isFirstRenderBreakpointLayout) {
+      onLayoutChange(currentState.breakpointLayout, refState.current.layouts);
     }
-    return () => {
-      console.debug("destruccion del componente");
-    };
-  }, []);
+  }, [currentState.breakpointLayout]);
   useEffect(() => {
-    if (isFirstRender) {
+    if (isFirstRenderFull) {
+      onContainerChange({
+        containerWidth: refState.current.containerWidth,
+        containerHeight: refState.current.containerHeight,
+        breakpoint: currentState.breakpoint,
+        cols: currentState.cols
+      });
+      if (currentState.fireOnLoadLayoutChange) {
+        console.warn("layout inicial incompatible, se notifica al host del componente");
+        onLayoutChange(currentState.breakpointLayout, {
+          ...layouts,
+          [currentState.breakpoint]: currentState.breakpointLayout
+        });
+      }
       return;
     }
-    const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, width);
+    const lastBreakpoint = refState.current.currentBreakpoint;
+    const lastContainerWidth = refState.current.containerWidth;
+    const lastContainerHeight = refState.current.containerHeight;
+    const lastBreakpointCols = refState.current.currentBreakpointCols;
+    const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, containerWidth);
     const newCols = getColsFromBreakpoint(newBreakpoint, cols);
-    const lastBreakpoint = currentState.breakpoint;
     const newLayouts = {
       ...layouts
     };
     let newContainerMargin = currentState.contaierMargin;
     let newContainerPadding = currentState.contaierPadding;
-    if (newBreakpoint !== currentState.breakpoint || newCols !== currentState.cols || breakpoints !== refLayouts.current.breakpoints || !isEqualLayouts(layouts, refLayouts.current.layouts)) {
+    if (newBreakpoint !== lastBreakpoint || newCols !== lastBreakpointCols || !deepEqual(cols, refState.current.cols) || !deepEqual(breakpoints, refState.current.breakpoints) || !isEqualLayouts(layouts, refState.current.layouts)) {
       console.debug("useEffect responsive con cambio de algo", newBreakpoint, lastBreakpoint);
       newContainerMargin = getIndentationValue(containerMargin, newBreakpoint);
       newContainerPadding = getIndentationValue(containerPadding, newBreakpoint);
       if (!(lastBreakpoint in newLayouts)) {
         console.error("useEffect casi imposible", lastBreakpoint, newLayouts);
-        newLayouts[lastBreakpoint] = cloneLayout(currentState.layout);
+        newLayouts[lastBreakpoint] = cloneLayout(currentState.breakpointLayout);
       }
-      const layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType, cols, colapsedHeight);
+      const layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType, cols, colapsedHeight, rowHeight);
       newLayouts[newBreakpoint] = layout;
-      if (newBreakpoint !== currentState.breakpoint) {
-        onBreakpointChange(newBreakpoint, newCols, width, height);
-      }
-      refLayouts.current.layouts = newLayouts;
-      refLayouts.current.breakpoint = newBreakpoint;
-      refLayouts.current.breakpoints = breakpoints;
-      console.debug("useEffect responsive****", layout);
+      refState.current.layouts = newLayouts;
+      refState.current.breakpoints = breakpoints;
+      refState.current.currentBreakpoint = newBreakpoint;
+      refState.current.currentBreakpointCols = newCols;
       setCurrentState({
         breakpoint: newBreakpoint,
-        layout,
+        breakpointLayout: layout,
         cols: newCols,
         contaierMargin: newContainerMargin,
         contaierPadding: newContainerPadding
       });
     }
-    onContainerChange({
-      containerWidth: width,
-      containerHeight: height,
-      containerMargin: newContainerMargin,
-      containerPadding: newContainerPadding,
-      breakpoint: newBreakpoint,
-      cols: newCols
-    });
-  }, [width, height, layouts, breakpoint, breakpoints]);
-  useEffect(() => {
-    onLayoutChange(currentState.layout, refLayouts.current.layouts);
-  }, [currentState.layout]);
-  const localOnLayoutChange = useCallback((newlayout) => {
-    try {
-      refLayouts.current.layouts[refLayouts.current.breakpoint] = cloneLayout(newlayout);
-    } catch (error) {
-      console.warn("localOnLayoutChange error");
+    if (newBreakpoint !== lastBreakpoint || newCols !== lastBreakpointCols || lastContainerWidth !== containerWidth || lastContainerHeight != containerHeight) {
+      onContainerChange({
+        containerWidth,
+        containerHeight,
+        breakpoint: newBreakpoint,
+        cols: newCols
+      });
     }
+  }, [containerWidth, containerHeight, layouts, breakpoint, breakpoints, cols]);
+  const localOnLayoutChange = useCallback((newlayout) => {
+    const newLayoutClone = cloneLayout(newlayout);
+    refState.current.layouts[refState.current.currentBreakpoint] = newLayoutClone;
     setCurrentState((prev) => ({
       ...prev,
-      layout: cloneLayout(newlayout)
+      breakpointLayout: newLayoutClone
     }));
-    onLayoutChange(newlayout, {
-      ...refLayouts.current.layouts
-    });
   }, [onLayoutChange]);
   return /* @__PURE__ */ jsx(GridLayout, {
-    width,
-    height,
+    rowHeight,
+    containerWidth,
+    containerHeight,
     colapsedHeight,
     layoutItemRender,
-    containerMargin: currentState.contaierMargin,
+    margin: currentState.contaierMargin,
     containerPadding: getIndentationValue(containerPadding, currentState.breakpoint),
     onLayoutChange: localOnLayoutChange,
-    layout: currentState.layout,
+    layout: currentState.breakpointLayout,
     cols: currentState.cols,
     compactType,
     ...other
@@ -347,7 +305,5 @@ export {
   Responsive as R,
   addLayoutItemToBreakPointIfNoExists as a,
   addLayoutItemToBreakPoints as b,
-  isEqualLayouts as c,
-  cloneLayouts as d,
-  isEqualLayout as i
+  cloneLayouts as c
 };

package/components/GridLayout/subcomponents/Responsive/responsiveUtils.d.ts

@@ -1,5 +1,5 @@
-import { CompactType, Layout, LayoutItem, Margin } from '../../types';
-import { Breakpoint, BreakpointCols, Breakpoints, ResponsiveLayout, Layouts, ResponsiveMargin } from './types';
+import { Breakpoint, CompactType, Layout, LayoutItem, Layouts, Margin } from '../../types';
+import { BreakpointCols, Breakpoints, ResponsiveLayout, ResponsiveMargin } from './types';
 /**
  * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
  *
@@ -29,7 +29,7 @@ export declare function getColsFromBreakpoint(breakpoint: Breakpoint, cols: Brea
  *   vertically.
  * @return {Array}             New layout.
  */
-export declare function findOrGenerateResponsiveLayout(layouts: ResponsiveLayout<Breakpoint>, breakpoints: Breakpoints<Breakpoint>, breakpoint: Breakpoint, lastBreakpoint: Breakpoint, cols: number, compactType: CompactType, brekpointsCols: BreakpointCols, colapsedHeight: number): Layout;
+export declare function findOrGenerateResponsiveLayout(layouts: ResponsiveLayout<Breakpoint>, breakpoints: Breakpoints<Breakpoint>, breakpoint: Breakpoint, lastBreakpoint: Breakpoint, cols: number, compactType: CompactType, brekpointsCols: BreakpointCols, colapsedHeight: number, rowHeight: number): Layout;
 /**
  * Given breakpoints, return an array of breakpoints sorted by width. This is usually
  * e.g. ['xxs', 'xs', 'sm', ...]
@@ -59,6 +59,3 @@ export declare function addLayoutItemToBreakPointIfNoExists(layouts: Layouts, br
  */
 export declare function addLayoutItemToBreakPoints(layouts: Layouts, layoutItem: LayoutItem, cols: BreakpointCols, margin: ResponsiveMargin, containerPadding: ResponsiveMargin, rowHeight: number, containerHeight?: number, currentBreakpoint?: Breakpoint): Layouts;
 export declare function cloneLayouts(layouts: Layouts, layoutItemReplaceProps?: Partial<Exclude<LayoutItem, 'i'>>): Layouts;
-export declare function isEqualLayoutItem(layoutA: LayoutItem, layoutB: LayoutItem): boolean;
-export declare function isEqualLayout(layoutA: Layout, layoutB: Layout): boolean;
-export declare function isEqualLayouts(layoutsA: Layouts, layoutsB: Layouts): boolean;

package/components/GridLayout/subcomponents/Responsive/types.d.ts

@@ -1,45 +1,90 @@
-import type { BaseLayoutItem, GridLayoutProps, Layout, LayoutItemRender, LayoutNotReadOnly, Margin } from '../../types';
-export declare type Breakpoint = string;
+import type { Breakpoint, CoreProps, Layout, Layouts, Margin } from '../../types';
 export declare type DefaultBreakpoints = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
 export declare type ResponsiveLayout<T extends Breakpoint> = Record<T, Layout>;
 export declare type Breakpoints<T extends Breakpoint> = Readonly<Record<T, number>>;
-export interface LayoutsNotReadonly {
-    [P: Breakpoint]: LayoutNotReadOnly;
-}
-export interface Layouts {
-    [P: Breakpoint]: Layout;
-}
-export declare type BaseResposiveLayoutItems = BaseLayoutItem[];
-export declare type State = {
-    layout: LayoutNotReadOnly;
+/**
+ * "ResponsiveState" interface usada para manejar el estado reactivo del Responsive
+ */
+export declare type ResponsiveState = {
+    /**
+     * "breakpointLayout" variable de estado que sirve de parametro de entrada al GridLayout
+     * Esta variable cambia con base en los movimientos del usuario y los cambios a traves de los props
+     */
+    breakpointLayout: Layout;
+    /**
+     * "breakpoint" Breeakpoint actual
+     */
     breakpoint: Breakpoint;
+    /**
+     * "cols" Columnas con base en el brekpoint actual
+     */
     cols: number;
+    /**
+     * "fireOnLoadLayoutChange" Indica si se debe notificiar el evento "onLayoutChange" en la primera carga, pero solo
+     * cuando el layout que viende de la prop es diferente despues verificarlo y compactarlo.
+     * Este valor normalmente es falso, sin embargo al momento de cambiar el compactType en un despliegue puede arrojar un
+     * layout diferente por cambio en la forma de compactación
+     */
     fireOnLoadLayoutChange?: boolean;
+    /**
+     * "contaierMargin" margen del breakpoint actual para todo los gridItems
+     */
     contaierMargin: Margin;
+    /**
+     * "contaierPadding" padding del contenedor para el brekpoint actual
+     **/
     contaierPadding: Margin;
 };
-export declare type AddItemPostion = 'first' | 'last';
-export declare type OnLayoutChangeCallback = (layout: LayoutNotReadOnly, layouts: LayoutsNotReadonly) => void;
+export declare type OnLayoutChangeCallback = (layout: Layout, layouts: Layouts) => void;
 export declare type LayoutItemResponsive = {
     i: string;
     freeMove: boolean;
 };
+/**
+ * "ResponsiveMargin" interface para denotar el padding o margin de manera responsive que incluye la opción no responsive Marghin
+ */
 export declare type ResponsiveMargin = {
     [key: Breakpoint]: Margin;
 } | Margin;
+/**
+ * "RefResponsiveState" interface para manejar las variables de referencia que son accesibles en useCallbacs
+ * Adicionalmente sirve para comparar las props vs lo ultimo guardado y tomar acciones cuando realmente cambian los datos.
+ */
 export declare type RefResponsiveState = {
-    layouts: LayoutsNotReadonly;
-    breakpoint: Breakpoint;
+    /**
+     * "cols": ultimo valor de la prop cols
+     */
+    cols: BreakpointCols;
+    /**
+     * "currentBreakpointCols": Cantidad de columnnas que tiene el breakpoint actual
+     */
+    currentBreakpointCols: number;
+    /**
+     * "currentBreakpoint": brekpoint actual
+     */
+    currentBreakpoint: Breakpoint;
+    /**
+     * "layouts": todos los layout por cada breakpoint con las moficaciones hechas por el usuario,
+     * puede diferir a la que viene por los props, por las diferentes transformaciones y se ha tomado la decision de que
+     * no sea controlado el componente.
+     */
+    layouts: Layouts;
+    /**
+     * "breakpoints" breakpoints actuales, se inicializa con los breakpoints que vienen de las props
+     */
     breakpoints: Breakpoints<Breakpoint>;
-    width: number;
-    height: number;
+    /**
+     * "containerWidth" ancho del contendor offsetParent.width (No incluye el contenido oculto )
+     */
+    containerWidth: number;
+    /**
+     * "containerHeight" altura del contendor offsetParent.height (No incluye el contenido oculto )
+     */
+    containerHeight: number;
 };
-export declare type OnBreakpointChange = (breakPoint: Breakpoint, cols: number, width: number, height: number) => void;
 export declare type ContainerChangeEvent = {
     containerWidth: number;
     containerHeight: number;
-    containerMargin: Margin;
-    containerPadding: Margin;
     breakpoint: Breakpoint;
     cols: number;
 };
@@ -47,23 +92,59 @@ export declare type OnContainerChange = (event: ContainerChangeEvent) => void;
 export declare type BreakpointCols = {
     [key: Breakpoint]: number;
 };
-export declare type ResponsiveReactGridLayoutProps = {
+export interface ResponsiveProps extends CoreProps {
     /**
-     * rawLayout: LayoutItems vigentes en todos los breakpoints, si se remueve de aca, se remueve en todos
+     * "breakpoint" permite configurar a traves de prop el breakpoint a mostrar,
+     * por encima del que puede estar detectando en el contenedor root del gridLayout
+     */
+    breakpoint?: Breakpoint | undefined;
+    /**
+     * "breakpoints" indica los breakpoints en que medidas del contenedor cambian
+     * Para los valores por defecto sería:
+     * lg cuando es mayor a 1200 pixels
+     * md: Entre 996 y 1200
+     * sm: Entre 768 y 996
+     * etc.
+     * Valor por defecto: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
+     */
+    breakpoints?: Breakpoints<Breakpoint>;
+    /**
+     * "cols" Indica las columnas por cada breakpoint
+     * Valor por defecto: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 1 }
+     */
+    cols?: BreakpointCols;
+    /**
+     * "layouts" Objeto que contiene los layout por cada breakpoint
      */
-    addItemPosition?: AddItemPostion;
-    layoutItemRender: LayoutItemRender;
-    allowOverlap?: boolean;
-    breakpoint?: Breakpoint;
-    breakpoints: Breakpoints<Breakpoint>;
-    cols: BreakpointCols;
     layouts: ResponsiveLayout<Breakpoint>;
-    width: number;
-    height: number;
+    /**
+     * "containerWidth" Ancho del contendor
+     * TODO: Reservar espacio para el scrollbar vertical
+     */
+    containerWidth: number;
+    /**
+     * "containerHeight" Alto del contendor
+     * TODO: Reservar espacio para el scrollbar horizontal
+     */
+    containerHeight: number;
+    /**
+     * "containerMargin" margin de para los gridItems
+     */
     containerMargin?: ResponsiveMargin;
+    /**
+     * "containerPadding" padding del contenedor
+     */
     containerPadding?: ResponsiveMargin;
-    onBreakpointChange?: OnBreakpointChange;
+    /**
+     * "onLayoutChange" handler que recibirá los cambios del layout actual
+     */
     onLayoutChange?: OnLayoutChangeCallback;
+    /**
+     * "onLayoutChange" handler que recibirá los cambios asociados a las medidas del contenedor, breakpoint y columnas
+     */
     onContainerChange?: OnContainerChange;
-} & Omit<GridLayoutProps, 'cols' | 'margin' | 'containerPadding' | 'onLayoutChange' | 'layout'>;
-export declare type generateInitialStateProps = Pick<ResponsiveReactGridLayoutProps, 'width' | 'height' | 'breakpoint' | 'breakpoints' | 'cols' | 'compactType' | 'layouts' | 'containerMargin' | 'containerPadding' | 'colapsedHeight'>;
+}
+/**
+ * "ResponsiveInitialStateProps" interfaz usada en la inicialización y conciliación del primer estado del componente
+ */
+export declare type ResponsiveInitialStateProps = Pick<ResponsiveProps, 'containerWidth' | 'containerHeight' | 'breakpoint' | 'breakpoints' | 'cols' | 'compactType' | 'layouts' | 'containerMargin' | 'containerPadding' | 'colapsedHeight' | 'rowHeight'>;

package/components/GridLayout/{WidthProvider/index.9a26dfe4.js → subcomponents/WidthProvider/index.50dafd87.js}

@@ -2,8 +2,8 @@ import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import clsx from "clsx";
 import { throttle } from "lodash";
 import { useResizeObserver } from "@m4l/graphics";
+import { j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, T as THROTTLE_RESIZE_TIME } from "../../index.76bccc4f.js";
 import { jsx } from "react/jsx-runtime";
-const THROTTLE_RESIZE_TIME = 200;
 const layoutClassName = "M4LGridLayout";
 function WidthProvider(ComposedComponent) {
   return (props) => {
@@ -14,8 +14,8 @@ function WidthProvider(ComposedComponent) {
     const refMounted = useRef(false);
     const [currentState, setCurrentState] = useState({
       mounted: false,
-      width: 1280,
-      height: 100
+      width: DEFAULT_CONTAINER_WIDTH,
+      height: DEFAULT_CONTAINER_HEIGHT
     });
     const onWindowResizeMemo = useMemo(() => () => {
       const node = elementRef.current;
@@ -54,8 +54,8 @@ function WidthProvider(ComposedComponent) {
     }
     return /* @__PURE__ */ jsx(ComposedComponent, {
       innerRef: elementRef,
-      width: currentState.width,
-      height: currentState.height,
+      containerWidth: currentState.width,
+      containerHeight: currentState.height,
       ...rest
     });
   };

package/components/GridLayout/subcomponents/WidthProvider/index.d.ts

@@ -1,16 +1,15 @@
 import { FunctionComponent } from 'react';
 import { CoreProps, GridLayoutProps } from '../../types';
-import { ResponsiveReactGridLayoutProps } from '../Responsive/types';
-export declare const THROTTLE_RESIZE_TIME = 200;
+import { ResponsiveProps } from '../Responsive/types';
 export declare type HOCProps = {
     measureBeforeMount?: boolean;
 };
 export declare type ComponentReactGridLayoutProps = GridLayoutProps & {
     measureBeforeMount?: boolean;
 };
-export interface ComponentResponsiveReactGridLayoutProps extends Omit<ResponsiveReactGridLayoutProps, 'width' | 'height'> {
+export interface ComponentResponsiveReactGridLayoutProps extends Omit<ResponsiveProps, 'width' | 'height'> {
     measureBeforeMount?: boolean;
 }
-declare type MinimalParameters = Pick<CoreProps, 'width' | 'height' | 'innerRef' | 'style' | 'className'>;
-export declare function WidthProvider<T extends MinimalParameters>(ComposedComponent: FunctionComponent<T>): (props: Omit<T, 'width' | 'height' | 'innerRef'> & HOCProps) => import("react").JSX.Element;
+declare type MinimalParameters = Pick<CoreProps, 'containerWidth' | 'containerHeight' | 'innerRef' | 'style' | 'className'>;
+export declare function WidthProvider<T extends MinimalParameters>(ComposedComponent: FunctionComponent<T>): (props: Omit<T, 'containerWidth' | 'containerHeight' | 'innerRef'> & HOCProps) => import("react").JSX.Element;
 export {};