@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.1

package/select-deprecated/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TextFieldProps } from '../text-field';
+type Size = 's' | 'm' | 'l' | 'xl';
+export interface SelectProps extends Omit<TextFieldProps, 'style' | 'endAdornment'> {
+    /** Нужно ли выводить состояние загрузки списка. */
+    loading?: boolean;
+    /** Сработает при открытии/закрытии меню. */
+    onMenuToggle?: (opened: boolean) => void;
+    /** Сработает при выборе. */
+    onSelect?: (option: any) => void;
+    /** Список опций. */
+    options: any[];
+    /** Размер для DropdownItem. */
+    optionSize?: Size;
+    /** Вернет содержимое опции. */
+    renderOption?: (option: any) => React.ReactNode;
+    /** Стили. */
+    style?: React.CSSProperties;
+    endAdornment?: TextFieldProps['endAdornment'] | ((opened: boolean) => React.ReactNode);
+}
+/**
+ * Выводит иконку стрелки для поля Select по умолчанию.
+ * @param opened Открыт ли список опций.
+ * @return Элемент.
+ */
+export declare const renderDefaultArrow: (opened: boolean) => JSX.Element;
+/**
+ * Поле выбора из списка.
+ * @deprecated Следует использовать новую реализацию из "@sima-land/ui-nucleons/select".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const Select: ({ options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption, "data-testid": dataTestId, size, endAdornment, ...restProps }: SelectProps) => JSX.Element;
+export {};

package/select-deprecated/index.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = exports.renderDefaultArrow = void 0;
+const react_1 = __importStar(require("react"));
+const dropdown_1 = require("../dropdown");
+const dropdown_item_1 = require("../dropdown-item");
+const text_field_1 = require("../text-field");
+const dropdown_2 = require("../_internal/utils/dropdown");
+const bind_1 = __importDefault(require("classnames/bind"));
+const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
+const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
+const select_module_scss_1 = __importDefault(require("./select.module.scss"));
+const colors_1 = require("../colors");
+const dropdown_loading_1 = require("../_internal/dropdown-loading");
+const hooks_1 = require("../hooks");
+const cx = bind_1.default.bind(select_module_scss_1.default);
+/**
+ * Выводит иконку стрелки для поля Select по умолчанию.
+ * @param opened Открыт ли список опций.
+ * @return Элемент.
+ */
+const renderDefaultArrow = (opened) => {
+    const ArrowSVG = opened ? up_1.default : down_1.default;
+    return react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('basic-gray38') });
+};
+exports.renderDefaultArrow = renderDefaultArrow;
+/**
+ * Поле выбора из списка.
+ * @deprecated Следует использовать новую реализацию из "@sima-land/ui-nucleons/select".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const Select = (_a) => {
+    var { options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption = String, 'data-testid': dataTestId, size, endAdornment = exports.renderDefaultArrow } = _a, restProps = __rest(_a, ["options", "optionSize", "onSelect", "style", "className", "label", "onClick", "value", "loading", "onMenuToggle", "renderOption", 'data-testid', "size", "endAdornment"]);
+    const rootRef = (0, react_1.useRef)(null);
+    const fieldRef = (0, react_1.useRef)(null);
+    const menuRef = (0, react_1.useRef)(null);
+    const [opened, toggleMenu] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        opened && menuRef.current && menuRef.current.focus();
+        onMenuToggle && onMenuToggle(opened);
+    }, [opened]);
+    (0, hooks_1.useOutsideClick)(rootRef, toggleMenu.bind(null, false));
+    return (react_1.default.createElement("div", { ref: rootRef, style: style, className: cx('root', className), "data-testid": dataTestId },
+        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { size: size, blockProps: {
+                ref: fieldRef,
+                tabIndex: 0,
+                onMouseDown: () => {
+                    toggleMenu(a => !a);
+                },
+                onKeyDown: e => {
+                    e.key === 'Enter' && toggleMenu(true);
+                },
+            }, onClick: e => {
+                e.preventDefault();
+                onClick && onClick(e);
+            }, className: select_module_scss_1.default.field, "data-testid": 'select:field', label: label, focused: opened, baseInputProps: {
+                // чтобы не ловить фокус на поле
+                style: { pointerEvents: 'none' },
+                tabIndex: -1,
+            }, value: value, multiline: false, variant: 'desktop', readOnly: true, endAdornment: typeof endAdornment === 'function' ? endAdornment(opened) : endAdornment })),
+        opened && (loading || options.length > 0) && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(size), { ref: menuRef, "data-testid": 'select:menu', role: 'menu', tabIndex: -1, className: cx('menu'), onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    toggleMenu(false);
+                    fieldRef.current && fieldRef.current.focus();
+                }
+            }, onBlur: () => {
+                toggleMenu(false);
+                fieldRef.current && fieldRef.current.focus();
+            } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'select:loading-area' })) : (options.map((option, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: optionSize, key: index, role: 'menuitem', onClick: () => {
+                toggleMenu(false);
+                onSelect && onSelect(option);
+            } }, renderOption(option)))))))));
+};
+exports.Select = Select;

package/shadows.scss

@@ -0,0 +1,18 @@
+/**
+ * Формирует тень по дизайн-гайдам.
+ */
+@mixin box-shadow($key) {
+  @if $key == 'z1' {
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.08);
+  } @else if $key == 'z2' {
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.1);
+  } @else if $key == 'z2-straight' {
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
+  } @else if $key == 'z3' {
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), 0 0 4px rgba(0, 0, 0, 0.04);
+  } @else if $key == 'z4' {
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 12px 30px rgba(0, 0, 0, 0.1);
+  } @else {
+    @warn 'No such shadow `#{$key}`.';
+  }
+}

package/side-page/index.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
-import { WithBodyScrollLock } from '../_internal/body-scroll';
+import { ReactNode } from 'react';
+import { WithPageScrollLock } from '../_internal/page-scroll-lock';
+import { SidePageBody, SidePageFooter, SidePageHeader } from './slots';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-export interface SidePageProps extends WithBodyScrollLock {
+export interface SidePageProps extends WithPageScrollLock {
     /** Нужно ли показать компонент. */
     shown?: boolean;
     /** Нужно ли использовать анимации при открытии/закрытии. */
@@ -9,7 +10,7 @@ export interface SidePageProps extends WithBodyScrollLock {
     /** Ширина. */
     size?: 's' | 'm';
     /** Содержимое. */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Сработает при закрытии. */
     onClose?: () => void;
     /** Обработчик "onEntering" для CSSTransition. */
@@ -30,25 +31,9 @@ export interface SidePageProps extends WithBodyScrollLock {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const SidePage: {
-    ({ shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps }: SidePageProps): JSX.Element;
-    Header: {
-        ({ onBack, onClose, ...topBarProps }: import("../top-bar").TopBarProps & {
-            onBack?: (() => void) | undefined;
-            onClose?: (() => void) | undefined;
-        }): JSX.Element;
-        displayName: string;
-    };
-    Body: {
-        ({ children }: {
-            children?: React.ReactNode;
-        }): JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ padded, ...props }: import("../bottom-bar").BottomBarProps & {
-            padded?: boolean | undefined;
-        }): JSX.Element;
-        displayName: string;
-    };
-};
+export declare function SidePage({ shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps }: SidePageProps): JSX.Element;
+export declare namespace SidePage {
+    var Header: typeof SidePageHeader;
+    var Body: typeof SidePageBody;
+    var Footer: typeof SidePageFooter;
+}

package/side-page/index.js

@@ -40,11 +40,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidePage = void 0;
 const react_1 = __importStar(require("react"));
 const define_slots_1 = require("../helpers/define-slots");
-const utils_1 = require("../modal/utils");
-const layer_1 = require("../helpers/layer");
-const body_scroll_1 = require("../_internal/body-scroll");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
 const slots_1 = require("./slots");
 const CSSTransition_1 = __importDefault(require("react-transition-group/CSSTransition"));
+const modal_overlay_1 = require("../modal-overlay");
+const utils_1 = require("../modal-overlay/utils");
 const bind_1 = __importDefault(require("classnames/bind"));
 const side_page_module_scss_1 = __importDefault(require("./side-page.module.scss"));
 const cx = bind_1.default.bind(side_page_module_scss_1.default);
@@ -59,38 +59,33 @@ const transitionClasses = {
  * @param props Свойства.
  * @return Элемент.
  */
-const SidePage = (_a) => {
+function SidePage(_a) {
     var { shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited } = _a, restProps = __rest(_a, ["shown", "withTransitions", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
     const transitionDuration = withTransitions ? 300 : 0;
     return (react_1.default.createElement(CSSTransition_1.default, { in: shown, timeout: transitionDuration, classNames: transitionClasses, unmountOnExit: true, onEntering: onEntering, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited }, transitionStatus => (react_1.default.createElement(SidePageInner, Object.assign({}, restProps, { transitionStatus, transitionDuration })))));
-};
+}
 exports.SidePage = SidePage;
 /**
  * Фиктивный компонент, необходимый для того чтобы задействовать хук блокировки прокрутки внутри CSSTransition.
  * @param props Свойства.
  * @return Элемент.
  */
-const SidePageInner = ({ size = 'm', children, onClose, withScrollDisable, scrollDisableOptions, transitionStatus, transitionDuration, }) => {
-    const layer = (0, layer_1.useLayer)() + 100;
-    const overlayBind = (0, utils_1.useCloseHandler)(onClose);
+function SidePageInner({ size = 'm', children, onClose, withScrollDisable = false, scrollDisableOptions, transitionStatus, transitionDuration, }) {
+    const overlayClickBind = (0, utils_1.useExactClick)(onClose);
     const ref = (0, react_1.useRef)(null);
-    const overlayStyles = {
-        zIndex: layer,
-        '--transition-duration': `${transitionDuration}ms`,
-    };
+    (0, page_scroll_lock_1.usePageScrollLock)(ref, Object.assign({ lockEnabled: withScrollDisable }, scrollDisableOptions));
     const { header, body, footer } = (0, define_slots_1.defineSlots)(children, {
-        header: exports.SidePage.Header,
-        body: exports.SidePage.Body,
-        footer: exports.SidePage.Footer,
+        header: SidePage.Header,
+        body: SidePage.Body,
+        footer: SidePage.Footer,
     });
-    (0, body_scroll_1.useBodyScrollLock)(ref, withScrollDisable, scrollDisableOptions);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: cx('overlay'), style: overlayStyles }, (transitionStatus !== 'entering' && overlayBind)),
-        react_1.default.createElement(layer_1.LayerProvider, { value: layer },
-            react_1.default.createElement("div", { className: cx('main', `size-${size}`) },
-                header,
-                react_1.default.createElement("div", { className: cx('body') }, body),
-                footer))));
-};
-exports.SidePage.Header = slots_1.SidePageHeader;
-exports.SidePage.Body = slots_1.SidePageBody;
-exports.SidePage.Footer = slots_1.SidePageFooter;
+    const overlayProps = Object.assign({ style: { '--transition-duration': `${transitionDuration}ms` } }, (transitionStatus !== 'entering' && overlayClickBind));
+    return (react_1.default.createElement(modal_overlay_1.ModalOverlay, Object.assign({}, overlayProps),
+        react_1.default.createElement("div", { className: cx('side-page', `size-${size}`) },
+            header,
+            react_1.default.createElement("div", { ref: ref, className: cx('body') }, body),
+            footer)));
+}
+SidePage.Header = slots_1.SidePageHeader;
+SidePage.Body = slots_1.SidePageBody;
+SidePage.Footer = slots_1.SidePageFooter;

package/side-page/side-page.module.scss

@@ -1,17 +1,10 @@
 @use '../colors';
+@use '../breakpoints';
+@use '../top-bar/top-bar-util';
+@use '../bottom-bar/bottom-bar-util';
+@use '../modal-overlay/modal-overlay-util';
 
-$overlay-color: rgba(0, 0, 0, 0.24);
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: $overlay-color;
-}
-
-.main {
+.side-page {
   position: absolute;
   top: 0;
   right: 0;
@@ -20,18 +13,34 @@ $overlay-color: rgba(0, 0, 0, 0.24);
   display: flex;
   flex-direction: column;
   background: #fff;
-}
-
-.size-s {
-  max-width: 488px;
-}
-
-.size-m {
-  max-width: 968px;
+  @include breakpoints.down('xs') {
+    width: 100%;
+    .header {
+      @include top-bar-util.size-m;
+    }
+    .footer {
+      @include bottom-bar-util.size-m;
+    }
+  }
+  @include breakpoints.up('xs') {
+    &.size-s {
+      max-width: 488px;
+    }
+    &.size-m {
+      max-width: 968px;
+    }
+    .header {
+      @include top-bar-util.size-xl;
+    }
+    .footer {
+      @include bottom-bar-util.size-l;
+    }
+  }
 }
 
 .header {
   flex-shrink: 0;
+  width: 100%;
 }
 
 .body {
@@ -42,32 +51,29 @@ $overlay-color: rgba(0, 0, 0, 0.24);
 .footer {
   flex-shrink: 0;
   width: 100%;
-  &.padded {
-    padding: 0 40px;
-  }
 }
 
 // transitions
 .enter {
   background-color: transparent;
-  .main {
+  .side-page {
     transform: translateX(100%);
   }
 }
 
 .enter-active {
   transition: background-color var(--transition-duration) ease-in-out;
-  background-color: $overlay-color;
+  background-color: modal-overlay-util.$overlay-color;
   overflow: hidden;
-  .main {
+  .side-page {
     transition: transform var(--transition-duration) ease-in-out;
     transform: translateX(0);
   }
 }
 
 .exit {
-  background-color: $overlay-color;
-  .main {
+  background-color: modal-overlay-util.$overlay-color;
+  .side-page {
     transform: translateX(0);
   }
 }
@@ -76,7 +82,7 @@ $overlay-color: rgba(0, 0, 0, 0.24);
   transition: background-color var(--transition-duration) ease-in-out;
   background-color: transparent;
   overflow: hidden;
-  .main {
+  .side-page {
     transition: transform var(--transition-duration) ease-in-out;
     transform: translateX(100%);
   }

package/side-page/slots.d.ts

@@ -1,34 +1,26 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { TopBarProps } from '../top-bar';
 import { BottomBarProps } from '../bottom-bar';
 /**
+ * Шапка SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const SidePageHeader: {
-    ({ onBack, onClose, ...topBarProps }: TopBarProps & {
-        onBack?: (() => void) | undefined;
-        onClose?: (() => void) | undefined;
-    }): JSX.Element;
-    displayName: string;
-};
+export declare function SidePageHeader({ onBack, onClose, buttons, ...topBarProps }: TopBarProps & {
+    onBack?: () => void;
+    onClose?: () => void;
+}): JSX.Element;
 /**
+ * Основной контент SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const SidePageBody: {
-    ({ children }: {
-        children?: React.ReactNode;
-    }): JSX.Element;
-    displayName: string;
-};
+export declare function SidePageBody({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
 /**
+ * Подвал SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const SidePageFooter: {
-    ({ padded, ...props }: BottomBarProps & {
-        padded?: boolean | undefined;
-    }): JSX.Element;
-    displayName: string;
-};
+export declare function SidePageFooter({ ...props }: BottomBarProps): JSX.Element;

package/side-page/slots.js

@@ -18,47 +18,35 @@ exports.SidePageFooter = exports.SidePageBody = exports.SidePageHeader = void 0;
 const react_1 = __importDefault(require("react"));
 const top_bar_1 = require("../top-bar");
 const bottom_bar_1 = require("../bottom-bar");
-const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/cross"));
-const arrow_left_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-left"));
-const side_page_module_scss_1 = __importDefault(require("./side-page.module.scss"));
+const utils_1 = require("../top-bar/utils");
 const classnames_1 = __importDefault(require("classnames"));
+const side_page_module_scss_1 = __importDefault(require("./side-page.module.scss"));
 /**
+ * Шапка SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-const SidePageHeader = (_a) => {
-    var { onBack, onClose } = _a, topBarProps = __rest(_a, ["onBack", "onClose"]);
-    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, topBarProps, { size: 'm', className: side_page_module_scss_1.default.header, buttonsProps: Object.assign(Object.assign(Object.assign({}, topBarProps.buttonsProps), (onBack && {
-            start: {
-                'data-testid': 'side-page:back',
-                onClick: onBack,
-                icon: react_1.default.createElement(arrow_left_1.default, null),
-            },
-        })), (onClose && {
-            end: {
-                'data-testid': 'side-page:close',
-                onClick: onClose,
-                icon: react_1.default.createElement(cross_1.default, null),
-            },
-        })) })));
-};
+function SidePageHeader(_a) {
+    var { onBack, onClose, buttons } = _a, topBarProps = __rest(_a, ["onBack", "onClose", "buttons"]);
+    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, topBarProps, { size: 'unset', className: side_page_module_scss_1.default.header, buttons: (0, utils_1.navigationButtons)({ buttons, onBack, onClose }) })));
+}
 exports.SidePageHeader = SidePageHeader;
-exports.SidePageHeader.displayName = 'SidePage.Header';
 /**
+ * Основной контент SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-const SidePageBody = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
+function SidePageBody({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
 exports.SidePageBody = SidePageBody;
-exports.SidePageBody.displayName = 'SidePage.Body';
 /**
+ * Подвал SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-const SidePageFooter = (_a) => {
-    var { padded = true } = _a, // @todo по умолчанию true для обратной совместимости - убрать true в ближайшем мажоре
-    props = __rest(_a, ["padded"]);
-    return (react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, props, { size: 'l', className: (0, classnames_1.default)(side_page_module_scss_1.default.footer, padded && side_page_module_scss_1.default.padded) })));
-};
+function SidePageFooter(_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, props, { size: 'unset', className: (0, classnames_1.default)(side_page_module_scss_1.default.footer) }));
+}
 exports.SidePageFooter = SidePageFooter;
-exports.SidePageFooter.displayName = 'SidePage.Footer';

package/spinner/index.d.ts

@@ -1,22 +1,34 @@
 import React from 'react';
 import { Token } from '../colors';
-declare type SpinnerColor = Extract<Token, 'basic-blue' | 'basic-white'>;
-declare type Size = 'small' | 'medium' | 'large';
+/**
+ * @deprecated Следует использовать 's' | 'm' | 'l'.
+ */
+type SpinnerLegacySize = 'small' | 'medium' | 'large';
+export type SpinnerSize = 's' | 'm' | 'l';
 export interface SpinnerProps {
     /** Размер. */
-    size?: Size;
+    size?: SpinnerSize | SpinnerLegacySize;
     /** Цвет. */
-    color?: SpinnerColor;
+    color?: Token;
     /** Класс. */
     className?: string;
     /** Стили. */
     style?: React.CSSProperties;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string | null;
 }
-export declare const DIAMETERS: Record<Size, number>;
+export declare const DIAMETERS: Record<SpinnerSize | SpinnerLegacySize, number>;
 /**
  * Компонент спиннера.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Spinner: ({ size, color, className, style, }: SpinnerProps) => JSX.Element;
+export declare function Spinner({ size, color, className, style, 'data-testid': testId, }: SpinnerProps): JSX.Element;
+/**
+ * Спиннер.
+ * Выделен в отдельный компонент для возможности использования без обертки в виде div.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SpinnerSVG({ size, color, className, style, 'data-testid': testId, }: SpinnerProps): JSX.Element;
 export {};

package/spinner/index.js

@@ -3,32 +3,45 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = exports.DIAMETERS = void 0;
+exports.SpinnerSVG = exports.Spinner = exports.DIAMETERS = void 0;
 const react_1 = __importDefault(require("react"));
 const lodash_1 = require("lodash");
-const bind_1 = __importDefault(require("classnames/bind"));
 const colors_1 = require("../colors");
+const bind_1 = __importDefault(require("classnames/bind"));
 const spinner_module_scss_1 = __importDefault(require("./spinner.module.scss"));
 const cx = bind_1.default.bind(spinner_module_scss_1.default);
 exports.DIAMETERS = {
+    s: 20,
+    m: 48,
+    l: 80,
+    // legacy, @todo удалить со временем:
     small: 20,
     medium: 48,
     large: 80,
 };
 const DEFAULT_COLOR = 'basic-blue';
-const AVAILABLE_COLORS = ['basic-blue', 'basic-white'];
 /**
  * Компонент спиннера.
  * @param props Свойства.
  * @return Элемент.
  */
-const Spinner = ({ size = 'medium', color = DEFAULT_COLOR, className, style, }) => {
-    const readySize = (0, lodash_1.has)(exports.DIAMETERS, size) ? size : 'medium';
-    const readyColor = AVAILABLE_COLORS.includes(color) ? color : DEFAULT_COLOR;
-    const diameter = exports.DIAMETERS[readySize];
-    const radius = diameter / 2;
-    return (react_1.default.createElement("div", { className: className, style: style },
-        react_1.default.createElement("svg", { className: cx('spinner', `size-${readySize}`), viewBox: `0 0 ${diameter} ${diameter}`, width: diameter, height: diameter, stroke: colors_1.COLORS.get(readyColor) },
-            react_1.default.createElement("circle", { className: cx('circle'), cx: radius, cy: radius, r: radius - 1 }))));
-};
+function Spinner({ size = 'm', color = DEFAULT_COLOR, className, style, 'data-testid': testId = 'spinner', }) {
+    const readySize = (0, lodash_1.has)(exports.DIAMETERS, size) ? size : 'm';
+    const readyColor = colors_1.COLORS.has(color) ? color : DEFAULT_COLOR;
+    return (react_1.default.createElement("div", { className: className, style: style, "data-testid": testId },
+        react_1.default.createElement(SpinnerSVG, { size: readySize, color: readyColor, "data-testid": null })));
+}
 exports.Spinner = Spinner;
+/**
+ * Спиннер.
+ * Выделен в отдельный компонент для возможности использования без обертки в виде div.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SpinnerSVG({ size = 'm', color = DEFAULT_COLOR, className, style, 'data-testid': testId = 'spinner', }) {
+    const diameter = exports.DIAMETERS[size];
+    const radius = diameter / 2;
+    return (react_1.default.createElement("svg", { style: style, className: cx('spinner', `size-${size}`, className), viewBox: `0 0 ${diameter} ${diameter}`, width: diameter, height: diameter, stroke: colors_1.COLORS.get(color), "data-testid": testId },
+        react_1.default.createElement("circle", { className: cx('circle'), cx: radius, cy: radius, r: radius - 1 })));
+}
+exports.SpinnerSVG = SpinnerSVG;

package/spinner/spinner.module.scss

@@ -1,10 +1,18 @@
 $pi: 3.141592653589793;
 $sizes: (
+  s: 20,
+  m: 48,
+  l: 80,
+  // legacy, @todo удалить со временем:
   small: 20,
   medium: 48,
   large: 80,
 );
 $durations: (
+  s: 600ms,
+  m: 750ms,
+  l: 950ms,
+  // legacy, @todo удалить со временем:
   small: 600ms,
   medium: 750ms,
   large: 950ms,