@cloud-ru/ds-toggles 1.0.1-preview-fb311860.0 → 1.0.1-preview-cd0cd6fb.0

package/README.md

@@ -213,6 +213,9 @@ export function RadioStates() {
 
 #### Size
 `xs` — для плотных настроек и таблиц, `s` — дефолт в формах и карточках.
+
+#### Icon (default `false`)
+По умолчанию ползунок — пустой круг. `showIcon` добавляет галочку в состоянии «включено». Спиннер состояния `loading` показывается независимо от `showIcon`.
 ### Примеры использования
 #### 1. Базовый Switch
 
@@ -276,6 +279,7 @@ export function SwitchStates() {
 | `onChange` | `((checked: boolean) => void)` | — | Колбек смены значения |
 | `onClick` | `MouseEventHandler<HTMLInputElement>` | — | Колбек клика |
 | `onFocus` | `FocusEventHandler<HTMLInputElement>` | — | Колбек приобретения фокуса |
+| `showIcon` | `boolean` | `false` | Показывать ли иконку внутри ползунка. Спиннер в состоянии `loading` показывается независимо |
 | `size` | `"s"` \| `"xs"` | `s` | Размер |
 | `tabIndex` | `number` | — | HTML-аттрибут tab-index |
 | `value` | `string` | — | HTML-аттрибут value |

package/dist/cjs/components/Switch/Switch.d.ts

@@ -1,3 +1,6 @@
 import { ToggleProps } from '../../types';
-export type SwitchProps = ToggleProps;
-export declare function Switch({ inputRef, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, loading, size, className, 'data-test-id': dataTestId, ...otherProps }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export type SwitchProps = ToggleProps & {
+    /** Показывать ли иконку внутри ползунка. Спиннер в состоянии `loading` показывается независимо */
+    showIcon?: boolean;
+};
+export declare function Switch({ inputRef, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, loading, showIcon, size, className, 'data-test-id': dataTestId, ...otherProps }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Switch/Switch.js

@@ -24,7 +24,7 @@ function Icon({ size, loading }) {
     const iconSize = (0, utils_2.getIconSize)(size);
     return (0, jsx_runtime_1.jsx)(system_1.CheckSVG, { "aria-hidden": true, className: styles_module_scss_1.default.icon, size: iconSize });
 }
-function Switch({ inputRef, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled = false, loading = false, size = constants_1.SIZE.S, className, 'data-test-id': dataTestId, ...otherProps }) {
+function Switch({ inputRef, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled = false, loading = false, showIcon = false, size = constants_1.SIZE.S, className, 'data-test-id': dataTestId, ...otherProps }) {
     const [checked, setChecked] = (0, utils_1.useUncontrolledProp)(checkedProp, Boolean(defaultChecked), onChange);
     const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
     const stateDataAttributes = (0, utils_2.getVisualStateAttributes)({
@@ -32,7 +32,7 @@ function Switch({ inputRef, checked: checkedProp, defaultChecked, onChange, onBl
         disabled,
         checked,
     });
-    return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), role: constants_1.MODE.Checkbox, "data-size": size, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, "data-test-id": dataTestId || undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.framing, ...stateDataAttributes, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.backgroundStateLayer, "data-state": 'emptyDarkOnAccent' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.flag, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.surface, ...stateDataAttributes, children: (0, jsx_runtime_1.jsx)(Icon, { size: size, loading: Boolean(loading) }) }) })] }), !loading && ((0, jsx_runtime_1.jsx)("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${constants_1.NATIVE_INPUT_SUFFIX}` : undefined, ref: inputRef, type: constants_1.MODE.Checkbox, className: styles_module_scss_1.default.inputPrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), role: constants_1.MODE.Checkbox, "data-size": size, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, "data-test-id": dataTestId || undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.framing, ...stateDataAttributes, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.backgroundStateLayer, "data-state": 'emptyDarkOnAccent' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.flag, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.surface, ...stateDataAttributes, children: (showIcon || loading) && (0, jsx_runtime_1.jsx)(Icon, { size: size, loading: Boolean(loading) }) }) })] }), !loading && ((0, jsx_runtime_1.jsx)("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${constants_1.NATIVE_INPUT_SUFFIX}` : undefined, ref: inputRef, type: constants_1.MODE.Checkbox, className: styles_module_scss_1.default.inputPrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
                         setFocusVisible(event.target.matches(':focus-visible'));
                         onFocus?.(event);
                     }, onBlur: event => {

package/dist/esm/components/Switch/Switch.d.ts

@@ -1,3 +1,6 @@
 import { ToggleProps } from '../../types.js';
-export type SwitchProps = ToggleProps;
-export declare function Switch({ inputRef, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, loading, size, className, 'data-test-id': dataTestId, ...otherProps }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export type SwitchProps = ToggleProps & {
+    /** Показывать ли иконку внутри ползунка. Спиннер в состоянии `loading` показывается независимо */
+    showIcon?: boolean;
+};
+export declare function Switch({ inputRef, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, loading, showIcon, size, className, 'data-test-id': dataTestId, ...otherProps }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Switch/Switch.js

@@ -18,7 +18,7 @@ function Icon({ size, loading }) {
     const iconSize = getIconSize(size);
     return _jsx(CheckSVG, { "aria-hidden": true, className: styles.icon, size: iconSize });
 }
-export function Switch({ inputRef, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled = false, loading = false, size = SIZE.S, className, 'data-test-id': dataTestId, ...otherProps }) {
+export function Switch({ inputRef, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled = false, loading = false, showIcon = false, size = SIZE.S, className, 'data-test-id': dataTestId, ...otherProps }) {
     const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
     const [focusVisible, setFocusVisible] = useState(false);
     const stateDataAttributes = getVisualStateAttributes({
@@ -26,7 +26,7 @@ export function Switch({ inputRef, checked: checkedProp, defaultChecked, onChang
         disabled,
         checked,
     });
-    return (_jsx("span", { className: cn(styles.root, className), role: MODE.Checkbox, "data-size": size, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, "data-test-id": dataTestId || undefined, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.framing, ...stateDataAttributes, children: [_jsx("div", { className: styles.backgroundStateLayer, "data-state": 'emptyDarkOnAccent' }), _jsx("div", { className: styles.flag, children: _jsx("div", { className: styles.surface, ...stateDataAttributes, children: _jsx(Icon, { size: size, loading: Boolean(loading) }) }) })] }), !loading && (_jsx("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${NATIVE_INPUT_SUFFIX}` : undefined, ref: inputRef, type: MODE.Checkbox, className: styles.inputPrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
+    return (_jsx("span", { className: cn(styles.root, className), role: MODE.Checkbox, "data-size": size, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, "data-test-id": dataTestId || undefined, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.framing, ...stateDataAttributes, children: [_jsx("div", { className: styles.backgroundStateLayer, "data-state": 'emptyDarkOnAccent' }), _jsx("div", { className: styles.flag, children: _jsx("div", { className: styles.surface, ...stateDataAttributes, children: (showIcon || loading) && _jsx(Icon, { size: size, loading: Boolean(loading) }) }) })] }), !loading && (_jsx("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${NATIVE_INPUT_SUFFIX}` : undefined, ref: inputRef, type: MODE.Checkbox, className: styles.inputPrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
                         setFocusVisible(event.target.matches(':focus-visible'));
                         onFocus?.(event);
                     }, onBlur: event => {