import { usePosition } from '@rocket.chat/fuselage-hooks' ; import React , { forwardRef , ReactNode , Ref , RefObject } from 'react' ; import { Box , Tile } from '..' ; export const DropdownDesktop = forwardRef ( function DropdownDesktop < T extends HTMLElement , R extends HTMLElement > ( { children , reference , placement = 'bottom-start' , } , ref ) { const { style } = usePosition ( reference , ref as RefObject < R > , { placement } ) ; return ( < Tile style = { style } ref = { ref } elevation = '2' pi = '0' pb = '0' display = 'flex' flexDirection = 'column' overflow = 'auto' > < Box flexShrink = { 1 } pb = 'x16' > { children } < /Box> < /Tile>); } ) ;