@m4l/components 0.1.92 → 0.1.93

package/components/areas/components/AreasViewer/{index.62abf0bb.js → index.625bf23b.js}

@@ -1,109 +1,39 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 import { styled } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../../../react-resizable.ba08699a.js";
-import { generateUtilityClasses, Skeleton, useTheme, Dialog } from "@mui/material";
+import { r as react_resizable_css } from "../../../../react-resizable.c07d63fb.js";
+import { generateUtilityClasses, Skeleton, Dialog } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.c43a95f4.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index.6469f148.js";
 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 React__default, { useMemo, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.d417e4b2.js";
-import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.76624519.js";
-import "../../../mui_extended/Accordion/index.cdedddba.js";
-import { I as Icon } from "../../../Icon/index.a70c4729.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.ee66240b.js";
+import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.dd9f65a2.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
 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.f79eb74e.js";
-import "../../../mui_extended/CheckBox.38abccd8.js";
-import "../../../mui_extended/Badge/index.b09524fe.js";
-import "../../../Image/index.c18ebf5a.js";
-import "@mui/lab";
-import { M as MenuActions, a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.7669b8af.js";
-import "../../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../../mui_extended/Stack/index.0e53197c.js";
-import "../../../mui_extended/Tab/index.5f09e16a.js";
-import "../../../mui_extended/Pager/index.ac2a21f0.js";
-import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
-import "../../../mui_extended/Tooltip/index.5a795dcd.js";
 import { I as ICONS } from "../../icons.8266ccc8.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.60dabc06.js";
-import debounce from "lodash/debounce";
-import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.53cd6388.js";
+import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.c46da124.js";
+import { I as Icon } from "../../../Icon/index.3211023d.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.379dd374.js";
+import { M as MFLoader } from "../../../MFLoader/index.caee87dd.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.347f6738.js";
-import "../../../../contexts/RHFormContext/index.1755b324.js";
-import "../../../GridLayout/subcomponents/Griditem/index.d6f326d2.js";
-import { S as SizeProvider } from "../../../GridLayout/index.5e43414d.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.d41e31ca.js";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.d528f6e7.js";
-import "../../../animate/index.4e9774a6.js";
-import "framer-motion";
-import "../../../animate/LoadingScreen/index.1d0c4307.js";
-import "../../../animate/PropagateLoader/index.7fab43c8.js";
-import "../AreasAdmin/index.cd054608.js";
-import "../../../ScrollBar/index.65bb2930.js";
-import "zustand";
-import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.29a4c62c.js";
-import "../../../HelperText/index.191348cc.js";
-import "../../../hook-form/RHFAutocompleteAsync/index.647c3f9c.js";
-import "../../../hook-form/RHFCheckbox/index.0b89ea5c.js";
-import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.1adc88ad.js";
-import "../../../hook-form/RHFTextField/index.a1a240b1.js";
-import "../../../hook-form/RHFPeriod/index.a4476d23.js";
-import "../../../Period/index.ebd5e3b7.js";
-import "../../../CommonActions/components/Actions/index.7a196c44.js";
-import { c as cjs } from "../../../../react-draggable.7abb5d0a.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.676c96fe.js";
-import "../../../modal/index.b434146b.js";
-import "lodash/isString";
-import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.a4582341.js";
-import "../../../DataGrid/index.95cea2ca.js";
-import "react-dnd";
-import "react-dnd-html5-backend";
-import "../../../DataGrid/subcomponents/Actions/index.5b0b1fbf.js";
-import "../../../DataGrid/subcomponents/editors/TextEditor/index.91380a55.js";
-import "../../../DynamicFilter/index.e9192ebd.js";
-import "yup";
-import "lodash";
-import "../../../LanguagePopover/index.a74f2065.js";
-import "../../../NavLink/index.f12bba32.js";
-import "../../../NoItemSelected/index.1eaf72d8.js";
-import "../../../ObjectLogs/index.9bbac2a0.js";
-import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.e02c772c.js";
-import "../../../Page/index.4237c241.js";
-import "../../../PropertyValue/index.76fa6a12.js";
-import "../../../SplitLayout/index.9ef430f6.js";
-import "../../../../react-splitter-layout.8b1655c8.js";
-import "../../../SideBar/index.2dfc5445.js";
-import "../../../AppBar/index.90cceb7d.js";
-import "../../../AccountPopover/index.eebea1c5.js";
+import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
+import { g as getNameDataTestId } from "../../../../vendor.71883626.js";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.646f3c8f.js";
+import { S as SizeProvider } from "../../../GridLayout/index.1421f0d4.js";
+import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.f459804c.js";
+import { useLocation } from "react-router-dom";
+import { L as LoadingError } from "../../../LoadingError/index.96bdc803.js";
+import { c as cjs } from "../../../../react-draggable.e4725f3a.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.8c53c1fa.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
-  "areasLoadingErrorRoot",
-  "areasLoadingErrorLoading",
-  "areasLoadingError",
-  "areasLoadingErrorIcon",
-  "areasLoadingErrorTitle",
-  "areasLoadingErrorDescription",
-  "areasLoadingErrorDivider",
-  "areasLoadingErrorTextAction",
   "areaGridLayoutPanelContainer",
   "areaGridLayout",
   "areaGridLayoutPopupsContainer",
@@ -132,6 +62,8 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "panelWindowsButtonContainer",
   "containerLinearProgress",
   "resizeHandle",
+  "loaderContainer",
+  "containerComponent",
   "selected",
   "colapsed",
   "selectedWindow",
@@ -180,7 +112,9 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     windowToastyClose: ["windowToastyClose"],
     panelWindowsRoot: ["panelWindowsRoot"],
     panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
-    resizeHandle: ["resizeHandle"]
+    resizeHandle: ["resizeHandle"],
+    loaderContainer: ["loaderContainer"],
+    containerComponent: ["containerComponent"]
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
 };
@@ -518,8 +452,8 @@ function MainActions(props) {
     windowId
   } = props;
   const moduleActions = useAreasStore((state) => {
-    const window2 = state.hashWindows[windowId];
-    return window2?.moduleActions || [];
+    const window = state.hashWindows[windowId];
+    return window?.moduleActions || [];
   }, shallow);
   const {
     getLabel
@@ -552,10 +486,6 @@ const WindowPopUpsList = (props) => {
     areaId,
     windowId
   } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
   const windowsPopUps = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds.filter((li) => state.hashWindows[li].parentLayoutId === windowId && state.hashWindows[li].emergeType === "popup").map((lim) => {
     const w = state.hashWindows[lim];
     return {
@@ -564,7 +494,6 @@ const WindowPopUpsList = (props) => {
       title: w.title
     };
   }), shallow);
-  const theme = useTheme();
   const {
     maximizeLayout
   } = useAreasStore((state) => state.areaActions);
@@ -579,25 +508,7 @@ const WindowPopUpsList = (props) => {
     };
   }) : null;
   if (menuActions && menuActions.length > 0) {
-    return /* @__PURE__ */ jsx(MenuActions, {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.POPUP}`,
-      arrowType: "no-arrow",
-      marginTop: "12px!important",
-      marginLeft: "14px!important",
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      menuActions,
-      className: areasViewerClasses.areasWindowPopUpList,
-      menuActionSx: theme.components?.M4LAreasViewerWindowPopUpList?.styleOverrides,
-      withBadge: true,
-      badgeContent: menuActions.length.toString()
-    });
+    return /* @__PURE__ */ jsx(Fragment, {});
   } else {
     return null;
   }
@@ -609,15 +520,15 @@ function Header(props) {
     emergeType
   } = props;
   const [url_icon, title, moduleActions, onClose, version, windowOptions, fnQueryClose] = useAreasStore((state) => {
-    const window2 = state.hashWindows[windowId];
+    const window = state.hashWindows[windowId];
     return [
-      window2.url_icon,
-      window2.title,
-      window2.moduleActions,
-      window2.onClose,
-      window2.version,
-      window2.windowOptions,
-      window2.fnQueryClose
+      window.url_icon,
+      window.title,
+      window.moduleActions,
+      window.onClose,
+      window.version,
+      window.windowOptions,
+      window.fnQueryClose
     ];
   }, shallow);
   const {
@@ -699,7 +610,7 @@ function Header(props) {
         className: areasViewerClasses.windowHeaderCancelHandle,
         children: [!colapsed && /* @__PURE__ */ jsx(MainActions, {
           windowId
-        }), !colapsed && emergeType === "layout" ? /* @__PURE__ */ jsx(WindowPopUpsList, {
+        }), !colapsed ? /* @__PURE__ */ jsx(WindowPopUpsList, {
           areaId,
           windowId
         }) : null, !colapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(MemonizedMenuActions, {
@@ -739,305 +650,6 @@ function Header(props) {
     })]
   });
 }
-const ProggessLoadingMF = (props) => {
-  try {
-    const {
-      loadingProgress
-    } = props;
-    if (loadingProgress >= 0 && loadingProgress <= 100) {
-      return /* @__PURE__ */ jsx("div", {
-        className: areasViewerClasses.containerLinearProgress,
-        children: /* @__PURE__ */ jsx(LinearProgress, {
-          variant: "determinate",
-          value: loadingProgress
-        })
-      });
-    }
-  } catch (error) {
-  }
-  return null;
-};
-class ObservableLoaderMF {
-  constructor(host, scriptId, networkOperation, isRemote) {
-    __publicField(this, "host");
-    __publicField(this, "isRemote");
-    __publicField(this, "eventStatus");
-    __publicField(this, "scriptId");
-    __publicField(this, "networkOperation");
-    __publicField(this, "subscribers");
-    this.host = host;
-    this.subscribers = [];
-    this.scriptId = scriptId;
-    this.networkOperation = networkOperation;
-    this.isRemote = isRemote;
-    this.eventStatus = "progress";
-    this.start = this.start.bind(this);
-    this.subscribe = this.subscribe.bind(this);
-    this.unsubscribe = this.unsubscribe.bind(this);
-    this.notify = this.notify.bind(this);
-    this.tryAgain = this.tryAgain.bind(this);
-    setTimeout(this.start, 100);
-  }
-  tryAgain() {
-    if (this.eventStatus === "error") {
-      setTimeout(this.start, 100);
-      new Promise((resolve) => {
-        resolve("ok");
-      }).then(() => {
-        this.start();
-      });
-    }
-  }
-  async start() {
-    let percentCompleted = 0;
-    this.notify("progress", percentCompleted);
-    const manifest = await fetch(`${this.host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
-      setTimeout(() => this.notify("error", 0), 300);
-      return void 0;
-    });
-    if (!manifest) {
-      return;
-    }
-    percentCompleted = 10;
-    this.notify("progress", percentCompleted);
-    const urlFile = `${this.host}/${manifest["src/index.tsx"]["file"]}?rnd=${Math.random()}`;
-    const controller = new AbortController();
-    const ret = await this.networkOperation({
-      method: "GET",
-      endPoint: urlFile,
-      isRemote: this.isRemote,
-      headers: { "Content-Type": "application/json" },
-      onDownloadProgress: (progressEvent) => {
-        try {
-          if (progressEvent.lengthComputable) {
-            percentCompleted = 10 + Math.round(progressEvent.loaded * 90 / progressEvent.total);
-          } else {
-            percentCompleted = 10 + progressEvent.loaded / 15e5 * 90;
-            if (percentCompleted > 95)
-              percentCompleted = 95;
-          }
-        } catch (error) {
-        }
-        this.notify("progress", percentCompleted);
-      },
-      isExternalUrl: true,
-      responseType: "text",
-      signal: controller.signal
-    }).then(() => {
-      return "ok";
-    }).catch(() => {
-      this.notify("error", 0);
-      return "error";
-    });
-    if (ret == "ok") {
-      const script = document.createElement("script");
-      const startTime = new Date().getTime();
-      script.id = this.scriptId;
-      script.crossOrigin = "";
-      script.type = "module";
-      script.src = urlFile || "";
-      script.onload = () => {
-        this.notify("complete", 100);
-      };
-      document.head.appendChild(script);
-      console.debug("Script appened", startTime);
-    }
-  }
-  subscribe(subscriber) {
-    this.subscribers.push(subscriber);
-    this.tryAgain();
-  }
-  unsubscribe(subscriber) {
-    console.log("unsubscribe", subscriber);
-    const index = this.subscribers.indexOf(subscriber);
-    if (index !== -1) {
-      this.subscribers.splice(index, 1);
-    }
-  }
-  notify(newEvent, progress) {
-    this.eventStatus = newEvent;
-    this.subscribers.forEach((subscriber) => {
-      setTimeout(() => subscriber(newEvent, progress), 1);
-    });
-  }
-}
-const AreasLoadingError = (props) => {
-  const {
-    status,
-    action
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  return /* @__PURE__ */ jsx("div", {
-    className: areasViewerClasses.areasLoadingErrorRoot,
-    children: status !== "error" ? /* @__PURE__ */ jsx("div", {
-      className: areasViewerClasses.areasLoadingErrorLoading,
-      children: /* @__PURE__ */ jsx(LinearProgressIndeterminate, {})
-    }) : /* @__PURE__ */ jsxs("div", {
-      className: areasViewerClasses.areasLoadingError,
-      children: [/* @__PURE__ */ jsx(Icon, {
-        className: areasViewerClasses.areasLoadingErrorIcon,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NAVIGATE_ERROR}`
-      }), /* @__PURE__ */ jsx(Typography, {
-        variant: "h3",
-        skeletonWidth: "100px",
-        className: areasViewerClasses.areasLoadingErrorTitle,
-        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_title))
-      }), /* @__PURE__ */ jsx(Typography, {
-        variant: "subtitle",
-        skeletonWidth: "100px",
-        className: areasViewerClasses.areasLoadingErrorDescription,
-        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_description))
-      }), /* @__PURE__ */ jsx("div", {
-        className: areasViewerClasses.areasLoadingErrorDivider
-      }), /* @__PURE__ */ jsx(Typography, {
-        variant: "paragraph",
-        skeletonWidth: "100px",
-        className: areasViewerClasses.areasLoadingErrorTextAction,
-        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_recommendation))
-      }), /* @__PURE__ */ jsx(Button, {
-        onClick: action,
-        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_intro))
-      })]
-    })
-  });
-};
-function getDivScritId(prefix, moduleId) {
-  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(Math.random() * 1e3)}`;
-  return {
-    divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
-    scriptId: `script_${moduleId}_${rotational_id}`,
-    moduleId
-  };
-}
-function MFLoader(props) {
-  const {
-    prefix,
-    moduleId,
-    cache = true,
-    debug_port,
-    dynamicMFStore,
-    windowTools
-  } = props;
-  const {
-    hostThemeOptions,
-    fnComponentsOverrides
-  } = useHostTheme();
-  const {
-    networkOperation
-  } = useNetwork();
-  const environment = useEnvironment();
-  const hostTools = useHostTools();
-  const formatter = useFormatter();
-  const [statusLoader, setStatusLoader] = useState("progress");
-  const [loadingProgress, setLoadingProgress] = useState(-1);
-  const {
-    currentLocale
-  } = useLocales();
-  const [divScript, setDivScript] = useState(getDivScritId(prefix, moduleId));
-  const isFirstRender = useFirstRender([moduleId]);
-  const final_host = environment.isLocalhost ? `https://localhost:${debug_port}` : `https://${window.location.host}/mf/${moduleId}`;
-  function cleanUp(dScript) {
-    try {
-      if (window[`unmount_${prefix}_${dScript.moduleId}`]) {
-        window[`unmount_${prefix}_${dScript.moduleId}`](dScript.divContainerId);
-      }
-    } catch (error) {
-    }
-    if (!cache) {
-      const script = document.getElementById(dScript.scriptId);
-      if (script) {
-        try {
-          document.head.removeChild(script);
-          delete window[`render_${prefix}_${dScript.moduleId}`];
-          delete window[`unmount_${prefix}_${dScript.moduleId}`];
-        } catch (error) {
-        }
-      }
-    }
-  }
-  const renderMicroFrontend = useCallback((newDScript) => {
-    try {
-      window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, environment, hostTools, currentLocale, {
-        hostThemeOptions,
-        fnComponentsOverrides
-      }, axiosOperation, formatter, dynamicMFStore, windowTools);
-    } catch (error) {
-    }
-  }, [hostThemeOptions, currentLocale, formatter]);
-  const debouncedSetDivScript = useCallback(debounce((newName) => {
-    const newDivScript = getDivScritId(prefix, newName);
-    if (newName !== divScript.moduleId) {
-      setDivScript({
-        ...newDivScript
-      });
-    }
-  }, 200), [divScript]);
-  useEffect(() => {
-    if (!isFirstRender) {
-      debouncedSetDivScript(moduleId + "");
-      if (moduleId !== divScript.moduleId)
-        ;
-    }
-    return () => {
-    };
-  }, [moduleId]);
-  const tryAgainOnError = useCallback(() => {
-    window[`observable_${prefix}_${moduleId}`]?.tryAgain();
-  }, []);
-  useEffect(() => {
-    const dsNowScript = {
-      ...divScript
-    };
-    const observableDownload = (event, progress) => {
-      setLoadingProgress(progress);
-      setStatusLoader(event);
-    };
-    if (!window[`render_${prefix}_${moduleId}`]) {
-      let observableLoaderMF;
-      if (!window[`observable_${prefix}_${moduleId}`]) {
-        observableLoaderMF = new ObservableLoaderMF(final_host, dsNowScript.scriptId, networkOperation, !environment.isLocalhost);
-        window[`observable_${prefix}_${moduleId}`] = observableLoaderMF;
-      } else {
-        observableLoaderMF = window[`observable_${prefix}_${moduleId}`];
-      }
-      observableLoaderMF.subscribe(observableDownload);
-    } else {
-      setStatusLoader("complete");
-    }
-    return () => {
-      window[`observable_${prefix}_${moduleId}`].unsubscribe(observableDownload);
-      cleanUp(dsNowScript);
-    };
-  }, [divScript]);
-  useEffect(() => {
-    if (statusLoader === "complete") {
-      renderMicroFrontend(divScript);
-    }
-  }, [statusLoader]);
-  return /* @__PURE__ */ jsxs("div", {
-    id: divScript.divContainerId,
-    style: {
-      width: "100%",
-      height: "100%"
-    },
-    children: [statusLoader === "progress" ? /* @__PURE__ */ jsx(ProggessLoadingMF, {
-      loadingProgress
-    }) : null, statusLoader === "error" ? /* @__PURE__ */ jsx(AreasLoadingError, {
-      status: statusLoader,
-      action: tryAgainOnError
-    }) : null]
-  });
-}
-MFLoader.defaultProps = {
-  document,
-  window
-};
 const MicroFrontend = (props) => {
   return /* @__PURE__ */ jsx(MFLoader, {
     ...props
@@ -1054,10 +666,13 @@ const Component = (props) => {
     ...windowTools,
     children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
       store: dynamicMFStore,
-      children: typeof component === "function" ? component({
-        windowTools,
-        dynamicMFStore
-      }) : component
+      children: /* @__PURE__ */ jsx("div", {
+        className: areasViewerClasses.containerComponent,
+        children: typeof component === "function" ? component({
+          windowTools,
+          dynamicMFStore
+        }) : component
+      })
     })
   });
 };
@@ -1231,6 +846,8 @@ const Window = (props) => {
     return emergeType === "layout" ? state.hashAreas[areaId]?.currentLayoutId : state.hashAreas[areaId]?.currentPopUpId;
   }) === windowId;
   const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
+  const areaStore = useAreasStore((state) => state, shallow);
+  console.log("areaStore", areaStore);
   const component = useAreasStore((state) => state.hashWindows[windowId]?.component, shallow);
   const loading = useAreasStore((state) => state.hashWindows[windowId]?.loading, shallow);
   const status = useAreasStore((state) => state.hashWindows[windowId]?.status, shallow);
@@ -1289,6 +906,9 @@ const Window = (props) => {
     role: "presentation",
     className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selectedWindow : null, loading ? areasViewerClasses.loading : null, emergeType === "popup" ? areasViewerClasses.windowPopupRoot : null, emergeType === "modal" ? areasViewerClasses.windowModalRoot : null),
     onMouseDown: onTouch,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId(AREAS_VIEWER_CLASS_NAME, "windowRoot", `${emergeType}`)
+    } : {},
     children: /* @__PURE__ */ jsxs("div", {
       className: areasViewerClasses.windowRootContainer,
       children: [/* @__PURE__ */ jsx(Header, {
@@ -1364,7 +984,8 @@ const AreaGridLayout = (props) => {
         if (p.type === "placeholder") {
           return /* @__PURE__ */ jsx("div", {});
         }
-        console.debug("layoutItemRender window", hashLayoutItems, p.i, p.type);
+        console.log("layoutItemRender window", hashLayoutItems, p.i, p.type);
+        console.log("layoutItemRender window value p argument", p);
         return /* @__PURE__ */ jsx(Window, {
           windowId: p.i,
           areaId
@@ -1391,10 +1012,14 @@ const PanelWindows = (props) => {
   } = props;
   const status = useAreasStore((state) => state.hashAreas[areaId].status);
   const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId);
+  const maximizedIdParent = useAreasStore((state) => state.hashWindows[maximizedId || ""]?.parentLayoutId || void 0);
   const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds.filter((itemId) => state.hashWindows[itemId].emergeType === "layout").map((key) => ({
     i: key,
     url_icon: state.hashWindows[key].url_icon,
-    title: state.hashWindows[key].title
+    title: state.hashWindows[key].title,
+    moduleId: state.hashWindows[key].moduleId,
+    emergeType: state.hashWindows[key].emergeType,
+    windowId: state.hashWindows[key].windowId
   })), shallow);
   const {
     maximizeLayout
@@ -1402,6 +1027,9 @@ const PanelWindows = (props) => {
   const onTouched = (layoutId) => {
     maximizeLayout(areaId, layoutId);
   };
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const currentParam = searchParams.get("module");
   if (status === "loaded") {
     if (!maximizedId || hashLayoutItems.length < 2) {
       return null;
@@ -1410,7 +1038,7 @@ const PanelWindows = (props) => {
       className: areasViewerClasses.panelWindowsRoot,
       children: hashLayoutItems.map((kl) => {
         return /* @__PURE__ */ jsx("div", {
-          className: clsx(areasViewerClasses.panelWindowsButtonContainer, maximizedId === kl.i ? areasViewerClasses.selected : null),
+          className: clsx(areasViewerClasses.panelWindowsButtonContainer, maximizedId === kl.i && kl.emergeType !== "popup" || maximizedIdParent === kl.windowId && kl.moduleId === currentParam ? areasViewerClasses.selected : null),
           children: /* @__PURE__ */ jsx(IconButton, {
             src: kl.url_icon,
             size: "small",
@@ -1435,7 +1063,7 @@ const InnerForHooks = (props) => {
     children: [
       status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, {
         areaId
-      }) : /* @__PURE__ */ jsx(AreasLoadingError, {
+      }) : /* @__PURE__ */ jsx(LoadingError, {
         status,
         action: () => {
         }
@@ -1549,12 +1177,15 @@ function AreasViewer() {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(AreasViewerRoot, {
       className: classesRoot,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId(AREAS_VIEWER_CLASS_NAME, "root", "")
+      } : {},
       children: status === "loaded" ? areas.map((area) => {
         return /* @__PURE__ */ jsx(Area, {
           areaId: area,
           selected: currentArea === area
         }, area);
-      }) : /* @__PURE__ */ jsx(AreasLoadingError, {
+      }) : /* @__PURE__ */ jsx(LoadingError, {
         status,
         action: () => init()
       })

package/components/areas/components/index.558684b3.js

@@ -0,0 +1 @@
+

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

@@ -1,4 +1,3 @@
 export * from './AreasAdmin';
 export * from './AreasViewer';
 export type { NewWindowProps as NewWindow } from '../types';
-export type { MFLoaderProps as MicroFrontendProps } from './AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/types';