@m4l/layouts 0.1.42 → 0.1.44

package/hooks/{index.33191825.js → index.850e8ae2.js}

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

package/hooks/useMasterDetail/{index.be4908d9.js → index.4ab110ce.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index.fe6ac47b.js";
+import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index.f91d39eb.js";
 const useMasterDetail = () => useContext(MasterDetailContext);
 export {
   useMasterDetail as u

package/index.js

@@ -3,9 +3,9 @@ import { M as M2 } from "./components/MFHostApp/index.420c2626.js";
 import { B } from "./components/BaseModule/index.6309486a.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.fe6ac47b.js";
-import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.2808fa44.js";
-import { u } from "./hooks/useMasterDetail/index.be4908d9.js";
+import { a as a3, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index.f91d39eb.js";
+import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.7ba635bb.js";
+import { u } from "./hooks/useMasterDetail/index.4ab110ce.js";
 import { u as u2 } from "./hooks/useAuth/index.cb6a3420.js";
 import { u as u3 } from "./hooks/useModule/index.b5f598b1.js";
 import "react";

package/layouts/MasterDetailLayout/contexts/MasterDetailContext/types.d.ts

@@ -5,7 +5,8 @@ export interface MasterDetailContextStateProps {
 }
 export interface MasterDetailProviderProps {
     children: ReactNode;
+    onClickViewDetail: () => void;
 }
-export interface MasterDetailContextProps extends MasterDetailContextStateProps {
+export interface MasterDetailContextProps extends MasterDetailContextStateProps, Pick<MasterDetailProviderProps, 'onClickViewDetail'> {
     onChangeMasterSelection: (newMasterSelection: MasterSelecion) => void;
 }

package/layouts/MasterDetailLayout/{index.fe6ac47b.js → index.f91d39eb.js}

@@ -8,18 +8,21 @@ import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/mater
 import { unstable_composeClasses } from "@mui/base";
 const initialState = {
   masterSelection: void 0,
-  onChangeMasterSelection: voidFunction
+  onChangeMasterSelection: voidFunction,
+  onClickViewDetail: voidFunction
 };
 const MasterDetailContext = createContext(initialState);
 function MasterDetailProvider(props) {
   const {
-    children
+    children,
+    onClickViewDetail
   } = props;
   const [masterSelection, setMasterSelection] = useState(void 0);
   return /* @__PURE__ */ jsx(MasterDetailContext.Provider, {
     value: {
       masterSelection,
-      onChangeMasterSelection: setMasterSelection
+      onChangeMasterSelection: setMasterSelection,
+      onClickViewDetail
     },
     children
   });
@@ -115,7 +118,7 @@ function MasterDetailLayout(props) {
       urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
       onClick: onClickViewDetail,
       disabled: false,
-      visibility: "allways",
+      visibility: "normal",
       label: getLabel("master_detail_layout.view_detail"),
       tag: "none",
       className: "",
@@ -128,6 +131,7 @@ function MasterDetailLayout(props) {
   }, [splitActions, moduleActions, isDesktop, viewDetailAction]);
   const classes = useMasterDetailLayoutUtilityClasses();
   return /* @__PURE__ */ jsx(MasterDetailProvider, {
+    onClickViewDetail,
     children: /* @__PURE__ */ jsx(MasterDetailLayoutRoot, {
       className: classes.root,
       children: /* @__PURE__ */ jsx(ModuleLayout, {

package/layouts/NoAuthModuleLayout/{index.2808fa44.js → index.7ba635bb.js}

@@ -1,8 +1,8 @@
 import { useResponsiveDesktop, useLocales } from "@m4l/graphics";
-import { LanguagePopover, Image, Typography, ScrollBar, HelmetPage } from "@m4l/components";
+import { LanguagePopover, IconButton, Image, Typography, Stack, ScrollBar, HelmetPage } from "@m4l/components";
 import { styled, alpha } from "@mui/material/styles";
 import { useBase, useModuleDictionary, useDomain, useEnvironment, BaseProvider, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider } from "@m4l/core";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 const InnerModuleRoot = styled("div")(({
   theme
 }) => ({
@@ -33,6 +33,12 @@ const DesktopContentRoot = styled("div")(({ theme }) => ({
     top: "20px",
     right: "20px",
     zIndex: 1
+  },
+  "& .M4LIconButton-root.config-icon": {
+    position: "absolute",
+    top: "22px",
+    right: "56px",
+    zIndex: 1
   }
 }));
 const DesktopBanner = styled("div")(({ theme }) => ({
@@ -93,6 +99,7 @@ const FormContent$1 = styled("div")(() => ({
   padding: "0 60px 0 80px",
   margin: "auto 0",
   width: "100%",
+  height: "auto",
   gap: "20px"
 }));
 const WrapperFormContent$1 = styled("div")(() => ({
@@ -106,10 +113,18 @@ const ContainerModuleName$1 = styled("div")(() => ({
   width: "100%",
   gap: "4px"
 }));
+styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  justifyContent: "center",
+  alignItems: "center"
+}));
 const DesktopContent = () => {
   const {
     children,
-    companyLogoSmallUrl
+    companyLogoSmallUrl,
+    handleSetting
   } = useBase();
   const {
     getLabel
@@ -118,8 +133,16 @@ const DesktopContent = () => {
     name,
     slogan
   } = useDomain();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   return /* @__PURE__ */ jsxs(DesktopContentRoot, {
-    children: [/* @__PURE__ */ jsx(LanguagePopover, {}), /* @__PURE__ */ jsxs(DesktopBanner, {
+    children: [/* @__PURE__ */ jsx(LanguagePopover, {}), /* @__PURE__ */ jsx(IconButton, {
+      src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/configuration.svg`,
+      onClick: handleSetting,
+      className: "config-icon"
+    }), /* @__PURE__ */ jsxs(DesktopBanner, {
       children: [/* @__PURE__ */ jsx(ContainerLogo$1, {
         children: /* @__PURE__ */ jsx(Image, {
           src: companyLogoSmallUrl,
@@ -153,22 +176,28 @@ const DesktopContent = () => {
         })]
       })]
     }), /* @__PURE__ */ jsx(WrapperFormContent$1, {
-      children: /* @__PURE__ */ jsx(ScrollBar, {
-        children: /* @__PURE__ */ jsxs(FormContent$1, {
-          children: [/* @__PURE__ */ jsxs(ContainerModuleName$1, {
-            children: [/* @__PURE__ */ jsx(Typography, {
-              variant: "h5",
-              skeletonWidth: "20%",
-              skeletongHeight: "36px",
-              children: getLabel("module_name")
-            }), /* @__PURE__ */ jsx(Typography, {
-              variant: "paragraph",
-              skeletonWidth: "40%",
-              skeletongHeight: "20px",
-              children: getLabel("module_description")
-            })]
-          }), children]
-        })
+      children: /* @__PURE__ */ jsxs(FormContent$1, {
+        children: [/* @__PURE__ */ jsxs(ContainerModuleName$1, {
+          children: [/* @__PURE__ */ jsx(Typography, {
+            variant: "h5",
+            skeletonWidth: "20%",
+            skeletongHeight: "36px",
+            children: getLabel("module_name")
+          }), /* @__PURE__ */ jsx(Typography, {
+            variant: "paragraph",
+            skeletonWidth: "40%",
+            skeletongHeight: "20px",
+            children: getLabel("module_description")
+          })]
+        }), /* @__PURE__ */ jsx(Stack, {
+          direction: "column",
+          height: "auto",
+          children: /* @__PURE__ */ jsx(ScrollBar, {
+            children: /* @__PURE__ */ jsx(Fragment, {
+              children
+            })
+          })
+        })]
       })
     })]
   });
@@ -195,7 +224,17 @@ const MobileBanner = styled("div")(({ theme }) => ({
   "& .M4LanguagePopover-root": {
     position: "absolute",
     top: "12px",
-    right: "12px"
+    right: "12px",
+    zIndex: 1
+  },
+  "& .M4LIconButton-root.config-icon": {
+    position: "absolute",
+    top: "8px",
+    right: "40px",
+    zIndex: 1,
+    "& .M4LIcon-root .M4LIcon-icon": {
+      backgroundColor: theme.palette.patronus?.marbleLight[10]
+    }
   },
   "& .MuiTypography-root": {
     color: theme.palette.patronus?.marbleLight[10],
@@ -252,11 +291,16 @@ const ContainerModuleName = styled("div")(() => ({
 const MobileContent = () => {
   const {
     children,
-    companyLogoSmallUrl
+    companyLogoSmallUrl,
+    handleSetting
   } = useBase();
   const {
     getLabel
   } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const {
     name
   } = useDomain();
@@ -281,6 +325,10 @@ const MobileContent = () => {
           skeletongHeight: "20px",
           children: getLabel("company_name_subtitle")
         })]
+      }), /* @__PURE__ */ jsx(IconButton, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/configuration.svg`,
+        onClick: handleSetting,
+        className: "config-icon"
       }), /* @__PURE__ */ jsx(LanguagePopover, {})]
     }), /* @__PURE__ */ jsx(WrapperFormContent, {
       children: /* @__PURE__ */ jsx(ScrollBar, {
@@ -314,8 +362,11 @@ const InnerModule = () => {
   return /* @__PURE__ */ jsx(HelmetPage, {
     title: getModuleLabel(),
     subtitle,
-    children: /* @__PURE__ */ jsx(InnerModuleRoot, {
-      children: isDesktop ? /* @__PURE__ */ jsx(DesktopContent, {}) : /* @__PURE__ */ jsx(MobileContent, {})
+    children: /* @__PURE__ */ jsx(Fragment, {
+      children: /* @__PURE__ */ jsx(InnerModuleRoot, {
+        id: "modulerootnouth",
+        children: isDesktop ? /* @__PURE__ */ jsx(DesktopContent, {}) : /* @__PURE__ */ jsx(MobileContent, {})
+      })
     })
   });
 };
@@ -329,7 +380,8 @@ const NoAuthModuleLayout = (props) => {
     subtitle,
     companyLogoSmallUrl,
     companyLogoNormalUrl,
-    moduleIlustrationUrl
+    moduleIlustrationUrl,
+    handleSetting
   } = props;
   const {
     host_static_assets,
@@ -349,7 +401,8 @@ const NoAuthModuleLayout = (props) => {
       companyLogoSmallUrl: finalCompanyLogoSmallUrl,
       companyLogoNormalUrl: finalCompanyLogoNormalUrl,
       moduleIlustrationUrl: finalIllustrationUrl,
-      children
+      children,
+      handleSetting
     },
     children: /* @__PURE__ */ jsx(FlagsProvider, {
       children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {

package/layouts/NoAuthModuleLayout/types.d.ts

@@ -9,6 +9,7 @@ export declare interface NoAuthBaseProviderProps {
     companyLogoNormalUrl: string;
     moduleIlustrationUrl?: string;
     children: ReactNode;
+    handleSetting?: () => void;
 }
 export interface NoAuthModuleLayoutProps extends NoAuthBaseProviderProps {
     moduleId: string;

package/layouts/{index.96a3745e.js → index.de697dc9.js}

@@ -2,7 +2,7 @@ import "./ModuleLayout/index.e7218171.js";
 import "@m4l/components";
 import "react";
 import "@m4l/core";
-import "./MasterDetailLayout/index.fe6ac47b.js";
+import "./MasterDetailLayout/index.f91d39eb.js";
 import "@m4l/graphics";
 import "react/jsx-runtime";
-import "./NoAuthModuleLayout/index.2808fa44.js";
+import "./NoAuthModuleLayout/index.7ba635bb.js";

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "license": "UNLICENSED",
   "dependencies": {
-    "@mui/material": "5.10.4",
     "@m4l/components": "*",
     "@m4l/core": "*",
     "@m4l/graphics": "*",
-    "@m4l/styles": "*"
+    "@m4l/styles": "*",
+    "@mui/material": "5.10.4"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",