@m4l/components 9.1.29 → 9.1.30

package/components/AccountPopover/AccountPopover.d.ts

@@ -18,8 +18,9 @@ import { AccountPopoverProps } from './types';
  *   userData={userData}
  *   className="mi-clase-css"
  * />
- */
-/**
- * TODO: Documentar
+ * @author Andrés Quintero - automatic
+ * @createdAt 2024-12-06 17:26:21 - automatic
+ * @updatedAt 2024-12-11 15:39:20 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare const AccountPopover: (props: AccountPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/components/AccountPopover/AccountPopover.js

@@ -1,21 +1,26 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useNetwork } from "@m4l/core";
 import { useState, useEffect } from "react";
-import { u as useAccountPopoverUtilityClasses, g as getAccountPopoverClassesUtilityClass } from "./classes/index.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { A as AcountPopOverRoot } from "./style.js";
-import { M as MenuPopOver } from "./subcomponents/PopOver/index.js";
-import clsx from "clsx";
+import { M as MenuPopover } from "./subcomponents/MenuPopover/MenuPopover.js";
+import { A as ACCOUNT_KEY_POPOVER } from "./constants.js";
+import { g as getNameDataTestId } from "./tests/utils.js";
+import { A as AccountPopoverRootStyled, I as IconButtonStyled } 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 getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 const AccountPopover = (props) => {
   const {
     itemHandleClick,
     version,
     handleLogOut,
     userData,
-    className,
-    settingsHandleOpen: settingHandleOpen
+    settingsHandleOpen,
+    size
   } = props;
+  const { avatarUrl, firstName = "firstname", lastName = "lastname" } = userData || {};
   const [asyncState, setAsyncState] = useState("unLoad");
+  const [open, setOpen] = useStateRef(null);
   const [menuData, setMenuData] = useState([]);
   const { networkOperation } = useNetwork();
   useEffect(() => {
@@ -34,7 +39,7 @@ const AccountPopover = (props) => {
           setMenuData(response.data);
         }
       }).catch((_error) => {
-        console.error("AccountData network request error - get menus", _error);
+        setAsyncState("unLoad");
         setMenuData([]);
       });
     }
@@ -42,25 +47,43 @@ const AccountPopover = (props) => {
       mounted = false;
     };
   }, [open]);
-  const accountPopoverClasses = useAccountPopoverUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    AcountPopOverRoot,
+  const handleClose = () => {
+    setOpen(null);
+  };
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const classRoot = getComponentSlotRoot(ACCOUNT_KEY_POPOVER);
+  return /* @__PURE__ */ jsxs(
+    AccountPopoverRootStyled,
     {
-      className: clsx(accountPopoverClasses.root, className),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("root") } : {},
-      children: /* @__PURE__ */ jsx(
-        MenuPopOver,
-        {
-          data: menuData,
-          asyncState,
-          itemHandleClick,
-          version,
-          handleLogOut,
-          classes: accountPopoverClasses,
-          userData,
-          settingsHandleOpen: settingHandleOpen
-        }
-      )
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId(ACCOUNT_KEY_POPOVER) } : {},
+      className: classRoot,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButtonStyled,
+          {
+            icon: /* @__PURE__ */ jsx(MyAvatar, { size, avatarUrl, firstName, lastName }),
+            src: "",
+            onClick: handleOpen,
+            selected: open ? true : false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MenuPopover,
+          {
+            data: menuData,
+            asyncState,
+            itemHandleClick,
+            version,
+            handleLogOut,
+            userData,
+            settingsHandleOpen,
+            open,
+            handleClose
+          }
+        )
+      ]
     }
   );
 };

package/components/AccountPopover/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const ACCOUNT_KEY_POPOVER = "M4LAccountPopover";
+export declare const PATH_EMAIL = "frontend/components/account_popover/assets/icons/email.svg";
+export declare const PATH_VERSION = "frontend/components/account_popover/assets/icons/version.svg";
+export declare const PATH_CONFIGURATION = "frontend/components/account_popover/assets/icons/configuration.svg";
+export declare const PATH_SIGN_OFF = "frontend/components/account_popover/assets/icons/sign_off.svg";

package/components/AccountPopover/constants.js

@@ -0,0 +1,10 @@
+const ACCOUNT_KEY_POPOVER = "M4LAccountPopover";
+const PATH_VERSION = "frontend/components/account_popover/assets/icons/version.svg";
+const PATH_CONFIGURATION = "frontend/components/account_popover/assets/icons/configuration.svg";
+const PATH_SIGN_OFF = "frontend/components/account_popover/assets/icons/sign_off.svg";
+export {
+  ACCOUNT_KEY_POPOVER as A,
+  PATH_VERSION as P,
+  PATH_CONFIGURATION as a,
+  PATH_SIGN_OFF as b
+};

package/components/AccountPopover/slots/AccountPopoverEnum.d.ts

@@ -0,0 +1,18 @@
+export declare enum AccountPopoverSlots {
+    accountPopoverRoot = "accountPopoverRoot",
+    avatar = "avatar",
+    popover = "popover",
+    userDataContainer = "userDataContainer",
+    userNameEmail = "userNameEmail",
+    divider = "divider",
+    circularPropress = "circularPropress",
+    menuItemSetting = "menuItemSetting",
+    menuItem = "menuItem",
+    menuItemLogout = "menuItemLogout",
+    iconButton = "iconButton",
+    fullName = "fullName",
+    email = "email",
+    versionContainer = "versionContainer",
+    version = "version",
+    versionIcon = "versionIcon"
+}

package/components/AccountPopover/slots/AccountPopoverEnum.js

@@ -0,0 +1,22 @@
+var AccountPopoverSlots = /* @__PURE__ */ ((AccountPopoverSlots2) => {
+  AccountPopoverSlots2["accountPopoverRoot"] = "accountPopoverRoot";
+  AccountPopoverSlots2["avatar"] = "avatar";
+  AccountPopoverSlots2["popover"] = "popover";
+  AccountPopoverSlots2["userDataContainer"] = "userDataContainer";
+  AccountPopoverSlots2["userNameEmail"] = "userNameEmail";
+  AccountPopoverSlots2["divider"] = "divider";
+  AccountPopoverSlots2["circularPropress"] = "circularPropress";
+  AccountPopoverSlots2["menuItemSetting"] = "menuItemSetting";
+  AccountPopoverSlots2["menuItem"] = "menuItem";
+  AccountPopoverSlots2["menuItemLogout"] = "menuItemLogout";
+  AccountPopoverSlots2["iconButton"] = "iconButton";
+  AccountPopoverSlots2["fullName"] = "fullName";
+  AccountPopoverSlots2["email"] = "email";
+  AccountPopoverSlots2["versionContainer"] = "versionContainer";
+  AccountPopoverSlots2["version"] = "version";
+  AccountPopoverSlots2["versionIcon"] = "versionIcon";
+  return AccountPopoverSlots2;
+})(AccountPopoverSlots || {});
+export {
+  AccountPopoverSlots as A
+};

package/components/AccountPopover/slots/AccountPopoverSlots.d.ts

@@ -0,0 +1,16 @@
+export declare const AccountPopoverRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & 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 IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/IconButton/types').IconButtonProps, keyof import('../../mui_extended/IconButton/types').IconButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const AvatarStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Avatar').AvatarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "title" | "component" | "id" | "hidden" | "color" | "content" | "style" | "variant" | "className" | "classes" | "onChange" | "sx" | "translate" | "slots" | "slotProps" | "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" | "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" | "src" | "dataTestId" | "alt" | keyof import('react').RefAttributes<HTMLDivElement> | "sizes" | "srcSet" | "imgProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Popover/types').PopoverProps, keyof import('../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const UserDataContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & 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 UserNameEmailStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & 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 DividerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & 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 CircularProgressStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/CircularProgress/types').CircularProgressProps, keyof import('../../mui_extended/CircularProgress/types').CircularProgressProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const MenuItemSettingsStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/MenuItem').MenuItemProps, keyof import('../../mui_extended/MenuItem').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const MenuItemLogoutStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/MenuItem').MenuItemProps, keyof import('../../mui_extended/MenuItem').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const MenuItemStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/MenuItem').MenuItemProps, keyof import('../../mui_extended/MenuItem').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const FullNametStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const EmailtStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const VersionContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & 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 VersionStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const VersionIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/AccountPopover/slots/AccountPopoverSlots.js

@@ -0,0 +1,93 @@
+import { styled } from "@mui/material/styles";
+import { A as ACCOUNT_KEY_POPOVER } from "../constants.js";
+import { A as AccountPopoverSlots } from "./AccountPopoverEnum.js";
+import { a as accountPopoverStyles } from "../style.js";
+import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
+import { A as Avatar } from "../../mui_extended/Avatar/Avatar.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { P as Popover } from "../../mui_extended/Popover/Popover.js";
+import { C as CircularProgress } from "../../mui_extended/CircularProgress/CircularProgress.js";
+import { M as MenuItem } from "../../mui_extended/MenuItem/MenuItem.js";
+import { I as Icon } from "../../Icon/Icon.js";
+const AccountPopoverRootStyled = styled("div", {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.accountPopoverRoot
+})(accountPopoverStyles?.accountPopoverRoot);
+const IconButtonStyled = styled(IconButton, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.iconButton
+})(accountPopoverStyles?.iconButton);
+const AvatarStyled = styled(Avatar, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.avatar
+})(accountPopoverStyles?.avatar);
+const PopoverStyled = styled(Popover, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.popover
+})(accountPopoverStyles?.popover);
+const UserDataContainerStyled = styled("div", {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.userDataContainer
+})(accountPopoverStyles?.userDataContainer);
+const UserNameEmailStyled = styled("div", {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.userNameEmail
+})(accountPopoverStyles?.userNameEmail);
+const DividerStyled = styled("div", {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.divider
+})(accountPopoverStyles?.divider);
+const CircularProgressStyled = styled(CircularProgress, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.circularPropress
+})(accountPopoverStyles?.circularPropress);
+const MenuItemSettingsStyled = styled(MenuItem, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.menuItemSetting
+})(accountPopoverStyles?.menuItemSetting);
+const MenuItemLogoutStyled = styled(MenuItem, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.menuItemLogout
+})(accountPopoverStyles?.menuItemLogout);
+const MenuItemStyled = styled(MenuItem, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.menuItem
+})(accountPopoverStyles?.menuItem);
+const FullNametStyled = styled(Typography, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.fullName
+})(accountPopoverStyles?.fullName);
+const EmailtStyled = styled(Typography, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.email
+})(accountPopoverStyles?.email);
+const VersionContainerStyled = styled("div", {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.versionContainer
+})(accountPopoverStyles?.versionContainer);
+const VersionStyled = styled(Typography, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.version
+})(accountPopoverStyles?.version);
+const VersionIconStyled = styled(Icon, {
+  name: ACCOUNT_KEY_POPOVER,
+  slot: AccountPopoverSlots.versionIcon
+})(accountPopoverStyles?.versionIcon);
+export {
+  AccountPopoverRootStyled as A,
+  CircularProgressStyled as C,
+  DividerStyled as D,
+  EmailtStyled as E,
+  FullNametStyled as F,
+  IconButtonStyled as I,
+  MenuItemSettingsStyled as M,
+  PopoverStyled as P,
+  UserDataContainerStyled as U,
+  VersionContainerStyled as V,
+  AvatarStyled as a,
+  UserNameEmailStyled as b,
+  VersionStyled as c,
+  VersionIconStyled as d,
+  MenuItemStyled as e,
+  MenuItemLogoutStyled as f
+};

package/components/AccountPopover/style.d.ts

@@ -1 +1,2 @@
-export declare const AcountPopOverRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import { AccountPopoverStyles } from './types';
+export declare const accountPopoverStyles: AccountPopoverStyles;

package/components/AccountPopover/style.js

@@ -1,7 +1,243 @@
-import { styled } from "@mui/material";
-const AcountPopOverRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LAccountPopover?.styleOverrides || {}
-}));
+const accountPopoverStyles = {
+  accountPopoverRoot: () => ({}),
+  /**
+   * ***************************************************************
+   * Estilos para el icono de usuario que se muestra en el popover.
+   * ***************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-10 17:27:34 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  iconButton: ({ theme }) => ({
+    width: theme.vars.size.baseSpacings.sp6,
+    height: theme.vars.size.baseSpacings.sp6,
+    "& .M4LAvatar-root": {
+      aspectRatio: "1/1",
+      "& .MuiAvatar-root": {
+        width: "100% !important",
+        height: "100% !important",
+        background: "transparent"
+      }
+    }
+  }),
+  /**
+   * ******************************************************************
+   * Estilos para el avatar del usuario que se muestra en el popover.
+   * ******************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-10 08:05:25 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  avatar: () => ({
+    "&.M4LAvatar-root": {
+      width: "100% !important",
+      height: "100% !important",
+      "& .MuiAvatar-root": {
+        boxShadow: "none !important"
+      }
+    }
+  }),
+  /**
+   * *******************************************************************
+   * Estilos para el popover que se muestra al hacer clic en el avatar.
+   * *******************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-10 17:27:34 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  popover: ({ theme }) => ({
+    "& .MuiPaper-root": {
+      marginTop: "5px",
+      padding: `${theme.vars.size.baseSpacings.sp2} !important`
+    }
+  }),
+  /**
+   * ********************************************************************
+   * Estilos para el contenedor de los datos del usuario en el popover.
+   * ********************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-09 17:45:48 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  userDataContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "nowrap",
+    gap: theme.vars.size.baseSpacings.sp3,
+    width: "100%",
+    alignItems: "center",
+    padding: `${theme.vars.size.baseSpacings.sp2} ${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp5} ${theme.vars.size.baseSpacings.sp1}`,
+    "& .M4LAvatar-root": {
+      "& .MuiAvatar-root": {
+        width: `${theme.vars.size[theme.generalSettings.isMobile ? "mobile" : "desktop"].medium.container} !important`,
+        height: `${theme.vars.size[theme.generalSettings.isMobile ? "mobile" : "desktop"].medium.container} !important`,
+        background: "transparent"
+      }
+    }
+  }),
+  /**
+   * ************************************************************************
+   * Estilos para el contenedor de nombre y correo del usuario en el popover.
+   * ************************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-09 17:45:48 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  userNameEmail: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-start",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * ***********************************************************
+   * Estilos para el nombre completo del usuario en el popover.
+   * ***********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-09 17:45:48 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  fullName: () => ({}),
+  /**
+   * ********************************************************
+   * Estilos para el correo del usuario en el popover.
+   * ********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-09 17:45:48 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  email: ({ theme }) => ({
+    "&.M4lclassCssSpecificity": {
+      color: theme.vars.palette.text.secondary
+    }
+  }),
+  /**
+   * ***********************************************************************
+   * Estilos para el contenedor de la versión que se muestra en el popover.
+   * ***********************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-09 17:45:48 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  versionContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "nowrap",
+    minHeight: theme.vars.size.baseSpacings.sp6,
+    padding: `${theme.vars.size.baseSpacings.sp1} !important`,
+    justifyContent: "space-between",
+    alignItems: "center"
+  }),
+  /**
+   * ************************************************************
+   * Estilos para la versión que se muestra en el popover.
+   * ************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-09 17:45:48 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  version: ({ theme }) => ({
+    "&.MuiTypography-root": {
+      color: theme.vars.palette.text.disabled,
+      fontSize: theme.typography.body.fontSize
+    }
+  }),
+  /**
+   * ******************************************************************
+   * Estilos para el contenedor de los elementos del menú del popover.
+   * ******************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-11 15:39:20 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  menuItemSetting: ({ theme }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp1} !important`
+  }),
+  /**
+   * ****************************************************************
+   * Estilos para el icono de la versión que se muestra en el popover.
+   * ****************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-09 17:45:48 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  versionIcon: ({ theme }) => ({
+    "& > div": {
+      background: theme.vars.palette.text.disabled
+    }
+  }),
+  /**
+   * ********************************************************
+   * Estilos para los items que se cargan como opciones
+   * adicionales del MenuPopover.
+   * ********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-11 15:39:20 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  menuItem: ({ theme }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp1} !important`
+  }),
+  /**
+   * ********************************************************
+   * Estilos para el divisor que se muestra en el popover.
+   * ********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-10 08:05:25 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  divider: ({ theme }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp1} 0px`,
+    justifyContent: "center",
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: 0,
+      right: 0,
+      height: "1px",
+      transform: "translateY(-50%)",
+      background: theme.vars.palette.border.secondary
+    }
+  }),
+  /**
+   * ************************************************************
+   * Estilos para el circular progress que se muestra
+   * cuando la carga de las opciones adicionales está en loading
+   * *************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-11 15:39:20 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  circularPropress: () => ({}),
+  /**
+   * ********************************************************
+   * Estilos para el item de logout del MenuPopover.
+   * ********************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-11 15:39:20 - automatic
+   * @updatedAt 2024-12-11 15:39:20 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  menuItemLogout: ({ theme }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp1} !important`
+  })
+};
 export {
-  AcountPopOverRoot as A
+  accountPopoverStyles as a
 };

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

@@ -0,0 +1,11 @@
+import { MenuPopoverProps } from './types';
+/**
+ * MenuPopOver: Es el subcomponente de AccountPopover encargado de crear el menú popover y su contenido.
+ * Se debe refactorizar el componente PopOver para recibir la propr de size.
+ * @param props
+ * @author Andrés Quintero - automatic
+ * @createdAt 2024-12-06 17:26:21 - automatic
+ * @updatedAt 2024-12-11 15:39:20 - automatic
+ * @updatedUser Andrés Quintero - automatic
+ */
+export declare const MenuPopover: (props: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,70 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
+import { P as PATH_VERSION, a as PATH_CONFIGURATION, b as PATH_SIGN_OFF } from "../../constants.js";
+import { P as PopoverStyled, U as UserDataContainerStyled, a as AvatarStyled, b as UserNameEmailStyled, F as FullNametStyled, E as EmailtStyled, V as VersionContainerStyled, c as VersionStyled, d as VersionIconStyled, D as DividerStyled, C as CircularProgressStyled, M as MenuItemSettingsStyled, e as MenuItemStyled, f as MenuItemLogoutStyled } from "../../slots/AccountPopoverSlots.js";
+import { g as getNameDataTestId } from "../../tests/utils.js";
+const MenuPopover = (props) => {
+  const {
+    version,
+    handleClose,
+    open,
+    userData,
+    settingsHandleOpen,
+    handleLogOut,
+    itemHandleClick,
+    data = [],
+    asyncState
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { firstName, lastName, email, avatarUrl } = userData || {};
+  const { getLabel } = useModuleDictionary();
+  const handleItemClick = (item) => {
+    itemHandleClick(item);
+    handleClose();
+  };
+  const handleClickSetting = () => {
+    settingsHandleOpen();
+    handleClose();
+  };
+  const handleLogout = () => {
+    handleLogOut();
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    PopoverStyled,
+    {
+      ownerState: {},
+      open: Boolean(open),
+      anchorEl: open,
+      onClose: handleClose,
+      arrowType: "no-arrow",
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("popover") } : {},
+      children: [
+        /* @__PURE__ */ jsxs(UserDataContainerStyled, { children: [
+          /* @__PURE__ */ jsx(AvatarStyled, { src: avatarUrl ?? "" }),
+          /* @__PURE__ */ jsxs(UserNameEmailStyled, { children: [
+            /* @__PURE__ */ jsx(FullNametStyled, { variant: "paragraphDens", children: `${firstName} ${lastName}` }),
+            /* @__PURE__ */ jsx(EmailtStyled, { variant: "body", children: email })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(VersionContainerStyled, { children: [
+          /* @__PURE__ */ jsx(VersionStyled, { children: `${getLabel("account_popover.label_version")} ${version}` }),
+          /* @__PURE__ */ jsx(VersionIconStyled, { src: `${host_static_assets}/${environment_assets}/${PATH_VERSION}` })
+        ] }),
+        /* @__PURE__ */ jsx(DividerStyled, {}),
+        asyncState === "loading" ? /* @__PURE__ */ jsx(CircularProgressStyled, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(MenuItemSettingsStyled, { onClick: handleClickSetting, label: getLabel("account_popover.label_settings"), endIcon: `${host_static_assets}/${environment_assets}/${PATH_CONFIGURATION}` }),
+          data.map((option) => /* @__PURE__ */ jsx(MenuItemStyled, { onClick: () => handleItemClick(option), label: option.title }, `${option.title}-${option.module_id}`)),
+          /* @__PURE__ */ jsx(DividerStyled, {})
+        ] }),
+        /* @__PURE__ */ jsx(MenuItemLogoutStyled, { onClick: handleLogout, label: getLabel("account_popover.label_logout"), endIcon: `${host_static_assets}/${environment_assets}/${PATH_SIGN_OFF}` })
+      ]
+    }
+  );
+};
+export {
+  MenuPopover as M
+};