@eclass/ui-kit 1.51.20 → 1.52.0

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

@@ -35444,11 +35444,15 @@ const EventsGroup = ({
   title,
   events,
   text,
-  colors: colors2
+  colors: colors2,
+  clickEvent
 }) => {
   var _a;
   if (!events || events && events.length === 0)
     return /* @__PURE__ */ jsx(Fragment, {});
+  const handleClick = (event) => {
+    clickEvent == null ? void 0 : clickEvent(event);
+  };
   return /* @__PURE__ */ jsx(Box, {
     className: "calendar-events-group",
     _focus: {
@@ -35486,7 +35490,8 @@ const EventsGroup = ({
             color: event.course_id && (colors2 == null ? void 0 : colors2[event.course_id]) ? colors2[event.course_id] : "#82504A",
             text,
             hasNotification: event.isNew,
-            isDropdown: true
+            isDropdown: true,
+            clickEvent: () => handleClick(event)
           }, event.id)
         }, event.id);
       })
@@ -35498,7 +35503,8 @@ const Events = ({
   text,
   redirecToCalendar,
   isMobile,
-  colors: colors2
+  colors: colors2,
+  clickEvent
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const {
@@ -35537,17 +35543,20 @@ const Events = ({
       colors: colors2,
       text: (_c = text == null ? void 0 : text.course) != null ? _c : "",
       title: (_e = (_d = text == null ? void 0 : text.events) == null ? void 0 : _d.today) != null ? _e : "Hoy",
-      events: today
+      events: today,
+      clickEvent
     }), /* @__PURE__ */ jsx(EventsGroup, {
       colors: colors2,
       text: (_f = text == null ? void 0 : text.course) != null ? _f : "",
       title: (_h = (_g = text == null ? void 0 : text.events) == null ? void 0 : _g.tomorrow) != null ? _h : "Ma\xF1ana",
-      events: tomorrow
+      events: tomorrow,
+      clickEvent
     }), /* @__PURE__ */ jsx(EventsGroup, {
       colors: colors2,
       text: (_i = text == null ? void 0 : text.course) != null ? _i : "",
       title: (_k = (_j = text == null ? void 0 : text.events) == null ? void 0 : _j.next) != null ? _k : "Pr\xF3ximos",
-      events: next2
+      events: next2,
+      clickEvent
     })]
   });
 };
@@ -35559,7 +35568,8 @@ const CalendarDropdownContainer = ({
   redirectToCalendar,
   courseColors,
   onlyToCalendar,
-  m: m2
+  m: m2,
+  clickEvent
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const [isMobile] = useMediaQuery("(max-width: 577px)");
@@ -35614,18 +35624,17 @@ const CalendarDropdownContainer = ({
     position: "relative",
     sx: {
       "&::after": {
-        content: '""',
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderColor: `transparent transparent ${(_a = vars("colors-neutral-davysGrey")) != null ? _a : "#5C5C5C"}
-          transparent`,
+        borderColor: `transparent transparent ${(_a = vars("colors-neutral-davysGrey")) != null ? _a : "#5C5C5C"} transparent`,
         borderStyle: "solid",
         borderWidth: "0 11px 10px 11px",
-        top: isMobile ? "30px" : "30px",
-        right: isMobile ? "3px" : "15px",
+        content: '""',
         display: isMenuOpen ? "block" : "none",
-        transform: isMobile ? "none" : "translateX(50%)"
+        height: "0",
+        left: "50%",
+        position: "absolute",
+        top: "30px",
+        transform: "translateX(-50%)",
+        width: "0"
       },
       "&.hasNew::before": {
         background: (_b = vars("colors-secondary-pumpkin")) != null ? _b : "#FF7A14",
@@ -35640,27 +35649,27 @@ const CalendarDropdownContainer = ({
         zIndex: "1"
       },
       ">div": {
-        position: isMobile ? "fixed !important" : "absolute",
         left: isMobile ? "0 !important" : "auto",
+        position: isMobile ? "fixed !important" : "absolute",
         top: isMobile ? "62px !important" : "auto",
         transform: isMobile ? "none !important" : "translate3d(-409px, 38px, 0px) !important"
       },
       ".chakra-menu__menu-list": {
-        padding: "0",
-        position: "absolute",
-        left: isMobile ? "auto" : "-30px",
-        top: isMobile ? "-6px !important" : "auto",
-        width: isMobile ? "100vw" : "500px",
-        maxHeight: isMobile ? "calc(100vh - 62px)" : "auto",
-        overflowY: isMobile ? "auto" : "hidden",
+        animation: "none !important",
         background: "transparent",
         border: "none",
         borderRadius: isMobile ? "0" : "10px",
         boxShadow: isMobile ? "none" : "rgba(47, 47, 47, 0.2) -1px 6px 40px 0px",
-        animation: "none !important",
-        transition: "none !important",
+        left: isMobile ? "auto" : "-30px",
+        maxHeight: isMobile ? "calc(100vh - 62px)" : "auto",
+        opacity: "1 !important",
+        overflowY: isMobile ? "auto" : "hidden",
+        padding: "0",
+        position: "absolute",
+        top: isMobile ? "-6px !important" : "auto",
         transform: "none !important",
-        opacity: "1 !important"
+        transition: "none !important",
+        width: isMobile ? "100vw" : "500px"
       },
       ".chakra-menu__group__title": {
         fontSize: "18px",
@@ -35698,7 +35707,8 @@ const CalendarDropdownContainer = ({
               events: all,
               text,
               redirecToCalendar: redirectToCalendar,
-              isMobile
+              isMobile,
+              clickEvent
             })
           })]
         })]
@@ -35721,7 +35731,8 @@ const CalendarDropdown = ({
   events,
   loading,
   onlyToCalendar = false,
-  m: m2
+  m: m2,
+  clickEvent
 }) => {
   const date = new Date(now);
   const isoDate = date.toISOString();
@@ -35733,7 +35744,8 @@ const CalendarDropdown = ({
     courseColors,
     redirectToCalendar,
     text,
-    onlyToCalendar
+    onlyToCalendar,
+    clickEvent
   });
 };
 function Calendar(props) {
@@ -35784,75 +35796,85 @@ const EventsList = ({
   color: color2,
   text,
   date,
-  hours
+  hours,
+  clickEvent
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const border2 = `1px solid ${(_a = vars("colors-neutral-platinum")) != null ? _a : "#E8E8E8"}`;
-  return /* @__PURE__ */ jsx(Box, {
-    className: "eventsList",
-    borderTop: border2,
-    padding: "16px 24px",
-    children: /* @__PURE__ */ jsxs(Box, {
-      display: "flex",
-      flexDirection: "column",
-      gap: "8px",
-      children: [/* @__PURE__ */ jsxs(Box, {
-        lineHeight: "21px",
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        fontSize: "16px",
-        children: [name, " ", hasNotification && /* @__PURE__ */ jsx(NotificationIcon, {})]
-      }), /* @__PURE__ */ jsxs(Box, {
+  const handleClick = () => clickEvent == null ? void 0 : clickEvent();
+  return /* @__PURE__ */ jsx(Ripples, {
+    children: /* @__PURE__ */ jsx(Box, {
+      className: "eventsList",
+      borderTop: border2,
+      padding: "16px 24px",
+      onClick: handleClick,
+      cursor: "pointer",
+      bg: (_b = vars("colors-neutral-white")) != null ? _b : "#fff",
+      _hover: {
+        bg: (_c = vars("colors-neutral-cultured2")) != null ? _c : "#F8F8F8"
+      },
+      children: /* @__PURE__ */ jsxs(Box, {
         display: "flex",
-        lineHeight: "19px",
-        fontSize: "14px",
-        sx: {
-          svg: {
-            marginRight: "4px"
-          },
-          span: {
-            verticalAlign: "middle"
-          }
-        },
+        flexDirection: "column",
+        gap: "8px",
         children: [/* @__PURE__ */ jsxs(Box, {
-          paddingRight: "8px",
-          borderRight: border2,
-          children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx("span", {
-            children: date
-          })]
-        }), /* @__PURE__ */ jsxs(Box, {
-          paddingLeft: "8px",
-          children: [/* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx("span", {
-            children: hours
-          })]
-        })]
-      }), isDropdown && /* @__PURE__ */ jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: "4px",
-        lineHeight: "19px",
-        children: [/* @__PURE__ */ jsx(Box, {
-          alignSelf: "flex-start",
-          bg: color2,
-          borderRadius: "50%",
-          display: "block",
-          h: "10px",
-          mt: "4px",
-          maxH: "10px",
-          maxW: "10px",
-          minH: "10px",
-          minW: "10px",
-          w: "10px"
+          lineHeight: "21px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          fontSize: "16px",
+          children: [name, " ", hasNotification && /* @__PURE__ */ jsx(NotificationIcon, {})]
         }), /* @__PURE__ */ jsxs(Box, {
-          as: "span",
-          color: (_b = vars("colors-neutral-gray")) != null ? _b : "#808080",
+          display: "flex",
+          lineHeight: "19px",
           fontSize: "14px",
-          children: [/* @__PURE__ */ jsxs("strong", {
-            children: [text != null ? text : "Curso", ":"]
-          }), " ", courseName]
+          sx: {
+            svg: {
+              marginRight: "4px"
+            },
+            span: {
+              verticalAlign: "middle"
+            }
+          },
+          children: [/* @__PURE__ */ jsxs(Box, {
+            paddingRight: "8px",
+            borderRight: border2,
+            children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx("span", {
+              children: date
+            })]
+          }), /* @__PURE__ */ jsxs(Box, {
+            paddingLeft: "8px",
+            children: [/* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx("span", {
+              children: hours
+            })]
+          })]
+        }), isDropdown && /* @__PURE__ */ jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          lineHeight: "19px",
+          children: [/* @__PURE__ */ jsx(Box, {
+            alignSelf: "flex-start",
+            bg: color2,
+            borderRadius: "50%",
+            display: "block",
+            h: "10px",
+            mt: "4px",
+            maxH: "10px",
+            maxW: "10px",
+            minH: "10px",
+            minW: "10px",
+            w: "10px"
+          }), /* @__PURE__ */ jsxs(Box, {
+            as: "span",
+            color: (_d = vars("colors-neutral-gray")) != null ? _d : "#808080",
+            fontSize: "14px",
+            children: [/* @__PURE__ */ jsxs("strong", {
+              children: [text != null ? text : "Curso", ":"]
+            }), " ", courseName]
+          })]
         })]
-      })]
+      })
     })
   });
 };