@huin-core/react-focus-guards 1.0.1 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.mts +9 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +69 -0
- package/dist/index.js.map +7 -0
- package/dist/index.mjs +37 -0
- package/dist/index.mjs.map +7 -0
- package/package.json +1 -1
package/dist/index.d.mts
ADDED
@@ -0,0 +1,9 @@
|
|
1
|
+
declare function FocusGuards(props: any): any;
|
2
|
+
/**
|
3
|
+
* Injects a pair of focus guards at the edges of the whole DOM tree
|
4
|
+
* to ensure `focusin` & `focusout` events can be caught consistently.
|
5
|
+
*/
|
6
|
+
declare function useFocusGuards(): void;
|
7
|
+
declare const Root: typeof FocusGuards;
|
8
|
+
|
9
|
+
export { FocusGuards, Root, useFocusGuards };
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,9 @@
|
|
1
|
+
declare function FocusGuards(props: any): any;
|
2
|
+
/**
|
3
|
+
* Injects a pair of focus guards at the edges of the whole DOM tree
|
4
|
+
* to ensure `focusin` & `focusout` events can be caught consistently.
|
5
|
+
*/
|
6
|
+
declare function useFocusGuards(): void;
|
7
|
+
declare const Root: typeof FocusGuards;
|
8
|
+
|
9
|
+
export { FocusGuards, Root, useFocusGuards };
|
package/dist/index.js
ADDED
@@ -0,0 +1,69 @@
|
|
1
|
+
"use strict";
|
2
|
+
"use client";
|
3
|
+
var __create = Object.create;
|
4
|
+
var __defProp = Object.defineProperty;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
9
|
+
var __export = (target, all) => {
|
10
|
+
for (var name in all)
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
12
|
+
};
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
15
|
+
for (let key of __getOwnPropNames(from))
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
18
|
+
}
|
19
|
+
return to;
|
20
|
+
};
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
27
|
+
mod
|
28
|
+
));
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
30
|
+
|
31
|
+
// packages/react/focus-guards/src/index.ts
|
32
|
+
var src_exports = {};
|
33
|
+
__export(src_exports, {
|
34
|
+
FocusGuards: () => FocusGuards,
|
35
|
+
Root: () => Root,
|
36
|
+
useFocusGuards: () => useFocusGuards
|
37
|
+
});
|
38
|
+
module.exports = __toCommonJS(src_exports);
|
39
|
+
|
40
|
+
// packages/react/focus-guards/src/FocusGuards.tsx
|
41
|
+
var React = __toESM(require("react"));
|
42
|
+
var count = 0;
|
43
|
+
function FocusGuards(props) {
|
44
|
+
useFocusGuards();
|
45
|
+
return props.children;
|
46
|
+
}
|
47
|
+
function useFocusGuards() {
|
48
|
+
React.useEffect(() => {
|
49
|
+
const edgeGuards = document.querySelectorAll("[data-huin-core-focus-guard]");
|
50
|
+
document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
|
51
|
+
document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
|
52
|
+
count++;
|
53
|
+
return () => {
|
54
|
+
if (count === 1) {
|
55
|
+
document.querySelectorAll("[data-huin-core-focus-guard]").forEach((node) => node.remove());
|
56
|
+
}
|
57
|
+
count--;
|
58
|
+
};
|
59
|
+
}, []);
|
60
|
+
}
|
61
|
+
function createFocusGuard() {
|
62
|
+
const element = document.createElement("span");
|
63
|
+
element.setAttribute("data-huin-core-focus-guard", "");
|
64
|
+
element.tabIndex = 0;
|
65
|
+
element.style.cssText = "outline: none; opacity: 0; position: fixed; pointer-events: none";
|
66
|
+
return element;
|
67
|
+
}
|
68
|
+
var Root = FocusGuards;
|
69
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/index.ts", "../src/FocusGuards.tsx"],
|
4
|
+
"sourcesContent": ["'use client';\nexport {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n} from './FocusGuards';\n", "import * as React from 'react';\n\n/** Number of components which have requested interest to have focus guards */\nlet count = 0;\n\nfunction FocusGuards(props: any) {\n useFocusGuards();\n return props.children;\n}\n\n/**\n * Injects a pair of focus guards at the edges of the whole DOM tree\n * to ensure `focusin` & `focusout` events can be caught consistently.\n */\nfunction useFocusGuards() {\n React.useEffect(() => {\n const edgeGuards = document.querySelectorAll('[data-huin-core-focus-guard]');\n document.body.insertAdjacentElement('afterbegin', edgeGuards[0] ?? createFocusGuard());\n document.body.insertAdjacentElement('beforeend', edgeGuards[1] ?? createFocusGuard());\n count++;\n\n return () => {\n if (count === 1) {\n document.querySelectorAll('[data-huin-core-focus-guard]').forEach((node) => node.remove());\n }\n count--;\n };\n }, []);\n}\n\nfunction createFocusGuard() {\n const element = document.createElement('span');\n element.setAttribute('data-huin-core-focus-guard', '');\n element.tabIndex = 0;\n element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none';\n return element;\n}\n\nconst Root = FocusGuards;\n\nexport {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n};\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AAGvB,IAAI,QAAQ;AAEZ,SAAS,YAAY,OAAY;AAC/B,iBAAe;AACf,SAAO,MAAM;AACf;AAMA,SAAS,iBAAiB;AACxB,EAAM,gBAAU,MAAM;AACpB,UAAM,aAAa,SAAS,iBAAiB,8BAA8B;AAC3E,aAAS,KAAK,sBAAsB,cAAc,WAAW,CAAC,KAAK,iBAAiB,CAAC;AACrF,aAAS,KAAK,sBAAsB,aAAa,WAAW,CAAC,KAAK,iBAAiB,CAAC;AACpF;AAEA,WAAO,MAAM;AACX,UAAI,UAAU,GAAG;AACf,iBAAS,iBAAiB,8BAA8B,EAAE,QAAQ,CAAC,SAAS,KAAK,OAAO,CAAC;AAAA,MAC3F;AACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACP;AAEA,SAAS,mBAAmB;AAC1B,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,UAAQ,aAAa,8BAA8B,EAAE;AACrD,UAAQ,WAAW;AACnB,UAAQ,MAAM,UAAU;AACxB,SAAO;AACT;AAEA,IAAM,OAAO;",
|
6
|
+
"names": []
|
7
|
+
}
|
package/dist/index.mjs
ADDED
@@ -0,0 +1,37 @@
|
|
1
|
+
"use client";
|
2
|
+
|
3
|
+
// packages/react/focus-guards/src/FocusGuards.tsx
|
4
|
+
import * as React from "react";
|
5
|
+
var count = 0;
|
6
|
+
function FocusGuards(props) {
|
7
|
+
useFocusGuards();
|
8
|
+
return props.children;
|
9
|
+
}
|
10
|
+
function useFocusGuards() {
|
11
|
+
React.useEffect(() => {
|
12
|
+
const edgeGuards = document.querySelectorAll("[data-huin-core-focus-guard]");
|
13
|
+
document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
|
14
|
+
document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
|
15
|
+
count++;
|
16
|
+
return () => {
|
17
|
+
if (count === 1) {
|
18
|
+
document.querySelectorAll("[data-huin-core-focus-guard]").forEach((node) => node.remove());
|
19
|
+
}
|
20
|
+
count--;
|
21
|
+
};
|
22
|
+
}, []);
|
23
|
+
}
|
24
|
+
function createFocusGuard() {
|
25
|
+
const element = document.createElement("span");
|
26
|
+
element.setAttribute("data-huin-core-focus-guard", "");
|
27
|
+
element.tabIndex = 0;
|
28
|
+
element.style.cssText = "outline: none; opacity: 0; position: fixed; pointer-events: none";
|
29
|
+
return element;
|
30
|
+
}
|
31
|
+
var Root = FocusGuards;
|
32
|
+
export {
|
33
|
+
FocusGuards,
|
34
|
+
Root,
|
35
|
+
useFocusGuards
|
36
|
+
};
|
37
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/FocusGuards.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\n\n/** Number of components which have requested interest to have focus guards */\nlet count = 0;\n\nfunction FocusGuards(props: any) {\n useFocusGuards();\n return props.children;\n}\n\n/**\n * Injects a pair of focus guards at the edges of the whole DOM tree\n * to ensure `focusin` & `focusout` events can be caught consistently.\n */\nfunction useFocusGuards() {\n React.useEffect(() => {\n const edgeGuards = document.querySelectorAll('[data-huin-core-focus-guard]');\n document.body.insertAdjacentElement('afterbegin', edgeGuards[0] ?? createFocusGuard());\n document.body.insertAdjacentElement('beforeend', edgeGuards[1] ?? createFocusGuard());\n count++;\n\n return () => {\n if (count === 1) {\n document.querySelectorAll('[data-huin-core-focus-guard]').forEach((node) => node.remove());\n }\n count--;\n };\n }, []);\n}\n\nfunction createFocusGuard() {\n const element = document.createElement('span');\n element.setAttribute('data-huin-core-focus-guard', '');\n element.tabIndex = 0;\n element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none';\n return element;\n}\n\nconst Root = FocusGuards;\n\nexport {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n};\n"],
|
5
|
+
"mappings": ";;;AAAA,YAAY,WAAW;AAGvB,IAAI,QAAQ;AAEZ,SAAS,YAAY,OAAY;AAC/B,iBAAe;AACf,SAAO,MAAM;AACf;AAMA,SAAS,iBAAiB;AACxB,EAAM,gBAAU,MAAM;AACpB,UAAM,aAAa,SAAS,iBAAiB,8BAA8B;AAC3E,aAAS,KAAK,sBAAsB,cAAc,WAAW,CAAC,KAAK,iBAAiB,CAAC;AACrF,aAAS,KAAK,sBAAsB,aAAa,WAAW,CAAC,KAAK,iBAAiB,CAAC;AACpF;AAEA,WAAO,MAAM;AACX,UAAI,UAAU,GAAG;AACf,iBAAS,iBAAiB,8BAA8B,EAAE,QAAQ,CAAC,SAAS,KAAK,OAAO,CAAC;AAAA,MAC3F;AACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACP;AAEA,SAAS,mBAAmB;AAC1B,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,UAAQ,aAAa,8BAA8B,EAAE;AACrD,UAAQ,WAAW;AACnB,UAAQ,MAAM,UAAU;AACxB,SAAO;AACT;AAEA,IAAM,OAAO;",
|
6
|
+
"names": []
|
7
|
+
}
|