@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
19 lines • 2.49 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
//vendors
import React from 'react';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { useId } from '../../hooks/useId/useId';
import { ScreenReaderOnly } from '../screenReaderOnly/screenReaderOnly';
import { InfoIconWithTooltipStandAlone } from './components/infoIconWithTooltipStandAlone/infoIconWithTooltipStandAlone';
import { RadioButton } from './components/radioButton/radioButton';
// styles
import { RadioButtonGroupStyled } from './radioButtonGroup.styled';
import { RadioButtonGroupStateType } from './types/state';
const RadioButtonGroupStandAloneComponent = ({ dataTestId = 'radio-button-group', requiredSymbol = '*', state = RadioButtonGroupStateType.DEFAULT, legendComponent = TextComponentType.LEGEND, ...props }, ref) => {
const uniqueId = useId('radiogroup');
const screenReaderId = `${uniqueId}ScreenReader`;
return (_jsxs(RadioButtonGroupStyled, { ref: ref, "aria-errormessage": props.errorMessageId, "data-testid": dataTestId, disabled: state === RadioButtonGroupStateType.DISABLED || props.disabled, name: props.name, styles: props.styles, children: [props.legend && (_jsx(_Fragment, { children: _jsxs(Text, { component: legendComponent, customTypography: props.styles?.[state]?.title, children: [props.legend, _jsx(InfoIconWithTooltipStandAlone, { infoIcon: props.infoIcon, styles: props.styles, tooltip: props.tooltip }), props.required && (_jsxs(_Fragment, { children: [requiredSymbol, _jsx(ScreenReaderOnly, { children: props.requiredScreenReaderText })] }))] }) })), props.options.map((o, index) => (_jsx(RadioButton, { checked: props.selectedOption?.value === o.value, disabled: o.disabled, error: o.error, errorAriaLiveType: o.errorAriaLiveType, errorIcon: o.errorIcon, errorMessage: o.errorMessage, label: { content: o.label }, lastChild: index === props.options.length - 1, name: props.name, screenReaderId: o.screenReader ? screenReaderId : undefined, state: o.state, styles: props.styles, subTitle: { content: o.description }, value: o.value, variant: props.variant, onBlur: props.onBlur, onChange: props.onChange }, o.value))), _jsx(ScreenReaderOnly, { id: screenReaderId, children: props.screenReaderText })] }));
};
export const RadioButtonGroupStandAlone = React.forwardRef(RadioButtonGroupStandAloneComponent);
//# sourceMappingURL=radioButtonGroupStandAlone.js.map