@m4l/components 9.4.28 → 9.4.29-beta.1

package/components/GridLayout/GridLayout.js

@@ -1,441 +1,298 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState, useRef, useEffect, useCallback } from "react";
-import clsx from "clsx";
-import { n as noop, i as isEqualLayout, c as cloneLayout, g as getLayoutItem, a as cloneLayoutItem, b as getLayoutItemH, m as moveElement, d as compact, w as withLayoutItem, e as bottom, f as getAllCollisions } from "./utils.js";
-import { M as MemonizedGridItem } from "./subcomponents/GridItem/index.js";
-import { G as GridLayoutRoot } from "./styles.js";
-import { D as DEFAULT_COLS, a as DEFAULT_CONTAINER_PADDING, b as DEFAULT_MARGIN, c as DEFAULT_ROW_HEIGHT, d as DEFAULT_COLAPSED_HEIGHT, e as DEFAULT_CONTAINER_WIDTH, f as DEFAULT_CONTAINER_HEIGHT, g as DEFAULT_TRANSFORM_SCALE } from "./constants.js";
-import { g as gridLayoutClasses } from "./classes/index.js";
-import { useForkRef } from "@mui/material/utils";
-const GridLayout = forwardRef((props, ref) => {
+import { jsx as se, jsxs as Ee } from "@emotion/react/jsx-runtime";
+import { forwardRef as Pe, useMemo as Ue, useState as b, useRef as Ge, useEffect as j, useCallback as m } from "react";
+import We from "clsx";
+import { noop as z, isEqualLayout as ce, cloneLayout as _, getLayoutItem as H, cloneLayoutItem as le, getLayoutItemH as ke, moveElement as ue, compact as Y, withLayoutItem as Be, bottom as je, getAllCollisions as Ye } from "./utils.js";
+import { MemonizedGridItem as de } from "./subcomponents/GridItem/index.js";
+import { GridLayoutRoot as qe } from "./styles.js";
+import { DEFAULT_COLS as Xe, DEFAULT_CONTAINER_PADDING as Je, DEFAULT_MARGIN as Ke, DEFAULT_ROW_HEIGHT as Qe, DEFAULT_COLAPSED_HEIGHT as Ve, DEFAULT_CONTAINER_WIDTH as Ze, DEFAULT_CONTAINER_HEIGHT as $e, DEFAULT_TRANSFORM_SCALE as et } from "./constants.js";
+import { gridLayoutClasses as fe } from "./classes/index.js";
+import { useForkRef as tt } from "@mui/material/utils";
+const ft = Pe((me, ye) => {
   const {
-    layoutItemRender,
-    innerRef,
+    layoutItemRender: q,
+    innerRef: ge,
     //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,
+    autoSize: X = !0,
+    cols: g = Xe,
+    containerPadding: D = Je,
+    margin: v = Ke,
+    rowHeight: p = Qe,
+    colapsedHeight: x = Ve,
+    containerWidth: F = Ze,
+    containerHeight: N = $e,
+    transformScale: E = et,
+    className: pe = "",
+    style: he = {},
+    draggableHandle: J = "",
+    draggableCancel: K = "",
+    maxRows: P = 1 / 0,
     // 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,
-    children
-  } = props;
-  const allRefs = useForkRef(ref, innerRef);
-  const memoizedChildren = useMemo(() => children, [children]);
-  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,
+    layout: I = [],
+    isBounded: Q = !1,
+    isDraggable: V = !0,
+    isResizable: Z = !0,
+    allowOverlap: y = !1,
+    useCSSTransforms: U = !0,
+    compactType: S = "vertical",
+    preventCollision: G = !1,
+    resizeHandles: $ = ["se"],
+    resizeHandle: ee,
+    maximizeId: W,
+    onLayoutChange: ve = z,
+    onDragStart: xe = z,
+    onDrag: ze = z,
+    onDragStop: He = z,
+    onResizeStart: De = z,
+    onResize: Ie = z,
+    onResizeStop: Re = z,
+    children: te
+  } = me, we = tt(ye, ge), Se = Ue(() => te, [te]), [oe, C] = b({
+    mounted: !1
+  }), [re, Ce] = b(0), [M, A] = b(I), [L, ne] = b(() => I.filter((e) => e.freeMove).map((e) => e.i)), t = Ge({
+    layout: I,
     oldDragItem: void 0,
     oldLayout: void 0,
     oldResizeItem: void 0,
-    zIndexes,
-    colapsedHeight,
-    rowHeight
+    zIndexes: L,
+    colapsedHeight: x,
+    rowHeight: p
   });
-  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);
-        }
+  t.current.colapsedHeight = x, t.current.rowHeight = p, j(() => {
+    C({ mounted: !0 });
+  }, []), j(() => {
+    re > 0 && ve(t.current.layout);
+  }, [re]), j(() => {
+    if (!ce(M, I)) {
+      const e = _(I), n = [...L];
+      for (let s = 0; s < e.length; s++) {
+        const r = e[s];
+        r.freeMove && n.indexOf(r.i) === -1 && n.push(r.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);
+      t.current.layout = e, A(e), n.length !== L.length && (ne(n), t.current.zIndexes = n);
     }
-  }, []);
-  const localOnDragStart = useCallback(
-    (i, _x, _y, gridDragEvent) => {
-      const { layout: layoutCurrent } = refState.current;
-      const { e, node } = gridDragEvent;
-      const li = getLayoutItem(layoutCurrent, i);
-      if (!li) {
-        return;
-      }
-      refState.current = {
-        ...refState.current,
-        oldDragItem: cloneLayoutItem(li),
-        oldLayout: layoutCurrent
-        //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(layoutCurrent, li, li, void 0, e, node);
+  }, [I]);
+  const ae = m((e, n) => {
+    n || (n = t.current.layout), ce(n, e) || Ce((s) => s + 1);
+  }, []), Le = m(
+    (e, n, s, r) => {
+      const { layout: l } = t.current, { e: i, node: c } = r, a = H(l, e);
+      if (a)
+        return t.current = {
+          ...t.current,
+          oldDragItem: le(a),
+          oldLayout: l
+          //Punto de arranque, layout actual
+        }, a && a.freeMove && k(a.i, "onDragStart"), r.e.type !== "touchmove" && r.e.preventDefault(), r.e.stopPropagation(), xe(l, a, a, void 0, i, c);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  );
-  const localOnDrag = useCallback(
-    (i, x, y, gridDragEvent) => {
-      const { oldDragItem, layout: layoutCurrent } = refState.current;
-      const { e, node } = gridDragEvent;
-      const li = getLayoutItem(layoutCurrent, i);
-      if (!li) {
+  ), _e = m(
+    (e, n, s, r) => {
+      const { oldDragItem: l, layout: i } = t.current, { e: c, node: a } = r, o = H(i, e);
+      if (!o)
         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;
+      const u = {
+        w: o.w,
+        h: ke(o, t.current.colapsedHeight, t.current.rowHeight),
+        x: o.x,
+        y: o.y,
+        placeholder: !0,
+        i: e
+      }, h = !0;
       try {
-        let newLayout;
-        if (!li.freeMove) {
-          newLayout = moveElement(
-            layoutCurrent,
-            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(layoutCurrent);
-        }
-        const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(
-          newLayout,
-          compactType,
-          cols,
-          refState.current.colapsedHeight,
-          refState.current.rowHeight,
-          allowOverlap
+        let d;
+        o.freeMove ? (o.x = n, o.y = s, u.x = n, u.y = s, d = _(i)) : d = ue(
+          i,
+          o,
+          n,
+          s,
+          h,
+          G,
+          S,
+          g,
+          t.current.colapsedHeight,
+          t.current.rowHeight,
+          y
         );
-        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 (_e) {
+        const R = y || o.freeMove ? d : Y(
+          d,
+          S,
+          g,
+          t.current.colapsedHeight,
+          t.current.rowHeight,
+          y
+        );
+        t.current = {
+          ...t.current,
+          layout: R,
+          activeDrag: u
+        }, C((f) => ({
+          ...f,
+          activeDrag: u
+        })), A(R), r.e.type !== "touchmove" && r.e.preventDefault(), r.e.stopPropagation(), ze(d, l, o, u, c, a);
+      } catch {
         console.warn("GridLayout error capturado");
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  );
-  const localOnDragStop = useCallback(
-    (i, x, y, { e, node }) => {
-      if (!refState.current.activeDrag) {
+  ), Me = m(
+    (e, n, s, { e: r, node: l }) => {
+      if (!t.current.activeDrag)
         return;
-      }
-      const { oldDragItem, layout: layoutCurrent, oldLayout } = refState.current;
-      const li = getLayoutItem(layoutCurrent, i);
-      if (!li) {
+      const { oldDragItem: i, layout: c, oldLayout: a } = t.current, o = H(c, e);
+      if (!o)
         return;
-      }
-      let newLayout;
-      const isUserAction = true;
-      if (!li.freeMove) {
-        newLayout = moveElement(
-          layoutCurrent,
-          li,
-          x,
-          y,
-          isUserAction,
-          preventCollision,
-          compactType,
-          cols,
-          refState.current.colapsedHeight,
-          refState.current.rowHeight,
-          allowOverlap
-        );
-      } else {
-        li.x = x;
-        li.y = y;
-        newLayout = cloneLayout(layoutCurrent);
-      }
-      const finalLayout = allowOverlap ? newLayout || li.freeMove : compact(
-        newLayout,
-        compactType,
-        cols,
-        refState.current.colapsedHeight,
-        refState.current.rowHeight,
-        allowOverlap
+      let u;
+      o.freeMove ? (o.x = n, o.y = s, u = _(c)) : u = ue(
+        c,
+        o,
+        n,
+        s,
+        !0,
+        G,
+        S,
+        g,
+        t.current.colapsedHeight,
+        t.current.rowHeight,
+        y
       );
-      setCurrentState((prev) => ({
-        ...prev,
+      const d = y ? u || o.freeMove : Y(
+        u,
+        S,
+        g,
+        t.current.colapsedHeight,
+        t.current.rowHeight,
+        y
+      );
+      C((R) => ({
+        ...R,
         activeDrag: void 0
-      }));
-      setFinalLayoutRender(finalLayout);
-      refState.current = {
-        ...refState.current,
-        layout: finalLayout,
+      })), A(d), t.current = {
+        ...t.current,
+        layout: d,
         oldDragItem: void 0,
         oldLayout: void 0,
         activeDrag: void 0
-      };
-      if (e.type !== "touchmove") {
-        e.preventDefault();
-      }
-      e.stopPropagation();
-      onLayoutMaybeChanged(finalLayout, oldLayout);
-      onDragStop(layoutCurrent, oldDragItem, li, void 0, e, node);
+      }, r.type !== "touchmove" && r.preventDefault(), r.stopPropagation(), ae(d, a), He(c, i, o, void 0, r, l);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  );
-  const localOnResizeStart = useCallback(
-    (i, _w, _h, { e, node }) => {
-      const { layout: layoutCurrent } = refState.current;
-      const li = getLayoutItem(layoutCurrent, i);
-      if (!li) {
-        return;
-      }
-      refState.current = {
-        ...refState.current,
-        oldResizeItem: cloneLayoutItem(li),
-        oldLayout: refState.current.layout
+  ), Ae = m(
+    (e, n, s, { e: r, node: l }) => {
+      const { layout: i } = t.current, c = H(i, e);
+      c && (t.current = {
+        ...t.current,
+        oldResizeItem: le(c),
+        oldLayout: t.current.layout
         //Punto de arranque, layout actual
-      };
-      onResizeStart(layoutCurrent, li, li, void 0, e, node);
-      if (li && li.freeMove) {
-        onClickSetOnTopFreeMove(li.i, "onResizeStart");
-      }
+      }, De(i, c, c, void 0, r, l), c && c.freeMove && k(c.i, "onResizeStart"));
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  );
-  const localOnResize = useCallback(
-    (i, w, h, { e, node }) => {
-      const { layout: layoutCurrent, oldResizeItem } = refState.current;
-      let newLayout;
-      let li;
-      if (!oldResizeItem?.freeMove) {
-        const cb = (cbLi) => {
-          let hasCollisions;
-          if (preventCollision && !allowOverlap) {
-            const collisions = getAllCollisions(
-              layoutCurrent,
-              { ...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;
-              }
+  ), Oe = m(
+    (e, n, s, { e: r, node: l }) => {
+      const { layout: i, oldResizeItem: c } = t.current;
+      let a, o;
+      if (c?.freeMove)
+        a = _(i), o = H(a, e), o && (o.w = n, o.h = s);
+      else {
+        const h = (f) => {
+          let B;
+          if (G && !y) {
+            const ie = Ye(
+              i,
+              { ...f, w: n, h: s },
+              t.current.colapsedHeight,
+              t.current.rowHeight
+            ).filter((w) => w.i !== f.i);
+            if (B = ie.length > 0, B) {
+              let w = 1 / 0, O = 1 / 0;
+              ie.forEach((T) => {
+                T.x > f.x && (w = Math.min(w, T.x)), T.y > f.y && (O = Math.min(O, T.y));
+              }), Number.isFinite(w) && (f.w = w - f.x), Number.isFinite(O) && (f.h = O - f.y);
             }
           }
-          if (!hasCollisions) {
-            cbLi.w = w;
-            cbLi.h = h;
-          }
-          return cbLi;
-        };
-        const [tempLayout, tempLi] = withLayoutItem(cloneLayout(layoutCurrent), i, cb);
-        newLayout = tempLayout;
-        li = tempLi;
-      } else {
-        newLayout = cloneLayout(layoutCurrent);
-        li = getLayoutItem(newLayout, i);
-        if (li) {
-          li.w = w;
-          li.h = h;
-        }
+          return B || (f.w = n, f.h = s), f;
+        }, [d, R] = Be(_(i), e, h);
+        a = d, o = R;
       }
-      if (!li) {
+      if (!o)
         return;
-      }
-      const newPlaceholder = {
-        w: li.w,
-        h: li.h,
-        x: li.x,
-        y: li.y,
-        static: true,
-        i
+      const u = {
+        w: o.w,
+        h: o.h,
+        x: o.x,
+        y: o.y,
+        static: !0,
+        i: e
       };
       try {
-        const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(
-          newLayout,
-          compactType,
-          cols,
-          refState.current.colapsedHeight,
-          refState.current.rowHeight,
-          allowOverlap
+        const h = y || o.freeMove ? a : Y(
+          a,
+          S,
+          g,
+          t.current.colapsedHeight,
+          t.current.rowHeight,
+          y
         );
-        refState.current = {
-          ...refState.current,
-          layout: finalLayout,
-          activeDrag: newPlaceholder
-        };
-        setFinalLayoutRender(finalLayout);
-        setCurrentState((prev) => ({ ...prev, activeDrag: newPlaceholder }));
-        onResize(newLayout, oldResizeItem, li, newPlaceholder, e, node);
-      } catch (_e) {
+        t.current = {
+          ...t.current,
+          layout: h,
+          activeDrag: u
+        }, A(h), C((d) => ({ ...d, activeDrag: u })), Ie(a, c, o, u, r, l);
+      } catch {
       }
-      if (e.type !== "touchmove") {
-        e.preventDefault();
-      }
-      e.stopPropagation();
+      r.type !== "touchmove" && r.preventDefault(), r.stopPropagation();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  );
-  const localOnResizeStop = useCallback(
-    (i, _w, _h, { e, node }) => {
-      if (!refState.current.activeDrag) {
+  ), Te = m(
+    (e, n, s, { e: r, node: l }) => {
+      if (!t.current.activeDrag)
         return;
-      }
-      const { layout: layoutCurrent, oldResizeItem, oldLayout } = refState.current;
-      const l = getLayoutItem(layoutCurrent, i);
-      refState.current = {
-        ...refState.current,
+      const { layout: i, oldResizeItem: c, oldLayout: a } = t.current, o = H(i, e);
+      t.current = {
+        ...t.current,
         // layout: finalLayout,
         oldResizeItem: void 0,
         oldLayout: void 0,
         activeDrag: void 0
-      };
-      setCurrentState((prev) => ({ ...prev, activeDrag: void 0 }));
-      onLayoutMaybeChanged(layoutCurrent, oldLayout);
-      if (l) {
-        onResizeStop(layoutCurrent, oldResizeItem, l, void 0, e, node);
-      }
+      }, C((u) => ({ ...u, activeDrag: void 0 })), ae(i, a), o && Re(i, c, o, void 0, r, l);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  );
-  const onClickSetOnTopFreeMove = useCallback((i, _source) => {
-    const { layout: layoutCurrent } = refState.current;
-    const index = refState.current.zIndexes.indexOf(i);
-    const l = getLayoutItem(layoutCurrent, 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;
+  ), k = m((e, n) => {
+    const { layout: s } = t.current, r = t.current.zIndexes.indexOf(e), l = H(s, e);
+    if (l && l?.freeMove && (r !== t.current.zIndexes.length - 1 || r === -1)) {
+      const i = [...t.current.zIndexes];
+      r !== -1 && i.splice(r, 1), i.push(e), t.current.zIndexes = i, ne(i);
     }
-    return /* @__PURE__ */ jsx(
-      MemonizedGridItem,
+  }, []), be = () => {
+    const { activeDrag: e } = oe;
+    return e ? /* @__PURE__ */ se(
+      de,
       {
         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,
+        layoutItemRender: q,
+        w: e.w,
+        h: e.h,
+        x: e.x,
+        y: e.y,
+        i: e.i,
+        className: fe.gridItemPlaceholder,
+        containerWidth: F,
+        containerHeight: N,
+        cols: g,
+        margin: v,
+        containerPadding: D,
+        maxRows: P,
+        rowHeight: p,
+        isDraggable: !1,
+        isResizable: !1,
+        isBounded: !1,
+        useCSSTransforms: U,
+        transformScale: E,
         draggableCancel: "",
         draggableHandle: "",
         minW: 0,
@@ -443,126 +300,109 @@ const GridLayout = forwardRef((props, ref) => {
         minH: 0,
         maxH: 0,
         maximize: "none",
-        colapsed: activeDrag.colapsed,
-        colapsedHeight
+        colapsed: e.colapsed,
+        colapsedHeight: x
       }
-    );
-  };
-  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 newStyle;
-      if (l.freeMove) {
-        zIndex = zIndexes.indexOf(l.i);
-        if (zIndex !== -1) {
-          zIndex = zIndex + 1;
-          newStyle = { zIndex };
-        }
-      }
-      return /* @__PURE__ */ jsx(
-        MemonizedGridItem,
+    ) : null;
+  }, Fe = m(
+    (e, n) => {
+      const s = typeof e.isDraggable == "boolean" ? e.isDraggable : !e.static && V, r = typeof e.isResizable == "boolean" ? e.isResizable : !e.static && Z, l = e.resizeHandles || $, i = s && Q && e.isBounded !== !1, c = W ? W === e.i ? "maximize_me" : "maximize_other" : "none";
+      let a, o;
+      return e.freeMove && (a = L.indexOf(e.i), a !== -1 && (a = a + 1, o = { zIndex: a })), /* @__PURE__ */ se(
+        de,
         {
           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: newStyle
+          layoutItemRender: q,
+          containerWidth: F,
+          containerHeight: N,
+          cols: g,
+          margin: v,
+          containerPadding: D || v,
+          maxRows: P,
+          rowHeight: p,
+          draggableCancel: K,
+          draggableHandle: J,
+          onDragStart: Le,
+          onDrag: _e,
+          onDragStop: Me,
+          onResizeStart: Ae,
+          onResize: Oe,
+          onResizeStop: Te,
+          onFreeMoveClick: e.freeMove ? k : void 0,
+          isDraggable: s,
+          isResizable: r,
+          isBounded: i,
+          useCSSTransforms: U && n,
+          usePercentages: !n,
+          transformScale: E,
+          w: e.w,
+          h: e.h,
+          x: e.x,
+          y: e.y,
+          i: e.i,
+          minH: e.minH,
+          minW: e.minW,
+          maxH: e.maxH,
+          maxW: e.maxW,
+          static: e.static,
+          resizeHandles: l,
+          resizeHandle: ee,
+          maximize: c,
+          freeMove: e.freeMove,
+          colapsed: e.colapsed,
+          visible: e.visible,
+          colapsedHeight: x,
+          style: o
         },
-        l.i
+        e.i
       );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
-      containerWidth,
-      containerHeight,
-      cols,
-      margin,
-      containerPadding,
-      maxRows,
-      rowHeight,
-      draggableCancel,
-      draggableHandle,
-      isDraggable,
-      isResizable,
-      isBounded,
-      useCSSTransforms,
-      transformScale,
-      resizeHandles,
-      resizeHandle,
-      maximizeId,
-      zIndexes,
-      colapsedHeight,
-      rowHeight
+      F,
+      N,
+      g,
+      v,
+      D,
+      P,
+      p,
+      K,
+      J,
+      V,
+      Z,
+      Q,
+      U,
+      E,
+      $,
+      ee,
+      W,
+      L,
+      x,
+      p
     ]
-  );
-  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
+  ), Ne = {
+    height: m(() => {
+      if (!X)
+        return;
+      const e = je(M, x, p), n = D ? D[1] : v[1];
+      return e * p + (e - 1) * v[1] + n * 2 + "px";
+    }, [X, D, v, M, x])(),
+    ...he
   };
-  return /* @__PURE__ */ jsxs(
-    GridLayoutRoot,
+  return /* @__PURE__ */ Ee(
+    qe,
     {
-      className: clsx(gridLayoutClasses.root, className),
-      style: mergedStyle,
-      ref: allRefs,
+      className: We(fe.root, pe),
+      style: Ne,
+      ref: we,
       children: [
-        memoizedChildren,
-        finalLayoutRender.map((li) => processGridItem(li, !!currentState.mounted)),
-        placeholder()
+        Se,
+        M.map((e) => Fe(e, !!oe.mounted)),
+        be()
       ]
     }
   );
 });
 export {
-  GridLayout as G
+  ft as GridLayout
 };