@m4l/components 9.3.21-JAEBeta.0 → 9.3.21-JAEBeta.2

package/components/AccountPopover/AccountPopover.js

@@ -1,11 +1,10 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useNetwork } from "@m4l/core";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { M as MenuPopover } from "./subcomponents/MenuPopover/MenuPopover.js";
 import { A as ACCOUNT_KEY_POPOVER } from "./constants.js";
 import { I as IconButtonRootStyled, A as AvatarStyled } from "./slots/AccountPopoverSlots.js";
 import { M as MyAvatar } from "./subcomponents/MyAvatar/MyAvatar.js";
-import { u as useStateRef } from "../../hooks/useStateRef/index.js";
 import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
 import { A as AccountPopoverSlots } from "./slots/AccountPopoverEnum.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
@@ -20,7 +19,7 @@ const AccountPopover = (props) => {
   } = props;
   const { avatarUrl, firstName = "firstname", lastName = "lastname" } = userData || {};
   const [asyncState, setAsyncState] = useState("unLoad");
-  const [open, setOpen] = useStateRef(null);
+  const [anchorEl, setAnchorEl] = useState(null);
   const [menuData, setMenuData] = useState([]);
   const { networkOperation } = useNetwork();
   const { currentSize } = useComponentSize(size);
@@ -50,13 +49,13 @@ const AccountPopover = (props) => {
     return function cleanUp() {
       mounted = false;
     };
-  }, [open]);
-  const handleClose = () => {
-    setOpen(null);
-  };
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
+  }, [anchorEl]);
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, [setAnchorEl]);
+  const handleOpen = useCallback((event) => {
+    setAnchorEl(event.currentTarget);
+  }, [setAnchorEl]);
   const classes = getComponentClasses(ACCOUNT_KEY_POPOVER, AccountPopoverSlots);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -66,11 +65,11 @@ const AccountPopover = (props) => {
         icon: /* @__PURE__ */ jsx(MyAvatar, { size: currentSize, avatarUrl, firstName, lastName, slotAvatar: AvatarStyled }),
         src: "",
         onClick: handleOpen,
-        selected: open ? true : false,
+        selected: anchorEl ? true : false,
         className: classes.iconButtonRoot
       }
     ),
-    /* @__PURE__ */ jsx(
+    !!anchorEl && /* @__PURE__ */ jsx(
       MenuPopover,
       {
         size: currentSize,
@@ -81,7 +80,7 @@ const AccountPopover = (props) => {
         handleLogOut,
         userData,
         settingsHandleOpen,
-        open,
+        anchorEl,
         handleClose
       }
     )

package/components/AccountPopover/subcomponents/MenuPopover/MenuPopover.d.ts

@@ -4,4 +4,4 @@ import { MenuPopoverProps } from './types';
  * Se debe refactorizar el componente PopOver para recibir la propr de size.
  * @param props
  */
-export declare const MenuPopover: (props: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuPopover: (props: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/AccountPopover/subcomponents/MenuPopover/MenuPopover.js

@@ -10,7 +10,7 @@ const MenuPopover = (props) => {
   const {
     version,
     handleClose,
-    open,
+    anchorEl,
     userData,
     settingsHandleOpen,
     handleLogOut,
@@ -29,19 +29,22 @@ const MenuPopover = (props) => {
     handleClose();
   };
   const handleClickSetting = () => {
-    settingsHandleOpen();
     handleClose();
+    settingsHandleOpen();
   };
   const handleLogout = () => {
     handleLogOut();
     handleClose();
   };
+  if (!anchorEl) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     PopoverStyled,
     {
       size,
-      open: Boolean(open),
-      anchorEl: open,
+      open: Boolean(anchorEl),
+      anchorEl,
       onClose: handleClose,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },

package/components/AccountPopover/subcomponents/MenuPopover/types.d.ts

@@ -5,6 +5,6 @@ import { AccountPopoverProps, AsyncTypes, RightMenuData } from '../../types';
 export interface MenuPopoverProps extends AccountPopoverProps {
     data: Array<RightMenuData> | [];
     asyncState: AsyncTypes;
-    open: HTMLElement | null;
+    anchorEl: HTMLElement | null;
     handleClose: () => void;
 }

package/components/MFLoader/MFLoader.js

@@ -30,7 +30,7 @@ function getDivScritId(prefix, moduleId) {
   };
 }
 function MFLoader(props) {
-  const { prefix, moduleId, cache = true, debugPort, dynamicMFStore, windowTools, emergeType } = props;
+  const { prefix, moduleId, cache = true, debugPort, dynamicMFStore, windowTools, emergeType, loggedUser } = props;
   const { hostThemeOptions, fnComponentsOverrides } = useHostTheme();
   const { networkOperation } = useNetwork();
   const environment = useEnvironment();
@@ -64,6 +64,10 @@ function MFLoader(props) {
   }
   const renderMicroFrontend = useCallback(
     (newDScript) => {
+      const options = {
+        loggedUser,
+        emergeType
+      };
       try {
         window[`render_${prefix}_${newDScript.moduleId}`](
           newDScript.divContainerId,
@@ -75,13 +79,13 @@ function MFLoader(props) {
           formatter,
           dynamicMFStore,
           windowTools,
-          emergeType
+          options
         );
       } catch (_e) {
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hostThemeOptions, currentLocale, formatter]
+    [hostThemeOptions, currentLocale, formatter, loggedUser]
   );
   const debouncedSetDivScript = useCallback(
     debounce(

package/components/MFLoader/styles.js

@@ -2,10 +2,10 @@ import { styled } from "@mui/material";
 const MFLoaderRoot = styled("div")(() => ({
   width: "100%",
   height: "100%",
+  position: "relative",
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
-  overflow: "auto",
   "& .M4LMFLoader-containerLinearProgress": {
     width: "100%",
     height: "100%",

package/components/MFLoader/types.d.ts

@@ -1,6 +1,7 @@
 import { DynamicMFStore } from '../WindowBase/contexts/DynamicMFParmsContext/store';
 import { WindowToolsMF } from '../WindowBase/contexts';
 import { EmergeType } from '../areas/types';
+import { AuthUserType } from '@m4l/core';
 /**
  * Propiedades base de un microfrontend.
  */
@@ -38,4 +39,8 @@ export interface MFLoaderProps extends MFBaseProps {
      * Tipo de lanzamiento de la ventana, popup, layout, modal
      */
     emergeType?: EmergeType;
+    /**
+     * loggedUser: usuario logueado, para los microfrontends que necesitan el usuario logueado
+     */
+    loggedUser?: AuthUserType;
 }

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

@@ -1,3 +1,4 @@
+import { AuthUserType } from '@m4l/core';
 import { EmergeType } from '../../../areas/types';
 import { MFBaseProps } from '../../../MFLoader/types';
 import { WindowToolsMF } from '../../contexts';
@@ -7,4 +8,5 @@ export interface MicroFrontendProps extends MFBaseProps {
     windowTools: WindowToolsMF;
     dynamicMFStore: DynamicMFStore;
     emergeType: EmergeType;
+    loggedUser: AuthUserType;
 }

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

@@ -33,7 +33,7 @@ const areasViewerStyles = {
     flexDirection: "row",
     inset: 0,
     overflow: "hidden",
-    justifyContent: "top",
+    justifyContent: "flex-start",
     alignItems: "flex-start",
     visibility: "hidden",
     ...ownerState?.selected && {

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js

@@ -30,7 +30,8 @@ const Window = (props) => {
     dynamicMFStore,
     windowTools,
     onTouch,
-    memoizedActions
+    memoizedActions,
+    loggedUser
   } = useWindow(windowId, areaId);
   const maximizedId = useAreasStore(
     (state) => areaId ? state.hashAreas[areaId]?.maximizedId : void 0,
@@ -83,6 +84,7 @@ const Window = (props) => {
           moduleId,
           dynamicMFStore,
           windowTools,
+          loggedUser,
           ...mfProps
         }
       ) : /* @__PURE__ */ jsx(

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useWindow.d.ts

@@ -31,4 +31,5 @@ export declare const useWindow: (windowId: string, areaId?: string) => {
     windowTools: WindowToolsMF;
     onTouch: () => void;
     memoizedActions: import('../../../../../../../../WindowBase/types').WindowBaseAction[];
+    loggedUser: import('@m4l/core').Maybe<import('@m4l/core').UserAuth>;
 };

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useWindow.js

@@ -3,6 +3,7 @@ import { shallow } from "zustand/shallow";
 import { u as useAreasStore } from "../../../../../../../hooks/useAreas/index.js";
 import { u as useHeaderActions } from "./useHeaderActions.js";
 import { u as usePopupsStore } from "../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore.js";
+import { useAuth } from "@m4l/core";
 import { c as createToaster } from "../../../../../../../../ToastContainer/helpers/toaster.js";
 const useWindow = (windowId, areaId) => {
   const [
@@ -41,6 +42,7 @@ const useWindow = (windowId, areaId) => {
     ];
   }, shallow);
   const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
+  const { user: loggedUser } = useAuth();
   const component = useAreasStore(
     (state) => state.hashWindows[windowId]?.component,
     shallow
@@ -115,7 +117,8 @@ const useWindow = (windowId, areaId) => {
     dynamicMFStore,
     windowTools,
     onTouch,
-    memoizedActions
+    memoizedActions,
+    loggedUser
   };
 };
 export {

package/components/popups/components/PopupsViewer/PopupsViewer.js

@@ -7,7 +7,7 @@ import { u as useSizeContainer } from "../../../../hooks/useSizeContainer/index.
 import { R as RootStyled } from "./slots/popupsViewerSlots.js";
 import { useRef, createRef, useEffect, memo } from "react";
 const PopupsViewer = (props) => {
-  const { groupId = "global", onResizeStart, onResizeStop, onDragStart, onDragStop, containerElement, className } = props;
+  const { groupId = "global", onResizeStart, onResizeStop, onDragStart, onDragStop, containerElement, className, loggedUser } = props;
   const popupsIds = usePopupsStore(
     (state) => state.popupsIds.filter((pId) => groupId === state.hashPopups[pId].groupId && state.hashPopups[pId].status !== "closing"),
     shallow
@@ -57,7 +57,8 @@ const PopupsViewer = (props) => {
             "data-testid": "popup",
             popupId: id,
             containerElement,
-            containerSize
+            containerSize,
+            loggedUser
           },
           id
         )

package/components/popups/components/PopupsViewer/subcomponents/Popup/Popup.js

@@ -11,7 +11,7 @@ import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../WindowBase
 import { W as WindowBaseComponent } from "../../../../../WindowBase/subcomponents/Component/index.js";
 import { W as WindowBase } from "../../../../../WindowBase/WindowBase.js";
 const Popup = forwardRef((props, ref) => {
-  const { popupId, containerElement, containerSize, style, onResizeStart, onResizeStop, onDragStart, onDragStop } = props;
+  const { popupId, containerElement, containerSize, style, onResizeStart, onResizeStop, onDragStart, onDragStop, loggedUser } = props;
   const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
   const { bringPopupOnFront } = usePopupsStore((state) => state.popupsActions, shallow);
   const { close } = usePopupsStore((state) => state.popupActions, shallow);
@@ -133,6 +133,7 @@ const Popup = forwardRef((props, ref) => {
               moduleId,
               dynamicMFStore,
               windowTools,
+              loggedUser,
               ...mfProps ?? { debugPort: 0, prefix: "" }
             }
           ) : /* @__PURE__ */ jsx(

package/components/popups/components/PopupsViewer/subcomponents/Popup/types.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties } from 'react';
 import { ContainerSize } from '../../../../../../utils/types';
+import { AuthUserType } from '@m4l/core';
 export type ResizeReason = 'start' | 'resize' | 'stop';
 export interface PopupProps {
     /**
@@ -34,4 +35,8 @@ export interface PopupProps {
      * "onDragStop" Función que se ejecuta cuando se termina de arrastrar el popup
      */
     onDragStop?: () => void;
+    /**
+     * "loggedUser" Usuario logueado
+     */
+    loggedUser?: AuthUserType;
 }

package/components/popups/components/PopupsViewer/types.d.ts

@@ -3,6 +3,7 @@ import { PopupViewerSlots } from './slots/slots';
 import { POPUPS_VIEWER_KEY_COMPONENT } from './constants';
 import { PopupStoreProps, PopupsProviderStoreState } from '../PopupsProvider/contexts/PopupsContext/types';
 import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
+import { AuthUserType } from '@m4l/core';
 export type PopupViewerSlotsType = keyof typeof PopupViewerSlots;
 export type PopupsViewerProps = {
     className?: string;
@@ -12,6 +13,7 @@ export type PopupsViewerProps = {
     onResizeStop?: () => void;
     onDragStart?: () => void;
     onDragStop?: () => void;
+    loggedUser?: AuthUserType;
 };
 export type PopupStatus = 'init' | 'closing' | 'hidden';
 export interface PopupOwnerState extends Pick<PopupStoreProps, 'status' | 'subTitle' | 'editionInfo' | 'zIndex' | 'variant'> {

package/hooks/useStateRef/index.d.ts

@@ -5,4 +5,4 @@
  * @param initialValue
  * @returns
  */
-export declare function useStateRef<T>(initialValue: T | null): [T | null, (node: T | null) => void];
+export declare function useStateRef<T extends HTMLElement | null>(initialValue: T | null): [T | null, (node: T | null) => void];

package/hooks/useStateRef/index.js

@@ -2,10 +2,10 @@ import { useState, useRef, useCallback } from "react";
 function useStateRef(initialValue) {
   const [refState, setRefState] = useState(initialValue);
   const nodeRef = useRef(null);
-  const ref = useCallback((nodeElement) => {
-    if (nodeElement && nodeRef.current !== nodeElement) {
-      nodeRef.current = nodeElement;
-      setRefState(nodeElement);
+  const ref = useCallback((current) => {
+    if (current && nodeRef.current !== current) {
+      nodeRef.current = current;
+      setRefState(current);
     }
   }, []);
   return [refState, ref];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.21-JAEBeta.0",
+  "version": "9.3.21-JAEBeta.2",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -43,7 +43,6 @@
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.33.1",
     "react-intersection-observer": "^9.4.0",
-    "react-leaflet": "^4.2.1",
     "react-resizable": "^3.0.4",
     "react-resizable-panels": "^2.1.8",
     "react-rnd": "^10.5.2",