@m4l/components 0.1.77 → 0.1.78

package/components/NavLink/{index.cd92eceb.js → index.a5dea6d3.js}

@@ -2,13 +2,13 @@ import { NavLink as NavLink$1 } from "react-router-dom";
 import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
 import "react";
 import "@m4l/core";
-import "../Icon/index.ecb63e65.js";
+import "../Icon/index.9fcd1476.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.fc5b7c2d.js";
+import "../mui_extended/IconButton/index.12f1a3c3.js";
 import "@m4l/graphics";
-import "../mui_extended/Accordion/index.12b1339a.js";
+import "../mui_extended/Accordion/index.9877f7bf.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "@mui/material/Button";
@@ -16,10 +16,10 @@ import "../mui_extended/Button/index.4288f9fc.js";
 import "../mui_extended/Badge/index.8c2b8b66.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
+import "../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/MenuActions/index.f5b1c022.js";
-import "../mui_extended/Pager/index.435af0df.js";
-import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Pager/index.2f6d6d7d.js";
+import "../mui_extended/Tab/index.7c82e43d.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
 const componentName = "M4LNavLink";

package/components/ObjectLogs/{index.f174c542.js → index.d9d20b9d.js}

@@ -1,46 +1,47 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.545b492f.js";
+import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.9fb3e6a1.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
 import { Tooltip, IconButton } from "@mui/material";
 import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
 import { R as ReactJson } from "../../react-json-view.57125fcf.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useModal } from "../../hooks/useModal/index.de522a10.js";
-import { I as Icon } from "../Icon/index.ecb63e65.js";
+import { u as useModal } from "../../hooks/useModal/index.8e85f7ae.js";
+import { I as Icon } from "../Icon/index.9fcd1476.js";
 import "../../react-draggable.7abb5d0a.js";
 import "../Resizeable/index.9a9c79a4.js";
-import "../modal/index.a0978193.js";
-import "../CommonActions/components/Actions/index.3eba9d91.js";
+import "../modal/index.00efea85.js";
+import "../CommonActions/components/Actions/index.52125041.js";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.4288f9fc.js";
 import "clsx";
 import "react-hook-form";
-import "../mui_extended/IconButton/index.fc5b7c2d.js";
+import "../mui_extended/IconButton/index.12f1a3c3.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.c8147e8e.js";
-import "../areas/components/AreasAdmin/index.cc4cbf56.js";
+import "../areas/contexts/AreasContext/index.02c4e7be.js";
+import "../areas/components/AreasAdmin/index.43ecd998.js";
 import "zustand/shallow";
 import "../ScrollBar/index.bbe48f4d.js";
-import "../mui_extended/Accordion/index.12b1339a.js";
+import "../mui_extended/Accordion/index.9877f7bf.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "../mui_extended/Badge/index.8c2b8b66.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
+import "../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/MenuActions/index.f5b1c022.js";
-import "../mui_extended/Pager/index.435af0df.js";
-import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Pager/index.2f6d6d7d.js";
+import "../mui_extended/Tab/index.7c82e43d.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
-import "../areas/components/AreasViewer/index.9c2aaaeb.js";
+import "../areas/components/AreasViewer/index.14e62059.js";
 import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
-import { W as WindowBase } from "../modal/WindowBase.850ea31a.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.d7be0f37.js";
+import { W as WindowBase } from "../modal/WindowBase.a0c0b322.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.d1a2e2d1.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 const Container$1 = styled("div")(() => ({
   height: "100%",
   width: "100%",
@@ -164,7 +165,8 @@ function DetailFormatter(props) {
 function ObjectLogs(props) {
   const {
     resource_id,
-    object_id
+    object_id,
+    dataTestId = ""
   } = props;
   const {
     getLabel
@@ -243,6 +245,9 @@ function ObjectLogs(props) {
     Refresh();
   };
   return /* @__PURE__ */ jsxs(Container$1, {
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: `m4ldatagrid-${dataTestId}`
+    } : {},
     children: [/* @__PURE__ */ jsx(Actions, {
       id: "objectLogsActions",
       children: /* @__PURE__ */ jsx(DynamicFilter, {
@@ -284,6 +289,7 @@ function ObjectLogs(props) {
       id: "GridWrapper",
       children: /* @__PURE__ */ jsx(DataGrid, {
         id: "users_logs_list",
+        dataTestId,
         columns,
         rows,
         rowKeyGetter: (row) => row.id,

package/components/ObjectLogs/types.d.ts

@@ -11,6 +11,7 @@ export interface RowLog {
 export interface LogsProps {
     resource_id: number;
     object_id: Maybe<number>;
+    dataTestId?: string;
 }
 export interface QueryParams extends LogsProps, Record<string, unknown> {
 }

package/components/PaperForm/{index.1bd86ee5.js → index.ba38a0bd.js}

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { useModuleSkeleton } from "@m4l/core";
 import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { I as Icon } from "../Icon/index.ecb63e65.js";
+import { I as Icon } from "../Icon/index.9fcd1476.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
 const PaperFormRoot = styled("div")(({

package/components/Period/{index.711db043.js → index.7b94c418.js}

@@ -1,37 +1,37 @@
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, generateUtilityClasses, generateUtilityClass, Autocomplete, TextField, Skeleton } from "@mui/material";
 import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.ecb63e65.js";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.3eba9d91.js";
+import { I as Icon } from "../Icon/index.9fcd1476.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.52125041.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.4288f9fc.js";
 import "clsx";
 import "react-hook-form";
-import "../../contexts/ModalContext/index.dee85a61.js";
+import "../../contexts/ModalContext/index.e9a7ba4a.js";
 import "../../react-draggable.7abb5d0a.js";
 import "../Resizeable/index.9a9c79a4.js";
 import "@m4l/graphics";
-import "../modal/index.a0978193.js";
+import "../modal/index.00efea85.js";
 import "../Image/index.c18ebf5a.js";
-import "../mui_extended/IconButton/index.fc5b7c2d.js";
-import "../mui_extended/Accordion/index.12b1339a.js";
+import "../mui_extended/IconButton/index.12f1a3c3.js";
+import "../mui_extended/Accordion/index.9877f7bf.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "../mui_extended/Badge/index.8c2b8b66.js";
 import "@mui/lab";
+import "../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/MenuActions/index.f5b1c022.js";
-import "../mui_extended/Pager/index.435af0df.js";
-import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Pager/index.2f6d6d7d.js";
+import "../mui_extended/Tab/index.7c82e43d.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.c8147e8e.js";
-import "../areas/components/AreasAdmin/index.cc4cbf56.js";
+import "../areas/contexts/AreasContext/index.02c4e7be.js";
+import "../areas/components/AreasAdmin/index.43ecd998.js";
 import "zustand/shallow";
 import "../ScrollBar/index.bbe48f4d.js";
-import "../areas/components/AreasViewer/index.9c2aaaeb.js";
+import "../areas/components/AreasViewer/index.14e62059.js";
 import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";

package/components/PropertyValue/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const COMPONENT_PREFIX = "m4l-property-value";
+export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
+export declare const TEST_PROPS_DATA: string;

package/components/PropertyValue/{index.8a1adf3e.js → index.45c73161.js}

@@ -1,6 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { g as getNameDataTestId } from "../../vendor.e353394b.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useModuleSkeleton } from "@m4l/core";
@@ -83,18 +84,17 @@ const SKTWrapperProperty = styled("div")(() => ({
   display: "flex",
   justifyContent: "flex-end"
 }));
-const ICON_PREFIX = "M4LPropertyValue";
-const getNamePropertyValueDataTestId = (KEY) => {
-  return `${ICON_PREFIX}-${KEY}`;
-};
+const COMPONENT_PREFIX = "m4l-property-value";
+const TEST_PROPS_DATA = `${COMPONENT_PREFIX}-data`;
 function SKTProperty(props) {
   const {
-    className
+    className,
+    dataTestId = ""
   } = props;
   return /* @__PURE__ */ jsx(SKTWrapperProperty, {
     className,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNamePropertyValueDataTestId("skeletonProperty")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "skeletonProperty", dataTestId)
     } : {},
     children: /* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
@@ -134,7 +134,8 @@ function PropertyValue(props) {
     valueWidth = "100",
     valueWidthMobile,
     isForm,
-    className
+    className,
+    dataTestId = ""
   } = props;
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
@@ -169,24 +170,29 @@ function PropertyValue(props) {
     isForm,
     propertyWidth,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNamePropertyValueDataTestId("root")
+      [TEST_PROPS_DATA]: JSON.stringify([{
+        property: property ? true : false,
+        value: value ? true : false
+      }]),
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
     } : {},
     children: [/* @__PURE__ */ jsx(Property, {
       className: classes.property,
       isForm,
       propertyWidth,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNamePropertyValueDataTestId("property")
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "property", dataTestId)
       } : {},
       children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {
-        className: classes.skeletonProperty
+        className: classes.skeletonProperty,
+        dataTestId
       }) : property
     }), /* @__PURE__ */ jsx(Value, {
       className: classes.value,
       valueWidth: getValueW(),
       valueHeight,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNamePropertyValueDataTestId("value")
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "value", dataTestId)
       } : {},
       children: value
     })]

package/components/PropertyValue/types.d.ts

@@ -12,10 +12,11 @@ export interface PropertyValueProps extends PropertyProps, ValueProps {
     value: number | string | ReactNode;
     isForm?: boolean;
     className?: string;
+    dataTestId?: string;
 }
 export declare type WrapperProps = PropertyProps & Pick<PropertyValueProps, 'isForm'>;
 export declare type WrapperPropertyProps = WrapperProps;
 export declare type WrapperValueProps = Omit<ValueProps, 'valueWidthMobile'>;
-export interface SKTPropertyProps {
+export interface SKTPropertyProps extends Pick<PropertyValueProps, 'dataTestId'> {
     className: string;
 }

package/components/SideBar/{index.c5ce0bad.js → index.2f497e6c.js}

@@ -3,10 +3,10 @@ import { useEnvironment } from "@m4l/core";
 import { createContext, useContext, useState } 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.fc5b7c2d.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.12f1a3c3.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.ecb63e65.js";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.9fcd1476.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import clsx from "clsx";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";

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" | "areaContainerChips" | "areaEditPopover" | "areaChipMobileRoot" | "areaChipMobileIconContainer" | "areaChipTitle" | "areaContainerChipEditButton" | "areaChipDeleteButton" | "areaChipEditButton" | "areasAddButton" | "areasPopoverMobileOptions" | "areasPopoverListWindows", string>;
+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 type AdminClasses = ReturnType<typeof useAreasAdminUtilityClasses>;

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

@@ -3,10 +3,13 @@ export interface AreasAdmninClasses {
     areaChipRoot: string;
     areaChipTitle: string;
     areaContainerChips: string;
+    areaContainerContentChips: string;
+    areaContainerChipsIcon: string;
     areaChipMobileRoot: string;
     areaEditPopover: string;
     areaChipMobileIconContainer: string;
     areaIconLayer: string;
+    areaIconLayerContent: string;
     areaContainerChipEditButton: string;
     areaChipDeleteButton: string;
     areaChipEditButton: string;

package/components/areas/components/AreasAdmin/{index.cc4cbf56.js → index.43ecd998.js}

@@ -1,11 +1,11 @@
-import { I as IconButton } from "../../../mui_extended/IconButton/index.fc5b7c2d.js";
-import { u as useAreasStore } from "../../hooks/useAreas/index.3406a6cb.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.12f1a3c3.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.85e4b2e2.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.12b1339a.js";
-import { I as Icon } from "../../../Icon/index.ecb63e65.js";
+import "../../../mui_extended/Accordion/index.9877f7bf.js";
+import { I as Icon } from "../../../Icon/index.9fcd1476.js";
 import clsx from "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
@@ -16,48 +16,48 @@ import { B as Button } from "../../../mui_extended/Button/index.4288f9fc.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.43a2e1ae.js";
 import { P as Popover } from "../../../mui_extended/Popover/index.9f35d0eb.js";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.f5b1c022.js";
-import "../../../mui_extended/Pager/index.435af0df.js";
-import "../../../mui_extended/Tab/index.9e2f6e34.js";
+import "../../../mui_extended/Pager/index.2f6d6d7d.js";
+import "../../../mui_extended/Tab/index.7c82e43d.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.dee85a61.js";
+import "../../../../contexts/ModalContext/index.e9a7ba4a.js";
 import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.fe175bab.js";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.ac2b1fae.js";
-import "../../../HelperText/index.ef31df1f.js";
+import "../../../hook-form/RHFAutocomplete/index.6aa51705.js";
+import "../../../HelperText/index.a019742c.js";
 import "lodash/debounce";
-import "../../../hook-form/RHFAutocompleteAsync/index.8b4ccc8d.js";
-import "../../../hook-form/RHFCheckbox/index.acef119c.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.1a3dfe5f.js";
+import "../../../hook-form/RHFCheckbox/index.a08a65b3.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.5b080342.js";
+import "../../../hook-form/RHFDateTime/index.4d671108.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.e751dca7.js";
-import "../../../hook-form/RHFPeriod/index.5304e3bd.js";
-import "../../../Period/index.711db043.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.3eba9d91.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.b748a38e.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.a7d92e66.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.9004e898.js";
+import "../../../hook-form/RHFPeriod/index.39b4be49.js";
+import "../../../Period/index.7b94c418.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.52125041.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.d536ccfa.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.aa1648eb.js";
 import "../../../../react-draggable.7abb5d0a.js";
 import "../../../Resizeable/index.9a9c79a4.js";
-import "../../../modal/index.a0978193.js";
+import "../../../modal/index.00efea85.js";
 import { shallow } from "zustand/shallow";
 import { styled } from "@mui/material/styles";
 import { S as ScrollBar } from "../../../ScrollBar/index.bbe48f4d.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
-import "../AreasViewer/index.9c2aaaeb.js";
+import "../AreasViewer/index.14e62059.js";
 import "../../../LinearProgressIndeterminate/index.60dabc06.js";
-import "../../contexts/AreasContext/index.c8147e8e.js";
+import "../../contexts/AreasContext/index.02c4e7be.js";
 import "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "zustand";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.25db0511.js";
+import "../../../hook-form/RHFUpload/index.bed8573e.js";
 const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "root",
   "areaChipRoot",
@@ -66,10 +66,13 @@ const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "areasAddButton",
   "areaContainerChipEditButton",
   "areaContainerChips",
+  "areaContainerContentChips",
+  "areaContainerChipsIcon",
   "areaEditPopover",
   "areaChipMobileRoot",
   "areaChipMobileIconContainer",
   "areaIconLayer",
+  "areaIconLayerContent",
   "areaChipEditButton",
   "areasPopoverMobileOptions",
   "areasPopoverListWindows",
@@ -82,7 +85,9 @@ const useAreasAdminUtilityClasses = (ownerState) => {
     root: ["root", ownerState.status, ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton"],
     areaChipRoot: ["areaChipRoot"],
     areaIconLayer: ["areaIconLayer"],
+    areaContainerChipsIcon: ["areaContainerChipsIcon"],
     areaContainerChips: ["areaContainerChips"],
+    areaContainerContentChips: ["areaContainerContentChips"],
     areaEditPopover: ["areaEditPopover"],
     areaChipMobileRoot: ["areaChipMobileRoot"],
     areaChipMobileIconContainer: ["areaChipMobileIconContainer"],
@@ -192,7 +197,6 @@ const AreaChip = (props) => {
     deleteArea(areaId);
   };
   const onSubmit = (data) => {
-    console.log("data areachip", data);
     editArea(areaId, data.inputEditArea);
     setOpen(false);
   };
@@ -304,7 +308,7 @@ const PanelWindowPopUp = (props) => {
     host_static_assets,
     environment_assets
   } = useEnvironment();
-  const windowsLayouts = useAreasStore((state) => state.hashAreas[currentAreaId].hashLayoutItems.filter((li) => state.hashWindows[li].emergeType === "layout").map((lim) => {
+  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,
@@ -372,50 +376,51 @@ const AreaChipMobile = () => {
       label: area.name
     };
   }), [areas, currentAreaId]);
-  console.log("currentAreaId", currentArea);
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: areasAdminClasses.areaChipMobileRoot,
-    children: [currentArea ? /* @__PURE__ */ jsx(AreaChip, {
-      areaId: currentArea.id,
-      selected: true,
-      disabled: true
-    }, currentArea.id) : null, menuActions.length > 0 ? /* @__PURE__ */ jsxs("div", {
-      className: areasAdminClasses.areaChipMobileIconContainer,
-      children: [currentArea ? /* @__PURE__ */ jsx(PanelWindowPopUp, {
-        currentAreaId: currentArea.id
-      }) : null, /* @__PURE__ */ jsx(MenuActions, {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CHEVRON_DOWN}`,
-        arrowType: "no-arrow",
-        marginTop: "12px!important",
-        marginLeft: "14px!important",
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "right"
-        },
-        menuActions,
-        className: areasAdminClasses.areasPopoverMobileOptions,
-        menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides,
-        endListElement: /* @__PURE__ */ jsx(Button, {
-          onClick: addArea,
-          variant: "outlined",
-          startIcon: /* @__PURE__ */ jsx(Icon, {
-            src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`
-          }),
-          children: getLabel(getAreasDictionary(DICCTIONARY.area_add_new))
-        })
-      })]
-    }) : null]
+    children: /* @__PURE__ */ jsxs("div", {
+      className: areasAdminClasses.areaContainerContentChips,
+      children: [currentArea ? /* @__PURE__ */ jsx(AreaChip, {
+        areaId: currentArea.id,
+        selected: true,
+        disabled: true
+      }, currentArea.id) : null, menuActions.length > 0 ? /* @__PURE__ */ jsxs("div", {
+        className: areasAdminClasses.areaChipMobileIconContainer,
+        children: [currentArea ? /* @__PURE__ */ jsx(PanelWindowPopUp, {
+          currentAreaId: currentArea.id
+        }) : null, /* @__PURE__ */ jsx(MenuActions, {
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CHEVRON_DOWN}`,
+          arrowType: "no-arrow",
+          marginTop: "12px!important",
+          marginLeft: "14px!important",
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "right"
+          },
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "right"
+          },
+          menuActions,
+          className: areasAdminClasses.areasPopoverMobileOptions,
+          menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides,
+          endListElement: /* @__PURE__ */ jsx(Button, {
+            onClick: addArea,
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ jsx(Icon, {
+              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`
+            }),
+            children: getLabel(getAreasDictionary(DICCTIONARY.area_add_new))
+          })
+        })]
+      }) : null]
+    })
   });
 };
 function AreasAdmin() {
   const areas = useAreasStore((state) => state.areas, shallow);
   const currentArea = useAreasStore((state) => state.currentAreaId, shallow);
   const status = useAreasStore((state) => state.ownerState.status);
-  const testStore = useAreasStore((state) => state);
   const classesRoot = useAreasStore((state) => state.adminClasses.root);
   const areasLength = useAreasStore((state) => state.areas.length);
   const isDesktop = useResponsiveDesktop();
@@ -426,29 +431,36 @@ function AreasAdmin() {
     host_static_assets,
     environment_assets
   } = useEnvironment();
-  console.log("test areas estore bruce", testStore);
-  console.log("Render AreasAdmin", areas);
   if (status !== "loaded") {
     return null;
   }
   return /* @__PURE__ */ jsxs(AreasAdminRoot, {
     className: classesRoot,
-    children: [/* @__PURE__ */ jsx("div", {
-      className: areasAdminClasses.areaIconLayer,
-      children: /* @__PURE__ */ jsx(Icon, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`
-      })
-    }), /* @__PURE__ */ jsx("div", {
-      className: areasAdminClasses.areaContainerChips,
-      children: isDesktop ? /* @__PURE__ */ jsx(ScrollBar, {
-        children: /* @__PURE__ */ jsx(Fragment, {
-          children: areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
-            areaId: area,
-            selected: area === currentArea,
-            disabled: areasLength === 1
-          }, area))
+    children: [/* @__PURE__ */ jsxs("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}`
+          })
         })
-      }) : /* @__PURE__ */ jsx(AreaChipMobile, {})
+      }) : null, /* @__PURE__ */ jsx("div", {
+        className: areasAdminClasses.areaContainerChips,
+        children: /* @__PURE__ */ jsx("div", {
+          className: areasAdminClasses.areaContainerContentChips,
+          children: isDesktop ? /* @__PURE__ */ jsx(ScrollBar, {
+            children: /* @__PURE__ */ jsx(Fragment, {
+              children: areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
+                areaId: area,
+                selected: area === currentArea,
+                disabled: areasLength === 1
+              }, area))
+            })
+          }) : /* @__PURE__ */ jsx(AreaChipMobile, {})
+        })
+      })]
     }), isDesktop ? /* @__PURE__ */ jsx(IconButton, {
       className: areasAdminClasses.areasAddButton,
       src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,

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" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowContent" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "windowToastyContainer", string>;
+export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "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

@@ -18,6 +18,7 @@ export interface AreasViewerClasses {
     windowHeaderContent: string;
     windowHeaderTitle: string;
     windowHeaderMainActions: string;
+    windowHeaderCancelHandle: string;
     windowContent: string;
     windowRootContainer: string;
     windowLinearProgressRoot: string;