import * as React from 'react' ; import { createComponent , createElement , createHook } from 'bumbag/utils' ; import { Box , BoxProps } from '../Box' ; import * as styles from './Menu.styles' ; export type LocalMenuProps = { hasDividers ? : boolean ; disableLeftPadding ? : boolean ; } ; export type MenuProps = BoxProps & LocalMenuProps ; const useProps = createHook < MenuProps > ( ( props ) => { const { hasDividers , disableLeftPadding } = props ; const boxProps = Box . useProps ( props ) ; const children = Array . isArray ( props . children ) ? props . children : [ props . children ] ; return { ... boxProps , children : children . map ( ( child , i ) => child ? React . cloneElement ( child as any , { hasDividers , hasDivider : hasDividers && i < children . length - 1 , overrides : props . overrides , disableLeftPadding , } ) : null ) , } ; } , { defaultProps : { disableLeftPadding : false } , themeKey : 'native.Menu' } ) ; export const Menu = createComponent < MenuProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . Menu , htmlProps , } ) ; } , { attach : { useProps , displayName : 'native.Menu' , } , themeKey : 'native.Menu' , } ) ;