import React , { ReactNode } from 'react' ; import cx from 'clsx' ; import { ItemParams , InternalProps , BooleanPredicate , HandlerParamsEvent , } from '../types' ; import { useRefTrackerContext } from './RefTrackerProvider' ; import { NOOP , STYLE } from '../constants' ; import { getPredicateValue } from './utils' ; export interface ItemProps extends InternalProps , Omit < React . HTMLAttributes < HTMLElement > , 'hidden' | 'disabled' | 'onClick' > { /**
     * Any valid node that can be rendered
     */ children : ReactNode ; /**
     * Passed to the `Item` onClick callback. Accessible via `data`
     */ data ? : any ; param props param data param triggerEvent disabled ? : BooleanPredicate ; param props param data param triggerEvent hidden ? : BooleanPredicate ; param event param props param data param triggerEvent onClick ? : ( args : ItemParams ) => void ; } export const Item = ( { children , className , style , triggerEvent , data , propsFromTrigger , onClick = NOOP , disabled = false , hidden = false , ... rest } ) => { const refTracker = useRefTrackerContext ( ) ; const handlerParams = { data , triggerEvent : triggerEvent as HandlerParamsEvent , props : propsFromTrigger , } ; const isDisabled = getPredicateValue ( disabled , handlerParams ) ; const isHidden = getPredicateValue ( hidden , handlerParams ) ; function handleClick ( e ) { ( handlerParams as ItemParams ) . event = e ; isDisabled ? e . stopPropagation ( ) : onClick ( handlerParams as ItemParams ) ; } function trackRef ( node ) { if ( node && ! isDisabled ) refTracker . set ( node , { node , isSubmenu : false , } ) ; } function handleKeyDown ( e ) { if ( e . key === 'Enter' ) { ( handlerParams as ItemParams ) . event = e ; onClick ( handlerParams as ItemParams ) ; } } if ( isHidden ) return null ; const cssClasses = cx ( STYLE . item , className , { [ `${ STYLE . itemDisabled }` ] : isDisabled , } ) ; return ( < div { ... rest } className = { cssClasses } style = { style } onClick = { handleClick } onKeyDown = { handleKeyDown } ref = { trackRef } tabIndex = { - 1 } role = "menuitem" aria - disabled = { isDisabled } > < div className = { STYLE . itemContent } > { children } < /div> < /div>); } ;