@tamagui/roving-focus 2.0.0-1768741592663 → 2.0.0-1768782502458
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/RovingFocusGroup.cjs +13 -11
- package/dist/cjs/RovingFocusGroup.js +6 -12
- package/dist/cjs/RovingFocusGroup.js.map +1 -1
- package/dist/esm/RovingFocusGroup.js +6 -12
- package/dist/esm/RovingFocusGroup.js.map +1 -1
- package/dist/esm/RovingFocusGroup.mjs +13 -11
- package/dist/esm/RovingFocusGroup.mjs.map +1 -1
- package/package.json +11 -11
- package/src/RovingFocusGroup.tsx +8 -13
- package/types/RovingFocusGroup.d.ts.map +1 -1
|
@@ -74,12 +74,8 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus",
|
|
|
74
74
|
handleEntryFocus = (0, import_core.useEvent)(onEntryFocus),
|
|
75
75
|
getItems = useCollection(__scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT),
|
|
76
76
|
isClickFocusRef = React.useRef(!1),
|
|
77
|
-
[focusableItemsCount, setFocusableItemsCount] = React.useState(0)
|
|
78
|
-
|
|
79
|
-
const node = ref.current;
|
|
80
|
-
if (node) return node.addEventListener(ENTRY_FOCUS, handleEntryFocus), () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
81
|
-
}, [handleEntryFocus]);
|
|
82
|
-
const Comp = asChild ? import_core.Slot : import_core.Stack;
|
|
77
|
+
[focusableItemsCount, setFocusableItemsCount] = React.useState(0),
|
|
78
|
+
Comp = asChild ? import_core.Slot : import_core.Stack;
|
|
83
79
|
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RovingFocusProvider, {
|
|
84
80
|
scope: __scopeRovingFocusGroup,
|
|
85
81
|
orientation,
|
|
@@ -103,12 +99,14 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus",
|
|
|
103
99
|
const isKeyboardFocus = !isClickFocusRef.current;
|
|
104
100
|
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
105
101
|
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
106
|
-
if (
|
|
102
|
+
if (handleEntryFocus(entryFocusEvent), !entryFocusEvent.defaultPrevented) {
|
|
107
103
|
const items = getItems().filter(item => item.focusable),
|
|
108
104
|
activeItem = items.find(item => item.active),
|
|
109
105
|
currentItem = items.find(item => item.id === currentTabStopId),
|
|
110
106
|
candidateNodes = [activeItem, currentItem, ...items].filter(Boolean).map(item => item.ref.current);
|
|
111
|
-
focusFirst(candidateNodes
|
|
107
|
+
focusFirst(candidateNodes, {
|
|
108
|
+
focusVisible: !1
|
|
109
|
+
});
|
|
112
110
|
}
|
|
113
111
|
}
|
|
114
112
|
isClickFocusRef.current = !1;
|
|
@@ -167,7 +165,9 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus",
|
|
|
167
165
|
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
168
166
|
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
|
|
169
167
|
}
|
|
170
|
-
setTimeout(() => focusFirst(candidateNodes
|
|
168
|
+
setTimeout(() => focusFirst(candidateNodes, {
|
|
169
|
+
focusVisible: !0
|
|
170
|
+
}));
|
|
171
171
|
}
|
|
172
172
|
})
|
|
173
173
|
})
|
|
@@ -212,9 +212,11 @@ function getFocusIntent(event, orientation, dir) {
|
|
|
212
212
|
const key = getDirectionAwareKey(event.key, dir);
|
|
213
213
|
if (!(orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) && !(orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key))) return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
214
214
|
}
|
|
215
|
-
function focusFirst(candidates) {
|
|
215
|
+
function focusFirst(candidates, options) {
|
|
216
216
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
217
|
-
for (const candidate of candidates) if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus(
|
|
217
|
+
for (const candidate of candidates) if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus({
|
|
218
|
+
focusVisible: options?.focusVisible
|
|
219
|
+
}), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)) return;
|
|
218
220
|
}
|
|
219
221
|
function wrapArray(array, startIndex) {
|
|
220
222
|
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
@@ -43,13 +43,7 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus", EVENT_OPTIONS = { bubbles:
|
|
|
43
43
|
prop: currentTabStopIdProp,
|
|
44
44
|
defaultProp: defaultCurrentTabStopId ?? null,
|
|
45
45
|
onChange: onCurrentTabStopIdChange
|
|
46
|
-
}), [isTabbingBackOut, setIsTabbingBackOut] = React.useState(!1), handleEntryFocus = (0, import_core.useEvent)(onEntryFocus), getItems = useCollection(__scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT), isClickFocusRef = React.useRef(!1), [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
|
|
47
|
-
React.useEffect(() => {
|
|
48
|
-
const node = ref.current;
|
|
49
|
-
if (node)
|
|
50
|
-
return node.addEventListener(ENTRY_FOCUS, handleEntryFocus), () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
51
|
-
}, [handleEntryFocus]);
|
|
52
|
-
const Comp = asChild ? import_core.Slot : import_core.Stack;
|
|
46
|
+
}), [isTabbingBackOut, setIsTabbingBackOut] = React.useState(!1), handleEntryFocus = (0, import_core.useEvent)(onEntryFocus), getItems = useCollection(__scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT), isClickFocusRef = React.useRef(!1), [focusableItemsCount, setFocusableItemsCount] = React.useState(0), Comp = asChild ? import_core.Slot : import_core.Stack;
|
|
53
47
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
54
48
|
RovingFocusProvider,
|
|
55
49
|
{
|
|
@@ -86,11 +80,11 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus", EVENT_OPTIONS = { bubbles:
|
|
|
86
80
|
const isKeyboardFocus = !isClickFocusRef.current;
|
|
87
81
|
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
88
82
|
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
89
|
-
if (
|
|
83
|
+
if (handleEntryFocus(entryFocusEvent), !entryFocusEvent.defaultPrevented) {
|
|
90
84
|
const items = getItems().filter((item) => item.focusable), activeItem = items.find((item) => item.active), currentItem = items.find((item) => item.id === currentTabStopId), candidateNodes = [activeItem, currentItem, ...items].filter(
|
|
91
85
|
Boolean
|
|
92
86
|
).map((item) => item.ref.current);
|
|
93
|
-
focusFirst(candidateNodes);
|
|
87
|
+
focusFirst(candidateNodes, { focusVisible: !1 });
|
|
94
88
|
}
|
|
95
89
|
}
|
|
96
90
|
isClickFocusRef.current = !1;
|
|
@@ -151,7 +145,7 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus", EVENT_OPTIONS = { bubbles:
|
|
|
151
145
|
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
152
146
|
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
|
|
153
147
|
}
|
|
154
|
-
setTimeout(() => focusFirst(candidateNodes));
|
|
148
|
+
setTimeout(() => focusFirst(candidateNodes, { focusVisible: !0 }));
|
|
155
149
|
}
|
|
156
150
|
}
|
|
157
151
|
)
|
|
@@ -203,10 +197,10 @@ function getFocusIntent(event, orientation, dir) {
|
|
|
203
197
|
if (!(orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) && !(orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)))
|
|
204
198
|
return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
205
199
|
}
|
|
206
|
-
function focusFirst(candidates) {
|
|
200
|
+
function focusFirst(candidates, options) {
|
|
207
201
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
208
202
|
for (const candidate of candidates)
|
|
209
|
-
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus(), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)) return;
|
|
203
|
+
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus({ focusVisible: options?.focusVisible }), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)) return;
|
|
210
204
|
}
|
|
211
205
|
function wrapArray(array, startIndex) {
|
|
212
206
|
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/RovingFocusGroup.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAiC,gCACjC,sBAAgC,kCAChC,mBAAsB,+BACtB,cAA2D,0BAC3D,iBAA2D,6BAC3D,gCAAqC,4CACrC,uBAA6B,mCAC7B,QAAuB,
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -23,13 +23,7 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus", EVENT_OPTIONS = { bubbles:
|
|
|
23
23
|
prop: currentTabStopIdProp,
|
|
24
24
|
defaultProp: defaultCurrentTabStopId ?? null,
|
|
25
25
|
onChange: onCurrentTabStopIdChange
|
|
26
|
-
}), [isTabbingBackOut, setIsTabbingBackOut] = React.useState(!1), handleEntryFocus = useEvent(onEntryFocus), getItems = useCollection(__scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT), isClickFocusRef = React.useRef(!1), [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
|
|
27
|
-
React.useEffect(() => {
|
|
28
|
-
const node = ref.current;
|
|
29
|
-
if (node)
|
|
30
|
-
return node.addEventListener(ENTRY_FOCUS, handleEntryFocus), () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
31
|
-
}, [handleEntryFocus]);
|
|
32
|
-
const Comp = asChild ? Slot : Stack;
|
|
26
|
+
}), [isTabbingBackOut, setIsTabbingBackOut] = React.useState(!1), handleEntryFocus = useEvent(onEntryFocus), getItems = useCollection(__scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT), isClickFocusRef = React.useRef(!1), [focusableItemsCount, setFocusableItemsCount] = React.useState(0), Comp = asChild ? Slot : Stack;
|
|
33
27
|
return /* @__PURE__ */ jsx(
|
|
34
28
|
RovingFocusProvider,
|
|
35
29
|
{
|
|
@@ -66,11 +60,11 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus", EVENT_OPTIONS = { bubbles:
|
|
|
66
60
|
const isKeyboardFocus = !isClickFocusRef.current;
|
|
67
61
|
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
68
62
|
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
69
|
-
if (
|
|
63
|
+
if (handleEntryFocus(entryFocusEvent), !entryFocusEvent.defaultPrevented) {
|
|
70
64
|
const items = getItems().filter((item) => item.focusable), activeItem = items.find((item) => item.active), currentItem = items.find((item) => item.id === currentTabStopId), candidateNodes = [activeItem, currentItem, ...items].filter(
|
|
71
65
|
Boolean
|
|
72
66
|
).map((item) => item.ref.current);
|
|
73
|
-
focusFirst(candidateNodes);
|
|
67
|
+
focusFirst(candidateNodes, { focusVisible: !1 });
|
|
74
68
|
}
|
|
75
69
|
}
|
|
76
70
|
isClickFocusRef.current = !1;
|
|
@@ -131,7 +125,7 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus", EVENT_OPTIONS = { bubbles:
|
|
|
131
125
|
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
132
126
|
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
|
|
133
127
|
}
|
|
134
|
-
setTimeout(() => focusFirst(candidateNodes));
|
|
128
|
+
setTimeout(() => focusFirst(candidateNodes, { focusVisible: !0 }));
|
|
135
129
|
}
|
|
136
130
|
}
|
|
137
131
|
)
|
|
@@ -183,10 +177,10 @@ function getFocusIntent(event, orientation, dir) {
|
|
|
183
177
|
if (!(orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) && !(orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)))
|
|
184
178
|
return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
185
179
|
}
|
|
186
|
-
function focusFirst(candidates) {
|
|
180
|
+
function focusFirst(candidates, options) {
|
|
187
181
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
188
182
|
for (const candidate of candidates)
|
|
189
|
-
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus(), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)) return;
|
|
183
|
+
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus({ focusVisible: options?.focusVisible }), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)) return;
|
|
190
184
|
}
|
|
191
185
|
function wrapArray(array, startIndex) {
|
|
192
186
|
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/RovingFocusGroup.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,SAAS,MAAM,OAAO,qBAAqB,gBAAgB;AAC3D,SAAS,sBAAsB,4BAA4B;AAC3D,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,YAAY,WAAW;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -37,12 +37,8 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus",
|
|
|
37
37
|
handleEntryFocus = useEvent(onEntryFocus),
|
|
38
38
|
getItems = useCollection(__scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT),
|
|
39
39
|
isClickFocusRef = React.useRef(!1),
|
|
40
|
-
[focusableItemsCount, setFocusableItemsCount] = React.useState(0)
|
|
41
|
-
|
|
42
|
-
const node = ref.current;
|
|
43
|
-
if (node) return node.addEventListener(ENTRY_FOCUS, handleEntryFocus), () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
44
|
-
}, [handleEntryFocus]);
|
|
45
|
-
const Comp = asChild ? Slot : Stack;
|
|
40
|
+
[focusableItemsCount, setFocusableItemsCount] = React.useState(0),
|
|
41
|
+
Comp = asChild ? Slot : Stack;
|
|
46
42
|
return /* @__PURE__ */jsx(RovingFocusProvider, {
|
|
47
43
|
scope: __scopeRovingFocusGroup,
|
|
48
44
|
orientation,
|
|
@@ -66,12 +62,14 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus",
|
|
|
66
62
|
const isKeyboardFocus = !isClickFocusRef.current;
|
|
67
63
|
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
68
64
|
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
69
|
-
if (
|
|
65
|
+
if (handleEntryFocus(entryFocusEvent), !entryFocusEvent.defaultPrevented) {
|
|
70
66
|
const items = getItems().filter(item => item.focusable),
|
|
71
67
|
activeItem = items.find(item => item.active),
|
|
72
68
|
currentItem = items.find(item => item.id === currentTabStopId),
|
|
73
69
|
candidateNodes = [activeItem, currentItem, ...items].filter(Boolean).map(item => item.ref.current);
|
|
74
|
-
focusFirst(candidateNodes
|
|
70
|
+
focusFirst(candidateNodes, {
|
|
71
|
+
focusVisible: !1
|
|
72
|
+
});
|
|
75
73
|
}
|
|
76
74
|
}
|
|
77
75
|
isClickFocusRef.current = !1;
|
|
@@ -130,7 +128,9 @@ const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus",
|
|
|
130
128
|
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
131
129
|
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
|
|
132
130
|
}
|
|
133
|
-
setTimeout(() => focusFirst(candidateNodes
|
|
131
|
+
setTimeout(() => focusFirst(candidateNodes, {
|
|
132
|
+
focusVisible: !0
|
|
133
|
+
}));
|
|
134
134
|
}
|
|
135
135
|
})
|
|
136
136
|
})
|
|
@@ -175,9 +175,11 @@ function getFocusIntent(event, orientation, dir) {
|
|
|
175
175
|
const key = getDirectionAwareKey(event.key, dir);
|
|
176
176
|
if (!(orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) && !(orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key))) return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
177
177
|
}
|
|
178
|
-
function focusFirst(candidates) {
|
|
178
|
+
function focusFirst(candidates, options) {
|
|
179
179
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
180
|
-
for (const candidate of candidates) if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus(
|
|
180
|
+
for (const candidate of candidates) if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus({
|
|
181
|
+
focusVisible: options?.focusVisible
|
|
182
|
+
}), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)) return;
|
|
181
183
|
}
|
|
182
184
|
function wrapArray(array, startIndex) {
|
|
183
185
|
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createCollection","useComposedRefs","isWeb","Slot","Stack","createStyledContext","useEvent","composeEventHandlers","withStaticProperties","useControllableState","useDirection","React","jsx","ENTRY_FOCUS","EVENT_OPTIONS","bubbles","cancelable","RovingFocusGroupImpl","forwardRef","props","forwardedRef","__scopeRovingFocusGroup","orientation","loop","dir","currentTabStopId","currentTabStopIdProp","defaultCurrentTabStopId","onCurrentTabStopIdChange","onEntryFocus","asChild","groupProps","ref","useRef","composedRefs","direction","setCurrentTabStopId","prop","defaultProp","onChange","isTabbingBackOut","setIsTabbingBackOut","useState","handleEntryFocus","getItems","useCollection","ROVING_FOCUS_GROUP_CONTEXT","isClickFocusRef","focusableItemsCount","setFocusableItemsCount","
|
|
1
|
+
{"version":3,"names":["createCollection","useComposedRefs","isWeb","Slot","Stack","createStyledContext","useEvent","composeEventHandlers","withStaticProperties","useControllableState","useDirection","React","jsx","ENTRY_FOCUS","EVENT_OPTIONS","bubbles","cancelable","RovingFocusGroupImpl","forwardRef","props","forwardedRef","__scopeRovingFocusGroup","orientation","loop","dir","currentTabStopId","currentTabStopIdProp","defaultCurrentTabStopId","onCurrentTabStopIdChange","onEntryFocus","asChild","groupProps","ref","useRef","composedRefs","direction","setCurrentTabStopId","prop","defaultProp","onChange","isTabbingBackOut","setIsTabbingBackOut","useState","handleEntryFocus","getItems","useCollection","ROVING_FOCUS_GROUP_CONTEXT","isClickFocusRef","focusableItemsCount","setFocusableItemsCount","Comp","RovingFocusProvider","scope","onItemFocus","useCallback","tabStopId","onItemShiftTab","onFocusableItemAdd","prevCount","onFocusableItemRemove","children","tabIndex","outlineStyle","onMouseDown","current","onFocus","event","isKeyboardFocus","target","currentTarget","entryFocusEvent","CustomEvent","defaultPrevented","items","filter","item","focusable","activeItem","find","active","currentItem","id","candidateNodes","Boolean","map","focusFirst","focusVisible","onBlur","ITEM_NAME","RovingFocusGroupItem","itemProps","autoId","useId","context","useRovingFocusContext","isCurrentTabStop","useEffect","Collection","ItemSlot","preventDefault","onKeyDown","key","shiftKey","focusIntent","getFocusIntent","reverse","currentIndex","indexOf","wrapArray","slice","setTimeout","displayName","GROUP_NAME","Provider","useStyledContext","RovingFocusGroup","Item","MAP_KEY_TO_FOCUS_INTENT","ArrowLeft","ArrowUp","ArrowRight","ArrowDown","PageUp","Home","PageDown","End","getDirectionAwareKey","includes","candidates","options","PREVIOUSLY_FOCUSED_ELEMENT","document","activeElement","candidate","focus","array","startIndex","_","index","length"],"sources":["../../src/RovingFocusGroup.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/roving-focus",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-1768782502458",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"*.css"
|
|
@@ -38,18 +38,18 @@
|
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@tamagui/collection": "2.0.0-
|
|
42
|
-
"@tamagui/compose-refs": "2.0.0-
|
|
43
|
-
"@tamagui/constants": "2.0.0-
|
|
44
|
-
"@tamagui/core": "2.0.0-
|
|
45
|
-
"@tamagui/create-context": "2.0.0-
|
|
46
|
-
"@tamagui/helpers": "2.0.0-
|
|
47
|
-
"@tamagui/use-controllable-state": "2.0.0-
|
|
48
|
-
"@tamagui/use-direction": "2.0.0-
|
|
49
|
-
"@tamagui/use-event": "2.0.0-
|
|
41
|
+
"@tamagui/collection": "2.0.0-1768782502458",
|
|
42
|
+
"@tamagui/compose-refs": "2.0.0-1768782502458",
|
|
43
|
+
"@tamagui/constants": "2.0.0-1768782502458",
|
|
44
|
+
"@tamagui/core": "2.0.0-1768782502458",
|
|
45
|
+
"@tamagui/create-context": "2.0.0-1768782502458",
|
|
46
|
+
"@tamagui/helpers": "2.0.0-1768782502458",
|
|
47
|
+
"@tamagui/use-controllable-state": "2.0.0-1768782502458",
|
|
48
|
+
"@tamagui/use-direction": "2.0.0-1768782502458",
|
|
49
|
+
"@tamagui/use-event": "2.0.0-1768782502458"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@tamagui/build": "2.0.0-
|
|
52
|
+
"@tamagui/build": "2.0.0-1768782502458",
|
|
53
53
|
"react": "*"
|
|
54
54
|
},
|
|
55
55
|
"publishConfig": {
|
package/src/RovingFocusGroup.tsx
CHANGED
|
@@ -53,14 +53,6 @@ const RovingFocusGroupImpl = React.forwardRef<
|
|
|
53
53
|
const isClickFocusRef = React.useRef(false)
|
|
54
54
|
const [focusableItemsCount, setFocusableItemsCount] = React.useState(0)
|
|
55
55
|
|
|
56
|
-
React.useEffect(() => {
|
|
57
|
-
const node = (ref as unknown as React.RefObject<HTMLDivElement>).current
|
|
58
|
-
if (node) {
|
|
59
|
-
node.addEventListener(ENTRY_FOCUS, handleEntryFocus)
|
|
60
|
-
return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus)
|
|
61
|
-
}
|
|
62
|
-
}, [handleEntryFocus])
|
|
63
|
-
|
|
64
56
|
const Comp = (asChild ? Slot : Stack) as typeof Stack
|
|
65
57
|
|
|
66
58
|
return (
|
|
@@ -105,8 +97,10 @@ const RovingFocusGroupImpl = React.forwardRef<
|
|
|
105
97
|
isKeyboardFocus &&
|
|
106
98
|
!isTabbingBackOut
|
|
107
99
|
) {
|
|
100
|
+
// create a cancelable event that onEntryFocus can call preventDefault on
|
|
108
101
|
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS)
|
|
109
|
-
|
|
102
|
+
// call onEntryFocus directly (dispatching to DOM had issues with asChild/Slot)
|
|
103
|
+
handleEntryFocus(entryFocusEvent)
|
|
110
104
|
|
|
111
105
|
if (!entryFocusEvent.defaultPrevented) {
|
|
112
106
|
const items = getItems().filter((item) => item.focusable)
|
|
@@ -116,7 +110,7 @@ const RovingFocusGroupImpl = React.forwardRef<
|
|
|
116
110
|
Boolean
|
|
117
111
|
) as typeof items
|
|
118
112
|
const candidateNodes = candidateItems.map((item) => item.ref.current!)
|
|
119
|
-
focusFirst(candidateNodes)
|
|
113
|
+
focusFirst(candidateNodes, { focusVisible: false })
|
|
120
114
|
}
|
|
121
115
|
}
|
|
122
116
|
|
|
@@ -222,7 +216,7 @@ const RovingFocusGroupItem = React.forwardRef<
|
|
|
222
216
|
* Imperative focus during keydown is risky so we prevent React's batching updates
|
|
223
217
|
* to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
|
|
224
218
|
*/
|
|
225
|
-
setTimeout(() => focusFirst(candidateNodes))
|
|
219
|
+
setTimeout(() => focusFirst(candidateNodes, { focusVisible: true }))
|
|
226
220
|
}
|
|
227
221
|
}
|
|
228
222
|
),
|
|
@@ -347,12 +341,13 @@ function getFocusIntent(
|
|
|
347
341
|
return MAP_KEY_TO_FOCUS_INTENT[key]
|
|
348
342
|
}
|
|
349
343
|
|
|
350
|
-
function focusFirst(candidates: HTMLElement[]) {
|
|
344
|
+
function focusFirst(candidates: HTMLElement[], options?: { focusVisible?: boolean }) {
|
|
351
345
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement
|
|
352
346
|
for (const candidate of candidates) {
|
|
353
347
|
// if focus is already where we want to go, we don't want to keep going through the candidates
|
|
354
348
|
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return
|
|
355
|
-
|
|
349
|
+
// @ts-ignore focusVisible is a newer API not yet in all TS libs
|
|
350
|
+
candidate.focus({ focusVisible: options?.focusVisible })
|
|
356
351
|
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return
|
|
357
352
|
}
|
|
358
353
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RovingFocusGroup.d.ts","sourceRoot":"","sources":["../src/RovingFocusGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,EAAiC,MAAM,eAAe,CAAA;AAI1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,KAAK,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,KAAK,CAAC,CAAA;AACrE,UAAU,yBACR,SAAQ,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,EACpC,uBAAuB;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,wBAAwB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACtC;
|
|
1
|
+
{"version":3,"file":"RovingFocusGroup.d.ts","sourceRoot":"","sources":["../src/RovingFocusGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,EAAiC,MAAM,eAAe,CAAA;AAI1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,KAAK,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,KAAK,CAAC,CAAA;AACrE,UAAU,yBACR,SAAQ,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,EACpC,uBAAuB;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,wBAAwB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACtC;AA+GD,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,KAAK,CAAC,CAAA;AACtE,UAAU,oBAAqB,SAAQ,kBAAkB;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,QAAA,MAAM,oBAAoB;8BAoG4B,MAAM;mEAf1D,CAAA;AAqBF,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAA;AAC3D,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,CAAA;AAE9B,UAAU,uBAAuB;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB;;OAEG;IACH,GAAG,CAAC,EAAE,SAAS,CAAA;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAiBD,UAAU,qBAAsB,SAAQ,yBAAyB;CAAG;AAIpE,QAAA,MAAM,gBAAgB;8BA7CgC,MAAM;;;kCAAN,MAAM;;CAgE3D,CAAA;AAyDD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,CAAA;AAEjD,YAAY,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,CAAA"}
|