@m4l/components 9.3.21-JAEBeta.1 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.21-JAEBeta.1",
+  "version": "9.3.21-JAEBeta.2",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {