@m4l/components 0.1.75 → 0.1.77

package/components/GridLayout/index.4ba3767a.js

@@ -0,0 +1,1400 @@
+import React__default, { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { d as deepEqual } from "../../node_modules.d73a220d.js";
+import clsx from "clsx";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { D as DraggableCore_1 } from "../../react-draggable.7abb5d0a.js";
+import { R as Resizable, r as react_resizable_css } from "../../react-resizable.ba08699a.js";
+import { styled } from "@mui/material/styles";
+import "@m4l/graphics";
+import "lodash";
+const noop = () => {
+};
+function bottom(layout, colapsedHeight) {
+  let max = 0, bottomY;
+  for (let i = 0, len = layout.length; i < len; i++) {
+    bottomY = layout[i].y + getLayoutItemH(layout[i], colapsedHeight);
+    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),
+    isDraggable: layoutItem.isDraggable,
+    isResizable: layoutItem.isResizable,
+    resizeHandles: layoutItem.resizeHandles,
+    isBounded: layoutItem.isBounded,
+    freeMove: layoutItem.freeMove,
+    colapsed: layoutItem.colapsed,
+    ...layoutItemReplaceProps
+  };
+}
+function cloneLayout(layout, layoutItemReplaceProps) {
+  console.log("cloneLayout");
+  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) {
+  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) <= l2.y)
+    return false;
+  if (l1.y >= l2.y + getLayoutItemH(l2, colapsedHeight))
+    return false;
+  return true;
+}
+function compactItem(compareWith, l, compactType, cols, fullLayout, colapsedHeight, allowOverlap) {
+  const compactV = compactType === "vertical";
+  const compactH = compactType === "horizontal";
+  if (compactV) {
+    l.y = Math.min(bottom(compareWith, colapsedHeight), l.y);
+    while (l.y > 0 && !getFirstCollision(compareWith, l, colapsedHeight)) {
+      l.y--;
+    }
+  } else if (compactH) {
+    while (l.x > 0 && !getFirstCollision(compareWith, l, colapsedHeight)) {
+      l.x--;
+    }
+  }
+  let collidesItem;
+  while ((collidesItem = getFirstCollision(compareWith, l, colapsedHeight)) && !(compactType === null && allowOverlap)) {
+    if (compactH) {
+      resolveCompactionCollision(
+        fullLayout,
+        l,
+        collidesItem.x + collidesItem.w,
+        "x",
+        colapsedHeight
+      );
+    } else {
+      resolveCompactionCollision(
+        fullLayout,
+        l,
+        collidesItem.y + getLayoutItemH(collidesItem, colapsedHeight),
+        "y",
+        colapsedHeight
+      );
+    }
+    if (compactH && l.x + l.w > cols) {
+      l.x = cols - l.w;
+      l.y++;
+      while (l.x > 0 && !getFirstCollision(compareWith, l, colapsedHeight)) {
+        l.x--;
+      }
+    }
+  }
+  l.y = Math.max(l.y, 0);
+  l.x = Math.max(l.x, 0);
+  return l;
+}
+function compact(layout, compactType, cols, colapsedHeight, allowOverlap) {
+  const layoutToCompact = layout.filter((l) => !l.freeMove);
+  const layoutFreeMov = layout.filter((l) => l?.freeMove);
+  console.log(`Compacting`, layoutToCompact, layoutFreeMov);
+  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,
+        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) {
+  return layout.filter((l) => collides(l, layoutItem, colapsedHeight));
+}
+function getFirstCollision(layout, layoutItem, colapsedHeight) {
+  for (let i = 0, len = layout.length; i < len; i++) {
+    if (collides(layout[i], layoutItem, colapsedHeight))
+      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) {
+  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), 0) : itemToMove.y,
+      w: itemToMove.w,
+      h: getLayoutItemH(itemToMove, colapsedHeight),
+      i: "-1"
+    };
+    if (!getFirstCollision(layout, fakeItem, colapsedHeight)) {
+      return moveElement(
+        layout,
+        itemToMove,
+        compactH ? fakeItem.x : void 0,
+        compactV ? fakeItem.y : void 0,
+        isUserAction,
+        !!preventCollision,
+        compactType,
+        cols,
+        colapsedHeight,
+        false
+      );
+    }
+  }
+  return moveElement(
+    layout,
+    itemToMove,
+    compactH ? itemToMove.x + 1 : void 0,
+    compactV ? itemToMove.y + 1 : void 0,
+    isUserAction,
+    !!preventCollision,
+    compactType,
+    cols,
+    colapsedHeight,
+    false
+  );
+}
+function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, 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);
+  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
+      );
+    } else {
+      layout = moveElementAwayFromCollision(
+        layout,
+        l,
+        collision,
+        isUserAction,
+        compactType,
+        cols,
+        colapsedHeight
+      );
+    }
+  }
+  return layout;
+}
+function perc(num) {
+  return num * 100 + "%";
+}
+function resolveCompactionCollision(layout, item, moveToCoord, axis, colapsedHeight) {
+  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))
+      break;
+    if (collides(item, otherItem, colapsedHeight)) {
+      resolveCompactionCollision(
+        layout,
+        otherItem,
+        moveToCoord + (axis === "x" ? item.w : getLayoutItemH(item, colapsedHeight)),
+        axis,
+        colapsedHeight
+      );
+    }
+  }
+  item[axis] = moveToCoord;
+}
+function setTransform({ top, left, width, height }) {
+  const translate = `translate(${left}px,${top}px)`;
+  return {
+    transform: translate,
+    WebkitTransform: translate,
+    MozTransform: translate,
+    msTransform: translate,
+    OTransform: translate,
+    width: `${width}px`,
+    height: `${height}px`,
+    position: "absolute"
+  };
+}
+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) {
+  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)) {
+        l.y++;
+      }
+    }
+  }
+  return layout;
+}
+function getH(h, colapsedHeight, colapsed) {
+  if (colapsed) {
+    return colapsedHeight;
+  }
+  return h;
+}
+function getLayoutItemH(layoutItem, colapsedHeight) {
+  return getH(layoutItem.h, colapsedHeight, layoutItem.colapsed);
+}
+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] - 2;
+      out.height = positionParams.containerHeight - 2 * containerPadding[1] - 2;
+      console.log(
+        "calcGridItemPosition top,left",
+        out,
+        maximize,
+        positionParams.containerHeight
+      );
+    } else {
+      console.log(
+        "calcGridItemPosition top,left",
+        out,
+        maximize,
+        containerMargin,
+        positionParams.containerHeight
+      );
+      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);
+}
+function GridItem(props) {
+  const {
+    type,
+    i,
+    x,
+    y,
+    w,
+    h,
+    cols,
+    isBounded,
+    margin,
+    maxRows,
+    rowHeight,
+    containerWidth,
+    containerHeight,
+    containerPadding,
+    className = "",
+    cancel = "",
+    handle = "",
+    minH = 1,
+    minW = 1,
+    maxH = Infinity,
+    maxW = Infinity,
+    isResizable,
+    isDraggable,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    onFreeMoveClick,
+    layoutItemRender: ComponentItemRender,
+    resizeHandles,
+    resizeHandle,
+    transformScale = 1,
+    useCSSTransforms = true,
+    usePercentages,
+    style,
+    freeMove,
+    maximize = "none",
+    colapsed,
+    colapsedHeight = 1.5
+  } = props;
+  const refProps = useRef({
+    cols,
+    x,
+    y,
+    w,
+    h: getH(h, colapsedHeight, colapsed),
+    minW,
+    maxW,
+    minH,
+    maxH,
+    containerWidth,
+    containerHeight,
+    margin,
+    containerPadding,
+    rowHeight,
+    maxRows,
+    colapsed
+  });
+  useEffect(() => {
+    refProps.current = {
+      cols,
+      x,
+      y,
+      w,
+      h: getH(h, colapsedHeight, 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,
+    className: ""
+  });
+  const refState = useRef({
+    resizing: void 0,
+    dragging: void 0,
+    className: ""
+  });
+  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
+    };
+  }, []);
+  useEffect(() => {
+    console.log("useEffect Grid Item****", i);
+    return () => {
+      console.log(`*** useEffect Grid Item: ${i} [cleanUP] **** type:${type}`);
+    };
+  }, []);
+  const createStyle = (pos2) => {
+    let newStyle;
+    if (useCSSTransforms) {
+      newStyle = setTransform(pos2);
+    } else {
+      newStyle = setTopLeft(pos2);
+      if (usePercentages) {
+        newStyle.left = perc(pos2.left / containerWidth);
+        newStyle.width = perc(pos2.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;
+    setCurrentState((prev) => ({
+      ...prev,
+      dragging: newPosition
+    }));
+    refState.current.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) {
+      console.warn("gridItemOnDrag onDrag called before onDragStart");
+      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;
+    const {
+      x: newX,
+      y: newY
+    } = calcXY(positionParams, top, left, refProps.current.w, refProps.current.h);
+    onDrag(i, newX, newY, {
+      e,
+      node,
+      newPosition
+    });
+    setCurrentState((prev) => ({
+      ...prev,
+      dragging: newPosition
+    }));
+  }, []);
+  const gridItemOnDragStop = useCallback((e, {
+    node
+  }) => {
+    if (!onDragStop)
+      return;
+    if (!refState.current.dragging) {
+      console.warn("onDragEnd called before onDragStart");
+      return;
+    }
+    const {
+      left,
+      top
+    } = refState.current.dragging;
+    const newPosition = {
+      top,
+      left
+    };
+    setCurrentState((prev) => ({
+      ...prev,
+      dragging: void 0
+    }));
+    refState.current.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) {
+      console.error("no puede irse por aca");
+      return;
+    }
+    if (colapsed) {
+      console.error("no puede tener resize");
+      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);
+    setCurrentState((prev) => ({
+      ...prev,
+      resizing: handlerName === "onResizeStop" ? void 0 : size
+    }));
+    handler(i, newW, newH, {
+      e,
+      node,
+      size
+    });
+  }, []);
+  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
+      }
+    );
+  }, [cols, x, minW, minH, maxW, maxH, isResizable, transformScale, resizeHandles, resizeHandle, maximize, colapsed]);
+  const mixinDraggable = useCallback((child) => {
+    return /* @__PURE__ */ jsx(DraggableCore_1, {
+      disabled: !isDraggable || maximize !== "none",
+      onStart: gridItemOnDragStart,
+      onDrag: gridItemOnDrag,
+      onStop: gridItemOnDragStop,
+      handle,
+      cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""),
+      scale: transformScale,
+      nodeRef: elementRef,
+      children: child
+    });
+  }, [isDraggable, handle, transformScale, cancel, 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, colapsed), maximize, currentState);
+  const classNameFinal = clsx("react-grid-item", className, {
+    type,
+    static: props.static,
+    resizing: Boolean(currentState.resizing),
+    "react-draggable": isDraggable,
+    "react-maximize-me": maximize === "maximize_me",
+    "react-maximize-other": maximize === "maximize_other",
+    "react-colapsed": colapsed,
+    "react-popover": freeMove,
+    "react-draggable-dragging": Boolean(currentState.dragging),
+    cssTransforms: useCSSTransforms
+  });
+  const styleFinal = {
+    ...style,
+    ...createStyle(pos)
+  };
+  const memoLayouItemRender = useMemo(() => {
+    return /* @__PURE__ */ jsx(ComponentItemRender, {
+      type,
+      i
+    });
+  }, [type, i]);
+  const baseGridItem = /* @__PURE__ */ jsx("div", {
+    className: classNameFinal,
+    ref: elementRef,
+    style: styleFinal,
+    role: "presentation",
+    onClick: localFreeMoveOnClick,
+    children: memoLayouItemRender
+  });
+  const gridItem = mixinDraggable(mixinResizable(baseGridItem, pos, getPositionParams()));
+  console.log(`Render Grid Item: ${i} type:${type} ==> {x,y,w,h}:{${x},${y},${w},${getH(h, colapsedHeight, colapsed)}} - containerHeight:${containerHeight}`);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: gridItem
+  });
+}
+const MemonizedGridItem = React__default.memo(GridItem, (prevProps, nextProps) => {
+  return deepEqual(prevProps, nextProps);
+});
+const GridLayoutRoot = styled("div")`
+    /* height: 100%; */
+    overflow: auto;
+    /* flex-grow: 1; */
+    position: relative;
+    transition: height 200ms ease;
+    border: 1px dashed gray; //TODO:Para borrar
+
+    .react-grid-item {
+        transition: all 200ms ease;
+        transition-property: left, top;
+    }
+    .react-grid-item img {
+        pointer-events: none;
+        user-select: none;
+    }
+    .react-grid-item.cssTransforms {
+        transition-property: transform;
+    }
+    .react-grid-item.react-maximize-other {
+        display: none;
+    }
+
+    .react-grid-item.react-popover {
+        z-index: 1;
+        will-change: width, height;
+    }
+    .react-grid-item.resizing {
+        z-index: 2;
+        will-change: width, height;
+    }
+
+    .react-grid-item.react-draggable-dragging {
+        transition: none;
+        z-index: 4;
+        will-change: transform;
+    }
+
+    .react-grid-item.dropping {
+        visibility: hidden;
+    }
+
+    .react-grid-item.react-grid-placeholder {
+        background: green;
+        opacity: 0.2;
+        transition-duration: 100ms;
+        z-index: 3;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -o-user-select: none;
+        user-select: none;
+    }
+
+    .react-grid-item > .react-resizable-handle {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+    }
+
+    .react-grid-item > .react-resizable-handle::after {
+        content: '';
+        position: absolute;
+        right: 3px;
+        bottom: 3px;
+        width: 5px;
+        height: 5px;
+        border-right: 2px solid rgba(0, 0, 0, 0.4);
+        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+    }
+
+    .react-resizable-hide > .react-resizable-handle {
+        display: none;
+    }
+
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+        bottom: 0;
+        left: 0;
+        cursor: sw-resize;
+        transform: rotate(90deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+        bottom: 0;
+        right: 0;
+        cursor: se-resize;
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+        top: 0;
+        left: 0;
+        cursor: nw-resize;
+        transform: rotate(180deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+        top: 0;
+        right: 0;
+        cursor: ne-resize;
+        transform: rotate(270deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-w,
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+        top: 50%;
+        margin-top: -10px;
+        cursor: ew-resize;
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+        left: 0;
+        transform: rotate(135deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+        right: 0;
+        transform: rotate(315deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+        left: 50%;
+        margin-left: -10px;
+        cursor: ns-resize;
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+        top: 0;
+        transform: rotate(225deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+        bottom: 0;
+        transform: rotate(45deg);
+    }
+    .react-grid-item.react-maximize-me > .react-resizable-handle {
+        display: none;
+    }
+    ${react_resizable_css}
+`;
+const layoutClassName = "react-grid-layout";
+function GridLayout(props) {
+  const {
+    innerRef,
+    autoSize = true,
+    cols = 12,
+    className = "",
+    style = {},
+    draggableHandle = "",
+    draggableCancel = "",
+    containerPadding = null,
+    rowHeight = 150,
+    maxRows = Infinity,
+    layout = [],
+    containerMargin = [10, 10],
+    isBounded = false,
+    isDraggable = true,
+    isResizable = true,
+    allowOverlap = false,
+    useCSSTransforms = true,
+    transformScale = 1,
+    compactType = null,
+    preventCollision = false,
+    resizeHandles = ["se"],
+    resizeHandle,
+    layoutItemRender: LayoutItemRender,
+    width = 1280,
+    height = 720,
+    onLayoutChange = noop,
+    onDragStart = noop,
+    onDrag = noop,
+    onDragStop = noop,
+    onResizeStart = noop,
+    onResize = noop,
+    onResizeStop = noop,
+    maximizeId,
+    colapsedHeight = 2
+  } = props;
+  const [currentState, setCurrentState] = useState({
+    mounted: false
+  });
+  const [finalLayoutRender, setFinalLayoutRender] = useState(layout);
+  const refState = useRef({
+    layout,
+    mounted: false,
+    oldDragItem: void 0,
+    oldLayout: void 0,
+    oldResizeItem: void 0
+  });
+  useEffect(() => {
+    setCurrentState({
+      mounted: true
+    });
+  }, []);
+  useEffect(() => {
+    if (!deepEqual(finalLayoutRender, layout)) {
+      console.debug("****useEffect cambio de layout****", layout);
+      refState.current.layout = layout;
+      setFinalLayoutRender(layout);
+    } else {
+      console.debug("****useEffect cambio de layout sin cambios****");
+    }
+  }, [layout]);
+  const containerHeight = () => {
+    if (!autoSize)
+      return;
+    const nbRow = bottom(finalLayoutRender, colapsedHeight);
+    const containerPaddingY = containerPadding ? containerPadding[1] : containerMargin[1];
+    console.log("containerHeight", nbRow, containerPaddingY, containerMargin[1], rowHeight);
+    return nbRow * rowHeight + (nbRow - 1) * containerMargin[1] + containerPaddingY * 2 + "px";
+  };
+  const localOnDragStart = useCallback((i, _x, _y, gridDragEvent) => {
+    const {
+      layout: layout2
+    } = refState.current;
+    const {
+      e,
+      node
+    } = gridDragEvent;
+    const l = getLayoutItem(layout2, i);
+    if (!l)
+      return;
+    refState.current = {
+      ...refState.current,
+      oldDragItem: cloneLayoutItem(l),
+      oldLayout: [...layout2]
+    };
+    return onDragStart(layout2, l, l, void 0, e, node);
+  }, []);
+  const onLayoutMaybeChanged = useCallback((newLayout, oldLayout) => {
+    console.log("onLayoutMaybeChanged", deepEqual(oldLayout, newLayout));
+    if (!oldLayout) {
+      oldLayout = refState.current.layout;
+    }
+    setFinalLayoutRender(newLayout);
+    if (!deepEqual(oldLayout, newLayout)) {
+      onLayoutChange(newLayout);
+    }
+  }, []);
+  const localOnDrag = useCallback((i, x, y, gridDragEvent) => {
+    const {
+      oldDragItem,
+      layout: layout2
+    } = refState.current;
+    const {
+      e,
+      node
+    } = gridDragEvent;
+    const l = getLayoutItem(layout2, i);
+    if (!l)
+      return;
+    const newPlaceholder = {
+      w: l.w,
+      h: getLayoutItemH(l, colapsedHeight),
+      x: l.x,
+      y: l.y,
+      placeholder: true,
+      i
+    };
+    const isUserAction = true;
+    try {
+      let newLayout;
+      if (!l.freeMove) {
+        newLayout = moveElement(layout2, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, allowOverlap);
+      } else {
+        newLayout = cloneLayout(layout2);
+        console.log("localOnDrag", l.i, l.freeMove, x, y);
+        const nl = getLayoutItem(newLayout, i);
+        newPlaceholder.x = x;
+        newPlaceholder.y = y;
+        if (nl) {
+          nl.x = x;
+          nl.y = y;
+        }
+      }
+      onDrag(newLayout, oldDragItem, l, newPlaceholder, e, node);
+      const finalLayout = allowOverlap || l.freeMove ? newLayout : compact(newLayout, compactType, cols, colapsedHeight, allowOverlap);
+      refState.current = {
+        ...refState.current,
+        layout: finalLayout,
+        activeDrag: newPlaceholder
+      };
+      console.log(`GridLayout localOnDrag i:${i} placeHolder:{${newPlaceholder.x},${newPlaceholder.y},${newPlaceholder.w},${newPlaceholder.h}}`);
+      setCurrentState((prev) => ({
+        ...prev,
+        activeDrag: newPlaceholder
+      }));
+      setFinalLayoutRender([...finalLayout]);
+    } 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 l = getLayoutItem(layout2, i);
+    if (!l)
+      return;
+    let newLayout;
+    const isUserAction = true;
+    if (!l.freeMove) {
+      newLayout = moveElement(layout2, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, allowOverlap);
+    } else {
+      newLayout = cloneLayout(layout2);
+      const nl = getLayoutItem(newLayout, i);
+      if (nl) {
+        nl.x = x;
+        nl.y = y;
+        const index = newLayout.indexOf(nl);
+        if (index !== -1 && index !== newLayout.length - 1) {
+          newLayout.splice(index, 1);
+          newLayout.push(nl);
+        }
+      }
+    }
+    onDragStop(layout2, oldDragItem, l, void 0, e, node);
+    const finalLayout = allowOverlap ? newLayout || l.freeMove : compact(newLayout, compactType, cols, colapsedHeight, allowOverlap);
+    setCurrentState((prev) => ({
+      ...prev,
+      activeDrag: void 0
+    }));
+    console.log(`GridLayout localOnDragStop i:${i}`, finalLayout);
+    onLayoutMaybeChanged(finalLayout, oldLayout);
+    refState.current = {
+      ...refState.current,
+      layout: finalLayout,
+      oldDragItem: void 0,
+      oldLayout: void 0,
+      activeDrag: void 0
+    };
+  }, []);
+  const localOnResizeStart = useCallback((i, _w, _h, {
+    e,
+    node
+  }) => {
+    const {
+      layout: layout2
+    } = refState.current;
+    const l = getLayoutItem(layout2, i);
+    if (!l)
+      return;
+    refState.current = {
+      ...refState.current,
+      oldResizeItem: cloneLayoutItem(l),
+      oldLayout: [...refState.current.layout]
+    };
+    onResizeStart(layout2, l, l, void 0, e, node);
+  }, []);
+  const localOnResize = useCallback((i, w, h, {
+    e,
+    node
+  }) => {
+    const {
+      layout: layout2,
+      oldResizeItem
+    } = refState.current;
+    console.log("GridLayout localOnResize 1");
+    let newLayout;
+    let l;
+    if (!oldResizeItem?.freeMove) {
+      const [tempLayout, templ] = withLayoutItem(cloneLayout(layout2), i, (l2) => {
+        let hasCollisions;
+        if (preventCollision && !allowOverlap) {
+          const collisions = getAllCollisions(layout2, {
+            ...l2,
+            w,
+            h
+          }, colapsedHeight).filter((layoutItem) => layoutItem.i !== l2.i);
+          hasCollisions = collisions.length > 0;
+          if (hasCollisions) {
+            let leastX = Infinity, leastY = Infinity;
+            collisions.forEach((layoutItem) => {
+              if (layoutItem.x > l2.x)
+                leastX = Math.min(leastX, layoutItem.x);
+              if (layoutItem.y > l2.y)
+                leastY = Math.min(leastY, layoutItem.y);
+            });
+            if (Number.isFinite(leastX))
+              l2.w = leastX - l2.x;
+            if (Number.isFinite(leastY))
+              l2.h = leastY - l2.y;
+          }
+        }
+        if (!hasCollisions) {
+          l2.w = w;
+          l2.h = h;
+        }
+        return l2;
+      });
+      newLayout = tempLayout;
+      l = templ;
+    } else {
+      newLayout = cloneLayout(layout2);
+      l = getLayoutItem(newLayout, i);
+      if (l) {
+        l.w = w;
+        l.h = h;
+      }
+    }
+    if (!l)
+      return;
+    console.log(`GridLayout localOnResize i:${l.i} {x,y,w,h}:{${l.x},${l.y},${l.w},${l.h}}`);
+    const newPlaceholder = {
+      w: l.w,
+      h: l.h,
+      x: l.x,
+      y: l.y,
+      static: true,
+      i
+    };
+    try {
+      const finalLayout = allowOverlap || l.freeMove ? newLayout : compact(newLayout, compactType, cols, colapsedHeight, allowOverlap);
+      refState.current = {
+        ...refState.current,
+        layout: finalLayout,
+        activeDrag: newPlaceholder
+      };
+      setFinalLayoutRender(finalLayout);
+      setCurrentState((prev) => ({
+        ...prev,
+        activeDrag: newPlaceholder
+      }));
+      onResize(newLayout, oldResizeItem, l, newPlaceholder, e, node);
+    } catch (error) {
+      console.log("GridLayout localOnResize capturado");
+    }
+  }, []);
+  const localOnResizeStop = useCallback((i, _w, _h, {
+    e,
+    node
+  }) => {
+    const {
+      layout: layout2,
+      oldResizeItem,
+      oldLayout
+    } = refState.current;
+    const l = getLayoutItem(layout2, i);
+    if (l) {
+      onResizeStop(layout2, oldResizeItem, l, void 0, e, node);
+    }
+    console.log("GridLayout localOnResizeStop 1");
+    const finalLayout = allowOverlap || l?.freeMove ? layout2 : compact(layout2, compactType, cols, colapsedHeight, allowOverlap);
+    if (l && l?.freeMove) {
+      const index = finalLayout.indexOf(l);
+      if (index !== -1 && index !== finalLayout.length - 1) {
+        finalLayout.splice(index, 1);
+        finalLayout.push(l);
+      }
+    }
+    refState.current = {
+      ...refState.current,
+      layout: [...finalLayout],
+      oldResizeItem: void 0,
+      oldLayout: void 0,
+      activeDrag: void 0
+    };
+    console.log("GridLayout localOnResizeStop 2");
+    setCurrentState((prev) => ({
+      ...prev,
+      activeDrag: void 0
+    }));
+    console.log("GridLayout localOnResizeStop 3");
+    onLayoutMaybeChanged(finalLayout, oldLayout);
+    console.log("GridLayout localOnResizeStop 4");
+  }, []);
+  const localFreeMoveOnClick = useCallback((i) => {
+    const {
+      layout: layout2
+    } = refState.current;
+    let l = getLayoutItem(layout2, i);
+    if (l && l?.freeMove) {
+      const index = layout2.indexOf(l);
+      if (index !== -1 && index !== layout2.length - 1) {
+        const newLayout = cloneLayout(layout2);
+        console.debug("GridLalocalFreeMoveOnClick");
+        l = getLayoutItem(newLayout, i);
+        if (l) {
+          newLayout.splice(index, 1);
+          newLayout.push(l);
+          refState.current = {
+            ...refState.current,
+            layout: newLayout
+          };
+          setFinalLayoutRender(newLayout);
+          onLayoutChange(newLayout);
+        }
+      }
+    }
+  }, []);
+  const placeholder = () => {
+    const {
+      activeDrag
+    } = currentState;
+    if (!activeDrag)
+      return null;
+    return /* @__PURE__ */ jsx(MemonizedGridItem, {
+      type: "placeholder",
+      layoutItemRender: LayoutItemRender,
+      w: activeDrag.w,
+      h: activeDrag.h,
+      x: activeDrag.x,
+      y: activeDrag.y,
+      i: activeDrag.i,
+      className: "react-grid-placeholder",
+      containerWidth: width,
+      containerHeight: height,
+      cols,
+      margin: containerMargin,
+      containerPadding: containerPadding || containerMargin,
+      maxRows,
+      rowHeight,
+      isDraggable: false,
+      isResizable: false,
+      isBounded: false,
+      useCSSTransforms,
+      transformScale,
+      cancel: "",
+      handle: "",
+      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";
+    return /* @__PURE__ */ jsx(MemonizedGridItem, {
+      type: "layoutItem",
+      layoutItemRender: LayoutItemRender,
+      containerWidth: width,
+      containerHeight: height,
+      cols,
+      margin: containerMargin,
+      containerPadding: containerPadding || containerMargin,
+      maxRows,
+      rowHeight,
+      cancel: draggableCancel,
+      handle: draggableHandle,
+      onDragStart: localOnDragStart,
+      onDrag: localOnDrag,
+      onDragStop: localOnDragStop,
+      onResizeStart: localOnResizeStart,
+      onResize: localOnResize,
+      onResizeStop: localOnResizeStop,
+      onFreeMoveClick: localFreeMoveOnClick,
+      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,
+      colapsed: l.colapsed,
+      colapsedHeight
+    }, l.i);
+  }, [width, height, cols, containerMargin, containerPadding, maxRows, rowHeight, draggableCancel, draggableHandle, isDraggable, isResizable, isBounded, useCSSTransforms, transformScale, resizeHandles, resizeHandle, maximizeId]);
+  const mergedStyle = {
+    height: containerHeight(),
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(GridLayoutRoot, {
+    className: clsx(layoutClassName, className),
+    style: mergedStyle,
+    ref: innerRef,
+    children: [finalLayoutRender.map((li) => processGridItem(li, !!currentState.mounted)), placeholder()]
+  });
+}
+export {
+  GridLayout as G,
+  cloneLayout as a,
+  compact as b,
+  cloneLayoutItem as c,
+  correctBounds as d,
+  noop as n
+};