@eclass/ui-kit 1.55.5 → 1.56.0

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

@@ -1,6 +1,6 @@
-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 { 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 * as React$1 from "react";
-import React__default, { useEffect, useRef, useCallback, useState } from "react";
+import React__default, { useEffect, useCallback, useState } from "react";
 const main = {
   deepSkyBlue: "#0189FF",
   azureRadiance: "#017BE5",
@@ -6766,7 +6766,8 @@ function Alert({
   m: m2,
   endTextLink,
   onClickLink,
-  sx
+  sx,
+  width
 }) {
   const [isMobile] = useMediaQuery("(max-width: 425px)");
   const handleClick = () => {
@@ -6787,8 +6788,9 @@ function Alert({
     gap: !isFlash ? "16px" : void 0,
     justifyContent: !isMobile ? "space-between" : void 0,
     margin: m2,
-    width: maxContent ? "max-content" : fullWidth ? "100%" : "fit-content",
-    maxWidth: fullWidth ? "none" : "796px",
+    mx: isFlash ? "auto" : void 0,
+    width: width != null ? width : maxContent ? "max-content" : fullWidth ? "100%" : "fit-content",
+    maxWidth: fullWidth ? "none" : (width != null ? width : maxContent) ? "none" : "796px",
     p: "1rem",
     pr: canDismiss ? "1.75rem" : "1rem",
     position: "relative",
@@ -6977,6 +6979,17 @@ var S = /* @__PURE__ */ new Map(), X = 1e3, $ = (e2) => {
   P = v(P, e2), A.forEach((t2) => {
     t2(P);
   });
+}, Y = { blank: 4e3, error: 4e3, success: 2e3, loading: 1 / 0, custom: 4e3 }, I = (e2 = {}) => {
+  let [t2, o2] = useState(P);
+  useEffect(() => (A.push(o2), () => {
+    let a2 = A.indexOf(o2);
+    a2 > -1 && A.splice(a2, 1);
+  }), [t2]);
+  let s2 = t2.toasts.map((a2) => {
+    var r, c2;
+    return { ...e2, ...e2[a2.type], ...a2, duration: a2.duration || ((r = e2[a2.type]) == null ? void 0 : r.duration) || (e2 == null ? void 0 : e2.duration) || Y[a2.type], style: { ...e2.style, ...(c2 = e2[a2.type]) == null ? void 0 : c2.style, ...a2.style } };
+  });
+  return { ...t2, toasts: s2 };
 };
 var G = (e2, t2 = "blank", o2) => ({ createdAt: Date.now(), visible: true, type: t2, ariaProps: { role: "status", "aria-live": "polite" }, message: e2, pauseDuration: 0, ...o2, id: (o2 == null ? void 0 : o2.id) || U() }), h = (e2) => (t2, o2) => {
   let s2 = G(t2, e2, o2);
@@ -6996,6 +7009,37 @@ n.promise = (e2, t2, o2) => {
     n.error(T(t2.error, a2), { id: s2, ...o2, ...o2 == null ? void 0 : o2.error });
   }), e2;
 };
+var Z = (e2, t2) => {
+  u({ type: 1, toast: { id: e2, height: t2 } });
+}, ee = () => {
+  u({ type: 5, time: Date.now() });
+}, D = (e2) => {
+  let { toasts: t2, pausedAt: o2 } = I(e2);
+  useEffect(() => {
+    if (o2)
+      return;
+    let r = Date.now(), c2 = t2.map((i2) => {
+      if (i2.duration === 1 / 0)
+        return;
+      let d2 = (i2.duration || 0) + i2.pauseDuration - (r - i2.createdAt);
+      if (d2 < 0) {
+        i2.visible && n.dismiss(i2.id);
+        return;
+      }
+      return setTimeout(() => n.dismiss(i2.id), d2);
+    });
+    return () => {
+      c2.forEach((i2) => i2 && clearTimeout(i2));
+    };
+  }, [t2, o2]);
+  let s2 = useCallback(() => {
+    o2 && u({ type: 6, time: Date.now() });
+  }, [o2]), a2 = useCallback((r, c2) => {
+    let { reverseOrder: i2 = false, gutter: d2 = 8, defaultPosition: p2 } = c2 || {}, g2 = t2.filter((m2) => (m2.position || p2) === (r.position || p2) && m2.height), E = g2.findIndex((m2) => m2.id === r.id), x = g2.filter((m2, R) => R < E && m2.visible).length;
+    return g2.filter((m2) => m2.visible).slice(...i2 ? [x + 1] : [0, x]).reduce((m2, R) => m2 + (R.height || 0) + d2, 0);
+  }, [t2]);
+  return { toasts: t2, handlers: { updateHeight: Z, startPause: ee, endPause: s2, calculateOffset: a2 } };
+};
 var oe = h$1`
 from {
   transform: scale(0) rotate(45deg);
@@ -7177,75 +7221,101 @@ var ye = (e2) => `
 `, Ae = (e2, t2) => {
   let s2 = e2.includes("top") ? 1 : -1, [a2, r] = b() ? [he, xe] : [ye(s2), ge(s2)];
   return { animation: t2 ? `${h$1(a2)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards` : `${h$1(r)} 0.4s forwards cubic-bezier(.06,.71,.55,1)` };
-};
-React$1.memo(({ toast: e2, position: t2, style: o2, children: s2 }) => {
+}, F = React$1.memo(({ toast: e2, position: t2, style: o2, children: s2 }) => {
   let a2 = e2.height ? Ae(e2.position || t2 || "top-center", e2.visible) : { opacity: 0 }, r = React$1.createElement(M, { toast: e2 }), c2 = React$1.createElement(Se, { ...e2.ariaProps }, T(e2.message, e2));
   return React$1.createElement(be, { className: e2.className, style: { ...a2, ...o2, ...e2.style } }, typeof s2 == "function" ? s2({ icon: r, message: c2 }) : React$1.createElement(React$1.Fragment, null, r, c2));
 });
 m(React$1.createElement);
-u$1`
+var Ee = ({ id: e2, className: t2, style: o2, onHeightUpdate: s2, children: a2 }) => {
+  let r = React$1.useCallback((c2) => {
+    if (c2) {
+      let i2 = () => {
+        let d2 = c2.getBoundingClientRect().height;
+        s2(e2, d2);
+      };
+      i2(), new MutationObserver(i2).observe(c2, { subtree: true, childList: true, characterData: true });
+    }
+  }, [e2, s2]);
+  return React$1.createElement("div", { ref: r, className: t2, style: o2 }, a2);
+}, Re = (e2, t2) => {
+  let o2 = e2.includes("top"), s2 = o2 ? { top: 0 } : { bottom: 0 }, a2 = e2.includes("center") ? { justifyContent: "center" } : e2.includes("right") ? { justifyContent: "flex-end" } : {};
+  return { left: 0, right: 0, display: "flex", position: "absolute", transition: b() ? void 0 : "all 230ms cubic-bezier(.21,1.02,.73,1)", transform: `translateY(${t2 * (o2 ? 1 : -1)}px)`, ...s2, ...a2 };
+}, ve = u$1`
   z-index: 9999;
   > * {
     pointer-events: auto;
   }
-`;
+`, O = 16, Ie = ({ reverseOrder: e2, position: t2 = "top-center", toastOptions: o2, gutter: s2, children: a2, containerStyle: r, containerClassName: c2 }) => {
+  let { toasts: i2, handlers: d2 } = D(o2);
+  return React$1.createElement("div", { style: { position: "fixed", zIndex: 9999, top: O, left: O, right: O, bottom: O, pointerEvents: "none", ...r }, className: c2, onMouseEnter: d2.startPause, onMouseLeave: d2.endPause }, i2.map((p2) => {
+    let g2 = p2.position || t2, E = d2.calculateOffset(p2, { reverseOrder: e2, gutter: s2, defaultPosition: t2 }), x = Re(g2, E);
+    return React$1.createElement(Ee, { id: p2.id, key: p2.id, onHeightUpdate: d2.updateHeight, className: p2.visible ? ve : "", style: x }, p2.type === "custom" ? T(p2.message, p2) : a2 ? a2(p2) : React$1.createElement(F, { toast: p2, position: g2 }));
+  }));
+};
 const handleTime = (message) => {
-  function countWords(input) {
-    var _a, _b;
-    const wordCount = (_b = (_a = input.match(/(\w+)/g)) == null ? void 0 : _a.length) != null ? _b : 0;
-    return wordCount;
-  }
-  let time = 3e3;
-  if (message && countWords(message) > 5) {
-    time = 6e3;
-  }
-  return time;
+  if (!message)
+    return 3e3;
+  const words = message.trim().split(/\s+/).length;
+  const wordsPerMinute = 150;
+  const baseMinutes = words / wordsPerMinute;
+  const totalMs = Math.round(baseMinutes * 60 * 1e3);
+  return Math.max(3e3, totalMs);
 };
 function FlashNotification({
   message,
   state,
   show,
-  maxContent
+  m: m2,
+  width
 }) {
-  const hasShownRef = useRef(false);
   const showToast = useCallback(() => {
     n((t2) => /* @__PURE__ */ jsx(Alert, {
       isFlash: true,
       state,
       canDismiss: true,
       onClick: () => n.dismiss(t2.id),
-      maxContent,
+      width,
+      m: m2,
       children: message
     }), {
-      id: alertStates[state].id,
-      duration: handleTime(message)
+      duration: state === "success" ? handleTime(message) : Infinity,
+      id: alertStates[state].id
     });
-  }, [message, state, maxContent]);
+  }, [message, state, width, m2]);
   useEffect(() => {
-    if (show && !hasShownRef.current) {
+    if (show) {
       showToast();
-      hasShownRef.current = true;
-    }
-    if (!show) {
-      hasShownRef.current = false;
     }
   }, [show, showToast]);
-  return null;
+  return /* @__PURE__ */ jsx(Portal, {
+    children: /* @__PURE__ */ jsx(Ie, {
+      position: "top-center",
+      toastOptions: {
+        className: "toastContainer",
+        style: {
+          background: "transparent",
+          boxShadow: "none"
+        }
+      }
+    })
+  });
 }
 const useFlashNotification = ({
   state,
   message,
-  maxContent
+  maxContent,
+  width
 }) => {
   const [show, setShow] = useState(false);
   useEffect(() => {
     if (show) {
+      const duration = state === "success" ? handleTime(message) : 1e3;
       const timeOut = setTimeout(() => {
         setShow(false);
-      }, handleTime(message));
+      }, duration);
       return () => clearTimeout(timeOut);
     }
-  }, [message, show]);
+  }, [message, show, state]);
   const active = () => {
     if (!show) {
       setShow(true);
@@ -7257,7 +7327,8 @@ const useFlashNotification = ({
     config: {
       state,
       message,
-      maxContent
+      maxContent,
+      width
     }
   };
 };