@m4l/components 2.0.7 → 3.0.0

package/styles/{index.ccd8acc4.js → index.db9e7ddb.js}

@@ -1,14 +1,14 @@
 import { styled, alpha, Skeleton, Popover, IconButton, Stack, Tabs, Dialog, ListItemText, ListItemButton } from "@mui/material";
 import { styled as styled$1, alpha as alpha$1 } from "@mui/material/styles";
 import SimpleBarReact from "simplebar-react";
-import { h as gridLayoutClasses } from "../components/GridLayout/index.2b9bc85c.js";
-import { a as ResizableBox } from "../react-resizable.c746880c.js";
-import { a as areasAdminClasses } from "../components/areas/components/AreasAdmin/index.cb60f940.js";
-import { a as areasViewerClasses } from "../components/areas/components/AreasViewer/index.350ee032.js";
-import { g as gpsToolsClasses } from "../components/maps/components/GpsTools/index.7628172f.js";
-import { R as RHFormProvider } from "../contexts/RHFormContext/index.acc30d9b.js";
-import { S as Stack$1 } from "../components/mui_extended/Stack/index.b8c3b40b.js";
-import { I as Image } from "../components/Image/index.32b58ce4.js";
+import { h as gridLayoutClasses } from "../components/GridLayout/index.dd291886.js";
+import { a as ResizableBox } from "../react-resizable.330f1499.js";
+import { a as areasAdminClasses } from "../components/areas/components/AreasAdmin/index.b232384d.js";
+import { a as areasViewerClasses } from "../components/areas/components/AreasViewer/index.d45bfcd2.js";
+import { g as gpsToolsClasses } from "../components/maps/components/GpsTools/index.c1198f79.js";
+import { R as RHFormProvider } from "../contexts/RHFormContext/index.f9d41b99.js";
+import { S as Stack$1 } from "../components/mui_extended/Stack/index.99de8138.js";
+import { I as Image } from "../components/Image/index.ae542f70.js";
 const RootStyle$1 = styled("div", {
   shouldForwardProp: (props) => props !== "variant"
 })(({ theme, variant }) => ({
@@ -839,9 +839,9 @@ const WindowRoot = styled("div")`
   }
 
   // windowHeader
-  /* 
+  /*
     &.${areasViewerClasses.loading} .${areasViewerClasses.windowHeader} {
-        border-bottom: 2px solid red !important; 
+        border-bottom: 2px solid red !important;
     }
     */
   // windowHeaderTitle
@@ -880,41 +880,202 @@ const WindowRoot = styled("div")`
     padding: 16px;
   }
 
-  // windowToastiesContainer
-  & .${areasViewerClasses.windowToastiesContainer} {
-    padding: 4px;
-  }
-
-  // windowToastyContainer
-  & .${areasViewerClasses.windowToastyContainer} {
-    display: flex;
-    flex-direction: column;
-  }
-  // windowToastyContainer
-  & .${areasViewerClasses.windowToastyContainer}.${areasViewerClasses.success} {
-    background-color: ${(props) => props.theme.vars.palette.success.main};
-  }
-
-  // windowToastyMeesageButtonsContainer
-  & .${areasViewerClasses.windowToastyMeesageButtonsContainer} {
-    display: flex;
-  }
   & .MuiLinearProgress-root {
     width: 100%;
   }
 
-  // windowToastyMessage
-  & .${areasViewerClasses.windowToastyMessage} {
-    flex-grow: 1;
-  }
-
-  // windowToastyContainer
-  & .${areasViewerClasses.windowToastyPin}.${areasViewerClasses.pinIn} {
-    border: 1px solid red;
-  }
-
   ${(props) => props.theme.components?.M4LAreasViewerWindow?.styleOverrides}
 `;
+const toastStyles = {
+  root: ({ theme, ownerState }) => ({
+    "--toastify-color-light": theme.vars.palette.background.default,
+    "--toastify-color-dark": theme.vars.palette.background.default,
+    "--toastify-color-info": theme.vars.palette.info.main,
+    "--toastify-color-success": theme.vars.palette.success.main,
+    "--toastify-color-warning": theme.vars.palette.warning.main,
+    "--toastify-color-error": theme.vars.palette.error.main,
+    "--toastify-color-transparent": "rgba(255, 255, 255, 0.7)",
+    "--toastify-icon-color-info": "var(--toastify-color-info)",
+    "--toastify-icon-color-success": "var(--toastify-color-success)",
+    "--toastify-icon-color-warning": "var(--toastify-color-warning)",
+    "--toastify-icon-color-error": "var(--toastify-color-error)",
+    "--toastify-toast-width": "320px",
+    "--toastify-toast-background": "#fff",
+    "--toastify-toast-min-height": "64px",
+    "--toastify-toast-max-height": "800px",
+    "--toastify-font-family": "sans-serif",
+    "--toastify-z-index": "9999",
+    "--toastify-text-color-light": "#757575",
+    "--toastify-text-color-dark": "#fff",
+    "--toastify-text-color-info": "#fff",
+    "--toastify-text-color-success": "#fff",
+    "--toastify-text-color-warning": "#fff",
+    "--toastify-text-color-error": "#fff",
+    "--toastify-spinner-color": "#616161",
+    "--toastify-spinner-color-empty-area": "#e0e0e0",
+    "--toastify-color-progress-light": "var(--toastify-color-info)",
+    "--toastify-color-progress-dark": "var(--toastify-color-info)",
+    "--toastify-color-progress-info": "var(--toastify-color-info)",
+    "--toastify-color-progress-success": "var(--toastify-color-success)",
+    "--toastify-color-progress-warning": "var(--toastify-color-warning)",
+    "--toastify-color-progress-error": "var(--toastify-color-error)",
+    "--toastify-toast-bd-radius": "8px",
+    "--toastify-color-progress-bgo": ".2",
+    ...ownerState?.fixed === false ? {
+      top: 0,
+      position: "absolute",
+      zIndex: theme.vars.zIndex.snackbar,
+      "@supports (position: sticky)": {
+        position: "sticky"
+      }
+    } : {},
+    "& .Toastify": {
+      margin: 0,
+      padding: 0,
+      height: 0
+    },
+    "& .Toastify__toast-container": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px",
+      ...ownerState?.fixed === false ? {
+        top: "4px",
+        position: "absolute"
+      } : {},
+      [theme.breakpoints.down(480)]: {
+        width: "100%",
+        minWidth: "100%",
+        padding: "0"
+      }
+    },
+    ".Toastify__toast-container--top-left": {},
+    ".Toastify__toast-container--top-center": {},
+    ".Toastify__toast-container--top-right": {},
+    ".Toastify__toast-container--bottom-left": {},
+    ".Toastify__toast-container--bottom-center": {},
+    ".Toastify__toast-container--bottom-right": {},
+    "& .Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > *": {
+      opacity: 0.2
+    },
+    "& .Toastify__toast": {
+      minHeight: "min-content",
+      margin: "0",
+      padding: "0",
+      backgroundColor: theme.vars.palette.background.default,
+      boxShadow: theme.customShadows?.z3,
+      borderRadius: "4px",
+      [theme.breakpoints.down(480)]: {
+        margin: "1%",
+        width: "98% !important"
+      }
+    },
+    ".Toastify__toast--rtl": {},
+    "& .Toastify__toast-body": {
+      margin: "0px",
+      padding: "0px"
+    },
+    "& .Toastify__toast-icon": {},
+    "& .Toastify__toast-theme--dark": {},
+    "& .Toastify__toast-theme--light": {},
+    "& .Toastify__toast-theme--colored.Toastify__toast--default": {},
+    "& .Toastify__toast-theme--colored.Toastify__toast--info": {},
+    "& .Toastify__toast-theme--colored.Toastify__toast--success": {},
+    "& .Toastify__toast-theme--colored.Toastify__toast--warning": {},
+    "& .Toastify__toast-theme--colored.Toastify__toast--error": {},
+    "& .Toastify__progress-bar--wrp": {
+      position: "absolute",
+      top: 0,
+      height: "2px",
+      borderTopLeftRadius: "2px",
+      borderTopRightRadius: "2px",
+      borderBottomLeftRadius: "0",
+      borderBottomRightRadius: "0",
+      overflow: "hidden"
+    },
+    "& .Toastify__progress-bar": {
+      borderTopLeftRadius: "2px",
+      borderBottomLeftRadius: "0",
+      borderBottomRightRadius: "0"
+    },
+    "& .Toastify__progress-bar--rtl": {},
+    "& .Toastify__progress-bar-theme--light": {},
+    "& .Toastify__progress-bar-theme--dark": {},
+    "& .Toastify__progress-bar--info": {},
+    "& .Toastify__progress-bar--success": {},
+    "& .Toastify__progress-bar--warning": {},
+    "& .Toastify__progress-bar--error": {}
+  }),
+  messageRoot: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    padding: "4px"
+  },
+  messageHeader: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    height: "24px",
+    minHeight: "24px",
+    gap: "4px"
+  },
+  messageIconRoot: {},
+  messageIcon: ({ theme, ownerState }) => ({
+    "&.M4LIcon-root": {
+      height: "24px",
+      width: "24px",
+      "& > .M4LIcon-icon": {
+        backgroundColor: ownerState?.type === "info" ? theme.vars.palette.info.main : ownerState?.type === "success" ? theme.vars.palette.success.main : ownerState?.type === "warning" ? theme.vars.palette.warning.main : ownerState?.type === "error" ? theme.vars.palette.error.main : theme.vars.palette.info.main
+      }
+    }
+  }),
+  messageTitle: ({ theme }) => ({
+    flex: 1,
+    paddingLeft: "4px",
+    ...theme.colorSchemes.finalTheme.typography.bodyDens,
+    fontWeight: theme.colorSchemes.finalTheme.typography.fontWeightMedium,
+    color: theme.vars.palette.text.primary
+  }),
+  messageDescription: ({ theme }) => ({
+    ...theme.colorSchemes.finalTheme.typography.bodyDens,
+    fontWeight: theme.colorSchemes.finalTheme.typography.fontWeightRegular,
+    color: theme.vars.palette.text.primary,
+    padding: "0 4px 4px 30px"
+  }),
+  messageCloseButton: {
+    border: "none",
+    backgroundColor: "transparent",
+    margin: 0,
+    padding: 0
+  },
+  messageCloseButtonIcon: ({ theme }) => ({
+    "&.M4LIcon-root": {
+      height: "24px",
+      width: "24px",
+      "& > .M4LIcon-icon": {
+        backgroundColor: theme.vars.palette.text.primary,
+        fontsize: "16px"
+      }
+    }
+  }),
+  messagePinButton: {
+    border: "none",
+    backgroundColor: "transparent",
+    margin: 0,
+    padding: 0
+  },
+  messagePinButtonIcon: ({ theme }) => ({
+    "&.M4LIcon-root": {
+      height: "24px",
+      width: "24px",
+      "& > .M4LIcon-icon": {
+        backgroundColor: theme.vars.palette.text.primary,
+        fontsize: "16px"
+      }
+    }
+  })
+};
 styled$1("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
@@ -1252,9 +1413,6 @@ const SplitDetail = styled("div")(() => ({
   top: "0px",
   bottom: "0px"
 }));
-const ToastContainerRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LToastContainer?.styleOverrides
-}));
 const SideBarRoot = styled$1("div")(({ theme }) => ({
   ...theme.components?.M4LSideBar?.styleOverrides
 }));
@@ -1432,7 +1590,7 @@ export {
   SplitLayoutRoot as a0,
   SplitMaster as a1,
   SplitDetail as a2,
-  ToastContainerRoot as a3,
+  toastStyles as a3,
   RootStyle$1 as a4,
   AnimatedScrollRoot as a5,
   EditAreaHeader as a6,

package/test/getNameDataTestId.d.ts

@@ -4,7 +4,7 @@ export declare const getNameDataTestId: <T>(ELEMENT_PREFIX: string, ELEMENT_KEY:
  * @param prefix -
  * @param keyName
  */
-export declare function getPropDataTestId(prefix: string, keyName: string): {
+export declare function getPropDataTestId(prefix: string | undefined, keyName: string | undefined): {
     "data-testid": string;
 } | {
     "data-testid"?: undefined;

package/utils/index.d.ts

@@ -3,6 +3,6 @@ import { Palette, Theme } from '@mui/material/styles';
 import { VariantColor } from './types';
 export declare function isValidDate(d: Date): boolean;
 export declare const getPaletteColor: (palette: Palette, s: string) => any;
-export declare const getVariantColor: (variant: VariantColor | undefined) => "error" | "warning" | "info" | "primary";
+export declare const getVariantColor: (variant: VariantColor | undefined) => "error" | "info" | "warning" | "primary";
 export declare const getThemeVariantColor: (theme: Theme, variant: VariantColor | undefined) => string;
 export declare function getComponentUtilityClass(componentName: string): (slot: string) => string;

package/vite-env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="vite/client" />
-/// <reference types="vitest" />
-/// <reference types="vitest/globals" />
-/// <reference types="vitest/importMeta" />
+/// <reference types="vite/client" />
+/// <reference types="vitest" />
+/// <reference types="vitest/globals" />
+/// <reference types="vitest/importMeta" />

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

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

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

@@ -1,8 +0,0 @@
-import { ToastClassesType } from './types';
-export declare const toastClasses: ToastClassesType;
-export declare const getToastClassesByState: () => {
-    root: string;
-    toastMessageContainer: string;
-    toastMessageIcon: string;
-    toastMessageInfo: string;
-};

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

@@ -1,9 +0,0 @@
-import { getToastClassesByState } from '.';
-export interface ToastClassesType {
-    root: string;
-    toastMessageContainer: string;
-    toastMessageIcon: string;
-    toastMessageInfo: string;
-}
-export declare type ToastClassesKey = keyof ToastClassesType;
-export declare type Classes = ReturnType<typeof getToastClassesByState>;

package/components/ToastContainer/index.ed566312.js

@@ -1,69 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { a3 as ToastContainerRoot } from "../../styles/index.ccd8acc4.js";
-import { ToastContainer as ToastContainer$1 } from "react-toastify";
-import { generateUtilityClasses } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.ebfbb70f.js";
-import { useEnvironment } from "@m4l/core";
-import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.0f315ccd.js";
-const componentName = "M4LToastContainer";
-const toastClasses = generateUtilityClasses(
-  componentName,
-  [
-    "root",
-    "toastMessageContainer",
-    "toastMessageIcon",
-    "toastMessageInfo"
-  ]
-);
-const getToastClassesByState = () => {
-  const slots = {
-    root: ["root"],
-    toastMessageContainer: ["toastMessageContainer"],
-    toastMessageIcon: ["toastMessageIcon"],
-    toastMessageInfo: ["toastMessageInfo"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
-  return {
-    ...composedClasses
-  };
-};
-const ToastContainer = (props) => {
-  const { children } = props;
-  const classes = getToastClassesByState();
-  return /* @__PURE__ */ jsxs(ToastContainerRoot, { className: classes.root, children: [
-    /* @__PURE__ */ jsx(ToastContainer$1, {}),
-    children
-  ] });
-};
-const ToastMessage = (props) => {
-  const { messageType, children } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const iconSuccess = `${host_static_assets}/${environment_assets}/frontend/components/toast/assets/icons/success.svg`;
-  const iconInfo = `${host_static_assets}/${environment_assets}/frontend/components/toast/assets/icons/info.svg`;
-  const iconWarning = `${host_static_assets}/${environment_assets}/frontend/components/toast/assets/icons/warning.svg`;
-  const iconError = `${host_static_assets}/${environment_assets}/frontend/components/toast/assets/icons/error.svg`;
-  const finalIcon = useMemo(() => {
-    switch (messageType) {
-      case "info":
-        return iconInfo;
-      case "success":
-        return iconSuccess;
-      case "warning":
-        return iconWarning;
-      case "error":
-        return iconError;
-      default:
-        return "";
-    }
-  }, [messageType]);
-  return /* @__PURE__ */ jsxs("div", { className: toastClasses.toastMessageContainer, children: [
-    /* @__PURE__ */ jsx("div", { className: toastClasses.toastMessageIcon, children: /* @__PURE__ */ jsx(Icon, { src: finalIcon }) }),
-    /* @__PURE__ */ jsx("div", { className: toastClasses.toastMessageInfo, children })
-  ] });
-};
-export {
-  ToastContainer as T,
-  ToastMessage as a
-};

package/components/ToastContainer/styles.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const ToastContainerRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-export interface ToastMessageProps {
-    messageType: 'info' | 'success' | 'warning' | 'error' | 'default';
-    children: ReactNode;
-}

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Toasties/index.d.ts

@@ -1,5 +0,0 @@
-declare type ToastiesProps = {
-    windowId: string;
-};
-export declare function Toasties(props: ToastiesProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Toasties/subcomponents/Toasty/index.d.ts

@@ -1,6 +0,0 @@
-declare type ToastyProps = {
-    windowId: string;
-    toastyId: number;
-};
-export declare function Toasty(props: ToastyProps): import("react/jsx-runtime").JSX.Element;
-export {};