@jobber/hooks 2.17.4 → 2.18.0

package/dist/useBreakpoints-cjs.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var require$$1 = require('react');
+
+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) {
+    const subscribeMediaQuery = require$$1.useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
+    const matches = require$$1.useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => true);
+    return matches;
+}
+
+const BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
+/**
+ * Hook equivalent of CSS media queries with our
+ * [supported breakpoints](https://atlantis.getjobber.com/design/breakpoints).
+ */
+function useBreakpoints() {
+    const { sm, md, lg, xl } = BREAKPOINT_SIZES;
+    const extraSmallOnly = useMediaQuery(`(max-width: ${sm - 1}px)`);
+    const smallAndUp = useMediaQuery(`(min-width: ${sm}px)`);
+    const mediumAndUp = useMediaQuery(`(min-width: ${md}px)`);
+    const largeAndUp = useMediaQuery(`(min-width: ${lg}px)`);
+    const extraLargeAndUp = useMediaQuery(`(min-width: ${xl}px)`);
+    return {
+        smallAndUp,
+        mediumAndUp,
+        largeAndUp,
+        extraLargeAndUp,
+        extraSmallOnly,
+        smallOnly: smallAndUp && !mediumAndUp,
+        mediumOnly: mediumAndUp && !largeAndUp,
+        largeOnly: largeAndUp && !extraLargeAndUp,
+    };
+}
+
+exports.BREAKPOINT_SIZES = BREAKPOINT_SIZES;
+exports.useBreakpoints = useBreakpoints;

package/dist/useBreakpoints-es.js

@@ -0,0 +1,45 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+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) {
+    const subscribeMediaQuery = useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
+    const matches = useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => true);
+    return matches;
+}
+
+const BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
+/**
+ * Hook equivalent of CSS media queries with our
+ * [supported breakpoints](https://atlantis.getjobber.com/design/breakpoints).
+ */
+function useBreakpoints() {
+    const { sm, md, lg, xl } = BREAKPOINT_SIZES;
+    const extraSmallOnly = useMediaQuery(`(max-width: ${sm - 1}px)`);
+    const smallAndUp = useMediaQuery(`(min-width: ${sm}px)`);
+    const mediumAndUp = useMediaQuery(`(min-width: ${md}px)`);
+    const largeAndUp = useMediaQuery(`(min-width: ${lg}px)`);
+    const extraLargeAndUp = useMediaQuery(`(min-width: ${xl}px)`);
+    return {
+        smallAndUp,
+        mediumAndUp,
+        largeAndUp,
+        extraLargeAndUp,
+        extraSmallOnly,
+        smallOnly: smallAndUp && !mediumAndUp,
+        mediumOnly: mediumAndUp && !largeAndUp,
+        largeOnly: largeAndUp && !extraLargeAndUp,
+    };
+}
+
+export { BREAKPOINT_SIZES as B, useBreakpoints as u };

package/dist/useCallbackRef/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var useCallbackRef = require('../useCallbackRef-cjs.js');
+require('react');
+
+
+
+exports.useCallbackRef = useCallbackRef.useCallbackRef;

package/dist/useCallbackRef/index.mjs

@@ -0,0 +1,2 @@
+export { u as useCallbackRef } from '../useCallbackRef-es.js';
+import 'react';

package/dist/useCallbackRef-cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var require$$1 = require('react');
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef(callback) {
+    const callbackRef = require$$1.useRef(callback);
+    require$$1.useEffect(() => {
+        callbackRef.current = callback;
+    });
+    return require$$1.useMemo(() => ((...args) => { var _a; return (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, ...args); }), []);
+}
+
+exports.useCallbackRef = useCallbackRef;

package/dist/useCallbackRef-es.js

@@ -0,0 +1,15 @@
+import { useRef, useEffect, useMemo } from 'react';
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef(callback) {
+    const callbackRef = useRef(callback);
+    useEffect(() => {
+        callbackRef.current = callback;
+    });
+    return useMemo(() => ((...args) => { var _a; return (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, ...args); }), []);
+}
+
+export { useCallbackRef as u };

package/dist/useCollectionQuery/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var useCollectionQuery = require('../useCollectionQuery-cjs.js');
+require('@apollo/client');
+require('../isObjectLike-cjs.js');
+require('react');
+require('@jobber/formatters');
+require('../useIsMounted-cjs.js');
+require('../useSafeLayoutEffect-cjs.js');
+
+
+
+exports.useCollectionQuery = useCollectionQuery.useCollectionQuery;

package/dist/useCollectionQuery/index.mjs

@@ -0,0 +1,7 @@
+export { u as useCollectionQuery } from '../useCollectionQuery-es.js';
+import '@apollo/client';
+import '../isObjectLike-es.js';
+import 'react';
+import '@jobber/formatters';
+import '../useIsMounted-es.js';
+import '../useSafeLayoutEffect-es.js';

package/dist/useCollectionQuery/useCollectionQuery.d.ts

@@ -1,4 +1,4 @@
-import { ApolloError, DocumentNode, QueryHookOptions, SubscribeToMoreOptions } from "@apollo/client";
+import type { ApolloError, DocumentNode, QueryHookOptions, SubscribeToMoreOptions } from "@apollo/client";
 import { Node } from "./uniqueNodes";
 import { Edge } from "./uniqueEdges";
 interface UseCollectionQueryArguments<TQuery, TSubscription> {