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