#Rover

The <Rover> is a utility component that manages focus between items.

#Import

import { Rover } from 'bumbag';

#Usage

#Controlled

#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.

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.

move (id: string, unstable_silent?: boolean) => void Required

Moves focus to a given element ID.

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 "left" | "right" | "center"

alignY "bottom" | "top" | "center"

altitude string

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 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.

orientation "horizontal" | "vertical"

Defines the orientation of the rover list.

currentId string

The current focused element ID.

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.

orientation "horizontal" | "vertical"

Defines the orientation of the rover list.

currentId string

The current focused element ID.

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
Hello world
Copyright © 2020 Jake Moxey