@tamagui/roving-focus 1.61.3 → 1.62.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/RovingFocusGroup.js +42 -105
- package/dist/cjs/RovingFocusGroup.js.map +1 -1
- package/dist/cjs/RovingFocusGroup.native.js +10 -19
- package/dist/cjs/RovingFocusGroup.native.js.map +1 -1
- package/dist/cjs/index.js +4 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/index.native.js +20 -0
- package/dist/cjs/index.native.js.map +6 -0
- package/dist/esm/RovingFocusGroup.js +35 -85
- package/dist/esm/RovingFocusGroup.js.map +1 -1
- package/dist/esm/RovingFocusGroup.native.js +3 -5
- package/dist/esm/RovingFocusGroup.native.js.map +1 -1
- package/dist/jsx/RovingFocusGroup.js +34 -84
- package/dist/jsx/RovingFocusGroup.js.map +1 -1
- package/dist/jsx/RovingFocusGroup.native.js +2 -4
- package/dist/jsx/RovingFocusGroup.native.js.map +1 -1
- package/dist/jsx/index.native.js +2 -0
- package/dist/jsx/index.native.js.map +6 -0
- package/package.json +9 -9
|
@@ -1,20 +1,15 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable:
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
9
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
14
11
|
for (let key of __getOwnPropNames(from))
|
|
15
|
-
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
12
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
13
|
return to;
|
|
19
14
|
};
|
|
20
15
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
@@ -22,59 +17,37 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
22
17
|
// file that has been converted to a CommonJS file using a Babel-
|
|
23
18
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
19
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable:
|
|
20
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
26
21
|
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
29
23
|
var RovingFocusGroup_exports = {};
|
|
30
24
|
__export(RovingFocusGroup_exports, {
|
|
31
25
|
RovingFocusGroup: () => RovingFocusGroup,
|
|
32
26
|
createRovingFocusGroupScope: () => createRovingFocusGroupScope
|
|
33
27
|
});
|
|
34
28
|
module.exports = __toCommonJS(RovingFocusGroup_exports);
|
|
35
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
|
|
37
|
-
var import_compose_refs = require("@tamagui/compose-refs");
|
|
38
|
-
var import_core = require("@tamagui/core");
|
|
39
|
-
var import_create_context = require("@tamagui/create-context");
|
|
40
|
-
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
41
|
-
var import_use_direction = require("@tamagui/use-direction");
|
|
42
|
-
var React = __toESM(require("react"));
|
|
43
|
-
const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
|
|
44
|
-
const EVENT_OPTIONS = { bubbles: false, cancelable: true };
|
|
45
|
-
const RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
29
|
+
var import_collection = require("@tamagui/collection"), import_compose_refs = require("@tamagui/compose-refs"), import_core = require("@tamagui/core"), import_create_context = require("@tamagui/create-context"), import_use_controllable_state = require("@tamagui/use-controllable-state"), import_use_direction = require("@tamagui/use-direction"), React = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus", EVENT_OPTIONS = { bubbles: !1, cancelable: !0 }, RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
46
31
|
const {
|
|
47
32
|
__scopeRovingFocusGroup,
|
|
48
33
|
orientation,
|
|
49
|
-
loop =
|
|
34
|
+
loop = !1,
|
|
50
35
|
dir,
|
|
51
36
|
currentTabStopId: currentTabStopIdProp,
|
|
52
37
|
defaultCurrentTabStopId,
|
|
53
38
|
onCurrentTabStopIdChange,
|
|
54
39
|
onEntryFocus,
|
|
55
40
|
...groupProps
|
|
56
|
-
} = props
|
|
57
|
-
const ref = React.useRef(null);
|
|
58
|
-
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
59
|
-
const direction = (0, import_use_direction.useDirection)(dir);
|
|
60
|
-
const [currentTabStopId = null, setCurrentTabStopId] = (0, import_use_controllable_state.useControllableState)({
|
|
41
|
+
} = props, ref = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref), direction = (0, import_use_direction.useDirection)(dir), [currentTabStopId = null, setCurrentTabStopId] = (0, import_use_controllable_state.useControllableState)({
|
|
61
42
|
prop: currentTabStopIdProp,
|
|
62
43
|
defaultProp: defaultCurrentTabStopId ?? null,
|
|
63
44
|
onChange: onCurrentTabStopIdChange
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
const handleEntryFocus = (0, import_core.useEvent)(onEntryFocus);
|
|
67
|
-
const getItems = useCollection(__scopeRovingFocusGroup);
|
|
68
|
-
const isClickFocusRef = React.useRef(false);
|
|
69
|
-
const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
|
|
70
|
-
React.useEffect(() => {
|
|
45
|
+
}), [isTabbingBackOut, setIsTabbingBackOut] = React.useState(!1), handleEntryFocus = (0, import_core.useEvent)(onEntryFocus), getItems = useCollection(__scopeRovingFocusGroup), isClickFocusRef = React.useRef(!1), [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
|
|
46
|
+
return React.useEffect(() => {
|
|
71
47
|
const node = ref.current;
|
|
72
|
-
if (node)
|
|
73
|
-
node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
74
|
-
|
|
75
|
-
}
|
|
76
|
-
}, [handleEntryFocus]);
|
|
77
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
48
|
+
if (node)
|
|
49
|
+
return node.addEventListener(ENTRY_FOCUS, handleEntryFocus), () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
50
|
+
}, [handleEntryFocus]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
78
51
|
RovingFocusProvider,
|
|
79
52
|
{
|
|
80
53
|
scope: __scopeRovingFocusGroup,
|
|
@@ -86,7 +59,7 @@ const RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
86
59
|
(tabStopId) => setCurrentTabStopId(tabStopId),
|
|
87
60
|
[setCurrentTabStopId]
|
|
88
61
|
),
|
|
89
|
-
onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(
|
|
62
|
+
onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(!0), []),
|
|
90
63
|
onFocusableItemAdd: React.useCallback(
|
|
91
64
|
() => setFocusableItemsCount((prevCount) => prevCount + 1),
|
|
92
65
|
[]
|
|
@@ -104,57 +77,41 @@ const RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
104
77
|
ref: composedRefs,
|
|
105
78
|
style: [{ outline: "none" }, props.style],
|
|
106
79
|
onMouseDown: (0, import_core.composeEventHandlers)(props.onMouseDown, () => {
|
|
107
|
-
isClickFocusRef.current =
|
|
80
|
+
isClickFocusRef.current = !0;
|
|
108
81
|
}),
|
|
109
82
|
onFocus: (0, import_core.composeEventHandlers)(props.onFocus, (event) => {
|
|
110
83
|
const isKeyboardFocus = !isClickFocusRef.current;
|
|
111
84
|
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
112
85
|
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
113
|
-
event.currentTarget.dispatchEvent(entryFocusEvent)
|
|
114
|
-
|
|
115
|
-
const items = getItems().filter((item) => item.focusable);
|
|
116
|
-
const activeItem = items.find((item) => item.active);
|
|
117
|
-
const currentItem = items.find((item) => item.id === currentTabStopId);
|
|
118
|
-
const candidateItems = [activeItem, currentItem, ...items].filter(
|
|
86
|
+
if (event.currentTarget.dispatchEvent(entryFocusEvent), !entryFocusEvent.defaultPrevented) {
|
|
87
|
+
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(
|
|
119
88
|
Boolean
|
|
120
|
-
);
|
|
121
|
-
const candidateNodes = candidateItems.map((item) => item.ref.current);
|
|
89
|
+
).map((item) => item.ref.current);
|
|
122
90
|
focusFirst(candidateNodes);
|
|
123
91
|
}
|
|
124
92
|
}
|
|
125
|
-
isClickFocusRef.current =
|
|
93
|
+
isClickFocusRef.current = !1;
|
|
126
94
|
}),
|
|
127
95
|
onBlur: (0, import_core.composeEventHandlers)(
|
|
128
96
|
props.onBlur,
|
|
129
|
-
() => setIsTabbingBackOut(
|
|
97
|
+
() => setIsTabbingBackOut(!1)
|
|
130
98
|
)
|
|
131
99
|
}
|
|
132
100
|
)
|
|
133
101
|
}
|
|
134
102
|
);
|
|
135
|
-
})
|
|
136
|
-
const ITEM_NAME = "RovingFocusGroupItem";
|
|
137
|
-
const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
103
|
+
}), ITEM_NAME = "RovingFocusGroupItem", RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
138
104
|
const {
|
|
139
105
|
__scopeRovingFocusGroup,
|
|
140
|
-
focusable =
|
|
141
|
-
active =
|
|
106
|
+
focusable = !0,
|
|
107
|
+
active = !1,
|
|
142
108
|
tabStopId,
|
|
143
109
|
...itemProps
|
|
144
|
-
} = props;
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
const getItems = useCollection(__scopeRovingFocusGroup);
|
|
150
|
-
const { onFocusableItemAdd, onFocusableItemRemove } = context;
|
|
151
|
-
React.useEffect(() => {
|
|
152
|
-
if (focusable) {
|
|
153
|
-
onFocusableItemAdd();
|
|
154
|
-
return () => onFocusableItemRemove();
|
|
155
|
-
}
|
|
156
|
-
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
|
|
157
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
110
|
+
} = props, autoId = React.useId(), id = tabStopId || autoId, context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup), isCurrentTabStop = context.currentTabStopId === id, getItems = useCollection(__scopeRovingFocusGroup), { onFocusableItemAdd, onFocusableItemRemove } = context;
|
|
111
|
+
return React.useEffect(() => {
|
|
112
|
+
if (focusable)
|
|
113
|
+
return onFocusableItemAdd(), () => onFocusableItemRemove();
|
|
114
|
+
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
158
115
|
Collection.ItemSlot,
|
|
159
116
|
{
|
|
160
117
|
scope: __scopeRovingFocusGroup,
|
|
@@ -169,10 +126,7 @@ const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
|
169
126
|
...itemProps,
|
|
170
127
|
ref: forwardedRef,
|
|
171
128
|
onMouseDown: (0, import_core.composeEventHandlers)(props.onMouseDown, (event) => {
|
|
172
|
-
|
|
173
|
-
event.preventDefault();
|
|
174
|
-
else
|
|
175
|
-
context.onItemFocus(id);
|
|
129
|
+
focusable ? context.onItemFocus(id) : event.preventDefault();
|
|
176
130
|
}),
|
|
177
131
|
onFocus: (0, import_core.composeEventHandlers)(props.onFocus, () => context.onItemFocus(id)),
|
|
178
132
|
...import_core.isWeb && {
|
|
@@ -188,13 +142,11 @@ const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
|
188
142
|
const focusIntent = getFocusIntent(event, context.orientation, context.dir);
|
|
189
143
|
if (focusIntent !== void 0) {
|
|
190
144
|
event.preventDefault();
|
|
191
|
-
|
|
192
|
-
let candidateNodes = items.map((item) => item.ref.current);
|
|
145
|
+
let candidateNodes = getItems().filter((item) => item.focusable).map((item) => item.ref.current);
|
|
193
146
|
if (focusIntent === "last")
|
|
194
147
|
candidateNodes.reverse();
|
|
195
148
|
else if (focusIntent === "prev" || focusIntent === "next") {
|
|
196
|
-
|
|
197
|
-
candidateNodes.reverse();
|
|
149
|
+
focusIntent === "prev" && candidateNodes.reverse();
|
|
198
150
|
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
199
151
|
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
|
|
200
152
|
}
|
|
@@ -209,18 +161,12 @@ const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
|
209
161
|
);
|
|
210
162
|
});
|
|
211
163
|
RovingFocusGroupItem.displayName = ITEM_NAME;
|
|
212
|
-
const GROUP_NAME = "RovingFocusGroup"
|
|
213
|
-
const [Collection, useCollection, createCollectionScope] = (0, import_collection.createCollection)(GROUP_NAME);
|
|
214
|
-
const [createRovingFocusGroupContext, createRovingFocusGroupScope] = (0, import_create_context.createContextScope)(
|
|
164
|
+
const GROUP_NAME = "RovingFocusGroup", [Collection, useCollection, createCollectionScope] = (0, import_collection.createCollection)(GROUP_NAME), [createRovingFocusGroupContext, createRovingFocusGroupScope] = (0, import_create_context.createContextScope)(
|
|
215
165
|
GROUP_NAME,
|
|
216
166
|
[createCollectionScope]
|
|
217
|
-
)
|
|
218
|
-
const [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
|
|
219
|
-
const RovingFocusGroup = (0, import_core.withStaticProperties)(
|
|
167
|
+
), [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME), RovingFocusGroup = (0, import_core.withStaticProperties)(
|
|
220
168
|
React.forwardRef(
|
|
221
|
-
(props, forwardedRef) => {
|
|
222
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
|
|
223
|
-
}
|
|
169
|
+
(props, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) })
|
|
224
170
|
),
|
|
225
171
|
{
|
|
226
172
|
Item: RovingFocusGroupItem
|
|
@@ -238,27 +184,18 @@ const MAP_KEY_TO_FOCUS_INTENT = {
|
|
|
238
184
|
End: "last"
|
|
239
185
|
};
|
|
240
186
|
function getDirectionAwareKey(key, dir) {
|
|
241
|
-
|
|
242
|
-
return key;
|
|
243
|
-
return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
|
|
187
|
+
return dir !== "rtl" ? key : key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
|
|
244
188
|
}
|
|
245
189
|
function getFocusIntent(event, orientation, dir) {
|
|
246
190
|
const key = getDirectionAwareKey(event.key, dir);
|
|
247
|
-
if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key))
|
|
248
|
-
return
|
|
249
|
-
if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key))
|
|
250
|
-
return void 0;
|
|
251
|
-
return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
191
|
+
if (!(orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) && !(orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)))
|
|
192
|
+
return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
252
193
|
}
|
|
253
194
|
function focusFirst(candidates) {
|
|
254
195
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
255
|
-
for (const candidate of candidates)
|
|
256
|
-
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
|
|
196
|
+
for (const candidate of candidates)
|
|
197
|
+
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus(), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT))
|
|
257
198
|
return;
|
|
258
|
-
candidate.focus();
|
|
259
|
-
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)
|
|
260
|
-
return;
|
|
261
|
-
}
|
|
262
199
|
}
|
|
263
200
|
function wrapArray(array, startIndex) {
|
|
264
201
|
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": "
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -3,18 +3,14 @@ var __create = Object.create;
|
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
7
|
var __export = (target, all) => {
|
|
9
8
|
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable:
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
10
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
14
12
|
for (let key of __getOwnPropNames(from))
|
|
15
|
-
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
13
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
14
|
return to;
|
|
19
15
|
};
|
|
20
16
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
@@ -22,26 +18,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
22
18
|
// file that has been converted to a CommonJS file using a Babel-
|
|
23
19
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
20
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable:
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
26
22
|
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
|
+
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
29
24
|
var RovingFocusGroup_native_exports = {};
|
|
30
25
|
__export(RovingFocusGroup_native_exports, {
|
|
31
26
|
RovingFocusGroup: () => RovingFocusGroup,
|
|
32
27
|
createRovingFocusGroupScope: () => createRovingFocusGroupScope
|
|
33
28
|
});
|
|
34
29
|
module.exports = __toCommonJS(RovingFocusGroup_native_exports);
|
|
35
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
|
|
37
|
-
var import_react = __toESM(require("react"));
|
|
38
|
-
const ITEM_NAME = "RovingFocusGroupItem";
|
|
39
|
-
const RovingFocusGroupItem = import_react.default.forwardRef(
|
|
30
|
+
var import_core = require("@tamagui/core"), import_react = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
|
|
31
|
+
const ITEM_NAME = "RovingFocusGroupItem", RovingFocusGroupItem = import_react.default.forwardRef(
|
|
40
32
|
({ children, ...props }, _ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, { ...props, children })
|
|
41
33
|
);
|
|
42
34
|
RovingFocusGroupItem.displayName = ITEM_NAME;
|
|
43
|
-
const GROUP_NAME = "RovingFocusGroup"
|
|
44
|
-
const RovingFocusGroup = (0, import_core.withStaticProperties)(
|
|
35
|
+
const GROUP_NAME = "RovingFocusGroup", RovingFocusGroup = (0, import_core.withStaticProperties)(
|
|
45
36
|
import_react.default.forwardRef(({ children, ...props }, _ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, { ...props, children })),
|
|
46
37
|
{
|
|
47
38
|
Item: RovingFocusGroupItem
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/RovingFocusGroup.native.tsx"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA4C,0BAC5C,eAAkB,2BASd;AAHJ,MAAM,YAAY,wBACZ,uBAAuB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAyB,SAC7C,4CAAC,qBAAO,GAAG,OAAQ,UAAS;AAEhC;AACA,qBAAqB,cAAc;AACnC,MAAM,aAAa,oBAEb,uBAAmB;AAAA,EACvB,aAAAA,QAAM,WAAW,CAAC,EAAE,UAAU,GAAG,MAAM,GAA0B,SAC/D,4CAAC,qBAAO,GAAG,OAAQ,UAAS,CAC7B;AAAA,EACD;AAAA,IACE,MAAM;AAAA,EACR;AACF;AAEA,iBAAiB,cAAc;AAE/B,MAAM,8BAA8B,MAAM,OAAO,CAAC;",
|
|
5
5
|
"names": ["React"]
|
|
6
6
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
var __defProp = Object.defineProperty;
|
|
3
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
5
|
var __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from
|
|
6
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
8
7
|
for (let key of __getOwnPropNames(from))
|
|
9
|
-
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
8
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
9
|
return to;
|
|
13
|
-
};
|
|
14
|
-
var
|
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
10
|
+
}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
11
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
16
12
|
var src_exports = {};
|
|
17
13
|
module.exports = __toCommonJS(src_exports);
|
|
18
14
|
__reExport(src_exports, require("./RovingFocusGroup"), module.exports);
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
+
return to;
|
|
11
|
+
}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
12
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
13
|
+
var src_exports = {};
|
|
14
|
+
module.exports = __toCommonJS(src_exports);
|
|
15
|
+
__reExport(src_exports, require("./RovingFocusGroup"), module.exports);
|
|
16
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
17
|
+
0 && (module.exports = {
|
|
18
|
+
...require("./RovingFocusGroup")
|
|
19
|
+
});
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
1
|
import { createCollection } from "@tamagui/collection";
|
|
3
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
4
3
|
import {
|
|
@@ -12,41 +11,28 @@ import { createContextScope } from "@tamagui/create-context";
|
|
|
12
11
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
13
12
|
import { useDirection } from "@tamagui/use-direction";
|
|
14
13
|
import * as React from "react";
|
|
15
|
-
|
|
16
|
-
const EVENT_OPTIONS = { bubbles:
|
|
17
|
-
const RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
14
|
+
import { jsx } from "react/jsx-runtime";
|
|
15
|
+
const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus", EVENT_OPTIONS = { bubbles: !1, cancelable: !0 }, RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
18
16
|
const {
|
|
19
17
|
__scopeRovingFocusGroup,
|
|
20
18
|
orientation,
|
|
21
|
-
loop =
|
|
19
|
+
loop = !1,
|
|
22
20
|
dir,
|
|
23
21
|
currentTabStopId: currentTabStopIdProp,
|
|
24
22
|
defaultCurrentTabStopId,
|
|
25
23
|
onCurrentTabStopIdChange,
|
|
26
24
|
onEntryFocus,
|
|
27
25
|
...groupProps
|
|
28
|
-
} = props
|
|
29
|
-
const ref = React.useRef(null);
|
|
30
|
-
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
31
|
-
const direction = useDirection(dir);
|
|
32
|
-
const [currentTabStopId = null, setCurrentTabStopId] = useControllableState({
|
|
26
|
+
} = props, ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref), direction = useDirection(dir), [currentTabStopId = null, setCurrentTabStopId] = useControllableState({
|
|
33
27
|
prop: currentTabStopIdProp,
|
|
34
28
|
defaultProp: defaultCurrentTabStopId ?? null,
|
|
35
29
|
onChange: onCurrentTabStopIdChange
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
const handleEntryFocus = useEvent(onEntryFocus);
|
|
39
|
-
const getItems = useCollection(__scopeRovingFocusGroup);
|
|
40
|
-
const isClickFocusRef = React.useRef(false);
|
|
41
|
-
const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
|
|
42
|
-
React.useEffect(() => {
|
|
30
|
+
}), [isTabbingBackOut, setIsTabbingBackOut] = React.useState(!1), handleEntryFocus = useEvent(onEntryFocus), getItems = useCollection(__scopeRovingFocusGroup), isClickFocusRef = React.useRef(!1), [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
|
|
31
|
+
return React.useEffect(() => {
|
|
43
32
|
const node = ref.current;
|
|
44
|
-
if (node)
|
|
45
|
-
node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
}, [handleEntryFocus]);
|
|
49
|
-
return /* @__PURE__ */ jsx(
|
|
33
|
+
if (node)
|
|
34
|
+
return node.addEventListener(ENTRY_FOCUS, handleEntryFocus), () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
35
|
+
}, [handleEntryFocus]), /* @__PURE__ */ jsx(
|
|
50
36
|
RovingFocusProvider,
|
|
51
37
|
{
|
|
52
38
|
scope: __scopeRovingFocusGroup,
|
|
@@ -58,7 +44,7 @@ const RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
58
44
|
(tabStopId) => setCurrentTabStopId(tabStopId),
|
|
59
45
|
[setCurrentTabStopId]
|
|
60
46
|
),
|
|
61
|
-
onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(
|
|
47
|
+
onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(!0), []),
|
|
62
48
|
onFocusableItemAdd: React.useCallback(
|
|
63
49
|
() => setFocusableItemsCount((prevCount) => prevCount + 1),
|
|
64
50
|
[]
|
|
@@ -76,57 +62,41 @@ const RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
76
62
|
ref: composedRefs,
|
|
77
63
|
style: [{ outline: "none" }, props.style],
|
|
78
64
|
onMouseDown: composeEventHandlers(props.onMouseDown, () => {
|
|
79
|
-
isClickFocusRef.current =
|
|
65
|
+
isClickFocusRef.current = !0;
|
|
80
66
|
}),
|
|
81
67
|
onFocus: composeEventHandlers(props.onFocus, (event) => {
|
|
82
68
|
const isKeyboardFocus = !isClickFocusRef.current;
|
|
83
69
|
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
84
70
|
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
85
|
-
event.currentTarget.dispatchEvent(entryFocusEvent)
|
|
86
|
-
|
|
87
|
-
const items = getItems().filter((item) => item.focusable);
|
|
88
|
-
const activeItem = items.find((item) => item.active);
|
|
89
|
-
const currentItem = items.find((item) => item.id === currentTabStopId);
|
|
90
|
-
const candidateItems = [activeItem, currentItem, ...items].filter(
|
|
71
|
+
if (event.currentTarget.dispatchEvent(entryFocusEvent), !entryFocusEvent.defaultPrevented) {
|
|
72
|
+
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
73
|
Boolean
|
|
92
|
-
);
|
|
93
|
-
const candidateNodes = candidateItems.map((item) => item.ref.current);
|
|
74
|
+
).map((item) => item.ref.current);
|
|
94
75
|
focusFirst(candidateNodes);
|
|
95
76
|
}
|
|
96
77
|
}
|
|
97
|
-
isClickFocusRef.current =
|
|
78
|
+
isClickFocusRef.current = !1;
|
|
98
79
|
}),
|
|
99
80
|
onBlur: composeEventHandlers(
|
|
100
81
|
props.onBlur,
|
|
101
|
-
() => setIsTabbingBackOut(
|
|
82
|
+
() => setIsTabbingBackOut(!1)
|
|
102
83
|
)
|
|
103
84
|
}
|
|
104
85
|
)
|
|
105
86
|
}
|
|
106
87
|
);
|
|
107
|
-
})
|
|
108
|
-
const ITEM_NAME = "RovingFocusGroupItem";
|
|
109
|
-
const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
88
|
+
}), ITEM_NAME = "RovingFocusGroupItem", RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
110
89
|
const {
|
|
111
90
|
__scopeRovingFocusGroup,
|
|
112
|
-
focusable =
|
|
113
|
-
active =
|
|
91
|
+
focusable = !0,
|
|
92
|
+
active = !1,
|
|
114
93
|
tabStopId,
|
|
115
94
|
...itemProps
|
|
116
|
-
} = props;
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
const getItems = useCollection(__scopeRovingFocusGroup);
|
|
122
|
-
const { onFocusableItemAdd, onFocusableItemRemove } = context;
|
|
123
|
-
React.useEffect(() => {
|
|
124
|
-
if (focusable) {
|
|
125
|
-
onFocusableItemAdd();
|
|
126
|
-
return () => onFocusableItemRemove();
|
|
127
|
-
}
|
|
128
|
-
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
|
|
129
|
-
return /* @__PURE__ */ jsx(
|
|
95
|
+
} = props, autoId = React.useId(), id = tabStopId || autoId, context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup), isCurrentTabStop = context.currentTabStopId === id, getItems = useCollection(__scopeRovingFocusGroup), { onFocusableItemAdd, onFocusableItemRemove } = context;
|
|
96
|
+
return React.useEffect(() => {
|
|
97
|
+
if (focusable)
|
|
98
|
+
return onFocusableItemAdd(), () => onFocusableItemRemove();
|
|
99
|
+
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]), /* @__PURE__ */ jsx(
|
|
130
100
|
Collection.ItemSlot,
|
|
131
101
|
{
|
|
132
102
|
scope: __scopeRovingFocusGroup,
|
|
@@ -141,10 +111,7 @@ const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
|
141
111
|
...itemProps,
|
|
142
112
|
ref: forwardedRef,
|
|
143
113
|
onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
|
|
144
|
-
|
|
145
|
-
event.preventDefault();
|
|
146
|
-
else
|
|
147
|
-
context.onItemFocus(id);
|
|
114
|
+
focusable ? context.onItemFocus(id) : event.preventDefault();
|
|
148
115
|
}),
|
|
149
116
|
onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
|
|
150
117
|
...isWeb && {
|
|
@@ -160,13 +127,11 @@ const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
|
160
127
|
const focusIntent = getFocusIntent(event, context.orientation, context.dir);
|
|
161
128
|
if (focusIntent !== void 0) {
|
|
162
129
|
event.preventDefault();
|
|
163
|
-
|
|
164
|
-
let candidateNodes = items.map((item) => item.ref.current);
|
|
130
|
+
let candidateNodes = getItems().filter((item) => item.focusable).map((item) => item.ref.current);
|
|
165
131
|
if (focusIntent === "last")
|
|
166
132
|
candidateNodes.reverse();
|
|
167
133
|
else if (focusIntent === "prev" || focusIntent === "next") {
|
|
168
|
-
|
|
169
|
-
candidateNodes.reverse();
|
|
134
|
+
focusIntent === "prev" && candidateNodes.reverse();
|
|
170
135
|
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
171
136
|
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
|
|
172
137
|
}
|
|
@@ -181,18 +146,12 @@ const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
|
181
146
|
);
|
|
182
147
|
});
|
|
183
148
|
RovingFocusGroupItem.displayName = ITEM_NAME;
|
|
184
|
-
const GROUP_NAME = "RovingFocusGroup"
|
|
185
|
-
const [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME);
|
|
186
|
-
const [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
|
|
149
|
+
const GROUP_NAME = "RovingFocusGroup", [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME), [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
|
|
187
150
|
GROUP_NAME,
|
|
188
151
|
[createCollectionScope]
|
|
189
|
-
)
|
|
190
|
-
const [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
|
|
191
|
-
const RovingFocusGroup = withStaticProperties(
|
|
152
|
+
), [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME), RovingFocusGroup = withStaticProperties(
|
|
192
153
|
React.forwardRef(
|
|
193
|
-
(props, forwardedRef) => {
|
|
194
|
-
return /* @__PURE__ */ jsx(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
|
|
195
|
-
}
|
|
154
|
+
(props, forwardedRef) => /* @__PURE__ */ jsx(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) })
|
|
196
155
|
),
|
|
197
156
|
{
|
|
198
157
|
Item: RovingFocusGroupItem
|
|
@@ -210,27 +169,18 @@ const MAP_KEY_TO_FOCUS_INTENT = {
|
|
|
210
169
|
End: "last"
|
|
211
170
|
};
|
|
212
171
|
function getDirectionAwareKey(key, dir) {
|
|
213
|
-
|
|
214
|
-
return key;
|
|
215
|
-
return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
|
|
172
|
+
return dir !== "rtl" ? key : key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
|
|
216
173
|
}
|
|
217
174
|
function getFocusIntent(event, orientation, dir) {
|
|
218
175
|
const key = getDirectionAwareKey(event.key, dir);
|
|
219
|
-
if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key))
|
|
220
|
-
return
|
|
221
|
-
if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key))
|
|
222
|
-
return void 0;
|
|
223
|
-
return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
176
|
+
if (!(orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) && !(orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)))
|
|
177
|
+
return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
224
178
|
}
|
|
225
179
|
function focusFirst(candidates) {
|
|
226
180
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
227
|
-
for (const candidate of candidates)
|
|
228
|
-
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
|
|
181
|
+
for (const candidate of candidates)
|
|
182
|
+
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus(), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT))
|
|
229
183
|
return;
|
|
230
|
-
candidate.focus();
|
|
231
|
-
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)
|
|
232
|
-
return;
|
|
233
|
-
}
|
|
234
184
|
}
|
|
235
185
|
function wrapArray(array, startIndex) {
|
|
236
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": "
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
1
|
import { Stack, withStaticProperties } from "@tamagui/core";
|
|
3
2
|
import React from "react";
|
|
4
|
-
|
|
5
|
-
const RovingFocusGroupItem = React.forwardRef(
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
const ITEM_NAME = "RovingFocusGroupItem", RovingFocusGroupItem = React.forwardRef(
|
|
6
5
|
({ children, ...props }, _ref) => /* @__PURE__ */ jsx(Stack, { ...props, children })
|
|
7
6
|
);
|
|
8
7
|
RovingFocusGroupItem.displayName = ITEM_NAME;
|
|
9
|
-
const GROUP_NAME = "RovingFocusGroup"
|
|
10
|
-
const RovingFocusGroup = withStaticProperties(
|
|
8
|
+
const GROUP_NAME = "RovingFocusGroup", RovingFocusGroup = withStaticProperties(
|
|
11
9
|
React.forwardRef(({ children, ...props }, _ref) => /* @__PURE__ */ jsx(Stack, { ...props, children })),
|
|
12
10
|
{
|
|
13
11
|
Item: RovingFocusGroupItem
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/RovingFocusGroup.native.tsx"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "AAAA,SAAS,OAAO,4BAA4B;AAC5C,OAAO,WAAW;AASd;AAHJ,MAAM,YAAY,wBACZ,uBAAuB,MAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAyB,SAC7C,oBAAC,SAAO,GAAG,OAAQ,UAAS;AAEhC;AACA,qBAAqB,cAAc;AACnC,MAAM,aAAa,oBAEb,mBAAmB;AAAA,EACvB,MAAM,WAAW,CAAC,EAAE,UAAU,GAAG,MAAM,GAA0B,SAC/D,oBAAC,SAAO,GAAG,OAAQ,UAAS,CAC7B;AAAA,EACD;AAAA,IACE,MAAM;AAAA,EACR;AACF;AAEA,iBAAiB,cAAc;AAE/B,MAAM,8BAA8B,MAAM,OAAO,CAAC;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -11,41 +11,27 @@ import { createContextScope } from "@tamagui/create-context";
|
|
|
11
11
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
12
12
|
import { useDirection } from "@tamagui/use-direction";
|
|
13
13
|
import * as React from "react";
|
|
14
|
-
const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus"
|
|
15
|
-
const EVENT_OPTIONS = { bubbles: false, cancelable: true };
|
|
16
|
-
const RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
14
|
+
const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus", EVENT_OPTIONS = { bubbles: !1, cancelable: !0 }, RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
17
15
|
const {
|
|
18
16
|
__scopeRovingFocusGroup,
|
|
19
17
|
orientation,
|
|
20
|
-
loop =
|
|
18
|
+
loop = !1,
|
|
21
19
|
dir,
|
|
22
20
|
currentTabStopId: currentTabStopIdProp,
|
|
23
21
|
defaultCurrentTabStopId,
|
|
24
22
|
onCurrentTabStopIdChange,
|
|
25
23
|
onEntryFocus,
|
|
26
24
|
...groupProps
|
|
27
|
-
} = props
|
|
28
|
-
const ref = React.useRef(null);
|
|
29
|
-
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
30
|
-
const direction = useDirection(dir);
|
|
31
|
-
const [currentTabStopId = null, setCurrentTabStopId] = useControllableState({
|
|
25
|
+
} = props, ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref), direction = useDirection(dir), [currentTabStopId = null, setCurrentTabStopId] = useControllableState({
|
|
32
26
|
prop: currentTabStopIdProp,
|
|
33
27
|
defaultProp: defaultCurrentTabStopId ?? null,
|
|
34
28
|
onChange: onCurrentTabStopIdChange
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
const handleEntryFocus = useEvent(onEntryFocus);
|
|
38
|
-
const getItems = useCollection(__scopeRovingFocusGroup);
|
|
39
|
-
const isClickFocusRef = React.useRef(false);
|
|
40
|
-
const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
|
|
41
|
-
React.useEffect(() => {
|
|
29
|
+
}), [isTabbingBackOut, setIsTabbingBackOut] = React.useState(!1), handleEntryFocus = useEvent(onEntryFocus), getItems = useCollection(__scopeRovingFocusGroup), isClickFocusRef = React.useRef(!1), [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
|
|
30
|
+
return React.useEffect(() => {
|
|
42
31
|
const node = ref.current;
|
|
43
|
-
if (node)
|
|
44
|
-
node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
}, [handleEntryFocus]);
|
|
48
|
-
return <RovingFocusProvider
|
|
32
|
+
if (node)
|
|
33
|
+
return node.addEventListener(ENTRY_FOCUS, handleEntryFocus), () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
34
|
+
}, [handleEntryFocus]), <RovingFocusProvider
|
|
49
35
|
scope={__scopeRovingFocusGroup}
|
|
50
36
|
orientation={orientation}
|
|
51
37
|
dir={direction}
|
|
@@ -55,7 +41,7 @@ const RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
55
41
|
(tabStopId) => setCurrentTabStopId(tabStopId),
|
|
56
42
|
[setCurrentTabStopId]
|
|
57
43
|
)}
|
|
58
|
-
onItemShiftTab={React.useCallback(() => setIsTabbingBackOut(
|
|
44
|
+
onItemShiftTab={React.useCallback(() => setIsTabbingBackOut(!0), [])}
|
|
59
45
|
onFocusableItemAdd={React.useCallback(
|
|
60
46
|
() => setFocusableItemsCount((prevCount) => prevCount + 1),
|
|
61
47
|
[]
|
|
@@ -71,54 +57,38 @@ const RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
71
57
|
ref={composedRefs}
|
|
72
58
|
style={[{ outline: "none" }, props.style]}
|
|
73
59
|
onMouseDown={composeEventHandlers(props.onMouseDown, () => {
|
|
74
|
-
isClickFocusRef.current =
|
|
60
|
+
isClickFocusRef.current = !0;
|
|
75
61
|
})}
|
|
76
62
|
onFocus={composeEventHandlers(props.onFocus, (event) => {
|
|
77
63
|
const isKeyboardFocus = !isClickFocusRef.current;
|
|
78
64
|
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
79
65
|
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
80
|
-
event.currentTarget.dispatchEvent(entryFocusEvent)
|
|
81
|
-
|
|
82
|
-
const items = getItems().filter((item) => item.focusable);
|
|
83
|
-
const activeItem = items.find((item) => item.active);
|
|
84
|
-
const currentItem = items.find((item) => item.id === currentTabStopId);
|
|
85
|
-
const candidateItems = [activeItem, currentItem, ...items].filter(
|
|
66
|
+
if (event.currentTarget.dispatchEvent(entryFocusEvent), !entryFocusEvent.defaultPrevented) {
|
|
67
|
+
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(
|
|
86
68
|
Boolean
|
|
87
|
-
);
|
|
88
|
-
const candidateNodes = candidateItems.map((item) => item.ref.current);
|
|
69
|
+
).map((item) => item.ref.current);
|
|
89
70
|
focusFirst(candidateNodes);
|
|
90
71
|
}
|
|
91
72
|
}
|
|
92
|
-
isClickFocusRef.current =
|
|
73
|
+
isClickFocusRef.current = !1;
|
|
93
74
|
})}
|
|
94
75
|
onBlur={composeEventHandlers(
|
|
95
76
|
props.onBlur,
|
|
96
|
-
() => setIsTabbingBackOut(
|
|
77
|
+
() => setIsTabbingBackOut(!1)
|
|
97
78
|
)}
|
|
98
79
|
/></RovingFocusProvider>;
|
|
99
|
-
})
|
|
100
|
-
const ITEM_NAME = "RovingFocusGroupItem";
|
|
101
|
-
const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
80
|
+
}), ITEM_NAME = "RovingFocusGroupItem", RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
102
81
|
const {
|
|
103
82
|
__scopeRovingFocusGroup,
|
|
104
|
-
focusable =
|
|
105
|
-
active =
|
|
83
|
+
focusable = !0,
|
|
84
|
+
active = !1,
|
|
106
85
|
tabStopId,
|
|
107
86
|
...itemProps
|
|
108
|
-
} = props;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
const getItems = useCollection(__scopeRovingFocusGroup);
|
|
114
|
-
const { onFocusableItemAdd, onFocusableItemRemove } = context;
|
|
115
|
-
React.useEffect(() => {
|
|
116
|
-
if (focusable) {
|
|
117
|
-
onFocusableItemAdd();
|
|
118
|
-
return () => onFocusableItemRemove();
|
|
119
|
-
}
|
|
120
|
-
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
|
|
121
|
-
return <Collection.ItemSlot
|
|
87
|
+
} = props, autoId = React.useId(), id = tabStopId || autoId, context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup), isCurrentTabStop = context.currentTabStopId === id, getItems = useCollection(__scopeRovingFocusGroup), { onFocusableItemAdd, onFocusableItemRemove } = context;
|
|
88
|
+
return React.useEffect(() => {
|
|
89
|
+
if (focusable)
|
|
90
|
+
return onFocusableItemAdd(), () => onFocusableItemRemove();
|
|
91
|
+
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]), <Collection.ItemSlot
|
|
122
92
|
scope={__scopeRovingFocusGroup}
|
|
123
93
|
id={id}
|
|
124
94
|
focusable={focusable}
|
|
@@ -129,10 +99,7 @@ const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
|
129
99
|
{...itemProps}
|
|
130
100
|
ref={forwardedRef}
|
|
131
101
|
onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {
|
|
132
|
-
|
|
133
|
-
event.preventDefault();
|
|
134
|
-
else
|
|
135
|
-
context.onItemFocus(id);
|
|
102
|
+
focusable ? context.onItemFocus(id) : event.preventDefault();
|
|
136
103
|
})}
|
|
137
104
|
onFocus={composeEventHandlers(props.onFocus, () => context.onItemFocus(id))}
|
|
138
105
|
{...isWeb && {
|
|
@@ -148,13 +115,11 @@ const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
|
148
115
|
const focusIntent = getFocusIntent(event, context.orientation, context.dir);
|
|
149
116
|
if (focusIntent !== void 0) {
|
|
150
117
|
event.preventDefault();
|
|
151
|
-
|
|
152
|
-
let candidateNodes = items.map((item) => item.ref.current);
|
|
118
|
+
let candidateNodes = getItems().filter((item) => item.focusable).map((item) => item.ref.current);
|
|
153
119
|
if (focusIntent === "last")
|
|
154
120
|
candidateNodes.reverse();
|
|
155
121
|
else if (focusIntent === "prev" || focusIntent === "next") {
|
|
156
|
-
|
|
157
|
-
candidateNodes.reverse();
|
|
122
|
+
focusIntent === "prev" && candidateNodes.reverse();
|
|
158
123
|
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
159
124
|
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
|
|
160
125
|
}
|
|
@@ -166,18 +131,12 @@ const RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
|
|
|
166
131
|
/></Collection.ItemSlot>;
|
|
167
132
|
});
|
|
168
133
|
RovingFocusGroupItem.displayName = ITEM_NAME;
|
|
169
|
-
const GROUP_NAME = "RovingFocusGroup"
|
|
170
|
-
const [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME);
|
|
171
|
-
const [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
|
|
134
|
+
const GROUP_NAME = "RovingFocusGroup", [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME), [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
|
|
172
135
|
GROUP_NAME,
|
|
173
136
|
[createCollectionScope]
|
|
174
|
-
)
|
|
175
|
-
const [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
|
|
176
|
-
const RovingFocusGroup = withStaticProperties(
|
|
137
|
+
), [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME), RovingFocusGroup = withStaticProperties(
|
|
177
138
|
React.forwardRef(
|
|
178
|
-
(props, forwardedRef) => {
|
|
179
|
-
return <Collection.Provider scope={props.__scopeRovingFocusGroup}><Collection.Slot scope={props.__scopeRovingFocusGroup}><RovingFocusGroupImpl {...props} ref={forwardedRef} /></Collection.Slot></Collection.Provider>;
|
|
180
|
-
}
|
|
139
|
+
(props, forwardedRef) => <Collection.Provider scope={props.__scopeRovingFocusGroup}><Collection.Slot scope={props.__scopeRovingFocusGroup}><RovingFocusGroupImpl {...props} ref={forwardedRef} /></Collection.Slot></Collection.Provider>
|
|
181
140
|
),
|
|
182
141
|
{
|
|
183
142
|
Item: RovingFocusGroupItem
|
|
@@ -195,27 +154,18 @@ const MAP_KEY_TO_FOCUS_INTENT = {
|
|
|
195
154
|
End: "last"
|
|
196
155
|
};
|
|
197
156
|
function getDirectionAwareKey(key, dir) {
|
|
198
|
-
|
|
199
|
-
return key;
|
|
200
|
-
return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
|
|
157
|
+
return dir !== "rtl" ? key : key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
|
|
201
158
|
}
|
|
202
159
|
function getFocusIntent(event, orientation, dir) {
|
|
203
160
|
const key = getDirectionAwareKey(event.key, dir);
|
|
204
|
-
if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key))
|
|
205
|
-
return
|
|
206
|
-
if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key))
|
|
207
|
-
return void 0;
|
|
208
|
-
return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
161
|
+
if (!(orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) && !(orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)))
|
|
162
|
+
return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
209
163
|
}
|
|
210
164
|
function focusFirst(candidates) {
|
|
211
165
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
212
|
-
for (const candidate of candidates)
|
|
213
|
-
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
|
|
166
|
+
for (const candidate of candidates)
|
|
167
|
+
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus(), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT))
|
|
214
168
|
return;
|
|
215
|
-
candidate.focus();
|
|
216
|
-
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)
|
|
217
|
-
return;
|
|
218
|
-
}
|
|
219
169
|
}
|
|
220
170
|
function wrapArray(array, startIndex) {
|
|
221
171
|
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;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AAEnC,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,YAAY,WAAW;AAEvB,MAAM,cAAc
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { Stack, withStaticProperties } from "@tamagui/core";
|
|
2
2
|
import React from "react";
|
|
3
|
-
const ITEM_NAME = "RovingFocusGroupItem"
|
|
4
|
-
const RovingFocusGroupItem = React.forwardRef(
|
|
3
|
+
const ITEM_NAME = "RovingFocusGroupItem", RovingFocusGroupItem = React.forwardRef(
|
|
5
4
|
({ children, ...props }, _ref) => <Stack {...props}>{children}</Stack>
|
|
6
5
|
);
|
|
7
6
|
RovingFocusGroupItem.displayName = ITEM_NAME;
|
|
8
|
-
const GROUP_NAME = "RovingFocusGroup"
|
|
9
|
-
const RovingFocusGroup = withStaticProperties(
|
|
7
|
+
const GROUP_NAME = "RovingFocusGroup", RovingFocusGroup = withStaticProperties(
|
|
10
8
|
React.forwardRef(({ children, ...props }, _ref) => <Stack {...props}>{children}</Stack>),
|
|
11
9
|
{
|
|
12
10
|
Item: RovingFocusGroupItem
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/RovingFocusGroup.native.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,OAAO,4BAA4B;AAC5C,OAAO,WAAW;AAMlB,MAAM,YAAY
|
|
4
|
+
"mappings": "AAAA,SAAS,OAAO,4BAA4B;AAC5C,OAAO,WAAW;AAMlB,MAAM,YAAY,wBACZ,uBAAuB,MAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAyB,SAC7C,CAAC,UAAU,QAAQ,SAAS,EAA3B;AAEL;AACA,qBAAqB,cAAc;AACnC,MAAM,aAAa,oBAEb,mBAAmB;AAAA,EACvB,MAAM,WAAW,CAAC,EAAE,UAAU,GAAG,MAAM,GAA0B,SAC/D,CAAC,UAAU,QAAQ,SAAS,EAA3B,MACF;AAAA,EACD;AAAA,IACE,MAAM;AAAA,EACR;AACF;AAEA,iBAAiB,cAAc;AAE/B,MAAM,8BAA8B,MAAM,OAAO,CAAC;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/roving-focus",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.62.1",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -27,19 +27,19 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@tamagui/collection": "1.
|
|
31
|
-
"@tamagui/compose-refs": "1.
|
|
32
|
-
"@tamagui/core": "1.
|
|
33
|
-
"@tamagui/create-context": "1.
|
|
34
|
-
"@tamagui/use-controllable-state": "1.
|
|
35
|
-
"@tamagui/use-direction": "1.
|
|
36
|
-
"@tamagui/use-event": "1.
|
|
30
|
+
"@tamagui/collection": "1.62.1",
|
|
31
|
+
"@tamagui/compose-refs": "1.62.1",
|
|
32
|
+
"@tamagui/core": "1.62.1",
|
|
33
|
+
"@tamagui/create-context": "1.62.1",
|
|
34
|
+
"@tamagui/use-controllable-state": "1.62.1",
|
|
35
|
+
"@tamagui/use-direction": "1.62.1",
|
|
36
|
+
"@tamagui/use-event": "1.62.1"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"react": "*"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@tamagui/build": "1.
|
|
42
|
+
"@tamagui/build": "1.62.1",
|
|
43
43
|
"react": "^18.2.0"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|