@jobber/hooks 1.13.3 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +24 -13
- package/dist/useAssert/index.js +2 -1
- package/dist/useAssert/useAssert.js +2 -1
- package/dist/useCollectionQuery/index.js +2 -1
- package/dist/useCollectionQuery/mdxUtils.js +19 -7
- package/dist/useCollectionQuery/test-utilities/index.js +17 -6
- package/dist/useCollectionQuery/test-utilities/mocks.d.ts +3 -3
- package/dist/useCollectionQuery/test-utilities/mocks.js +17 -17
- package/dist/useCollectionQuery/test-utilities/queries.js +57 -9
- package/dist/useCollectionQuery/test-utilities/utils.js +4 -38
- package/dist/useCollectionQuery/uniqueEdges.js +5 -4
- package/dist/useCollectionQuery/uniqueNodes.js +4 -3
- package/dist/useCollectionQuery/useCollectionQuery.d.ts +2 -2
- package/dist/useCollectionQuery/useCollectionQuery.js +60 -101
- package/dist/useCollectionQuery/useCollectionQuery.test.js +240 -429
- package/dist/useFocusTrap/index.js +2 -1
- package/dist/useFocusTrap/useFocusTrap.d.ts +0 -1
- package/dist/useFocusTrap/useFocusTrap.js +11 -10
- package/dist/useFocusTrap/useFocusTrap.test.js +19 -20
- package/dist/useFormState/index.js +2 -1
- package/dist/useFormState/useFormState.d.ts +0 -1
- package/dist/useFormState/useFormState.js +5 -20
- package/dist/useIsMounted/index.js +2 -1
- package/dist/useIsMounted/useIsMounted.js +5 -4
- package/dist/useIsMounted/useIsMounted.test.js +8 -8
- package/dist/useLiveAnnounce/index.js +2 -1
- package/dist/useLiveAnnounce/useLiveAnnounce.js +9 -24
- package/dist/useLiveAnnounce/useLiveAnnounce.test.js +36 -97
- package/dist/useOnKeyDown/index.js +2 -1
- package/dist/useOnKeyDown/useOnKeyDown.d.ts +2 -2
- package/dist/useOnKeyDown/useOnKeyDown.js +7 -6
- package/dist/useOnKeyDown/useOnKeyDown.test.js +9 -10
- package/dist/usePasswordStrength/index.js +2 -1
- package/dist/usePasswordStrength/usePasswordStrength.js +9 -8
- package/dist/useRefocusOnActivator/index.js +2 -1
- package/dist/useRefocusOnActivator/useRefocusOnActivator.js +5 -4
- package/dist/useResizeObserver/index.js +15 -4
- package/dist/useResizeObserver/useResizeObserver.d.ts +0 -1
- package/dist/useResizeObserver/useResizeObserver.js +20 -36
- package/package.json +6 -8
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useFocusTrap = void 0;
|
|
3
4
|
var useFocusTrap_1 = require("./useFocusTrap");
|
|
4
|
-
exports
|
|
5
|
+
Object.defineProperty(exports, "useFocusTrap", { enumerable: true, get: function () { return useFocusTrap_1.useFocusTrap; } });
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
3
|
+
exports.useFocusTrap = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
4
5
|
/**
|
|
5
6
|
* Traps the focus within the children of the ref element.
|
|
6
7
|
*
|
|
@@ -13,12 +14,12 @@ function useFocusTrap(active) {
|
|
|
13
14
|
// There's an ongoing issue with useRef return type clashing with an element's
|
|
14
15
|
// ref prop type. TLDR: Use null because useRef doesn't expect undefined.
|
|
15
16
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572
|
|
16
|
-
|
|
17
|
+
const ref = (0, react_1.useRef)(null);
|
|
17
18
|
function handleKeyDown(event) {
|
|
18
19
|
if (!(active && ref.current) || event.key !== "Tab") {
|
|
19
20
|
return;
|
|
20
21
|
}
|
|
21
|
-
|
|
22
|
+
const { firstElement, lastElement } = getElements(ref.current);
|
|
22
23
|
if (event.shiftKey) {
|
|
23
24
|
if (document.activeElement === firstElement) {
|
|
24
25
|
lastElement.focus();
|
|
@@ -32,13 +33,13 @@ function useFocusTrap(active) {
|
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
|
-
react_1.useEffect(
|
|
36
|
+
(0, react_1.useEffect)(() => {
|
|
36
37
|
var _a, _b;
|
|
37
38
|
if (active) {
|
|
38
39
|
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
39
40
|
(_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener("keydown", handleKeyDown);
|
|
40
41
|
}
|
|
41
|
-
return
|
|
42
|
+
return () => {
|
|
42
43
|
var _a;
|
|
43
44
|
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
|
|
44
45
|
};
|
|
@@ -47,7 +48,7 @@ function useFocusTrap(active) {
|
|
|
47
48
|
}
|
|
48
49
|
exports.useFocusTrap = useFocusTrap;
|
|
49
50
|
function getElements(ref) {
|
|
50
|
-
|
|
51
|
+
const focusables = [
|
|
51
52
|
"button",
|
|
52
53
|
"[href]",
|
|
53
54
|
"input",
|
|
@@ -55,8 +56,8 @@ function getElements(ref) {
|
|
|
55
56
|
"textarea",
|
|
56
57
|
'[tabindex]:not([tabindex="-1"])',
|
|
57
58
|
];
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
return { firstElement
|
|
59
|
+
const elements = ref.querySelectorAll(focusables.join(", "));
|
|
60
|
+
const firstElement = ref;
|
|
61
|
+
const lastElement = elements[elements.length - 1];
|
|
62
|
+
return { firstElement, lastElement };
|
|
62
63
|
}
|
|
@@ -3,41 +3,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
it("should focus on the ref target on mount",
|
|
14
|
-
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const react_2 = require("@testing-library/react");
|
|
8
|
+
const user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
9
|
+
const useFocusTrap_1 = require("./useFocusTrap");
|
|
10
|
+
const targetId = "target";
|
|
11
|
+
const firstFocusableChild = "first-element";
|
|
12
|
+
const lastFocusableChild = "last-element";
|
|
13
|
+
it("should focus on the ref target on mount", () => {
|
|
14
|
+
const { getByTestId } = (0, react_2.render)(react_1.default.createElement(TestComponent, null));
|
|
15
15
|
expect(getByTestId(targetId)).toHaveFocus();
|
|
16
16
|
});
|
|
17
|
-
it("should focus on the ref target when tabbing out of the last focusable element and ignore the tabindex'=-1'",
|
|
18
|
-
|
|
17
|
+
it("should focus on the ref target when tabbing out of the last focusable element and ignore the tabindex'=-1'", () => {
|
|
18
|
+
const { getByTestId } = (0, react_2.render)(react_1.default.createElement(TestComponent, null));
|
|
19
19
|
getByTestId(lastFocusableChild).focus();
|
|
20
20
|
user_event_1.default.tab();
|
|
21
21
|
expect(getByTestId(targetId)).toHaveFocus();
|
|
22
22
|
});
|
|
23
|
-
it("should focus on the first focusable element",
|
|
24
|
-
|
|
23
|
+
it("should focus on the first focusable element", () => {
|
|
24
|
+
const { getByTestId } = (0, react_2.render)(react_1.default.createElement(TestComponent, null));
|
|
25
25
|
user_event_1.default.tab();
|
|
26
26
|
expect(getByTestId(firstFocusableChild)).toHaveFocus();
|
|
27
27
|
});
|
|
28
|
-
it("should focus on the last focusable element",
|
|
29
|
-
|
|
28
|
+
it("should focus on the last focusable element", () => {
|
|
29
|
+
const { getByTestId } = (0, react_2.render)(react_1.default.createElement(TestComponent, null));
|
|
30
30
|
user_event_1.default.tab({ shift: true });
|
|
31
31
|
expect(getByTestId(lastFocusableChild)).toHaveFocus();
|
|
32
32
|
});
|
|
33
|
-
it("should not trap the tabbing and focus on the first child node",
|
|
34
|
-
|
|
33
|
+
it("should not trap the tabbing and focus on the first child node", () => {
|
|
34
|
+
const { getByTestId } = (0, react_2.render)(react_1.default.createElement(TestComponent, { trap: false }));
|
|
35
35
|
user_event_1.default.tab();
|
|
36
36
|
expect(getByTestId(targetId).previousElementSibling).toHaveFocus();
|
|
37
37
|
});
|
|
38
|
-
function TestComponent(
|
|
39
|
-
|
|
40
|
-
var testRef = useFocusTrap_1.useFocusTrap(trap);
|
|
38
|
+
function TestComponent({ trap = true }) {
|
|
39
|
+
const testRef = (0, useFocusTrap_1.useFocusTrap)(trap);
|
|
41
40
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
42
41
|
react_1.default.createElement("input", { type: "number" }),
|
|
43
42
|
react_1.default.createElement("div", { ref: testRef, "data-testid": targetId, tabIndex: 0 },
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useFormState = void 0;
|
|
3
4
|
var useFormState_1 = require("./useFormState");
|
|
4
|
-
exports
|
|
5
|
+
Object.defineProperty(exports, "useFormState", { enumerable: true, get: function () { return useFormState_1.useFormState; } });
|
|
@@ -1,27 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
3
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
4
|
-
if (!m) return o;
|
|
5
|
-
var i = m.call(o), r, ar = [], e;
|
|
6
|
-
try {
|
|
7
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
8
|
-
}
|
|
9
|
-
catch (error) { e = { error: error }; }
|
|
10
|
-
finally {
|
|
11
|
-
try {
|
|
12
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
13
|
-
}
|
|
14
|
-
finally { if (e) throw e.error; }
|
|
15
|
-
}
|
|
16
|
-
return ar;
|
|
17
|
-
};
|
|
18
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
19
|
-
|
|
3
|
+
exports.useFormState = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
20
5
|
function useFormState() {
|
|
21
|
-
|
|
6
|
+
const [formState, setFormState] = (0, react_1.useState)({
|
|
22
7
|
isDirty: false,
|
|
23
|
-
isValid:
|
|
24
|
-
})
|
|
8
|
+
isValid: false,
|
|
9
|
+
});
|
|
25
10
|
return [formState, setFormState];
|
|
26
11
|
}
|
|
27
12
|
exports.useFormState = useFormState;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useIsMounted = void 0;
|
|
3
4
|
var useIsMounted_1 = require("./useIsMounted");
|
|
4
|
-
exports
|
|
5
|
+
Object.defineProperty(exports, "useIsMounted", { enumerable: true, get: function () { return useIsMounted_1.useIsMounted; } });
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
3
|
+
exports.useIsMounted = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
4
5
|
/**
|
|
5
6
|
* Why does this work?
|
|
6
7
|
*
|
|
@@ -18,10 +19,10 @@ var react_1 = require("react");
|
|
|
18
19
|
* This `useLayoutEffect` hook will only be run once.
|
|
19
20
|
*/
|
|
20
21
|
function useIsMounted() {
|
|
21
|
-
|
|
22
|
-
react_1.useLayoutEffect(
|
|
22
|
+
const isMounted = (0, react_1.useRef)(false);
|
|
23
|
+
(0, react_1.useLayoutEffect)(() => {
|
|
23
24
|
isMounted.current = true;
|
|
24
|
-
return
|
|
25
|
+
return () => {
|
|
25
26
|
isMounted.current = false;
|
|
26
27
|
};
|
|
27
28
|
}, []);
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
it("should return true when the component is currently mounted",
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
const react_hooks_1 = require("@testing-library/react-hooks");
|
|
4
|
+
const useIsMounted_1 = require("./useIsMounted");
|
|
5
|
+
it("should return true when the component is currently mounted", () => {
|
|
6
|
+
const { result } = (0, react_hooks_1.renderHook)(() => (0, useIsMounted_1.useIsMounted)());
|
|
7
|
+
const isMounted = result.current;
|
|
8
8
|
expect(isMounted.current).toBe(true);
|
|
9
9
|
});
|
|
10
|
-
it("should return false when the component is unmounted",
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
it("should return false when the component is unmounted", () => {
|
|
11
|
+
const { result, unmount } = (0, react_hooks_1.renderHook)(() => (0, useIsMounted_1.useIsMounted)());
|
|
12
|
+
const isMounted = result.current;
|
|
13
13
|
unmount();
|
|
14
14
|
expect(isMounted.current).toBe(false);
|
|
15
15
|
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useLiveAnnounce = void 0;
|
|
3
4
|
var useLiveAnnounce_1 = require("./useLiveAnnounce");
|
|
4
|
-
exports
|
|
5
|
+
Object.defineProperty(exports, "useLiveAnnounce", { enumerable: true, get: function () { return useLiveAnnounce_1.useLiveAnnounce; } });
|
|
@@ -1,39 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
3
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
4
|
-
if (!m) return o;
|
|
5
|
-
var i = m.call(o), r, ar = [], e;
|
|
6
|
-
try {
|
|
7
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
8
|
-
}
|
|
9
|
-
catch (error) { e = { error: error }; }
|
|
10
|
-
finally {
|
|
11
|
-
try {
|
|
12
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
13
|
-
}
|
|
14
|
-
finally { if (e) throw e.error; }
|
|
15
|
-
}
|
|
16
|
-
return ar;
|
|
17
|
-
};
|
|
18
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
19
|
-
|
|
3
|
+
exports.useLiveAnnounce = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
20
5
|
/**
|
|
21
6
|
* Announce a message on voice over whenever you do an action. This is
|
|
22
7
|
* especially helpful when you have an action that adds or deletes an element
|
|
23
8
|
* from the screen.
|
|
24
9
|
*/
|
|
25
10
|
function useLiveAnnounce() {
|
|
26
|
-
|
|
27
|
-
react_1.useEffect(
|
|
28
|
-
|
|
11
|
+
const [announcedMessage, setAnnouncedMessage] = (0, react_1.useState)("");
|
|
12
|
+
(0, react_1.useEffect)(() => {
|
|
13
|
+
let target;
|
|
29
14
|
if (announcedMessage) {
|
|
30
15
|
target = createAnnouncedElement();
|
|
31
|
-
setTimeout(
|
|
16
|
+
setTimeout(() => target.append(announcedMessage), 100);
|
|
32
17
|
}
|
|
33
|
-
return
|
|
18
|
+
return () => target === null || target === void 0 ? void 0 : target.remove();
|
|
34
19
|
}, [announcedMessage]);
|
|
35
20
|
return {
|
|
36
|
-
liveAnnounce:
|
|
21
|
+
liveAnnounce: (message) => {
|
|
37
22
|
setAnnouncedMessage(message);
|
|
38
23
|
},
|
|
39
24
|
};
|
|
@@ -41,7 +26,7 @@ function useLiveAnnounce() {
|
|
|
41
26
|
exports.useLiveAnnounce = useLiveAnnounce;
|
|
42
27
|
// eslint-disable-next-line max-statements
|
|
43
28
|
function createAnnouncedElement() {
|
|
44
|
-
|
|
29
|
+
const el = document.createElement("div");
|
|
45
30
|
el.style.position = "absolute";
|
|
46
31
|
el.style.width = "1px";
|
|
47
32
|
el.style.height = "1px";
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
3
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
4
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -19,103 +8,53 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
19
8
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
9
|
});
|
|
21
10
|
};
|
|
22
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
24
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
-
function step(op) {
|
|
27
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
-
while (_) try {
|
|
29
|
-
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;
|
|
30
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
-
switch (op[0]) {
|
|
32
|
-
case 0: case 1: t = op; break;
|
|
33
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
-
default:
|
|
37
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
-
if (t[2]) _.ops.pop();
|
|
42
|
-
_.trys.pop(); continue;
|
|
43
|
-
}
|
|
44
|
-
op = body.call(thisArg, _);
|
|
45
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
11
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
50
12
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
51
13
|
};
|
|
52
14
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
15
|
+
const react_1 = __importDefault(require("react"));
|
|
16
|
+
const react_2 = require("@testing-library/react");
|
|
17
|
+
const _1 = require(".");
|
|
56
18
|
function setupHook() {
|
|
57
|
-
|
|
19
|
+
const returnVal = {
|
|
58
20
|
liveAnnounce: jest.fn,
|
|
59
21
|
};
|
|
60
22
|
function TestComponent() {
|
|
61
|
-
Object.assign(returnVal, _1.useLiveAnnounce());
|
|
23
|
+
Object.assign(returnVal, (0, _1.useLiveAnnounce)());
|
|
62
24
|
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
63
25
|
}
|
|
64
|
-
|
|
65
|
-
return
|
|
26
|
+
const { rerender } = (0, react_2.render)(react_1.default.createElement(TestComponent, null));
|
|
27
|
+
return Object.assign(Object.assign({}, returnVal), { rerenderComponent: () => rerender(react_1.default.createElement(TestComponent, null)) });
|
|
66
28
|
}
|
|
67
|
-
it("should render a div to announce",
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
expect(expectedElement === null || expectedElement === void 0 ? void 0 : expectedElement.textContent).toBe(message);
|
|
79
|
-
expect(expectedElement).toHaveAttribute("role", "status");
|
|
80
|
-
expect(expectedElement).toHaveAttribute("aria-atomic", "true");
|
|
81
|
-
expect(expectedElement).toHaveAttribute("aria-live", "assertive");
|
|
82
|
-
})];
|
|
83
|
-
case 1:
|
|
84
|
-
_a.sent();
|
|
85
|
-
return [2 /*return*/];
|
|
86
|
-
}
|
|
29
|
+
it("should render a div to announce", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
30
|
+
const { liveAnnounce } = setupHook();
|
|
31
|
+
const message = "Huzzah";
|
|
32
|
+
(0, react_2.act)(() => liveAnnounce(message));
|
|
33
|
+
yield (0, react_2.waitFor)(() => {
|
|
34
|
+
const expectedElement = react_2.screen.queryByRole("status");
|
|
35
|
+
expect(expectedElement).toBeInTheDocument();
|
|
36
|
+
expect(expectedElement === null || expectedElement === void 0 ? void 0 : expectedElement.textContent).toBe(message);
|
|
37
|
+
expect(expectedElement).toHaveAttribute("role", "status");
|
|
38
|
+
expect(expectedElement).toHaveAttribute("aria-atomic", "true");
|
|
39
|
+
expect(expectedElement).toHaveAttribute("aria-live", "assertive");
|
|
87
40
|
});
|
|
88
|
-
})
|
|
89
|
-
it("should not render the announced div",
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
41
|
+
}));
|
|
42
|
+
it("should not render the announced div", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
43
|
+
setupHook();
|
|
44
|
+
expect(react_2.screen.queryByRole("status")).not.toBeInTheDocument();
|
|
45
|
+
}));
|
|
46
|
+
it("should only have 1 div to announce a message on a single instance of the hook", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
47
|
+
const { liveAnnounce } = setupHook();
|
|
48
|
+
const firstMessage = "I am first";
|
|
49
|
+
const secondMessage = "I am second";
|
|
50
|
+
(0, react_2.act)(() => liveAnnounce(firstMessage));
|
|
51
|
+
yield (0, react_2.waitFor)(() => {
|
|
52
|
+
expect(react_2.screen.queryAllByRole("status")).toHaveLength(1);
|
|
53
|
+
expect(react_2.screen.getByRole("status").textContent).toBe(firstMessage);
|
|
94
54
|
});
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
switch (_a.label) {
|
|
100
|
-
case 0:
|
|
101
|
-
liveAnnounce = setupHook().liveAnnounce;
|
|
102
|
-
firstMessage = "I am first";
|
|
103
|
-
secondMessage = "I am second";
|
|
104
|
-
react_2.act(function () { return liveAnnounce(firstMessage); });
|
|
105
|
-
return [4 /*yield*/, react_2.waitFor(function () {
|
|
106
|
-
expect(react_2.screen.queryAllByRole("status")).toHaveLength(1);
|
|
107
|
-
expect(react_2.screen.getByRole("status").textContent).toBe(firstMessage);
|
|
108
|
-
})];
|
|
109
|
-
case 1:
|
|
110
|
-
_a.sent();
|
|
111
|
-
react_2.act(function () { return liveAnnounce(secondMessage); });
|
|
112
|
-
return [4 /*yield*/, react_2.waitFor(function () {
|
|
113
|
-
expect(react_2.screen.queryAllByRole("status")).toHaveLength(1);
|
|
114
|
-
expect(react_2.screen.getByRole("status").textContent).toBe(secondMessage);
|
|
115
|
-
})];
|
|
116
|
-
case 2:
|
|
117
|
-
_a.sent();
|
|
118
|
-
return [2 /*return*/];
|
|
119
|
-
}
|
|
55
|
+
(0, react_2.act)(() => liveAnnounce(secondMessage));
|
|
56
|
+
yield (0, react_2.waitFor)(() => {
|
|
57
|
+
expect(react_2.screen.queryAllByRole("status")).toHaveLength(1);
|
|
58
|
+
expect(react_2.screen.getByRole("status").textContent).toBe(secondMessage);
|
|
120
59
|
});
|
|
121
|
-
})
|
|
60
|
+
}));
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useOnKeyDown = void 0;
|
|
3
4
|
var useOnKeyDown_1 = require("./useOnKeyDown");
|
|
4
|
-
exports
|
|
5
|
+
Object.defineProperty(exports, "useOnKeyDown", { enumerable: true, get: function () { return useOnKeyDown_1.useOnKeyDown; } });
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { XOR } from "ts-xor";
|
|
2
|
-
|
|
2
|
+
type SimpleKeyComparator = KeyboardEvent["key"];
|
|
3
3
|
interface VerboseKeyComparator {
|
|
4
4
|
readonly key: SimpleKeyComparator;
|
|
5
5
|
readonly shiftKey?: boolean;
|
|
@@ -8,6 +8,6 @@ interface VerboseKeyComparator {
|
|
|
8
8
|
readonly metaKey?: boolean;
|
|
9
9
|
readonly [index: string]: boolean | string | undefined;
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
type KeyComparator = XOR<VerboseKeyComparator, SimpleKeyComparator>;
|
|
12
12
|
export declare function useOnKeyDown(callback: (event: KeyboardEvent) => void, keys: KeyComparator[] | KeyComparator): void;
|
|
13
13
|
export {};
|
|
@@ -3,27 +3,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
6
|
+
exports.useOnKeyDown = void 0;
|
|
7
|
+
const event_listener_1 = __importDefault(require("@use-it/event-listener"));
|
|
7
8
|
function useOnKeyDown(callback, keys) {
|
|
8
|
-
event_listener_1.default("keydown", handler);
|
|
9
|
+
(0, event_listener_1.default)("keydown", handler);
|
|
9
10
|
function handler(event) {
|
|
10
|
-
|
|
11
|
+
const keyboardEvent = event;
|
|
11
12
|
if (typeof keys === "string" && keyboardEvent.key === keys) {
|
|
12
13
|
callback(event);
|
|
13
14
|
return;
|
|
14
15
|
}
|
|
15
16
|
if (Array.isArray(keys) &&
|
|
16
|
-
keys.some(
|
|
17
|
+
keys.some(item => {
|
|
17
18
|
if (typeof item === "string")
|
|
18
19
|
return keyboardEvent.key === item;
|
|
19
|
-
return Object.keys(item).every(
|
|
20
|
+
return Object.keys(item).every(index => keyboardEvent[index] === item[index]);
|
|
20
21
|
})) {
|
|
21
22
|
callback(event);
|
|
22
23
|
return;
|
|
23
24
|
}
|
|
24
25
|
if (!Array.isArray(keys) &&
|
|
25
26
|
typeof keys !== "string" &&
|
|
26
|
-
Object.keys(keys).every(
|
|
27
|
+
Object.keys(keys).every(index => keyboardEvent[index] === keys[index])) {
|
|
27
28
|
callback(event);
|
|
28
29
|
return;
|
|
29
30
|
}
|
|
@@ -3,22 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
test("fires the method when the key is pressed",
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const react_2 = require("@testing-library/react");
|
|
8
|
+
const _1 = require(".");
|
|
9
|
+
test("fires the method when the key is pressed", () => {
|
|
10
|
+
const keypressCallback = jest.fn();
|
|
11
|
+
const { container } = (0, react_2.render)(react_1.default.createElement(TestComponent, { callback: keypressCallback }));
|
|
12
12
|
expect(keypressCallback).toHaveBeenCalledTimes(0);
|
|
13
|
-
react_2.fireEvent(container, new KeyboardEvent("keydown", {
|
|
13
|
+
(0, react_2.fireEvent)(container, new KeyboardEvent("keydown", {
|
|
14
14
|
key: "Enter",
|
|
15
15
|
bubbles: true,
|
|
16
16
|
cancelable: false,
|
|
17
17
|
}));
|
|
18
18
|
expect(keypressCallback).toHaveBeenCalledTimes(1);
|
|
19
19
|
});
|
|
20
|
-
function TestComponent(
|
|
21
|
-
|
|
22
|
-
_1.useOnKeyDown(callback, "Enter");
|
|
20
|
+
function TestComponent({ callback }) {
|
|
21
|
+
(0, _1.useOnKeyDown)(callback, "Enter");
|
|
23
22
|
return react_1.default.createElement(react_1.default.Fragment, null, "Look at me!");
|
|
24
23
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.usePasswordStrength = void 0;
|
|
3
4
|
var usePasswordStrength_1 = require("./usePasswordStrength");
|
|
4
|
-
exports
|
|
5
|
+
Object.defineProperty(exports, "usePasswordStrength", { enumerable: true, get: function () { return usePasswordStrength_1.usePasswordStrength; } });
|
|
@@ -3,16 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
exports.usePasswordStrength = void 0;
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
const zxcvbn_1 = __importDefault(require("zxcvbn"));
|
|
8
9
|
function usePasswordStrength(password, dictionary) {
|
|
9
|
-
|
|
10
|
+
const { guesses, score, feedback: { warning, suggestions }, crack_times_display: { offline_fast_hashing_1e10_per_second: timeToCrack }, } = (0, react_1.useMemo)(() => (0, zxcvbn_1.default)(password, dictionary), [password, dictionary]);
|
|
10
11
|
return {
|
|
11
|
-
guesses
|
|
12
|
-
score
|
|
13
|
-
warning
|
|
14
|
-
suggestions
|
|
15
|
-
timeToCrack
|
|
12
|
+
guesses,
|
|
13
|
+
score,
|
|
14
|
+
warning,
|
|
15
|
+
suggestions,
|
|
16
|
+
timeToCrack,
|
|
16
17
|
};
|
|
17
18
|
}
|
|
18
19
|
exports.usePasswordStrength = usePasswordStrength;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useRefocusOnActivator = void 0;
|
|
3
4
|
var useRefocusOnActivator_1 = require("./useRefocusOnActivator");
|
|
4
|
-
exports
|
|
5
|
+
Object.defineProperty(exports, "useRefocusOnActivator", { enumerable: true, get: function () { return useRefocusOnActivator_1.useRefocusOnActivator; } });
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
3
|
+
exports.useRefocusOnActivator = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
4
5
|
/**
|
|
5
6
|
* Brings back the focus to the element that opened an overlaid element once
|
|
6
7
|
* said overlaid element is dismissed.
|
|
@@ -8,12 +9,12 @@ var react_1 = require("react");
|
|
|
8
9
|
* @param active - Determines if it should focus or not
|
|
9
10
|
*/
|
|
10
11
|
function useRefocusOnActivator(active) {
|
|
11
|
-
react_1.useEffect(
|
|
12
|
-
|
|
12
|
+
(0, react_1.useEffect)(() => {
|
|
13
|
+
let activator;
|
|
13
14
|
if (active && !activator) {
|
|
14
15
|
activator = document.activeElement;
|
|
15
16
|
}
|
|
16
|
-
return
|
|
17
|
+
return () => {
|
|
17
18
|
if (active) {
|
|
18
19
|
if (activator instanceof HTMLElement) {
|
|
19
20
|
activator.focus();
|