@steroidsjs/core 3.0.0-beta.103 → 3.0.0-beta.104

package/en.json

@@ -819,119 +819,128 @@
     "Компонент для представления данных коллекции в виде иерархической структуры.": "A component for representing collection data in the form of a hierarchical structure.",
     "Уникальный идентификатор,\nиспользуется для сохранения состояния открыта или закрыта ячейка": "Unique identifier \nused to save the open or closed state of a cell",
     "Включает обработку вложенных данных из items": "Enables the processing of nested data from items",
-    "Callback вызываемый при нажатии на смену года или месяца в шапке Calendar": "",
-    "Пользовательский цвет для чекбокса": "",
-    "Кастомный домен": "",
-    "Куки для режима ssr": "",
-    "Ключ для хранения токена в куках": "",
-    "Url для http запросов": "",
+    "Callback вызываемый при нажатии на смену года или месяца в шапке Calendar": "Callback called when changing the year or month in the Calendar header",
+    "Пользовательский цвет для чекбокса": "Custom color for checkbox",
+    "Кастомный домен": "Custom domain",
+    "Куки для режима ssr": "Cookies for SSR mode",
+    "Ключ для хранения токена в куках": "Key for storing the token in cookies",
+    "Url для http запросов": "URL for HTTP requests",
+    "Срок хранения токена в хранилийе в днях": "Token storage duration in days",
+    "Имя хранилища для токена (local, session, или cookie)": "Token storage name (local, session, or cookie)",
+    "Ключ токена авторизации для локального хранилища": "Authorization token key for local storage",
+    "Запрос на обновление токена авторизации": "Authorization token refresh request",
+    "Хендлер для авторизации": "Authorization handler",
+    "Функция, которая вызывается на закрытие соединения": "Function called on connection closure",
+    "Функция, которая вызывается на отправку сообщения": "Function called on message sending",
+    "Функция, которая вызывается на открытие соединения": "Function called on connection opening",
+    "Массив streams": "Array of streams",
+    "url для websocket": "WebSocket URL",
+    "Колонки канбан доски": "Kanban board columns",
+    "Идентификатор канбан доски": "Kanban board identifier",
+    "Обработчик события окончания перетаскивания карточки или колонки": "Drag-and-drop card or column end event handler",
+    "Метод для добавления css-класса к элементу": "Method for adding a CSS class to an element",
+    "Утилита для создания css-классов по БЭМ": "Utility for creating CSS classes according to BEM",
+    "Метод для соединения нескольких classNames": "Method for combining multiple classNames",
+    "Метод для удаления css-класса у элемента": "Method for removing a CSS class from an element",
+    "Метод, который вызывается после запроса": "Method called after a request",
+    "Вызов метода delete": "Method call to delete",
+    "Вызов метода get": "Method call to get",
+    "Получение токена": "Token retrieval",
+    "Получение конфига для axios": "Get config for axios",
+    "Получение экземпляра axios": "Get axios instance",
+    "Получение url по методу": "Get URL by method",
+    "Метод, который можно вызвать при login": "Method callable on login",
+    "Метод, который можно вызвать при logout": "Method callable on logout",
+    "Вызов метода post": "Method call to post",
+    "Удаление токена": "Token deletion",
+    "Сбросить конфиг": "Reset configuration",
+    "Вызов http-метода": "HTTP method call",
+    "Изменение токена": "Token change",
+    "Изменение csrf токена": "CSRF token change",
+    "Получить модель": "Get model",
+    "Получить тип": "Get type",
+    "Форматирование модели модели": "Model formatting",
+    "Форматирование названия модели": "Model name formatting",
+    "Изменить модель": "Change model",
+    "Изменить тип": "Change type",
+    "Закрытие websocket соединения": "Close WebSocket connection",
+    "Открытие websocket соединения": "Open WebSocket connection",
+    "Подписка на streams": "Subscribe to streams",
+    "Подписка на stream": "Subscribe to a stream",
+    "Отписка от streams": "Unsubscribe from streams",
+    "Отписка от stream": "Unsubscribe from a stream",
+    "Отменить прослушивание метрик": "Cancel metric listening",
+    "Отписаться от метрик": "Unsubscribe from metrics",
+    "Провайдеры": "Providers",
+    "Редьюсеры": "Reducers",
+    "Хранилище": "Store",
+    "Вариация HttpComponent с функционалом обновления токена авторизации": "HttpComponent variation with authorization token refresh functionality",
+    "Компонент для локализации приложения. Поддерживает конфигурацию языка и временной зоны": "Component for application localization. Supports language and time zone configuration",
+    "Компонент для добавления метрик в приложение (например яндекс метрики)": "Component for adding metrics to the application (e.g., Yandex.Metrics)",
+    "Поменять счетчики": "Change counters",
+    "Инициализация компонента": "Component initialization",
+    "Старт": "Start",
+    "Добавление редьюсеров": "Add reducers",
+    "Конфигурация": "Configuration",
+    "Метод для dispatch": "Method for dispatch",
+    "Метод, который вызывается при ошибке": "Method called on error",
+    "Получение состояния": "Get state",
+    "Инициализация": "Initialization",
+    "Инициализация хранилища": "Storage initialization",
+    "Подписка": "Subscription",
+    "Компонент для создания websocket взаимодействия": "Component for creating WebSocket interaction",
+    "Получить значение из хранилища.": "Get value from storage",
+    "Удалить значение из хранилища.": "Remove value from storage",
+    "Установить значение в хранилище.": "Set value in storage",
+    "Включает обработку вложенных данных из items вида [{id: 1, name: 'John', items: [...]}]": "Enables processing of nested data from items like [{id: 1, name: 'John', items: [...]}]",
+    "\nКомпонент `FileField` представляет собой поле формы для загрузки файлов.\nОн использует хук `useFile` для управления состоянием файлов и выполнения операций с файлами, таких как выбор и удаление.\nКомпонент поддерживает различные варианты отображения файлов (список или стена) с помощью перечисления `FilesLayout`.\nНа backendUrl по дефолту файл отправляется в теле запроса в виде бинарного кода.\nЧтобы отправлять файл в виде form-data (например в таком виде принимает файл FileModule в библиотеке steroidsjs/nest),\nнужно передать в `FileField` пропс uploaderConfig, в котором нужно указать поле useFormData: true.\n": "The `FileField` component represents a form field for uploading files.\nIt uses the `useFile` hook to manage the state of files and perform file operations such as selection and deletion.\nThe component supports various file display options (list or wall) using the `FilesLayout` enum.\nBy default, files are sent as binary data in the request body to the backend URL.\nTo send a file as form-data (e.g., as accepted by the FileModule in the steroidsjs/nest library),\nyou need to pass the `uploaderConfig` prop to `FileField` and specify the `useFormData: true` field.\n",
+    "Массив исполнителей, которых можно назначить для выполнения задачи": "Array of performers that can be assigned to a task",
+    "Общий контекст обертка из библиотеки react-beautiful-dnd": "Common context wrapper from the react-beautiful-dnd library",
+    "Компонент обертка для регистрации элемента который можно переместить из библиотеки react-beautiful-dnd": "Wrapper component for registering a draggable item from the react-beautiful-dnd library",
+    "Компонент обертка для инициализации области куда можно переместить элемент из библиотеки react-beautiful-dnd": "Wrapper component for initializing the area where an item can be moved from the react-beautiful-dnd library",
+    "Идентификатор последней созданной задачи, нужен для определения последовательности id для новых задач": "Identifier of the last created task, needed to determine the sequence of IDs for new tasks",
+    "Обработчик события создания карточки": "Card creation event handler",
+    "Обработчик события окончания перетаскивания карточки или колонки\nВ result передается объект с информацией о событии": "Event handler for ending card or column dragging\nThe `result` parameter contains an object with event information",
+    "Обработчик события редактирования карточки": "Card editing event handler",
+    "Массив тегов для задач": "Array of tags for tasks",
+    "\nКомпонент в котором можно расположить различные элементы, например графики, таблицы на доске\n": "\nA component in which various elements can be placed, such as graphics, tables on a board\n",
+    "Заголовок для элемента": "Title for the element",
+    "Кастомная вьюшка для элемента": "Custom view for the element",
+    "Элементы дашборда": "Dashboard elements",
+    "Свойства для модального окна": "Properties for a modal window",
+    "Параметры для групп событий": "Event group parameters",
+    "Свойства для модального окна группы событий": "Properties for a modal window of event groups",
+    "Функция, которая вызовется при смене типа календаря": "Function called when the calendar type changes",
+    "Внутреннее описание события": "Internal event description",
+    "Идентификатор": "Identifier",
+    "События группы": "Event group",
+    "Название группы": "Group name",
+    "Идентификатор чата": "Chat identifier",
+    "Данные о текущем пользователе, нужны для отправки сообщений и определения сообщений пользователя": "Data about the current user, needed for sending messages and determining user messages",
+    "Коллекция сообщений": "Message collection",
+    "Event sending event handler": "Event sending event handler",
+    "\nКомплексный компонент календарь служит для планирования событий и их отображения в календаре.\n\nКомпонент умеет отображать события с помощью недельной сетки с шагом в 1 час,\nа также переключать отображение на сетку по месяцам с шагом 1 день.\nПрисутствует возможность добавлять в календарь события и создавать новые группы событий.\n\n": "The complex `Calendar` component is used for event planning and display in a calendar.\nThe component can display events using a weekly grid with a 1-hour interval\nand can switch to a monthly grid with a 1-day interval.\nIt also allows adding events to the calendar and creating new event groups.",
+    "Этот компонент позволяет создавать в проекте графики разных типов, используя библиотеки nivo, react-vis и другие.\n Под капотом для графиков могут использоваться различные библиотеки в зависимости от предпочтений и потребностей проекта.\n Для работы с nivo графиками, необходимо установить в проекте зависимости @nivo/core и соответствующий пакет графика, например @nivo/line.\n Компонент графика, независимо от выбранной библиотеки, нужно передать в пропс chartComponent.": "This component allows creating various types of charts in the project using libraries like nivo, react-vis, and others.\nDifferent chart libraries can be used under the hood depending on project preferences and needs. To work with nivo charts, you need to install dependencies like @nivo/core and the appropriate chart package, e.g., @nivo/line. Regardless of the chosen library, you need to pass the `chartComponent` prop for the chart component.",
+    "\nКомплексный компонент `Chat` предназначен для коммуникации пользователей с помощью текстовых сообщений.\n": "The complex `Chat` component is designed for user communication through text messages.\n",
+    "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n": "The `Kanban` component allows creating a board for task management. The number of columns is set using the `columns` prop.\nTasks on the board can be created, edited, and moved with visual representation.\nTo use this component, you need to install the `react-beautiful-dnd` dependencies in the project\nand pass the `Droppable`, `Draggable`, and `DragDropContext` components as `droppableComponent`, `draggableComponent`, and `dndContext` props, respectively.",
+    "\nПоле ввода почты. Этот компонент представляет собой поле ввода почты.\n\n": "Email input field. This component represents an email input field.",
+    "\nСоздает список из сгруппированных полей формы.\n": "Creates a list of grouped form fields.",
+    "\nКомпонент `Skeleton` представляет собой заглушку для отображения временных данных\nво время загрузки или ожидания загрузки реальных данных.\n": "The `Skeleton` component serves as a placeholder for displaying temporary data during loading or while waiting for real data.",
+    "\nКомпонент `ControlsColumn` предоставляет колонку с контролами.\n": "The `ControlsColumn` component provides a column with controls.",
+    "\nКомпонент для представления данных коллекции в виде иерархической структуры.\n": "A component for presenting collection data in the form of a hierarchical structure.",
+    "\nС помощью компонента `Link` вы можете легко настраивать цветовую схему элементов ссылок.\n": "With the `Link` component, you can easily customize the color scheme of link elements.",
+    "\nКомпонент навигации позволяет переключаться между группами связанного контента.\n\n": "The navigation component allows switching between groups of related content.",
+    "Кнопки\nМогут служить в качестве настраиваемых контроллов для создания функционала": "Buttons\nCan serve as customizable controls to create functionality",
+    "Фиксированная высота обертки в пикселях": "Fixed wrapper height in pixels",
+    "Чекбоксы\nМогут служить в качестве настраиваемых контроллов для создания функционала": "Checkboxes\nCan serve as customizable controls to create functionality",
+    "Заголовок графика": "Chart title",
     "Срок хранения токена в хранилище в днях": "",
-    "Имя хранилища для токена (local, session, или cookie)": "",
-    "Ключ токена авторизации для локального хранилища": "",
-    "Запрос на обновление токена авторизации": "",
-    "Хендлер для авторизации": "",
-    "Функция, которая вызывается на закрытие соединения": "",
-    "Функция, которая вызывается на отправку сообщения": "",
-    "Функция, которая вызывается на открытие соединения": "",
-    "Массив streams": "",
-    "url для websocket": "",
-    "Колонки канбан доски": "",
-    "Идентификатор канбан доски": "",
-    "Обработчик события окончания перетаскивания карточки или колонки": "",
-    "Метод для добавления css-класса к элементу": "",
-    "Утилита для создания css-классов по БЭМ": "",
-    "Метод для соединения нескольких classNames": "",
-    "Метод для удаления css-класса у элемента": "",
-    "Метод, который вызывается после запроса": "",
-    "Вызов метода delete": "",
-    "Вызов метода get": "",
-    "Получение токена": "",
-    "Получение конфига для axios": "",
-    "Получение экземпляра axios": "",
-    "Получение url по методу": "",
-    "Метод, который можно вызвать при login": "",
-    "Метод, который можно вызвать при logout": "",
-    "Вызов метода post": "",
-    "Удаление токена": "",
-    "Сбросить конфиг": "",
-    "Вызов http-метода": "",
-    "Изменение токена": "",
-    "Изменение csrf токена": "",
-    "Получить модель": "",
-    "Получить тип": "",
-    "Форматирование модели модели": "",
-    "Форматирование названия модели": "",
-    "Изменить модель": "",
-    "Изменить тип": "",
-    "Закрытие websocket соединения": "",
-    "Открытие websocket соединения": "",
-    "Подписка на streams": "",
-    "Подписка на stream": "",
-    "Отписка от streams": "",
-    "Отписка от stream": "",
-    "Отменить прослушивание метрик": "",
-    "Отписаться от метрик": "",
-    "Провайдеры": "",
-    "Редьюсеры": "",
-    "Хранилище": "",
-    "Вариация HttpComponent с функционалом обновления токена авторизации": "",
-    "Компонент для локализации приложения. Поддерживает конфигурацию языка и временной зоны": "",
-    "Компонент для добавления метрик в приложение (например яндекс метрики)": "",
-    "Поменять счетчики": "",
-    "Инициализация компонента": "",
-    "Старт": "",
-    "Добавление редьюсеров": "",
-    "Конфигурация": "",
-    "Метод для dispatch": "",
-    "Метод, который вызывается при ошибке": "",
-    "Получение состояние": "",
-    "Инициализация": "",
-    "Инициализация хранилища": "",
-    "Подписка": "",
-    "Компонент для создания websocket взаимодействия": "",
-    "Получить значение из хранилища.": "",
-    "Удалить значение из хранилища.": "",
-    "Установить значение в хранилище.": "",
-    "Включает обработку вложенных данных из items вида [{id: 1, name: 'John', items: [...]}]": "",
-    "\nКомпонент `FileField` представляет собой поле формы для загрузки файлов.\nОн использует хук `useFile` для управления состоянием файлов и выполнения операций с файлами, таких как выбор и удаление.\nКомпонент поддерживает различные варианты отображения файлов (список или стена) с помощью перечисления `FilesLayout`.\nНа backendUrl по дефолту файл отправляется в теле запроса в виде бинарного кода.\nЧтобы отправлять файл в виде form-data (например в таком виде принимает файл FileModule в библиотеке steroidsjs/nest),\nнужно передать в `FileField` пропс uploaderConfig, в котором нужно указать поле useFormData: true.\n": "",
-    "Массив исполнителей, которых можно назначить для выполнения задачи": "",
-    "Общий контекст обертка из библиотеки react-beautiful-dnd": "",
-    "Компонент обертка для регистрации элемента который можно переместить из библиотеки react-beautiful-dnd": "",
-    "Компонент обертка для инициализации области куда можно переместить элемент из библиотеки react-beautiful-dnd": "",
-    "Идентификатор последней созданной задачи, нужен для определения последовательности id для новых задач": "",
-    "Обработчик события создания карточки": "",
-    "Обработчик события окончания перетаскивания карточки или колонки\nВ result передается объект с информацией о событии": "",
-    "Обработчик события редактирования карточки": "",
-    "Массив тегов для задач": "",
-    "\nКомпонент в котором можно расположить различные элементы, например графики, таблицы на доске\n": "",
-    "Заголовок для элемента": "",
-    "Кастомная вьюшка для элемента": "",
-    "Элементы дашборда": "",
-    "Свойства для модального окна": "",
-    "Параметры для групп событий": "",
     "Свойства для модалного окна группы событий": "",
-    "Функция, которая вызовется при смене типа календаря": "",
     "Внутреннее описания события": "",
-    "Идентификатор": "",
-    "События группы": "",
-    "Название группы": "",
-    "Идентификатор чата": "",
-    "Данные о текущем пользователе, нужны для отправки сообщений и определения сообщений пользователя": "",
-    "Коллекция сообщений": "",
-    "Обработчик события отправки сообщения": "",
-    "\nКомплексный компонент календарь служит для планирования событий и их отображения в календаре.\n\nКомпонент умеет отображать события с помощью недельной сетки с шагом в 1 час,\nа также переключать отображение на сетку по месяцам с шагом 1 день.\nПрисутствует возможность добавлять в календарь события и создавать новые группы событий.\n\n": "",
-    "Этот компонент позволяет создавать в проекте графики разных типов, используя библиотеки nivo, react-vis и другие.\n Под капотом для графиков могут использоваться различные библиотеки в зависимости от предпочтений и потребностей проекта.\n Для работы с nivo графиками, необходимо установить в проекте зависимости @nivo/core и соответствующий пакет графика, например @nivo/line.\n Компонент графика, независимо от выбранной библиотеки, нужно передать в пропс chartComponent.": "",
-    "\nКомплексный компонент `Chat` предназначен для коммуникации пользователей с помощью текстовых сообщений.\n": "",
-    "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n": "",
-    "\nПоле ввода почты. Этот компонент представляет собой поле ввода почты.\n\n": "",
-    "\nСоздает список из сгруппированных полей формы.\n": "",
-    "\nКомпонент `Skeleton` представляет собой заглушку для отображения временных данных\nво время загрузки или ожидания загрузки реальных данных.\n": "",
-    "\nКомпонент `ControlsColumn` предоставляет колонку с контролами.\n": "",
-    "\nКомпонент для представления данных коллекции в виде иерархической структуры.\n": "",
-    "\nС помощью компонента `Link` вы можете легко настраивать цветовую схему элементов ссылок.\n": "",
-    "\nКомпонент навигации позволяет переключаться между группами связанного контента.\n\n": "",
     "Кнопки\nМогут служить в качестве настаиваемых контроллов для создания функционала": "",
-    "Фиксированная высота обертки в пикселях": "",
     "Чекбоксы\nМогут служить в качестве настаиваемых контроллов для создания функционала": "",
-    "Заголовок графика": ""
+    "Иконка, которая отобразится слева от заголовка": "",
+    "Метод, который можно вызвать при login": "",
+    "Метод, который можно вызвать при logout": "",
+    "Получение состояние": ""
 }

package/hooks/useFile.d.ts

@@ -48,4 +48,5 @@ export interface IFileOutput {
     onRemove?: any;
     onAdd?: any;
 }
+export declare function generateBackendUrl(props: any): any;
 export default function useFile(props: IFileInput): IFileOutput;

package/hooks/useFile.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+exports.generateBackendUrl = void 0;
 var react_1 = require("react");
 var react_use_1 = require("react-use");
 var fileup_core_1 = __importDefault(require("fileup-core"));
@@ -42,6 +43,7 @@ function generateBackendUrl(props) {
         imagesExactSize: props.imagesExactSize
     });
 }
+exports.generateBackendUrl = generateBackendUrl;
 function useFile(props) {
     var http = (0, index_1.useComponents)().http;
     http.getAccessToken(); // TODO Run promise..

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.103",
+ "version": "3.0.0-beta.104",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {
@@ -90,6 +90,7 @@
   "jest-enzyme": "^7.1.2",
   "rc-slider": "9.7.4",
   "ts-jest": "^26.5.1",
+  "typedoc": "^0.21.0",
   "typescript": "^4.9.5"
  }
 }

package/ui/content/DropDown/DropDown.d.ts

@@ -36,7 +36,7 @@ export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioning
     /**
      * Рассчет абсолютной позиции
      */
-    calculatePosition: (componentSize: ClientRect) => void;
+    calculatePosition?: (dropDownDimensions: Record<string, any>, arrowDimensions: Record<string, any>) => void;
     /**
      * Ссылка на view
      */

package/ui/content/DropDown/DropDown.js

@@ -45,7 +45,7 @@ var TooltipPortalInner_1 = __importDefault(require("../../layout/Tooltip/Tooltip
 var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
 function DropDown(props) {
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, useAbsolutePositioning_1["default"])(props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, style = _a.style;
+    var _a = (0, useAbsolutePositioning_1["default"])(props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, arrowPosition = _a.arrowPosition, style = _a.style;
     var childRef = (0, react_1.useRef)(null);
     var isManualControl = props.visible !== undefined;
     // Outside click -> close
@@ -70,8 +70,8 @@ function DropDown(props) {
     }, [isComponentExist, isComponentVisible, onHide, props.closeMode]);
     (0, react_use_1.useEvent)('mousedown', onAnyClick);
     (0, react_use_1.useEvent)('touchstart', onAnyClick);
-    var calculatePosition = (0, react_1.useCallback)(function (componentSize) {
-        calculateAbsolutePosition(position, childRef.current, componentSize);
+    var calculatePosition = (0, react_1.useCallback)(function (componentSize, arrowSize) {
+        calculateAbsolutePosition(position, childRef.current, componentSize, arrowSize);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var DropDownView = components.ui.getView(props.view || 'content.DropDownView');
@@ -93,7 +93,7 @@ function DropDown(props) {
         isComponentExist && (
         // TODO Change Portal to global
         React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(DropDownView, __assign({}, props, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide }))))));
+            React.createElement(DropDownView, __assign({}, props, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide }))))));
 }
 DropDown.defaultProps = {
     autoPositioning: true,

package/ui/form/Form/Form.js

@@ -129,7 +129,7 @@ function Form(props) {
     }
     // Init data provider
     var provider = props.useRedux ? form_1.providers.redux : form_1.providers.reducer;
-    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isInvalid = _b.isInvalid, isSubmitting = _b.isSubmitting, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
+    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isInvalid = _b.isInvalid, isSubmitting = _b.isSubmitting, errors = _b.errors, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
     // Sync with address bar
     (0, react_use_1.useUpdateEffect)(function () {
         updateQuery(values);
@@ -147,6 +147,9 @@ function Form(props) {
             dispatch((0, form_2.formDestroy)(props.formId));
         }
     });
+    // Clear Errors
+    var prevValues = (0, react_use_1.usePrevious)(values);
+    (0, react_use_1.useUpdateEffect)(function () { return (0, form_1.clearErrors)(values, prevValues, errors, setErrors); }, [errors, prevValues, setErrors, values]);
     // OnChange handler
     (0, react_use_1.useUpdateEffect)(function () {
         if (props.onChange) {

package/ui/form/NumberField/NumberField.js

@@ -10,12 +10,35 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
 /* eslint-disable max-len */
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var useInputTypeNumber_1 = __importDefault(require("./hooks/useInputTypeNumber"));
@@ -23,6 +46,7 @@ var DEFAULT_STEP = 1;
 function NumberField(props) {
     var components = (0, hooks_1.useComponents)();
     var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var step = react_1["default"].useMemo(function () { var _a; return (_a = props.step) !== null && _a !== void 0 ? _a : DEFAULT_STEP; }, [props.step]);
     var onInputChange = (0, useInputTypeNumber_1["default"])(currentInputRef, {
         max: props.max,
         min: props.min,
@@ -30,15 +54,18 @@ function NumberField(props) {
     }, onChange).onInputChange;
     var onStep = (0, react_1.useCallback)(function (isIncrement) {
         var _a;
-        var step = props.step || DEFAULT_STEP;
         onChange(null, String(Number((_a = currentInputRef === null || currentInputRef === void 0 ? void 0 : currentInputRef.current) === null || _a === void 0 ? void 0 : _a.value) + (isIncrement ? step : -step)));
-    }, [currentInputRef, onChange, props.step]);
+    }, [currentInputRef, onChange, step]);
     var onStepUp = (0, react_1.useCallback)(function () {
-        onStep(true);
-    }, [onStep]);
+        if (!(Number(currentInputRef.current.value) + step > props.max)) {
+            onStep(true);
+        }
+    }, [currentInputRef, onStep, props.max, step]);
     var onStepDown = (0, react_1.useCallback)(function () {
-        onStep(false);
-    }, [onStep]);
+        if (!(Number(currentInputRef.current.value) - step < props.min)) {
+            onStep(false);
+        }
+    }, [currentInputRef, onStep, props.min, step]);
     var onKeyDown = (0, react_1.useCallback)(function (event) {
         if (event.key === 'ArrowUp') {
             onStepUp();

package/ui/nav/Router/Router.js

@@ -175,6 +175,9 @@ function Router(props) {
         });
         var result = renderComponent(routeItem, activePath, __assign(__assign({}, routeProps), { children: children }));
         if (!result) {
+            if (children) {
+                return children;
+            }
             // eslint-disable-next-line no-console
             console.error('Not found component for route:', routeItem);
         }

package/utils/calculateComponentAbsolutePosition.js

@@ -1,6 +1,19 @@
 "use strict";
 exports.__esModule = true;
+/* eslint-disable implicit-arrow-linebreak */
 var useAbsolutePositioning_1 = require("../hooks/useAbsolutePositioning");
+var isComponentBeyondTop = function (parentDimensions, componentSize, gap) {
+    return (parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + gap);
+};
+var isComponentBeyondLeft = function (parentDimensions, componentSize, gap) {
+    return parentDimensions.left <= Math.round(componentSize.width + gap);
+};
+var isComponentBeyondRight = function (parentDimensions, componentSize, gap) {
+    return document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + gap);
+};
+var isComponentBeyondBottom = function (parentDimensions, componentSize, gap) {
+    return (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)) <= Math.round(componentSize.height + gap);
+};
 function calculateComponentAbsolutePosition(gap, position, parentRef, componentSize, arrowSize, hasAutoPositioning) {
     if (arrowSize === void 0) { arrowSize = null; }
     if (hasAutoPositioning === void 0) { hasAutoPositioning = true; }
@@ -17,10 +30,9 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
         case useAbsolutePositioning_1.Position.TOP:
         case useAbsolutePositioning_1.Position.TOP_LEFT:
         case useAbsolutePositioning_1.Position.TOP_RIGHT:
-            // Проверка - выходит ли tooltip за верхний край страницы?
+            // Проверка - выходит ли component за верхний край страницы?
             // Если да - меняем позицию на bottom
-            if (hasAutoPositioning
-                && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + gap))) {
+            if (hasAutoPositioning && isComponentBeyondTop(parentDimensions, componentSize, gap)) {
                 style.top = parentDimensions.top + parentDimensions.height;
                 position = position.replace(useAbsolutePositioning_1.Position.TOP, useAbsolutePositioning_1.Position.BOTTOM);
             }
@@ -31,11 +43,9 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
         case useAbsolutePositioning_1.Position.BOTTOM:
         case useAbsolutePositioning_1.Position.BOTTOM_LEFT:
         case useAbsolutePositioning_1.Position.BOTTOM_RIGHT:
-            /// Проверка - выходит ли tooltip за нижний край страницы?
+            /// Проверка - выходит ли component за нижний край страницы?
             // Если да - меняем позицию на top
-            if (hasAutoPositioning
-                && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))
-                    <= Math.round(componentSize.height + gap))) {
+            if (hasAutoPositioning && isComponentBeyondBottom(parentDimensions, componentSize, gap)) {
                 style.top = parentDimensions.top - componentSize.height;
                 position = position.replace(useAbsolutePositioning_1.Position.BOTTOM, useAbsolutePositioning_1.Position.TOP);
             }
@@ -46,9 +56,9 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
         case useAbsolutePositioning_1.Position.LEFT:
         case useAbsolutePositioning_1.Position.LEFT_TOP:
         case useAbsolutePositioning_1.Position.LEFT_BOTTOM:
-            // Проверка - выходит ли tooltip за левый край страницы?
+            // Проверка - выходит ли component за левый край страницы?
             // Если да - меняем позицию на right
-            if (hasAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + gap))) {
+            if (hasAutoPositioning && isComponentBeyondLeft(parentDimensions, componentSize, gap)) {
                 style.left = parentDimensions.right;
                 position = position.replace(useAbsolutePositioning_1.Position.LEFT, useAbsolutePositioning_1.Position.RIGHT);
             }
@@ -59,10 +69,9 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
         case useAbsolutePositioning_1.Position.RIGHT:
         case useAbsolutePositioning_1.Position.RIGHT_TOP:
         case useAbsolutePositioning_1.Position.RIGHT_BOTTOM:
-            // Проверка - выходит ли tooltip за правый край страницы?
+            // Проверка - выходит ли component за правый край страницы?
             // Если да - меняем позицию на left
-            if (hasAutoPositioning
-                && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + gap))) {
+            if (hasAutoPositioning && isComponentBeyondRight(parentDimensions, componentSize, gap)) {
                 style.left = parentDimensions.left - componentSize.width;
                 position = position.replace(useAbsolutePositioning_1.Position.RIGHT, useAbsolutePositioning_1.Position.LEFT);
             }
@@ -72,6 +81,31 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             break;
     }
     // eslint-disable-next-line default-case
+    switch (position) {
+        case useAbsolutePositioning_1.Position.LEFT:
+        case useAbsolutePositioning_1.Position.LEFT_TOP:
+        case useAbsolutePositioning_1.Position.LEFT_BOTTOM:
+            // Проверка - выходит ли component после изменения позиции на left за левый край страницы?
+            // Если да - меняем позицию на bottom
+            if (hasAutoPositioning && isComponentBeyondLeft(parentDimensions, componentSize, gap)) {
+                style.left = null;
+                style.top = parentDimensions.top + parentDimensions.height;
+                position = useAbsolutePositioning_1.Position.BOTTOM;
+            }
+            break;
+        case useAbsolutePositioning_1.Position.RIGHT:
+        case useAbsolutePositioning_1.Position.RIGHT_TOP:
+        case useAbsolutePositioning_1.Position.RIGHT_BOTTOM:
+            // Проверка - выходит ли component после изменения позиции на right за правый край страницы?
+            // Если да - меняем позицию на bottom
+            if (hasAutoPositioning && isComponentBeyondRight(parentDimensions, componentSize, gap)) {
+                style.left = null;
+                style.top = parentDimensions.top + parentDimensions.height;
+                position = useAbsolutePositioning_1.Position.BOTTOM;
+            }
+            break;
+    }
+    // eslint-disable-next-line default-case
     switch (position) {
         case useAbsolutePositioning_1.Position.TOP:
         case useAbsolutePositioning_1.Position.BOTTOM:
@@ -80,7 +114,7 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             break;
         case useAbsolutePositioning_1.Position.TOP_LEFT:
         case useAbsolutePositioning_1.Position.BOTTOM_LEFT:
-            // Ширина tooltip больше родителя - стрелка на середину родителя
+            // Ширина component больше родителя - стрелка на середину родителя
             style.left = parentDimensions.left;
             if (arrowSize && (parentDimensions.width < componentSize.width)) {
                 arrowPosition = { left: parentDimensions.width / 2 };
@@ -88,7 +122,7 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             break;
         case useAbsolutePositioning_1.Position.TOP_RIGHT:
         case useAbsolutePositioning_1.Position.BOTTOM_RIGHT:
-            // Ширина tooltip больше родителя - стрелка на середину родителя
+            // Ширина component больше родителя - стрелка на середину родителя
             style.left = parentDimensions.right - componentSize.width;
             if (arrowSize && (parentDimensions.width < componentSize.width)) {
                 arrowPosition = {
@@ -118,13 +152,13 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             }
             break;
     }
-    // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
+    //Проверка - при позиционировании top/bottom component не выходит за пределы страницы по горизонтали
     if (position.includes('top') || position.includes('bottom')) {
         if (!position.includes('Left')
-            && (style.left < 0 || parentDimensions.left <= Math.round((componentSize.width - parentDimensions.width) + gap))) {
+            && (parentDimensions.left <= Math.round((componentSize.width - parentDimensions.width) + gap))) {
             style.right = null;
             position = position.replace('Right', 'Left');
-            // Если ширина tooltip больше ширины родителя - выставить стрелку на середину родителя
+            // Если ширина component больше ширины родителя - выставить стрелку на середину родителя
             if (parentDimensions.left < componentSize.width) {
                 arrowPosition = { left: parentDimensions.width / 2 };
             }
@@ -144,15 +178,17 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             style.right = document.body.clientWidth - parentDimensions.right;
         }
     }
-    // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
+    // Проверка - при позиционировании left/right component не выходит за пределы страницы по вертикали
     if (position.includes('left') || position.includes('right')) {
         if (!position.includes('Top')
             && parentDimensions.top - window.scrollY <= Math.round((componentSize.height - parentDimensions.height) + gap)) {
             position = position.replace('Bottom', 'Top');
-            if (parentDimensions.height < componentSize.height) {
-                arrowPosition = { top: parentDimensions.height / 2 };
-            }
             style.top = parentDimensions.top;
+            if (arrowSize && parentDimensions.height < componentSize.height) {
+                arrowPosition = {
+                    top: parentDimensions.height / 2
+                };
+            }
         }
         else if (!position.includes('Bottom')
             && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)

package/utils/form.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare const setInWithPath: (state: any, value: any, path: string[], pathIndex?: number) => any;
 export declare const cleanEmptyObject: (object: any) => any;
+export declare const clearErrors: (values: any, prevValues: any, errors: any, setErrors: any) => void;
 export declare const providers: {
     redux: {
         useForm: (formId: any, initialValues: any) => any;