@huin-core/react-roving-focus 1.0.5 → 1.0.6
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 +72 -73
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +72 -73
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -50,7 +50,6 @@ var import_react_primitive = require("@huin-core/react-primitive");
|
|
|
50
50
|
var import_react_use_callback_ref = require("@huin-core/react-use-callback-ref");
|
|
51
51
|
var import_react_use_controllable_state = require("@huin-core/react-use-controllable-state");
|
|
52
52
|
var import_react_direction = require("@huin-core/react-direction");
|
|
53
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
54
53
|
var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
|
|
55
54
|
var EVENT_OPTIONS = { bubbles: false, cancelable: true };
|
|
56
55
|
var GROUP_NAME = "RovingFocusGroup";
|
|
@@ -62,7 +61,7 @@ var [createRovingFocusGroupContext, createRovingFocusGroupScope] = (0, import_re
|
|
|
62
61
|
var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
|
|
63
62
|
var RovingFocusGroup = React.forwardRef(
|
|
64
63
|
(props, forwardedRef) => {
|
|
65
|
-
return /* @__PURE__ */
|
|
64
|
+
return /* @__PURE__ */ React.createElement(Collection.Provider, { scope: props.__scopeRovingFocusGroup }, /* @__PURE__ */ React.createElement(Collection.Slot, { scope: props.__scopeRovingFocusGroup }, /* @__PURE__ */ React.createElement(RovingFocusGroupImpl, { ...props, ref: forwardedRef })));
|
|
66
65
|
}
|
|
67
66
|
);
|
|
68
67
|
RovingFocusGroup.displayName = GROUP_NAME;
|
|
@@ -99,7 +98,7 @@ var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
99
98
|
return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
100
99
|
}
|
|
101
100
|
}, [handleEntryFocus]);
|
|
102
|
-
return /* @__PURE__ */
|
|
101
|
+
return /* @__PURE__ */ React.createElement(
|
|
103
102
|
RovingFocusProvider,
|
|
104
103
|
{
|
|
105
104
|
scope: __scopeRovingFocusGroup,
|
|
@@ -119,40 +118,40 @@ var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
119
118
|
onFocusableItemRemove: React.useCallback(
|
|
120
119
|
() => setFocusableItemsCount((prevCount) => prevCount - 1),
|
|
121
120
|
[]
|
|
122
|
-
),
|
|
123
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
124
|
-
import_react_primitive.Primitive.div,
|
|
125
|
-
{
|
|
126
|
-
tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
|
|
127
|
-
"data-orientation": orientation,
|
|
128
|
-
...groupProps,
|
|
129
|
-
ref: composedRefs,
|
|
130
|
-
style: { outline: "none", ...props.style },
|
|
131
|
-
onMouseDown: (0, import_primitive.composeEventHandlers)(props.onMouseDown, () => {
|
|
132
|
-
isClickFocusRef.current = true;
|
|
133
|
-
}),
|
|
134
|
-
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, (event) => {
|
|
135
|
-
const isKeyboardFocus = !isClickFocusRef.current;
|
|
136
|
-
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
137
|
-
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
138
|
-
event.currentTarget.dispatchEvent(entryFocusEvent);
|
|
139
|
-
if (!entryFocusEvent.defaultPrevented) {
|
|
140
|
-
const items = getItems().filter((item) => item.focusable);
|
|
141
|
-
const activeItem = items.find((item) => item.active);
|
|
142
|
-
const currentItem = items.find((item) => item.id === currentTabStopId);
|
|
143
|
-
const candidateItems = [activeItem, currentItem, ...items].filter(
|
|
144
|
-
Boolean
|
|
145
|
-
);
|
|
146
|
-
const candidateNodes = candidateItems.map((item) => item.ref.current);
|
|
147
|
-
focusFirst(candidateNodes, preventScrollOnEntryFocus);
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
isClickFocusRef.current = false;
|
|
151
|
-
}),
|
|
152
|
-
onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, () => setIsTabbingBackOut(false))
|
|
153
|
-
}
|
|
154
121
|
)
|
|
155
|
-
}
|
|
122
|
+
},
|
|
123
|
+
/* @__PURE__ */ React.createElement(
|
|
124
|
+
import_react_primitive.Primitive.div,
|
|
125
|
+
{
|
|
126
|
+
tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
|
|
127
|
+
"data-orientation": orientation,
|
|
128
|
+
...groupProps,
|
|
129
|
+
ref: composedRefs,
|
|
130
|
+
style: { outline: "none", ...props.style },
|
|
131
|
+
onMouseDown: (0, import_primitive.composeEventHandlers)(props.onMouseDown, () => {
|
|
132
|
+
isClickFocusRef.current = true;
|
|
133
|
+
}),
|
|
134
|
+
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, (event) => {
|
|
135
|
+
const isKeyboardFocus = !isClickFocusRef.current;
|
|
136
|
+
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
137
|
+
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
138
|
+
event.currentTarget.dispatchEvent(entryFocusEvent);
|
|
139
|
+
if (!entryFocusEvent.defaultPrevented) {
|
|
140
|
+
const items = getItems().filter((item) => item.focusable);
|
|
141
|
+
const activeItem = items.find((item) => item.active);
|
|
142
|
+
const currentItem = items.find((item) => item.id === currentTabStopId);
|
|
143
|
+
const candidateItems = [activeItem, currentItem, ...items].filter(
|
|
144
|
+
Boolean
|
|
145
|
+
);
|
|
146
|
+
const candidateNodes = candidateItems.map((item) => item.ref.current);
|
|
147
|
+
focusFirst(candidateNodes, preventScrollOnEntryFocus);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
isClickFocusRef.current = false;
|
|
151
|
+
}),
|
|
152
|
+
onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, () => setIsTabbingBackOut(false))
|
|
153
|
+
}
|
|
154
|
+
)
|
|
156
155
|
);
|
|
157
156
|
});
|
|
158
157
|
var ITEM_NAME = "RovingFocusGroupItem";
|
|
@@ -177,49 +176,49 @@ var RovingFocusGroupItem = React.forwardRef(
|
|
|
177
176
|
return () => onFocusableItemRemove();
|
|
178
177
|
}
|
|
179
178
|
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
|
|
180
|
-
return /* @__PURE__ */
|
|
179
|
+
return /* @__PURE__ */ React.createElement(
|
|
181
180
|
Collection.ItemSlot,
|
|
182
181
|
{
|
|
183
182
|
scope: __scopeRovingFocusGroup,
|
|
184
183
|
id,
|
|
185
184
|
focusable,
|
|
186
|
-
active
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
setTimeout(() => focusFirst(candidateNodes));
|
|
185
|
+
active
|
|
186
|
+
},
|
|
187
|
+
/* @__PURE__ */ React.createElement(
|
|
188
|
+
import_react_primitive.Primitive.span,
|
|
189
|
+
{
|
|
190
|
+
tabIndex: isCurrentTabStop ? 0 : -1,
|
|
191
|
+
"data-orientation": context.orientation,
|
|
192
|
+
...itemProps,
|
|
193
|
+
ref: forwardedRef,
|
|
194
|
+
onMouseDown: (0, import_primitive.composeEventHandlers)(props.onMouseDown, (event) => {
|
|
195
|
+
if (!focusable) event.preventDefault();
|
|
196
|
+
else context.onItemFocus(id);
|
|
197
|
+
}),
|
|
198
|
+
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => context.onItemFocus(id)),
|
|
199
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
200
|
+
if (event.key === "Tab" && event.shiftKey) {
|
|
201
|
+
context.onItemShiftTab();
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
if (event.target !== event.currentTarget) return;
|
|
205
|
+
const focusIntent = getFocusIntent(event, context.orientation, context.dir);
|
|
206
|
+
if (focusIntent !== void 0) {
|
|
207
|
+
if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
|
|
208
|
+
event.preventDefault();
|
|
209
|
+
const items = getItems().filter((item) => item.focusable);
|
|
210
|
+
let candidateNodes = items.map((item) => item.ref.current);
|
|
211
|
+
if (focusIntent === "last") candidateNodes.reverse();
|
|
212
|
+
else if (focusIntent === "prev" || focusIntent === "next") {
|
|
213
|
+
if (focusIntent === "prev") candidateNodes.reverse();
|
|
214
|
+
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
215
|
+
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
|
|
218
216
|
}
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
217
|
+
setTimeout(() => focusFirst(candidateNodes));
|
|
218
|
+
}
|
|
219
|
+
})
|
|
220
|
+
}
|
|
221
|
+
)
|
|
223
222
|
);
|
|
224
223
|
}
|
|
225
224
|
);
|
package/dist/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/RovingFocusGroup.tsx"],
|
|
4
4
|
"sourcesContent": ["'use client';\nexport {\n createRovingFocusGroupScope,\n //\n RovingFocusGroup,\n RovingFocusGroupItem,\n //\n Root,\n Item,\n} from './RovingFocusGroup';\nexport type { RovingFocusGroupProps, RovingFocusItemProps } from './RovingFocusGroup';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@huin-core/primitive';\nimport { createCollection } from '@huin-core/react-collection';\nimport { useComposedRefs } from '@huin-core/react-compose-refs';\nimport { createContextScope } from '@huin-core/react-context';\nimport { useId } from '@huin-core/react-id';\nimport { Primitive } from '@huin-core/react-primitive';\nimport { useCallbackRef } from '@huin-core/react-use-callback-ref';\nimport { useControllableState } from '@huin-core/react-use-controllable-state';\nimport { useDirection } from '@huin-core/react-direction';\n\nimport type { Scope } from '@huin-core/react-context';\n\nconst ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';\nconst EVENT_OPTIONS = { bubbles: false, cancelable: true };\n\n/* -------------------------------------------------------------------------------------------------\n * RovingFocusGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'RovingFocusGroup';\n\ntype ItemData = { id: string; focusable: boolean; active: boolean };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n HTMLSpanElement,\n ItemData\n>(GROUP_NAME);\n\ntype ScopedProps<P> = P & { __scopeRovingFocusGroup?: Scope };\nconst [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(\n GROUP_NAME,\n [createCollectionScope]\n);\n\ntype Orientation = React.AriaAttributes['aria-orientation'];\ntype Direction = 'ltr' | 'rtl';\n\ninterface RovingFocusGroupOptions {\n /**\n * The orientation of the group.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n */\n orientation?: Orientation;\n /**\n * The direction of navigation between items.\n */\n dir?: Direction;\n /**\n * Whether keyboard navigation should loop around\n * @defaultValue false\n */\n loop?: boolean;\n}\n\ntype RovingContextValue = RovingFocusGroupOptions & {\n currentTabStopId: string | null;\n onItemFocus(tabStopId: string): void;\n onItemShiftTab(): void;\n onFocusableItemAdd(): void;\n onFocusableItemRemove(): void;\n};\n\nconst [RovingFocusProvider, useRovingFocusContext] =\n createRovingFocusGroupContext<RovingContextValue>(GROUP_NAME);\n\ntype RovingFocusGroupElement = RovingFocusGroupImplElement;\ninterface RovingFocusGroupProps extends RovingFocusGroupImplProps {}\n\nconst RovingFocusGroup = React.forwardRef<RovingFocusGroupElement, RovingFocusGroupProps>(\n (props: ScopedProps<RovingFocusGroupProps>, forwardedRef) => {\n return (\n <Collection.Provider scope={props.__scopeRovingFocusGroup}>\n <Collection.Slot scope={props.__scopeRovingFocusGroup}>\n <RovingFocusGroupImpl {...props} ref={forwardedRef} />\n </Collection.Slot>\n </Collection.Provider>\n );\n }\n);\n\nRovingFocusGroup.displayName = GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype RovingFocusGroupImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface RovingFocusGroupImplProps\n extends Omit<PrimitiveDivProps, 'dir'>,\n RovingFocusGroupOptions {\n currentTabStopId?: string | null;\n defaultCurrentTabStopId?: string;\n onCurrentTabStopIdChange?: (tabStopId: string | null) => void;\n onEntryFocus?: (event: Event) => void;\n preventScrollOnEntryFocus?: boolean;\n}\n\nconst RovingFocusGroupImpl = React.forwardRef<\n RovingFocusGroupImplElement,\n RovingFocusGroupImplProps\n>((props: ScopedProps<RovingFocusGroupImplProps>, forwardedRef) => {\n const {\n __scopeRovingFocusGroup,\n orientation,\n loop = false,\n dir,\n currentTabStopId: currentTabStopIdProp,\n defaultCurrentTabStopId,\n onCurrentTabStopIdChange,\n onEntryFocus,\n preventScrollOnEntryFocus = false,\n ...groupProps\n } = props;\n const ref = React.useRef<RovingFocusGroupImplElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const direction = useDirection(dir);\n const [currentTabStopId = null, setCurrentTabStopId] = useControllableState({\n prop: currentTabStopIdProp,\n defaultProp: defaultCurrentTabStopId,\n onChange: onCurrentTabStopIdChange,\n });\n const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);\n const handleEntryFocus = useCallbackRef(onEntryFocus);\n const getItems = useCollection(__scopeRovingFocusGroup);\n const isClickFocusRef = React.useRef(false);\n const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);\n\n React.useEffect(() => {\n const node = ref.current;\n if (node) {\n node.addEventListener(ENTRY_FOCUS, handleEntryFocus);\n return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);\n }\n }, [handleEntryFocus]);\n\n return (\n <RovingFocusProvider\n scope={__scopeRovingFocusGroup}\n orientation={orientation}\n dir={direction}\n loop={loop}\n currentTabStopId={currentTabStopId}\n onItemFocus={React.useCallback(\n (tabStopId) => setCurrentTabStopId(tabStopId),\n [setCurrentTabStopId]\n )}\n onItemShiftTab={React.useCallback(() => setIsTabbingBackOut(true), [])}\n onFocusableItemAdd={React.useCallback(\n () => setFocusableItemsCount((prevCount) => prevCount + 1),\n []\n )}\n onFocusableItemRemove={React.useCallback(\n () => setFocusableItemsCount((prevCount) => prevCount - 1),\n []\n )}\n >\n <Primitive.div\n tabIndex={isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0}\n data-orientation={orientation}\n {...groupProps}\n ref={composedRefs}\n style={{ outline: 'none', ...props.style }}\n onMouseDown={composeEventHandlers(props.onMouseDown, () => {\n isClickFocusRef.current = true;\n })}\n onFocus={composeEventHandlers(props.onFocus, (event) => {\n // We normally wouldn't need this check, because we already check\n // that the focus is on the current target and not bubbling to it.\n // We do this because Safari doesn't focus buttons when clicked, and\n // instead, the wrapper will get focused and not through a bubbling event.\n const isKeyboardFocus = !isClickFocusRef.current;\n\n if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {\n const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);\n event.currentTarget.dispatchEvent(entryFocusEvent);\n\n if (!entryFocusEvent.defaultPrevented) {\n const items = getItems().filter((item) => item.focusable);\n const activeItem = items.find((item) => item.active);\n const currentItem = items.find((item) => item.id === currentTabStopId);\n const candidateItems = [activeItem, currentItem, ...items].filter(\n Boolean\n ) as typeof items;\n const candidateNodes = candidateItems.map((item) => item.ref.current!);\n focusFirst(candidateNodes, preventScrollOnEntryFocus);\n }\n }\n\n isClickFocusRef.current = false;\n })}\n onBlur={composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))}\n />\n </RovingFocusProvider>\n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * RovingFocusGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'RovingFocusGroupItem';\n\ntype RovingFocusItemElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface RovingFocusItemProps extends PrimitiveSpanProps {\n tabStopId?: string;\n focusable?: boolean;\n active?: boolean;\n}\n\nconst RovingFocusGroupItem = React.forwardRef<RovingFocusItemElement, RovingFocusItemProps>(\n (props: ScopedProps<RovingFocusItemProps>, forwardedRef) => {\n const {\n __scopeRovingFocusGroup,\n focusable = true,\n active = false,\n tabStopId,\n ...itemProps\n } = props;\n const autoId = useId();\n const id = tabStopId || autoId;\n const context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup);\n const isCurrentTabStop = context.currentTabStopId === id;\n const getItems = useCollection(__scopeRovingFocusGroup);\n\n const { onFocusableItemAdd, onFocusableItemRemove } = context;\n\n React.useEffect(() => {\n if (focusable) {\n onFocusableItemAdd();\n return () => onFocusableItemRemove();\n }\n }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);\n\n return (\n <Collection.ItemSlot\n scope={__scopeRovingFocusGroup}\n id={id}\n focusable={focusable}\n active={active}\n >\n <Primitive.span\n tabIndex={isCurrentTabStop ? 0 : -1}\n data-orientation={context.orientation}\n {...itemProps}\n ref={forwardedRef}\n onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n // We prevent focusing non-focusable items on `mousedown`.\n // Even though the item has tabIndex={-1}, that only means take it out of the tab order.\n if (!focusable) event.preventDefault();\n // Safari doesn't focus a button when clicked so we run our logic on mousedown also\n else context.onItemFocus(id);\n })}\n onFocus={composeEventHandlers(props.onFocus, () => context.onItemFocus(id))}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (event.key === 'Tab' && event.shiftKey) {\n context.onItemShiftTab();\n return;\n }\n\n if (event.target !== event.currentTarget) return;\n\n const focusIntent = getFocusIntent(event, context.orientation, context.dir);\n\n if (focusIntent !== undefined) {\n if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;\n event.preventDefault();\n const items = getItems().filter((item) => item.focusable);\n let candidateNodes = items.map((item) => item.ref.current!);\n\n if (focusIntent === 'last') candidateNodes.reverse();\n else if (focusIntent === 'prev' || focusIntent === 'next') {\n if (focusIntent === 'prev') candidateNodes.reverse();\n const currentIndex = candidateNodes.indexOf(event.currentTarget);\n candidateNodes = context.loop\n ? wrapArray(candidateNodes, currentIndex + 1)\n : candidateNodes.slice(currentIndex + 1);\n }\n\n /**\n * Imperative focus during keydown is risky so we prevent React's batching updates\n * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n */\n setTimeout(() => focusFirst(candidateNodes));\n }\n })}\n />\n </Collection.ItemSlot>\n );\n }\n);\n\nRovingFocusGroupItem.displayName = ITEM_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// prettier-ignore\nconst MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {\n ArrowLeft: 'prev', ArrowUp: 'prev',\n ArrowRight: 'next', ArrowDown: 'next',\n PageUp: 'first', Home: 'first',\n PageDown: 'last', End: 'last',\n};\n\nfunction getDirectionAwareKey(key: string, dir?: Direction) {\n if (dir !== 'rtl') return key;\n return key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key;\n}\n\ntype FocusIntent = 'first' | 'last' | 'prev' | 'next';\n\nfunction getFocusIntent(event: React.KeyboardEvent, orientation?: Orientation, dir?: Direction) {\n const key = getDirectionAwareKey(event.key, dir);\n if (orientation === 'vertical' && ['ArrowLeft', 'ArrowRight'].includes(key)) return undefined;\n if (orientation === 'horizontal' && ['ArrowUp', 'ArrowDown'].includes(key)) return undefined;\n return MAP_KEY_TO_FOCUS_INTENT[key];\n}\n\nfunction focusFirst(candidates: HTMLElement[], preventScroll = false) {\n const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;\n for (const candidate of candidates) {\n // if focus is already where we want to go, we don't want to keep going through the candidates\n if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;\n candidate.focus({ preventScroll });\n if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;\n }\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nfunction wrapArray<T>(array: T[], startIndex: number) {\n return array.map((_, index) => array[(startIndex + index) % array.length]);\n}\n\nconst Root = RovingFocusGroup;\nconst Item = RovingFocusGroupItem;\n\nexport {\n createRovingFocusGroupScope,\n //\n RovingFocusGroup,\n RovingFocusGroupItem,\n //\n Root,\n Item,\n};\nexport type { RovingFocusGroupProps, RovingFocusItemProps };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,uBAAqC;AACrC,8BAAiC;AACjC,gCAAgC;AAChC,2BAAmC;AACnC,sBAAsB;AACtB,6BAA0B;AAC1B,oCAA+B;AAC/B,0CAAqC;AACrC,6BAA6B;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -11,7 +11,6 @@ import { Primitive } from "@huin-core/react-primitive";
|
|
|
11
11
|
import { useCallbackRef } from "@huin-core/react-use-callback-ref";
|
|
12
12
|
import { useControllableState } from "@huin-core/react-use-controllable-state";
|
|
13
13
|
import { useDirection } from "@huin-core/react-direction";
|
|
14
|
-
import { jsx } from "react/jsx-runtime";
|
|
15
14
|
var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
|
|
16
15
|
var EVENT_OPTIONS = { bubbles: false, cancelable: true };
|
|
17
16
|
var GROUP_NAME = "RovingFocusGroup";
|
|
@@ -23,7 +22,7 @@ var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContext
|
|
|
23
22
|
var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
|
|
24
23
|
var RovingFocusGroup = React.forwardRef(
|
|
25
24
|
(props, forwardedRef) => {
|
|
26
|
-
return /* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ React.createElement(Collection.Provider, { scope: props.__scopeRovingFocusGroup }, /* @__PURE__ */ React.createElement(Collection.Slot, { scope: props.__scopeRovingFocusGroup }, /* @__PURE__ */ React.createElement(RovingFocusGroupImpl, { ...props, ref: forwardedRef })));
|
|
27
26
|
}
|
|
28
27
|
);
|
|
29
28
|
RovingFocusGroup.displayName = GROUP_NAME;
|
|
@@ -60,7 +59,7 @@ var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
60
59
|
return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
61
60
|
}
|
|
62
61
|
}, [handleEntryFocus]);
|
|
63
|
-
return /* @__PURE__ */
|
|
62
|
+
return /* @__PURE__ */ React.createElement(
|
|
64
63
|
RovingFocusProvider,
|
|
65
64
|
{
|
|
66
65
|
scope: __scopeRovingFocusGroup,
|
|
@@ -80,40 +79,40 @@ var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
80
79
|
onFocusableItemRemove: React.useCallback(
|
|
81
80
|
() => setFocusableItemsCount((prevCount) => prevCount - 1),
|
|
82
81
|
[]
|
|
83
|
-
),
|
|
84
|
-
children: /* @__PURE__ */ jsx(
|
|
85
|
-
Primitive.div,
|
|
86
|
-
{
|
|
87
|
-
tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
|
|
88
|
-
"data-orientation": orientation,
|
|
89
|
-
...groupProps,
|
|
90
|
-
ref: composedRefs,
|
|
91
|
-
style: { outline: "none", ...props.style },
|
|
92
|
-
onMouseDown: composeEventHandlers(props.onMouseDown, () => {
|
|
93
|
-
isClickFocusRef.current = true;
|
|
94
|
-
}),
|
|
95
|
-
onFocus: composeEventHandlers(props.onFocus, (event) => {
|
|
96
|
-
const isKeyboardFocus = !isClickFocusRef.current;
|
|
97
|
-
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
98
|
-
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
99
|
-
event.currentTarget.dispatchEvent(entryFocusEvent);
|
|
100
|
-
if (!entryFocusEvent.defaultPrevented) {
|
|
101
|
-
const items = getItems().filter((item) => item.focusable);
|
|
102
|
-
const activeItem = items.find((item) => item.active);
|
|
103
|
-
const currentItem = items.find((item) => item.id === currentTabStopId);
|
|
104
|
-
const candidateItems = [activeItem, currentItem, ...items].filter(
|
|
105
|
-
Boolean
|
|
106
|
-
);
|
|
107
|
-
const candidateNodes = candidateItems.map((item) => item.ref.current);
|
|
108
|
-
focusFirst(candidateNodes, preventScrollOnEntryFocus);
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
isClickFocusRef.current = false;
|
|
112
|
-
}),
|
|
113
|
-
onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
|
|
114
|
-
}
|
|
115
82
|
)
|
|
116
|
-
}
|
|
83
|
+
},
|
|
84
|
+
/* @__PURE__ */ React.createElement(
|
|
85
|
+
Primitive.div,
|
|
86
|
+
{
|
|
87
|
+
tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
|
|
88
|
+
"data-orientation": orientation,
|
|
89
|
+
...groupProps,
|
|
90
|
+
ref: composedRefs,
|
|
91
|
+
style: { outline: "none", ...props.style },
|
|
92
|
+
onMouseDown: composeEventHandlers(props.onMouseDown, () => {
|
|
93
|
+
isClickFocusRef.current = true;
|
|
94
|
+
}),
|
|
95
|
+
onFocus: composeEventHandlers(props.onFocus, (event) => {
|
|
96
|
+
const isKeyboardFocus = !isClickFocusRef.current;
|
|
97
|
+
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
98
|
+
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
99
|
+
event.currentTarget.dispatchEvent(entryFocusEvent);
|
|
100
|
+
if (!entryFocusEvent.defaultPrevented) {
|
|
101
|
+
const items = getItems().filter((item) => item.focusable);
|
|
102
|
+
const activeItem = items.find((item) => item.active);
|
|
103
|
+
const currentItem = items.find((item) => item.id === currentTabStopId);
|
|
104
|
+
const candidateItems = [activeItem, currentItem, ...items].filter(
|
|
105
|
+
Boolean
|
|
106
|
+
);
|
|
107
|
+
const candidateNodes = candidateItems.map((item) => item.ref.current);
|
|
108
|
+
focusFirst(candidateNodes, preventScrollOnEntryFocus);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
isClickFocusRef.current = false;
|
|
112
|
+
}),
|
|
113
|
+
onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
|
|
114
|
+
}
|
|
115
|
+
)
|
|
117
116
|
);
|
|
118
117
|
});
|
|
119
118
|
var ITEM_NAME = "RovingFocusGroupItem";
|
|
@@ -138,49 +137,49 @@ var RovingFocusGroupItem = React.forwardRef(
|
|
|
138
137
|
return () => onFocusableItemRemove();
|
|
139
138
|
}
|
|
140
139
|
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
|
|
141
|
-
return /* @__PURE__ */
|
|
140
|
+
return /* @__PURE__ */ React.createElement(
|
|
142
141
|
Collection.ItemSlot,
|
|
143
142
|
{
|
|
144
143
|
scope: __scopeRovingFocusGroup,
|
|
145
144
|
id,
|
|
146
145
|
focusable,
|
|
147
|
-
active
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
setTimeout(() => focusFirst(candidateNodes));
|
|
146
|
+
active
|
|
147
|
+
},
|
|
148
|
+
/* @__PURE__ */ React.createElement(
|
|
149
|
+
Primitive.span,
|
|
150
|
+
{
|
|
151
|
+
tabIndex: isCurrentTabStop ? 0 : -1,
|
|
152
|
+
"data-orientation": context.orientation,
|
|
153
|
+
...itemProps,
|
|
154
|
+
ref: forwardedRef,
|
|
155
|
+
onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
|
|
156
|
+
if (!focusable) event.preventDefault();
|
|
157
|
+
else context.onItemFocus(id);
|
|
158
|
+
}),
|
|
159
|
+
onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
|
|
160
|
+
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
161
|
+
if (event.key === "Tab" && event.shiftKey) {
|
|
162
|
+
context.onItemShiftTab();
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
if (event.target !== event.currentTarget) return;
|
|
166
|
+
const focusIntent = getFocusIntent(event, context.orientation, context.dir);
|
|
167
|
+
if (focusIntent !== void 0) {
|
|
168
|
+
if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
|
|
169
|
+
event.preventDefault();
|
|
170
|
+
const items = getItems().filter((item) => item.focusable);
|
|
171
|
+
let candidateNodes = items.map((item) => item.ref.current);
|
|
172
|
+
if (focusIntent === "last") candidateNodes.reverse();
|
|
173
|
+
else if (focusIntent === "prev" || focusIntent === "next") {
|
|
174
|
+
if (focusIntent === "prev") candidateNodes.reverse();
|
|
175
|
+
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
176
|
+
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
|
|
179
177
|
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
178
|
+
setTimeout(() => focusFirst(candidateNodes));
|
|
179
|
+
}
|
|
180
|
+
})
|
|
181
|
+
}
|
|
182
|
+
)
|
|
184
183
|
);
|
|
185
184
|
}
|
|
186
185
|
);
|
package/dist/index.mjs.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/RovingFocusGroup.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nimport { composeEventHandlers } from '@huin-core/primitive';\nimport { createCollection } from '@huin-core/react-collection';\nimport { useComposedRefs } from '@huin-core/react-compose-refs';\nimport { createContextScope } from '@huin-core/react-context';\nimport { useId } from '@huin-core/react-id';\nimport { Primitive } from '@huin-core/react-primitive';\nimport { useCallbackRef } from '@huin-core/react-use-callback-ref';\nimport { useControllableState } from '@huin-core/react-use-controllable-state';\nimport { useDirection } from '@huin-core/react-direction';\n\nimport type { Scope } from '@huin-core/react-context';\n\nconst ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';\nconst EVENT_OPTIONS = { bubbles: false, cancelable: true };\n\n/* -------------------------------------------------------------------------------------------------\n * RovingFocusGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'RovingFocusGroup';\n\ntype ItemData = { id: string; focusable: boolean; active: boolean };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n HTMLSpanElement,\n ItemData\n>(GROUP_NAME);\n\ntype ScopedProps<P> = P & { __scopeRovingFocusGroup?: Scope };\nconst [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(\n GROUP_NAME,\n [createCollectionScope]\n);\n\ntype Orientation = React.AriaAttributes['aria-orientation'];\ntype Direction = 'ltr' | 'rtl';\n\ninterface RovingFocusGroupOptions {\n /**\n * The orientation of the group.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n */\n orientation?: Orientation;\n /**\n * The direction of navigation between items.\n */\n dir?: Direction;\n /**\n * Whether keyboard navigation should loop around\n * @defaultValue false\n */\n loop?: boolean;\n}\n\ntype RovingContextValue = RovingFocusGroupOptions & {\n currentTabStopId: string | null;\n onItemFocus(tabStopId: string): void;\n onItemShiftTab(): void;\n onFocusableItemAdd(): void;\n onFocusableItemRemove(): void;\n};\n\nconst [RovingFocusProvider, useRovingFocusContext] =\n createRovingFocusGroupContext<RovingContextValue>(GROUP_NAME);\n\ntype RovingFocusGroupElement = RovingFocusGroupImplElement;\ninterface RovingFocusGroupProps extends RovingFocusGroupImplProps {}\n\nconst RovingFocusGroup = React.forwardRef<RovingFocusGroupElement, RovingFocusGroupProps>(\n (props: ScopedProps<RovingFocusGroupProps>, forwardedRef) => {\n return (\n <Collection.Provider scope={props.__scopeRovingFocusGroup}>\n <Collection.Slot scope={props.__scopeRovingFocusGroup}>\n <RovingFocusGroupImpl {...props} ref={forwardedRef} />\n </Collection.Slot>\n </Collection.Provider>\n );\n }\n);\n\nRovingFocusGroup.displayName = GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype RovingFocusGroupImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface RovingFocusGroupImplProps\n extends Omit<PrimitiveDivProps, 'dir'>,\n RovingFocusGroupOptions {\n currentTabStopId?: string | null;\n defaultCurrentTabStopId?: string;\n onCurrentTabStopIdChange?: (tabStopId: string | null) => void;\n onEntryFocus?: (event: Event) => void;\n preventScrollOnEntryFocus?: boolean;\n}\n\nconst RovingFocusGroupImpl = React.forwardRef<\n RovingFocusGroupImplElement,\n RovingFocusGroupImplProps\n>((props: ScopedProps<RovingFocusGroupImplProps>, forwardedRef) => {\n const {\n __scopeRovingFocusGroup,\n orientation,\n loop = false,\n dir,\n currentTabStopId: currentTabStopIdProp,\n defaultCurrentTabStopId,\n onCurrentTabStopIdChange,\n onEntryFocus,\n preventScrollOnEntryFocus = false,\n ...groupProps\n } = props;\n const ref = React.useRef<RovingFocusGroupImplElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const direction = useDirection(dir);\n const [currentTabStopId = null, setCurrentTabStopId] = useControllableState({\n prop: currentTabStopIdProp,\n defaultProp: defaultCurrentTabStopId,\n onChange: onCurrentTabStopIdChange,\n });\n const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);\n const handleEntryFocus = useCallbackRef(onEntryFocus);\n const getItems = useCollection(__scopeRovingFocusGroup);\n const isClickFocusRef = React.useRef(false);\n const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);\n\n React.useEffect(() => {\n const node = ref.current;\n if (node) {\n node.addEventListener(ENTRY_FOCUS, handleEntryFocus);\n return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);\n }\n }, [handleEntryFocus]);\n\n return (\n <RovingFocusProvider\n scope={__scopeRovingFocusGroup}\n orientation={orientation}\n dir={direction}\n loop={loop}\n currentTabStopId={currentTabStopId}\n onItemFocus={React.useCallback(\n (tabStopId) => setCurrentTabStopId(tabStopId),\n [setCurrentTabStopId]\n )}\n onItemShiftTab={React.useCallback(() => setIsTabbingBackOut(true), [])}\n onFocusableItemAdd={React.useCallback(\n () => setFocusableItemsCount((prevCount) => prevCount + 1),\n []\n )}\n onFocusableItemRemove={React.useCallback(\n () => setFocusableItemsCount((prevCount) => prevCount - 1),\n []\n )}\n >\n <Primitive.div\n tabIndex={isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0}\n data-orientation={orientation}\n {...groupProps}\n ref={composedRefs}\n style={{ outline: 'none', ...props.style }}\n onMouseDown={composeEventHandlers(props.onMouseDown, () => {\n isClickFocusRef.current = true;\n })}\n onFocus={composeEventHandlers(props.onFocus, (event) => {\n // We normally wouldn't need this check, because we already check\n // that the focus is on the current target and not bubbling to it.\n // We do this because Safari doesn't focus buttons when clicked, and\n // instead, the wrapper will get focused and not through a bubbling event.\n const isKeyboardFocus = !isClickFocusRef.current;\n\n if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {\n const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);\n event.currentTarget.dispatchEvent(entryFocusEvent);\n\n if (!entryFocusEvent.defaultPrevented) {\n const items = getItems().filter((item) => item.focusable);\n const activeItem = items.find((item) => item.active);\n const currentItem = items.find((item) => item.id === currentTabStopId);\n const candidateItems = [activeItem, currentItem, ...items].filter(\n Boolean\n ) as typeof items;\n const candidateNodes = candidateItems.map((item) => item.ref.current!);\n focusFirst(candidateNodes, preventScrollOnEntryFocus);\n }\n }\n\n isClickFocusRef.current = false;\n })}\n onBlur={composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))}\n />\n </RovingFocusProvider>\n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * RovingFocusGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'RovingFocusGroupItem';\n\ntype RovingFocusItemElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface RovingFocusItemProps extends PrimitiveSpanProps {\n tabStopId?: string;\n focusable?: boolean;\n active?: boolean;\n}\n\nconst RovingFocusGroupItem = React.forwardRef<RovingFocusItemElement, RovingFocusItemProps>(\n (props: ScopedProps<RovingFocusItemProps>, forwardedRef) => {\n const {\n __scopeRovingFocusGroup,\n focusable = true,\n active = false,\n tabStopId,\n ...itemProps\n } = props;\n const autoId = useId();\n const id = tabStopId || autoId;\n const context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup);\n const isCurrentTabStop = context.currentTabStopId === id;\n const getItems = useCollection(__scopeRovingFocusGroup);\n\n const { onFocusableItemAdd, onFocusableItemRemove } = context;\n\n React.useEffect(() => {\n if (focusable) {\n onFocusableItemAdd();\n return () => onFocusableItemRemove();\n }\n }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);\n\n return (\n <Collection.ItemSlot\n scope={__scopeRovingFocusGroup}\n id={id}\n focusable={focusable}\n active={active}\n >\n <Primitive.span\n tabIndex={isCurrentTabStop ? 0 : -1}\n data-orientation={context.orientation}\n {...itemProps}\n ref={forwardedRef}\n onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n // We prevent focusing non-focusable items on `mousedown`.\n // Even though the item has tabIndex={-1}, that only means take it out of the tab order.\n if (!focusable) event.preventDefault();\n // Safari doesn't focus a button when clicked so we run our logic on mousedown also\n else context.onItemFocus(id);\n })}\n onFocus={composeEventHandlers(props.onFocus, () => context.onItemFocus(id))}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (event.key === 'Tab' && event.shiftKey) {\n context.onItemShiftTab();\n return;\n }\n\n if (event.target !== event.currentTarget) return;\n\n const focusIntent = getFocusIntent(event, context.orientation, context.dir);\n\n if (focusIntent !== undefined) {\n if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;\n event.preventDefault();\n const items = getItems().filter((item) => item.focusable);\n let candidateNodes = items.map((item) => item.ref.current!);\n\n if (focusIntent === 'last') candidateNodes.reverse();\n else if (focusIntent === 'prev' || focusIntent === 'next') {\n if (focusIntent === 'prev') candidateNodes.reverse();\n const currentIndex = candidateNodes.indexOf(event.currentTarget);\n candidateNodes = context.loop\n ? wrapArray(candidateNodes, currentIndex + 1)\n : candidateNodes.slice(currentIndex + 1);\n }\n\n /**\n * Imperative focus during keydown is risky so we prevent React's batching updates\n * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n */\n setTimeout(() => focusFirst(candidateNodes));\n }\n })}\n />\n </Collection.ItemSlot>\n );\n }\n);\n\nRovingFocusGroupItem.displayName = ITEM_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// prettier-ignore\nconst MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {\n ArrowLeft: 'prev', ArrowUp: 'prev',\n ArrowRight: 'next', ArrowDown: 'next',\n PageUp: 'first', Home: 'first',\n PageDown: 'last', End: 'last',\n};\n\nfunction getDirectionAwareKey(key: string, dir?: Direction) {\n if (dir !== 'rtl') return key;\n return key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key;\n}\n\ntype FocusIntent = 'first' | 'last' | 'prev' | 'next';\n\nfunction getFocusIntent(event: React.KeyboardEvent, orientation?: Orientation, dir?: Direction) {\n const key = getDirectionAwareKey(event.key, dir);\n if (orientation === 'vertical' && ['ArrowLeft', 'ArrowRight'].includes(key)) return undefined;\n if (orientation === 'horizontal' && ['ArrowUp', 'ArrowDown'].includes(key)) return undefined;\n return MAP_KEY_TO_FOCUS_INTENT[key];\n}\n\nfunction focusFirst(candidates: HTMLElement[], preventScroll = false) {\n const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;\n for (const candidate of candidates) {\n // if focus is already where we want to go, we don't want to keep going through the candidates\n if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;\n candidate.focus({ preventScroll });\n if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;\n }\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nfunction wrapArray<T>(array: T[], startIndex: number) {\n return array.map((_, index) => array[(startIndex + index) % array.length]);\n}\n\nconst Root = RovingFocusGroup;\nconst Item = RovingFocusGroupItem;\n\nexport {\n createRovingFocusGroupScope,\n //\n RovingFocusGroup,\n RovingFocusGroupItem,\n //\n Root,\n Item,\n};\nexport type { RovingFocusGroupProps, RovingFocusItemProps };\n"],
|
|
5
|
-
"mappings": ";;;AAAA,YAAY,WAAW;AACvB,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|