@steroidsjs/core 3.0.0-beta.9 → 3.0.0-beta.90

package/ui/content/CalendarSystem/hooks/useWeekCalendar.js

@@ -0,0 +1,86 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var calendar_1 = require("../../../../utils/calendar");
+var DateControlType_1 = __importDefault(require("../enums/DateControlType"));
+var useCalendarControls_1 = require("./useCalendarControls");
+var utils_1 = require("../utils/utils");
+var WEEK_DAY_FORMAT = 'dd, D MMM';
+var ONE_DAY = 1;
+var getFormattedWeekFromDate = function (fromDate) {
+    if (fromDate === void 0) { fromDate = null; }
+    var currentWeek = (0, utils_1.getWeekDaysFromDate)(fromDate || new Date());
+    return currentWeek.map(function (dayOfWeek) {
+        var copyOfDayWeek = __assign({}, dayOfWeek);
+        copyOfDayWeek.formattedDisplay = (0, calendar_1.convertDate)(dayOfWeek.date, null, WEEK_DAY_FORMAT);
+        // eslint-disable-next-line no-unused-expressions
+        (0, utils_1.isDateIsToday)(copyOfDayWeek.date) ? copyOfDayWeek.isToday = true : copyOfDayWeek.isToday = false;
+        return copyOfDayWeek;
+    });
+};
+var useWeekCalendar = function (currentMonthDate) {
+    var _a;
+    var _b = react_1["default"].useState(getFormattedWeekFromDate()), currentWeek = _b[0], setCurrentWeek = _b[1];
+    var forceUpdateWeekOnMonthChange = react_1["default"].useCallback(function (newMonthDate) {
+        setCurrentWeek(getFormattedWeekFromDate(newMonthDate));
+    }, []);
+    var changeMonthAfterWeekChanged = react_1["default"].useCallback(function (formattedWeek) {
+        var firstDayOfWeek = formattedWeek[0].date;
+        var currentMonthNumber = currentMonthDate.getMonth();
+        var isWeekOutOfMonth = formattedWeek.every(function (dayOfWeek) { return dayOfWeek.date.getMonth() !== currentMonthNumber; });
+        if (!isWeekOutOfMonth) {
+            return;
+        }
+        if (currentMonthNumber - firstDayOfWeek.getMonth() === 1) {
+            var lastDayOfWeekInNewMonth = formattedWeek[formattedWeek.length - 1].date;
+            var prevMonthControl = (0, useCalendarControls_1.getSourceCalendarControl)(DateControlType_1["default"].PREV_ONE);
+            prevMonthControl.click();
+            forceUpdateWeekOnMonthChange(lastDayOfWeekInNewMonth);
+        }
+        else {
+            var firstDayOfWeekInNewMonth = formattedWeek[0].date;
+            var nextMonthControl = (0, useCalendarControls_1.getSourceCalendarControl)(DateControlType_1["default"].NEXT_ONE);
+            nextMonthControl.click();
+            forceUpdateWeekOnMonthChange(firstDayOfWeekInNewMonth);
+        }
+    }, [currentMonthDate, forceUpdateWeekOnMonthChange]);
+    var setNextWeek = react_1["default"].useCallback(function () {
+        var lastDayOfWeek = currentWeek[currentWeek.length - 1].date;
+        lastDayOfWeek.setDate(lastDayOfWeek.getDate() + ONE_DAY);
+        var formattedNextWeek = getFormattedWeekFromDate(lastDayOfWeek);
+        setCurrentWeek(formattedNextWeek);
+        changeMonthAfterWeekChanged(formattedNextWeek);
+    }, [currentWeek, changeMonthAfterWeekChanged]);
+    var setPrevWeek = react_1["default"].useCallback(function () {
+        var firstDayOfWeek = currentWeek[0].date;
+        firstDayOfWeek.setDate(firstDayOfWeek.getDate() - ONE_DAY);
+        var formattedPrevWeek = getFormattedWeekFromDate(firstDayOfWeek);
+        setCurrentWeek(formattedPrevWeek);
+        changeMonthAfterWeekChanged(formattedPrevWeek);
+    }, [currentWeek, changeMonthAfterWeekChanged]);
+    return {
+        currentWeek: currentWeek,
+        weekControls: (_a = {},
+            _a[DateControlType_1["default"].NEXT_DOUBLE] = DateControlType_1["default"].NEXT_ONE,
+            _a[DateControlType_1["default"].NEXT_ONE] = setNextWeek,
+            _a[DateControlType_1["default"].PREV_ONE] = setPrevWeek,
+            _a[DateControlType_1["default"].PREV_DOUBLE] = DateControlType_1["default"].PREV_ONE,
+            _a),
+        forceUpdateWeekOnMonthChange: forceUpdateWeekOnMonthChange
+    };
+};
+exports["default"] = useWeekCalendar;

package/ui/content/CalendarSystem/index.d.ts

@@ -0,0 +1,2 @@
+import CalendarSystem from './CalendarSystem';
+export default CalendarSystem;

package/ui/{list/LayoutNames/demo/basic.js → content/CalendarSystem/index.js}

@@ -3,10 +3,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var layout_1 = __importDefault(require("../../List/demo/layout"));
-/**
- * List with layout switcher
- * @order 1
- * @col 6
- */
-exports["default"] = layout_1["default"];
+var CalendarSystem_1 = __importDefault(require("./CalendarSystem"));
+exports["default"] = CalendarSystem_1["default"];

package/ui/content/CalendarSystem/utils/utils.d.ts

@@ -0,0 +1,3 @@
+import { IDay } from '../CalendarSystem';
+export declare const getWeekDaysFromDate: (date: Date) => IDay[];
+export declare const isDateIsToday: (date: Date) => boolean;

package/ui/content/CalendarSystem/utils/utils.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
+/* eslint-disable no-plusplus */
+var dayjs_1 = __importDefault(require("dayjs"));
+var SIX_DAYS_DIFF = 6;
+var MAX_DAYS_DIFF_IN_WEEK = 7;
+var getWeekDaysFromDate = function (date) {
+    var weekDays = [];
+    var firstDayOfWeek = new Date(date);
+    var currentDay = date.getDay();
+    var diff = currentDay === 0 ? SIX_DAYS_DIFF : currentDay - 1; // Разница между текущим днем и понедельником
+    firstDayOfWeek.setDate(firstDayOfWeek.getDate() - diff); // Устанавливаем первый день недели (понедельник)
+    for (var i = 0; i < MAX_DAYS_DIFF_IN_WEEK; i++) {
+        var currentDate = new Date(firstDayOfWeek);
+        currentDate.setDate(currentDate.getDate() + i);
+        weekDays.push({
+            dayNumber: currentDate.getDate(),
+            date: new Date(currentDate)
+        });
+    }
+    return weekDays;
+};
+exports.getWeekDaysFromDate = getWeekDaysFromDate;
+var isDateIsToday = function (date) { return (0, dayjs_1["default"])(date).isToday(); };
+exports.isDateIsToday = isDateIsToday;

package/ui/content/Card/Card.d.ts

@@ -1,22 +1,47 @@
-export interface ICardProps {
+/// <reference types="react" />
+import { ILinkProps } from '../../nav/Link/Link';
+import { IButtonProps } from '../../form/Button/Button';
+import { IAvatarProps } from '../Avatar/Avatar';
+import { IMenuProps } from '../Menu/Menu';
+export interface ICardHeader {
     /**
-     * Цвет границы (если передать false, то граница будет скрыта)
-     * @example success
-     */
-    borderColor?: ColorName | 'default' | boolean;
+    * Параметры для аватара
+    * @example
+    * {
+    *   src: 'Kate.png',
+    *   status: true,
+    * }
+    */
+    avatar?: IAvatarProps;
     /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
+    * Свойства для компонента <Menu/>
+    */
+    menu?: IMenuProps;
     /**
-     * Дочерние элементы
-     */
-    children?: CustomView;
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js head'
+    */
+    head?: string;
     /**
-     * Цвет состояния
-     * @example success
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js subhead'
+    */
+    subhead?: string;
+}
+/**
+ * Card
+ *
+ * Компонент карточки, который представляет контент в структурированном формате с заголовком, обложкой, описанием,
+ * кнопками, ссылками и другими элементами.
+ *
+ * Компонент `Card` позволяет передать дочерние элементы, обложку, описание, заголовок, параметры заголовка,
+ * футер, коллекцию ссылок и коллекцию кнопок.
+ */
+export interface ICardProps extends IUiComponent {
+    /**
+     * Дочерние элементы
      */
-    color?: ColorName;
+    children?: React.ReactNode;
     /**
      * Обложка для карточки, нужно передать ссылку на изображение
      * @example 'https://cat/cat.png'
@@ -24,50 +49,55 @@ export interface ICardProps {
     cover?: string;
     /**
      * Описание карточки
-     * @example {'Scroll to see more...'}
+     * @example 'Scroll to see more...'
      */
     description?: string;
     /**
-     * Текст для header
+     * Контент хедера
+     * @example
+     * avatar: {
+     * src: 'Kate.png',
+     * status: true,
+     * },
+     * head: 'Header',
+     * subhead: 'Subhead',
+     * menu: {
+     *  dropDownProps: {
+            position: 'bottom',
+            closeMode: 'click-any',
+        },
+        items: [
+            {label: 'Вырезать', icon: 'cut', onClick: voidFunction},
+            {label: 'Копировать', icon: 'copy', hasBorder: true, onClick: voidFunction},
+            {label: 'Показать историю изменений', hasBorder: true, onClick: voidFunction},
+            {label: 'Редактировать', icon: 'edit', onClick: voidFunction},
+            {label: 'Удалить', icon: 'trash', onClick: voidFunction},
+        ],
+        icon: 'menu_dots',
+     * },
      */
-    header?: string;
+    header?: ICardHeader;
     /**
-     * Текст для footer
+     * Контент футера
      */
-    footer?: string;
-    /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
-     */
-    orientation?: 'vertical' | 'vertical-reverse' | 'horizontal' | string;
+    footer?: {
+        head: string;
+        subhead: string;
+    };
     /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
-     */
-    shape?: 'square' | 'circle';
+    * Коллекция ссылок
+    */
+    links?: ILinkProps[];
     /**
-     * Объект CSS стилей
-     * @example {width: '30px'}
+     * Коллекция кнопок
      */
-    style?: CustomStyle;
+    buttons?: IButtonProps[];
     /**
      * Заголовок карточки
-     * @example {'Main card'}
+     * @example 'Main card'
      */
     title?: string;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
 }
 export type ICardViewProps = ICardProps;
-declare function Card(props: ICardProps): any;
-declare namespace Card {
-    var defaultProps: {
-        borderColor: string;
-        orientation: string;
-        shape: string;
-    };
-}
+declare function Card(props: ICardProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default Card;

package/ui/content/Card/Card.js

@@ -16,9 +16,4 @@ function Card(props) {
     var components = (0, hooks_1.useComponents)();
     return components.ui.renderView(props.view || 'content.CardView', __assign({}, props));
 }
-Card.defaultProps = {
-    borderColor: 'default',
-    orientation: 'vertical',
-    shape: 'circle'
-};
 exports["default"] = Card;

package/ui/content/Chart/Chart.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+/**
+ * Chart
+ * Этот компонент позволяет создавать в проекте графики разных типов. Под капотом для графиков используется библиотека nivo.
+ * Для работы этого компонента необходимо установить в проекте зависимости @nivo/core и пакет конкретного графика nivo, например @nivo/line.
+ * Компонент графика nivo нужно передать в пропс chartComponent
+ */
+export interface IChartProps extends IUiComponent {
+    /**
+     * Компонент графика из библиотеки nivo
+     * @example ResponsiveLine
+     */
+    chartComponent: any;
+    /**
+     * Данные для графика
+     * @example [{id: 1, value: 15}, {id: 2, value: 30}]
+     */
+    data: Record<string, any>[];
+    /**
+     * Конфигурация, настройки отображения графика
+     * @example {lineWidth: 3, pointSize: 10}
+     */
+    config?: Record<string, any>;
+    /**
+     * Фиксированная высота графика в пикселях
+     * @example 500
+     */
+    height?: number;
+    /**
+     * Использовать ли дефолтную конфигурацию для графика типа line
+     * @example ResponsiveLine
+     */
+    useDefaultLineChartConfig?: boolean;
+    [key: string]: any;
+}
+export type IChartViewProps = IChartProps;
+export default function Chart(props: IChartProps): JSX.Element;

package/ui/content/Chart/Chart.js

@@ -0,0 +1,19 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+function Chart(props) {
+    var components = (0, hooks_1.useComponents)();
+    return components.ui.renderView(props.view || 'content.ChartView', __assign({}, props));
+}
+exports["default"] = Chart;

package/ui/content/Chart/index.d.ts

@@ -0,0 +1,2 @@
+import Chart from './Chart';
+export default Chart;

package/ui/content/Chart/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Chart_1 = __importDefault(require("./Chart"));
+exports["default"] = Chart_1["default"];

package/ui/content/CopyToClipboard/CopyToClipboard.d.ts

@@ -1,15 +1,75 @@
-import { IBemHocOutput } from '../../../hoc/bem';
-import { IConnectHocOutput } from '../../../hoc/connect';
-interface ICopyToClipboardProps extends IBemHocOutput, IConnectHocOutput {
+import React from 'react';
+import { IShowNotificationParameters } from '../../../actions/notifications';
+/**
+ * CopyToClipboard
+ *
+ * Компонент, позволяющий копировать заданное значение в буфер обмена при клике.
+ *
+ * Компонент `CopyToClipboard` принимает значение `value` для копирования, а также
+ * может отображать иконку, дополнительный текст или другие дочерние элементы.
+ *
+ * При успешном копировании значения, можно также отобразить уведомление с помощью
+ * параметра `notification`. Можно задать текст уведомления, его уровень и параметры.
+ *
+ * Компонент также поддерживает обработчик `onCopy`, который вызывается при копировании.
+ */
+export interface ICopyToClipboardProps extends IUiComponent {
+    /**
+    * Значение, которое будет использоваться при копировании
+    * @example 'Steroids.js'
+    */
     value: string;
+    /**
+    * Переводит состояние компонента в выключенное
+    * @example true
+    */
     disabled?: boolean;
+    /**
+    * Параметры для уведомления, которое появляется после копирования
+    * @example
+    * 'Some value has been copied to buffer'
+    * @example
+    * {
+    *   message: 'Some value has been copied to buffer',
+    *   level: 'info',
+    *   params: {
+    *   position: 'top-left',
+    *   timeOut: 100,
+    *  }
+    * }
+    */
     notification?: string | {
         message?: string;
         level?: string;
-        timeOut?: string;
+        params?: IShowNotificationParameters;
     };
-    className?: string;
-    children?: any;
+    /**
+    * Позволяет включить или выключить отображение иконки
+    * @example false
+    */
+    showCopyIcon?: boolean;
+    /**
+    * Иконка
+    * @example calendar-day
+    */
+    icon?: string | React.ReactElement;
+    /**
+    * Дочерний элемент
+    * @example <h1>This message will be copied!</h1>
+    */
+    children?: React.ReactNode;
+    /**
+    * Callback который вызывается при копировании
+    */
+    onCopy?: VoidFunction;
 }
-export default function CopyToClipboard(props: ICopyToClipboardProps): any;
-export {};
+export interface ICopyToClipboardViewProps extends ICopyToClipboardProps {
+    onClick: () => void;
+}
+declare function CopyToClipboard(props: ICopyToClipboardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare namespace CopyToClipboard {
+    var defaultProps: {
+        showCopyIcon: boolean;
+    };
+}
+export default CopyToClipboard;

package/ui/content/CopyToClipboard/CopyToClipboard.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -69,60 +46,50 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
-var react_1 = __importStar(require("react"));
-var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
+/* eslint-disable no-unused-expressions */
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
 var notifications_1 = require("../../../actions/notifications");
+var DEFAULT_NOTIFICATION_LEVEL = 'info';
 function CopyToClipboard(props) {
     var _this = this;
-    var inputRef = (0, react_1.useRef)();
+    var components = (0, hooks_1.useComponents)();
     var _a = (0, react_1.useState)(false), isCopied = _a[0], setIsCopied = _a[1];
-    var dispatch = (0, useDispatch_1["default"])();
+    var dispatch = (0, hooks_1.useDispatch)();
+    var notification = props.notification;
     var onClick = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
-        var el, notification;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!!isCopied) return [3 /*break*/, 4];
+                    if (props.disabled) {
+                        return [2 /*return*/];
+                    }
+                    if (!!isCopied) return [3 /*break*/, 3];
                     if (!navigator.clipboard) return [3 /*break*/, 2];
                     return [4 /*yield*/, navigator.clipboard.writeText(props.value)];
                 case 1:
                     _a.sent();
-                    return [3 /*break*/, 3];
-                case 2:
-                    el = inputRef.current;
-                    if (el) {
-                        el.focus();
-                        el.select();
+                    if (props.onCopy) {
+                        props.onCopy();
                     }
-                    document.execCommand('copy');
-                    _a.label = 3;
-                case 3:
-                    if (props.notification) {
-                        notification = __assign({ level: 'info', params: undefined }, (typeof props.notification === 'string' ? { message: props.notification } : props.notification));
-                        dispatch((0, notifications_1.showNotification)(notification.message, notification.level, notification.params));
+                    _a.label = 2;
+                case 2:
+                    if (notification) {
+                        typeof notification === 'string'
+                            ? dispatch((0, notifications_1.showNotification)(notification, DEFAULT_NOTIFICATION_LEVEL))
+                            : dispatch((0, notifications_1.showNotification)(notification.message, notification.level || DEFAULT_NOTIFICATION_LEVEL, notification.params));
                     }
                     setIsCopied(true);
                     setTimeout(function () { return setIsCopied(false); }, 1000);
-                    _a.label = 4;
-                case 4: return [2 /*return*/];
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
             }
         });
-    }); }, [dispatch, isCopied, props.notification, props.value]);
-    if (props.disabled) {
-        return props.children;
-    }
-    return (react_1["default"].createElement("span", { className: props.className, onClick: onClick, "aria-hidden": 'true' },
-        props.children,
-        react_1["default"].createElement("input", { ref: inputRef, defaultValue: props.value, style: {
-                position: 'absolute',
-                height: 1,
-                width: 1,
-                top: 0,
-                opacity: 0
-            } })));
+    }); }, [dispatch, isCopied, notification, props]);
+    return components.ui.renderView(props.view || 'content.CopyToClipboardView', __assign(__assign({}, props), { onClick: onClick }));
 }
+CopyToClipboard.defaultProps = {
+    showCopyIcon: true
+};
 exports["default"] = CopyToClipboard;

package/ui/content/Detail/Detail.d.ts

@@ -31,7 +31,21 @@ export interface IDetailResponsive {
      */
     media: IDetailMedia[];
 }
-export interface IDetailProps {
+/**
+ * Detail
+ *
+ * Представление данных в виде таблицы, в которой поля группируются по принципу "ключ-значение".
+ *
+ * Компонент `Detail` принимает данные в виде дочерних компонентов `DetailItem`, которые отображаются
+ * в виде таблицы с ячейками "ключ-значение".
+ *
+ * Компонент поддерживает различные настройки, такие как размер ячеек, вариант расположения
+ * ячеек ("horizontal" или "vertical"), а также респонсивный режим, позволяющий перестраивать
+ * таблицу при изменении размеров окна.
+ *
+ * Компонент также может отображать заголовок таблицы и контролы, расположенные рядом с таблицей.
+ */
+export interface IDetailProps extends IUiComponent {
     /**
      * Размер ячеек в таблице
      * @example 'sm'
@@ -62,15 +76,6 @@ export interface IDetailProps {
      * @example [{label: __(('Edit')), onClick: () => props.onClick()}]
      */
     controls?: IControlItem[];
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
-     * Дополнительный CSS-класс для таблицы
-     */
-    className?: string;
     /**
      * Дочерние компоненты
      */
@@ -83,7 +88,7 @@ export interface IDetailItemOutputProps extends IDetailItemProps {
 }
 export interface IDetailViewProps extends IDetailProps {
     rows: IDetailItemOutputProps[][];
-    resizedNodeRef?: (node: HTMLElement) => void;
+    resizedNodeRef?: (node: HTMLDivElement) => void;
 }
 export declare const constants: Readonly<{
     MAX_COLUMN: 3;

package/ui/content/Detail/DetailItem.d.ts

@@ -22,7 +22,7 @@ export interface IDetailItemProps {
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
-     */
+    */
     view?: CustomView;
     /**
      * Дополнительный CSS-класс для ячейки с наименованием