import { commands } from '@config/commands' ; import { KeyboardEvent } from 'react' ; const getKeyboardFocusableElements = ( element = document ) : HTMLElement [ ] => { return [ ... element . querySelectorAll ( 'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])' ) ] . filter ( el => ! el . hasAttribute ( 'disabled' ) ) ; } ; const trapFocus = ( event ) => { const focusableElements = getKeyboardFocusableElements ( ) ; const lastFocusableEl = focusableElements [ focusableElements . length - 1 ] ; if ( event . shiftKey && document . activeElement === focusableElements [ 0 ] ) { lastFocusableEl . focus ( ) ; event . preventDefault ( ) ; } if ( ! event . shiftKey && document . activeElement === lastFocusableEl ) { focusableElements [ 0 ] . focus ( ) ; event . preventDefault ( ) ; } } ; export const handleKeyboardInput = ( event , figmaUIApi ) => { if ( event . code === 'Escape' ) { if ( document . activeElement . classList . contains ( 'select-menu__button--active' ) ) { return ; } figmaUIApi . postMessage ( { pluginMessage : { command : commands . closePlugin } } , '*' ) ; } if ( event . code === 'Tab' ) { trapFocus ( event ) ; } } ;