@eclass/ui-kit 1.56.0 → 1.57.1

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

@@ -1,4 +1,4 @@
-import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text as Text$1, HStack, Heading, List, ListItem, Link, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, Portal, MenuButton, MenuGroup, Menu, MenuList } from "@chakra-ui/react";
+import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text as Text$1, HStack, Heading, List, ListItem, Link, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList } from "@chakra-ui/react";
 import * as React$1 from "react";
 import React__default, { useEffect, useCallback, useState } from "react";
 const main = {
@@ -1763,6 +1763,7 @@ function BtnLink({
   fontSize = "0.875rem",
   href = "",
   id,
+  isDisable = false,
   m: m2 = "0",
   onClick,
   role = "link",
@@ -1773,7 +1774,7 @@ function BtnLink({
 }) {
   const typeButton = {
     button: {
-      onClick,
+      onClick: isDisable ? void 0 : onClick,
       target
     },
     a: {
@@ -1782,22 +1783,24 @@ function BtnLink({
     }
   };
   return /* @__PURE__ */ jsx(Box, {
+    "aria-label": ariaLabel,
     as,
     autoFocus: false,
-    "aria-label": ariaLabel,
-    id,
-    role,
     backgroundColor: "transparent",
     borderStyle: "none",
     className: "linkButton",
     color: vars("colors-main-deepSkyBlue"),
+    cursor: isDisable ? "not-allowed" : "pointer",
     fontFamily: "Roboto",
+    fontSize,
     fontStyle: "normal",
     fontWeight: "500",
-    fontSize,
+    id,
     lineHeight: "1rem",
-    onClick,
+    onClick: isDisable ? void 0 : onClick,
+    opacity: isDisable ? 0.5 : 1,
     padding: ".25em",
+    role,
     tabIndex,
     textDecorationLine: textDecorationLine ? "underline" : "none",
     width: "fit-content",
@@ -7261,6 +7264,7 @@ const handleTime = (message) => {
   const totalMs = Math.round(baseMinutes * 60 * 1e3);
   return Math.max(3e3, totalMs);
 };
+const GLOBAL_TOASTER_FLAG = "_eclass_ui_kit_toaster_mounted";
 function FlashNotification({
   message,
   state,
@@ -7268,6 +7272,13 @@ function FlashNotification({
   m: m2,
   width
 }) {
+  const [shouldRenderToaster, setShouldRenderToaster] = useState(false);
+  useEffect(() => {
+    if (typeof window !== "undefined" && !window[GLOBAL_TOASTER_FLAG]) {
+      window[GLOBAL_TOASTER_FLAG] = true;
+      setShouldRenderToaster(true);
+    }
+  }, []);
   const showToast = useCallback(() => {
     n((t2) => /* @__PURE__ */ jsx(Alert, {
       isFlash: true,
@@ -7275,6 +7286,7 @@ function FlashNotification({
       canDismiss: true,
       onClick: () => n.dismiss(t2.id),
       width,
+      maxContent: !width,
       m: m2,
       children: message
     }), {
@@ -7287,25 +7299,21 @@ function FlashNotification({
       showToast();
     }
   }, [show, showToast]);
-  return /* @__PURE__ */ jsx(Portal, {
-    children: /* @__PURE__ */ jsx(Ie, {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: shouldRenderToaster && /* @__PURE__ */ jsx(Ie, {
       position: "top-center",
       toastOptions: {
         className: "toastContainer",
         style: {
           background: "transparent",
-          boxShadow: "none"
+          boxShadow: "none",
+          maxWidth: width != null ? width : "max-content"
         }
       }
     })
   });
 }
-const useFlashNotification = ({
-  state,
-  message,
-  maxContent,
-  width
-}) => {
+const useFlashNotification = ({ state, message, width }) => {
   const [show, setShow] = useState(false);
   useEffect(() => {
     if (show) {
@@ -7327,7 +7335,6 @@ const useFlashNotification = ({
     config: {
       state,
       message,
-      maxContent,
       width
     }
   };
@@ -7463,15 +7470,27 @@ const Modal = ({
     scrollBehavior: isInside ? "inside" : "outside",
     autoFocus,
     blockScrollOnMount: false,
-    children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsx(ModalContent$1, {
-      ...modalConfig.contentProps,
-      children: /* @__PURE__ */ jsx(ModalContentBase, {
-        fixedButtons,
-        withoutMargin,
-        title,
-        closeOnOverlayClick,
-        fixedSubtitle,
-        children
+    children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsx(Box, {
+      sx: {
+        ...isInside && {
+          ".uikit-modalContent": {
+            pb: "16px !important"
+          },
+          ".uikit-modalButtons": {
+            boxShadow: "0px 4px 16px 0px #5C5C5C33"
+          }
+        }
+      },
+      children: /* @__PURE__ */ jsx(ModalContent$1, {
+        ...modalConfig.contentProps,
+        children: /* @__PURE__ */ jsx(ModalContentBase, {
+          fixedButtons,
+          withoutMargin,
+          title,
+          closeOnOverlayClick,
+          fixedSubtitle,
+          children
+        })
       })
     })]
   });
@@ -7563,6 +7582,7 @@ const ModalAlertContent = ({
   children
 }) => {
   const [isDesktop] = useMediaQuery("(min-width: 641px)");
+  const descriptionParsed = typeof description === "string" ? ReactParser(purify.sanitize(description)) : description;
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsxs(ModalBody, {
       p: "32px",
@@ -7588,7 +7608,7 @@ const ModalAlertContent = ({
         fontSize: "16px",
         lineHeight: "24px",
         mb: 0,
-        children: description
+        children: descriptionParsed
       })]
     }), type !== "loading" && children ? children : /* @__PURE__ */ jsx(Fragment, {})]
   });