@alfalab/core-components-radio-group 3.0.4 → 3.0.6

package/Component.d.ts

@@ -35,7 +35,7 @@ type RadioGroupProps = {
     /**
      * Обработчик изменения значения 'checked' одного из дочерних компонентов
      */
-    onChange?: (event?: ChangeEvent | MouseEvent, payload?: {
+    onChange?: (event: ChangeEvent | MouseEvent, payload: {
         value: string;
         name?: string;
     }) => void;

package/Component.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
@@ -9,34 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var styles = {"component":"radio-group__component_4qwa5","error":"radio-group__error_4qwa5","radioList":"radio-group__radioList_4qwa5","vertical":"radio-group__vertical_4qwa5","radio":"radio-group__radio_4qwa5","horizontal":"radio-group__horizontal_4qwa5","tag":"radio-group__tag_4qwa5","tagLabel":"radio-group__tagLabel_4qwa5","label":"radio-group__label_4qwa5","sub":"radio-group__sub_4qwa5","errorMessage":"radio-group__errorMessage_4qwa5","hint":"radio-group__hint_4qwa5","hiddenInput":"radio-group__hiddenInput_4qwa5"};
+var styles = {"component":"radio-group__component_1upfw","error":"radio-group__error_1upfw","radioList":"radio-group__radioList_1upfw","vertical":"radio-group__vertical_1upfw","radio":"radio-group__radio_1upfw","horizontal":"radio-group__horizontal_1upfw","tag":"radio-group__tag_1upfw","tagLabel":"radio-group__tagLabel_1upfw","label":"radio-group__label_1upfw","sub":"radio-group__sub_1upfw","errorMessage":"radio-group__errorMessage_1upfw","hint":"radio-group__hint_1upfw","hiddenInput":"radio-group__hiddenInput_1upfw"};
 require('./index.css')
 
 var RadioGroup = React.forwardRef(function (_a, ref) {
@@ -57,15 +31,15 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
     };
     var renderRadio = function (child) {
         var _a = child.props, childClassName = _a.className, childValue = _a.value;
-        return React.cloneElement(child, __assign(__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, styles.radio) }));
+        return React.cloneElement(child, tslib.__assign(tslib.__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, styles.radio) }));
     };
     var renderTag = function (child) {
         var childValue = child.props.value;
         var checked = isChecked(childValue);
-        var clone = React.cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name }));
+        var clone = React.cloneElement(child, tslib.__assign(tslib.__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
         return (React__default.default.createElement("label", { className: cn__default.default(styles.radio, styles.tagLabel) },
-            clone,
-            React__default.default.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles.hiddenInput, value: child.props.value })));
+            React__default.default.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles.hiddenInput, value: child.props.value }),
+            clone));
     };
     var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React__default.default.createElement("div", { className: cn__default.default(styles.component, styles[type], styles[direction], (_b = {}, _b[styles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },

package/cssm/Component.d.ts

@@ -35,7 +35,7 @@ type RadioGroupProps = {
     /**
      * Обработчик изменения значения 'checked' одного из дочерних компонентов
      */
-    onChange?: (event?: ChangeEvent | MouseEvent, payload?: {
+    onChange?: (event: ChangeEvent | MouseEvent, payload: {
         value: string;
         name?: string;
     }) => void;

package/cssm/Component.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
@@ -11,33 +12,6 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
 var RadioGroup = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.direction, direction = _c === void 0 ? 'vertical' : _c, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _d = _a.type, type = _d === void 0 ? 'radio' : _d, dataTestId = _a.dataTestId, _e = _a.disabled, disabled = _e === void 0 ? false : _e, name = _a.name, value = _a.value;
@@ -56,15 +30,15 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
     };
     var renderRadio = function (child) {
         var _a = child.props, childClassName = _a.className, childValue = _a.value;
-        return React.cloneElement(child, __assign(__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, styles__default.default.radio) }));
+        return React.cloneElement(child, tslib.__assign(tslib.__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, styles__default.default.radio) }));
     };
     var renderTag = function (child) {
         var childValue = child.props.value;
         var checked = isChecked(childValue);
-        var clone = React.cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name }));
+        var clone = React.cloneElement(child, tslib.__assign(tslib.__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
         return (React__default.default.createElement("label", { className: cn__default.default(styles__default.default.radio, styles__default.default.tagLabel) },
-            clone,
-            React__default.default.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles__default.default.hiddenInput, value: child.props.value })));
+            React__default.default.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles__default.default.hiddenInput, value: child.props.value }),
+            clone));
     };
     var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[type], styles__default.default[direction], (_b = {}, _b[styles__default.default.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },

package/cssm/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var Component = require('./Component.js');
+require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/hooks');

package/cssm/index.module.css

@@ -1,5 +1,6 @@
 :root {
 } /* deprecated */ :root {
+    --color-light-border-link: #007aff;
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
@@ -22,6 +23,7 @@
     --gap-xl-neg: -24px;
 } :root {
 } :root {
+    --focus-color: var(--color-light-border-link);
 } :root {
     --radio-group-error-color: var(--color-light-text-negative);
     --radio-group-hint-color: var(--color-light-text-secondary);
@@ -72,7 +74,10 @@
     z-index: -1;
     top: 0;
     left: 0;
-    opacity: 0;
-} .tagLabel {
+    opacity: 0
+} .hiddenInput:focus ~ button {
+        outline: 2px solid var(--focus-color);
+        outline-offset: 2px;
+    } .tagLabel {
     position: relative;
 }

package/esm/Component.d.ts

@@ -35,7 +35,7 @@ type RadioGroupProps = {
     /**
      * Обработчик изменения значения 'checked' одного из дочерних компонентов
      */
-    onChange?: (event?: ChangeEvent | MouseEvent, payload?: {
+    onChange?: (event: ChangeEvent | MouseEvent, payload: {
         value: string;
         name?: string;
     }) => void;

package/esm/Component.js

@@ -1,35 +1,9 @@
+import { __assign } from 'tslib';
 import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var styles = {"component":"radio-group__component_4qwa5","error":"radio-group__error_4qwa5","radioList":"radio-group__radioList_4qwa5","vertical":"radio-group__vertical_4qwa5","radio":"radio-group__radio_4qwa5","horizontal":"radio-group__horizontal_4qwa5","tag":"radio-group__tag_4qwa5","tagLabel":"radio-group__tagLabel_4qwa5","label":"radio-group__label_4qwa5","sub":"radio-group__sub_4qwa5","errorMessage":"radio-group__errorMessage_4qwa5","hint":"radio-group__hint_4qwa5","hiddenInput":"radio-group__hiddenInput_4qwa5"};
+var styles = {"component":"radio-group__component_1upfw","error":"radio-group__error_1upfw","radioList":"radio-group__radioList_1upfw","vertical":"radio-group__vertical_1upfw","radio":"radio-group__radio_1upfw","horizontal":"radio-group__horizontal_1upfw","tag":"radio-group__tag_1upfw","tagLabel":"radio-group__tagLabel_1upfw","label":"radio-group__label_1upfw","sub":"radio-group__sub_1upfw","errorMessage":"radio-group__errorMessage_1upfw","hint":"radio-group__hint_1upfw","hiddenInput":"radio-group__hiddenInput_1upfw"};
 require('./index.css')
 
 var RadioGroup = forwardRef(function (_a, ref) {
@@ -55,10 +29,10 @@ var RadioGroup = forwardRef(function (_a, ref) {
     var renderTag = function (child) {
         var childValue = child.props.value;
         var checked = isChecked(childValue);
-        var clone = cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name }));
+        var clone = cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
         return (React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
-            clone,
-            React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles.hiddenInput, value: child.props.value })));
+            React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles.hiddenInput, value: child.props.value }),
+            clone));
     };
     var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React.createElement("div", { className: cn(styles.component, styles[type], styles[direction], (_b = {}, _b[styles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },

package/esm/index.css

@@ -1,6 +1,7 @@
-/* hash: 1pabu */
+/* hash: 1tg4l */
 :root {
 } /* deprecated */ :root {
+    --color-light-border-link: #007aff;
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
@@ -23,57 +24,61 @@
     --gap-xl-neg: -24px;
 } :root {
 } :root {
+    --focus-color: var(--color-light-border-link);
 } :root {
     --radio-group-error-color: var(--color-light-text-negative);
     --radio-group-hint-color: var(--color-light-text-secondary);
     --radio-group-label-color: var(--color-light-text-primary);
-} .radio-group__component_4qwa5 {
+} .radio-group__component_1upfw {
     display: flex;
     flex-direction: column;
-} .radio-group__error_4qwa5 {
+} .radio-group__error_1upfw {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--radio-group-error-color);
-} .radio-group__radioList_4qwa5 {
+} .radio-group__radioList_1upfw {
     display: flex;
-} .radio-group__vertical_4qwa5 .radio-group__radioList_4qwa5 {
+} .radio-group__vertical_1upfw .radio-group__radioList_1upfw {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5 {
+} .radio-group__vertical_1upfw .radio-group__radio_1upfw {
     margin-bottom: var(--gap-m)
-} .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5:last-child {
+} .radio-group__vertical_1upfw .radio-group__radio_1upfw:last-child {
         margin-bottom: 0;
-    } .radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
+    } .radio-group__horizontal_1upfw .radio-group__radioList_1upfw {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__tag_4qwa5.radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
+} .radio-group__tag_1upfw.radio-group__horizontal_1upfw .radio-group__radioList_1upfw {
     margin-right: var(--gap-xs-neg);
-} .radio-group__horizontal_4qwa5 .radio-group__radio_4qwa5 {
+} .radio-group__horizontal_1upfw .radio-group__radio_1upfw {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_4qwa5 .radio-group__tagLabel_4qwa5 {
+} .radio-group__horizontal_1upfw .radio-group__tagLabel_1upfw {
     margin-right: var(--gap-xs);
-} .radio-group__label_4qwa5 {
+} .radio-group__label_1upfw {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--radio-group-label-color);
-} .radio-group__sub_4qwa5 {
+} .radio-group__sub_1upfw {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_4qwa5 {
+} .radio-group__errorMessage_1upfw {
     color: var(--radio-group-error-color);
-} .radio-group__hint_4qwa5 {
+} .radio-group__hint_1upfw {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_4qwa5 {
+} .radio-group__hiddenInput_1upfw {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
-    opacity: 0;
-} .radio-group__tagLabel_4qwa5 {
+    opacity: 0
+} .radio-group__hiddenInput_1upfw:focus ~ button {
+        outline: 2px solid var(--focus-color);
+        outline-offset: 2px;
+    } .radio-group__tagLabel_1upfw {
     position: relative;
 }

package/esm/index.js

@@ -1,4 +1,5 @@
 export { RadioGroup } from './Component.js';
+import 'tslib';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';

package/index.css

@@ -1,6 +1,7 @@
-/* hash: 1pabu */
+/* hash: 1tg4l */
 :root {
 } /* deprecated */ :root {
+    --color-light-border-link: #007aff;
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
@@ -23,57 +24,61 @@
     --gap-xl-neg: -24px;
 } :root {
 } :root {
+    --focus-color: var(--color-light-border-link);
 } :root {
     --radio-group-error-color: var(--color-light-text-negative);
     --radio-group-hint-color: var(--color-light-text-secondary);
     --radio-group-label-color: var(--color-light-text-primary);
-} .radio-group__component_4qwa5 {
+} .radio-group__component_1upfw {
     display: flex;
     flex-direction: column;
-} .radio-group__error_4qwa5 {
+} .radio-group__error_1upfw {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--radio-group-error-color);
-} .radio-group__radioList_4qwa5 {
+} .radio-group__radioList_1upfw {
     display: flex;
-} .radio-group__vertical_4qwa5 .radio-group__radioList_4qwa5 {
+} .radio-group__vertical_1upfw .radio-group__radioList_1upfw {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5 {
+} .radio-group__vertical_1upfw .radio-group__radio_1upfw {
     margin-bottom: var(--gap-m)
-} .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5:last-child {
+} .radio-group__vertical_1upfw .radio-group__radio_1upfw:last-child {
         margin-bottom: 0;
-    } .radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
+    } .radio-group__horizontal_1upfw .radio-group__radioList_1upfw {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__tag_4qwa5.radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
+} .radio-group__tag_1upfw.radio-group__horizontal_1upfw .radio-group__radioList_1upfw {
     margin-right: var(--gap-xs-neg);
-} .radio-group__horizontal_4qwa5 .radio-group__radio_4qwa5 {
+} .radio-group__horizontal_1upfw .radio-group__radio_1upfw {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_4qwa5 .radio-group__tagLabel_4qwa5 {
+} .radio-group__horizontal_1upfw .radio-group__tagLabel_1upfw {
     margin-right: var(--gap-xs);
-} .radio-group__label_4qwa5 {
+} .radio-group__label_1upfw {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--radio-group-label-color);
-} .radio-group__sub_4qwa5 {
+} .radio-group__sub_1upfw {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_4qwa5 {
+} .radio-group__errorMessage_1upfw {
     color: var(--radio-group-error-color);
-} .radio-group__hint_4qwa5 {
+} .radio-group__hint_1upfw {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_4qwa5 {
+} .radio-group__hiddenInput_1upfw {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
-    opacity: 0;
-} .radio-group__tagLabel_4qwa5 {
+    opacity: 0
+} .radio-group__hiddenInput_1upfw:focus ~ button {
+        outline: 2px solid var(--focus-color);
+        outline-offset: 2px;
+    } .radio-group__tagLabel_1upfw {
     position: relative;
 }

package/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var Component = require('./Component.js');
+require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/hooks');

package/modern/Component.d.ts

@@ -35,7 +35,7 @@ type RadioGroupProps = {
     /**
      * Обработчик изменения значения 'checked' одного из дочерних компонентов
      */
-    onChange?: (event?: ChangeEvent | MouseEvent, payload?: {
+    onChange?: (event: ChangeEvent | MouseEvent, payload: {
         value: string;
         name?: string;
     }) => void;

package/modern/Component.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useState, Children, isValidElement, cloneElement } f
 import cn from 'classnames';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 
-const styles = {"component":"radio-group__component_4qwa5","error":"radio-group__error_4qwa5","radioList":"radio-group__radioList_4qwa5","vertical":"radio-group__vertical_4qwa5","radio":"radio-group__radio_4qwa5","horizontal":"radio-group__horizontal_4qwa5","tag":"radio-group__tag_4qwa5","tagLabel":"radio-group__tagLabel_4qwa5","label":"radio-group__label_4qwa5","sub":"radio-group__sub_4qwa5","errorMessage":"radio-group__errorMessage_4qwa5","hint":"radio-group__hint_4qwa5","hiddenInput":"radio-group__hiddenInput_4qwa5"};
+const styles = {"component":"radio-group__component_1upfw","error":"radio-group__error_1upfw","radioList":"radio-group__radioList_1upfw","vertical":"radio-group__vertical_1upfw","radio":"radio-group__radio_1upfw","horizontal":"radio-group__horizontal_1upfw","tag":"radio-group__tag_1upfw","tagLabel":"radio-group__tagLabel_1upfw","label":"radio-group__label_1upfw","sub":"radio-group__sub_1upfw","errorMessage":"radio-group__errorMessage_1upfw","hint":"radio-group__hint_1upfw","hiddenInput":"radio-group__hiddenInput_1upfw"};
 require('./index.css')
 
 const RadioGroup = forwardRef(({ children, className, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, }, ref) => {
@@ -37,10 +37,11 @@ const RadioGroup = forwardRef(({ children, className, direction = 'vertical', la
             ...child.props,
             checked,
             name,
+            tabIndex: -1,
         });
         return (React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
-            clone,
-            React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: (event) => handleChange(event, childValue), disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles.hiddenInput, value: child.props.value })));
+            React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: (event) => handleChange(event, childValue), disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles.hiddenInput, value: child.props.value }),
+            clone));
     };
     const errorMessage = typeof error === 'boolean' ? '' : error;
     return (React.createElement("div", { className: cn(styles.component, styles[type], styles[direction], { [styles.error]: error }, className), "data-test-id": dataTestId, ref: ref },

package/modern/index.css

@@ -1,6 +1,7 @@
-/* hash: 1pabu */
+/* hash: 1tg4l */
 :root {
 } /* deprecated */ :root {
+    --color-light-border-link: #007aff;
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
@@ -23,57 +24,61 @@
     --gap-xl-neg: -24px;
 } :root {
 } :root {
+    --focus-color: var(--color-light-border-link);
 } :root {
     --radio-group-error-color: var(--color-light-text-negative);
     --radio-group-hint-color: var(--color-light-text-secondary);
     --radio-group-label-color: var(--color-light-text-primary);
-} .radio-group__component_4qwa5 {
+} .radio-group__component_1upfw {
     display: flex;
     flex-direction: column;
-} .radio-group__error_4qwa5 {
+} .radio-group__error_1upfw {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--radio-group-error-color);
-} .radio-group__radioList_4qwa5 {
+} .radio-group__radioList_1upfw {
     display: flex;
-} .radio-group__vertical_4qwa5 .radio-group__radioList_4qwa5 {
+} .radio-group__vertical_1upfw .radio-group__radioList_1upfw {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5 {
+} .radio-group__vertical_1upfw .radio-group__radio_1upfw {
     margin-bottom: var(--gap-m)
-} .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5:last-child {
+} .radio-group__vertical_1upfw .radio-group__radio_1upfw:last-child {
         margin-bottom: 0;
-    } .radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
+    } .radio-group__horizontal_1upfw .radio-group__radioList_1upfw {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__tag_4qwa5.radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
+} .radio-group__tag_1upfw.radio-group__horizontal_1upfw .radio-group__radioList_1upfw {
     margin-right: var(--gap-xs-neg);
-} .radio-group__horizontal_4qwa5 .radio-group__radio_4qwa5 {
+} .radio-group__horizontal_1upfw .radio-group__radio_1upfw {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_4qwa5 .radio-group__tagLabel_4qwa5 {
+} .radio-group__horizontal_1upfw .radio-group__tagLabel_1upfw {
     margin-right: var(--gap-xs);
-} .radio-group__label_4qwa5 {
+} .radio-group__label_1upfw {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--radio-group-label-color);
-} .radio-group__sub_4qwa5 {
+} .radio-group__sub_1upfw {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_4qwa5 {
+} .radio-group__errorMessage_1upfw {
     color: var(--radio-group-error-color);
-} .radio-group__hint_4qwa5 {
+} .radio-group__hint_1upfw {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_4qwa5 {
+} .radio-group__hiddenInput_1upfw {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
-    opacity: 0;
-} .radio-group__tagLabel_4qwa5 {
+    opacity: 0
+} .radio-group__hiddenInput_1upfw:focus ~ button {
+        outline: 2px solid var(--focus-color);
+        outline-offset: 2px;
+    } .radio-group__tagLabel_1upfw {
     position: relative;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-radio-group",
-    "version": "3.0.4",
+    "version": "3.0.6",
     "description": "Radio group",
     "keywords": [],
     "license": "MIT",
@@ -19,6 +19,7 @@
     },
     "dependencies": {
         "@alfalab/hooks": "^1.13.0",
-        "classnames": "^2.3.1"
+        "classnames": "^2.3.1",
+        "tslib": "^2.4.0"
     }
 }