mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-11 03:07:43 +00:00
Emmanuel Pelletier
a8b2c56f4b
ditch the "PopoverList" component that was basically a poor Menu. Now dropdown buttons can be made with react aria Menu+MenuItems components via the Menu+MenuList components. The difference now is dropdown menus behave better with keyboard (they use up/down arrows instead of tabs), like selects. Popovers are there if we need to show any content in a big tooltip, not for actionable list items.
26 lines
608 B
TypeScript
26 lines
608 B
TypeScript
import { ReactNode } from 'react'
|
|
import { MenuTrigger } from 'react-aria-components'
|
|
import { StyledPopover } from './Popover'
|
|
import { Box } from './Box'
|
|
|
|
/**
|
|
* a Menu is a tuple of a trigger component (most usually a Button) that toggles menu items in a tooltip around the trigger
|
|
*/
|
|
export const Menu = ({
|
|
children,
|
|
}: {
|
|
children: [trigger: ReactNode, menu: ReactNode]
|
|
}) => {
|
|
const [trigger, menu] = children
|
|
return (
|
|
<MenuTrigger>
|
|
{trigger}
|
|
<StyledPopover>
|
|
<Box size="sm" type="popover">
|
|
{menu}
|
|
</Box>
|
|
</StyledPopover>
|
|
</MenuTrigger>
|
|
)
|
|
}
|