@jobber/components 4.87.3 → 4.87.4-JOB-85849.0

package/dist/DataList/hooks/useMediaQuery.d.ts

@@ -1 +1,7 @@
-export declare function useMediaQuery(CSSMediaQuery: string): boolean;
+type MediaQuery = `(${string}:${string})`;
+export declare const mediaQueryStore: {
+    subscribe(onChange: () => void, query: MediaQuery): () => void;
+    getSnapshot(query: MediaQuery): () => boolean;
+};
+export declare function useMediaQuery(query: MediaQuery): boolean;
+export {};

package/dist/DataList/index.js

@@ -101,7 +101,19 @@ function useDataListContext() {
     return React.useContext(DataListContext);
 }
 
-function useMediaQuery(CSSMediaQuery) {
+const mediaQueryStore = {
+    subscribe(onChange, query) {
+        const matchMedia = window.matchMedia(query);
+        matchMedia.addEventListener("change", onChange);
+        return () => {
+            matchMedia.removeEventListener("change", onChange);
+        };
+    },
+    getSnapshot(query) {
+        return () => window.matchMedia(query).matches;
+    },
+};
+function useMediaQuery(query) {
     /**
      * matchMedia have had full support for browsers since 2012 but jest, being a
      * lite version of a DOM, doesn't support it.
@@ -115,16 +127,8 @@ function useMediaQuery(CSSMediaQuery) {
      */
     if (window.matchMedia === undefined)
         return true;
-    const [matches, setMatches] = React.useState(window.matchMedia(CSSMediaQuery).matches);
-    React.useEffect(() => {
-        const media = window.matchMedia(CSSMediaQuery);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
-        }
-        const listener = () => setMatches(media.matches);
-        media.addEventListener("change", listener);
-        return () => media.removeEventListener("change", listener);
-    }, [CSSMediaQuery]);
+    const subscribeMediaQuery = React.useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
+    const matches = React.useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => true);
     return matches;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.87.3",
+  "version": "4.87.4-JOB-85849.0+e7d68a26",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,8 +20,8 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.56.0",
-    "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.9.3",
+    "@jobber/formatters": "^0.2.2",
+    "@jobber/hooks": "^2.9.4-JOB-85849.0+e7d68a26",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -80,5 +80,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e3f8dba243561bc1da65067d3e97414f28f40c5a"
+  "gitHead": "e7d68a26ce27f2bcf7c9b95fd4b7baafcb3f8779"
 }