@m4l/components 2.0.7 → 3.0.0

package/components/SplitLayout/{index.c2b8dcb8.js → index.b247de95.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { a0 as SplitLayoutRoot, a1 as SplitMaster, a2 as SplitDetail } from "../../styles/index.ccd8acc4.js";
+import { a0 as SplitLayoutRoot, a1 as SplitMaster, a2 as SplitDetail } from "../../styles/index.db9e7ddb.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";

package/components/ToastContainer/ToastContainer.d.ts

@@ -1,2 +1,2 @@
-import { ToastContainerProps } from './types';
+import type { ToastContainerProps } from './types';
 export declare const ToastContainer: (props: ToastContainerProps) => import("react/jsx-runtime").JSX.Element;

package/components/ToastContainer/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const TOAST_KEY_COMPONENT = "M4LToastContainer";
+export declare const DEFAULT_CLOSE_TIME = 30000;
+export declare const ICONS_PATH = "frontend/components/toast/assets/icons";

package/components/ToastContainer/helpers/toaster.d.ts

@@ -0,0 +1,4 @@
+import { ToastOptions } from 'react-toastify';
+import { Toaster } from '@m4l/core';
+declare function createToaster(containerId: ToastOptions['containerId']): Toaster;
+export default createToaster;

package/components/ToastContainer/icons.d.ts

@@ -0,0 +1,9 @@
+export declare const ICONS: {
+    readonly SUCCESS: "success.svg";
+    readonly INFO: "info.svg";
+    readonly WARNING: "warning.svg";
+    readonly ERROR: "error.svg";
+    readonly DEFAULT: "info.svg";
+    readonly CLOSE: "close.svg";
+    readonly PIN: "pin.svg";
+};

package/components/ToastContainer/index.c1657bde.js

@@ -0,0 +1,191 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ToastContainer as ToastContainer$1, toast } from "react-toastify";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.0faeade8.js";
+import "react-toastify/dist/ReactToastify.min.css";
+import { useState } from "react";
+import { useEnvironment } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { a3 as toastStyles } from "../../styles/index.db9e7ddb.js";
+import { I as Icon } from "../Icon/index.c06685f4.js";
+var ToastContainerSlots = /* @__PURE__ */ ((ToastContainerSlots2) => {
+  ToastContainerSlots2["root"] = "root";
+  ToastContainerSlots2["messageRoot"] = "messageRoot";
+  ToastContainerSlots2["messageHeader"] = "messageHeader";
+  ToastContainerSlots2["messageIconRoot"] = "messageIconRoot";
+  ToastContainerSlots2["messageIcon"] = "messageIcon";
+  ToastContainerSlots2["messageTitle"] = "messageTitle";
+  ToastContainerSlots2["messageDescription"] = "messageDescription";
+  ToastContainerSlots2["messageCloseButton"] = "messageCloseButton";
+  ToastContainerSlots2["messageCloseButtonIcon"] = "messageCloseButtonIcon";
+  ToastContainerSlots2["messagePinButton"] = "messagePinButton";
+  ToastContainerSlots2["messagePinButtonIcon"] = "messagePinButtonIcon";
+  return ToastContainerSlots2;
+})(ToastContainerSlots || {});
+const TOAST_KEY_COMPONENT = "M4LToastContainer";
+const DEFAULT_CLOSE_TIME = 3e4;
+const ICONS_PATH = "frontend/components/toast/assets/icons";
+const RootStyled = styled("div", {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.root
+})(toastStyles?.root);
+const MessageRootStyled = styled("div", {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.messageRoot
+})(toastStyles?.messageRoot);
+const MessageHeaderStyled = styled("div", {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.messageHeader
+})(toastStyles?.messageHeader);
+const MessageIconRootStyled = styled("div", {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.messageIconRoot
+})(toastStyles?.messageIconRoot);
+const MessageIconStyled = styled(Icon, {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.messageIcon
+})(toastStyles?.messageIcon);
+const MessageTitleStyled = styled("strong", {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.messageTitle
+})(toastStyles?.messageTitle);
+const MessageDescriptionStyled = styled("p", {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.messageDescription
+})(toastStyles?.messageDescription);
+const MessageCloseButtonStyled = styled("button", {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.messageCloseButton
+})(toastStyles?.messageCloseButton);
+const MessageCloseButtonIconStyled = styled(Icon, {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.messageCloseButtonIcon
+})(toastStyles?.messageCloseButtonIcon);
+const MessagePinButtonStyled = styled("button", {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.messagePinButton
+})(toastStyles?.messagePinButton);
+const MessagePinButtonIconStyled = styled(Icon, {
+  name: TOAST_KEY_COMPONENT,
+  slot: ToastContainerSlots.messagePinButtonIcon
+})(toastStyles?.messagePinButtonIcon);
+const ToastContainer = (props) => {
+  const { children, fixed = true, dataTestId, ...restProps } = props;
+  const ownerState = { fixed };
+  return /* @__PURE__ */ jsxs(
+    RootStyled,
+    {
+      ownerState,
+      ...getPropDataTestId(dataTestId, ToastContainerSlots.root),
+      children: [
+        /* @__PURE__ */ jsx(
+          ToastContainer$1,
+          {
+            stacked: true,
+            icon: false,
+            closeButton: false,
+            autoClose: DEFAULT_CLOSE_TIME,
+            theme: "light",
+            ...restProps
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+const ICONS = {
+  SUCCESS: "success.svg",
+  INFO: "info.svg",
+  WARNING: "warning.svg",
+  ERROR: "error.svg",
+  DEFAULT: "info.svg",
+  CLOSE: "close.svg",
+  PIN: "pin.svg"
+};
+const iconTypes = {
+  default: ICONS.DEFAULT,
+  info: ICONS.INFO,
+  success: ICONS.SUCCESS,
+  warning: ICONS.WARNING,
+  error: ICONS.ERROR
+};
+const ToastMessage = (props) => {
+  const [isPinned, setIsPinned] = useState(false);
+  const { type, title, description, closeToast, toastId, containerId } = props;
+  const ownerState = { type };
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const iconToShow = iconTypes?.[type || "default"] || iconTypes.default;
+  const iconTypePath = `${host_static_assets}/${environment_assets}/${ICONS_PATH}/${iconToShow}`;
+  const iconClosePath = `${host_static_assets}/${environment_assets}/${ICONS_PATH}/${ICONS.CLOSE}`;
+  const iconPinPath = `${host_static_assets}/${environment_assets}/${ICONS_PATH}/${ICONS.PIN}`;
+  function pinToast() {
+    if (toastId) {
+      toast.update(toastId, { containerId, autoClose: false, closeOnClick: false });
+      setIsPinned(true);
+    }
+  }
+  return /* @__PURE__ */ jsxs(MessageRootStyled, { ownerState, children: [
+    /* @__PURE__ */ jsxs(MessageHeaderStyled, { ownerState, children: [
+      /* @__PURE__ */ jsx(MessageIconRootStyled, { ownerState, children: /* @__PURE__ */ jsx(MessageIconStyled, { src: iconTypePath, ownerState }) }),
+      /* @__PURE__ */ jsx(MessageTitleStyled, { ownerState, children: title }),
+      !isPinned && /* @__PURE__ */ jsx(
+        MessagePinButtonStyled,
+        {
+          onClick: pinToast,
+          ownerState,
+          "aria-describedby": `${TOAST_KEY_COMPONENT}-pin`,
+          children: /* @__PURE__ */ jsx(MessagePinButtonIconStyled, { src: iconPinPath, size: "small", ownerState })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MessageCloseButtonStyled,
+        {
+          onClick: closeToast,
+          ownerState,
+          "aria-describedby": `${TOAST_KEY_COMPONENT}-close`,
+          children: /* @__PURE__ */ jsx(MessageCloseButtonIconStyled, { src: iconClosePath, size: "small", ownerState })
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ jsx(MessageDescriptionStyled, { ownerState, children: description })
+  ] });
+};
+function optionsToProps(toastProps, containerId) {
+  return {
+    containerId,
+    type: toastProps?.type,
+    toastId: toastProps?.toastId,
+    autoClose: toastProps?.autoClose
+  };
+}
+function triggerToast({ props, toastOptions, containerId, type = "default" }) {
+  const currentContainerId = containerId || toastOptions?.containerId;
+  const allProps = { ...props, ...optionsToProps(toastOptions, currentContainerId) };
+  const toastFn = type === "default" || type === void 0 ? toast : toast[type];
+  const id = toastFn(/* @__PURE__ */ jsx(ToastMessage, { ...allProps }), {
+    ...toastOptions,
+    containerId: currentContainerId
+  });
+  if (!toastOptions?.toastId) {
+    toast.update(id, {
+      containerId: currentContainerId,
+      render: /* @__PURE__ */ jsx(ToastMessage, { ...allProps, toastId: id })
+    });
+  }
+  return toastOptions?.toastId || id;
+}
+function createToaster(containerId) {
+  const toaster = (props, toastOptions = {}) => {
+    return triggerToast({ props, toastOptions, containerId });
+  };
+  toaster.success = (props, toastOptions = {}) => triggerToast({ props, toastOptions, type: "success", containerId });
+  toaster.info = (props, toastOptions = {}) => triggerToast({ props, toastOptions, type: "info", containerId });
+  toaster.warning = (props, toastOptions = {}) => triggerToast({ props, toastOptions, type: "warning", containerId });
+  toaster.error = (props, toastOptions = {}) => triggerToast({ props, toastOptions, type: "error", containerId });
+  return toaster;
+}
+export {
+  ToastContainer as T,
+  ToastMessage as a,
+  createToaster as c
+};

package/components/ToastContainer/index.d.ts

@@ -1,2 +1,3 @@
 export { ToastContainer } from './ToastContainer';
+export { default as createToaster } from './helpers/toaster';
 export { ToastMessage } from './subcomponents/ToastMessage';

package/components/ToastContainer/slots/ToastContainerEnum.d.ts

@@ -0,0 +1,13 @@
+export declare enum ToastContainerSlots {
+    root = "root",
+    messageRoot = "messageRoot",
+    messageHeader = "messageHeader",
+    messageIconRoot = "messageIconRoot",
+    messageIcon = "messageIcon",
+    messageTitle = "messageTitle",
+    messageDescription = "messageDescription",
+    messageCloseButton = "messageCloseButton",
+    messageCloseButtonIcon = "messageCloseButtonIcon",
+    messagePinButton = "messagePinButton",
+    messagePinButtonIcon = "messagePinButtonIcon"
+}

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

@@ -0,0 +1,2 @@
+export * from './toastContainerSlots';
+export { ToastContainerSlots } from './ToastContainerEnum';

package/components/ToastContainer/slots/toastContainerSlots.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const RootStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const MessageRootStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const MessageHeaderStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const MessageIconRootStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const MessageIconStyled: import("@emotion/styled").StyledComponent<Pick<import("../../Icon").IconProps, keyof import("../../Icon").IconProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, {}, {}>;
+export declare const MessageTitleStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>>, {}>;
+export declare const MessageDescriptionStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof import("react").ClassAttributes<HTMLParagraphElement> | keyof import("react").HTMLAttributes<HTMLParagraphElement>>, {}>;
+export declare const MessageCloseButtonStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import("react").ClassAttributes<HTMLButtonElement> | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, {}>;
+export declare const MessageCloseButtonIconStyled: import("@emotion/styled").StyledComponent<Pick<import("../../Icon").IconProps, keyof import("../../Icon").IconProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, {}, {}>;
+export declare const MessagePinButtonStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import("react").ClassAttributes<HTMLButtonElement> | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, {}>;
+export declare const MessagePinButtonIconStyled: import("@emotion/styled").StyledComponent<Pick<import("../../Icon").IconProps, keyof import("../../Icon").IconProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Partial<import("../types").ToastContainerProps> & Record<string, unknown> & {
+    ownerState: Partial<import("../types").ToastContainerProps> & Record<string, unknown>;
+}, {}, {}>;

package/components/ToastContainer/subcomponents/ToastMessage/ToastMessage.d.ts

@@ -0,0 +1,2 @@
+import { ToastMessageProps } from '../../types';
+export declare const ToastMessage: (props: ToastMessageProps) => import("react/jsx-runtime").JSX.Element;

package/components/ToastContainer/subcomponents/ToastMessage/index.d.ts

@@ -1,2 +1 @@
-import { ToastMessageProps } from './types';
-export declare const ToastMessage: (props: ToastMessageProps) => import("react/jsx-runtime").JSX.Element;
+export { ToastMessage } from './ToastMessage';

package/components/ToastContainer/types.d.ts

@@ -1,4 +1,40 @@
-import { ReactNode } from 'react';
-export interface ToastContainerProps {
-    children: ReactNode;
+import type { ReactNode } from 'react';
+import { ToastContentProps, ToastContainerProps as ToastContainerReactToastifyProps, ToastOptions } from 'react-toastify';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Theme } from '@mui/material/styles';
+import { ToasterFunctionProps } from '@m4l/core';
+import type { ToastContainerSlots } from './slots';
+import { TOAST_KEY_COMPONENT } from './constants';
+export declare type ToastTypes = 'info' | 'success' | 'warning' | 'error' | 'default';
+export interface ToastMessageProps extends Partial<ToastContentProps>, ToasterFunctionProps {
+    type?: ToastTypes;
+    toastId?: ToastOptions['toastId'];
+    containerId?: ToastOptions['containerId'];
+    autoClose?: ToastOptions['autoClose'];
 }
+export interface ToastContainerProps extends Omit<ToastContainerReactToastifyProps, 'containerId'> {
+    /**
+     * Se utiliza para identificar el `<ToastContainer />` cuando se trabaja con varios contenedores.
+     * También se utiliza para establecer el atributo `id`
+     */
+    containerId: Required<ToastOptions['containerId']>;
+    /**
+     * Cuando es `true` el mensaje sale con position `fixed`, útil para usar a nivel general de toda la aplicación.
+     * Cuando es `false` el mensaje sale con position `sticky`, útil para usar a nivel de ventana
+     *
+     * @default true
+     */
+    fixed?: boolean;
+    /** Key único para las pruebas del componente. */
+    dataTestId?: string;
+    children?: ReactNode;
+}
+export interface TriggerToast {
+    props: ToasterFunctionProps;
+    toastOptions: ToastOptions;
+    containerId: ToastOptions['containerId'];
+    type?: ToastOptions['type'];
+}
+export declare type ToastContainerOwnerState = ToastContainerProps;
+export declare type ToastContainerSlotsType = keyof typeof ToastContainerSlots;
+export declare type ToastContainerStyles = Partial<OverridesStyleRules<ToastContainerSlotsType, typeof TOAST_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/animate/LoadingScreen/{index.31af02f8.js → index.36a63311.js}

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { alpha } from "@mui/material/styles";
 import { Box } from "@mui/material";
-import { a4 as RootStyle } from "../../../styles/index.ccd8acc4.js";
+import { a4 as RootStyle } from "../../../styles/index.db9e7ddb.js";
 function LoadingScreen(props) {
   const { isDashboard, variant = "fullpage", ...other } = props;
   return /* @__PURE__ */ jsx(Fragment, { children: !isDashboard && /* @__PURE__ */ jsxs(RootStyle, { variant, ...other, children: [

package/components/animate/{index.160607f3.js → index.ceb7669a.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { forwardRef, useRef } from "react";
 import { IconButton, Box } from "@mui/material";
-import { a5 as AnimatedScrollRoot } from "../../styles/index.ccd8acc4.js";
+import { a5 as AnimatedScrollRoot } from "../../styles/index.db9e7ddb.js";
 const varSmall = {
   hover: { scale: 1.1 },
   tap: { scale: 0.95 }

package/components/areas/components/AreasAdmin/{index.cb60f940.js → index.b232384d.js}

@@ -1,31 +1,31 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { u as useAreasStore } from "../../hooks/useAreas/index.ba948f80.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.5a57ab76.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo } from "react";
 import * as Yup from "yup";
 import clsx from "clsx";
 import { generateUtilityClasses, useTheme } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.ebfbb70f.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index.f77cc2ab.js";
 import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants.66529246.js";
-import { I as ICONS } from "../../icons.8266ccc8.js";
+import { I as ICONS } from "../../icons.01fa3bcc.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { a6 as EditAreaHeader, a7 as AreasAdminRoot } from "../../../../styles/index.ccd8acc4.js";
+import { a6 as EditAreaHeader, a7 as AreasAdminRoot } from "../../../../styles/index.db9e7ddb.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.c24bd476.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.acc30d9b.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.5b124af3.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.ea4c273b.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.c1185f46.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.185199da.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.caf17392.js";
-import { P as Popover } from "../../../mui_extended/Popover/index.1fafd106.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.61dd3fc6.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.45b8db89.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.11d777bb.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.f9d41b99.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.80b98b98.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.f674be30.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.e67885bc.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.e58eb0c4.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.7b6c1ee3.js";
+import { P as Popover } from "../../../mui_extended/Popover/index.a7da93f1.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.8c0801e4.js";
+import { S as ScrollBar } from "../../../ScrollBar/index.11feff65.js";
 import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import { B as Button } from "../../../mui_extended/Button/index.ca15c36e.js";
-import { I as Icon } from "../../../Icon/index.0f315ccd.js";
+import { B as Button } from "../../../mui_extended/Button/index.3d14e3e9.js";
+import { I as Icon } from "../../../Icon/index.c06685f4.js";
 import { u as useOnClickOutside } from "../../index.4cc6a221.js";
 const areasAdminClasses = generateUtilityClasses(
   AREAS_ADMIN_CLASS_NAME,

package/components/areas/components/AreasViewer/classes/index.d.ts

@@ -1,5 +1,5 @@
 import { AreasViewerClasses } from './types';
 import { OwnerState } from '../../../contexts/AreasContext/types';
 export declare const areasViewerClasses: AreasViewerClasses;
-export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "resizeHandle" | "windowLinearProgressBar" | "windowContent" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "panelWindowsSeparator" | "loaderContainer" | "containerComponent" | "windowToastyContainer", string>;
+export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "resizeHandle" | "windowLinearProgressBar" | "windowContent" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "panelWindowsSeparator" | "loaderContainer" | "containerComponent", string>;
 export declare type ViwerClasses = ReturnType<typeof useAreasViewerUtilityClasses>;

package/components/areas/components/AreasViewer/classes/types.d.ts

@@ -17,14 +17,6 @@ export interface AreasViewerClasses {
     windowLinearProgressBar: string;
     windowPopupRoot: string;
     windowModalRoot: string;
-    windowToastiesContainer: string;
-    windowToastiesContainerTostys: string;
-    windowToastyContainer: string;
-    windowToastyMeesageButtonsContainer: string;
-    windowToastyMessage: string;
-    windowToastyButtonsContainer: string;
-    windowToastyPin: string;
-    windowToastyClose: string;
     panelWindowsRoot: string;
     panelWindowsButtonContainer: string;
     panelWindowsSeparator: string;

package/components/areas/components/AreasViewer/{index.350ee032.js → index.d45bfcd2.js}

@@ -1,35 +1,35 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { a8 as WindowRoot, a9 as WrapperWindowModal, aa as AreasViewerRoot } from "../../../../styles/index.ccd8acc4.js";
+import { a8 as WindowRoot, a9 as WrapperWindowModal, aa as AreasViewerRoot } from "../../../../styles/index.db9e7ddb.js";
 import { shallow } from "zustand/shallow";
 import React__default, { useMemo, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.ba948f80.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.5a57ab76.js";
 import { generateUtilityClasses, Skeleton } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.ebfbb70f.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index.f77cc2ab.js";
 import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.c24bd476.js";
+import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.11d777bb.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as ICONS } from "../../icons.8266ccc8.js";
+import { I as ICONS } from "../../icons.01fa3bcc.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.caf17392.js";
-import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.6d1605ff.js";
-import { I as Icon } from "../../../Icon/index.0f315ccd.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.61dd3fc6.js";
-import { M as MFLoader } from "../../../MFLoader/index.cc350d72.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.7b6c1ee3.js";
+import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.ca78fd37.js";
+import { I as Icon } from "../../../Icon/index.c06685f4.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.8c0801e4.js";
+import { M as MFLoader } from "../../../MFLoader/index.6af7729c.js";
 import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.992ae7a3.js";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.3d9ad0ad.js";
-import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.4092bb69.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
 import { g as getNameDataTestId } from "../../../../test/getNameDataTestId.0faeade8.js";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.1a5c5df1.js";
-import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.15d0ca85.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.dc0a1ce0.js";
+import { c as createToaster, T as ToastContainer } from "../../../ToastContainer/index.c1657bde.js";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.9edd84c3.js";
+import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.2f762118.js";
+import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.24857a52.js";
 import { useLocation } from "react-router-dom";
-import { L as LoadingError } from "../../../LoadingError/index.c5a70390.js";
-import { c as cjs } from "../../../../react-draggable.df62ccbd.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.0ffd46bc.js";
+import { L as LoadingError } from "../../../LoadingError/index.765ff885.js";
+import { c as cjs } from "../../../../react-draggable.079122b0.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.df2f3bb8.js";
 const areasViewerClasses = generateUtilityClasses(
   AREAS_VIEWER_CLASS_NAME,
   [
@@ -51,14 +51,6 @@ const areasViewerClasses = generateUtilityClasses(
     "windowLinearProgressRoot",
     "windowLinearProgressBar",
     "windowRootContainer",
-    "windowToastiesContainer",
-    "windowToastiesContainerTostys",
-    "windowToastyContainer",
-    "windowToastyMeesageButtonsContainer",
-    "windowToastyMessage",
-    "windowToastyButtonsContainer",
-    "windowToastyPin",
-    "windowToastyClose",
     "panelWindowsRoot",
     "panelWindowsButtonContainer",
     "panelWindowsSeparator",
@@ -111,14 +103,6 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     windowPopupRoot: ["windowPopupRoot"],
     windowModalRoot: ["windowModalRoot"],
     selectedWindow: ["selectedWindow"],
-    windowToastiesContainer: ["windowToastiesContainer"],
-    windowToastiesContainerTostys: ["windowToastiesContainerTostys"],
-    windowToastyContainer: ["windowToastiesContainer"],
-    windowToastyMeesageButtonsContainer: ["windowToastyMeesageButtonsContainer"],
-    windowToastyMessage: ["windowToastyMessage"],
-    windowToastyButtonsContainer: ["windowToastyButtonsContainer"],
-    windowToastyPin: ["windowToastyPin"],
-    windowToastyClose: ["windowToastyClose"],
     panelWindowsRoot: ["panelWindowsRoot"],
     panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
     panelWindowsSeparator: ["panelWindowsSeparator"],
@@ -405,65 +389,6 @@ const Component = (props) => {
   return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx("div", { className: areasViewerClasses.containerComponent, children: typeof component === "function" ? component({ windowTools, dynamicMFStore }) : component }) }) });
 };
 React__default.memo(Component);
-function Toasty(props) {
-  const { windowId, toastyId } = props;
-  const toasty = useAreasStore(
-    (state) => state.hashWindows[windowId].hashToasties[toastyId],
-    shallow
-  );
-  const { pinToast: pinToasty, closeToast: closeToasty } = useAreasStore(
-    (state) => state.windowActions,
-    shallow
-  );
-  const { host_static_assets, environment_assets } = useEnvironment();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(areasViewerClasses.windowToastyContainer, areasViewerClasses[toasty.type]),
-      children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyMeesageButtonsContainer, children: [
-        /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyMessage, children: [
-          toasty.timer ? /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: toasty.percentExecuted }) : null,
-          toasty.message
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyButtonsContainer, children: [
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              className: clsx(
-                areasViewerClasses.windowToastyPin,
-                toasty.timer ? null : areasViewerClasses.pinIn
-              ),
-              onClick: () => {
-                pinToasty(windowId, toastyId);
-              },
-              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_PIN}`
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              className: areasViewerClasses.windowToastyClose,
-              onClick: () => {
-                closeToasty(windowId, toastyId);
-              },
-              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_CLOSE}`
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
-function Toasties(props) {
-  const { windowId } = props;
-  const tosties = useAreasStore((state) => state.hashWindows[windowId].toasties, shallow);
-  if (tosties.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowToastiesContainer, children: /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowToastiesContainerTostys, children: tosties.map((t) => {
-    return /* @__PURE__ */ jsx(Toasty, { windowId, toastyId: t.id }, t.id);
-  }) }) });
-}
 const Window = (props) => {
   const { areaId, windowId } = props;
   const [emergeType, moduleId, winType] = useAreasStore((state) => {
@@ -495,7 +420,6 @@ const Window = (props) => {
     close,
     startProgress,
     stopProgress,
-    toast,
     setFnQueryClose
   } = useAreasStore((state) => state.windowActions, shallow);
   const { selectLayout } = useAreasStore((state) => state.areaActions, shallow);
@@ -522,9 +446,7 @@ const Window = (props) => {
       setFnQueryClose: (fnQueryClose) => {
         setFnQueryClose(windowId, fnQueryClose);
       },
-      toast: (toastyOptions) => {
-        toast(windowId, toastyOptions);
-      }
+      toast: createToaster(windowId)
     }),
     []
   );
@@ -557,7 +479,7 @@ const Window = (props) => {
       } : {},
       children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowRootContainer, children: [
         /* @__PURE__ */ jsx(Header, { areaId, windowId, emergeType }),
-        /* @__PURE__ */ jsx(Toasties, { windowId }),
+        /* @__PURE__ */ jsx(ToastContainer, { fixed: false, position: "top-center", containerId: windowId }),
         /* @__PURE__ */ jsxs(
           "div",
           {