feat(menu/select): make Select and Menu popovers more customizable

It is now possible to pass props to popovers through the Select and MenuButton elements, which allows for more customization and flexibility.

Author: pedroanuda

packages/actify/src/components/Menus/MenuButton.tsx

@@ -4,24 +4,26 @@ import { MenuProps, MenuTrigger, MenuTriggerProps } from 'react-aria-components'
 
 import { Button } from '../Buttons'
 import { Menu } from './Menu'
-import { MenuPopover } from './MenuPopover'
+import { MenuPopover, PopoverProps } from './MenuPopover'
 import React from 'react'
 
 export interface MenuButtonProps<T>
   extends MenuProps<T>,
     Omit<MenuTriggerProps, 'children'> {
-  label?: React.ReactNode
+  label?: React.ReactNode;
+  popoverProps?: Omit<PopoverProps, 'children'>;
 }
 
 const MenuButton = <T extends object>({
   label,
   children,
+  popoverProps,
   ...props
 }: MenuButtonProps<T>) => {
   return (
     <MenuTrigger {...props}>
       {typeof label == 'string' ? <Button>{label}</Button> : label}
-      <MenuPopover>
+      <MenuPopover {...popoverProps}>
         <Menu>{children}</Menu>
       </MenuPopover>
     </MenuTrigger>

packages/actify/src/components/Menus/MenuPopover.tsx

@@ -10,6 +10,7 @@ import {
 import React from 'react'
 import { motion } from 'motion/react'
 import styles from './menu-popover.module.css'
+import clsx from 'clsx'
 
 export interface PopoverProps extends Omit<AriaPopoverProps, 'children'> {
   children: React.ReactNode
@@ -32,7 +33,7 @@ const MenuPopover = ({ children, ...props }: PopoverProps) => {
   }
 
   return (
-    <AriaPopover {...props} style={props.style} className={styles['popover']}>
+    <AriaPopover {...props} style={props.style} className={clsx(styles['popover'], props.className)}>
       <motion.div
         initial={{
           height: 0,

packages/actify/src/components/Popover/Popover.tsx

@@ -17,6 +17,7 @@ import type {
 import React from 'react'
 import { RenderProps, SlotProps } from './../../utils'
 import { OverlayTriggerState } from 'react-stately'
+import clsx from 'clsx'
 
 interface PopoverRenderProps {
   /**
@@ -94,7 +95,7 @@ const Popover = (props: PopoverProps & React.RefAttributes<HTMLElement>) => {
       {/* @ts-expect-error */}
       <motion.div
         {...popoverProps}
-        className={styles['popover']}
+        className={clsx(styles['popover'], props.className)}
         initial={{
           height: 0,
           overflow: 'hidden'

packages/actify/src/components/Select/Select.tsx

@@ -1,11 +1,11 @@
-import { AriaSelectOptions, HiddenSelect, useSelect } from 'react-aria'
+import { AriaSelectOptions, HiddenSelect, Placement, useSelect } from 'react-aria'
 import { SelectStateOptions, useSelectState } from 'react-stately'
 
 import { FilledField } from './FilledField'
 import { Label } from '../Label/Label'
 import { ListBox } from '../ListBox'
 import { OutlinedField } from './OutlinedField'
-import { Popover } from '../Popover/Popover'
+import { Popover, PopoverProps } from '../Popover/Popover'
 import React from 'react'
 import { TrailingIcon } from './TrailingIcon'
 import clsx from 'clsx'
@@ -17,6 +17,7 @@ interface SelectProps<T> extends AriaSelectOptions<T>, SelectStateOptions<T> {
   style?: React.CSSProperties
   leadingIcon?: React.ReactNode
   trailingIcon?: React.ReactNode
+  popoverProps?: Omit<PopoverProps, 'state'>
   variant?: 'filled' | 'outlined'
 }
 
@@ -26,7 +27,7 @@ const Select = <T extends object>(props: SelectProps<T>) => {
 
   const { triggerProps, valueProps, menuProps } = useSelect(props, state, ref)
 
-  const { variant = 'filled' } = props
+  const { variant = 'filled', popoverProps } = props;
 
   let Tag = FilledField
   if (variant == 'filled') {
@@ -63,8 +64,9 @@ const Select = <T extends object>(props: SelectProps<T>) => {
           offset={2}
           state={state}
           triggerRef={ref}
-          placement="bottom start"
           referenceWidth={referenceWidth}
+          placement={popoverProps?.placement ?? 'bottom start'}
+          {...popoverProps}
         >
           <ListBox {...menuProps} state={state} />
         </Popover>