import React from 'react' ; import { PopupStack } from '@workday/canvas-kit-popup-stack' ; import { useLocalRef , useIsRTL } from '@workday/canvas-kit-react/common' ; param forwardRef param target example export const usePopupStack = < E extends HTMLElement > ( ref ? , target ? ) : React . RefObject < HTMLElement > => { const { elementRef , localRef } = useLocalRef ( ref ) ; const isRTL = useIsRTL ( ) ; const [ popupRef ] = React . useState ( ( ) => { const container = PopupStack . createContainer ( ) ; elementRef ( container as E ) ; return container ; } ) ; React . useLayoutEffect ( ( ) => { if ( popupRef !== localRef . current ) { throw Error ( `The 'ref' passed to usePopupStack should not be applied to a React element. This will cause a runtime error where the PopupStack and React compete for the element. Instead use ReactDOM.createPortal(<YourComponent />, ref.current)` ) ; } const targetEl = target ? 'current' in target ? target . current || undefined : target : undefined ; const element = localRef . current ! ; PopupStack . add ( { element : element , owner : targetEl } ) ; return ( ) => { PopupStack . remove ( element ) ; } ; } , [ localRef , target , popupRef ] ) ; React . useLayoutEffect ( ( ) => { if ( isRTL ) { localRef . current ?. setAttribute ( 'dir' , 'rtl' ) ; } else { localRef . current ?. removeAttribute ( 'dir' ) ; } } , [ localRef , isRTL ] ) ; return localRef ; } ;