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