@m4l/components 0.1.74 → 0.1.76

package/@types/export.d.ts

@@ -35,6 +35,24 @@ import { RHFDateTimeProps } from '../components/hook-form/RHFDateTime/types';
 import { RHFDateTimeClassesKey } from '../components/hook-form/RHFDateTime/classes/types';
 import { AreasAdminClassesKey } from '../components/areas/components/AreasAdmin/classes/types';
 import { AreasViewerClassesKey } from '../components/areas/components/AreasViewer/classes/types';
+import { AppBarProps } from 'src/components/AppBar/types';
+import { AccountPopoverProps } from 'src/components/AccountPopover/types';
+import { SplitLayoutProps } from 'src/components/SplitLayout';
+import { LinearProgressIndeterminateClassesKey } from '../components/LinearProgressIndeterminate/classes/types';
+import { PropertyValueProps } from '../components/PropertyValue/types';
+import { TabClassesKey } from '../components/mui_extended/Tab/classes/types';
+import { AccordionProps } from '../components/mui_extended/Accordion/types';
+import { PropertyValueClassesKey } from '../components/PropertyValue/classes/types';
+import { FormProviderProps } from '../contexts/RHFormContext/types';
+import { RHFormProivderClassesKey } from '../contexts/RHFormContext/classes/types';
+import { RHFUploadImageClassesKey } from '../components/hook-form/RHFUpload/RHFUploadImage/classes/types';
+import { RHFUploadImageProps } from '../components/hook-form/RHFUpload/RHFUploadImage/types';
+import { PeriodProps } from '../components/Period/types';
+import { PeriodClassesKey } from '../components/Period/classes/types';
+import { ModalClassesKey } from '..index/components/modal/classes/types';
+import { PaperFormClassesKey } from '../components/PaperForm/classes/types';
+import { TooltipClassesKey } from '../components/mui_extended/Tooltip/classes/types';
+
 
 export {};
 
@@ -47,6 +65,7 @@ declare module '@mui/material/styles' {
         M4LRHFTextFieldPassword: RHFTextFieldPasswordProps;
         M4LRHFAutocomplete: RHFAutocompleteProps;
         M4LRHFAutocompleteAsync: RHFAutocompleteAsyncProps;
+        M4LRHFDateTime: RHFDateTimeProps;
         M4LIcon: IconProps;
         M4LIconButton: IconButtonProps;
         M4LanguagePopover: undefined;
@@ -60,7 +79,14 @@ declare module '@mui/material/styles' {
         M4LoadingButton: MuiLabLoadingButtonProps;
         M4LNavLink: NavLinkProps;
         M4LSideBar: SideBarProps;
-        M4LRHFDateTime: RHFDateTimeProps;
+        M4LAppBar: AppBarProps;
+        M4LAvatar: AvatarProps;
+        M4LAccountPopover: AccountPopoverProps;
+        M4LSplitLayout: SplitLayoutProps;
+        M4LPropertyValue: PropertyValueProps;
+        M4LRHFormProvider: FormProviderProps;
+        M4LRHFUploadImage: RHFUploadImageProps;
+        M4LPeriod: PeriodProps;
     }
 
     interface ComponentNameToClassKey {
@@ -84,14 +110,37 @@ declare module '@mui/material/styles' {
         M4LoadingButton: LoadingbuttonClassesKey;
         M4LNavLink: ButtonBaseClassKey;
         M4LSideBar: SideBarClassesKey;
+        M4LAppBar: AppBarClassesKey;
         M4LSideBarPopover: SideBarClassesKey;
         M4LSideBarDrawer: SideBarClassesKey;
         M4LRHFDateTime: RHFDateTimeClassesKey;
         M4LAreasViewer: AreasViewerClassesKey;
         M4LAreasAdmin: AreasAdminClassesKey;
+        M4LAreasAdminEditPopover: AreasAdminClassesKey;
+        M4LAvatar: AvatarClassesKey;
+        M4LAccountPopover: AccountPopoverClassesKey;
+        M4LAccountPopoverPopover: AccountPopoverClassesKey;
+        M4LModuleLayout: ModuleLayoutClassesKey;
+        M4LMasterDetailLayout: MasterDetailLayoutClassesKey;
+        M4LSplitLayout: SplitLayoutClassesKey;
+        M4LCommonActions: CommonActionsClassesKey;
+        M4LinearProgressIndeterminate: LinearProgressIndeterminateClassesKey;
+        M4LPropertyValue: PropertyValueClassesKey;
+        M4LTab: TabClassesKey;
+        M4LAccordion: AccordionClassesKey;
+        M4LRHFormProvider: RHFormProivderClassesKey;
+        M4LRHFUploadImage: RHFUploadImageClassesKey;
+        M4LModalDialog: ModalClassesKey;
+        M4LPaperForm: PaperFormClassesKey;
+        M4LTooltip: TooltipClassesKey;
+        
     }
 
     interface Components {
+        M4LPeriod?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LPeriod'];
+            defaultProps?: ComponentsProps['M4LPeriod'];
+        };
         M4LAreasViewer?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LAreasViewer'];
             defaultProps?: ComponentsProps['M4LAreasViewer'];
@@ -132,6 +181,10 @@ declare module '@mui/material/styles' {
             styleOverrides?: ComponentsOverrides<Theme>['M4LRHFDateTime'];
             defaultProps?: ComponentsProps['M4LRHFDateTime'];
         };
+        M4LRHFUploadImage?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LRHFUploadImage'];
+            defaultProps?: ComponentsProps['M4LRHFUploadImage'];
+        };
         M4LIcon?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LIcon'];
             defaultProps?: ComponentsProps['M4LIcon'];
@@ -184,6 +237,10 @@ declare module '@mui/material/styles' {
             styleOverrides?: ComponentsOverrides<Theme>['M4LSideBar'];
             defaultProps?: ComponentsProps['M4LSideBar'];
         };
+        M4LAppBar?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LAppBar'];
+            defaultProps?: ComponentsProps['M4LAppBar'];
+        };
         M4LSideBarPopover?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LSideBarPopover'];
             defaultProps?: ComponentsProps['M4LSideBarPopover'];
@@ -204,5 +261,70 @@ declare module '@mui/material/styles' {
         M4LAreasAdmin?: {
             styleOverrides?: ComponentsOverrides<Theme>['M4LAreasAdmin'];
         };
+        M4LAreasAdminEditPopover?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LAreasAdminEditPopover'];
+        };
+        M4LAvatar?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LAvatar'];
+            defaultProps?: ComponentsProps['M4LAvatar'];
+        };
+        M4LAccountPopover?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LAccountPopover'];
+            defaultProps?: ComponentsProps['M4LAccountPopover'];
+        };
+        M4LAccountPopoverPopover?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LAccountPopoverPopover'];
+        };
+        M4LModuleLayout?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LModuleLayout'];
+        };
+        M4LMasterDetailLayout?: {
+            styleOverrides?: ComponentsOverrides<Theme>['MasterDetailLayout'];
+        };
+        M4LSplitLayout?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LSplitLayout'];
+            defaultProps?: ComponentsProps['M4LSplitLayout'];
+        };
+        M4LCommonActions?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LCommonActions'];
+            defaultProps?: ComponentsProps['M4LCommonActions'];
+        };
+        M4LinearProgressIndeterminate?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LinearProgressIndeterminate'];
+            defaultProps?: ComponentsProps['M4LinearProgressIndeterminate'];
+        };
+        M4LPropertyValue?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LPropertyValue'];
+            defaultProps?: ComponentsProps['M4LPropertyValue'];
+        };
+        M4LAccordion?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LAccordion'];
+            defaultProps?: ComponentsProps['M4LAccordion'];
+        };
+        M4LTab?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LTab'];
+            defaultProps?: ComponentsProps['M4LTab'];
+        };
+        M4LRHFormProvider?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LRHFormProvider'];
+            defaultProps?: ComponentsProps['M4LRHFormProvider'];
+        };
+        M4LRHFPeriod?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LRHFPeriod'];
+            defaultProps?: ComponentsProps['M4LRHFPeriod'];
+        };
+        M4LModalDialog?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LModalDialog'];
+            defaultProps?: ComponentsProps['M4LModalDialog'];
+        };
+        M4LPaperForm?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LPaperForm'];
+            defaultProps?: ComponentsProps['M4LPaperForm'];
+        };
+        M4LTooltip?: {
+            styleOverrides?: ComponentsOverrides<Theme>['M4LTooltip'];
+            defaultProps?: ComponentsProps['M4LTooltip'];
+        };
+
     }
 }

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

@@ -1 +1 @@
-export declare const componentName = "M4LAcountPopover";
+export declare const componentName = "M4LAccountPopover";

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

@@ -1,7 +1,18 @@
 import { AccountPopoverClassesType } from './types';
 export declare const accountPopoverClasses: AccountPopoverClassesType;
 export declare function getAccountPopoverClassesUtilityClass(slot: string): string;
-export declare const useUtilityClasses: () => {
+export declare const useAccountPopoverUtilityClasses: () => {
     root: string;
     containerUserInfo: string;
+    labelUserName: string;
+    labelUserEmail: string;
+    labelVersion: string;
+    myAvatar: string;
+    containerAvatarPopover: string;
+    popover: string;
+    containerAppVersion: string;
+    containerMenuItems: string;
+    containerProgress: string;
+    logOut: string;
+    menuItem: string;
 };

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

@@ -1,5 +1,18 @@
+import { useAccountPopoverUtilityClasses } from ".";
 export interface AccountPopoverClassesType {
     root: string;
     containerUserInfo: string;
+    labelUserName: string;
+    labelUserEmail: string;
+    labelVersion: string;
+    containerAvatarPopover: string;
+    myAvatar: string;
+    popover: string;
+    containerAppVersion: string;
+    containerMenuItems: string;
+    containerProgress: string;
+    logOut: string;
+    menuItem: string;
 }
-export declare type AppBarClassesKey = keyof AccountPopoverClassesType;
+export declare type AccountPopoverClassesKey = keyof AccountPopoverClassesType;
+export declare type Classes = ReturnType<typeof useAccountPopoverUtilityClasses>;

package/components/AccountPopover/index.47cf6c43.js

@@ -0,0 +1,273 @@
+import { useModuleDictionary, useNetwork } from "@m4l/core";
+import { useState, useEffect } from "react";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { generateUtilityClasses, generateUtilityClass, styled, useTheme } from "@mui/material";
+import "../Icon/index.9dae8337.js";
+import "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../mui_extended/IconButton/index.1a9d4fa5.js";
+import "@m4l/graphics";
+import "../mui_extended/Accordion/index.3faafd8b.js";
+import "../mui_extended/Typography/index.443590d6.js";
+import { A as Avatar } from "../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.fdb5dcbd.js";
+import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
+import "../Image/index.c18ebf5a.js";
+import "@mui/lab";
+import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/MenuActions/index.ba1da3b3.js";
+import "../mui_extended/Pager/index.67bda2c5.js";
+import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
+import { unstable_composeClasses } from "@mui/base";
+const componentName = "M4LAccountPopover";
+generateUtilityClasses(componentName, [
+  "root",
+  "containerUserInfo",
+  "labelUserName",
+  "labelUserEmail",
+  "labelVersion",
+  "containerAvatarPopover",
+  "myAvatar",
+  "popover",
+  "containerAppVersion",
+  "containerMenuItems",
+  "containerProgress",
+  "logOut",
+  "menuItem"
+]);
+function getAccountPopoverClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useAccountPopoverUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    containerUserInfo: ["containerUserInfo"],
+    labelUserName: ["labelUserName"],
+    labelUserEmail: ["labelUserEmail"],
+    labelVersion: ["labelVersion"],
+    myAvatar: ["myAvatar"],
+    containerAvatarPopover: ["containerAvatarPopover"],
+    popover: ["popover"],
+    containerAppVersion: ["containerAppVersion"],
+    containerMenuItems: ["containerMenuItems"],
+    containerProgress: ["containerProgress"],
+    logOut: ["logOut"],
+    menuItem: ["menuItem"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getAccountPopoverClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const AcountPopOverRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LAccountPopover?.styleOverrides
+}));
+const PRIMARY_NAME = ["A", "N", "H", "L", "Q", "9", "8"];
+const INFO_NAME = ["F", "G", "T", "I", "J", "1", "2", "3"];
+const SUCCESS_NAME = ["K", "D", "Y", "B", "O", "4", "5"];
+const WARNING_NAME = ["P", "E", "R", "S", "C", "U", "6", "7"];
+const ERROR_NAME = ["V", "W", "X", "M", "Z"];
+function getFirstCharacter(name) {
+  return name && name.charAt(0).toUpperCase();
+}
+function getAvatarColor(name) {
+  if (PRIMARY_NAME.includes(getFirstCharacter(name)))
+    return "primary";
+  if (INFO_NAME.includes(getFirstCharacter(name)))
+    return "info";
+  if (SUCCESS_NAME.includes(getFirstCharacter(name)))
+    return "success";
+  if (WARNING_NAME.includes(getFirstCharacter(name)))
+    return "warning";
+  if (ERROR_NAME.includes(getFirstCharacter(name)))
+    return "error";
+  return "default";
+}
+function createAvatar(name) {
+  return {
+    name: getFirstCharacter(name),
+    color: getAvatarColor(name)
+  };
+}
+function MyAvatar({
+  ...other
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      src: "",
+      alt: "full_name",
+      color: "default",
+      ...other,
+      children: createAvatar("").name
+    }
+  );
+}
+const MenuPopOver = (props) => {
+  const {
+    data,
+    handleClick: onClick,
+    version,
+    handleLogOut,
+    classes,
+    userData
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [open2, setOpen] = useState(null);
+  const theme = useTheme();
+  const handleClick = (item) => {
+    onClick(item);
+    handleClose();
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes.containerAvatarPopover,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerAvatarPopover")
+    } : {},
+    onClick: handleOpen,
+    children: [/* @__PURE__ */ jsx(MyAvatar, {
+      className: classes.myAvatar
+    }), /* @__PURE__ */ jsxs(Popover, {
+      open: Boolean(open2),
+      anchorEl: open2,
+      onClose: handleClose,
+      onBlur: handleClose,
+      className: classes.popover,
+      arrowType: "no-arrow",
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("popover")
+      } : {},
+      sx: {
+        mt: "5px",
+        ...theme.components?.M4LAccountPopoverPopover?.styleOverrides
+      },
+      children: [/* @__PURE__ */ jsxs("div", {
+        className: classes.containerUserInfo,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerUserInfo")
+        } : {},
+        children: [/* @__PURE__ */ jsx("span", {
+          className: classes.labelUserName,
+          children: `${userData?.first_name} ${userData?.last_name}`
+        }), /* @__PURE__ */ jsx("span", {
+          className: classes.labelUserEmail,
+          children: userData?.email
+        })]
+      }), /* @__PURE__ */ jsx("div", {
+        className: classes.containerAppVersion,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerAppVersion")
+        } : {},
+        children: /* @__PURE__ */ jsx("span", {
+          className: classes.labelVersion,
+          children: `${getLabel("version")} ${version}`
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        className: classes.containerMenuItems,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerMenuItems")
+        } : {},
+        children: data ? data.length !== 0 && data.map((option) => /* @__PURE__ */ jsx("div", {
+          onClick: () => handleClick(option),
+          className: classes.menuItem,
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("menuItem")
+          } : {},
+          children: option.title
+        }, option.title)) : /* @__PURE__ */ jsx("div", {
+          className: classes.containerProgress,
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerProgress")
+          } : {},
+          children: /* @__PURE__ */ jsx(CircularProgress, {
+            size: "20px"
+          })
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        onClick: handleLogOut,
+        className: classes.logOut,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("logOut")
+        } : {},
+        children: getLabel("logout")
+      })]
+    })]
+  });
+};
+const AccountPopover = (props) => {
+  const {
+    handleClick,
+    version,
+    handleLogOut,
+    userData
+  } = props;
+  const [asyncState, setAsyncState] = useState("unLoad");
+  const [menuData, setMenuData] = useState([]);
+  const {
+    networkOperation
+  } = useNetwork();
+  useEffect(() => {
+    let mounted = true;
+    if (asyncState === "unLoad") {
+      setAsyncState("loading");
+      networkOperation({
+        method: "GET",
+        endPoint: `menus`,
+        parms: {
+          position: 1
+        }
+      }).then((response) => {
+        if (mounted) {
+          setAsyncState("loaded");
+          setMenuData(response.data);
+        }
+      }).catch((_error) => {
+        console.error("AccountData network request error - get menus", _error);
+      });
+    }
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [open]);
+  const classes = useAccountPopoverUtilityClasses();
+  return /* @__PURE__ */ jsx("div", {
+    children: /* @__PURE__ */ jsx(AcountPopOverRoot, {
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("root")
+      } : {},
+      children: /* @__PURE__ */ jsx(MenuPopOver, {
+        data: menuData,
+        handleClick,
+        version,
+        handleLogOut,
+        classes,
+        userData
+      })
+    })
+  });
+};
+export {
+  AccountPopover as A
+};

package/components/{AppBar → AccountPopover}/subcomponents/MyAvatar/createAvatar.d.ts

@@ -1,4 +1,4 @@
 export default function createAvatar(name: string): {
     readonly name: string;
-    readonly color: "error" | "default" | "warning" | "info" | "primary" | "success";
+    readonly color: "error" | "default" | "warning" | "info" | "success" | "primary";
 };

package/components/AccountPopover/subcomponents/PopOver/types.d.ts

@@ -1,9 +1,6 @@
+import { Classes } from "../../classes/types";
 import { AccountPopoverProps, UserMenuData } from "../../types";
-declare type open = HTMLElement | null;
 export interface PopOverProps extends AccountPopoverProps {
-    setOpen: (element: open) => void;
-    open: open;
     data: Array<UserMenuData> | [];
-    classes: any;
+    classes: Classes;
 }
-export {};

package/components/AccountPopover/types.d.ts

@@ -1,3 +1,4 @@
+import { Maybe } from "@m4l/core";
 import { DomainCountry } from "@m4l/core";
 export declare type asyncTypes = 'unLoad' | 'loading' | 'loaded';
 export interface UserMenuData {
@@ -21,8 +22,20 @@ export interface userData {
     entry_application_id: number;
     avatar_url: string;
 }
+interface User {
+    email: string;
+    id: number;
+    first_name: string;
+    last_name: string;
+    account_id: number;
+    domain_country: DomainCountry;
+    avatar_url?: Maybe<string>;
+}
+declare type AuthUser = Maybe<User>;
 export interface AccountPopoverProps {
     handleClick: (item: UserMenuData) => void;
     handleLogOut: VoidFunction;
     version: string;
+    userData: AuthUser;
 }
+export {};

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

@@ -1,6 +1,9 @@
 import { AppBarClassesType } from './types';
 export declare const appBarClasses: AppBarClassesType;
 export declare function getAppBarClassesUtilityClass(slot: string): string;
-export declare const useUtilityClasses: () => {
+export declare const useAppBarUtilityClasses: () => {
     root: string;
+    containerChilds: string;
+    containerIconMenuToggle: string;
+    iconMenuToggle: string;
 };

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

@@ -1,4 +1,9 @@
+import { useAppBarUtilityClasses } from ".";
 export interface AppBarClassesType {
     root: string;
+    containerChilds: string;
+    containerIconMenuToggle: string;
+    iconMenuToggle: string;
 }
 export declare type AppBarClassesKey = keyof AppBarClassesType;
+export declare type Classes = ReturnType<typeof useAppBarUtilityClasses>;

package/components/AppBar/index.f04f5e45.js

@@ -0,0 +1,94 @@
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useEnvironment } from "@m4l/core";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { I as IconButton } from "../mui_extended/IconButton/index.1a9d4fa5.js";
+import "../mui_extended/Accordion/index.3faafd8b.js";
+import "../Icon/index.9dae8337.js";
+import "react";
+import "clsx";
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../mui_extended/Typography/index.443590d6.js";
+import "../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.fdb5dcbd.js";
+import "../Image/index.c18ebf5a.js";
+import "@mui/lab";
+import "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/MenuActions/index.ba1da3b3.js";
+import "../mui_extended/Pager/index.67bda2c5.js";
+import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
+import { styled } from "@mui/material/styles";
+import { unstable_composeClasses } from "@mui/base";
+const AppBarRoot = styled("header")(({
+  theme
+}) => ({
+  ...theme.components?.M4LAppBar?.styleOverrides
+}));
+const APPBAR_PREFIX = "M4LAppBar";
+const getNameDataTestId = (KEY) => {
+  return `${APPBAR_PREFIX}-${KEY}`;
+};
+const componentName = "M4LAppBar";
+generateUtilityClasses(componentName, [
+  "root",
+  "containerChilds",
+  "containerIconMenuToggle",
+  "iconMenuToggle"
+]);
+function getAppBarClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useAppBarUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    containerChilds: ["containerChilds"],
+    containerIconMenuToggle: ["containerIconMenuToggle"],
+    iconMenuToggle: ["iconMenuToggle"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getAppBarClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const AppBar = (props) => {
+  const {
+    onToggleVisible,
+    children
+  } = props;
+  const isDesktop = useResponsiveDesktop();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const classes = useAppBarUtilityClasses();
+  return /* @__PURE__ */ jsxs(AppBarRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: [!isDesktop ? /* @__PURE__ */ jsx("div", {
+      className: classes.containerIconMenuToggle,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("containerIconMenuToggle")
+      } : {},
+      children: /* @__PURE__ */ jsx(IconButton, {
+        tooltip: "test",
+        className: classes.iconMenuToggle,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/settings/assets/icons/options.svg`,
+        onClick: onToggleVisible
+      })
+    }) : null, /* @__PURE__ */ jsx("div", {
+      className: classes.containerChilds,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("containerChilds")
+      } : {},
+      children
+    })]
+  });
+};
+export {
+  AppBar as A
+};

package/components/AppBar/tests/constants.d.ts

@@ -1 +1 @@
-export declare const ICON_PREFIX = "M4LAppBar";
+export declare const APPBAR_PREFIX = "M4LAppBar";

package/components/AppBar/types.d.ts

@@ -1,9 +1,10 @@
-import { AccountPopoverProps } from "../AccountPopover/types";
+import { ReactNode } from "react";
 export declare type RootStyleProps = {
     isCollapse: boolean;
     isOffset: boolean;
     isSideBarVisible: boolean;
 };
-export interface AppBarProps extends AccountPopoverProps {
+export interface AppBarProps {
     onToggleVisible: VoidFunction;
+    children: ReactNode;
 }