diff --git a/packages/@react-spectrum/menu/src/ActionMenu.tsx b/packages/@react-spectrum/menu/src/ActionMenu.tsx index 1b3903d0daf..d4d8dc29607 100644 --- a/packages/@react-spectrum/menu/src/ActionMenu.tsx +++ b/packages/@react-spectrum/menu/src/ActionMenu.tsx @@ -18,7 +18,7 @@ import intlMessages from '../intl/*.json'; import {Menu} from './Menu'; import {MenuTrigger} from './MenuTrigger'; import More from '@spectrum-icons/workflow/More'; -import React from 'react'; +import React, {forwardRef, ReactElement} from 'react'; import {SpectrumActionMenuProps} from '@react-types/menu'; import {useMessageFormatter} from '@react-aria/i18n'; import {useSlotProps} from '@react-spectrum/utils'; @@ -57,5 +57,5 @@ function ActionMenu(props: SpectrumActionMenuProps, ref: Fo /** * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases. */ -let _ActionMenu = React.forwardRef(ActionMenu); +const _ActionMenu = forwardRef(ActionMenu) as (props: SpectrumActionMenuProps & {ref?: FocusableRef}) => ReactElement; export {_ActionMenu as ActionMenu}; diff --git a/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx b/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx index 51ce8ca9f1f..9a9fb30b45e 100644 --- a/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx +++ b/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx @@ -170,3 +170,21 @@ export const WithTooltip = () => ( Actions ); + +export const Dynamic = () => { + const items = [ + {key: 'a', label: 'Cut'}, + {key: 'a', label: 'Copy'}, + {key: 'a', label: 'Paste'} + ]; + + return ( + + {(item) => ( + + {item.label} + + )} + + ); +};