@radix-ui/react-roving-focus 1.0.5-rc.9 → 1.1.0-rc.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/index.js CHANGED
@@ -1,271 +1,251 @@
1
- var $9QJ9Y$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
2
- var $9QJ9Y$react = require("react");
3
- var $9QJ9Y$radixuiprimitive = require("@radix-ui/primitive");
4
- var $9QJ9Y$radixuireactcollection = require("@radix-ui/react-collection");
5
- var $9QJ9Y$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
6
- var $9QJ9Y$radixuireactcontext = require("@radix-ui/react-context");
7
- var $9QJ9Y$radixuireactid = require("@radix-ui/react-id");
8
- var $9QJ9Y$radixuireactprimitive = require("@radix-ui/react-primitive");
9
- var $9QJ9Y$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
10
- var $9QJ9Y$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
11
- var $9QJ9Y$radixuireactdirection = require("@radix-ui/react-direction");
12
-
13
- function $parcel$export(e, n, v, s) {
14
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
15
- }
16
- function $parcel$interopDefault(a) {
17
- return a && a.__esModule ? a.default : a;
18
- }
19
-
20
- $parcel$export(module.exports, "createRovingFocusGroupScope", () => $0063afae63b3fa70$export$c7109489551a4f4);
21
- $parcel$export(module.exports, "RovingFocusGroup", () => $0063afae63b3fa70$export$8699f7c8af148338);
22
- $parcel$export(module.exports, "RovingFocusGroupItem", () => $0063afae63b3fa70$export$ab9df7c53fe8454);
23
- $parcel$export(module.exports, "Root", () => $0063afae63b3fa70$export$be92b6f5f03c0fe9);
24
- $parcel$export(module.exports, "Item", () => $0063afae63b3fa70$export$6d08773d2e66f8f2);
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
- const $0063afae63b3fa70$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
37
- const $0063afae63b3fa70$var$EVENT_OPTIONS = {
38
- bubbles: false,
39
- cancelable: true
40
- };
41
- /* -------------------------------------------------------------------------------------------------
42
- * RovingFocusGroup
43
- * -----------------------------------------------------------------------------------------------*/ const $0063afae63b3fa70$var$GROUP_NAME = 'RovingFocusGroup';
44
- const [$0063afae63b3fa70$var$Collection, $0063afae63b3fa70$var$useCollection, $0063afae63b3fa70$var$createCollectionScope] = $9QJ9Y$radixuireactcollection.createCollection($0063afae63b3fa70$var$GROUP_NAME);
45
- const [$0063afae63b3fa70$var$createRovingFocusGroupContext, $0063afae63b3fa70$export$c7109489551a4f4] = $9QJ9Y$radixuireactcontext.createContextScope($0063afae63b3fa70$var$GROUP_NAME, [
46
- $0063afae63b3fa70$var$createCollectionScope
47
- ]);
48
- const [$0063afae63b3fa70$var$RovingFocusProvider, $0063afae63b3fa70$var$useRovingFocusContext] = $0063afae63b3fa70$var$createRovingFocusGroupContext($0063afae63b3fa70$var$GROUP_NAME);
49
- const $0063afae63b3fa70$export$8699f7c8af148338 = /*#__PURE__*/ $9QJ9Y$react.forwardRef((props, forwardedRef)=>{
50
- return /*#__PURE__*/ $9QJ9Y$react.createElement($0063afae63b3fa70$var$Collection.Provider, {
51
- scope: props.__scopeRovingFocusGroup
52
- }, /*#__PURE__*/ $9QJ9Y$react.createElement($0063afae63b3fa70$var$Collection.Slot, {
53
- scope: props.__scopeRovingFocusGroup
54
- }, /*#__PURE__*/ $9QJ9Y$react.createElement($0063afae63b3fa70$var$RovingFocusGroupImpl, ($parcel$interopDefault($9QJ9Y$babelruntimehelpersextends))({}, props, {
55
- ref: forwardedRef
56
- }))));
57
- });
58
- /*#__PURE__*/ Object.assign($0063afae63b3fa70$export$8699f7c8af148338, {
59
- displayName: $0063afae63b3fa70$var$GROUP_NAME
60
- });
61
- /* -----------------------------------------------------------------------------------------------*/ const $0063afae63b3fa70$var$RovingFocusGroupImpl = /*#__PURE__*/ $9QJ9Y$react.forwardRef((props, forwardedRef)=>{
62
- const { __scopeRovingFocusGroup: __scopeRovingFocusGroup , orientation: orientation , loop: loop = false , dir: dir , currentTabStopId: currentTabStopIdProp , defaultCurrentTabStopId: defaultCurrentTabStopId , onCurrentTabStopIdChange: onCurrentTabStopIdChange , onEntryFocus: onEntryFocus , preventScrollOnEntryFocus: preventScrollOnEntryFocus = false , ...groupProps } = props;
63
- const ref = $9QJ9Y$react.useRef(null);
64
- const composedRefs = $9QJ9Y$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
65
- const direction = $9QJ9Y$radixuireactdirection.useDirection(dir);
66
- const [currentTabStopId = null, setCurrentTabStopId] = $9QJ9Y$radixuireactusecontrollablestate.useControllableState({
67
- prop: currentTabStopIdProp,
68
- defaultProp: defaultCurrentTabStopId,
69
- onChange: onCurrentTabStopIdChange
1
+ "use strict";
2
+ (() => {
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
10
+ get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
11
+ }) : x)(function(x) {
12
+ if (typeof require !== "undefined") return require.apply(this, arguments);
13
+ throw Error('Dynamic require of "' + x + '" is not supported');
14
+ });
15
+ var __copyProps = (to, from, except, desc) => {
16
+ if (from && typeof from === "object" || typeof from === "function") {
17
+ for (let key of __getOwnPropNames(from))
18
+ if (!__hasOwnProp.call(to, key) && key !== except)
19
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
20
+ }
21
+ return to;
22
+ };
23
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
24
+ // If the importer is in node compatibility mode or this is not an ESM
25
+ // file that has been converted to a CommonJS file using a Babel-
26
+ // compatible transform (i.e. "__esModule" has not been set), then set
27
+ // "default" to the CommonJS "module.exports" for node compatibility.
28
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
29
+ mod
30
+ ));
31
+
32
+ // packages/react/roving-focus/src/RovingFocusGroup.tsx
33
+ var React = __toESM(__require("react"));
34
+ var import_primitive = __require("@radix-ui/primitive");
35
+ var import_react_collection = __require("@radix-ui/react-collection");
36
+ var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
37
+ var import_react_context = __require("@radix-ui/react-context");
38
+ var import_react_id = __require("@radix-ui/react-id");
39
+ var import_react_primitive = __require("@radix-ui/react-primitive");
40
+ var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
41
+ var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
42
+ var import_react_direction = __require("@radix-ui/react-direction");
43
+ var import_jsx_runtime = __require("react/jsx-runtime");
44
+ var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
45
+ var EVENT_OPTIONS = { bubbles: false, cancelable: true };
46
+ var GROUP_NAME = "RovingFocusGroup";
47
+ var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(GROUP_NAME);
48
+ var [createRovingFocusGroupContext, createRovingFocusGroupScope] = (0, import_react_context.createContextScope)(
49
+ GROUP_NAME,
50
+ [createCollectionScope]
51
+ );
52
+ var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
53
+ var RovingFocusGroup = React.forwardRef(
54
+ (props, forwardedRef) => {
55
+ 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 }) }) });
56
+ }
57
+ );
58
+ RovingFocusGroup.displayName = GROUP_NAME;
59
+ var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
60
+ const {
61
+ __scopeRovingFocusGroup,
62
+ orientation,
63
+ loop = false,
64
+ dir,
65
+ currentTabStopId: currentTabStopIdProp,
66
+ defaultCurrentTabStopId,
67
+ onCurrentTabStopIdChange,
68
+ onEntryFocus,
69
+ preventScrollOnEntryFocus = false,
70
+ ...groupProps
71
+ } = props;
72
+ const ref = React.useRef(null);
73
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
74
+ const direction = (0, import_react_direction.useDirection)(dir);
75
+ const [currentTabStopId = null, setCurrentTabStopId] = (0, import_react_use_controllable_state.useControllableState)({
76
+ prop: currentTabStopIdProp,
77
+ defaultProp: defaultCurrentTabStopId,
78
+ onChange: onCurrentTabStopIdChange
70
79
  });
71
- const [isTabbingBackOut, setIsTabbingBackOut] = $9QJ9Y$react.useState(false);
72
- const handleEntryFocus = $9QJ9Y$radixuireactusecallbackref.useCallbackRef(onEntryFocus);
73
- const getItems = $0063afae63b3fa70$var$useCollection(__scopeRovingFocusGroup);
74
- const isClickFocusRef = $9QJ9Y$react.useRef(false);
75
- const [focusableItemsCount, setFocusableItemsCount] = $9QJ9Y$react.useState(0);
76
- $9QJ9Y$react.useEffect(()=>{
77
- const node = ref.current;
78
- if (node) {
79
- node.addEventListener($0063afae63b3fa70$var$ENTRY_FOCUS, handleEntryFocus);
80
- return ()=>node.removeEventListener($0063afae63b3fa70$var$ENTRY_FOCUS, handleEntryFocus)
81
- ;
82
- }
83
- }, [
84
- handleEntryFocus
85
- ]);
86
- return /*#__PURE__*/ $9QJ9Y$react.createElement($0063afae63b3fa70$var$RovingFocusProvider, {
80
+ const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
81
+ const handleEntryFocus = (0, import_react_use_callback_ref.useCallbackRef)(onEntryFocus);
82
+ const getItems = useCollection(__scopeRovingFocusGroup);
83
+ const isClickFocusRef = React.useRef(false);
84
+ const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
85
+ React.useEffect(() => {
86
+ const node = ref.current;
87
+ if (node) {
88
+ node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
89
+ return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
90
+ }
91
+ }, [handleEntryFocus]);
92
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
93
+ RovingFocusProvider,
94
+ {
87
95
  scope: __scopeRovingFocusGroup,
88
- orientation: orientation,
96
+ orientation,
89
97
  dir: direction,
90
- loop: loop,
91
- currentTabStopId: currentTabStopId,
92
- onItemFocus: $9QJ9Y$react.useCallback((tabStopId)=>setCurrentTabStopId(tabStopId)
93
- , [
94
- setCurrentTabStopId
95
- ]),
96
- onItemShiftTab: $9QJ9Y$react.useCallback(()=>setIsTabbingBackOut(true)
97
- , []),
98
- onFocusableItemAdd: $9QJ9Y$react.useCallback(()=>setFocusableItemsCount((prevCount)=>prevCount + 1
99
- )
100
- , []),
101
- onFocusableItemRemove: $9QJ9Y$react.useCallback(()=>setFocusableItemsCount((prevCount)=>prevCount - 1
102
- )
103
- , [])
104
- }, /*#__PURE__*/ $9QJ9Y$react.createElement($9QJ9Y$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($9QJ9Y$babelruntimehelpersextends))({
105
- tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
106
- "data-orientation": orientation
107
- }, groupProps, {
108
- ref: composedRefs,
109
- style: {
110
- outline: 'none',
111
- ...props.style
112
- },
113
- onMouseDown: $9QJ9Y$radixuiprimitive.composeEventHandlers(props.onMouseDown, ()=>{
114
- isClickFocusRef.current = true;
115
- }),
116
- onFocus: $9QJ9Y$radixuiprimitive.composeEventHandlers(props.onFocus, (event)=>{
117
- // We normally wouldn't need this check, because we already check
118
- // that the focus is on the current target and not bubbling to it.
119
- // We do this because Safari doesn't focus buttons when clicked, and
120
- // instead, the wrapper will get focused and not through a bubbling event.
121
- const isKeyboardFocus = !isClickFocusRef.current;
122
- if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
123
- const entryFocusEvent = new CustomEvent($0063afae63b3fa70$var$ENTRY_FOCUS, $0063afae63b3fa70$var$EVENT_OPTIONS);
98
+ loop,
99
+ currentTabStopId,
100
+ onItemFocus: React.useCallback(
101
+ (tabStopId) => setCurrentTabStopId(tabStopId),
102
+ [setCurrentTabStopId]
103
+ ),
104
+ onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []),
105
+ onFocusableItemAdd: React.useCallback(
106
+ () => setFocusableItemsCount((prevCount) => prevCount + 1),
107
+ []
108
+ ),
109
+ onFocusableItemRemove: React.useCallback(
110
+ () => setFocusableItemsCount((prevCount) => prevCount - 1),
111
+ []
112
+ ),
113
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
114
+ import_react_primitive.Primitive.div,
115
+ {
116
+ tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
117
+ "data-orientation": orientation,
118
+ ...groupProps,
119
+ ref: composedRefs,
120
+ style: { outline: "none", ...props.style },
121
+ onMouseDown: (0, import_primitive.composeEventHandlers)(props.onMouseDown, () => {
122
+ isClickFocusRef.current = true;
123
+ }),
124
+ onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, (event) => {
125
+ const isKeyboardFocus = !isClickFocusRef.current;
126
+ if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
127
+ const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
124
128
  event.currentTarget.dispatchEvent(entryFocusEvent);
125
129
  if (!entryFocusEvent.defaultPrevented) {
126
- const items = getItems().filter((item)=>item.focusable
127
- );
128
- const activeItem = items.find((item)=>item.active
129
- );
130
- const currentItem = items.find((item)=>item.id === currentTabStopId
131
- );
132
- const candidateItems = [
133
- activeItem,
134
- currentItem,
135
- ...items
136
- ].filter(Boolean);
137
- const candidateNodes = candidateItems.map((item)=>item.ref.current
138
- );
139
- $0063afae63b3fa70$var$focusFirst(candidateNodes, preventScrollOnEntryFocus);
130
+ const items = getItems().filter((item) => item.focusable);
131
+ const activeItem = items.find((item) => item.active);
132
+ const currentItem = items.find((item) => item.id === currentTabStopId);
133
+ const candidateItems = [activeItem, currentItem, ...items].filter(
134
+ Boolean
135
+ );
136
+ const candidateNodes = candidateItems.map((item) => item.ref.current);
137
+ focusFirst(candidateNodes, preventScrollOnEntryFocus);
140
138
  }
141
- }
142
- isClickFocusRef.current = false;
143
- }),
144
- onBlur: $9QJ9Y$radixuiprimitive.composeEventHandlers(props.onBlur, ()=>setIsTabbingBackOut(false)
139
+ }
140
+ isClickFocusRef.current = false;
141
+ }),
142
+ onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, () => setIsTabbingBackOut(false))
143
+ }
145
144
  )
146
- })));
147
- });
148
- /* -------------------------------------------------------------------------------------------------
149
- * RovingFocusGroupItem
150
- * -----------------------------------------------------------------------------------------------*/ const $0063afae63b3fa70$var$ITEM_NAME = 'RovingFocusGroupItem';
151
- const $0063afae63b3fa70$export$ab9df7c53fe8454 = /*#__PURE__*/ $9QJ9Y$react.forwardRef((props, forwardedRef)=>{
152
- const { __scopeRovingFocusGroup: __scopeRovingFocusGroup , focusable: focusable = true , active: active = false , tabStopId: tabStopId , ...itemProps } = props;
153
- const autoId = $9QJ9Y$radixuireactid.useId();
154
- const id = tabStopId || autoId;
155
- const context = $0063afae63b3fa70$var$useRovingFocusContext($0063afae63b3fa70$var$ITEM_NAME, __scopeRovingFocusGroup);
156
- const isCurrentTabStop = context.currentTabStopId === id;
157
- const getItems = $0063afae63b3fa70$var$useCollection(__scopeRovingFocusGroup);
158
- const { onFocusableItemAdd: onFocusableItemAdd , onFocusableItemRemove: onFocusableItemRemove } = context;
159
- $9QJ9Y$react.useEffect(()=>{
145
+ }
146
+ );
147
+ });
148
+ var ITEM_NAME = "RovingFocusGroupItem";
149
+ var RovingFocusGroupItem = React.forwardRef(
150
+ (props, forwardedRef) => {
151
+ const {
152
+ __scopeRovingFocusGroup,
153
+ focusable = true,
154
+ active = false,
155
+ tabStopId,
156
+ ...itemProps
157
+ } = props;
158
+ const autoId = (0, import_react_id.useId)();
159
+ const id = tabStopId || autoId;
160
+ const context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup);
161
+ const isCurrentTabStop = context.currentTabStopId === id;
162
+ const getItems = useCollection(__scopeRovingFocusGroup);
163
+ const { onFocusableItemAdd, onFocusableItemRemove } = context;
164
+ React.useEffect(() => {
160
165
  if (focusable) {
161
- onFocusableItemAdd();
162
- return ()=>onFocusableItemRemove()
163
- ;
166
+ onFocusableItemAdd();
167
+ return () => onFocusableItemRemove();
164
168
  }
165
- }, [
166
- focusable,
167
- onFocusableItemAdd,
168
- onFocusableItemRemove
169
- ]);
170
- return /*#__PURE__*/ $9QJ9Y$react.createElement($0063afae63b3fa70$var$Collection.ItemSlot, {
171
- scope: __scopeRovingFocusGroup,
172
- id: id,
173
- focusable: focusable,
174
- active: active
175
- }, /*#__PURE__*/ $9QJ9Y$react.createElement($9QJ9Y$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($9QJ9Y$babelruntimehelpersextends))({
176
- tabIndex: isCurrentTabStop ? 0 : -1,
177
- "data-orientation": context.orientation
178
- }, itemProps, {
179
- ref: forwardedRef,
180
- onMouseDown: $9QJ9Y$radixuiprimitive.composeEventHandlers(props.onMouseDown, (event)=>{
181
- // We prevent focusing non-focusable items on `mousedown`.
182
- // Even though the item has tabIndex={-1}, that only means take it out of the tab order.
183
- if (!focusable) event.preventDefault(); // Safari doesn't focus a button when clicked so we run our logic on mousedown also
184
- else context.onItemFocus(id);
185
- }),
186
- onFocus: $9QJ9Y$radixuiprimitive.composeEventHandlers(props.onFocus, ()=>context.onItemFocus(id)
187
- ),
188
- onKeyDown: $9QJ9Y$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
189
- if (event.key === 'Tab' && event.shiftKey) {
190
- context.onItemShiftTab();
191
- return;
192
- }
193
- if (event.target !== event.currentTarget) return;
194
- const focusIntent = $0063afae63b3fa70$var$getFocusIntent(event, context.orientation, context.dir);
195
- if (focusIntent !== undefined) {
196
- if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
197
- event.preventDefault();
198
- const items = getItems().filter((item)=>item.focusable
199
- );
200
- let candidateNodes = items.map((item)=>item.ref.current
201
- );
202
- if (focusIntent === 'last') candidateNodes.reverse();
203
- else if (focusIntent === 'prev' || focusIntent === 'next') {
204
- if (focusIntent === 'prev') candidateNodes.reverse();
169
+ }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
170
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
171
+ Collection.ItemSlot,
172
+ {
173
+ scope: __scopeRovingFocusGroup,
174
+ id,
175
+ focusable,
176
+ active,
177
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
178
+ import_react_primitive.Primitive.span,
179
+ {
180
+ tabIndex: isCurrentTabStop ? 0 : -1,
181
+ "data-orientation": context.orientation,
182
+ ...itemProps,
183
+ ref: forwardedRef,
184
+ onMouseDown: (0, import_primitive.composeEventHandlers)(props.onMouseDown, (event) => {
185
+ if (!focusable) event.preventDefault();
186
+ else context.onItemFocus(id);
187
+ }),
188
+ onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => context.onItemFocus(id)),
189
+ onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
190
+ if (event.key === "Tab" && event.shiftKey) {
191
+ context.onItemShiftTab();
192
+ return;
193
+ }
194
+ if (event.target !== event.currentTarget) return;
195
+ const focusIntent = getFocusIntent(event, context.orientation, context.dir);
196
+ if (focusIntent !== void 0) {
197
+ if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
198
+ event.preventDefault();
199
+ const items = getItems().filter((item) => item.focusable);
200
+ let candidateNodes = items.map((item) => item.ref.current);
201
+ if (focusIntent === "last") candidateNodes.reverse();
202
+ else if (focusIntent === "prev" || focusIntent === "next") {
203
+ if (focusIntent === "prev") candidateNodes.reverse();
205
204
  const currentIndex = candidateNodes.indexOf(event.currentTarget);
206
- candidateNodes = context.loop ? $0063afae63b3fa70$var$wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
205
+ candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
206
+ }
207
+ setTimeout(() => focusFirst(candidateNodes));
207
208
  }
208
- /**
209
- * Imperative focus during keydown is risky so we prevent React's batching updates
210
- * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
211
- */ setTimeout(()=>$0063afae63b3fa70$var$focusFirst(candidateNodes)
212
- );
209
+ })
213
210
  }
214
- })
215
- })));
216
- });
217
- /*#__PURE__*/ Object.assign($0063afae63b3fa70$export$ab9df7c53fe8454, {
218
- displayName: $0063afae63b3fa70$var$ITEM_NAME
219
- });
220
- /* -----------------------------------------------------------------------------------------------*/ // prettier-ignore
221
- const $0063afae63b3fa70$var$MAP_KEY_TO_FOCUS_INTENT = {
222
- ArrowLeft: 'prev',
223
- ArrowUp: 'prev',
224
- ArrowRight: 'next',
225
- ArrowDown: 'next',
226
- PageUp: 'first',
227
- Home: 'first',
228
- PageDown: 'last',
229
- End: 'last'
230
- };
231
- function $0063afae63b3fa70$var$getDirectionAwareKey(key, dir) {
232
- if (dir !== 'rtl') return key;
233
- return key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key;
234
- }
235
- function $0063afae63b3fa70$var$getFocusIntent(event, orientation, dir) {
236
- const key = $0063afae63b3fa70$var$getDirectionAwareKey(event.key, dir);
237
- if (orientation === 'vertical' && [
238
- 'ArrowLeft',
239
- 'ArrowRight'
240
- ].includes(key)) return undefined;
241
- if (orientation === 'horizontal' && [
242
- 'ArrowUp',
243
- 'ArrowDown'
244
- ].includes(key)) return undefined;
245
- return $0063afae63b3fa70$var$MAP_KEY_TO_FOCUS_INTENT[key];
246
- }
247
- function $0063afae63b3fa70$var$focusFirst(candidates, preventScroll = false) {
211
+ )
212
+ }
213
+ );
214
+ }
215
+ );
216
+ RovingFocusGroupItem.displayName = ITEM_NAME;
217
+ var MAP_KEY_TO_FOCUS_INTENT = {
218
+ ArrowLeft: "prev",
219
+ ArrowUp: "prev",
220
+ ArrowRight: "next",
221
+ ArrowDown: "next",
222
+ PageUp: "first",
223
+ Home: "first",
224
+ PageDown: "last",
225
+ End: "last"
226
+ };
227
+ function getDirectionAwareKey(key, dir) {
228
+ if (dir !== "rtl") return key;
229
+ return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
230
+ }
231
+ function getFocusIntent(event, orientation, dir) {
232
+ const key = getDirectionAwareKey(event.key, dir);
233
+ if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
234
+ if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
235
+ return MAP_KEY_TO_FOCUS_INTENT[key];
236
+ }
237
+ function focusFirst(candidates, preventScroll = false) {
248
238
  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
249
- for (const candidate of candidates){
250
- // if focus is already where we want to go, we don't want to keep going through the candidates
251
- if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
252
- candidate.focus({
253
- preventScroll: preventScroll
254
- });
255
- if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
239
+ for (const candidate of candidates) {
240
+ if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
241
+ candidate.focus({ preventScroll });
242
+ if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
256
243
  }
257
- }
258
- /**
259
- * Wraps an array around itself at a given start index
260
- * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
261
- */ function $0063afae63b3fa70$var$wrapArray(array, startIndex) {
262
- return array.map((_, index)=>array[(startIndex + index) % array.length]
263
- );
264
- }
265
- const $0063afae63b3fa70$export$be92b6f5f03c0fe9 = $0063afae63b3fa70$export$8699f7c8af148338;
266
- const $0063afae63b3fa70$export$6d08773d2e66f8f2 = $0063afae63b3fa70$export$ab9df7c53fe8454;
267
-
268
-
269
-
270
-
244
+ }
245
+ function wrapArray(array, startIndex) {
246
+ return array.map((_, index) => array[(startIndex + index) % array.length]);
247
+ }
248
+ var Root = RovingFocusGroup;
249
+ var Item = RovingFocusGroupItem;
250
+ })();
271
251
  //# sourceMappingURL=index.js.map