@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.3

package/avatar/avatar.module.scss

@@ -53,6 +53,9 @@ $textSizes: (
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  // ВАЖНО: чтобы например обертка в виде ссылки не накидывала text-decoration: underline
+  text-decoration: none;
 }
 
 .icon {

package/group-overflow/group-overflow.module.scss

@@ -0,0 +1,24 @@
+.root {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.items {
+  flex-shrink: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-start;
+  > * {
+    flex-shrink: 0;
+    max-width: 100%;
+  }
+  > *:not(:first-child) {
+    margin-left: var(--group-overflow-gap, 8px);
+  }
+}
+
+.more {
+  margin-left: var(--group-overflow-gap, 8px);
+  flex-grow: 0;
+  flex-shrink: 0;
+}

package/group-overflow/index.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type RenderTail = (data: {
+    hiddenCount: number;
+}) => ReactNode;
+export interface GroupOverflowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Расстояние между элементами в пикселях. */
+    gap?: number;
+    /** Вернёт "замыкающий" элемент, который будет выведен по аналогии с многоточием для текста. */
+    tail?: RenderTail;
+}
+/**
+ * Группа со скрытием не влезающих элементов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function GroupOverflow({ children, className, style, gap, tail, ...restProps }: GroupOverflowProps): JSX.Element;

package/group-overflow/index.js

@@ -0,0 +1,61 @@
+"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.GroupOverflow = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("./utils");
+const classnames_1 = __importDefault(require("classnames"));
+const group_overflow_module_scss_1 = __importDefault(require("./group-overflow.module.scss"));
+/**
+ * Группа со скрытием не влезающих элементов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function GroupOverflow(_a) {
+    var { children, className, style, gap, tail } = _a, restProps = __rest(_a, ["children", "className", "style", "gap", "tail"]);
+    const ref = (0, react_1.useRef)(null);
+    const { state, start } = (0, utils_1.useItemsHide)(ref, el => { var _a; return (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement; });
+    const total = react_1.Children.count(children);
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(group_overflow_module_scss_1.default.root, className), style: gap ? Object.assign(Object.assign({}, style), { '--group-overflow-gap': `${gap}px` }) : style }, restProps),
+        react_1.default.createElement("div", { ref: ref, className: group_overflow_module_scss_1.default.items }, state === 'initial'
+            ? react_1.Children.toArray(children)
+            : react_1.Children.toArray(children).slice(0, start)),
+        state !== 'initial' && start < total && tail && (react_1.default.createElement("div", { className: group_overflow_module_scss_1.default.more }, tail({ hiddenCount: total - start })))));
+}
+exports.GroupOverflow = GroupOverflow;

package/group-overflow/utils.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+type HideStatus = 'initial' | 'hidden' | 'hidden+more';
+/**
+ * Хук состояния скрытия не влезающих элементов.
+ * @param ref Реф с контейнером.
+ * @param getParent Получив контейнер вернет элемент за изменением ширины которого надо следить.
+ * @return Состояние.
+ */
+export declare function useItemsHide(ref: RefObject<HTMLElement>, getParent: (el: HTMLElement) => HTMLElement | null | undefined): {
+    state: HideStatus;
+    start: number;
+};
+/**
+ * Вернет индекс дочернего элемента, который не влез в контейнер по ширине.
+ * Работает только если все дочерние узлы размещены в одной строке (без переноса).
+ * @param element Контейнер.
+ * @return Индекс.
+ */
+export declare function defineHideStart(element: HTMLElement): number;
+export {};

package/group-overflow/utils.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineHideStart = exports.useItemsHide = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+/**
+ * Хук состояния скрытия не влезающих элементов.
+ * @param ref Реф с контейнером.
+ * @param getParent Получив контейнер вернет элемент за изменением ширины которого надо следить.
+ * @return Состояние.
+ */
+function useItemsHide(ref, getParent) {
+    const [state, setState] = (0, react_1.useState)('initial');
+    const [start, setStart] = (0, react_1.useState)(-1);
+    const calculateHideStart = (0, react_1.useCallback)((nextState) => {
+        if (ref.current) {
+            setStart(defineHideStart(ref.current));
+            setState(nextState);
+        }
+    }, [ref]);
+    // следим за изменениями размера **родительского** элемента
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (!ref.current) {
+            return;
+        }
+        const parent = getParent(ref.current);
+        if (!parent) {
+            return;
+        }
+        const observer = new ResizeObserver(() => setState('initial'));
+        observer.observe(parent);
+        return () => observer.disconnect();
+    }, [ref]);
+    const lastStateRef = (0, react_1.useRef)(null);
+    // при каждом **внешнем** ререндере сбрасываем состояние
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (state === lastStateRef.current) {
+            setStart(-1);
+            setState('initial');
+        }
+        else {
+            lastStateRef.current = state;
+        }
+    });
+    // меняем состояние по итогам рендера
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        switch (state) {
+            case 'initial':
+                calculateHideStart('hidden');
+                break;
+            case 'hidden':
+                calculateHideStart('hidden+more');
+                break;
+        }
+    }, [state]);
+    return { state, start };
+}
+exports.useItemsHide = useItemsHide;
+/**
+ * Вернет индекс дочернего элемента, который не влез в контейнер по ширине.
+ * Работает только если все дочерние узлы размещены в одной строке (без переноса).
+ * @param element Контейнер.
+ * @return Индекс.
+ */
+function defineHideStart(element) {
+    const limit = Math.floor(element.getBoundingClientRect().right);
+    for (const [index, item] of [...element.children].entries()) {
+        if (index > 0 && Math.floor(item.getBoundingClientRect().right) > limit) {
+            return index;
+        }
+    }
+    return element.children.length;
+}
+exports.defineHideStart = defineHideStart;

package/hint/utils.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, Dispatch, MutableRefObject, SetStateAction } from 'react';
-import { ExtendedRefs, ReferenceType, UseFloatingProps, UseFloatingReturn } from '@floating-ui/react';
+import { ExtendedRefs, ReferenceType, UseFloatingProps, UseFloatingReturn, UseHoverProps } from '@floating-ui/react';
 interface HintExtendedRefs<RT> extends ExtendedRefs<RT> {
     setArrow: (el: HTMLElement | null) => void;
 }
@@ -35,9 +35,10 @@ export declare function getArrowFloatingStyle({ placement, middlewareData, }: Pi
 /**
  * Показ всплывающего хинта при наведении.
  * @param floating Результат вызова useFloating.
+ * @param props Пропсы для useHover.
  * @return Опции для открывающего и всплывающего элемента.
  */
-export declare function useHintOnHover(floating: Pick<UseFloatingReturn, 'context' | 'strategy' | 'placement' | 'x' | 'y' | 'middlewareData'>): {
+export declare function useHintOnHover<RT extends ReferenceType = ReferenceType>(floating: Pick<UseFloatingReturn<RT>, 'context' | 'strategy' | 'placement' | 'x' | 'y' | 'middlewareData'>, props?: UseHoverProps<RT>): {
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;

package/hint/utils.js

@@ -110,11 +110,12 @@ exports.getArrowFloatingStyle = getArrowFloatingStyle;
 /**
  * Показ всплывающего хинта при наведении.
  * @param floating Результат вызова useFloating.
+ * @param props Пропсы для useHover.
  * @return Опции для открывающего и всплывающего элемента.
  */
-function useHintOnHover(floating) {
+function useHintOnHover(floating, props) {
     const style = useHintFloatingStyle(floating);
-    const hover = (0, react_2.useHover)(floating.context, { delay: { close: 120 } });
+    const hover = (0, react_2.useHover)(floating.context, Object.assign({ handleClose: (0, react_2.safePolygon)() }, props));
     return (0, react_2.useInteractions)([hover, { floating: { style } }]);
 }
 exports.useHintOnHover = useHintOnHover;

package/modal/index.d.ts

@@ -13,6 +13,8 @@ export interface ModalProps extends WithPageScrollLock {
     onClose?: () => void;
     /** Размер окна. */
     size?: ModalSize;
+    /** Нужно ли выводить заглушку вместо футера если он не задан. */
+    footerStub?: boolean;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
@@ -21,7 +23,7 @@ export interface ModalProps extends WithPageScrollLock {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function Modal({ children, height, onClose, scrollDisableOptions, size, withScrollDisable, 'data-testid': testId, }: ModalProps): JSX.Element;
+export declare function Modal({ children, height, onClose, scrollDisableOptions, size, footerStub, withScrollDisable, 'data-testid': testId, }: ModalProps): JSX.Element;
 export declare namespace Modal {
     var Header: typeof ModalHeader;
     var Body: typeof ModalBody;

package/modal/index.js

@@ -19,7 +19,7 @@ const cx = bind_1.default.bind(modal_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-function Modal({ children, height, onClose, scrollDisableOptions, size = 'm', withScrollDisable = false, 'data-testid': testId = 'modal', }) {
+function Modal({ children, height, onClose, scrollDisableOptions, size = 'm', footerStub = size !== 'fullscreen', withScrollDisable = false, 'data-testid': testId = 'modal', }) {
     const overlayClickBind = (0, utils_2.useExactClick)(onClose);
     const fullscreen = size === 'fullscreen';
     const { header, content, footer, overlap } = (0, define_slots_1.defineSlots)(children, {
@@ -44,7 +44,7 @@ function Modal({ children, height, onClose, scrollDisableOptions, size = 'm', wi
                 header,
                 content,
                 footer,
-                !footer && !fullscreen && react_1.default.createElement("div", { className: cx('footer-stub') }),
+                !footer && footerStub && react_1.default.createElement("div", { className: cx('footer-stub') }),
                 overlap && (react_1.default.createElement("div", { className: cx('overlap-content'), "data-testid": 'modal:overlap' }, overlap))))));
 }
 exports.Modal = Modal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "45.0.0-alpha.2",
+  "version": "45.0.0-alpha.3",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",

package/styling/borders.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated */
 export declare const InnerBorder: {
     y: string;
     top: string;

package/styling/borders.js

@@ -7,6 +7,7 @@ exports.InnerBorder = void 0;
 const bind_1 = __importDefault(require("classnames/bind"));
 const borders_module_scss_1 = __importDefault(require("./borders.module.scss"));
 const cx = bind_1.default.bind(borders_module_scss_1.default);
+/** @deprecated */
 exports.InnerBorder = {
     y: cx('inner-border-y'),
     top: cx('inner-border-top'),

package/styling/colors.d.ts

@@ -1,5 +1,10 @@
+/** @deprecated */
 export declare const color: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+/** @deprecated */
 export declare const hoverColor: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+/** @deprecated */
 export declare const bgColor: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+/** @deprecated */
 export declare const stroke: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+/** @deprecated */
 export declare const fill: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;

package/styling/colors.js

@@ -8,8 +8,13 @@ const utils_1 = require("./utils");
 const colors_1 = require("../colors");
 const colors_module_scss_1 = __importDefault(require("./colors.module.scss"));
 const isColorKey = colors_1.COLORS.has.bind(colors_1.COLORS);
+/** @deprecated */
 exports.color = (0, utils_1.ClassGetter)(colors_module_scss_1.default, isColorKey, 'color__');
+/** @deprecated */
 exports.hoverColor = (0, utils_1.ClassGetter)(colors_module_scss_1.default, isColorKey, 'hover-color__');
+/** @deprecated */
 exports.bgColor = (0, utils_1.ClassGetter)(colors_module_scss_1.default, isColorKey, 'bg-color__');
+/** @deprecated */
 exports.stroke = (0, utils_1.ClassGetter)(colors_module_scss_1.default, isColorKey, 'stroke__');
+/** @deprecated */
 exports.fill = (0, utils_1.ClassGetter)(colors_module_scss_1.default, isColorKey, 'fill__');

package/styling/fonts.d.ts

@@ -4,6 +4,9 @@ export type Weight = 400 | 600 | 700;
 export declare const SIZES: Set<Size>;
 export declare const LINE_HEIGHTS: Set<LineHeight>;
 export declare const WEIGHTS: Set<Weight>;
+/** @deprecated */
 export declare const size: (value: Size) => string | undefined;
+/** @deprecated */
 export declare const lineHeight: (value: LineHeight) => string | undefined;
+/** @deprecated */
 export declare const weight: (value: Weight) => string | undefined;

package/styling/fonts.js

@@ -9,6 +9,9 @@ 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.WEIGHTS = new Set([400, 600, 700]);
+/** @deprecated */
 exports.size = (0, utils_1.ClassGetter)(fonts_module_scss_1.default, exports.SIZES.has.bind(exports.SIZES), 'size-');
+/** @deprecated */
 exports.lineHeight = (0, utils_1.ClassGetter)(fonts_module_scss_1.default, exports.LINE_HEIGHTS.has.bind(exports.LINE_HEIGHTS), 'line-height-');
+/** @deprecated */
 exports.weight = (0, utils_1.ClassGetter)(fonts_module_scss_1.default, exports.WEIGHTS.has.bind(exports.WEIGHTS), 'weight-');

package/styling/shadows.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated */
 export declare const BoxShadow: {
     z1: string;
     z2: string;

package/styling/shadows.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BoxShadow = void 0;
 const shadows_module_scss_1 = __importDefault(require("./shadows.module.scss"));
+/** @deprecated */
 exports.BoxShadow = {
     z1: shadows_module_scss_1.default['shadow-z1'],
     z2: shadows_module_scss_1.default['shadow-z2'],

package/styling/shapes.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated */
 export declare const SmallRounds: {
     all: string;
     top: string;
@@ -9,6 +10,7 @@ export declare const SmallRounds: {
     bottomLeft: string;
     bottomRight: string;
 };
+/** @deprecated */
 export declare const MediumRounds: {
     all: string;
     top: string;

package/styling/shapes.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MediumRounds = exports.SmallRounds = void 0;
 const shapes_module_scss_1 = __importDefault(require("./shapes.module.scss"));
+/** @deprecated */
 exports.SmallRounds = {
     all: shapes_module_scss_1.default['rounds-sm__all'],
     top: shapes_module_scss_1.default['rounds-sm__t'],
@@ -16,6 +17,7 @@ exports.SmallRounds = {
     bottomLeft: shapes_module_scss_1.default['rounds-sm__b-l'],
     bottomRight: shapes_module_scss_1.default['rounds-sm__b-r'],
 };
+/** @deprecated */
 exports.MediumRounds = {
     all: shapes_module_scss_1.default['rounds-md__all'],
     top: shapes_module_scss_1.default['rounds-md__t'],

package/styling/sizes.d.ts

@@ -1,20 +1,30 @@
 /**
  * Проверяет, является ли значение шагом дизайн-системы для внешних отступов.
+ * @deprecated
  * @param value Значение.
  * @return Результат.
  */
 export declare const isMargin: (value: any) => boolean;
 /**
  * Проверяет, является ли значение шагом дизайн-системы для внутренних отступов.
+ * @deprecated
  * @param value Значение.
  * @return Результат.
  */
 export declare const isPadding: (value: any) => boolean;
+/** @deprecated */
 export declare const marginTop: (value: any) => string | undefined;
+/** @deprecated */
 export declare const marginRight: (value: any) => string | undefined;
+/** @deprecated */
 export declare const marginBottom: (value: any) => string | undefined;
+/** @deprecated */
 export declare const marginLeft: (value: any) => string | undefined;
+/** @deprecated */
 export declare const paddingTop: (value: any) => string | undefined;
+/** @deprecated */
 export declare const paddingRight: (value: any) => string | undefined;
+/** @deprecated */
 export declare const paddingBottom: (value: any) => string | undefined;
+/** @deprecated */
 export declare const paddingLeft: (value: any) => string | undefined;

package/styling/sizes.js

@@ -8,6 +8,7 @@ const utils_1 = require("./utils");
 const sizes_module_scss_1 = __importDefault(require("./sizes.module.scss"));
 /**
  * Проверяет, является ли значение шагом дизайн-системы для внешних отступов.
+ * @deprecated
  * @param value Значение.
  * @return Результат.
  */
@@ -15,16 +16,25 @@ const isMargin = (value) => Number.isInteger(value) && value >= -8 && value <= 3
 exports.isMargin = isMargin;
 /**
  * Проверяет, является ли значение шагом дизайн-системы для внутренних отступов.
+ * @deprecated
  * @param value Значение.
  * @return Результат.
  */
 const isPadding = (value) => Number.isInteger(value) && value >= 0 && value <= 32;
 exports.isPadding = isPadding;
+/** @deprecated */
 exports.marginTop = (0, utils_1.ClassGetter)(sizes_module_scss_1.default, exports.isMargin, 'M-t__');
+/** @deprecated */
 exports.marginRight = (0, utils_1.ClassGetter)(sizes_module_scss_1.default, exports.isMargin, 'M-r__');
+/** @deprecated */
 exports.marginBottom = (0, utils_1.ClassGetter)(sizes_module_scss_1.default, exports.isMargin, 'M-b__');
+/** @deprecated */
 exports.marginLeft = (0, utils_1.ClassGetter)(sizes_module_scss_1.default, exports.isMargin, 'M-l__');
+/** @deprecated */
 exports.paddingTop = (0, utils_1.ClassGetter)(sizes_module_scss_1.default, exports.isPadding, 'P-t__');
+/** @deprecated */
 exports.paddingRight = (0, utils_1.ClassGetter)(sizes_module_scss_1.default, exports.isPadding, 'P-r__');
+/** @deprecated */
 exports.paddingBottom = (0, utils_1.ClassGetter)(sizes_module_scss_1.default, exports.isPadding, 'P-b__');
+/** @deprecated */
 exports.paddingLeft = (0, utils_1.ClassGetter)(sizes_module_scss_1.default, exports.isPadding, 'P-l__');

package/styling/utils.d.ts

@@ -4,5 +4,6 @@
  * @param isValidKey Функция проверки ключа для класса.
  * @param [prefix=''] Префикс имени класса.
  * @return Геттер CSS-класса.
+ * @deprecated
  */
 export declare const ClassGetter: <T = string | number>(classes: Record<string, string>, isValidKey: (s: T) => boolean, prefix?: string) => (value: T) => string | undefined;

package/styling/utils.js

@@ -11,6 +11,7 @@ const bind_1 = __importDefault(require("classnames/bind"));
  * @param isValidKey Функция проверки ключа для класса.
  * @param [prefix=''] Префикс имени класса.
  * @return Геттер CSS-класса.
+ * @deprecated
  */
 const ClassGetter = (classes, isValidKey, prefix = '') => {
     const cx = bind_1.default.bind(classes);

package/top-bar/types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 export type TopBarSize = 's' | 'm' | 'xl';
 export interface TopBarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Иконка. */
@@ -21,9 +21,9 @@ export interface TopBarProps {
     /** Размер. */
     size?: TopBarSize | 'unset';
     /** Подзаголовок. */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /** Заголовок. */
-    title?: string;
+    title?: ReactNode;
     /** Нужна ли разделительная черта снизу. */
     divided?: boolean;
     /** Идентификатор для систем автоматизированного тестирования. */

package/utils.scss

@@ -72,11 +72,18 @@
   }
 }
 
+/**
+ * Добавляет стандартную визуальную подсветку состояния focus-visible.
+ */
+@mixin focus-visible-style() {
+  outline: 2px solid colors.$basic-blue;
+}
+
 /**
  * Формирует стандартную визуальную подсветку для состояния focus-visible.
  */
 @mixin focus-visible() {
   &:focus-visible {
-    outline: 2px solid colors.$basic-blue;
+    @include focus-visible-style;
   }
 }