@jobber/hooks 1.9.2-pre.27 → 1.11.0

package/CHANGELOG.md

@@ -8,6 +8,28 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0](https://github.com/GetJobber/atlantis/compare/@jobber/hooks@1.10.0...@jobber/hooks@1.11.0) (2022-01-28)
+
+
+### Features
+
+* Announce chip deletion and addition JOB-41252 ([#848](https://github.com/GetJobber/atlantis/issues/848)) ([f251b42](https://github.com/GetJobber/atlantis/commit/f251b42c5aa98ee07f7e16d3605a6bd965a8231b))
+
+
+
+
+
+# [1.10.0](https://github.com/GetJobber/atlantis/compare/@jobber/hooks@1.9.1...@jobber/hooks@1.10.0) (2022-01-21)
+
+
+### Features
+
+* **hooks:** Create the hooks index dynamically ([#839](https://github.com/GetJobber/atlantis/issues/839)) ([dc770a8](https://github.com/GetJobber/atlantis/commit/dc770a813268cc2f3d011e2a559761043ae398ab))
+
+
+
+
+
 ## [1.9.1](https://github.com/GetJobber/atlantis/compare/@jobber/hooks@1.9.0...@jobber/hooks@1.9.1) (2021-12-15)
 
 **Note:** Version bump only for package @jobber/hooks

package/dist/index.d.ts

@@ -1,8 +1,9 @@
-export * from "./useResizeObserver";
-export * from "./useFormState";
-export * from "./useOnKeyDown";
+export * from "./useAssert";
 export * from "./useCollectionQuery";
+export * from "./useFormState";
 export * from "./useIsMounted";
+export * from "./useLiveAnnounce";
+export * from "./useOnKeyDown";
 export * from "./usePasswordStrength";
 export * from "./useRefocusOnActivator";
-export * from "./useAssert";
+export * from "./useResizeObserver";

package/dist/index.js

@@ -3,11 +3,12 @@ function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./useResizeObserver"));
-__export(require("./useFormState"));
-__export(require("./useOnKeyDown"));
+__export(require("./useAssert"));
 __export(require("./useCollectionQuery"));
+__export(require("./useFormState"));
 __export(require("./useIsMounted"));
+__export(require("./useLiveAnnounce"));
+__export(require("./useOnKeyDown"));
 __export(require("./usePasswordStrength"));
 __export(require("./useRefocusOnActivator"));
-__export(require("./useAssert"));
+__export(require("./useResizeObserver"));

package/dist/useCollectionQuery/useCollectionQuery.d.ts

@@ -7,7 +7,7 @@ interface UseCollectionQueryArguments<TQuery, TSubscription> {
      */
     query: DocumentNode;
     /**
-     * A list of options for us to pass into the apollo `useQuery` hook.
+     * A list of options for us to pass into the apollo `useQuery` hook
      */
     queryOptions?: QueryHookOptions<TQuery>;
     /**

package/dist/useLiveAnnounce/index.d.ts

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

package/dist/useLiveAnnounce/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var useLiveAnnounce_1 = require("./useLiveAnnounce");
+exports.useLiveAnnounce = useLiveAnnounce_1.useLiveAnnounce;

package/dist/useLiveAnnounce/useLiveAnnounce.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Announce a message on voice over whenever you do an action. This is
+ * especially helpful when you have an action that adds or deletes an element
+ * from the screen.
+ */
+export declare function useLiveAnnounce(): {
+    liveAnnounce: (message: string) => void;
+};

package/dist/useLiveAnnounce/useLiveAnnounce.js

@@ -0,0 +1,57 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+/**
+ * Announce a message on voice over whenever you do an action. This is
+ * especially helpful when you have an action that adds or deletes an element
+ * from the screen.
+ */
+function useLiveAnnounce() {
+    var _a = __read(react_1.useState(""), 2), announcedMessage = _a[0], setAnnouncedMessage = _a[1];
+    react_1.useEffect(function () {
+        var target;
+        if (announcedMessage) {
+            target = createAnnouncedElement();
+            setTimeout(function () { return target.append(announcedMessage); }, 100);
+        }
+        return function () { return target === null || target === void 0 ? void 0 : target.remove(); };
+    }, [announcedMessage]);
+    return {
+        liveAnnounce: function (message) {
+            setAnnouncedMessage(message);
+        },
+    };
+}
+exports.useLiveAnnounce = useLiveAnnounce;
+// eslint-disable-next-line max-statements
+function createAnnouncedElement() {
+    var el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.width = "1px";
+    el.style.height = "1px";
+    el.style.overflow = "hidden";
+    el.style.clipPath = " inset(100%)";
+    el.style.whiteSpace = " nowrap";
+    el.style.top = "0";
+    el.setAttribute("role", "status");
+    el.setAttribute("aria-atomic", "true");
+    el.setAttribute("aria-live", "assertive");
+    document.body.appendChild(el);
+    return el;
+}

package/dist/useLiveAnnounce/useLiveAnnounce.test.d.ts

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

package/dist/useLiveAnnounce/useLiveAnnounce.test.js

@@ -0,0 +1,121 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var _1 = require(".");
+function setupHook() {
+    var returnVal = {
+        liveAnnounce: jest.fn,
+    };
+    function TestComponent() {
+        Object.assign(returnVal, _1.useLiveAnnounce());
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    var rerender = react_2.render(react_1.default.createElement(TestComponent, null)).rerender;
+    return __assign(__assign({}, returnVal), { rerenderComponent: function () { return rerender(react_1.default.createElement(TestComponent, null)); } });
+}
+it("should render a div to announce", function () { return __awaiter(void 0, void 0, void 0, function () {
+    var liveAnnounce, message;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                liveAnnounce = setupHook().liveAnnounce;
+                message = "Huzzah";
+                react_2.act(function () { return liveAnnounce(message); });
+                return [4 /*yield*/, react_2.waitFor(function () {
+                        var expectedElement = react_2.screen.queryByRole("status");
+                        expect(expectedElement).toBeInTheDocument();
+                        expect(expectedElement === null || expectedElement === void 0 ? void 0 : expectedElement.textContent).toBe(message);
+                        expect(expectedElement).toHaveAttribute("role", "status");
+                        expect(expectedElement).toHaveAttribute("aria-atomic", "true");
+                        expect(expectedElement).toHaveAttribute("aria-live", "assertive");
+                    })];
+            case 1:
+                _a.sent();
+                return [2 /*return*/];
+        }
+    });
+}); });
+it("should not render the announced div", function () { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        setupHook();
+        expect(react_2.screen.queryByRole("status")).not.toBeInTheDocument();
+        return [2 /*return*/];
+    });
+}); });
+it("should only have 1 div to announce a message on a single instance of the hook", function () { return __awaiter(void 0, void 0, void 0, function () {
+    var liveAnnounce, firstMessage, secondMessage;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                liveAnnounce = setupHook().liveAnnounce;
+                firstMessage = "I am first";
+                secondMessage = "I am second";
+                react_2.act(function () { return liveAnnounce(firstMessage); });
+                return [4 /*yield*/, react_2.waitFor(function () {
+                        expect(react_2.screen.queryAllByRole("status")).toHaveLength(1);
+                        expect(react_2.screen.getByRole("status").textContent).toBe(firstMessage);
+                    })];
+            case 1:
+                _a.sent();
+                react_2.act(function () { return liveAnnounce(secondMessage); });
+                return [4 /*yield*/, react_2.waitFor(function () {
+                        expect(react_2.screen.queryAllByRole("status")).toHaveLength(1);
+                        expect(react_2.screen.getByRole("status").textContent).toBe(secondMessage);
+                    })];
+            case 2:
+                _a.sent();
+                return [2 /*return*/];
+        }
+    });
+}); });

package/dist/usePasswordStrength/usePasswordStrength.d.ts

@@ -1,11 +1,8 @@
-/// <reference types="react" />
-/// <reference types="@emotion/core" />
-/// <reference types="theme-ui" />
 import calculateStrength from "zxcvbn";
 export declare function usePasswordStrength(password: string, dictionary?: string[]): {
     guesses: number;
     score: calculateStrength.ZXCVBNScore;
     warning: calculateStrength.ZXCVBNFeedbackWarning;
     suggestions: string[];
-    timeToCrack: import("react").ReactText;
+    timeToCrack: string | number;
 };

package/dist/useResizeObserver/index.d.ts

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

package/dist/useResizeObserver/index.js

@@ -0,0 +1,6 @@
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./useResizeObserver"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "1.9.2-pre.27+cd7c431",
+  "version": "1.11.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -18,6 +18,7 @@
     "@jobber/formatters": "^0.2.0",
     "@testing-library/react": "^10.2.1",
     "@testing-library/react-hooks": "^7.0.0",
+    "@types/jest": "^26.0.23",
     "@types/lodash": "4.14.136",
     "@types/react": "16.14.2",
     "@types/react-dom": "16.9.10",
@@ -39,5 +40,5 @@
     "@apollo/client": "^3.3.16",
     "react": "^16.8.6"
   },
-  "gitHead": "cd7c4312ede267e252665d872d0607f9e24a4762"
+  "gitHead": "ce09a40fb99f912afc3db58e6396c3ce8fbb31db"
 }