@eclass/ui-kit 1.59.0 → 1.59.2

package/dist/eclass-ui-kit.es.js

@@ -6794,7 +6794,8 @@ const Avatar = ({
     justifyContent: "center",
     margin: 0,
     overflow: "hidden",
-    width: `${size}px`
+    width: `${size}px`,
+    boxSizing: "border-box"
   };
   const initialsStyle = {
     color: "#fff",
@@ -6805,8 +6806,10 @@ const Avatar = ({
     textTransform: "uppercase"
   };
   const imgStyle = {
-    height: "auto",
-    maxWidth: "100%"
+    height: "100%",
+    width: "100%",
+    objectFit: "cover",
+    display: "block"
   };
   if (!fullName || fullName.length === 0) {
     return /* @__PURE__ */ jsx("figure", {
@@ -10502,7 +10505,8 @@ const profileStyle = {
     _hover: {
       background: vars("colors-neutral-cultured"),
       MenuItemShadow: "none",
-      boxShadow: "none"
+      boxShadow: "none",
+      textDecoration: "none"
     },
     _focus: {
       boxShadow: `0 0 0 3px ${vars("colors-icon-deepSkyBlue")} inset`
@@ -10578,6 +10582,11 @@ const useHideBackgroundOnMobile = (isOpen) => {
   useEffect(() => {
     if (!isMobile)
       return;
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
     const viewContainer = document.getElementById("ViewContainer");
     if (viewContainer) {
       viewContainer.style.display = isOpen ? "none" : "";
@@ -10597,6 +10606,7 @@ const useHideBackgroundOnMobile = (isOpen) => {
       targetElement.style.display = isOpen ? "none" : "";
     }
     return () => {
+      document.body.style.overflow = "";
       const viewContainer2 = document.getElementById("ViewContainer");
       if (viewContainer2) {
         viewContainer2.style.display = "";
@@ -10810,9 +10820,7 @@ const CalendarIcon = () => {
     })]
   });
 };
-const getMenuItemIcon = (type, customIcon) => {
-  if (customIcon)
-    return customIcon;
+const getMenuItemIcon = (type) => {
   switch (type) {
     case "courses":
       return /* @__PURE__ */ jsx(CoursesIcon, {});
@@ -10832,7 +10840,7 @@ const StyledMenuButton = MenuButton;
 const StyledMenuList = MenuList;
 const StyledHeading = Heading;
 const StyledMenuItem = MenuItem;
-const UserDropdownMenu = ({
+const UserDropdown = ({
   userInfo,
   menuItems,
   isOpen: controlledIsOpen,
@@ -10868,24 +10876,33 @@ const UserDropdownMenu = ({
         top: "30px",
         width: "0"
       },
+      ">div": {
+        left: isMobile ? "0 !important" : "auto",
+        position: isMobile ? "fixed !important" : "absolute",
+        top: isMobile ? "52px !important" : "auto",
+        transform: isMobile ? "none !important" : "auto"
+      },
       ".chakra-menu__menu-list": {
         animation: "none !important",
         background: vars("colors-neutral-davysGrey"),
         borderRadius: isMobile ? "0" : "10px",
         boxShadow: isMobile ? "none" : "rgba(47, 47, 47, 0.2) -1px 6px 40px 0px",
+        maxHeight: isMobile ? "calc(100vh - 62px)" : "auto",
         opacity: "1 !important",
+        overflowY: isMobile ? "auto" : "hidden",
         padding: "15px 0 0",
         position: "absolute",
-        right: isMobile ? "-16px" : "-8px",
+        right: isMobile ? "auto" : "-8px",
+        top: isMobile ? "3px !important" : "auto",
         transform: "none !important",
         transition: "none !important",
         width: isMobile ? "100vw" : "290px"
       },
       ".content": {
-        height: isMobile ? "100vh" : "auto",
+        height: isMobile ? "100%" : "auto",
         borderRadius: !isMobile ? "10px" : "0",
         bg: vars("colors-neutral-white"),
-        ">button": {
+        ">button, >chakra-link": {
           borderBottom: isMobile ? `solid 1px ${vars("colors-neutral-platinum")}` : "none"
         }
       },
@@ -10903,11 +10920,11 @@ const UserDropdownMenu = ({
         children: [/* @__PURE__ */ jsx(NewTooltip, {
           label: "Mi perfil",
           isDisabled: isTooltipDisabled,
-          m: "7px 0 0 0",
           children: /* @__PURE__ */ jsx(StyledMenuButton, {
             background: "transparent",
             border: "transparent",
             height: "30px",
+            lineHeight: "0",
             p: "0",
             _focusVisible: {
               boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")}`,
@@ -10937,12 +10954,11 @@ const UserDropdownMenu = ({
             children: menuItems.map((item) => {
               const {
                 label,
-                icon,
                 type,
                 href,
                 onClick
               } = item;
-              const view = getMenuItemIcon(type, icon);
+              const view = getMenuItemIcon(type);
               const isLogout = type === "logout";
               return /* @__PURE__ */ jsx(StyledMenuItem, {
                 "aria-label": onClick ? "Bot\xF3n" : `V\xEDnculo, ${label}`,
@@ -10965,5 +10981,5 @@ const UserDropdownMenu = ({
     })
   });
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index$1 as Icons, Label, Modal, ModalAlert, ModalAlertButtons, ModalAlertNew, ModalButtons, ModalContent, ModalMultiple, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserDropdownMenu, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index$1 as Icons, Label, Modal, ModalAlert, ModalAlertButtons, ModalAlertNew, ModalButtons, ModalContent, ModalMultiple, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserDropdown, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map