@tamagui/focus-scope 1.0.1-beta.72 → 1.0.1-beta.75
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/cjs/FocusScope.js
CHANGED
|
@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
|
|
|
21
21
|
return a;
|
|
22
22
|
};
|
|
23
23
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
24
|
var __objRest = (source, exclude) => {
|
|
26
25
|
var target = {};
|
|
27
26
|
for (var prop in source)
|
|
@@ -104,8 +103,6 @@ const FocusScope = React.forwardRef((props, forwardedRef) => {
|
|
|
104
103
|
focus(lastFocusedElementRef.current, { select: true });
|
|
105
104
|
}
|
|
106
105
|
};
|
|
107
|
-
__name(handleFocusIn, "handleFocusIn");
|
|
108
|
-
__name(handleFocusOut, "handleFocusOut");
|
|
109
106
|
document.addEventListener("focusin", handleFocusIn);
|
|
110
107
|
document.addEventListener("focusout", handleFocusOut);
|
|
111
108
|
return () => {
|
|
@@ -189,14 +186,12 @@ function focusFirst(candidates, { select = false } = {}) {
|
|
|
189
186
|
return;
|
|
190
187
|
}
|
|
191
188
|
}
|
|
192
|
-
__name(focusFirst, "focusFirst");
|
|
193
189
|
function getTabbableEdges(container) {
|
|
194
190
|
const candidates = getTabbableCandidates(container);
|
|
195
191
|
const first = findVisible(candidates, container);
|
|
196
192
|
const last = findVisible(candidates.reverse(), container);
|
|
197
193
|
return [first, last];
|
|
198
194
|
}
|
|
199
|
-
__name(getTabbableEdges, "getTabbableEdges");
|
|
200
195
|
function getTabbableCandidates(container) {
|
|
201
196
|
const nodes = [];
|
|
202
197
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
@@ -211,14 +206,12 @@ function getTabbableCandidates(container) {
|
|
|
211
206
|
nodes.push(walker.currentNode);
|
|
212
207
|
return nodes;
|
|
213
208
|
}
|
|
214
|
-
__name(getTabbableCandidates, "getTabbableCandidates");
|
|
215
209
|
function findVisible(elements, container) {
|
|
216
210
|
for (const element of elements) {
|
|
217
211
|
if (!isHidden(element, { upTo: container }))
|
|
218
212
|
return element;
|
|
219
213
|
}
|
|
220
214
|
}
|
|
221
|
-
__name(findVisible, "findVisible");
|
|
222
215
|
function isHidden(node, { upTo }) {
|
|
223
216
|
if (getComputedStyle(node).visibility === "hidden")
|
|
224
217
|
return true;
|
|
@@ -231,11 +224,9 @@ function isHidden(node, { upTo }) {
|
|
|
231
224
|
}
|
|
232
225
|
return false;
|
|
233
226
|
}
|
|
234
|
-
__name(isHidden, "isHidden");
|
|
235
227
|
function isSelectableInput(element) {
|
|
236
228
|
return element instanceof HTMLInputElement && "select" in element;
|
|
237
229
|
}
|
|
238
|
-
__name(isSelectableInput, "isSelectableInput");
|
|
239
230
|
function focus(element, { select = false } = {}) {
|
|
240
231
|
if (element && element.focus) {
|
|
241
232
|
const previouslyFocusedElement = document.activeElement;
|
|
@@ -244,7 +235,6 @@ function focus(element, { select = false } = {}) {
|
|
|
244
235
|
element.select();
|
|
245
236
|
}
|
|
246
237
|
}
|
|
247
|
-
__name(focus, "focus");
|
|
248
238
|
const focusScopesStack = createFocusScopesStack();
|
|
249
239
|
function createFocusScopesStack() {
|
|
250
240
|
let stack = [];
|
|
@@ -264,7 +254,6 @@ function createFocusScopesStack() {
|
|
|
264
254
|
}
|
|
265
255
|
};
|
|
266
256
|
}
|
|
267
|
-
__name(createFocusScopesStack, "createFocusScopesStack");
|
|
268
257
|
function arrayRemove(array, item) {
|
|
269
258
|
const updatedArray = [...array];
|
|
270
259
|
const index = updatedArray.indexOf(item);
|
|
@@ -273,11 +262,9 @@ function arrayRemove(array, item) {
|
|
|
273
262
|
}
|
|
274
263
|
return updatedArray;
|
|
275
264
|
}
|
|
276
|
-
__name(arrayRemove, "arrayRemove");
|
|
277
265
|
function removeLinks(items) {
|
|
278
266
|
return items.filter((item) => item.tagName !== "A");
|
|
279
267
|
}
|
|
280
|
-
__name(removeLinks, "removeLinks");
|
|
281
268
|
// Annotate the CommonJS export names for ESM import in node:
|
|
282
269
|
0 && (module.exports = {
|
|
283
270
|
FocusScope
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/FocusScope.tsx"],
|
|
4
4
|
"sourcesContent": ["import { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\nimport { FocusScopeProps } from './FocusScopeProps'\n\nconst AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount'\nconst AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount'\nconst EVENT_OPTIONS = { bubbles: false, cancelable: true }\n\ntype FocusableTarget = HTMLElement | { focus(): void }\n\n/* -------------------------------------------------------------------------------------------------\n * FocusScope\n * -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_SCOPE_NAME = 'FocusScope'\n\ntype FocusScopeElement = HTMLDivElement\n\nconst FocusScope = React.forwardRef<FocusScopeElement, FocusScopeProps>((props, forwardedRef) => {\n const {\n loop = false,\n trapped = false,\n onMountAutoFocus: onMountAutoFocusProp,\n onUnmountAutoFocus: onUnmountAutoFocusProp,\n ...scopeProps\n } = props\n const [container, setContainer] = React.useState<HTMLElement | null>(null)\n const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp)\n const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp)\n const lastFocusedElementRef = React.useRef<HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node))\n\n const focusScope = React.useRef({\n paused: false,\n pause() {\n this.paused = true\n },\n resume() {\n this.paused = false\n },\n }).current\n\n // Takes care of trapping focus if focus is moved outside programmatically for example\n React.useEffect(() => {\n if (trapped) {\n function handleFocusIn(event: FocusEvent) {\n if (focusScope.paused || !container) return\n const target = event.target as HTMLElement | null\n if (container.contains(target)) {\n lastFocusedElementRef.current = target\n } else {\n focus(lastFocusedElementRef.current, { select: true })\n }\n }\n\n function handleFocusOut(event: FocusEvent) {\n if (focusScope.paused || !container) return\n if (!container.contains(event.relatedTarget as HTMLElement | null)) {\n focus(lastFocusedElementRef.current, { select: true })\n }\n }\n\n document.addEventListener('focusin', handleFocusIn)\n document.addEventListener('focusout', handleFocusOut)\n return () => {\n document.removeEventListener('focusin', handleFocusIn)\n document.removeEventListener('focusout', handleFocusOut)\n }\n }\n }, [trapped, container, focusScope.paused])\n\n React.useEffect(() => {\n if (container) {\n focusScopesStack.add(focusScope)\n const previouslyFocusedElement = document.activeElement as HTMLElement | null\n const hasFocusedCandidate = container.contains(previouslyFocusedElement)\n\n if (!hasFocusedCandidate) {\n const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)\n container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus)\n container.dispatchEvent(mountEvent)\n if (!mountEvent.defaultPrevented) {\n focusFirst(removeLinks(getTabbableCandidates(container)), { select: true })\n if (document.activeElement === previouslyFocusedElement) {\n focus(container)\n }\n }\n }\n\n return () => {\n container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus)\n\n // We hit a react bug (fixed in v17) with focusing in unmount.\n // We need to delay the focus a little to get around it for now.\n // See: https://github.com/facebook/react/issues/17894\n setTimeout(() => {\n const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS)\n container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus)\n container.dispatchEvent(unmountEvent)\n if (!unmountEvent.defaultPrevented) {\n focus(previouslyFocusedElement ?? document.body, { select: true })\n }\n // we need to remove the listener after we `dispatchEvent`\n container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus)\n\n focusScopesStack.remove(focusScope)\n }, 0)\n }\n }\n }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope])\n\n // Takes care of looping focus (when tabbing whilst at the edges)\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (!loop && !trapped) return\n if (focusScope.paused) return\n\n const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey\n const focusedElement = document.activeElement as HTMLElement | null\n\n if (isTabKey && focusedElement) {\n const container = event.currentTarget as HTMLElement\n const [first, last] = getTabbableEdges(container)\n const hasTabbableElementsInside = first && last\n\n // we can only wrap focus if we have tabbable edges\n if (!hasTabbableElementsInside) {\n if (focusedElement === container) event.preventDefault()\n } else {\n if (!event.shiftKey && focusedElement === last) {\n event.preventDefault()\n if (loop) focus(first, { select: true })\n } else if (event.shiftKey && focusedElement === first) {\n event.preventDefault()\n if (loop) focus(last, { select: true })\n }\n }\n }\n },\n [loop, trapped, focusScope.paused]\n )\n\n const child = React.Children.only(props.children)\n\n return React.cloneElement(child as any, {\n tabIndex: -1,\n ...scopeProps,\n ref: composedRefs,\n onKeyDown: handleKeyDown,\n })\n})\n\nFocusScope.displayName = FOCUS_SCOPE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Attempts focusing the first element in a list of candidates.\n * Stops when focus has actually moved.\n */\nfunction focusFirst(candidates: HTMLElement[], { select = false } = {}) {\n const previouslyFocusedElement = document.activeElement\n for (const candidate of candidates) {\n focus(candidate, { select })\n if (document.activeElement !== previouslyFocusedElement) return\n }\n}\n\n/**\n * Returns the first and last tabbable elements inside a container.\n */\nfunction getTabbableEdges(container: HTMLElement) {\n const candidates = getTabbableCandidates(container)\n const first = findVisible(candidates, container)\n const last = findVisible(candidates.reverse(), container)\n return [first, last] as const\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: HTMLElement) {\n const nodes: HTMLElement[] = []\n const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n acceptNode: (node: any) => {\n const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP\n // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n // runtime's understanding of tabbability, so this automatically accounts\n // for any kind of element that could be tabbed to.\n return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP\n },\n })\n while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n // we do not take into account the order of nodes with positive `tabIndex` as it\n // hinders accessibility to have tab order different from visual order.\n return nodes\n}\n\n/**\n * Returns the first visible element in a list.\n * NOTE: Only checks visibility up to the `container`.\n */\nfunction findVisible(elements: HTMLElement[], container: HTMLElement) {\n for (const element of elements) {\n // we stop checking if it's hidden at the `container` level (excluding)\n if (!isHidden(element, { upTo: container })) return element\n }\n}\n\nfunction isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {\n if (getComputedStyle(node).visibility === 'hidden') return true\n while (node) {\n // we stop at `upTo` (excluding it)\n if (upTo !== undefined && node === upTo) return false\n if (getComputedStyle(node).display === 'none') return true\n node = node.parentElement as HTMLElement\n }\n return false\n}\n\nfunction isSelectableInput(element: any): element is FocusableTarget & { select: () => void } {\n return element instanceof HTMLInputElement && 'select' in element\n}\n\nfunction focus(element?: FocusableTarget | null, { select = false } = {}) {\n // only focus if that element is focusable\n if (element && element.focus) {\n const previouslyFocusedElement = document.activeElement\n // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users\n element.focus({ preventScroll: true })\n // only select if its not the same element, it supports selection and we need to select\n if (element !== previouslyFocusedElement && isSelectableInput(element) && select)\n element.select()\n }\n}\n\n/* -------------------------------------------------------------------------------------------------\n * FocusScope stack\n * -----------------------------------------------------------------------------------------------*/\n\ntype FocusScopeAPI = { paused: boolean; pause(): void; resume(): void }\nconst focusScopesStack = createFocusScopesStack()\n\nfunction createFocusScopesStack() {\n /** A stack of focus scopes, with the active one at the top */\n let stack: FocusScopeAPI[] = []\n\n return {\n add(focusScope: FocusScopeAPI) {\n // pause the currently active focus scope (at the top of the stack)\n const activeFocusScope = stack[0]\n if (focusScope !== activeFocusScope) {\n activeFocusScope?.pause()\n }\n // remove in case it already exists (because we'll re-add it at the top of the stack)\n stack = arrayRemove(stack, focusScope)\n stack.unshift(focusScope)\n },\n\n remove(focusScope: FocusScopeAPI) {\n stack = arrayRemove(stack, focusScope)\n stack[0]?.resume()\n },\n }\n}\n\nfunction arrayRemove<T>(array: T[], item: T) {\n const updatedArray = [...array]\n const index = updatedArray.indexOf(item)\n if (index !== -1) {\n updatedArray.splice(index, 1)\n }\n return updatedArray\n}\n\nfunction removeLinks(items: HTMLElement[]) {\n return items.filter((item) => item.tagName !== 'A')\n}\n\nexport { FocusScope }\n\nexport type { FocusScopeProps }\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/FocusScope.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
|
|
4
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
5
3
|
import * as React from "react";
|
|
@@ -47,8 +45,6 @@ const FocusScope = React.forwardRef((props, forwardedRef) => {
|
|
|
47
45
|
focus(lastFocusedElementRef.current, { select: true });
|
|
48
46
|
}
|
|
49
47
|
};
|
|
50
|
-
__name(handleFocusIn, "handleFocusIn");
|
|
51
|
-
__name(handleFocusOut, "handleFocusOut");
|
|
52
48
|
document.addEventListener("focusin", handleFocusIn);
|
|
53
49
|
document.addEventListener("focusout", handleFocusOut);
|
|
54
50
|
return () => {
|
|
@@ -132,14 +128,12 @@ function focusFirst(candidates, { select = false } = {}) {
|
|
|
132
128
|
return;
|
|
133
129
|
}
|
|
134
130
|
}
|
|
135
|
-
__name(focusFirst, "focusFirst");
|
|
136
131
|
function getTabbableEdges(container) {
|
|
137
132
|
const candidates = getTabbableCandidates(container);
|
|
138
133
|
const first = findVisible(candidates, container);
|
|
139
134
|
const last = findVisible(candidates.reverse(), container);
|
|
140
135
|
return [first, last];
|
|
141
136
|
}
|
|
142
|
-
__name(getTabbableEdges, "getTabbableEdges");
|
|
143
137
|
function getTabbableCandidates(container) {
|
|
144
138
|
const nodes = [];
|
|
145
139
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
@@ -154,14 +148,12 @@ function getTabbableCandidates(container) {
|
|
|
154
148
|
nodes.push(walker.currentNode);
|
|
155
149
|
return nodes;
|
|
156
150
|
}
|
|
157
|
-
__name(getTabbableCandidates, "getTabbableCandidates");
|
|
158
151
|
function findVisible(elements, container) {
|
|
159
152
|
for (const element of elements) {
|
|
160
153
|
if (!isHidden(element, { upTo: container }))
|
|
161
154
|
return element;
|
|
162
155
|
}
|
|
163
156
|
}
|
|
164
|
-
__name(findVisible, "findVisible");
|
|
165
157
|
function isHidden(node, { upTo }) {
|
|
166
158
|
if (getComputedStyle(node).visibility === "hidden")
|
|
167
159
|
return true;
|
|
@@ -174,11 +166,9 @@ function isHidden(node, { upTo }) {
|
|
|
174
166
|
}
|
|
175
167
|
return false;
|
|
176
168
|
}
|
|
177
|
-
__name(isHidden, "isHidden");
|
|
178
169
|
function isSelectableInput(element) {
|
|
179
170
|
return element instanceof HTMLInputElement && "select" in element;
|
|
180
171
|
}
|
|
181
|
-
__name(isSelectableInput, "isSelectableInput");
|
|
182
172
|
function focus(element, { select = false } = {}) {
|
|
183
173
|
if (element && element.focus) {
|
|
184
174
|
const previouslyFocusedElement = document.activeElement;
|
|
@@ -187,7 +177,6 @@ function focus(element, { select = false } = {}) {
|
|
|
187
177
|
element.select();
|
|
188
178
|
}
|
|
189
179
|
}
|
|
190
|
-
__name(focus, "focus");
|
|
191
180
|
const focusScopesStack = createFocusScopesStack();
|
|
192
181
|
function createFocusScopesStack() {
|
|
193
182
|
let stack = [];
|
|
@@ -207,7 +196,6 @@ function createFocusScopesStack() {
|
|
|
207
196
|
}
|
|
208
197
|
};
|
|
209
198
|
}
|
|
210
|
-
__name(createFocusScopesStack, "createFocusScopesStack");
|
|
211
199
|
function arrayRemove(array, item) {
|
|
212
200
|
const updatedArray = [...array];
|
|
213
201
|
const index = updatedArray.indexOf(item);
|
|
@@ -216,11 +204,9 @@ function arrayRemove(array, item) {
|
|
|
216
204
|
}
|
|
217
205
|
return updatedArray;
|
|
218
206
|
}
|
|
219
|
-
__name(arrayRemove, "arrayRemove");
|
|
220
207
|
function removeLinks(items) {
|
|
221
208
|
return items.filter((item) => item.tagName !== "A");
|
|
222
209
|
}
|
|
223
|
-
__name(removeLinks, "removeLinks");
|
|
224
210
|
export {
|
|
225
211
|
FocusScope
|
|
226
212
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/FocusScope.tsx"],
|
|
4
4
|
"sourcesContent": ["import { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\nimport { FocusScopeProps } from './FocusScopeProps'\n\nconst AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount'\nconst AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount'\nconst EVENT_OPTIONS = { bubbles: false, cancelable: true }\n\ntype FocusableTarget = HTMLElement | { focus(): void }\n\n/* -------------------------------------------------------------------------------------------------\n * FocusScope\n * -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_SCOPE_NAME = 'FocusScope'\n\ntype FocusScopeElement = HTMLDivElement\n\nconst FocusScope = React.forwardRef<FocusScopeElement, FocusScopeProps>((props, forwardedRef) => {\n const {\n loop = false,\n trapped = false,\n onMountAutoFocus: onMountAutoFocusProp,\n onUnmountAutoFocus: onUnmountAutoFocusProp,\n ...scopeProps\n } = props\n const [container, setContainer] = React.useState<HTMLElement | null>(null)\n const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp)\n const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp)\n const lastFocusedElementRef = React.useRef<HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node))\n\n const focusScope = React.useRef({\n paused: false,\n pause() {\n this.paused = true\n },\n resume() {\n this.paused = false\n },\n }).current\n\n // Takes care of trapping focus if focus is moved outside programmatically for example\n React.useEffect(() => {\n if (trapped) {\n function handleFocusIn(event: FocusEvent) {\n if (focusScope.paused || !container) return\n const target = event.target as HTMLElement | null\n if (container.contains(target)) {\n lastFocusedElementRef.current = target\n } else {\n focus(lastFocusedElementRef.current, { select: true })\n }\n }\n\n function handleFocusOut(event: FocusEvent) {\n if (focusScope.paused || !container) return\n if (!container.contains(event.relatedTarget as HTMLElement | null)) {\n focus(lastFocusedElementRef.current, { select: true })\n }\n }\n\n document.addEventListener('focusin', handleFocusIn)\n document.addEventListener('focusout', handleFocusOut)\n return () => {\n document.removeEventListener('focusin', handleFocusIn)\n document.removeEventListener('focusout', handleFocusOut)\n }\n }\n }, [trapped, container, focusScope.paused])\n\n React.useEffect(() => {\n if (container) {\n focusScopesStack.add(focusScope)\n const previouslyFocusedElement = document.activeElement as HTMLElement | null\n const hasFocusedCandidate = container.contains(previouslyFocusedElement)\n\n if (!hasFocusedCandidate) {\n const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)\n container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus)\n container.dispatchEvent(mountEvent)\n if (!mountEvent.defaultPrevented) {\n focusFirst(removeLinks(getTabbableCandidates(container)), { select: true })\n if (document.activeElement === previouslyFocusedElement) {\n focus(container)\n }\n }\n }\n\n return () => {\n container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus)\n\n // We hit a react bug (fixed in v17) with focusing in unmount.\n // We need to delay the focus a little to get around it for now.\n // See: https://github.com/facebook/react/issues/17894\n setTimeout(() => {\n const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS)\n container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus)\n container.dispatchEvent(unmountEvent)\n if (!unmountEvent.defaultPrevented) {\n focus(previouslyFocusedElement ?? document.body, { select: true })\n }\n // we need to remove the listener after we `dispatchEvent`\n container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus)\n\n focusScopesStack.remove(focusScope)\n }, 0)\n }\n }\n }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope])\n\n // Takes care of looping focus (when tabbing whilst at the edges)\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (!loop && !trapped) return\n if (focusScope.paused) return\n\n const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey\n const focusedElement = document.activeElement as HTMLElement | null\n\n if (isTabKey && focusedElement) {\n const container = event.currentTarget as HTMLElement\n const [first, last] = getTabbableEdges(container)\n const hasTabbableElementsInside = first && last\n\n // we can only wrap focus if we have tabbable edges\n if (!hasTabbableElementsInside) {\n if (focusedElement === container) event.preventDefault()\n } else {\n if (!event.shiftKey && focusedElement === last) {\n event.preventDefault()\n if (loop) focus(first, { select: true })\n } else if (event.shiftKey && focusedElement === first) {\n event.preventDefault()\n if (loop) focus(last, { select: true })\n }\n }\n }\n },\n [loop, trapped, focusScope.paused]\n )\n\n const child = React.Children.only(props.children)\n\n return React.cloneElement(child as any, {\n tabIndex: -1,\n ...scopeProps,\n ref: composedRefs,\n onKeyDown: handleKeyDown,\n })\n})\n\nFocusScope.displayName = FOCUS_SCOPE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Attempts focusing the first element in a list of candidates.\n * Stops when focus has actually moved.\n */\nfunction focusFirst(candidates: HTMLElement[], { select = false } = {}) {\n const previouslyFocusedElement = document.activeElement\n for (const candidate of candidates) {\n focus(candidate, { select })\n if (document.activeElement !== previouslyFocusedElement) return\n }\n}\n\n/**\n * Returns the first and last tabbable elements inside a container.\n */\nfunction getTabbableEdges(container: HTMLElement) {\n const candidates = getTabbableCandidates(container)\n const first = findVisible(candidates, container)\n const last = findVisible(candidates.reverse(), container)\n return [first, last] as const\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: HTMLElement) {\n const nodes: HTMLElement[] = []\n const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n acceptNode: (node: any) => {\n const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP\n // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n // runtime's understanding of tabbability, so this automatically accounts\n // for any kind of element that could be tabbed to.\n return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP\n },\n })\n while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n // we do not take into account the order of nodes with positive `tabIndex` as it\n // hinders accessibility to have tab order different from visual order.\n return nodes\n}\n\n/**\n * Returns the first visible element in a list.\n * NOTE: Only checks visibility up to the `container`.\n */\nfunction findVisible(elements: HTMLElement[], container: HTMLElement) {\n for (const element of elements) {\n // we stop checking if it's hidden at the `container` level (excluding)\n if (!isHidden(element, { upTo: container })) return element\n }\n}\n\nfunction isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {\n if (getComputedStyle(node).visibility === 'hidden') return true\n while (node) {\n // we stop at `upTo` (excluding it)\n if (upTo !== undefined && node === upTo) return false\n if (getComputedStyle(node).display === 'none') return true\n node = node.parentElement as HTMLElement\n }\n return false\n}\n\nfunction isSelectableInput(element: any): element is FocusableTarget & { select: () => void } {\n return element instanceof HTMLInputElement && 'select' in element\n}\n\nfunction focus(element?: FocusableTarget | null, { select = false } = {}) {\n // only focus if that element is focusable\n if (element && element.focus) {\n const previouslyFocusedElement = document.activeElement\n // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users\n element.focus({ preventScroll: true })\n // only select if its not the same element, it supports selection and we need to select\n if (element !== previouslyFocusedElement && isSelectableInput(element) && select)\n element.select()\n }\n}\n\n/* -------------------------------------------------------------------------------------------------\n * FocusScope stack\n * -----------------------------------------------------------------------------------------------*/\n\ntype FocusScopeAPI = { paused: boolean; pause(): void; resume(): void }\nconst focusScopesStack = createFocusScopesStack()\n\nfunction createFocusScopesStack() {\n /** A stack of focus scopes, with the active one at the top */\n let stack: FocusScopeAPI[] = []\n\n return {\n add(focusScope: FocusScopeAPI) {\n // pause the currently active focus scope (at the top of the stack)\n const activeFocusScope = stack[0]\n if (focusScope !== activeFocusScope) {\n activeFocusScope?.pause()\n }\n // remove in case it already exists (because we'll re-add it at the top of the stack)\n stack = arrayRemove(stack, focusScope)\n stack.unshift(focusScope)\n },\n\n remove(focusScope: FocusScopeAPI) {\n stack = arrayRemove(stack, focusScope)\n stack[0]?.resume()\n },\n }\n}\n\nfunction arrayRemove<T>(array: T[], item: T) {\n const updatedArray = [...array]\n const index = updatedArray.indexOf(item)\n if (index !== -1) {\n updatedArray.splice(index, 1)\n }\n return updatedArray\n}\n\nfunction removeLinks(items: HTMLElement[]) {\n return items.filter((item) => item.tagName !== 'A')\n}\n\nexport { FocusScope }\n\nexport type { FocusScopeProps }\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/FocusScope.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
|
|
4
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
5
3
|
import * as React from "react";
|
|
@@ -47,8 +45,6 @@ const FocusScope = React.forwardRef((props, forwardedRef) => {
|
|
|
47
45
|
focus(lastFocusedElementRef.current, { select: true });
|
|
48
46
|
}
|
|
49
47
|
};
|
|
50
|
-
__name(handleFocusIn, "handleFocusIn");
|
|
51
|
-
__name(handleFocusOut, "handleFocusOut");
|
|
52
48
|
document.addEventListener("focusin", handleFocusIn);
|
|
53
49
|
document.addEventListener("focusout", handleFocusOut);
|
|
54
50
|
return () => {
|
|
@@ -132,14 +128,12 @@ function focusFirst(candidates, { select = false } = {}) {
|
|
|
132
128
|
return;
|
|
133
129
|
}
|
|
134
130
|
}
|
|
135
|
-
__name(focusFirst, "focusFirst");
|
|
136
131
|
function getTabbableEdges(container) {
|
|
137
132
|
const candidates = getTabbableCandidates(container);
|
|
138
133
|
const first = findVisible(candidates, container);
|
|
139
134
|
const last = findVisible(candidates.reverse(), container);
|
|
140
135
|
return [first, last];
|
|
141
136
|
}
|
|
142
|
-
__name(getTabbableEdges, "getTabbableEdges");
|
|
143
137
|
function getTabbableCandidates(container) {
|
|
144
138
|
const nodes = [];
|
|
145
139
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
@@ -154,14 +148,12 @@ function getTabbableCandidates(container) {
|
|
|
154
148
|
nodes.push(walker.currentNode);
|
|
155
149
|
return nodes;
|
|
156
150
|
}
|
|
157
|
-
__name(getTabbableCandidates, "getTabbableCandidates");
|
|
158
151
|
function findVisible(elements, container) {
|
|
159
152
|
for (const element of elements) {
|
|
160
153
|
if (!isHidden(element, { upTo: container }))
|
|
161
154
|
return element;
|
|
162
155
|
}
|
|
163
156
|
}
|
|
164
|
-
__name(findVisible, "findVisible");
|
|
165
157
|
function isHidden(node, { upTo }) {
|
|
166
158
|
if (getComputedStyle(node).visibility === "hidden")
|
|
167
159
|
return true;
|
|
@@ -174,11 +166,9 @@ function isHidden(node, { upTo }) {
|
|
|
174
166
|
}
|
|
175
167
|
return false;
|
|
176
168
|
}
|
|
177
|
-
__name(isHidden, "isHidden");
|
|
178
169
|
function isSelectableInput(element) {
|
|
179
170
|
return element instanceof HTMLInputElement && "select" in element;
|
|
180
171
|
}
|
|
181
|
-
__name(isSelectableInput, "isSelectableInput");
|
|
182
172
|
function focus(element, { select = false } = {}) {
|
|
183
173
|
if (element && element.focus) {
|
|
184
174
|
const previouslyFocusedElement = document.activeElement;
|
|
@@ -187,7 +177,6 @@ function focus(element, { select = false } = {}) {
|
|
|
187
177
|
element.select();
|
|
188
178
|
}
|
|
189
179
|
}
|
|
190
|
-
__name(focus, "focus");
|
|
191
180
|
const focusScopesStack = createFocusScopesStack();
|
|
192
181
|
function createFocusScopesStack() {
|
|
193
182
|
let stack = [];
|
|
@@ -207,7 +196,6 @@ function createFocusScopesStack() {
|
|
|
207
196
|
}
|
|
208
197
|
};
|
|
209
198
|
}
|
|
210
|
-
__name(createFocusScopesStack, "createFocusScopesStack");
|
|
211
199
|
function arrayRemove(array, item) {
|
|
212
200
|
const updatedArray = [...array];
|
|
213
201
|
const index = updatedArray.indexOf(item);
|
|
@@ -216,11 +204,9 @@ function arrayRemove(array, item) {
|
|
|
216
204
|
}
|
|
217
205
|
return updatedArray;
|
|
218
206
|
}
|
|
219
|
-
__name(arrayRemove, "arrayRemove");
|
|
220
207
|
function removeLinks(items) {
|
|
221
208
|
return items.filter((item) => item.tagName !== "A");
|
|
222
209
|
}
|
|
223
|
-
__name(removeLinks, "removeLinks");
|
|
224
210
|
export {
|
|
225
211
|
FocusScope
|
|
226
212
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/focus-scope",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.75",
|
|
4
4
|
"sideEffects": true,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@radix-ui/react-use-callback-ref": "^0.1.0",
|
|
23
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
23
|
+
"@tamagui/compose-refs": "^1.0.1-beta.75"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"react": "*",
|
|
27
27
|
"react-dom": "*"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
30
|
+
"@tamagui/build": "^1.0.1-beta.75",
|
|
31
31
|
"react": "*",
|
|
32
32
|
"react-dom": "*"
|
|
33
33
|
},
|