@jobber/hooks 2.7.1 → 2.7.2

package/dist/useBreakpoints/mockViewportWidth/mockViewportWidth.js

@@ -48,23 +48,17 @@ function cleanup() {
     window.innerWidth = defaultInnerWidth;
 }
 function isQueryMatching(query) {
-    const match = query.match(/(\w+)\s*(<|<=|>|>=|=)\s*(\d+)/);
+    const match = query.match(/(min-width|max-width):\s*(\d+)/);
     if (!match)
         return false;
     const { innerWidth } = window;
-    const [, , operator, value] = match;
+    const [, operator, value] = match;
     const breakpoint = parseInt(value, 10);
     switch (operator) {
-        case "<":
-            return innerWidth < breakpoint;
-        case "<=":
+        case "max-width":
             return innerWidth <= breakpoint;
-        case ">":
-            return innerWidth > breakpoint;
-        case ">=":
+        case "min-width":
             return innerWidth >= breakpoint;
-        case "=":
-            return innerWidth === breakpoint;
     }
 }
 exports.isQueryMatching = isQueryMatching;

package/dist/useBreakpoints/mockViewportWidth/mockViewportWidth.test.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const mockViewportWidth_1 = require("./mockViewportWidth");
 describe("isQueryMatching", () => {
-    it.each([["<"], [">"]])("should return false on %s", operator => {
-        const result = (0, mockViewportWidth_1.isQueryMatching)(`width ${operator} ${window.innerWidth}`);
+    it("should return false on max-width", () => {
+        const result = (0, mockViewportWidth_1.isQueryMatching)(`max-width: ${window.innerWidth - 1}`);
         expect(result).toBe(false);
     });
-    it.each([["<="], [">="], ["="]])("should return true on %s", operator => {
-        const result = (0, mockViewportWidth_1.isQueryMatching)(`width ${operator} ${window.innerWidth}`);
+    it("should return true on min-width", () => {
+        const result = (0, mockViewportWidth_1.isQueryMatching)(`min-width: ${window.innerWidth}`);
         expect(result).toBe(true);
     });
     it("should return false when the width is not a number", () => {

package/dist/useBreakpoints/useBreakpoints.js

@@ -8,11 +8,12 @@ exports.BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
  * [supported breakpoints](https://atlantis.getjobber.com/?path=/docs/design-breakpoints--page).
  */
 function useBreakpoints() {
-    const extraSmallOnly = (0, useMediaQuery_1.useMediaQuery)(`(width < ${exports.BREAKPOINT_SIZES.sm}px)`);
-    const smallAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.sm}px)`);
-    const mediumAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.md}px)`);
-    const largeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.lg}px)`);
-    const extraLargeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.xl}px)`);
+    const { sm, md, lg, xl } = exports.BREAKPOINT_SIZES;
+    const extraSmallOnly = (0, useMediaQuery_1.useMediaQuery)(`(max-width: ${sm - 1}px)`);
+    const smallAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${sm}px)`);
+    const mediumAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${md}px)`);
+    const largeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${lg}px)`);
+    const extraLargeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${xl}px)`);
     return {
         smallAndUp,
         mediumAndUp,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -44,5 +44,5 @@
     "@apollo/client": "^3.0.0",
     "react": "^18"
   },
-  "gitHead": "b514c578d69d01182bb0b88080d1b39ea4f94235"
+  "gitHead": "e925163219d4d3c15d78318cfff03f6240c19ef3"
 }