@alfalab/core-components-radio-group 5.1.0 → 5.2.0

package/esm/mobile/mobile.css

@@ -16,28 +16,28 @@
     --radio-group-mobile-label-color: var(--color-light-text-secondary);
     --radio-group-mobile-error-padding-left: var(--gap-0);
     --radio-group-mobile-error-border-left: none;
-} .radio-group__radioList_1estx {
+} .radio-group__radioList_gxadg {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_1estx {
+} .radio-group__label_gxadg {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--radio-group-mobile-label-color);
     padding-left: var(--radio-group-mobile-sub-padding-left);
-    margin-bottom: var(--gap-12)
-} .radio-group__label_1estx.radio-group__tag_1estx {
+    margin-bottom: var(--gap-12);
+} .radio-group__label_gxadg.radio-group__tag_gxadg {
         margin-bottom: var(--gap-8);
-    } .radio-group__sub_1estx {
+    } .radio-group__sub_gxadg {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-12);
-    padding-left: var(--radio-group-mobile-sub-padding-left)
-} .radio-group__sub_1estx.radio-group__tag_1estx {
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+} .radio-group__sub_gxadg.radio-group__tag_gxadg {
         margin-top: var(--gap-8);
-    } .radio-group__error_1estx {
+    } .radio-group__error_gxadg {
     padding-left: var(--radio-group-mobile-error-padding-left);
-    border-left: var(--radio-group-mobile-error-border-left)
-} .radio-group__error_1estx.radio-group__tag_1estx {
+    border-left: var(--radio-group-mobile-error-border-left);
+} .radio-group__error_gxadg.radio-group__tag_gxadg {
         padding-left: var(--gap-0);
     }

package/esm/mobile/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-var styles = {"radioList":"radio-group__radioList_1estx","label":"radio-group__label_1estx","tag":"radio-group__tag_1estx","sub":"radio-group__sub_1estx","error":"radio-group__error_1estx"};
+var styles = {"radioList":"radio-group__radioList_gxadg","label":"radio-group__label_gxadg","tag":"radio-group__tag_gxadg","sub":"radio-group__sub_gxadg","error":"radio-group__error_gxadg"};
 
 export { styles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/mobile/mobile.css

@@ -16,28 +16,28 @@
     --radio-group-mobile-label-color: var(--color-light-text-secondary);
     --radio-group-mobile-error-padding-left: var(--gap-0);
     --radio-group-mobile-error-border-left: none;
-} .radio-group__radioList_1estx {
+} .radio-group__radioList_gxadg {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_1estx {
+} .radio-group__label_gxadg {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--radio-group-mobile-label-color);
     padding-left: var(--radio-group-mobile-sub-padding-left);
-    margin-bottom: var(--gap-12)
-} .radio-group__label_1estx.radio-group__tag_1estx {
+    margin-bottom: var(--gap-12);
+} .radio-group__label_gxadg.radio-group__tag_gxadg {
         margin-bottom: var(--gap-8);
-    } .radio-group__sub_1estx {
+    } .radio-group__sub_gxadg {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-12);
-    padding-left: var(--radio-group-mobile-sub-padding-left)
-} .radio-group__sub_1estx.radio-group__tag_1estx {
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+} .radio-group__sub_gxadg.radio-group__tag_gxadg {
         margin-top: var(--gap-8);
-    } .radio-group__error_1estx {
+    } .radio-group__error_gxadg {
     padding-left: var(--radio-group-mobile-error-padding-left);
-    border-left: var(--radio-group-mobile-error-border-left)
-} .radio-group__error_1estx.radio-group__tag_1estx {
+    border-left: var(--radio-group-mobile-error-border-left);
+} .radio-group__error_gxadg.radio-group__tag_gxadg {
         padding-left: var(--gap-0);
     }

package/mobile/mobile.module.css.js

@@ -2,7 +2,7 @@
 
 require('./mobile.css');
 
-var styles = {"radioList":"radio-group__radioList_1estx","label":"radio-group__label_1estx","tag":"radio-group__tag_1estx","sub":"radio-group__sub_1estx","error":"radio-group__error_1estx"};
+var styles = {"radioList":"radio-group__radioList_gxadg","label":"radio-group__label_gxadg","tag":"radio-group__tag_gxadg","sub":"radio-group__sub_gxadg","error":"radio-group__error_gxadg"};
 
 module.exports = styles;
 //# sourceMappingURL=mobile.module.css.js.map

package/modern/components/base-radio-group/Component.d.ts

@@ -1,7 +1,7 @@
-import React, { ChangeEvent, FocusEvent, MouseEvent, ReactNode } from 'react';
+import React, { AriaAttributes, ChangeEvent, FocusEvent, HTMLAttributes, MouseEvent, ReactNode } from 'react';
 export declare type Direction = 'horizontal' | 'vertical';
 export declare type RadioGroupType = 'radio' | 'tag';
-export declare type BaseRadioGroupProps = {
+export interface BaseRadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onFocus' | 'children' | 'className'>, AriaAttributes {
     /**
      * Заголовок группы
      */
@@ -71,5 +71,5 @@ export declare type BaseRadioGroupProps = {
     styles: {
         [key: string]: string;
     };
-};
+}
 export declare const BaseRadioGroup: React.ForwardRefExoticComponent<BaseRadioGroupProps & React.RefAttributes<HTMLDivElement>>;

package/modern/components/base-radio-group/Component.js

@@ -4,7 +4,7 @@ import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 import commonStyles from './index.module.css.js';
 
-const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, styles, }, ref) => {
+const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, styles, ...restProps }, ref) => {
     const [stateValue, setStateValue] = useState('');
     useDidUpdateEffect(() => {
         setStateValue(value);
@@ -43,7 +43,7 @@ const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, di
             clone));
     };
     const errorMessage = typeof error === 'boolean' ? '' : error;
-    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], { [styles.error]: error }, className), "data-test-id": dataTestId, ref: ref },
+    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], { [styles.error]: error }, className), ref: ref, "data-test-id": dataTestId, ...restProps },
         label ? (React.createElement("span", { className: cn(styles.label, {
                 [styles.tag]: type === 'tag',
             }), "data-test-id": getDataTestId(dataTestId, 'label') }, label)) : null,

package/modern/components/base-radio-group/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/base-radio-group/Component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    Children,\n    cloneElement,\n    FocusEvent,\n    forwardRef,\n    isValidElement,\n    MouseEvent,\n    ReactElement,\n    ReactNode,\n    useState,\n} from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useDidUpdateEffect } from '@alfalab/hooks';\n\nimport commonStyles from './index.module.css';\n\nexport type Direction = 'horizontal' | 'vertical';\nexport type RadioGroupType = 'radio' | 'tag';\n\nexport type BaseRadioGroupProps = {\n    /**\n     * Заголовок группы\n     */\n    label?: ReactNode;\n\n    /**\n     * Направление\n     */\n    direction?: Direction;\n\n    /**\n     * Тип компонента\n     */\n    type?: RadioGroupType;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для списка радио элементов\n     */\n    radioListClassName?: string;\n\n    /**\n     * Отображение ошибки\n     */\n    error?: ReactNode | boolean;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Дочерние элементы. Ожидаются компоненты `Radio` или `Tag`\n     */\n    children: ReactNode;\n\n    /**\n     * Обработчик изменения значения 'checked' одного из дочерних компонентов\n     */\n    onChange?: (\n        event: ChangeEvent | MouseEvent,\n        payload: {\n            value: string;\n            name?: string;\n        },\n    ) => void;\n\n    /**\n     * Обработчик блюра.\n     */\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Обработчик фокуса.\n     */\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Управление возможностью изменения состояния 'checked' дочерних компонентов Radio | Tag\n     */\n    disabled?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Атрибут name для всех дочерних компонентов\n     */\n    name?: string;\n\n    /**\n     * Value выбранного дочернего элемента\n     */\n    value?: string | null;\n\n    /**\n     * Основные стили компонента.\n     */\n    styles: { [key: string]: string };\n};\n\nexport const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(\n    (\n        {\n            children,\n            className,\n            radioListClassName,\n            direction = 'vertical',\n            label,\n            error,\n            hint,\n            onChange,\n            onBlur,\n            onFocus,\n            type = 'radio',\n            dataTestId,\n            disabled = false,\n            name,\n            value,\n            styles,\n        },\n        ref,\n    ) => {\n        const [stateValue, setStateValue] = useState<BaseRadioGroupProps['value']>('');\n\n        useDidUpdateEffect(() => {\n            setStateValue(value);\n        }, [value]);\n\n        const isChecked = (childValue: string) =>\n            value !== null && (value || stateValue) === childValue;\n\n        const handleChange = (event: ChangeEvent | MouseEvent, childValue: string) => {\n            setStateValue(childValue);\n            if (onChange) {\n                onChange(event, { name, value: childValue });\n            }\n        };\n\n        const renderRadio = (child: ReactElement) => {\n            const { className: childClassName, value: childValue } = child.props;\n\n            return cloneElement(child, {\n                onChange: (event: ChangeEvent) => handleChange(event, childValue),\n                disabled,\n                ...child.props,\n                checked: isChecked(childValue),\n                name,\n                className: cn(childClassName, commonStyles[`${direction}Radio`]),\n            });\n        };\n\n        const renderTag = (child: ReactElement) => {\n            const childValue = child.props.value;\n            const checked = isChecked(childValue);\n            const clone = cloneElement(child, {\n                onClick: (event: MouseEvent) => handleChange(event, childValue),\n                disabled,\n                ...child.props,\n                checked,\n                name,\n                tabIndex: -1,\n            });\n\n            return (\n                <label\n                    className={cn(\n                        commonStyles[`${direction}Radio`],\n                        commonStyles[`${direction}TagLabel`],\n                        commonStyles.tagLabel,\n                    )}\n                >\n                    <input\n                        type='radio'\n                        autoComplete='off'\n                        onChange={(event: ChangeEvent) => handleChange(event, childValue)}\n                        disabled={disabled || child.props.disabled}\n                        name={name}\n                        checked={checked}\n                        className={commonStyles.hiddenInput}\n                        value={child.props.value}\n                    />\n                    {clone}\n                </label>\n            );\n        };\n\n        const errorMessage = typeof error === 'boolean' ? '' : error;\n\n        return (\n            <div\n                className={cn(\n                    commonStyles.component,\n                    commonStyles[type],\n                    { [styles.error]: error },\n                    className,\n                )}\n                data-test-id={dataTestId}\n                ref={ref}\n            >\n                {label ? (\n                    <span\n                        className={cn(styles.label, {\n                            [styles.tag]: type === 'tag',\n                        })}\n                        data-test-id={getDataTestId(dataTestId, 'label')}\n                    >\n                        {label}\n                    </span>\n                ) : null}\n\n                {children ? (\n                    <div\n                        className={cn(\n                            commonStyles.radioList,\n                            commonStyles[`${direction}RadioList`],\n                            radioListClassName,\n                            { [styles.radioList]: type === 'radio' },\n                        )}\n                        onBlur={onBlur}\n                        onFocus={onFocus}\n                    >\n                        {Children.map(children, (child) => {\n                            if (isValidElement(child)) {\n                                return type === 'radio' ? renderRadio(child) : renderTag(child);\n                            }\n\n                            return null;\n                        })}\n                    </div>\n                ) : null}\n\n                {errorMessage && (\n                    <span\n                        className={cn(\n                            styles.sub,\n                            {\n                                [styles.tag]: type === 'tag',\n                            },\n                            commonStyles.errorMessage,\n                        )}\n                        role='alert'\n                        data-test-id={getDataTestId(dataTestId, 'error')}\n                    >\n                        {errorMessage}\n                    </span>\n                )}\n\n                {hint && !errorMessage && (\n                    <span\n                        className={cn(\n                            styles.sub,\n                            {\n                                [styles.tag]: type === 'tag',\n                            },\n                            commonStyles.hint,\n                        )}\n                        data-test-id={getDataTestId(dataTestId, 'hint')}\n                    >\n                        {hint}\n                    </span>\n                )}\n            </div>\n        );\n    },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/base-radio-group/Component.tsx"],"sourcesContent":["import React, {\n    AriaAttributes,\n    ChangeEvent,\n    Children,\n    cloneElement,\n    FocusEvent,\n    forwardRef,\n    HTMLAttributes,\n    isValidElement,\n    MouseEvent,\n    ReactElement,\n    ReactNode,\n    useState,\n} from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useDidUpdateEffect } from '@alfalab/hooks';\n\nimport commonStyles from './index.module.css';\n\nexport type Direction = 'horizontal' | 'vertical';\nexport type RadioGroupType = 'radio' | 'tag';\n\nexport interface BaseRadioGroupProps\n    extends Omit<\n            HTMLAttributes<HTMLDivElement>,\n            'onChange' | 'onBlur' | 'onFocus' | 'children' | 'className'\n        >,\n        AriaAttributes {\n    /**\n     * Заголовок группы\n     */\n    label?: ReactNode;\n\n    /**\n     * Направление\n     */\n    direction?: Direction;\n\n    /**\n     * Тип компонента\n     */\n    type?: RadioGroupType;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для списка радио элементов\n     */\n    radioListClassName?: string;\n\n    /**\n     * Отображение ошибки\n     */\n    error?: ReactNode | boolean;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Дочерние элементы. Ожидаются компоненты `Radio` или `Tag`\n     */\n    children: ReactNode;\n\n    /**\n     * Обработчик изменения значения 'checked' одного из дочерних компонентов\n     */\n    onChange?: (\n        event: ChangeEvent | MouseEvent,\n        payload: {\n            value: string;\n            name?: string;\n        },\n    ) => void;\n\n    /**\n     * Обработчик блюра.\n     */\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Обработчик фокуса.\n     */\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Управление возможностью изменения состояния 'checked' дочерних компонентов Radio | Tag\n     */\n    disabled?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Атрибут name для всех дочерних компонентов\n     */\n    name?: string;\n\n    /**\n     * Value выбранного дочернего элемента\n     */\n    value?: string | null;\n\n    /**\n     * Основные стили компонента.\n     */\n    styles: { [key: string]: string };\n}\n\nexport const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(\n    (\n        {\n            children,\n            className,\n            radioListClassName,\n            direction = 'vertical',\n            label,\n            error,\n            hint,\n            onChange,\n            onBlur,\n            onFocus,\n            type = 'radio',\n            dataTestId,\n            disabled = false,\n            name,\n            value,\n            styles,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const [stateValue, setStateValue] = useState<BaseRadioGroupProps['value']>('');\n\n        useDidUpdateEffect(() => {\n            setStateValue(value);\n        }, [value]);\n\n        const isChecked = (childValue: string) =>\n            value !== null && (value || stateValue) === childValue;\n\n        const handleChange = (event: ChangeEvent | MouseEvent, childValue: string) => {\n            setStateValue(childValue);\n            if (onChange) {\n                onChange(event, { name, value: childValue });\n            }\n        };\n\n        const renderRadio = (child: ReactElement) => {\n            const { className: childClassName, value: childValue } = child.props;\n\n            return cloneElement(child, {\n                onChange: (event: ChangeEvent) => handleChange(event, childValue),\n                disabled,\n                ...child.props,\n                checked: isChecked(childValue),\n                name,\n                className: cn(childClassName, commonStyles[`${direction}Radio`]),\n            });\n        };\n\n        const renderTag = (child: ReactElement) => {\n            const childValue = child.props.value;\n            const checked = isChecked(childValue);\n            const clone = cloneElement(child, {\n                onClick: (event: MouseEvent) => handleChange(event, childValue),\n                disabled,\n                ...child.props,\n                checked,\n                name,\n                tabIndex: -1,\n            });\n\n            return (\n                <label\n                    className={cn(\n                        commonStyles[`${direction}Radio`],\n                        commonStyles[`${direction}TagLabel`],\n                        commonStyles.tagLabel,\n                    )}\n                >\n                    <input\n                        type='radio'\n                        autoComplete='off'\n                        onChange={(event: ChangeEvent) => handleChange(event, childValue)}\n                        disabled={disabled || child.props.disabled}\n                        name={name}\n                        checked={checked}\n                        className={commonStyles.hiddenInput}\n                        value={child.props.value}\n                    />\n                    {clone}\n                </label>\n            );\n        };\n\n        const errorMessage = typeof error === 'boolean' ? '' : error;\n\n        return (\n            <div\n                className={cn(\n                    commonStyles.component,\n                    commonStyles[type],\n                    { [styles.error]: error },\n                    className,\n                )}\n                ref={ref}\n                data-test-id={dataTestId}\n                {...restProps}\n            >\n                {label ? (\n                    <span\n                        className={cn(styles.label, {\n                            [styles.tag]: type === 'tag',\n                        })}\n                        data-test-id={getDataTestId(dataTestId, 'label')}\n                    >\n                        {label}\n                    </span>\n                ) : null}\n\n                {children ? (\n                    <div\n                        className={cn(\n                            commonStyles.radioList,\n                            commonStyles[`${direction}RadioList`],\n                            radioListClassName,\n                            { [styles.radioList]: type === 'radio' },\n                        )}\n                        onBlur={onBlur}\n                        onFocus={onFocus}\n                    >\n                        {Children.map(children, (child) => {\n                            if (isValidElement(child)) {\n                                return type === 'radio' ? renderRadio(child) : renderTag(child);\n                            }\n\n                            return null;\n                        })}\n                    </div>\n                ) : null}\n\n                {errorMessage && (\n                    <span\n                        className={cn(\n                            styles.sub,\n                            {\n                                [styles.tag]: type === 'tag',\n                            },\n                            commonStyles.errorMessage,\n                        )}\n                        role='alert'\n                        data-test-id={getDataTestId(dataTestId, 'error')}\n                    >\n                        {errorMessage}\n                    </span>\n                )}\n\n                {hint && !errorMessage && (\n                    <span\n                        className={cn(\n                            styles.sub,\n                            {\n                                [styles.tag]: type === 'tag',\n                            },\n                            commonStyles.hint,\n                        )}\n                        data-test-id={getDataTestId(dataTestId, 'hint')}\n                    >\n                        {hint}\n                    </span>\n                )}\n            </div>\n        );\n    },\n);\n"],"names":[],"mappings":"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"}

package/modern/components/base-radio-group/index.css

@@ -17,43 +17,43 @@
 } :root {
     --radio-group-hint-color: var(--color-light-text-secondary);
     --radio-group-error-color: var(--color-light-text-negative);
-} .radio-group__component_zyivd {
+} .radio-group__component_j2nm5 {
     display: flex;
     flex-direction: column;
-} .radio-group__radioList_zyivd {
+} .radio-group__radioList_j2nm5 {
     display: flex;
-} .radio-group__verticalRadioList_zyivd {
+} .radio-group__verticalRadioList_j2nm5 {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__horizontalRadioList_zyivd {
+} .radio-group__horizontalRadioList_j2nm5 {
     flex-wrap: wrap;
     margin-bottom: var(--gap-8-neg);
-} .radio-group__verticalRadio_zyivd {
-    margin-bottom: var(--gap-12)
-} .radio-group__verticalRadio_zyivd:last-child {
+} .radio-group__verticalRadio_j2nm5 {
+    margin-bottom: var(--gap-12);
+} .radio-group__verticalRadio_j2nm5:last-child {
         margin-bottom: var(--gap-0);
-    } .radio-group__horizontalRadio_zyivd {
+    } .radio-group__horizontalRadio_j2nm5 {
     margin-right: var(--gap-24);
     margin-bottom: var(--gap-8);
-} .radio-group__horizontalTagLabel_zyivd {
+} .radio-group__horizontalTagLabel_j2nm5 {
     margin-right: var(--gap-8);
-} .radio-group__horizontalRadio_zyivd:last-child,
-.radio-group__horizontalTagLabel_zyivd:last-child {
+} .radio-group__horizontalRadio_j2nm5:last-child,
+.radio-group__horizontalTagLabel_j2nm5:last-child {
     margin-right: var(--gap-0);
-} .radio-group__errorMessage_zyivd {
+} .radio-group__errorMessage_j2nm5 {
     color: var(--radio-group-error-color);
-} .radio-group__hint_zyivd {
+} .radio-group__hint_j2nm5 {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_zyivd {
+} .radio-group__hiddenInput_j2nm5 {
     position: absolute;
     z-index: -1;
     top: var(--gap-0);
     left: var(--gap-0);
-    opacity: 0
-} .radio-group__hiddenInput_zyivd:focus ~ button {
+    opacity: 0;
+} .radio-group__hiddenInput_j2nm5:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_zyivd {
+    } .radio-group__tagLabel_j2nm5 {
     position: relative;
     max-width: 100%;
 }

package/modern/components/base-radio-group/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const commonStyles = {"component":"radio-group__component_zyivd","radioList":"radio-group__radioList_zyivd","verticalRadioList":"radio-group__verticalRadioList_zyivd","horizontalRadioList":"radio-group__horizontalRadioList_zyivd","verticalRadio":"radio-group__verticalRadio_zyivd","horizontalRadio":"radio-group__horizontalRadio_zyivd","horizontalTagLabel":"radio-group__horizontalTagLabel_zyivd","errorMessage":"radio-group__errorMessage_zyivd","hint":"radio-group__hint_zyivd","hiddenInput":"radio-group__hiddenInput_zyivd","tagLabel":"radio-group__tagLabel_zyivd"};
+const commonStyles = {"component":"radio-group__component_j2nm5","radioList":"radio-group__radioList_j2nm5","verticalRadioList":"radio-group__verticalRadioList_j2nm5","horizontalRadioList":"radio-group__horizontalRadioList_j2nm5","verticalRadio":"radio-group__verticalRadio_j2nm5","horizontalRadio":"radio-group__horizontalRadio_j2nm5","horizontalTagLabel":"radio-group__horizontalTagLabel_j2nm5","errorMessage":"radio-group__errorMessage_j2nm5","hint":"radio-group__hint_j2nm5","hiddenInput":"radio-group__hiddenInput_j2nm5","tagLabel":"radio-group__tagLabel_j2nm5"};
 
 export { commonStyles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/desktop/desktop.css

@@ -13,24 +13,24 @@
     --radio-group-list-padding-left: var(--gap-0);
     --radio-group-error-padding-left: var(--gap-8);
     --radio-group-error-border-left: 1px solid var(--color-light-status-negative);
-} .radio-group__radioList_1a60s {
+} .radio-group__radioList_1qcbs {
     padding-left: var(--radio-group-list-padding-left);
-} .radio-group__label_1a60s {
+} .radio-group__label_1qcbs {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: var(--radio-group-label-color);
     margin-bottom: var(--gap-12);
     padding-left: var(--radio-group-sub-padding-left);
-} .radio-group__sub_1a60s {
+} .radio-group__sub_1qcbs {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-12);
     padding-left: var(--radio-group-sub-padding-left);
-} .radio-group__error_1a60s {
+} .radio-group__error_1qcbs {
     padding-left: var(--radio-group-error-padding-left);
-    border-left: var(--radio-group-error-border-left)
-} .radio-group__error_1a60s.radio-group__tag_1a60s {
+    border-left: var(--radio-group-error-border-left);
+} .radio-group__error_1qcbs.radio-group__tag_1qcbs {
         padding-left: var(--gap-8);
     }

package/modern/desktop/desktop.module.css.js

@@ -1,6 +1,6 @@
 import './desktop.css';
 
-const styles = {"radioList":"radio-group__radioList_1a60s","label":"radio-group__label_1a60s","sub":"radio-group__sub_1a60s","error":"radio-group__error_1a60s","tag":"radio-group__tag_1a60s"};
+const styles = {"radioList":"radio-group__radioList_1qcbs","label":"radio-group__label_1qcbs","sub":"radio-group__sub_1qcbs","error":"radio-group__error_1qcbs","tag":"radio-group__tag_1qcbs"};
 
 export { styles as default };
 //# sourceMappingURL=desktop.module.css.js.map

package/modern/mobile/mobile.css

@@ -16,28 +16,28 @@
     --radio-group-mobile-label-color: var(--color-light-text-secondary);
     --radio-group-mobile-error-padding-left: var(--gap-0);
     --radio-group-mobile-error-border-left: none;
-} .radio-group__radioList_1estx {
+} .radio-group__radioList_gxadg {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_1estx {
+} .radio-group__label_gxadg {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--radio-group-mobile-label-color);
     padding-left: var(--radio-group-mobile-sub-padding-left);
-    margin-bottom: var(--gap-12)
-} .radio-group__label_1estx.radio-group__tag_1estx {
+    margin-bottom: var(--gap-12);
+} .radio-group__label_gxadg.radio-group__tag_gxadg {
         margin-bottom: var(--gap-8);
-    } .radio-group__sub_1estx {
+    } .radio-group__sub_gxadg {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-12);
-    padding-left: var(--radio-group-mobile-sub-padding-left)
-} .radio-group__sub_1estx.radio-group__tag_1estx {
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+} .radio-group__sub_gxadg.radio-group__tag_gxadg {
         margin-top: var(--gap-8);
-    } .radio-group__error_1estx {
+    } .radio-group__error_gxadg {
     padding-left: var(--radio-group-mobile-error-padding-left);
-    border-left: var(--radio-group-mobile-error-border-left)
-} .radio-group__error_1estx.radio-group__tag_1estx {
+    border-left: var(--radio-group-mobile-error-border-left);
+} .radio-group__error_gxadg.radio-group__tag_gxadg {
         padding-left: var(--gap-0);
     }

package/modern/mobile/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const styles = {"radioList":"radio-group__radioList_1estx","label":"radio-group__label_1estx","tag":"radio-group__tag_1estx","sub":"radio-group__sub_1estx","error":"radio-group__error_1estx"};
+const styles = {"radioList":"radio-group__radioList_gxadg","label":"radio-group__label_gxadg","tag":"radio-group__tag_gxadg","sub":"radio-group__sub_gxadg","error":"radio-group__error_gxadg"};
 
 export { styles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/moderncssm/components/base-radio-group/Component.d.ts

@@ -1,7 +1,7 @@
-import React, { ChangeEvent, FocusEvent, MouseEvent, ReactNode } from 'react';
+import React, { AriaAttributes, ChangeEvent, FocusEvent, HTMLAttributes, MouseEvent, ReactNode } from 'react';
 export declare type Direction = 'horizontal' | 'vertical';
 export declare type RadioGroupType = 'radio' | 'tag';
-export declare type BaseRadioGroupProps = {
+export interface BaseRadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onFocus' | 'children' | 'className'>, AriaAttributes {
     /**
      * Заголовок группы
      */
@@ -71,5 +71,5 @@ export declare type BaseRadioGroupProps = {
     styles: {
         [key: string]: string;
     };
-};
+}
 export declare const BaseRadioGroup: React.ForwardRefExoticComponent<BaseRadioGroupProps & React.RefAttributes<HTMLDivElement>>;

package/moderncssm/components/base-radio-group/Component.js

@@ -4,7 +4,7 @@ import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 import commonStyles from './index.module.css';
 
-const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, styles, }, ref) => {
+const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, styles, ...restProps }, ref) => {
     const [stateValue, setStateValue] = useState('');
     useDidUpdateEffect(() => {
         setStateValue(value);
@@ -43,7 +43,7 @@ const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, di
             clone));
     };
     const errorMessage = typeof error === 'boolean' ? '' : error;
-    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], { [styles.error]: error }, className), "data-test-id": dataTestId, ref: ref },
+    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], { [styles.error]: error }, className), ref: ref, "data-test-id": dataTestId, ...restProps },
         label ? (React.createElement("span", { className: cn(styles.label, {
                 [styles.tag]: type === 'tag',
             }), "data-test-id": getDataTestId(dataTestId, 'label') }, label)) : null,

package/moderncssm/components/base-radio-group/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/base-radio-group/Component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    Children,\n    cloneElement,\n    FocusEvent,\n    forwardRef,\n    isValidElement,\n    MouseEvent,\n    ReactElement,\n    ReactNode,\n    useState,\n} from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useDidUpdateEffect } from '@alfalab/hooks';\n\nimport commonStyles from './index.module.css';\n\nexport type Direction = 'horizontal' | 'vertical';\nexport type RadioGroupType = 'radio' | 'tag';\n\nexport type BaseRadioGroupProps = {\n    /**\n     * Заголовок группы\n     */\n    label?: ReactNode;\n\n    /**\n     * Направление\n     */\n    direction?: Direction;\n\n    /**\n     * Тип компонента\n     */\n    type?: RadioGroupType;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для списка радио элементов\n     */\n    radioListClassName?: string;\n\n    /**\n     * Отображение ошибки\n     */\n    error?: ReactNode | boolean;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Дочерние элементы. Ожидаются компоненты `Radio` или `Tag`\n     */\n    children: ReactNode;\n\n    /**\n     * Обработчик изменения значения 'checked' одного из дочерних компонентов\n     */\n    onChange?: (\n        event: ChangeEvent | MouseEvent,\n        payload: {\n            value: string;\n            name?: string;\n        },\n    ) => void;\n\n    /**\n     * Обработчик блюра.\n     */\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Обработчик фокуса.\n     */\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Управление возможностью изменения состояния 'checked' дочерних компонентов Radio | Tag\n     */\n    disabled?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Атрибут name для всех дочерних компонентов\n     */\n    name?: string;\n\n    /**\n     * Value выбранного дочернего элемента\n     */\n    value?: string | null;\n\n    /**\n     * Основные стили компонента.\n     */\n    styles: { [key: string]: string };\n};\n\nexport const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(\n    (\n        {\n            children,\n            className,\n            radioListClassName,\n            direction = 'vertical',\n            label,\n            error,\n            hint,\n            onChange,\n            onBlur,\n            onFocus,\n            type = 'radio',\n            dataTestId,\n            disabled = false,\n            name,\n            value,\n            styles,\n        },\n        ref,\n    ) => {\n        const [stateValue, setStateValue] = useState<BaseRadioGroupProps['value']>('');\n\n        useDidUpdateEffect(() => {\n            setStateValue(value);\n        }, [value]);\n\n        const isChecked = (childValue: string) =>\n            value !== null && (value || stateValue) === childValue;\n\n        const handleChange = (event: ChangeEvent | MouseEvent, childValue: string) => {\n            setStateValue(childValue);\n            if (onChange) {\n                onChange(event, { name, value: childValue });\n            }\n        };\n\n        const renderRadio = (child: ReactElement) => {\n            const { className: childClassName, value: childValue } = child.props;\n\n            return cloneElement(child, {\n                onChange: (event: ChangeEvent) => handleChange(event, childValue),\n                disabled,\n                ...child.props,\n                checked: isChecked(childValue),\n                name,\n                className: cn(childClassName, commonStyles[`${direction}Radio`]),\n            });\n        };\n\n        const renderTag = (child: ReactElement) => {\n            const childValue = child.props.value;\n            const checked = isChecked(childValue);\n            const clone = cloneElement(child, {\n                onClick: (event: MouseEvent) => handleChange(event, childValue),\n                disabled,\n                ...child.props,\n                checked,\n                name,\n                tabIndex: -1,\n            });\n\n            return (\n                <label\n                    className={cn(\n                        commonStyles[`${direction}Radio`],\n                        commonStyles[`${direction}TagLabel`],\n                        commonStyles.tagLabel,\n                    )}\n                >\n                    <input\n                        type='radio'\n                        autoComplete='off'\n                        onChange={(event: ChangeEvent) => handleChange(event, childValue)}\n                        disabled={disabled || child.props.disabled}\n                        name={name}\n                        checked={checked}\n                        className={commonStyles.hiddenInput}\n                        value={child.props.value}\n                    />\n                    {clone}\n                </label>\n            );\n        };\n\n        const errorMessage = typeof error === 'boolean' ? '' : error;\n\n        return (\n            <div\n                className={cn(\n                    commonStyles.component,\n                    commonStyles[type],\n                    { [styles.error]: error },\n                    className,\n                )}\n                data-test-id={dataTestId}\n                ref={ref}\n            >\n                {label ? (\n                    <span\n                        className={cn(styles.label, {\n                            [styles.tag]: type === 'tag',\n                        })}\n                        data-test-id={getDataTestId(dataTestId, 'label')}\n                    >\n                        {label}\n                    </span>\n                ) : null}\n\n                {children ? (\n                    <div\n                        className={cn(\n                            commonStyles.radioList,\n                            commonStyles[`${direction}RadioList`],\n                            radioListClassName,\n                            { [styles.radioList]: type === 'radio' },\n                        )}\n                        onBlur={onBlur}\n                        onFocus={onFocus}\n                    >\n                        {Children.map(children, (child) => {\n                            if (isValidElement(child)) {\n                                return type === 'radio' ? renderRadio(child) : renderTag(child);\n                            }\n\n                            return null;\n                        })}\n                    </div>\n                ) : null}\n\n                {errorMessage && (\n                    <span\n                        className={cn(\n                            styles.sub,\n                            {\n                                [styles.tag]: type === 'tag',\n                            },\n                            commonStyles.errorMessage,\n                        )}\n                        role='alert'\n                        data-test-id={getDataTestId(dataTestId, 'error')}\n                    >\n                        {errorMessage}\n                    </span>\n                )}\n\n                {hint && !errorMessage && (\n                    <span\n                        className={cn(\n                            styles.sub,\n                            {\n                                [styles.tag]: type === 'tag',\n                            },\n                            commonStyles.hint,\n                        )}\n                        data-test-id={getDataTestId(dataTestId, 'hint')}\n                    >\n                        {hint}\n                    </span>\n                )}\n            </div>\n        );\n    },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/base-radio-group/Component.tsx"],"sourcesContent":["import React, {\n    AriaAttributes,\n    ChangeEvent,\n    Children,\n    cloneElement,\n    FocusEvent,\n    forwardRef,\n    HTMLAttributes,\n    isValidElement,\n    MouseEvent,\n    ReactElement,\n    ReactNode,\n    useState,\n} from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useDidUpdateEffect } from '@alfalab/hooks';\n\nimport commonStyles from './index.module.css';\n\nexport type Direction = 'horizontal' | 'vertical';\nexport type RadioGroupType = 'radio' | 'tag';\n\nexport interface BaseRadioGroupProps\n    extends Omit<\n            HTMLAttributes<HTMLDivElement>,\n            'onChange' | 'onBlur' | 'onFocus' | 'children' | 'className'\n        >,\n        AriaAttributes {\n    /**\n     * Заголовок группы\n     */\n    label?: ReactNode;\n\n    /**\n     * Направление\n     */\n    direction?: Direction;\n\n    /**\n     * Тип компонента\n     */\n    type?: RadioGroupType;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для списка радио элементов\n     */\n    radioListClassName?: string;\n\n    /**\n     * Отображение ошибки\n     */\n    error?: ReactNode | boolean;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Дочерние элементы. Ожидаются компоненты `Radio` или `Tag`\n     */\n    children: ReactNode;\n\n    /**\n     * Обработчик изменения значения 'checked' одного из дочерних компонентов\n     */\n    onChange?: (\n        event: ChangeEvent | MouseEvent,\n        payload: {\n            value: string;\n            name?: string;\n        },\n    ) => void;\n\n    /**\n     * Обработчик блюра.\n     */\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Обработчик фокуса.\n     */\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Управление возможностью изменения состояния 'checked' дочерних компонентов Radio | Tag\n     */\n    disabled?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Атрибут name для всех дочерних компонентов\n     */\n    name?: string;\n\n    /**\n     * Value выбранного дочернего элемента\n     */\n    value?: string | null;\n\n    /**\n     * Основные стили компонента.\n     */\n    styles: { [key: string]: string };\n}\n\nexport const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(\n    (\n        {\n            children,\n            className,\n            radioListClassName,\n            direction = 'vertical',\n            label,\n            error,\n            hint,\n            onChange,\n            onBlur,\n            onFocus,\n            type = 'radio',\n            dataTestId,\n            disabled = false,\n            name,\n            value,\n            styles,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const [stateValue, setStateValue] = useState<BaseRadioGroupProps['value']>('');\n\n        useDidUpdateEffect(() => {\n            setStateValue(value);\n        }, [value]);\n\n        const isChecked = (childValue: string) =>\n            value !== null && (value || stateValue) === childValue;\n\n        const handleChange = (event: ChangeEvent | MouseEvent, childValue: string) => {\n            setStateValue(childValue);\n            if (onChange) {\n                onChange(event, { name, value: childValue });\n            }\n        };\n\n        const renderRadio = (child: ReactElement) => {\n            const { className: childClassName, value: childValue } = child.props;\n\n            return cloneElement(child, {\n                onChange: (event: ChangeEvent) => handleChange(event, childValue),\n                disabled,\n                ...child.props,\n                checked: isChecked(childValue),\n                name,\n                className: cn(childClassName, commonStyles[`${direction}Radio`]),\n            });\n        };\n\n        const renderTag = (child: ReactElement) => {\n            const childValue = child.props.value;\n            const checked = isChecked(childValue);\n            const clone = cloneElement(child, {\n                onClick: (event: MouseEvent) => handleChange(event, childValue),\n                disabled,\n                ...child.props,\n                checked,\n                name,\n                tabIndex: -1,\n            });\n\n            return (\n                <label\n                    className={cn(\n                        commonStyles[`${direction}Radio`],\n                        commonStyles[`${direction}TagLabel`],\n                        commonStyles.tagLabel,\n                    )}\n                >\n                    <input\n                        type='radio'\n                        autoComplete='off'\n                        onChange={(event: ChangeEvent) => handleChange(event, childValue)}\n                        disabled={disabled || child.props.disabled}\n                        name={name}\n                        checked={checked}\n                        className={commonStyles.hiddenInput}\n                        value={child.props.value}\n                    />\n                    {clone}\n                </label>\n            );\n        };\n\n        const errorMessage = typeof error === 'boolean' ? '' : error;\n\n        return (\n            <div\n                className={cn(\n                    commonStyles.component,\n                    commonStyles[type],\n                    { [styles.error]: error },\n                    className,\n                )}\n                ref={ref}\n                data-test-id={dataTestId}\n                {...restProps}\n            >\n                {label ? (\n                    <span\n                        className={cn(styles.label, {\n                            [styles.tag]: type === 'tag',\n                        })}\n                        data-test-id={getDataTestId(dataTestId, 'label')}\n                    >\n                        {label}\n                    </span>\n                ) : null}\n\n                {children ? (\n                    <div\n                        className={cn(\n                            commonStyles.radioList,\n                            commonStyles[`${direction}RadioList`],\n                            radioListClassName,\n                            { [styles.radioList]: type === 'radio' },\n                        )}\n                        onBlur={onBlur}\n                        onFocus={onFocus}\n                    >\n                        {Children.map(children, (child) => {\n                            if (isValidElement(child)) {\n                                return type === 'radio' ? renderRadio(child) : renderTag(child);\n                            }\n\n                            return null;\n                        })}\n                    </div>\n                ) : null}\n\n                {errorMessage && (\n                    <span\n                        className={cn(\n                            styles.sub,\n                            {\n                                [styles.tag]: type === 'tag',\n                            },\n                            commonStyles.errorMessage,\n                        )}\n                        role='alert'\n                        data-test-id={getDataTestId(dataTestId, 'error')}\n                    >\n                        {errorMessage}\n                    </span>\n                )}\n\n                {hint && !errorMessage && (\n                    <span\n                        className={cn(\n                            styles.sub,\n                            {\n                                [styles.tag]: type === 'tag',\n                            },\n                            commonStyles.hint,\n                        )}\n                        data-test-id={getDataTestId(dataTestId, 'hint')}\n                    >\n                        {hint}\n                    </span>\n                )}\n            </div>\n        );\n    },\n);\n"],"names":[],"mappings":"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"}

package/moderncssm/components/base-radio-group/index.module.css

@@ -1,3 +1,5 @@
+
+
 :root {
     --radio-group-hint-color: var(--color-light-text-secondary);
     --radio-group-error-color: var(--color-light-text-negative);
@@ -23,7 +25,7 @@
 }
 
 .verticalRadio {
-    margin-bottom: var(--gap-12)
+    margin-bottom: var(--gap-12);
 }
 
 .verticalRadio:last-child {
@@ -57,7 +59,7 @@
     z-index: -1;
     top: var(--gap-0);
     left: var(--gap-0);
-    opacity: 0
+    opacity: 0;
 }
 
 .hiddenInput:focus ~ button {

package/moderncssm/desktop/desktop.module.css

@@ -1,3 +1,5 @@
+
+
 :root {
     --radio-group-label-color: var(--color-light-text-primary);
     --radio-group-sub-padding-left: var(--gap-0);
@@ -29,7 +31,7 @@
 
 .error {
     padding-left: var(--radio-group-error-padding-left);
-    border-left: var(--radio-group-error-border-left)
+    border-left: var(--radio-group-error-border-left);
 }
 
 .error.tag {

package/moderncssm/mobile/mobile.module.css

@@ -1,3 +1,5 @@
+
+
 :root {
     --radio-group-mobile-sub-padding-left: var(--gap-4);
     --radio-group-mobile-list-padding-left: var(--gap-2);
@@ -16,7 +18,7 @@
     font-weight: 400;
     color: var(--radio-group-mobile-label-color);
     padding-left: var(--radio-group-mobile-sub-padding-left);
-    margin-bottom: var(--gap-12)
+    margin-bottom: var(--gap-12);
 }
 
 .label.tag {
@@ -28,7 +30,7 @@
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-12);
-    padding-left: var(--radio-group-mobile-sub-padding-left)
+    padding-left: var(--radio-group-mobile-sub-padding-left);
 }
 
 .sub.tag {
@@ -37,7 +39,7 @@
 
 .error {
     padding-left: var(--radio-group-mobile-error-padding-left);
-    border-left: var(--radio-group-mobile-error-border-left)
+    border-left: var(--radio-group-mobile-error-border-left);
 }
 
 .error.tag {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-radio-group",
-    "version": "5.1.0",
+    "version": "5.2.0",
     "description": "Radio group",
     "keywords": [],
     "license": "MIT",
@@ -24,6 +24,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.1.0",
+    "themesVersion": "14.1.2",
     "varsVersion": "10.1.0"
 }

package/src/components/base-radio-group/Component.tsx

@@ -1,9 +1,11 @@
 import React, {
+    AriaAttributes,
     ChangeEvent,
     Children,
     cloneElement,
     FocusEvent,
     forwardRef,
+    HTMLAttributes,
     isValidElement,
     MouseEvent,
     ReactElement,
@@ -20,7 +22,12 @@ import commonStyles from './index.module.css';
 export type Direction = 'horizontal' | 'vertical';
 export type RadioGroupType = 'radio' | 'tag';
 
-export type BaseRadioGroupProps = {
+export interface BaseRadioGroupProps
+    extends Omit<
+            HTMLAttributes<HTMLDivElement>,
+            'onChange' | 'onBlur' | 'onFocus' | 'children' | 'className'
+        >,
+        AriaAttributes {
     /**
      * Заголовок группы
      */
@@ -106,7 +113,7 @@ export type BaseRadioGroupProps = {
      * Основные стили компонента.
      */
     styles: { [key: string]: string };
-};
+}
 
 export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
     (
@@ -127,6 +134,7 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
             name,
             value,
             styles,
+            ...restProps
         },
         ref,
     ) => {
@@ -204,8 +212,9 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
                     { [styles.error]: error },
                     className,
                 )}
-                data-test-id={dataTestId}
                 ref={ref}
+                data-test-id={dataTestId}
+                {...restProps}
             >
                 {label ? (
                     <span

package/src/vars.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 :root {
     --radio-group-hint-color: var(--color-light-text-secondary);