@alfalab/core-components-radio-group 3.0.3 → 3.0.5

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,72 +1,45 @@
 'use strict';
 
+var tslib = require('tslib');
 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 }; }
 
 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_emfj8","error":"radio-group__error_emfj8","radioList":"radio-group__radioList_emfj8","vertical":"radio-group__vertical_emfj8","radio":"radio-group__radio_emfj8","horizontal":"radio-group__horizontal_emfj8","tag":"radio-group__tag_emfj8","tagLabel":"radio-group__tagLabel_emfj8","label":"radio-group__label_emfj8","sub":"radio-group__sub_emfj8","errorMessage":"radio-group__errorMessage_emfj8","hint":"radio-group__hint_emfj8","hiddenInput":"radio-group__hiddenInput_emfj8"};
+var styles = {"component":"radio-group__component_mw9ie","error":"radio-group__error_mw9ie","radioList":"radio-group__radioList_mw9ie","vertical":"radio-group__vertical_mw9ie","radio":"radio-group__radio_mw9ie","horizontal":"radio-group__horizontal_mw9ie","tag":"radio-group__tag_mw9ie","tagLabel":"radio-group__tagLabel_mw9ie","label":"radio-group__label_mw9ie","sub":"radio-group__sub_mw9ie","errorMessage":"radio-group__errorMessage_mw9ie","hint":"radio-group__hint_mw9ie","hiddenInput":"radio-group__hiddenInput_mw9ie"};
 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, 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 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, tslib.__assign(tslib.__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 },
@@ -80,13 +53,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/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,7 +1,9 @@
 'use strict';
 
+var tslib = require('tslib');
 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 }; }
@@ -10,62 +12,33 @@ 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;
     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, 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 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, tslib.__assign(tslib.__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 },
@@ -79,13 +52,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/cssm/index.js

@@ -1,8 +1,10 @@
 'use strict';
 
 var Component = require('./Component.js');
+require('tslib');
 require('react');
 require('classnames');
+require('@alfalab/hooks');
 require('./index.module.css');
 
 

package/cssm/index.module.css

@@ -1,91 +1,78 @@
 :root {
+} /* deprecated */ :root {
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
     --gap-xl: 24px;
     --gap-xs-neg: -8px;
     --gap-xl-neg: -24px;
-}
-:root {
+} :root {
+} :root {
+} :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);
-}
-.component {
+} .component {
     display: flex;
     flex-direction: column;
-}
-.error {
+} .error {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--radio-group-error-color);
-}
-.radioList {
+} .radioList {
     display: flex;
-}
-.vertical .radioList {
+} .vertical .radioList {
     flex-direction: column;
     align-items: flex-start;
-}
-.vertical .radio {
+} .vertical .radio {
     margin-bottom: var(--gap-m)
-}
-.vertical .radio:last-child {
+} .vertical .radio:last-child {
         margin-bottom: 0;
-    }
-.horizontal .radioList {
+    } .horizontal .radioList {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
-}
-.tag.horizontal .radioList {
+} .tag.horizontal .radioList {
     margin-right: var(--gap-xs-neg);
-}
-.horizontal .radio {
+} .horizontal .radio {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-}
-.horizontal .tagLabel {
+} .horizontal .tagLabel {
     margin-right: var(--gap-xs);
-}
-.label {
+} .label {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--radio-group-label-color);
-}
-.sub {
+} .sub {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-}
-.errorMessage {
+} .errorMessage {
     color: var(--radio-group-error-color);
-}
-.hint {
+} .hint {
     color: var(--radio-group-hint-color);
-}
-.hiddenInput {
+} .hiddenInput {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0;
-}
-.tagLabel {
+} .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,65 +1,38 @@
+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_emfj8","error":"radio-group__error_emfj8","radioList":"radio-group__radioList_emfj8","vertical":"radio-group__vertical_emfj8","radio":"radio-group__radio_emfj8","horizontal":"radio-group__horizontal_emfj8","tag":"radio-group__tag_emfj8","tagLabel":"radio-group__tagLabel_emfj8","label":"radio-group__label_emfj8","sub":"radio-group__sub_emfj8","errorMessage":"radio-group__errorMessage_emfj8","hint":"radio-group__hint_emfj8","hiddenInput":"radio-group__hiddenInput_emfj8"};
+var styles = {"component":"radio-group__component_mw9ie","error":"radio-group__error_mw9ie","radioList":"radio-group__radioList_mw9ie","vertical":"radio-group__vertical_mw9ie","radio":"radio-group__radio_mw9ie","horizontal":"radio-group__horizontal_mw9ie","tag":"radio-group__tag_mw9ie","tagLabel":"radio-group__tagLabel_mw9ie","label":"radio-group__label_mw9ie","sub":"radio-group__sub_mw9ie","errorMessage":"radio-group__errorMessage_mw9ie","hint":"radio-group__hint_mw9ie","hiddenInput":"radio-group__hiddenInput_mw9ie"};
 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 +46,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 };

package/esm/index.css

@@ -1,92 +1,79 @@
-/* hash: 1thhv */
+/* hash: 1xnam */
 :root {
+} /* deprecated */ :root {
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
     --gap-xl: 24px;
     --gap-xs-neg: -8px;
     --gap-xl-neg: -24px;
-}
-:root {
+} :root {
+} :root {
+} :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_emfj8 {
+} .radio-group__component_mw9ie {
     display: flex;
     flex-direction: column;
-}
-.radio-group__error_emfj8 {
+} .radio-group__error_mw9ie {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--radio-group-error-color);
-}
-.radio-group__radioList_emfj8 {
+} .radio-group__radioList_mw9ie {
     display: flex;
-}
-.radio-group__vertical_emfj8 .radio-group__radioList_emfj8 {
+} .radio-group__vertical_mw9ie .radio-group__radioList_mw9ie {
     flex-direction: column;
     align-items: flex-start;
-}
-.radio-group__vertical_emfj8 .radio-group__radio_emfj8 {
+} .radio-group__vertical_mw9ie .radio-group__radio_mw9ie {
     margin-bottom: var(--gap-m)
-}
-.radio-group__vertical_emfj8 .radio-group__radio_emfj8:last-child {
+} .radio-group__vertical_mw9ie .radio-group__radio_mw9ie:last-child {
         margin-bottom: 0;
-    }
-.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
+    } .radio-group__horizontal_mw9ie .radio-group__radioList_mw9ie {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
-}
-.radio-group__tag_emfj8.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
+} .radio-group__tag_mw9ie.radio-group__horizontal_mw9ie .radio-group__radioList_mw9ie {
     margin-right: var(--gap-xs-neg);
-}
-.radio-group__horizontal_emfj8 .radio-group__radio_emfj8 {
+} .radio-group__horizontal_mw9ie .radio-group__radio_mw9ie {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-}
-.radio-group__horizontal_emfj8 .radio-group__tagLabel_emfj8 {
+} .radio-group__horizontal_mw9ie .radio-group__tagLabel_mw9ie {
     margin-right: var(--gap-xs);
-}
-.radio-group__label_emfj8 {
+} .radio-group__label_mw9ie {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--radio-group-label-color);
-}
-.radio-group__sub_emfj8 {
+} .radio-group__sub_mw9ie {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-}
-.radio-group__errorMessage_emfj8 {
+} .radio-group__errorMessage_mw9ie {
     color: var(--radio-group-error-color);
-}
-.radio-group__hint_emfj8 {
+} .radio-group__hint_mw9ie {
     color: var(--radio-group-hint-color);
-}
-.radio-group__hiddenInput_emfj8 {
+} .radio-group__hiddenInput_mw9ie {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0;
-}
-.radio-group__tagLabel_emfj8 {
+} .radio-group__tagLabel_mw9ie {
     position: relative;
 }

package/esm/index.js

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

package/index.css

@@ -1,92 +1,79 @@
-/* hash: 1thhv */
+/* hash: 1xnam */
 :root {
+} /* deprecated */ :root {
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
     --gap-xl: 24px;
     --gap-xs-neg: -8px;
     --gap-xl-neg: -24px;
-}
-:root {
+} :root {
+} :root {
+} :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_emfj8 {
+} .radio-group__component_mw9ie {
     display: flex;
     flex-direction: column;
-}
-.radio-group__error_emfj8 {
+} .radio-group__error_mw9ie {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--radio-group-error-color);
-}
-.radio-group__radioList_emfj8 {
+} .radio-group__radioList_mw9ie {
     display: flex;
-}
-.radio-group__vertical_emfj8 .radio-group__radioList_emfj8 {
+} .radio-group__vertical_mw9ie .radio-group__radioList_mw9ie {
     flex-direction: column;
     align-items: flex-start;
-}
-.radio-group__vertical_emfj8 .radio-group__radio_emfj8 {
+} .radio-group__vertical_mw9ie .radio-group__radio_mw9ie {
     margin-bottom: var(--gap-m)
-}
-.radio-group__vertical_emfj8 .radio-group__radio_emfj8:last-child {
+} .radio-group__vertical_mw9ie .radio-group__radio_mw9ie:last-child {
         margin-bottom: 0;
-    }
-.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
+    } .radio-group__horizontal_mw9ie .radio-group__radioList_mw9ie {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
-}
-.radio-group__tag_emfj8.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
+} .radio-group__tag_mw9ie.radio-group__horizontal_mw9ie .radio-group__radioList_mw9ie {
     margin-right: var(--gap-xs-neg);
-}
-.radio-group__horizontal_emfj8 .radio-group__radio_emfj8 {
+} .radio-group__horizontal_mw9ie .radio-group__radio_mw9ie {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-}
-.radio-group__horizontal_emfj8 .radio-group__tagLabel_emfj8 {
+} .radio-group__horizontal_mw9ie .radio-group__tagLabel_mw9ie {
     margin-right: var(--gap-xs);
-}
-.radio-group__label_emfj8 {
+} .radio-group__label_mw9ie {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--radio-group-label-color);
-}
-.radio-group__sub_emfj8 {
+} .radio-group__sub_mw9ie {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-}
-.radio-group__errorMessage_emfj8 {
+} .radio-group__errorMessage_mw9ie {
     color: var(--radio-group-error-color);
-}
-.radio-group__hint_emfj8 {
+} .radio-group__hint_mw9ie {
     color: var(--radio-group-hint-color);
-}
-.radio-group__hiddenInput_emfj8 {
+} .radio-group__hiddenInput_mw9ie {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0;
-}
-.radio-group__tagLabel_emfj8 {
+} .radio-group__tagLabel_mw9ie {
     position: relative;
 }

package/index.js

@@ -1,8 +1,10 @@
 '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

@@ -1,49 +1,46 @@
 import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
+import { useDidUpdateEffect } from '@alfalab/hooks';
 
-const styles = {"component":"radio-group__component_emfj8","error":"radio-group__error_emfj8","radioList":"radio-group__radioList_emfj8","vertical":"radio-group__vertical_emfj8","radio":"radio-group__radio_emfj8","horizontal":"radio-group__horizontal_emfj8","tag":"radio-group__tag_emfj8","tagLabel":"radio-group__tagLabel_emfj8","label":"radio-group__label_emfj8","sub":"radio-group__sub_emfj8","errorMessage":"radio-group__errorMessage_emfj8","hint":"radio-group__hint_emfj8","hiddenInput":"radio-group__hiddenInput_emfj8"};
+const styles = {"component":"radio-group__component_mw9ie","error":"radio-group__error_mw9ie","radioList":"radio-group__radioList_mw9ie","vertical":"radio-group__vertical_mw9ie","radio":"radio-group__radio_mw9ie","horizontal":"radio-group__horizontal_mw9ie","tag":"radio-group__tag_mw9ie","tagLabel":"radio-group__tagLabel_mw9ie","label":"radio-group__label_mw9ie","sub":"radio-group__sub_mw9ie","errorMessage":"radio-group__errorMessage_mw9ie","hint":"radio-group__hint_mw9ie","hiddenInput":"radio-group__hiddenInput_mw9ie"};
 require('./index.css')
 
 const RadioGroup = forwardRef(({ children, className, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, }, ref) => {
     const [stateValue, setStateValue] = useState('');
+    useDidUpdateEffect(() => {
+        setStateValue(value);
+    }, [value]);
+    const isChecked = (childValue) => value !== null && (value || stateValue) === childValue;
+    const handleChange = (event, childValue) => {
+        setStateValue(childValue);
+        if (onChange) {
+            onChange(event, { name, value: childValue });
+        }
+    };
     const renderRadio = (child) => {
-        const { className: childClassName } = child.props;
-        const checked = value !== null && (value || stateValue) === child.props.value;
-        const handleChange = (event) => {
-            setStateValue(child.props.value);
-            if (onChange) {
-                onChange(event, { name, value: child.props.value });
-            }
-        };
+        const { className: childClassName, value: childValue } = child.props;
         return cloneElement(child, {
-            onChange: handleChange,
+            onChange: (event) => handleChange(event, childValue),
             disabled,
             ...child.props,
-            checked,
+            checked: isChecked(childValue),
             name,
             className: cn(childClassName, styles.radio),
         });
     };
     const renderTag = (child) => {
-        const checked = value !== null && (value || stateValue) === child.props.value;
-        const handleChange = (event) => {
-            setStateValue(child.props.value);
-            if (onChange) {
-                onChange(event, { name, value: child.props.value });
-            }
-        };
+        const childValue = child.props.value;
+        const checked = isChecked(childValue);
         const clone = cloneElement(child, {
-            onClick: handleChange,
+            onClick: (event) => handleChange(event, childValue),
             disabled,
             ...child.props,
             checked,
             name,
         });
-        return (
-        // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
+        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: (event) => handleChange(event, childValue), disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles.hiddenInput, value: child.props.value })));
     };
     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 },
@@ -57,13 +54,5 @@ const RadioGroup = forwardRef(({ children, className, direction = 'vertical', la
         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 };

package/modern/index.css

@@ -1,92 +1,79 @@
-/* hash: 1thhv */
+/* hash: 1xnam */
 :root {
+} /* deprecated */ :root {
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
     --gap-xl: 24px;
     --gap-xs-neg: -8px;
     --gap-xl-neg: -24px;
-}
-:root {
+} :root {
+} :root {
+} :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_emfj8 {
+} .radio-group__component_mw9ie {
     display: flex;
     flex-direction: column;
-}
-.radio-group__error_emfj8 {
+} .radio-group__error_mw9ie {
     padding-left: var(--gap-xs);
     border-left: 1px solid var(--radio-group-error-color);
-}
-.radio-group__radioList_emfj8 {
+} .radio-group__radioList_mw9ie {
     display: flex;
-}
-.radio-group__vertical_emfj8 .radio-group__radioList_emfj8 {
+} .radio-group__vertical_mw9ie .radio-group__radioList_mw9ie {
     flex-direction: column;
     align-items: flex-start;
-}
-.radio-group__vertical_emfj8 .radio-group__radio_emfj8 {
+} .radio-group__vertical_mw9ie .radio-group__radio_mw9ie {
     margin-bottom: var(--gap-m)
-}
-.radio-group__vertical_emfj8 .radio-group__radio_emfj8:last-child {
+} .radio-group__vertical_mw9ie .radio-group__radio_mw9ie:last-child {
         margin-bottom: 0;
-    }
-.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
+    } .radio-group__horizontal_mw9ie .radio-group__radioList_mw9ie {
     flex-wrap: wrap;
     margin-right: var(--gap-xl-neg);
     margin-bottom: var(--gap-xs-neg);
-}
-.radio-group__tag_emfj8.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
+} .radio-group__tag_mw9ie.radio-group__horizontal_mw9ie .radio-group__radioList_mw9ie {
     margin-right: var(--gap-xs-neg);
-}
-.radio-group__horizontal_emfj8 .radio-group__radio_emfj8 {
+} .radio-group__horizontal_mw9ie .radio-group__radio_mw9ie {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-}
-.radio-group__horizontal_emfj8 .radio-group__tagLabel_emfj8 {
+} .radio-group__horizontal_mw9ie .radio-group__tagLabel_mw9ie {
     margin-right: var(--gap-xs);
-}
-.radio-group__label_emfj8 {
+} .radio-group__label_mw9ie {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-bottom: var(--gap-s);
     color: var(--radio-group-label-color);
-}
-.radio-group__sub_emfj8 {
+} .radio-group__sub_mw9ie {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-}
-.radio-group__errorMessage_emfj8 {
+} .radio-group__errorMessage_mw9ie {
     color: var(--radio-group-error-color);
-}
-.radio-group__hint_emfj8 {
+} .radio-group__hint_mw9ie {
     color: var(--radio-group-hint-color);
-}
-.radio-group__hiddenInput_emfj8 {
+} .radio-group__hiddenInput_mw9ie {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0;
-}
-.radio-group__tagLabel_emfj8 {
+} .radio-group__tagLabel_mw9ie {
     position: relative;
 }

package/modern/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-radio-group",
-    "version": "3.0.3",
+    "version": "3.0.5",
     "description": "Radio group",
     "keywords": [],
     "license": "MIT",
@@ -18,6 +18,8 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "classnames": "^2.3.1"
+        "@alfalab/hooks": "^1.13.0",
+        "classnames": "^2.3.1",
+        "tslib": "^2.4.0"
     }
 }