@m4l/components 9.1.94 → 9.1.96

package/@types/types.d.ts

@@ -144,6 +144,7 @@ import { MenuDividerOwnerState, MenuDividerSlotsType } from '../components/mui_e
 import { NavLinkOwnerState, NavLinkSlotsType } from '../components/mui_extended/NavLink/types';
 
 import { RHFSelectSlotsType, RHFSelectOwnerState } from '../components/hook-form/RHFSelect/types';
+import { ScrollBarSlotsType, ScrollBarOwnerState } from '../components/ScrollBar/types';
 import { StackOwnerState, StackSlotsType } from '../components/mui_extended/Stack/types';
 import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-form/RHFCheckbox/types';
 import { AreasAdminOwnerState, AreasAdminType } from '../components/areas/components/AreasAdmin/types';
@@ -210,6 +211,7 @@ declare module '@mui/material/styles' {
     M4LMenuDivider: MenuDividerSlotsType;
     M4LNavLink: NavLinkSlotsType;
     M4LRHFSelect: RHFSelectSlotsType;
+    M4LScrollBar: ScrollBarSlotsType;
     M4LAreasAdmin: AreasAdminType;
     M4LStack: StackSlotsType;
     M4LDateTimePicker: DateTimePickerSlotsType;
@@ -274,6 +276,7 @@ declare module '@mui/material/styles' {
     M4LMenuDivider: Partial<MenuDividerOwnerState>;
     M4LNavLink: Partial<NavLinkOwnerState>;
     M4LRHFSelect: Partial<RHFSelectOwnerState>;
+    M4LScrollBar: Partial<ScrollBarOwnerState>;
     M4LAreasAdmin: Partial<AreasAdminOwnerState>;
     M4LStack: Partial<StackOwnerState>;
     M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
@@ -562,6 +565,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
       variants?: ComponentsVariants['M4LRHFSelect'];
     };
+    M4LScrollBar?: {
+        defaultProps?: ComponentsPropsList['M4LScrollBar'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LScrollBar'];
+        variants?: ComponentsVariants['M4LScrollBar'];
     M4LAreasAdmin?: {
       defaultProps?: ComponentsPropsList['M4LAreasAdmin'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LAreasAdmin'];
@@ -583,5 +590,6 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LDivider'];
       variants?: ComponentsVariants['M4LDivider'];
     };
+   }
   }
 }

package/components/DynamicFilter/subcomponents/AppliedFilters/AppliedFilters.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { S as ScrollBar } from "../../../ScrollBar/index.js";
+import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 import { u as useAppliedFilters } from "./useAppliedFilters.js";
 import { g as AppliedFiltersStyled, h as AppliedFilterInnerContainerStyled } from "../../slots/dynamicFilterSlots.js";
 import { A as AppliedFilterChip } from "../AppliedFilterChip/AppliedFilterChip.js";

package/components/ObjectLogs/components/DetailDialog/index.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 import { useNetwork } from "@m4l/core";
 import { useHostTheme } from "@m4l/graphics";
 import ReactJson from "@microlink/react-json-view";
-import { S as ScrollBar } from "../../../ScrollBar/index.js";
+import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 function DetailDialog(props) {
   const { log_id } = props;
   const { networkOperation } = useNetwork();

package/components/ScrollBar/{index.d.ts → ScrollBar.d.ts}

@@ -1,7 +1,4 @@
-import { ReactElement } from 'react';
-interface ScrollBarProps {
-    children?: ReactElement;
-}
+import { ScrollBarProps } from './types';
 /**
  * TODO: Documentar
  */

package/components/ScrollBar/ScrollBar.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { useIsMobile } from "@m4l/graphics";
+import clsx from "clsx";
+import { c as classScrollRoot, S as SCROLL_KEY_COMPONENT } from "./constants.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { R as RootScrollBar, S as SimpleBarStyled } from "./slots/ScrollBarSlots.js";
+import { S as ScrollBarSlots } from "./slots/ScrollBarEnum.js";
+function ScrollBar(props) {
+  const {
+    orientation,
+    children,
+    className,
+    dataTestId
+  } = props;
+  const isMobile = useIsMobile();
+  const ownerState = {
+    orientation,
+    children
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Box, { sx: { overflowX: "auto", width: "100%" }, children });
+  }
+  return /* @__PURE__ */ jsx(
+    RootScrollBar,
+    {
+      ownerState: { ...ownerState },
+      id: "RootStyle",
+      className: clsx(classScrollRoot, className),
+      ...getPropDataTestId(SCROLL_KEY_COMPONENT, ScrollBarSlots.root, dataTestId),
+      children: /* @__PURE__ */ jsx(
+        SimpleBarStyled,
+        {
+          orientation: props.orientation,
+          autoHide: false,
+          ownerState: {},
+          className: "simplebar",
+          children
+        }
+      )
+    }
+  );
+}
+export {
+  ScrollBar as S
+};

package/components/ScrollBar/ScrollBar.styles.d.ts

@@ -0,0 +1,2 @@
+import { ScrollBarStyles } from './types';
+export declare const scrollBarStyles: ScrollBarStyles;

package/components/ScrollBar/ScrollBar.styles.js

@@ -0,0 +1,65 @@
+import "simplebar-react/dist/simplebar.min.css";
+const scrollBarStyles = {
+  /**
+   * 👾 Estilos para el Componente ScrollBar 👾
+   */
+  root: ({ theme }) => ({
+    flexGrow: "1",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    minHeight: "inherit",
+    "& .simplebar-scrollbar.simplebar-visible:before": {
+      opacity: "1"
+    },
+    '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] .simplebar-content': {},
+    '& .simplebar-content-wrapper[style*="overflow: scroll hidden;"] .simplebar-content': {
+      marginBottom: "9px"
+    },
+    "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before": {
+      backgroundColor: theme.vars.palette.default.focusOpacity,
+      borderRadius: "2px",
+      height: "5px"
+    },
+    "& .simplebar-track.simplebar-vertical .simplebar-scrollbar:before": {
+      background: theme.vars.palette.general.scrollBar,
+      borderRadius: "2px"
+    }
+  }),
+  /**
+   * 👾 Estilos para el Componente ScrollBar 👾
+   */
+  scrollBar: () => ({
+    height: "100%",
+    "& .simplebar-scrollbar": {
+      "&:before": {
+        // backgroundColor: alpha(theme.colorSchemes.finalTheme.palette.grey[600], 0.48),
+      },
+      "&.simplebar-visible:before": {
+        opacity: 1
+      }
+    },
+    "& .simplebar-track.simplebar-vertical": {
+      width: 10
+    },
+    "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
+      height: 6
+    },
+    "& .simplebar-mask": {
+      zIndex: "inherit"
+    },
+    "& .simplebar-content": {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%"
+    },
+    '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] ': {
+      "& .simplebar-content": {
+        marginRight: "12px"
+      }
+    }
+  })
+};
+export {
+  scrollBarStyles as s
+};

package/components/ScrollBar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const SCROLL_KEY_COMPONENT = "M4LScrollBar";
+export declare const classScrollRoot: string;

package/components/ScrollBar/constants.js

@@ -0,0 +1,7 @@
+import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
+const SCROLL_KEY_COMPONENT = "M4LScrollBar";
+const classScrollRoot = getComponentSlotRoot(SCROLL_KEY_COMPONENT);
+export {
+  SCROLL_KEY_COMPONENT as S,
+  classScrollRoot as c
+};

package/components/ScrollBar/slots/ScrollBarEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum ScrollBarSlots {
+    root = "root",
+    scrollBar = "scrollBar"
+}

package/components/ScrollBar/slots/ScrollBarEnum.js

@@ -0,0 +1,8 @@
+var ScrollBarSlots = /* @__PURE__ */ ((ScrollBarSlots2) => {
+  ScrollBarSlots2["root"] = "root";
+  ScrollBarSlots2["scrollBar"] = "scrollBar";
+  return ScrollBarSlots2;
+})(ScrollBarSlots || {});
+export {
+  ScrollBarSlots as S
+};

package/components/ScrollBar/slots/ScrollBarSlots.d.ts

@@ -0,0 +1,6 @@
+export declare const RootScrollBar: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ScrollBarProps> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ScrollBarProps> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const SimpleBarStyled: import('@emotion/styled').StyledComponent<Pick<import('simplebar-react').Props & import('react').RefAttributes<import('simplebar-core').default | null>, keyof import('simplebar-react').Props | keyof import('react').RefAttributes<import('simplebar-core').default | null>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ScrollBarProps> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ScrollBarProps> & Record<string, unknown>;
+}, {}, {}>;

package/components/ScrollBar/slots/ScrollBarSlots.js

@@ -0,0 +1,17 @@
+import { styled } from "@mui/material/styles";
+import SimpleBarReact from "simplebar-react";
+import { S as SCROLL_KEY_COMPONENT } from "../constants.js";
+import { S as ScrollBarSlots } from "./ScrollBarEnum.js";
+import { s as scrollBarStyles } from "../ScrollBar.styles.js";
+const RootScrollBar = styled("div", {
+  name: SCROLL_KEY_COMPONENT,
+  slot: ScrollBarSlots.root
+})(scrollBarStyles?.root);
+const SimpleBarStyled = styled(SimpleBarReact, {
+  name: SCROLL_KEY_COMPONENT,
+  slot: ScrollBarSlots.scrollBar
+})(scrollBarStyles?.scrollBar);
+export {
+  RootScrollBar as R,
+  SimpleBarStyled as S
+};

package/components/ScrollBar/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ScrollBarSlots';
+export * from './ScrollBarEnum';

package/components/ScrollBar/slots/index.js

@@ -0,0 +1 @@
+

package/components/ScrollBar/types.d.ts

@@ -1,7 +1,49 @@
-import { SxProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/material';
 import { ReactNode } from 'react';
 import { Props as SimpleProps } from 'simplebar-react';
+import { SCROLL_KEY_COMPONENT } from './constants';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { ScrollBarSlots } from './slots';
+/**
+ * Props for the ScrollBar component.
+ */
 export interface ScrollBarProps extends SimpleProps {
+    /**
+     * The content of the ScrollBar.
+     */
     children: ReactNode;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
     sx?: SxProps;
+    /**
+     * The orientation of the ScrollBar.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * The class name of the ScrollBar.
+     */
+    className?: string;
+    /**
+     * The data-testid attribute for testing purposes.
+     */
+    dataTestId?: string;
 }
+/**
+ * The owner state for the ScrollBar component.
+ */
+export type ownerState = ScrollBarProps;
+/**
+ * The owner state for the ScrollBar component.
+ * @deprecated This type is redundant and can be removed.
+ */
+export type ScrollBarOwnerState = ScrollBarProps & {};
+/**
+ * The type for the ScrollBar slots.
+ */
+export type ScrollBarSlotsType = keyof typeof ScrollBarSlots;
+/**
+ * The styles for the ScrollBar component.
+ */
+export type ScrollBarStyles = OverridesStyleRules<ScrollBarSlots, typeof SCROLL_KEY_COMPONENT, Theme>;

package/components/areas/components/AreasAdmin/AreasAdmin.js

@@ -5,7 +5,6 @@ import clsx from "clsx";
 import { A as AreaChip } from "./subcomponents/AreaChip/AreaChip.js";
 import { shallow } from "zustand/shallow";
 import { I as ICONS } from "../../icons.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.js";
 import { A as AreaChipMobile } from "./subcomponents/AreaChipMobile/AreaChipMobile.js";
 import { useRef } from "react";
 import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../dictionary.js";
@@ -14,6 +13,7 @@ import { useIsMobile } from "@m4l/graphics";
 import { A as AREAS_ADMIN_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
 import { A as AreasAdminSlots } from "./slots/AreasAdminEnum.js";

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/index.js

@@ -4,7 +4,7 @@ import { W as Window } from "../Window/index.js";
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { a as areasViewerClasses } from "../../../../classes/index.js";
 import clsx from "clsx";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../../../../../contexts/AreasContext/helper.js";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../../../../../contexts/AreasContext/helpers/helper.js";
 import { w as withSizeProvider } from "../../../../../../../GridLayout/subcomponents/withSizeProvider/index.js";
 import { R as Responsive } from "../../../../../../../GridLayout/subcomponents/Responsive/index.js";
 const ResponsiveGridLayout = withSizeProvider(Responsive);

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/index.js

@@ -18,7 +18,7 @@ import { I as IconButton } from "../../../../../../../../../mui_extended/IconBut
 import { I as Icon } from "../../../../../../../../../Icon/Icon.js";
 function Header(props) {
   const { areaId, windowId, emergeType } = props;
-  const [url_icon, title, moduleActions, onClose, version, windowOptions, fnQueryClose] = useAreasStore((state) => {
+  const [url_icon, title, moduleActions, onClose, version, windowOptions, fnQueryClose, moduleCount] = useAreasStore((state) => {
     const window = state.hashWindows[windowId];
     return [
       window.iconUrl,
@@ -27,7 +27,8 @@ function Header(props) {
       window.onClose,
       window.version,
       window.windowOptions,
-      window.fnQueryClose
+      window.fnQueryClose,
+      window.moduleCount
     ];
   }, shallow);
   const { saveModuleCookies, resetModuleCookies } = useAreasStore(
@@ -88,7 +89,10 @@ function Header(props) {
     /* @__PURE__ */ jsx(LinearProgressIndeterminate, {}),
     /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderContent, children: [
       /* @__PURE__ */ jsx(Icon, { src: url_icon, size: "medium" }),
-      /* @__PURE__ */ jsx(Typography, { className: areasViewerClasses.windowHeaderTitle, variant: "h5", children: title }),
+      /* @__PURE__ */ jsxs(Typography, { className: areasViewerClasses.windowHeaderTitle, variant: "h5", children: [
+        title,
+        moduleCount ? `:${moduleCount}` : null
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderCancelHandle, children: [
         !collapsed && /* @__PURE__ */ jsx(MainActions, { windowId }),
         !collapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(

package/components/areas/contexts/AreasContext/helpers/generateModuleCount.d.ts

@@ -0,0 +1,9 @@
+import { WindowStateProps } from '../../../types';
+/**
+ * Función que genera un string con el número de módulos repetidos en una misma área.
+ * Esta función recibe un hash de ventanas y evalúa cada ventana para contar cuántas veces se repite un módulo en una misma área
+ * y genera un number que representa el 'moduleCount' de la ventana.
+ * @param hashWindows
+ * @returns number con el número de módulos repetidos en una mista area
+ */
+export declare const generateModuleCount: (areaId: string, moduleId: string, hashWindows: Record<string, WindowStateProps>) => number;

package/components/areas/contexts/AreasContext/helpers/generateModuleCount.js

@@ -0,0 +1,16 @@
+const generateModuleCount = (areaId, moduleId, hashWindows) => {
+  let moduleCount = 1;
+  const windows = Object.values(hashWindows);
+  const windowsInArea = windows.filter((window) => window.areaId === areaId);
+  const sameWindows = windowsInArea.filter((window) => window.moduleId === moduleId);
+  sameWindows.sort((a, b) => (a?.moduleCount ?? 0) - (b?.moduleCount ?? 0));
+  sameWindows.forEach((window) => {
+    if (window?.moduleCount === moduleCount) {
+      moduleCount++;
+    }
+  });
+  return moduleCount;
+};
+export {
+  generateModuleCount as g
+};

package/components/areas/contexts/AreasContext/{helper.d.ts → helpers/helper.d.ts}

@@ -1,7 +1,7 @@
 import { WritableDraft } from 'immer/dist/internal';
-import { Area, AreasStateWithActions } from './types';
-import { WindowState } from '../../types';
-import { Layouts } from '../../../GridLayout/types';
+import { Area, AreasStateWithActions } from '../types';
+import { WindowState } from '../../../types';
+import { Layouts } from '../../../../GridLayout/types';
 export declare const PADDING_GRIDLAYOUT = 11;
 export declare const MARGIN_GRIDLAYOUT = 11;
 export declare const DEBOUCED_SAVE_TIME = 500;

package/components/areas/contexts/AreasContext/{helper.js → helpers/helper.js}

@@ -1,8 +1,8 @@
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/classes/index.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/classes/index.js";
-import { c as createDynamicMFStore } from "../DynamicMFParmsContext/store.js";
-import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../dictionary.js";
-import { c as addLayoutItemToBreakPointIfNoExists } from "../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
+import { u as useAreasViewerUtilityClasses } from "../../../components/AreasViewer/classes/index.js";
+import { u as useAreasAdminUtilityClasses } from "../../../components/AreasAdmin/classes/index.js";
+import { c as createDynamicMFStore } from "../../DynamicMFParmsContext/store.js";
+import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../dictionary.js";
+import { c as addLayoutItemToBreakPointIfNoExists } from "../../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
 const PADDING_GRIDLAYOUT = 11;
 const MARGIN_GRIDLAYOUT = 11;
 const DEBOUCED_SAVE_TIME = 500;

package/components/areas/contexts/AreasContext/index.js

@@ -3,7 +3,7 @@ import { createContext, useRef, useCallback, useEffect } from "react";
 import { useStore } from "zustand";
 import { shallow } from "zustand/shallow";
 import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
-import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
+import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, useFlagsStore, CommonFlags, EmitEvents } from "@m4l/core";
 import { c as createAreasStore } from "./store.js";
 const AreasContext = createContext(null);
 function AreasProvider(props) {
@@ -14,6 +14,7 @@ function AreasProvider(props) {
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
   const isFirstRender = useFirstRender([getLabel]);
+  const { addFlag } = useFlagsStore((state) => state.flagsActions);
   const areasStoreRef = useRef();
   if (!areasStoreRef.current) {
     areasStoreRef.current = createAreasStore({
@@ -28,7 +29,6 @@ function AreasProvider(props) {
         isSkeleton,
         focus: false
       }
-      // onLoad,
     });
     areasStoreRef.current?.getState().areasActions.init();
   }
@@ -50,6 +50,7 @@ function AreasProvider(props) {
   useEffect(() => {
     if (status === "loaded") {
       onLoad && onLoad();
+      addFlag(CommonFlags.FLAG_AREAS_LOADED);
     }
   }, [status]);
   useEffect(() => {

package/components/areas/contexts/AreasContext/store.js

@@ -3,10 +3,11 @@ import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/classes/index.js";
 import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/classes/index.js";
-import { u as updateOwnerStateClasses, C as COOKIE_AREAS_ADMIN_CONTAINER_ID, b as COOKIE_AREAS_ADMIN_ID, D as DEFAULT_AREA, c as addArea, g as getSelectedAreaIdFromCookies, d as DEFAULT_WINDOW, a as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, N as NORMALIZED_COLS, e as deleteLayoutFromBreakPoints, f as COOKIE_WINDOWS, h as COOKIE_BREAKPOINT_LAYOUTS, i as DEBOUCED_SAVE_TIME, s as setColapsedLayoutBreakPoints, j as getDataFromResponse, k as getCookiesContainer } from "./helper.js";
+import { u as updateOwnerStateClasses, C as COOKIE_AREAS_ADMIN_CONTAINER_ID, b as COOKIE_AREAS_ADMIN_ID, D as DEFAULT_AREA, c as addArea, g as getSelectedAreaIdFromCookies, d as DEFAULT_WINDOW, a as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, N as NORMALIZED_COLS, e as deleteLayoutFromBreakPoints, f as COOKIE_WINDOWS, h as COOKIE_BREAKPOINT_LAYOUTS, i as DEBOUCED_SAVE_TIME, s as setColapsedLayoutBreakPoints, j as getDataFromResponse, k as getCookiesContainer } from "./helpers/helper.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/store.js";
 import cloneDeep from "lodash-es/cloneDeep";
 import debounce from "lodash-es/debounce";
+import { g as generateModuleCount } from "./helpers/generateModuleCount.js";
 import { g as getCookie, s as setCookie, d as deleteCookie } from "../../../../helpers/cookies/cookies.js";
 import { d as addLayoutItemToBreakPoints, e as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { k as isEqualLayouts } from "../../../GridLayout/utils.js";
@@ -102,11 +103,7 @@ const createAreasStore = (initProps) => {
             });
           },
           /**
-           * Store Add Area
-           * @createdAt 2024-12-30 14:36:06 - automatic
-           * @updatedAt 2025-01-29 16:33:53 - automatic
-           * @updatedUser cesar - automatic
-           * @author cesar - automatic
+           * Acción encargada de añadir un área de trabajo en blanco
            */
           addArea: () => {
             let newId = "";
@@ -160,11 +157,12 @@ const createAreasStore = (initProps) => {
                     delete state.hashWindows[key];
                   }
                 }
+                const indexDeleteArea = state.areasIds.findIndex((elementAreaId) => elementAreaId === areaId);
                 state.areasIds.splice(removeIndex, 1);
                 delete state.hashAreas[areaId];
-              }
-              if (state.currentAreaId === areaId) {
-                selectNewAreaId = state.areasIds[0];
+                if (state.currentAreaId === areaId) {
+                  selectNewAreaId = state.areasIds[indexDeleteArea <= state.areasIds.length - 1 ? indexDeleteArea : state.areasIds.length - 1];
+                }
               }
               if (state.loadAreasFromNetwork) {
                 state.networkOperation({
@@ -264,6 +262,7 @@ const createAreasStore = (initProps) => {
           addLayout: (areaId, windowId, newWindowProps) => {
             let previousId = windowId;
             const freeMove = newWindowProps.emergeType === "popup";
+            const moduleCount = generateModuleCount(get().currentAreaId, newWindowProps.moduleId, get().hashWindows);
             const newLayoutItem = {
               ...newWindowProps.layoutProps,
               i: windowId,
@@ -300,7 +299,8 @@ const createAreasStore = (initProps) => {
                     get().areaActions.closeLayout(areaId, removeLayoutId);
                   },
                   ...DEFAULT_WINDOW,
-                  dynamicMFStore
+                  dynamicMFStore,
+                  moduleCount
                 };
                 area.layoutItemsIds.push(windowId);
                 if (newWindowProps.emergeType === "layout") {
@@ -442,13 +442,15 @@ const createAreasStore = (initProps) => {
                 windowId
               });
               state.windowsModals.push(windowId);
+              const moduleCount = generateModuleCount(get().currentAreaId, newWindowModalProps.moduleId, get().hashWindows);
               state.hashWindowsModals[windowId] = {
                 ...newWindowModalProps,
                 areaId,
                 windowId,
                 ...DEFAULT_WINDOW,
                 onClose: get().areaActions.closeWindowModal,
-                dynamicMFStore
+                dynamicMFStore,
+                moduleCount
               };
               state.hashWindows[windowId] = state.hashWindowsModals[windowId];
             });

package/components/areas/contexts/AreasContext/tests/Store.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/areas/types.d.ts

@@ -111,6 +111,11 @@ export type WindowState = {
      * @updatedUser cesar - automatic
      */
     fnQueryClose?: () => void;
+    /**
+     * moduleCount representa el identificador de
+     * la ventana cuando se repite un módulo en una misma área
+     */
+    moduleCount?: number;
 };
 /**
  * Opciones para la ventana.

package/components/index.d.ts

@@ -41,7 +41,7 @@ export * from './PropertyValue/PropertyValue';
 export * from './MenuActions';
 export type { MenuAction, ComponentActionProps } from './MenuActions/types';
 export * from './extended/React-Resizable';
-export * from './ScrollBar';
+export * from './ScrollBar/ScrollBar';
 export { ScrollToTop } from './ScrollToTop';
 export * from './extended/React-Splitter/SplitLayout/SplitLayout';
 export * from './ToastContainer';

package/index.js

@@ -130,7 +130,7 @@ import { a as a9 } from "./components/MenuActions/dictionary.js";
 import { a as a10, M as M11 } from "./components/MenuActions/MenuActions.js";
 import { R as R16 } from "./components/extended/React-Resizable/Resizable/Resizable.js";
 import { R as R17 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
-import { S as S3 } from "./components/ScrollBar/index.js";
+import { S as S3 } from "./components/ScrollBar/ScrollBar.js";
 import { S as S4 } from "./components/extended/React-Splitter/SplitLayout/SplitLayout.js";
 import { T as T3 } from "./components/ToastContainer/ToastContainer.js";
 import { T as T4 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.94",
+  "version": "9.1.96",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -53,7 +53,7 @@
     "zustand": "4.3.6"
   },
   "peerDependencies": {
-    "@m4l/core": "^2.0.15",
+    "@m4l/core": "^2.0.18",
     "@m4l/graphics": "^7.0.8",
     "@m4l/styles": "^7.1.18",
     "@mui/lab": "5.0.0-alpha.173",

package/components/ScrollBar/classes/constants.d.ts

@@ -1 +0,0 @@
-export declare const componentName = "M4LScrollBar";

package/components/ScrollBar/classes/constants.js

@@ -1,4 +0,0 @@
-const componentName = "M4LScrollBar";
-export {
-  componentName as c
-};

package/components/ScrollBar/classes/index.d.ts

@@ -1,9 +0,0 @@
-import { ScrollBarClassesType } from './types';
-export declare const scrollBarClasses: ScrollBarClassesType;
-export declare function getScrollBarUtilityClass(slot: string): string;
-/**
- * TODO: Documentar
- */
-export declare const getScrollBarUtilityClasses: () => {
-    root: string;
-};

package/components/ScrollBar/classes/index.js

@@ -1,23 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root"
-  /* states or variants of elements */
-]);
-function getScrollBarUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const getScrollBarUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getScrollBarUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  getScrollBarUtilityClasses as g
-};

package/components/ScrollBar/classes/types.d.ts

@@ -1,6 +0,0 @@
-import { getScrollBarUtilityClasses } from '.';
-export interface ScrollBarClassesType {
-    root: string;
-}
-export type StackClassesKey = keyof ScrollBarClassesType;
-export type ScrollBarClasses = ReturnType<typeof getScrollBarUtilityClasses>;

package/components/ScrollBar/index.js

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
-import { R as RootStyle, S as SimpleBarStyle } from "./styles.js";
-import { g as getScrollBarUtilityClasses } from "./classes/index.js";
-function ScrollBar(props) {
-  const { children } = props;
-  const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
-  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(Box, { sx: { overflowX: "auto", width: "100%" }, children });
-  }
-  const classes = getScrollBarUtilityClasses();
-  return /* @__PURE__ */ jsx(RootStyle, { id: "RootStyle", className: classes.root, children: /* @__PURE__ */ jsx(SimpleBarStyle, { autoHide: false, children }) });
-}
-export {
-  ScrollBar as S
-};

package/components/ScrollBar/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const RootStyle: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SimpleBarStyle: import('@emotion/styled').StyledComponent<import('simplebar-react').Props & import('react').RefAttributes<import('simplebar-core').default | null> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {}>;
-export declare const SimpleBarStyle2: import('@emotion/styled').StyledComponent<import('simplebar-react').Props & import('react').RefAttributes<import('simplebar-core').default | null> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {}>;

package/components/ScrollBar/styles.js

@@ -1,46 +0,0 @@
-import { styled, alpha } from "@mui/material/styles";
-import SimpleBarReact from "simplebar-react";
-import "simplebar-react/dist/simplebar.min.css";
-const RootStyle = styled("div")(({ theme }) => ({
-  flexGrow: "1",
-  height: "100%",
-  overflow: "hidden",
-  ...theme.components?.M4LScrollBar?.styleOverrides || {}
-}));
-const SimpleBarStyle = styled(SimpleBarReact)`
-  height: 100%;
-`;
-styled(SimpleBarReact)(({ theme }) => ({
-  height: "100%",
-  "& .simplebar-scrollbar": {
-    "&:before": {
-      backgroundColor: alpha(theme.colorSchemes.finalTheme.palette.grey[600], 0.48)
-    },
-    "&.simplebar-visible:before": {
-      opacity: 1
-    }
-  },
-  "& .simplebar-track.simplebar-vertical": {
-    width: 10
-  },
-  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
-    height: 6
-  },
-  "& .simplebar-mask": {
-    zIndex: "inherit"
-  },
-  "& .simplebar-content": {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%"
-  },
-  '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] ': {
-    "& .simplebar-content": {
-      marginRight: "12px"
-    }
-  }
-}));
-export {
-  RootStyle as R,
-  SimpleBarStyle as S
-};