@alfalab/core-components-switch 4.0.0 → 4.1.0

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 (15) hide show
  1. package/Component.js +6 -5
  2. package/cssm/Component.js +5 -4
  3. package/cssm/index.js +1 -0
  4. package/cssm/index.module.css +9 -9
  5. package/esm/Component.js +6 -5
  6. package/esm/index.css +33 -33
  7. package/esm/index.js +1 -0
  8. package/index.css +33 -33
  9. package/index.js +1 -0
  10. package/modern/Component.js +6 -5
  11. package/modern/index.css +33 -33
  12. package/modern/index.js +1 -0
  13. package/package.json +2 -1
  14. package/src/Component.tsx +7 -2
  15. package/src/index.module.css +7 -7
package/Component.js CHANGED
@@ -6,6 +6,7 @@ var tslib = require('tslib');
6
6
  var React = require('react');
7
7
  var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
+ var coreComponentsShared = require('@alfalab/core-components-shared');
9
10
  var hooks = require('@alfalab/hooks');
10
11
 
11
12
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -14,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
15
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
15
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
17
 
17
- var styles = {"component":"switch__component_14iw6","start":"switch__start_14iw6","center":"switch__center_14iw6","addons":"switch__addons_14iw6","block":"switch__block_14iw6","switch":"switch__switch_14iw6","content":"switch__content_14iw6","label":"switch__label_14iw6","hint":"switch__hint_14iw6","reversed":"switch__reversed_14iw6","checked":"switch__checked_14iw6","disabled":"switch__disabled_14iw6","focused":"switch__focused_14iw6"};
18
+ var styles = {"component":"switch__component_pizcd","start":"switch__start_pizcd","center":"switch__center_pizcd","addons":"switch__addons_pizcd","block":"switch__block_pizcd","switch":"switch__switch_pizcd","content":"switch__content_pizcd","label":"switch__label_pizcd","hint":"switch__hint_pizcd","reversed":"switch__reversed_pizcd","checked":"switch__checked_pizcd","disabled":"switch__disabled_pizcd","focused":"switch__focused_pizcd"};
18
19
  require('./index.css')
19
20
 
20
21
  var Switch = React.forwardRef(function (_a, ref) {
@@ -27,9 +28,7 @@ var Switch = React.forwardRef(function (_a, ref) {
27
28
  onChange(e, { checked: e.target.checked, name: name });
28
29
  }
29
30
  };
30
- return (
31
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
32
- React__default.default.createElement("label", { className: cn__default.default(styles.component, styles[align], className, (_b = {},
31
+ return (React__default.default.createElement("label", { className: cn__default.default(styles.component, styles[align], className, (_b = {},
33
32
  _b[styles.disabled] = disabled || inactive,
34
33
  _b[styles.checked] = checked,
35
34
  _b[styles.reversed] = reversed,
@@ -41,7 +40,9 @@ var Switch = React.forwardRef(function (_a, ref) {
41
40
  (label || hint) && (React__default.default.createElement("span", { className: styles.content },
42
41
  label && React__default.default.createElement("span", { className: styles.label }, label),
43
42
  hint && React__default.default.createElement("span", { className: styles.hint }, hint))),
44
- addons && React__default.default.createElement("span", { className: styles.addons }, addons)));
43
+ addons && (
44
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
45
+ React__default.default.createElement("span", { className: styles.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
45
46
  });
46
47
 
47
48
  exports.Switch = Switch;
package/cssm/Component.js CHANGED
@@ -6,6 +6,7 @@ var tslib = require('tslib');
6
6
  var React = require('react');
7
7
  var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
+ var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
9
10
  var hooks = require('@alfalab/hooks');
10
11
  var styles = require('./index.module.css');
11
12
 
@@ -26,9 +27,7 @@ var Switch = React.forwardRef(function (_a, ref) {
26
27
  onChange(e, { checked: e.target.checked, name: name });
27
28
  }
28
29
  };
29
- return (
30
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
31
- React__default.default.createElement("label", { className: cn__default.default(styles__default.default.component, styles__default.default[align], className, (_b = {},
30
+ return (React__default.default.createElement("label", { className: cn__default.default(styles__default.default.component, styles__default.default[align], className, (_b = {},
32
31
  _b[styles__default.default.disabled] = disabled || inactive,
33
32
  _b[styles__default.default.checked] = checked,
34
33
  _b[styles__default.default.reversed] = reversed,
@@ -40,7 +39,9 @@ var Switch = React.forwardRef(function (_a, ref) {
40
39
  (label || hint) && (React__default.default.createElement("span", { className: styles__default.default.content },
41
40
  label && React__default.default.createElement("span", { className: styles__default.default.label }, label),
42
41
  hint && React__default.default.createElement("span", { className: styles__default.default.hint }, hint))),
43
- addons && React__default.default.createElement("span", { className: styles__default.default.addons }, addons)));
42
+ addons && (
43
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
44
+ React__default.default.createElement("span", { className: styles__default.default.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
44
45
  });
45
46
 
46
47
  exports.Switch = Switch;
package/cssm/index.js CHANGED
@@ -7,6 +7,7 @@ require('tslib');
7
7
  require('react');
8
8
  require('react-merge-refs');
9
9
  require('classnames');
10
+ require('@alfalab/core-components-shared/cssm');
10
11
  require('@alfalab/hooks');
11
12
  require('./index.module.css');
12
13
 
package/cssm/index.module.css CHANGED
@@ -46,14 +46,14 @@
46
46
 
47
47
  /* disabled */
48
48
  --switch-disabled-color: var(--color-light-text-secondary);
49
- --switch-disabled-bg-color: var(--color-light-neutral-translucent-700);
49
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
50
50
 
51
51
  /* disabled checked */
52
- --switch-disabled-checked-bg-color: var(--color-light-neutral-translucent-200);
52
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
53
53
 
54
54
  /* icon */
55
55
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
56
- --switch-icon-disabled-checked-color: var(--color-light-neutral-translucent-500);
56
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
57
57
  } .component {
58
58
  display: inline-flex;
59
59
  align-items: flex-start;
@@ -137,12 +137,12 @@
137
137
  } /* Disabled state */ .disabled {
138
138
  cursor: var(--disabled-cursor);
139
139
  } .disabled .switch {
140
- background-color: var(--switch-disabled-bg-color);
141
- } .disabled.checked .switch {
142
- background-color: var(--switch-disabled-checked-bg-color)
143
- } .disabled.checked .switch:before {
144
- background-color: var(--switch-icon-disabled-checked-color);
145
- } .disabled .label {
140
+ background-color: var(--switch-disabled-bg-color)
141
+ } .disabled .switch:before {
142
+ background-color: var(--switch-icon-disabled-color);
143
+ } .disabled.checked .switch {
144
+ background-color: var(--switch-disabled-checked-bg-color);
145
+ } .disabled .label {
146
146
  color: var(--switch-disabled-color);
147
147
  } .disabled .hint {
148
148
  color: var(--switch-disabled-color);
package/esm/Component.js CHANGED
@@ -2,9 +2,10 @@ import { __rest, __assign } from 'tslib';
2
2
  import React, { forwardRef, useRef } from 'react';
3
3
  import mergeRefs from 'react-merge-refs';
4
4
  import cn from 'classnames';
5
+ import { dom } from '@alfalab/core-components-shared/esm';
5
6
  import { useFocus } from '@alfalab/hooks';
6
7
 
7
- var styles = {"component":"switch__component_14iw6","start":"switch__start_14iw6","center":"switch__center_14iw6","addons":"switch__addons_14iw6","block":"switch__block_14iw6","switch":"switch__switch_14iw6","content":"switch__content_14iw6","label":"switch__label_14iw6","hint":"switch__hint_14iw6","reversed":"switch__reversed_14iw6","checked":"switch__checked_14iw6","disabled":"switch__disabled_14iw6","focused":"switch__focused_14iw6"};
8
+ var styles = {"component":"switch__component_pizcd","start":"switch__start_pizcd","center":"switch__center_pizcd","addons":"switch__addons_pizcd","block":"switch__block_pizcd","switch":"switch__switch_pizcd","content":"switch__content_pizcd","label":"switch__label_pizcd","hint":"switch__hint_pizcd","reversed":"switch__reversed_pizcd","checked":"switch__checked_pizcd","disabled":"switch__disabled_pizcd","focused":"switch__focused_pizcd"};
8
9
  require('./index.css')
9
10
 
10
11
  var Switch = forwardRef(function (_a, ref) {
@@ -17,9 +18,7 @@ var Switch = forwardRef(function (_a, ref) {
17
18
  onChange(e, { checked: e.target.checked, name: name });
18
19
  }
19
20
  };
20
- return (
21
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
22
- React.createElement("label", { className: cn(styles.component, styles[align], className, (_b = {},
21
+ return (React.createElement("label", { className: cn(styles.component, styles[align], className, (_b = {},
23
22
  _b[styles.disabled] = disabled || inactive,
24
23
  _b[styles.checked] = checked,
25
24
  _b[styles.reversed] = reversed,
@@ -31,7 +30,9 @@ var Switch = forwardRef(function (_a, ref) {
31
30
  (label || hint) && (React.createElement("span", { className: styles.content },
32
31
  label && React.createElement("span", { className: styles.label }, label),
33
32
  hint && React.createElement("span", { className: styles.hint }, hint))),
34
- addons && React.createElement("span", { className: styles.addons }, addons)));
33
+ addons && (
34
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
35
+ React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
35
36
  });
36
37
 
37
38
  export { Switch };
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1kphk */
1
+ /* hash: s9zic */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #2288fa;
@@ -47,15 +47,15 @@
47
47
 
48
48
  /* disabled */
49
49
  --switch-disabled-color: var(--color-light-text-secondary);
50
- --switch-disabled-bg-color: var(--color-light-neutral-translucent-700);
50
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
51
51
 
52
52
  /* disabled checked */
53
- --switch-disabled-checked-bg-color: var(--color-light-neutral-translucent-200);
53
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
54
54
 
55
55
  /* icon */
56
56
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
- --switch-icon-disabled-checked-color: var(--color-light-neutral-translucent-500);
58
- } .switch__component_14iw6 {
57
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
+ } .switch__component_pizcd {
59
59
  display: inline-flex;
60
60
  align-items: flex-start;
61
61
  margin: 0;
@@ -63,20 +63,20 @@
63
63
  border: 0;
64
64
  cursor: pointer;
65
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
66
- } .switch__component_14iw6 input {
66
+ } .switch__component_pizcd input {
67
67
  opacity: 0;
68
68
  position: absolute;
69
- } .switch__start_14iw6 {
69
+ } .switch__start_pizcd {
70
70
  align-items: flex-start;
71
- } .switch__center_14iw6 {
71
+ } .switch__center_pizcd {
72
72
  align-items: center;
73
- } .switch__addons_14iw6 {
73
+ } .switch__addons_pizcd {
74
74
  margin-left: auto;
75
75
  padding-left: var(--gap-m);
76
76
  line-height: 24px;
77
- } .switch__block_14iw6 {
77
+ } .switch__block_pizcd {
78
78
  width: 100%;
79
- } .switch__switch_14iw6 {
79
+ } .switch__switch_pizcd {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -87,9 +87,9 @@
87
87
  border: 2px solid var(--switch-border-color);
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box
90
- } .switch__switch_14iw6:hover {
90
+ } .switch__switch_pizcd:hover {
91
91
  background-color: var(--switch-hover-bg-color);
92
- } .switch__switch_14iw6:before {
92
+ } .switch__switch_pizcd:before {
93
93
  content: '';
94
94
  position: absolute;
95
95
  top: 0;
@@ -101,53 +101,53 @@
101
101
  background-color: var(--switch-icon-color);
102
102
  box-sizing: border-box;
103
103
  transition: transform 0.2s ease;
104
- } .switch__content_14iw6 {
104
+ } .switch__content_pizcd {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
- } .switch__label_14iw6 {
107
+ } .switch__label_pizcd {
108
108
  font-size: 16px;
109
109
  line-height: 24px;
110
110
  font-weight: 400;
111
111
  display: block;
112
112
  color: var(--switch-label-color);
113
- } .switch__label_14iw6:not(:only-child) {
113
+ } .switch__label_pizcd:not(:only-child) {
114
114
  margin-bottom: var(--gap-2xs);
115
- } .switch__hint_14iw6 {
115
+ } .switch__hint_pizcd {
116
116
  font-size: 14px;
117
117
  line-height: 18px;
118
118
  font-weight: 400;
119
119
  display: block;
120
120
  color: var(--switch-hint-color);
121
- } /* Reversed state */ .switch__component_14iw6.switch__reversed_14iw6 {
121
+ } /* Reversed state */ .switch__component_pizcd.switch__reversed_pizcd {
122
122
  flex-direction: row-reverse;
123
- } .switch__reversed_14iw6 .switch__content_14iw6 {
123
+ } .switch__reversed_pizcd .switch__content_pizcd {
124
124
  margin-right: var(--gap-m);
125
125
  margin-left: 0;
126
- } .switch__reversed_14iw6 .switch__addons_14iw6 {
126
+ } .switch__reversed_pizcd .switch__addons_pizcd {
127
127
  margin-left: 0;
128
128
  padding-left: 0;
129
129
  margin-right: auto;
130
130
  padding-right: var(--gap-m);
131
- } /* Checked state */ .switch__checked_14iw6 .switch__switch_14iw6 {
131
+ } /* Checked state */ .switch__checked_pizcd .switch__switch_pizcd {
132
132
  background-color: var(--switch-checked-bg-color)
133
- } .switch__checked_14iw6 .switch__switch_14iw6:hover {
133
+ } .switch__checked_pizcd .switch__switch_pizcd:hover {
134
134
  background-color: var(--switch-checked-hover-bg-color);
135
- } .switch__checked_14iw6 .switch__switch_14iw6:before {
135
+ } .switch__checked_pizcd .switch__switch_pizcd:before {
136
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
137
137
  transform: translateX(16px);
138
- } /* Disabled state */ .switch__disabled_14iw6 {
138
+ } /* Disabled state */ .switch__disabled_pizcd {
139
139
  cursor: var(--disabled-cursor);
140
- } .switch__disabled_14iw6 .switch__switch_14iw6 {
141
- background-color: var(--switch-disabled-bg-color);
142
- } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6 {
143
- background-color: var(--switch-disabled-checked-bg-color)
144
- } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6:before {
145
- background-color: var(--switch-icon-disabled-checked-color);
146
- } .switch__disabled_14iw6 .switch__label_14iw6 {
140
+ } .switch__disabled_pizcd .switch__switch_pizcd {
141
+ background-color: var(--switch-disabled-bg-color)
142
+ } .switch__disabled_pizcd .switch__switch_pizcd:before {
143
+ background-color: var(--switch-icon-disabled-color);
144
+ } .switch__disabled_pizcd.switch__checked_pizcd .switch__switch_pizcd {
145
+ background-color: var(--switch-disabled-checked-bg-color);
146
+ } .switch__disabled_pizcd .switch__label_pizcd {
147
147
  color: var(--switch-disabled-color);
148
- } .switch__disabled_14iw6 .switch__hint_14iw6 {
148
+ } .switch__disabled_pizcd .switch__hint_pizcd {
149
149
  color: var(--switch-disabled-color);
150
- } /* Focused state */ .switch__focused_14iw6 .switch__switch_14iw6 {
150
+ } /* Focused state */ .switch__focused_pizcd .switch__switch_pizcd {
151
151
  outline: 2px solid var(--focus-color);
152
152
  outline-offset: 2px;
153
153
  }
package/esm/index.js CHANGED
@@ -3,4 +3,5 @@ import 'tslib';
3
3
  import 'react';
4
4
  import 'react-merge-refs';
5
5
  import 'classnames';
6
+ import '@alfalab/core-components-shared/esm';
6
7
  import '@alfalab/hooks';
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1kphk */
1
+ /* hash: s9zic */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #2288fa;
@@ -47,15 +47,15 @@
47
47
 
48
48
  /* disabled */
49
49
  --switch-disabled-color: var(--color-light-text-secondary);
50
- --switch-disabled-bg-color: var(--color-light-neutral-translucent-700);
50
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
51
51
 
52
52
  /* disabled checked */
53
- --switch-disabled-checked-bg-color: var(--color-light-neutral-translucent-200);
53
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
54
54
 
55
55
  /* icon */
56
56
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
- --switch-icon-disabled-checked-color: var(--color-light-neutral-translucent-500);
58
- } .switch__component_14iw6 {
57
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
+ } .switch__component_pizcd {
59
59
  display: inline-flex;
60
60
  align-items: flex-start;
61
61
  margin: 0;
@@ -63,20 +63,20 @@
63
63
  border: 0;
64
64
  cursor: pointer;
65
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
66
- } .switch__component_14iw6 input {
66
+ } .switch__component_pizcd input {
67
67
  opacity: 0;
68
68
  position: absolute;
69
- } .switch__start_14iw6 {
69
+ } .switch__start_pizcd {
70
70
  align-items: flex-start;
71
- } .switch__center_14iw6 {
71
+ } .switch__center_pizcd {
72
72
  align-items: center;
73
- } .switch__addons_14iw6 {
73
+ } .switch__addons_pizcd {
74
74
  margin-left: auto;
75
75
  padding-left: var(--gap-m);
76
76
  line-height: 24px;
77
- } .switch__block_14iw6 {
77
+ } .switch__block_pizcd {
78
78
  width: 100%;
79
- } .switch__switch_14iw6 {
79
+ } .switch__switch_pizcd {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -87,9 +87,9 @@
87
87
  border: 2px solid var(--switch-border-color);
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box
90
- } .switch__switch_14iw6:hover {
90
+ } .switch__switch_pizcd:hover {
91
91
  background-color: var(--switch-hover-bg-color);
92
- } .switch__switch_14iw6:before {
92
+ } .switch__switch_pizcd:before {
93
93
  content: '';
94
94
  position: absolute;
95
95
  top: 0;
@@ -101,53 +101,53 @@
101
101
  background-color: var(--switch-icon-color);
102
102
  box-sizing: border-box;
103
103
  transition: transform 0.2s ease;
104
- } .switch__content_14iw6 {
104
+ } .switch__content_pizcd {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
- } .switch__label_14iw6 {
107
+ } .switch__label_pizcd {
108
108
  font-size: 16px;
109
109
  line-height: 24px;
110
110
  font-weight: 400;
111
111
  display: block;
112
112
  color: var(--switch-label-color);
113
- } .switch__label_14iw6:not(:only-child) {
113
+ } .switch__label_pizcd:not(:only-child) {
114
114
  margin-bottom: var(--gap-2xs);
115
- } .switch__hint_14iw6 {
115
+ } .switch__hint_pizcd {
116
116
  font-size: 14px;
117
117
  line-height: 18px;
118
118
  font-weight: 400;
119
119
  display: block;
120
120
  color: var(--switch-hint-color);
121
- } /* Reversed state */ .switch__component_14iw6.switch__reversed_14iw6 {
121
+ } /* Reversed state */ .switch__component_pizcd.switch__reversed_pizcd {
122
122
  flex-direction: row-reverse;
123
- } .switch__reversed_14iw6 .switch__content_14iw6 {
123
+ } .switch__reversed_pizcd .switch__content_pizcd {
124
124
  margin-right: var(--gap-m);
125
125
  margin-left: 0;
126
- } .switch__reversed_14iw6 .switch__addons_14iw6 {
126
+ } .switch__reversed_pizcd .switch__addons_pizcd {
127
127
  margin-left: 0;
128
128
  padding-left: 0;
129
129
  margin-right: auto;
130
130
  padding-right: var(--gap-m);
131
- } /* Checked state */ .switch__checked_14iw6 .switch__switch_14iw6 {
131
+ } /* Checked state */ .switch__checked_pizcd .switch__switch_pizcd {
132
132
  background-color: var(--switch-checked-bg-color)
133
- } .switch__checked_14iw6 .switch__switch_14iw6:hover {
133
+ } .switch__checked_pizcd .switch__switch_pizcd:hover {
134
134
  background-color: var(--switch-checked-hover-bg-color);
135
- } .switch__checked_14iw6 .switch__switch_14iw6:before {
135
+ } .switch__checked_pizcd .switch__switch_pizcd:before {
136
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
137
137
  transform: translateX(16px);
138
- } /* Disabled state */ .switch__disabled_14iw6 {
138
+ } /* Disabled state */ .switch__disabled_pizcd {
139
139
  cursor: var(--disabled-cursor);
140
- } .switch__disabled_14iw6 .switch__switch_14iw6 {
141
- background-color: var(--switch-disabled-bg-color);
142
- } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6 {
143
- background-color: var(--switch-disabled-checked-bg-color)
144
- } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6:before {
145
- background-color: var(--switch-icon-disabled-checked-color);
146
- } .switch__disabled_14iw6 .switch__label_14iw6 {
140
+ } .switch__disabled_pizcd .switch__switch_pizcd {
141
+ background-color: var(--switch-disabled-bg-color)
142
+ } .switch__disabled_pizcd .switch__switch_pizcd:before {
143
+ background-color: var(--switch-icon-disabled-color);
144
+ } .switch__disabled_pizcd.switch__checked_pizcd .switch__switch_pizcd {
145
+ background-color: var(--switch-disabled-checked-bg-color);
146
+ } .switch__disabled_pizcd .switch__label_pizcd {
147
147
  color: var(--switch-disabled-color);
148
- } .switch__disabled_14iw6 .switch__hint_14iw6 {
148
+ } .switch__disabled_pizcd .switch__hint_pizcd {
149
149
  color: var(--switch-disabled-color);
150
- } /* Focused state */ .switch__focused_14iw6 .switch__switch_14iw6 {
150
+ } /* Focused state */ .switch__focused_pizcd .switch__switch_pizcd {
151
151
  outline: 2px solid var(--focus-color);
152
152
  outline-offset: 2px;
153
153
  }
package/index.js CHANGED
@@ -7,6 +7,7 @@ require('tslib');
7
7
  require('react');
8
8
  require('react-merge-refs');
9
9
  require('classnames');
10
+ require('@alfalab/core-components-shared');
10
11
  require('@alfalab/hooks');
11
12
 
12
13
 
package/modern/Component.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import React, { forwardRef, useRef } from 'react';
2
2
  import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
+ import { dom } from '@alfalab/core-components-shared/modern';
4
5
  import { useFocus } from '@alfalab/hooks';
5
6
 
6
- const styles = {"component":"switch__component_14iw6","start":"switch__start_14iw6","center":"switch__center_14iw6","addons":"switch__addons_14iw6","block":"switch__block_14iw6","switch":"switch__switch_14iw6","content":"switch__content_14iw6","label":"switch__label_14iw6","hint":"switch__hint_14iw6","reversed":"switch__reversed_14iw6","checked":"switch__checked_14iw6","disabled":"switch__disabled_14iw6","focused":"switch__focused_14iw6"};
7
+ const styles = {"component":"switch__component_pizcd","start":"switch__start_pizcd","center":"switch__center_pizcd","addons":"switch__addons_pizcd","block":"switch__block_pizcd","switch":"switch__switch_pizcd","content":"switch__content_pizcd","label":"switch__label_pizcd","hint":"switch__hint_pizcd","reversed":"switch__reversed_pizcd","checked":"switch__checked_pizcd","disabled":"switch__disabled_pizcd","focused":"switch__focused_pizcd"};
7
8
  require('./index.css')
8
9
 
9
10
  const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
@@ -14,9 +15,7 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
14
15
  onChange(e, { checked: e.target.checked, name });
15
16
  }
16
17
  };
17
- return (
18
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
19
- React.createElement("label", { className: cn(styles.component, styles[align], className, {
18
+ return (React.createElement("label", { className: cn(styles.component, styles[align], className, {
20
19
  [styles.disabled]: disabled || inactive,
21
20
  [styles.checked]: checked,
22
21
  [styles.reversed]: reversed,
@@ -28,7 +27,9 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
28
27
  (label || hint) && (React.createElement("span", { className: styles.content },
29
28
  label && React.createElement("span", { className: styles.label }, label),
30
29
  hint && React.createElement("span", { className: styles.hint }, hint))),
31
- addons && React.createElement("span", { className: styles.addons }, addons)));
30
+ addons && (
31
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
32
+ React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
32
33
  });
33
34
 
34
35
  export { Switch };
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1kphk */
1
+ /* hash: s9zic */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #2288fa;
@@ -47,15 +47,15 @@
47
47
 
48
48
  /* disabled */
49
49
  --switch-disabled-color: var(--color-light-text-secondary);
50
- --switch-disabled-bg-color: var(--color-light-neutral-translucent-700);
50
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
51
51
 
52
52
  /* disabled checked */
53
- --switch-disabled-checked-bg-color: var(--color-light-neutral-translucent-200);
53
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
54
54
 
55
55
  /* icon */
56
56
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
- --switch-icon-disabled-checked-color: var(--color-light-neutral-translucent-500);
58
- } .switch__component_14iw6 {
57
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
+ } .switch__component_pizcd {
59
59
  display: inline-flex;
60
60
  align-items: flex-start;
61
61
  margin: 0;
@@ -63,20 +63,20 @@
63
63
  border: 0;
64
64
  cursor: pointer;
65
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
66
- } .switch__component_14iw6 input {
66
+ } .switch__component_pizcd input {
67
67
  opacity: 0;
68
68
  position: absolute;
69
- } .switch__start_14iw6 {
69
+ } .switch__start_pizcd {
70
70
  align-items: flex-start;
71
- } .switch__center_14iw6 {
71
+ } .switch__center_pizcd {
72
72
  align-items: center;
73
- } .switch__addons_14iw6 {
73
+ } .switch__addons_pizcd {
74
74
  margin-left: auto;
75
75
  padding-left: var(--gap-m);
76
76
  line-height: 24px;
77
- } .switch__block_14iw6 {
77
+ } .switch__block_pizcd {
78
78
  width: 100%;
79
- } .switch__switch_14iw6 {
79
+ } .switch__switch_pizcd {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -87,9 +87,9 @@
87
87
  border: 2px solid var(--switch-border-color);
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box
90
- } .switch__switch_14iw6:hover {
90
+ } .switch__switch_pizcd:hover {
91
91
  background-color: var(--switch-hover-bg-color);
92
- } .switch__switch_14iw6:before {
92
+ } .switch__switch_pizcd:before {
93
93
  content: '';
94
94
  position: absolute;
95
95
  top: 0;
@@ -101,53 +101,53 @@
101
101
  background-color: var(--switch-icon-color);
102
102
  box-sizing: border-box;
103
103
  transition: transform 0.2s ease;
104
- } .switch__content_14iw6 {
104
+ } .switch__content_pizcd {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
- } .switch__label_14iw6 {
107
+ } .switch__label_pizcd {
108
108
  font-size: 16px;
109
109
  line-height: 24px;
110
110
  font-weight: 400;
111
111
  display: block;
112
112
  color: var(--switch-label-color);
113
- } .switch__label_14iw6:not(:only-child) {
113
+ } .switch__label_pizcd:not(:only-child) {
114
114
  margin-bottom: var(--gap-2xs);
115
- } .switch__hint_14iw6 {
115
+ } .switch__hint_pizcd {
116
116
  font-size: 14px;
117
117
  line-height: 18px;
118
118
  font-weight: 400;
119
119
  display: block;
120
120
  color: var(--switch-hint-color);
121
- } /* Reversed state */ .switch__component_14iw6.switch__reversed_14iw6 {
121
+ } /* Reversed state */ .switch__component_pizcd.switch__reversed_pizcd {
122
122
  flex-direction: row-reverse;
123
- } .switch__reversed_14iw6 .switch__content_14iw6 {
123
+ } .switch__reversed_pizcd .switch__content_pizcd {
124
124
  margin-right: var(--gap-m);
125
125
  margin-left: 0;
126
- } .switch__reversed_14iw6 .switch__addons_14iw6 {
126
+ } .switch__reversed_pizcd .switch__addons_pizcd {
127
127
  margin-left: 0;
128
128
  padding-left: 0;
129
129
  margin-right: auto;
130
130
  padding-right: var(--gap-m);
131
- } /* Checked state */ .switch__checked_14iw6 .switch__switch_14iw6 {
131
+ } /* Checked state */ .switch__checked_pizcd .switch__switch_pizcd {
132
132
  background-color: var(--switch-checked-bg-color)
133
- } .switch__checked_14iw6 .switch__switch_14iw6:hover {
133
+ } .switch__checked_pizcd .switch__switch_pizcd:hover {
134
134
  background-color: var(--switch-checked-hover-bg-color);
135
- } .switch__checked_14iw6 .switch__switch_14iw6:before {
135
+ } .switch__checked_pizcd .switch__switch_pizcd:before {
136
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
137
137
  transform: translateX(16px);
138
- } /* Disabled state */ .switch__disabled_14iw6 {
138
+ } /* Disabled state */ .switch__disabled_pizcd {
139
139
  cursor: var(--disabled-cursor);
140
- } .switch__disabled_14iw6 .switch__switch_14iw6 {
141
- background-color: var(--switch-disabled-bg-color);
142
- } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6 {
143
- background-color: var(--switch-disabled-checked-bg-color)
144
- } .switch__disabled_14iw6.switch__checked_14iw6 .switch__switch_14iw6:before {
145
- background-color: var(--switch-icon-disabled-checked-color);
146
- } .switch__disabled_14iw6 .switch__label_14iw6 {
140
+ } .switch__disabled_pizcd .switch__switch_pizcd {
141
+ background-color: var(--switch-disabled-bg-color)
142
+ } .switch__disabled_pizcd .switch__switch_pizcd:before {
143
+ background-color: var(--switch-icon-disabled-color);
144
+ } .switch__disabled_pizcd.switch__checked_pizcd .switch__switch_pizcd {
145
+ background-color: var(--switch-disabled-checked-bg-color);
146
+ } .switch__disabled_pizcd .switch__label_pizcd {
147
147
  color: var(--switch-disabled-color);
148
- } .switch__disabled_14iw6 .switch__hint_14iw6 {
148
+ } .switch__disabled_pizcd .switch__hint_pizcd {
149
149
  color: var(--switch-disabled-color);
150
- } /* Focused state */ .switch__focused_14iw6 .switch__switch_14iw6 {
150
+ } /* Focused state */ .switch__focused_pizcd .switch__switch_pizcd {
151
151
  outline: 2px solid var(--focus-color);
152
152
  outline-offset: 2px;
153
153
  }
package/modern/index.js CHANGED
@@ -2,4 +2,5 @@ export { Switch } from './Component.js';
2
2
  import 'react';
3
3
  import 'react-merge-refs';
4
4
  import 'classnames';
5
+ import '@alfalab/core-components-shared/modern';
5
6
  import '@alfalab/hooks';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "4.0.0",
3
+ "version": "4.1.0",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -16,6 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@alfalab/hooks": "^1.13.0",
19
+ "@alfalab/core-components-shared": "^0.9.0",
19
20
  "classnames": "^2.3.1",
20
21
  "react-merge-refs": "^1.1.0",
21
22
  "tslib": "^2.4.0"
package/src/Component.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode, useRef
2
2
  import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
4
 
5
+ import { dom } from '@alfalab/core-components-shared';
5
6
  import { useFocus } from '@alfalab/hooks';
6
7
 
7
8
  import styles from './index.module.css';
@@ -108,7 +109,6 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
108
109
  };
109
110
 
110
111
  return (
111
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
112
112
  <label
113
113
  className={cn(styles.component, styles[align], className, {
114
114
  [styles.disabled]: disabled || inactive,
@@ -139,7 +139,12 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
139
139
  </span>
140
140
  )}
141
141
 
142
- {addons && <span className={styles.addons}>{addons}</span>}
142
+ {addons && (
143
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
144
+ <span className={styles.addons} onClick={dom.preventDefault}>
145
+ {addons}
146
+ </span>
147
+ )}
143
148
  </label>
144
149
  );
145
150
  },
package/src/index.module.css CHANGED
@@ -15,14 +15,14 @@
15
15
 
16
16
  /* disabled */
17
17
  --switch-disabled-color: var(--color-light-text-secondary);
18
- --switch-disabled-bg-color: var(--color-light-neutral-translucent-700);
18
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
19
19
 
20
20
  /* disabled checked */
21
- --switch-disabled-checked-bg-color: var(--color-light-neutral-translucent-200);
21
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
22
22
 
23
23
  /* icon */
24
24
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
25
- --switch-icon-disabled-checked-color: var(--color-light-neutral-translucent-500);
25
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
26
26
  }
27
27
 
28
28
  .component {
@@ -151,14 +151,14 @@
151
151
 
152
152
  .disabled .switch {
153
153
  background-color: var(--switch-disabled-bg-color);
154
+
155
+ &:before {
156
+ background-color: var(--switch-icon-disabled-color);
157
+ }
154
158
  }
155
159
 
156
160
  .disabled.checked .switch {
157
161
  background-color: var(--switch-disabled-checked-bg-color);
158
-
159
- &:before {
160
- background-color: var(--switch-icon-disabled-checked-color);
161
- }
162
162
  }
163
163
 
164
164
  .disabled .label {