63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler, ReactNode, Ref } from 'react'
|
|
import Icon from '@/Components/Icon/Icon'
|
|
import { IconType } from '@standardnotes/snjs'
|
|
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
|
|
import { classNames } from '@standardnotes/utils'
|
|
import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
|
|
import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
|
|
import MenuListItem from './MenuListItem'
|
|
|
|
export interface MenuItemProps extends ComponentPropsWithoutRef<'button'> {
|
|
children: ReactNode
|
|
onClick?: MouseEventHandler<HTMLButtonElement>
|
|
onBlur?: (event: { relatedTarget: EventTarget | null }) => void
|
|
className?: string
|
|
icon?: IconType
|
|
iconClassName?: string
|
|
tabIndex?: number
|
|
disabled?: boolean
|
|
shortcut?: PlatformedKeyboardShortcut
|
|
}
|
|
|
|
const MenuItem = forwardRef(
|
|
(
|
|
{
|
|
children,
|
|
className = '',
|
|
icon,
|
|
iconClassName = 'w-6 h-6 md:w-5 md:h-5 text-neutral mr-2',
|
|
tabIndex,
|
|
shortcut,
|
|
disabled,
|
|
...props
|
|
}: MenuItemProps,
|
|
ref: Ref<HTMLButtonElement>,
|
|
) => {
|
|
return (
|
|
<MenuListItem>
|
|
<button
|
|
ref={ref}
|
|
role="menuitem"
|
|
tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
|
|
className={classNames(
|
|
'flex w-full cursor-pointer select-none border-0 bg-transparent px-3 py-2.5 text-left md:py-1.5',
|
|
'text-mobile-menu-item text-text enabled:hover:bg-contrast enabled:hover:text-foreground',
|
|
'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
|
|
'disabled:cursor-not-allowed disabled:opacity-60',
|
|
className,
|
|
className.includes('items-') ? '' : 'items-center',
|
|
)}
|
|
disabled={disabled}
|
|
{...props}
|
|
>
|
|
{shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
|
|
{icon ? <Icon type={icon} className={classNames('flex-shrink-0', iconClassName)} /> : null}
|
|
{children}
|
|
</button>
|
|
</MenuListItem>
|
|
)
|
|
},
|
|
)
|
|
|
|
export default MenuItem
|