@jobber/hooks 2.8.2 → 2.8.3-JOB-84042.6

package/dist/index.d.ts

@@ -11,4 +11,5 @@ export * from "./useOnKeyDown";
 export * from "./usePasswordStrength";
 export * from "./useRefocusOnActivator";
 export * from "./useResizeObserver";
+export * from "./useSafeLayoutEffect";
 export * from "./useShowClear";

package/dist/index.js

@@ -27,4 +27,5 @@ __exportStar(require("./useOnKeyDown"), exports);
 __exportStar(require("./usePasswordStrength"), exports);
 __exportStar(require("./useRefocusOnActivator"), exports);
 __exportStar(require("./useResizeObserver"), exports);
+__exportStar(require("./useSafeLayoutEffect"), exports);
 __exportStar(require("./useShowClear"), exports);

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/useIsMounted/useIsMounted.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsMounted = void 0;
 const react_1 = require("react");
+const useSafeLayoutEffect_1 = require("../useSafeLayoutEffect");
 /**
  * Why does this work?
  *
@@ -20,7 +21,7 @@ const react_1 = require("react");
  */
 function useIsMounted() {
     const isMounted = (0, react_1.useRef)(false);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, useSafeLayoutEffect_1.useSafeLayoutEffect)(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;

package/dist/useSafeLayoutEffect/index.d.ts

@@ -0,0 +1 @@
+export { useSafeLayoutEffect } from "./useSafeLayoutEffect";

package/dist/useSafeLayoutEffect/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSafeLayoutEffect = void 0;
+var useSafeLayoutEffect_1 = require("./useSafeLayoutEffect");
+Object.defineProperty(exports, "useSafeLayoutEffect", { enumerable: true, get: function () { return useSafeLayoutEffect_1.useSafeLayoutEffect; } });

package/dist/useSafeLayoutEffect/useSafeLayoutEffect.d.ts

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

package/dist/useSafeLayoutEffect/useSafeLayoutEffect.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSafeLayoutEffect = void 0;
+const react_1 = require("react");
+exports.useSafeLayoutEffect = (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
+    ? react_1.useLayoutEffect
+    : react_1.useEffect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "2.8.2",
+  "version": "2.8.3-JOB-84042.6+d9c1a107",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -20,7 +20,7 @@
   ],
   "devDependencies": {
     "@apollo/react-testing": "^4.0.0",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.0",
     "@testing-library/user-event": "^14.5.1",
@@ -44,5 +44,5 @@
     "@apollo/client": "^3.0.0",
     "react": "^18"
   },
-  "gitHead": "3caaa43e03388b7d034d0606dc803218394929c2"
+  "gitHead": "d9c1a10708348c469d7dfef002814fc603e8dc9c"
 }

package/useSafeLayoutEffect.d.ts

@@ -0,0 +1 @@
+export * from "./dist/useSafeLayoutEffect";

package/useSafeLayoutEffect.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var useSafeLayoutEffect = require("./dist/useSafeLayoutEffect");
+
+Object.keys(useSafeLayoutEffect).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return useSafeLayoutEffect[key];
+    },
+  });
+});