From de9b27b1c95b18a20b799d36e47fa99f65e40800 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sun, 26 May 2024 19:33:53 +0900
Subject: [PATCH] fix: use window.getComputedStyle if element.computedStyleMap
 is not defined

---
 packages/react/components/Toast.tsx | 30 +++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/react/components/Toast.tsx b/packages/react/components/Toast.tsx
index 5344acc..c4e01f0 100644
--- a/packages/react/components/Toast.tsx
+++ b/packages/react/components/Toast.tsx
@@ -188,12 +188,34 @@ const ToastTemplate = ({
       return () => clearTimeout(timeout);
     }
     if (toastData.life === "dead") {
-      const transitionDuration = ref.current
-        ?.computedStyleMap()
-        ?.get("transition-duration") as {
+      let transitionDuration: {
         value: number;
         unit: string;
-      };
+      } | null;
+      if (!ref.current) {
+        transitionDuration = null;
+        console.log("not found current");
+      } else if (ref.current.computedStyleMap !== undefined) {
+        transitionDuration = ref.current
+          .computedStyleMap()
+          .get("transition-duration") as { value: number; unit: string };
+        console.log(
+          `calculated transition duration via computedStyleMap ${transitionDuration}`
+        );
+      } else {
+        const style = /(\d+(\.\d+)?)(.+)/.exec(
+          window.getComputedStyle(ref.current).transitionDuration
+        );
+        transitionDuration = style
+          ? {
+              value: parseFloat(style[1] ?? "0"),
+              unit: style[3] ?? style[2] ?? "s",
+            }
+          : null;
+        console.log(
+          `calculated transition duration via getComputedStyle ${JSON.stringify(transitionDuration)}`
+        );
+      }
       if (!transitionDuration) {
         delete toasts[id];
         notify();