@jobber/hooks 1.12.5 → 1.13.1-pre.19

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.13.0](https://github.com/GetJobber/atlantis/compare/@jobber/hooks@1.12.5...@jobber/hooks@1.13.0) (2023-03-02)
+
+
+### Features
+
+* **hooks:** Add useFocusTrap hook ([#1100](https://github.com/GetJobber/atlantis/issues/1100)) ([2fed042](https://github.com/GetJobber/atlantis/commit/2fed042db990704e1723e1ebe87bff7b04acc44f))
+
+
+
+
+
 ## [1.12.5](https://github.com/GetJobber/atlantis/compare/@jobber/hooks@1.12.4...@jobber/hooks@1.12.5) (2023-02-28)
 
 **Note:** Version bump only for package @jobber/hooks

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./useAssert";
 export * from "./useCollectionQuery";
+export * from "./useFocusTrap";
 export * from "./useFormState";
 export * from "./useIsMounted";
 export * from "./useLiveAnnounce";

package/dist/index.js

@@ -5,6 +5,7 @@ function __export(m) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __export(require("./useAssert"));
 __export(require("./useCollectionQuery"));
+__export(require("./useFocusTrap"));
 __export(require("./useFormState"));
 __export(require("./useIsMounted"));
 __export(require("./useLiveAnnounce"));

package/dist/useFocusTrap/index.d.ts

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

package/dist/useFocusTrap/index.js

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

package/dist/useFocusTrap/useFocusTrap.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * Traps the focus within the children of the ref element.
+ *
+ * @param active - Turns the focus trapping on or off. Also adds aria-hidden on the
+ * body but not the dialog.
+ *
+ * @returns ref
+ */
+export declare function useFocusTrap<T extends HTMLElement>(active: boolean): import("react").RefObject<T>;

package/dist/useFocusTrap/useFocusTrap.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+/**
+ * Traps the focus within the children of the ref element.
+ *
+ * @param active - Turns the focus trapping on or off. Also adds aria-hidden on the
+ * body but not the dialog.
+ *
+ * @returns ref
+ */
+function useFocusTrap(active) {
+    // There's an ongoing issue with useRef return type clashing with an element's
+    // ref prop type. TLDR: Use null because useRef doesn't expect undefined.
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572
+    var ref = react_1.useRef(null);
+    function handleKeyDown(event) {
+        if (!(active && ref.current) || event.key !== "Tab") {
+            return;
+        }
+        var _a = getElements(ref.current), firstElement = _a.firstElement, lastElement = _a.lastElement;
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+                lastElement.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                firstElement.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    react_1.useEffect(function () {
+        var _a, _b;
+        if (active) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener("keydown", handleKeyDown);
+        }
+        return function () {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [active]);
+    return ref;
+}
+exports.useFocusTrap = useFocusTrap;
+function getElements(ref) {
+    var focusables = [
+        "button",
+        "[href]",
+        "input",
+        "select",
+        "textarea",
+        '[tabindex]:not([tabindex="-1"])',
+    ];
+    var elements = ref.querySelectorAll(focusables.join(", "));
+    var firstElement = ref;
+    var lastElement = elements[elements.length - 1];
+    return { firstElement: firstElement, lastElement: lastElement };
+}

package/dist/useFocusTrap/useFocusTrap.test.d.ts

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

package/dist/useFocusTrap/useFocusTrap.test.js

@@ -0,0 +1,53 @@
+"use strict";
+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 user_event_1 = __importDefault(require("@testing-library/user-event"));
+var useFocusTrap_1 = require("./useFocusTrap");
+var targetId = "target";
+var firstFocusableChild = "first-element";
+var lastFocusableChild = "last-element";
+it("should focus on the ref target on mount", function () {
+    var getByTestId = react_2.render(react_1.default.createElement(TestComponent, null)).getByTestId;
+    expect(getByTestId(targetId)).toHaveFocus();
+});
+it("should focus on the ref target when tabbing out of the last focusable element and ignore the tabindex'=-1'", function () {
+    var getByTestId = react_2.render(react_1.default.createElement(TestComponent, null)).getByTestId;
+    getByTestId(lastFocusableChild).focus();
+    user_event_1.default.tab();
+    expect(getByTestId(targetId)).toHaveFocus();
+});
+it("should focus on the first focusable element", function () {
+    var getByTestId = react_2.render(react_1.default.createElement(TestComponent, null)).getByTestId;
+    user_event_1.default.tab();
+    expect(getByTestId(firstFocusableChild)).toHaveFocus();
+});
+it("should focus on the last focusable element", function () {
+    var getByTestId = react_2.render(react_1.default.createElement(TestComponent, null)).getByTestId;
+    user_event_1.default.tab({ shift: true });
+    expect(getByTestId(lastFocusableChild)).toHaveFocus();
+});
+it("should not trap the tabbing and focus on the first child node", function () {
+    var getByTestId = react_2.render(react_1.default.createElement(TestComponent, { trap: false })).getByTestId;
+    user_event_1.default.tab();
+    expect(getByTestId(targetId).previousElementSibling).toHaveFocus();
+});
+function TestComponent(_a) {
+    var _b = _a.trap, trap = _b === void 0 ? true : _b;
+    var testRef = useFocusTrap_1.useFocusTrap(trap);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", { type: "number" }),
+        react_1.default.createElement("div", { ref: testRef, "data-testid": targetId, tabIndex: 0 },
+            react_1.default.createElement("button", { "data-testid": firstFocusableChild }, "Click me"),
+            react_1.default.createElement("a", { href: "#" }),
+            react_1.default.createElement("input", { type: "text" }),
+            react_1.default.createElement("select", null,
+                react_1.default.createElement("option", { value: "A" })),
+            react_1.default.createElement("textarea", null),
+            react_1.default.createElement("span", { tabIndex: 0, "data-testId": lastFocusableChild }),
+            react_1.default.createElement("span", { tabIndex: -1 })),
+        react_1.default.createElement("input", { type: "calendar" })));
+}

package/dist/useFormState/useFormState.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-/// <reference types="@emotion/core" />
-/// <reference types="theme-ui" />
 export declare function useFormState(): readonly [{
     isDirty: boolean;
     isValid: boolean;

package/dist/useResizeObserver/useResizeObserver.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-/// <reference types="@emotion/core" />
-/// <reference types="theme-ui" />
 export declare const Breakpoints: {
     base: number;
     small: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "1.12.5",
+  "version": "1.13.1-pre.19+932bbb8b",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -16,12 +16,13 @@
   "devDependencies": {
     "@apollo/client": "^3.3.16",
     "@apollo/react-testing": "^4.0.0",
-    "@jobber/formatters": "^0.2.1",
-    "@testing-library/react": "^10.2.1",
+    "@jobber/formatters": "^0.2.2-pre.34+932bbb8b",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.0",
+    "@testing-library/user-event": "^12.0.2",
     "@types/lodash": "4.14.136",
-    "@types/react": "16.14.2",
-    "@types/react-dom": "16.9.10",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/uuid": "^8.3.3",
     "@types/zxcvbn": "^4.4.1",
     "graphql": "^14.6.0",
@@ -38,7 +39,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.3.16",
-    "react": "^16.8.6"
+    "react": ">=16.8"
   },
-  "gitHead": "bb90f77e6a841ec59113b3a7931ff13039e7d9f5"
+  "gitHead": "932bbb8b9dd1cdacc858efb1f7feed546a710d11"
 }