@jobber/components 4.90.4 → 4.90.5

package/dist/useResponsiveSizing-DB6K2Viw.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var DataList_const = require('./DataList.const-Bqcfo3vs.js');
+
+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.
+     *
+     * Instead of the consumers mocking matchMedia on every usage of DataList,
+     * we can just return true to mimic the largest screen we support.
+     *
+     * In the event that the consumer wants to test the DataList on different
+     * screen sizes, they can use the `mockViewportWidth` function from
+     * `@jobber/components/useBreakpoints`.
+     */
+    if (typeof window === "undefined" ||
+        typeof window.matchMedia === "undefined") {
+        return true;
+    }
+    const subscribeMediaQuery = React.useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
+    const matches = React.useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => true);
+    return matches;
+}
+
+function useResponsiveSizing() {
+    // This was originally written to look for "min-width: 0" which would always
+    // return true no matter what.
+    // So, instead of running media query on it, just set it to true.
+    const xs = true;
+    const sm = useMediaQuery(`(min-width: ${DataList_const.BREAKPOINT_SIZES.sm}px)`);
+    const md = useMediaQuery(`(min-width: ${DataList_const.BREAKPOINT_SIZES.md}px)`);
+    const lg = useMediaQuery(`(min-width: ${DataList_const.BREAKPOINT_SIZES.lg}px)`);
+    const xl = useMediaQuery(`(min-width: ${DataList_const.BREAKPOINT_SIZES.xl}px)`);
+    return { xs, sm, md, lg, xl };
+}
+
+exports.useResponsiveSizing = useResponsiveSizing;

package/dist/useResponsiveSizing-DVb-nBuX.js

@@ -0,0 +1,49 @@
+import { useCallback, useSyncExternalStore } from 'react';
+import { e as BREAKPOINT_SIZES } from './DataList.const-z084v3KH.js';
+
+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.
+     *
+     * Instead of the consumers mocking matchMedia on every usage of DataList,
+     * we can just return true to mimic the largest screen we support.
+     *
+     * In the event that the consumer wants to test the DataList on different
+     * screen sizes, they can use the `mockViewportWidth` function from
+     * `@jobber/components/useBreakpoints`.
+     */
+    if (typeof window === "undefined" ||
+        typeof window.matchMedia === "undefined") {
+        return true;
+    }
+    const subscribeMediaQuery = useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
+    const matches = useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => true);
+    return matches;
+}
+
+function useResponsiveSizing() {
+    // This was originally written to look for "min-width: 0" which would always
+    // return true no matter what.
+    // So, instead of running media query on it, just set it to true.
+    const xs = true;
+    const sm = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.sm}px)`);
+    const md = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.md}px)`);
+    const lg = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.lg}px)`);
+    const xl = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.xl}px)`);
+    return { xs, sm, md, lg, xl };
+}
+
+export { useResponsiveSizing as u };

package/dist/useSafeLayoutEffect-BW_VIS6-.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+var useSafeLayoutEffect = {};
+
+Object.defineProperty(useSafeLayoutEffect, "__esModule", { value: true });
+var useSafeLayoutEffect_1 = useSafeLayoutEffect.useSafeLayoutEffect = void 0;
+const react_1 = React;
+useSafeLayoutEffect_1 = useSafeLayoutEffect.useSafeLayoutEffect = (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
+    ? react_1.useLayoutEffect
+    : react_1.useEffect;
+
+export { useSafeLayoutEffect as a, useSafeLayoutEffect_1 as u };

package/dist/useSafeLayoutEffect-juh5vdFE.js

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