@mantine/hooks 5.8.1 → 5.8.3
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/cjs/use-click-outside/use-click-outside.js +1 -1
- package/cjs/use-click-outside/use-click-outside.js.map +1 -1
- package/cjs/use-focus-trap/create-aria-hider.js +2 -1
- package/cjs/use-focus-trap/create-aria-hider.js.map +1 -1
- package/cjs/use-focus-trap/scope-tab.js +2 -1
- package/cjs/use-focus-trap/scope-tab.js.map +1 -1
- package/cjs/use-focus-trap/tabbable.js +1 -1
- package/cjs/use-focus-trap/tabbable.js.map +1 -1
- package/cjs/use-focus-trap/use-focus-trap.js +1 -1
- package/cjs/use-focus-trap/use-focus-trap.js.map +1 -1
- package/esm/use-click-outside/use-click-outside.js +1 -1
- package/esm/use-click-outside/use-click-outside.js.map +1 -1
- package/esm/use-focus-trap/create-aria-hider.js +2 -1
- package/esm/use-focus-trap/create-aria-hider.js.map +1 -1
- package/esm/use-focus-trap/scope-tab.js +2 -1
- package/esm/use-focus-trap/scope-tab.js.map +1 -1
- package/esm/use-focus-trap/tabbable.js +1 -1
- package/esm/use-focus-trap/tabbable.js.map +1 -1
- package/esm/use-focus-trap/use-focus-trap.js +1 -1
- package/esm/use-focus-trap/use-focus-trap.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@ function useClickOutside(handler, events, nodes) {
|
|
|
12
12
|
const { target } = event != null ? event : {};
|
|
13
13
|
if (Array.isArray(nodes)) {
|
|
14
14
|
const shouldIgnore = (target == null ? void 0 : target.hasAttribute("data-ignore-outside-clicks")) || !document.body.contains(target);
|
|
15
|
-
const shouldTrigger = nodes.every((node) => !!node && !
|
|
15
|
+
const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));
|
|
16
16
|
shouldTrigger && !shouldIgnore && handler();
|
|
17
17
|
} else if (ref.current && !ref.current.contains(target)) {
|
|
18
18
|
handler();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-click-outside.js","sources":["../../src/use-click-outside/use-click-outside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nconst DEFAULT_EVENTS = ['mousedown', 'touchstart'];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n handler: () => void,\n events?: string[] | null,\n nodes?: HTMLElement[]\n) {\n const ref = useRef<T>();\n\n useEffect(() => {\n const listener = (event: any) => {\n const { target } = event ?? {};\n if (Array.isArray(nodes)) {\n const shouldIgnore =\n target?.hasAttribute('data-ignore-outside-clicks') || !document.body.contains(target);\n const shouldTrigger = nodes.every((node) => !!node && !
|
|
1
|
+
{"version":3,"file":"use-click-outside.js","sources":["../../src/use-click-outside/use-click-outside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nconst DEFAULT_EVENTS = ['mousedown', 'touchstart'];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n handler: () => void,\n events?: string[] | null,\n nodes?: HTMLElement[]\n) {\n const ref = useRef<T>();\n\n useEffect(() => {\n const listener = (event: any) => {\n const { target } = event ?? {};\n if (Array.isArray(nodes)) {\n const shouldIgnore =\n target?.hasAttribute('data-ignore-outside-clicks') || !document.body.contains(target);\n const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));\n shouldTrigger && !shouldIgnore && handler();\n } else if (ref.current && !ref.current.contains(target)) {\n handler();\n }\n };\n\n (events || DEFAULT_EVENTS).forEach((fn) => document.addEventListener(fn, listener));\n\n return () => {\n (events || DEFAULT_EVENTS).forEach((fn) => document.removeEventListener(fn, listener));\n };\n }, [ref, handler, nodes]);\n\n return ref;\n}\n"],"names":["useRef","useEffect"],"mappings":";;;;;;AACA,MAAM,cAAc,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAC5C,SAAS,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE;AACxD,EAAE,MAAM,GAAG,GAAGA,YAAM,EAAE,CAAC;AACvB,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,MAAM,QAAQ,GAAG,CAAC,KAAK,KAAK;AAChC,MAAM,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;AACpD,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAChC,QAAQ,MAAM,YAAY,GAAG,CAAC,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,YAAY,CAAC,4BAA4B,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC9I,QAAQ,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACpG,QAAQ,aAAa,IAAI,CAAC,YAAY,IAAI,OAAO,EAAE,CAAC;AACpD,OAAO,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;AAC/D,QAAQ,OAAO,EAAE,CAAC;AAClB,OAAO;AACP,KAAK,CAAC;AACN,IAAI,CAAC,MAAM,IAAI,cAAc,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,gBAAgB,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;AACxF,IAAI,OAAO,MAAM;AACjB,MAAM,CAAC,MAAM,IAAI,cAAc,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,mBAAmB,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC7F,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;AAC5B,EAAE,OAAO,GAAG,CAAC;AACb;;;;"}
|
|
@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
function createAriaHider(containerNode, selector = "body > :not(script)") {
|
|
6
6
|
const rootNodes = Array.from(document.querySelectorAll(selector)).map((node) => {
|
|
7
|
-
|
|
7
|
+
var _a;
|
|
8
|
+
if (((_a = node == null ? void 0 : node.shadowRoot) == null ? void 0 : _a.contains(containerNode)) || node.contains(containerNode)) {
|
|
8
9
|
return void 0;
|
|
9
10
|
}
|
|
10
11
|
const ariaHidden = node.getAttribute("aria-hidden");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-aria-hider.js","sources":["../../src/use-focus-trap/create-aria-hider.ts"],"sourcesContent":["type Value = {\n node: HTMLElement;\n ariaHidden: string;\n};\n\nexport function createAriaHider(\n containerNode: HTMLElement,\n selector: string = 'body > :not(script)'\n) {\n const rootNodes: Value[] = Array.from<HTMLElement>(document.querySelectorAll(selector)).map(\n (node) => {\n if (node.contains(containerNode)) {\n return undefined;\n }\n\n const ariaHidden = node.getAttribute('aria-hidden');\n\n if (ariaHidden === null || ariaHidden === 'false') {\n node.setAttribute('aria-hidden', 'true');\n }\n\n return { node, ariaHidden };\n }\n );\n\n return () => {\n rootNodes.forEach((item) => {\n if (!item) {\n return;\n }\n\n if (item.ariaHidden === null) {\n item.node.removeAttribute('aria-hidden');\n } else {\n item.node.setAttribute('aria-hidden', item.ariaHidden);\n }\n });\n };\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,eAAe,CAAC,aAAa,EAAE,QAAQ,GAAG,qBAAqB,EAAE;AACjF,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK;AAClF,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;
|
|
1
|
+
{"version":3,"file":"create-aria-hider.js","sources":["../../src/use-focus-trap/create-aria-hider.ts"],"sourcesContent":["type Value = {\n node: HTMLElement;\n ariaHidden: string;\n};\n\nexport function createAriaHider(\n containerNode: HTMLElement,\n selector: string = 'body > :not(script)'\n) {\n const rootNodes: Value[] = Array.from<HTMLElement>(document.querySelectorAll(selector)).map(\n (node) => {\n if (node?.shadowRoot?.contains(containerNode) || node.contains(containerNode)) {\n return undefined;\n }\n\n const ariaHidden = node.getAttribute('aria-hidden');\n\n if (ariaHidden === null || ariaHidden === 'false') {\n node.setAttribute('aria-hidden', 'true');\n }\n\n return { node, ariaHidden };\n }\n );\n\n return () => {\n rootNodes.forEach((item) => {\n if (!item) {\n return;\n }\n\n if (item.ariaHidden === null) {\n item.node.removeAttribute('aria-hidden');\n } else {\n item.node.setAttribute('aria-hidden', item.ariaHidden);\n }\n });\n };\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,eAAe,CAAC,aAAa,EAAE,QAAQ,GAAG,qBAAqB,EAAE;AACjF,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK;AAClF,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,CAAC,CAAC,EAAE,GAAG,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;AACxI,MAAM,OAAO,KAAK,CAAC,CAAC;AACpB,KAAK;AACL,IAAI,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;AACxD,IAAI,IAAI,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,OAAO,EAAE;AACvD,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAC/C,KAAK;AACL,IAAI,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;AAChC,GAAG,CAAC,CAAC;AACL,EAAE,OAAO,MAAM;AACf,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK;AAChC,MAAM,IAAI,CAAC,IAAI,EAAE;AACjB,QAAQ,OAAO;AACf,OAAO;AACP,MAAM,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;AACpC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;AACjD,OAAO,MAAM;AACb,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAC/D,OAAO;AACP,KAAK,CAAC,CAAC;AACP,GAAG,CAAC;AACJ;;;;"}
|
|
@@ -11,7 +11,8 @@ function scopeTab(node, event) {
|
|
|
11
11
|
return;
|
|
12
12
|
}
|
|
13
13
|
const finalTabbable = tabbable$1[event.shiftKey ? 0 : tabbable$1.length - 1];
|
|
14
|
-
const
|
|
14
|
+
const root = node.getRootNode();
|
|
15
|
+
const leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement;
|
|
15
16
|
if (!leavingFinalTabbable) {
|
|
16
17
|
return;
|
|
17
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scope-tab.js","sources":["../../src/use-focus-trap/scope-tab.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\nexport function scopeTab(node: HTMLElement, event: KeyboardEvent) {\n const tabbable = findTabbableDescendants(node);\n if (!tabbable.length) {\n event.preventDefault();\n return;\n }\n const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];\n const leavingFinalTabbable
|
|
1
|
+
{"version":3,"file":"scope-tab.js","sources":["../../src/use-focus-trap/scope-tab.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\nexport function scopeTab(node: HTMLElement, event: KeyboardEvent) {\n const tabbable = findTabbableDescendants(node);\n if (!tabbable.length) {\n event.preventDefault();\n return;\n }\n const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];\n const root = node.getRootNode() as unknown as DocumentOrShadowRoot;\n const leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement;\n\n if (!leavingFinalTabbable) {\n return;\n }\n\n event.preventDefault();\n\n const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];\n\n if (target) {\n target.focus();\n }\n}\n"],"names":["tabbable","findTabbableDescendants"],"mappings":";;;;;;AACO,SAAS,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE;AACtC,EAAE,MAAMA,UAAQ,GAAGC,gCAAuB,CAAC,IAAI,CAAC,CAAC;AACjD,EAAE,IAAI,CAACD,UAAQ,CAAC,MAAM,EAAE;AACxB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,IAAI,OAAO;AACX,GAAG;AACH,EAAE,MAAM,aAAa,GAAGA,UAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,GAAGA,UAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC3E,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;AAClC,EAAE,MAAM,oBAAoB,GAAG,aAAa,KAAK,IAAI,CAAC,aAAa,IAAI,IAAI,KAAK,IAAI,CAAC,aAAa,CAAC;AACnG,EAAE,IAAI,CAAC,oBAAoB,EAAE;AAC7B,IAAI,OAAO;AACX,GAAG;AACH,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC;AACzB,EAAE,MAAM,MAAM,GAAGA,UAAQ,CAAC,KAAK,CAAC,QAAQ,GAAGA,UAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AACpE,EAAE,IAAI,MAAM,EAAE;AACd,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;AACnB,GAAG;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabbable.js","sources":["../../src/use-focus-trap/tabbable.ts"],"sourcesContent":["const TABBABLE_NODES = /input|select|textarea|button|object/;\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nfunction hidden(element: HTMLElement) {\n if (process.env.NODE_ENV === 'test') {\n return false;\n }\n\n return element.style.display === 'none';\n}\n\nfunction visible(element: HTMLElement) {\n const isHidden =\n element.getAttribute('aria-hidden') ||\n element.getAttribute('hidden') ||\n element.getAttribute('type') === 'hidden';\n\n if (isHidden) {\n return false;\n }\n\n let parentElement: HTMLElement = element;\n while (parentElement) {\n if (parentElement === document.body) {\n break;\n }\n\n if (hidden(parentElement)) {\n return false;\n }\n\n parentElement = parentElement.parentNode as HTMLElement;\n }\n\n return true;\n}\n\nfunction getElementTabIndex(element: HTMLElement) {\n let tabIndex = element.getAttribute('tabindex');\n if (tabIndex === null) {\n tabIndex = undefined;\n }\n return parseInt(tabIndex, 10);\n}\n\nexport function focusable(element: HTMLElement) {\n const nodeName = element.nodeName.toLowerCase();\n const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));\n const res =\n // @ts-ignore\n (TABBABLE_NODES.test(nodeName) && !element.disabled) ||\n (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);\n\n return res && visible(element);\n}\n\nexport function tabbable(element: HTMLElement) {\n const tabIndex = getElementTabIndex(element);\n const isTabIndexNaN = Number.isNaN(tabIndex);\n return (isTabIndexNaN || tabIndex >= 0) && focusable(element);\n}\n\nexport function findTabbableDescendants(element: HTMLElement): HTMLElement[] {\n return Array.from(element.querySelectorAll<HTMLElement>(FOCUS_SELECTOR)).filter(tabbable);\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,qCAAqC,CAAC;AACjD,MAAC,cAAc,GAAG,yDAAyD;AACvF,SAAS,MAAM,CAAC,OAAO,EAAE;AACzB,EAAE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAAE;AACvC,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,OAAO,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC;AAC1C,CAAC;AACD,SAAS,OAAO,CAAC,OAAO,EAAE;AAC1B,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CAAC;AACtI,EAAE,IAAI,QAAQ,EAAE;AAChB,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,IAAI,aAAa,GAAG,OAAO,CAAC;AAC9B,EAAE,OAAO,aAAa,EAAE;AACxB,IAAI,IAAI,aAAa,KAAK,QAAQ,CAAC,IAAI,EAAE;
|
|
1
|
+
{"version":3,"file":"tabbable.js","sources":["../../src/use-focus-trap/tabbable.ts"],"sourcesContent":["const TABBABLE_NODES = /input|select|textarea|button|object/;\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nfunction hidden(element: HTMLElement) {\n if (process.env.NODE_ENV === 'test') {\n return false;\n }\n\n return element.style.display === 'none';\n}\n\nfunction visible(element: HTMLElement) {\n const isHidden =\n element.getAttribute('aria-hidden') ||\n element.getAttribute('hidden') ||\n element.getAttribute('type') === 'hidden';\n\n if (isHidden) {\n return false;\n }\n\n let parentElement: HTMLElement = element;\n while (parentElement) {\n if (parentElement === document.body || parentElement.nodeType === 11) {\n break;\n }\n\n if (hidden(parentElement)) {\n return false;\n }\n\n parentElement = parentElement.parentNode as HTMLElement;\n }\n\n return true;\n}\n\nfunction getElementTabIndex(element: HTMLElement) {\n let tabIndex = element.getAttribute('tabindex');\n if (tabIndex === null) {\n tabIndex = undefined;\n }\n return parseInt(tabIndex, 10);\n}\n\nexport function focusable(element: HTMLElement) {\n const nodeName = element.nodeName.toLowerCase();\n const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));\n const res =\n // @ts-ignore\n (TABBABLE_NODES.test(nodeName) && !element.disabled) ||\n (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);\n\n return res && visible(element);\n}\n\nexport function tabbable(element: HTMLElement) {\n const tabIndex = getElementTabIndex(element);\n const isTabIndexNaN = Number.isNaN(tabIndex);\n return (isTabIndexNaN || tabIndex >= 0) && focusable(element);\n}\n\nexport function findTabbableDescendants(element: HTMLElement): HTMLElement[] {\n return Array.from(element.querySelectorAll<HTMLElement>(FOCUS_SELECTOR)).filter(tabbable);\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,qCAAqC,CAAC;AACjD,MAAC,cAAc,GAAG,yDAAyD;AACvF,SAAS,MAAM,CAAC,OAAO,EAAE;AACzB,EAAE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAAE;AACvC,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,OAAO,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC;AAC1C,CAAC;AACD,SAAS,OAAO,CAAC,OAAO,EAAE;AAC1B,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CAAC;AACtI,EAAE,IAAI,QAAQ,EAAE;AAChB,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,IAAI,aAAa,GAAG,OAAO,CAAC;AAC9B,EAAE,OAAO,aAAa,EAAE;AACxB,IAAI,IAAI,aAAa,KAAK,QAAQ,CAAC,IAAI,IAAI,aAAa,CAAC,QAAQ,KAAK,EAAE,EAAE;AAC1E,MAAM,MAAM;AACZ,KAAK;AACL,IAAI,IAAI,MAAM,CAAC,aAAa,CAAC,EAAE;AAC/B,MAAM,OAAO,KAAK,CAAC;AACnB,KAAK;AACL,IAAI,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC;AAC7C,GAAG;AACH,EAAE,OAAO,IAAI,CAAC;AACd,CAAC;AACD,SAAS,kBAAkB,CAAC,OAAO,EAAE;AACrC,EAAE,IAAI,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;AAClD,EAAE,IAAI,QAAQ,KAAK,IAAI,EAAE;AACzB,IAAI,QAAQ,GAAG,KAAK,CAAC,CAAC;AACtB,GAAG;AACH,EAAE,OAAO,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;AAChC,CAAC;AACM,SAAS,SAAS,CAAC,OAAO,EAAE;AACnC,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;AAClD,EAAE,MAAM,gBAAgB,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;AACtE,EAAE,MAAM,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,OAAO,YAAY,iBAAiB,GAAG,OAAO,CAAC,IAAI,IAAI,gBAAgB,GAAG,gBAAgB,CAAC,CAAC;AACjK,EAAE,OAAO,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AACM,SAAS,QAAQ,CAAC,OAAO,EAAE;AAClC,EAAE,MAAM,QAAQ,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAC/C,EAAE,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC/C,EAAE,OAAO,CAAC,aAAa,IAAI,QAAQ,IAAI,CAAC,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC;AAChE,CAAC;AACM,SAAS,uBAAuB,CAAC,OAAO,EAAE;AACjD,EAAE,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC/E;;;;;;;"}
|
|
@@ -37,7 +37,7 @@ function useFocusTrap(active = true) {
|
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
setTimeout(() => {
|
|
40
|
-
if (node.
|
|
40
|
+
if (node.getRootNode()) {
|
|
41
41
|
processNode();
|
|
42
42
|
} else if (process.env.NODE_ENV === "development") {
|
|
43
43
|
console.warn("[@mantine/hooks/use-focus-trap] Ref node is not part of the dom", node);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-trap.js","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef<HTMLElement | null>();\n const restoreAria = useRef<Function | null>(null);\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (node === null) {\n return;\n }\n\n restoreAria.current = createAriaHider(node);\n if (ref.current === node) {\n return;\n }\n\n if (node) {\n const processNode = () => {\n let focusElement: HTMLElement = node.querySelector('[data-autofocus]');\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR));\n focusElement = children.find(tabbable) || children.find(focusable) || null;\n if (!focusElement && focusable(node)) focusElement = node;\n }\n\n if (focusElement) {\n focusElement.focus({ preventScroll: true });\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n '[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node',\n node\n );\n }\n };\n\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.
|
|
1
|
+
{"version":3,"file":"use-focus-trap.js","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef<HTMLElement | null>();\n const restoreAria = useRef<Function | null>(null);\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (node === null) {\n return;\n }\n\n restoreAria.current = createAriaHider(node);\n if (ref.current === node) {\n return;\n }\n\n if (node) {\n const processNode = () => {\n let focusElement: HTMLElement = node.querySelector('[data-autofocus]');\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR));\n focusElement = children.find(tabbable) || children.find(focusable) || null;\n if (!focusElement && focusable(node)) focusElement = node;\n }\n\n if (focusElement) {\n focusElement.focus({ preventScroll: true });\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n '[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node',\n node\n );\n }\n };\n\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.getRootNode()) {\n processNode();\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('[@mantine/hooks/use-focus-trap] Ref node is not part of the dom', node);\n }\n });\n\n ref.current = node;\n } else {\n ref.current = null;\n }\n },\n [active]\n );\n\n useEffect(() => {\n if (!active) {\n return undefined;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && ref.current) {\n scopeTab(ref.current, event);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n\n if (restoreAria.current) {\n restoreAria.current();\n }\n };\n }, [active]);\n\n return setRef;\n}\n"],"names":["useRef","useCallback","createAriaHider","FOCUS_SELECTOR","tabbable","focusable","useEffect","scopeTab"],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ function useClickOutside(handler, events, nodes) {
|
|
|
8
8
|
const { target } = event != null ? event : {};
|
|
9
9
|
if (Array.isArray(nodes)) {
|
|
10
10
|
const shouldIgnore = (target == null ? void 0 : target.hasAttribute("data-ignore-outside-clicks")) || !document.body.contains(target);
|
|
11
|
-
const shouldTrigger = nodes.every((node) => !!node && !
|
|
11
|
+
const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));
|
|
12
12
|
shouldTrigger && !shouldIgnore && handler();
|
|
13
13
|
} else if (ref.current && !ref.current.contains(target)) {
|
|
14
14
|
handler();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-click-outside.js","sources":["../../src/use-click-outside/use-click-outside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nconst DEFAULT_EVENTS = ['mousedown', 'touchstart'];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n handler: () => void,\n events?: string[] | null,\n nodes?: HTMLElement[]\n) {\n const ref = useRef<T>();\n\n useEffect(() => {\n const listener = (event: any) => {\n const { target } = event ?? {};\n if (Array.isArray(nodes)) {\n const shouldIgnore =\n target?.hasAttribute('data-ignore-outside-clicks') || !document.body.contains(target);\n const shouldTrigger = nodes.every((node) => !!node && !
|
|
1
|
+
{"version":3,"file":"use-click-outside.js","sources":["../../src/use-click-outside/use-click-outside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nconst DEFAULT_EVENTS = ['mousedown', 'touchstart'];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n handler: () => void,\n events?: string[] | null,\n nodes?: HTMLElement[]\n) {\n const ref = useRef<T>();\n\n useEffect(() => {\n const listener = (event: any) => {\n const { target } = event ?? {};\n if (Array.isArray(nodes)) {\n const shouldIgnore =\n target?.hasAttribute('data-ignore-outside-clicks') || !document.body.contains(target);\n const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));\n shouldTrigger && !shouldIgnore && handler();\n } else if (ref.current && !ref.current.contains(target)) {\n handler();\n }\n };\n\n (events || DEFAULT_EVENTS).forEach((fn) => document.addEventListener(fn, listener));\n\n return () => {\n (events || DEFAULT_EVENTS).forEach((fn) => document.removeEventListener(fn, listener));\n };\n }, [ref, handler, nodes]);\n\n return ref;\n}\n"],"names":[],"mappings":";;AACA,MAAM,cAAc,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAC5C,SAAS,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE;AACxD,EAAE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACvB,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,MAAM,QAAQ,GAAG,CAAC,KAAK,KAAK;AAChC,MAAM,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;AACpD,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAChC,QAAQ,MAAM,YAAY,GAAG,CAAC,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,YAAY,CAAC,4BAA4B,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC9I,QAAQ,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACpG,QAAQ,aAAa,IAAI,CAAC,YAAY,IAAI,OAAO,EAAE,CAAC;AACpD,OAAO,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;AAC/D,QAAQ,OAAO,EAAE,CAAC;AAClB,OAAO;AACP,KAAK,CAAC;AACN,IAAI,CAAC,MAAM,IAAI,cAAc,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,gBAAgB,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;AACxF,IAAI,OAAO,MAAM;AACjB,MAAM,CAAC,MAAM,IAAI,cAAc,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,mBAAmB,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC7F,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;AAC5B,EAAE,OAAO,GAAG,CAAC;AACb;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
function createAriaHider(containerNode, selector = "body > :not(script)") {
|
|
2
2
|
const rootNodes = Array.from(document.querySelectorAll(selector)).map((node) => {
|
|
3
|
-
|
|
3
|
+
var _a;
|
|
4
|
+
if (((_a = node == null ? void 0 : node.shadowRoot) == null ? void 0 : _a.contains(containerNode)) || node.contains(containerNode)) {
|
|
4
5
|
return void 0;
|
|
5
6
|
}
|
|
6
7
|
const ariaHidden = node.getAttribute("aria-hidden");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-aria-hider.js","sources":["../../src/use-focus-trap/create-aria-hider.ts"],"sourcesContent":["type Value = {\n node: HTMLElement;\n ariaHidden: string;\n};\n\nexport function createAriaHider(\n containerNode: HTMLElement,\n selector: string = 'body > :not(script)'\n) {\n const rootNodes: Value[] = Array.from<HTMLElement>(document.querySelectorAll(selector)).map(\n (node) => {\n if (node.contains(containerNode)) {\n return undefined;\n }\n\n const ariaHidden = node.getAttribute('aria-hidden');\n\n if (ariaHidden === null || ariaHidden === 'false') {\n node.setAttribute('aria-hidden', 'true');\n }\n\n return { node, ariaHidden };\n }\n );\n\n return () => {\n rootNodes.forEach((item) => {\n if (!item) {\n return;\n }\n\n if (item.ariaHidden === null) {\n item.node.removeAttribute('aria-hidden');\n } else {\n item.node.setAttribute('aria-hidden', item.ariaHidden);\n }\n });\n };\n}\n"],"names":[],"mappings":"AAAO,SAAS,eAAe,CAAC,aAAa,EAAE,QAAQ,GAAG,qBAAqB,EAAE;AACjF,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK;AAClF,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;
|
|
1
|
+
{"version":3,"file":"create-aria-hider.js","sources":["../../src/use-focus-trap/create-aria-hider.ts"],"sourcesContent":["type Value = {\n node: HTMLElement;\n ariaHidden: string;\n};\n\nexport function createAriaHider(\n containerNode: HTMLElement,\n selector: string = 'body > :not(script)'\n) {\n const rootNodes: Value[] = Array.from<HTMLElement>(document.querySelectorAll(selector)).map(\n (node) => {\n if (node?.shadowRoot?.contains(containerNode) || node.contains(containerNode)) {\n return undefined;\n }\n\n const ariaHidden = node.getAttribute('aria-hidden');\n\n if (ariaHidden === null || ariaHidden === 'false') {\n node.setAttribute('aria-hidden', 'true');\n }\n\n return { node, ariaHidden };\n }\n );\n\n return () => {\n rootNodes.forEach((item) => {\n if (!item) {\n return;\n }\n\n if (item.ariaHidden === null) {\n item.node.removeAttribute('aria-hidden');\n } else {\n item.node.setAttribute('aria-hidden', item.ariaHidden);\n }\n });\n };\n}\n"],"names":[],"mappings":"AAAO,SAAS,eAAe,CAAC,aAAa,EAAE,QAAQ,GAAG,qBAAqB,EAAE;AACjF,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK;AAClF,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,CAAC,CAAC,EAAE,GAAG,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;AACxI,MAAM,OAAO,KAAK,CAAC,CAAC;AACpB,KAAK;AACL,IAAI,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;AACxD,IAAI,IAAI,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,OAAO,EAAE;AACvD,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAC/C,KAAK;AACL,IAAI,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;AAChC,GAAG,CAAC,CAAC;AACL,EAAE,OAAO,MAAM;AACf,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK;AAChC,MAAM,IAAI,CAAC,IAAI,EAAE;AACjB,QAAQ,OAAO;AACf,OAAO;AACP,MAAM,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;AACpC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;AACjD,OAAO,MAAM;AACb,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAC/D,OAAO;AACP,KAAK,CAAC,CAAC;AACP,GAAG,CAAC;AACJ;;;;"}
|
|
@@ -7,7 +7,8 @@ function scopeTab(node, event) {
|
|
|
7
7
|
return;
|
|
8
8
|
}
|
|
9
9
|
const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
|
|
10
|
-
const
|
|
10
|
+
const root = node.getRootNode();
|
|
11
|
+
const leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement;
|
|
11
12
|
if (!leavingFinalTabbable) {
|
|
12
13
|
return;
|
|
13
14
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scope-tab.js","sources":["../../src/use-focus-trap/scope-tab.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\nexport function scopeTab(node: HTMLElement, event: KeyboardEvent) {\n const tabbable = findTabbableDescendants(node);\n if (!tabbable.length) {\n event.preventDefault();\n return;\n }\n const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];\n const leavingFinalTabbable
|
|
1
|
+
{"version":3,"file":"scope-tab.js","sources":["../../src/use-focus-trap/scope-tab.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\nexport function scopeTab(node: HTMLElement, event: KeyboardEvent) {\n const tabbable = findTabbableDescendants(node);\n if (!tabbable.length) {\n event.preventDefault();\n return;\n }\n const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];\n const root = node.getRootNode() as unknown as DocumentOrShadowRoot;\n const leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement;\n\n if (!leavingFinalTabbable) {\n return;\n }\n\n event.preventDefault();\n\n const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];\n\n if (target) {\n target.focus();\n }\n}\n"],"names":[],"mappings":";;AACO,SAAS,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE;AACtC,EAAE,MAAM,QAAQ,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC;AACjD,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;AACxB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,IAAI,OAAO;AACX,GAAG;AACH,EAAE,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC3E,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;AAClC,EAAE,MAAM,oBAAoB,GAAG,aAAa,KAAK,IAAI,CAAC,aAAa,IAAI,IAAI,KAAK,IAAI,CAAC,aAAa,CAAC;AACnG,EAAE,IAAI,CAAC,oBAAoB,EAAE;AAC7B,IAAI,OAAO;AACX,GAAG;AACH,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC;AACzB,EAAE,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AACpE,EAAE,IAAI,MAAM,EAAE;AACd,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;AACnB,GAAG;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabbable.js","sources":["../../src/use-focus-trap/tabbable.ts"],"sourcesContent":["const TABBABLE_NODES = /input|select|textarea|button|object/;\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nfunction hidden(element: HTMLElement) {\n if (process.env.NODE_ENV === 'test') {\n return false;\n }\n\n return element.style.display === 'none';\n}\n\nfunction visible(element: HTMLElement) {\n const isHidden =\n element.getAttribute('aria-hidden') ||\n element.getAttribute('hidden') ||\n element.getAttribute('type') === 'hidden';\n\n if (isHidden) {\n return false;\n }\n\n let parentElement: HTMLElement = element;\n while (parentElement) {\n if (parentElement === document.body) {\n break;\n }\n\n if (hidden(parentElement)) {\n return false;\n }\n\n parentElement = parentElement.parentNode as HTMLElement;\n }\n\n return true;\n}\n\nfunction getElementTabIndex(element: HTMLElement) {\n let tabIndex = element.getAttribute('tabindex');\n if (tabIndex === null) {\n tabIndex = undefined;\n }\n return parseInt(tabIndex, 10);\n}\n\nexport function focusable(element: HTMLElement) {\n const nodeName = element.nodeName.toLowerCase();\n const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));\n const res =\n // @ts-ignore\n (TABBABLE_NODES.test(nodeName) && !element.disabled) ||\n (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);\n\n return res && visible(element);\n}\n\nexport function tabbable(element: HTMLElement) {\n const tabIndex = getElementTabIndex(element);\n const isTabIndexNaN = Number.isNaN(tabIndex);\n return (isTabIndexNaN || tabIndex >= 0) && focusable(element);\n}\n\nexport function findTabbableDescendants(element: HTMLElement): HTMLElement[] {\n return Array.from(element.querySelectorAll<HTMLElement>(FOCUS_SELECTOR)).filter(tabbable);\n}\n"],"names":[],"mappings":"AAAA,MAAM,cAAc,GAAG,qCAAqC,CAAC;AACjD,MAAC,cAAc,GAAG,yDAAyD;AACvF,SAAS,MAAM,CAAC,OAAO,EAAE;AACzB,EAAE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAAE;AACvC,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,OAAO,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC;AAC1C,CAAC;AACD,SAAS,OAAO,CAAC,OAAO,EAAE;AAC1B,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CAAC;AACtI,EAAE,IAAI,QAAQ,EAAE;AAChB,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,IAAI,aAAa,GAAG,OAAO,CAAC;AAC9B,EAAE,OAAO,aAAa,EAAE;AACxB,IAAI,IAAI,aAAa,KAAK,QAAQ,CAAC,IAAI,EAAE;
|
|
1
|
+
{"version":3,"file":"tabbable.js","sources":["../../src/use-focus-trap/tabbable.ts"],"sourcesContent":["const TABBABLE_NODES = /input|select|textarea|button|object/;\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nfunction hidden(element: HTMLElement) {\n if (process.env.NODE_ENV === 'test') {\n return false;\n }\n\n return element.style.display === 'none';\n}\n\nfunction visible(element: HTMLElement) {\n const isHidden =\n element.getAttribute('aria-hidden') ||\n element.getAttribute('hidden') ||\n element.getAttribute('type') === 'hidden';\n\n if (isHidden) {\n return false;\n }\n\n let parentElement: HTMLElement = element;\n while (parentElement) {\n if (parentElement === document.body || parentElement.nodeType === 11) {\n break;\n }\n\n if (hidden(parentElement)) {\n return false;\n }\n\n parentElement = parentElement.parentNode as HTMLElement;\n }\n\n return true;\n}\n\nfunction getElementTabIndex(element: HTMLElement) {\n let tabIndex = element.getAttribute('tabindex');\n if (tabIndex === null) {\n tabIndex = undefined;\n }\n return parseInt(tabIndex, 10);\n}\n\nexport function focusable(element: HTMLElement) {\n const nodeName = element.nodeName.toLowerCase();\n const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));\n const res =\n // @ts-ignore\n (TABBABLE_NODES.test(nodeName) && !element.disabled) ||\n (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);\n\n return res && visible(element);\n}\n\nexport function tabbable(element: HTMLElement) {\n const tabIndex = getElementTabIndex(element);\n const isTabIndexNaN = Number.isNaN(tabIndex);\n return (isTabIndexNaN || tabIndex >= 0) && focusable(element);\n}\n\nexport function findTabbableDescendants(element: HTMLElement): HTMLElement[] {\n return Array.from(element.querySelectorAll<HTMLElement>(FOCUS_SELECTOR)).filter(tabbable);\n}\n"],"names":[],"mappings":"AAAA,MAAM,cAAc,GAAG,qCAAqC,CAAC;AACjD,MAAC,cAAc,GAAG,yDAAyD;AACvF,SAAS,MAAM,CAAC,OAAO,EAAE;AACzB,EAAE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAAE;AACvC,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,OAAO,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC;AAC1C,CAAC;AACD,SAAS,OAAO,CAAC,OAAO,EAAE;AAC1B,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CAAC;AACtI,EAAE,IAAI,QAAQ,EAAE;AAChB,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,IAAI,aAAa,GAAG,OAAO,CAAC;AAC9B,EAAE,OAAO,aAAa,EAAE;AACxB,IAAI,IAAI,aAAa,KAAK,QAAQ,CAAC,IAAI,IAAI,aAAa,CAAC,QAAQ,KAAK,EAAE,EAAE;AAC1E,MAAM,MAAM;AACZ,KAAK;AACL,IAAI,IAAI,MAAM,CAAC,aAAa,CAAC,EAAE;AAC/B,MAAM,OAAO,KAAK,CAAC;AACnB,KAAK;AACL,IAAI,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC;AAC7C,GAAG;AACH,EAAE,OAAO,IAAI,CAAC;AACd,CAAC;AACD,SAAS,kBAAkB,CAAC,OAAO,EAAE;AACrC,EAAE,IAAI,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;AAClD,EAAE,IAAI,QAAQ,KAAK,IAAI,EAAE;AACzB,IAAI,QAAQ,GAAG,KAAK,CAAC,CAAC;AACtB,GAAG;AACH,EAAE,OAAO,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;AAChC,CAAC;AACM,SAAS,SAAS,CAAC,OAAO,EAAE;AACnC,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;AAClD,EAAE,MAAM,gBAAgB,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;AACtE,EAAE,MAAM,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,OAAO,YAAY,iBAAiB,GAAG,OAAO,CAAC,IAAI,IAAI,gBAAgB,GAAG,gBAAgB,CAAC,CAAC;AACjK,EAAE,OAAO,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AACM,SAAS,QAAQ,CAAC,OAAO,EAAE;AAClC,EAAE,MAAM,QAAQ,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAC/C,EAAE,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC/C,EAAE,OAAO,CAAC,aAAa,IAAI,QAAQ,IAAI,CAAC,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC;AAChE,CAAC;AACM,SAAS,uBAAuB,CAAC,OAAO,EAAE;AACjD,EAAE,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC/E;;;;"}
|
|
@@ -33,7 +33,7 @@ function useFocusTrap(active = true) {
|
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
setTimeout(() => {
|
|
36
|
-
if (node.
|
|
36
|
+
if (node.getRootNode()) {
|
|
37
37
|
processNode();
|
|
38
38
|
} else if (process.env.NODE_ENV === "development") {
|
|
39
39
|
console.warn("[@mantine/hooks/use-focus-trap] Ref node is not part of the dom", node);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-trap.js","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef<HTMLElement | null>();\n const restoreAria = useRef<Function | null>(null);\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (node === null) {\n return;\n }\n\n restoreAria.current = createAriaHider(node);\n if (ref.current === node) {\n return;\n }\n\n if (node) {\n const processNode = () => {\n let focusElement: HTMLElement = node.querySelector('[data-autofocus]');\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR));\n focusElement = children.find(tabbable) || children.find(focusable) || null;\n if (!focusElement && focusable(node)) focusElement = node;\n }\n\n if (focusElement) {\n focusElement.focus({ preventScroll: true });\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n '[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node',\n node\n );\n }\n };\n\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.
|
|
1
|
+
{"version":3,"file":"use-focus-trap.js","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef<HTMLElement | null>();\n const restoreAria = useRef<Function | null>(null);\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (node === null) {\n return;\n }\n\n restoreAria.current = createAriaHider(node);\n if (ref.current === node) {\n return;\n }\n\n if (node) {\n const processNode = () => {\n let focusElement: HTMLElement = node.querySelector('[data-autofocus]');\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR));\n focusElement = children.find(tabbable) || children.find(focusable) || null;\n if (!focusElement && focusable(node)) focusElement = node;\n }\n\n if (focusElement) {\n focusElement.focus({ preventScroll: true });\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n '[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node',\n node\n );\n }\n };\n\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.getRootNode()) {\n processNode();\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('[@mantine/hooks/use-focus-trap] Ref node is not part of the dom', node);\n }\n });\n\n ref.current = node;\n } else {\n ref.current = null;\n }\n },\n [active]\n );\n\n useEffect(() => {\n if (!active) {\n return undefined;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && ref.current) {\n scopeTab(ref.current, event);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n\n if (restoreAria.current) {\n restoreAria.current();\n }\n };\n }, [active]);\n\n return setRef;\n}\n"],"names":[],"mappings":"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"}
|