analytica-frontend-lib 1.1.57 → 1.1.59

package/dist/Card/index.js

@@ -1574,6 +1574,8 @@ var CardAudio = (0, import_react.forwardRef)(
     const [showSpeedMenu, setShowSpeedMenu] = (0, import_react.useState)(false);
     const [playbackRate, setPlaybackRate] = (0, import_react.useState)(1);
     const audioRef = (0, import_react.useRef)(null);
+    const volumeControlRef = (0, import_react.useRef)(null);
+    const speedMenuRef = (0, import_react.useRef)(null);
     const formatTime = (time) => {
       const minutes = Math.floor(time / 60);
       const seconds = Math.floor(time % 60);
@@ -1625,9 +1627,11 @@ var CardAudio = (0, import_react.forwardRef)(
     };
     const toggleVolumeControl = () => {
       setShowVolumeControl(!showVolumeControl);
+      setShowSpeedMenu(false);
     };
     const toggleSpeedMenu = () => {
       setShowSpeedMenu(!showSpeedMenu);
+      setShowVolumeControl(false);
     };
     const handleSpeedChange = (speed) => {
       setPlaybackRate(speed);
@@ -1645,6 +1649,20 @@ var CardAudio = (0, import_react.forwardRef)(
       }
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react2.SpeakerHigh, { size: 24 });
     };
+    (0, import_react.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__ */ (0, import_jsx_runtime6.jsxs)(
       CardBase,
       {
@@ -1733,7 +1751,7 @@ var CardAudio = (0, import_react.forwardRef)(
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime(duration) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative h-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative h-6", ref: volumeControlRef, children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
@@ -1795,7 +1813,7 @@ var CardAudio = (0, import_react.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative h-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative h-6", ref: speedMenuRef, children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {