@m4l/components 7.0.0 → 7.1.2

package/components/GridLayout/subcomponents/GridItem/index.js

@@ -0,0 +1,412 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { DraggableCore } from "react-draggable";
+import { Resizable } from "../../../extended/react-resizable";
+import { h as getH, p as perc, s as setTransform, j as setTopLeft } from "../../utils.js";
+import { c as calcXY, a as calcGridItemWHPx, b as calcGridColWidth, d as calcWH, e as clamp, f as calcGridItemPosition } from "../../calculateUtils.js";
+import clsx from "clsx";
+import { deepEqual } from "fast-equals";
+import { D as DEFAULT_COLS, c as DEFAULT_ROW_HEIGHT, e as DEFAULT_CONTAINER_WIDTH, f as DEFAULT_CONTAINER_HEIGHT, b as DEFAULT_MARGIN, a as DEFAULT_CONTAINER_PADDING, g as DEFAULT_TRANSFORM_SCALE, d as DEFAULT_COLAPSED_HEIGHT } from "../../constants.js";
+import { g as gridLayoutClasses } from "../../classes/index.js";
+function GridItem(props) {
+  const {
+    layoutItemRender: ComponentItemRender,
+    type,
+    i,
+    x,
+    y,
+    w,
+    h,
+    cols = DEFAULT_COLS,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    containerWidth = DEFAULT_CONTAINER_WIDTH,
+    containerHeight = DEFAULT_CONTAINER_HEIGHT,
+    margin = DEFAULT_MARGIN,
+    containerPadding = DEFAULT_CONTAINER_PADDING,
+    transformScale = DEFAULT_TRANSFORM_SCALE,
+    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
+    isBounded,
+    maxRows = Infinity,
+    className = "",
+    draggableCancel = "",
+    draggableHandle = "",
+    minH = 1,
+    minW = 1,
+    maxH = Infinity,
+    maxW = Infinity,
+    isResizable = true,
+    isDraggable = true,
+    resizeHandles,
+    resizeHandle,
+    useCSSTransforms = true,
+    usePercentages,
+    style,
+    freeMove,
+    maximize = "none",
+    colapsed,
+    visible = true,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    onFreeMoveClick
+  } = props;
+  const refProps = useRef({
+    cols,
+    x,
+    y,
+    w,
+    h: getH(h, colapsedHeight, rowHeight, colapsed),
+    minW,
+    maxW,
+    minH,
+    maxH,
+    containerWidth,
+    containerHeight,
+    margin,
+    containerPadding,
+    rowHeight,
+    maxRows,
+    colapsed
+  });
+  useEffect(() => {
+    refProps.current = {
+      cols,
+      x,
+      y,
+      w,
+      h: getH(h, colapsedHeight, rowHeight, colapsed),
+      minW,
+      maxW,
+      minH,
+      maxH,
+      containerWidth,
+      containerHeight,
+      margin,
+      containerPadding,
+      rowHeight,
+      maxRows,
+      colapsed
+    };
+  }, [
+    cols,
+    x,
+    y,
+    w,
+    h,
+    minW,
+    maxW,
+    minH,
+    maxH,
+    containerWidth,
+    containerHeight,
+    margin,
+    containerPadding,
+    rowHeight,
+    maxRows,
+    colapsed,
+    colapsedHeight
+  ]);
+  const [currentState, setCurrentState] = useState({
+    resizing: void 0,
+    dragging: void 0
+  });
+  const refState = useRef({
+    resizing: void 0,
+    dragging: void 0
+  });
+  const elementRef = useRef(null);
+  const getPositionParams = useCallback(
+    (preferContainerWidth, preferContainerHeight) => {
+      return {
+        cols: refProps.current.cols,
+        containerPadding: refProps.current.containerPadding,
+        containerWidth: preferContainerWidth || refProps.current.containerWidth,
+        containerHeight: preferContainerHeight || refProps.current.containerHeight,
+        containerMargin: refProps.current.margin,
+        maxRows: refProps.current.maxRows,
+        rowHeight: refProps.current.rowHeight
+      };
+    },
+    []
+  );
+  const createStyle = (argPos) => {
+    let newStyle;
+    if (useCSSTransforms) {
+      newStyle = setTransform(argPos);
+    } else {
+      newStyle = setTopLeft(argPos);
+      if (usePercentages) {
+        newStyle.left = perc(argPos.left / containerWidth);
+        newStyle.width = perc(argPos.width / containerWidth);
+      }
+    }
+    return newStyle;
+  };
+  const gridItemOnDragStart = useCallback((e, { node }) => {
+    if (!onDragStart) {
+      return;
+    }
+    const newPosition = { top: 0, left: 0 };
+    const { offsetParent } = node;
+    if (!offsetParent) {
+      return;
+    }
+    const parentRect = offsetParent.getBoundingClientRect();
+    const clientRect = node.getBoundingClientRect();
+    const cLeft = clientRect.left / transformScale;
+    const pLeft = parentRect.left / transformScale;
+    const cTop = clientRect.top / transformScale;
+    const pTop = parentRect.top / transformScale;
+    newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
+    newPosition.top = cTop - pTop + offsetParent.scrollTop;
+    refState.current.dragging = newPosition;
+    setCurrentState((prev) => ({ ...prev, dragging: newPosition }));
+    const { x: newX, y: newY } = calcXY(
+      getPositionParams(),
+      newPosition.top,
+      newPosition.left,
+      refProps.current.w,
+      refProps.current.h
+    );
+    onDragStart(i, newX, newY, {
+      e,
+      node,
+      newPosition
+    });
+  }, []);
+  const gridItemOnDrag = useCallback(
+    (e, { node, deltaX, deltaY }) => {
+      if (!onDrag) {
+        return;
+      }
+      if (!refState.current.dragging) {
+        return;
+      }
+      let top = refState.current.dragging.top + deltaY;
+      let left = refState.current.dragging.left + deltaX;
+      const positionParams = getPositionParams();
+      if (isBounded) {
+        const { offsetParent } = node;
+        if (offsetParent) {
+          const bottomBoundary = offsetParent.clientHeight - calcGridItemWHPx(
+            refProps.current.h,
+            refProps.current.rowHeight,
+            refProps.current.margin[1]
+          );
+          top = clamp(top, 0, bottomBoundary);
+          const colWidth = calcGridColWidth(positionParams);
+          const rightBoundary = containerWidth - calcGridItemWHPx(refProps.current.w, colWidth, refProps.current.margin[0]);
+          left = clamp(left, 0, rightBoundary);
+        }
+      }
+      const newPosition = { top, left };
+      refState.current.dragging = newPosition;
+      setCurrentState((prev) => ({ ...prev, dragging: newPosition }));
+      const { x: newX, y: newY } = calcXY(
+        positionParams,
+        top,
+        left,
+        refProps.current.w,
+        refProps.current.h
+      );
+      onDrag(i, newX, newY, {
+        e,
+        node,
+        newPosition
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const gridItemOnDragStop = useCallback((e, { node }) => {
+    if (!onDragStop) {
+      return;
+    }
+    if (!refState.current.dragging) {
+      return;
+    }
+    const { left, top } = refState.current.dragging;
+    const newPosition = { top, left };
+    refState.current.dragging = void 0;
+    setCurrentState((prev) => ({ ...prev, dragging: void 0 }));
+    const { x: newX, y: newY } = calcXY(
+      getPositionParams(),
+      top,
+      left,
+      refProps.current.w,
+      refProps.current.h
+    );
+    return onDragStop(i, newX, newY, {
+      e,
+      node,
+      newPosition
+    });
+  }, []);
+  const onResizeHandler = useCallback(
+    (e, { node, size }, handlerName) => {
+      const handler = props[handlerName];
+      if (!handler) {
+        return;
+      }
+      if (refProps.current.colapsed) {
+        return;
+      }
+      let { w: newW, h: newH } = calcWH(
+        getPositionParams(),
+        size.width,
+        size.height,
+        refProps.current.x,
+        refProps.current.y
+      );
+      const newMinW = Math.max(refProps.current.minW, 1);
+      const newMaxW = Math.min(refProps.current.maxW, refProps.current.cols - refProps.current.x);
+      newW = clamp(newW, newMinW, newMaxW);
+      newH = clamp(newH, refProps.current.minH, refProps.current.maxH);
+      const resizing = handlerName === "onResizeStop" ? void 0 : size;
+      setCurrentState((prev) => ({
+        ...prev,
+        resizing
+      }));
+      refState.current.resizing = resizing;
+      handler(i, newW, newH, { e, node, size });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const localOnResizeStop = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResizeStop");
+  }, []);
+  const localOnResizeStart = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResizeStart");
+  }, []);
+  const localFreeMoveOnClick = useCallback(() => {
+    if (!onFreeMoveClick) {
+      return;
+    }
+    onFreeMoveClick(i);
+  }, []);
+  const mixinResizable = useCallback(
+    (child, position, positionParams) => {
+      const maxWidth = calcGridItemPosition(positionParams, 0, 0, cols - x, 0, maximize).width;
+      const mins = calcGridItemPosition(positionParams, 0, 0, minW, minH, maximize);
+      const maxes = calcGridItemPosition(positionParams, 0, 0, maxW, maxH, maximize);
+      const minConstraints = [mins.width, mins.height];
+      const maxConstraints = [
+        Math.min(maxes.width, maxWidth),
+        Math.min(maxes.height, Infinity)
+      ];
+      return /* @__PURE__ */ jsx(
+        Resizable,
+        {
+          draggableOpts: {
+            disabled: !isResizable || maximize !== "none" || colapsed
+          },
+          className: isResizable ? void 0 : "react-resizable-hide",
+          width: position.width,
+          height: position.height,
+          minConstraints,
+          maxConstraints,
+          onResizeStop: localOnResizeStop,
+          onResizeStart: localOnResizeStart,
+          onResize: localOnResize,
+          transformScale,
+          resizeHandles,
+          handle: resizeHandle,
+          children: child
+        }
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      cols,
+      x,
+      minW,
+      minH,
+      maxW,
+      maxH,
+      isResizable,
+      transformScale,
+      resizeHandles,
+      resizeHandle,
+      maximize,
+      colapsed
+    ]
+  );
+  const mixinDraggable = useCallback(
+    (child) => {
+      return /* @__PURE__ */ jsx(
+        DraggableCore,
+        {
+          disabled: !isDraggable || maximize !== "none",
+          onStart: gridItemOnDragStart,
+          onDrag: gridItemOnDrag,
+          onStop: gridItemOnDragStop,
+          handle: draggableHandle,
+          cancel: ".react-resizable-handle" + (draggableCancel ? "," + draggableCancel : ""),
+          scale: transformScale,
+          nodeRef: elementRef,
+          children: child
+        }
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isDraggable, draggableHandle, transformScale, draggableCancel, maximize]
+  );
+  const localOnResize = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResize");
+  }, []);
+  const positionParms = getPositionParams(containerWidth, containerHeight);
+  const pos = calcGridItemPosition(
+    positionParms,
+    x,
+    y,
+    w,
+    getH(h, colapsedHeight, rowHeight, colapsed),
+    maximize,
+    currentState
+  );
+  const classNameFinal = clsx(gridLayoutClasses.gridItemRoot, className, {
+    [`${gridLayoutClasses.gridItemType}-${type}`]: true,
+    [gridLayoutClasses.static]: props.static,
+    [gridLayoutClasses.resizing]: Boolean(currentState.resizing),
+    [gridLayoutClasses.dragging]: Boolean(currentState.dragging),
+    [gridLayoutClasses.maximizeMe]: maximize === "maximize_me",
+    [gridLayoutClasses.maximizeOther]: maximize === "maximize_other",
+    [gridLayoutClasses.colapsed]: colapsed,
+    [`${gridLayoutClasses.colapsed}-${colapsedHeight}`]: colapsed,
+    [gridLayoutClasses.gridItemFreeMove]: freeMove,
+    [gridLayoutClasses.resizeHide]: colapsed,
+    [gridLayoutClasses.invisible]: !visible,
+    [gridLayoutClasses.cssTransforms]: useCSSTransforms,
+    "react-draggable": isDraggable
+    //Requerido para el componente Draggable
+    // dropping: Boolean(droppingPosition),
+  });
+  const styleFinal = {
+    ...style,
+    ...createStyle(pos)
+    //TODO: Delegar el estilo en el ItemRender
+  };
+  const memoLayouItemRender = useMemo(() => {
+    return /* @__PURE__ */ jsx(ComponentItemRender, { type, i });
+  }, [type, i]);
+  const gridItemRoot = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNameFinal,
+      ref: elementRef,
+      style: styleFinal,
+      role: "none",
+      onClick: localFreeMoveOnClick,
+      children: memoLayouItemRender
+    }
+  );
+  const gridItem = mixinDraggable(mixinResizable(gridItemRoot, pos, getPositionParams()));
+  return /* @__PURE__ */ jsx(Fragment, { children: gridItem });
+}
+const MemonizedGridItem = React.memo(GridItem, (prevProps, nextProps) => {
+  return deepEqual(prevProps, nextProps);
+});
+export {
+  MemonizedGridItem as M
+};

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

@@ -1,5 +1,5 @@
 import { GridDragEvent, GridLayoutProps, GridResizeEvent, LayoutItem, LayoutItemRender, LayoutItemType } from '../../types';
-export declare type GridItemState = {
+export type GridItemState = {
     /**
      * "resizing" indica el tamaño actual cuando se está redimensionando el gridItem
      */
@@ -15,7 +15,7 @@ export declare type GridItemState = {
         left: number;
     };
 };
-export declare type PartialPosition = {
+export type PartialPosition = {
     top: number;
     left: number;
 };
@@ -28,9 +28,9 @@ export interface DraggableData {
     lastX: number;
     lastY: number;
 }
-export declare type GridItemResizeCallback = (i: string, w: number, h: number, data: GridResizeEvent) => void;
-export declare type GridItemDragCallback = (i: string, x: number, y: number, gridDragEvent: GridDragEvent) => void;
-export declare type Maximize = 'maximize_me' | 'maximize_other' | 'none';
+export type GridItemResizeCallback = (i: string, w: number, h: number, data: GridResizeEvent) => void;
+export type GridItemDragCallback = (i: string, x: number, y: number, gridDragEvent: GridDragEvent) => void;
+export type Maximize = 'maximize_me' | 'maximize_other' | 'none';
 export interface GridItemProps extends Omit<LayoutItem, 'moved'>, Pick<GridLayoutProps, 'cols' | 'resizeHandle' | 'draggableCancel' | 'draggableHandle' | 'containerWidth' | 'containerHeight' | 'transformScale' | 'colapsedHeight' | 'rowHeight' | 'useCSSTransforms' | 'margin' | 'containerPadding' | 'maxRows' | 'style'> {
     /**
      * "type": Indica si es placeHolder o Layout
@@ -82,7 +82,7 @@ export interface GridItemProps extends Omit<LayoutItem, 'moved'>, Pick<GridLayou
      */
     onFreeMoveClick?: (i: string) => void;
 }
-export declare type RefProps = {
+export type RefProps = {
     cols: number;
     x: number;
     y: number;

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

@@ -8,4 +8,7 @@ import { ResponsiveState, ResponsiveInitialStateProps } from './types';
  * @returns
  */
 export declare function generateInitialState(props: ResponsiveInitialStateProps): ResponsiveState;
+/**
+ * TODO: Documentar
+ */
 export declare const getHeight: (objectOrHeight: number | Record<string, number>, currentBreakpoint: string) => number;

package/components/GridLayout/subcomponents/Responsive/helper.js

@@ -0,0 +1,62 @@
+import { d as DEFAULT_COLAPSED_HEIGHT, h as DEFAULT_RESPONSIVE_BREAKPOINTS, a as DEFAULT_CONTAINER_PADDING, b as DEFAULT_MARGIN, i as DEFAULT_RESPONSIVE_COLS, c as DEFAULT_ROW_HEIGHT } from "../../constants.js";
+import { i as isEqualLayout } from "../../utils.js";
+import { g as getBreakpointFromWidth, a as getColsFromBreakpoint, f as findOrGenerateResponsiveLayout, b as getIndentationValue } from "./responsiveUtils.js";
+function generateInitialState(props) {
+  const {
+    containerWidth,
+    breakpoint,
+    breakpoints = DEFAULT_RESPONSIVE_BREAKPOINTS,
+    containerPadding = DEFAULT_CONTAINER_PADDING,
+    containerMargin = DEFAULT_MARGIN,
+    layouts: defaultLayouts = {},
+    cols = DEFAULT_RESPONSIVE_COLS,
+    compactType = null,
+    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
+    rowHeight = DEFAULT_ROW_HEIGHT
+  } = props;
+  const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, containerWidth);
+  const newCols = getColsFromBreakpoint(newBreakpoint, cols);
+  let fireOnLoadLayoutChange = true;
+  const initialColapsedHeight = getHeight(colapsedHeight, newBreakpoint);
+  const initialrowHeight = getHeight(rowHeight, newBreakpoint);
+  const initialLayout = findOrGenerateResponsiveLayout(
+    defaultLayouts,
+    breakpoints,
+    newBreakpoint,
+    newBreakpoint,
+    newCols,
+    compactType,
+    { [newBreakpoint]: newCols },
+    initialColapsedHeight,
+    initialrowHeight
+  );
+  if (defaultLayouts[newBreakpoint]) {
+    if (isEqualLayout(defaultLayouts[newBreakpoint], initialLayout)) {
+      fireOnLoadLayoutChange = false;
+    }
+  }
+  const ret = {
+    breakpointLayout: initialLayout,
+    breakpoint: newBreakpoint,
+    cols: newCols,
+    contaierMargin: getIndentationValue(containerMargin, newBreakpoint),
+    contaierPadding: getIndentationValue(containerPadding, newBreakpoint),
+    fireOnLoadLayoutChange,
+    colapsedHeight: initialColapsedHeight,
+    rowHeight: initialrowHeight
+  };
+  return ret;
+}
+const getHeight = (objectOrHeight, currentBreakpoint) => {
+  if (typeof objectOrHeight === "number") {
+    return objectOrHeight;
+  }
+  if (objectOrHeight[currentBreakpoint]) {
+    return objectOrHeight[currentBreakpoint];
+  }
+  return DEFAULT_COLAPSED_HEIGHT;
+};
+export {
+  getHeight as a,
+  generateInitialState as g
+};

package/components/GridLayout/subcomponents/Responsive/index.js

@@ -0,0 +1,161 @@
+import { jsx } from "react/jsx-runtime";
+import { k as isEqualLayouts, c as cloneLayout, n as noop } from "../../utils.js";
+import { g as getBreakpointFromWidth, a as getColsFromBreakpoint, b as getIndentationValue, f as findOrGenerateResponsiveLayout } from "./responsiveUtils.js";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useFirstRender } from "@m4l/graphics";
+import { G as GridLayout } from "../../GridLayout.js";
+import { h as DEFAULT_RESPONSIVE_BREAKPOINTS, i as DEFAULT_RESPONSIVE_COLS, a as DEFAULT_CONTAINER_PADDING, b as DEFAULT_MARGIN, d as DEFAULT_COLAPSED_HEIGHT, c as DEFAULT_ROW_HEIGHT } from "../../constants.js";
+import { g as generateInitialState, a as getHeight } from "./helper.js";
+import { deepEqual } from "fast-equals";
+function Responsive(props) {
+  const {
+    layoutItemRender,
+    containerWidth,
+    containerHeight,
+    breakpoint,
+    compactType = null,
+    breakpoints = DEFAULT_RESPONSIVE_BREAKPOINTS,
+    cols = DEFAULT_RESPONSIVE_COLS,
+    containerPadding = DEFAULT_CONTAINER_PADDING,
+    containerMargin = DEFAULT_MARGIN,
+    layouts = {},
+    // onBreakpointChange = noop,
+    onLayoutChange = noop,
+    onContainerChange = noop,
+    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    ...other
+  } = props;
+  const [currentState, setCurrentState] = useState(
+    () => generateInitialState(props)
+  );
+  const refState = useRef({
+    layouts: {
+      ...layouts,
+      [currentState.breakpoint]: currentState.breakpointLayout
+    },
+    cols,
+    currentBreakpointCols: currentState.cols,
+    currentBreakpoint: currentState.breakpoint,
+    breakpoints,
+    containerWidth,
+    containerHeight,
+    colapsedHeight: currentState.colapsedHeight,
+    rowHeight: currentState.rowHeight
+  });
+  const isFirstRenderFull = useFirstRender([
+    containerWidth,
+    containerHeight,
+    layouts,
+    breakpoint,
+    breakpoints,
+    cols
+  ]);
+  const isFirstRenderBreakpointLayout = useFirstRender([currentState.breakpointLayout]);
+  useEffect(() => {
+    if (!isFirstRenderBreakpointLayout) {
+      onLayoutChange(currentState.breakpointLayout, refState.current.layouts);
+    }
+  }, [currentState.breakpointLayout]);
+  useEffect(() => {
+    if (isFirstRenderFull) {
+      onContainerChange({
+        containerWidth: refState.current.containerWidth,
+        containerHeight: refState.current.containerHeight,
+        breakpoint: currentState.breakpoint,
+        cols: currentState.cols
+      });
+      if (currentState.fireOnLoadLayoutChange) {
+        onLayoutChange(currentState.breakpointLayout, {
+          ...layouts,
+          [currentState.breakpoint]: currentState.breakpointLayout
+        });
+      }
+      return;
+    }
+    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 newLayouts = { ...layouts };
+    let newContainerMargin = currentState.contaierMargin;
+    let newContainerPadding = currentState.contaierPadding;
+    if (newBreakpoint !== lastBreakpoint || newCols !== lastBreakpointCols || !deepEqual(cols, refState.current.cols) || !deepEqual(breakpoints, refState.current.breakpoints) || !isEqualLayouts(layouts, refState.current.layouts)) {
+      newContainerMargin = getIndentationValue(containerMargin, newBreakpoint);
+      newContainerPadding = getIndentationValue(containerPadding, newBreakpoint);
+      const newColapsedHeight = getHeight(colapsedHeight, newBreakpoint);
+      const newRowHeight = getHeight(rowHeight, newBreakpoint);
+      if (!(lastBreakpoint in newLayouts)) {
+        console.error("useEffect casi imposible", lastBreakpoint, newLayouts);
+        newLayouts[lastBreakpoint] = cloneLayout(currentState.breakpointLayout);
+      }
+      const layout = findOrGenerateResponsiveLayout(
+        newLayouts,
+        breakpoints,
+        newBreakpoint,
+        lastBreakpoint,
+        newCols,
+        compactType,
+        cols,
+        newColapsedHeight,
+        newRowHeight
+      );
+      newLayouts[newBreakpoint] = layout;
+      refState.current.layouts = newLayouts;
+      refState.current.breakpoints = breakpoints;
+      refState.current.currentBreakpoint = newBreakpoint;
+      refState.current.currentBreakpointCols = newCols;
+      refState.current.colapsedHeight = newColapsedHeight;
+      setCurrentState({
+        breakpoint: newBreakpoint,
+        breakpointLayout: layout,
+        cols: newCols,
+        contaierMargin: newContainerMargin,
+        contaierPadding: newContainerPadding,
+        colapsedHeight: newColapsedHeight,
+        rowHeight: newRowHeight
+      });
+    }
+    if (newBreakpoint !== lastBreakpoint || newCols !== lastBreakpointCols || lastContainerWidth !== containerWidth || lastContainerHeight !== containerHeight) {
+      onContainerChange({
+        containerWidth,
+        containerHeight,
+        // containerMargin: newContainerMargin,
+        // containerPadding: newContainerPadding,
+        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, breakpointLayout: newLayoutClone }));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onLayoutChange]
+  );
+  return /* @__PURE__ */ jsx(
+    GridLayout,
+    {
+      rowHeight: currentState.rowHeight,
+      containerWidth,
+      containerHeight,
+      colapsedHeight: currentState.colapsedHeight,
+      layoutItemRender,
+      margin: currentState.contaierMargin,
+      containerPadding: getIndentationValue(containerPadding, currentState.breakpoint),
+      onLayoutChange: localOnLayoutChange,
+      layout: currentState.breakpointLayout,
+      cols: currentState.cols,
+      compactType,
+      ...other
+    }
+  );
+}
+export {
+  Responsive as R
+};