import React , { forwardRef , memo } from 'react' ; import MenuGroup from './MenuGroup' ; import type { IMenuOptionGroupProps , IMenuOptionContextProps } from './types' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; export const MenuOptionContext = React . createContext < IMenuOptionContextProps > ( { values : [ ] , onChange : ( _val ) => { } , type : 'checkbox' , } ) ; const MenuOptionGroup = ( { type , defaultValue , value , onChange , ... props } , ref ? ) => { const internalDefaultValue = defaultValue ? Array . isArray ( defaultValue ) ? defaultValue : [ defaultValue ] : [ ] ; const [ internalValues , setValues ] = React . useState < Array < string | number > > ( internalDefaultValue ) ; const _onChange = ( newValue ) => { if ( type === 'checkbox' ) { const newValues = [ ... internalValues ] ; if ( internalValues . includes ( newValue ) ) { newValues . splice ( newValues . indexOf ( newValue ) , 1 ) ; setValues ( newValues ) ; } else { newValues . push ( newValue ) ; setValues ( newValues ) ; } onChange && onChange ( newValues ) ; } else if ( type === 'radio' ) { setValues ( [ newValue ] ) ; onChange && onChange ( newValue ) ; } } ; if ( useHasResponsiveProps ( props ) ) { return null ; } return ( < MenuOptionContext . Provider value = { { values : ! value ? internalValues : Array . isArray ( value ) ? value : [ value ] , onChange : _onChange , type , } } > < MenuGroup { ... props } ref = { ref } / > < /MenuOptionContext.Provider>); } ; export default memo ( forwardRef ( MenuOptionGroup ) ) ;