From 0500406caabb444cb46a289daf7b3e6f7910fe1c Mon Sep 17 00:00:00 2001
From: Thomas Van Dort <tom@ethyca.com>
Date: Wed, 23 Oct 2024 12:49:18 -0400
Subject: [PATCH] Handle Safari < 14.

https://stackoverflow.com/questions/62693995/addeventlistener-is-not-a-function-for-matchmedia-in-safari-browser/75517985#75517985
---
 clients/fides-js/src/lib/hooks/useMediaQuery.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/clients/fides-js/src/lib/hooks/useMediaQuery.ts b/clients/fides-js/src/lib/hooks/useMediaQuery.ts
index 87e00d6dda..58ce6ae951 100644
--- a/clients/fides-js/src/lib/hooks/useMediaQuery.ts
+++ b/clients/fides-js/src/lib/hooks/useMediaQuery.ts
@@ -14,9 +14,20 @@ export const useMediaQuery = (query: string) => {
     function handleChange(e: MediaQueryListEvent) {
       setMatches(e.matches);
     }
-    matchQueryList.addEventListener("change", handleChange);
+
+    if (matchQueryList.addEventListener) {
+      matchQueryList.addEventListener("change", handleChange);
+    } else {
+      // Supports Safari < 14
+      matchQueryList.addListener(handleChange);
+    }
     return () => {
-      matchQueryList.removeEventListener("change", handleChange);
+      if (matchQueryList.removeEventListener) {
+        matchQueryList.removeEventListener("change", handleChange);
+      } else {
+        // Supports Safari < 14
+        matchQueryList.removeListener(handleChange);
+      }
     };
   }, [query]);
   return matches;