@jobber/hooks 1.12.4 → 1.13.0

package/CHANGELOG.md

@@ -1,13 +1,27 @@
----
-name: Hooks
-menu: Changelog
----
-
-# @jobber/hooks: Change Log
+# Change Log
 
 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
+
+
+
+
+
 ## [1.12.4](https://github.com/GetJobber/atlantis/compare/@jobber/hooks@1.12.3...@jobber/hooks@1.12.4) (2023-02-27)
 
 **Note:** Version bump only for package @jobber/hooks
@@ -361,16 +375,3 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * add hook package with useResizeOberserver hook ([#242](https://github.com/GetJobber/atlantis/issues/242)) ([59411d7](https://github.com/GetJobber/atlantis/commit/59411d7dd34508e56dcdd4b9de9806414196959c))
-
-
-
-
-
----
-name: Atlantis Hooks
-menu: Changelog
----
-
-# @jobber/hooks: Change Log
-
-All notable changes to this project will be documented in this file.

package/README.mdx

@@ -1,9 +1,3 @@
----
-name: Hooks
-menu: Packages
-route: /packages/hooks
----
-
 # Atlantis Hooks
 
 Shared hooks for components in Atlantis.

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export * from "./useOnKeyDown";
 export * from "./usePasswordStrength";
 export * from "./useRefocusOnActivator";
 export * from "./useResizeObserver";
+export * from "./useFocusTrap";

package/dist/index.js

@@ -12,3 +12,4 @@ __export(require("./useOnKeyDown"));
 __export(require("./usePasswordStrength"));
 __export(require("./useRefocusOnActivator"));
 __export(require("./useResizeObserver"));
+__export(require("./useFocusTrap"));

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,12 @@
+/// <reference types="react" />
+/// <reference types="@emotion/core" />
+/// <reference types="theme-ui" />
+/**
+ * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/hooks",
-  "version": "1.12.4",
+  "version": "1.13.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -16,9 +16,10 @@
   "devDependencies": {
     "@apollo/client": "^3.3.16",
     "@apollo/react-testing": "^4.0.0",
-    "@jobber/formatters": "^0.2.0",
+    "@jobber/formatters": "^0.2.1",
     "@testing-library/react": "^10.2.1",
     "@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",
@@ -40,5 +41,5 @@
     "@apollo/client": "^3.3.16",
     "react": "^16.8.6"
   },
-  "gitHead": "cccd4892ef869a786ddf838acfb26ecaec0407a8"
+  "gitHead": "347e591cc612d851632e3728e0a7d0c36f684aad"
 }

package/readme.stories.mdx

@@ -3,14 +3,4 @@ import Readme from "./README.mdx";
 
 <Meta title="Packages/Hooks" />
 
-# Atlantis Hooks
-
-Shared hooks for components in Atlantis.
-
-## Hooks
-
-- [useResizeObserver](../?path=/docs/hooks-useresizeobserver--use-resize-observer)
-
-## Installing
-
-`npm install @jobber/hooks`
+<Readme />