@alfalab/core-components-switch 6.0.3-alfasans → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/Component.d.ts +10 -0
  2. package/Component.js +15 -5
  3. package/Component.js.map +1 -1
  4. package/cssm/Component.d.ts +10 -0
  5. package/cssm/Component.js +17 -7
  6. package/cssm/Component.js.map +1 -1
  7. package/cssm/index.module.css +28 -12
  8. package/default.css +11 -11
  9. package/default.module.css.js +1 -1
  10. package/esm/Component.d.ts +10 -0
  11. package/esm/Component.js +15 -5
  12. package/esm/Component.js.map +1 -1
  13. package/esm/default.css +11 -11
  14. package/esm/default.module.css.js +1 -1
  15. package/esm/index.css +46 -30
  16. package/esm/index.module.css.js +1 -1
  17. package/esm/index.module.css.js.map +1 -1
  18. package/esm/inverted.css +11 -11
  19. package/esm/inverted.module.css.js +1 -1
  20. package/index.css +46 -30
  21. package/index.module.css.js +1 -1
  22. package/index.module.css.js.map +1 -1
  23. package/inverted.css +11 -11
  24. package/inverted.module.css.js +1 -1
  25. package/modern/Component.d.ts +10 -0
  26. package/modern/Component.js +14 -4
  27. package/modern/Component.js.map +1 -1
  28. package/modern/default.css +11 -11
  29. package/modern/default.module.css.js +1 -1
  30. package/modern/index.css +46 -30
  31. package/modern/index.module.css.js +1 -1
  32. package/modern/index.module.css.js.map +1 -1
  33. package/modern/inverted.css +11 -11
  34. package/modern/inverted.module.css.js +1 -1
  35. package/moderncssm/Component.d.ts +10 -0
  36. package/moderncssm/Component.js +14 -4
  37. package/moderncssm/Component.js.map +1 -1
  38. package/moderncssm/index.module.css +27 -9
  39. package/package.json +5 -4
  40. package/src/Component.tsx +43 -7
  41. package/src/index.module.css +27 -2
package/Component.d.ts CHANGED
@@ -54,6 +54,11 @@ export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | '
54
54
  * @default default
55
55
  */
56
56
  colors?: Colors;
57
+ /**
58
+ * Показать скелетон
59
+ * @default false
60
+ */
61
+ showSkeleton?: boolean;
57
62
  };
58
63
  export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
59
64
  /**
@@ -108,5 +113,10 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
108
113
  * @default default
109
114
  */
110
115
  colors?: Colors;
116
+ /**
117
+ * Показать скелетон
118
+ * @default false
119
+ */
120
+ showSkeleton?: boolean;
111
121
  } & React.RefAttributes<HTMLLabelElement>>;
112
122
  export {};
package/Component.js CHANGED
@@ -7,6 +7,7 @@ var React = require('react');
7
7
  var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
9
  var coreComponentsShared = require('@alfalab/core-components-shared');
10
+ var coreComponentsSkeleton = require('@alfalab/core-components-skeleton');
10
11
  var hooks = require('@alfalab/hooks');
11
12
  var default_module = require('./default.module.css.js');
12
13
  var index_module = require('./index.module.css.js');
@@ -23,8 +24,8 @@ var colorStyles = {
23
24
  inverted: inverted_module,
24
25
  };
25
26
  var Switch = React.forwardRef(function (_a, ref) {
26
- var _b;
27
- 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, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors"]);
27
+ var _b, _c, _d, _e;
28
+ var _f = _a.reversed, reversed = _f === void 0 ? false : _f, _g = _a.checked, checked = _g === void 0 ? false : _g, _h = _a.align, align = _h === void 0 ? 'start' : _h, addons = _a.addons, block = _a.block, disabled = _a.disabled, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _j = _a.colors, colors = _j === void 0 ? 'default' : _j, _k = _a.showSkeleton, showSkeleton = _k === void 0 ? false : _k, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors", "showSkeleton"]);
28
29
  var labelRef = React.useRef(null);
29
30
  var focused = hooks.useFocus(labelRef, 'keyboard')[0];
30
31
  var handleChange = function (e) {
@@ -43,10 +44,19 @@ var Switch = React.forwardRef(function (_a, ref) {
43
44
  _b[index_module.block] = block,
44
45
  _b)), ref: mergeRefs__default.default([labelRef, ref]) },
45
46
  React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
46
- React__default.default.createElement("span", { className: cn__default.default(index_module.switch, colorStyles[colors].switch) }),
47
+ React__default.default.createElement(coreComponentsSkeleton.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default((_c = {},
48
+ _c[index_module.switchSkeleton] = showSkeleton,
49
+ _c)) },
50
+ React__default.default.createElement("span", { className: cn__default.default(index_module.switch, colorStyles[colors].switch) })),
47
51
  (label || hint || errorMessage) && (React__default.default.createElement("span", { className: index_module.content },
48
- label && (React__default.default.createElement("span", { className: cn__default.default(index_module.label, colorStyles[colors].label) }, label)),
49
- hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(index_module.hint, colorStyles[colors].hint) }, hint)),
52
+ label && (React__default.default.createElement(coreComponentsSkeleton.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default(index_module.labelWrap, (_d = {},
53
+ _d[index_module.loading] = showSkeleton,
54
+ _d)) },
55
+ React__default.default.createElement("span", { className: cn__default.default(index_module.label, colorStyles[colors].label) }, label))),
56
+ hint && !errorMessage && (React__default.default.createElement(coreComponentsSkeleton.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default(index_module.hintWrap, (_e = {},
57
+ _e[index_module.loading] = showSkeleton,
58
+ _e)) },
59
+ React__default.default.createElement("span", { className: cn__default.default(index_module.hint, colorStyles[colors].hint) }, hint))),
50
60
  errorMessage && (React__default.default.createElement("span", { className: index_module.errorMessage, role: 'alert' }, errorMessage)))),
51
61
  addons && (
52
62
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
package/Component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled,\n [colorStyles[colors].disabled]: disabled,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n )}\n {hint && !errorMessage && (\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["defaultStyles","invertedStyles","forwardRef","__rest","useRef","useFocus","React","cn","styles","mergeRefs","__assign","dom"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { Skeleton } from '@alfalab/core-components-skeleton';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n\n /**\n * Показать скелетон\n * @default false\n */\n showSkeleton?: boolean;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n showSkeleton = false,\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled,\n [colorStyles[colors].disabled]: disabled,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn({\n [styles.switchSkeleton]: showSkeleton,\n })}\n >\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n </Skeleton>\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn(styles.labelWrap, {\n [styles.loading]: showSkeleton,\n })}\n >\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n </Skeleton>\n )}\n\n {hint && !errorMessage && (\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn(styles.hintWrap, {\n [styles.loading]: showSkeleton,\n })}\n >\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n </Skeleton>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["defaultStyles","invertedStyles","forwardRef","__rest","useRef","useFocus","React","cn","styles","mergeRefs","__assign","Skeleton","dom"],"mappings":"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"}
package/cssm/Component.d.ts CHANGED
@@ -54,6 +54,11 @@ export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | '
54
54
  * @default default
55
55
  */
56
56
  colors?: Colors;
57
+ /**
58
+ * Показать скелетон
59
+ * @default false
60
+ */
61
+ showSkeleton?: boolean;
57
62
  };
58
63
  export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
59
64
  /**
@@ -108,5 +113,10 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
108
113
  * @default default
109
114
  */
110
115
  colors?: Colors;
116
+ /**
117
+ * Показать скелетон
118
+ * @default false
119
+ */
120
+ showSkeleton?: boolean;
111
121
  } & React.RefAttributes<HTMLLabelElement>>;
112
122
  export {};
package/cssm/Component.js CHANGED
@@ -6,7 +6,8 @@ var tslib = require('tslib');
6
6
  var React = require('react');
7
7
  var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
- var cssm = require('@alfalab/core-components-shared/cssm');
9
+ var cssm$1 = require('@alfalab/core-components-shared/cssm');
10
+ var cssm = require('@alfalab/core-components-skeleton/cssm');
10
11
  var hooks = require('@alfalab/hooks');
11
12
  var defaultStyles = require('./default.module.css');
12
13
  var styles = require('./index.module.css');
@@ -26,8 +27,8 @@ var colorStyles = {
26
27
  inverted: invertedStyles__default.default,
27
28
  };
28
29
  var Switch = React.forwardRef(function (_a, ref) {
29
- var _b;
30
- 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, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors"]);
30
+ var _b, _c, _d, _e;
31
+ var _f = _a.reversed, reversed = _f === void 0 ? false : _f, _g = _a.checked, checked = _g === void 0 ? false : _g, _h = _a.align, align = _h === void 0 ? 'start' : _h, addons = _a.addons, block = _a.block, disabled = _a.disabled, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _j = _a.colors, colors = _j === void 0 ? 'default' : _j, _k = _a.showSkeleton, showSkeleton = _k === void 0 ? false : _k, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors", "showSkeleton"]);
31
32
  var labelRef = React.useRef(null);
32
33
  var focused = hooks.useFocus(labelRef, 'keyboard')[0];
33
34
  var handleChange = function (e) {
@@ -46,14 +47,23 @@ var Switch = React.forwardRef(function (_a, ref) {
46
47
  _b[styles__default.default.block] = block,
47
48
  _b)), ref: mergeRefs__default.default([labelRef, ref]) },
48
49
  React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
49
- React__default.default.createElement("span", { className: cn__default.default(styles__default.default.switch, colorStyles[colors].switch) }),
50
+ React__default.default.createElement(cssm.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default((_c = {},
51
+ _c[styles__default.default.switchSkeleton] = showSkeleton,
52
+ _c)) },
53
+ React__default.default.createElement("span", { className: cn__default.default(styles__default.default.switch, colorStyles[colors].switch) })),
50
54
  (label || hint || errorMessage) && (React__default.default.createElement("span", { className: styles__default.default.content },
51
- label && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.label, colorStyles[colors].label) }, label)),
52
- hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.hint, colorStyles[colors].hint) }, hint)),
55
+ label && (React__default.default.createElement(cssm.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default(styles__default.default.labelWrap, (_d = {},
56
+ _d[styles__default.default.loading] = showSkeleton,
57
+ _d)) },
58
+ React__default.default.createElement("span", { className: cn__default.default(styles__default.default.label, colorStyles[colors].label) }, label))),
59
+ hint && !errorMessage && (React__default.default.createElement(cssm.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default(styles__default.default.hintWrap, (_e = {},
60
+ _e[styles__default.default.loading] = showSkeleton,
61
+ _e)) },
62
+ React__default.default.createElement("span", { className: cn__default.default(styles__default.default.hint, colorStyles[colors].hint) }, hint))),
53
63
  errorMessage && (React__default.default.createElement("span", { className: styles__default.default.errorMessage, role: 'alert' }, errorMessage)))),
54
64
  addons && (
55
65
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
56
- React__default.default.createElement("span", { className: styles__default.default.addons, onClick: cssm.dom.preventDefault }, addons))));
66
+ React__default.default.createElement("span", { className: styles__default.default.addons, onClick: cssm$1.dom.preventDefault }, addons))));
57
67
  });
58
68
  Switch.displayName = 'Switch';
59
69
 
package/cssm/Component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled,\n [colorStyles[colors].disabled]: disabled,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n )}\n {hint && !errorMessage && (\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["defaultStyles","invertedStyles","forwardRef","__rest","useRef","useFocus","React","cn","styles","mergeRefs","__assign","dom"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { Skeleton } from '@alfalab/core-components-skeleton';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n\n /**\n * Показать скелетон\n * @default false\n */\n showSkeleton?: boolean;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n showSkeleton = false,\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled,\n [colorStyles[colors].disabled]: disabled,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn({\n [styles.switchSkeleton]: showSkeleton,\n })}\n >\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n </Skeleton>\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn(styles.labelWrap, {\n [styles.loading]: showSkeleton,\n })}\n >\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n </Skeleton>\n )}\n\n {hint && !errorMessage && (\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn(styles.hintWrap, {\n [styles.loading]: showSkeleton,\n })}\n >\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n </Skeleton>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["defaultStyles","invertedStyles","forwardRef","__rest","useRef","useFocus","React","cn","styles","mergeRefs","__assign","Skeleton","dom"],"mappings":"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"}
package/cssm/index.module.css CHANGED
@@ -12,17 +12,19 @@
12
12
  --gap-3xs: 2px;
13
13
  --gap-2xs: 4px;
14
14
  --gap-s: 12px;
15
+ --gap-2s: 14px;
15
16
  --gap-m: 16px;
16
17
  --gap-0: 0px;
17
18
  --gap-2: var(--gap-3xs);
18
19
  --gap-4: var(--gap-2xs);
20
+ --gap-6: 6px;
21
+ --gap-10: 10px;
19
22
  --gap-12: var(--gap-s);
20
23
  --gap-16: var(--gap-m);
21
24
  }
22
25
  :root {
23
- --font-family-alfasans:
24
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
25
- Helvetica, sans-serif;
26
+ --font-family-system:
27
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
28
  }
27
29
  :root {
28
30
  --focus-color: var(--color-light-status-info);
@@ -62,6 +64,7 @@
62
64
  }
63
65
  .switch {
64
66
  position: relative;
67
+ display: block;
65
68
  border-radius: var(--border-radius-16);
66
69
  width: 36px;
67
70
  height: 20px;
@@ -73,6 +76,11 @@
73
76
  border-color 0.2s ease;
74
77
  box-sizing: border-box;
75
78
  }
79
+ .switchSkeleton {
80
+ width: 36px;
81
+ height: 20px;
82
+ margin: var(--gap-2);
83
+ }
76
84
  .switch:before {
77
85
  content: '';
78
86
  position: absolute;
@@ -94,29 +102,37 @@
94
102
  font-size: 16px;
95
103
  line-height: 24px;
96
104
  font-weight: 400;
97
- letter-spacing: -0.24px;
98
- font-family: var(--font-family-alfasans);
105
+ font-family: var(--font-family-system);
99
106
  display: block;
100
107
  }
101
- .label:not(:only-child) {
102
- margin-bottom: var(--gap-4);
103
- }
108
+ .labelWrap:not(:only-child) {
109
+ margin-bottom: var(--gap-4);
110
+ }
111
+ .labelWrap.loading {
112
+ height: var(--gap-12);
113
+ margin: var(--gap-6) 0;
114
+ }
115
+ .labelWrap.loading:not(:only-child) {
116
+ margin-bottom: var(--gap-2s);
117
+ }
104
118
  .errorMessage {
105
119
  font-size: 14px;
106
120
  line-height: 18px;
107
121
  font-weight: 400;
108
- letter-spacing: -0.08px;
109
- font-family: var(--font-family-alfasans);
122
+ font-family: var(--font-family-system);
110
123
  color: var(--switch-error-color);
111
124
  }
112
125
  .hint {
113
126
  font-size: 14px;
114
127
  line-height: 18px;
115
128
  font-weight: 400;
116
- letter-spacing: -0.08px;
117
- font-family: var(--font-family-alfasans);
129
+ font-family: var(--font-family-system);
118
130
  display: block;
119
131
  }
132
+ .hintWrap.loading {
133
+ height: var(--gap-10);
134
+ margin-bottom: var(--gap-4);
135
+ }
120
136
  .component.reversed {
121
137
  flex-direction: row-reverse;
122
138
  }
package/default.css CHANGED
@@ -20,36 +20,36 @@
20
20
  --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
21
21
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
22
22
  }
23
- .switch__switch_1i7xt {
23
+ .switch__switch_1cr6w {
24
24
  background-color: var(--switch-bg-color);
25
25
  }
26
- .switch__switch_1i7xt:hover {
26
+ .switch__switch_1cr6w:hover {
27
27
  background-color: var(--switch-hover-bg-color);
28
28
  }
29
- .switch__label_1i7xt {
29
+ .switch__label_1cr6w {
30
30
  color: var(--switch-label-color);
31
31
  }
32
- .switch__hint_1i7xt {
32
+ .switch__hint_1cr6w {
33
33
  color: var(--switch-hint-color);
34
34
  }
35
- .switch__checked_1i7xt .switch__switch_1i7xt {
35
+ .switch__checked_1cr6w .switch__switch_1cr6w {
36
36
  background-color: var(--switch-checked-bg-color);
37
37
  }
38
- .switch__checked_1i7xt .switch__switch_1i7xt:hover {
38
+ .switch__checked_1cr6w .switch__switch_1cr6w:hover {
39
39
  background-color: var(--switch-checked-hover-bg-color);
40
40
  }
41
- .switch__disabled_1i7xt .switch__label_1i7xt {
41
+ .switch__disabled_1cr6w .switch__label_1cr6w {
42
42
  color: var(--switch-disabled-color);
43
43
  }
44
- .switch__disabled_1i7xt .switch__hint_1i7xt {
44
+ .switch__disabled_1cr6w .switch__hint_1cr6w {
45
45
  color: var(--switch-disabled-color);
46
46
  }
47
- .switch__disabled_1i7xt .switch__switch_1i7xt {
47
+ .switch__disabled_1cr6w .switch__switch_1cr6w {
48
48
  background-color: var(--switch-disabled-bg-color);
49
49
  }
50
- .switch__disabled_1i7xt .switch__switch_1i7xt:before {
50
+ .switch__disabled_1cr6w .switch__switch_1cr6w:before {
51
51
  background-color: var(--switch-icon-disabled-color);
52
52
  }
53
- .switch__disabled_1i7xt.switch__checked_1i7xt .switch__switch_1i7xt {
53
+ .switch__disabled_1cr6w.switch__checked_1cr6w .switch__switch_1cr6w {
54
54
  background-color: var(--switch-disabled-checked-bg-color);
55
55
  }
package/default.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./default.css');
4
4
 
5
- var defaultStyles = {"switch":"switch__switch_1i7xt","label":"switch__label_1i7xt","hint":"switch__hint_1i7xt","checked":"switch__checked_1i7xt","disabled":"switch__disabled_1i7xt"};
5
+ var defaultStyles = {"switch":"switch__switch_1cr6w","label":"switch__label_1cr6w","hint":"switch__hint_1cr6w","checked":"switch__checked_1cr6w","disabled":"switch__disabled_1cr6w"};
6
6
 
7
7
  module.exports = defaultStyles;
8
8
  //# sourceMappingURL=default.module.css.js.map
package/esm/Component.d.ts CHANGED
@@ -54,6 +54,11 @@ export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | '
54
54
  * @default default
55
55
  */
56
56
  colors?: Colors;
57
+ /**
58
+ * Показать скелетон
59
+ * @default false
60
+ */
61
+ showSkeleton?: boolean;
57
62
  };
58
63
  export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
59
64
  /**
@@ -108,5 +113,10 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
108
113
  * @default default
109
114
  */
110
115
  colors?: Colors;
116
+ /**
117
+ * Показать скелетон
118
+ * @default false
119
+ */
120
+ showSkeleton?: boolean;
111
121
  } & React.RefAttributes<HTMLLabelElement>>;
112
122
  export {};
package/esm/Component.js CHANGED
@@ -3,6 +3,7 @@ import React, { forwardRef, useRef } from 'react';
3
3
  import mergeRefs from 'react-merge-refs';
4
4
  import cn from 'classnames';
5
5
  import { dom } from '@alfalab/core-components-shared/esm';
6
+ import { Skeleton } from '@alfalab/core-components-skeleton/esm';
6
7
  import { useFocus } from '@alfalab/hooks';
7
8
  import defaultStyles from './default.module.css.js';
8
9
  import styles from './index.module.css.js';
@@ -13,8 +14,8 @@ var colorStyles = {
13
14
  inverted: invertedStyles,
14
15
  };
15
16
  var Switch = forwardRef(function (_a, ref) {
16
- var _b;
17
- 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, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = __rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors"]);
17
+ var _b, _c, _d, _e;
18
+ var _f = _a.reversed, reversed = _f === void 0 ? false : _f, _g = _a.checked, checked = _g === void 0 ? false : _g, _h = _a.align, align = _h === void 0 ? 'start' : _h, addons = _a.addons, block = _a.block, disabled = _a.disabled, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _j = _a.colors, colors = _j === void 0 ? 'default' : _j, _k = _a.showSkeleton, showSkeleton = _k === void 0 ? false : _k, restProps = __rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors", "showSkeleton"]);
18
19
  var labelRef = useRef(null);
19
20
  var focused = useFocus(labelRef, 'keyboard')[0];
20
21
  var handleChange = function (e) {
@@ -33,10 +34,19 @@ var Switch = forwardRef(function (_a, ref) {
33
34
  _b[styles.block] = block,
34
35
  _b)), ref: mergeRefs([labelRef, ref]) },
35
36
  React.createElement("input", __assign({ type: 'checkbox', onChange: handleChange, disabled: disabled, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
36
- React.createElement("span", { className: cn(styles.switch, colorStyles[colors].switch) }),
37
+ React.createElement(Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn((_c = {},
38
+ _c[styles.switchSkeleton] = showSkeleton,
39
+ _c)) },
40
+ React.createElement("span", { className: cn(styles.switch, colorStyles[colors].switch) })),
37
41
  (label || hint || errorMessage) && (React.createElement("span", { className: styles.content },
38
- label && (React.createElement("span", { className: cn(styles.label, colorStyles[colors].label) }, label)),
39
- hint && !errorMessage && (React.createElement("span", { className: cn(styles.hint, colorStyles[colors].hint) }, hint)),
42
+ label && (React.createElement(Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn(styles.labelWrap, (_d = {},
43
+ _d[styles.loading] = showSkeleton,
44
+ _d)) },
45
+ React.createElement("span", { className: cn(styles.label, colorStyles[colors].label) }, label))),
46
+ hint && !errorMessage && (React.createElement(Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn(styles.hintWrap, (_e = {},
47
+ _e[styles.loading] = showSkeleton,
48
+ _e)) },
49
+ React.createElement("span", { className: cn(styles.hint, colorStyles[colors].hint) }, hint))),
40
50
  errorMessage && (React.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
41
51
  addons && (
42
52
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
package/esm/Component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled,\n [colorStyles[colors].disabled]: disabled,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n )}\n {hint && !errorMessage && (\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { Skeleton } from '@alfalab/core-components-skeleton';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n\n /**\n * Показать скелетон\n * @default false\n */\n showSkeleton?: boolean;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n showSkeleton = false,\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled,\n [colorStyles[colors].disabled]: disabled,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn({\n [styles.switchSkeleton]: showSkeleton,\n })}\n >\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n </Skeleton>\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn(styles.labelWrap, {\n [styles.loading]: showSkeleton,\n })}\n >\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n </Skeleton>\n )}\n\n {hint && !errorMessage && (\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn(styles.hintWrap, {\n [styles.loading]: showSkeleton,\n })}\n >\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n </Skeleton>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":[],"mappings":";;;;;;;;;;;AAoBA,IAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAC3B;IAkFY,MAAM,GAAG,UAAU,CAC5B,UACI,EAkBC,EACD,GAAG,EAAA;;AAlBC,IAAA,IAAA,EAAgB,GAAA,EAAA,CAAA,QAAA,EAAhB,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EAChB,EAAe,GAAA,EAAA,CAAA,OAAA,EAAf,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACf,EAAe,GAAA,EAAA,CAAA,KAAA,EAAf,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,OAAO,GAAA,EAAA,EACf,MAAM,YAAA,EACN,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,SAAS,eAAA,EACT,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAkB,GAAA,EAAA,CAAA,MAAA,EAAlB,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,SAAS,GAAA,EAAA,EAClB,EAAoB,GAAA,EAAA,CAAA,YAAA,EAApB,YAAY,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,SAAS,GAAA,MAAA,CAAA,EAAA,EAjBhB,2KAkBC,CADe;AAIhB,IAAA,IAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;IAExC,IAAA,OAAO,GAAI,QAAQ,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAA,CAAA,CAAlC;IAEd,IAAM,YAAY,GAAG,UAAC,CAAgC,EAAA;QAClD,IAAI,QAAQ,EAAE;AACV,YAAA,QAAQ,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,EAAA,IAAA,EAAE,CAAC;;AAExD,KAAC;AAED,IAAA,IAAM,YAAY,GAAG,OAAO,KAAK,KAAK,SAAS,GAAG,EAAE,GAAG,KAAK;AAE5D,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACpD,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,QAAQ,IAAG,QAAQ;AAExC,YAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,OAAO;AACzB,YAAA,EAAA,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,IAAG,OAAO;AAEtC,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,OAAO;AACzB,YAAA,EAAA,CAAC,MAAM,CAAC,KAAK,CAAA,GAAG,KAAK;gBACvB,EACF,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAA;QAE/B,KACI,CAAA,aAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACE,cAAA,EAAA,UAAU,EACpB,EAAA,SAAS,CACf,CAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EACL,EAAA,OAAO,EAAE,YAAY,EACrB,YAAY,EAAC,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,EAAA,EAAA,GAAA,EAAA;AACT,gBAAA,EAAA,CAAC,MAAM,CAAC,cAAc,CAAA,GAAG,YAAY;AACvC,gBAAA,EAAA,EAAA,EAAA;AAEF,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,GAAI,CAC3D;AAEV,QAAA,CAAC,KAAK,IAAI,IAAI,IAAI,YAAY,MAC3B,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA;YAC1B,KAAK,KACF,KAAC,CAAA,aAAA,CAAA,QAAQ,IACL,OAAO,EAAE,YAAY,EACrB,YAAY,EAAC,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,oBAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,YAAY;AAChC,oBAAA,EAAA,EAAA,EAAA;AAEF,gBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,IACvD,KAAK,CACH,CACA,CACd;YAEA,IAAI,IAAI,CAAC,YAAY,KAClB,KAAC,CAAA,aAAA,CAAA,QAAQ,EACL,EAAA,OAAO,EAAE,YAAY,EACrB,YAAY,EAAC,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,GAAA,EAAA,GAAA,EAAA;AACzB,oBAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,YAAY;AAChC,oBAAA,EAAA,EAAA,EAAA;AAEF,gBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IACrD,IAAI,CACF,CACA,CACd;AAEA,YAAA,YAAY,KACT,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,IAAI,EAAC,OAAO,EAAA,EAC7C,YAAY,CACV,CACV,CACE,CACV;AAEA,QAAA,MAAM;;AAEH,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,cAAc,EACtD,EAAA,MAAM,CACJ,CACV,CACG;AAEhB,CAAC;AAGL,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
package/esm/default.css CHANGED
@@ -20,36 +20,36 @@
20
20
  --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
21
21
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
22
22
  }
23
- .switch__switch_1i7xt {
23
+ .switch__switch_1cr6w {
24
24
  background-color: var(--switch-bg-color);
25
25
  }
26
- .switch__switch_1i7xt:hover {
26
+ .switch__switch_1cr6w:hover {
27
27
  background-color: var(--switch-hover-bg-color);
28
28
  }
29
- .switch__label_1i7xt {
29
+ .switch__label_1cr6w {
30
30
  color: var(--switch-label-color);
31
31
  }
32
- .switch__hint_1i7xt {
32
+ .switch__hint_1cr6w {
33
33
  color: var(--switch-hint-color);
34
34
  }
35
- .switch__checked_1i7xt .switch__switch_1i7xt {
35
+ .switch__checked_1cr6w .switch__switch_1cr6w {
36
36
  background-color: var(--switch-checked-bg-color);
37
37
  }
38
- .switch__checked_1i7xt .switch__switch_1i7xt:hover {
38
+ .switch__checked_1cr6w .switch__switch_1cr6w:hover {
39
39
  background-color: var(--switch-checked-hover-bg-color);
40
40
  }
41
- .switch__disabled_1i7xt .switch__label_1i7xt {
41
+ .switch__disabled_1cr6w .switch__label_1cr6w {
42
42
  color: var(--switch-disabled-color);
43
43
  }
44
- .switch__disabled_1i7xt .switch__hint_1i7xt {
44
+ .switch__disabled_1cr6w .switch__hint_1cr6w {
45
45
  color: var(--switch-disabled-color);
46
46
  }
47
- .switch__disabled_1i7xt .switch__switch_1i7xt {
47
+ .switch__disabled_1cr6w .switch__switch_1cr6w {
48
48
  background-color: var(--switch-disabled-bg-color);
49
49
  }
50
- .switch__disabled_1i7xt .switch__switch_1i7xt:before {
50
+ .switch__disabled_1cr6w .switch__switch_1cr6w:before {
51
51
  background-color: var(--switch-icon-disabled-color);
52
52
  }
53
- .switch__disabled_1i7xt.switch__checked_1i7xt .switch__switch_1i7xt {
53
+ .switch__disabled_1cr6w.switch__checked_1cr6w .switch__switch_1cr6w {
54
54
  background-color: var(--switch-disabled-checked-bg-color);
55
55
  }
package/esm/default.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './default.css';
2
2
 
3
- var defaultStyles = {"switch":"switch__switch_1i7xt","label":"switch__label_1i7xt","hint":"switch__hint_1i7xt","checked":"switch__checked_1i7xt","disabled":"switch__disabled_1i7xt"};
3
+ var defaultStyles = {"switch":"switch__switch_1cr6w","label":"switch__label_1cr6w","hint":"switch__hint_1cr6w","checked":"switch__checked_1cr6w","disabled":"switch__disabled_1cr6w"};
4
4
 
5
5
  export { defaultStyles as default };
6
6
  //# sourceMappingURL=default.module.css.js.map