@m4l/components 9.2.0 → 9.2.2

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.js

@@ -1,12 +1,12 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
 import { useState, useEffect, useMemo } from "react";
 import { I as ICONS } from "../../icons.js";
-import { d as dragResizeWindowClasses } from "../../../DragResizeWindow/classes/index.js";
+import { d as dragResizeWindowRNDClasses } from "../../../DragResizeWindowRND/classes/index.js";
 import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 import { deepEqual } from "fast-equals";
 import { M as MemoizedIconButton } from "../MemoizedIconButton/MemoizedIconButton.js";
-import { H as HeaderWindowComponentStyled, b as HeaderContentStyled, I as IconWindowStyled, T as TitleWindowStyled, S as SubtitleContainerStyled, P as PointStyled, c as PointIconStyled, d as SubtitleWindowStyled, e as IconsWrapperStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
+import { H as HeaderWindowComponentStyled, c as HeaderContentStyled, I as IconWindowStyled, T as TitleWindowStyled, S as SubtitleContainerStyled, P as PointStyled, d as PointIconStyled, e as SubtitleWindowStyled, f as IconsWrapperStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
 const HeaderWindowBase = (props) => {
   const {
     title,
@@ -14,14 +14,15 @@ const HeaderWindowBase = (props) => {
     onClose,
     iconUrl,
     size,
-    color,
     selected,
     version,
     variant,
     actions = []
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const [localActions, setLocalActions] = useState({ left: [], right: [], inside: [] });
+  const [leftActions, setLeftActions] = useState(() => actions.filter((action) => action.place === "left"));
+  const [rightActions, setRightActions] = useState(() => actions.filter((action) => action.place === "right"));
+  const [insideActions, setInsideActions] = useState(() => actions.filter((action) => action.place === "inside"));
   useEffect(() => {
     const groupedActions = actions.reduce(
       (acc, action) => {
@@ -30,16 +31,28 @@ const HeaderWindowBase = (props) => {
       },
       { left: [], right: [], inside: [] }
     );
-    setLocalActions((prev) => {
-      if (!deepEqual(prev, groupedActions)) {
-        return groupedActions;
+    setLeftActions((prev) => {
+      if (!deepEqual(prev, groupedActions.left)) {
+        return groupedActions.left;
+      }
+      return prev;
+    });
+    setRightActions((prev) => {
+      if (!deepEqual(prev, groupedActions.right)) {
+        return groupedActions.right;
+      }
+      return prev;
+    });
+    setInsideActions((prev) => {
+      if (!deepEqual(prev, groupedActions.inside)) {
+        return groupedActions.inside;
       }
       return prev;
     });
   }, [actions]);
   const menuActions = useMemo(() => {
     const memoizedActions = [
-      ...localActions.inside.map((action) => ({
+      ...insideActions.map((action) => ({
         type: "menuItem",
         startIcon: action.iconUrl,
         label: action.label,
@@ -58,14 +71,13 @@ const HeaderWindowBase = (props) => {
       });
     }
     return memoizedActions;
-  }, [localActions.inside, version, host_static_assets, environment_assets]);
+  }, [insideActions, version, host_static_assets, environment_assets]);
   const ownerState = {
-    windowBaseColor: color,
-    windowBaseSelected: selected,
-    windowBaseVariant: variant,
-    windowBaseSize: size
+    selected,
+    variant,
+    size
   };
-  const ActionButtonGroup = ({ actionList }) => /* @__PURE__ */ jsx(Fragment, { children: actionList.map((action) => /* @__PURE__ */ jsx(
+  const IconButtonLeftActions = useMemo(() => /* @__PURE__ */ jsx(Fragment, { children: leftActions.map((action) => /* @__PURE__ */ jsx(
     MemoizedIconButton,
     {
       iconUrl: action.iconUrl,
@@ -75,8 +87,24 @@ const HeaderWindowBase = (props) => {
       })
     },
     action.key
-  )) });
-  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: dragResizeWindowClasses.draggableHandle, ownerState, children: [
+  )) }), [leftActions]);
+  const IconButtonRightActions = useMemo(() => {
+    if (rightActions.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: rightActions.map((action) => /* @__PURE__ */ jsx(
+      MemoizedIconButton,
+      {
+        iconUrl: action.iconUrl,
+        label: action.label,
+        disabled: action.disabled,
+        onClick: action.onClick || (() => {
+        })
+      },
+      action.key
+    )) });
+  }, [rightActions]);
+  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: dragResizeWindowRNDClasses.draggableHandle, ownerState, children: [
     /* @__PURE__ */ jsxs(HeaderContentStyled, { ownerState, children: [
       iconUrl && /* @__PURE__ */ jsx(IconWindowStyled, { size, ownerState, src: iconUrl, "aria-label": "main icon" }),
       /* @__PURE__ */ jsx(TitleWindowStyled, { size, ownerState, children: title }),
@@ -95,28 +123,28 @@ const HeaderWindowBase = (props) => {
     /* @__PURE__ */ jsxs(
       IconsWrapperStyled,
       {
-        className: dragResizeWindowClasses.draggableCancel,
+        className: dragResizeWindowRNDClasses.draggableCancel,
         ownerState,
         children: [
-          /* @__PURE__ */ jsx(ActionButtonGroup, { actionList: localActions.left }),
-          menuActions.length > 1 && /* @__PURE__ */ jsx(
+          IconButtonLeftActions,
+          menuActions.length > 0 && /* @__PURE__ */ jsx(
             MenuActionsWindowsStyled,
             {
               type: "menuItem",
               ownerState,
-              urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/window_base/assets/icons/${ICONS.MORE_VERTICAL}`,
+              icon: `${host_static_assets}/${environment_assets}/frontend/components/window_base/assets/icons/${ICONS.MORE_VERTICAL}`,
               arrowType: "no-arrow",
-              marginTop: "12px",
               anchorOrigin: { vertical: "bottom", horizontal: "right" },
               transformOrigin: { vertical: "top", horizontal: "right" },
+              paperProps: { style: { marginTop: "12px" } },
               menuActions
             }
           ),
-          /* @__PURE__ */ jsx(ActionButtonGroup, { actionList: localActions.right }),
+          IconButtonRightActions,
           onClose && /* @__PURE__ */ jsx(
             IconButton,
             {
-              src: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/${ICONS.CLOSE}`,
+              icon: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/${ICONS.CLOSE}`,
               onClick: onClose,
               "aria-label": "close"
             }

package/components/WindowBase/subcomponents/Header/types.d.ts

@@ -1,5 +1,4 @@
 import { WindowBaseAction, WindowBaseProps } from '../../types';
-import { MenuItemAction } from '../../../MenuActions/types';
 /**
  * Properties used by the `Header` component.
  *
@@ -33,22 +32,15 @@ import { MenuItemAction } from '../../../MenuActions/types';
  * - `selected` modifies the visual appearance to indicate the selected state.
  * @see WindowBaseProps - General properties for the window base.
  */
-export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'color' | 'version' | 'selected' | 'variant'> & {
+export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant'> & {
     actions?: WindowBaseAction[];
 };
 /**
  * Defines the visibility types for window actions.
  */
-export type WindowActionType = 'main' | 'allways' | 'normal';
 /**
  * Define una acción de ventana basada en `MenuAction`, pero restringida solo a `menuItem`.
  */
-export interface WindowAction extends MenuItemAction {
-    visibility: WindowActionType;
-    key: string;
-    tag?: any;
-    className?: string;
-}
 /**
  * Defines the structure of a window action, extending the `MenuAction` type.
  * This includes additional properties for visibility, a unique key, an optional tag, and a custom class name.
@@ -70,32 +62,3 @@ export interface WindowAction extends MenuItemAction {
  * };
  * ```
  */
-export interface windowWindowAction {
-    /**
-     * Defines the visibility type of the window action.
-     * This determines when and how the action is displayed, based on its visibility setting.
-     *
-     * Possible values:
-     * - `'main'`: The action is displayed as a main action.
-     * - `'allways'`: The action is always visible.
-     * - `'normal'`: The action is visible under normal circumstances.
-     */
-    visibility: WindowActionType;
-    /**
-     * A unique key for identifying the window action.
-     * This key is used to distinguish this action from others and may be referenced programmatically.
-     */
-    key: string;
-    /**
-     * An optional tag or label for the window action.
-     * This can be used to store additional metadata or a label associated with the action.
-     * The tag is not required for the action to function but can be useful for descriptive purposes.
-     */
-    tag?: any;
-    /**
-     * An optional custom CSS class for the window action.
-     * This can be used to apply custom styles to the action element.
-     * If not provided, the action will use the default styling.
-     */
-    className?: string;
-}

package/components/WindowBase/subcomponents/MicroFrontend/MicroFrontend.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { MicroFrontendProps } from './types';
+/**
+ * Componente encargado de renderizar un microfrontend.
+ * @param props MicroFrontendProps
+ */
+export declare const WindowBaseMicroFrontend: (props: MicroFrontendProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MemonizedWindowBaseMicroFrontend: React.MemoExoticComponent<(props: MicroFrontendProps) => import("react/jsx-runtime").JSX.Element>;

package/components/WindowBase/subcomponents/MicroFrontend/MicroFrontend.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { M as MFLoader } from "../../../MFLoader/MFLoader.js";
+const WindowBaseMicroFrontend = (props) => {
+  return /* @__PURE__ */ jsx(MFLoader, { ...props });
+};
+const MemonizedWindowBaseMicroFrontend = React.memo(WindowBaseMicroFrontend);
+export {
+  MemonizedWindowBaseMicroFrontend as M
+};

package/components/WindowBase/subcomponents/MicroFrontend/types.d.ts

@@ -0,0 +1,8 @@
+import { MFBaseProps } from '../../../MFLoader/types';
+import { WindowToolsMF } from '../../contexts';
+import { DynamicMFStore } from '../../contexts/DynamicMFParmsContext/store';
+export interface MicroFrontendProps extends MFBaseProps {
+    moduleId: string;
+    windowTools: WindowToolsMF;
+    dynamicMFStore: DynamicMFStore;
+}

package/components/WindowBase/types.d.ts

@@ -1,19 +1,59 @@
 import { ReactNode } from 'react';
 import { WindowBaseSlots } from './slots/WindowBaseEnum';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { WINDOW_BASE_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material/styles';
-import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { Sizes } from '@m4l/styles';
+import { MenuItemAction } from '../MenuActions/types';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+/**
+ * Opciones para la ventana.
+ */
+export type WindowOptions = {
+    /**
+     * Indica si se permitirá persistir las cookies.
+     */
+    allowPersistCookies: boolean;
+};
+export type JSX_REACT_NODE = ((props?: any) => JSX.Element) | ReactNode;
+/**
+ * Tipo que representa el tipo de ventana: microfrontend o componente.
+ */
+export type WinType = 'microfrontend' | 'component';
+/**
+ * Tipo que representa el tipo de visibilidad de la acción de ventana.
+ * main: Se muestra en el header de la ventana pero si está en mobile se muestra en el menú inside.
+ * allways: Se muestra en el header de la ventana así esté en mobile.
+ * normal: Se muestra inside del menu.
+ */
+export type WindowActionType = 'main' | 'allways' | 'normal';
+export interface ModuleAction extends Pick<MenuItemAction, 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked' | 'onClick'> {
+    /**
+     * Tipo de visibilidad de la acción de ventana.
+     *
+     */
+    visibility: WindowActionType;
+    /**
+     * Clave única de la acción de ventana.
+     */
+    key: string;
+    /**
+     * Etiqueta opcional para la acción de ventana.
+     */
+    tag?: any;
+    /**
+     * Clase CSS opcional para la acción de ventana.
+     */
+    className?: string;
+    /**
+     * Icono opcional para la acción de ventana.
+     */
+    iconUrl: string;
+}
 /**
  * Type representing a single action in the `WindowBase` component.
  */
-export interface WindowBaseAction {
+export interface WindowBaseAction extends Pick<ModuleAction, 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked' | 'onClick' | 'key' | 'iconUrl'> {
     place: 'left' | 'right' | 'inside';
-    iconUrl: string;
-    label: string;
-    key: string;
-    disabled?: boolean;
-    onClick?: () => void;
 }
 /**
  * Interface representing the main properties of the `WindowBase` component.
@@ -85,11 +125,6 @@ export interface WindowBaseProps {
      * Default is `'medium'` if not specified.
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
-    /**
-     * The color theme of the window.
-     * Restricted to `'default'`, which applies the default theme color.
-     */
-    color?: Extract<ComponentPalletColor, 'default'>;
     /**
      * Indicates if the window is currently selected.
      * When `true`, the window may display a visual indicator to denote selection.
@@ -153,10 +188,9 @@ export type WindowBaseType = keyof typeof WindowBaseSlots;
  * windowBaseSize (optional) - Size of the component (`'small'` or `'medium'`).
  */
 export type WindowBaseOwnerState = Pick<WindowBaseProps, 'size'> & {
-    windowBaseColor?: WindowBaseProps['color'];
-    windowBaseSelected?: WindowBaseProps['selected'];
-    windowBaseVariant?: WindowBaseProps['variant'];
-    windowBaseSize?: WindowBaseProps['size'];
+    selected?: WindowBaseProps['selected'];
+    variant?: WindowBaseProps['variant'];
+    size?: WindowBaseProps['size'];
 };
 /**
  * Type for defining custom styles for the `WindowBase` component.
@@ -166,4 +200,4 @@ export type WindowBaseOwnerState = Pick<WindowBaseProps, 'size'> & {
  * WINDOW_BASE_KEY_COMPONENT - Key used to register the `WindowBase` component with the theme.
  * Theme - The theme object containing styling information.
  */
-export type WindowBaseStyles = OverridesStyleRules<WindowBaseType, typeof WINDOW_BASE_KEY_COMPONENT, Theme>;
+export type WindowBaseStyles = M4LOverridesStyleRules<WindowBaseType, typeof WINDOW_BASE_KEY_COMPONENT, Theme>;

package/components/WindowConfirm/WindowConfirm.js

@@ -7,9 +7,9 @@ import { W as WINDOW_CONFIRM_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import clsx from "clsx";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
-import { W as WindowBase } from "../WindowBase/WindowBase.js";
 import { W as WindowConfirmRootStyled, a as WindowConfirmContentStyled, M as MessageIllustrationStyled, A as ActionsContainerStyled, b as ActionCancelStyled, c as ActionIntroStyled } from "./slots/WindowConfirmSlots.js";
 import { W as WindowConfirmSlots } from "./slots/WindowConfirmEnum.js";
+import { W as WindowBase } from "../WindowBase/WindowBase.js";
 const WindowConfirm = (props) => {
   const {
     variant = "warning",

package/components/areas/components/AreasAdmin/slots/AreasAdminSlots.d.ts

@@ -22,7 +22,7 @@ export declare const AreasAdminContentStyled: import('@emotion/styled').StyledCo
 export declare const ChipAreasStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../Chip').ChipProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../../../Chip').ChipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').AreasAdminOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const IconButtonAddAreaStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "rotationAngle" | "placement" | "tooltipContent" | "componentPaletteColor" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const IconButtonAddAreaStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "rotationAngle" | "placement" | "tooltipContent" | "componentPaletteColor" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').AreasAdminOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 export declare const MenuActionsChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../MenuActions/types').MenuActionsProps, keyof import('../../../../MenuActions/types').MenuActionsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
@@ -46,7 +46,7 @@ export declare const AddAreasMobileContainerStyled: import('@emotion/styled').St
 export declare const MenuActionsAreaChipMobileStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../MenuActions/types').MenuActionsProps, keyof import('../../../../MenuActions/types').MenuActionsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').AreasAdminOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const ButtonAddAreaStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../mui_extended/Button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "variant" | "translate" | "className" | "classes" | "sx" | "form" | "label" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "skeletonWidth" | "startIcon" | "endIcon" | keyof import('react').RefAttributes<HTMLButtonElement> | "disableElevation" | "fullWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ButtonAddAreaStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../mui_extended/Button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "variant" | "translate" | "className" | "classes" | "sx" | "form" | "label" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "skeletonWidth" | "startIcon" | "endIcon" | keyof import('react').RefAttributes<HTMLButtonElement> | "disableElevation" | "fullWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').AreasAdminOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 export declare const EditAreaChipContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {

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

@@ -5,4 +5,4 @@ import { AreasViewerProps } from './types';
  * las ventanas que al cambiar entre áreas
  * @returns JSX Areas
  */
-export declare const AreasViewer: (props: AreasViewerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AreasViewer: import('react').ForwardRefExoticComponent<Omit<AreasViewerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/components/areas/components/AreasViewer/AreasViewer.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { A as Area } from "./subcomponents/Area/Area.js";
 import { u as useAreasStore } from "../../hooks/useAreas/index.js";
-import { M as MemonizedWindowModal } from "./subcomponents/Area/subcomponents/WindowModal/WindowModal.js";
+import { A as AreaMemonizedWindowModal } from "./subcomponents/Area/subcomponents/WindowModal/WindowModal.js";
 import { shallow } from "zustand/shallow";
 import { L as LoadingError } from "../../../LoadingError/LoadingError.js";
 import { g as getPropDataTestId, a as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
@@ -12,14 +12,14 @@ import { A as AREAS_VIEWER_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { A as AreasViewerSlots } from "./slots/AreasViewerEnum.js";
 import clsx from "clsx";
-const AreasViewer = (props) => {
+import { forwardRef } from "react";
+const AreasViewer = forwardRef((props, ref) => {
   const {
     dataTestId,
     className
   } = props;
   const areas = useAreasStore((state) => state.areasIds, shallow);
-  const windowsModals = useAreasStore((state) => state.windowsModals);
-  const hashWindowsModals = useAreasStore((state) => state.hashWindowsModals);
+  const windowsModals = useAreasStore((state) => state.windowsModalsIds);
   const currentArea = useAreasStore((state) => state.currentAreaId);
   const status = useAreasStore((state) => state.ownerState.status);
   const { init } = useAreasStore((state) => state.areasActions);
@@ -30,6 +30,7 @@ const AreasViewer = (props) => {
     /* @__PURE__ */ jsx(
       AreasViewerRootStyled,
       {
+        ref,
         className: clsx(getComponentSlotRoot(AREAS_VIEWER_KEY_COMPONENT), className),
         ...getPropDataTestId(AREAS_VIEWER_KEY_COMPONENT, AreasViewerSlots.root, dataTestId),
         ownerState,
@@ -46,13 +47,10 @@ const AreasViewer = (props) => {
       }
     ),
     windowsModals.map((wm) => {
-      if (hashWindowsModals[wm]) {
-        return /* @__PURE__ */ jsx(MemonizedWindowModal, { ...hashWindowsModals[wm] }, wm);
-      }
-      return null;
+      return /* @__PURE__ */ jsx(AreaMemonizedWindowModal, { windowId: wm }, wm);
     })
   ] });
-};
+});
 export {
   AreasViewer as A
 };

package/components/areas/components/AreasViewer/AreasViewer.styles.js

@@ -1,3 +1,4 @@
+import { d as dragResizeWindowRNDClasses } from "../../../DragResizeWindowRND/classes/index.js";
 const areasViewerStyles = {
   /**
    * Root areas viewer Styles
@@ -12,7 +13,12 @@ const areasViewerStyles = {
     "& .M4LAreasViewer-areaGridLayout": {
       height: "100% !important",
       overflow: "auto",
-      flexGrow: 1
+      flexGrow: 1,
+      [`&.${dragResizeWindowRNDClasses.dragging}, &.${dragResizeWindowRNDClasses.resizing}`]: {
+        pointerEvents: "none",
+        userSelect: "none",
+        touchAction: "none"
+      }
     }
   }),
   /**
@@ -42,15 +48,6 @@ const areasViewerStyles = {
     width: "100%",
     overflow: "hidden"
   }),
-  /**
-   * Window component content Styles
-   */
-  windowContainerComponent: () => ({
-    display: "flex",
-    width: "100%",
-    height: "100%",
-    overflow: "auto"
-  }),
   /**
    * Wrapper window modal Styles
    */
@@ -58,7 +55,11 @@ const areasViewerStyles = {
     width: "100%",
     height: "100%",
     position: "relative"
-  })
+  }),
+  /**
+   * Window base Styles
+   */
+  windowBase: () => ({})
 };
 export {
   areasViewerStyles as a

package/components/areas/components/AreasViewer/slots/AreasViewerEnum.d.ts

@@ -2,6 +2,6 @@ export declare enum AreasViewerSlots {
     root = "root",
     areaRoot = "areaRoot",
     baseArea = "baseArea",
-    windowContainerComponent = "windowContainerComponent",
-    wrapperWindowModal = "wrapperWindowModal"
+    wrapperWindowModal = "wrapperWindowModal",
+    windowBase = "windowBase"
 }

package/components/areas/components/AreasViewer/slots/AreasViewerEnum.js

@@ -2,8 +2,8 @@ var AreasViewerSlots = /* @__PURE__ */ ((AreasViewerSlots2) => {
   AreasViewerSlots2["root"] = "root";
   AreasViewerSlots2["areaRoot"] = "areaRoot";
   AreasViewerSlots2["baseArea"] = "baseArea";
-  AreasViewerSlots2["windowContainerComponent"] = "windowContainerComponent";
   AreasViewerSlots2["wrapperWindowModal"] = "wrapperWindowModal";
+  AreasViewerSlots2["windowBase"] = "windowBase";
   return AreasViewerSlots2;
 })(AreasViewerSlots || {});
 export {

package/components/areas/components/AreasViewer/slots/AreasViewerSlots.d.ts

@@ -7,9 +7,9 @@ export declare const AreaRootStyled: import('@emotion/styled').StyledComponent<i
 export declare const BaseAreaStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const WindowContainerComponentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const WrapperWindowModalStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const WindowBaseStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../WindowBase/types').WindowBaseProps, keyof import('../../../../WindowBase/types').WindowBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/areas/components/AreasViewer/slots/AreasViewerSlots.js

@@ -2,6 +2,7 @@ import { styled } from "@mui/material/styles";
 import { A as AREAS_VIEWER_KEY_COMPONENT } from "../constants.js";
 import { A as AreasViewerSlots } from "./AreasViewerEnum.js";
 import { a as areasViewerStyles } from "../AreasViewer.styles.js";
+import { W as WindowBase } from "../../../../WindowBase/WindowBase.js";
 const AreasViewerRootStyled = styled("div", {
   name: AREAS_VIEWER_KEY_COMPONENT,
   slot: AreasViewerSlots.root
@@ -14,18 +15,18 @@ const BaseAreaStyled = styled("div", {
   name: AREAS_VIEWER_KEY_COMPONENT,
   slot: AreasViewerSlots.baseArea
 })(areasViewerStyles?.baseArea);
-const WindowContainerComponentStyled = styled("div", {
-  name: AREAS_VIEWER_KEY_COMPONENT,
-  slot: AreasViewerSlots.windowContainerComponent
-})(areasViewerStyles?.windowContainerComponent);
 const WrapperWindowModalStyled = styled("div", {
   name: AREAS_VIEWER_KEY_COMPONENT,
   slot: AreasViewerSlots.wrapperWindowModal
 })(areasViewerStyles?.wrapperWindowModal);
+const WindowBaseStyled = styled(WindowBase, {
+  name: AREAS_VIEWER_KEY_COMPONENT,
+  slot: AreasViewerSlots.windowBase
+})(areasViewerStyles?.windowBase);
 export {
   AreasViewerRootStyled as A,
   BaseAreaStyled as B,
-  WindowContainerComponentStyled as W,
+  WindowBaseStyled as W,
   AreaRootStyled as a,
   WrapperWindowModalStyled as b
 };