analytica-frontend-lib 1.1.57 → 1.1.59

package/dist/Card/index.mjs

@@ -3,7 +3,8 @@ import {
   forwardRef,
   Fragment as Fragment2,
   useState,
-  useRef
+  useRef,
+  useEffect
 } from "react";
 
 // src/utils/utils.ts
@@ -1542,6 +1543,8 @@ var CardAudio = forwardRef(
     const [showSpeedMenu, setShowSpeedMenu] = useState(false);
     const [playbackRate, setPlaybackRate] = useState(1);
     const audioRef = useRef(null);
+    const volumeControlRef = useRef(null);
+    const speedMenuRef = useRef(null);
     const formatTime = (time) => {
       const minutes = Math.floor(time / 60);
       const seconds = Math.floor(time % 60);
@@ -1593,9 +1596,11 @@ var CardAudio = forwardRef(
     };
     const toggleVolumeControl = () => {
       setShowVolumeControl(!showVolumeControl);
+      setShowSpeedMenu(false);
     };
     const toggleSpeedMenu = () => {
       setShowSpeedMenu(!showSpeedMenu);
+      setShowVolumeControl(false);
     };
     const handleSpeedChange = (speed) => {
       setPlaybackRate(speed);
@@ -1613,6 +1618,20 @@ var CardAudio = forwardRef(
       }
       return /* @__PURE__ */ jsx6(SpeakerHigh, { size: 24 });
     };
+    useEffect(() => {
+      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__ */ jsxs5(
       CardBase,
       {
@@ -1701,7 +1720,7 @@ var CardAudio = forwardRef(
             }
           ) }),
           /* @__PURE__ */ jsx6("p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime(duration) }),
-          /* @__PURE__ */ jsxs5("div", { className: "relative h-6", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "relative h-6", ref: volumeControlRef, children: [
             /* @__PURE__ */ jsx6(
               "button",
               {
@@ -1763,7 +1782,7 @@ var CardAudio = forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "relative h-6", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "relative h-6", ref: speedMenuRef, children: [
             /* @__PURE__ */ jsx6(
               "button",
               {