@m4l/components 5.0.0 → 5.0.2

package/components/GridLayout/styles-BqM7s5fd.js

@@ -1,163 +0,0 @@
-import { styled, alpha } from "@mui/material/styles";
-import { g as gridLayoutClasses } from "./classes/index-qNqBA3Jg.js";
-const react_resizable_css = {};
-const GridLayoutRoot = styled("div")`
-  overflow: auto;
-  position: relative;
-  transition: height 200ms ease;
-
-  .${gridLayoutClasses.gridItemRoot} {
-    transition: all 200ms ease;
-    transition-property: left, top;
-  }
-  .${gridLayoutClasses.gridItemRoot} img {
-    pointer-events: none;
-    user-select: none;
-  }
-  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.cssTransforms} {
-    transition-property: transform;
-    transition: left 0.1s ease, top 0.1s ease;
-  }
-  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.maximizeOther} {
-    display: none;
-  }
-
-  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemFreeMove} {
-    z-index: 1;
-    will-change: width, height;
-  }
-  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.resizing} {
-    z-index: 2000;
-    will-change: width, height;
-  }
-
-  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.dragging} {
-    transition: none;
-    z-index: 4000;
-    will-change: transform;
-  }
-
-  .${gridLayoutClasses.gridItemRoot}.dropping {
-    visibility: hidden;
-  }
-
-  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemPlaceholder} {
-    background: ${(props) => props.theme.vars.palette.primary?.toneOpacity};
-    opacity: 0.5;
-    transition-duration: 100ms;
-    z-index: 3000;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-  }
-
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle {
-    position: absolute;
-    width: 7px;
-    height: 7px;
-    background-image: unset;
-
-    & .M4LIcon-icon {
-      width: 10px;
-      height: 10px;
-      min-width: 10px;
-      min-height: 10px;
-      background-color: ${(props) => alpha(props.theme.colorSchemes.finalTheme.palette.text.primary, 0.3)};
-    }
-  }
-
-  /*  .${gridLayoutClasses.gridItemRoot} > .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;
-    border-color: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
-  }
-
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-sw {
-    bottom: 3px;
-    left: 3px;
-    cursor: sw-resize;
-    transform: rotate(90deg);
-    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
-    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
-    border-bottom-right-radius: 15%;
-  }
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-se {
-    bottom: 3px;
-    right: 3px;
-    cursor: se-resize;
-    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
-    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
-    border-bottom-right-radius: 15%;
-  }
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-nw {
-    top: 3px;
-    left: 3px;
-    cursor: nw-resize;
-    transform: rotate(180deg);
-    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
-    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
-    border-bottom-right-radius: 15%;
-  }
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-ne {
-    top: 3px;
-    right: 3px;
-    cursor: ne-resize;
-    transform: rotate(270deg);
-    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
-    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
-    border-bottom-right-radius: 15%;
-  }
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-w,
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-e {
-    top: 50%;
-    margin-top: -10px;
-    cursor: ew-resize;
-  }
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-w {
-    left: 0;
-    transform: rotate(135deg);
-  }
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-e {
-    right: 0;
-    transform: rotate(315deg);
-  }
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-n,
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-s {
-    left: 50%;
-    margin-left: -10px;
-    cursor: ns-resize;
-  }
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-n {
-    top: 0;
-    transform: rotate(225deg);
-  }
-  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-s {
-    bottom: 0;
-    transform: rotate(45deg);
-  }
-  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.maximizeMe} > .react-resizable-handle,
-  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.resizeHide} > .react-resizable-handle {
-    display: none;
-  }
-  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.invisible} {
-    display: none;
-  }
-
-  ${react_resizable_css}
-  ${(props) => props.theme.components?.M4LGridLayout?.styleOverrides}
-`;
-export {
-  GridLayoutRoot as G
-};

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

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

package/components/GridLayout/subcomponents/Responsive/helper-6U-MAGmf.js

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