@jobber/components 4.87.4-JOB-85849.1 → 4.87.4-STfixing-.1

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

@@ -1,7 +1 @@
-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 {};
+export declare function useMediaQuery(CSSMediaQuery: string): boolean;

package/dist/DataList/index.js

@@ -101,19 +101,7 @@ function useDataListContext() {
     return React.useContext(DataListContext);
 }
 
-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) {
+function useMediaQuery(CSSMediaQuery) {
     /**
      * matchMedia have had full support for browsers since 2012 but jest, being a
      * lite version of a DOM, doesn't support it.
@@ -125,12 +113,18 @@ function useMediaQuery(query) {
      * screen sizes, they can use the `mockViewportWidth` function from
      * `@jobber/components/useBreakpoints`.
      */
-    if (typeof window === "undefined" ||
-        typeof window.matchMedia === "undefined") {
+    if (window.matchMedia === undefined)
         return true;
-    }
-    const subscribeMediaQuery = React.useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
-    const matches = React.useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => 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]);
     return matches;
 }
 

package/dist/InputDate/index.js

@@ -31,7 +31,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function InputDate(inputProps) {
     const formFieldActionsRef = React.useRef(null);
     return (React__default["default"].createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
-            var _a;
             const { onChange, onClick, value } = activatorProps;
             const newActivatorProps = omit__default["default"](activatorProps, ["activator"]);
             const suffix = Object.assign({ icon: "calendar" }, (onClick && {
@@ -40,7 +39,10 @@ function InputDate(inputProps) {
             }));
             // Set form field to formatted date string immediately, to avoid validations
             //  triggering incorrectly when it blurs (to handle the datepicker UI click)
-            value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
+            React.useEffect(() => {
+                var _a;
+                value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
+            }, [value]);
             return (
             // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
             React__default["default"].createElement("div", { onClick: onClick },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.87.4-JOB-85849.1+5b9df418",
+  "version": "4.87.4-STfixing-.1+9f4777b2",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -80,5 +80,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "5b9df4189f38217e307a7b86a6a65a2871558c43"
+  "gitHead": "9f4777b2ce8f07176eed60e9d4848b60b970af51"
 }