@steroidsjs/core 3.0.4 → 3.0.6

package/components/MetaComponent.d.ts

@@ -157,6 +157,7 @@ export default class MetaComponent implements IMetaComponent {
         time: {
             jsType: string;
             field: string;
+            formatter: string;
         };
     };
 }

package/components/MetaComponent.js

@@ -166,7 +166,8 @@ var MetaComponent = /** @class */ (function () {
             },
             time: {
                 jsType: 'string',
-                field: 'TimeField'
+                field: 'TimeField',
+                formatter: 'TimeFormatter'
             }
         };
     };

package/docs-autogen-result.json

@@ -4581,6 +4581,14 @@
                     "type": "number",
                     "example": "1"
                 },
+                {
+                    "name": "clientStorageId",
+                    "decorators": [],
+                    "description": "Идентификатор (ключ) для сохранения в LocalStorage коллекции.",
+                    "required": false,
+                    "type": "string",
+                    "example": "'exampleTree'"
+                },
                 {
                     "name": "currentPage",
                     "decorators": [],
@@ -4629,6 +4637,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "selectedItemId",
                     "decorators": [],
@@ -15312,7 +15328,7 @@
                 "'items'>",
                 "IUiComponent",
                 "Pick<ITreeProps",
-                "'levelPadding' | 'alwaysOpened' | 'customIcon'>"
+                "'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage'>"
             ],
             "properties": [
                 {
@@ -15423,6 +15439,24 @@
                     "example": "items",
                     "defaultValue": null
                 },
+                {
+                    "name": "hasIconExpandOnly",
+                    "decorators": [],
+                    "description": "Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "false",
+                    "defaultValue": null
+                },
+                {
+                    "name": "hasOnlyLeafCheckboxes",
+                    "decorators": [],
+                    "description": "Отображать чекбоксы только на узлах, не имеющих вложенных элементов",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "hint",
                     "decorators": [],
@@ -15567,6 +15601,15 @@
                     "example": "true",
                     "defaultValue": null
                 },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": null
+                },
                 {
                     "name": "selectFirst",
                     "decorators": [],
@@ -15662,7 +15705,7 @@
             "extends": [
                 "IFieldWrapperOutputProps",
                 "Pick<ITreeProps",
-                "'levelPadding' | 'customIcon'>"
+                "'levelPadding' | 'hasIconExpandOnly' | 'customIcon'>"
             ],
             "properties": [
                 {
@@ -15697,6 +15740,22 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "hasIconExpandOnly",
+                    "decorators": [],
+                    "description": "Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "false"
+                },
+                {
+                    "name": "hasOnlyLeafCheckboxes",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "input",
                     "decorators": [],
@@ -31130,6 +31189,45 @@
             ],
             "methods": []
         },
+        "ITimeFormatterProps": {
+            "name": "ITimeFormatterProps",
+            "moduleName": "ui/format/TimeFormatter/TimeFormatter",
+            "title": "TimeFormatter",
+            "description": "\nКомпонент TimeFormatter предназначен для форматирования времени с использованием заданного формата.\nОн позволяет кастомизировать отображение времени, используя переданный view React компонент.\n",
+            "tags": {},
+            "defaultProps": null,
+            "extends": [],
+            "properties": [
+                {
+                    "name": "format",
+                    "decorators": [],
+                    "description": "Формат времени",
+                    "required": false,
+                    "type": "string",
+                    "example": "HH:mm",
+                    "defaultValue": null
+                },
+                {
+                    "name": "value",
+                    "decorators": [],
+                    "description": "Время",
+                    "required": false,
+                    "type": "string",
+                    "example": "16:15",
+                    "defaultValue": null
+                },
+                {
+                    "name": "view",
+                    "decorators": [],
+                    "description": "Переопределение view React компонента для кастомизации отображения колонки",
+                    "required": false,
+                    "type": "React.ReactNode | {}",
+                    "example": "MyCustomView",
+                    "defaultValue": null
+                }
+            ],
+            "methods": []
+        },
         "IHeaderProps": {
             "name": "IHeaderProps",
             "moduleName": "ui/layout/Header/Header",
@@ -36511,7 +36609,7 @@
             "extends": [
                 "IColumnViewProps",
                 "Pick<ITreeTableProps",
-                "'levelPadding' | 'customIcon'>"
+                "'levelPadding' | 'customIcon' >"
             ],
             "properties": [
                 {
@@ -36717,13 +36815,14 @@
             "tags": {},
             "defaultProps": {
                 "alwaysOpened": "false",
-                "levelPadding": "32"
+                "levelPadding": "32",
+                "saveInClientStorage": "false"
             },
             "extends": [
                 "Omit<IGridProps",
                 "'items'>",
                 "Pick<ITreeProps",
-                "'alwaysOpened' | 'levelPadding' | 'customIcon'>"
+                "'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage'>"
             ],
             "properties": [
                 {
@@ -36761,6 +36860,15 @@
                     "type": "number",
                     "example": "32",
                     "defaultValue": "32"
+                },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": "false"
                 }
             ],
             "methods": []
@@ -38776,6 +38884,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "clientStorageId",
+                    "decorators": [],
+                    "description": "Идентификатор (ключ) для сохранения в LocalStorage коллекции.",
+                    "required": false,
+                    "type": "string",
+                    "example": "'exampleTree'"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -38856,6 +38972,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "selectedItemId",
                     "decorators": [],
@@ -38879,6 +39003,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "withoutPointerOnLabel",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
                 }
             ],
             "methods": [
@@ -38942,6 +39074,7 @@
                 "itemsKey": "'items'",
                 "level": "0",
                 "levelPadding": "32",
+                "saveInClientStorage": "false",
                 "useSameSelectedItemId": "true"
             },
             "extends": [
@@ -38985,6 +39118,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "clientStorageId",
+                    "decorators": [],
+                    "description": "Идентификатор (ключ) для сохранения в LocalStorage коллекции.",
+                    "required": false,
+                    "type": "string",
+                    "example": "'exampleTree'",
+                    "defaultValue": null
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -39066,6 +39208,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": "false"
+                },
                 {
                     "name": "selectedItemId",
                     "decorators": [],
@@ -39184,6 +39335,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "clientStorageId",
+                    "decorators": [],
+                    "description": "Идентификатор (ключ) для сохранения в LocalStorage коллекции.",
+                    "required": false,
+                    "type": "string",
+                    "example": "'exampleTree'"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -39256,6 +39415,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "selectedItemId",
                     "decorators": [],
@@ -43098,6 +43265,13 @@
             "description": "",
             "tags": {}
         },
+        "ui/format/TimeFormatter/TimeFormatter": {
+            "name": "default",
+            "moduleName": "ui/format/TimeFormatter/TimeFormatter",
+            "title": "",
+            "description": "",
+            "tags": {}
+        },
         "ui/layout/Header/Header": {
             "name": "default",
             "moduleName": "ui/layout/Header/Header",

package/en.json

@@ -955,23 +955,17 @@
     "Будет ли отображён item?": "",
     "Устанавливать ли фокус и показывать панель времени сразу после рендера страницы": "",
     "Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку": "",
-    "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nИмпортированные компоненты нужно передать в проп `createTaskEditorConfig`,\nв поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.\n": "",
-    "Компонент для создания HTML-разметки, использующий WYSIWYG редактор.\n\nДля использования WYSIWYG редактора, необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nКомпонент `CKEditor` нужно передать в проп `htmlComponent`, а конструктор `ClassicEditor` в проп `editorConstructor`.\n\nПри передаче `HtmlField` с бэкенда, необходимо переопределить `view` компонента, указав локальный.\nВ локальном компоненте добавить вместо пропсов `htmlComponent` и `editorConstructor` импорты `CKEditor` и `ClassicEditor` соотвественно.\n": "",
     "\nКомпонент для создания пошаговой формы. Предоставляет управление и синхронизацию состояния формы,\nа также список шагов формы для удобной навигации.\nПоля для шагов можно передавать как в виде компонентов, так и в виде объекта с названием поля.\nПозволяет выполнять отправку данных формы на сервер с возможностью валидации и перехода к неверно заполненным полям.\n\n": "",
+    "\nКомпонент TimeFormatter предназначен для форматирования времени с использованием заданного формата.\nОн позволяет кастомизировать отображение времени, используя переданный view React компонент.\n": "",
     "При повторном нажатии на выбранный элемент из дерева, он продолжит отображаться как активный.": "",
     "Дополнительные свойства, которые передаются во view компонента": "",
     "Пропсы для инпута загрузки файлов": "",
     "Переопределение view React компонента для кастомизации отображения элемента инпута": "",
     "Кастомный placeholder для инпута": "",
-    "Компоненты для подключения wysiwyg редактора": "",
     "Если true, то location.pathname будет совпадать с теми путями, которые содержат слеш в конце.\nНапример, если указать путь '/catalog/', тогда совпадение будет с '/catalog/' и '/catalog/chapter', но не '/catalog'.": "",
     "Кастомная иконка, заменяющая иконку раскрытия по умолчанию": "",
     "Опции маски для полей": "",
-    "Размер компонента и вложенных полей": "",
     "Дополнительные кнопки": "",
-    "Параметры для кнопки отправки формы": "",
-    "Конструктор редактора 'ckeditor5-react' из библиотеки @steroidsjs/ckeditor5/packages/ckeditor5-build-classic\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
-    "Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
     "Свойства для Form": "",
     "Свойства для кнопки продолжить/отправить": "",
     "Свойства для кнопки возврата": "",
@@ -979,7 +973,19 @@
     "Ориентация списка шагов формы": "",
     "Коллекция полей и аттрибутов для каждого шага формы. Можно передавать как компонент, так и объект с полями.\nГлавное, чтобы внутри шага использовался один из способов.": "",
     "Свойства для Steps": "",
-    "CSS-класс для элемента навигации.": "",
+    "Формат времени": "",
+    "Время": "",
     "Флаг, который позволяет использовать вложенные роуты c указанием вложенного пути": "",
-    "Скрыть иконку c лева от элемента": ""
+    "Скрыть иконку c лева от элемента": "",
+    "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nИмпортированные компоненты нужно передать в проп `createTaskEditorConfig`,\nв поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.\n": "",
+    "Компонент для создания HTML-разметки, использующий WYSIWYG редактор.\n\nДля использования WYSIWYG редактора, необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nКомпонент `CKEditor` нужно передать в проп `htmlComponent`, а конструктор `ClassicEditor` в проп `editorConstructor`.\n\nПри передаче `HtmlField` с бэкенда, необходимо переопределить `view` компонента, указав локальный.\nВ локальном компоненте добавить вместо пропсов `htmlComponent` и `editorConstructor` импорты `CKEditor` и `ClassicEditor` соотвественно.\n": "",
+    "Идентификатор (ключ) для сохранения в LocalStorage коллекции.": "",
+    "Сохранение в localStorage уровней вложенности.": "",
+    "Компоненты для подключения wysiwyg редактора": "",
+    "Отображать чекбоксы только на узлах, не имеющих вложенных элементов": "",
+    "Размер компонента и вложенных полей": "",
+    "Параметры для кнопки отправки формы": "",
+    "Конструктор редактора 'ckeditor5-react' из библиотеки @steroidsjs/ckeditor5/packages/ckeditor5-build-classic\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
+    "Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
+    "CSS-класс для элемента навигации.": ""
 }

package/hooks/useTree.d.ts

@@ -100,5 +100,15 @@ export interface ITreeConfig {
      * @example true
     */
     useSameSelectedItemId?: boolean;
+    /**
+     * Сохранение в localStorage уровней вложенности.
+     * @example true
+    */
+    saveInClientStorage?: boolean;
+    /**
+     * Идентификатор (ключ) для сохранения в LocalStorage коллекции.
+     * @example 'exampleTree'
+     */
+    clientStorageId?: string;
 }
 export default function useTree(config: ITreeConfig): ITreeOutput;

package/hooks/useTree.js

@@ -22,12 +22,15 @@ var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var isNil_1 = __importDefault(require("lodash-es/isNil"));
 var keys_1 = __importDefault(require("lodash-es/keys"));
+var react_use_1 = require("react-use");
+var useComponents_1 = __importDefault(require("./useComponents"));
 var useSelector_1 = __importDefault(require("./useSelector"));
 var router_1 = require("../reducers/router");
 var INITIAL_CURRENT_LEVEL = 0;
 var DOT_SEPARATOR = '.';
 var EMPTY_PARENT_ID = '';
 var FIRST_LEVEL_PARENT_ID = '0';
+var CLIENT_STORAGE_KEY = '_tree';
 var defaultProps = {
     itemsKey: 'items',
     autoOpenLevels: 0
@@ -96,6 +99,7 @@ function useTree(config) {
     var primaryKey = config.itemsKey || defaultProps.itemsKey;
     var _a = (0, react_1.useState)(null), selectedUniqueId = _a[0], setSelectedUniqueId = _a[1];
     var _b = (0, react_1.useState)({}), expandedItems = _b[0], setExpandedItems = _b[1];
+    var clientStorage = (0, useComponents_1["default"])().clientStorage;
     //Redux connection
     var _c = (0, useSelector_1["default"])(function (state) { return ({
         routes: (0, isString_1["default"])(config.items) ? (0, router_1.getNavItems)(state, config.items) : null,
@@ -116,11 +120,32 @@ function useTree(config) {
     }, [config.items, config.routerParams, routes]);
     // Initial expanded items
     (0, react_1.useEffect)(function () {
-        // TODO add clientStorage
         setExpandedItems(getAutoExpandedItems(items, selectedItemId, primaryKey, config.autoOpenLevels));
         var selectedItem = findChildById(items, selectedItemId, primaryKey);
         setSelectedUniqueId(selectedItem ? selectedItem.uniqueId : null);
     }, [items]);
+    var localTree = JSON.parse(clientStorage.get(CLIENT_STORAGE_KEY)) || {};
+    var saveInClientStorage = function () {
+        if (config.saveInClientStorage) {
+            localTree[config.clientStorageId] = expandedItems;
+            clientStorage.set(CLIENT_STORAGE_KEY, JSON.stringify(localTree));
+        }
+    };
+    (0, react_use_1.useMount)(function () {
+        if (config.saveInClientStorage) {
+            var treeData = localTree[config.clientStorageId];
+            if (treeData) {
+                setExpandedItems(treeData);
+            }
+        }
+    });
+    (0, react_use_1.useUnmount)(function () {
+        saveInClientStorage();
+    });
+    (0, react_use_1.useBeforeUnload)(function () {
+        saveInClientStorage();
+        return true;
+    });
     var onExpand = (0, react_1.useCallback)(function (e, uniqueId, item) {
         var _a;
         e.preventDefault();

package/package.json

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

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

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -41,14 +41,16 @@ exports.getNestedItemsIds = void 0;
 var react_1 = __importStar(require("react"));
 var react_use_1 = require("react-use");
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
-var getNestedItemsIds = function (item, groupAttribute) {
+var getNestedItemsIds = function (item, groupAttribute, hasOnlyLeafCheckboxes) {
+    if (hasOnlyLeafCheckboxes === void 0) { hasOnlyLeafCheckboxes = false; }
     if (item.disabled) {
         return [];
     }
     var _a = item, _b = groupAttribute, _c = _a[_b], nestedItems = _c === void 0 ? [] : _c;
-    var result = [item.id];
+    var result = hasOnlyLeafCheckboxes ? [] : [item.id];
     if (groupAttribute && (0, isArray_1["default"])(nestedItems)) {
         nestedItems.reduce(function (acc, nestedItem) {
             if ((0, isArray_1["default"])(nestedItem[groupAttribute])) {
@@ -68,7 +70,9 @@ function CheckboxTreeField(props) {
     var inputSelectedIds = (0, react_1.useMemo)(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
     // Data Provider
     var items = (0, hooks_1.useDataProvider)({
-        items: props.items
+        items: props.items,
+        initialSelectedIds: inputSelectedIds,
+        dataProvider: props.dataProvider
     }).items;
     // Tree items
     var treeItems = (0, hooks_1.useTree)({
@@ -86,23 +90,26 @@ function CheckboxTreeField(props) {
     }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
     var onItemSelect = (0, react_1.useCallback)(function (checkbox) {
         if (checkbox.hasItems) {
-            var selectedItemIds = (0, exports.getNestedItemsIds)(checkbox, props.primaryKey);
+            var selectedItemIds = (0, exports.getNestedItemsIds)(checkbox, props.primaryKey, props.hasOnlyLeafCheckboxes);
             setSelectedIds(selectedItemIds);
         }
-        else {
+        else if (checkbox.id && !checkbox.hasItems) {
             setSelectedIds(checkbox.id);
         }
-    }, [props.primaryKey, setSelectedIds]);
-    // Sync with form
-    (0, react_1.useEffect)(function () {
-        props.input.onChange.call(null, selectedIds);
-        if (props.onChange) {
-            props.onChange(selectedIds);
-        }
-    }, [props, props.input.onChange, selectedIds]);
+    }, [props.hasOnlyLeafCheckboxes, props.primaryKey, setSelectedIds]);
     var onReset = (0, react_1.useCallback)(function () {
         setSelectedIds([]);
     }, [setSelectedIds]);
+    // Sync with form
+    var prevSelectedIds = (0, react_use_1.usePrevious)(selectedIds);
+    (0, react_1.useEffect)(function () {
+        if (!(0, isEqual_1["default"])(prevSelectedIds || [], selectedIds)) {
+            props.input.onChange.call(null, selectedIds);
+            if (props.onChange) {
+                props.onChange.call(null, selectedIds);
+            }
+        }
+    }, [prevSelectedIds, props.input.onChange, props.multiple, props.onChange, selectedIds]);
     // Reset selected ids on form reset
     var prevInputValue = (0, react_use_1.usePrevious)(props.input.value);
     (0, react_use_1.useUpdateEffect)(function () {
@@ -119,8 +126,10 @@ function CheckboxTreeField(props) {
         selectedIds: selectedIds,
         renderCheckbox: renderCheckbox,
         size: props.size,
-        levelPadding: props.levelPadding
-    }); }, [onItemSelect, props.levelPadding, props.size, renderCheckbox, selectedIds, treeItems]);
+        levelPadding: props.levelPadding,
+        hasOnlyLeafCheckboxes: props.hasOnlyLeafCheckboxes,
+        hasIconExpandOnly: props.hasIconExpandOnly
+    }); }, [treeItems, onItemSelect, selectedIds, renderCheckbox, props.size, props.levelPadding, props.hasOnlyLeafCheckboxes, props.hasIconExpandOnly]);
     return components.ui.renderView(props.view || 'form.CheckboxTreeFieldView', viewProps);
 }
 CheckboxTreeField.defaultProps = {
@@ -129,6 +138,9 @@ CheckboxTreeField.defaultProps = {
     className: '',
     levelPadding: 32,
     alwaysOpened: false,
-    primaryKey: 'items'
+    primaryKey: 'items',
+    hasOnlyLeafCheckboxes: false,
+    hasIconExpandOnly: true,
+    saveInClientStorage: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxTreeField', CheckboxTreeField);

package/ui/form/NumberField/NumberField.js

@@ -50,7 +50,8 @@ function NumberField(props) {
     var onInputChange = (0, useInputTypeNumber_1["default"])(currentInputRef, {
         max: props.max,
         min: props.min,
-        value: props.input.value
+        value: props.input.value,
+        required: props.required
     }, onChange).onInputChange;
     var onStep = (0, react_1.useCallback)(function (isIncrement) {
         var _a;

package/ui/form/NumberField/hooks/useInputTypeNumber.d.ts

@@ -3,6 +3,7 @@ interface IInputTypeNumberProps {
     max: any;
     min: any;
     value: string | undefined | null;
+    required?: boolean;
 }
 declare const useInputTypeNumber: (currentInputRef: React.MutableRefObject<HTMLInputElement>, inputTypeNumberProps: IInputTypeNumberProps, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void) => {
     onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

package/ui/form/NumberField/hooks/useInputTypeNumber.js

@@ -7,14 +7,15 @@ var react_1 = __importDefault(require("react"));
 var useInputTypeNumber = function (currentInputRef, inputTypeNumberProps, onChange) {
     react_1["default"].useEffect(function () {
         var _a;
-        var defaultValidity = 'The number is not valid.';
-        var errorMessage = inputTypeNumberProps.value > inputTypeNumberProps.max
-            || inputTypeNumberProps.value < inputTypeNumberProps.min
-            || !inputTypeNumberProps.value
-            ? __(defaultValidity)
+        var defaultValidity = __('The number is not valid.');
+        var errorMessage = inputTypeNumberProps.required
+            && (inputTypeNumberProps.value > inputTypeNumberProps.max
+                || inputTypeNumberProps.value < inputTypeNumberProps.min
+                || !inputTypeNumberProps.value)
+            ? defaultValidity
             : '';
         (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(errorMessage);
-    }, [currentInputRef, inputTypeNumberProps.value, inputTypeNumberProps.max, inputTypeNumberProps.min]);
+    }, [currentInputRef, inputTypeNumberProps.value, inputTypeNumberProps.max, inputTypeNumberProps.min, inputTypeNumberProps.required]);
     var isValueNumeric = function (value) {
         if (!value) {
             return true;

package/ui/format/TimeFormatter/TimeFormatter.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+/**
+ * TimeFormatter
+ *
+ * Компонент TimeFormatter предназначен для форматирования времени с использованием заданного формата.
+ * Он позволяет кастомизировать отображение времени, используя переданный view React компонент.
+ **/
+export interface ITimeFormatterProps {
+    /**
+     * Формат времени
+     * @example HH:mm
+     */
+    format?: string;
+    /**
+     * Время
+     * @example 16:15
+     */
+    value?: string;
+    /**
+     * Переопределение view React компонента для кастомизации отображения колонки
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    [key: string]: any;
+}
+export default function TimeFormatter(props: ITimeFormatterProps): JSX.Element;

package/ui/format/TimeFormatter/TimeFormatter.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var hooks_1 = require("@steroidsjs/core/hooks");
+var dayjs_1 = __importDefault(require("dayjs"));
+var defaultProps = {
+    format: 'HH:mm'
+};
+function TimeFormatter(props) {
+    var components = (0, hooks_1.useComponents)();
+    if (!props.value) {
+        return null;
+    }
+    var time = (0, dayjs_1["default"])(props.value).format(props.format || defaultProps.format);
+    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
+        value: time
+    });
+}
+exports["default"] = TimeFormatter;

package/ui/format/TimeFormatter/index.d.ts

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

package/ui/format/TimeFormatter/index.js

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

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

@@ -10,7 +10,7 @@ export interface ITreeColumnViewProps extends IColumnViewProps, Pick<ITreeTableP
  *
  * Компонент для представления данных коллекции в виде иерархической структуры.
  */
-export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon'> {
+export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage'> {
     /**
      * Элементы коллекции
      * @example
@@ -35,6 +35,7 @@ declare namespace TreeTable {
     var defaultProps: {
         levelPadding: number;
         alwaysOpened: boolean;
+        saveInClientStorage: boolean;
     };
 }
 export default TreeTable;

package/ui/list/TreeTable/TreeTable.js

@@ -73,12 +73,15 @@ function TreeTable(props) {
         autoOpenLevels: 0,
         alwaysOpened: props.alwaysOpened,
         currentPage: list === null || list === void 0 ? void 0 : list.page,
-        itemsOnPage: list === null || list === void 0 ? void 0 : list.pageSize
+        itemsOnPage: list === null || list === void 0 ? void 0 : list.pageSize,
+        saveInClientStorage: props.saveInClientStorage,
+        clientStorageId: props.listId
     }).treeItems;
     return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: treeItems, itemsIndexing: false })));
 }
 exports["default"] = TreeTable;
 TreeTable.defaultProps = {
     levelPadding: 32,
-    alwaysOpened: false
+    alwaysOpened: false,
+    saveInClientStorage: false
 };

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

@@ -6,6 +6,7 @@ export interface ITreeViewProps extends ITreeProps {
 export interface ITreeItemViewProps extends ITreeProps {
     item: IPreparedTreeItem;
     children?: JSX.Element;
+    withoutPointerOnLabel?: boolean;
 }
 /**
  * Tree
@@ -68,6 +69,7 @@ declare namespace Tree {
         hasIconExpandOnly: boolean;
         useSameSelectedItemId: boolean;
         hideIcon: boolean;
+        saveInClientStorage: boolean;
     };
 }
 export default Tree;

package/ui/nav/Tree/Tree.js

@@ -13,7 +13,9 @@ function Tree(props) {
         onExpand: props.onItemClick,
         level: props.level,
         alwaysOpened: props.alwaysOpened,
-        useSameSelectedItemId: props.useSameSelectedItemId
+        useSameSelectedItemId: props.useSameSelectedItemId,
+        saveInClientStorage: props.autoSave,
+        clientStorageId: props.id
     }).treeItems;
     var viewProps = (0, react_1.useMemo)(function () { return ({
         items: treeItems,
@@ -34,5 +36,6 @@ Tree.defaultProps = {
     levelPadding: 32,
     hasIconExpandOnly: false,
     useSameSelectedItemId: true,
-    hideIcon: false
+    hideIcon: false,
+    saveInClientStorage: false
 };