analytica-frontend-lib 1.1.57 → 1.1.58

package/dist/index.mjs

@@ -4325,7 +4325,8 @@ import {
   forwardRef as forwardRef12,
   Fragment as Fragment4,
   useState as useState10,
-  useRef as useRef7
+  useRef as useRef7,
+  useEffect as useEffect9
 } from "react";
 import {
   CaretRight as CaretRight2,
@@ -5173,6 +5174,8 @@ var CardAudio = forwardRef12(
     const [showSpeedMenu, setShowSpeedMenu] = useState10(false);
     const [playbackRate, setPlaybackRate] = useState10(1);
     const audioRef = useRef7(null);
+    const volumeControlRef = useRef7(null);
+    const speedMenuRef = useRef7(null);
     const formatTime2 = (time) => {
       const minutes = Math.floor(time / 60);
       const seconds = Math.floor(time % 60);
@@ -5224,9 +5227,11 @@ var CardAudio = forwardRef12(
     };
     const toggleVolumeControl = () => {
       setShowVolumeControl(!showVolumeControl);
+      setShowSpeedMenu(false);
     };
     const toggleSpeedMenu = () => {
       setShowSpeedMenu(!showSpeedMenu);
+      setShowVolumeControl(false);
     };
     const handleSpeedChange = (speed) => {
       setPlaybackRate(speed);
@@ -5244,6 +5249,20 @@ var CardAudio = forwardRef12(
       }
       return /* @__PURE__ */ jsx28(SpeakerHigh, { size: 24 });
     };
+    useEffect9(() => {
+      const handleClickOutside = (event) => {
+        if (volumeControlRef.current && !volumeControlRef.current.contains(event.target)) {
+          setShowVolumeControl(false);
+        }
+        if (speedMenuRef.current && !speedMenuRef.current.contains(event.target)) {
+          setShowSpeedMenu(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
     return /* @__PURE__ */ jsxs21(
       CardBase,
       {
@@ -5332,7 +5351,7 @@ var CardAudio = forwardRef12(
             }
           ) }),
           /* @__PURE__ */ jsx28("p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime2(duration) }),
-          /* @__PURE__ */ jsxs21("div", { className: "relative h-6", children: [
+          /* @__PURE__ */ jsxs21("div", { className: "relative h-6", ref: volumeControlRef, children: [
             /* @__PURE__ */ jsx28(
               "button",
               {
@@ -5394,7 +5413,7 @@ var CardAudio = forwardRef12(
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs21("div", { className: "relative h-6", children: [
+          /* @__PURE__ */ jsxs21("div", { className: "relative h-6", ref: speedMenuRef, children: [
             /* @__PURE__ */ jsx28(
               "button",
               {
@@ -6042,7 +6061,7 @@ var HeaderAlternative = forwardRef14(
 // src/components/AlertDialog/AlertDialog.tsx
 import {
   forwardRef as forwardRef15,
-  useEffect as useEffect9
+  useEffect as useEffect10
 } from "react";
 import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 var SIZE_CLASSES11 = {
@@ -6070,7 +6089,7 @@ var AlertDialog = forwardRef15(
     size = "medium",
     ...props
   }, ref) => {
-    useEffect9(() => {
+    useEffect10(() => {
       if (!isOpen || !closeOnEscape) return;
       const handleEscape = (event) => {
         if (event.key === "Escape") {
@@ -6080,7 +6099,7 @@ var AlertDialog = forwardRef15(
       document.addEventListener("keydown", handleEscape);
       return () => document.removeEventListener("keydown", handleEscape);
     }, [isOpen, closeOnEscape]);
-    useEffect9(() => {
+    useEffect10(() => {
       if (isOpen) {
         document.body.style.overflow = "hidden";
       } else {
@@ -6166,7 +6185,7 @@ var AlertDialog = forwardRef15(
 AlertDialog.displayName = "AlertDialog";
 
 // src/components/MultipleChoice/MultipleChoice.tsx
-import { useEffect as useEffect10, useState as useState13 } from "react";
+import { useEffect as useEffect11, useState as useState13 } from "react";
 import { CheckCircle as CheckCircle5, XCircle as XCircle4, Check as Check4 } from "phosphor-react";
 import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 var MultipleChoiceList = ({
@@ -6179,7 +6198,7 @@ var MultipleChoiceList = ({
   mode = "interactive"
 }) => {
   const [actualValue, setActualValue] = useState13(selectedValues);
-  useEffect10(() => {
+  useEffect11(() => {
     setActualValue(selectedValues);
   }, [selectedValues]);
   const getStatusBadge2 = (status) => {
@@ -6299,7 +6318,7 @@ var MultipleChoiceList = ({
 };
 
 // src/hooks/useMobile.ts
-import { useState as useState14, useEffect as useEffect11 } from "react";
+import { useState as useState14, useEffect as useEffect12 } from "react";
 var MOBILE_WIDTH = 500;
 var TABLET_WIDTH = 931;
 var DEFAULT_WIDTH = 1200;
@@ -6316,7 +6335,7 @@ var getDeviceType = () => {
 var useMobile = () => {
   const [isMobile, setIsMobile] = useState14(false);
   const [isTablet, setIsTablet] = useState14(false);
-  useEffect11(() => {
+  useEffect12(() => {
     const checkScreenSize = () => {
       const width = getWindowWidth();
       setIsMobile(width < MOBILE_WIDTH);
@@ -6358,7 +6377,7 @@ var useMobile = () => {
 // src/components/Select/Select.tsx
 import { create as create5, useStore as useStore4 } from "zustand";
 import {
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useRef as useRef8,
   forwardRef as forwardRef16,
   isValidElement as isValidElement4,
@@ -6489,13 +6508,13 @@ var Select = ({
     search(children2);
     return found;
   };
-  useEffect12(() => {
+  useEffect13(() => {
     if (!selectedLabel && defaultValue) {
       const label2 = findLabelForValue(children, defaultValue);
       if (label2) store.setState({ selectedLabel: label2 });
     }
   }, [children, defaultValue, selectedLabel]);
-  useEffect12(() => {
+  useEffect13(() => {
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setOpen(false);
@@ -6530,7 +6549,7 @@ var Select = ({
       document.removeEventListener("keydown", handleArrowKeys);
     };
   }, [open]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (propValue) {
       setValue(propValue);
       const label2 = findLabelForValue(children, propValue);
@@ -6711,7 +6730,7 @@ var Select_default = Select;
 // src/components/Menu/Menu.tsx
 import { create as create6, useStore as useStore5 } from "zustand";
 import {
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useRef as useRef9,
   forwardRef as forwardRef17,
   isValidElement as isValidElement5,
@@ -6753,7 +6772,7 @@ var Menu = forwardRef17(
     storeRef.current ??= createMenuStore(onValueChange);
     const store = storeRef.current;
     const { setValue } = useStore5(store, (s) => s);
-    useEffect13(() => {
+    useEffect14(() => {
       setValue(propValue ?? defaultValue);
     }, [defaultValue, propValue, setValue]);
     const baseClasses = variant === "menu-overflow" ? "w-fit py-2 flex flex-row items-center justify-center" : "w-full py-2 flex flex-row items-center justify-center";
@@ -6957,7 +6976,7 @@ var MenuOverflow = ({
   const containerRef = useRef9(null);
   const [showLeftArrow, setShowLeftArrow] = useState15(false);
   const [showRightArrow, setShowRightArrow] = useState15(false);
-  useEffect13(() => {
+  useEffect14(() => {
     const checkScroll = () => internalCheckScroll(
       containerRef.current,
       setShowLeftArrow,
@@ -7285,7 +7304,7 @@ var NotFound_default = NotFound;
 import {
   useRef as useRef10,
   useState as useState16,
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   useCallback as useCallback2
 } from "react";
 import { createPortal } from "react-dom";
@@ -7368,6 +7387,8 @@ var SpeedMenu = ({
   isFullscreen
 }) => {
   const buttonRef = useRef10(null);
+  const speedMenuContainerRef = useRef10(null);
+  const speedMenuRef = useRef10(null);
   const getMenuPosition = () => {
     if (!buttonRef.current) return { top: 0, left: 0 };
     const rect = buttonRef.current.getBoundingClientRect();
@@ -7378,9 +7399,26 @@ var SpeedMenu = ({
     };
   };
   const position = getMenuPosition();
+  useEffect15(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isOutsideContainer = speedMenuContainerRef.current && !speedMenuContainerRef.current.contains(target);
+      const isOutsideMenu = speedMenuRef.current && !speedMenuRef.current.contains(target);
+      if (isOutsideContainer && isOutsideMenu) {
+        onToggleMenu();
+      }
+    };
+    if (showSpeedMenu) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showSpeedMenu, onToggleMenu]);
   const menuContent = /* @__PURE__ */ jsx37(
     "div",
     {
+      ref: speedMenuRef,
       role: "menu",
       "aria-label": "Playback speed",
       className: isFullscreen ? "absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20 z-[9999]" : "fixed bg-black/90 rounded-lg p-2 min-w-20 z-[9999]",
@@ -7405,7 +7443,7 @@ var SpeedMenu = ({
     }
   );
   const portalContent = typeof window !== "undefined" && typeof document !== "undefined" ? createPortal(menuContent, document.body) : null;
-  return /* @__PURE__ */ jsxs30("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxs30("div", { className: "relative", ref: speedMenuContainerRef, children: [
     /* @__PURE__ */ jsx37(
       IconButton_default,
       {
@@ -7445,7 +7483,7 @@ var VideoPlayer = ({
   const [showControls, setShowControls] = useState16(true);
   const [hasCompleted, setHasCompleted] = useState16(false);
   const [showCaptions, setShowCaptions] = useState16(false);
-  useEffect14(() => {
+  useEffect15(() => {
     setHasCompleted(false);
   }, [src]);
   const [playbackRate, setPlaybackRate] = useState16(1);
@@ -7517,13 +7555,13 @@ var VideoPlayer = ({
       }, LEAVE_HIDE_TIMEOUT);
     }
   }, [isFullscreen, clearControlsTimeout, isUserInteracting]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (videoRef.current) {
       videoRef.current.volume = volume;
       videoRef.current.muted = isMuted;
     }
   }, [volume, isMuted]);
-  useEffect14(() => {
+  useEffect15(() => {
     const video = videoRef.current;
     if (!video) return;
     const onPlay = () => setIsPlaying(true);
@@ -7538,7 +7576,7 @@ var VideoPlayer = ({
       video.removeEventListener("ended", onEnded);
     };
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (isPlaying) {
       showControlsWithTimer();
     } else {
@@ -7550,7 +7588,7 @@ var VideoPlayer = ({
       }
     }
   }, [isPlaying, isFullscreen, showControlsWithTimer, clearControlsTimeout]);
-  useEffect14(() => {
+  useEffect15(() => {
     const handleFullscreenChange = () => {
       const isCurrentlyFullscreen = !!document.fullscreenElement;
       setIsFullscreen(isCurrentlyFullscreen);
@@ -7563,7 +7601,7 @@ var VideoPlayer = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [showControlsWithTimer]);
-  useEffect14(() => {
+  useEffect15(() => {
     const init = () => {
       if (!isFullscreen) {
         showControlsWithTimer();
@@ -7596,7 +7634,7 @@ var VideoPlayer = ({
     if (hasValidSaved) return saved;
     return void 0;
   }, [autoSave, storageKey, src, initialTime]);
-  useEffect14(() => {
+  useEffect15(() => {
     const start = getInitialTime();
     if (start !== void 0 && videoRef.current) {
       videoRef.current.currentTime = start;
@@ -7717,12 +7755,12 @@ var VideoPlayer = ({
       setDuration(videoRef.current.duration);
     }
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (trackRef.current?.track) {
       trackRef.current.track.mode = showCaptions && subtitles ? "showing" : "hidden";
     }
   }, [subtitles, showCaptions]);
-  useEffect14(() => {
+  useEffect15(() => {
     const handleVisibilityChange = () => {
       if (document.hidden && isPlaying && videoRef.current) {
         videoRef.current.pause();
@@ -8097,7 +8135,7 @@ var Whiteboard_default = Whiteboard;
 import {
   createContext,
   useContext,
-  useEffect as useEffect15,
+  useEffect as useEffect16,
   useState as useState18,
   useCallback as useCallback4,
   useMemo as useMemo4
@@ -8162,7 +8200,7 @@ var AuthProvider = ({
       tokens: void 0
     }));
   }, [signOutFn]);
-  useEffect15(() => {
+  useEffect16(() => {
     checkAuth();
   }, [checkAuth]);
   const contextValue = useMemo4(
@@ -8316,7 +8354,7 @@ function createZustandAuthAdapter(useAuthStore) {
 }
 
 // src/components/Auth/useUrlAuthentication.ts
-import { useEffect as useEffect16, useRef as useRef11 } from "react";
+import { useEffect as useEffect17, useRef as useRef11 } from "react";
 import { useLocation as useLocation2 } from "react-router-dom";
 var getAuthParams = (location, extractParams) => {
   const searchParams = new URLSearchParams(location.search);
@@ -8365,7 +8403,7 @@ var handleUserData = (responseData, setUser) => {
 function useUrlAuthentication(options) {
   const location = useLocation2();
   const processedRef = useRef11(false);
-  useEffect16(() => {
+  useEffect17(() => {
     const handleAuthentication = async () => {
       if (processedRef.current) {
         return;
@@ -8458,7 +8496,7 @@ import {
 } from "phosphor-react";
 import {
   forwardRef as forwardRef19,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useMemo as useMemo6,
   useId as useId11,
   useState as useState19,
@@ -9121,7 +9159,7 @@ var getStatusStyles = (variantCorrect) => {
 };
 var Quiz = forwardRef19(({ children, className, variant = "default", ...props }, ref) => {
   const { setVariant } = useQuizStore();
-  useEffect17(() => {
+  useEffect18(() => {
     setVariant(variant);
   }, [variant, setVariant]);
   return /* @__PURE__ */ jsx40("div", { ref, className: cn("flex flex-col", className), ...props, children });
@@ -9130,7 +9168,7 @@ var QuizHeaderResult = forwardRef19(
   ({ className, ...props }, ref) => {
     const { getQuestionResultByQuestionId, getCurrentQuestion } = useQuizStore();
     const [status, setStatus] = useState19(void 0);
-    useEffect17(() => {
+    useEffect18(() => {
       const cq = getCurrentQuestion();
       if (!cq) {
         setStatus(void 0);
@@ -9481,7 +9519,7 @@ var QuizDissertative = ({ paddingBottom }) => {
       textareaRef.current.style.height = `${newHeight}px`;
     }
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     adjustTextareaHeight();
   }, [currentAnswer, adjustTextareaHeight]);
   if (!currentQuestion) {
@@ -10646,7 +10684,7 @@ var loadingModal_default = LoadingModal;
 
 // src/components/NotificationCard/NotificationCard.tsx
 import { DotsThreeVertical as DotsThreeVertical3, Bell as Bell2 } from "phosphor-react";
-import { useState as useState20, useEffect as useEffect18 } from "react";
+import { useState as useState20, useEffect as useEffect19 } from "react";
 
 // src/store/notificationStore.ts
 import { create as create8 } from "zustand";
@@ -11149,7 +11187,7 @@ var NotificationCenter = ({
   const handleDesktopClick = () => {
     onToggleActive?.();
   };
-  useEffect18(() => {
+  useEffect19(() => {
     if (isActive) {
       onFetchNotifications?.();
     }