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

package/actions/router.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 exports.goToParent = exports.goToRoute = exports.initParams = exports.initRoutes = exports.ROUTER_SET_DATA = exports.ROUTER_SET_PARAMS = exports.ROUTER_INIT_ROUTES = void 0;
 var connected_react_router_1 = require("connected-react-router");
+var path_to_regexp_1 = require("path-to-regexp");
 exports.ROUTER_INIT_ROUTES = 'ROUTER_INIT_ROUTES';
 exports.ROUTER_SET_PARAMS = 'ROUTER_SET_PARAMS';
 exports.ROUTER_SET_DATA = 'ROUTER_SET_DATA';
@@ -15,6 +16,20 @@ var initParams = function (params) { return ({
     params: params
 }); };
 exports.initParams = initParams;
+// Include in the result only those parameters that are present as route parameters in the path
+// For example, given the path '/users/:id' and the parameters { id: 1, page: 3, totalPages: 10 }, the function will return { id: 1 }.
+var filterParamsForPath = function (path, params) {
+    if (!path) {
+        return params;
+    }
+    var parsedPath = (0, path_to_regexp_1.parse)(path);
+    return parsedPath.reduce(function (filteredParams, param) {
+        if (typeof param === 'object' && params[param.name]) {
+            filteredParams[param.name] = params[param.name];
+        }
+        return filteredParams;
+    }, {});
+};
 var goToRoute = function (routeId, params, isReplace) {
     if (params === void 0) { params = null; }
     if (isReplace === void 0) { isReplace = false; }
@@ -27,8 +42,10 @@ var goToRoute = function (routeId, params, isReplace) {
         var getRouteProp = require('../reducers/router').getRouteProp;
         var buildUrl = require('../reducers/router').buildUrl;
         var path = getRouteProp(getState(), routeId, 'path');
-        var method = isReplace ? connected_react_router_1.replace : connected_react_router_1.push;
-        return dispatch(method(buildUrl(path, params)));
+        var filteredParams = filterParamsForPath(path, params);
+        var routeUrl = buildUrl(path, filteredParams);
+        var reduxAction = isReplace ? (0, connected_react_router_1.replace)(routeUrl) : (0, connected_react_router_1.push)(routeUrl);
+        return dispatch(reduxAction);
     };
 };
 exports.goToRoute = goToRoute;

package/hooks/index.d.ts

@@ -19,9 +19,9 @@ import useSsr from './useSsr';
 import useUniqueId from './useUniqueId';
 import useTheme from './useTheme';
 import useTree from './useTree';
-import useMonthCalendar from '../ui/content/CalendarSystem/hooks/useMonthCalendar';
-import useWeekCalendar from '../ui/content/CalendarSystem/hooks/useWeekCalendar';
+import useMonthGrid from '../ui/content/CalendarSystem/hooks/useMonthGrid';
+import useWeekGrid from '../ui/content/CalendarSystem/hooks/useWeekGrid';
 import useDisplayDate from '../ui/content/CalendarSystem/hooks/useDisplayDate';
 import useCalendarControls from '../ui/content/CalendarSystem/hooks/useCalendarControls';
 import useSaveCursorPosition from './useSaveCursorPosition';
-export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, useTree, useMonthCalendar, useWeekCalendar, useDisplayDate, useCalendarControls, useSaveCursorPosition, };
+export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, useTree, useMonthGrid, useWeekGrid, useDisplayDate, useCalendarControls, useSaveCursorPosition, };

package/hooks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.useSaveCursorPosition = exports.useCalendarControls = exports.useDisplayDate = exports.useWeekCalendar = exports.useMonthCalendar = exports.useTree = exports.useTheme = exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
+exports.useSaveCursorPosition = exports.useCalendarControls = exports.useDisplayDate = exports.useWeekGrid = exports.useMonthGrid = exports.useTree = exports.useTheme = exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
 var useAbsolutePositioning_1 = __importDefault(require("./useAbsolutePositioning"));
 exports.useAbsolutePositioning = useAbsolutePositioning_1["default"];
 var useAddressBar_1 = __importDefault(require("./useAddressBar"));
@@ -46,10 +46,10 @@ var useTheme_1 = __importDefault(require("./useTheme"));
 exports.useTheme = useTheme_1["default"];
 var useTree_1 = __importDefault(require("./useTree"));
 exports.useTree = useTree_1["default"];
-var useMonthCalendar_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useMonthCalendar"));
-exports.useMonthCalendar = useMonthCalendar_1["default"];
-var useWeekCalendar_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useWeekCalendar"));
-exports.useWeekCalendar = useWeekCalendar_1["default"];
+var useMonthGrid_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useMonthGrid"));
+exports.useMonthGrid = useMonthGrid_1["default"];
+var useWeekGrid_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useWeekGrid"));
+exports.useWeekGrid = useWeekGrid_1["default"];
 var useDisplayDate_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useDisplayDate"));
 exports.useDisplayDate = useDisplayDate_1["default"];
 var useCalendarControls_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useCalendarControls"));

package/hooks/useTree.d.ts

@@ -95,5 +95,10 @@ export interface ITreeConfig {
      * @example: true
      */
     routerParams?: any;
+    /**
+     * При повторном нажатии на выбранный элемент из дерева, он продолжит отображаться как активный.
+     * @example true
+    */
+    useSameSelectedItemId?: boolean;
 }
 export default function useTree(config: ITreeConfig): ITreeOutput;

package/hooks/useTree.js

@@ -127,11 +127,12 @@ function useTree(config) {
         if (config.onExpand) {
             config.onExpand.call(null, e, item);
         }
-        setSelectedUniqueId(selectedUniqueId === uniqueId ? null : uniqueId);
+        var sameUniqueIdAccordingToSettings = config.useSameSelectedItemId ? uniqueId : null;
+        setSelectedUniqueId(selectedUniqueId === uniqueId ? sameUniqueIdAccordingToSettings : uniqueId);
         if (!(0, isEmpty_1["default"])(item[primaryKey])) {
             setExpandedItems(__assign(__assign({}, expandedItems), (_a = {}, _a[uniqueId] = !expandedItems[uniqueId], _a)));
         }
-    }, [config.onExpand, expandedItems, primaryKey, selectedUniqueId]);
+    }, [config.onExpand, config.useSameSelectedItemId, expandedItems, primaryKey, selectedUniqueId]);
     var resultTreeItems = (0, react_1.useMemo)(function () {
         var getItems = function (sourceItems, parentId, currentLevel) {
             if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.112",
+ "version": "3.0.0-beta.113",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {

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

@@ -102,30 +102,41 @@ export interface ICalendarSystemProps extends IUiComponent {
         */
         eventGroups: IEventGroup[];
     };
+    /**
+    * Дополнительные свойства, которые передаются во view компонента
+    */
+    additionalViewProps?: Record<string, any>;
     [key: string]: any;
 }
-export interface ICalendarSystemViewProps extends Omit<ICalendarSystemProps, 'calendarGroups'> {
-    monthCalendarDays: IDay[];
-    currentWeekDays: IDay[];
-    allHours: string[];
-    calendarType: CalendarEnum;
-    dateToDisplay: string;
+export interface ICalendarSystemViewProps extends Pick<ICalendarSystemProps, 'className' | 'style' | 'additionalViewProps'> {
+    openCreateModal: (eventInitialDay?: IDay) => void;
+    onInnerCalendarChangeMonth: (newDate: Date) => void;
     eventGroups: IEventGroup[];
     eventGroupsTitle: string;
-    selectedCalendarGroupsIds: number[];
-    onChangeCalendarType: (newType: string) => void;
-    onMonthChange: (newDate: Date) => void;
-    applyControl: (event: React.MouseEvent<HTMLElement>) => void;
-    openCreateModal: (eventInitialDay?: IDay) => void;
-    openCreateEventGroupModal: VoidFunction;
-    openEditModal: (event: IEvent) => void;
-    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
     onChangeEventGroupsIds: (selectedIds: number[]) => void;
-    weekDays: string[];
+    openCreateEventGroupModal: VoidFunction;
+    dateToDisplay: string;
+    handleCalendarTypeChange: (newType: string) => void;
+    handleControlClick: (event: React.MouseEvent<HTMLElement>) => void;
+    calendarType: CalendarEnum;
+    monthGridProps: {
+        monthGridWeekDays: string[];
+        monthGridCalendarDays: IDay[];
+        getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+        openEditModal: (event: IEvent) => void;
+        openCreateModal: (eventInitialDay?: IDay) => void;
+    };
+    weekGridProps: {
+        weekGridTwentyFourHoursArray: string[];
+        weekGridCurrentWeekDays: IDay[];
+        getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+        openEditModal: (event: IEvent) => void;
+        openCreateModal: (eventInitialDay?: IDay) => void;
+    };
 }
 export interface ICalendarSystemModalViewProps extends IModalProps {
     eventGroups: IEventGroup[];
-    onEventSubmit: (fields: Record<CalendarSystemModalFields, string>, eventInitialValues?: IEventInitialValues) => void;
+    onModalFormSubmit: (fields: Record<CalendarSystemModalFields, string>, eventInitialValues?: IEventInitialValues) => void;
     isCreate: boolean;
     eventInitialValues?: any;
 }

package/ui/content/CalendarSystem/CalendarSystem.js

@@ -1,103 +1,92 @@
 "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;
+/* eslint-disable max-len */
 /* eslint-disable no-return-assign */
 /* eslint-disable default-case */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable no-plusplus */
 var react_1 = __importDefault(require("react"));
 var dayjs_1 = __importDefault(require("dayjs"));
-var concat_1 = __importDefault(require("lodash-es/concat"));
-var slice_1 = __importDefault(require("lodash-es/slice"));
 var localeData_1 = __importDefault(require("dayjs/plugin/localeData"));
-var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
 var useCalendarControls_1 = __importDefault(require("./hooks/useCalendarControls"));
 var useDisplayDate_1 = __importDefault(require("./hooks/useDisplayDate"));
-var useMonthCalendar_1 = __importDefault(require("./hooks/useMonthCalendar"));
+var useMonthGrid_1 = __importDefault(require("./hooks/useMonthGrid"));
 var hooks_1 = require("../../../hooks");
-var addEventIfMatchDate_1 = require("./helpers/addEventIfMatchDate");
-var CalendarType_1 = __importDefault(require("./enums/CalendarType"));
 var useCalendarSystemModals_1 = __importDefault(require("./hooks/useCalendarSystemModals"));
 var useCalendarSystemEventGroupModals_1 = require("./hooks/useCalendarSystemEventGroupModals");
+var useWeekGrid_1 = __importDefault(require("./hooks/useWeekGrid"));
+var useCalendarType_1 = require("./hooks/useCalendarType");
+var useEventsFromDate_1 = require("./hooks/useEventsFromDate");
 dayjs_1["default"].extend(localeData_1["default"]);
 function CalendarSystem(props) {
     var components = (0, hooks_1.useComponents)();
     var _a = react_1["default"].useState(props.eventBlock.eventGroups || []), innerEventGroups = _a[0], setInnerEventGroups = _a[1];
     var _b = react_1["default"].useState([]), selectedEventGroupsIds = _b[0], setSelectedEventGroupsIds = _b[1];
-    var _c = (0, useDisplayDate_1["default"])(), dateToDisplay = _c.dateToDisplay, setNewDateToDisplay = _c.setNewDateToDisplay;
-    var _d = react_1["default"].useState(CalendarType_1["default"].MONTH), calendarType = _d[0], setCalendarType = _d[1];
-    var _e = (0, useMonthCalendar_1["default"])(), monthCalendarDays = _e.calendarArray, setCurrentMonthDate = _e.setCurrentMonthDate, currentMonthDate = _e.currentMonthDate;
-    var _f = (0, hooks_1.useWeekCalendar)(currentMonthDate), currentWeekDays = _f.currentWeek, weekControls = _f.weekControls, forceUpdateWeekOnMonthChange = _f.forceUpdateWeekOnMonthChange;
-    var applyControl = (0, useCalendarControls_1["default"])(calendarType, weekControls);
-    var _g = (0, useCalendarSystemModals_1["default"])(props.calendarModalProps, innerEventGroups, setInnerEventGroups), openCreateModal = _g.openCreateModal, openEditModal = _g.openEditModal;
+    var _c = react_1["default"].useState(null), currentMonthFirstDayDate = _c[0], setCurrentMonthFirstDayDate = _c[1];
+    var _d = (0, useDisplayDate_1["default"])(), dateToDisplay = _d.dateToDisplay, setNewDateToDisplay = _d.setNewDateToDisplay;
+    var _e = (0, useCalendarType_1.useCalendarType)(), calendarType = _e.calendarType, handleCalendarTypeChange = _e.handleCalendarTypeChange;
+    var _f = (0, useMonthGrid_1["default"])(currentMonthFirstDayDate, setCurrentMonthFirstDayDate), monthGridWeekDays = _f.monthGridWeekDays, monthGridCalendarDays = _f.monthGridCalendarDays;
+    var _g = (0, useWeekGrid_1["default"])(currentMonthFirstDayDate), weekGridTwentyFourHoursArray = _g.weekGridTwentyFourHoursArray, weekGridCurrentWeekDays = _g.weekGridCurrentWeekDays, weekGridControls = _g.weekGridControls, updateWeekOnMonthChange = _g.updateWeekOnMonthChange;
+    var handleControlClick = (0, useCalendarControls_1["default"])(calendarType, weekGridControls);
+    var _h = (0, useCalendarSystemModals_1["default"])(props.calendarModalProps, innerEventGroups, setInnerEventGroups), openCreateModal = _h.openCreateModal, openEditModal = _h.openEditModal;
     var openCreateEventGroupModal = (0, useCalendarSystemEventGroupModals_1.useCalendarSystemEventGroupModals)(innerEventGroups, setInnerEventGroups, props.eventGroupModalProps).openCreateEventGroupModal;
-    var onChangeCalendarType = react_1["default"].useCallback(function (newType) {
-        setCalendarType(newType);
-        if (props.onChangeCalendarType) {
-            props.onChangeCalendarType(newType);
-        }
-    }, [props]);
-    var onMonthChange = react_1["default"].useCallback(function (newDate) {
+    var onInnerCalendarChangeMonth = react_1["default"].useCallback(function (newDate) {
         setNewDateToDisplay(newDate);
-        setCurrentMonthDate(newDate);
-        forceUpdateWeekOnMonthChange(newDate);
-    }, [forceUpdateWeekOnMonthChange, setCurrentMonthDate, setNewDateToDisplay]);
-    var getEventsFromDate = function (date, currentCalendarType) {
-        var eventsOnDate = [];
-        var dayjsDate = (0, dayjs_1["default"])(date);
-        var iterateEventGroups = function (callback) {
-            innerEventGroups.forEach(function (eventGroup) {
-                eventGroup.events.forEach(function (event) {
-                    callback(event, eventGroup);
-                });
-            });
-        };
-        switch (currentCalendarType) {
-            case CalendarType_1["default"].MONTH: {
-                iterateEventGroups(function (event, eventGroup) {
-                    var eventDateDayJs = (0, dayjs_1["default"])(event.date);
-                    (0, addEventIfMatchDate_1.addEventIfMatchDate)(eventDateDayJs, dayjsDate, eventGroup, event, 'day', selectedEventGroupsIds, eventsOnDate);
-                });
-                break;
-            }
-            case CalendarType_1["default"].WEEK: {
-                iterateEventGroups(function (event, eventGroup) {
-                    var eventDate = new Date(event.date);
-                    eventDate.setHours(eventDate.getHours(), 0, 0, 0);
-                    var eventDateDayJs = (0, dayjs_1["default"])(eventDate);
-                    (0, addEventIfMatchDate_1.addEventIfMatchDate)(eventDateDayJs, dayjsDate, eventGroup, event, 'hours', selectedEventGroupsIds, eventsOnDate);
-                });
-                break;
-            }
-        }
-        // eslint-disable-next-line consistent-return
-        return eventsOnDate;
-    };
-    var weekDays = react_1["default"].useMemo(function () {
-        var unformattedDaysOfWeek = dayjs_1["default"].weekdaysMin();
-        return (0, concat_1["default"])((0, slice_1["default"])(unformattedDaysOfWeek, 1), unformattedDaysOfWeek[0]).map(function (weekDay) { return __("".concat((0, upperFirst_1["default"])(weekDay))); });
-    }, []);
-    var allHours = react_1["default"].useMemo(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);
+        setCurrentMonthFirstDayDate(newDate);
+        updateWeekOnMonthChange(newDate);
+    }, [updateWeekOnMonthChange, setCurrentMonthFirstDayDate, setNewDateToDisplay]);
+    var getEventsFromDate = (0, useEventsFromDate_1.useEventsFromDate)(innerEventGroups, selectedEventGroupsIds).getEventsFromDate;
+    var viewProps = react_1["default"].useMemo(function () { return ({
+        className: props.className,
+        style: props.style,
+        openCreateModal: openCreateModal,
+        onInnerCalendarChangeMonth: onInnerCalendarChangeMonth,
+        eventGroups: innerEventGroups,
+        eventGroupsTitle: props.eventBlock.title,
+        onChangeEventGroupsIds: function (newSelectedEventGroupsIds) { return setSelectedEventGroupsIds(newSelectedEventGroupsIds); },
+        openCreateEventGroupModal: openCreateEventGroupModal,
+        dateToDisplay: dateToDisplay,
+        handleCalendarTypeChange: handleCalendarTypeChange,
+        handleControlClick: handleControlClick,
+        calendarType: calendarType,
+        additionalViewProps: props.additionalViewProps,
+        monthGridProps: {
+            monthGridWeekDays: monthGridWeekDays,
+            monthGridCalendarDays: monthGridCalendarDays,
+            getEventsFromDate: getEventsFromDate,
+            openCreateModal: openCreateModal,
+            openEditModal: openEditModal
+        },
+        weekGridProps: {
+            weekGridTwentyFourHoursArray: weekGridTwentyFourHoursArray,
+            weekGridCurrentWeekDays: weekGridCurrentWeekDays,
+            getEventsFromDate: getEventsFromDate,
+            openCreateModal: openCreateModal,
+            openEditModal: openEditModal
         }
-        return hoursArray;
-    }, []);
-    return components.ui.renderView(props.view || 'content.CalendarSystemView', __assign(__assign({}, props), { dateToDisplay: dateToDisplay, monthCalendarDays: monthCalendarDays, calendarType: calendarType, currentWeekDays: currentWeekDays, eventGroups: innerEventGroups, eventGroupsTitle: props.eventBlock.title, allHours: allHours, selectedEventGroupsIds: selectedEventGroupsIds, onChangeCalendarType: onChangeCalendarType, onMonthChange: onMonthChange, applyControl: applyControl, openCreateModal: openCreateModal, getEventsFromDate: getEventsFromDate, onChangeEventGroupsIds: function (newSelectedEventGroupsIds) { return setSelectedEventGroupsIds(newSelectedEventGroupsIds); }, openCreateEventGroupModal: openCreateEventGroupModal, openEditModal: openEditModal, weekDays: weekDays }));
+    }); }, [
+        props.className,
+        props.style,
+        props.eventBlock.title,
+        openCreateModal,
+        onInnerCalendarChangeMonth,
+        innerEventGroups,
+        openCreateEventGroupModal,
+        dateToDisplay,
+        handleCalendarTypeChange,
+        handleControlClick,
+        calendarType,
+        monthGridWeekDays,
+        monthGridCalendarDays,
+        getEventsFromDate,
+        openEditModal,
+        weekGridTwentyFourHoursArray,
+        weekGridCurrentWeekDays,
+        props.additionalViewProps,
+    ]);
+    return components.ui.renderView(props.view || 'content.CalendarSystemView', viewProps);
 }
 exports["default"] = CalendarSystem;

package/ui/content/CalendarSystem/hooks/useCalendarControls.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import CalendarEnum from '../enums/CalendarType';
 import DateControlEnum from '../enums/DateControlType';
-export declare const getSourceCalendarControl: (control: string) => HTMLElement;
-declare const useCalendarControls: (calendarType: CalendarEnum, weekControls: {
+declare const useCalendarControls: (calendarType: CalendarEnum, weekGridControls: {
     [key: string]: () => void | DateControlEnum;
 }) => (event: React.MouseEvent<HTMLElement>) => void;
 export default useCalendarControls;

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

@@ -3,26 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.getSourceCalendarControl = void 0;
-/* eslint-disable no-unneeded-ternary */
 /* eslint-disable default-case */
-/* eslint-disable no-unused-expressions */
 var react_1 = __importDefault(require("react"));
 var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var CalendarType_1 = __importDefault(require("../enums/CalendarType"));
+var utils_1 = require("../utils/utils");
 var CUSTOM_CONTROL_PATH = 'dataset.control';
-var getSourceCalendarControl = function (control) { return document.querySelector("[data-sourcecontrol=\"".concat(control, "\"]")); };
-exports.getSourceCalendarControl = getSourceCalendarControl;
-var useCalendarControls = function (calendarType, weekControls) {
-    var getCustomControlType = function (event) {
+var useCalendarControls = function (calendarType, weekGridControls) {
+    var extractCustomControlType = function (event) {
         var target = event.target;
         var customControlType = (0, get_1["default"])(target, CUSTOM_CONTROL_PATH);
-        return customControlType ? customControlType : null;
+        return customControlType !== null && customControlType !== void 0 ? customControlType : null;
     };
-    var applyControl = react_1["default"].useCallback(function (event) {
-        var customControlType = getCustomControlType(event);
-        var sourceCalendarControl = (0, exports.getSourceCalendarControl)(customControlType);
+    var handleControlClick = react_1["default"].useCallback(function (event) {
+        var customControlType = extractCustomControlType(event);
+        var sourceCalendarControl = (0, utils_1.getSourceCalendarControl)(customControlType);
         if (!sourceCalendarControl) {
             return;
         }
@@ -32,16 +28,17 @@ var useCalendarControls = function (calendarType, weekControls) {
                 return;
             }
             case CalendarType_1["default"].WEEK: {
-                if ((0, isFunction_1["default"])(weekControls[customControlType])) {
-                    weekControls[customControlType]();
+                var controlAction = weekGridControls[customControlType];
+                if ((0, isFunction_1["default"])(controlAction)) {
+                    controlAction();
                 }
                 else {
-                    var sourceControlType = weekControls[customControlType];
-                    (0, exports.getSourceCalendarControl)(sourceControlType).click();
+                    var sourceControlType = controlAction;
+                    (0, utils_1.getSourceCalendarControl)(sourceControlType).click();
                 }
             }
         }
-    }, [calendarType, weekControls]);
-    return applyControl;
+    }, [calendarType, weekGridControls]);
+    return handleControlClick;
 };
 exports["default"] = useCalendarControls;

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

@@ -28,7 +28,7 @@ var useCalendarSystemEventGroupModals = function (innerEventGroups, setInnerEven
     var theme = (0, hooks_1.useTheme)().theme;
     var calendarModalView = (eventGroupModalProps === null || eventGroupModalProps === void 0 ? void 0 : eventGroupModalProps.component) || components.ui.getView('content.CalendarSystemEventGroupModalView');
     var defaultEventGroupColor = react_1["default"].useMemo(function () { return theme === 'light' ? PRIMARY_LIGHT : PRIMARY_DARK; }, [theme]);
-    var onEventGroupSubmit = react_1["default"].useCallback(function (fields) {
+    var onSubmit = react_1["default"].useCallback(function (fields) {
         var _a;
         var newEventGroup = {
             id: (((_a = (0, maxBy_1["default"])(innerEventGroups, function (eventsGroup) { return eventsGroup.id; })) === null || _a === void 0 ? void 0 : _a.id) || DEFAULT_ID) + 1,
@@ -41,12 +41,12 @@ var useCalendarSystemEventGroupModals = function (innerEventGroups, setInnerEven
     var openCreateEventGroupModal = react_1["default"].useCallback(function () {
         dispatch((0, modal_1.openModal)(calendarModalView, {
             isCreate: true,
-            onEventGroupSubmit: onEventGroupSubmit,
+            onEventGroupSubmit: onSubmit,
             eventGroupInitialValues: {
                 color: defaultEventGroupColor
             }
         }));
-    }, [calendarModalView, defaultEventGroupColor, dispatch, onEventGroupSubmit]);
+    }, [calendarModalView, defaultEventGroupColor, dispatch, onSubmit]);
     return {
         openCreateEventGroupModal: openCreateEventGroupModal
     };

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

@@ -35,7 +35,7 @@ var useCalendarSystemModals = function (calendarModalProps, innerEventGroups, se
     var dispatch = (0, react_redux_1.useDispatch)();
     var components = (0, useComponents_1["default"])();
     var calendarModalView = (calendarModalProps === null || calendarModalProps === void 0 ? void 0 : calendarModalProps.component) || components.ui.getView('content.CalendarSystemModalView');
-    var onEventSubmit = react_1["default"].useCallback(function (fields, eventInitialValues) {
+    var onModalFormSubmit = react_1["default"].useCallback(function (fields, eventInitialValues) {
         var _a;
         var eventGroupId = fields.eventGroupId, date = fields.date, title = fields.title, description = fields.description;
         var currentEventGroups = __spreadArray([], innerEventGroups, true);
@@ -63,7 +63,7 @@ var useCalendarSystemModals = function (calendarModalProps, innerEventGroups, se
         ], false), currentEventGroups.slice(changeableEventGroupIndex + 1), true);
         setInnerEventGroups(currentEventGroups);
     }, [innerEventGroups, setInnerEventGroups]);
-    var getModalProps = react_1["default"].useCallback(function (isCreate, eventInitialValues) { return (__assign(__assign({}, calendarModalProps), { component: calendarModalView, eventGroups: innerEventGroups, onEventSubmit: onEventSubmit, isCreate: isCreate, eventInitialValues: eventInitialValues })); }, [calendarModalProps, calendarModalView, innerEventGroups, onEventSubmit]);
+    var getModalProps = react_1["default"].useCallback(function (isCreate, eventInitialValues) { return (__assign(__assign({}, calendarModalProps), { component: calendarModalView, eventGroups: innerEventGroups, onModalFormSubmit: onModalFormSubmit, isCreate: isCreate, eventInitialValues: eventInitialValues })); }, [calendarModalProps, calendarModalView, innerEventGroups, onModalFormSubmit]);
     var getEventFromGroup = react_1["default"].useCallback(function (event) { return innerEventGroups
         .find(function (group) { return group.events
         .some(function (groupEvent) { return (0, isEqual_1["default"])((0, utils_1.getOmittedEvent)(groupEvent), (0, utils_1.getOmittedEvent)(event)); }); }); }, [innerEventGroups]);

package/ui/content/CalendarSystem/hooks/useCalendarType.d.ts

@@ -0,0 +1,5 @@
+import CalendarEnum from '../enums/CalendarType';
+export declare const useCalendarType: (onChangeCalendarType?: (newType: string) => void) => {
+    handleCalendarTypeChange: (newType: string) => void;
+    calendarType: CalendarEnum;
+};

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.useCalendarType = void 0;
+var react_1 = __importDefault(require("react"));
+var CalendarType_1 = __importDefault(require("../enums/CalendarType"));
+var useCalendarType = function (onChangeCalendarType) {
+    var _a = react_1["default"].useState(CalendarType_1["default"].MONTH), calendarType = _a[0], setCalendarType = _a[1];
+    var handleCalendarTypeChange = react_1["default"].useCallback(function (newType) {
+        setCalendarType(newType);
+        if (onChangeCalendarType) {
+            onChangeCalendarType(newType);
+        }
+    }, [onChangeCalendarType]);
+    return {
+        handleCalendarTypeChange: handleCalendarTypeChange,
+        calendarType: calendarType
+    };
+};
+exports.useCalendarType = useCalendarType;

package/ui/content/CalendarSystem/hooks/useEventsFromDate.d.ts

@@ -0,0 +1,5 @@
+import { IEvent, IEventGroup } from '../CalendarSystem';
+import CalendarEnum from '../enums/CalendarType';
+export declare const useEventsFromDate: (innerEventGroups: IEventGroup[], selectedEventGroupsIds: number[]) => {
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+};

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

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+exports.__esModule = true;
+exports.useEventsFromDate = void 0;
+/* eslint-disable default-case */
+var react_1 = __importDefault(require("react"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var CalendarType_1 = __importDefault(require("../enums/CalendarType"));
+var addEventIfMatchDate_1 = require("../helpers/addEventIfMatchDate");
+var CALENDAR_TYPE_GETTING_EVENTS_PROPERTIES = (_a = {},
+    _a[CalendarType_1["default"].MONTH] = {
+        getDayJsDate: function (date) { return (0, dayjs_1["default"])(date); },
+        unit: 'day'
+    },
+    _a[CalendarType_1["default"].WEEK] = {
+        getDayJsDate: function (date) {
+            var eventDate = new Date(date);
+            eventDate.setHours(eventDate.getHours(), 0, 0, 0);
+            return (0, dayjs_1["default"])(eventDate);
+        },
+        unit: 'hours'
+    },
+    _a);
+var useEventsFromDate = function (innerEventGroups, selectedEventGroupsIds) {
+    var getEventsFromDate = react_1["default"].useCallback(function (dateFromDay, currentCalendarType) {
+        var resultEventsOnDate = [];
+        var dayjsDateFromDay = (0, dayjs_1["default"])(dateFromDay);
+        var forEachEventGroupEvent = function (callback) {
+            innerEventGroups.forEach(function (eventGroup) {
+                eventGroup.events.forEach(function (event) {
+                    callback(event, eventGroup);
+                });
+            });
+        };
+        var calendarTypeProperties = CALENDAR_TYPE_GETTING_EVENTS_PROPERTIES[currentCalendarType];
+        forEachEventGroupEvent(function (event, eventGroup) {
+            var eventDateDayJs = calendarTypeProperties.getDayJsDate(event.date);
+            (0, addEventIfMatchDate_1.addEventIfMatchDate)(eventDateDayJs, dayjsDateFromDay, eventGroup, event, calendarTypeProperties.unit, selectedEventGroupsIds, resultEventsOnDate);
+        });
+        return resultEventsOnDate;
+    }, [innerEventGroups, selectedEventGroupsIds]);
+    return {
+        getEventsFromDate: getEventsFromDate
+    };
+};
+exports.useEventsFromDate = useEventsFromDate;

package/ui/content/CalendarSystem/hooks/{useMonthCalendar.d.ts → useMonthGrid.d.ts}

@@ -1,6 +1,8 @@
 import React from 'react';
 import { IDay } from '../CalendarSystem';
-declare const useMonthCalendar: () => {
+declare const useMonthGrid: (currentMonthFirstDayDate: Date, setCurrentMonthFirstDayDate: React.Dispatch<React.SetStateAction<Date>>) => {
+    monthGridWeekDays: any;
+    monthGridCalendarDays: IDay[];
     getCalendarArray: () => IDay[];
     getCurrentMonthDataUTC: () => {
         currentMonth: number;
@@ -9,8 +11,5 @@ declare const useMonthCalendar: () => {
         daysInCurrentMonth: any[];
     };
     getWeekFromDate: (date: Date) => IDay[];
-    calendarArray: IDay[];
-    setCurrentMonthDate: React.Dispatch<React.SetStateAction<Date>>;
-    currentMonthDate: Date;
 };
-export default useMonthCalendar;
+export default useMonthGrid;

package/ui/content/CalendarSystem/hooks/{useMonthCalendar.js → useMonthGrid.js}

@@ -18,19 +18,22 @@ exports.__esModule = true;
 /* eslint-disable import/order */
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils/utils");
+var concat_1 = __importDefault(require("lodash-es/concat"));
+var slice_1 = __importDefault(require("lodash-es/slice"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
 var FIRST_DAY = 1;
 var ONE_MONTH = 1;
 var TOTAL_DAYS_IN_CALENDAR = 42;
-var useMonthCalendar = function () {
-    var _a = react_1["default"].useState(null), currentMonthDate = _a[0], setCurrentMonthDate = _a[1];
+var useMonthGrid = function (currentMonthFirstDayDate, setCurrentMonthFirstDayDate) {
     var getCurrentMonthDataUTC = react_1["default"].useCallback(function () {
-        var currentYear = (currentMonthDate === null || currentMonthDate === void 0 ? void 0 : currentMonthDate.getFullYear()) || new Date().getFullYear();
-        var month = (currentMonthDate === null || currentMonthDate === void 0 ? void 0 : currentMonthDate.getMonth()) || new Date().getMonth();
+        var currentYear = (currentMonthFirstDayDate === null || currentMonthFirstDayDate === void 0 ? void 0 : currentMonthFirstDayDate.getFullYear()) || new Date().getFullYear();
+        var month = (currentMonthFirstDayDate === null || currentMonthFirstDayDate === void 0 ? void 0 : currentMonthFirstDayDate.getMonth()) || new Date().getMonth();
         var nextMonthFirstDay = new Date(currentYear, month + ONE_MONTH, FIRST_DAY);
         var lastDayOfCurrentMonth = new Date(nextMonthFirstDay.getTime() - FIRST_DAY).getDate();
         var firstDayOfCurrentMonth = new Date(Date.UTC(currentYear, month, FIRST_DAY));
-        if (currentMonthDate === null) {
-            setCurrentMonthDate(firstDayOfCurrentMonth);
+        if (currentMonthFirstDayDate === null) {
+            setCurrentMonthFirstDayDate(firstDayOfCurrentMonth);
         }
         var daysInCurrentMonth = [];
         // Пройдемся по всем дням месяца и добавим их в массив
@@ -44,7 +47,7 @@ var useMonthCalendar = function () {
             firstDayOfCurrentMonth: firstDayOfCurrentMonth,
             daysInCurrentMonth: daysInCurrentMonth
         };
-    }, [currentMonthDate]);
+    }, [currentMonthFirstDayDate, setCurrentMonthFirstDayDate]);
     var getCalendarArray = react_1["default"].useCallback(function () {
         var calendarArray = [];
         var _a = getCurrentMonthDataUTC(), firstDayOfCurrentMonth = _a.firstDayOfCurrentMonth, month = _a.currentMonth, daysInCurrentMonth = _a.daysInCurrentMonth;
@@ -66,7 +69,7 @@ var useMonthCalendar = function () {
         });
         var daysAfterCurrentMonth = TOTAL_DAYS_IN_CALENDAR - calendarArray.length;
         for (var i = 1; i <= daysAfterCurrentMonth; i++) {
-            var currentDate = new Date(currentMonthDate === null || currentMonthDate === void 0 ? void 0 : currentMonthDate.getFullYear(), month + 1, i);
+            var currentDate = new Date(currentMonthFirstDayDate === null || currentMonthFirstDayDate === void 0 ? void 0 : currentMonthFirstDayDate.getFullYear(), month + 1, i);
             calendarArray.push({
                 date: currentDate,
                 dayNumber: currentDate.getDate(),
@@ -74,14 +77,17 @@ var useMonthCalendar = function () {
             });
         }
         return calendarArray.map(function (day) { return (0, utils_1.isDateIsToday)(day.date) ? (__assign(__assign({}, day), { isToday: true })) : day; });
-    }, [currentMonthDate, getCurrentMonthDataUTC]);
+    }, [currentMonthFirstDayDate, getCurrentMonthDataUTC]);
+    var weekDays = react_1["default"].useMemo(function () {
+        var unformattedDaysOfWeek = dayjs_1["default"].weekdaysMin();
+        return (0, concat_1["default"])((0, slice_1["default"])(unformattedDaysOfWeek, 1), unformattedDaysOfWeek[0]).map(function (weekDay) { return __("".concat((0, upperFirst_1["default"])(weekDay))); });
+    }, []);
     return {
+        monthGridWeekDays: weekDays,
+        monthGridCalendarDays: getCalendarArray(),
         getCalendarArray: getCalendarArray,
         getCurrentMonthDataUTC: getCurrentMonthDataUTC,
-        getWeekFromDate: utils_1.getWeekDaysFromDate,
-        calendarArray: getCalendarArray(),
-        setCurrentMonthDate: setCurrentMonthDate,
-        currentMonthDate: currentMonthDate
+        getWeekFromDate: utils_1.getWeekDaysFromDate
     };
 };
-exports["default"] = useMonthCalendar;
+exports["default"] = useMonthGrid;

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/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' | 'hasIcon' | '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

@@ -114,7 +114,7 @@ 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 }));
+    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/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;

package/ui/nav/Tree/Tree.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IPreparedTreeItem, ITreeConfig } from '../../../hooks/useTree';
+import { IPreparedTreeItem, ITreeConfig, ITreeItem } from '../../../hooks/useTree';
 export interface ITreeViewProps extends ITreeProps {
     items: IPreparedTreeItem[];
 }
@@ -30,7 +30,7 @@ export interface ITreeProps extends Omit<ITreeConfig, 'currentPage' | 'itemsOnPa
      * Обработчик на клик по узлу
      * @param args
      */
-    onItemClick?: (...args: any[]) => any;
+    onItemClick?: (event: React.MouseEvent, item: ITreeItem) => any;
     /**
      * Отображать раскрытыми узлы из LocalStorage
      * @example true
@@ -41,6 +41,15 @@ export interface ITreeProps extends Omit<ITreeConfig, 'currentPage' | 'itemsOnPa
      * @example 32
      */
     levelPadding?: number;
+    /**
+     * Показать иконку c лева от элемента
+     * @example true
+     */
+    showIcon?: boolean;
+    /**
+     * Кастомная иконка, заменяющая иконку раскрытия по умолчанию
+     */
+    customIcon?: string | React.ReactElement;
     /**
      * Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку
      * @example false
@@ -57,6 +66,8 @@ declare namespace Tree {
         level: number;
         levelPadding: number;
         hasIconExpandOnly: boolean;
+        useSameSelectedItemId: boolean;
+        showIcon: boolean;
     };
 }
 export default Tree;

package/ui/nav/Tree/Tree.js

@@ -22,7 +22,8 @@ function Tree(props) {
         autoOpenLevels: props.autoOpenLevels,
         onExpand: props.onItemClick,
         level: props.level,
-        alwaysOpened: props.alwaysOpened
+        alwaysOpened: props.alwaysOpened,
+        useSameSelectedItemId: props.useSameSelectedItemId
     }).treeItems;
     return components.ui.renderView(props.view || 'nav.TreeView', __assign(__assign({}, props), { items: treeItems }));
 }
@@ -33,5 +34,7 @@ Tree.defaultProps = {
     autoSave: false,
     level: 0,
     levelPadding: 32,
-    hasIconExpandOnly: false
+    hasIconExpandOnly: false,
+    useSameSelectedItemId: true,
+    showIcon: true
 };

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

@@ -1,86 +0,0 @@
-"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;