Rover#
The <Rover>
is a utility component that manages focus between items.
Import#
import { Rover } from 'bumbag';
Usage#
Controlled#
Accessing internal state#
Any descendant component of Rover.State
can utilise Rover.useContext
to access the internal rover state:
function Example() {const { rover } = Rover.useContext();return (<Button onClick={rover.hide}>Hide rover</Button>)}
Props#
Rover Props#
disabled
boolean
Same as the HTML attribute.
focusable
boolean
When an element is disabled
, it may still be focusable
. It works
similarly to readOnly
on form elements. In this case, only
aria-disabled
will be set.
id
string
Same as the HTML attribute.
stopId
string
Element ID.
13 state props
These props are returned by the state hook. You can spread them into this component (...state
) or pass them separately. You can also provide these props from your own state logic.
baseId
string
ID that will serve as a base for all the items IDs.
orientation
"horizontal" | "vertical"
Defines the orientation of the rover list.
currentId
string
Required
The current focused element ID.
first
() => void
Required
Moves focus to the first element.
last
() => void
Required
Moves focus to the last element.
move
(id: string, unstable_silent?: boolean) => void
Required
Moves focus to a given element ID.
next
() => void
Required
Moves focus to the next element.
previous
() => void
Required
Moves focus to the previous element.
stops
Stop[]
Required
A list of element refs and IDs of the roving items.
register
(id: string, ref: RefObject<HTMLElement>) => void
Required
Registers the element ID and ref in the roving tab index list.
unregister
(id: string) => void
Required
Unregisters the roving item.
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"right" | "left" | "center"
alignY
"top" | "bottom" | "center"
variant
string
colorMode
string
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 95 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
State#
Rover.State API#
baseId
string
ID that will serve as a base for all the items IDs.
currentId
string
The current focused element ID.
orientation
"horizontal" | "vertical"
Defines the orientation of the rover list.
loop
boolean
If enabled:
- Jumps to the first item when moving next from the last item.
- Jumps to the last item when moving previous from the first item.
Rover.State Return Values#
18 values
baseId
string
Required
ID that will serve as a base for all the items IDs.
orientation
"horizontal" | "vertical"
Defines the orientation of the rover list.
stops
Stop[]
Required
A list of element refs and IDs of the roving items.
currentId
string
Required
The current focused element ID.
loop
boolean
Required
If enabled:
- Jumps to the first item when moving next from the last item.
- Jumps to the last item when moving previous from the first item.
setBaseId
(value: SetStateAction<string>) => void
Required
Sets baseId
.
register
(id: string, ref: RefObject<HTMLElement>) => void
Required
Registers the element ID and ref in the roving tab index list.
unregister
(id: string) => void
Required
Unregisters the roving item.
move
(id: string, unstable_silent?: boolean) => void
Required
Moves focus to a given element ID.
next
() => void
Required
Moves focus to the next element.
previous
() => void
Required
Moves focus to the previous element.
first
() => void
Required
Moves focus to the first element.
last
() => void
Required
Moves focus to the last element.
Rover.useState API#
baseId
string
ID that will serve as a base for all the items IDs.
currentId
string
The current focused element ID.
orientation
"horizontal" | "vertical"
Defines the orientation of the rover list.
loop
boolean
If enabled:
- Jumps to the first item when moving next from the last item.
- Jumps to the last item when moving previous from the first item.
Rover.useState Return Values#
18 values
baseId
string
Required
ID that will serve as a base for all the items IDs.
orientation
"horizontal" | "vertical"
Defines the orientation of the rover list.
stops
Stop[]
Required
A list of element refs and IDs of the roving items.
currentId
string
Required
The current focused element ID.
loop
boolean
Required
If enabled:
- Jumps to the first item when moving next from the last item.
- Jumps to the last item when moving previous from the first item.
setBaseId
(value: SetStateAction<string>) => void
Required
Sets baseId
.
register
(id: string, ref: RefObject<HTMLElement>) => void
Required
Registers the element ID and ref in the roving tab index list.
unregister
(id: string) => void
Required
Unregisters the roving item.
move
(id: string, unstable_silent?: boolean) => void
Required
Moves focus to a given element ID.
next
() => void
Required
Moves focus to the next element.
previous
() => void
Required
Moves focus to the previous element.
first
() => void
Required
Moves focus to the first element.
last
() => void
Required
Moves focus to the last element.
Theming#
Rover.styles.base