@sima-land/ui-nucleons 40.2.1 → 41.1.0

package/side-page/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WithBodyScrollLock } from '../_internal/body-scroll';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 export interface SidePageProps extends WithBodyScrollLock {
     /** Нужно ли показать компонент. */
     shown?: boolean;
@@ -11,6 +12,18 @@ export interface SidePageProps extends WithBodyScrollLock {
     children?: React.ReactNode;
     /** Сработает при закрытии. */
     onClose?: () => void;
+    /** Обработчик "onEntering" для CSSTransition. */
+    onEntering?: CSSTransitionProps['onEntering'];
+    /** Обработчик "onEnter" для CSSTransition. */
+    onEnter?: CSSTransitionProps['onEnter'];
+    /** Обработчик "onEntered" для CSSTransition. */
+    onEntered?: CSSTransitionProps['onEntered'];
+    /** Обработчик "onExiting" для CSSTransition. */
+    onExiting?: CSSTransitionProps['onExiting'];
+    /** Обработчик "onExited" для CSSTransition. */
+    onExited?: CSSTransitionProps['onExited'];
+    /** Обработчик "onExit" для CSSTransition. */
+    onExit?: CSSTransitionProps['onExit'];
 }
 /**
  * Компонент модального окна, прикрепленного к правой стороне экрана.
@@ -18,7 +31,7 @@ export interface SidePageProps extends WithBodyScrollLock {
  * @return Элемент.
  */
 export declare const SidePage: {
-    ({ shown, withTransitions, ...restProps }: SidePageProps): JSX.Element;
+    ({ shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps }: SidePageProps): JSX.Element;
     Header: {
         ({ onBack, onClose, ...topBarProps }: import("../top-bar").TopBarProps & {
             onBack?: (() => void) | undefined;
@@ -28,7 +41,7 @@ export declare const SidePage: {
     };
     Body: {
         ({ children }: {
-            children?: React.ReactNode;
+            children?: React.ReactNode; /** Обработчик "onExiting" для CSSTransition. */
         }): JSX.Element;
         displayName: string;
     };

package/side-page/index.js

@@ -56,9 +56,9 @@ const transitionClasses = {
  * @return Элемент.
  */
 const SidePage = (_a) => {
-    var { shown, withTransitions } = _a, restProps = __rest(_a, ["shown", "withTransitions"]);
+    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 }, transitionStatus => (react_1.default.createElement(SidePageInner, Object.assign({}, restProps, { transitionStatus, transitionDuration })))));
+    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;
 /**

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/stroked-svg/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface StrokedSVGProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Компонент, выводящий svg-элемент. */
+    component: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
+    /** Ширина внешней обводки. */
+    stroke?: string;
+    /** Цвет внешней обводки. */
+    strokeWidth?: number;
+    /** Цвет заливки. */
+    fill?: string;
+}
+/**
+ * Выводит иконку с внешней обводкой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const StrokedSVG: React.ForwardRefExoticComponent<StrokedSVGProps & React.RefAttributes<HTMLDivElement>>;

package/stroked-svg/index.js

@@ -0,0 +1,52 @@
+"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.StrokedSVG = void 0;
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../colors");
+const classnames_1 = __importDefault(require("classnames"));
+const index_module_scss_1 = __importDefault(require("./index.module.scss"));
+/**
+ * Выводит иконку с внешней обводкой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+exports.StrokedSVG = (0, react_1.forwardRef)((_a, ref) => {
+    var { component: Tag, fill, stroke = colors_1.COLORS.get('gray4'), strokeWidth = 1, className } = _a, restProps = __rest(_a, ["component", "fill", "stroke", "strokeWidth", "className"]);
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(index_module_scss_1.default.root, className) }, restProps),
+        react_1.default.createElement(Tag, { stroke: stroke, strokeWidth: `${strokeWidth * 2}px`, className: index_module_scss_1.default.stroke }),
+        react_1.default.createElement(Tag, { fill: fill, className: index_module_scss_1.default.svg })));
+});
+exports.StrokedSVG.displayName = 'StrokedSVG';

package/stroked-svg/index.module.scss

@@ -0,0 +1,17 @@
+.root {
+  display: inline-flex;
+  position: relative;
+}
+
+.stroke {
+  overflow: visible;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.svg {
+  display: block;
+  position: relative;
+}

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/super-ellipse-clip-path/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface SuperEllipseClipPathProps {
     /** Идентификатор. */
     id?: string;

package/tabs/index.d.ts

@@ -1,29 +1,36 @@
-/**
- * Компонент списка табов.
- * @param props Свойства компонента.
- * @param props.items Список табов.
- * @param props.getItemName Функция получения имени для отрисовки элемента.
- * @param props.onSelectItem Функция, вызываемая при выборе элемента списка.
- * @param props.isSelectedItem Функция, определяющая, является ли элемент выбранным.
- * @param props.isDisabledItem Функция, определяющая, является ли элемент невыбираемым.
- * @param props.type Тип таба.
- * @param props.underline Нужно ли подчеркивание группы табов.
- * @param props.stretch Необходимо ли растягивать табы под размер контейнера.
- * @param props.gapSize Размер отступа между табами.
- * @param props.className Внешние классы.
- * @return Элемент.
- */
-export declare function Tabs<T = any>({ items, getItemName, onSelectItem, isSelectedItem, isDisabledItem, view, underline, stretch, gapSize, className, 'data-testid': dataTestId, }: {
-    items?: T[];
-} & {
-    getItemName?: (i: T) => string;
-    onSelectItem?: (i: T) => void;
-    isSelectedItem?: (i: T) => boolean | undefined;
-    isDisabledItem?: (i: T) => boolean | undefined;
-    view?: 'clean' | 'round';
-    underline?: boolean;
+import React from 'react';
+export interface TabsProps {
+    /** Визуальный вариант вкладок. */
+    view?: 'clean' | 'clean-underline' | 'round';
+    /** Необходимо ли растягивать вкладки под размер контейнера. */
     stretch?: boolean;
+    /** Размер отступа между вкладками. */
     gapSize?: 's' | 'm';
+    /** Внешние классы. */
     className?: string;
+    /** Вкладки. */
+    children?: React.ReactNode;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export interface TabsItemProps {
+    /** Название вкладки. */
+    name: string;
+    /** Выбрана ли вкладка. */
+    selected?: boolean;
+    /** Отключена ли вкладка. */
+    disabled?: boolean;
+    /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
-}): JSX.Element;
+    /** Обработчик клика. */
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+}
+/**
+ * Компонент строки вкладок.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const Tabs: {
+    ({ children, view, stretch, gapSize, className, "data-testid": testId, }: TabsProps): JSX.Element;
+    Item: ({ name, selected, disabled, "data-testid": testId, onClick, }: TabsItemProps) => JSX.Element;
+};

package/tabs/index.js

@@ -1,37 +1,43 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const bind_1 = __importDefault(require("classnames/bind"));
-const lodash_1 = require("lodash");
-const fp_1 = require("lodash/fp");
 const tabs_module_scss_1 = __importDefault(require("./tabs.module.scss"));
 const cx = bind_1.default.bind(tabs_module_scss_1.default);
 /**
- * Компонент списка табов.
- * @param props Свойства компонента.
- * @param props.items Список табов.
- * @param props.getItemName Функция получения имени для отрисовки элемента.
- * @param props.onSelectItem Функция, вызываемая при выборе элемента списка.
- * @param props.isSelectedItem Функция, определяющая, является ли элемент выбранным.
- * @param props.isDisabledItem Функция, определяющая, является ли элемент невыбираемым.
- * @param props.type Тип таба.
- * @param props.underline Нужно ли подчеркивание группы табов.
- * @param props.stretch Необходимо ли растягивать табы под размер контейнера.
- * @param props.gapSize Размер отступа между табами.
- * @param props.className Внешние классы.
+ * Вкладка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const Tab = ({ name, selected, disabled, 'data-testid': testId = 'tab', onClick, }) => (react_1.default.createElement("li", { className: cx('item', { selected, disabled }), "data-testid": testId, onClick: disabled ? undefined : onClick }, String(name)));
+/**
+ * Компонент строки вкладок.
+ * @param props Свойства.
  * @return Элемент.
  */
-function Tabs({ items, getItemName = lodash_1.identity, onSelectItem, isSelectedItem = (0, fp_1.prop)('active'), isDisabledItem = (0, fp_1.prop)('disabled'), view = 'clean', underline = false, stretch = false, gapSize = 'm', className, 'data-testid': dataTestId = 'tabs', }) {
-    return (react_1.default.createElement("ul", { "data-testid": dataTestId, className: cx('root', `view-${view}`, `gap-${gapSize}`, {
-            underline,
-            stretch,
-        }, className) }, items === null || items === void 0 ? void 0 : items.map((item, index) => (react_1.default.createElement("li", { key: index, onClick: () => onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(item), className: cx('tab-item', {
-            selected: isSelectedItem(item),
-            disabled: isDisabledItem(item),
-        }), "data-testid": 'tab' }, getItemName(item))))));
-}
+const Tabs = ({ children, view = 'clean', stretch = false, gapSize = 'm', className, 'data-testid': testId = 'tabs', }) => (react_1.default.createElement("ul", { "data-testid": testId, className: cx('root', `view-${view}`, `gap-${gapSize}`, { stretch }, className) }, react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && child.type === Tab)));
 exports.Tabs = Tabs;
+exports.Tabs.Item = Tab;

package/tabs/tabs.module.scss

@@ -10,6 +10,7 @@
   font-weight: 600;
   line-height: 24px;
   li {
+    display: block;
     margin: 0;
     &::before {
       content: none;
@@ -17,13 +18,14 @@
   }
   &.stretch {
     justify-items: stretch;
-    .tab-item {
+    .item {
       width: 100%;
     }
   }
-  &.view-clean {
+  &.view-clean,
+  &.view-clean-underline {
     height: 32px;
-    .tab-item {
+    .item {
       color: colors.$gray38;
       &.selected {
         position: relative;
@@ -49,22 +51,22 @@
         color: colors.$gray54;
       }
     }
-    &.underline {
-      height: 40px;
-      position: relative;
-      &::before {
-        position: absolute;
-        bottom: 0;
-        content: '';
-        height: 1px;
-        width: 100%;
-        background-color: colors.$gray12;
-      }
+  }
+  &.view-clean-underline {
+    height: 40px;
+    position: relative;
+    &::before {
+      position: absolute;
+      bottom: 0;
+      content: '';
+      height: 1px;
+      width: 100%;
+      background-color: colors.$gray12;
     }
   }
   &.view-round {
     height: 40px;
-    .tab-item {
+    .item {
       color: colors.$gray87;
       padding: 8px 16px;
       border-radius: 4px;
@@ -83,15 +85,15 @@
     }
   }
   &.gap-m {
-    --gap: 24px;
+    --tabs-gap: 24px;
   }
   &.gap-s {
-    --gap: 16px;
+    --tabs-gap: 16px;
   }
-  .tab-item {
+  .item {
     text-align: center;
     &:not(:last-child) {
-      margin-right: var(--gap);
+      margin-right: var(--tabs-gap);
     }
   }
 }

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;

package/timer/utils.js

@@ -14,10 +14,7 @@ const UNITS = ['day', 'hour', 'minute', 'second'];
  * @param distance Оставшееся время.
  * @return Отформатированное время.
  */
-const formatDistance = ({ days, hours, minutes, seconds }) => [
-    days,
-    ...[hours % 24, minutes % 60, seconds % 60].map(s => `${s}`.padStart(2, '0')),
-].join(':');
+const formatDistance = ({ days, hours, minutes, seconds }) => [days, ...[hours % 24, minutes % 60, seconds % 60].map(s => `${s}`.padStart(2, '0'))].join(':');
 exports.formatDistance = formatDistance;
 /**
  * Возвращает объект с данными об оставшемся времени от текущего момента.

package/top-bar/index.js

@@ -43,7 +43,7 @@ const TopBar = ({ divided, size = 'm', title, subtitle, buttonsProps: { start, s
         hasStartSecondary ? react_1.default.createElement(exports.IconButton, Object.assign({}, startSecondary)) : secondaryStub,
         react_1.default.createElement("div", { className: cx('main-section') },
             react_1.default.createElement("div", { className: cx('title', 'ellipsis') }, title),
-            Boolean(subtitle) && (react_1.default.createElement("div", { className: cx('subtitle', 'ellipsis') }, subtitle))),
+            Boolean(subtitle) && react_1.default.createElement("div", { className: cx('subtitle', 'ellipsis') }, subtitle)),
         hasEndSecondary ? react_1.default.createElement(exports.IconButton, Object.assign({}, endSecondary)) : secondaryStub,
         hasEnd ? react_1.default.createElement(exports.IconButton, Object.assign({}, end)) : stub));
 };

package/unknown-content/index.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 export interface UnknownContentProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Строка с html-версткой. */
-    markup: string;
+    markup?: string;
+    /** Содержимое. */
+    children?: React.ReactNode;
 }
 /**
  * Компонент, стилизующий верстку по гайдам.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const UnknownContent: ({ markup, className }: UnknownContentProps) => JSX.Element;
+export declare const UnknownContent: ({ markup, children, className }: UnknownContentProps) => JSX.Element;

package/unknown-content/index.js

@@ -1,16 +1,42 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnknownContent = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const unknown_content_module_scss_1 = __importDefault(require("./unknown-content.module.scss"));
+const utils_1 = require("./utils");
 /**
  * Компонент, стилизующий верстку по гайдам.
  * @param props Свойства.
  * @return Элемент.
  */
-const UnknownContent = ({ markup, className }) => (react_1.default.createElement("div", { className: (0, classnames_1.default)(unknown_content_module_scss_1.default.root, className), dangerouslySetInnerHTML: { __html: markup } }));
+const UnknownContent = ({ markup, children, className }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        ref.current && (0, utils_1.setTableRowLabels)(ref.current);
+    });
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(unknown_content_module_scss_1.default.root, className) }, (children ? { children } : { dangerouslySetInnerHTML: { __html: markup || '' } }))));
+};
 exports.UnknownContent = UnknownContent;