@jobber/hooks 2.7.2 → 2.7.3-fix-hide-h.40

package/README.mdx

@@ -14,6 +14,7 @@ Shared hooks for components in Atlantis.
 - [usePasswordStrength](../?path=/docs/hooks-usepasswordstrength--use-password-strength)
 - [useRefocusOnActivator](../?path=/docs/hooks-userefocusonactivator--use-refocus-on-activator)
 - [useResizeObserver](../?path=/docs/packages-hooks--page)
+- [useWindowDimensions](../?path=/docs/hooks-usewindowdimensions--page)
 
 ## Installing
 

package/dist/index.d.ts

@@ -11,3 +11,6 @@ export * from "./useOnKeyDown";
 export * from "./usePasswordStrength";
 export * from "./useRefocusOnActivator";
 export * from "./useResizeObserver";
+export * from "./useSafeLayoutEffect";
+export * from "./useShowClear";
+export * from "./useWindowDimensions";

package/dist/index.js

@@ -27,3 +27,6 @@ __exportStar(require("./useOnKeyDown"), exports);
 __exportStar(require("./usePasswordStrength"), exports);
 __exportStar(require("./useRefocusOnActivator"), exports);
 __exportStar(require("./useResizeObserver"), exports);
+__exportStar(require("./useSafeLayoutEffect"), exports);
+__exportStar(require("./useShowClear"), exports);
+__exportStar(require("./useWindowDimensions"), exports);

package/dist/useAssert/useAssert.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAssert = void 0;
 const process_1 = __importDefault(require("process"));
 function useAssert(shouldShow, message, options) {
-    if (process_1.default.env.NODE_ENV !== "production" && shouldShow) {
+    var _a;
+    if (((_a = process_1.default === null || process_1.default === void 0 ? void 0 : process_1.default.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) !== "production" && shouldShow) {
         if (options === null || options === void 0 ? void 0 : options.warn) {
             console.warn(message);
         }

package/dist/useBreakpoints/mockViewportWidth/mockViewportWidth.js

@@ -17,6 +17,8 @@ function setViewportWidth(newWidth) {
                 matches: matches,
                 media: query,
                 onchange: null,
+                addListener: jest.fn(),
+                removeListener: jest.fn(),
                 addEventListener: jest.fn(),
                 removeEventListener: jest.fn(),
                 dispatchEvent: jest.fn(),

package/dist/useBreakpoints/useMediaQuery.d.ts

@@ -1,4 +1,7 @@
-/**
- * Sets the JS media query listener. Internal use only.
- */
-export declare function useMediaQuery(CSSMediaQuery: string): boolean;
+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 {};

package/dist/useBreakpoints/useMediaQuery.js

@@ -1,21 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaQuery = void 0;
+exports.useMediaQuery = exports.mediaQueryStore = void 0;
 const react_1 = require("react");
-/**
- * Sets the JS media query listener. Internal use only.
- */
-function useMediaQuery(CSSMediaQuery) {
-    const [matches, setMatches] = (0, react_1.useState)(window.matchMedia(CSSMediaQuery).matches);
-    (0, react_1.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]);
+exports.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 = (0, react_1.useCallback)((onChange) => exports.mediaQueryStore.subscribe(onChange, query), [query]);
+    const matches = (0, react_1.useSyncExternalStore)(subscribeMediaQuery, exports.mediaQueryStore.getSnapshot(query), () => true);
     return matches;
 }
 exports.useMediaQuery = useMediaQuery;

package/dist/useIsMounted/useIsMounted.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsMounted = void 0;
 const react_1 = require("react");
+const useSafeLayoutEffect_1 = require("../useSafeLayoutEffect");
 /**
  * Why does this work?
  *
@@ -20,7 +21,7 @@ const react_1 = require("react");
  */
 function useIsMounted() {
     const isMounted = (0, react_1.useRef)(false);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, useSafeLayoutEffect_1.useSafeLayoutEffect)(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;

package/dist/useSafeLayoutEffect/index.d.ts

@@ -0,0 +1 @@
+export { useSafeLayoutEffect } from "./useSafeLayoutEffect";

package/dist/useSafeLayoutEffect/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSafeLayoutEffect = void 0;
+var useSafeLayoutEffect_1 = require("./useSafeLayoutEffect");
+Object.defineProperty(exports, "useSafeLayoutEffect", { enumerable: true, get: function () { return useSafeLayoutEffect_1.useSafeLayoutEffect; } });

package/dist/useSafeLayoutEffect/useSafeLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useLayoutEffect } from "react";
+export declare const useSafeLayoutEffect: typeof useLayoutEffect;

package/dist/useSafeLayoutEffect/useSafeLayoutEffect.js

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

package/dist/useShowClear/index.d.ts

@@ -0,0 +1 @@
+export { useShowClear, Clearable } from "./useShowClear";

package/dist/useShowClear/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useShowClear = void 0;
+var useShowClear_1 = require("./useShowClear");
+Object.defineProperty(exports, "useShowClear", { enumerable: true, get: function () { return useShowClear_1.useShowClear; } });

package/dist/useShowClear/useShowClear.d.ts

@@ -0,0 +1,10 @@
+export type Clearable = "never" | "while-editing" | "always";
+interface UseShowClearParameters {
+    clearable: Clearable;
+    multiline: boolean;
+    focused: boolean;
+    hasValue: boolean;
+    disabled?: boolean;
+}
+export declare function useShowClear({ clearable, multiline, focused, hasValue, disabled, }: UseShowClearParameters): boolean | undefined;
+export {};

package/dist/useShowClear/useShowClear.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useShowClear = void 0;
+function useShowClear({ clearable, multiline, focused, hasValue, disabled = false, }) {
+    if (multiline && clearable !== "never") {
+        throw new Error("Multiline inputs can not be clearable");
+    }
+    // Do not show if there is no value
+    if (!hasValue || clearable === "never" || disabled) {
+        return false;
+    }
+    switch (clearable) {
+        case "while-editing":
+            return focused;
+        case "always":
+            return true;
+    }
+}
+exports.useShowClear = useShowClear;

package/dist/useShowClear/useShowClear.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/useShowClear/useShowClear.test.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const useShowClear_1 = require("./useShowClear");
+describe("useShowClear", () => {
+    describe.each([
+        {
+            clearable: "always",
+            hasValue: true,
+            focused: false,
+            multiline: false,
+            disabled: false,
+            expected: true,
+        },
+        {
+            clearable: "always",
+            hasValue: true,
+            focused: true,
+            multiline: false,
+            disabled: false,
+            expected: true,
+        },
+        {
+            clearable: "always",
+            hasValue: true,
+            focused: false,
+            multiline: false,
+            disabled: true,
+            expected: false,
+        },
+        {
+            clearable: "always",
+            hasValue: false,
+            focused: false,
+            multiline: false,
+            disabled: true,
+            expected: false,
+        },
+        {
+            clearable: "while-editing",
+            hasValue: true,
+            focused: false,
+            multiline: false,
+            disabled: false,
+            expected: false,
+        },
+        {
+            clearable: "while-editing",
+            hasValue: true,
+            focused: true,
+            multiline: false,
+            disabled: false,
+            expected: true,
+        },
+        {
+            clearable: "while-editing",
+            hasValue: false,
+            focused: false,
+            multiline: false,
+            disabled: true,
+            expected: false,
+        },
+        {
+            clearable: "while-editing",
+            hasValue: true,
+            focused: false,
+            multiline: false,
+            disabled: true,
+            expected: false,
+        },
+        {
+            clearable: "never",
+            hasValue: true,
+            focused: false,
+            multiline: false,
+            disabled: false,
+            expected: false,
+        },
+        {
+            clearable: "never",
+            hasValue: true,
+            focused: true,
+            multiline: false,
+            disabled: false,
+            expected: false,
+        },
+        {
+            clearable: "never",
+            hasValue: false,
+            focused: false,
+            multiline: false,
+            disabled: true,
+            expected: false,
+        },
+        {
+            clearable: "never",
+            hasValue: true,
+            focused: false,
+            multiline: false,
+            disabled: true,
+            expected: false,
+        },
+    ])("%j", ({ clearable, hasValue, focused, multiline, disabled, expected, }) => {
+        it(`returns ${expected}`, () => {
+            expect((0, useShowClear_1.useShowClear)({ clearable, multiline, focused, hasValue, disabled })).toEqual(expected);
+        });
+    });
+    it("throws an error if multiline is true and clearable isn't never", () => {
+        expect(() => {
+            (0, useShowClear_1.useShowClear)({
+                clearable: "always",
+                multiline: true,
+                focused: true,
+                hasValue: true,
+                disabled: false,
+            });
+        }).toThrow();
+        expect(() => {
+            (0, useShowClear_1.useShowClear)({
+                clearable: "while-editing",
+                multiline: true,
+                focused: true,
+                hasValue: true,
+                disabled: false,
+            });
+        }).toThrow();
+        expect(() => {
+            (0, useShowClear_1.useShowClear)({
+                clearable: "never",
+                multiline: true,
+                focused: true,
+                hasValue: true,
+                disabled: false,
+            });
+        }).not.toThrow();
+    });
+});

package/dist/useWindowDimensions/index.d.ts

@@ -0,0 +1 @@
+export { useWindowDimensions } from "./useWindowDimensions";

package/dist/useWindowDimensions/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowDimensions = void 0;
+var useWindowDimensions_1 = require("./useWindowDimensions");
+Object.defineProperty(exports, "useWindowDimensions", { enumerable: true, get: function () { return useWindowDimensions_1.useWindowDimensions; } });

package/dist/useWindowDimensions/useWIndowDimensions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/useWindowDimensions/useWIndowDimensions.test.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_hooks_1 = require("@testing-library/react-hooks");
+const react_1 = require("@testing-library/react");
+const useWindowDimensions_1 = require("./useWindowDimensions");
+describe("useWindowDimensions", () => {
+    it("should return window dimensions", () => {
+        window.innerHeight = 100;
+        window.innerWidth = 1000;
+        const { result } = (0, react_hooks_1.renderHook)(() => (0, useWindowDimensions_1.useWindowDimensions)());
+        expect(result.current).toEqual({ width: 1000, height: 100 });
+    });
+    describe("resize event", () => {
+        it("should return window dimensions after resize", () => {
+            window.innerHeight = 100;
+            window.innerWidth = 1000;
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, useWindowDimensions_1.useWindowDimensions)());
+            window.innerWidth = 500;
+            (0, react_1.fireEvent)(window, new Event("resize"));
+            expect(result.current).toEqual({ width: 500, height: 100 });
+        });
+    });
+});

package/dist/useWindowDimensions/useWindowDimensions.d.ts

@@ -0,0 +1,4 @@
+export declare function useWindowDimensions(): {
+    width: number;
+    height: number;
+};

package/dist/useWindowDimensions/useWindowDimensions.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowDimensions = void 0;
+const react_1 = require("react");
+function getWindowDimensions() {
+    if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)) {
+        return {
+            width: 0,
+            height: 0,
+        };
+    }
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(getWindowDimensions());
+    (0, react_1.useEffect)(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        window === null || window === void 0 ? void 0 : window.addEventListener("resize", handleResize);
+        return () => window === null || window === void 0 ? void 0 : window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowDimensions;
+}
+exports.useWindowDimensions = useWindowDimensions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "2.7.2",
+  "version": "2.7.3-fix-hide-h.40+6cd98b2a",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -20,7 +20,7 @@
   ],
   "devDependencies": {
     "@apollo/react-testing": "^4.0.0",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.3-fix-hide-h.758+6cd98b2a",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.0",
     "@testing-library/user-event": "^14.5.1",
@@ -44,5 +44,5 @@
     "@apollo/client": "^3.0.0",
     "react": "^18"
   },
-  "gitHead": "e925163219d4d3c15d78318cfff03f6240c19ef3"
+  "gitHead": "6cd98b2ae36e2810bdec97e994735ad322e19c1f"
 }

package/useSafeLayoutEffect.d.ts

@@ -0,0 +1 @@
+export * from "./dist/useSafeLayoutEffect";

package/useSafeLayoutEffect.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var useSafeLayoutEffect = require("./dist/useSafeLayoutEffect");
+
+Object.keys(useSafeLayoutEffect).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return useSafeLayoutEffect[key];
+    },
+  });
+});

package/useShowClear.d.ts

@@ -0,0 +1 @@
+export * from "./dist/useShowClear";

package/useShowClear.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var useShowClear = require("./dist/useShowClear");
+
+Object.keys(useShowClear).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return useShowClear[key];
+    },
+  });
+});

package/useWindowDimensions.d.ts

@@ -0,0 +1 @@
+export * from "./dist/useWindowDimensions";

package/useWindowDimensions.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var useWindowDimensions = require("./dist/useWindowDimensions");
+
+Object.keys(useWindowDimensions).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return useWindowDimensions[key];
+    },
+  });
+});