import * as React from 'react' ; import { DeleteButton , SecondaryButton } from '@workday/canvas-kit-react/button' ; import { Popup , useCloseOnEscape , useCloseOnOutsideClick , useInitialFocus , useReturnFocus , useFocusRedirect , usePopupModel , } from '@workday/canvas-kit-react/popup' ; import { HStack } from '@workday/canvas-kit-labs-react/layout' ; export const FocusRedirect = ( ) => { const model = usePopupModel ( ) ; useCloseOnOutsideClick ( model ) ; useCloseOnEscape ( model ) ; useInitialFocus ( model ) ; useReturnFocus ( model ) ; useFocusRedirect ( model ) ; const handleDelete = ( ) => { console . log ( 'Delete Item' ) ; } ; const popupId = 'popup-test-id' ; const visible = model . state . visibility !== 'hidden' ; React . useLayoutEffect ( ( ) => { if ( visible && model . state . stackRef . current ) { model . state . stackRef . current . setAttribute ( 'id' , popupId ) ; } } , [ model . state . stackRef , visible ] ) ; return ( < Popup model = { model } > < HStack spacing = "s" > < Popup . Target as = { DeleteButton } > Delete Item < /Popup.Target> < div aria - owns = { popupId } style = { { position : 'absolute' } } /> < Popup . Popper > < Popup . Card width = { 400 } padding = "s" > < Popup . CloseIcon aria - label = "Close" / > < Popup . Heading > Delete Item < /Popup.Heading> < Popup . Body > < p > Are you sure you 'd like to delete the item titled ' My Item '?</p> < /Popup.Body> < HStack spacing = "s" > < Popup . CloseButton as = { DeleteButton } onClick = { handleDelete } > Delete < /Popup.CloseButton> < Popup . CloseButton > Cancel < /Popup.CloseButton> < /HStack> < /Popup.Card> < /Popup.Popper> < SecondaryButton > Next Focusable Button < /SecondaryButton> < SecondaryButton > Focusable Button After Popup < /SecondaryButton> < /HStack> < /Popup>); } ;