@alfalab/core-components-switch 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 (18) hide show
  1. package/Component.d.ts +9 -9
  2. package/Component.js +18 -58
  3. package/cssm/Component.d.ts +9 -9
  4. package/cssm/Component.js +24 -64
  5. package/cssm/index.js +2 -3
  6. package/cssm/index.module.css +37 -68
  7. package/esm/Component.d.ts +9 -9
  8. package/esm/Component.js +6 -44
  9. package/esm/index.css +38 -69
  10. package/esm/index.js +2 -1
  11. package/index.css +38 -69
  12. package/index.js +2 -3
  13. package/modern/Component.d.ts +9 -9
  14. package/modern/Component.js +6 -6
  15. package/modern/index.css +38 -69
  16. package/modern/index.js +2 -2
  17. package/package.json +3 -2
  18. package/send-stats.js +1 -1
package/esm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { InputHTMLAttributes, ChangeEvent, ReactNode } from "react";
3
+ import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
4
4
  type Align = 'start' | 'center';
5
5
  type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
6
6
  /**
@@ -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;
@@ -51,7 +51,7 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
51
51
  */
52
52
  dataTestId?: string;
53
53
  };
54
- declare const Switch: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
54
+ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
55
55
  /**
56
56
  * Управление состоянием вкл/выкл компонента
57
57
  */
@@ -59,11 +59,11 @@ declare const Switch: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttrib
59
59
  /**
60
60
  * Текст подписи к переключателю
61
61
  */
62
- label?: React.ReactNode;
62
+ label?: ReactNode;
63
63
  /**
64
64
  * Текст подсказки снизу
65
65
  */
66
- hint?: React.ReactNode;
66
+ hint?: ReactNode;
67
67
  /**
68
68
  * Переключатель будет отрисован справа от контента
69
69
  */
@@ -71,7 +71,7 @@ declare const Switch: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttrib
71
71
  /**
72
72
  * Выравнивание
73
73
  */
74
- align?: "start" | "center" | undefined;
74
+ align?: Align | undefined;
75
75
  /**
76
76
  * Дополнительный слот
77
77
  */
@@ -91,10 +91,10 @@ declare const Switch: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttrib
91
91
  /**
92
92
  * Обработчик переключения компонента
93
93
  */
94
- onChange?: ((event?: React.ChangeEvent<HTMLInputElement> | undefined, payload?: {
94
+ onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
95
95
  checked: boolean;
96
- name: string | undefined;
97
- } | undefined) => void) | undefined;
96
+ name: InputHTMLAttributes<HTMLInputElement>['name'];
97
+ }) => void) | undefined;
98
98
  /**
99
99
  * Идентификатор для систем автоматизированного тестирования
100
100
  */
package/esm/Component.js CHANGED
@@ -1,48 +1,10 @@
1
- import React, { forwardRef, useRef, useCallback } from 'react';
2
- import cn from 'classnames';
1
+ import { __rest, __assign } from 'tslib';
2
+ import React, { forwardRef, useRef } from 'react';
3
3
  import mergeRefs from 'react-merge-refs';
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_s25if","start":"switch__start_s25if","center":"switch__center_s25if","addons":"switch__addons_s25if","block":"switch__block_s25if","switch":"switch__switch_s25if","content":"switch__content_s25if","label":"switch__label_s25if","hint":"switch__hint_s25if","reversed":"switch__reversed_s25if","checked":"switch__checked_s25if","disabled":"switch__disabled_s25if","inactive":"switch__inactive_s25if","focused":"switch__focused_s25if"};
7
+ var styles = {"component":"switch__component_1pggx","start":"switch__start_1pggx","center":"switch__center_1pggx","addons":"switch__addons_1pggx","block":"switch__block_1pggx","switch":"switch__switch_1pggx","content":"switch__content_1pggx","label":"switch__label_1pggx","hint":"switch__hint_1pggx","reversed":"switch__reversed_1pggx","checked":"switch__checked_1pggx","disabled":"switch__disabled_1pggx","inactive":"switch__inactive_1pggx","focused":"switch__focused_1pggx"};
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,5 +1,6 @@
1
- /* hash: ibo40 */
1
+ /* hash: 1p577 */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-border-link: #007aff;
4
5
  --color-light-border-underline: #b6bcc3;
5
6
  --color-light-graphic-accent: #ef3124;
@@ -7,31 +8,29 @@
7
8
  --color-light-graphic-quaternary: #dbdee1;
8
9
  --color-light-graphic-secondary: #6d7986;
9
10
  --color-light-text-primary: #0b1f35;
10
- --color-light-text-secondary: #546272;
11
- }
12
- :root {
11
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
12
+ } :root {
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_s25if {
50
+ } .switch__component_1pggx {
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_s25if input {
58
+ } .switch__component_1pggx input {
62
59
  opacity: 0;
63
60
  position: absolute;
64
- }
65
- .switch__start_s25if {
61
+ } .switch__start_1pggx {
66
62
  align-items: flex-start;
67
- }
68
- .switch__center_s25if {
63
+ } .switch__center_1pggx {
69
64
  align-items: center;
70
- }
71
- .switch__addons_s25if {
65
+ } .switch__addons_1pggx {
72
66
  margin-left: auto;
73
67
  padding-left: var(--gap-m);
74
68
  line-height: 24px;
75
- }
76
- .switch__block_s25if {
69
+ } .switch__block_1pggx {
77
70
  width: 100%;
78
- }
79
- .switch__switch_s25if {
71
+ } .switch__switch_1pggx {
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_s25if:before {
82
+ } .switch__switch_1pggx: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_s25if {
94
+ } .switch__content_1pggx {
105
95
  margin-left: var(--gap-s);
106
96
  flex-grow: 1;
107
- }
108
- .switch__label_s25if {
97
+ } .switch__label_1pggx {
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_s25if:not(:only-child) {
103
+ } .switch__label_1pggx:not(:only-child) {
116
104
  margin-bottom: var(--gap-2xs);
117
- }
118
- .switch__hint_s25if {
105
+ } .switch__hint_1pggx {
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_s25if.switch__reversed_s25if {
111
+ } /* Reversed state */ .switch__component_1pggx.switch__reversed_1pggx {
127
112
  flex-direction: row-reverse;
128
- }
129
- .switch__reversed_s25if .switch__content_s25if {
113
+ } .switch__reversed_1pggx .switch__content_1pggx {
130
114
  margin-right: var(--gap-m);
131
115
  margin-left: 0;
132
- }
133
- .switch__reversed_s25if .switch__addons_s25if {
116
+ } .switch__reversed_1pggx .switch__addons_1pggx {
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_s25if .switch__switch_s25if {
121
+ } /* Checked state */ .switch__checked_1pggx .switch__switch_1pggx {
141
122
  background-color: var(--switch-checked-bg-color);
142
123
  border-color: var(--switch-checked-border-color);
143
- }
144
- .switch__checked_s25if .switch__switch_s25if:before {
124
+ } .switch__checked_1pggx .switch__switch_1pggx:before {
145
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
126
  transform: translateX(16px);
147
- }
148
- /* Disabled state */
149
- .switch__disabled_s25if {
127
+ } /* Disabled state */ .switch__disabled_1pggx {
150
128
  cursor: var(--disabled-cursor);
151
- }
152
- .switch__disabled_s25if .switch__switch_s25if {
129
+ } .switch__disabled_1pggx .switch__switch_1pggx {
153
130
  background-color: var(--switch-disabled-bg-color);
154
131
  border-color: var(--switch-disabled-border-color);
155
- }
156
- .switch__disabled_s25if .switch__label_s25if {
132
+ } .switch__disabled_1pggx .switch__label_1pggx {
157
133
  color: var(--switch-disabled-color);
158
- }
159
- .switch__disabled_s25if .switch__hint_s25if {
134
+ } .switch__disabled_1pggx .switch__hint_1pggx {
160
135
  color: var(--switch-disabled-color);
161
- }
162
- /* Inactive */
163
- .switch__inactive_s25if {
136
+ } /* Inactive */ .switch__inactive_1pggx {
164
137
  cursor: var(--disabled-cursor);
165
- }
166
- .switch__inactive_s25if .switch__switch_s25if {
138
+ } .switch__inactive_1pggx .switch__switch_1pggx {
167
139
  background-color: var(--switch-disabled-bg-color);
168
140
  border-color: var(--switch-disabled-border-color)
169
- }
170
- .switch__inactive_s25if .switch__switch_s25if:before {
141
+ } .switch__inactive_1pggx .switch__switch_1pggx:before {
171
142
  background-color: var(--switch-inactive-color);
172
- }
173
- /* Focused state */
174
- .switch__focused_s25if .switch__switch_s25if {
143
+ } /* Focused state */ .switch__focused_1pggx .switch__switch_1pggx {
175
144
  outline: 2px solid var(--focus-color);
176
145
  outline-offset: 2px;
177
146
  }
package/esm/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  export { Switch } from './Component.js';
2
+ import 'tslib';
2
3
  import 'react';
3
- import 'classnames';
4
4
  import 'react-merge-refs';
5
+ import 'classnames';
5
6
  import '@alfalab/hooks';
package/index.css CHANGED
@@ -1,5 +1,6 @@
1
- /* hash: ibo40 */
1
+ /* hash: 1p577 */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-border-link: #007aff;
4
5
  --color-light-border-underline: #b6bcc3;
5
6
  --color-light-graphic-accent: #ef3124;
@@ -7,31 +8,29 @@
7
8
  --color-light-graphic-quaternary: #dbdee1;
8
9
  --color-light-graphic-secondary: #6d7986;
9
10
  --color-light-text-primary: #0b1f35;
10
- --color-light-text-secondary: #546272;
11
- }
12
- :root {
11
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
12
+ } :root {
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_s25if {
50
+ } .switch__component_1pggx {
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_s25if input {
58
+ } .switch__component_1pggx input {
62
59
  opacity: 0;
63
60
  position: absolute;
64
- }
65
- .switch__start_s25if {
61
+ } .switch__start_1pggx {
66
62
  align-items: flex-start;
67
- }
68
- .switch__center_s25if {
63
+ } .switch__center_1pggx {
69
64
  align-items: center;
70
- }
71
- .switch__addons_s25if {
65
+ } .switch__addons_1pggx {
72
66
  margin-left: auto;
73
67
  padding-left: var(--gap-m);
74
68
  line-height: 24px;
75
- }
76
- .switch__block_s25if {
69
+ } .switch__block_1pggx {
77
70
  width: 100%;
78
- }
79
- .switch__switch_s25if {
71
+ } .switch__switch_1pggx {
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_s25if:before {
82
+ } .switch__switch_1pggx: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_s25if {
94
+ } .switch__content_1pggx {
105
95
  margin-left: var(--gap-s);
106
96
  flex-grow: 1;
107
- }
108
- .switch__label_s25if {
97
+ } .switch__label_1pggx {
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_s25if:not(:only-child) {
103
+ } .switch__label_1pggx:not(:only-child) {
116
104
  margin-bottom: var(--gap-2xs);
117
- }
118
- .switch__hint_s25if {
105
+ } .switch__hint_1pggx {
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_s25if.switch__reversed_s25if {
111
+ } /* Reversed state */ .switch__component_1pggx.switch__reversed_1pggx {
127
112
  flex-direction: row-reverse;
128
- }
129
- .switch__reversed_s25if .switch__content_s25if {
113
+ } .switch__reversed_1pggx .switch__content_1pggx {
130
114
  margin-right: var(--gap-m);
131
115
  margin-left: 0;
132
- }
133
- .switch__reversed_s25if .switch__addons_s25if {
116
+ } .switch__reversed_1pggx .switch__addons_1pggx {
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_s25if .switch__switch_s25if {
121
+ } /* Checked state */ .switch__checked_1pggx .switch__switch_1pggx {
141
122
  background-color: var(--switch-checked-bg-color);
142
123
  border-color: var(--switch-checked-border-color);
143
- }
144
- .switch__checked_s25if .switch__switch_s25if:before {
124
+ } .switch__checked_1pggx .switch__switch_1pggx:before {
145
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
126
  transform: translateX(16px);
147
- }
148
- /* Disabled state */
149
- .switch__disabled_s25if {
127
+ } /* Disabled state */ .switch__disabled_1pggx {
150
128
  cursor: var(--disabled-cursor);
151
- }
152
- .switch__disabled_s25if .switch__switch_s25if {
129
+ } .switch__disabled_1pggx .switch__switch_1pggx {
153
130
  background-color: var(--switch-disabled-bg-color);
154
131
  border-color: var(--switch-disabled-border-color);
155
- }
156
- .switch__disabled_s25if .switch__label_s25if {
132
+ } .switch__disabled_1pggx .switch__label_1pggx {
157
133
  color: var(--switch-disabled-color);
158
- }
159
- .switch__disabled_s25if .switch__hint_s25if {
134
+ } .switch__disabled_1pggx .switch__hint_1pggx {
160
135
  color: var(--switch-disabled-color);
161
- }
162
- /* Inactive */
163
- .switch__inactive_s25if {
136
+ } /* Inactive */ .switch__inactive_1pggx {
164
137
  cursor: var(--disabled-cursor);
165
- }
166
- .switch__inactive_s25if .switch__switch_s25if {
138
+ } .switch__inactive_1pggx .switch__switch_1pggx {
167
139
  background-color: var(--switch-disabled-bg-color);
168
140
  border-color: var(--switch-disabled-border-color)
169
- }
170
- .switch__inactive_s25if .switch__switch_s25if:before {
141
+ } .switch__inactive_1pggx .switch__switch_1pggx:before {
171
142
  background-color: var(--switch-inactive-color);
172
- }
173
- /* Focused state */
174
- .switch__focused_s25if .switch__switch_s25if {
143
+ } /* Focused state */ .switch__focused_1pggx .switch__switch_1pggx {
175
144
  outline: 2px solid var(--focus-color);
176
145
  outline-offset: 2px;
177
146
  }
package/index.js CHANGED
@@ -1,11 +1,10 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var Component = require('./Component.js');
4
+ require('tslib');
6
5
  require('react');
7
- require('classnames');
8
6
  require('react-merge-refs');
7
+ require('classnames');
9
8
  require('@alfalab/hooks');
10
9
 
11
10
 
package/modern/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { InputHTMLAttributes, ChangeEvent, ReactNode } from "react";
3
+ import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
4
4
  type Align = 'start' | 'center';
5
5
  type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
6
6
  /**
@@ -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;
@@ -51,7 +51,7 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
51
51
  */
52
52
  dataTestId?: string;
53
53
  };
54
- declare const Switch: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
54
+ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
55
55
  /**
56
56
  * Управление состоянием вкл/выкл компонента
57
57
  */
@@ -59,11 +59,11 @@ declare const Switch: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttrib
59
59
  /**
60
60
  * Текст подписи к переключателю
61
61
  */
62
- label?: React.ReactNode;
62
+ label?: ReactNode;
63
63
  /**
64
64
  * Текст подсказки снизу
65
65
  */
66
- hint?: React.ReactNode;
66
+ hint?: ReactNode;
67
67
  /**
68
68
  * Переключатель будет отрисован справа от контента
69
69
  */
@@ -71,7 +71,7 @@ declare const Switch: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttrib
71
71
  /**
72
72
  * Выравнивание
73
73
  */
74
- align?: "start" | "center" | undefined;
74
+ align?: Align | undefined;
75
75
  /**
76
76
  * Дополнительный слот
77
77
  */
@@ -91,10 +91,10 @@ declare const Switch: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttrib
91
91
  /**
92
92
  * Обработчик переключения компонента
93
93
  */
94
- onChange?: ((event?: React.ChangeEvent<HTMLInputElement> | undefined, payload?: {
94
+ onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
95
95
  checked: boolean;
96
- name: string | undefined;
97
- } | undefined) => void) | undefined;
96
+ name: InputHTMLAttributes<HTMLInputElement>['name'];
97
+ }) => void) | undefined;
98
98
  /**
99
99
  * Идентификатор для систем автоматизированного тестирования
100
100
  */