@m4l/layouts 0.1.51 → 0.1.53

package/components/MFHostApp/index.401a303e.js

@@ -0,0 +1,79 @@
+import { unstable_HistoryRouter } from "react-router-dom";
+import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
+import { LocalesProvider, HostThemeProvider, ResponsiveContainerProvider, FormatterProvider } from "@m4l/graphics";
+import { WindowToolsMFProvider, DynamicMFParmsProvider } from "@m4l/components";
+import { B as BaseModule } from "../BaseModule/index.8ff0193e.js";
+import { jsx } from "react/jsx-runtime";
+function MFHostApp(props) {
+  const {
+    children,
+    currentLocale,
+    hostTheme,
+    environment,
+    hostTools,
+    axiosOperation,
+    formatters,
+    isAuth = true,
+    moduleId,
+    moduleNameField,
+    skeletonFlags,
+    privileges,
+    componentsDictionary,
+    dynamicMFStore,
+    windowTools,
+    observedDivRef
+  } = props;
+  return /* @__PURE__ */ jsx(EnvironmentProvider, {
+    ...environment,
+    children: /* @__PURE__ */ jsx(HostToolsProvider, {
+      ...hostTools,
+      children: /* @__PURE__ */ jsx(NetworkProvider, {
+        axiosOperation,
+        children: /* @__PURE__ */ jsx(LocalesProvider, {
+          isMicroFrontEnd: true,
+          localeHost: currentLocale,
+          children: /* @__PURE__ */ jsx(HostThemeProvider, {
+            isMicroFrontEnd: true,
+            ...hostTheme,
+            children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
+              observedDivRef,
+              children: /* @__PURE__ */ jsx(unstable_HistoryRouter, {
+                history: hostTools.history,
+                children: /* @__PURE__ */ jsx(DomainCountryProvider, {
+                  isMicroFrontEnd: true,
+                  id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
+                  currency: formatters.currencyFormatter.code,
+                  currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
+                  decimal_symbol: formatters.numberFormatter.decimalSymbol,
+                  thousands_symbol: formatters.numberFormatter.thousandsSymbol,
+                  children: /* @__PURE__ */ jsx(BaseModule, {
+                    isAuth,
+                    moduleId,
+                    moduleNameField,
+                    componentsDictionary,
+                    skeletonFlags,
+                    privileges,
+                    children: /* @__PURE__ */ jsx(FormatterProvider, {
+                      isMicroFrontEnd: true,
+                      ...formatters,
+                      children: /* @__PURE__ */ jsx(WindowToolsMFProvider, {
+                        ...windowTools,
+                        children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
+                          store: dynamicMFStore,
+                          children
+                        })
+                      })
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+}
+export {
+  MFHostApp as M
+};

package/components/MFHostApp/types.d.ts

@@ -12,5 +12,6 @@ export interface ByHostProps {
     formatters: Formatters;
     dynamicMFStore: DynamicMFStore;
     windowTools: WindowToolsMF;
+    observedDivRef: Element | Text | null;
 }
 export declare type MFHostAppProps = ByHostProps & BaseModuleProps;

package/components/MFIsolationApp/{index.a9aba4f3.js → index.accbc94b.js}

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useCallback } from "react";
 import { unstable_HistoryRouter } from "react-router-dom";
 import { ToastContainer, toast } from "react-toastify";
-import { HostThemeProvider, GlobalStyles, FormatterProvider, LocalesProvider, getLocaleFromNetwork } from "@m4l/graphics";
+import { HostThemeProvider, GlobalStyles, FormatterProvider, LocalesProvider, getLocaleFromNetwork, ResponsiveContainerProvider } from "@m4l/graphics";
 import { A as AuthProvider } from "../../contexts/AuthContext/index.6f966215.js";
 import { DomainCountryProvider, EnvironmentProvider, HostToolsProvider, NetworkProvider, axiosOperation } from "@m4l/core";
 import { createBrowserHistory } from "history";
@@ -88,7 +88,8 @@ function MFIsolationApp(props) {
     componentsDictionary,
     onLoad,
     activeAreasNetwork = false,
-    activeCookiesFromNetwork = false
+    activeCookiesFromNetwork = false,
+    observedDivRef
   } = props;
   const eventEmitter = useMemo(() => new EventEmitter(), []);
   const events_add_listener = useCallback((eventName, handler) => {
@@ -159,7 +160,10 @@ function MFIsolationApp(props) {
                     onSelectLayout: (modId) => {
                       console.log("onSelectLayout", modId);
                     },
-                    children
+                    children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
+                      observedDivRef,
+                      children
+                    })
                   })
                 })
               })

package/components/MFIsolationApp/types.d.ts

@@ -9,4 +9,5 @@ export declare type MFIsolationAppProps = BaseModuleProps & {
     onLoad: () => void;
     activeAreasNetwork?: boolean;
     activeCookiesFromNetwork?: boolean;
+    observedDivRef: Element | Text | null;
 };

package/components/MFNoAuthApp/types.d.ts

@@ -5,4 +5,6 @@ export interface ByHostProps {
     formatters: Formatters;
     windowTools: WindowToolsMF;
 }
-export declare type MFNoAuthAppProps = ByHostProps & BaseModuleProps;
+export interface MFNoAuthAppProps extends ByHostProps, BaseModuleProps {
+    observedDivRef: Element | Text | null;
+}

package/components/{index.717728f9.js → index.8cbf6c63.js}

@@ -1,7 +1,10 @@
 import { DomainCountryProvider } from "@m4l/core";
-import { FormatterProvider } from "@m4l/graphics";
+import { FormatterProvider, ResponsiveContainerProvider } from "@m4l/graphics";
 import { B as BaseModule } from "./BaseModule/index.8ff0193e.js";
 import { jsx } from "react/jsx-runtime";
+import "./MFIsolationApp/index.accbc94b.js";
+import "@m4l/components";
+import "react-router-dom";
 function MFNoAuthApp(props) {
   const {
     children,
@@ -11,7 +14,8 @@ function MFNoAuthApp(props) {
     skeletonFlags,
     privileges,
     componentsDictionary,
-    isAuth
+    isAuth,
+    observedDivRef
   } = props;
   const domianCountry = {
     id: 1,
@@ -33,7 +37,10 @@ function MFNoAuthApp(props) {
       children: /* @__PURE__ */ jsx(FormatterProvider, {
         isMicroFrontEnd: true,
         ...formatters,
-        children
+        children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
+          observedDivRef,
+          children
+        })
       })
     })
   });

package/contexts/index.b46a2699.js

@@ -0,0 +1 @@
+import "./AuthContext/index.6f966215.js";

package/hooks/index.a4c94ade.js

@@ -0,0 +1,4 @@
+import "react";
+import "../layouts/MasterDetailLayout/index.748f7ada.js";
+import "../contexts/AuthContext/index.6f966215.js";
+import "../layouts/ModuleLayout/index.e7218171.js";

package/index.js

@@ -1,11 +1,11 @@
-import { M } from "./components/MFIsolationApp/index.a9aba4f3.js";
-import { M as M2 } from "./components/index.717728f9.js";
-import { M as M3 } from "./components/MFHostApp/index.f1572ad5.js";
+import { M } from "./components/MFIsolationApp/index.accbc94b.js";
+import { M as M2 } from "./components/index.8cbf6c63.js";
+import { M as M3 } from "./components/MFHostApp/index.401a303e.js";
 import { B } from "./components/BaseModule/index.8ff0193e.js";
 import { a, A } from "./contexts/AuthContext/index.6f966215.js";
 import { a as a2, d, g } from "./layouts/ModuleLayout/index.e7218171.js";
 import { a as a3, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index.748f7ada.js";
-import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.debab3d6.js";
+import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.f831ed51.js";
 import { u } from "./hooks/useMasterDetail/index.d45f2a86.js";
 import { u as u2 } from "./hooks/useAuth/index.cb6a3420.js";
 import { u as u3 } from "./hooks/useModule/index.b5f598b1.js";

package/layouts/NoAuthModuleLayout/{index.debab3d6.js → index.f831ed51.js}

@@ -1,7 +1,8 @@
 import { useResponsiveDesktop, useLocales } from "@m4l/graphics";
 import { LanguagePopover, IconButton, Image, Typography, Stack, ScrollBar, HelmetPage } from "@m4l/components";
-import { styled, alpha } from "@mui/material/styles";
+import { styled } from "@mui/material";
 import { useBase, useModuleDictionary, useDomain, useEnvironment, BaseProvider, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider } from "@m4l/core";
+import { styled as styled$1, alpha } from "@mui/material/styles";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 const InnerModuleRoot = styled("div")(({
   theme
@@ -16,7 +17,7 @@ const InnerModuleRoot = styled("div")(({
     padding: "0px"
   }
 }));
-const DesktopContentRoot = styled("div")(({ theme }) => ({
+const DesktopContentRoot = styled$1("div")(({ theme }) => ({
   display: "flex",
   borderRadius: "16px",
   backgroundColor: theme.palette.background.neutral,
@@ -41,7 +42,7 @@ const DesktopContentRoot = styled("div")(({ theme }) => ({
     zIndex: 1
   }
 }));
-const DesktopBanner = styled("div")(({ theme }) => ({
+const DesktopBanner = styled$1("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   justifyContent: "center",
@@ -67,7 +68,7 @@ const DesktopBanner = styled("div")(({ theme }) => ({
     margin: "auto"
   }
 }));
-const ContainerLogo$1 = styled("div")(({ theme }) => ({
+const ContainerLogo$1 = styled$1("div")(({ theme }) => ({
   display: "flex",
   width: "84px",
   height: "84px",
@@ -81,19 +82,19 @@ const ContainerLogo$1 = styled("div")(({ theme }) => ({
     borderRadius: "6px"
   }
 }));
-const CompanyName$1 = styled("div")(() => ({
+const CompanyName$1 = styled$1("div")(() => ({
   display: "flex",
   flexDirection: "column",
   gap: "5px",
   width: "100%"
 }));
-const CompanyLeyend = styled("div")(() => ({
+const CompanyLeyend = styled$1("div")(() => ({
   display: "flex",
   flexDirection: "column",
   gap: "5px",
   width: "100%"
 }));
-const FormContent$1 = styled("div")(() => ({
+const FormContent$1 = styled$1("div")(() => ({
   display: "flex",
   flexDirection: "column",
   padding: "0 60px 0 80px",
@@ -102,18 +103,18 @@ const FormContent$1 = styled("div")(() => ({
   height: "auto",
   gap: "20px"
 }));
-const WrapperFormContent$1 = styled("div")(() => ({
+const WrapperFormContent$1 = styled$1("div")(() => ({
   display: "flex",
   width: "100%",
   height: "100%"
 }));
-const ContainerModuleName$1 = styled("div")(() => ({
+const ContainerModuleName$1 = styled$1("div")(() => ({
   display: "flex",
   flexDirection: "column",
   width: "100%",
   gap: "4px"
 }));
-styled("div")(() => ({
+styled$1("div")(() => ({
   display: "flex",
   width: "100%",
   height: "100%",
@@ -202,7 +203,7 @@ const DesktopContent = () => {
     })]
   });
 };
-const MobileContentRoot = styled("div")(({ theme }) => ({
+const MobileContentRoot = styled$1("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   width: "100%",
@@ -211,7 +212,7 @@ const MobileContentRoot = styled("div")(({ theme }) => ({
   padding: "12px",
   gap: "32px"
 }));
-const MobileBanner = styled("div")(({ theme }) => ({
+const MobileBanner = styled$1("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   padding: "12px",
@@ -246,10 +247,10 @@ const MobileBanner = styled("div")(({ theme }) => ({
     margin: "auto"
   }
 }));
-styled("div")(() => ({
+styled$1("div")(() => ({
   display: "flex"
 }));
-const ContainerLogo = styled("div")(({ theme }) => ({
+const ContainerLogo = styled$1("div")(({ theme }) => ({
   display: "flex",
   width: "52px",
   height: "52px",
@@ -263,12 +264,12 @@ const ContainerLogo = styled("div")(({ theme }) => ({
     borderRadius: "6px"
   }
 }));
-const CompanyName = styled("div")(() => ({
+const CompanyName = styled$1("div")(() => ({
   display: "flex",
   flexDirection: "column",
   width: "100%"
 }));
-const FormContent = styled("div")(() => ({
+const FormContent = styled$1("div")(() => ({
   display: "flex",
   flexDirection: "column",
   padding: "12px",
@@ -276,13 +277,13 @@ const FormContent = styled("div")(() => ({
   width: "100%",
   gap: "20px"
 }));
-const WrapperFormContent = styled("div")(() => ({
+const WrapperFormContent = styled$1("div")(() => ({
   display: "flex",
   width: "100%",
   height: "100%",
   overflow: "hidden"
 }));
-const ContainerModuleName = styled("div")(() => ({
+const ContainerModuleName = styled$1("div")(() => ({
   display: "flex",
   flexDirection: "column",
   width: "100%",

package/layouts/index.70ea007c.js

@@ -0,0 +1,8 @@
+import "./ModuleLayout/index.e7218171.js";
+import "@m4l/components";
+import "react";
+import "@m4l/core";
+import "./MasterDetailLayout/index.748f7ada.js";
+import "@m4l/graphics";
+import "react/jsx-runtime";
+import "./NoAuthModuleLayout/index.f831ed51.js";

package/m4l_layouts/types.d.ts

@@ -0,0 +1 @@
+

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "license": "UNLICENSED",
   "dependencies": {
-    "@m4l/components": "^0.2.16",
-    "@m4l/core": "^0.1.52",
-    "@m4l/graphics": "^0.1.46",
-    "@m4l/styles": "^0.0.38",
+    "@m4l/components": "*",
+    "@m4l/core": "*",
+    "@m4l/graphics": "*",
+    "@m4l/styles": "*",
     "@mui/material": "5.10.4"
   },
   "peerDependencies": {

package/vite-env.d.ts

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

package/components/MFHostApp/index.f1572ad5.js

@@ -1,75 +0,0 @@
-import { unstable_HistoryRouter } from "react-router-dom";
-import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
-import { LocalesProvider, HostThemeProvider, FormatterProvider } from "@m4l/graphics";
-import { WindowToolsMFProvider, DynamicMFParmsProvider } from "@m4l/components";
-import { B as BaseModule } from "../BaseModule/index.8ff0193e.js";
-import { jsx } from "react/jsx-runtime";
-function MFHostApp(props) {
-  const {
-    children,
-    currentLocale,
-    hostTheme,
-    environment,
-    hostTools,
-    axiosOperation,
-    formatters,
-    isAuth = true,
-    moduleId,
-    moduleNameField,
-    skeletonFlags,
-    privileges,
-    componentsDictionary,
-    dynamicMFStore,
-    windowTools
-  } = props;
-  return /* @__PURE__ */ jsx(EnvironmentProvider, {
-    ...environment,
-    children: /* @__PURE__ */ jsx(HostToolsProvider, {
-      ...hostTools,
-      children: /* @__PURE__ */ jsx(NetworkProvider, {
-        axiosOperation,
-        children: /* @__PURE__ */ jsx(LocalesProvider, {
-          isMicroFrontEnd: true,
-          localeHost: currentLocale,
-          children: /* @__PURE__ */ jsx(HostThemeProvider, {
-            isMicroFrontEnd: true,
-            ...hostTheme,
-            children: /* @__PURE__ */ jsx(unstable_HistoryRouter, {
-              history: hostTools.history,
-              children: /* @__PURE__ */ jsx(DomainCountryProvider, {
-                isMicroFrontEnd: true,
-                id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
-                currency: formatters.currencyFormatter.code,
-                currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
-                decimal_symbol: formatters.numberFormatter.decimalSymbol,
-                thousands_symbol: formatters.numberFormatter.thousandsSymbol,
-                children: /* @__PURE__ */ jsx(BaseModule, {
-                  isAuth,
-                  moduleId,
-                  moduleNameField,
-                  componentsDictionary,
-                  skeletonFlags,
-                  privileges,
-                  children: /* @__PURE__ */ jsx(FormatterProvider, {
-                    isMicroFrontEnd: true,
-                    ...formatters,
-                    children: /* @__PURE__ */ jsx(WindowToolsMFProvider, {
-                      ...windowTools,
-                      children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
-                        store: dynamicMFStore,
-                        children
-                      })
-                    })
-                  })
-                })
-              })
-            })
-          })
-        })
-      })
-    })
-  });
-}
-export {
-  MFHostApp as M
-};

package/contexts/index.ee173661.js

@@ -1 +0,0 @@
-

package/hooks/index.77acdde7.js

@@ -1 +0,0 @@
-

package/layouts/index.417b6868.js

@@ -1 +0,0 @@
-