@m4l/components 3.1.9 → 4.0.0

package/components/GridLayout/GridLayout-CYwAPA42.js

@@ -0,0 +1,534 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+import clsx from "clsx";
+import { 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, n as noop, f as getAllCollisions } from "./utils-CF3BArf2.js";
+import { M as MemonizedGridItem } from "./subcomponents/GridItem/index-B2wGJ3pz.js";
+import { G as GridLayoutRoot } from "./styles-BqM7s5fd.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-BOQgOrZA.js";
+import { g as gridLayoutClasses } from "./classes/index-qNqBA3Jg.js";
+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 {
+  GridLayout as G
+};

package/components/GridLayout/calculateUtils-wGPJ2spi.js

@@ -0,0 +1,71 @@
+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);
+}
+export {
+  calcGridItemWHPx as a,
+  calcGridColWidth as b,
+  calcXY as c,
+  calcWH as d,
+  clamp as e,
+  calcGridItemPosition as f
+};

package/components/GridLayout/classes/index-qNqBA3Jg.js

@@ -0,0 +1,24 @@
+import { generateUtilityClasses } from "@mui/material";
+import "@mui/base";
+import { C as COMPONENT_CLASS_NAME } from "../constants-BOQgOrZA.js";
+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"
+]);
+export {
+  gridLayoutClasses as g
+};

package/components/GridLayout/constants-BOQgOrZA.js

@@ -0,0 +1,26 @@
+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;
+export {
+  COMPONENT_CLASS_NAME as C,
+  DEFAULT_COLS as D,
+  THROTTLE_RESIZE_TIMEOUT as T,
+  DEFAULT_CONTAINER_PADDING as a,
+  DEFAULT_MARGIN as b,
+  DEFAULT_ROW_HEIGHT as c,
+  DEFAULT_COLAPSED_HEIGHT as d,
+  DEFAULT_CONTAINER_WIDTH as e,
+  DEFAULT_CONTAINER_HEIGHT as f,
+  DEFAULT_TRANSFORM_SCALE as g,
+  DEFAULT_RESPONSIVE_BREAKPOINTS as h,
+  DEFAULT_RESPONSIVE_COLS as i
+};

package/components/GridLayout/index-l0sNRNKZ.js

@@ -0,0 +1 @@
+