@alfalab/core-components-switch 6.0.3 → 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 +23 -3
  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 +41 -21
  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 +41 -21
  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 +41 -21
  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 +24 -3
  39. package/package.json +2 -1
  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":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAEA,8BAAa;AACtB,IAAA,QAAQ,EAAEC,+BAAc;CAC3B;IAkFY,MAAM,GAAGC,gBAAU,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,GAAAC,YAAA,CAAA,EAAA,EAjBhB,2KAkBC,CADe;AAIhB,IAAA,IAAM,QAAQ,GAAGC,YAAM,CAAmB,IAAI,CAAC;IAExC,IAAA,OAAO,GAAIC,cAAQ,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,QACIC,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,SAAS,EAAEA,uBAAM,CAAC,KAAK,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACpD,YAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,QAAQ,IAAG,QAAQ;AAExC,YAAA,EAAA,CAACA,uBAAM,CAAC,OAAO,CAAA,GAAG,OAAO;AACzB,YAAA,EAAA,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,IAAG,OAAO;AAEtC,YAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAACA,uBAAM,CAAC,OAAO,CAAA,GAAG,OAAO;AACzB,YAAA,EAAA,CAACA,uBAAM,CAAC,KAAK,CAAA,GAAG,KAAK;gBACvB,EACF,GAAG,EAAEC,0BAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAA;QAE/BH,sBACI,CAAA,aAAA,CAAA,OAAA,EAAAI,cAAA,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,QAAAJ,sBAAA,CAAA,aAAA,CAACK,aAAQ,EACL,EAAA,OAAO,EAAE,YAAY,EACrB,YAAY,EAAC,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,SAAS,EAAEJ,mBAAE,EAAA,EAAA,GAAA,EAAA;AACT,gBAAA,EAAA,CAACC,uBAAM,CAAC,cAAc,CAAA,GAAG,YAAY;AACvC,gBAAA,EAAA,EAAA,EAAA;AAEF,YAAAF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,GAAI,CAC3D;AAEV,QAAA,CAAC,KAAK,IAAI,IAAI,IAAI,YAAY,MAC3BF,sBAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEE,uBAAM,CAAC,OAAO,EAAA;YAC1B,KAAK,KACFF,sBAAC,CAAA,aAAA,CAAAK,aAAQ,IACL,OAAO,EAAE,YAAY,EACrB,YAAY,EAAC,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,SAAS,EAAEJ,mBAAE,CAACC,uBAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,oBAAA,EAAA,CAACA,uBAAM,CAAC,OAAO,CAAA,GAAG,YAAY;AAChC,oBAAA,EAAA,EAAA,EAAA;AAEF,gBAAAF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,IACvD,KAAK,CACH,CACA,CACd;YAEA,IAAI,IAAI,CAAC,YAAY,KAClBF,sBAAC,CAAA,aAAA,CAAAK,aAAQ,EACL,EAAA,OAAO,EAAE,YAAY,EACrB,YAAY,EAAC,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,SAAS,EAAEJ,mBAAE,CAACC,uBAAM,CAAC,QAAQ,GAAA,EAAA,GAAA,EAAA;AACzB,oBAAA,EAAA,CAACA,uBAAM,CAAC,OAAO,CAAA,GAAG,YAAY;AAChC,oBAAA,EAAA,EAAA,EAAA;AAEF,gBAAAF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IACrD,IAAI,CACF,CACA,CACd;AAEA,YAAA,YAAY,KACTF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEE,uBAAM,CAAC,YAAY,EAAE,IAAI,EAAC,OAAO,EAAA,EAC7C,YAAY,CACV,CACV,CACE,CACV;AAEA,QAAA,MAAM;;AAEH,QAAAF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEE,uBAAM,CAAC,MAAM,EAAE,OAAO,EAAEI,UAAG,CAAC,cAAc,EACtD,EAAA,MAAM,CACJ,CACV,CACG;AAEhB,CAAC;AAGL,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
package/cssm/index.module.css CHANGED
@@ -12,10 +12,13 @@
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
  }
@@ -61,6 +64,7 @@
61
64
  }
62
65
  .switch {
63
66
  position: relative;
67
+ display: block;
64
68
  border-radius: var(--border-radius-16);
65
69
  width: 36px;
66
70
  height: 20px;
@@ -72,6 +76,11 @@
72
76
  border-color 0.2s ease;
73
77
  box-sizing: border-box;
74
78
  }
79
+ .switchSkeleton {
80
+ width: 36px;
81
+ height: 20px;
82
+ margin: var(--gap-2);
83
+ }
75
84
  .switch:before {
76
85
  content: '';
77
86
  position: absolute;
@@ -96,9 +105,16 @@
96
105
  font-family: var(--font-family-system);
97
106
  display: block;
98
107
  }
99
- .label:not(:only-child) {
100
- margin-bottom: var(--gap-4);
101
- }
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
+ }
102
118
  .errorMessage {
103
119
  font-size: 14px;
104
120
  line-height: 18px;
@@ -113,6 +129,10 @@
113
129
  font-family: var(--font-family-system);
114
130
  display: block;
115
131
  }
132
+ .hintWrap.loading {
133
+ height: var(--gap-10);
134
+ margin-bottom: var(--gap-4);
135
+ }
116
136
  .component.reversed {
117
137
  flex-direction: row-reverse;
118
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_1ir4t {
23
+ .switch__switch_1cr6w {
24
24
  background-color: var(--switch-bg-color);
25
25
  }
26
- .switch__switch_1ir4t:hover {
26
+ .switch__switch_1cr6w:hover {
27
27
  background-color: var(--switch-hover-bg-color);
28
28
  }
29
- .switch__label_1ir4t {
29
+ .switch__label_1cr6w {
30
30
  color: var(--switch-label-color);
31
31
  }
32
- .switch__hint_1ir4t {
32
+ .switch__hint_1cr6w {
33
33
  color: var(--switch-hint-color);
34
34
  }
35
- .switch__checked_1ir4t .switch__switch_1ir4t {
35
+ .switch__checked_1cr6w .switch__switch_1cr6w {
36
36
  background-color: var(--switch-checked-bg-color);
37
37
  }
38
- .switch__checked_1ir4t .switch__switch_1ir4t:hover {
38
+ .switch__checked_1cr6w .switch__switch_1cr6w:hover {
39
39
  background-color: var(--switch-checked-hover-bg-color);
40
40
  }
41
- .switch__disabled_1ir4t .switch__label_1ir4t {
41
+ .switch__disabled_1cr6w .switch__label_1cr6w {
42
42
  color: var(--switch-disabled-color);
43
43
  }
44
- .switch__disabled_1ir4t .switch__hint_1ir4t {
44
+ .switch__disabled_1cr6w .switch__hint_1cr6w {
45
45
  color: var(--switch-disabled-color);
46
46
  }
47
- .switch__disabled_1ir4t .switch__switch_1ir4t {
47
+ .switch__disabled_1cr6w .switch__switch_1cr6w {
48
48
  background-color: var(--switch-disabled-bg-color);
49
49
  }
50
- .switch__disabled_1ir4t .switch__switch_1ir4t:before {
50
+ .switch__disabled_1cr6w .switch__switch_1cr6w:before {
51
51
  background-color: var(--switch-icon-disabled-color);
52
52
  }
53
- .switch__disabled_1ir4t.switch__checked_1ir4t .switch__switch_1ir4t {
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_1ir4t","label":"switch__label_1ir4t","hint":"switch__hint_1ir4t","checked":"switch__checked_1ir4t","disabled":"switch__disabled_1ir4t"};
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":"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"}
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_1ir4t {
23
+ .switch__switch_1cr6w {
24
24
  background-color: var(--switch-bg-color);
25
25
  }
26
- .switch__switch_1ir4t:hover {
26
+ .switch__switch_1cr6w:hover {
27
27
  background-color: var(--switch-hover-bg-color);
28
28
  }
29
- .switch__label_1ir4t {
29
+ .switch__label_1cr6w {
30
30
  color: var(--switch-label-color);
31
31
  }
32
- .switch__hint_1ir4t {
32
+ .switch__hint_1cr6w {
33
33
  color: var(--switch-hint-color);
34
34
  }
35
- .switch__checked_1ir4t .switch__switch_1ir4t {
35
+ .switch__checked_1cr6w .switch__switch_1cr6w {
36
36
  background-color: var(--switch-checked-bg-color);
37
37
  }
38
- .switch__checked_1ir4t .switch__switch_1ir4t:hover {
38
+ .switch__checked_1cr6w .switch__switch_1cr6w:hover {
39
39
  background-color: var(--switch-checked-hover-bg-color);
40
40
  }
41
- .switch__disabled_1ir4t .switch__label_1ir4t {
41
+ .switch__disabled_1cr6w .switch__label_1cr6w {
42
42
  color: var(--switch-disabled-color);
43
43
  }
44
- .switch__disabled_1ir4t .switch__hint_1ir4t {
44
+ .switch__disabled_1cr6w .switch__hint_1cr6w {
45
45
  color: var(--switch-disabled-color);
46
46
  }
47
- .switch__disabled_1ir4t .switch__switch_1ir4t {
47
+ .switch__disabled_1cr6w .switch__switch_1cr6w {
48
48
  background-color: var(--switch-disabled-bg-color);
49
49
  }
50
- .switch__disabled_1ir4t .switch__switch_1ir4t:before {
50
+ .switch__disabled_1cr6w .switch__switch_1cr6w:before {
51
51
  background-color: var(--switch-icon-disabled-color);
52
52
  }
53
- .switch__disabled_1ir4t.switch__checked_1ir4t .switch__switch_1ir4t {
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_1ir4t","label":"switch__label_1ir4t","hint":"switch__hint_1ir4t","checked":"switch__checked_1ir4t","disabled":"switch__disabled_1ir4t"};
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