@m4l/layouts 0.1.9 → 0.1.10

package/hooks/useMasterDetail/{index.32172709.js → index.ca232c69.js}

@@ -1,5 +1,5 @@
 import { useContext as t } from "react";
-import { M as e } from "../../layouts/MasterDetailLayout/index.93d98363.js";
+import { M as e } from "../../layouts/MasterDetailLayout/index.56544ac9.js";
 const s = () => t(e);
 export {
   s as u

package/hooks/useModule/{index.5ec82e11.js → index.066da119.js}

@@ -1,5 +1,5 @@
 import { useContext as o } from "react";
-import { M as t } from "../../layouts/ModuleLayout/index.76b867fc.js";
+import { M as t } from "../../layouts/ModuleLayout/index.4cfb7261.js";
 const n = () => {
   const e = o(t);
   if (!e)

package/index.js

@@ -1,14 +1,14 @@
-import { a as p, d as l, g as y } from "./layouts/ModuleLayout/index.76b867fc.js";
+import { a as p, d as l, g as y } from "./layouts/ModuleLayout/index.4cfb7261.js";
 import "@m4l/components";
 import "react";
 import "@m4l/core";
-import { a as n, d as M, g as D } from "./layouts/MasterDetailLayout/index.93d98363.js";
+import { a as n, d as M, g as D } from "./layouts/MasterDetailLayout/index.56544ac9.js";
 import "@m4l/graphics";
 import "@mui/material";
 import "react/jsx-runtime";
 import { N as L, d as c, g } from "./layouts/NoAuthModuleLayout/index.5050b988.js";
-import { u as N } from "./hooks/useMasterDetail/index.32172709.js";
-import { u as A } from "./hooks/useModule/index.5ec82e11.js";
+import { u as N } from "./hooks/useMasterDetail/index.ca232c69.js";
+import { u as A } from "./hooks/useModule/index.066da119.js";
 import "@mui/material/styles";
 export {
   n as MasterDetailLayout,

package/layouts/MasterDetailLayout/{index.93d98363.js → index.56544ac9.js}

@@ -1,11 +1,11 @@
 import { createContext as L, useState as v, useRef as P, useCallback as z, useMemo as p } from "react";
 import { voidFunction as N, useEnvironment as x } from "@m4l/core";
 import { SplitLayout as R } from "@m4l/components";
-import { g as B, a as V } from "../ModuleLayout/index.76b867fc.js";
+import { g as B, a as V } from "../ModuleLayout/index.4cfb7261.js";
 import { jsx as r } from "react/jsx-runtime";
 import { useResponsiveDesktop as j } from "@m4l/graphics";
 import { Button as E } from "@mui/material";
-import { u as H } from "../../hooks/useMasterDetail/index.32172709.js";
+import { u as H } from "../../hooks/useMasterDetail/index.ca232c69.js";
 function T() {
   return ["master_detail_layout"].concat(B());
 }

package/layouts/ModuleLayout/{index.76b867fc.js → index.4cfb7261.js}

@@ -1,167 +1,164 @@
-import { BoxIcon as y, Breadcrumbs as T, MenuActions as F, useModal as A, ModalProvider as D, getModalDialogComponentsDictionary as L } from "@m4l/components";
-import { createContext as $, useState as x, useMemo as f, forwardRef as M, useRef as b, useImperativeHandle as w } from "react";
-import { styled as d, useTheme as N } from "@mui/material/styles";
-import { voidFunction as P, useModuleDictionary as R, useFlagsPresent as _, FlagsProvider as B, ModuleDictionaryProvider as S, ModuleSkeletonProvider as G, ModulePrivilegesProvider as H } from "@m4l/core";
-import { Skeleton as l, Typography as O, IconButton as W } from "@mui/material";
+import { BoxIcon as y, Breadcrumbs as T, MenuActions as A, useModal as D, ModalProvider as F, getModalDialogComponentsDictionary as L } from "@m4l/components";
+import { createContext as N, useState as x, useMemo as f, forwardRef as M, useRef as b, useImperativeHandle as w } from "react";
+import { styled as d, useTheme as R } from "@mui/material/styles";
+import { voidFunction as S, useModuleDictionary as $, useModuleSkeleton as P, FlagsProvider as _, ModuleDictionaryProvider as B, ModuleSkeletonProvider as H, ModulePrivilegesProvider as G } from "@m4l/core";
+import { Skeleton as l, Typography as j, IconButton as O } from "@mui/material";
 import { useResponsiveDesktop as k } from "@m4l/graphics";
-import { jsxs as p, jsx as e, Fragment as j } from "react/jsx-runtime";
-import { u as z } from "../../hooks/useModule/index.5ec82e11.js";
+import { jsxs as p, jsx as i, Fragment as W } from "react/jsx-runtime";
+import { u as z } from "../../hooks/useModule/index.066da119.js";
 const q = d("div")(() => ({
   display: "flex",
   flexDirection: "column",
   position: "absolute",
-  margin: "12px",
+  margin: "0px 12px 12px 12px",
   left: "0px",
   right: "0px",
   top: "0px",
   bottom: "0px",
   overflow: "hidden"
 })), K = d("div")(({
-  theme: i
+  theme: e
 }) => ({
   display: "flex",
   position: "relative",
-  marginTop: i.spacing(2),
+  marginTop: e.spacing(1),
+  justifyContent: "center",
   flexGrow: "1",
   overflow: "hidden"
 })), E = d("div")(({
-  theme: i
+  theme: e
 }) => ({
   display: "flex",
   position: "relative",
-  paddingTop: i.spacing(2),
-  paddingBottom: i.spacing(2),
-  borderBottom: `1px solid ${i.palette.divider}`,
-  height: "72px",
-  overflow: "hidden",
+  borderBottom: `1px solid ${e.palette.divider}`,
+  height: "60px",
+  minHeight: "60px",
   alignItems: "center",
   " > span": {
     marginRight: "12px"
   },
   "& > h5": {
-    paddingRight: i.spacing(3),
-    borderRight: `1px solid ${i.palette.divider}`
+    paddingRight: e.spacing(3),
+    borderRight: `1px solid ${e.palette.divider}`
   },
   " > nav": {
     marginRight: "12px",
     flexGrow: 1
   },
   "& .splitactions.Mui-disabled": {
-    color: i.palette.primary.main
+    color: e.palette.primary.main
   },
   "& svg ": {
     width: "20px",
     height: "20px"
   }
 })), J = d("div")(({
-  theme: i
+  theme: e
 }) => ({
   display: "flex",
   justifyContent: "space-between",
-  padding: `${i.spacing(2)} 0`,
-  borderBottom: `1px solid ${i.palette.divider}`,
-  height: "auto",
-  [i.breakpoints.up("sm")]: {
-    height: i.spacing(9)
-  }
+  padding: "0 0",
+  borderBottom: `1px solid ${e.palette.divider}`,
+  minHeight: "60px"
 })), Q = d("div")(({
-  theme: i
+  theme: e
 }) => ({
   display: "grid",
   gridTemplateColumns: "auto",
-  gridGap: i.spacing(1.75),
+  gridGap: e.spacing(1.75),
   alignItems: "center",
   width: "auto",
   height: "auto",
-  [i.breakpoints.up("sm")]: {
+  [e.breakpoints.up("sm")]: {
     gridTemplateColumns: "repeat(3, auto)"
   }
 })), U = d("div")(({
-  theme: i
+  theme: e
 }) => ({
   display: "grid",
-  gridTemplateColumns: `${i.spacing(3)} auto`,
-  gridGap: i.spacing(2),
+  gridTemplateColumns: `${e.spacing(3)} auto`,
+  gridGap: e.spacing(2),
   alignItems: "center",
   width: "auto",
   height: "auto"
 })), V = d("div")(({
-  theme: i
+  theme: e
 }) => ({
   display: "none",
   alignItems: "center",
   width: "1px",
-  background: i.palette.divider,
+  background: e.palette.divider,
   height: "100%",
-  margin: `0 ${i.spacing(2)}`,
-  [i.breakpoints.up("sm")]: {
+  margin: `0 ${e.spacing(2)}`,
+  [e.breakpoints.up("sm")]: {
     display: "flex"
   }
 })), X = d("div")(({
-  theme: i
+  theme: e
 }) => ({
   display: "grid",
   alignItems: "center",
   gridTemplateColumns: "repeat(3, auto)",
-  gridGap: i.spacing(2)
+  gridGap: e.spacing(2)
 })), Y = d("div")(({
-  theme: i
+  theme: e
 }) => ({
   display: "grid",
   gridTemplateColumns: "auto",
   alignItems: "center",
   width: "auto",
   height: "auto",
-  [i.breakpoints.up("sm")]: {
-    gridTemplateColumns: `repeat(3, ${i.spacing(3)})`,
-    gridGap: i.spacing(2)
+  [e.breakpoints.up("sm")]: {
+    gridTemplateColumns: `repeat(3, ${e.spacing(3)})`,
+    gridGap: e.spacing(2)
   }
 }));
 function Z() {
-  const i = k();
+  const e = k();
   return /* @__PURE__ */ p(J, {
+    id: "HeaderSkeleton",
     children: [/* @__PURE__ */ p(Q, {
       children: [/* @__PURE__ */ p(U, {
-        children: [/* @__PURE__ */ e(l, {
+        children: [/* @__PURE__ */ i(l, {
           variant: "circular",
           width: 24,
           height: 24
-        }), /* @__PURE__ */ e(l, {
+        }), /* @__PURE__ */ i(l, {
           variant: "text",
           width: 120,
           height: 14
         })]
-      }), /* @__PURE__ */ e(V, {}), /* @__PURE__ */ p(X, {
-        children: [/* @__PURE__ */ e(l, {
+      }), /* @__PURE__ */ i(V, {}), /* @__PURE__ */ p(X, {
+        children: [/* @__PURE__ */ i(l, {
           variant: "text",
           width: 68,
           height: 14
-        }), /* @__PURE__ */ e(l, {
+        }), /* @__PURE__ */ i(l, {
           variant: "circular",
           width: 4,
           height: 4
-        }), /* @__PURE__ */ e(l, {
+        }), /* @__PURE__ */ i(l, {
           variant: "text",
           width: 68,
           height: 14
         })]
       })]
-    }), /* @__PURE__ */ e(Y, {
-      children: i ? /* @__PURE__ */ p(j, {
-        children: [/* @__PURE__ */ e(l, {
+    }), /* @__PURE__ */ i(Y, {
+      children: e ? /* @__PURE__ */ p(W, {
+        children: [/* @__PURE__ */ i(l, {
           variant: "circular",
           width: 24,
           height: 24
-        }), /* @__PURE__ */ e(l, {
+        }), /* @__PURE__ */ i(l, {
           variant: "circular",
           width: 24,
           height: 24
-        }), /* @__PURE__ */ e(l, {
+        }), /* @__PURE__ */ i(l, {
           variant: "circular",
           width: 24,
           height: 24
         })]
-      }) : /* @__PURE__ */ e(l, {
+      }) : /* @__PURE__ */ i(l, {
         variant: "circular",
         width: 24,
         height: 24
@@ -169,16 +166,16 @@ function Z() {
     })]
   });
 }
-const ii = {
+const ee = {
   moduleId: "",
   moduleNameField: "module_name",
   urlIcon: "",
   moduleActions: [],
   dynamicActions: [],
-  setDynamicActions: P,
+  setDynamicActions: S,
   breadcrumbLinks: []
-}, ei = $(ii);
-function ti(i) {
+}, ie = N(ee);
+function te(e) {
   const {
     children: n,
     initialModuleActions: t,
@@ -186,14 +183,14 @@ function ti(i) {
     moduleNameField: a,
     urlIcon: g,
     breadcrumbLinks: s
-  } = i, [c] = x(() => ({
+  } = e, [c] = x(() => ({
     moduleId: o,
     urlIcon: g,
     moduleNameField: a,
     dictionary: void 0,
     breadcrumbLinks: s
   })), [u, h] = x([]), r = f(() => t.concat(u), [t, u]);
-  return /* @__PURE__ */ e(ei.Provider, {
+  return /* @__PURE__ */ i(ie.Provider, {
     value: {
       moduleActions: r,
       dynamicActions: u,
@@ -206,34 +203,34 @@ function ti(i) {
     children: n
   });
 }
-function oi(i, n) {
+function oe(e, n) {
   let t = [...n.filter((o) => o.visibility !== "allways")];
-  return i !== void 0 && i && (t = t.filter((o) => o.visibility === "normal")), t;
+  return e !== void 0 && e && (t = t.filter((o) => o.visibility === "normal")), t;
 }
-function ni(i, n) {
+function ne(e, n) {
   let t = [];
-  return i !== void 0 && i && (t = t.concat(n.filter((o) => o.visibility === "main"))), t = t.concat(n.filter((o) => o.visibility === "allways")), t;
+  return e !== void 0 && e && (t = t.concat(n.filter((o) => o.visibility === "main"))), t = t.concat(n.filter((o) => o.visibility === "allways")), t;
 }
-function ri() {
+function re() {
   const {
-    moduleActions: i,
+    moduleActions: e,
     moduleNameField: n,
     breadcrumbLinks: t,
     urlIcon: o
   } = z(), {
     getLabel: a
-  } = R(), g = N(), s = k(), c = !_(["dictionary_loaded"]), u = f(
-    () => oi(s, i),
-    [i, s]
-  ), h = f(() => ni(s, i), [i, s]);
-  return c ? /* @__PURE__ */ e(Z, {}) : /* @__PURE__ */ p(E, {
+  } = $(), g = R(), s = k(), c = P(), u = f(
+    () => oe(s, e),
+    [e, s]
+  ), h = f(() => ne(s, e), [e, s]);
+  return c ? /* @__PURE__ */ i(Z, {}) : /* @__PURE__ */ p(E, {
     id: "Header",
-    children: [/* @__PURE__ */ e(y, {
+    children: [/* @__PURE__ */ i(y, {
       src: o,
       sx: {
         color: g.palette.primary.main
       }
-    }), /* @__PURE__ */ e(O, {
+    }), /* @__PURE__ */ i(j, {
       variant: "h5",
       sx: {
         maxWidth: 260,
@@ -244,19 +241,19 @@ function ri() {
         textOverflow: "ellipsis"
       },
       children: a(n)
-    }), /* @__PURE__ */ e(T, {
+    }), /* @__PURE__ */ i(T, {
       links: t
     }), h.map((r, m) => {
       const v = a(r.dictionaryField);
-      return r.component ? /* @__PURE__ */ e(r.component, {
+      return r.component ? /* @__PURE__ */ i(r.component, {
         description: v,
         onClick: r.onClick
-      }, `main_action_${m}`) : /* @__PURE__ */ e(W, {
+      }, `main_action_${m}`) : /* @__PURE__ */ i(O, {
         className: r.className,
         onClick: r.onClick,
         "aria-label": `${v}`,
         disabled: r.disabled,
-        children: /* @__PURE__ */ e(y, {
+        children: /* @__PURE__ */ i(y, {
           src: r.urlIcon,
           sx: {
             width: 18,
@@ -264,7 +261,7 @@ function ri() {
           }
         })
       }, `main_action_${m}`);
-    }), u.length > 0 && /* @__PURE__ */ e(F, {
+    }), u.length > 0 && /* @__PURE__ */ i(A, {
       arrow: "right-top",
       marginTop: "-11px",
       anchorOrigin: {
@@ -279,26 +276,26 @@ function ri() {
     })]
   });
 }
-const I = M((i, n) => {
+const I = M((e, n) => {
   const {
     children: t
-  } = i, {
+  } = e, {
     openModal: o
-  } = A(), a = b(null);
+  } = D(), a = b(null);
   return w(n, () => ({
     openModal: o,
     current: a.current
   })), /* @__PURE__ */ p(q, {
     id: "WrapperModule",
     ref: a,
-    children: [/* @__PURE__ */ e(ri, {}), /* @__PURE__ */ e(K, {
+    children: [/* @__PURE__ */ i(re, {}), /* @__PURE__ */ i(K, {
       id: "ModuleContent",
       children: t
     })]
   });
 });
 I.displayName = "Module";
-const ai = M((i, n) => {
+const ae = M((e, n) => {
   const {
     moduleId: t,
     moduleNameField: o = "module_name",
@@ -309,28 +306,28 @@ const ai = M((i, n) => {
     breadcrumbLinks: u,
     privileges: h,
     skeletonFlags: r
-  } = i, m = b(null), v = (C) => {
+  } = e, m = b(null), v = (C) => {
     m.current?.openModal(C);
   };
   return w(n, () => ({
     openModal: v,
     current: m.current
-  })), /* @__PURE__ */ e(B, {
-    children: /* @__PURE__ */ e(S, {
+  })), /* @__PURE__ */ i(_, {
+    children: /* @__PURE__ */ i(B, {
       moduleId: t,
       componentsDictionary: c,
-      children: /* @__PURE__ */ e(G, {
+      children: /* @__PURE__ */ i(H, {
         flags: r,
-        children: /* @__PURE__ */ e(H, {
+        children: /* @__PURE__ */ i(G, {
           queryPrivileges: h,
-          children: /* @__PURE__ */ e(ti, {
+          children: /* @__PURE__ */ i(te, {
             moduleId: t,
             urlIcon: g,
             moduleNameField: o,
             initialModuleActions: a,
             breadcrumbLinks: u,
-            children: /* @__PURE__ */ e(D, {
-              children: /* @__PURE__ */ e(I, {
+            children: /* @__PURE__ */ i(F, {
+              children: /* @__PURE__ */ i(I, {
                 ref: m,
                 children: s
               })
@@ -341,16 +338,16 @@ const ai = M((i, n) => {
     })
   });
 });
-ai.displayName = "ModuleLayout";
-function hi() {
+ae.displayName = "ModuleLayout";
+function he() {
   return ["module_layout"].concat(L());
 }
-const vi = {
+const ve = {
   module_layout: {}
 };
 export {
-  ei as M,
-  ai as a,
-  vi as d,
-  hi as g
+  ie as M,
+  ae as a,
+  ve as d,
+  he as g
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/components": "*",