@m4l/components 0.1.84 → 0.1.85

package/components/ScrollBar/{index.d4410cb5.js → index.1247c1c5.js}

@@ -3,18 +3,50 @@ import { styled, alpha } from "@mui/material/styles";
 import SimpleBarReact from "simplebar-react";
 import simpleBarCss from "simplebar/dist/simplebar.min.css?used";
 import { jsx } from "react/jsx-runtime";
-styled("div")`
-    flex-grow: 1;
+const SimpleBarStyle = styled(SimpleBarReact)`
+    /* flex-grow: 1;
     height: 100%;
-    overflow: hidden;
+    overflow: hidden; */
     ${simpleBarCss}
+    height: 100%;
+
+    .simplebar-scrollbar {
+        :before: {
+            background-color: ${(props) => alpha(props.theme.palette.grey[600], 0.48)};
+        }
+        .simplebar-visible:before {
+            opacity: 1;
+        }
+    }
+    .simplebar-track.simplebar-vertical {
+        width: 30;
+    }
+    .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+        height: 6;
+    }
+
+    .simplebar-mask {
+        z-index: 'inherit';
+    }
+
+    .simplebar-content {
+        // display: 'flex',
+        // flexDirection: 'column',
+        // height: '100%',
+    }
+
+    .simplebar-content-wrapper[style*='overflow: hidden scroll;'] {
+        .simplebar-content {
+            margin-right: 16px;
+        }
+    }
 `;
 const RootStyle = styled("div")(() => ({
   flexGrow: 1,
   height: "100%",
   overflow: "hidden"
 }));
-const SimpleBarStyle = styled(SimpleBarReact)(({
+styled(SimpleBarReact)(({
   theme
 }) => ({
   height: "100%",
@@ -35,13 +67,10 @@ const SimpleBarStyle = styled(SimpleBarReact)(({
   "& .simplebar-mask": {
     zIndex: "inherit"
   },
-  "& .simplebar-content": {
-    display: "flex",
-    height: "100%"
-  },
+  "& .simplebar-content": {},
   '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] ': {
     "& .simplebar-content": {
-      marginRight: "20px"
+      marginRight: "12px"
     }
   }
 }));

package/components/SideBar/{index.327679a6.js → index.e0587639.js}

@@ -1,16 +1,17 @@
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { useEnvironment } from "@m4l/core";
-import { createContext, useContext, useState } from "react";
+import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
+import { createContext, useContext, useState, useEffect } from "react";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { I as Image } from "../Image/index.c18ebf5a.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.62aea582.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.be111a34.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { styled as styled$1, generateUtilityClasses, ListItemText, ListItemButton, Collapse, useTheme, Skeleton, Drawer as Drawer$1 } from "@mui/material";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.d1402200.js";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.c3a579e7.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import clsx from "clsx";
+import { useLocation } from "react-router-dom";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
-import { S as ScrollBar } from "../ScrollBar/index.d4410cb5.js";
+import { S as ScrollBar } from "../ScrollBar/index.1247c1c5.js";
 import { styled, alpha } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../utils/index.c43a95f4.js";
@@ -498,30 +499,57 @@ function NavListSubItem(props) {
     }
   } = props;
   const {
-    classes
+    setAncestorActive
+  } = useBase();
+  const [internalItemActive, setInternalItemActive] = useState(false);
+  const {
+    classes,
+    isItemActive
   } = useSideBar();
+  const active = isItemActive(list);
   const [openSub, setOpenSub] = useState(false);
   const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
+  const location = useLocation();
+  useEffect(() => {
+    let mounted = true;
+    if (mounted) {
+      if (active || internalItemActive) {
+        setAncestorActive(true);
+      } else {
+        setAncestorActive(false);
+      }
+    }
+    return function cleanUp() {
+      setAncestorActive(false);
+      mounted = false;
+    };
+  }, [active, internalItemActive, location.search]);
   return /* @__PURE__ */ jsx(NavListSubItemRoot, {
-    className: classes.navListSubItemRoot,
+    className: clsx(classes.navListSubItemRoot, active || internalItemActive ? classes.subItemActive : null),
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("navListSubItemRoot")
     } : {},
-    children: hasChildren ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(NavSubItem, {
-        item: list,
-        openSub,
-        setOpenSub,
-        closePopover
-      }), /* @__PURE__ */ jsx(Collapse, {
-        in: openSub,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: (list.children || []).map((item) => /* @__PURE__ */ jsx(NavListSubItem, {
-          item,
+    children: hasChildren ? /* @__PURE__ */ jsx(BaseProvider, {
+      value: {
+        ancestorActive: internalItemActive,
+        setAncestorActive: setInternalItemActive
+      },
+      children: /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(NavSubItem, {
+          item: list,
+          openSub,
+          setOpenSub,
           closePopover
-        }, item.title))
-      })]
+        }), /* @__PURE__ */ jsx(Collapse, {
+          in: openSub,
+          timeout: "auto",
+          unmountOnExit: true,
+          children: (list.children || []).map((item) => /* @__PURE__ */ jsx(NavListSubItem, {
+            item,
+            closePopover
+          }, item.title))
+        })]
+      })
     }) : /* @__PURE__ */ jsx(NavSubItem, {
       item: list,
       openSub,
@@ -627,53 +655,86 @@ const ContainerListSubItem = styled$1("div")(({
 }));
 function ItemListMain(props) {
   const {
-    list,
-    setItemMainActive,
-    itemMainActive,
-    id
+    list
   } = props;
   const {
     collapsed: isSideBarCollapsed,
     isItemActive,
     classes
   } = useSideBar();
-  const active = isItemActive(list);
-  const [open, setOpen] = useState(active);
+  const location = useLocation();
+  const [internalItemActive, setInternalItemActive] = useState(false);
+  const [active, setActive] = useState(false);
+  const childrens = [];
+  const findChildren = (list2) => {
+    const moduleId = list2.children ? list2.children[0].module_id : void 0;
+    if (moduleId) {
+      childrens.push(moduleId);
+      list2.children && findChildren(list2.children[0]);
+    }
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (mounted) {
+      setActive(false);
+      setActive(isItemActive(list));
+      if (mounted && !active) {
+        findChildren(list);
+        for (let i = 0; i < childrens.length; i++) {
+          if (isItemActive({
+            title: "",
+            module_id: childrens[i]
+          })) {
+            setActive(true);
+            break;
+          }
+        }
+      }
+    }
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [location.search]);
+  const [open, setOpen] = useState(true);
   const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
   if (hasChildren) {
-    return /* @__PURE__ */ jsxs("div", {
+    return /* @__PURE__ */ jsx("div", {
       role: "presentation",
-      className: clsx(classes.itemListMainRoot, itemMainActive === id && classes.itemMainActive),
+      className: clsx(classes.itemListMainRoot, active || internalItemActive ? classes.itemMainActive : null),
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("itemListMainRoot")
       } : {},
-      onClick: () => setItemMainActive(id),
-      children: [/* @__PURE__ */ jsx(NavItemMain, {
-        item: list,
-        open,
-        setOpen
-      }), !isSideBarCollapsed && /* @__PURE__ */ jsx(Collapse, {
-        in: open,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: (list.children || []).map((item) => /* @__PURE__ */ jsx(ContainerListSubItem, {
-          className: classes.containerListSubItem,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId("containerListSubItem")
-          } : {},
-          children: /* @__PURE__ */ jsx(NavListSubItem, {
-            item
-          }, item.title)
-        }, item.title))
-      })]
+      children: /* @__PURE__ */ jsxs(BaseProvider, {
+        value: {
+          ancestorActive: internalItemActive,
+          setAncestorActive: setInternalItemActive
+        },
+        children: [/* @__PURE__ */ jsx(NavItemMain, {
+          item: list,
+          open,
+          setOpen
+        }), !isSideBarCollapsed && /* @__PURE__ */ jsx(Collapse, {
+          in: open,
+          timeout: "auto",
+          unmountOnExit: true,
+          children: (list.children || []).map((item) => /* @__PURE__ */ jsx(ContainerListSubItem, {
+            className: classes.containerListSubItem,
+            ...process.env.NODE_ENV !== "production" ? {
+              [TEST_PROP_ID]: getNameDataTestId("containerListSubItem")
+            } : {},
+            children: /* @__PURE__ */ jsx(NavListSubItem, {
+              item
+            }, item.title)
+          }, item.title))
+        })]
+      })
     });
   }
   return /* @__PURE__ */ jsx("div", {
-    className: clsx(classes.itemListMainRoot, itemMainActive === id && classes.itemMainActive),
+    className: clsx(classes.itemListMainRoot, active ? classes.itemMainActive : null),
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("itemListMainRoot")
     } : {},
-    onClick: () => setItemMainActive(id),
     children: /* @__PURE__ */ jsx(NavItemMain, {
       item: list,
       open,

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/subcomponents/NavItemRoot/type.d.ts

@@ -1,5 +1,10 @@
+/// <reference types="react" />
 import { MenuDataType } from "../../../../../../types";
 import { OpenStateItem } from "../../types";
+export interface AncestorItem {
+    ancestorActive: boolean;
+    setAncestorActive: React.Dispatch<React.SetStateAction<boolean>>;
+}
 export declare type NavListProps = MenuDataType;
 export interface NavItemRootProps extends OpenStateItem {
     item: NavListProps;

package/components/areas/components/AreasAdmin/classes/index.d.ts

@@ -1,5 +1,5 @@
 import { AreasAdmninClasses } from './types';
 import { OwnerState } from '../../../contexts/AreasContext/types';
 export declare const areasAdminClasses: AreasAdmninClasses;
-export declare const useAreasAdminUtilityClasses: (ownerState: OwnerState) => Record<"root" | "areaChipRoot" | "areaIconLayer" | "areaContainerChipsIcon" | "areaContainerChips" | "areaContainerContentChips" | "areaEditPopover" | "areaChipMobileRoot" | "areaChipMobileIconContainer" | "areaChipTitle" | "areaContainerChipEditButton" | "areaChipDeleteButton" | "areaChipEditButton" | "areasAddButton" | "areasPopoverMobileOptions" | "areasPopoverListWindows", string>;
+export declare const useAreasAdminUtilityClasses: (ownerState: OwnerState) => Record<"root" | "rootContent" | "areaChipRoot" | "areaIconLayer" | "areaContainerChipsIcon" | "areaContainerChips" | "areaContainerContentChips" | "areaEditPopover" | "areaChipMobileRoot" | "areaChipMobileIconContainer" | "areaChipTitle" | "areaContainerChipEditButton" | "areaChipDeleteButton" | "areaChipEditButton" | "areasAddButton" | "areasPopoverMobileOptions" | "areasPopoverListWindows" | "areasPopoverListWindowsIcon", string>;
 export declare type AdminClasses = ReturnType<typeof useAreasAdminUtilityClasses>;

package/components/areas/components/AreasAdmin/classes/types.d.ts

@@ -1,5 +1,6 @@
 export interface AreasAdmninClasses {
     root: string;
+    rootContent: string;
     areaChipRoot: string;
     areaChipTitle: string;
     areaContainerChips: string;
@@ -16,6 +17,7 @@ export interface AreasAdmninClasses {
     areasAddButton: string;
     areasPopoverMobileOptions: string;
     areasPopoverListWindows: string;
+    areasPopoverListWindowsIcon: string;
     selected: string;
     isMobile: string;
     disabled: string;

package/components/areas/components/AreasAdmin/{index.8ab71eb9.js → index.f505897a.js}

@@ -1,11 +1,11 @@
-import { I as IconButton } from "../../../mui_extended/IconButton/index.62aea582.js";
-import { u as useAreasStore } from "../../hooks/useAreas/index.b8449343.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.be111a34.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.4baec91c.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo } from "react";
 import * as Yup from "yup";
 import { generateUtilityClasses, useTheme } from "@mui/material";
-import "../../../mui_extended/Accordion/index.46771196.js";
-import { I as Icon } from "../../../Icon/index.d1402200.js";
+import "../../../mui_extended/Accordion/index.854f4c90.js";
+import { I as Icon } from "../../../Icon/index.c3a579e7.js";
 import clsx from "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
@@ -14,55 +14,57 @@ import "react-router-dom";
 import "@mui/material/Button";
 import { B as Button } from "../../../mui_extended/Button/index.40af964e.js";
 import "../../../mui_extended/CheckBox.38abccd8.js";
-import "../../../mui_extended/Badge/index.cad260fe.js";
+import "../../../mui_extended/Badge/index.8c2b8b66.js";
 import "../../../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.2493b1b1.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.b16e84c1.js";
 import { P as Popover } from "../../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../../mui_extended/Pager/index.a7f87c96.js";
+import "../../../mui_extended/Stack/index.0e53197c.js";
+import "../../../mui_extended/Tab/index.c1dc7bbf.js";
+import "../../../mui_extended/Pager/index.5b77fa4c.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import "../../../mui_extended/Tab/index.756fe693.js";
 import "../../../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../../utils/index.c43a95f4.js";
 import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants.66529246.js";
 import { I as ICONS } from "../../icons.8266ccc8.js";
 import "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "../../../../contexts/ModalContext/index.51da83de.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.b9266262.js";
+import "../../../../contexts/ModalContext/index.1ea79d7e.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.e019f87d.js";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.d5afb409.js";
-import "../../../HelperText/index.a47ff233.js";
+import "../../../hook-form/RHFAutocomplete/index.aca6984f.js";
+import "../../../HelperText/index.8b5911d1.js";
 import "lodash/debounce";
-import "../../../hook-form/RHFAutocompleteAsync/index.a4f00088.js";
-import "../../../hook-form/RHFCheckbox/index.9bf6edb0.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.8511bcf8.js";
+import "../../../hook-form/RHFCheckbox/index.0f45e6b0.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.a2c1ed2c.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.5a0fa776.js";
-import "../../../hook-form/RHFPeriod/index.b5204ce2.js";
-import "../../../Period/index.e129cdec.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.e70e8779.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.29517521.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.a9420126.js";
+import "../../../hook-form/RHFDateTime/index.07412ef0.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.94c8c59b.js";
+import "../../../hook-form/RHFPeriod/index.15b8f11e.js";
+import "../../../Period/index.061c9b2f.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.c91c27f9.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.67b91376.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.53e7fe2b.js";
 import "../../../../react-draggable.7abb5d0a.js";
 import "../../../Resizeable/index.9a9c79a4.js";
-import "../../../modal/index.6f281ef8.js";
+import "../../../modal/index.c7e4beba.js";
 import { shallow } from "zustand/shallow";
 import { styled } from "@mui/material/styles";
-import { S as ScrollBar } from "../../../ScrollBar/index.d4410cb5.js";
+import { S as ScrollBar } from "../../../ScrollBar/index.1247c1c5.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
 import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import "../AreasViewer/index.933e506b.js";
+import "../AreasViewer/index.cacec884.js";
 import "../../../LinearProgressIndeterminate/index.60dabc06.js";
-import "../../contexts/AreasContext/index.230d1584.js";
+import "../../contexts/AreasContext/index.6f56b1da.js";
 import "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "zustand";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.b36539d6.js";
-import { u as useOnClickOutside } from "../../index.32db4fa7.js";
+import "../../../hook-form/RHFUpload/index.7ef1e124.js";
+import { u as useOnClickOutside } from "../../index.3088f99e.js";
 const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "root",
+  "rootContent",
   "areaChipRoot",
   "areaChipTitle",
   "areaChipDeleteButton",
@@ -79,6 +81,7 @@ const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "areaChipEditButton",
   "areasPopoverMobileOptions",
   "areasPopoverListWindows",
+  "areasPopoverListWindowsIcon",
   "selected",
   "isMobile",
   "disabled",
@@ -87,6 +90,7 @@ const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
 const useAreasAdminUtilityClasses = (ownerState) => {
   const slots = {
     root: ["root", ownerState.status, ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton", ownerState.focus && "isFocus"],
+    rootContent: ["rootContent"],
     areaChipRoot: ["areaChipRoot"],
     areaIconLayer: ["areaIconLayer"],
     areaContainerChipsIcon: ["areaContainerChipsIcon"],
@@ -101,7 +105,8 @@ const useAreasAdminUtilityClasses = (ownerState) => {
     areaChipEditButton: ["areaChipEditButton"],
     areasAddButton: ["areasAddButton"],
     areasPopoverMobileOptions: ["areasPopoverMobileOptions"],
-    areasPopoverListWindows: ["areasPopoverListWindows"]
+    areasPopoverListWindows: ["areasPopoverListWindows"],
+    areasPopoverListWindowsIcon: ["areasPopoverListWindowsIcon"]
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
 };
@@ -145,7 +150,7 @@ const ChipActionsMobile = (props) => {
   const {
     setFocus
   } = useAreasStore((state) => state.areaAdminActions, shallow);
-  const listAreas = useAreasStore((state) => state.areas, shallow);
+  const listAreas = useAreasStore((state) => state.areasIds, shallow);
   const {
     host_static_assets,
     environment_assets
@@ -204,7 +209,7 @@ const AreaChip = (props) => {
     setFocus
   } = useAreasStore((state) => state.areaAdminActions);
   const areaName = useAreasStore((state) => state.hashAreas[areaId].name, shallow);
-  const listAreas = useAreasStore((state) => state.areas, shallow);
+  const listAreas = useAreasStore((state) => state.areasIds, shallow);
   const [open, setOpen] = useState(false);
   const {
     getLabel
@@ -388,7 +393,7 @@ const ChipMobile = (props) => {
     setFocus
   } = useAreasStore((state) => state.areaAdminActions);
   const areaName = useAreasStore((state) => state.hashAreas[areaId].name, shallow);
-  const listAreas = useAreasStore((state) => state.areas, shallow);
+  const listAreas = useAreasStore((state) => state.areasIds, shallow);
   const [open, setOpen] = useState(false);
   const {
     getLabel
@@ -478,6 +483,7 @@ const ChipMobile = (props) => {
       areaId,
       handlerOpenPopoverEditArea
     }), /* @__PURE__ */ jsx("div", {
+      role: "presentation",
       onClick: (e) => {
         e.stopPropagation();
       },
@@ -543,7 +549,7 @@ const ChipMobile = (props) => {
 };
 ChipMobile.displayName = "AreaButtons";
 const AreaChipMobile = () => {
-  const areas = useAreasStore((state) => state.areas.map((a) => ({
+  const areas = useAreasStore((state) => state.areasIds.map((a) => ({
     id: a,
     name: state.hashAreas[a].name
   })), shallow);
@@ -628,19 +634,72 @@ const AreaChipMobile = () => {
     })
   });
 };
+const PanelWindowPopUp = (props) => {
+  const {
+    currentAreaId
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const windowsLayouts = useAreasStore((state) => state.hashAreas[currentAreaId].layoutItemsIds.filter((li) => state.hashWindows[li].emergeType === "layout").map((lim) => {
+    const w = state.hashWindows[lim];
+    return {
+      i: w.windowId,
+      url_icon: w.url_icon,
+      title: w.title
+    };
+  }), shallow);
+  const theme = useTheme();
+  const {
+    maximizeLayout
+  } = useAreasStore((state) => state.areaActions);
+  const onTouched = (layoutId) => {
+    maximizeLayout(currentAreaId, layoutId);
+  };
+  const menuActions = windowsLayouts.map((element) => {
+    return {
+      onClick: () => onTouched(element.i),
+      label: element.title,
+      urlIcon: element.url_icon
+    };
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: menuActions.length > 0 ? /* @__PURE__ */ jsx(MenuActions, {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`,
+      arrowType: "no-arrow",
+      marginTop: "12px!important",
+      marginLeft: "14px!important",
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions,
+      className: areasAdminClasses.areasPopoverListWindows,
+      iconButtonClassName: areasAdminClasses.areasPopoverListWindowsIcon,
+      menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides
+    }) : null
+  });
+};
 function AreasAdmin() {
-  const areas = useAreasStore((state) => state.areas, shallow);
+  const areas = useAreasStore((state) => state.areasIds, shallow);
   const currentArea = useAreasStore((state) => state.currentAreaId, shallow);
   const status = useAreasStore((state) => state.ownerState.status);
   const {
     setFocus
   } = useAreasStore((state) => state.areaAdminActions, shallow);
   const classesRoot = useAreasStore((state) => state.adminClasses.root);
-  const areasLength = useAreasStore((state) => state.areas.length);
+  const areasLength = useAreasStore((state) => state.areasIds.length);
   const isDesktop = useResponsiveDesktop();
   const {
     addArea
   } = useAreasStore((state) => state.areasActions, shallow);
+  const maximizedId = useAreasStore((state) => state.hashAreas[currentArea] ? state.hashAreas[currentArea].maximizedId : false, shallow);
+  console.log("currentArea test", currentArea);
   const {
     host_static_assets,
     environment_assets
@@ -665,30 +724,18 @@ function AreasAdmin() {
   if (status !== "loaded") {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", {
+  return /* @__PURE__ */ jsx(AreasAdminRoot, {
     ref: divRefOut,
-    style: {
-      width: "100%",
-      height: "100%",
-      position: "static"
-    },
     onMouseDown: onRippleStart,
     onMouseUp: onRippleStop,
-    children: /* @__PURE__ */ jsxs(AreasAdminRoot, {
+    className: classesRoot,
+    children: /* @__PURE__ */ jsxs("div", {
       ref: divRef,
-      className: classesRoot,
+      className: areasAdminClasses.rootContent,
       onClick: () => setFocus(true),
-      children: [/* @__PURE__ */ jsxs("div", {
+      children: [/* @__PURE__ */ jsx("div", {
         className: areasAdminClasses.areaContainerChipsIcon,
-        children: [isDesktop ? /* @__PURE__ */ jsx("div", {
-          className: areasAdminClasses.areaIconLayer,
-          children: /* @__PURE__ */ jsx("div", {
-            className: areasAdminClasses.areaIconLayerContent,
-            children: /* @__PURE__ */ jsx(Icon, {
-              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`
-            })
-          })
-        }) : null, /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx("div", {
           className: areasAdminClasses.areaContainerChips,
           children: /* @__PURE__ */ jsx("div", {
             className: areasAdminClasses.areaContainerContentChips,
@@ -702,12 +749,14 @@ function AreasAdmin() {
               })
             }) : /* @__PURE__ */ jsx(AreaChipMobile, {})
           })
-        })]
+        })
       }), isDesktop ? /* @__PURE__ */ jsx(IconButton, {
         className: areasAdminClasses.areasAddButton,
         src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
         size: "small",
         onClick: addArea
+      }) : null, !isDesktop && maximizedId ? /* @__PURE__ */ jsx(PanelWindowPopUp, {
+        currentAreaId: currentArea
       }) : null]
     })
   });

package/components/areas/components/AreasViewer/classes/index.d.ts

@@ -1,5 +1,5 @@
 import { AreasViewerClasses } from './types';
 import { OwnerState } from '../../../contexts/AreasContext/types';
 export declare const areasViewerClasses: AreasViewerClasses;
-export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "windowLinearProgressBar" | "areasPopoverListWindows" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowContent" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "windowToastyContainer", string>;
+export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "resizeHandle" | "windowLinearProgressBar" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowContent" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "windowToastyContainer", string>;
 export declare type ViwerClasses = ReturnType<typeof useAreasViewerUtilityClasses>;

package/components/areas/components/AreasViewer/classes/types.d.ts

@@ -35,7 +35,7 @@ export interface AreasViewerClasses {
     windowToastyClose: string;
     panelWindowsRoot: string;
     panelWindowsButtonContainer: string;
-    areasPopoverListWindows: string;
+    resizeHandle: string;
     selected: string;
     selectedWindow: string;
     colapsed: string;