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

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 (17) hide show
  1. package/Component.d.ts +9 -1
  2. package/Component.js +15 -19
  3. package/cssm/Component.d.ts +9 -1
  4. package/cssm/Component.js +15 -19
  5. package/cssm/index.js +0 -2
  6. package/cssm/index.module.css +1 -1
  7. package/esm/Component.d.ts +9 -1
  8. package/esm/Component.js +6 -8
  9. package/esm/index.css +18 -18
  10. package/index.css +18 -18
  11. package/index.js +0 -2
  12. package/modern/Component.d.ts +9 -1
  13. package/modern/Component.js +3 -3
  14. package/modern/index.css +18 -18
  15. package/modern/index.js +1 -1
  16. package/package.json +1 -1
  17. package/send-stats.js +1 -1
package/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode, ChangeEvent, MouseEvent } from "react";
3
+ import { ChangeEvent, FocusEvent, MouseEvent, ReactNode } from "react";
4
4
  type Direction = 'horizontal' | 'vertical';
5
5
  type RadioGroupType = 'radio' | 'tag';
6
6
  type RadioGroupProps = {
@@ -39,6 +39,14 @@ type RadioGroupProps = {
39
39
  value: string;
40
40
  name?: string;
41
41
  }) => void;
42
+ /**
43
+ * Обработчик блюра.
44
+ */
45
+ onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
46
+ /**
47
+ * Обработчик фокуса.
48
+ */
49
+ onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
42
50
  /**
43
51
  * Управление возможностью изменения состояния 'checked' дочерних компонентов Radio | Tag
44
52
  */
package/Component.js CHANGED
@@ -1,16 +1,14 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var cn = require('classnames');
7
5
 
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
6
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
9
7
 
10
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
8
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
9
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
12
10
 
13
- /*! *****************************************************************************
11
+ /******************************************************************************
14
12
  Copyright (c) Microsoft Corporation.
15
13
 
16
14
  Permission to use, copy, modify, and/or distribute this software for any
@@ -37,12 +35,12 @@ var __assign = function () {
37
35
  return __assign.apply(this, arguments);
38
36
  };
39
37
 
40
- var styles = {"component":"radio-group__component_1xqeu","error":"radio-group__error_1xqeu","radioList":"radio-group__radioList_1xqeu","vertical":"radio-group__vertical_1xqeu","radio":"radio-group__radio_1xqeu","horizontal":"radio-group__horizontal_1xqeu","tag":"radio-group__tag_1xqeu","tagLabel":"radio-group__tagLabel_1xqeu","label":"radio-group__label_1xqeu","sub":"radio-group__sub_1xqeu","errorMessage":"radio-group__errorMessage_1xqeu","hint":"radio-group__hint_1xqeu","hiddenInput":"radio-group__hiddenInput_1xqeu"};
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"};
41
39
  require('./index.css')
42
40
 
43
41
  var RadioGroup = React.forwardRef(function (_a, ref) {
44
42
  var _b;
45
- 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, _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
+ 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;
46
44
  var _f = React.useState(''), stateValue = _f[0], setStateValue = _f[1];
47
45
  var renderRadio = function (child) {
48
46
  var childClassName = child.props.className;
@@ -53,8 +51,7 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
53
51
  onChange(event, { name: name, value: child.props.value });
54
52
  }
55
53
  };
56
- return React.cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { checked: checked,
57
- name: name, className: cn__default['default'](childClassName, styles.radio) }));
54
+ return React.cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { checked: checked, name: name, className: cn__default.default(childClassName, styles.radio) }));
58
55
  };
59
56
  var renderTag = function (child) {
60
57
  var checked = value !== null && (value || stateValue) === child.props.value;
@@ -64,25 +61,24 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
64
61
  onChange(event, { name: name, value: child.props.value });
65
62
  }
66
63
  };
67
- var clone = React.cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked,
68
- name: name }));
64
+ var clone = React.cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked, name: name }));
69
65
  return (
70
66
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
71
- React__default['default'].createElement("label", { className: cn__default['default'](styles.radio, styles.tagLabel) },
67
+ React__default.default.createElement("label", { className: cn__default.default(styles.radio, styles.tagLabel) },
72
68
  clone,
73
- 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 })));
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 })));
74
70
  };
75
71
  var errorMessage = typeof error === 'boolean' ? '' : error;
76
- 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 },
77
- label ? React__default['default'].createElement("span", { className: styles.label }, label) : null,
78
- children ? (React__default['default'].createElement("div", { className: styles.radioList }, React.Children.map(children, function (child) {
72
+ 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 },
73
+ label ? React__default.default.createElement("span", { className: styles.label }, label) : null,
74
+ children ? (React__default.default.createElement("div", { className: styles.radioList, onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
79
75
  if (React.isValidElement(child)) {
80
76
  return type === 'radio' ? renderRadio(child) : renderTag(child);
81
77
  }
82
78
  return null;
83
79
  }))) : null,
84
- errorMessage && (React__default['default'].createElement("span", { className: cn__default['default'](styles.sub, styles.errorMessage), role: 'alert' }, errorMessage)),
85
- hint && !errorMessage && (React__default['default'].createElement("span", { className: cn__default['default'](styles.sub, styles.hint) }, hint))));
80
+ errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles.sub, styles.errorMessage), role: 'alert' }, errorMessage)),
81
+ hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles.sub, styles.hint) }, hint))));
86
82
  });
87
83
  /**
88
84
  * Для отображения в сторибуке
package/cssm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode, ChangeEvent, MouseEvent } from "react";
3
+ import { ChangeEvent, FocusEvent, MouseEvent, ReactNode } from "react";
4
4
  type Direction = 'horizontal' | 'vertical';
5
5
  type RadioGroupType = 'radio' | 'tag';
6
6
  type RadioGroupProps = {
@@ -39,6 +39,14 @@ type RadioGroupProps = {
39
39
  value: string;
40
40
  name?: string;
41
41
  }) => void;
42
+ /**
43
+ * Обработчик блюра.
44
+ */
45
+ onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
46
+ /**
47
+ * Обработчик фокуса.
48
+ */
49
+ onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
42
50
  /**
43
51
  * Управление возможностью изменения состояния 'checked' дочерних компонентов Radio | Tag
44
52
  */
package/cssm/Component.js CHANGED
@@ -1,18 +1,16 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var cn = require('classnames');
7
5
  var styles = require('./index.module.css');
8
6
 
9
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
7
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
10
8
 
11
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
13
- var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
9
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
10
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
11
+ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
14
12
 
15
- /*! *****************************************************************************
13
+ /******************************************************************************
16
14
  Copyright (c) Microsoft Corporation.
17
15
 
18
16
  Permission to use, copy, modify, and/or distribute this software for any
@@ -41,7 +39,7 @@ var __assign = function () {
41
39
 
42
40
  var RadioGroup = React.forwardRef(function (_a, ref) {
43
41
  var _b;
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, _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;
42
+ 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;
45
43
  var _f = React.useState(''), stateValue = _f[0], setStateValue = _f[1];
46
44
  var renderRadio = function (child) {
47
45
  var childClassName = child.props.className;
@@ -52,8 +50,7 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
52
50
  onChange(event, { name: name, value: child.props.value });
53
51
  }
54
52
  };
55
- return React.cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { checked: checked,
56
- name: name, className: cn__default['default'](childClassName, styles__default['default'].radio) }));
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) }));
57
54
  };
58
55
  var renderTag = function (child) {
59
56
  var checked = value !== null && (value || stateValue) === child.props.value;
@@ -63,25 +60,24 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
63
60
  onChange(event, { name: name, value: child.props.value });
64
61
  }
65
62
  };
66
- var clone = React.cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked,
67
- name: name }));
63
+ var clone = React.cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked, name: name }));
68
64
  return (
69
65
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
70
- React__default['default'].createElement("label", { className: cn__default['default'](styles__default['default'].radio, styles__default['default'].tagLabel) },
66
+ React__default.default.createElement("label", { className: cn__default.default(styles__default.default.radio, styles__default.default.tagLabel) },
71
67
  clone,
72
- 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 })));
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 })));
73
69
  };
74
70
  var errorMessage = typeof error === 'boolean' ? '' : error;
75
- 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 },
76
- label ? React__default['default'].createElement("span", { className: styles__default['default'].label }, label) : null,
77
- children ? (React__default['default'].createElement("div", { className: styles__default['default'].radioList }, React.Children.map(children, function (child) {
71
+ 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 },
72
+ label ? React__default.default.createElement("span", { className: styles__default.default.label }, label) : null,
73
+ children ? (React__default.default.createElement("div", { className: styles__default.default.radioList, onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
78
74
  if (React.isValidElement(child)) {
79
75
  return type === 'radio' ? renderRadio(child) : renderTag(child);
80
76
  }
81
77
  return null;
82
78
  }))) : null,
83
- errorMessage && (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].sub, styles__default['default'].errorMessage), role: 'alert' }, errorMessage)),
84
- hint && !errorMessage && (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].sub, styles__default['default'].hint) }, hint))));
79
+ errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.sub, styles__default.default.errorMessage), role: 'alert' }, errorMessage)),
80
+ hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.sub, styles__default.default.hint) }, hint))));
85
81
  });
86
82
  /**
87
83
  * Для отображения в сторибуке
package/cssm/index.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var Component = require('./Component.js');
6
4
  require('react');
7
5
  require('classnames');
package/cssm/index.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
  --color-light-text-negative: #d91d0b;
3
3
  --color-light-text-primary: #0b1f35;
4
- --color-light-text-secondary: #546272;
4
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
5
5
  }
6
6
  :root {
7
7
 
package/esm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode, ChangeEvent, MouseEvent } from "react";
3
+ import { ChangeEvent, FocusEvent, MouseEvent, ReactNode } from "react";
4
4
  type Direction = 'horizontal' | 'vertical';
5
5
  type RadioGroupType = 'radio' | 'tag';
6
6
  type RadioGroupProps = {
@@ -39,6 +39,14 @@ type RadioGroupProps = {
39
39
  value: string;
40
40
  name?: string;
41
41
  }) => void;
42
+ /**
43
+ * Обработчик блюра.
44
+ */
45
+ onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
46
+ /**
47
+ * Обработчик фокуса.
48
+ */
49
+ onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
42
50
  /**
43
51
  * Управление возможностью изменения состояния 'checked' дочерних компонентов Radio | Tag
44
52
  */
package/esm/Component.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
- /*! *****************************************************************************
4
+ /******************************************************************************
5
5
  Copyright (c) Microsoft Corporation.
6
6
 
7
7
  Permission to use, copy, modify, and/or distribute this software for any
@@ -28,12 +28,12 @@ var __assign = function () {
28
28
  return __assign.apply(this, arguments);
29
29
  };
30
30
 
31
- var styles = {"component":"radio-group__component_1xqeu","error":"radio-group__error_1xqeu","radioList":"radio-group__radioList_1xqeu","vertical":"radio-group__vertical_1xqeu","radio":"radio-group__radio_1xqeu","horizontal":"radio-group__horizontal_1xqeu","tag":"radio-group__tag_1xqeu","tagLabel":"radio-group__tagLabel_1xqeu","label":"radio-group__label_1xqeu","sub":"radio-group__sub_1xqeu","errorMessage":"radio-group__errorMessage_1xqeu","hint":"radio-group__hint_1xqeu","hiddenInput":"radio-group__hiddenInput_1xqeu"};
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
32
  require('./index.css')
33
33
 
34
34
  var RadioGroup = forwardRef(function (_a, ref) {
35
35
  var _b;
36
- 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, _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;
36
+ 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
37
  var _f = useState(''), stateValue = _f[0], setStateValue = _f[1];
38
38
  var renderRadio = function (child) {
39
39
  var childClassName = child.props.className;
@@ -44,8 +44,7 @@ var RadioGroup = forwardRef(function (_a, ref) {
44
44
  onChange(event, { name: name, value: child.props.value });
45
45
  }
46
46
  };
47
- return cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { checked: checked,
48
- name: name, className: cn(childClassName, styles.radio) }));
47
+ return cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { checked: checked, name: name, className: cn(childClassName, styles.radio) }));
49
48
  };
50
49
  var renderTag = function (child) {
51
50
  var checked = value !== null && (value || stateValue) === child.props.value;
@@ -55,8 +54,7 @@ var RadioGroup = forwardRef(function (_a, ref) {
55
54
  onChange(event, { name: name, value: child.props.value });
56
55
  }
57
56
  };
58
- var clone = cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked,
59
- name: name }));
57
+ var clone = cloneElement(child, __assign(__assign({ onClick: handleChange, disabled: disabled }, child.props), { checked: checked, name: name }));
60
58
  return (
61
59
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
62
60
  React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
@@ -66,7 +64,7 @@ var RadioGroup = forwardRef(function (_a, ref) {
66
64
  var errorMessage = typeof error === 'boolean' ? '' : error;
67
65
  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 },
68
66
  label ? React.createElement("span", { className: styles.label }, label) : null,
69
- children ? (React.createElement("div", { className: styles.radioList }, Children.map(children, function (child) {
67
+ children ? (React.createElement("div", { className: styles.radioList, onBlur: onBlur, onFocus: onFocus }, Children.map(children, function (child) {
70
68
  if (isValidElement(child)) {
71
69
  return type === 'radio' ? renderRadio(child) : renderTag(child);
72
70
  }
package/esm/index.css CHANGED
@@ -1,8 +1,8 @@
1
- /* hash: xgmjc */
1
+ /* hash: 1thhv */
2
2
  :root {
3
3
  --color-light-text-negative: #d91d0b;
4
4
  --color-light-text-primary: #0b1f35;
5
- --color-light-text-secondary: #546272;
5
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
6
6
  }
7
7
  :root {
8
8
 
@@ -25,68 +25,68 @@
25
25
  --radio-group-hint-color: var(--color-light-text-secondary);
26
26
  --radio-group-label-color: var(--color-light-text-primary);
27
27
  }
28
- .radio-group__component_1xqeu {
28
+ .radio-group__component_emfj8 {
29
29
  display: flex;
30
30
  flex-direction: column;
31
31
  }
32
- .radio-group__error_1xqeu {
32
+ .radio-group__error_emfj8 {
33
33
  padding-left: var(--gap-xs);
34
34
  border-left: 1px solid var(--radio-group-error-color);
35
35
  }
36
- .radio-group__radioList_1xqeu {
36
+ .radio-group__radioList_emfj8 {
37
37
  display: flex;
38
38
  }
39
- .radio-group__vertical_1xqeu .radio-group__radioList_1xqeu {
39
+ .radio-group__vertical_emfj8 .radio-group__radioList_emfj8 {
40
40
  flex-direction: column;
41
41
  align-items: flex-start;
42
42
  }
43
- .radio-group__vertical_1xqeu .radio-group__radio_1xqeu {
43
+ .radio-group__vertical_emfj8 .radio-group__radio_emfj8 {
44
44
  margin-bottom: var(--gap-m)
45
45
  }
46
- .radio-group__vertical_1xqeu .radio-group__radio_1xqeu:last-child {
46
+ .radio-group__vertical_emfj8 .radio-group__radio_emfj8:last-child {
47
47
  margin-bottom: 0;
48
48
  }
49
- .radio-group__horizontal_1xqeu .radio-group__radioList_1xqeu {
49
+ .radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
50
50
  flex-wrap: wrap;
51
51
  margin-right: var(--gap-xl-neg);
52
52
  margin-bottom: var(--gap-xs-neg);
53
53
  }
54
- .radio-group__tag_1xqeu.radio-group__horizontal_1xqeu .radio-group__radioList_1xqeu {
54
+ .radio-group__tag_emfj8.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
55
55
  margin-right: var(--gap-xs-neg);
56
56
  }
57
- .radio-group__horizontal_1xqeu .radio-group__radio_1xqeu {
57
+ .radio-group__horizontal_emfj8 .radio-group__radio_emfj8 {
58
58
  margin-right: var(--gap-xl);
59
59
  margin-bottom: var(--gap-xs);
60
60
  }
61
- .radio-group__horizontal_1xqeu .radio-group__tagLabel_1xqeu {
61
+ .radio-group__horizontal_emfj8 .radio-group__tagLabel_emfj8 {
62
62
  margin-right: var(--gap-xs);
63
63
  }
64
- .radio-group__label_1xqeu {
64
+ .radio-group__label_emfj8 {
65
65
  font-size: 16px;
66
66
  line-height: 24px;
67
67
  font-weight: 400;
68
68
  margin-bottom: var(--gap-s);
69
69
  color: var(--radio-group-label-color);
70
70
  }
71
- .radio-group__sub_1xqeu {
71
+ .radio-group__sub_emfj8 {
72
72
  font-size: 14px;
73
73
  line-height: 18px;
74
74
  font-weight: 400;
75
75
  margin-top: var(--gap-s);
76
76
  }
77
- .radio-group__errorMessage_1xqeu {
77
+ .radio-group__errorMessage_emfj8 {
78
78
  color: var(--radio-group-error-color);
79
79
  }
80
- .radio-group__hint_1xqeu {
80
+ .radio-group__hint_emfj8 {
81
81
  color: var(--radio-group-hint-color);
82
82
  }
83
- .radio-group__hiddenInput_1xqeu {
83
+ .radio-group__hiddenInput_emfj8 {
84
84
  position: absolute;
85
85
  z-index: -1;
86
86
  top: 0;
87
87
  left: 0;
88
88
  opacity: 0;
89
89
  }
90
- .radio-group__tagLabel_1xqeu {
90
+ .radio-group__tagLabel_emfj8 {
91
91
  position: relative;
92
92
  }
package/index.css CHANGED
@@ -1,8 +1,8 @@
1
- /* hash: xgmjc */
1
+ /* hash: 1thhv */
2
2
  :root {
3
3
  --color-light-text-negative: #d91d0b;
4
4
  --color-light-text-primary: #0b1f35;
5
- --color-light-text-secondary: #546272;
5
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
6
6
  }
7
7
  :root {
8
8
 
@@ -25,68 +25,68 @@
25
25
  --radio-group-hint-color: var(--color-light-text-secondary);
26
26
  --radio-group-label-color: var(--color-light-text-primary);
27
27
  }
28
- .radio-group__component_1xqeu {
28
+ .radio-group__component_emfj8 {
29
29
  display: flex;
30
30
  flex-direction: column;
31
31
  }
32
- .radio-group__error_1xqeu {
32
+ .radio-group__error_emfj8 {
33
33
  padding-left: var(--gap-xs);
34
34
  border-left: 1px solid var(--radio-group-error-color);
35
35
  }
36
- .radio-group__radioList_1xqeu {
36
+ .radio-group__radioList_emfj8 {
37
37
  display: flex;
38
38
  }
39
- .radio-group__vertical_1xqeu .radio-group__radioList_1xqeu {
39
+ .radio-group__vertical_emfj8 .radio-group__radioList_emfj8 {
40
40
  flex-direction: column;
41
41
  align-items: flex-start;
42
42
  }
43
- .radio-group__vertical_1xqeu .radio-group__radio_1xqeu {
43
+ .radio-group__vertical_emfj8 .radio-group__radio_emfj8 {
44
44
  margin-bottom: var(--gap-m)
45
45
  }
46
- .radio-group__vertical_1xqeu .radio-group__radio_1xqeu:last-child {
46
+ .radio-group__vertical_emfj8 .radio-group__radio_emfj8:last-child {
47
47
  margin-bottom: 0;
48
48
  }
49
- .radio-group__horizontal_1xqeu .radio-group__radioList_1xqeu {
49
+ .radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
50
50
  flex-wrap: wrap;
51
51
  margin-right: var(--gap-xl-neg);
52
52
  margin-bottom: var(--gap-xs-neg);
53
53
  }
54
- .radio-group__tag_1xqeu.radio-group__horizontal_1xqeu .radio-group__radioList_1xqeu {
54
+ .radio-group__tag_emfj8.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
55
55
  margin-right: var(--gap-xs-neg);
56
56
  }
57
- .radio-group__horizontal_1xqeu .radio-group__radio_1xqeu {
57
+ .radio-group__horizontal_emfj8 .radio-group__radio_emfj8 {
58
58
  margin-right: var(--gap-xl);
59
59
  margin-bottom: var(--gap-xs);
60
60
  }
61
- .radio-group__horizontal_1xqeu .radio-group__tagLabel_1xqeu {
61
+ .radio-group__horizontal_emfj8 .radio-group__tagLabel_emfj8 {
62
62
  margin-right: var(--gap-xs);
63
63
  }
64
- .radio-group__label_1xqeu {
64
+ .radio-group__label_emfj8 {
65
65
  font-size: 16px;
66
66
  line-height: 24px;
67
67
  font-weight: 400;
68
68
  margin-bottom: var(--gap-s);
69
69
  color: var(--radio-group-label-color);
70
70
  }
71
- .radio-group__sub_1xqeu {
71
+ .radio-group__sub_emfj8 {
72
72
  font-size: 14px;
73
73
  line-height: 18px;
74
74
  font-weight: 400;
75
75
  margin-top: var(--gap-s);
76
76
  }
77
- .radio-group__errorMessage_1xqeu {
77
+ .radio-group__errorMessage_emfj8 {
78
78
  color: var(--radio-group-error-color);
79
79
  }
80
- .radio-group__hint_1xqeu {
80
+ .radio-group__hint_emfj8 {
81
81
  color: var(--radio-group-hint-color);
82
82
  }
83
- .radio-group__hiddenInput_1xqeu {
83
+ .radio-group__hiddenInput_emfj8 {
84
84
  position: absolute;
85
85
  z-index: -1;
86
86
  top: 0;
87
87
  left: 0;
88
88
  opacity: 0;
89
89
  }
90
- .radio-group__tagLabel_1xqeu {
90
+ .radio-group__tagLabel_emfj8 {
91
91
  position: relative;
92
92
  }
package/index.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var Component = require('./Component.js');
6
4
  require('react');
7
5
  require('classnames');
package/modern/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode, ChangeEvent, MouseEvent } from "react";
3
+ import { ChangeEvent, FocusEvent, MouseEvent, ReactNode } from "react";
4
4
  type Direction = 'horizontal' | 'vertical';
5
5
  type RadioGroupType = 'radio' | 'tag';
6
6
  type RadioGroupProps = {
@@ -39,6 +39,14 @@ type RadioGroupProps = {
39
39
  value: string;
40
40
  name?: string;
41
41
  }) => void;
42
+ /**
43
+ * Обработчик блюра.
44
+ */
45
+ onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
46
+ /**
47
+ * Обработчик фокуса.
48
+ */
49
+ onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
42
50
  /**
43
51
  * Управление возможностью изменения состояния 'checked' дочерних компонентов Radio | Tag
44
52
  */
package/modern/Component.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
- var styles = {"component":"radio-group__component_1xqeu","error":"radio-group__error_1xqeu","radioList":"radio-group__radioList_1xqeu","vertical":"radio-group__vertical_1xqeu","radio":"radio-group__radio_1xqeu","horizontal":"radio-group__horizontal_1xqeu","tag":"radio-group__tag_1xqeu","tagLabel":"radio-group__tagLabel_1xqeu","label":"radio-group__label_1xqeu","sub":"radio-group__sub_1xqeu","errorMessage":"radio-group__errorMessage_1xqeu","hint":"radio-group__hint_1xqeu","hiddenInput":"radio-group__hiddenInput_1xqeu"};
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
5
  require('./index.css')
6
6
 
7
- const RadioGroup = forwardRef(({ children, className, direction = 'vertical', label, error, hint, onChange, type = 'radio', dataTestId, disabled = false, name, value, }, ref) => {
7
+ const RadioGroup = forwardRef(({ children, className, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, }, ref) => {
8
8
  const [stateValue, setStateValue] = useState('');
9
9
  const renderRadio = (child) => {
10
10
  const { className: childClassName } = child.props;
@@ -48,7 +48,7 @@ const RadioGroup = forwardRef(({ children, className, direction = 'vertical', la
48
48
  const errorMessage = typeof error === 'boolean' ? '' : error;
49
49
  return (React.createElement("div", { className: cn(styles.component, styles[type], styles[direction], { [styles.error]: error }, className), "data-test-id": dataTestId, ref: ref },
50
50
  label ? React.createElement("span", { className: styles.label }, label) : null,
51
- children ? (React.createElement("div", { className: styles.radioList }, Children.map(children, child => {
51
+ children ? (React.createElement("div", { className: styles.radioList, onBlur: onBlur, onFocus: onFocus }, Children.map(children, (child) => {
52
52
  if (isValidElement(child)) {
53
53
  return type === 'radio' ? renderRadio(child) : renderTag(child);
54
54
  }
package/modern/index.css CHANGED
@@ -1,8 +1,8 @@
1
- /* hash: xgmjc */
1
+ /* hash: 1thhv */
2
2
  :root {
3
3
  --color-light-text-negative: #d91d0b;
4
4
  --color-light-text-primary: #0b1f35;
5
- --color-light-text-secondary: #546272;
5
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
6
6
  }
7
7
  :root {
8
8
 
@@ -25,68 +25,68 @@
25
25
  --radio-group-hint-color: var(--color-light-text-secondary);
26
26
  --radio-group-label-color: var(--color-light-text-primary);
27
27
  }
28
- .radio-group__component_1xqeu {
28
+ .radio-group__component_emfj8 {
29
29
  display: flex;
30
30
  flex-direction: column;
31
31
  }
32
- .radio-group__error_1xqeu {
32
+ .radio-group__error_emfj8 {
33
33
  padding-left: var(--gap-xs);
34
34
  border-left: 1px solid var(--radio-group-error-color);
35
35
  }
36
- .radio-group__radioList_1xqeu {
36
+ .radio-group__radioList_emfj8 {
37
37
  display: flex;
38
38
  }
39
- .radio-group__vertical_1xqeu .radio-group__radioList_1xqeu {
39
+ .radio-group__vertical_emfj8 .radio-group__radioList_emfj8 {
40
40
  flex-direction: column;
41
41
  align-items: flex-start;
42
42
  }
43
- .radio-group__vertical_1xqeu .radio-group__radio_1xqeu {
43
+ .radio-group__vertical_emfj8 .radio-group__radio_emfj8 {
44
44
  margin-bottom: var(--gap-m)
45
45
  }
46
- .radio-group__vertical_1xqeu .radio-group__radio_1xqeu:last-child {
46
+ .radio-group__vertical_emfj8 .radio-group__radio_emfj8:last-child {
47
47
  margin-bottom: 0;
48
48
  }
49
- .radio-group__horizontal_1xqeu .radio-group__radioList_1xqeu {
49
+ .radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
50
50
  flex-wrap: wrap;
51
51
  margin-right: var(--gap-xl-neg);
52
52
  margin-bottom: var(--gap-xs-neg);
53
53
  }
54
- .radio-group__tag_1xqeu.radio-group__horizontal_1xqeu .radio-group__radioList_1xqeu {
54
+ .radio-group__tag_emfj8.radio-group__horizontal_emfj8 .radio-group__radioList_emfj8 {
55
55
  margin-right: var(--gap-xs-neg);
56
56
  }
57
- .radio-group__horizontal_1xqeu .radio-group__radio_1xqeu {
57
+ .radio-group__horizontal_emfj8 .radio-group__radio_emfj8 {
58
58
  margin-right: var(--gap-xl);
59
59
  margin-bottom: var(--gap-xs);
60
60
  }
61
- .radio-group__horizontal_1xqeu .radio-group__tagLabel_1xqeu {
61
+ .radio-group__horizontal_emfj8 .radio-group__tagLabel_emfj8 {
62
62
  margin-right: var(--gap-xs);
63
63
  }
64
- .radio-group__label_1xqeu {
64
+ .radio-group__label_emfj8 {
65
65
  font-size: 16px;
66
66
  line-height: 24px;
67
67
  font-weight: 400;
68
68
  margin-bottom: var(--gap-s);
69
69
  color: var(--radio-group-label-color);
70
70
  }
71
- .radio-group__sub_1xqeu {
71
+ .radio-group__sub_emfj8 {
72
72
  font-size: 14px;
73
73
  line-height: 18px;
74
74
  font-weight: 400;
75
75
  margin-top: var(--gap-s);
76
76
  }
77
- .radio-group__errorMessage_1xqeu {
77
+ .radio-group__errorMessage_emfj8 {
78
78
  color: var(--radio-group-error-color);
79
79
  }
80
- .radio-group__hint_1xqeu {
80
+ .radio-group__hint_emfj8 {
81
81
  color: var(--radio-group-hint-color);
82
82
  }
83
- .radio-group__hiddenInput_1xqeu {
83
+ .radio-group__hiddenInput_emfj8 {
84
84
  position: absolute;
85
85
  z-index: -1;
86
86
  top: 0;
87
87
  left: 0;
88
88
  opacity: 0;
89
89
  }
90
- .radio-group__tagLabel_1xqeu {
90
+ .radio-group__tagLabel_emfj8 {
91
91
  position: relative;
92
92
  }
package/modern/index.js CHANGED
@@ -1,3 +1,3 @@
1
+ export { RadioGroup } from './Component.js';
1
2
  import 'react';
2
3
  import 'classnames';
3
- export { RadioGroup } from './Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-radio-group",
3
- "version": "3.0.1",
3
+ "version": "3.0.3",
4
4
  "description": "Radio group",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/send-stats.js CHANGED
@@ -55,7 +55,7 @@ async function main() {
55
55
  };
56
56
 
57
57
  return new Promise((resolve, reject) => {
58
- const req = http.request(options, res => {
58
+ const req = http.request(options, (res) => {
59
59
  res.on('end', () => {
60
60
  resolve();
61
61
  });