@m4l/components 0.1.71 → 0.1.72

package/components/areas/components/{index.31f39977.js → AreasViewer/index.51ee3d38.js}

@@ -1,83 +1,84 @@
-import { I as IconButton } from "../../mui_extended/IconButton/index.7aab3e04.js";
-import { u as useAreasStore } from "../hooks/useArea/index.c135e0cf.js";
-import { useEnvironment, useModuleDictionary, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { r as react_resizable_css } from "../../../../react-resizable.e78d1cc8.js";
+import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../../utils/index.8608d16c.js";
+import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
+import React__default, { useMemo, useState, useRef, useCallback, useEffect } from "react";
+import { WidthProvider, Responsive } from "react-grid-layout";
 import { shallow } from "zustand/shallow";
-import { A as AREAS_VIEWER_CLASS_NAME, a as AREAS_ADMIN_CLASS_NAME, g as getAreasDictionary, I as ICONS, D as DICCTIONARY } from "../index.bd29b1db.js";
-import { I as Icon } from "../../Icon/index.6f2a5618.js";
-import { S as ScrollBar } from "../../ScrollBar/index.bbe48f4d.js";
+import { I as Icon } from "../../../Icon/index.9839297c.js";
+import { m } from "framer-motion";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React__default, { useState, useRef, useMemo, useCallback, useEffect } from "react";
-import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
+import "react-router-dom";
+import "../../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../../animate/PropagateLoader/index.be5b02c3.js";
+import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.590049b4.js";
 import clsx from "clsx";
 import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender, useResizeObserver } from "@m4l/graphics";
+import { u as useAreasStore } from "../../hooks/useAreas/index.e868e3d9.js";
+import "../AreasAdmin/index.218451cf.js";
+import { I as ICONS } from "../../icons.b36751f2.js";
+import "../../../ScrollBar/index.bbe48f4d.js";
+import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, C as CONTAINER_PADDING_GRIDLAYOUT, T as THROTTLE_RESIZE_TIME } from "../../contexts/AreasContext/index.0b50676d.js";
+import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "zustand";
-import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, C as CONTAINER_PADDING_GRIDLAYOUT, T as THROTTLE_RESIZE_TIME } from "../contexts/AreasContext/index.e14d6799.js";
-import * as Yup from "yup";
-import "../../mui_extended/Accordion/index.44e96bb8.js";
-import "../../mui_extended/Avatar/index.fe06afd7.js";
-import "react-router-dom";
+import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
+import "react-hook-form";
+import "../../../hook-form/RHFAutocomplete/index.b185393e.js";
+import { I as Image } from "../../../Image/index.a88f6341.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.1659d310.js";
+import "../../../mui_extended/Accordion/index.d420b666.js";
+import "../../../mui_extended/Avatar/index.fe06afd7.js";
 import "@mui/material/Button";
-import { B as Button } from "../../mui_extended/Button/index.ec6525e0.js";
-import { I as Image } from "../../Image/index.1e3b7ff6.js";
+import { B as Button } from "../../../mui_extended/Button/index.1cd0c4e4.js";
 import "@mui/lab";
-import { T as Typography } from "../../mui_extended/Typography/index.d5e0f69f.js";
-import { P as Popover } from "../../mui_extended/Popover/index.9f35d0eb.js";
-import { M as MenuActions } from "../../mui_extended/MenuActions/index.bff47c06.js";
-import "../../mui_extended/Pager/index.907d5801.js";
-import "../../mui_extended/Tab/index.e0653a0a.js";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.ee16888d.js";
-import { D as DynamicMFParmsProvider } from "../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "../../../contexts/ModalContext/index.fca184e2.js";
-import { R as RHFormProvider } from "../../../contexts/RHFormContext/index.a7511399.js";
-import "react-hook-form";
-import "../../hook-form/RHFAutocomplete/index.c4ba070a.js";
-import "../../HelperText/index.d7b1b21a.js";
+import "../../../mui_extended/Popover/index.9f35d0eb.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.f9eb6463.js";
+import "../../../mui_extended/Pager/index.c058b933.js";
+import "../../../mui_extended/Tab/index.e0653a0a.js";
+import "../../../HelperText/index.4c27bfc1.js";
 import debounce from "lodash/debounce";
-import "../../hook-form/RHFAutocompleteAsync/index.a63f3704.js";
-import "../../hook-form/RHFCheckbox/index.9055f88d.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.7a569646.js";
+import "../../../hook-form/RHFCheckbox/index.7a9ea396.js";
 import "@mui/x-date-pickers";
-import "../../hook-form/RHFDateTime/index.2cb94a66.js";
-import { R as RHFTextField } from "../../hook-form/RHFTextField/index.7ce2b16e.js";
-import "../../hook-form/RHFPeriod/index.14dcf762.js";
-import "../../Period/index.53ea0562.js";
-import { A as Actions } from "../../CommonActions/components/Actions/index.6b7d480a.js";
-import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/index.ff90f2c0.js";
-import { A as ActionIntro } from "../../CommonActions/components/ActionIntro/index.e31ab7e9.js";
-import { c as cjs } from "../../../react-draggable.29f78f6d.js";
-import "../../ModalDialog/index.598f9a86.js";
-import { R as ResizeableWindow } from "../../Resizeable/index.ff4ce7a4.js";
-import "../../modal/WindowConfirm.70bcbb69.js";
-import "../../modal/WindowBase.32d35d71.js";
-import { styled } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../../react-resizable.baf54eb2.js";
-import { WidthProvider, Responsive } from "react-grid-layout";
-import { m } from "framer-motion";
-import "../../animate/LoadingScreen/index.1d0c4307.js";
-import "../../animate/PropagateLoader/index.be5b02c3.js";
-import { W as WindowToolsMFProvider } from "../contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import "../../../hook-form/RHFDateTime/index.2fd1d56b.js";
+import "../../../hook-form/RHFTextField/index.e1b50c30.js";
+import "../../../hook-form/RHFPeriod/index.df3d3f69.js";
+import "../../../Period/index.2ab4f2a1.js";
+import "../../../CommonActions/components/Actions/index.e190561b.js";
+import "../../../../contexts/ModalContext/index.92e80136.js";
+import { c as cjs } from "../../../../react-draggable.21aa9ee1.js";
+import "../../../ModalDialog/index.75ddf6de.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.086ff29e.js";
+import "../../../modal/WindowConfirm.b89712de.js";
+import "../../../modal/WindowBase.e5ec6128.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../hook-form/RHFUpload/index.c57a43f8.js";
-import "../../DataGrid/index.77ae9b4c.js";
+import "../../../hook-form/RHFUpload/index.ec977af6.js";
+import "../../../DataGrid/index.549bd646.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../DynamicFilter/index.b2ba5167.js";
+import "../../../DynamicFilter/index.c1a3e2f1.js";
+import "yup";
 import "@hookform/resolvers/yup";
-import "../../LanguagePopover/index.310e9a3a.js";
-import "../../NavLink/index.ac3778af.js";
-import "../../NoItemSelected/index.3809e3d1.js";
-import "../../ObjectLogs/index.949d3595.js";
-import "../../../react-json-view.57125fcf.js";
-import "../../PaperForm/index.cf8af08b.js";
-import "../../Page/index.4237c241.js";
-import "../../PropertyValue/index.dfcfe1ba.js";
-import "../../../react-splitter-layout.8b1655c8.js";
-import "../../SplitLayout/index.5a8355d8.js";
-import "../../SideBar/index.4daafbab.js";
-import { D as DraggableWindow } from "../../../vendor.619c3533.js";
-import { L as LinearProgress } from "../../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { v as varBounce } from "../../animate/variants/bounce.784aaaaa.js";
+import "../../../../contexts/RHFormContext/index.a7511399.js";
+import "../../../LanguagePopover/index.84c51cd3.js";
+import "../../../NavLink/index.e88494ef.js";
+import "../../../NoItemSelected/index.c3b67da1.js";
+import "../../../ObjectLogs/index.88bcf75a.js";
+import "../../../../react-json-view.57125fcf.js";
+import "../../../PaperForm/index.b141d583.js";
+import "../../../Page/index.4237c241.js";
+import "../../../PropertyValue/index.dfcfe1ba.js";
+import "../../../../react-splitter-layout.8b1655c8.js";
+import "../../../SplitLayout/index.5a8355d8.js";
+import "../../../SideBar/index.90137dc5.js";
+import { D as DraggableWindow } from "../../../../vendor.d194839d.js";
+import { g as getAreasDictionary } from "../../dictionary.e72db809.js";
+import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
+import { v as varBounce } from "../../../animate/variants/bounce.784aaaaa.js";
 import { throttle } from "lodash";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
@@ -121,232 +122,6 @@ const useAreasViewerUtilityClasses = (ownerState) => {
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
 };
-const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
-  "root",
-  "areaChipRoot",
-  "areaChipTitle",
-  "areaChipDeleteButton",
-  "areasAddButton",
-  "areaContainerChips",
-  "areaIconLayer",
-  "areaChipEditButton",
-  "selected",
-  "isMobile",
-  "disabled"
-], AREAS_ADMIN_CLASS_NAME);
-const useAreasAdminUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.status, ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton"],
-    areaChipRoot: ["areaChipRoot"],
-    areaIconLayer: ["areaIconLayer"],
-    areaContainerChips: ["areaContainerChips"],
-    areaChipTitle: ["areaChipTitle"],
-    areaChipDeleteButton: ["areaChipDeleteButton"],
-    areaChipEditButton: ["areaChipEditButton"],
-    areasAddButton: ["areasAddButton"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
-};
-styled("div")(() => ({
-  display: "flex",
-  flexDirection: "row",
-  border: "1px solid gray",
-  "&.active": {
-    border: "1px solid red"
-  }
-}));
-styled("div")(({
-  theme
-}) => ({
-  height: "100%",
-  width: theme.spacing(1),
-  backgroundColor: theme.palette.background.default,
-  "&.active": {
-    backgroundColor: theme.palette.primary.main
-  }
-}));
-const EditAreaHeader = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  width: "100%",
-  height: "25px",
-  borderBottom: "1px solid",
-  borderColor: theme.palette.state.default,
-  justifyContent: "space-between",
-  alignItems: "center"
-}));
-const AreaChip = (props) => {
-  const {
-    areaId,
-    selected,
-    areaName,
-    disabled
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    deleteArea,
-    selectArea,
-    editArea
-  } = useAreasStore((state) => state.areasActions);
-  const [open, setOpen] = useState(false);
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const anchorRef = useRef(null);
-  const onClickDeleteArea = (e) => {
-    e.stopPropagation();
-    deleteArea(areaId);
-  };
-  const onSubmit = (data) => {
-    console.log("data areachip", data);
-    editArea(areaId, data.inputEditArea);
-    setOpen(false);
-  };
-  const handlerOpenPopover = () => {
-    setOpen(true);
-  };
-  const initialValues = {
-    inputEditArea: areaName
-  };
-  const validationSchema = useMemo(() => Yup.object().shape({
-    inputEditArea: Yup.string().required(getLabel(getAreasDictionary("validation_edit_area")))
-  }), [getLabel]);
-  return /* @__PURE__ */ jsxs("div", {
-    role: "presentation",
-    className: clsx(areasAdminClasses.areaChipRoot, selected ? areasAdminClasses.selected : null, disabled ? areasAdminClasses.disabled : null),
-    onClick: () => {
-      selectArea(areaId);
-    },
-    ref: anchorRef,
-    children: [/* @__PURE__ */ jsx("div", {
-      className: areasAdminClasses.areaChipTitle,
-      children: areaName
-    }), /* @__PURE__ */ jsxs("div", {
-      style: {
-        display: "flex"
-      },
-      children: [/* @__PURE__ */ jsx(IconButton, {
-        className: areasAdminClasses.areaChipEditButton,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
-        size: "extraSmall",
-        onClick: handlerOpenPopover
-      }), /* @__PURE__ */ jsx(IconButton, {
-        className: areasAdminClasses.areaChipDeleteButton,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
-        size: "extraSmall",
-        onClick: onClickDeleteArea
-      })]
-    }), /* @__PURE__ */ jsx(Popover, {
-      arrowType: "top-center",
-      open,
-      anchorEl: anchorRef.current,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "center"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      },
-      onClose: () => setOpen(false),
-      sx: {
-        mt: "10px"
-      },
-      children: /* @__PURE__ */ jsxs(RHFormProvider, {
-        onSubmit,
-        values: initialValues,
-        validationSchema,
-        children: [/* @__PURE__ */ jsxs(EditAreaHeader, {
-          children: [/* @__PURE__ */ jsx(Typography, {
-            children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area))
-          }), /* @__PURE__ */ jsx(IconButton, {
-            src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
-            size: "small",
-            onClick: () => setOpen(false)
-          })]
-        }), /* @__PURE__ */ jsx(RHFTextField, {
-          name: "inputEditArea",
-          skeletonWidth: "70%",
-          skeletonHeight: "18px",
-          sx: {
-            mt: "20px"
-          }
-        }), /* @__PURE__ */ jsxs(Actions, {
-          children: [/* @__PURE__ */ jsx(ActionCancel, {
-            onClick: () => setOpen(false),
-            variant: "outlined",
-            skeletonWidth: "100%"
-          }), /* @__PURE__ */ jsx(ActionIntro, {
-            skeletonWidth: "100%"
-          })]
-        })]
-      })
-    })]
-  });
-};
-AreaChip.displayName = "AreaButtons";
-const AreasAdminRoot = styled("div")`
-    display: flex;
-    position: relative;
-
-    //areaRoot
-    & .${areasAdminClasses.areaChipRoot} {
-        display: flex;
-    }
-
-
-    ${(props) => props.theme.components?.M4LAreasAdmin?.styleOverrides}
-
- 
-`;
-function AreasAdmin() {
-  const areas = useAreasStore((state) => state.areas, shallow);
-  const currentArea = useAreasStore((state) => state.currentAreaId, shallow);
-  const status = useAreasStore((state) => state.ownerState.status);
-  const classesRoot = useAreasStore((state) => state.adminClasses.root);
-  const areasLength = useAreasStore((state) => state.areas.length);
-  const {
-    addArea
-  } = useAreasStore((state) => state.areasActions, shallow);
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  console.log("Render AreasAdmin", areas);
-  if (status !== "loaded") {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(AreasAdminRoot, {
-    className: classesRoot,
-    children: [/* @__PURE__ */ jsx("div", {
-      className: areasAdminClasses.areaIconLayer,
-      children: /* @__PURE__ */ jsx(Icon, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`
-      })
-    }), /* @__PURE__ */ jsx("div", {
-      className: areasAdminClasses.areaContainerChips,
-      children: /* @__PURE__ */ jsx(ScrollBar, {
-        children: /* @__PURE__ */ jsx(Fragment, {
-          children: areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
-            areaId: area.id,
-            selected: area.id === currentArea,
-            areaName: area.name,
-            disabled: areasLength === 1
-          }, area.id))
-        })
-      })
-    }), /* @__PURE__ */ jsx(IconButton, {
-      className: areasAdminClasses.areasAddButton,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
-      size: "small",
-      onClick: addArea
-    })]
-  });
-}
 const AreasViewerRoot = styled("div")`
     /* display: flex; */
     width: 100%;
@@ -1699,9 +1474,7 @@ function AreasViewer() {
   });
 }
 export {
-  AreasAdmin as A,
-  useAreasAdminUtilityClasses as a,
-  areasViewerClasses as b,
-  AreasViewer as c,
+  AreasViewer as A,
+  areasViewerClasses as a,
   useAreasViewerUtilityClasses as u
 };

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/helper.d.ts

@@ -1,3 +1,3 @@
-import { ModuleAction } from '../../../../../../../../contexts';
-export declare function getMainActions(isDesktop: boolean | undefined, moduleActions: ModuleAction[]): ModuleAction[];
-export declare function getMenuActions(windowId: string, isDesktop: boolean | undefined, moduleActions: ModuleAction[], urlPrefix: string, saveModuleCookies: (wd: string) => void, resetModuleCookies: (wd: string) => void, version?: string): ModuleAction[];
+import { AreaWindowAction } from '../../../../../../../../types';
+export declare function getMainActions(isDesktop: boolean | undefined, moduleActions: AreaWindowAction[]): AreaWindowAction[];
+export declare function getMenuActions(windowId: string, isDesktop: boolean | undefined, moduleActions: AreaWindowAction[], urlPrefix: string, saveModuleCookies: (wd: string) => void, resetModuleCookies: (wd: string) => void, version?: string): AreaWindowAction[];

package/components/areas/components/index.ae4cbf2e.js

@@ -0,0 +1,14 @@
+import "react";
+import "@m4l/core";
+import "@mui/material";
+import "../../Icon/index.9839297c.js";
+import "clsx";
+import "react/jsx-runtime";
+import "../../mui_extended/IconButton/index.590049b4.js";
+import "@m4l/graphics";
+import "zustand";
+import "../contexts/AreasContext/index.0b50676d.js";
+import "./AreasAdmin/index.218451cf.js";
+import "zustand/shallow";
+import "../../ScrollBar/index.bbe48f4d.js";
+import "./AreasViewer/index.51ee3d38.js";

package/components/areas/constants.66529246.js

@@ -0,0 +1,6 @@
+const AREAS_VIEWER_CLASS_NAME = "M4LAreasViewer";
+const AREAS_ADMIN_CLASS_NAME = "M4LAreasAdmin";
+export {
+  AREAS_ADMIN_CLASS_NAME as A,
+  AREAS_VIEWER_CLASS_NAME as a
+};

package/components/areas/contexts/AreasContext/helper.d.ts

@@ -1,8 +1,8 @@
 import { WritableDraft } from 'immer/dist/internal';
-import { Layouts } from 'react-grid-layout';
-import { Area, AreasStateWithActions } from './types';
-import { WinLayout } from './types';
-import { HashWindowsByLayouts } from '../../types';
+import type { Layouts } from 'react-grid-layout';
+import type { Area, AreasStateWithActions } from './types';
+import type { WinLayout } from './types';
+import type { HashWindowsByLayouts, WindowState, WindowStateProps } from '../../types';
 export declare const ROW_HEIGTH_GRIDLAYOUT = 20;
 export declare const CONTAINER_PADDING_GRIDLAYOUT = 3;
 export declare const MARGIN_GRIDLAYOUT = 5;
@@ -31,6 +31,7 @@ export declare const MAXIMIZED_COLS: {
     xs: number;
     xxs: number;
 };
+export declare const DEFAULT_WINDOW: Pick<WindowState, 'status' | 'moduleActions' | 'cookies' | 'loading' | 'tosties' | 'toastyCount'>;
 export declare const DEFAULT_AREA: Omit<Area, 'id' | 'name' | 'loadWindows' | 'viewMode'>;
 /**
  * @description Función de apoyo que crea un área de trabajo,
@@ -57,3 +58,4 @@ export declare function getDataFromResponse(data: any, state: WritableDraft<Area
     newHashWindowLayouts: HashWindowsByLayouts;
 };
 export declare function getCookiesContainer(data: any, containerId: string): Record<string, any>;
+export declare const removeToasty: (state: WritableDraft<WindowStateProps>, toastyId: number) => void;

package/components/areas/contexts/AreasContext/{index.e14d6799.js → index.0b50676d.js}

@@ -5,9 +5,10 @@ import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses, a as useAreasAdminUtilityClasses, b as areasViewerClasses } from "../../components/index.31f39977.js";
-import { g as getAreasDictionary } from "../../index.bd29b1db.js";
+import { u as useAreasViewerUtilityClasses, a as areasViewerClasses } from "../../components/AreasViewer/index.51ee3d38.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.218451cf.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.1607c78e.js";
+import { g as getAreasDictionary } from "../../dictionary.e72db809.js";
 import { debounce, cloneDeep } from "lodash";
 import { jsx } from "react/jsx-runtime";
 const ROW_HEIGTH_GRIDLAYOUT = 20;
@@ -20,6 +21,14 @@ const COOKIE_WINDOWS = "windows";
 const BREAKPOINT_SIZES = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
 const NORMALIZED_COLS = { lg: 24, md: 20, sm: 12, xs: 8, xxs: 1 };
 const MAXIMIZED_COLS = { lg: 24, md: 20, sm: 12, xs: 8, xxs: 1 };
+const DEFAULT_WINDOW = {
+  status: "init",
+  moduleActions: [],
+  cookies: { moduleCookies: {}, windowCookies: {} },
+  loading: false,
+  tosties: [],
+  toastyCount: 0
+};
 const DEFAULT_AREA = {
   status: "init",
   zPopUpIndex: 0,
@@ -36,7 +45,23 @@ const DEFAULT_AREA = {
 };
 const addArea = (state) => {
   const areaId = `area_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
-  const name = `${state.getLabel(getAreasDictionary("label_new_area"))} ${state.areas.length + 1}`;
+  const labelNewArea = state.getLabel(getAreasDictionary("label_new_area"));
+  let isFree;
+  let name = `${labelNewArea} 1`;
+  for (let indexNames = 1; indexNames <= state.areas.length + 1; indexNames++) {
+    name = `${labelNewArea} ${indexNames + state.areas.length}`;
+    isFree = true;
+    for (let index = 0; index < state.areas.length; index++) {
+      const area = state.areas[index];
+      if (area.name === name) {
+        isFree = false;
+        break;
+      }
+    }
+    if (isFree) {
+      break;
+    }
+  }
   const newArea = {
     id: areaId,
     name,
@@ -195,6 +220,16 @@ function getCookiesContainer(data, containerId) {
   }
   return cookies;
 }
+const removeToasty = (state, toastyId) => {
+  const tosties = state.tosties;
+  for (let i = 0; i < tosties.length; i++) {
+    const findToasty = tosties[i];
+    if (findToasty.id === toastyId) {
+      state.tosties.splice(i, 1);
+      return;
+    }
+  }
+};
 const createAreasStore = (initProps) => {
   const startProps = {
     viwerClasses: useAreasViewerUtilityClasses(initProps.ownerState),
@@ -262,7 +297,7 @@ const createAreasStore = (initProps) => {
           },
           editArea: (idArea, newName) => {
             set((state) => {
-              let index = state.areas.findIndex((element) => element.id === idArea);
+              const index = state.areas.findIndex((element) => element.id === idArea);
               if (index > -1 && state.areas[index].name !== newName) {
                 state.areas[index].name = newName;
                 state.networkOperation({
@@ -397,10 +432,7 @@ const createAreasStore = (initProps) => {
                 ...newWindowModalProps,
                 areaId,
                 windowId,
-                status: "init",
-                moduleActions: [],
-                cookies: { moduleCookies: {}, windowCookies: {} },
-                loading: false,
+                ...DEFAULT_WINDOW,
                 onClose: get().areaActions.closeWindowModal,
                 dynamicMFStore
               };
@@ -481,10 +513,7 @@ const createAreasStore = (initProps) => {
                   areaId,
                   onClose: (removePopUpId) => get().areaActions.closeWindowPopUp(areaId, removePopUpId),
                   zIndex: area.zPopUpIndex,
-                  status: "init",
-                  moduleActions: [],
-                  cookies: { moduleCookies: {}, windowCookies: {} },
-                  loading: false,
+                  ...DEFAULT_WINDOW,
                   dynamicMFStore
                 };
                 state.hashWindows[windowId] = area.hashWindowsPopups[windowId];
@@ -540,10 +569,7 @@ const createAreasStore = (initProps) => {
                 onClose: (removeLayoutId) => {
                   get().areaActions.closeWindowLayout(areaId, removeLayoutId);
                 },
-                status: "init",
-                moduleActions: [],
-                cookies: { moduleCookies: {}, windowCookies: {} },
-                loading: false,
+                ...DEFAULT_WINDOW,
                 dynamicMFStore
               };
               state.hashWindows[windowId] = area.hashWindowsLayouts[windowId];
@@ -924,6 +950,52 @@ const createAreasStore = (initProps) => {
                 toastError: false
               });
             }
+          },
+          toasty: (windowId, options) => {
+            const hW = get().hashWindows[windowId];
+            if (hW) {
+              if (options.replaceMeId) {
+                for (let index = 0; index < hW.tosties.length; index++) {
+                  const t = hW.tosties[index];
+                  if (options.replaceMeId === t.replaceMeId) {
+                    const toastyId = t.id;
+                    if (t.timer) {
+                      clearTimeout(t.timer);
+                    }
+                    set((stateSetTimer) => {
+                      stateSetTimer.hashWindows[windowId].tosties[index].timer = setTimeout(() => {
+                        set((state) => {
+                          removeToasty(
+                            state.hashWindows[windowId],
+                            toastyId
+                          );
+                        });
+                      }, t.timeoutMs);
+                    });
+                    return;
+                  }
+                }
+              }
+              set((state) => {
+                const timeoutMs = options.timeoutMs || 1e4;
+                state.hashWindows[windowId].toastyCount++;
+                const toastyId = state.hashWindows[windowId].toastyCount;
+                const newToasty = {
+                  id: state.hashWindows[windowId].toastyCount,
+                  ...options,
+                  timeoutMs,
+                  timer: setTimeout(() => {
+                    set((stateRemoveToasty) => {
+                      removeToasty(
+                        stateRemoveToasty.hashWindows[windowId],
+                        toastyId
+                      );
+                    });
+                  }, timeoutMs)
+                };
+                state.hashWindows[windowId].tosties.push(newToasty);
+              });
+            }
           }
         }
       })),

package/components/areas/contexts/AreasContext/types.d.ts

@@ -1,10 +1,9 @@
 import { GetLabelType, NetworkProps } from '@m4l/core';
 import { ReactNode } from 'react';
-import { CookieType, HashWindowsByLayouts, HashWindowsByModals, HashWindowsByPopups, ModalStateProps, NewLayoutProps, NewModalProps, NewPopUpProps, NewWindowProps, WinType, WindowStateProps } from '../../types';
+import { CookieType, HashWindowsByLayouts, HashWindowsByModals, HashWindowsByPopups, ModalStateProps, AreaWindowAction, NewLayoutProps, NewModalProps, NewPopUpProps, NewWindowProps, ToastyOptions, WinType, WindowStateProps } from '../../types';
 import { ViwerClasses } from '../../components/AreasViewer/classes';
 import { AdminClasses } from '../../components/AreasAdmin/classes';
 import { Layout, Layouts } from 'react-grid-layout';
-import { ModuleAction } from '../..';
 import { DebouncedFunc } from 'lodash';
 export declare type WinLayout = Layout & {
     winType: WinType;
@@ -181,7 +180,7 @@ export interface AreasStateWithActions extends AreasState {
         loadWindowsFromApi: (areaId: string) => void;
     };
     windowActions: {
-        setActions: (windowId: string, newActions: ModuleAction[], version?: string) => void;
+        setActions: (windowId: string, newActions: AreaWindowAction[], version?: string) => void;
         getCookie: (windowId: string, id: string) => Record<string, any> | undefined;
         getCookies: (windowId: string, type: CookieType) => Record<string, any>;
         setCookie: (windowId: string, id: string, type: CookieType, cookie: Record<string, any>) => void;
@@ -190,6 +189,7 @@ export interface AreasStateWithActions extends AreasState {
         loadCookiesFromApi: (windowId: string) => void;
         saveModuleCookies: (windowId: string) => void;
         resetModuleCookies: (windowId: string) => void;
+        toasty: (windowId: string, options: ToastyOptions) => void;
     };
 }
 export declare type DefaultAreasStoreProps = Omit<AreasState, 'currentArea'>;

package/components/areas/contexts/DynamicMFParmsContext/store.d.ts

@@ -1,4 +1,4 @@
-import { DynamicMFParameters } from '..';
+import { DynamicMFParameters } from './types';
 export interface DynamicMFState {
     dynamicMFParameters: DynamicMFParameters;
     windowId: string;