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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/Component.js +21 -30
  2. package/cssm/Component.js +20 -29
  3. package/cssm/index.js +1 -0
  4. package/cssm/index.module.css +25 -38
  5. package/esm/Component.js +21 -30
  6. package/esm/index.css +26 -39
  7. package/esm/index.js +1 -0
  8. package/index.css +26 -39
  9. package/index.js +1 -0
  10. package/modern/Component.js +20 -31
  11. package/modern/index.css +26 -39
  12. package/modern/index.js +1 -0
  13. package/package.json +2 -1
package/Component.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  var React = require('react');
4
4
  var cn = require('classnames');
5
+ var hooks = require('@alfalab/hooks');
5
6
 
6
7
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
7
8
 
@@ -35,38 +36,36 @@ var __assign = function () {
35
36
  return __assign.apply(this, arguments);
36
37
  };
37
38
 
38
- 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"};
39
+ 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"};
39
40
  require('./index.css')
40
41
 
41
42
  var RadioGroup = React.forwardRef(function (_a, ref) {
42
43
  var _b;
43
44
  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;
44
45
  var _f = React.useState(''), stateValue = _f[0], setStateValue = _f[1];
46
+ hooks.useDidUpdateEffect(function () {
47
+ setStateValue(value);
48
+ }, [value]);
49
+ var isChecked = function (childValue) {
50
+ return value !== null && (value || stateValue) === childValue;
51
+ };
52
+ var handleChange = function (event, childValue) {
53
+ setStateValue(childValue);
54
+ if (onChange) {
55
+ onChange(event, { name: name, value: childValue });
56
+ }
57
+ };
45
58
  var renderRadio = function (child) {
46
- var childClassName = child.props.className;
47
- var checked = value !== null && (value || stateValue) === child.props.value;
48
- var handleChange = function (event) {
49
- setStateValue(child.props.value);
50
- if (onChange) {
51
- onChange(event, { name: name, value: child.props.value });
52
- }
53
- };
54
- return React.cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { checked: checked, name: name, className: cn__default.default(childClassName, styles.radio) }));
59
+ var _a = child.props, childClassName = _a.className, childValue = _a.value;
60
+ 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) }));
55
61
  };
56
62
  var renderTag = function (child) {
57
- var checked = value !== null && (value || stateValue) === child.props.value;
58
- var handleChange = function (event) {
59
- setStateValue(child.props.value);
60
- if (onChange) {
61
- onChange(event, { name: name, value: child.props.value });
62
- }
63
- };
64
- var clone = React.cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked, name: name }));
65
- return (
66
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
67
- React__default.default.createElement("label", { className: cn__default.default(styles.radio, styles.tagLabel) },
63
+ var childValue = child.props.value;
64
+ var checked = isChecked(childValue);
65
+ var clone = React.cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name }));
66
+ return (React__default.default.createElement("label", { className: cn__default.default(styles.radio, styles.tagLabel) },
68
67
  clone,
69
- 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 })));
68
+ 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 })));
70
69
  };
71
70
  var errorMessage = typeof error === 'boolean' ? '' : error;
72
71
  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 +79,5 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
80
79
  errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles.sub, styles.errorMessage), role: 'alert' }, errorMessage)),
81
80
  hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles.sub, styles.hint) }, hint))));
82
81
  });
83
- /**
84
- * Для отображения в сторибуке
85
- */
86
- RadioGroup.defaultProps = {
87
- direction: 'vertical',
88
- type: 'radio',
89
- disabled: false,
90
- };
91
82
 
92
83
  exports.RadioGroup = RadioGroup;
package/cssm/Component.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  var React = require('react');
4
4
  var cn = require('classnames');
5
+ var hooks = require('@alfalab/hooks');
5
6
  var styles = require('./index.module.css');
6
7
 
7
8
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -41,31 +42,29 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
41
42
  var _b;
42
43
  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;
43
44
  var _f = React.useState(''), stateValue = _f[0], setStateValue = _f[1];
45
+ hooks.useDidUpdateEffect(function () {
46
+ setStateValue(value);
47
+ }, [value]);
48
+ var isChecked = function (childValue) {
49
+ return value !== null && (value || stateValue) === childValue;
50
+ };
51
+ var handleChange = function (event, childValue) {
52
+ setStateValue(childValue);
53
+ if (onChange) {
54
+ onChange(event, { name: name, value: childValue });
55
+ }
56
+ };
44
57
  var renderRadio = function (child) {
45
- var childClassName = child.props.className;
46
- var checked = value !== null && (value || stateValue) === child.props.value;
47
- var handleChange = function (event) {
48
- setStateValue(child.props.value);
49
- if (onChange) {
50
- onChange(event, { name: name, value: child.props.value });
51
- }
52
- };
53
- 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) }));
58
+ var _a = child.props, childClassName = _a.className, childValue = _a.value;
59
+ 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) }));
54
60
  };
55
61
  var renderTag = function (child) {
56
- var checked = value !== null && (value || stateValue) === child.props.value;
57
- var handleChange = function (event) {
58
- setStateValue(child.props.value);
59
- if (onChange) {
60
- onChange(event, { name: name, value: child.props.value });
61
- }
62
- };
63
- var clone = React.cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked, name: name }));
64
- return (
65
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
66
- React__default.default.createElement("label", { className: cn__default.default(styles__default.default.radio, styles__default.default.tagLabel) },
62
+ var childValue = child.props.value;
63
+ var checked = isChecked(childValue);
64
+ var clone = React.cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name }));
65
+ return (React__default.default.createElement("label", { className: cn__default.default(styles__default.default.radio, styles__default.default.tagLabel) },
67
66
  clone,
68
- 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 })));
67
+ 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 })));
69
68
  };
70
69
  var errorMessage = typeof error === 'boolean' ? '' : error;
71
70
  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 +78,5 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
79
78
  errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.sub, styles__default.default.errorMessage), role: 'alert' }, errorMessage)),
80
79
  hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.sub, styles__default.default.hint) }, hint))));
81
80
  });
82
- /**
83
- * Для отображения в сторибуке
84
- */
85
- RadioGroup.defaultProps = {
86
- direction: 'vertical',
87
- type: 'radio',
88
- disabled: false,
89
- };
90
81
 
91
82
  exports.RadioGroup = RadioGroup;
package/cssm/index.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var Component = require('./Component.js');
4
4
  require('react');
5
5
  require('classnames');
6
+ require('@alfalab/hooks');
6
7
  require('./index.module.css');
7
8
 
8
9
 
package/cssm/index.module.css CHANGED
@@ -1,91 +1,78 @@
1
1
  :root {
2
+ } /* deprecated */ :root {
2
3
  --color-light-text-negative: #d91d0b;
3
4
  --color-light-text-primary: #0b1f35;
4
5
  --color-light-text-secondary: rgba(11, 31, 53, 0.7);
5
- }
6
- :root {
6
+ } :root {
7
+ } :root {
8
+ } :root {
7
9
 
8
10
  /* Hard */
9
11
 
10
12
  /* Up */
11
13
 
12
14
  /* Hard up */
13
- }
14
- :root {
15
+ } :root {
16
+ } :root {
15
17
  --gap-xs: 8px;
16
18
  --gap-s: 12px;
17
19
  --gap-m: 16px;
18
20
  --gap-xl: 24px;
19
21
  --gap-xs-neg: -8px;
20
22
  --gap-xl-neg: -24px;
21
- }
22
- :root {
23
+ } :root {
24
+ } :root {
25
+ } :root {
23
26
  --radio-group-error-color: var(--color-light-text-negative);
24
27
  --radio-group-hint-color: var(--color-light-text-secondary);
25
28
  --radio-group-label-color: var(--color-light-text-primary);
26
- }
27
- .component {
29
+ } .component {
28
30
  display: flex;
29
31
  flex-direction: column;
30
- }
31
- .error {
32
+ } .error {
32
33
  padding-left: var(--gap-xs);
33
34
  border-left: 1px solid var(--radio-group-error-color);
34
- }
35
- .radioList {
35
+ } .radioList {
36
36
  display: flex;
37
- }
38
- .vertical .radioList {
37
+ } .vertical .radioList {
39
38
  flex-direction: column;
40
39
  align-items: flex-start;
41
- }
42
- .vertical .radio {
40
+ } .vertical .radio {
43
41
  margin-bottom: var(--gap-m)
44
- }
45
- .vertical .radio:last-child {
42
+ } .vertical .radio:last-child {
46
43
  margin-bottom: 0;
47
- }
48
- .horizontal .radioList {
44
+ } .horizontal .radioList {
49
45
  flex-wrap: wrap;
50
46
  margin-right: var(--gap-xl-neg);
51
47
  margin-bottom: var(--gap-xs-neg);
52
- }
53
- .tag.horizontal .radioList {
48
+ } .tag.horizontal .radioList {
54
49
  margin-right: var(--gap-xs-neg);
55
- }
56
- .horizontal .radio {
50
+ } .horizontal .radio {
57
51
  margin-right: var(--gap-xl);
58
52
  margin-bottom: var(--gap-xs);
59
- }
60
- .horizontal .tagLabel {
53
+ } .horizontal .tagLabel {
61
54
  margin-right: var(--gap-xs);
62
- }
63
- .label {
55
+ } .label {
64
56
  font-size: 16px;
65
57
  line-height: 24px;
66
58
  font-weight: 400;
67
59
  margin-bottom: var(--gap-s);
68
60
  color: var(--radio-group-label-color);
69
- }
70
- .sub {
61
+ } .sub {
71
62
  font-size: 14px;
72
63
  line-height: 18px;
73
64
  font-weight: 400;
74
65
  margin-top: var(--gap-s);
75
- }
76
- .errorMessage {
66
+ } .errorMessage {
77
67
  color: var(--radio-group-error-color);
78
- }
79
- .hint {
68
+ } .hint {
80
69
  color: var(--radio-group-hint-color);
81
- }
82
- .hiddenInput {
70
+ } .hiddenInput {
83
71
  position: absolute;
84
72
  z-index: -1;
85
73
  top: 0;
86
74
  left: 0;
87
75
  opacity: 0;
88
- }
89
- .tagLabel {
76
+ } .tagLabel {
90
77
  position: relative;
91
78
  }
package/esm/Component.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
2
2
  import cn from 'classnames';
3
+ import { useDidUpdateEffect } from '@alfalab/hooks';
3
4
 
4
5
  /******************************************************************************
5
6
  Copyright (c) Microsoft Corporation.
@@ -28,38 +29,36 @@ var __assign = function () {
28
29
  return __assign.apply(this, arguments);
29
30
  };
30
31
 
31
- 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"};
32
+ 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"};
32
33
  require('./index.css')
33
34
 
34
35
  var RadioGroup = forwardRef(function (_a, ref) {
35
36
  var _b;
36
37
  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;
37
38
  var _f = useState(''), stateValue = _f[0], setStateValue = _f[1];
39
+ useDidUpdateEffect(function () {
40
+ setStateValue(value);
41
+ }, [value]);
42
+ var isChecked = function (childValue) {
43
+ return value !== null && (value || stateValue) === childValue;
44
+ };
45
+ var handleChange = function (event, childValue) {
46
+ setStateValue(childValue);
47
+ if (onChange) {
48
+ onChange(event, { name: name, value: childValue });
49
+ }
50
+ };
38
51
  var renderRadio = function (child) {
39
- var childClassName = child.props.className;
40
- var checked = value !== null && (value || stateValue) === child.props.value;
41
- var handleChange = function (event) {
42
- setStateValue(child.props.value);
43
- if (onChange) {
44
- onChange(event, { name: name, value: child.props.value });
45
- }
46
- };
47
- return cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { checked: checked, name: name, className: cn(childClassName, styles.radio) }));
52
+ var _a = child.props, childClassName = _a.className, childValue = _a.value;
53
+ 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) }));
48
54
  };
49
55
  var renderTag = function (child) {
50
- var checked = value !== null && (value || stateValue) === child.props.value;
51
- var handleChange = function (event) {
52
- setStateValue(child.props.value);
53
- if (onChange) {
54
- onChange(event, { name: name, value: child.props.value });
55
- }
56
- };
57
- var clone = cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked, name: name }));
58
- return (
59
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
60
- React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
56
+ var childValue = child.props.value;
57
+ var checked = isChecked(childValue);
58
+ var clone = cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name }));
59
+ return (React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
61
60
  clone,
62
- 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 })));
61
+ 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 })));
63
62
  };
64
63
  var errorMessage = typeof error === 'boolean' ? '' : error;
65
64
  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) {
73
72
  errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.errorMessage), role: 'alert' }, errorMessage)),
74
73
  hint && !errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.hint) }, hint))));
75
74
  });
76
- /**
77
- * Для отображения в сторибуке
78
- */
79
- RadioGroup.defaultProps = {
80
- direction: 'vertical',
81
- type: 'radio',
82
- disabled: false,
83
- };
84
75
 
85
76
  export { RadioGroup };
package/esm/index.css CHANGED
@@ -1,92 +1,79 @@
1
- /* hash: 1thhv */
1
+ /* hash: 1pabu */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-text-negative: #d91d0b;
4
5
  --color-light-text-primary: #0b1f35;
5
6
  --color-light-text-secondary: rgba(11, 31, 53, 0.7);
6
- }
7
- :root {
7
+ } :root {
8
+ } :root {
9
+ } :root {
8
10
 
9
11
  /* Hard */
10
12
 
11
13
  /* Up */
12
14
 
13
15
  /* Hard up */
14
- }
15
- :root {
16
+ } :root {
17
+ } :root {
16
18
  --gap-xs: 8px;
17
19
  --gap-s: 12px;
18
20
  --gap-m: 16px;
19
21
  --gap-xl: 24px;
20
22
  --gap-xs-neg: -8px;
21
23
  --gap-xl-neg: -24px;
22
- }
23
- :root {
24
+ } :root {
25
+ } :root {
26
+ } :root {
24
27
  --radio-group-error-color: var(--color-light-text-negative);
25
28
  --radio-group-hint-color: var(--color-light-text-secondary);
26
29
  --radio-group-label-color: var(--color-light-text-primary);
27
- }
28
- .radio-group__component_emfj8 {
30
+ } .radio-group__component_4qwa5 {
29
31
  display: flex;
30
32
  flex-direction: column;
31
- }
32
- .radio-group__error_emfj8 {
33
+ } .radio-group__error_4qwa5 {
33
34
  padding-left: var(--gap-xs);
34
35
  border-left: 1px solid var(--radio-group-error-color);
35
- }
36
- .radio-group__radioList_emfj8 {
36
+ } .radio-group__radioList_4qwa5 {
37
37
  display: flex;
38
- }
39
- .radio-group__vertical_emfj8 .radio-group__radioList_emfj8 {
38
+ } .radio-group__vertical_4qwa5 .radio-group__radioList_4qwa5 {
40
39
  flex-direction: column;
41
40
  align-items: flex-start;
42
- }
43
- .radio-group__vertical_emfj8 .radio-group__radio_emfj8 {
41
+ } .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5 {
44
42
  margin-bottom: var(--gap-m)
45
- }
46
- .radio-group__vertical_emfj8 .radio-group__radio_emfj8:last-child {
43
+ } .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5:last-child {
47
44
  margin-bottom: 0;
48
- }
49
- .radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
45
+ } .radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
50
46
  flex-wrap: wrap;
51
47
  margin-right: var(--gap-xl-neg);
52
48
  margin-bottom: var(--gap-xs-neg);
53
- }
54
- .radio-group__tag_emfj8.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
49
+ } .radio-group__tag_4qwa5.radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
55
50
  margin-right: var(--gap-xs-neg);
56
- }
57
- .radio-group__horizontal_emfj8 .radio-group__radio_emfj8 {
51
+ } .radio-group__horizontal_4qwa5 .radio-group__radio_4qwa5 {
58
52
  margin-right: var(--gap-xl);
59
53
  margin-bottom: var(--gap-xs);
60
- }
61
- .radio-group__horizontal_emfj8 .radio-group__tagLabel_emfj8 {
54
+ } .radio-group__horizontal_4qwa5 .radio-group__tagLabel_4qwa5 {
62
55
  margin-right: var(--gap-xs);
63
- }
64
- .radio-group__label_emfj8 {
56
+ } .radio-group__label_4qwa5 {
65
57
  font-size: 16px;
66
58
  line-height: 24px;
67
59
  font-weight: 400;
68
60
  margin-bottom: var(--gap-s);
69
61
  color: var(--radio-group-label-color);
70
- }
71
- .radio-group__sub_emfj8 {
62
+ } .radio-group__sub_4qwa5 {
72
63
  font-size: 14px;
73
64
  line-height: 18px;
74
65
  font-weight: 400;
75
66
  margin-top: var(--gap-s);
76
- }
77
- .radio-group__errorMessage_emfj8 {
67
+ } .radio-group__errorMessage_4qwa5 {
78
68
  color: var(--radio-group-error-color);
79
- }
80
- .radio-group__hint_emfj8 {
69
+ } .radio-group__hint_4qwa5 {
81
70
  color: var(--radio-group-hint-color);
82
- }
83
- .radio-group__hiddenInput_emfj8 {
71
+ } .radio-group__hiddenInput_4qwa5 {
84
72
  position: absolute;
85
73
  z-index: -1;
86
74
  top: 0;
87
75
  left: 0;
88
76
  opacity: 0;
89
- }
90
- .radio-group__tagLabel_emfj8 {
77
+ } .radio-group__tagLabel_4qwa5 {
91
78
  position: relative;
92
79
  }
package/esm/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export { RadioGroup } from './Component.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
+ import '@alfalab/hooks';
package/index.css CHANGED
@@ -1,92 +1,79 @@
1
- /* hash: 1thhv */
1
+ /* hash: 1pabu */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-text-negative: #d91d0b;
4
5
  --color-light-text-primary: #0b1f35;
5
6
  --color-light-text-secondary: rgba(11, 31, 53, 0.7);
6
- }
7
- :root {
7
+ } :root {
8
+ } :root {
9
+ } :root {
8
10
 
9
11
  /* Hard */
10
12
 
11
13
  /* Up */
12
14
 
13
15
  /* Hard up */
14
- }
15
- :root {
16
+ } :root {
17
+ } :root {
16
18
  --gap-xs: 8px;
17
19
  --gap-s: 12px;
18
20
  --gap-m: 16px;
19
21
  --gap-xl: 24px;
20
22
  --gap-xs-neg: -8px;
21
23
  --gap-xl-neg: -24px;
22
- }
23
- :root {
24
+ } :root {
25
+ } :root {
26
+ } :root {
24
27
  --radio-group-error-color: var(--color-light-text-negative);
25
28
  --radio-group-hint-color: var(--color-light-text-secondary);
26
29
  --radio-group-label-color: var(--color-light-text-primary);
27
- }
28
- .radio-group__component_emfj8 {
30
+ } .radio-group__component_4qwa5 {
29
31
  display: flex;
30
32
  flex-direction: column;
31
- }
32
- .radio-group__error_emfj8 {
33
+ } .radio-group__error_4qwa5 {
33
34
  padding-left: var(--gap-xs);
34
35
  border-left: 1px solid var(--radio-group-error-color);
35
- }
36
- .radio-group__radioList_emfj8 {
36
+ } .radio-group__radioList_4qwa5 {
37
37
  display: flex;
38
- }
39
- .radio-group__vertical_emfj8 .radio-group__radioList_emfj8 {
38
+ } .radio-group__vertical_4qwa5 .radio-group__radioList_4qwa5 {
40
39
  flex-direction: column;
41
40
  align-items: flex-start;
42
- }
43
- .radio-group__vertical_emfj8 .radio-group__radio_emfj8 {
41
+ } .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5 {
44
42
  margin-bottom: var(--gap-m)
45
- }
46
- .radio-group__vertical_emfj8 .radio-group__radio_emfj8:last-child {
43
+ } .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5:last-child {
47
44
  margin-bottom: 0;
48
- }
49
- .radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
45
+ } .radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
50
46
  flex-wrap: wrap;
51
47
  margin-right: var(--gap-xl-neg);
52
48
  margin-bottom: var(--gap-xs-neg);
53
- }
54
- .radio-group__tag_emfj8.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
49
+ } .radio-group__tag_4qwa5.radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
55
50
  margin-right: var(--gap-xs-neg);
56
- }
57
- .radio-group__horizontal_emfj8 .radio-group__radio_emfj8 {
51
+ } .radio-group__horizontal_4qwa5 .radio-group__radio_4qwa5 {
58
52
  margin-right: var(--gap-xl);
59
53
  margin-bottom: var(--gap-xs);
60
- }
61
- .radio-group__horizontal_emfj8 .radio-group__tagLabel_emfj8 {
54
+ } .radio-group__horizontal_4qwa5 .radio-group__tagLabel_4qwa5 {
62
55
  margin-right: var(--gap-xs);
63
- }
64
- .radio-group__label_emfj8 {
56
+ } .radio-group__label_4qwa5 {
65
57
  font-size: 16px;
66
58
  line-height: 24px;
67
59
  font-weight: 400;
68
60
  margin-bottom: var(--gap-s);
69
61
  color: var(--radio-group-label-color);
70
- }
71
- .radio-group__sub_emfj8 {
62
+ } .radio-group__sub_4qwa5 {
72
63
  font-size: 14px;
73
64
  line-height: 18px;
74
65
  font-weight: 400;
75
66
  margin-top: var(--gap-s);
76
- }
77
- .radio-group__errorMessage_emfj8 {
67
+ } .radio-group__errorMessage_4qwa5 {
78
68
  color: var(--radio-group-error-color);
79
- }
80
- .radio-group__hint_emfj8 {
69
+ } .radio-group__hint_4qwa5 {
81
70
  color: var(--radio-group-hint-color);
82
- }
83
- .radio-group__hiddenInput_emfj8 {
71
+ } .radio-group__hiddenInput_4qwa5 {
84
72
  position: absolute;
85
73
  z-index: -1;
86
74
  top: 0;
87
75
  left: 0;
88
76
  opacity: 0;
89
- }
90
- .radio-group__tagLabel_emfj8 {
77
+ } .radio-group__tagLabel_4qwa5 {
91
78
  position: relative;
92
79
  }
package/index.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var Component = require('./Component.js');
4
4
  require('react');
5
5
  require('classnames');
6
+ require('@alfalab/hooks');
6
7
 
7
8
 
8
9
 
package/modern/Component.js CHANGED
@@ -1,49 +1,46 @@
1
1
  import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
2
2
  import cn from 'classnames';
3
+ import { useDidUpdateEffect } from '@alfalab/hooks';
3
4
 
4
- 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"};
5
+ 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"};
5
6
  require('./index.css')
6
7
 
7
8
  const RadioGroup = forwardRef(({ children, className, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, }, ref) => {
8
9
  const [stateValue, setStateValue] = useState('');
10
+ useDidUpdateEffect(() => {
11
+ setStateValue(value);
12
+ }, [value]);
13
+ const isChecked = (childValue) => value !== null && (value || stateValue) === childValue;
14
+ const handleChange = (event, childValue) => {
15
+ setStateValue(childValue);
16
+ if (onChange) {
17
+ onChange(event, { name, value: childValue });
18
+ }
19
+ };
9
20
  const renderRadio = (child) => {
10
- const { className: childClassName } = child.props;
11
- const checked = value !== null && (value || stateValue) === child.props.value;
12
- const handleChange = (event) => {
13
- setStateValue(child.props.value);
14
- if (onChange) {
15
- onChange(event, { name, value: child.props.value });
16
- }
17
- };
21
+ const { className: childClassName, value: childValue } = child.props;
18
22
  return cloneElement(child, {
19
- onChange: handleChange,
23
+ onChange: (event) => handleChange(event, childValue),
20
24
  disabled,
21
25
  ...child.props,
22
- checked,
26
+ checked: isChecked(childValue),
23
27
  name,
24
28
  className: cn(childClassName, styles.radio),
25
29
  });
26
30
  };
27
31
  const renderTag = (child) => {
28
- const checked = value !== null && (value || stateValue) === child.props.value;
29
- const handleChange = (event) => {
30
- setStateValue(child.props.value);
31
- if (onChange) {
32
- onChange(event, { name, value: child.props.value });
33
- }
34
- };
32
+ const childValue = child.props.value;
33
+ const checked = isChecked(childValue);
35
34
  const clone = cloneElement(child, {
36
- onClick: handleChange,
35
+ onClick: (event) => handleChange(event, childValue),
37
36
  disabled,
38
37
  ...child.props,
39
38
  checked,
40
39
  name,
41
40
  });
42
- return (
43
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
44
- React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
41
+ return (React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
45
42
  clone,
46
- 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 })));
43
+ 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 })));
47
44
  };
48
45
  const errorMessage = typeof error === 'boolean' ? '' : error;
49
46
  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
57
54
  errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.errorMessage), role: 'alert' }, errorMessage)),
58
55
  hint && !errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.hint) }, hint))));
59
56
  });
60
- /**
61
- * Для отображения в сторибуке
62
- */
63
- RadioGroup.defaultProps = {
64
- direction: 'vertical',
65
- type: 'radio',
66
- disabled: false,
67
- };
68
57
 
69
58
  export { RadioGroup };
package/modern/index.css CHANGED
@@ -1,92 +1,79 @@
1
- /* hash: 1thhv */
1
+ /* hash: 1pabu */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-text-negative: #d91d0b;
4
5
  --color-light-text-primary: #0b1f35;
5
6
  --color-light-text-secondary: rgba(11, 31, 53, 0.7);
6
- }
7
- :root {
7
+ } :root {
8
+ } :root {
9
+ } :root {
8
10
 
9
11
  /* Hard */
10
12
 
11
13
  /* Up */
12
14
 
13
15
  /* Hard up */
14
- }
15
- :root {
16
+ } :root {
17
+ } :root {
16
18
  --gap-xs: 8px;
17
19
  --gap-s: 12px;
18
20
  --gap-m: 16px;
19
21
  --gap-xl: 24px;
20
22
  --gap-xs-neg: -8px;
21
23
  --gap-xl-neg: -24px;
22
- }
23
- :root {
24
+ } :root {
25
+ } :root {
26
+ } :root {
24
27
  --radio-group-error-color: var(--color-light-text-negative);
25
28
  --radio-group-hint-color: var(--color-light-text-secondary);
26
29
  --radio-group-label-color: var(--color-light-text-primary);
27
- }
28
- .radio-group__component_emfj8 {
30
+ } .radio-group__component_4qwa5 {
29
31
  display: flex;
30
32
  flex-direction: column;
31
- }
32
- .radio-group__error_emfj8 {
33
+ } .radio-group__error_4qwa5 {
33
34
  padding-left: var(--gap-xs);
34
35
  border-left: 1px solid var(--radio-group-error-color);
35
- }
36
- .radio-group__radioList_emfj8 {
36
+ } .radio-group__radioList_4qwa5 {
37
37
  display: flex;
38
- }
39
- .radio-group__vertical_emfj8 .radio-group__radioList_emfj8 {
38
+ } .radio-group__vertical_4qwa5 .radio-group__radioList_4qwa5 {
40
39
  flex-direction: column;
41
40
  align-items: flex-start;
42
- }
43
- .radio-group__vertical_emfj8 .radio-group__radio_emfj8 {
41
+ } .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5 {
44
42
  margin-bottom: var(--gap-m)
45
- }
46
- .radio-group__vertical_emfj8 .radio-group__radio_emfj8:last-child {
43
+ } .radio-group__vertical_4qwa5 .radio-group__radio_4qwa5:last-child {
47
44
  margin-bottom: 0;
48
- }
49
- .radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
45
+ } .radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
50
46
  flex-wrap: wrap;
51
47
  margin-right: var(--gap-xl-neg);
52
48
  margin-bottom: var(--gap-xs-neg);
53
- }
54
- .radio-group__tag_emfj8.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
49
+ } .radio-group__tag_4qwa5.radio-group__horizontal_4qwa5 .radio-group__radioList_4qwa5 {
55
50
  margin-right: var(--gap-xs-neg);
56
- }
57
- .radio-group__horizontal_emfj8 .radio-group__radio_emfj8 {
51
+ } .radio-group__horizontal_4qwa5 .radio-group__radio_4qwa5 {
58
52
  margin-right: var(--gap-xl);
59
53
  margin-bottom: var(--gap-xs);
60
- }
61
- .radio-group__horizontal_emfj8 .radio-group__tagLabel_emfj8 {
54
+ } .radio-group__horizontal_4qwa5 .radio-group__tagLabel_4qwa5 {
62
55
  margin-right: var(--gap-xs);
63
- }
64
- .radio-group__label_emfj8 {
56
+ } .radio-group__label_4qwa5 {
65
57
  font-size: 16px;
66
58
  line-height: 24px;
67
59
  font-weight: 400;
68
60
  margin-bottom: var(--gap-s);
69
61
  color: var(--radio-group-label-color);
70
- }
71
- .radio-group__sub_emfj8 {
62
+ } .radio-group__sub_4qwa5 {
72
63
  font-size: 14px;
73
64
  line-height: 18px;
74
65
  font-weight: 400;
75
66
  margin-top: var(--gap-s);
76
- }
77
- .radio-group__errorMessage_emfj8 {
67
+ } .radio-group__errorMessage_4qwa5 {
78
68
  color: var(--radio-group-error-color);
79
- }
80
- .radio-group__hint_emfj8 {
69
+ } .radio-group__hint_4qwa5 {
81
70
  color: var(--radio-group-hint-color);
82
- }
83
- .radio-group__hiddenInput_emfj8 {
71
+ } .radio-group__hiddenInput_4qwa5 {
84
72
  position: absolute;
85
73
  z-index: -1;
86
74
  top: 0;
87
75
  left: 0;
88
76
  opacity: 0;
89
- }
90
- .radio-group__tagLabel_emfj8 {
77
+ } .radio-group__tagLabel_4qwa5 {
91
78
  position: relative;
92
79
  }
package/modern/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export { RadioGroup } from './Component.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
+ import '@alfalab/hooks';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-radio-group",
3
- "version": "3.0.3",
3
+ "version": "3.0.4",
4
4
  "description": "Radio group",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -18,6 +18,7 @@
18
18
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
19
19
  },
20
20
  "dependencies": {
21
+ "@alfalab/hooks": "^1.13.0",
21
22
  "classnames": "^2.3.1"
22
23
  }
23
24
  }