@gechiui/components/src/radio-group/index.js

UI components for GeChiUI.

/**
 * External dependencies
 */
import { useRadioState, RadioGroup as ReakitRadioGroup } from 'reakit/Radio';

/**
 * GeChiUI dependencies
 */
import { forwardRef } from '@gechiui/element';

/**
 * Internal dependencies
 */
import ButtonGroup from '../button-group';
import RadioContext from '../radio-context';

function RadioGroup(
	{ label, checked, defaultChecked, disabled, onChange, ...props },
	ref
) {
	const radioState = useRadioState( {
		state: defaultChecked,
		baseId: props.id,
	} );
	const radioContext = {
		...radioState,
		disabled,
		// controlled or uncontrolled
		state: checked ?? radioState.state,
		setState: onChange ?? radioState.setState,
	};

	return (
		<RadioContext.Provider value={ radioContext }>
			<ReakitRadioGroup
				ref={ ref }
				as={ ButtonGroup }
				aria-label={ label }
				{ ...radioState }
				{ ...props }
			/>
		</RadioContext.Provider>
	);
}

export default forwardRef( RadioGroup );