@jobber/hooks 2.4.1-create-res.21 → 2.4.1-visual-upd.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +1 -0
  2. package/dist/index.js +1 -0
  3. package/dist/useBreakpoints/useBreakpoints.d.ts +1 -1
  4. package/dist/useBreakpoints/useBreakpoints.js +2 -2
  5. package/dist/useBreakpoints/useBreakpoints.test.js +6 -19
  6. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from "./useAssert";
2
+ export * from "./useBreakpoints";
2
3
  export * from "./useCollectionQuery";
3
4
  export * from "./useFocusTrap";
4
5
  export * from "./useFormState";
package/dist/index.js CHANGED
@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./useAssert"), exports);
18
+ __exportStar(require("./useBreakpoints"), exports);
18
19
  __exportStar(require("./useCollectionQuery"), exports);
19
20
  __exportStar(require("./useFocusTrap"), exports);
20
21
  __exportStar(require("./useFormState"), exports);
package/dist/useBreakpoints/useBreakpoints.d.ts CHANGED
@@ -9,11 +9,11 @@ export declare const BREAKPOINT_SIZES: {
9
9
  * [supported breakpoints](https://atlantis.getjobber.com/?path=/docs/design-breakpoints--page).
10
10
  */
11
11
  export declare function useBreakpoints(): {
12
- smallAndBelow: boolean;
13
12
  smallAndUp: boolean;
14
13
  mediumAndUp: boolean;
15
14
  largeAndUp: boolean;
16
15
  extraLargeAndUp: boolean;
16
+ extraSmallOnly: boolean;
17
17
  smallOnly: boolean;
18
18
  mediumOnly: boolean;
19
19
  largeOnly: boolean;
package/dist/useBreakpoints/useBreakpoints.js CHANGED
@@ -8,17 +8,17 @@ exports.BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
8
8
  * [supported breakpoints](https://atlantis.getjobber.com/?path=/docs/design-breakpoints--page).
9
9
  */
10
10
  function useBreakpoints() {
11
- const smallAndBelow = (0, useMediaQuery_1.useMediaQuery)(`(width < ${exports.BREAKPOINT_SIZES.sm}px)`);
11
+ const extraSmallOnly = (0, useMediaQuery_1.useMediaQuery)(`(width < ${exports.BREAKPOINT_SIZES.sm}px)`);
12
12
  const smallAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.sm}px)`);
13
13
  const mediumAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.md}px)`);
14
14
  const largeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.lg}px)`);
15
15
  const extraLargeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(width >= ${exports.BREAKPOINT_SIZES.xl}px)`);
16
16
  return {
17
- smallAndBelow,
18
17
  smallAndUp,
19
18
  mediumAndUp,
20
19
  largeAndUp,
21
20
  extraLargeAndUp,
21
+ extraSmallOnly,
22
22
  smallOnly: smallAndUp && !mediumAndUp,
23
23
  mediumOnly: mediumAndUp && !largeAndUp,
24
24
  largeOnly: largeAndUp && !extraLargeAndUp,
package/dist/useBreakpoints/useBreakpoints.test.js CHANGED
@@ -48,37 +48,22 @@ describe("useBreakpoints", () => {
48
48
  });
49
49
  });
50
50
  });
51
- describe("and below", () => {
52
- it("should only set the smallAndBelow to true", () => {
51
+ describe("only", () => {
52
+ it("should only set the extraSmallOnly to true on smaller than sm", () => {
53
53
  setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.sm - 1);
54
54
  const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
55
55
  expect(result.current).toMatchObject({
56
- smallAndBelow: true,
57
- smallAndUp: false,
58
- mediumAndUp: false,
59
- largeAndUp: false,
60
- extraLargeAndUp: false,
56
+ extraSmallOnly: true,
61
57
  smallOnly: false,
62
58
  mediumOnly: false,
63
59
  largeOnly: false,
64
60
  });
65
61
  });
66
- it.each([
67
- [useBreakpoints_1.BREAKPOINT_SIZES.sm],
68
- [useBreakpoints_1.BREAKPOINT_SIZES.md],
69
- [useBreakpoints_1.BREAKPOINT_SIZES.lg],
70
- [useBreakpoints_1.BREAKPOINT_SIZES.xl],
71
- ])("should only set the smallAndBelow to false on %s", width => {
72
- setViewportWidth(width);
73
- const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
74
- expect(result.current).toMatchObject({ smallAndBelow: false });
75
- });
76
- });
77
- describe("only", () => {
78
62
  it("should only set the smallOnly to true on sm", () => {
79
63
  setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.sm);
80
64
  const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
81
65
  expect(result.current).toMatchObject({
66
+ extraSmallOnly: false,
82
67
  smallOnly: true,
83
68
  mediumOnly: false,
84
69
  largeOnly: false,
@@ -88,6 +73,7 @@ describe("useBreakpoints", () => {
88
73
  setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.md);
89
74
  const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
90
75
  expect(result.current).toMatchObject({
76
+ extraSmallOnly: false,
91
77
  smallOnly: false,
92
78
  mediumOnly: true,
93
79
  largeOnly: false,
@@ -97,6 +83,7 @@ describe("useBreakpoints", () => {
97
83
  setViewportWidth(useBreakpoints_1.BREAKPOINT_SIZES.lg);
98
84
  const { result } = (0, react_1.renderHook)(useBreakpoints_1.useBreakpoints);
99
85
  expect(result.current).toMatchObject({
86
+ extraSmallOnly: false,
100
87
  smallOnly: false,
101
88
  mediumOnly: false,
102
89
  largeOnly: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/hooks",
3
- "version": "2.4.1-create-res.21+08fb4d8e",
3
+ "version": "2.4.1-visual-upd.8+26f6c47a",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.js",
@@ -45,5 +45,5 @@
45
45
  "@apollo/client": "^3.0.0",
46
46
  "react": "^18"
47
47
  },
48
- "gitHead": "08fb4d8e6a354b8a71b25e3fd716cbacad3db096"
48
+ "gitHead": "26f6c47ae6432c7277fed101b4c5f66ad13ed089"
49
49
  }