@jobber/hooks 2.9.3 → 2.9.4

package/dist/useBreakpoints/useMediaQuery.d.ts

@@ -1,4 +1,7 @@
-/**
- * Sets the JS media query listener. Internal use only.
- */
-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/useBreakpoints/useMediaQuery.js

@@ -1,21 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaQuery = void 0;
+exports.useMediaQuery = exports.mediaQueryStore = void 0;
 const react_1 = require("react");
-/**
- * Sets the JS media query listener. Internal use only.
- */
-function useMediaQuery(CSSMediaQuery) {
-    const [matches, setMatches] = (0, react_1.useState)(window.matchMedia(CSSMediaQuery).matches);
-    (0, react_1.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]);
+exports.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) {
+    const subscribeMediaQuery = (0, react_1.useCallback)((onChange) => exports.mediaQueryStore.subscribe(onChange, query), [query]);
+    const matches = (0, react_1.useSyncExternalStore)(subscribeMediaQuery, exports.mediaQueryStore.getSnapshot(query), () => true);
     return matches;
 }
 exports.useMediaQuery = useMediaQuery;

package/dist/useSafeLayoutEffect/useSafeLayoutEffect.d.ts

@@ -1,2 +1,2 @@
-import { useEffect } from "react";
-export declare const useSafeLayoutEffect: typeof useEffect;
+import { useLayoutEffect } from "react";
+export declare const useSafeLayoutEffect: typeof useLayoutEffect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "2.9.3",
+  "version": "2.9.4",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -44,5 +44,5 @@
     "@apollo/client": "^3.0.0",
     "react": "^18"
   },
-  "gitHead": "e3f8dba243561bc1da65067d3e97414f28f40c5a"
+  "gitHead": "8fdec22fde38409e3574e6ba31d6a4c0c5195705"
 }