@jobber/hooks 2.14.0 → 2.15.1-export-use-7a742d1.85

package/README.md

@@ -4,7 +4,6 @@ Shared hooks for components in Atlantis.
 
 ## Hooks
 
-- [useAssert](../?path=/docs/hooks-useassert--docs)
 - [useCallbackRef](../?path=/docs/hooks-usecallbackref--docs)
 - [useBool](../?path=/docs/hooks-usebool--docs)
 - [useCollectionQuery](../?path=/docs/hooks-usecollectionquery--docs)

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export * from "./useAssert";
 export * from "./useBool";
 export * from "./useBreakpoints";
 export * from "./useCallbackRef";
 export * from "./useCollectionQuery";
+export * from "./useDebounce";
 export * from "./useFocusTrap";
 export * from "./useFormState";
 export * from "./useInView";

package/dist/index.js

@@ -14,11 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useAssert"), exports);
 __exportStar(require("./useBool"), exports);
 __exportStar(require("./useBreakpoints"), exports);
 __exportStar(require("./useCallbackRef"), exports);
 __exportStar(require("./useCollectionQuery"), exports);
+__exportStar(require("./useDebounce"), exports);
 __exportStar(require("./useFocusTrap"), exports);
 __exportStar(require("./useFormState"), exports);
 __exportStar(require("./useInView"), exports);

package/dist/useDebounce/index.d.ts

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

package/dist/useDebounce/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useDebounce"), exports);

package/dist/useDebounce/useDebounce.d.ts

@@ -0,0 +1,11 @@
+import debounce from "lodash/debounce";
+type AnyFunction = (...args: any[]) => any;
+/**
+ * A hook to easily manage debounced functions, including their cleanup.
+ * @param func The function to debounce.
+ * @param wait The number of milliseconds to delay.
+ * @param options Optional debounce settings.
+ * @returns The debounced function.
+ */
+export declare function useDebounce<T extends AnyFunction>(func: T, wait: number, options?: Parameters<typeof debounce>[2]): ((...args: Parameters<T>) => any) & import("lodash").Cancelable;
+export {};

package/dist/useDebounce/useDebounce.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebounce = useDebounce;
+const react_1 = require("react");
+const debounce_1 = __importDefault(require("lodash/debounce"));
+/**
+ * A hook to easily manage debounced functions, including their cleanup.
+ * @param func The function to debounce.
+ * @param wait The number of milliseconds to delay.
+ * @param options Optional debounce settings.
+ * @returns The debounced function.
+ */
+function useDebounce(func, wait, options) {
+    const funcRef = (0, react_1.useRef)(func);
+    // We're keeping the provided func wrapped in a ref to avoid forcing the consumer to memoize it.
+    // This is a defense against consumers who aren't memoizing their functions.. or if they are
+    // memoized but invalidating too frequently due to possible bugs.
+    if (funcRef.current !== func) {
+        funcRef.current = func;
+    }
+    const debounced = (0, react_1.useMemo)(() => {
+        return (0, debounce_1.default)((...args) => funcRef.current(...args), wait, options);
+        // Note: do not add any dependencies! There is currently no use case where we would change
+        // the wait delay or options between renders. By not tracking as dependencies, this allows
+        // consumers of useDebounce to provide a raw object for options rather than forcing them to
+        // memoize that param. Same with the func they provide, we're using a ref to keep that up
+        // to date and to avoid forcing the consumer to memoize it.
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // If the debounced function is recreated (or unmounted), cancel the last call.
+        return () => debounced.cancel();
+    }, [debounced]);
+    return debounced;
+}

package/dist/useDebounce/useDebounce.test.d.ts

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

package/dist/useDebounce/useDebounce.test.js

@@ -0,0 +1,111 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_2 = require("@testing-library/react");
+const useDebounce_1 = require("./useDebounce");
+const DEBOUNCE_WAIT = 300;
+describe("useDebounce", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+    it("should debounce the function call", () => __awaiter(void 0, void 0, void 0, function* () {
+        const mockFn = jest.fn();
+        const { result } = (0, react_2.renderHook)(() => (0, useDebounce_1.useDebounce)(mockFn, DEBOUNCE_WAIT));
+        result.current("test");
+        expect(mockFn).not.toHaveBeenCalled();
+        // Fast-forward time
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(DEBOUNCE_WAIT);
+        });
+        expect(mockFn).toHaveBeenCalledWith("test");
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    }));
+    it("should cancel pending debounced calls on unmount", () => {
+        const mockFn = jest.fn();
+        const { result, unmount } = (0, react_2.renderHook)(() => (0, useDebounce_1.useDebounce)(mockFn, DEBOUNCE_WAIT));
+        result.current("test");
+        unmount();
+        // Fast-forward time
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(DEBOUNCE_WAIT);
+        });
+        expect(mockFn).not.toHaveBeenCalled();
+    });
+    it("should handle multiple calls within the debounce period", () => {
+        const mockFn = jest.fn();
+        const { result } = (0, react_2.renderHook)(() => (0, useDebounce_1.useDebounce)(mockFn, DEBOUNCE_WAIT));
+        result.current("first");
+        // Fast-forward half the debounce time
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(DEBOUNCE_WAIT / 2);
+        });
+        result.current("second");
+        // Fast-forward remaining debounce time
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(DEBOUNCE_WAIT);
+        });
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenCalledWith("second");
+    });
+    it("should work with React components", () => __awaiter(void 0, void 0, void 0, function* () {
+        function DebouncedComponent() {
+            const [value, setValue] = (0, react_1.useState)("");
+            const [debouncedValue, setDebouncedValue] = (0, react_1.useState)("");
+            const debouncedSetValue = (0, useDebounce_1.useDebounce)((newValue) => {
+                setDebouncedValue(newValue);
+            }, DEBOUNCE_WAIT);
+            (0, react_1.useEffect)(() => {
+                debouncedSetValue(value);
+            }, [value, debouncedSetValue]);
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("input", { "data-testid": "input", value: value, onChange: e => setValue(e.target.value) }),
+                react_1.default.createElement("div", { "data-testid": "debounced-value" }, debouncedValue)));
+        }
+        (0, react_2.render)(react_1.default.createElement(DebouncedComponent, null));
+        const input = react_2.screen.getByTestId("input");
+        const debouncedValue = react_2.screen.getByTestId("debounced-value");
+        // Using fireEvent instead of userEvent
+        react_2.fireEvent.change(input, { target: { value: "test" } });
+        expect(debouncedValue.textContent).toBe("");
+        // Fast-forward time
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(DEBOUNCE_WAIT + 100);
+        });
+        expect(debouncedValue.textContent).toBe("test");
+    }), 10000); // 10 second timeout
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "2.14.0",
+  "version": "2.15.1-export-use-7a742d1.85+7a742d1e",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -38,5 +38,5 @@
     "@apollo/client": "^3.0.0",
     "react": "^18.2.0"
   },
-  "gitHead": "05abc863b320dcb1f5f8e3fc9e950fb17a5d2ae3"
+  "gitHead": "7a742d1e2dc479ba136d7ecf5a0bf5186e3361eb"
 }

package/useDebounce.d.ts

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

package/{useAssert.js → useDebounce.js}

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 
-var useAssert = require("./dist/useAssert");
+var useDebounce = require("./dist/useDebounce");
 
-Object.keys(useAssert).forEach(function(key) {
+Object.keys(useDebounce).forEach(function(key) {
   if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return useAssert[key];
+      return useDebounce[key];
     },
   });
 });

package/dist/useAssert/index.d.ts

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

package/dist/useAssert/index.js

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

package/dist/useAssert/useAssert.d.ts

@@ -1,5 +0,0 @@
-interface Options {
-    readonly warn: boolean;
-}
-export declare function useAssert(shouldShow: boolean, message: string, options?: Options): void;
-export {};

package/dist/useAssert/useAssert.js

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAssert = useAssert;
-const process_1 = __importDefault(require("process"));
-function useAssert(shouldShow, message, options) {
-    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);
-        }
-        else {
-            throw new Error(message);
-        }
-    }
-}

package/useAssert.d.ts

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