@alfalab/core-components 37.3.0 → 37.4.0-beta.1

package/radio/index.css

@@ -73,77 +73,77 @@
     /* icon */
     --radio-icon-color: var(--color-light-bg-primary);
 }
-.radio__container_ajohh {
+.radio__container_8bgy4 {
     display: inline-flex;
     align-items: flex-start;
     cursor: pointer
 }
-.radio__container_ajohh:not(.radio__checked_ajohh):not(.radio__disabled_ajohh):not(.radio__inactive_ajohh) .radio__circle_ajohh {
+.radio__container_8bgy4:not(.radio__checked_8bgy4):not(.radio__disabled_8bgy4):not(.radio__inactive_8bgy4) .radio__circle_8bgy4 {
             background-color: var(--radio-bg-color);
             border: 1.5px solid var(--radio-border-color);
         }
-.radio__container_ajohh:not(.radio__checked_ajohh):not(.radio__disabled_ajohh):not(.radio__inactive_ajohh):hover:not(:active) .radio__circle_ajohh {
+.radio__container_8bgy4:not(.radio__checked_8bgy4):not(.radio__disabled_8bgy4):not(.radio__inactive_8bgy4):hover:not(:active) .radio__circle_8bgy4 {
             background-color: var(--radio-hover-bg-color);
             border-color: var(--radio-hover-border-color);
         }
-.radio__container_ajohh:not(.radio__checked_ajohh):not(.radio__disabled_ajohh):not(.radio__inactive_ajohh):active .radio__circle_ajohh {
+.radio__container_8bgy4:not(.radio__checked_8bgy4):not(.radio__disabled_8bgy4):not(.radio__inactive_8bgy4):active .radio__circle_8bgy4 {
             background-color: var(--radio-active-bg-color);
             border-color: var(--radio-active-border-color);
         }
-.radio__container_ajohh.radio__disabled_ajohh {
+.radio__container_8bgy4.radio__disabled_8bgy4 {
         cursor: var(--disabled-cursor)
     }
-.radio__container_ajohh.radio__disabled_ajohh .radio__circle_ajohh {
+.radio__container_8bgy4.radio__disabled_8bgy4 .radio__circle_8bgy4 {
             background-color: var(--radio-disabled-bg-color);
             border: 1.5px solid var(--radio-disabled-border-color);
         }
-.radio__container_ajohh.radio__disabled_ajohh .radio__label_ajohh {
+.radio__container_8bgy4.radio__disabled_8bgy4 .radio__label_8bgy4 {
             color: var(--radio-disabled-color);
         }
-.radio__container_ajohh.radio__disabled_ajohh .radio__hint_ajohh {
+.radio__container_8bgy4.radio__disabled_8bgy4 .radio__hint_8bgy4 {
             color: var(--radio-disabled-color);
         }
-.radio__container_ajohh.radio__inactive_ajohh {
+.radio__container_8bgy4.radio__inactive_8bgy4 {
         cursor: var(--disabled-cursor)
     }
-.radio__container_ajohh.radio__inactive_ajohh .radio__circle_ajohh {
+.radio__container_8bgy4.radio__inactive_8bgy4 .radio__circle_8bgy4 {
             background-color: var(--radio-checked-disabled-bg-color);
             border: 1px solid var(--radio-inactive-border-color);
         }
-.radio__container_ajohh.radio__inactive_ajohh.radio__checked_ajohh .radio__circle_ajohh:before {
+.radio__container_8bgy4.radio__inactive_8bgy4.radio__checked_8bgy4 .radio__circle_8bgy4:before {
             background-color: var(--radio-checked-inactive-color);
         }
-.radio__container_ajohh.radio__checked_ajohh:not(:active) .radio__circle_ajohh:before,
-    .radio__container_ajohh.radio__checked_ajohh.radio__disabled_ajohh:active .radio__circle_ajohh:before {
+.radio__container_8bgy4.radio__checked_8bgy4:not(:active) .radio__circle_8bgy4:before,
+    .radio__container_8bgy4.radio__checked_8bgy4.radio__disabled_8bgy4:active .radio__circle_8bgy4:before {
         opacity: 1;
     }
-.radio__container_ajohh.radio__checked_ajohh .radio__circle_ajohh {
+.radio__container_8bgy4.radio__checked_8bgy4 .radio__circle_8bgy4 {
             background-color: var(--radio-checked-bg-color);
             border: 1.5px solid var(--radio-checked-border-color);
         }
-.radio__container_ajohh.radio__checked_ajohh:hover .radio__circle_ajohh {
+.radio__container_8bgy4.radio__checked_8bgy4:hover .radio__circle_8bgy4 {
             background-color: var(--radio-checked-hover-bg-color);
             border-color: var(--radio-checked-hover-border-color);
         }
-.radio__container_ajohh.radio__checked_ajohh:active .radio__circle_ajohh {
+.radio__container_8bgy4.radio__checked_8bgy4:active .radio__circle_8bgy4 {
             background-color: var(--radio-checked-active-bg-color);
             border-color: var(--radio-checked-active-border-color);
         }
-.radio__container_ajohh.radio__focused_ajohh .radio__circle_ajohh {
+.radio__container_8bgy4.radio__focused_8bgy4 .radio__circle_8bgy4 {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
     }
-.radio__container_ajohh.radio__disabled_ajohh.radio__checked_ajohh .radio__circle_ajohh,
-    .radio__container_ajohh.radio__inactive_ajohh.radio__checked_ajohh .radio__circle_ajohh {
+.radio__container_8bgy4.radio__disabled_8bgy4.radio__checked_8bgy4 .radio__circle_8bgy4,
+    .radio__container_8bgy4.radio__inactive_8bgy4.radio__checked_8bgy4 .radio__circle_8bgy4 {
         background-color: var(--radio-checked-disabled-bg-color);
         border-color: var(--radio-checked-disabled-border-color);
     }
-.radio__container_ajohh input {
+.radio__container_8bgy4 input {
         position: absolute;
         z-index: -1;
         opacity: 0;
     }
-.radio__circle_ajohh {
+.radio__circle_8bgy4 {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
@@ -153,7 +153,7 @@
     margin: var(--gap-3xs);
     transition: background-color 0.2s ease, border 0.2s ease
 }
-.radio__circle_ajohh:before {
+.radio__circle_8bgy4:before {
         content: '';
         background-color: var(--radio-icon-color);
         position: absolute;
@@ -168,40 +168,40 @@
         transition: opacity 0.2s ease;
         opacity: 0;
     }
-.radio__s_ajohh .radio__circle_ajohh {
+.radio__s_8bgy4 .radio__circle_8bgy4 {
     width: 16px;
     height: 16px;
     margin: var(--gap-2xs) var(--gap-3xs);
 }
-.radio__content_ajohh {
+.radio__content_8bgy4 {
     display: flex;
     flex-direction: column;
     margin-left: var(--gap-s);
 }
-.radio__s_ajohh .radio__content_ajohh {
+.radio__s_8bgy4 .radio__content_8bgy4 {
     margin-left: var(--gap-xs);
 }
-.radio__start_ajohh {
+.radio__start_8bgy4 {
     align-items: flex-start;
 }
-.radio__center_ajohh {
+.radio__center_8bgy4 {
     align-items: center;
 }
-.radio__addons_ajohh {
+.radio__addons_8bgy4 {
     margin-left: auto;
     padding-left: var(--gap-m);
     line-height: 24px;
 }
-.radio__block_ajohh {
+.radio__block_8bgy4 {
     width: 100%;
 }
-.radio__label_ajohh {
+.radio__label_8bgy4 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: var(--radio-label-color);
 }
-.radio__hint_ajohh {
+.radio__hint_8bgy4 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;

package/radio/modern/Component.js

@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 
-const styles = {"container":"radio__container_ajohh","checked":"radio__checked_ajohh","disabled":"radio__disabled_ajohh","inactive":"radio__inactive_ajohh","circle":"radio__circle_ajohh","label":"radio__label_ajohh","hint":"radio__hint_ajohh","focused":"radio__focused_ajohh","s":"radio__s_ajohh","content":"radio__content_ajohh","start":"radio__start_ajohh","center":"radio__center_ajohh","addons":"radio__addons_ajohh","block":"radio__block_ajohh"};
+const styles = {"container":"radio__container_8bgy4","checked":"radio__checked_8bgy4","disabled":"radio__disabled_8bgy4","inactive":"radio__inactive_8bgy4","circle":"radio__circle_8bgy4","label":"radio__label_8bgy4","hint":"radio__hint_8bgy4","focused":"radio__focused_8bgy4","s":"radio__s_8bgy4","content":"radio__content_8bgy4","start":"radio__start_8bgy4","center":"radio__center_8bgy4","addons":"radio__addons_8bgy4","block":"radio__block_8bgy4"};
 require('./index.css');
 
 const Radio = forwardRef(({ onChange, className, circleClassName, contentClassName, name, disabled, inactive, dataTestId, label, checked, hint, size = 's', align = 'start', addons, block, ...restProps }, ref) => {

package/radio/modern/index.css

@@ -73,77 +73,77 @@
     /* icon */
     --radio-icon-color: var(--color-light-bg-primary);
 }
-.radio__container_ajohh {
+.radio__container_8bgy4 {
     display: inline-flex;
     align-items: flex-start;
     cursor: pointer
 }
-.radio__container_ajohh:not(.radio__checked_ajohh):not(.radio__disabled_ajohh):not(.radio__inactive_ajohh) .radio__circle_ajohh {
+.radio__container_8bgy4:not(.radio__checked_8bgy4):not(.radio__disabled_8bgy4):not(.radio__inactive_8bgy4) .radio__circle_8bgy4 {
             background-color: var(--radio-bg-color);
             border: 1.5px solid var(--radio-border-color);
         }
-.radio__container_ajohh:not(.radio__checked_ajohh):not(.radio__disabled_ajohh):not(.radio__inactive_ajohh):hover:not(:active) .radio__circle_ajohh {
+.radio__container_8bgy4:not(.radio__checked_8bgy4):not(.radio__disabled_8bgy4):not(.radio__inactive_8bgy4):hover:not(:active) .radio__circle_8bgy4 {
             background-color: var(--radio-hover-bg-color);
             border-color: var(--radio-hover-border-color);
         }
-.radio__container_ajohh:not(.radio__checked_ajohh):not(.radio__disabled_ajohh):not(.radio__inactive_ajohh):active .radio__circle_ajohh {
+.radio__container_8bgy4:not(.radio__checked_8bgy4):not(.radio__disabled_8bgy4):not(.radio__inactive_8bgy4):active .radio__circle_8bgy4 {
             background-color: var(--radio-active-bg-color);
             border-color: var(--radio-active-border-color);
         }
-.radio__container_ajohh.radio__disabled_ajohh {
+.radio__container_8bgy4.radio__disabled_8bgy4 {
         cursor: var(--disabled-cursor)
     }
-.radio__container_ajohh.radio__disabled_ajohh .radio__circle_ajohh {
+.radio__container_8bgy4.radio__disabled_8bgy4 .radio__circle_8bgy4 {
             background-color: var(--radio-disabled-bg-color);
             border: 1.5px solid var(--radio-disabled-border-color);
         }
-.radio__container_ajohh.radio__disabled_ajohh .radio__label_ajohh {
+.radio__container_8bgy4.radio__disabled_8bgy4 .radio__label_8bgy4 {
             color: var(--radio-disabled-color);
         }
-.radio__container_ajohh.radio__disabled_ajohh .radio__hint_ajohh {
+.radio__container_8bgy4.radio__disabled_8bgy4 .radio__hint_8bgy4 {
             color: var(--radio-disabled-color);
         }
-.radio__container_ajohh.radio__inactive_ajohh {
+.radio__container_8bgy4.radio__inactive_8bgy4 {
         cursor: var(--disabled-cursor)
     }
-.radio__container_ajohh.radio__inactive_ajohh .radio__circle_ajohh {
+.radio__container_8bgy4.radio__inactive_8bgy4 .radio__circle_8bgy4 {
             background-color: var(--radio-checked-disabled-bg-color);
             border: 1px solid var(--radio-inactive-border-color);
         }
-.radio__container_ajohh.radio__inactive_ajohh.radio__checked_ajohh .radio__circle_ajohh:before {
+.radio__container_8bgy4.radio__inactive_8bgy4.radio__checked_8bgy4 .radio__circle_8bgy4:before {
             background-color: var(--radio-checked-inactive-color);
         }
-.radio__container_ajohh.radio__checked_ajohh:not(:active) .radio__circle_ajohh:before,
-    .radio__container_ajohh.radio__checked_ajohh.radio__disabled_ajohh:active .radio__circle_ajohh:before {
+.radio__container_8bgy4.radio__checked_8bgy4:not(:active) .radio__circle_8bgy4:before,
+    .radio__container_8bgy4.radio__checked_8bgy4.radio__disabled_8bgy4:active .radio__circle_8bgy4:before {
         opacity: 1;
     }
-.radio__container_ajohh.radio__checked_ajohh .radio__circle_ajohh {
+.radio__container_8bgy4.radio__checked_8bgy4 .radio__circle_8bgy4 {
             background-color: var(--radio-checked-bg-color);
             border: 1.5px solid var(--radio-checked-border-color);
         }
-.radio__container_ajohh.radio__checked_ajohh:hover .radio__circle_ajohh {
+.radio__container_8bgy4.radio__checked_8bgy4:hover .radio__circle_8bgy4 {
             background-color: var(--radio-checked-hover-bg-color);
             border-color: var(--radio-checked-hover-border-color);
         }
-.radio__container_ajohh.radio__checked_ajohh:active .radio__circle_ajohh {
+.radio__container_8bgy4.radio__checked_8bgy4:active .radio__circle_8bgy4 {
             background-color: var(--radio-checked-active-bg-color);
             border-color: var(--radio-checked-active-border-color);
         }
-.radio__container_ajohh.radio__focused_ajohh .radio__circle_ajohh {
+.radio__container_8bgy4.radio__focused_8bgy4 .radio__circle_8bgy4 {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
     }
-.radio__container_ajohh.radio__disabled_ajohh.radio__checked_ajohh .radio__circle_ajohh,
-    .radio__container_ajohh.radio__inactive_ajohh.radio__checked_ajohh .radio__circle_ajohh {
+.radio__container_8bgy4.radio__disabled_8bgy4.radio__checked_8bgy4 .radio__circle_8bgy4,
+    .radio__container_8bgy4.radio__inactive_8bgy4.radio__checked_8bgy4 .radio__circle_8bgy4 {
         background-color: var(--radio-checked-disabled-bg-color);
         border-color: var(--radio-checked-disabled-border-color);
     }
-.radio__container_ajohh input {
+.radio__container_8bgy4 input {
         position: absolute;
         z-index: -1;
         opacity: 0;
     }
-.radio__circle_ajohh {
+.radio__circle_8bgy4 {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
@@ -153,7 +153,7 @@
     margin: var(--gap-3xs);
     transition: background-color 0.2s ease, border 0.2s ease
 }
-.radio__circle_ajohh:before {
+.radio__circle_8bgy4:before {
         content: '';
         background-color: var(--radio-icon-color);
         position: absolute;
@@ -168,40 +168,40 @@
         transition: opacity 0.2s ease;
         opacity: 0;
     }
-.radio__s_ajohh .radio__circle_ajohh {
+.radio__s_8bgy4 .radio__circle_8bgy4 {
     width: 16px;
     height: 16px;
     margin: var(--gap-2xs) var(--gap-3xs);
 }
-.radio__content_ajohh {
+.radio__content_8bgy4 {
     display: flex;
     flex-direction: column;
     margin-left: var(--gap-s);
 }
-.radio__s_ajohh .radio__content_ajohh {
+.radio__s_8bgy4 .radio__content_8bgy4 {
     margin-left: var(--gap-xs);
 }
-.radio__start_ajohh {
+.radio__start_8bgy4 {
     align-items: flex-start;
 }
-.radio__center_ajohh {
+.radio__center_8bgy4 {
     align-items: center;
 }
-.radio__addons_ajohh {
+.radio__addons_8bgy4 {
     margin-left: auto;
     padding-left: var(--gap-m);
     line-height: 24px;
 }
-.radio__block_ajohh {
+.radio__block_8bgy4 {
     width: 100%;
 }
-.radio__label_ajohh {
+.radio__label_8bgy4 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: var(--radio-label-color);
 }
-.radio__hint_ajohh {
+.radio__hint_8bgy4 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;

package/radio-group/Component.js

@@ -1,5 +1,6 @@
 var React = require('react');
 var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -33,38 +34,36 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"radio-group__component_h0fij","error":"radio-group__error_h0fij","radioList":"radio-group__radioList_h0fij","vertical":"radio-group__vertical_h0fij","radio":"radio-group__radio_h0fij","horizontal":"radio-group__horizontal_h0fij","tag":"radio-group__tag_h0fij","tagLabel":"radio-group__tagLabel_h0fij","label":"radio-group__label_h0fij","sub":"radio-group__sub_h0fij","errorMessage":"radio-group__errorMessage_h0fij","hint":"radio-group__hint_h0fij","hiddenInput":"radio-group__hiddenInput_h0fij"};
+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"};
 require('./index.css');
 
 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;
     var _f = React.useState(''), stateValue = _f[0], setStateValue = _f[1];
+    hooks.useDidUpdateEffect(function () {
+        setStateValue(value);
+    }, [value]);
+    var isChecked = function (childValue) {
+        return value !== null && (value || stateValue) === childValue;
+    };
+    var handleChange = function (event, childValue) {
+        setStateValue(childValue);
+        if (onChange) {
+            onChange(event, { name: name, value: childValue });
+        }
+    };
     var renderRadio = function (child) {
-        var childClassName = child.props.className;
-        var checked = value !== null && (value || stateValue) === child.props.value;
-        var handleChange = function (event) {
-            setStateValue(child.props.value);
-            if (onChange) {
-                onChange(event, { name: name, value: child.props.value });
-            }
-        };
-        return React.cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { checked: checked, name: name, className: cn__default.default(childClassName, styles.radio) }));
+        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) }));
     };
     var renderTag = function (child) {
-        var checked = value !== null && (value || stateValue) === child.props.value;
-        var handleChange = function (event) {
-            setStateValue(child.props.value);
-            if (onChange) {
-                onChange(event, { name: name, value: child.props.value });
-            }
-        };
-        var clone = React.cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked, name: name }));
-        return (
-        // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        React__default.default.createElement("label", { className: cn__default.default(styles.radio, styles.tagLabel) },
+        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 }));
+        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: handleChange, 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 })));
     };
     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 },
@@ -78,13 +77,5 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
         errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles.sub, styles.errorMessage), role: 'alert' }, errorMessage)),
         hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles.sub, styles.hint) }, hint))));
 });
-/**
- * Для отображения в сторибуке
- */
-RadioGroup.defaultProps = {
-    direction: 'vertical',
-    type: 'radio',
-    disabled: false,
-};
 
 exports.RadioGroup = RadioGroup;

package/radio-group/cssm/Component.js

@@ -1,5 +1,6 @@
 var React = require('react');
 var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -39,31 +40,29 @@ 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;
     var _f = React.useState(''), stateValue = _f[0], setStateValue = _f[1];
+    hooks.useDidUpdateEffect(function () {
+        setStateValue(value);
+    }, [value]);
+    var isChecked = function (childValue) {
+        return value !== null && (value || stateValue) === childValue;
+    };
+    var handleChange = function (event, childValue) {
+        setStateValue(childValue);
+        if (onChange) {
+            onChange(event, { name: name, value: childValue });
+        }
+    };
     var renderRadio = function (child) {
-        var childClassName = child.props.className;
-        var checked = value !== null && (value || stateValue) === child.props.value;
-        var handleChange = function (event) {
-            setStateValue(child.props.value);
-            if (onChange) {
-                onChange(event, { name: name, value: child.props.value });
-            }
-        };
-        return React.cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { checked: checked, name: name, className: cn__default.default(childClassName, styles__default.default.radio) }));
+        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) }));
     };
     var renderTag = function (child) {
-        var checked = value !== null && (value || stateValue) === child.props.value;
-        var handleChange = function (event) {
-            setStateValue(child.props.value);
-            if (onChange) {
-                onChange(event, { name: name, value: child.props.value });
-            }
-        };
-        var clone = React.cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked, name: name }));
-        return (
-        // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        React__default.default.createElement("label", { className: cn__default.default(styles__default.default.radio, styles__default.default.tagLabel) },
+        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 }));
+        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: handleChange, 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 })));
     };
     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 },
@@ -77,13 +76,5 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
         errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.sub, styles__default.default.errorMessage), role: 'alert' }, errorMessage)),
         hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.sub, styles__default.default.hint) }, hint))));
 });
-/**
- * Для отображения в сторибуке
- */
-RadioGroup.defaultProps = {
-    direction: 'vertical',
-    type: 'radio',
-    disabled: false,
-};
 
 exports.RadioGroup = RadioGroup;

package/radio-group/cssm/index.js

@@ -1,6 +1,7 @@
 var Component = require('./Component.js');
 require('react');
 require('classnames');
+require('@alfalab/hooks');
 require('./index.module.css');
 
 

package/radio-group/esm/Component.js

@@ -1,5 +1,6 @@
 import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
+import { useDidUpdateEffect } from '@alfalab/hooks';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -28,38 +29,36 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"radio-group__component_h0fij","error":"radio-group__error_h0fij","radioList":"radio-group__radioList_h0fij","vertical":"radio-group__vertical_h0fij","radio":"radio-group__radio_h0fij","horizontal":"radio-group__horizontal_h0fij","tag":"radio-group__tag_h0fij","tagLabel":"radio-group__tagLabel_h0fij","label":"radio-group__label_h0fij","sub":"radio-group__sub_h0fij","errorMessage":"radio-group__errorMessage_h0fij","hint":"radio-group__hint_h0fij","hiddenInput":"radio-group__hiddenInput_h0fij"};
+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"};
 require('./index.css');
 
 var RadioGroup = 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;
     var _f = useState(''), stateValue = _f[0], setStateValue = _f[1];
+    useDidUpdateEffect(function () {
+        setStateValue(value);
+    }, [value]);
+    var isChecked = function (childValue) {
+        return value !== null && (value || stateValue) === childValue;
+    };
+    var handleChange = function (event, childValue) {
+        setStateValue(childValue);
+        if (onChange) {
+            onChange(event, { name: name, value: childValue });
+        }
+    };
     var renderRadio = function (child) {
-        var childClassName = child.props.className;
-        var checked = value !== null && (value || stateValue) === child.props.value;
-        var handleChange = function (event) {
-            setStateValue(child.props.value);
-            if (onChange) {
-                onChange(event, { name: name, value: child.props.value });
-            }
-        };
-        return cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { checked: checked, name: name, className: cn(childClassName, styles.radio) }));
+        var _a = child.props, childClassName = _a.className, childValue = _a.value;
+        return cloneElement(child, __assign(__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn(childClassName, styles.radio) }));
     };
     var renderTag = function (child) {
-        var checked = value !== null && (value || stateValue) === child.props.value;
-        var handleChange = function (event) {
-            setStateValue(child.props.value);
-            if (onChange) {
-                onChange(event, { name: name, value: child.props.value });
-            }
-        };
-        var clone = cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked, name: name }));
-        return (
-        // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
+        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 }));
+        return (React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
             clone,
-            React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: handleChange, 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 })));
     };
     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 },
@@ -73,13 +72,5 @@ var RadioGroup = forwardRef(function (_a, ref) {
         errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.errorMessage), role: 'alert' }, errorMessage)),
         hint && !errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.hint) }, hint))));
 });
-/**
- * Для отображения в сторибуке
- */
-RadioGroup.defaultProps = {
-    direction: 'vertical',
-    type: 'radio',
-    disabled: false,
-};
 
 export { RadioGroup };