@sima-land/ui-nucleons 40.0.0 → 40.2.2

package/range/index.js

@@ -42,7 +42,7 @@ const cx = bind_1.default.bind(range_module_scss_1.default);
  * @param value Значение для расчета доли.
  * @return Доля, которую занимает значение.
  */
-const getFraction = (start, end, value) => ((value - start) / (end - start)) || 0;
+const getFraction = (start, end, value) => (value - start) / (end - start) || 0;
 /**
  * Возвращает процент от диапазона, заданную числом.
  * @param args Данные для расчета доли.
@@ -58,7 +58,7 @@ class Range extends react_1.Component {
      * @param props Свойства.
      */
     constructor(props) {
-        const { min = 0, max = 1, startValue = min, finishValue = max, } = props;
+        const { min = 0, max = 1, startValue = min, finishValue = max } = props;
         super(props);
         // конечное значение имеет приоритет - делаем стартовое зависимым от конечного
         const readyStart = this.constrainValue(Math.min(startValue, finishValue));
@@ -93,7 +93,7 @@ class Range extends react_1.Component {
     componentDidUpdate(prevProps) {
         const propKeys = ['min', 'max', 'step', 'startValue', 'finishValue'];
         if (propKeys.some(key => !Object.is(this.props[key], prevProps[key]))) {
-            const { startValue = this.start.get(), finishValue = this.finish.get(), } = this.props;
+            const { startValue = this.start.get(), finishValue = this.finish.get() } = this.props;
             // конечное значение имеет приоритет - делаем стартовое зависимым от конечного
             const readyStart = this.constrainValue(Math.min(startValue, finishValue));
             const readyFinish = this.constrainValue(finishValue);
@@ -171,11 +171,9 @@ class Range extends react_1.Component {
             const { left, right } = (0, bounds_of_1.default)(this.containerRef.current);
             const wrappedX = Math.max(start, Math.min((0, events_1.getEventClientPos)(event).x, end));
             const fraction = getFraction(left, right, wrappedX);
-            const value = this.constrainValue(min + (fraction * (max - min)));
+            const value = this.constrainValue(min + fraction * (max - min));
             // проверяем, является ползунок стартовым или конечным
-            thumbEl === this.startThumbRef.current
-                ? this.start.set(value)
-                : this.finish.set(value);
+            thumbEl === this.startThumbRef.current ? this.start.set(value) : this.finish.set(value);
         }
     }
     /**
@@ -233,9 +231,7 @@ class Range extends react_1.Component {
         else {
             isStartActive = abs(startX - clientX) < abs(finishX - clientX);
         }
-        this.activeThumbEl = (isStartActive
-            ? this.startThumbRef.current
-            : this.finishThumbRef.current);
+        this.activeThumbEl = (isStartActive ? this.startThumbRef.current : this.finishThumbRef.current);
         this.activeBounds = isStartActive
             ? [(0, bounds_of_1.default)(this.containerRef.current).left, finishX]
             : [startX, (0, bounds_of_1.default)(this.containerRef.current).right];
@@ -262,10 +258,11 @@ class Range extends react_1.Component {
                 handleEvent = onSlide;
                 break;
         }
-        handleEvent && handleEvent({
-            startValue: this.start.get(),
-            finishValue: this.finish.get(),
-        });
+        handleEvent &&
+            handleEvent({
+                startValue: this.start.get(),
+                finishValue: this.finish.get(),
+            });
     }
     /** @inheritdoc */
     render() {

package/rating/index.js

@@ -37,8 +37,8 @@ exports.Rating = Rating;
  * @return Элемент.
  */
 const Star = ({ type, size = 's' }) => (react_1.default.createElement("div", { className: cx('star', `size-${size}`) },
-    type === 'empty' && (react_1.default.createElement(star_svg_1.default, { className: cx('svg') })),
+    type === 'empty' && react_1.default.createElement(star_svg_1.default, { className: cx('svg') }),
     type === 'half' && (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(star_svg_1.default, { className: cx('svg') }),
         react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'half'), preserveAspectRatio: 'xMinYMin slice' }))),
-    type === 'full' && (react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'full') }))));
+    type === 'full' && react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'full') })));

package/readme.md

@@ -145,7 +145,7 @@ declare module '*.module.scss' {
 
 // svg как React-компоненты
 declare module '*.svg' {
-  const content: React.FC<React.SVGProps<SVGSVGElement>>;
+  const content: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
   export default content;
 }
 ```

package/screen/index.js

@@ -43,28 +43,26 @@ const Screen = ({ children, contentRef, footer, fullScrollThreshold = 320, loadi
         innerContentRef.current && (0, body_scroll_lock_1.enableBodyScroll)(innerContentRef.current);
     }, []);
     return (react_1.default.createElement(Wrapper, null,
-        react_1.default.createElement("div", { ref: rootRef, className: (0, utils_1.cx)('screen', 'full-width'), style: { zIndex: layer } }, loading && loadingArea === 'full'
-            ? react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps))
-            : (react_1.default.createElement(layer_1.LayerProvider, { value: layer },
-                react_1.default.createElement(screen_layout_1.ScreenLayout, { title: title, subtitle: subtitle, withHeader: withHeader, withDivideHeader: withDivideHeader, withBackButton: withBackButton, withCloseButton: withCloseButton, children: loading && loadingArea === 'content'
-                        ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, loadingArea === 'content' && {
-                            fill: false,
-                            style: { height: '100%' },
-                        })))
-                        : children, childrenRef: element => {
-                        (0, exports.setRefValue)(contentRef, element);
-                        (0, exports.takeScrollableElement)(innerContentRef, element);
-                    }, footer: footer, onBack: ({ contentElement }) => {
-                        onBack && onBack({
+        react_1.default.createElement("div", { ref: rootRef, className: (0, utils_1.cx)('screen', 'full-width'), style: { zIndex: layer } }, loading && loadingArea === 'full' ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps))) : (react_1.default.createElement(layer_1.LayerProvider, { value: layer },
+            react_1.default.createElement(screen_layout_1.ScreenLayout, { title: title, subtitle: subtitle, withHeader: withHeader, withDivideHeader: withDivideHeader, withBackButton: withBackButton, withCloseButton: withCloseButton, children: loading && loadingArea === 'content' ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, (loadingArea === 'content' && {
+                    fill: false,
+                    style: { height: '100%' },
+                })))) : (children), childrenRef: element => {
+                    (0, exports.setRefValue)(contentRef, element);
+                    (0, exports.takeScrollableElement)(innerContentRef, element);
+                }, footer: footer, onBack: ({ contentElement }) => {
+                    onBack &&
+                        onBack({
                             rootElement: rootRef.current,
                             contentElement,
                         });
-                    }, onClose: ({ contentElement }) => {
-                        onClose && onClose({
+                }, onClose: ({ contentElement }) => {
+                    onClose &&
+                        onClose({
                             rootElement: rootRef.current,
                             contentElement,
                         });
-                    }, onFullScroll: onFullScroll, fullScrollThreshold: fullScrollThreshold, navBarProps: navBarProps }))))));
+                }, onFullScroll: onFullScroll, fullScrollThreshold: fullScrollThreshold, navBarProps: navBarProps }))))));
 };
 exports.Screen = Screen;
 /**

package/screen/screen-layout.js

@@ -57,15 +57,21 @@ const ScreenLayout = ({ children, childrenRef, footer, fullScrollThreshold, navB
     return (react_1.default.createElement(react_1.default.Fragment, null,
         Boolean(withHeader) && (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, navBarProps, { title: title, subtitle: subtitle, bottomBordered: withDivideHeader, buttons: Object.assign(Object.assign({}, navBarProps.buttons), { start: withBackButton
                     ? {
+                        // ВАЖНО: не подмешиваем свойства из navBarProps.buttons.start
+                        // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
                         icon: arrow_left_1.default,
                         onClick: () => onBack && onBack({ contentElement: contentRef.current }),
                         'aria-label': 'Вернуться назад',
+                        'data-testid': 'screen:back',
                     }
                     : (0, lodash_1.get)(navBarProps.buttons, 'start'), end: withCloseButton
                     ? {
+                        // ВАЖНО: не подмешиваем свойства из navBarProps.buttons.end
+                        // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
                         icon: cross_1.default,
                         onClick: () => onClose && onClose({ contentElement: contentRef.current }),
                         'aria-label': `Закрыть ${title || ''}`.trim(),
+                        'data-testid': 'screen:close',
                     }
                     : (0, lodash_1.get)(navBarProps.buttons, 'end') }) }))),
         react_1.default.createElement("div", { className: (0, utils_1.cx)('content', 'full-width'), children: children, ref: (0, exports.createTakeContentRef)({
@@ -74,7 +80,7 @@ const ScreenLayout = ({ children, childrenRef, footer, fullScrollThreshold, navB
                 onFullScroll,
                 fullScrollThreshold,
             }) }),
-        Boolean(footer) && (react_1.default.createElement("div", { className: (0, utils_1.cx)('footer', 'full-width') }, footer))));
+        Boolean(footer) && react_1.default.createElement("div", { className: (0, utils_1.cx)('footer', 'full-width') }, footer)));
 };
 exports.ScreenLayout = ScreenLayout;
 /**
@@ -101,9 +107,9 @@ const createTakeContentRef = ({ elementRef, unsubscribeRef, onFullScroll, fullSc
         unsubscribeRef.current && unsubscribeRef.current();
         // выполняем подписку, сохраняем функцию отписки
         unsubscribeRef.current = (0, on_1.default)(element, 'scroll', () => {
-            (0, is_fully_scrolled_1.isFullyScrolled)(element, { threshold })
-                && onFullScroll
-                && onFullScroll({ contentElement: element });
+            (0, is_fully_scrolled_1.isFullyScrolled)(element, { threshold }) &&
+                onFullScroll &&
+                onFullScroll({ contentElement: element });
         });
     }
 };

package/select/index.js

@@ -69,7 +69,7 @@ const Select = (_a) => {
                 relatedTarget !== menuRef.current && toggleMenu(false);
             }, onKeyDown: (e) => {
                 e.key === 'Enter' && toggleMenu(true);
-            }, className: cx('field'), endAdornment: (react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') })) })),
+            }, className: cx('field'), endAdornment: react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') }) })),
         opened && (loading || options.length > 0) && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'select:menu', tabIndex: -1, className: cx('menu'), onBlur: () => {
                 toggleMenu(false);
             }, role: 'menu', onKeyDown: (event) => {
@@ -77,11 +77,9 @@ const Select = (_a) => {
                     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))))))));
+            } }), 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/side-page/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { WithBodyScrollLock } from '../_internal/body-scroll';
+export interface SidePageProps extends WithBodyScrollLock {
+    /** Нужно ли показать компонент. */
+    shown?: boolean;
+    /** Нужно ли использовать анимации при открытии/закрытии. */
+    withTransitions?: boolean;
+    /** Ширина. */
+    size?: 's' | 'm';
+    /** Содержимое. */
+    children?: React.ReactNode;
+    /** Сработает при закрытии. */
+    onClose?: () => void;
+}
+/**
+ * Компонент модального окна, прикрепленного к правой стороне экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const SidePage: {
+    ({ shown, withTransitions, ...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: {
+        (props: import("../bottom-bar").BottomBarProps): JSX.Element;
+        displayName: string;
+    };
+};

package/side-page/index.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.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 slots_1 = require("./slots");
+const CSSTransition_1 = __importDefault(require("react-transition-group/CSSTransition"));
+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);
+const transitionClasses = {
+    enter: cx('enter'),
+    enterActive: cx('enter-active'),
+    exit: cx('exit'),
+    exitActive: cx('exit-active'),
+};
+/**
+ * Компонент модального окна, прикрепленного к правой стороне экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const SidePage = (_a) => {
+    var { shown, withTransitions } = _a, restProps = __rest(_a, ["shown", "withTransitions"]);
+    const transitionDuration = withTransitions ? 300 : 0;
+    return (react_1.default.createElement(CSSTransition_1.default, { in: shown, timeout: transitionDuration, classNames: transitionClasses, unmountOnExit: true }, 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);
+    const ref = (0, react_1.useRef)(null);
+    const overlayStyles = {
+        zIndex: layer,
+        '--transition-duration': `${transitionDuration}ms`,
+    };
+    const { header, body, footer } = (0, define_slots_1.defineSlots)(children, {
+        header: exports.SidePage.Header,
+        body: exports.SidePage.Body,
+        footer: exports.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("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;

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

@@ -0,0 +1,81 @@
+@use '../colors';
+
+$overlay-color: rgba(0, 0, 0, 0.24);
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $overlay-color;
+}
+
+.main {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.size-s {
+  max-width: 488px;
+}
+
+.size-m {
+  max-width: 968px;
+}
+
+.header {
+  flex-shrink: 0;
+}
+
+.body {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.footer {
+  flex-shrink: 0;
+  width: 100%;
+  padding: 0 40px;
+}
+
+// transitions
+.enter {
+  background-color: transparent;
+  .main {
+    transform: translateX(100%);
+  }
+}
+
+.enter-active {
+  transition: background-color var(--transition-duration) ease-in-out;
+  background-color: $overlay-color;
+  overflow: hidden;
+  .main {
+    transition: transform var(--transition-duration) ease-in-out;
+    transform: translateX(0);
+  }
+}
+
+.exit {
+  background-color: $overlay-color;
+  .main {
+    transform: translateX(0);
+  }
+}
+
+.exit-active {
+  transition: background-color var(--transition-duration) ease-in-out;
+  background-color: transparent;
+  overflow: hidden;
+  .main {
+    transition: transform var(--transition-duration) ease-in-out;
+    transform: translateX(100%);
+  }
+}

package/side-page/slots.d.ts

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

package/side-page/slots.js

@@ -0,0 +1,59 @@
+"use strict";
+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.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"));
+/**
+ * @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),
+            },
+        })) })));
+};
+exports.SidePageHeader = SidePageHeader;
+exports.SidePageHeader.displayName = 'SidePage.Header';
+/**
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const SidePageBody = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
+exports.SidePageBody = SidePageBody;
+exports.SidePageBody.displayName = 'SidePage.Body';
+/**
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const SidePageFooter = (props) => (react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, props, { size: 'm', className: side_page_module_scss_1.default.footer })));
+exports.SidePageFooter = SidePageFooter;
+exports.SidePageFooter.displayName = 'SidePage.Footer';

package/spinner/index.d.ts

@@ -15,7 +15,7 @@ export declare const DIAMETERS: Record<Size, number>;
 /**
  * Компонент спиннера.
  * @param props Свойства.
- * @return Компонент.
+ * @return Элемент.
  */
 export declare const Spinner: ({ size, color, className, style, }: SpinnerProps) => JSX.Element;
 export {};

package/spinner/index.js

@@ -20,7 +20,7 @@ const AVAILABLE_COLORS = ['brand-blue', 'white'];
 /**
  * Компонент спиннера.
  * @param props Свойства.
- * @return Компонент.
+ * @return Элемент.
  */
 const Spinner = ({ size = 'medium', color = DEFAULT_COLOR, className, style, }) => {
     const readySize = (0, lodash_1.has)(exports.DIAMETERS, size) ? size : 'medium';

package/spinner/spinner.module.scss

@@ -23,10 +23,7 @@ $durations: (
       width: #{$diameter}px;
       height: #{$diameter}px;
       .circle {
-        animation: dash-#{$sizeKey}
-          map-get($durations, $sizeKey)
-          linear
-          infinite;
+        animation: dash-#{$sizeKey} map-get($durations, $sizeKey) linear infinite;
       }
       @keyframes dash-#{$sizeKey} {
         0% {

package/styling/fonts.js

@@ -7,9 +7,7 @@ exports.weight = exports.lineHeight = exports.size = exports.WEIGHTS = exports.L
 const utils_1 = require("./utils");
 const fonts_module_scss_1 = __importDefault(require("./fonts.module.scss"));
 exports.SIZES = new Set([12, 14, 16, 20, 24, 32, 48, 64]);
-exports.LINE_HEIGHTS = new Set([
-    16, 20, 24, 28, 32, 40, 60, 80,
-]);
+exports.LINE_HEIGHTS = new Set([16, 20, 24, 28, 32, 40, 60, 80]);
 exports.WEIGHTS = new Set([400, 600, 700]);
 exports.size = (0, utils_1.ClassGetter)(fonts_module_scss_1.default, exports.SIZES.has.bind(exports.SIZES), 'size-');
 exports.lineHeight = (0, utils_1.ClassGetter)(fonts_module_scss_1.default, exports.LINE_HEIGHTS.has.bind(exports.LINE_HEIGHTS), 'line-height-');

package/styling/utils.js

@@ -14,8 +14,6 @@ const bind_1 = __importDefault(require("classnames/bind"));
  */
 const ClassGetter = (classes, isValidKey, prefix = '') => {
     const cx = bind_1.default.bind(classes);
-    return (value) => isValidKey(value)
-        ? cx(`${prefix}${value}`)
-        : undefined;
+    return (value) => (isValidKey(value) ? cx(`${prefix}${value}`) : undefined);
 };
 exports.ClassGetter = ClassGetter;

package/text-field/index.js

@@ -45,7 +45,7 @@ const isVisible = (value) => !(0, lodash_1.isNil)(value) && `${value}` !== '';
  * @param modifiers Данные визуальных модификаторов.
  * @return Строка с css-классами.
  */
-const modifiersToClasses = ({ disabled, failed, focused, variant }) => cx(disabled && 'disabled', failed && 'failed', focused && 'focused', variant && `variant-${variant}`);
+const modifiersToClasses = ({ disabled, failed, focused, variant, }) => cx(disabled && 'disabled', failed && 'failed', focused && 'focused', variant && `variant-${variant}`);
 /**
  * Компонент текстового поля.
  * @param props Свойства.
@@ -73,20 +73,13 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
         react_1.default.createElement("div", { "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds]), onClick: event => {
                 const input = baseInputRef.current;
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
-                input
-                    && !disabled
-                    && input !== document.activeElement
-                    && input.focus();
+                input && !disabled && input !== document.activeElement && input.focus();
             } },
             !multiline && Boolean(startAdornment) && (react_1.default.createElement(box_1.Box, { display: 'flex', alignItems: 'center', marginRight: 4 }, startAdornment)),
             react_1.default.createElement("div", { className: cx('main-column') },
                 withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), children: label })),
                 react_1.default.createElement("div", { className: cx('input-wrapper') },
-                    react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder
-                            ? undefined
-                            : placeholder, restPlaceholder: withLabel && labelAsPlaceholder
-                            ? undefined
-                            : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
+                    react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
                             (0, lodash_1.isFunction)(onFocus) && onFocus(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(true);

package/timer/index.d.ts

@@ -9,8 +9,8 @@ export interface TimerProps {
     timeout?: number;
 }
 /**
- * Возвращает таймер с временем между событием и текущим временем.
- * @param props Свойства компонента.
+ * Компонент для вывода оставшегося времени до целевой временной отметки.
+ * @param props Свойства.
  * @return Элемент.
  */
-export declare const Timer: ({ date, format, timeout, }: TimerProps) => JSX.Element;
+export declare const Timer: ({ date, format, timeout }: TimerProps) => JSX.Element;

package/timer/index.js

@@ -23,11 +23,11 @@ exports.Timer = void 0;
 const react_1 = __importStar(require("react"));
 const utils_1 = require("./utils");
 /**
- * Возвращает таймер с временем между событием и текущим временем.
- * @param props Свойства компонента.
+ * Компонент для вывода оставшегося времени до целевой временной отметки.
+ * @param props Свойства.
  * @return Элемент.
  */
-const Timer = ({ date, format = utils_1.formatDistance, timeout = 1000, }) => {
+const Timer = ({ date, format = utils_1.formatDistance, timeout = 1000 }) => {
     const [distance, setDistance] = (0, react_1.useState)((0, utils_1.getDistanceToNow)(date));
     (0, react_1.useEffect)(() => {
         const timerId = setInterval(() => {
@@ -36,6 +36,6 @@ const Timer = ({ date, format = utils_1.formatDistance, timeout = 1000, }) => {
         setDistance((0, utils_1.getDistanceToNow)(date));
         return () => clearInterval(timerId);
     }, [timeout]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, format(distance)));
+    return react_1.default.createElement(react_1.default.Fragment, null, format(distance));
 };
 exports.Timer = Timer;