@alfalab/core-components-switch 3.0.2 → 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 (16) hide show
  1. package/Component.d.ts +2 -2
  2. package/Component.js +8 -44
  3. package/cssm/Component.d.ts +2 -2
  4. package/cssm/Component.js +7 -43
  5. package/cssm/index.js +3 -0
  6. package/cssm/index.module.css +42 -73
  7. package/esm/Component.d.ts +2 -2
  8. package/esm/Component.js +5 -43
  9. package/esm/index.css +43 -74
  10. package/esm/index.js +1 -0
  11. package/index.css +43 -74
  12. package/index.js +3 -0
  13. package/modern/Component.d.ts +2 -2
  14. package/modern/Component.js +4 -4
  15. package/modern/index.css +43 -74
  16. package/package.json +3 -2
package/Component.d.ts CHANGED
@@ -42,7 +42,7 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
42
42
  /**
43
43
  * Обработчик переключения компонента
44
44
  */
45
- onChange?: (event?: ChangeEvent<HTMLInputElement>, payload?: {
45
+ onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
46
46
  checked: boolean;
47
47
  name: InputHTMLAttributes<HTMLInputElement>['name'];
48
48
  }) => void;
@@ -91,7 +91,7 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
91
91
  /**
92
92
  * Обработчик переключения компонента
93
93
  */
94
- onChange?: ((event?: ChangeEvent<HTMLInputElement>, payload?: {
94
+ onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
95
95
  checked: boolean;
96
96
  name: InputHTMLAttributes<HTMLInputElement>['name'];
97
97
  }) => void) | undefined;
package/Component.js CHANGED
@@ -1,5 +1,8 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib = require('tslib');
3
6
  var React = require('react');
4
7
  var mergeRefs = require('react-merge-refs');
5
8
  var cn = require('classnames');
@@ -11,58 +14,19 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
11
14
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
12
15
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
13
16
 
14
- /******************************************************************************
15
- Copyright (c) Microsoft Corporation.
16
-
17
- Permission to use, copy, modify, and/or distribute this software for any
18
- purpose with or without fee is hereby granted.
19
-
20
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
21
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
22
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
23
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
24
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
25
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
26
- PERFORMANCE OF THIS SOFTWARE.
27
- ***************************************************************************** */
28
- var __assign = function () {
29
- __assign = Object.assign || function __assign(t) {
30
- for (var s, i = 1, n = arguments.length; i < n; i++) {
31
- s = arguments[i];
32
- for (var p in s)
33
- if (Object.prototype.hasOwnProperty.call(s, p))
34
- t[p] = s[p];
35
- }
36
- return t;
37
- };
38
- return __assign.apply(this, arguments);
39
- };
40
- function __rest(s, e) {
41
- var t = {};
42
- for (var p in s)
43
- if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
44
- t[p] = s[p];
45
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
46
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
47
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
48
- t[p[i]] = s[p[i]];
49
- }
50
- return t;
51
- }
52
-
53
- var styles = {"component":"switch__component_15fs8","start":"switch__start_15fs8","center":"switch__center_15fs8","addons":"switch__addons_15fs8","block":"switch__block_15fs8","switch":"switch__switch_15fs8","content":"switch__content_15fs8","label":"switch__label_15fs8","hint":"switch__hint_15fs8","reversed":"switch__reversed_15fs8","checked":"switch__checked_15fs8","disabled":"switch__disabled_15fs8","inactive":"switch__inactive_15fs8","focused":"switch__focused_15fs8"};
17
+ var styles = {"component":"switch__component_8biv0","start":"switch__start_8biv0","center":"switch__center_8biv0","addons":"switch__addons_8biv0","block":"switch__block_8biv0","switch":"switch__switch_8biv0","content":"switch__content_8biv0","label":"switch__label_8biv0","hint":"switch__hint_8biv0","reversed":"switch__reversed_8biv0","checked":"switch__checked_8biv0","disabled":"switch__disabled_8biv0","inactive":"switch__inactive_8biv0","focused":"switch__focused_8biv0"};
54
18
  require('./index.css')
55
19
 
56
20
  var Switch = React.forwardRef(function (_a, ref) {
57
21
  var _b;
58
- var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = __rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
22
+ var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
59
23
  var labelRef = React.useRef(null);
60
24
  var focused = hooks.useFocus(labelRef, 'keyboard')[0];
61
- var handleChange = React.useCallback(function (e) {
25
+ var handleChange = function (e) {
62
26
  if (onChange) {
63
27
  onChange(e, { checked: e.target.checked, name: name });
64
28
  }
65
- }, [onChange, name]);
29
+ };
66
30
  return (
67
31
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
68
32
  React__default.default.createElement("label", { className: cn__default.default(styles.component, styles[align], className, (_b = {},
@@ -73,7 +37,7 @@ var Switch = React.forwardRef(function (_a, ref) {
73
37
  _b[styles.focused] = focused,
74
38
  _b[styles.block] = block,
75
39
  _b)), ref: mergeRefs__default.default([labelRef, ref]) },
76
- React__default.default.createElement("input", __assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
40
+ React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
77
41
  React__default.default.createElement("span", { className: styles.switch }),
78
42
  (label || hint) && (React__default.default.createElement("span", { className: styles.content },
79
43
  label && React__default.default.createElement("span", { className: styles.label }, label),
package/cssm/Component.d.ts CHANGED
@@ -42,7 +42,7 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
42
42
  /**
43
43
  * Обработчик переключения компонента
44
44
  */
45
- onChange?: (event?: ChangeEvent<HTMLInputElement>, payload?: {
45
+ onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
46
46
  checked: boolean;
47
47
  name: InputHTMLAttributes<HTMLInputElement>['name'];
48
48
  }) => void;
@@ -91,7 +91,7 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
91
91
  /**
92
92
  * Обработчик переключения компонента
93
93
  */
94
- onChange?: ((event?: ChangeEvent<HTMLInputElement>, payload?: {
94
+ onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
95
95
  checked: boolean;
96
96
  name: InputHTMLAttributes<HTMLInputElement>['name'];
97
97
  }) => void) | undefined;
package/cssm/Component.js CHANGED
@@ -1,5 +1,8 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib = require('tslib');
3
6
  var React = require('react');
4
7
  var mergeRefs = require('react-merge-refs');
5
8
  var cn = require('classnames');
@@ -13,55 +16,16 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
13
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
14
17
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
15
18
 
16
- /******************************************************************************
17
- Copyright (c) Microsoft Corporation.
18
-
19
- Permission to use, copy, modify, and/or distribute this software for any
20
- purpose with or without fee is hereby granted.
21
-
22
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
23
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
24
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
25
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
26
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
27
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
28
- PERFORMANCE OF THIS SOFTWARE.
29
- ***************************************************************************** */
30
- var __assign = function () {
31
- __assign = Object.assign || function __assign(t) {
32
- for (var s, i = 1, n = arguments.length; i < n; i++) {
33
- s = arguments[i];
34
- for (var p in s)
35
- if (Object.prototype.hasOwnProperty.call(s, p))
36
- t[p] = s[p];
37
- }
38
- return t;
39
- };
40
- return __assign.apply(this, arguments);
41
- };
42
- function __rest(s, e) {
43
- var t = {};
44
- for (var p in s)
45
- if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
46
- t[p] = s[p];
47
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
48
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
49
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
50
- t[p[i]] = s[p[i]];
51
- }
52
- return t;
53
- }
54
-
55
19
  var Switch = React.forwardRef(function (_a, ref) {
56
20
  var _b;
57
- var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = __rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
21
+ var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
58
22
  var labelRef = React.useRef(null);
59
23
  var focused = hooks.useFocus(labelRef, 'keyboard')[0];
60
- var handleChange = React.useCallback(function (e) {
24
+ var handleChange = function (e) {
61
25
  if (onChange) {
62
26
  onChange(e, { checked: e.target.checked, name: name });
63
27
  }
64
- }, [onChange, name]);
28
+ };
65
29
  return (
66
30
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
67
31
  React__default.default.createElement("label", { className: cn__default.default(styles__default.default.component, styles__default.default[align], className, (_b = {},
@@ -72,7 +36,7 @@ var Switch = React.forwardRef(function (_a, ref) {
72
36
  _b[styles__default.default.focused] = focused,
73
37
  _b[styles__default.default.block] = block,
74
38
  _b)), ref: mergeRefs__default.default([labelRef, ref]) },
75
- React__default.default.createElement("input", __assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
39
+ React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
76
40
  React__default.default.createElement("span", { className: styles__default.default.switch }),
77
41
  (label || hint) && (React__default.default.createElement("span", { className: styles__default.default.content },
78
42
  label && React__default.default.createElement("span", { className: styles__default.default.label }, label),
package/cssm/index.js CHANGED
@@ -1,6 +1,9 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var Component = require('./Component.js');
6
+ require('tslib');
4
7
  require('react');
5
8
  require('react-merge-refs');
6
9
  require('classnames');
package/cssm/index.module.css CHANGED
@@ -1,36 +1,35 @@
1
1
  :root {
2
- --color-light-border-link: #007aff;
3
- --color-light-border-underline: #b6bcc3;
2
+ } /* deprecated */ :root {
3
+ --color-light-border-link: #0072ef;
4
+ --color-light-border-underline: #c5c5c7;
4
5
  --color-light-graphic-accent: #ef3124;
5
6
  --color-light-graphic-primary-inverted: #fff;
6
- --color-light-graphic-quaternary: #dbdee1;
7
- --color-light-graphic-secondary: #6d7986;
8
- --color-light-text-primary: #0b1f35;
9
- --color-light-text-secondary: rgba(11, 31, 53, 0.7);
10
- }
11
- :root {
7
+ --color-light-graphic-quaternary: #dcdcdd;
8
+ --color-light-graphic-secondary: #86868a;
9
+ --color-light-text-primary: #0e0e0e;
10
+ --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
11
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ } :root {
13
+ } :root {
12
14
 
13
15
  /* Hard */
14
16
 
15
17
  /* Up */
16
18
 
17
19
  /* Hard up */
18
- }
19
- :root {
20
+ } :root {
21
+ --border-radius-xl: 16px;
22
+ --border-radius-circle: 50%;
23
+ } :root {
20
24
  --gap-3xs: 2px;
21
25
  --gap-2xs: 4px;
22
26
  --gap-s: 12px;
23
27
  --gap-m: 16px;
24
- }
25
- :root {
26
- --border-radius-xl: 16px;
27
- --border-radius-circle: 50%;
28
- }
29
- :root {
28
+ } :root {
29
+ } :root {
30
30
  --focus-color: var(--color-light-border-link);
31
31
  --disabled-cursor: not-allowed;
32
- }
33
- :root {
32
+ } :root {
34
33
  --switch-label-color: var(--color-light-text-primary);
35
34
  --switch-hint-color: var(--color-light-text-secondary);
36
35
  --switch-bg-color: var(--color-light-graphic-secondary);
@@ -47,8 +46,7 @@
47
46
 
48
47
  /* inactive */
49
48
  --switch-inactive-color: var(--color-light-border-underline);
50
- }
51
- .component {
49
+ } .component {
52
50
  display: inline-flex;
53
51
  align-items: flex-start;
54
52
  margin: 0;
@@ -56,26 +54,20 @@
56
54
  border: 0;
57
55
  cursor: pointer;
58
56
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
59
- }
60
- .component input {
57
+ } .component input {
61
58
  opacity: 0;
62
59
  position: absolute;
63
- }
64
- .start {
60
+ } .start {
65
61
  align-items: flex-start;
66
- }
67
- .center {
62
+ } .center {
68
63
  align-items: center;
69
- }
70
- .addons {
64
+ } .addons {
71
65
  margin-left: auto;
72
66
  padding-left: var(--gap-m);
73
67
  line-height: 24px;
74
- }
75
- .block {
68
+ } .block {
76
69
  width: 100%;
77
- }
78
- .switch {
70
+ } .switch {
79
71
  position: relative;
80
72
  border-radius: var(--border-radius-xl);
81
73
  width: 36px;
@@ -86,8 +78,7 @@
86
78
  border: 2px solid var(--switch-border-color);
87
79
  transition: background-color 0.2s ease, border-color 0.2s ease;
88
80
  box-sizing: border-box;
89
- }
90
- .switch:before {
81
+ } .switch:before {
91
82
  content: '';
92
83
  position: absolute;
93
84
  top: 0;
@@ -99,78 +90,56 @@
99
90
  background-color: var(--color-light-graphic-primary-inverted);
100
91
  box-sizing: border-box;
101
92
  transition: transform 0.2s ease;
102
- }
103
- .content {
93
+ } .content {
104
94
  margin-left: var(--gap-s);
105
95
  flex-grow: 1;
106
- }
107
- .label {
96
+ } .label {
108
97
  font-size: 16px;
109
98
  line-height: 24px;
110
99
  font-weight: 400;
111
100
  display: block;
112
101
  color: var(--switch-label-color);
113
- }
114
- .label:not(:only-child) {
102
+ } .label:not(:only-child) {
115
103
  margin-bottom: var(--gap-2xs);
116
- }
117
- .hint {
104
+ } .hint {
118
105
  font-size: 14px;
119
106
  line-height: 18px;
120
107
  font-weight: 400;
121
108
  display: block;
122
109
  color: var(--switch-hint-color);
123
- }
124
- /* Reversed state */
125
- .component.reversed {
110
+ } /* Reversed state */ .component.reversed {
126
111
  flex-direction: row-reverse;
127
- }
128
- .reversed .content {
112
+ } .reversed .content {
129
113
  margin-right: var(--gap-m);
130
114
  margin-left: 0;
131
- }
132
- .reversed .addons {
115
+ } .reversed .addons {
133
116
  margin-left: 0;
134
117
  padding-left: 0;
135
118
  margin-right: auto;
136
119
  padding-right: var(--gap-m);
137
- }
138
- /* Checked state */
139
- .checked .switch {
120
+ } /* Checked state */ .checked .switch {
140
121
  background-color: var(--switch-checked-bg-color);
141
122
  border-color: var(--switch-checked-border-color);
142
- }
143
- .checked .switch:before {
123
+ } .checked .switch:before {
144
124
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
145
125
  transform: translateX(16px);
146
- }
147
- /* Disabled state */
148
- .disabled {
126
+ } /* Disabled state */ .disabled {
149
127
  cursor: var(--disabled-cursor);
150
- }
151
- .disabled .switch {
128
+ } .disabled .switch {
152
129
  background-color: var(--switch-disabled-bg-color);
153
130
  border-color: var(--switch-disabled-border-color);
154
- }
155
- .disabled .label {
131
+ } .disabled .label {
156
132
  color: var(--switch-disabled-color);
157
- }
158
- .disabled .hint {
133
+ } .disabled .hint {
159
134
  color: var(--switch-disabled-color);
160
- }
161
- /* Inactive */
162
- .inactive {
135
+ } /* Inactive */ .inactive {
163
136
  cursor: var(--disabled-cursor);
164
- }
165
- .inactive .switch {
137
+ } .inactive .switch {
166
138
  background-color: var(--switch-disabled-bg-color);
167
139
  border-color: var(--switch-disabled-border-color)
168
- }
169
- .inactive .switch:before {
140
+ } .inactive .switch:before {
170
141
  background-color: var(--switch-inactive-color);
171
- }
172
- /* Focused state */
173
- .focused .switch {
142
+ } /* Focused state */ .focused .switch {
174
143
  outline: 2px solid var(--focus-color);
175
144
  outline-offset: 2px;
176
145
  }
package/esm/Component.d.ts CHANGED
@@ -42,7 +42,7 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
42
42
  /**
43
43
  * Обработчик переключения компонента
44
44
  */
45
- onChange?: (event?: ChangeEvent<HTMLInputElement>, payload?: {
45
+ onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
46
46
  checked: boolean;
47
47
  name: InputHTMLAttributes<HTMLInputElement>['name'];
48
48
  }) => void;
@@ -91,7 +91,7 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
91
91
  /**
92
92
  * Обработчик переключения компонента
93
93
  */
94
- onChange?: ((event?: ChangeEvent<HTMLInputElement>, payload?: {
94
+ onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
95
95
  checked: boolean;
96
96
  name: InputHTMLAttributes<HTMLInputElement>['name'];
97
97
  }) => void) | undefined;
package/esm/Component.js CHANGED
@@ -1,48 +1,10 @@
1
- import React, { forwardRef, useRef, useCallback } from 'react';
1
+ import { __rest, __assign } from 'tslib';
2
+ import React, { forwardRef, useRef } from 'react';
2
3
  import mergeRefs from 'react-merge-refs';
3
4
  import cn from 'classnames';
4
5
  import { useFocus } from '@alfalab/hooks';
5
6
 
6
- /******************************************************************************
7
- Copyright (c) Microsoft Corporation.
8
-
9
- Permission to use, copy, modify, and/or distribute this software for any
10
- purpose with or without fee is hereby granted.
11
-
12
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
13
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
14
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
15
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
16
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
17
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
18
- PERFORMANCE OF THIS SOFTWARE.
19
- ***************************************************************************** */
20
- var __assign = function () {
21
- __assign = Object.assign || function __assign(t) {
22
- for (var s, i = 1, n = arguments.length; i < n; i++) {
23
- s = arguments[i];
24
- for (var p in s)
25
- if (Object.prototype.hasOwnProperty.call(s, p))
26
- t[p] = s[p];
27
- }
28
- return t;
29
- };
30
- return __assign.apply(this, arguments);
31
- };
32
- function __rest(s, e) {
33
- var t = {};
34
- for (var p in s)
35
- if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
36
- t[p] = s[p];
37
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
38
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
39
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
40
- t[p[i]] = s[p[i]];
41
- }
42
- return t;
43
- }
44
-
45
- var styles = {"component":"switch__component_15fs8","start":"switch__start_15fs8","center":"switch__center_15fs8","addons":"switch__addons_15fs8","block":"switch__block_15fs8","switch":"switch__switch_15fs8","content":"switch__content_15fs8","label":"switch__label_15fs8","hint":"switch__hint_15fs8","reversed":"switch__reversed_15fs8","checked":"switch__checked_15fs8","disabled":"switch__disabled_15fs8","inactive":"switch__inactive_15fs8","focused":"switch__focused_15fs8"};
7
+ var styles = {"component":"switch__component_8biv0","start":"switch__start_8biv0","center":"switch__center_8biv0","addons":"switch__addons_8biv0","block":"switch__block_8biv0","switch":"switch__switch_8biv0","content":"switch__content_8biv0","label":"switch__label_8biv0","hint":"switch__hint_8biv0","reversed":"switch__reversed_8biv0","checked":"switch__checked_8biv0","disabled":"switch__disabled_8biv0","inactive":"switch__inactive_8biv0","focused":"switch__focused_8biv0"};
46
8
  require('./index.css')
47
9
 
48
10
  var Switch = forwardRef(function (_a, ref) {
@@ -50,11 +12,11 @@ var Switch = forwardRef(function (_a, ref) {
50
12
  var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = __rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
51
13
  var labelRef = useRef(null);
52
14
  var focused = useFocus(labelRef, 'keyboard')[0];
53
- var handleChange = useCallback(function (e) {
15
+ var handleChange = function (e) {
54
16
  if (onChange) {
55
17
  onChange(e, { checked: e.target.checked, name: name });
56
18
  }
57
- }, [onChange, name]);
19
+ };
58
20
  return (
59
21
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
60
22
  React.createElement("label", { className: cn(styles.component, styles[align], className, (_b = {},
package/esm/index.css CHANGED
@@ -1,37 +1,36 @@
1
- /* hash: 1vs60 */
1
+ /* hash: 1f5n3 */
2
2
  :root {
3
- --color-light-border-link: #007aff;
4
- --color-light-border-underline: #b6bcc3;
3
+ } /* deprecated */ :root {
4
+ --color-light-border-link: #0072ef;
5
+ --color-light-border-underline: #c5c5c7;
5
6
  --color-light-graphic-accent: #ef3124;
6
7
  --color-light-graphic-primary-inverted: #fff;
7
- --color-light-graphic-quaternary: #dbdee1;
8
- --color-light-graphic-secondary: #6d7986;
9
- --color-light-text-primary: #0b1f35;
10
- --color-light-text-secondary: rgba(11, 31, 53, 0.7);
11
- }
12
- :root {
8
+ --color-light-graphic-quaternary: #dcdcdd;
9
+ --color-light-graphic-secondary: #86868a;
10
+ --color-light-text-primary: #0e0e0e;
11
+ --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
13
+ } :root {
14
+ } :root {
13
15
 
14
16
  /* Hard */
15
17
 
16
18
  /* Up */
17
19
 
18
20
  /* Hard up */
19
- }
20
- :root {
21
+ } :root {
22
+ --border-radius-xl: 16px;
23
+ --border-radius-circle: 50%;
24
+ } :root {
21
25
  --gap-3xs: 2px;
22
26
  --gap-2xs: 4px;
23
27
  --gap-s: 12px;
24
28
  --gap-m: 16px;
25
- }
26
- :root {
27
- --border-radius-xl: 16px;
28
- --border-radius-circle: 50%;
29
- }
30
- :root {
29
+ } :root {
30
+ } :root {
31
31
  --focus-color: var(--color-light-border-link);
32
32
  --disabled-cursor: not-allowed;
33
- }
34
- :root {
33
+ } :root {
35
34
  --switch-label-color: var(--color-light-text-primary);
36
35
  --switch-hint-color: var(--color-light-text-secondary);
37
36
  --switch-bg-color: var(--color-light-graphic-secondary);
@@ -48,8 +47,7 @@
48
47
 
49
48
  /* inactive */
50
49
  --switch-inactive-color: var(--color-light-border-underline);
51
- }
52
- .switch__component_15fs8 {
50
+ } .switch__component_8biv0 {
53
51
  display: inline-flex;
54
52
  align-items: flex-start;
55
53
  margin: 0;
@@ -57,26 +55,20 @@
57
55
  border: 0;
58
56
  cursor: pointer;
59
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
60
- }
61
- .switch__component_15fs8 input {
58
+ } .switch__component_8biv0 input {
62
59
  opacity: 0;
63
60
  position: absolute;
64
- }
65
- .switch__start_15fs8 {
61
+ } .switch__start_8biv0 {
66
62
  align-items: flex-start;
67
- }
68
- .switch__center_15fs8 {
63
+ } .switch__center_8biv0 {
69
64
  align-items: center;
70
- }
71
- .switch__addons_15fs8 {
65
+ } .switch__addons_8biv0 {
72
66
  margin-left: auto;
73
67
  padding-left: var(--gap-m);
74
68
  line-height: 24px;
75
- }
76
- .switch__block_15fs8 {
69
+ } .switch__block_8biv0 {
77
70
  width: 100%;
78
- }
79
- .switch__switch_15fs8 {
71
+ } .switch__switch_8biv0 {
80
72
  position: relative;
81
73
  border-radius: var(--border-radius-xl);
82
74
  width: 36px;
@@ -87,8 +79,7 @@
87
79
  border: 2px solid var(--switch-border-color);
88
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
81
  box-sizing: border-box;
90
- }
91
- .switch__switch_15fs8:before {
82
+ } .switch__switch_8biv0:before {
92
83
  content: '';
93
84
  position: absolute;
94
85
  top: 0;
@@ -100,78 +91,56 @@
100
91
  background-color: var(--color-light-graphic-primary-inverted);
101
92
  box-sizing: border-box;
102
93
  transition: transform 0.2s ease;
103
- }
104
- .switch__content_15fs8 {
94
+ } .switch__content_8biv0 {
105
95
  margin-left: var(--gap-s);
106
96
  flex-grow: 1;
107
- }
108
- .switch__label_15fs8 {
97
+ } .switch__label_8biv0 {
109
98
  font-size: 16px;
110
99
  line-height: 24px;
111
100
  font-weight: 400;
112
101
  display: block;
113
102
  color: var(--switch-label-color);
114
- }
115
- .switch__label_15fs8:not(:only-child) {
103
+ } .switch__label_8biv0:not(:only-child) {
116
104
  margin-bottom: var(--gap-2xs);
117
- }
118
- .switch__hint_15fs8 {
105
+ } .switch__hint_8biv0 {
119
106
  font-size: 14px;
120
107
  line-height: 18px;
121
108
  font-weight: 400;
122
109
  display: block;
123
110
  color: var(--switch-hint-color);
124
- }
125
- /* Reversed state */
126
- .switch__component_15fs8.switch__reversed_15fs8 {
111
+ } /* Reversed state */ .switch__component_8biv0.switch__reversed_8biv0 {
127
112
  flex-direction: row-reverse;
128
- }
129
- .switch__reversed_15fs8 .switch__content_15fs8 {
113
+ } .switch__reversed_8biv0 .switch__content_8biv0 {
130
114
  margin-right: var(--gap-m);
131
115
  margin-left: 0;
132
- }
133
- .switch__reversed_15fs8 .switch__addons_15fs8 {
116
+ } .switch__reversed_8biv0 .switch__addons_8biv0 {
134
117
  margin-left: 0;
135
118
  padding-left: 0;
136
119
  margin-right: auto;
137
120
  padding-right: var(--gap-m);
138
- }
139
- /* Checked state */
140
- .switch__checked_15fs8 .switch__switch_15fs8 {
121
+ } /* Checked state */ .switch__checked_8biv0 .switch__switch_8biv0 {
141
122
  background-color: var(--switch-checked-bg-color);
142
123
  border-color: var(--switch-checked-border-color);
143
- }
144
- .switch__checked_15fs8 .switch__switch_15fs8:before {
124
+ } .switch__checked_8biv0 .switch__switch_8biv0:before {
145
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
126
  transform: translateX(16px);
147
- }
148
- /* Disabled state */
149
- .switch__disabled_15fs8 {
127
+ } /* Disabled state */ .switch__disabled_8biv0 {
150
128
  cursor: var(--disabled-cursor);
151
- }
152
- .switch__disabled_15fs8 .switch__switch_15fs8 {
129
+ } .switch__disabled_8biv0 .switch__switch_8biv0 {
153
130
  background-color: var(--switch-disabled-bg-color);
154
131
  border-color: var(--switch-disabled-border-color);
155
- }
156
- .switch__disabled_15fs8 .switch__label_15fs8 {
132
+ } .switch__disabled_8biv0 .switch__label_8biv0 {
157
133
  color: var(--switch-disabled-color);
158
- }
159
- .switch__disabled_15fs8 .switch__hint_15fs8 {
134
+ } .switch__disabled_8biv0 .switch__hint_8biv0 {
160
135
  color: var(--switch-disabled-color);
161
- }
162
- /* Inactive */
163
- .switch__inactive_15fs8 {
136
+ } /* Inactive */ .switch__inactive_8biv0 {
164
137
  cursor: var(--disabled-cursor);
165
- }
166
- .switch__inactive_15fs8 .switch__switch_15fs8 {
138
+ } .switch__inactive_8biv0 .switch__switch_8biv0 {
167
139
  background-color: var(--switch-disabled-bg-color);
168
140
  border-color: var(--switch-disabled-border-color)
169
- }
170
- .switch__inactive_15fs8 .switch__switch_15fs8:before {
141
+ } .switch__inactive_8biv0 .switch__switch_8biv0:before {
171
142
  background-color: var(--switch-inactive-color);
172
- }
173
- /* Focused state */
174
- .switch__focused_15fs8 .switch__switch_15fs8 {
143
+ } /* Focused state */ .switch__focused_8biv0 .switch__switch_8biv0 {
175
144
  outline: 2px solid var(--focus-color);
176
145
  outline-offset: 2px;
177
146
  }
package/esm/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { Switch } from './Component.js';
2
+ import 'tslib';
2
3
  import 'react';
3
4
  import 'react-merge-refs';
4
5
  import 'classnames';
package/index.css CHANGED
@@ -1,37 +1,36 @@
1
- /* hash: 1vs60 */
1
+ /* hash: 1f5n3 */
2
2
  :root {
3
- --color-light-border-link: #007aff;
4
- --color-light-border-underline: #b6bcc3;
3
+ } /* deprecated */ :root {
4
+ --color-light-border-link: #0072ef;
5
+ --color-light-border-underline: #c5c5c7;
5
6
  --color-light-graphic-accent: #ef3124;
6
7
  --color-light-graphic-primary-inverted: #fff;
7
- --color-light-graphic-quaternary: #dbdee1;
8
- --color-light-graphic-secondary: #6d7986;
9
- --color-light-text-primary: #0b1f35;
10
- --color-light-text-secondary: rgba(11, 31, 53, 0.7);
11
- }
12
- :root {
8
+ --color-light-graphic-quaternary: #dcdcdd;
9
+ --color-light-graphic-secondary: #86868a;
10
+ --color-light-text-primary: #0e0e0e;
11
+ --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
13
+ } :root {
14
+ } :root {
13
15
 
14
16
  /* Hard */
15
17
 
16
18
  /* Up */
17
19
 
18
20
  /* Hard up */
19
- }
20
- :root {
21
+ } :root {
22
+ --border-radius-xl: 16px;
23
+ --border-radius-circle: 50%;
24
+ } :root {
21
25
  --gap-3xs: 2px;
22
26
  --gap-2xs: 4px;
23
27
  --gap-s: 12px;
24
28
  --gap-m: 16px;
25
- }
26
- :root {
27
- --border-radius-xl: 16px;
28
- --border-radius-circle: 50%;
29
- }
30
- :root {
29
+ } :root {
30
+ } :root {
31
31
  --focus-color: var(--color-light-border-link);
32
32
  --disabled-cursor: not-allowed;
33
- }
34
- :root {
33
+ } :root {
35
34
  --switch-label-color: var(--color-light-text-primary);
36
35
  --switch-hint-color: var(--color-light-text-secondary);
37
36
  --switch-bg-color: var(--color-light-graphic-secondary);
@@ -48,8 +47,7 @@
48
47
 
49
48
  /* inactive */
50
49
  --switch-inactive-color: var(--color-light-border-underline);
51
- }
52
- .switch__component_15fs8 {
50
+ } .switch__component_8biv0 {
53
51
  display: inline-flex;
54
52
  align-items: flex-start;
55
53
  margin: 0;
@@ -57,26 +55,20 @@
57
55
  border: 0;
58
56
  cursor: pointer;
59
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
60
- }
61
- .switch__component_15fs8 input {
58
+ } .switch__component_8biv0 input {
62
59
  opacity: 0;
63
60
  position: absolute;
64
- }
65
- .switch__start_15fs8 {
61
+ } .switch__start_8biv0 {
66
62
  align-items: flex-start;
67
- }
68
- .switch__center_15fs8 {
63
+ } .switch__center_8biv0 {
69
64
  align-items: center;
70
- }
71
- .switch__addons_15fs8 {
65
+ } .switch__addons_8biv0 {
72
66
  margin-left: auto;
73
67
  padding-left: var(--gap-m);
74
68
  line-height: 24px;
75
- }
76
- .switch__block_15fs8 {
69
+ } .switch__block_8biv0 {
77
70
  width: 100%;
78
- }
79
- .switch__switch_15fs8 {
71
+ } .switch__switch_8biv0 {
80
72
  position: relative;
81
73
  border-radius: var(--border-radius-xl);
82
74
  width: 36px;
@@ -87,8 +79,7 @@
87
79
  border: 2px solid var(--switch-border-color);
88
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
81
  box-sizing: border-box;
90
- }
91
- .switch__switch_15fs8:before {
82
+ } .switch__switch_8biv0:before {
92
83
  content: '';
93
84
  position: absolute;
94
85
  top: 0;
@@ -100,78 +91,56 @@
100
91
  background-color: var(--color-light-graphic-primary-inverted);
101
92
  box-sizing: border-box;
102
93
  transition: transform 0.2s ease;
103
- }
104
- .switch__content_15fs8 {
94
+ } .switch__content_8biv0 {
105
95
  margin-left: var(--gap-s);
106
96
  flex-grow: 1;
107
- }
108
- .switch__label_15fs8 {
97
+ } .switch__label_8biv0 {
109
98
  font-size: 16px;
110
99
  line-height: 24px;
111
100
  font-weight: 400;
112
101
  display: block;
113
102
  color: var(--switch-label-color);
114
- }
115
- .switch__label_15fs8:not(:only-child) {
103
+ } .switch__label_8biv0:not(:only-child) {
116
104
  margin-bottom: var(--gap-2xs);
117
- }
118
- .switch__hint_15fs8 {
105
+ } .switch__hint_8biv0 {
119
106
  font-size: 14px;
120
107
  line-height: 18px;
121
108
  font-weight: 400;
122
109
  display: block;
123
110
  color: var(--switch-hint-color);
124
- }
125
- /* Reversed state */
126
- .switch__component_15fs8.switch__reversed_15fs8 {
111
+ } /* Reversed state */ .switch__component_8biv0.switch__reversed_8biv0 {
127
112
  flex-direction: row-reverse;
128
- }
129
- .switch__reversed_15fs8 .switch__content_15fs8 {
113
+ } .switch__reversed_8biv0 .switch__content_8biv0 {
130
114
  margin-right: var(--gap-m);
131
115
  margin-left: 0;
132
- }
133
- .switch__reversed_15fs8 .switch__addons_15fs8 {
116
+ } .switch__reversed_8biv0 .switch__addons_8biv0 {
134
117
  margin-left: 0;
135
118
  padding-left: 0;
136
119
  margin-right: auto;
137
120
  padding-right: var(--gap-m);
138
- }
139
- /* Checked state */
140
- .switch__checked_15fs8 .switch__switch_15fs8 {
121
+ } /* Checked state */ .switch__checked_8biv0 .switch__switch_8biv0 {
141
122
  background-color: var(--switch-checked-bg-color);
142
123
  border-color: var(--switch-checked-border-color);
143
- }
144
- .switch__checked_15fs8 .switch__switch_15fs8:before {
124
+ } .switch__checked_8biv0 .switch__switch_8biv0:before {
145
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
126
  transform: translateX(16px);
147
- }
148
- /* Disabled state */
149
- .switch__disabled_15fs8 {
127
+ } /* Disabled state */ .switch__disabled_8biv0 {
150
128
  cursor: var(--disabled-cursor);
151
- }
152
- .switch__disabled_15fs8 .switch__switch_15fs8 {
129
+ } .switch__disabled_8biv0 .switch__switch_8biv0 {
153
130
  background-color: var(--switch-disabled-bg-color);
154
131
  border-color: var(--switch-disabled-border-color);
155
- }
156
- .switch__disabled_15fs8 .switch__label_15fs8 {
132
+ } .switch__disabled_8biv0 .switch__label_8biv0 {
157
133
  color: var(--switch-disabled-color);
158
- }
159
- .switch__disabled_15fs8 .switch__hint_15fs8 {
134
+ } .switch__disabled_8biv0 .switch__hint_8biv0 {
160
135
  color: var(--switch-disabled-color);
161
- }
162
- /* Inactive */
163
- .switch__inactive_15fs8 {
136
+ } /* Inactive */ .switch__inactive_8biv0 {
164
137
  cursor: var(--disabled-cursor);
165
- }
166
- .switch__inactive_15fs8 .switch__switch_15fs8 {
138
+ } .switch__inactive_8biv0 .switch__switch_8biv0 {
167
139
  background-color: var(--switch-disabled-bg-color);
168
140
  border-color: var(--switch-disabled-border-color)
169
- }
170
- .switch__inactive_15fs8 .switch__switch_15fs8:before {
141
+ } .switch__inactive_8biv0 .switch__switch_8biv0:before {
171
142
  background-color: var(--switch-inactive-color);
172
- }
173
- /* Focused state */
174
- .switch__focused_15fs8 .switch__switch_15fs8 {
143
+ } /* Focused state */ .switch__focused_8biv0 .switch__switch_8biv0 {
175
144
  outline: 2px solid var(--focus-color);
176
145
  outline-offset: 2px;
177
146
  }
package/index.js CHANGED
@@ -1,6 +1,9 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var Component = require('./Component.js');
6
+ require('tslib');
4
7
  require('react');
5
8
  require('react-merge-refs');
6
9
  require('classnames');
package/modern/Component.d.ts CHANGED
@@ -42,7 +42,7 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
42
42
  /**
43
43
  * Обработчик переключения компонента
44
44
  */
45
- onChange?: (event?: ChangeEvent<HTMLInputElement>, payload?: {
45
+ onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
46
46
  checked: boolean;
47
47
  name: InputHTMLAttributes<HTMLInputElement>['name'];
48
48
  }) => void;
@@ -91,7 +91,7 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
91
91
  /**
92
92
  * Обработчик переключения компонента
93
93
  */
94
- onChange?: ((event?: ChangeEvent<HTMLInputElement>, payload?: {
94
+ onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
95
95
  checked: boolean;
96
96
  name: InputHTMLAttributes<HTMLInputElement>['name'];
97
97
  }) => void) | undefined;
package/modern/Component.js CHANGED
@@ -1,19 +1,19 @@
1
- import React, { forwardRef, useRef, useCallback } from 'react';
1
+ import React, { forwardRef, useRef } from 'react';
2
2
  import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
4
  import { useFocus } from '@alfalab/hooks';
5
5
 
6
- const styles = {"component":"switch__component_15fs8","start":"switch__start_15fs8","center":"switch__center_15fs8","addons":"switch__addons_15fs8","block":"switch__block_15fs8","switch":"switch__switch_15fs8","content":"switch__content_15fs8","label":"switch__label_15fs8","hint":"switch__hint_15fs8","reversed":"switch__reversed_15fs8","checked":"switch__checked_15fs8","disabled":"switch__disabled_15fs8","inactive":"switch__inactive_15fs8","focused":"switch__focused_15fs8"};
6
+ const styles = {"component":"switch__component_8biv0","start":"switch__start_8biv0","center":"switch__center_8biv0","addons":"switch__addons_8biv0","block":"switch__block_8biv0","switch":"switch__switch_8biv0","content":"switch__content_8biv0","label":"switch__label_8biv0","hint":"switch__hint_8biv0","reversed":"switch__reversed_8biv0","checked":"switch__checked_8biv0","disabled":"switch__disabled_8biv0","inactive":"switch__inactive_8biv0","focused":"switch__focused_8biv0"};
7
7
  require('./index.css')
8
8
 
9
9
  const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
10
10
  const labelRef = useRef(null);
11
11
  const [focused] = useFocus(labelRef, 'keyboard');
12
- const handleChange = useCallback((e) => {
12
+ const handleChange = (e) => {
13
13
  if (onChange) {
14
14
  onChange(e, { checked: e.target.checked, name });
15
15
  }
16
- }, [onChange, name]);
16
+ };
17
17
  return (
18
18
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
19
19
  React.createElement("label", { className: cn(styles.component, styles[align], className, {
package/modern/index.css CHANGED
@@ -1,37 +1,36 @@
1
- /* hash: 1vs60 */
1
+ /* hash: 1f5n3 */
2
2
  :root {
3
- --color-light-border-link: #007aff;
4
- --color-light-border-underline: #b6bcc3;
3
+ } /* deprecated */ :root {
4
+ --color-light-border-link: #0072ef;
5
+ --color-light-border-underline: #c5c5c7;
5
6
  --color-light-graphic-accent: #ef3124;
6
7
  --color-light-graphic-primary-inverted: #fff;
7
- --color-light-graphic-quaternary: #dbdee1;
8
- --color-light-graphic-secondary: #6d7986;
9
- --color-light-text-primary: #0b1f35;
10
- --color-light-text-secondary: rgba(11, 31, 53, 0.7);
11
- }
12
- :root {
8
+ --color-light-graphic-quaternary: #dcdcdd;
9
+ --color-light-graphic-secondary: #86868a;
10
+ --color-light-text-primary: #0e0e0e;
11
+ --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
13
+ } :root {
14
+ } :root {
13
15
 
14
16
  /* Hard */
15
17
 
16
18
  /* Up */
17
19
 
18
20
  /* Hard up */
19
- }
20
- :root {
21
+ } :root {
22
+ --border-radius-xl: 16px;
23
+ --border-radius-circle: 50%;
24
+ } :root {
21
25
  --gap-3xs: 2px;
22
26
  --gap-2xs: 4px;
23
27
  --gap-s: 12px;
24
28
  --gap-m: 16px;
25
- }
26
- :root {
27
- --border-radius-xl: 16px;
28
- --border-radius-circle: 50%;
29
- }
30
- :root {
29
+ } :root {
30
+ } :root {
31
31
  --focus-color: var(--color-light-border-link);
32
32
  --disabled-cursor: not-allowed;
33
- }
34
- :root {
33
+ } :root {
35
34
  --switch-label-color: var(--color-light-text-primary);
36
35
  --switch-hint-color: var(--color-light-text-secondary);
37
36
  --switch-bg-color: var(--color-light-graphic-secondary);
@@ -48,8 +47,7 @@
48
47
 
49
48
  /* inactive */
50
49
  --switch-inactive-color: var(--color-light-border-underline);
51
- }
52
- .switch__component_15fs8 {
50
+ } .switch__component_8biv0 {
53
51
  display: inline-flex;
54
52
  align-items: flex-start;
55
53
  margin: 0;
@@ -57,26 +55,20 @@
57
55
  border: 0;
58
56
  cursor: pointer;
59
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
60
- }
61
- .switch__component_15fs8 input {
58
+ } .switch__component_8biv0 input {
62
59
  opacity: 0;
63
60
  position: absolute;
64
- }
65
- .switch__start_15fs8 {
61
+ } .switch__start_8biv0 {
66
62
  align-items: flex-start;
67
- }
68
- .switch__center_15fs8 {
63
+ } .switch__center_8biv0 {
69
64
  align-items: center;
70
- }
71
- .switch__addons_15fs8 {
65
+ } .switch__addons_8biv0 {
72
66
  margin-left: auto;
73
67
  padding-left: var(--gap-m);
74
68
  line-height: 24px;
75
- }
76
- .switch__block_15fs8 {
69
+ } .switch__block_8biv0 {
77
70
  width: 100%;
78
- }
79
- .switch__switch_15fs8 {
71
+ } .switch__switch_8biv0 {
80
72
  position: relative;
81
73
  border-radius: var(--border-radius-xl);
82
74
  width: 36px;
@@ -87,8 +79,7 @@
87
79
  border: 2px solid var(--switch-border-color);
88
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
81
  box-sizing: border-box;
90
- }
91
- .switch__switch_15fs8:before {
82
+ } .switch__switch_8biv0:before {
92
83
  content: '';
93
84
  position: absolute;
94
85
  top: 0;
@@ -100,78 +91,56 @@
100
91
  background-color: var(--color-light-graphic-primary-inverted);
101
92
  box-sizing: border-box;
102
93
  transition: transform 0.2s ease;
103
- }
104
- .switch__content_15fs8 {
94
+ } .switch__content_8biv0 {
105
95
  margin-left: var(--gap-s);
106
96
  flex-grow: 1;
107
- }
108
- .switch__label_15fs8 {
97
+ } .switch__label_8biv0 {
109
98
  font-size: 16px;
110
99
  line-height: 24px;
111
100
  font-weight: 400;
112
101
  display: block;
113
102
  color: var(--switch-label-color);
114
- }
115
- .switch__label_15fs8:not(:only-child) {
103
+ } .switch__label_8biv0:not(:only-child) {
116
104
  margin-bottom: var(--gap-2xs);
117
- }
118
- .switch__hint_15fs8 {
105
+ } .switch__hint_8biv0 {
119
106
  font-size: 14px;
120
107
  line-height: 18px;
121
108
  font-weight: 400;
122
109
  display: block;
123
110
  color: var(--switch-hint-color);
124
- }
125
- /* Reversed state */
126
- .switch__component_15fs8.switch__reversed_15fs8 {
111
+ } /* Reversed state */ .switch__component_8biv0.switch__reversed_8biv0 {
127
112
  flex-direction: row-reverse;
128
- }
129
- .switch__reversed_15fs8 .switch__content_15fs8 {
113
+ } .switch__reversed_8biv0 .switch__content_8biv0 {
130
114
  margin-right: var(--gap-m);
131
115
  margin-left: 0;
132
- }
133
- .switch__reversed_15fs8 .switch__addons_15fs8 {
116
+ } .switch__reversed_8biv0 .switch__addons_8biv0 {
134
117
  margin-left: 0;
135
118
  padding-left: 0;
136
119
  margin-right: auto;
137
120
  padding-right: var(--gap-m);
138
- }
139
- /* Checked state */
140
- .switch__checked_15fs8 .switch__switch_15fs8 {
121
+ } /* Checked state */ .switch__checked_8biv0 .switch__switch_8biv0 {
141
122
  background-color: var(--switch-checked-bg-color);
142
123
  border-color: var(--switch-checked-border-color);
143
- }
144
- .switch__checked_15fs8 .switch__switch_15fs8:before {
124
+ } .switch__checked_8biv0 .switch__switch_8biv0:before {
145
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
126
  transform: translateX(16px);
147
- }
148
- /* Disabled state */
149
- .switch__disabled_15fs8 {
127
+ } /* Disabled state */ .switch__disabled_8biv0 {
150
128
  cursor: var(--disabled-cursor);
151
- }
152
- .switch__disabled_15fs8 .switch__switch_15fs8 {
129
+ } .switch__disabled_8biv0 .switch__switch_8biv0 {
153
130
  background-color: var(--switch-disabled-bg-color);
154
131
  border-color: var(--switch-disabled-border-color);
155
- }
156
- .switch__disabled_15fs8 .switch__label_15fs8 {
132
+ } .switch__disabled_8biv0 .switch__label_8biv0 {
157
133
  color: var(--switch-disabled-color);
158
- }
159
- .switch__disabled_15fs8 .switch__hint_15fs8 {
134
+ } .switch__disabled_8biv0 .switch__hint_8biv0 {
160
135
  color: var(--switch-disabled-color);
161
- }
162
- /* Inactive */
163
- .switch__inactive_15fs8 {
136
+ } /* Inactive */ .switch__inactive_8biv0 {
164
137
  cursor: var(--disabled-cursor);
165
- }
166
- .switch__inactive_15fs8 .switch__switch_15fs8 {
138
+ } .switch__inactive_8biv0 .switch__switch_8biv0 {
167
139
  background-color: var(--switch-disabled-bg-color);
168
140
  border-color: var(--switch-disabled-border-color)
169
- }
170
- .switch__inactive_15fs8 .switch__switch_15fs8:before {
141
+ } .switch__inactive_8biv0 .switch__switch_8biv0:before {
171
142
  background-color: var(--switch-inactive-color);
172
- }
173
- /* Focused state */
174
- .switch__focused_15fs8 .switch__switch_15fs8 {
143
+ } /* Focused state */ .switch__focused_8biv0 .switch__switch_8biv0 {
175
144
  outline: 2px solid var(--focus-color);
176
145
  outline-offset: 2px;
177
146
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "3.0.2",
3
+ "version": "3.0.4",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -20,6 +20,7 @@
20
20
  "dependencies": {
21
21
  "@alfalab/hooks": "^1.4.1",
22
22
  "classnames": "^2.3.1",
23
- "react-merge-refs": "^1.1.0"
23
+ "react-merge-refs": "^1.1.0",
24
+ "tslib": "^2.4.0"
24
25
  }
25
26
  }