@m4l/components 3.1.6 → 3.1.8

package/components/GridLayout/index-EPw3AYiQ.js

@@ -1,1044 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from "react";
-import clsx from "clsx";
-import { M as MemonizedGridItem } from "./subcomponents/Griditem/index-B8Q7iMhr.js";
-import { G as GridLayoutRoot } from "../../styles/index-CqpubQQr.js";
-import { generateUtilityClasses } from "@mui/material";
-import "@mui/base";
-const COMPONENT_CLASS_NAME = "M4LGridLayout";
-const DEFAULT_COLS = 12;
-const DEFAULT_ROW_HEIGHT = 20;
-const DEFAULT_CONTAINER_WIDTH = 1280;
-const DEFAULT_CONTAINER_HEIGHT = 480;
-const DEFAULT_RESPONSIVE_COLS = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 1 };
-const DEFAULT_RESPONSIVE_BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
-const DEFAULT_CONTAINER_PADDING = [10, 10];
-const DEFAULT_MARGIN = [10, 10];
-const DEFAULT_TRANSFORM_SCALE = 1;
-const DEFAULT_COLAPSED_HEIGHT = 35;
-const THROTTLE_RESIZE_TIMEOUT = 200;
-const noop = () => {
-};
-function bottom(layout, colapsedHeight, rowHeight) {
-  let max = 0, bottomY;
-  for (let i = 0, len = layout.length; i < len; i++) {
-    bottomY = layout[i].y + getLayoutItemH(layout[i], colapsedHeight, rowHeight);
-    if (bottomY > max) max = bottomY;
-  }
-  return max;
-}
-function cloneLayoutItem(layoutItem, layoutItemReplaceProps) {
-  return {
-    w: layoutItem.w,
-    h: layoutItem.h,
-    x: layoutItem.x,
-    y: layoutItem.y,
-    i: layoutItem.i,
-    minW: layoutItem.minW,
-    maxW: layoutItem.maxW,
-    minH: layoutItem.minH,
-    maxH: layoutItem.maxH,
-    moved: Boolean(layoutItem.moved),
-    static: Boolean(layoutItem.static),
-    // These can be null/undefined
-    isDraggable: layoutItem.isDraggable,
-    isResizable: layoutItem.isResizable,
-    resizeHandles: layoutItem.resizeHandles,
-    isBounded: layoutItem.isBounded,
-    freeMove: layoutItem.freeMove,
-    colapsed: layoutItem.colapsed,
-    visible: layoutItem.visible,
-    ...layoutItemReplaceProps
-  };
-}
-function cloneLayout(layout, layoutItemReplaceProps) {
-  const newLayout = Array(layout.length);
-  for (let i = 0, len = layout.length; i < len; i++) {
-    newLayout[i] = cloneLayoutItem(layout[i], layoutItemReplaceProps);
-  }
-  return newLayout;
-}
-function collides(l1, l2, colapsedHeight, rowHeight) {
-  if (l1.i === l2.i) return false;
-  if (l1.x + l1.w <= l2.x) return false;
-  if (l1.x >= l2.x + l2.w) return false;
-  if (l1.y + getLayoutItemH(l1, colapsedHeight, rowHeight) <= l2.y) return false;
-  if (l1.y >= l2.y + getLayoutItemH(l2, colapsedHeight, rowHeight)) return false;
-  return true;
-}
-function compactItem(compareWith, l, compactType, cols, fullLayout, colapsedHeight, rowHeight, allowOverlap) {
-  const compactV = compactType === "vertical";
-  const compactH = compactType === "horizontal";
-  if (compactV) {
-    l.y = Math.min(bottom(compareWith, colapsedHeight, rowHeight), l.y);
-    while (l.y > 0 && !getFirstCollision(compareWith, l, colapsedHeight, rowHeight)) {
-      l.y--;
-    }
-  } else if (compactH) {
-    while (l.x > 0 && !getFirstCollision(compareWith, l, colapsedHeight, rowHeight)) {
-      l.x--;
-    }
-  }
-  let collidesItem;
-  while ((collidesItem = getFirstCollision(compareWith, l, colapsedHeight, rowHeight)) && !(compactType === null && allowOverlap)) {
-    if (compactH) {
-      resolveCompactionCollision(
-        fullLayout,
-        l,
-        collidesItem.x + collidesItem.w,
-        "x",
-        colapsedHeight,
-        rowHeight
-      );
-    } else {
-      resolveCompactionCollision(
-        fullLayout,
-        l,
-        collidesItem.y + getLayoutItemH(collidesItem, colapsedHeight, rowHeight),
-        "y",
-        colapsedHeight,
-        rowHeight
-      );
-    }
-    if (compactH && l.x + l.w > cols) {
-      l.x = cols - l.w;
-      l.y++;
-      while (l.x > 0 && !getFirstCollision(compareWith, l, colapsedHeight, rowHeight)) {
-        l.x--;
-      }
-    }
-  }
-  l.y = Math.max(l.y, 0);
-  l.x = Math.max(l.x, 0);
-  return l;
-}
-function compact(layout, compactType, cols, colapsedHeight, rowHeight, allowOverlap) {
-  const layoutToCompact = layout.filter((l) => !l.freeMove);
-  const layoutFreeMov = layout.filter((l) => l?.freeMove);
-  const compareWith = getStatics(layoutToCompact);
-  const sorted = sortLayoutItems(layoutToCompact, compactType);
-  const out = Array(layoutToCompact.length);
-  for (let i = 0, len = sorted.length; i < len; i++) {
-    let l = cloneLayoutItem(sorted[i]);
-    if (!l.static) {
-      l = compactItem(
-        compareWith,
-        l,
-        compactType,
-        cols,
-        sorted,
-        colapsedHeight,
-        rowHeight,
-        allowOverlap
-      );
-      compareWith.push(l);
-    }
-    out[layoutToCompact.indexOf(sorted[i])] = l;
-    l.moved = false;
-  }
-  return out.concat(layoutFreeMov);
-}
-function getLayoutItem(layout, id) {
-  for (let i = 0, len = layout.length; i < len; i++) {
-    if (layout[i].i === id) return layout[i];
-  }
-  return void 0;
-}
-function getStatics(layout) {
-  return layout.filter((l) => l.static);
-}
-function getAllCollisions(layout, layoutItem, colapsedHeight, rowHeight) {
-  return layout.filter((l) => collides(l, layoutItem, colapsedHeight, rowHeight));
-}
-function getFirstCollision(layout, layoutItem, colapsedHeight, rowHeight) {
-  for (let i = 0, len = layout.length; i < len; i++) {
-    if (collides(layout[i], layoutItem, colapsedHeight, rowHeight)) return layout[i];
-  }
-  return void 0;
-}
-function modifyLayout(layout, layoutItem) {
-  const newLayout = Array(layout.length);
-  for (let i = 0, len = layout.length; i < len; i++) {
-    if (layoutItem.i === layout[i].i) {
-      newLayout[i] = layoutItem;
-    } else {
-      newLayout[i] = layout[i];
-    }
-  }
-  return newLayout;
-}
-function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols, colapsedHeight, rowHeight) {
-  const compactH = compactType === "horizontal";
-  const compactV = compactType !== "horizontal";
-  const preventCollision = collidesWith.static;
-  if (isUserAction) {
-    isUserAction = false;
-    const fakeItem = {
-      x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
-      y: compactV ? Math.max(collidesWith.y - getLayoutItemH(itemToMove, colapsedHeight, rowHeight), 0) : itemToMove.y,
-      w: itemToMove.w,
-      h: getLayoutItemH(itemToMove, colapsedHeight, rowHeight),
-      i: "-1"
-    };
-    if (!getFirstCollision(layout, fakeItem, colapsedHeight, rowHeight)) {
-      return moveElement(
-        layout,
-        itemToMove,
-        compactH ? fakeItem.x : void 0,
-        compactV ? fakeItem.y : void 0,
-        isUserAction,
-        !!preventCollision,
-        compactType,
-        cols,
-        colapsedHeight,
-        rowHeight,
-        false
-      );
-    }
-  }
-  return moveElement(
-    layout,
-    itemToMove,
-    compactH ? itemToMove.x + 1 : void 0,
-    compactV ? itemToMove.y + 1 : void 0,
-    isUserAction,
-    !!preventCollision,
-    compactType,
-    cols,
-    colapsedHeight,
-    rowHeight,
-    false
-  );
-}
-function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, rowHeight, allowOverlap) {
-  if (l.static && l.isDraggable !== true) return layout;
-  if (l.y === y && l.x === x) return layout;
-  const oldX = l.x;
-  const oldY = l.y;
-  if (typeof x === "number") l.x = x;
-  if (typeof y === "number") l.y = y;
-  l.moved = true;
-  let sorted = sortLayoutItems(layout, compactType);
-  const movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false;
-  if (movingUp) sorted = sorted.reverse();
-  const collisions = getAllCollisions(sorted, l, colapsedHeight, rowHeight);
-  const hasCollisions = collisions.length > 0;
-  if (hasCollisions && allowOverlap) {
-    return cloneLayout(layout);
-  } else if (hasCollisions && preventCollision) {
-    l.x = oldX;
-    l.y = oldY;
-    l.moved = false;
-    return layout;
-  }
-  for (let i = 0, len = collisions.length; i < len; i++) {
-    const collision = collisions[i];
-    if (collision.moved) continue;
-    if (collision.static) {
-      layout = moveElementAwayFromCollision(
-        layout,
-        collision,
-        l,
-        isUserAction,
-        compactType,
-        cols,
-        colapsedHeight,
-        rowHeight
-      );
-    } else {
-      layout = moveElementAwayFromCollision(
-        layout,
-        l,
-        collision,
-        isUserAction,
-        compactType,
-        cols,
-        colapsedHeight,
-        rowHeight
-      );
-    }
-  }
-  return layout;
-}
-function perc(num) {
-  return num * 100 + "%";
-}
-function resolveCompactionCollision(layout, item, moveToCoord, axis, colapsedHeight, rowHeight) {
-  item[axis] += 1;
-  const itemIndex = layout.map((layoutItem) => {
-    return layoutItem.i;
-  }).indexOf(item.i);
-  for (let i = itemIndex + 1; i < layout.length; i++) {
-    const otherItem = layout[i];
-    if (otherItem.static) continue;
-    if (otherItem.y > item.y + getLayoutItemH(item, colapsedHeight, rowHeight)) break;
-    if (collides(item, otherItem, colapsedHeight, rowHeight)) {
-      resolveCompactionCollision(
-        layout,
-        otherItem,
-        moveToCoord + (axis === "x" ? item.w : getLayoutItemH(item, colapsedHeight, rowHeight)),
-        axis,
-        colapsedHeight,
-        rowHeight
-      );
-    }
-  }
-  item[axis] = moveToCoord;
-}
-function setTransform({ top, left, width, height }) {
-  return {
-    /*  transform: translate,
-        WebkitTransform: translate,
-        MozTransform: translate,
-        msTransform: translate,
-        OTransform: translate, */
-    width: `${width}px`,
-    height: `${height}px`,
-    position: "absolute",
-    left,
-    top
-  };
-}
-function setTopLeft({ top, left, width, height }) {
-  return {
-    top: `${top}px`,
-    left: `${left}px`,
-    width: `${width}px`,
-    height: `${height}px`,
-    position: "absolute"
-  };
-}
-function sortLayoutItemsByRowCol(layout) {
-  return layout.slice(0).sort(function(a, b) {
-    if (a.y > b.y || a.y === b.y && a.x > b.x) {
-      return 1;
-    } else if (a.y === b.y && a.x === b.x) {
-      return 0;
-    }
-    return -1;
-  });
-}
-function sortLayoutItemsByColRow(layout) {
-  return layout.slice(0).sort(function(a, b) {
-    if (a.x > b.x || a.x === b.x && a.y > b.y) {
-      return 1;
-    }
-    return -1;
-  });
-}
-function sortLayoutItems(layout, compactType) {
-  if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);
-  if (compactType === "vertical") return sortLayoutItemsByRowCol(layout);
-  else return layout;
-}
-function withLayoutItem(layout, itemKey, cb) {
-  let item = getLayoutItem(layout, itemKey);
-  if (!item) return [layout, void 0];
-  item = cb(cloneLayoutItem(item));
-  layout = modifyLayout(layout, item);
-  return [layout, item];
-}
-function correctBounds(layout, bounds, colapsedHeight, rowHeight) {
-  const collidesWith = getStatics(layout);
-  for (let i = 0, len = layout.length; i < len; i++) {
-    const l = layout[i];
-    if (l.x + l.w > bounds.cols) l.x = bounds.cols - l.w;
-    if (l.x < 0) {
-      l.x = 0;
-      l.w = bounds.cols;
-    }
-    if (!l.static) collidesWith.push(l);
-    else {
-      while (getFirstCollision(collidesWith, l, colapsedHeight, rowHeight)) {
-        l.y++;
-      }
-    }
-  }
-  return layout;
-}
-function getH(h, colapsedHeight, rowHeight, colapsed) {
-  if (colapsed) {
-    let ret;
-    if (rowHeight && rowHeight > 0) {
-      ret = colapsedHeight / rowHeight;
-    } else {
-      ret = colapsedHeight / DEFAULT_ROW_HEIGHT;
-    }
-    return ret;
-  }
-  return h;
-}
-function getLayoutItemH(layoutItem, colapsedHeight, rowHeight) {
-  return getH(layoutItem.h, colapsedHeight, rowHeight, layoutItem.colapsed);
-}
-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 calcGridColWidth(positionParams) {
-  const { containerMargin: margin, containerPadding, containerWidth, cols } = positionParams;
-  return (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols;
-}
-function calcGridItemWHPx(gridUnits, colOrRowSize, marginPx) {
-  if (!Number.isFinite(gridUnits)) return gridUnits;
-  return Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx);
-}
-function calcGridItemPosition(positionParams, x, y, w, h, maximize, state) {
-  const {
-    containerMargin,
-    containerPadding,
-    rowHeight
-  } = positionParams;
-  const colWidth = calcGridColWidth(positionParams);
-  const out = {};
-  if (state && state.resizing) {
-    out.width = Math.round(state.resizing.width);
-    out.height = Math.round(state.resizing.height);
-  } else {
-    if (maximize === "maximize_me") {
-      out.width = positionParams.containerWidth - 2 * containerPadding[0] - 0;
-      out.height = positionParams.containerHeight - 2 * containerPadding[1] - 0;
-    } else {
-      out.width = calcGridItemWHPx(w, colWidth, containerMargin[0]);
-      out.height = calcGridItemWHPx(h, rowHeight, containerMargin[1]);
-    }
-  }
-  if (state && state.dragging) {
-    out.top = Math.round(state.dragging.top);
-    out.left = Math.round(state.dragging.left);
-  } else {
-    if (maximize === "maximize_me") {
-      out.left = containerPadding[0];
-      out.top = containerPadding[1];
-    } else {
-      out.left = Math.round((colWidth + containerMargin[0]) * x + containerPadding[0]);
-      out.top = Math.round((rowHeight + containerMargin[1]) * y + containerPadding[1]);
-    }
-  }
-  return out;
-}
-function calcXY(positionParams, top, left, w, h) {
-  const { containerMargin: margin, cols, rowHeight, maxRows } = positionParams;
-  const colWidth = calcGridColWidth(positionParams);
-  let x = Math.round((left - margin[0]) / (colWidth + margin[0]));
-  let y = Math.round((top - margin[1]) / (rowHeight + margin[1]));
-  x = clamp(x, 0, cols - w);
-  y = clamp(y, 0, maxRows - h);
-  return { x, y };
-}
-function calcWH(positionParams, width, height, x, y) {
-  const { containerMargin: margin, maxRows, cols, rowHeight } = positionParams;
-  const colWidth = calcGridColWidth(positionParams);
-  let w = Math.round((width + margin[0]) / (colWidth + margin[0]));
-  let h = Math.round((height + margin[1]) / (rowHeight + margin[1]));
-  w = clamp(w, 0, cols - x);
-  h = clamp(h, 0, maxRows - y);
-  return { w, h };
-}
-function clamp(num, lowerBound, upperBound) {
-  return Math.max(Math.min(num, upperBound), lowerBound);
-}
-const gridLayoutClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  /* elements */
-  "root",
-  "gridItemRoot",
-  "gridItemType",
-  "gridItemPlaceholder",
-  "gridItemFreeMove",
-  /* states or variants of elements */
-  "maximizeMe",
-  "maximizeOther",
-  "colapsed",
-  "resizeHide",
-  "invisible",
-  "cssTransforms",
-  "resizing",
-  "dragging",
-  "static"
-]);
-function GridLayout(props) {
-  const {
-    layoutItemRender,
-    innerRef,
-    //Referencia requerida por el provedor WidthProvider para detectar los cambios de tamaño
-    autoSize = true,
-    cols = DEFAULT_COLS,
-    containerPadding = DEFAULT_CONTAINER_PADDING,
-    margin = DEFAULT_MARGIN,
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
-    containerWidth = DEFAULT_CONTAINER_WIDTH,
-    containerHeight = DEFAULT_CONTAINER_HEIGHT,
-    transformScale = DEFAULT_TRANSFORM_SCALE,
-    className = "",
-    style = {},
-    draggableHandle = "",
-    draggableCancel = "",
-    maxRows = Infinity,
-    // infinite vertical growth
-    layout = [],
-    isBounded = false,
-    isDraggable = true,
-    isResizable = true,
-    allowOverlap = false,
-    useCSSTransforms = true,
-    compactType = "vertical",
-    preventCollision = false,
-    resizeHandles = ["se"],
-    resizeHandle,
-    maximizeId,
-    onLayoutChange = noop,
-    onDragStart = noop,
-    onDrag = noop,
-    onDragStop = noop,
-    onResizeStart = noop,
-    onResize = noop,
-    onResizeStop = noop
-  } = props;
-  const [currentState, setCurrentState] = useState({
-    mounted: false
-  });
-  const [nrOnlayoutChanges, setNrOnlayoutChanges] = useState(0);
-  const [finalLayoutRender, setFinalLayoutRender] = useState(layout);
-  const [zIndexes, setzIndexes] = useState(() => {
-    return layout.filter((li) => li.freeMove).map((lmap) => lmap.i);
-  });
-  const refState = useRef({
-    layout,
-    oldDragItem: void 0,
-    oldLayout: void 0,
-    oldResizeItem: void 0,
-    zIndexes,
-    colapsedHeight,
-    rowHeight
-  });
-  refState.current.colapsedHeight = colapsedHeight;
-  refState.current.rowHeight = rowHeight;
-  useEffect(() => {
-    setCurrentState({ mounted: true });
-  }, []);
-  useEffect(() => {
-    if (nrOnlayoutChanges > 0) {
-      onLayoutChange(refState.current.layout);
-    }
-  }, [nrOnlayoutChanges]);
-  useEffect(() => {
-    if (!isEqualLayout(finalLayoutRender, layout)) {
-      const newLayout = cloneLayout(layout);
-      const newzIndexes = [...zIndexes];
-      for (let index = 0; index < newLayout.length; index++) {
-        const li = newLayout[index];
-        if (li.freeMove && newzIndexes.indexOf(li.i) === -1) {
-          newzIndexes.push(li.i);
-        }
-      }
-      refState.current.layout = newLayout;
-      setFinalLayoutRender(newLayout);
-      if (newzIndexes.length !== zIndexes.length) {
-        setzIndexes(newzIndexes);
-        refState.current.zIndexes = newzIndexes;
-      }
-    }
-  }, [layout]);
-  const onLayoutMaybeChanged = useCallback((newLayout, oldLayout) => {
-    if (!oldLayout) {
-      oldLayout = refState.current.layout;
-    }
-    if (!isEqualLayout(oldLayout, newLayout)) {
-      setNrOnlayoutChanges((prev) => prev + 1);
-    }
-  }, []);
-  const localOnDragStart = useCallback(
-    (i, _x, _y, gridDragEvent) => {
-      const { layout: layout2 } = refState.current;
-      const { e, node } = gridDragEvent;
-      const li = getLayoutItem(layout2, i);
-      if (!li) return;
-      refState.current = {
-        ...refState.current,
-        oldDragItem: cloneLayoutItem(li),
-        oldLayout: layout2
-        //Punto de arranque, layout actual
-      };
-      if (li && li.freeMove) {
-        onClickSetOnTopFreeMove(li.i, "onDragStart");
-      }
-      if (gridDragEvent.e.type !== "touchmove") {
-        gridDragEvent.e.preventDefault();
-      }
-      gridDragEvent.e.stopPropagation();
-      return onDragStart(layout2, li, li, void 0, e, node);
-    },
-    []
-  );
-  const localOnDrag = useCallback(
-    (i, x, y, gridDragEvent) => {
-      const { oldDragItem, layout: layout2 } = refState.current;
-      const { e, node } = gridDragEvent;
-      const li = getLayoutItem(layout2, i);
-      if (!li) return;
-      const newPlaceholder = {
-        w: li.w,
-        h: getLayoutItemH(li, refState.current.colapsedHeight, refState.current.rowHeight),
-        x: li.x,
-        y: li.y,
-        placeholder: true,
-        i
-      };
-      const isUserAction = true;
-      try {
-        let newLayout;
-        if (!li.freeMove) {
-          newLayout = moveElement(
-            layout2,
-            li,
-            x,
-            y,
-            isUserAction,
-            preventCollision,
-            compactType,
-            cols,
-            refState.current.colapsedHeight,
-            refState.current.rowHeight,
-            allowOverlap
-          );
-        } else {
-          li.x = x;
-          li.y = y;
-          newPlaceholder.x = x;
-          newPlaceholder.y = y;
-          newLayout = cloneLayout(layout2);
-        }
-        const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(
-          newLayout,
-          compactType,
-          cols,
-          refState.current.colapsedHeight,
-          refState.current.rowHeight,
-          allowOverlap
-        );
-        refState.current = {
-          ...refState.current,
-          layout: finalLayout,
-          activeDrag: newPlaceholder
-        };
-        setCurrentState((prev) => ({
-          ...prev,
-          activeDrag: newPlaceholder
-        }));
-        setFinalLayoutRender(finalLayout);
-        if (gridDragEvent.e.type !== "touchmove") {
-          gridDragEvent.e.preventDefault();
-        }
-        gridDragEvent.e.stopPropagation();
-        onDrag(newLayout, oldDragItem, li, newPlaceholder, e, node);
-      } catch (error) {
-        console.warn("GridLayout error capturado");
-      }
-    },
-    []
-  );
-  const localOnDragStop = useCallback(
-    (i, x, y, { e, node }) => {
-      if (!refState.current.activeDrag) {
-        return;
-      }
-      const { oldDragItem, layout: layout2, oldLayout } = refState.current;
-      const li = getLayoutItem(layout2, i);
-      if (!li) return;
-      let newLayout;
-      const isUserAction = true;
-      if (!li.freeMove) {
-        newLayout = moveElement(
-          layout2,
-          li,
-          x,
-          y,
-          isUserAction,
-          preventCollision,
-          compactType,
-          cols,
-          refState.current.colapsedHeight,
-          refState.current.rowHeight,
-          allowOverlap
-        );
-      } else {
-        li.x = x;
-        li.y = y;
-        newLayout = cloneLayout(layout2);
-      }
-      const finalLayout = allowOverlap ? newLayout || li.freeMove : compact(
-        newLayout,
-        compactType,
-        cols,
-        refState.current.colapsedHeight,
-        refState.current.rowHeight,
-        allowOverlap
-      );
-      setCurrentState((prev) => ({
-        ...prev,
-        activeDrag: void 0
-      }));
-      setFinalLayoutRender(finalLayout);
-      refState.current = {
-        ...refState.current,
-        layout: finalLayout,
-        oldDragItem: void 0,
-        oldLayout: void 0,
-        activeDrag: void 0
-      };
-      if (e.type !== "touchmove") {
-        e.preventDefault();
-      }
-      e.stopPropagation();
-      onLayoutMaybeChanged(finalLayout, oldLayout);
-      onDragStop(layout2, oldDragItem, li, void 0, e, node);
-    },
-    []
-  );
-  const localOnResizeStart = useCallback(
-    (i, _w, _h, { e, node }) => {
-      const { layout: layout2 } = refState.current;
-      const li = getLayoutItem(layout2, i);
-      if (!li) return;
-      refState.current = {
-        ...refState.current,
-        oldResizeItem: cloneLayoutItem(li),
-        oldLayout: refState.current.layout
-        //Punto de arranque, layout actual
-      };
-      onResizeStart(layout2, li, li, void 0, e, node);
-      if (li && li.freeMove) {
-        onClickSetOnTopFreeMove(li.i, "onResizeStart");
-      }
-    },
-    []
-  );
-  const localOnResize = useCallback(
-    (i, w, h, { e, node }) => {
-      const { layout: layout2, oldResizeItem } = refState.current;
-      let newLayout;
-      let li;
-      if (!oldResizeItem?.freeMove) {
-        const cb = (cbLi) => {
-          let hasCollisions;
-          if (preventCollision && !allowOverlap) {
-            const collisions = getAllCollisions(
-              layout2,
-              { ...cbLi, w, h },
-              refState.current.colapsedHeight,
-              refState.current.rowHeight
-            ).filter((layoutItem) => layoutItem.i !== cbLi.i);
-            hasCollisions = collisions.length > 0;
-            if (hasCollisions) {
-              let leastX = Infinity, leastY = Infinity;
-              collisions.forEach((layoutItem) => {
-                if (layoutItem.x > cbLi.x) leastX = Math.min(leastX, layoutItem.x);
-                if (layoutItem.y > cbLi.y) leastY = Math.min(leastY, layoutItem.y);
-              });
-              if (Number.isFinite(leastX)) cbLi.w = leastX - cbLi.x;
-              if (Number.isFinite(leastY)) cbLi.h = leastY - cbLi.y;
-            }
-          }
-          if (!hasCollisions) {
-            cbLi.w = w;
-            cbLi.h = h;
-          }
-          return cbLi;
-        };
-        const [tempLayout, tempLi] = withLayoutItem(cloneLayout(layout2), i, cb);
-        newLayout = tempLayout;
-        li = tempLi;
-      } else {
-        newLayout = cloneLayout(layout2);
-        li = getLayoutItem(newLayout, i);
-        if (li) {
-          li.w = w;
-          li.h = h;
-        }
-      }
-      if (!li) return;
-      const newPlaceholder = {
-        w: li.w,
-        h: li.h,
-        x: li.x,
-        y: li.y,
-        static: true,
-        i
-      };
-      try {
-        const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(
-          newLayout,
-          compactType,
-          cols,
-          refState.current.colapsedHeight,
-          refState.current.rowHeight,
-          allowOverlap
-        );
-        refState.current = {
-          ...refState.current,
-          layout: finalLayout,
-          activeDrag: newPlaceholder
-        };
-        setFinalLayoutRender(finalLayout);
-        setCurrentState((prev) => ({ ...prev, activeDrag: newPlaceholder }));
-        onResize(newLayout, oldResizeItem, li, newPlaceholder, e, node);
-      } catch (error) {
-      }
-      if (e.type !== "touchmove") {
-        e.preventDefault();
-      }
-      e.stopPropagation();
-    },
-    []
-  );
-  const localOnResizeStop = useCallback(
-    (i, _w, _h, { e, node }) => {
-      if (!refState.current.activeDrag) {
-        return;
-      }
-      const { layout: layout2, oldResizeItem, oldLayout } = refState.current;
-      const l = getLayoutItem(layout2, i);
-      refState.current = {
-        ...refState.current,
-        // layout: finalLayout,
-        oldResizeItem: void 0,
-        oldLayout: void 0,
-        activeDrag: void 0
-      };
-      setCurrentState((prev) => ({ ...prev, activeDrag: void 0 }));
-      onLayoutMaybeChanged(layout2, oldLayout);
-      if (l) {
-        onResizeStop(layout2, oldResizeItem, l, void 0, e, node);
-      }
-    },
-    []
-  );
-  const onClickSetOnTopFreeMove = useCallback((i, _source) => {
-    const { layout: layout2 } = refState.current;
-    const index = refState.current.zIndexes.indexOf(i);
-    const l = getLayoutItem(layout2, i);
-    if (l && l?.freeMove) {
-      if (index !== refState.current.zIndexes.length - 1 || index === -1) {
-        const newIndexes = [...refState.current.zIndexes];
-        if (index !== -1) {
-          newIndexes.splice(index, 1);
-        }
-        newIndexes.push(i);
-        refState.current.zIndexes = newIndexes;
-        setzIndexes(newIndexes);
-      }
-    }
-  }, []);
-  const placeholder = () => {
-    const { activeDrag } = currentState;
-    if (!activeDrag) return null;
-    return /* @__PURE__ */ jsx(
-      MemonizedGridItem,
-      {
-        type: "placeholder",
-        layoutItemRender,
-        w: activeDrag.w,
-        h: activeDrag.h,
-        x: activeDrag.x,
-        y: activeDrag.y,
-        i: activeDrag.i,
-        className: gridLayoutClasses.gridItemPlaceholder,
-        containerWidth,
-        containerHeight,
-        cols,
-        margin,
-        containerPadding,
-        maxRows,
-        rowHeight,
-        isDraggable: false,
-        isResizable: false,
-        isBounded: false,
-        useCSSTransforms,
-        transformScale,
-        draggableCancel: "",
-        draggableHandle: "",
-        minW: 0,
-        maxW: 0,
-        minH: 0,
-        maxH: 0,
-        maximize: "none",
-        colapsed: activeDrag.colapsed,
-        colapsedHeight
-      }
-    );
-  };
-  const processGridItem = useCallback(
-    (l, isMounted) => {
-      const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
-      const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
-      const resizeHandlesOptions = l.resizeHandles || resizeHandles;
-      const bounded = draggable && isBounded && l.isBounded !== false;
-      const mximize = maximizeId ? maximizeId === l.i ? "maximize_me" : "maximize_other" : "none";
-      let zIndex = void 0;
-      let style2;
-      if (l.freeMove) {
-        zIndex = zIndexes.indexOf(l.i);
-        if (zIndex !== -1) {
-          zIndex = zIndex + 1;
-          style2 = { zIndex };
-        }
-      }
-      return /* @__PURE__ */ jsx(
-        MemonizedGridItem,
-        {
-          type: "layoutItem",
-          layoutItemRender,
-          containerWidth,
-          containerHeight,
-          cols,
-          margin,
-          containerPadding: containerPadding || margin,
-          maxRows,
-          rowHeight,
-          draggableCancel,
-          draggableHandle,
-          onDragStart: localOnDragStart,
-          onDrag: localOnDrag,
-          onDragStop: localOnDragStop,
-          onResizeStart: localOnResizeStart,
-          onResize: localOnResize,
-          onResizeStop: localOnResizeStop,
-          onFreeMoveClick: l.freeMove ? onClickSetOnTopFreeMove : void 0,
-          isDraggable: draggable,
-          isResizable: resizable,
-          isBounded: bounded,
-          useCSSTransforms: useCSSTransforms && isMounted,
-          usePercentages: !isMounted,
-          transformScale,
-          w: l.w,
-          h: l.h,
-          x: l.x,
-          y: l.y,
-          i: l.i,
-          minH: l.minH,
-          minW: l.minW,
-          maxH: l.maxH,
-          maxW: l.maxW,
-          static: l.static,
-          resizeHandles: resizeHandlesOptions,
-          resizeHandle,
-          maximize: mximize,
-          freeMove: l.freeMove,
-          colapsed: l.colapsed,
-          visible: l.visible,
-          colapsedHeight,
-          style: style2
-        },
-        l.i
-      );
-    },
-    [
-      containerWidth,
-      containerHeight,
-      cols,
-      margin,
-      containerPadding,
-      maxRows,
-      rowHeight,
-      draggableCancel,
-      draggableHandle,
-      isDraggable,
-      isResizable,
-      isBounded,
-      useCSSTransforms,
-      transformScale,
-      resizeHandles,
-      resizeHandle,
-      maximizeId,
-      zIndexes,
-      colapsedHeight,
-      rowHeight
-    ]
-  );
-  const containerAutoSizeHeight = useCallback(() => {
-    if (!autoSize) return;
-    const nbRow = bottom(finalLayoutRender, colapsedHeight, rowHeight);
-    const containerPaddingY = containerPadding ? containerPadding[1] : margin[1];
-    return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
-  }, [autoSize, containerPadding, margin, finalLayoutRender, colapsedHeight]);
-  const mergedStyle = {
-    height: containerAutoSizeHeight(),
-    ...style
-  };
-  return /* @__PURE__ */ jsxs(
-    GridLayoutRoot,
-    {
-      className: clsx(gridLayoutClasses.root, className),
-      style: mergedStyle,
-      ref: innerRef,
-      children: [
-        finalLayoutRender.map((li) => processGridItem(li, !!currentState.mounted)),
-        placeholder()
-      ]
-    }
-  );
-}
-export {
-  noop as A,
-  COMPONENT_CLASS_NAME as C,
-  DEFAULT_COLS as D,
-  GridLayout as G,
-  THROTTLE_RESIZE_TIMEOUT as T,
-  calcGridItemWHPx as a,
-  calcGridColWidth as b,
-  calcXY as c,
-  calcWH as d,
-  clamp as e,
-  calcGridItemPosition as f,
-  getH as g,
-  gridLayoutClasses as h,
-  DEFAULT_ROW_HEIGHT as i,
-  DEFAULT_CONTAINER_WIDTH as j,
-  DEFAULT_CONTAINER_HEIGHT as k,
-  DEFAULT_MARGIN as l,
-  DEFAULT_CONTAINER_PADDING as m,
-  DEFAULT_TRANSFORM_SCALE as n,
-  DEFAULT_COLAPSED_HEIGHT as o,
-  perc as p,
-  setTopLeft as q,
-  cloneLayoutItem as r,
-  setTransform as s,
-  cloneLayout as t,
-  compact as u,
-  correctBounds as v,
-  isEqualLayout as w,
-  DEFAULT_RESPONSIVE_BREAKPOINTS as x,
-  DEFAULT_RESPONSIVE_COLS as y,
-  isEqualLayouts as z
-};