@m4l/components 0.1.84 → 0.1.86

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

@@ -1,68 +1,70 @@
-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.d88a3f2e.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.d1cf9820.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.d15e51bf.js";
+import { I as Icon } from "../../../Icon/index.435df215.js";
 import clsx from "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
 import "../../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import { B as Button } from "../../../mui_extended/Button/index.40af964e.js";
+import { B as Button } from "../../../mui_extended/Button/index.f79eb74e.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.c53370f6.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.97d04d6b.js";
+import "../../../mui_extended/Pager/index.d6c87c44.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.5c908fe3.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.ea2758ed.js";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.d5afb409.js";
-import "../../../HelperText/index.a47ff233.js";
+import "../../../hook-form/RHFAutocomplete/index.60c6f592.js";
+import "../../../HelperText/index.bbbe24c9.js";
 import "lodash/debounce";
-import "../../../hook-form/RHFAutocompleteAsync/index.a4f00088.js";
-import "../../../hook-form/RHFCheckbox/index.9bf6edb0.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.9a40fb06.js";
+import "../../../hook-form/RHFCheckbox/index.da4ebb03.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.c56219ea.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.413a74ca.js";
+import "../../../hook-form/RHFPeriod/index.ee6a3d61.js";
+import "../../../Period/index.32d475b8.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.99a8e55e.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.d995d986.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.98eb4b3b.js";
 import "../../../../react-draggable.7abb5d0a.js";
 import "../../../Resizeable/index.9a9c79a4.js";
-import "../../../modal/index.6f281ef8.js";
+import "../../../modal/index.6cdf65c9.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.65bb2930.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.68eb0f6b.js";
 import "../../../LinearProgressIndeterminate/index.60dabc06.js";
-import "../../contexts/AreasContext/index.230d1584.js";
+import "../../contexts/AreasContext/index.8af3058c.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.03faa7f0.js";
+import { u as useOnClickOutside } from "../../index.fd46ec65.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
@@ -317,7 +322,7 @@ const AreaChip = (props) => {
           validationSchema,
           children: [/* @__PURE__ */ jsxs(EditAreaHeader, {
             children: [/* @__PURE__ */ jsx(Typography, {
-              children: getLabel(DICCTIONARY.label_edit_area)
+              children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area))
             }), /* @__PURE__ */ jsx(IconButton, {
               src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
               size: "small",
@@ -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();
       },
@@ -508,7 +514,7 @@ const ChipMobile = (props) => {
           validationSchema,
           children: [/* @__PURE__ */ jsxs(EditAreaHeader, {
             children: [/* @__PURE__ */ jsx(Typography, {
-              children: getLabel(DICCTIONARY.label_edit_area)
+              children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area))
             }), /* @__PURE__ */ jsx(IconButton, {
               src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
               size: "small",
@@ -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;

package/components/areas/components/AreasViewer/{index.933e506b.js → index.68eb0f6b.js}

@@ -13,26 +13,27 @@ import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
 import { shallow } from "zustand/shallow";
 import React__default, { useMemo, useState, useCallback, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.b8449343.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.d1cf9820.js";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.62aea582.js";
-import "../../../mui_extended/Accordion/index.46771196.js";
-import { I as Icon } from "../../../Icon/index.d1402200.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.d88a3f2e.js";
+import "../../../mui_extended/Accordion/index.d15e51bf.js";
+import { I as Icon } from "../../../Icon/index.435df215.js";
 import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import "../../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import { B as Button } from "../../../mui_extended/Button/index.40af964e.js";
+import { B as Button } from "../../../mui_extended/Button/index.f79eb74e.js";
 import "../../../mui_extended/CheckBox.38abccd8.js";
-import "../../../mui_extended/Badge/index.cad260fe.js";
-import "../../../Image/index.c18ebf5a.js";
+import "../../../mui_extended/Badge/index.8c2b8b66.js";
+import { I as Image } from "../../../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import { M as MenuActions, a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.2493b1b1.js";
+import { M as MenuActions, a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.c53370f6.js";
 import "../../../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.97d04d6b.js";
+import "../../../mui_extended/Pager/index.d6c87c44.js";
 import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
-import "../../../mui_extended/Tab/index.756fe693.js";
 import "../../../mui_extended/Tooltip/index.5a795dcd.js";
 import { I as ICONS } from "../../icons.8266ccc8.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
@@ -41,58 +42,57 @@ import debounce from "lodash/debounce";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "../../../../contexts/ModalContext/index.51da83de.js";
-import "../../../../contexts/RHFormContext/index.b9266262.js";
-import "../../../GridLayout/subcomponents/Griditem/index.6c68811f.js";
-import "../../../GridLayout/index.c55f16eb.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.a6e33b8d.js";
-import { S as SizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.bfa05dfa.js";
-import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.230d1584.js";
+import "../../../../contexts/ModalContext/index.5c908fe3.js";
+import "../../../../contexts/RHFormContext/index.ea2758ed.js";
+import "../../../GridLayout/subcomponents/Griditem/index.58168132.js";
+import { S as SizeProvider } from "../../../GridLayout/index.2383aaf9.js";
+import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.a6642437.js";
+import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.8af3058c.js";
 import "../../../animate/index.4e9774a6.js";
 import "framer-motion";
 import "../../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../../animate/PropagateLoader/index.7fab43c8.js";
-import "../AreasAdmin/index.8ab71eb9.js";
-import "../../../ScrollBar/index.d4410cb5.js";
+import "../AreasAdmin/index.23a09c81.js";
+import "../../../ScrollBar/index.65bb2930.js";
 import "zustand";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.d5afb409.js";
-import "../../../HelperText/index.a47ff233.js";
-import "../../../hook-form/RHFAutocompleteAsync/index.a4f00088.js";
-import "../../../hook-form/RHFCheckbox/index.9bf6edb0.js";
+import "../../../hook-form/RHFAutocomplete/index.60c6f592.js";
+import "../../../HelperText/index.bbbe24c9.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.9a40fb06.js";
+import "../../../hook-form/RHFCheckbox/index.da4ebb03.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.a2c1ed2c.js";
-import "../../../hook-form/RHFTextField/index.5a0fa776.js";
-import "../../../hook-form/RHFPeriod/index.b5204ce2.js";
-import "../../../Period/index.e129cdec.js";
-import "../../../CommonActions/components/Actions/index.e70e8779.js";
+import "../../../hook-form/RHFDateTime/index.c56219ea.js";
+import "../../../hook-form/RHFTextField/index.413a74ca.js";
+import "../../../hook-form/RHFPeriod/index.ee6a3d61.js";
+import "../../../Period/index.32d475b8.js";
+import "../../../CommonActions/components/Actions/index.99a8e55e.js";
 import { c as cjs } from "../../../../react-draggable.7abb5d0a.js";
 import { R as ResizeableWindow } from "../../../Resizeable/index.9a9c79a4.js";
-import "../../../modal/index.6f281ef8.js";
+import "../../../modal/index.6cdf65c9.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.b36539d6.js";
-import "../../../DataGrid/index.1d0a3dec.js";
+import "../../../hook-form/RHFUpload/index.03faa7f0.js";
+import "../../../DataGrid/index.d38e3b49.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../../DataGrid/subcomponents/Actions/index.a8fc9f6a.js";
+import "../../../DataGrid/subcomponents/Actions/index.7015aadc.js";
 import "../../../DataGrid/subcomponents/editors/TextEditor/index.91380a55.js";
-import "../../../DynamicFilter/index.912679cc.js";
+import "../../../DynamicFilter/index.fddefc23.js";
 import "yup";
 import "lodash";
-import "../../../LanguagePopover/index.807f5272.js";
-import "../../../NavLink/index.ff5a939c.js";
-import "../../../NoItemSelected/index.23dfc897.js";
-import "../../../ObjectLogs/index.dc02715d.js";
+import "../../../LanguagePopover/index.7d2ccfe4.js";
+import "../../../NavLink/index.abbcb9b2.js";
+import "../../../NoItemSelected/index.a2807715.js";
+import "../../../ObjectLogs/index.ad313913.js";
 import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.249c2404.js";
+import "../../../PaperForm/index.ad703ab6.js";
 import "../../../Page/index.4237c241.js";
-import "../../../PropertyValue/index.93e40532.js";
+import "../../../PropertyValue/index.d52295d9.js";
 import "../../../SplitLayout/index.9ef430f6.js";
 import "../../../../react-splitter-layout.8b1655c8.js";
-import "../../../SideBar/index.327679a6.js";
-import "../../../AppBar/index.43f8b54f.js";
-import "../../../AccountPopover/index.bbeb9142.js";
+import "../../../SideBar/index.387a2fa1.js";
+import "../../../AppBar/index.4fac1368.js";
+import "../../../AccountPopover/index.09f33fee.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
@@ -131,7 +131,7 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "panelWindowsRoot",
   "panelWindowsButtonContainer",
   "containerLinearProgress",
-  "areasPopoverListWindows",
+  "resizeHandle",
   "selected",
   "colapsed",
   "selectedWindow",
@@ -180,7 +180,7 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     windowToastyClose: ["windowToastyClose"],
     panelWindowsRoot: ["panelWindowsRoot"],
     panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
-    areasPopoverListWindows: ["areasPopoverListWindows"]
+    resizeHandle: ["resizeHandle"]
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
 };
@@ -604,56 +604,6 @@ const WindowPopUpsList = (props) => {
     return null;
   }
 };
-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.MODULE}`,
-      arrowType: "no-arrow",
-      marginTop: "12px!important",
-      marginLeft: "14px!important",
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      menuActions,
-      className: areasViewerClasses.areasPopoverListWindows,
-      menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides
-    }) : null
-  });
-};
 function Header(props) {
   const {
     areaId,
@@ -672,12 +622,6 @@ function Header(props) {
       window2.fnQueryClose
     ];
   }, shallow);
-  const currentAreaId = useAreasStore((state) => state.currentAreaId, shallow);
-  const areas = useAreasStore((state) => state.areas.map((a) => ({
-    id: a,
-    name: state.hashAreas[a].name
-  })), shallow);
-  const currentArea = areas.find((area) => area.id === currentAreaId);
   const {
     saveModuleCookies,
     resetModuleCookies
@@ -769,9 +713,7 @@ function Header(props) {
             horizontal: "right"
           },
           menuActions
-        }), maximizedId && emergeType === "layout" && currentArea ? /* @__PURE__ */ jsx(PanelWindowPopUp, {
-          currentAreaId: currentArea.id
-        }) : null, !colapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(IconButton, {
+        }), !colapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(IconButton, {
           className: "m4l_draggableCancel",
           onClick: maxNormalize,
           "aria-label": "click",
@@ -1375,29 +1317,31 @@ const Window = (props) => {
   });
 };
 React__default.memo(Window);
-const ResponsiveGridLayout = SizeProvider(Responsive);
-const AreaGridLayout = (props) => {
+const ResizeHandle = React__default.forwardRef((props, ref) => {
   const {
-    areaId
+    handleAxis,
+    ...restProps
   } = props;
   const {
     host_static_assets,
     environment_assets
   } = useEnvironment();
-  const ResizeHandle = React__default.forwardRef((props2, ref) => {
-    const {
-      handleAxis,
-      ...restProps
-    } = props2;
-    return /* @__PURE__ */ jsx("div", {
-      ref,
-      className: `react-resizable-handle react-resizable-handle-${handleAxis}`,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(Icon, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/control_size.svg`
-      })
-    });
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: clsx(`react-resizable-handle react-resizable-handle-${handleAxis}`, areasViewerClasses.resizeHandle),
+    ...restProps,
+    children: /* @__PURE__ */ jsx(Image, {
+      width: "12px",
+      height: "12px",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/control_size.svg`
+    })
   });
+});
+const ResponsiveGridLayout = SizeProvider(Responsive);
+const AreaGridLayout = (props) => {
+  const {
+    areaId
+  } = props;
   const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds, shallow);
   const layouts = useAreasStore((state) => state.hashAreas[areaId].layouts, shallow);
   const breakpoints = useAreasStore((state) => state.hashAreas[areaId].breakpoints, shallow);
@@ -1599,15 +1543,17 @@ const WindowModal = (props) => {
 };
 const MemonizedWindowModal = React__default.memo(WindowModal);
 function AreasViewer() {
-  const areas = useAreasStore((state) => state.areas, shallow);
-  const windowsModals = useAreasStore((state) => state.windowsModals);
-  const hashWindowsModals = useAreasStore((state) => state.hashWindowsModals);
-  const currentArea = useAreasStore((state) => state.currentAreaId);
-  const status = useAreasStore((state) => state.ownerState.status);
-  const classesRoot = useAreasStore((state) => state.viwerClasses.root);
+  const areas = useAreasStore((state2) => state2.areasIds, shallow);
+  const windowsModals = useAreasStore((state2) => state2.windowsModals);
+  const hashWindowsModals = useAreasStore((state2) => state2.hashWindowsModals);
+  const currentArea = useAreasStore((state2) => state2.currentAreaId);
+  const status = useAreasStore((state2) => state2.ownerState.status);
+  const classesRoot = useAreasStore((state2) => state2.viwerClasses.root);
+  const state = useAreasStore((state2) => state2);
+  console.log("Areas state >>>>", state);
   const {
     init
-  } = useAreasStore((state) => state.areasActions);
+  } = useAreasStore((state2) => state2.areasActions);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(AreasViewerRoot, {
       className: classesRoot,

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/subcomponents/ResizeHandle/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const ResizeHandle: React.ForwardRefExoticComponent<{
+    handleAxis?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;