@steroidsjs/core 3.0.0-beta.112 → 3.0.0-beta.114

package/ui/content/CalendarSystem/hooks/{useWeekCalendar.d.ts → useWeekGrid.d.ts}

@@ -1,15 +1,16 @@
 import DateControlEnum from '../enums/DateControlType';
-declare const useWeekCalendar: (currentMonthDate: Date) => {
-    currentWeek: {
+declare const useWeekGrid: (currentMonthFirstDayDate: Date) => {
+    weekGridTwentyFourHoursArray: any[];
+    weekGridCurrentWeekDays: {
         dayNumber: number;
         date: Date;
         outOfRange?: boolean;
         isToday?: boolean;
         formattedDisplay?: string;
     }[];
-    weekControls: {
+    weekGridControls: {
         [key: string]: () => void | DateControlEnum;
     };
-    forceUpdateWeekOnMonthChange: (newMonthDate: Date) => void;
+    updateWeekOnMonthChange: (newMonthDate: Date) => void;
 };
-export default useWeekCalendar;
+export default useWeekGrid;

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

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable no-plusplus */
+var react_1 = __importDefault(require("react"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var DateControlType_1 = __importDefault(require("../enums/DateControlType"));
+var utils_1 = require("../utils/utils");
+var ONE_DAY = 1;
+var getTwentyFourHoursArray = function () {
+    var hoursArray = [];
+    for (var i = 0; i < 24; i++) {
+        var formattedHour = (0, dayjs_1["default"])().startOf('day').add(i, 'hour').format('HH:00');
+        hoursArray.push(formattedHour);
+    }
+    return hoursArray;
+};
+var useWeekGrid = function (currentMonthFirstDayDate) {
+    var _a;
+    var _b = react_1["default"].useState((0, utils_1.getFormattedWeekFromDate)()), currentWeek = _b[0], setCurrentWeek = _b[1];
+    var updateWeekOnMonthChange = react_1["default"].useCallback(function (newMonthDate) {
+        setCurrentWeek((0, utils_1.getFormattedWeekFromDate)(newMonthDate));
+    }, []);
+    var changeMonthAfterWeekChanged = react_1["default"].useCallback(function (formattedWeek) {
+        var firstDayOfWeek = formattedWeek[0].date;
+        var currentMonthNumber = currentMonthFirstDayDate.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, utils_1.getSourceCalendarControl)(DateControlType_1["default"].PREV_ONE);
+            prevMonthControl.click();
+            updateWeekOnMonthChange(lastDayOfWeekInNewMonth);
+        }
+        else {
+            var firstDayOfWeekInNewMonth = formattedWeek[0].date;
+            var nextMonthControl = (0, utils_1.getSourceCalendarControl)(DateControlType_1["default"].NEXT_ONE);
+            nextMonthControl.click();
+            updateWeekOnMonthChange(firstDayOfWeekInNewMonth);
+        }
+    }, [currentMonthFirstDayDate, updateWeekOnMonthChange]);
+    var setNextWeek = react_1["default"].useCallback(function () {
+        var lastDayOfWeek = currentWeek[currentWeek.length - 1].date;
+        lastDayOfWeek.setDate(lastDayOfWeek.getDate() + ONE_DAY);
+        var formattedNextWeek = (0, utils_1.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 = (0, utils_1.getFormattedWeekFromDate)(firstDayOfWeek);
+        setCurrentWeek(formattedPrevWeek);
+        changeMonthAfterWeekChanged(formattedPrevWeek);
+    }, [currentWeek, changeMonthAfterWeekChanged]);
+    return {
+        weekGridTwentyFourHoursArray: getTwentyFourHoursArray(),
+        weekGridCurrentWeekDays: currentWeek,
+        weekGridControls: (_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),
+        updateWeekOnMonthChange: updateWeekOnMonthChange
+    };
+};
+exports["default"] = useWeekGrid;

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

@@ -3,3 +3,11 @@ export declare const getWeekDaysFromDate: (date: Date) => IDay[];
 export declare const isDateIsToday: (date: Date) => boolean;
 export declare const getOmittedEvent: (event: IEvent | Omit<IEvent, 'color'>) => any;
 export declare const sortEventsInGroup: (group: IEventGroup) => Omit<IEvent, "color">[];
+export declare const getSourceCalendarControl: (control: string) => HTMLElement;
+export declare const getFormattedWeekFromDate: (fromDate?: Date) => {
+    dayNumber: number;
+    date: Date;
+    outOfRange?: boolean;
+    isToday?: boolean;
+    formattedDisplay?: string;
+}[];

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

@@ -1,14 +1,27 @@
 "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;
-exports.sortEventsInGroup = exports.getOmittedEvent = exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
+exports.getFormattedWeekFromDate = exports.getSourceCalendarControl = exports.sortEventsInGroup = exports.getOmittedEvent = exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
 /* eslint-disable no-plusplus */
 var dayjs_1 = __importDefault(require("dayjs"));
 var omit_1 = __importDefault(require("lodash-es/omit"));
+var calendar_1 = require("../../../../utils/calendar");
 var SIX_DAYS_DIFF = 6;
 var MAX_DAYS_DIFF_IN_WEEK = 7;
+var WEEK_DAY_FORMAT = 'dd, D MMM';
 var getWeekDaysFromDate = function (date) {
     var weekDays = [];
     var firstDayOfWeek = new Date(date);
@@ -32,3 +45,16 @@ var getOmittedEvent = function (event) { return (0, omit_1["default"])(event, ['
 exports.getOmittedEvent = getOmittedEvent;
 var sortEventsInGroup = function (group) { return group.events.sort(function (eventA, eventB) { return eventA.date.getTime() - eventB.date.getTime(); }); };
 exports.sortEventsInGroup = sortEventsInGroup;
+var getSourceCalendarControl = function (control) { return document.querySelector("[data-sourcecontrol=\"".concat(control, "\"]")); };
+exports.getSourceCalendarControl = getSourceCalendarControl;
+var getFormattedWeekFromDate = function (fromDate) {
+    if (fromDate === void 0) { fromDate = null; }
+    var currentWeek = (0, exports.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);
+        copyOfDayWeek.isToday = (0, exports.isDateIsToday)(copyOfDayWeek.date);
+        return copyOfDayWeek;
+    });
+};
+exports.getFormattedWeekFromDate = getFormattedWeekFromDate;

package/ui/content/Chat/Chat.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IFileFieldProps } from '../../form/FileField/FileField';
 import { IAvatarProps } from '../Avatar/Avatar';
 import { IGroupedMessagesByDates } from './hooks/useChat';
 export interface IChatUser {
@@ -7,11 +8,21 @@ export interface IChatUser {
     lastName?: string;
     avatar?: IAvatarProps;
 }
+export interface IMessageFile {
+    uid?: string;
+    title?: string;
+    size?: number;
+    url?: string;
+    downloadUrl?: string;
+    fullHeight?: number;
+    fullWidth?: number;
+}
 export interface IChatMessage {
     id: number;
     user: IChatUser;
     text: string;
     timestamp: Date | string;
+    files?: IMessageFile[];
 }
 /**
  * Chat
@@ -31,6 +42,15 @@ export interface IChatProps extends IUiComponent {
      *  {
      *   id: 1,
      *   text: 'Всем привет!',
+     *   files: [
+     *      {
+     *       id: 929,
+     *       uid: 'c46f3d14-5891-4601-9e98-06f2c1e70a07',
+     *       title: 'image.jpg',
+     *       url: 'https://kozhin.dev/files/uploaded/c46f3d14-5891-4601-9e98-06f2c1e70a07.jpg',
+     *       size: 47305,
+     *      }
+     *   ],
      *   user: {
      *     id: 1,
      *     firstName: 'Olga',
@@ -63,9 +83,27 @@ export interface IChatProps extends IUiComponent {
      * Обработчик события отправки сообщения
      */
     onSendMessage?: (chatId: string, message: IChatMessage) => void;
+    /**
+     * Переопределение view React компонента для кастомизации отображения элемента инпута
+     * @example MyCustomView
+     */
+    customChatInputView?: React.ReactNode;
+    /**
+     * Кастомный placeholder для инпута
+     */
+    customInputPlaceholder?: string;
+    /**
+     * Пропсы для инпута загрузки файлов
+     */
+    fileFieldProps?: IFileFieldProps;
 }
-export interface IChatViewProps extends Omit<IChatProps, 'messages'> {
+export interface IChatViewProps extends Pick<IChatProps, 'currentUser'> {
     groupedMessagesByDates: IGroupedMessagesByDates;
+    renderChatInput: () => JSX.Element;
+}
+export interface IChatInputViewProps extends Pick<IChatProps, 'chatId' | 'fileFieldProps'> {
     onSendMessage: (data: any) => void;
+    onUploadFiles: (files: any) => void;
+    inputPlaceholder: string;
 }
 export default function Chat(props: IChatProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/ui/content/Chat/Chat.js

@@ -1,19 +1,32 @@
 "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 __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 };
 };
 exports.__esModule = true;
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var useChat_1 = __importDefault(require("./hooks/useChat"));
 function Chat(props) {
@@ -23,7 +36,14 @@ function Chat(props) {
         messages: props.messages,
         currentUser: props.currentUser,
         onSendMessage: props.onSendMessage
-    }), onSendMessage = _a.onSendMessage, groupedMessagesByDates = _a.groupedMessagesByDates;
-    return components.ui.renderView(props.view || 'content.ChatView', __assign(__assign({}, props), { groupedMessagesByDates: groupedMessagesByDates, onSendMessage: onSendMessage }));
+    }), onSendMessage = _a.onSendMessage, onUploadFiles = _a.onUploadFiles, groupedMessagesByDates = _a.groupedMessagesByDates;
+    var ChatInputView = props.customChatInputView || components.ui.getView('content.ChatInputView');
+    var renderChatInput = (0, react_1.useCallback)(function () { return (react_1["default"].createElement(ChatInputView, { chatId: props.chatId, onSendMessage: onSendMessage, onUploadFiles: onUploadFiles, fileFieldProps: props.fileFieldProps, inputPlaceholder: props.customInputPlaceholder || __('Введите сообщение') })); }, [ChatInputView, onSendMessage, onUploadFiles, props.chatId, props.customInputPlaceholder, props.fileFieldProps]);
+    return components.ui.renderView(props.view || 'content.ChatView', {
+        currentUser: props.currentUser,
+        groupedMessagesByDates: groupedMessagesByDates,
+        onSendMessage: onSendMessage,
+        renderChatInput: renderChatInput
+    });
 }
 exports["default"] = Chat;

package/ui/content/Chat/hooks/useChat.d.ts

@@ -5,8 +5,8 @@ export interface IGroupedMessage extends IChatMessage {
     isLastMessage?: boolean;
 }
 export type IGroupedMessagesByDates = Record<string, IGroupedMessage[][]>;
-declare const useChat: (config: IChatConfig) => {
+export default function useChat(config: IChatConfig): {
     groupedMessagesByDates: {};
     onSendMessage: (rawMessage: any) => void;
+    onUploadFiles: (files: any) => void;
 };
-export default useChat;

package/ui/content/Chat/hooks/useChat.js

@@ -17,25 +17,42 @@ exports.__esModule = true;
 var react_1 = require("react");
 var dayjs_1 = __importDefault(require("dayjs"));
 var uniqueId_1 = __importDefault(require("lodash-es/uniqueId"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var File_1 = __importDefault(require("fileup-core/lib/models/File"));
 var hooks_1 = require("../../../../hooks");
 var form_1 = require("../../../../actions/form");
 var utils_1 = require("../utils");
 var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
-var useChat = function (config) {
+function useChat(config) {
+    var dispatch = (0, hooks_1.useDispatch)();
     var _a = (0, react_1.useState)({}), groupedMessagesByDates = _a[0], setGroupedMessagesByDates = _a[1];
+    var _b = (0, react_1.useState)([]), uploadedFiles = _b[0], setUploadedFiles = _b[1];
     (0, react_1.useEffect)(function () { return setGroupedMessagesByDates((0, utils_1.getMessagesGroupedByDate)(config.messages)); }, [config.messages]);
-    var dispatch = (0, hooks_1.useDispatch)();
+    var onUploadFiles = (0, react_1.useCallback)(function (files) {
+        if (!(0, isEqual_1["default"])(uploadedFiles, files)) {
+            setUploadedFiles(files);
+        }
+    }, [uploadedFiles]);
     var onSendMessage = (0, react_1.useCallback)(function (rawMessage) {
-        var newMessage = __assign(__assign({}, rawMessage), { id: (0, uniqueId_1["default"])(), user: config.currentUser, timestamp: (0, dayjs_1["default"])().format(timeTemplatesAndUnits_1.ISO_TIMESTAMP_TEMPLATE) });
+        if (!rawMessage) {
+            return;
+        }
+        var newMessage = __assign(__assign({}, rawMessage), { id: (0, uniqueId_1["default"])(), user: config.currentUser, timestamp: (0, dayjs_1["default"])().format(timeTemplatesAndUnits_1.ISO_TIMESTAMP_TEMPLATE), files: (uploadedFiles === null || uploadedFiles === void 0 ? void 0 : uploadedFiles.reduce(function (acc, file) {
+                if (file.getResult() !== File_1["default"].RESULT_ERROR) {
+                    acc.push(__assign({}, file._resultHttpMessage));
+                }
+                return acc;
+            }, [])) || null });
         if (config.onSendMessage) {
             config.onSendMessage(config.chatId, newMessage);
         }
         setGroupedMessagesByDates(function (prevGroupedMessagesByDates) { return (0, utils_1.addNewMessageIntoGroupedMessages)(newMessage, prevGroupedMessagesByDates); });
         dispatch((0, form_1.formReset)(config.chatId));
-    }, [config, dispatch]);
+    }, [config, dispatch, uploadedFiles]);
     return {
         groupedMessagesByDates: groupedMessagesByDates,
-        onSendMessage: onSendMessage
+        onSendMessage: onSendMessage,
+        onUploadFiles: onUploadFiles
     };
-};
+}
 exports["default"] = useChat;

package/ui/form/CheckboxTreeField/CheckboxTreeField.d.ts

@@ -19,7 +19,7 @@ type CheckboxTreeItems = string | ({
  *
  * Список с вложенными чекбоксами. Используется в формах для создания иерархической структуры и выбора нескольких значений.
  */
-export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened'> {
+export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'showIcon' | 'customIcon'> {
     /**
      * Свойства для элемента input
      * @example { onKeyDown: ... }
@@ -48,7 +48,7 @@ export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<I
     primaryKey?: string;
     [key: string]: any;
 }
-export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps {
+export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps, Pick<ITreeProps, 'levelPadding' | 'customIcon'> {
     items: {
         id: number | string | boolean;
         label?: string;
@@ -61,7 +61,6 @@ export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps {
     onItemSelect: (checkbox: IPreparedTreeItem) => void;
     renderCheckbox: (checkboxProps: ICheckboxFieldViewProps) => JSX.Element;
     size?: Size;
-    levelPadding: number;
 }
 export declare const getNestedItemsIds: (item: any, groupAttribute: any) => any[];
 declare const _default: import("../../../ui/form/Field/fieldWrapper").FieldWrapperComponent<ICheckboxTreeFieldProps>;

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -38,8 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.getNestedItemsIds = void 0;
-var React = __importStar(require("react"));
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var react_use_1 = require("react-use");
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
 var hooks_1 = require("../../../hooks");
@@ -113,8 +112,8 @@ function CheckboxTreeField(props) {
         }
     }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
     var CheckboxFieldView = components.ui.getView('form.CheckboxFieldView');
-    var renderCheckbox = function (checkboxProps) { return (React.createElement(CheckboxFieldView, __assign({}, checkboxProps))); };
-    return components.ui.renderView(props.view || 'form.CheckboxTreeFieldView', __assign(__assign({}, props), { items: treeItems, onItemSelect: onItemSelect, selectedIds: selectedIds, levelPadding: props.levelPadding, renderCheckbox: renderCheckbox }));
+    var renderCheckbox = function (checkboxProps) { return (react_1["default"].createElement(CheckboxFieldView, __assign({}, checkboxProps))); };
+    return components.ui.renderView(props.view || 'form.CheckboxTreeFieldView', __assign(__assign({}, props), { items: treeItems, onItemSelect: onItemSelect, selectedIds: selectedIds, renderCheckbox: renderCheckbox }));
 }
 CheckboxTreeField.defaultProps = {
     disabled: false,

package/ui/form/FileField/FileField.js

@@ -66,6 +66,11 @@ function FileFieldComponent(props) {
             props.onLoad();
         }
     }, [isFilesLoaded, props]);
+    (0, react_1.useEffect)(function () {
+        if (props.onChange) {
+            props.onChange(files);
+        }
+    }, [files, props]);
     return (React.createElement(FileFieldView, __assign({}, props, { buttonView: props.buttonView, buttonProps: __assign({ label: props.filesLayout === FilesLayout.wall
                 ? __('Upload')
                 : __('Click to Upload'), size: props.size, disabled: props.disabled, onClick: onBrowse }, props.buttonProps), itemView: FileFieldItemView, items: files.map(function (file) {

package/ui/list/TreeTable/TreeTable.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ITreeProps } from '@steroidsjs/core/ui/nav/Tree/Tree';
 import { IPreparedTreeItem, ITreeItem } from '../../../hooks/useTree';
 import { IColumnViewProps, IGridColumn, IGridProps } from '../Grid/Grid';
-export interface ITreeColumnViewProps extends IColumnViewProps, Pick<ITreeTableProps, 'levelPadding'> {
+export interface ITreeColumnViewProps extends IColumnViewProps, Pick<ITreeTableProps, 'levelPadding' | 'customIcon'> {
     item: IPreparedTreeItem;
 }
 /**
@@ -10,7 +10,7 @@ export interface ITreeColumnViewProps extends IColumnViewProps, Pick<ITreeTableP
  *
  * Компонент для представления данных коллекции в виде иерархической структуры.
  */
-export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding'> {
+export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon'> {
     /**
      * Элементы коллекции
      * @example
@@ -27,8 +27,9 @@ export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreePr
      * ]
      */
     items?: ITreeItem[];
+    customIcon?: string | React.ReactElement;
 }
-export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[], levelPadding: string | number) => IGridColumn[];
+export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[], levelPadding: string | number, customIcon?: string | React.ReactElement) => IGridColumn[];
 declare function TreeTable(props: ITreeTableProps): JSX.Element;
 declare namespace TreeTable {
     var defaultProps: {

package/ui/list/TreeTable/TreeTable.js

@@ -58,15 +58,15 @@ var TREE_COLUMN_VIEW_FIELDS = {
     valueView: 'TreeColumnView',
     headerClassName: 'TreeColumnHeader'
 };
-var addTreeColumnFieldsToFirstColumn = function (columns, levelPadding) {
+var addTreeColumnFieldsToFirstColumn = function (columns, levelPadding, customIcon) {
     var newColumns = __spreadArray([], columns, true);
     // Add tree view to the first column
-    (0, merge_1["default"])(newColumns[0], __assign(__assign({}, TREE_COLUMN_VIEW_FIELDS), { levelPadding: levelPadding }));
+    (0, merge_1["default"])(newColumns[0], __assign(__assign({}, TREE_COLUMN_VIEW_FIELDS), { levelPadding: levelPadding, customIcon: customIcon }));
     return newColumns;
 };
 exports.addTreeColumnFieldsToFirstColumn = addTreeColumnFieldsToFirstColumn;
 function TreeTable(props) {
-    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns, props.levelPadding); }, [props.columns, props.levelPadding]);
+    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns, props.levelPadding, props.customIcon); }, [props.columns, props.customIcon, props.levelPadding]);
     var list = (0, useSelector_1["default"])(function (state) { return (0, list_1.getList)(state, props.listId); });
     var treeItems = (0, useTree_1["default"])({
         items: props.items,

package/ui/nav/Router/Router.d.ts

@@ -137,11 +137,17 @@ export interface IRouterProps {
      * @example SomeComponent
      */
     children?: React.ReactNode;
+    /**
+     * Флаг, который позволяет использовать вложенные роуты c указанием вложенного пути
+     * @example true
+     */
+    alwaysAppendParentRoutePath?: boolean;
 }
 declare function Router(props: IRouterProps): JSX.Element;
 declare namespace Router {
     var defaultProps: {
         autoScrollTop: boolean;
+        alwaysAppendParentRoutePath: boolean;
     };
 }
 export default Router;

package/ui/nav/Router/Router.js

@@ -97,7 +97,7 @@ function Router(props) {
     var dispatch = (0, useDispatch_1["default"])();
     (0, react_use_1.useEffectOnce)(function () {
         if (props.routes) {
-            dispatch((0, router_1.initRoutes)((0, helpers_1.walkRoutesRecursive)(__assign({ id: 'root' }, props.routes), props.defaultRoles ? { roles: props.defaultRoles } : undefined)));
+            dispatch((0, router_1.initRoutes)((0, helpers_1.walkRoutesRecursive)(__assign({ id: 'root' }, props.routes), props.defaultRoles ? { roles: props.defaultRoles } : undefined, {}, props.alwaysAppendParentRoutePath)));
         }
     });
     // Sync route params with redux
@@ -108,7 +108,7 @@ function Router(props) {
         }
     }, [dispatch, prevRouteParams, routeParams]);
     // Routes state
-    var _b = (0, react_1.useState)((0, helpers_1.treeToList)(props.routes)), routes = _b[0], setRoutes = _b[1];
+    var _b = (0, react_1.useState)((0, helpers_1.treeToList)(props.routes, true, null, props.alwaysAppendParentRoutePath)), routes = _b[0], setRoutes = _b[1];
     (0, react_use_1.useUpdateEffect)(function () {
         setRoutes(props.routes);
     }, [props.routes]);
@@ -205,6 +205,7 @@ function Router(props) {
     return (React.createElement(connected_react_router_1.ConnectedRouter, { history: components.store.history }, renderContent()));
 }
 Router.defaultProps = {
-    autoScrollTop: true
+    autoScrollTop: true,
+    alwaysAppendParentRoutePath: true
 };
 exports["default"] = Router;

package/ui/nav/Router/helpers.d.ts

@@ -1,4 +1,4 @@
 import { IRouteItem } from './Router';
 export declare const findRedirectPathRecursive: (route: IRouteItem) => any;
-export declare const walkRoutesRecursive: (item: IRouteItem | Record<string, any>, defaultItem?: any, parentItem?: any) => any;
-export declare const treeToList: (item: IRouteItem | Record<string, any>, isRoot?: boolean) => Record<string, any>;
+export declare const walkRoutesRecursive: (item: IRouteItem | Record<string, any>, defaultItem?: any, parentItem?: any, alwaysAppendParentRoutePath?: boolean) => any;
+export declare const treeToList: (item: IRouteItem | Record<string, any>, isRoot?: boolean, parentItem?: any, alwaysAppendParentRoutePath?: boolean) => Record<string, any>;

package/ui/nav/Router/helpers.js

@@ -18,6 +18,7 @@ exports.treeToList = exports.walkRoutesRecursive = exports.findRedirectPathRecur
 var get_1 = __importDefault(require("lodash-es/get"));
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
+var SLASH = '/';
 var findRedirectPathRecursive = function (route) {
     if (!route) {
         return null;
@@ -34,10 +35,36 @@ var findRedirectPathRecursive = function (route) {
         : null;
 };
 exports.findRedirectPathRecursive = findRedirectPathRecursive;
-var walkRoutesRecursive = function (item, defaultItem, parentItem) {
+var addSlashIfNotPresent = function (path) {
+    if (path === void 0) { path = ''; }
+    return path.startsWith(SLASH) ? path : (SLASH + path);
+};
+var joinChildAndParentPaths = function (path, parentPath) {
+    if (path === void 0) { path = ''; }
+    if (parentPath === void 0) { parentPath = null; }
+    if (!parentPath || parentPath === SLASH) {
+        return addSlashIfNotPresent(path);
+    }
+    return addSlashIfNotPresent(parentPath) + addSlashIfNotPresent(path);
+};
+var appendChildIfNoSlash = function (path, parentPath) {
+    if (path === void 0) { path = ''; }
+    if (parentPath === void 0) { parentPath = null; }
+    if (parentPath === SLASH) {
+        return addSlashIfNotPresent(path);
+    }
+    if (!path.startsWith(SLASH)) {
+        return addSlashIfNotPresent(parentPath) + addSlashIfNotPresent(path);
+    }
+    return path;
+};
+var walkRoutesRecursive = function (item, defaultItem, parentItem, alwaysAppendParentRoutePath) {
     if (defaultItem === void 0) { defaultItem = {}; }
     if (parentItem === void 0) { parentItem = {}; }
-    var normalizedItem = __assign(__assign(__assign({}, defaultItem), item), { id: item.id, exact: item.exact, path: item.path && (item.path.indexOf('/') !== 0 && parentItem.path ? parentItem.path + '/' : '') + item.path, label: item.label, title: item.title, isVisible: typeof item.isVisible !== 'undefined'
+    if (alwaysAppendParentRoutePath === void 0) { alwaysAppendParentRoutePath = true; }
+    var normalizedItem = __assign(__assign(__assign({}, defaultItem), item), { id: item.id, exact: item.exact, path: item.path && (alwaysAppendParentRoutePath
+            ? joinChildAndParentPaths(item.path, parentItem.path)
+            : appendChildIfNoSlash(item.path, parentItem.path)), label: item.label, title: item.title, isVisible: typeof item.isVisible !== 'undefined'
             ? item.isVisible
             : (typeof parentItem.isVisible !== 'undefined'
                 ? parentItem.isVisible
@@ -48,32 +75,39 @@ var walkRoutesRecursive = function (item, defaultItem, parentItem) {
                 : defaultItem.isNavVisible), layout: item.layout || parentItem.layout || defaultItem.layout || null, roles: item.roles || parentItem.roles || defaultItem.roles || null, component: null, componentProps: null });
     var items = null;
     if ((0, isArray_1["default"])(item.items)) {
-        items = item.items.map(function (subItem) { return (0, exports.walkRoutesRecursive)(subItem, defaultItem, normalizedItem); });
+        items = item.items.map(function (subItem) { return (0, exports.walkRoutesRecursive)(subItem, defaultItem, normalizedItem, alwaysAppendParentRoutePath); });
     }
     else if ((0, isObject_1["default"])(item.items)) {
         items = Object.keys(item.items)
-            .map(function (id) { return (0, exports.walkRoutesRecursive)(__assign(__assign({}, item.items[id]), { id: id }), defaultItem, normalizedItem); });
+            .map(function (id) { return (0, exports.walkRoutesRecursive)(__assign(__assign({}, item.items[id]), { id: id }), defaultItem, normalizedItem, alwaysAppendParentRoutePath); });
     }
     return __assign(__assign({}, normalizedItem), { items: items });
 };
 exports.walkRoutesRecursive = walkRoutesRecursive;
-var treeToList = function (item, isRoot) {
+var treeToList = function (item, isRoot, parentItem, alwaysAppendParentRoutePath) {
     if (isRoot === void 0) { isRoot = true; }
+    if (parentItem === void 0) { parentItem = {}; }
+    if (alwaysAppendParentRoutePath === void 0) { alwaysAppendParentRoutePath = true; }
     if ((0, isArray_1["default"])(item)) {
         return item;
     }
+    if (item.path) {
+        item.path = alwaysAppendParentRoutePath
+            ? joinChildAndParentPaths(item.path, parentItem === null || parentItem === void 0 ? void 0 : parentItem.path)
+            : appendChildIfNoSlash(item.path, parentItem === null || parentItem === void 0 ? void 0 : parentItem.path);
+    }
     if (isRoot && !item.id) {
         item.id = 'root';
     }
     var items = item.path ? [item] : [];
     if ((0, isArray_1["default"])(item.items)) {
         item.items.forEach(function (subItem) {
-            items = items.concat((0, exports.treeToList)(subItem, false));
+            items = items.concat((0, exports.treeToList)(subItem, false, item, alwaysAppendParentRoutePath));
         });
     }
     else if ((0, isObject_1["default"])(item.items)) {
         Object.keys(item.items).forEach(function (id) {
-            items = items.concat((0, exports.treeToList)(__assign(__assign({}, item.items[id]), { id: id }), false));
+            items = items.concat((0, exports.treeToList)(__assign(__assign({}, item.items[id]), { id: id }), false, item, alwaysAppendParentRoutePath));
         });
     }
     return items;