@alfalab/core-components-switch 3.0.1 → 3.0.2

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 +8 -8
  2. package/Component.js +15 -17
  3. package/cssm/Component.d.ts +8 -8
  4. package/cssm/Component.js +21 -23
  5. package/cssm/index.js +1 -3
  6. package/cssm/index.module.css +1 -1
  7. package/esm/Component.d.ts +8 -8
  8. package/esm/Component.js +3 -3
  9. package/esm/index.css +27 -27
  10. package/esm/index.js +1 -1
  11. package/index.css +27 -27
  12. package/index.js +1 -3
  13. package/modern/Component.d.ts +8 -8
  14. package/modern/Component.js +3 -3
  15. package/modern/index.css +27 -27
  16. package/modern/index.js +2 -2
  17. package/package.json +1 -1
  18. package/send-stats.js +1 -1
package/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { 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
  /**
@@ -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/Component.js CHANGED
@@ -1,19 +1,17 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
- var cn = require('classnames');
7
4
  var mergeRefs = require('react-merge-refs');
5
+ var cn = require('classnames');
8
6
  var hooks = require('@alfalab/hooks');
9
7
 
10
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
11
9
 
12
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
14
- var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
10
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
11
+ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
12
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
13
 
16
- /*! *****************************************************************************
14
+ /******************************************************************************
17
15
  Copyright (c) Microsoft Corporation.
18
16
 
19
17
  Permission to use, copy, modify, and/or distribute this software for any
@@ -52,7 +50,7 @@ function __rest(s, e) {
52
50
  return t;
53
51
  }
54
52
 
55
- 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"};
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"};
56
54
  require('./index.css')
57
55
 
58
56
  var Switch = React.forwardRef(function (_a, ref) {
@@ -67,20 +65,20 @@ var Switch = React.forwardRef(function (_a, ref) {
67
65
  }, [onChange, name]);
68
66
  return (
69
67
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
70
- React__default['default'].createElement("label", { className: cn__default['default'](styles.component, styles[align], className, (_b = {},
68
+ React__default.default.createElement("label", { className: cn__default.default(styles.component, styles[align], className, (_b = {},
71
69
  _b[styles.disabled] = disabled,
72
70
  _b[styles.inactive] = inactive,
73
71
  _b[styles.checked] = checked,
74
72
  _b[styles.reversed] = reversed,
75
73
  _b[styles.focused] = focused,
76
74
  _b[styles.block] = block,
77
- _b)), ref: mergeRefs__default['default']([labelRef, ref]) },
78
- React__default['default'].createElement("input", __assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
79
- React__default['default'].createElement("span", { className: styles.switch }),
80
- (label || hint) && (React__default['default'].createElement("span", { className: styles.content },
81
- label && React__default['default'].createElement("span", { className: styles.label }, label),
82
- hint && React__default['default'].createElement("span", { className: styles.hint }, hint))),
83
- addons && React__default['default'].createElement("span", { className: styles.addons }, addons)));
75
+ _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)),
77
+ React__default.default.createElement("span", { className: styles.switch }),
78
+ (label || hint) && (React__default.default.createElement("span", { className: styles.content },
79
+ label && React__default.default.createElement("span", { className: styles.label }, label),
80
+ hint && React__default.default.createElement("span", { className: styles.hint }, hint))),
81
+ addons && React__default.default.createElement("span", { className: styles.addons }, addons)));
84
82
  });
85
83
 
86
84
  exports.Switch = Switch;
package/cssm/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
  /**
@@ -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/cssm/Component.js CHANGED
@@ -1,21 +1,19 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
- var cn = require('classnames');
7
4
  var mergeRefs = require('react-merge-refs');
5
+ var cn = require('classnames');
8
6
  var hooks = require('@alfalab/hooks');
9
7
  var styles = require('./index.module.css');
10
8
 
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
12
10
 
13
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
15
- var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
16
- var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
11
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
+ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
13
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
14
+ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
17
15
 
18
- /*! *****************************************************************************
16
+ /******************************************************************************
19
17
  Copyright (c) Microsoft Corporation.
20
18
 
21
19
  Permission to use, copy, modify, and/or distribute this software for any
@@ -66,20 +64,20 @@ var Switch = React.forwardRef(function (_a, ref) {
66
64
  }, [onChange, name]);
67
65
  return (
68
66
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
69
- React__default['default'].createElement("label", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][align], className, (_b = {},
70
- _b[styles__default['default'].disabled] = disabled,
71
- _b[styles__default['default'].inactive] = inactive,
72
- _b[styles__default['default'].checked] = checked,
73
- _b[styles__default['default'].reversed] = reversed,
74
- _b[styles__default['default'].focused] = focused,
75
- _b[styles__default['default'].block] = block,
76
- _b)), ref: mergeRefs__default['default']([labelRef, ref]) },
77
- React__default['default'].createElement("input", __assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
78
- React__default['default'].createElement("span", { className: styles__default['default'].switch }),
79
- (label || hint) && (React__default['default'].createElement("span", { className: styles__default['default'].content },
80
- label && React__default['default'].createElement("span", { className: styles__default['default'].label }, label),
81
- hint && React__default['default'].createElement("span", { className: styles__default['default'].hint }, hint))),
82
- addons && React__default['default'].createElement("span", { className: styles__default['default'].addons }, addons)));
67
+ React__default.default.createElement("label", { className: cn__default.default(styles__default.default.component, styles__default.default[align], className, (_b = {},
68
+ _b[styles__default.default.disabled] = disabled,
69
+ _b[styles__default.default.inactive] = inactive,
70
+ _b[styles__default.default.checked] = checked,
71
+ _b[styles__default.default.reversed] = reversed,
72
+ _b[styles__default.default.focused] = focused,
73
+ _b[styles__default.default.block] = block,
74
+ _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)),
76
+ React__default.default.createElement("span", { className: styles__default.default.switch }),
77
+ (label || hint) && (React__default.default.createElement("span", { className: styles__default.default.content },
78
+ label && React__default.default.createElement("span", { className: styles__default.default.label }, label),
79
+ hint && React__default.default.createElement("span", { className: styles__default.default.hint }, hint))),
80
+ addons && React__default.default.createElement("span", { className: styles__default.default.addons }, addons)));
83
81
  });
84
82
 
85
83
  exports.Switch = Switch;
package/cssm/index.js CHANGED
@@ -1,11 +1,9 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var Component = require('./Component.js');
6
4
  require('react');
7
- require('classnames');
8
5
  require('react-merge-refs');
6
+ require('classnames');
9
7
  require('@alfalab/hooks');
10
8
  require('./index.module.css');
11
9
 
package/cssm/index.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --color-light-graphic-quaternary: #dbdee1;
7
7
  --color-light-graphic-secondary: #6d7986;
8
8
  --color-light-text-primary: #0b1f35;
9
- --color-light-text-secondary: #546272;
9
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
10
10
  }
11
11
  :root {
12
12
 
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
  /**
@@ -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,9 +1,9 @@
1
1
  import React, { forwardRef, useRef, useCallback } from 'react';
2
- import cn from 'classnames';
3
2
  import mergeRefs from 'react-merge-refs';
3
+ import cn from 'classnames';
4
4
  import { useFocus } from '@alfalab/hooks';
5
5
 
6
- /*! *****************************************************************************
6
+ /******************************************************************************
7
7
  Copyright (c) Microsoft Corporation.
8
8
 
9
9
  Permission to use, copy, modify, and/or distribute this software for any
@@ -42,7 +42,7 @@ function __rest(s, e) {
42
42
  return t;
43
43
  }
44
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"};
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"};
46
46
  require('./index.css')
47
47
 
48
48
  var Switch = forwardRef(function (_a, ref) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: ibo40 */
1
+ /* hash: 1vs60 */
2
2
  :root {
3
3
  --color-light-border-link: #007aff;
4
4
  --color-light-border-underline: #b6bcc3;
@@ -7,7 +7,7 @@
7
7
  --color-light-graphic-quaternary: #dbdee1;
8
8
  --color-light-graphic-secondary: #6d7986;
9
9
  --color-light-text-primary: #0b1f35;
10
- --color-light-text-secondary: #546272;
10
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
11
11
  }
12
12
  :root {
13
13
 
@@ -49,7 +49,7 @@
49
49
  /* inactive */
50
50
  --switch-inactive-color: var(--color-light-border-underline);
51
51
  }
52
- .switch__component_s25if {
52
+ .switch__component_15fs8 {
53
53
  display: inline-flex;
54
54
  align-items: flex-start;
55
55
  margin: 0;
@@ -58,25 +58,25 @@
58
58
  cursor: pointer;
59
59
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
60
60
  }
61
- .switch__component_s25if input {
61
+ .switch__component_15fs8 input {
62
62
  opacity: 0;
63
63
  position: absolute;
64
64
  }
65
- .switch__start_s25if {
65
+ .switch__start_15fs8 {
66
66
  align-items: flex-start;
67
67
  }
68
- .switch__center_s25if {
68
+ .switch__center_15fs8 {
69
69
  align-items: center;
70
70
  }
71
- .switch__addons_s25if {
71
+ .switch__addons_15fs8 {
72
72
  margin-left: auto;
73
73
  padding-left: var(--gap-m);
74
74
  line-height: 24px;
75
75
  }
76
- .switch__block_s25if {
76
+ .switch__block_15fs8 {
77
77
  width: 100%;
78
78
  }
79
- .switch__switch_s25if {
79
+ .switch__switch_15fs8 {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -88,7 +88,7 @@
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box;
90
90
  }
91
- .switch__switch_s25if:before {
91
+ .switch__switch_15fs8:before {
92
92
  content: '';
93
93
  position: absolute;
94
94
  top: 0;
@@ -101,21 +101,21 @@
101
101
  box-sizing: border-box;
102
102
  transition: transform 0.2s ease;
103
103
  }
104
- .switch__content_s25if {
104
+ .switch__content_15fs8 {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
107
  }
108
- .switch__label_s25if {
108
+ .switch__label_15fs8 {
109
109
  font-size: 16px;
110
110
  line-height: 24px;
111
111
  font-weight: 400;
112
112
  display: block;
113
113
  color: var(--switch-label-color);
114
114
  }
115
- .switch__label_s25if:not(:only-child) {
115
+ .switch__label_15fs8:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
117
  }
118
- .switch__hint_s25if {
118
+ .switch__hint_15fs8 {
119
119
  font-size: 14px;
120
120
  line-height: 18px;
121
121
  font-weight: 400;
@@ -123,55 +123,55 @@
123
123
  color: var(--switch-hint-color);
124
124
  }
125
125
  /* Reversed state */
126
- .switch__component_s25if.switch__reversed_s25if {
126
+ .switch__component_15fs8.switch__reversed_15fs8 {
127
127
  flex-direction: row-reverse;
128
128
  }
129
- .switch__reversed_s25if .switch__content_s25if {
129
+ .switch__reversed_15fs8 .switch__content_15fs8 {
130
130
  margin-right: var(--gap-m);
131
131
  margin-left: 0;
132
132
  }
133
- .switch__reversed_s25if .switch__addons_s25if {
133
+ .switch__reversed_15fs8 .switch__addons_15fs8 {
134
134
  margin-left: 0;
135
135
  padding-left: 0;
136
136
  margin-right: auto;
137
137
  padding-right: var(--gap-m);
138
138
  }
139
139
  /* Checked state */
140
- .switch__checked_s25if .switch__switch_s25if {
140
+ .switch__checked_15fs8 .switch__switch_15fs8 {
141
141
  background-color: var(--switch-checked-bg-color);
142
142
  border-color: var(--switch-checked-border-color);
143
143
  }
144
- .switch__checked_s25if .switch__switch_s25if:before {
144
+ .switch__checked_15fs8 .switch__switch_15fs8:before {
145
145
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
146
  transform: translateX(16px);
147
147
  }
148
148
  /* Disabled state */
149
- .switch__disabled_s25if {
149
+ .switch__disabled_15fs8 {
150
150
  cursor: var(--disabled-cursor);
151
151
  }
152
- .switch__disabled_s25if .switch__switch_s25if {
152
+ .switch__disabled_15fs8 .switch__switch_15fs8 {
153
153
  background-color: var(--switch-disabled-bg-color);
154
154
  border-color: var(--switch-disabled-border-color);
155
155
  }
156
- .switch__disabled_s25if .switch__label_s25if {
156
+ .switch__disabled_15fs8 .switch__label_15fs8 {
157
157
  color: var(--switch-disabled-color);
158
158
  }
159
- .switch__disabled_s25if .switch__hint_s25if {
159
+ .switch__disabled_15fs8 .switch__hint_15fs8 {
160
160
  color: var(--switch-disabled-color);
161
161
  }
162
162
  /* Inactive */
163
- .switch__inactive_s25if {
163
+ .switch__inactive_15fs8 {
164
164
  cursor: var(--disabled-cursor);
165
165
  }
166
- .switch__inactive_s25if .switch__switch_s25if {
166
+ .switch__inactive_15fs8 .switch__switch_15fs8 {
167
167
  background-color: var(--switch-disabled-bg-color);
168
168
  border-color: var(--switch-disabled-border-color)
169
169
  }
170
- .switch__inactive_s25if .switch__switch_s25if:before {
170
+ .switch__inactive_15fs8 .switch__switch_15fs8:before {
171
171
  background-color: var(--switch-inactive-color);
172
172
  }
173
173
  /* Focused state */
174
- .switch__focused_s25if .switch__switch_s25if {
174
+ .switch__focused_15fs8 .switch__switch_15fs8 {
175
175
  outline: 2px solid var(--focus-color);
176
176
  outline-offset: 2px;
177
177
  }
package/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export { Switch } from './Component.js';
2
2
  import 'react';
3
- import 'classnames';
4
3
  import 'react-merge-refs';
4
+ import 'classnames';
5
5
  import '@alfalab/hooks';
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: ibo40 */
1
+ /* hash: 1vs60 */
2
2
  :root {
3
3
  --color-light-border-link: #007aff;
4
4
  --color-light-border-underline: #b6bcc3;
@@ -7,7 +7,7 @@
7
7
  --color-light-graphic-quaternary: #dbdee1;
8
8
  --color-light-graphic-secondary: #6d7986;
9
9
  --color-light-text-primary: #0b1f35;
10
- --color-light-text-secondary: #546272;
10
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
11
11
  }
12
12
  :root {
13
13
 
@@ -49,7 +49,7 @@
49
49
  /* inactive */
50
50
  --switch-inactive-color: var(--color-light-border-underline);
51
51
  }
52
- .switch__component_s25if {
52
+ .switch__component_15fs8 {
53
53
  display: inline-flex;
54
54
  align-items: flex-start;
55
55
  margin: 0;
@@ -58,25 +58,25 @@
58
58
  cursor: pointer;
59
59
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
60
60
  }
61
- .switch__component_s25if input {
61
+ .switch__component_15fs8 input {
62
62
  opacity: 0;
63
63
  position: absolute;
64
64
  }
65
- .switch__start_s25if {
65
+ .switch__start_15fs8 {
66
66
  align-items: flex-start;
67
67
  }
68
- .switch__center_s25if {
68
+ .switch__center_15fs8 {
69
69
  align-items: center;
70
70
  }
71
- .switch__addons_s25if {
71
+ .switch__addons_15fs8 {
72
72
  margin-left: auto;
73
73
  padding-left: var(--gap-m);
74
74
  line-height: 24px;
75
75
  }
76
- .switch__block_s25if {
76
+ .switch__block_15fs8 {
77
77
  width: 100%;
78
78
  }
79
- .switch__switch_s25if {
79
+ .switch__switch_15fs8 {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -88,7 +88,7 @@
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box;
90
90
  }
91
- .switch__switch_s25if:before {
91
+ .switch__switch_15fs8:before {
92
92
  content: '';
93
93
  position: absolute;
94
94
  top: 0;
@@ -101,21 +101,21 @@
101
101
  box-sizing: border-box;
102
102
  transition: transform 0.2s ease;
103
103
  }
104
- .switch__content_s25if {
104
+ .switch__content_15fs8 {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
107
  }
108
- .switch__label_s25if {
108
+ .switch__label_15fs8 {
109
109
  font-size: 16px;
110
110
  line-height: 24px;
111
111
  font-weight: 400;
112
112
  display: block;
113
113
  color: var(--switch-label-color);
114
114
  }
115
- .switch__label_s25if:not(:only-child) {
115
+ .switch__label_15fs8:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
117
  }
118
- .switch__hint_s25if {
118
+ .switch__hint_15fs8 {
119
119
  font-size: 14px;
120
120
  line-height: 18px;
121
121
  font-weight: 400;
@@ -123,55 +123,55 @@
123
123
  color: var(--switch-hint-color);
124
124
  }
125
125
  /* Reversed state */
126
- .switch__component_s25if.switch__reversed_s25if {
126
+ .switch__component_15fs8.switch__reversed_15fs8 {
127
127
  flex-direction: row-reverse;
128
128
  }
129
- .switch__reversed_s25if .switch__content_s25if {
129
+ .switch__reversed_15fs8 .switch__content_15fs8 {
130
130
  margin-right: var(--gap-m);
131
131
  margin-left: 0;
132
132
  }
133
- .switch__reversed_s25if .switch__addons_s25if {
133
+ .switch__reversed_15fs8 .switch__addons_15fs8 {
134
134
  margin-left: 0;
135
135
  padding-left: 0;
136
136
  margin-right: auto;
137
137
  padding-right: var(--gap-m);
138
138
  }
139
139
  /* Checked state */
140
- .switch__checked_s25if .switch__switch_s25if {
140
+ .switch__checked_15fs8 .switch__switch_15fs8 {
141
141
  background-color: var(--switch-checked-bg-color);
142
142
  border-color: var(--switch-checked-border-color);
143
143
  }
144
- .switch__checked_s25if .switch__switch_s25if:before {
144
+ .switch__checked_15fs8 .switch__switch_15fs8:before {
145
145
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
146
  transform: translateX(16px);
147
147
  }
148
148
  /* Disabled state */
149
- .switch__disabled_s25if {
149
+ .switch__disabled_15fs8 {
150
150
  cursor: var(--disabled-cursor);
151
151
  }
152
- .switch__disabled_s25if .switch__switch_s25if {
152
+ .switch__disabled_15fs8 .switch__switch_15fs8 {
153
153
  background-color: var(--switch-disabled-bg-color);
154
154
  border-color: var(--switch-disabled-border-color);
155
155
  }
156
- .switch__disabled_s25if .switch__label_s25if {
156
+ .switch__disabled_15fs8 .switch__label_15fs8 {
157
157
  color: var(--switch-disabled-color);
158
158
  }
159
- .switch__disabled_s25if .switch__hint_s25if {
159
+ .switch__disabled_15fs8 .switch__hint_15fs8 {
160
160
  color: var(--switch-disabled-color);
161
161
  }
162
162
  /* Inactive */
163
- .switch__inactive_s25if {
163
+ .switch__inactive_15fs8 {
164
164
  cursor: var(--disabled-cursor);
165
165
  }
166
- .switch__inactive_s25if .switch__switch_s25if {
166
+ .switch__inactive_15fs8 .switch__switch_15fs8 {
167
167
  background-color: var(--switch-disabled-bg-color);
168
168
  border-color: var(--switch-disabled-border-color)
169
169
  }
170
- .switch__inactive_s25if .switch__switch_s25if:before {
170
+ .switch__inactive_15fs8 .switch__switch_15fs8:before {
171
171
  background-color: var(--switch-inactive-color);
172
172
  }
173
173
  /* Focused state */
174
- .switch__focused_s25if .switch__switch_s25if {
174
+ .switch__focused_15fs8 .switch__switch_15fs8 {
175
175
  outline: 2px solid var(--focus-color);
176
176
  outline-offset: 2px;
177
177
  }
package/index.js CHANGED
@@ -1,11 +1,9 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var Component = require('./Component.js');
6
4
  require('react');
7
- require('classnames');
8
5
  require('react-merge-refs');
6
+ require('classnames');
9
7
  require('@alfalab/hooks');
10
8
 
11
9
 
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
  /**
@@ -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/modern/Component.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import React, { forwardRef, useRef, useCallback } from 'react';
2
- import cn from 'classnames';
3
2
  import mergeRefs from 'react-merge-refs';
3
+ import cn from 'classnames';
4
4
  import { useFocus } from '@alfalab/hooks';
5
5
 
6
- 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"};
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"};
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) => {
@@ -24,7 +24,7 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
24
24
  [styles.focused]: focused,
25
25
  [styles.block]: block,
26
26
  }), ref: mergeRefs([labelRef, ref]) },
27
- React.createElement("input", Object.assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
27
+ React.createElement("input", { type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId, ...restProps }),
28
28
  React.createElement("span", { className: styles.switch }),
29
29
  (label || hint) && (React.createElement("span", { className: styles.content },
30
30
  label && React.createElement("span", { className: styles.label }, label),
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: ibo40 */
1
+ /* hash: 1vs60 */
2
2
  :root {
3
3
  --color-light-border-link: #007aff;
4
4
  --color-light-border-underline: #b6bcc3;
@@ -7,7 +7,7 @@
7
7
  --color-light-graphic-quaternary: #dbdee1;
8
8
  --color-light-graphic-secondary: #6d7986;
9
9
  --color-light-text-primary: #0b1f35;
10
- --color-light-text-secondary: #546272;
10
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
11
11
  }
12
12
  :root {
13
13
 
@@ -49,7 +49,7 @@
49
49
  /* inactive */
50
50
  --switch-inactive-color: var(--color-light-border-underline);
51
51
  }
52
- .switch__component_s25if {
52
+ .switch__component_15fs8 {
53
53
  display: inline-flex;
54
54
  align-items: flex-start;
55
55
  margin: 0;
@@ -58,25 +58,25 @@
58
58
  cursor: pointer;
59
59
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
60
60
  }
61
- .switch__component_s25if input {
61
+ .switch__component_15fs8 input {
62
62
  opacity: 0;
63
63
  position: absolute;
64
64
  }
65
- .switch__start_s25if {
65
+ .switch__start_15fs8 {
66
66
  align-items: flex-start;
67
67
  }
68
- .switch__center_s25if {
68
+ .switch__center_15fs8 {
69
69
  align-items: center;
70
70
  }
71
- .switch__addons_s25if {
71
+ .switch__addons_15fs8 {
72
72
  margin-left: auto;
73
73
  padding-left: var(--gap-m);
74
74
  line-height: 24px;
75
75
  }
76
- .switch__block_s25if {
76
+ .switch__block_15fs8 {
77
77
  width: 100%;
78
78
  }
79
- .switch__switch_s25if {
79
+ .switch__switch_15fs8 {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -88,7 +88,7 @@
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box;
90
90
  }
91
- .switch__switch_s25if:before {
91
+ .switch__switch_15fs8:before {
92
92
  content: '';
93
93
  position: absolute;
94
94
  top: 0;
@@ -101,21 +101,21 @@
101
101
  box-sizing: border-box;
102
102
  transition: transform 0.2s ease;
103
103
  }
104
- .switch__content_s25if {
104
+ .switch__content_15fs8 {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
107
  }
108
- .switch__label_s25if {
108
+ .switch__label_15fs8 {
109
109
  font-size: 16px;
110
110
  line-height: 24px;
111
111
  font-weight: 400;
112
112
  display: block;
113
113
  color: var(--switch-label-color);
114
114
  }
115
- .switch__label_s25if:not(:only-child) {
115
+ .switch__label_15fs8:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
117
  }
118
- .switch__hint_s25if {
118
+ .switch__hint_15fs8 {
119
119
  font-size: 14px;
120
120
  line-height: 18px;
121
121
  font-weight: 400;
@@ -123,55 +123,55 @@
123
123
  color: var(--switch-hint-color);
124
124
  }
125
125
  /* Reversed state */
126
- .switch__component_s25if.switch__reversed_s25if {
126
+ .switch__component_15fs8.switch__reversed_15fs8 {
127
127
  flex-direction: row-reverse;
128
128
  }
129
- .switch__reversed_s25if .switch__content_s25if {
129
+ .switch__reversed_15fs8 .switch__content_15fs8 {
130
130
  margin-right: var(--gap-m);
131
131
  margin-left: 0;
132
132
  }
133
- .switch__reversed_s25if .switch__addons_s25if {
133
+ .switch__reversed_15fs8 .switch__addons_15fs8 {
134
134
  margin-left: 0;
135
135
  padding-left: 0;
136
136
  margin-right: auto;
137
137
  padding-right: var(--gap-m);
138
138
  }
139
139
  /* Checked state */
140
- .switch__checked_s25if .switch__switch_s25if {
140
+ .switch__checked_15fs8 .switch__switch_15fs8 {
141
141
  background-color: var(--switch-checked-bg-color);
142
142
  border-color: var(--switch-checked-border-color);
143
143
  }
144
- .switch__checked_s25if .switch__switch_s25if:before {
144
+ .switch__checked_15fs8 .switch__switch_15fs8:before {
145
145
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
146
146
  transform: translateX(16px);
147
147
  }
148
148
  /* Disabled state */
149
- .switch__disabled_s25if {
149
+ .switch__disabled_15fs8 {
150
150
  cursor: var(--disabled-cursor);
151
151
  }
152
- .switch__disabled_s25if .switch__switch_s25if {
152
+ .switch__disabled_15fs8 .switch__switch_15fs8 {
153
153
  background-color: var(--switch-disabled-bg-color);
154
154
  border-color: var(--switch-disabled-border-color);
155
155
  }
156
- .switch__disabled_s25if .switch__label_s25if {
156
+ .switch__disabled_15fs8 .switch__label_15fs8 {
157
157
  color: var(--switch-disabled-color);
158
158
  }
159
- .switch__disabled_s25if .switch__hint_s25if {
159
+ .switch__disabled_15fs8 .switch__hint_15fs8 {
160
160
  color: var(--switch-disabled-color);
161
161
  }
162
162
  /* Inactive */
163
- .switch__inactive_s25if {
163
+ .switch__inactive_15fs8 {
164
164
  cursor: var(--disabled-cursor);
165
165
  }
166
- .switch__inactive_s25if .switch__switch_s25if {
166
+ .switch__inactive_15fs8 .switch__switch_15fs8 {
167
167
  background-color: var(--switch-disabled-bg-color);
168
168
  border-color: var(--switch-disabled-border-color)
169
169
  }
170
- .switch__inactive_s25if .switch__switch_s25if:before {
170
+ .switch__inactive_15fs8 .switch__switch_15fs8:before {
171
171
  background-color: var(--switch-inactive-color);
172
172
  }
173
173
  /* Focused state */
174
- .switch__focused_s25if .switch__switch_s25if {
174
+ .switch__focused_15fs8 .switch__switch_15fs8 {
175
175
  outline: 2px solid var(--focus-color);
176
176
  outline-offset: 2px;
177
177
  }
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
+ export { Switch } from './Component.js';
1
2
  import 'react';
2
- import 'classnames';
3
3
  import 'react-merge-refs';
4
+ import 'classnames';
4
5
  import '@alfalab/hooks';
5
- export { Switch } from './Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "3.0.1",
3
+ "version": "3.0.2",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
package/send-stats.js CHANGED
@@ -55,7 +55,7 @@ async function main() {
55
55
  };
56
56
 
57
57
  return new Promise((resolve, reject) => {
58
- const req = http.request(options, res => {
58
+ const req = http.request(options, (res) => {
59
59
  res.on('end', () => {
60
60
  resolve();
61
61
  });