@m4l/components 0.1.76 → 0.1.78

package/components/DynamicFilter/{index.d7c03a61.js → index.d1a2e2d1.js}

@@ -4,60 +4,62 @@ import { useContext, useMemo, useEffect, createContext, useRef, createElement, u
 import clsx from "clsx";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
 import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
-import { I as IconButton } from "../mui_extended/IconButton/index.1a9d4fa5.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.12f1a3c3.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { g as getNameDataTestId } from "../../vendor.e353394b.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { generateUtilityClasses, alpha, styled as styled$1, Skeleton, MenuItem } from "@mui/material";
-import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.ba1da3b3.js";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.43a2e1ae.js";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
-import { I as Icon } from "../Icon/index.9dae8337.js";
+import { I as Icon } from "../Icon/index.9fcd1476.js";
 import { styled, useTheme } from "@mui/material/styles";
 import { R as RHFormProvider } from "../../contexts/RHFormContext/index.fe175bab.js";
-import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.e376a68e.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.453c2d24.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.c653a266.js";
+import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.52125041.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.d536ccfa.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.aa1648eb.js";
 import { useFormContext, useWatch } from "react-hook-form";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.fdb5dcbd.js";
-import "../../contexts/ModalContext/index.699f95fa.js";
-import "../../react-draggable.6d7949a3.js";
-import "../ModalDialog/index.d9c5d400.js";
-import "../Resizeable/index.f6e48e56.js";
-import "../modal/index.1b25b61d.js";
+import "../mui_extended/Button/index.4288f9fc.js";
+import "../../contexts/ModalContext/index.e9a7ba4a.js";
+import "../../react-draggable.7abb5d0a.js";
+import "../Resizeable/index.9a9c79a4.js";
+import "../modal/index.00efea85.js";
 import "../Image/index.c18ebf5a.js";
-import "../mui_extended/Accordion/index.3faafd8b.js";
+import "../mui_extended/Accordion/index.9877f7bf.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
+import "../mui_extended/Badge/index.8c2b8b66.js";
 import "@mui/lab";
-import "../mui_extended/Pager/index.67bda2c5.js";
-import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Pager/index.2f6d6d7d.js";
+import "../mui_extended/Tab/index.7c82e43d.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { useStore, createStore } from "zustand";
-import "../areas/contexts/AreasContext/index.f0397b7c.js";
-import "../areas/components/AreasAdmin/index.946eebb9.js";
-import "../areas/components/AreasViewer/index.bf4191ea.js";
-import "../LinearProgressIndeterminate/index.d34d398f.js";
+import "../areas/contexts/AreasContext/index.02c4e7be.js";
+import "../areas/components/AreasAdmin/index.43ecd998.js";
+import "../areas/components/AreasViewer/index.14e62059.js";
+import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.008b4c2a.js";
+import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.c43a95f4.js";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.a063dc44.js";
+import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.6aa51705.js";
 import "lodash/debounce";
-import "../hook-form/RHFAutocompleteAsync/index.ddfd9cc9.js";
-import "../hook-form/RHFCheckbox/index.7e7f220b.js";
-import "../HelperText/index.9864f773.js";
+import "../hook-form/RHFAutocompleteAsync/index.1a3dfe5f.js";
+import "../hook-form/RHFCheckbox/index.a08a65b3.js";
+import "../HelperText/index.a019742c.js";
 import "@mui/x-date-pickers";
-import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.d330709b.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.e5336d09.js";
-import "../hook-form/RHFPeriod/index.e2b1293b.js";
-import "../Period/index.526791a3.js";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.4d671108.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.9004e898.js";
+import "../hook-form/RHFPeriod/index.39b4be49.js";
+import "../Period/index.7b94c418.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../hook-form/RHFUpload/index.17e7f9eb.js";
+import "../hook-form/RHFUpload/index.bed8573e.js";
 import * as Yup from "yup";
+const COMPONENT_PREFIX = "m4l-dynamic-filter";
 const COMPONENT_CLASS_NAME = "M4LDynamicFilter";
 const ASSETS_URL = "frontend/components/dynamic_filter/assets/icons";
 const ASSETS = {
@@ -149,12 +151,6 @@ function useDynamicFilter(selector, equalityFn) {
     throw new Error("useDynamicFilterStore context must be use inside DynamicFilterContext");
   return useStore(store, selector, equalityFn);
 }
-const DYNAMICFILTER_TEST_ID = "m4ldynamicfilter";
-const PREFIX_TEST_ATTRIBUTE = "data-test";
-const TEST_PROP_FIELDS = `${PREFIX_TEST_ATTRIBUTE}-${DYNAMICFILTER_TEST_ID}-fields`;
-function getTestIdByClass(key, detailId) {
-  return `${DYNAMICFILTER_TEST_ID}-${key}` + (detailId ? "-" + detailId : "");
-}
 const DYNAMICFILTER_DICTIONARY_ID = "dynamic_filter";
 function getDynamicFilterComponentsDictionary() {
   return [DYNAMICFILTER_DICTIONARY_ID].concat(getCommonActionsDictionary());
@@ -191,6 +187,7 @@ const getDynamicFilterDictionary = (key) => {
 };
 function BooleanFilter() {
   const classesContainerBooleanFilter = useDynamicFilter((state) => state.classes.containerBooleanFilter);
+  const dataTestId = useDynamicFilter((state) => state.classes.containerBooleanFilter);
   const {
     getLabel
   } = useModuleDictionary();
@@ -207,7 +204,7 @@ function BooleanFilter() {
   }], [getLabel]);
   return /* @__PURE__ */ jsxs("div", {
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("containerBooleanFilter")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "containerBooleanFilter", dataTestId)
     } : {},
     className: classesContainerBooleanFilter,
     children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
@@ -1030,7 +1027,8 @@ function DynamicFilterProvider(props) {
     fields,
     initialApplyedFilters = [],
     onChangeFilters,
-    children
+    children,
+    dataTestId = ""
   } = props;
   const {
     getLabel
@@ -1053,6 +1051,7 @@ function DynamicFilterProvider(props) {
       fields,
       automatic,
       getLabel,
+      dataTestId,
       ownerState: {
         isSkeleton,
         isDirty: !automatic,
@@ -1216,6 +1215,7 @@ function ApplyedFilter(props) {
     hidePopoverFilter: hidePopupEdit,
     showPopoverFilterForEdit: showPopupForEdit
   } = useDynamicFilter((state) => state.actions);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId);
   const labels = useMemo(() => {
     return getLabelsFilter(props, getLabel, formatters);
   }, [props, getLabel]);
@@ -1234,7 +1234,7 @@ function ApplyedFilter(props) {
   return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
     className: clsx(classesApplyedFilter, !isSetted ? `${COMPONENT_CLASS_NAME}-noSetted` : null),
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("applyedFilter", field.name)
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "applyedFilter", `${dataTestId}-${field.name}`)
     } : {},
     children: [urlIcon && /* @__PURE__ */ jsx(IconButton, {
       src: urlIcon,
@@ -1276,6 +1276,7 @@ const ContainerApplyedFilters = styled("div")(({
 }));
 function ApplyedFilters() {
   const classesWrapperApplyedFilters = useDynamicFilter((state) => state.classes.wrapperApplyedFilters, shallow);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesContainerApplyedFilters = useDynamicFilter((state) => state.classes.containerApplyedFilters, shallow);
   const applyedFilters = useDynamicFilter((state) => state.applyedFilters, shallow);
   const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton, shallow);
@@ -1287,13 +1288,13 @@ function ApplyedFilters() {
   return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
     className: classesWrapperApplyedFilters,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("wrapperApplyedFilters")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "wrapperApplyedFilters", dataTestId)
     } : {},
     children: /* @__PURE__ */ jsx(ScrollBar, {
       children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
         className: classesContainerApplyedFilters,
         ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getTestIdByClass("containerApplyedFilters")
+          [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "containerApplyedFilters", dataTestId)
         } : {},
         children: [...applyedFilters].sort((a, b) => a.isSetted === b.isSetted ? 0 : a.isSetted ? -1 : 1).reverse().map((filter) => /* @__PURE__ */ jsx(ApplyedFilter, {
           ...filter
@@ -1362,6 +1363,7 @@ styled("div")(() => ({
   display: "block"
 }));
 function FilterButton() {
+  const dataTestId = useDynamicFilter((state) => state.dataTestId);
   const automatic = useDynamicFilter((state) => state.automatic);
   const isValid = useDynamicFilter((state) => state.ownerState.isValid);
   const isDirty = useDynamicFilter((state) => state.ownerState.isDirty);
@@ -1387,7 +1389,7 @@ function FilterButton() {
   return /* @__PURE__ */ jsx(IconButton, {
     className: classesFilterButton,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("classesFilterButton")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "classesFilterButton", dataTestId)
     } : {},
     dictionaryTooltipId: getDynamicFilterDictionary(isValid ? isDirty ? DICCTIONARY.filter_tooltip_dirty : DICCTIONARY.filter_tooltip_refresh : DICCTIONARY.filter_tooltip_invalid),
     onClick: fireOnChangeFilters,
@@ -1403,6 +1405,7 @@ function PopoverMenuFields(props) {
   } = props;
   const fnAnchorEl = useDynamicFilter((state) => state.fnAnchorEl, shallow);
   const classesPopUpMenuFields = useDynamicFilter((state) => state.classes.popoverMenuFields, shallow);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesPopUpMenuFieldsPaper = useDynamicFilter((state) => state.classes.popoverMenuFieldsPaper, shallow);
   const classespopoverMenuFieldsItem = useDynamicFilter((state) => state.classes.popoverMenuFieldsItem, shallow);
   const classespopoverLabelMemuItem = useDynamicFilter((state) => state.classes.classespopoverLabelMemuItem, shallow);
@@ -1444,12 +1447,12 @@ function PopoverMenuFields(props) {
     PaperProps: {
       className: classesPopUpMenuFieldsPaper,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getTestIdByClass("popoverMenuFieldsPaper")
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "popoverMenuFieldsPaper", dataTestId)
       } : {}
     },
     children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ createElement(MenuItem, {
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getTestIdByClass("popoverMenuFieldsItem", field.name)
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "popoverMenuFieldsItem", `${dataTestId}-${field.name}`)
       } : {},
       className: classespopoverMenuFieldsItem,
       key: `menu_action_${field.label ?? getLabel(field.dictionaryId)}`,
@@ -1469,6 +1472,7 @@ function InputFilter() {
   const withAllField = useDynamicFilter((state) => state.withAllField);
   const inputData = useDynamicFilter((state) => state.inputData);
   const availableFields = useDynamicFilter((state) => state.availableFields, shallow);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesContainerInputFilter = useDynamicFilter((state) => state.classes.containerInputFilter, shallow);
   const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton, shallow);
   const {
@@ -1569,7 +1573,7 @@ function InputFilter() {
   return /* @__PURE__ */ jsxs("div", {
     className: classesContainerInputFilter,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("containerInputFilter")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "containerInputFilter", dataTestId)
     } : {},
     children: [!isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(Icon, {
@@ -1623,6 +1627,7 @@ const PopoverFilter = () => {
   const refPreviousPopoverFilterData = useRef(popoverFilterData);
   const classesPopoverFilter = useDynamicFilter((state) => state.classes.popoverFilter, shallow);
   const classesPopoverFilterPapper = useDynamicFilter((state) => state.classes.popoverFilterPaper, shallow);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesPopoverFilterHeader = useDynamicFilter((state) => state.classes.popoverFilterHeader, shallow);
   const classesPopoverHeaderTitle = useDynamicFilter((state) => state.classes.popoverHeaderTitle, shallow);
   const classesPopoverContainerFields = useDynamicFilter((state) => state.classes.popoverContainerFields, shallow);
@@ -1722,7 +1727,7 @@ const PopoverFilter = () => {
     PaperProps: {
       className: classesPopoverFilterPapper,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getTestIdByClass("popoverFilterPaper")
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "popoverFilterPaper", dataTestId)
       } : {}
     },
     children: /* @__PURE__ */ jsxs(RHFormProvider, {
@@ -1756,8 +1761,10 @@ const PopoverFilter = () => {
     })
   });
 };
+const TEST_PROPS_DATA = `data-testing`;
 const InnerForHooks = () => {
   const isMobile = useDynamicFilter((state) => state.ownerState.isMobile, shallow);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesRoot = useDynamicFilter((state) => state.classes.root, shallow);
   const containerClearFilter = useDynamicFilter((state) => state.classes.containerClearFilter, shallow);
   const classesContainerFistRow = useDynamicFilter((state) => state.classes.containerFistRow, shallow);
@@ -1765,8 +1772,8 @@ const InnerForHooks = () => {
   return /* @__PURE__ */ jsx(DynamicFilterRoot, {
     className: classesRoot,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_FIELDS]: fields,
-      "data-testid": DYNAMICFILTER_TEST_ID
+      [TEST_PROPS_DATA]: JSON.stringify(fields),
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
     } : {},
     children: !isMobile ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {}), /* @__PURE__ */ jsxs("div", {

package/components/DynamicFilter/tests/contants.d.ts

@@ -1,6 +1,5 @@
 import { Field } from '../types';
-export declare const DYNAMICFILTER_TEST_ID = "m4ldynamicfilter";
-export declare const PREFIX_TEST_ATTRIBUTE = "data-test";
-export declare const TEST_PROP_FIELDS: string;
+export declare const DYNAMICFILTER_PROP_DATA = "m4l-dynamic-filter";
+export declare const TEST_PROPS_DATA = "data-testing";
 export declare const TEST_FIELDS: Field[];
 export declare const INITIAL_APPLYED_FILTERS_EMPTY: never[];

package/components/DynamicFilter/types.d.ts

@@ -213,4 +213,8 @@ export interface DynamicFilterProps {
      *  "onChangeFilters" Handler que se dispara cuando el filtro cambia en automatico, o cuando es manual y se presion a el boton de filtrar
      */
     onChangeFilters: OnChangeFilters;
+    /**
+     *  "dataTestId" Propiedad única que permite crear un selector atributo necesario para las pruebas del componente.
+     */
+    dataTestId?: string;
 }

package/components/GridLayout/GridLayout.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { GridLayoutProps } from './types';
+/**
+ * A reactive, fluid grid layout with draggable, resizable components.
+ */
+export declare function GridLayout(props: GridLayoutProps): JSX.Element;

package/components/GridLayout/Responsive/index.0905a698.js

@@ -0,0 +1,353 @@
+import { c as cloneLayoutItem, a as cloneLayout, b as compact, d as correctBounds, G as GridLayout, n as noop } from "../index.da6fd387.js";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useFirstRender } from "@m4l/graphics";
+import { d as deepEqual } from "../../../node_modules.d73a220d.js";
+import { jsx } from "react/jsx-runtime";
+function getBreakpointFromWidth(breakpoints, width) {
+  const sorted = sortBreakpoints(breakpoints);
+  let matching = sorted[0];
+  for (let i = 1, len = sorted.length; i < len; i++) {
+    const breakpointName = sorted[i];
+    if (width > breakpoints[breakpointName])
+      matching = breakpointName;
+  }
+  return matching;
+}
+function getColsFromBreakpoint(breakpoint, cols) {
+  if (!cols[breakpoint]) {
+    throw new Error(
+      "ResponsiveReactGridLayout: `cols` entry for breakpoint " + breakpoint + " is missing!"
+    );
+  }
+  return cols[breakpoint];
+}
+function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType, brekpointsCols, colapsedHeight) {
+  let layout = layouts[breakpoint];
+  const breakpointsSorted = sortBreakpoints(breakpoints);
+  const indexBreakointInit = breakpointsSorted.indexOf(breakpoint);
+  let compareBreakpoint;
+  if (!layout) {
+    if (lastBreakpoint !== breakpoint && layouts[lastBreakpoint]) {
+      compareBreakpoint = lastBreakpoint;
+    } else {
+      const rotatedBreakpoints = [
+        ...breakpointsSorted.splice(indexBreakointInit),
+        ...breakpointsSorted.reverse()
+      ];
+      for (let i = 0, len = rotatedBreakpoints.length; i < len; i++) {
+        const b = rotatedBreakpoints[i];
+        if (layouts[b]) {
+          compareBreakpoint = b;
+          break;
+        }
+      }
+    }
+    if (compareBreakpoint) {
+      layout = [];
+      for (let i = 0, len = layouts[compareBreakpoint].length; i < len; i++) {
+        const li = cloneLayoutItem(layouts[compareBreakpoint][i]);
+        if (brekpointsCols[compareBreakpoint]) {
+          const newW = Math.round(li.w * cols / brekpointsCols[compareBreakpoint]);
+          li.w = newW;
+        }
+        layout.push(li);
+      }
+    }
+    if (!layout) {
+      layout = [];
+    }
+  } else {
+    layout = cloneLayout(layout);
+  }
+  layout = cloneLayout(layout);
+  const ret = compact(
+    correctBounds(layout, { cols }, colapsedHeight),
+    compactType,
+    cols,
+    colapsedHeight
+  );
+  return ret;
+}
+function sortBreakpoints(breakpoints) {
+  const keys = Object.keys(breakpoints);
+  return keys.sort(function(a, b) {
+    return breakpoints[a] - breakpoints[b];
+  });
+}
+function getIndentationValue(param, breakpoint) {
+  if (!param)
+    return [0, 0];
+  return Array.isArray(param) ? param : param[breakpoint];
+}
+function addLayoutItemToBreakPointIfNoExists(layouts, breakpoint, layoutItem, cols, margin, containerPadding, rowHeight, containerHeight, currentBreakpoint) {
+  if (!layouts[breakpoint])
+    return;
+  if (layouts[breakpoint].findIndex((l) => l.i === layoutItem.i) === -1) {
+    const l = cloneLayoutItem(layoutItem);
+    const heigthUnits = containerHeight !== void 0 ? (containerHeight + getIndentationValue(margin, breakpoint)[1] - 2 * getIndentationValue(containerPadding, breakpoint)[1]) / (rowHeight + getIndentationValue(margin, breakpoint)[1]) : l.h;
+    if (l.freeMove) {
+      l.x = Math.round(cols[breakpoint] / 4);
+      l.y = Math.round(heigthUnits / 4);
+      l.w = Math.round(cols[breakpoint] / 2);
+      l.h = heigthUnits / 2;
+      if (breakpoint === "xxs") {
+        l.visible = false;
+        for (let index = 0; index < layouts[breakpoint].length; index++) {
+          if (layouts[breakpoint][index].freeMove) {
+            layouts[breakpoint][index].visible = false;
+          }
+        }
+        if (currentBreakpoint === "xxs") {
+          l.visible = true;
+        }
+      }
+    } else {
+      l.w = cols[breakpoint];
+      l.h = Math.round(heigthUnits * 0.8);
+    }
+    if (l.freeMove) {
+      layouts[breakpoint].push(l);
+    } else {
+      layouts[breakpoint].unshift(l);
+    }
+  }
+}
+function addLayoutItemToBreakPoints(layouts, layoutItem, cols, margin, containerPadding, rowHeight, containerHeight, currentBreakpoint) {
+  const newLayouts = {};
+  for (const key in layouts) {
+    const layoutBreakpoint = cloneLayout(layouts[key]);
+    newLayouts[key] = layoutBreakpoint;
+    addLayoutItemToBreakPointIfNoExists(
+      newLayouts,
+      key,
+      layoutItem,
+      cols,
+      margin,
+      containerPadding,
+      rowHeight,
+      containerHeight,
+      currentBreakpoint
+    );
+  }
+  return newLayouts;
+}
+function cloneLayouts(layouts, layoutItemReplaceProps) {
+  const newLayouts = {};
+  for (const breakPoint in layouts) {
+    newLayouts[breakPoint] = cloneLayout(layouts[breakPoint], layoutItemReplaceProps);
+  }
+  return newLayouts;
+}
+function isEqualLayoutItem(layoutA, layoutB) {
+  if (layoutA.i !== layoutB.i) {
+    return false;
+  } else if (layoutA.x !== layoutB.x || layoutA.y !== layoutB.y || layoutA.w !== layoutB.w || layoutA.h !== layoutB.h || layoutA.colapsed !== layoutB.colapsed || layoutA.visible !== layoutB.visible || layoutA.freeMove !== layoutB.freeMove) {
+    return false;
+  }
+  return true;
+}
+function isEqualLayout(layoutA, layoutB) {
+  if (layoutA.length !== layoutB.length) {
+    return false;
+  }
+  for (let index = 0; index < layoutA.length; index++) {
+    if (!isEqualLayoutItem(layoutA[index], layoutB[index])) {
+      return false;
+    }
+  }
+  return true;
+}
+function isEqualLayouts(layoutsA, layoutsB) {
+  if (Object.keys(layoutsA).length !== Object.keys(layoutsB).length) {
+    return false;
+  }
+  for (const breakPoint in layoutsA) {
+    if (layoutsB[breakPoint]) {
+      if (!isEqualLayout(layoutsA[breakPoint], layoutsB[breakPoint])) {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+  return true;
+}
+function generateInitialState(props) {
+  const {
+    width,
+    breakpoint,
+    breakpoints,
+    containerPadding = [10, 10],
+    containerMargin = [10, 10],
+    layouts: defaultLayouts = {},
+    cols,
+    compactType = null,
+    colapsedHeight = 2
+  } = props;
+  const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, width);
+  const colNo = getColsFromBreakpoint(newBreakpoint, cols);
+  let fireOnLoadLayoutChange = true;
+  const initialLayout = findOrGenerateResponsiveLayout(defaultLayouts, breakpoints, newBreakpoint, newBreakpoint, colNo, compactType, {
+    [newBreakpoint]: colNo
+  }, colapsedHeight);
+  if (defaultLayouts[newBreakpoint]) {
+    if (deepEqual(defaultLayouts[newBreakpoint], initialLayout)) {
+      fireOnLoadLayoutChange = false;
+    }
+  }
+  const ret = {
+    layout: initialLayout,
+    breakpoint: newBreakpoint,
+    cols: colNo,
+    contaierMargin: getIndentationValue(containerMargin, newBreakpoint),
+    contaierPadding: getIndentationValue(containerPadding, newBreakpoint),
+    fireOnLoadLayoutChange
+  };
+  return ret;
+}
+function Responsive(props) {
+  const {
+    width,
+    height,
+    breakpoint,
+    compactType = null,
+    breakpoints = {
+      lg: 1200,
+      md: 996,
+      sm: 768,
+      xs: 480,
+      xxs: 1
+    },
+    cols = {
+      lg: 12,
+      md: 10,
+      sm: 6,
+      xs: 4,
+      xxs: 2
+    },
+    containerPadding = [10, 10],
+    containerMargin = [10, 10],
+    layouts = {},
+    onBreakpointChange = noop,
+    onLayoutChange = noop,
+    onContainerChange = noop,
+    layoutItemRender,
+    colapsedHeight = 2,
+    ...other
+  } = props;
+  const [currentState, setCurrentState] = useState(() => generateInitialState(props));
+  const refLayouts = useRef({
+    layouts: {
+      ...layouts,
+      [currentState.breakpoint]: currentState.layout
+    },
+    breakpoint: currentState.breakpoint,
+    breakpoints,
+    width,
+    height
+  });
+  const isFirstRender = useFirstRender([width, height, layouts]);
+  useEffect(() => {
+    onContainerChange({
+      containerWidth: refLayouts.current.width,
+      containerHeight: refLayouts.current.height,
+      containerMargin: currentState.contaierMargin,
+      containerPadding: currentState.contaierPadding,
+      breakpoint: currentState.breakpoint,
+      cols: currentState.cols
+    });
+    if (currentState.fireOnLoadLayoutChange) {
+      onLayoutChange(currentState.layout, {
+        ...layouts,
+        [currentState.breakpoint]: currentState.layout
+      });
+    }
+    return () => {
+      console.debug("destruccion del componente");
+    };
+  }, []);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, width);
+    const newCols = getColsFromBreakpoint(newBreakpoint, cols);
+    const lastBreakpoint = currentState.breakpoint;
+    const newLayouts = {
+      ...layouts
+    };
+    let newContainerMargin = currentState.contaierMargin;
+    let newContainerPadding = currentState.contaierPadding;
+    if (newBreakpoint !== currentState.breakpoint || newCols !== currentState.cols || breakpoints !== refLayouts.current.breakpoints || !isEqualLayouts(layouts, refLayouts.current.layouts)) {
+      console.debug("useEffect responsive con cambio de algo", newBreakpoint, lastBreakpoint);
+      newContainerMargin = getIndentationValue(containerMargin, newBreakpoint);
+      newContainerPadding = getIndentationValue(containerPadding, newBreakpoint);
+      if (!(lastBreakpoint in newLayouts)) {
+        console.error("useEffect casi imposible", lastBreakpoint, newLayouts);
+        newLayouts[lastBreakpoint] = cloneLayout(currentState.layout);
+      }
+      const layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType, cols, colapsedHeight);
+      newLayouts[newBreakpoint] = layout;
+      if (newBreakpoint !== currentState.breakpoint) {
+        onBreakpointChange(newBreakpoint, newCols, width, height);
+      }
+      refLayouts.current.layouts = newLayouts;
+      refLayouts.current.breakpoint = newBreakpoint;
+      refLayouts.current.breakpoints = breakpoints;
+      console.debug("useEffect responsive****", layout);
+      setCurrentState({
+        breakpoint: newBreakpoint,
+        layout,
+        cols: newCols,
+        contaierMargin: newContainerMargin,
+        contaierPadding: newContainerPadding
+      });
+    }
+    onContainerChange({
+      containerWidth: width,
+      containerHeight: height,
+      containerMargin: newContainerMargin,
+      containerPadding: newContainerPadding,
+      breakpoint: newBreakpoint,
+      cols: newCols
+    });
+  }, [width, height, layouts, breakpoint, breakpoints]);
+  useEffect(() => {
+    onLayoutChange(currentState.layout, refLayouts.current.layouts);
+  }, [currentState.layout]);
+  const localOnLayoutChange = useCallback((newlayout) => {
+    try {
+      refLayouts.current.layouts[refLayouts.current.breakpoint] = cloneLayout(newlayout);
+    } catch (error) {
+      console.warn("localOnLayoutChange error");
+    }
+    setCurrentState((prev) => ({
+      ...prev,
+      layout: cloneLayout(newlayout)
+    }));
+    onLayoutChange(newlayout, {
+      ...refLayouts.current.layouts
+    });
+  }, [onLayoutChange]);
+  return /* @__PURE__ */ jsx(GridLayout, {
+    width,
+    height,
+    colapsedHeight,
+    layoutItemRender,
+    containerMargin: currentState.contaierMargin,
+    containerPadding: getIndentationValue(containerPadding, currentState.breakpoint),
+    onLayoutChange: localOnLayoutChange,
+    layout: currentState.layout,
+    cols: currentState.cols,
+    compactType,
+    ...other
+  });
+}
+export {
+  Responsive as R,
+  addLayoutItemToBreakPointIfNoExists as a,
+  addLayoutItemToBreakPoints as b,
+  isEqualLayouts as c,
+  cloneLayouts as d,
+  isEqualLayout as i
+};