@sima-land/ui-nucleons 44.2.9 → 45.0.0-alpha.0

package/top-bar/index.js

@@ -1,62 +1,6 @@
 "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.IconButton = exports.TopBar = exports.TOP_BAR_HEIGHT = void 0;
-const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const lodash_1 = require("lodash");
-const top_bar_module_scss_1 = __importDefault(require("./top-bar.module.scss"));
-const borders_1 = require("../styling/borders");
-// некоторым компонентам нужно знать конкретную высоту, делаем единый источник
-exports.TOP_BAR_HEIGHT = {
-    s: 64,
-    m: 80,
-};
-const cx = bind_1.default.bind(top_bar_module_scss_1.default);
-/**
- * Компонент шапки модальных окон/экранов.
- * @param props Свойства.
- * @return Элемент.
- */
-const TopBar = ({ divided, size = 'm', title, subtitle, buttonsProps: { start, startSecondary, end, endSecondary } = {}, className, }) => {
-    const hasStart = (0, lodash_1.has)(start, 'icon');
-    const hasStartSecondary = (0, lodash_1.has)(startSecondary, 'icon');
-    const hasEnd = (0, lodash_1.has)(end, 'icon');
-    const hasEndSecondary = (0, lodash_1.has)(endSecondary, 'icon');
-    const stub = hasStart || hasEnd ? iconStub : null;
-    const secondaryStub = hasStartSecondary || hasEndSecondary ? iconStub : null;
-    return (react_1.default.createElement("div", { className: cx('root', `size-${size}`, className, divided && borders_1.InnerBorder.bottom), style: { height: `${exports.TOP_BAR_HEIGHT[size]}px` } },
-        hasStart ? react_1.default.createElement(exports.IconButton, Object.assign({}, start)) : stub,
-        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)),
-        hasEndSecondary ? react_1.default.createElement(exports.IconButton, Object.assign({}, endSecondary)) : secondaryStub,
-        hasEnd ? react_1.default.createElement(exports.IconButton, Object.assign({}, end)) : stub));
-};
-exports.TopBar = TopBar;
-/**
- * Компонент кнопки-иконки.
- * @param props Свойства. Поддерживаются свойства button.
- * @param props.icon Иконка.
- * @return Элемент.
- */
-const IconButton = (_a) => {
-    var { icon } = _a, buttonProps = __rest(_a, ["icon"]);
-    return (react_1.default.createElement("button", Object.assign({}, buttonProps, { type: 'button', className: cx('icon-button') }), icon));
-};
-exports.IconButton = IconButton;
-const iconStub = react_1.default.createElement("div", { className: cx('icon-button', 'stub') });
+exports.TOP_BAR_HEIGHT = exports.TopBar = void 0;
+var top_bar_1 = require("./top-bar");
+Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () { return top_bar_1.TopBar; } });
+Object.defineProperty(exports, "TOP_BAR_HEIGHT", { enumerable: true, get: function () { return top_bar_1.TOP_BAR_HEIGHT; } });

package/top-bar/top-bar-util.scss

@@ -0,0 +1,29 @@
+$size-s-height: 56px;
+$size-m-height: 64px;
+$size-xl-height: 80px;
+
+@mixin size-s {
+  --top-bar-height: #{$size-s-height};
+  --top-bar-title-size: 16px;
+  --top-bar-title-height: 24px;
+  --top-bar-gutter: 16px;
+  --top-bar-icon-button-width: 52px;
+}
+
+@mixin size-m {
+  --top-bar-height: #{$size-m-height};
+  --top-bar-title-size: 16px;
+  --top-bar-title-height: 24px;
+  --top-bar-gutter: 24px;
+  --top-bar-icon-button-width: 60px;
+}
+
+@mixin size-xl {
+  --top-bar-height: #{$size-xl-height};
+  --top-bar-title-size: 16px;
+  --top-bar-title-height: 24px;
+  --top-bar-gutter: 40px;
+  --top-bar-icon-button-width: 76px;
+  --top-bar-title-only-size: 20px;
+  --top-bar-title-only-height: 28px;
+}

package/top-bar/top-bar.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TopBarProps, TopBarSize } from './types';
+export declare const TOP_BAR_HEIGHT: Readonly<Record<TopBarSize, number>>;
+/**
+ * Компонент шапки модальных окон/экранов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function TopBar({ divided, size, title, subtitle, buttons: { start, startSecondary, end, endSecondary }, className, 'data-testid': testId, }: TopBarProps): JSX.Element;

package/top-bar/top-bar.js

@@ -0,0 +1,101 @@
+"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.TopBar = exports.TOP_BAR_HEIGHT = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("./utils");
+const borders_1 = require("../styling/borders");
+const bind_1 = __importDefault(require("classnames/bind"));
+const top_bar_module_scss_1 = __importDefault(require("./top-bar.module.scss"));
+// некоторым компонентам нужно знать конкретную высоту
+exports.TOP_BAR_HEIGHT = {
+    s: 56,
+    m: 64,
+    xl: 80,
+};
+const cx = bind_1.default.bind(top_bar_module_scss_1.default);
+/**
+ * Компонент шапки модальных окон/экранов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TopBar({ divided, size = 'm', title, subtitle, buttons: { start, startSecondary, end, endSecondary } = {}, className, 'data-testid': testId = 'top-bar', }) {
+    const hasStartButtons = start || startSecondary;
+    const hasEndButtons = end || endSecondary;
+    const hasButtons = hasStartButtons || hasEndButtons;
+    const rootClasses = cx('root', `size-${size}`, className, divided && borders_1.InnerBorder.bottom, !subtitle && 'no-subtitle');
+    return (react_1.default.createElement("div", { className: rootClasses, "data-testid": testId },
+        hasButtons && (react_1.default.createElement("div", { className: cx('side') },
+            hasStartButtons && (react_1.default.createElement(TopBarButtonGroup, null,
+                start && react_1.default.createElement(TopBarButton, Object.assign({}, start)),
+                startSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, startSecondary)))),
+            hasEndButtons && (react_1.default.createElement(TopBarButtonGroup, { stub: true, end: true },
+                endSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, endSecondary)),
+                end && react_1.default.createElement(TopBarButton, Object.assign({}, end)))))),
+        react_1.default.createElement("div", { className: cx('main') },
+            title && react_1.default.createElement("div", { className: cx('title') }, title),
+            subtitle && react_1.default.createElement("div", { className: cx('subtitle') }, subtitle)),
+        hasButtons && (react_1.default.createElement("div", { className: cx('side') },
+            hasEndButtons && (react_1.default.createElement(TopBarButtonGroup, { end: true },
+                endSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, endSecondary)),
+                end && react_1.default.createElement(TopBarButton, Object.assign({}, end)))),
+            hasStartButtons && (react_1.default.createElement(TopBarButtonGroup, { stub: true },
+                start && react_1.default.createElement(TopBarButton, Object.assign({}, start)),
+                startSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, startSecondary))))))));
+}
+exports.TopBar = TopBar;
+/**
+ * Компонент группы кнопок.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TopBarButtonGroup({ children, stub, end, }) {
+    return (react_1.default.createElement(utils_1.TopBarButtonGroupContext.Provider, { value: { stub } },
+        react_1.default.createElement("div", { className: cx('button-group', { stub, end }) }, children)));
+}
+/**
+ * Компонент кнопки-иконки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TopBarButton(_a) {
+    var { text, icon, className, 'data-testid': testId = 'top-bar:button' } = _a, buttonProps = __rest(_a, ["text", "icon", "className", 'data-testid']);
+    const { stub } = (0, react_1.useContext)(utils_1.TopBarButtonGroupContext);
+    return (react_1.default.createElement("button", Object.assign({}, (!stub && Object.assign(Object.assign({}, buttonProps), { 'data-testid': testId })), { type: 'button', className: cx('button', icon && 'iconic', stub && 'stub', className), "aria-hidden": stub }), icon && !stub ? icon : text));
+}

package/top-bar/top-bar.module.scss

@@ -1,95 +1,157 @@
 @use '../colors';
+@use './top-bar-util';
 
 .root {
+  width: 100%;
   display: flex;
-  align-items: center;
   justify-content: center;
   background: #fff;
-  overflow: hidden;
-  box-sizing: border-box;
-  .main-section {
-    display: flex;
-    width: 0;
-    flex-direction: column;
-    justify-content: center;
-    flex-grow: 1;
-    flex-shrink: 1;
-    text-align: center;
-    box-sizing: border-box;
+  height: var(--top-bar-height);
+  &.size-s {
+    @include top-bar-util.size-s;
   }
-  .title {
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 24px;
+  &.size-m {
+    @include top-bar-util.size-m;
   }
-  .subtitle {
-    font-size: 12px;
-    line-height: 16px;
-    color: colors.$basic-gray38;
+  &.size-xl {
+    @include top-bar-util.size-xl;
   }
-  .icon-button {
-    + .icon-button {
-      margin-left: 24px;
-    }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  overflow: hidden;
+  text-align: center;
+
+  // когда нет кнопок
+  &:first-child:last-child {
+    margin: 0 var(--top-bar-gutter);
   }
-  &.size-s {
-    .main-section {
-      margin: 0 24px;
-    }
-    .icon-button {
-      &:first-child {
-        margin-left: 24px;
+}
+
+.title {
+  color: colors.$basic-gray87;
+  font-size: var(--top-bar-title-size);
+  line-height: var(--top-bar-title-height);
+  font-weight: 600;
+
+  // когда нет подзаголовка
+  &:first-child:last-child {
+    font-size: var(--top-bar-title-only-size, var(--top-bar-title-size));
+    line-height: var(--top-bar-title-only-height, var(--top-bar-title-height));
+  }
+}
+
+.subtitle {
+  color: colors.$basic-gray38;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  margin-top: -4px;
+}
+
+.title,
+.subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.side {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.button-group {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  &:not(.end) {
+    .iconic {
+      &:first-child:last-child {
+        justify-content: flex-start;
+        padding-left: var(--top-bar-gutter);
       }
-      &:last-child {
-        margin-right: 24px;
+      &:not(:last-child):first-child {
+        justify-content: flex-start;
+        padding-left: var(--top-bar-gutter);
+      }
+      &:not(:first-child):last-child {
+        justify-content: flex-end;
+        padding-right: var(--top-bar-gutter);
       }
     }
   }
-  &.size-m {
-    .main-section {
-      margin: 0 40px;
-    }
-    .title {
-      font-size: 20px;
-      line-height: 28px;
-    }
-    .icon-button {
-      &:first-child {
-        margin-left: 40px;
+  &.end {
+    justify-content: flex-end;
+    .iconic {
+      &:first-child:last-child {
+        justify-content: flex-end;
+        padding-right: var(--top-bar-gutter);
       }
-      &:last-child {
-        margin-right: 40px;
+      &:not(:last-child):first-child {
+        justify-content: flex-start;
+        padding-left: var(--top-bar-gutter);
       }
+      &:not(:first-child):last-child {
+        justify-content: flex-end;
+        padding-right: var(--top-bar-gutter);
+      }
+    }
+    :not(.iconic) {
+      justify-content: flex-end;
     }
   }
+  &:not(.stub) {
+    height: 100%;
+  }
 }
 
-.ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.icon-button {
+.button {
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  margin: 0;
+  outline: 0;
+  text-align: inherit;
+  height: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin: 0;
   padding: 0;
-  border: 0;
-  outline: 0;
-  width: 24px;
-  height: 24px;
-  flex-grow: 0;
-  flex-shrink: 0;
-  overflow: hidden;
-  background: transparent;
-  color: colors.$basic-gray87;
-  &:not(.stub):hover {
+  &:hover {
     cursor: pointer;
-    color: colors.$basic-gray54;
   }
-  > svg {
+  &.iconic {
+    color: colors.$basic-gray87;
+    width: var(--top-bar-icon-button-width);
+    &:hover {
+      color: colors.$basic-gray54;
+    }
+  }
+  &:not(.iconic) {
+    color: colors.$basic-blue;
+    width: 100%;
+    padding: 0 var(--top-bar-gutter);
+    &:hover {
+      color: colors.$additional-deep-blue;
+    }
+  }
+  &.stub {
+    height: 0;
+    overflow: hidden;
+  }
+  svg {
+    // чтобы выравнивались по центру по вертикали
+    display: block;
+    flex-shrink: 0;
     fill: currentColor;
   }
 }

package/top-bar/types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export type TopBarSize = 's' | 'm' | 'xl';
+export interface TopBarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Иконка. */
+    icon?: React.ReactNode;
+    /** Текст. */
+    text?: string;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export interface TopBarProps {
+    /** Свойства кнопок. */
+    buttons?: {
+        start?: TopBarButtonProps;
+        startSecondary?: TopBarButtonProps;
+        end?: TopBarButtonProps;
+        endSecondary?: TopBarButtonProps;
+    };
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Размер. */
+    size?: TopBarSize | 'unset';
+    /** Подзаголовок. */
+    subtitle?: string;
+    /** Заголовок. */
+    title?: string;
+    /** Нужна ли разделительная черта снизу. */
+    divided?: boolean;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}

package/top-bar/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/top-bar/utils.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TopBarProps } from './types';
+export declare const TopBarButtonGroupContext: React.Context<{
+    stub?: boolean | undefined;
+}>;
+/**
+ * Позволяет быстро определить кнопки-иконки "назад" и "закрыть" в TopBar.
+ * @param props Свойства. При указании onBack/onClose будет выведена соответствующая кнопка иконка.
+ * @return Опция buttons для TopBar.
+ */
+export declare function navigationButtons({ buttons, onBack, onClose, }: Pick<TopBarProps, 'buttons'> & {
+    onBack?: VoidFunction;
+    onClose?: VoidFunction;
+}): TopBarProps['buttons'];

package/top-bar/utils.js

@@ -0,0 +1,56 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navigationButtons = exports.TopBarButtonGroupContext = void 0;
+const react_1 = __importStar(require("react"));
+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"));
+exports.TopBarButtonGroupContext = (0, react_1.createContext)({
+    stub: false,
+});
+/**
+ * Позволяет быстро определить кнопки-иконки "назад" и "закрыть" в TopBar.
+ * @param props Свойства. При указании onBack/onClose будет выведена соответствующая кнопка иконка.
+ * @return Опция buttons для TopBar.
+ */
+function navigationButtons({ buttons, onBack, onClose, }) {
+    return Object.assign(Object.assign(Object.assign({}, buttons), (onBack && {
+        start: {
+            'data-testid': 'top-bar:back',
+            onClick: onBack,
+            icon: react_1.default.createElement(arrow_left_1.default, null),
+        },
+    })), (onClose && {
+        end: {
+            'data-testid': 'top-bar:close',
+            onClick: onClose,
+            icon: react_1.default.createElement(cross_1.default, null),
+        },
+    }));
+}
+exports.navigationButtons = navigationButtons;

package/touch-slider/index.d.ts

@@ -6,6 +6,7 @@ export interface TouchSliderProps {
 /**
  * Компонент блока, прокручиваемого по горизонтали. Реализует отступы MobileLayout.
  * Предназначен для использования на странице без дополнительных отступов по горизонтали.
+ * @deprecated Следует использовать Carousel. Отказались от "волшебной обрезки" прокручиваемой области (экспериментально).
  * @param props Свойства.
  * @return Элемент.
  */

package/touch-slider/index.js

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TouchSlider = void 0;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("../layout");
-const constants_1 = require("../constants");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
 const touch_slider_module_scss_1 = __importDefault(require("./touch-slider.module.scss"));
 /**
  * Компонент блока, прокручиваемого по горизонтали. Реализует отступы MobileLayout.
  * Предназначен для использования на странице без дополнительных отступов по горизонтали.
+ * @deprecated Следует использовать Carousel. Отказались от "волшебной обрезки" прокручиваемой области (экспериментально).
  * @param props Свойства.
  * @return Элемент.
  */
 const TouchSlider = ({ children }) => (react_1.default.createElement(layout_1.MobileLayout, null,
-    react_1.default.createElement("div", Object.assign({ className: touch_slider_module_scss_1.default.outer }, { [constants_1.BSL_IGNORE_ATTR]: true }),
+    react_1.default.createElement("div", Object.assign({ className: touch_slider_module_scss_1.default.outer }, { [page_scroll_lock_1.BSL_IGNORE_ATTR]: true }),
         react_1.default.createElement("div", { className: touch_slider_module_scss_1.default.inner }, children))));
 exports.TouchSlider = TouchSlider;

package/types.d.ts

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes } from 'react';
+/**
+ * Обозначение точки остановки в соответствии дизайн-гайдами.
+ */
+export type Breakpoint = 'mxs' | 'ms' | 'mm' | 'ml' | 'xs' | 's' | 'm' | 'l' | 'xl';
+/** Свойства компонента для маркировки атрибутом "data-testid". */
+export interface WithTestId {
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+/** Свойства любого поля ввода. */
+export interface FieldProps {
+    /** Состояние с ошибками валидации. */
+    failed?: boolean;
+}
+/** Свойства компонента поля переключателя (input[type="checkbox"]). */
+export interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement>, FieldProps, WithTestId {
+}

package/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/unknown-content/index.d.ts

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

package/unknown-content/index.js

@@ -28,19 +28,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnknownContent = void 0;
 const react_1 = __importStar(require("react"));
+const utils_1 = require("./utils");
 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, children, className }) => {
+function 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;