import React from 'react' ; import { useIsRTL , createHook } from '@workday/canvas-kit-react/common' ; import { CursorModel , useCursorNavigation } from './useCursorModel' ; export const orientationKeyMap = { horizontal : { ArrowLeft : 'previous' , Left : 'previous' , ArrowRight : 'next' , Right : 'next' , Home : 'first' , End : 'last' , } , vertical : { ArrowUp : 'previous' , Up : 'previous' , ArrowDown : 'next' , Down : 'next' , Home : 'first' , End : 'last' , } , } as const ; const rightToLeftMap = { ArrowLeft : 'ArrowRight' , Left : 'Right' , ArrowRight : 'ArrowLeft' , Right : 'Left' , Home : 'End' , End : 'Home' , } as const ; see https export const useRovingFocus = createHook ( ( { state , events , getId } , ref , elemProps = { } ) => { const focusRef = React . useRef ( false ) ; const getIdRef = React . useRef ( getId ) ; const stateRef = React . useRef ( state ) ; stateRef . current = state ; const keyDownRef = React . useRef ( false ) ; const isRTL = useIsRTL ( ) ; const navigation = useCursorNavigation ( state , getId ) ; React . useEffect ( ( ) => { if ( keyDownRef . current ) { const item = navigation . getItem ( state . cursorId ) ; document . querySelector < HTMLElement > ( `#${ state . id }-${ getIdRef . current ( item ) }` ) ?. focus ( ) ; keyDownRef . current = false ; } } , [ state . cursorId , state . id , navigation ] ) ; return { onKeyDown ( event ) { ( Object . keys ( orientationKeyMap [ state . orientation ] ) as ( keyof typeof orientationKeyMap [ typeof state . orientation ] ) [ ] ) . forEach ( key => { if ( isRTL ? event . key === rightToLeftMap [ key ] : event . key === key ) { const event = orientationKeyMap [ state . orientation ] [ key ] ; keyDownRef . current = true ; events [ event ] ?. ( ) ; } } ) ; } , onFocus ( ) { focusRef . current = true ; } , onBlur ( ) { focusRef . current = false ; } , id : `${ state . id }-${ elemProps . name }` , tabIndex : ! state . cursorId ? 0 : ! ! elemProps . name && state . cursorId === elemProps . name ? 0 : - 1 , ref , } ; } ) ;