@steroidsjs/core 3.0.48 → 3.0.50

package/docs-autogen-result.json

@@ -3262,6 +3262,14 @@
             "defaultProps": null,
             "extends": [],
             "properties": [
+                {
+                    "name": "autoCompleteInputRef",
+                    "decorators": [],
+                    "description": " Ref autocomplete поиска",
+                    "required": false,
+                    "type": "MutableRefObject",
+                    "example": null
+                },
                 {
                     "name": "groupAttribute",
                     "decorators": [],
@@ -11178,7 +11186,7 @@
             "name": "IKanbanProps",
             "moduleName": "ui/content/Kanban/Kanban",
             "title": "Kanban",
-            "description": "\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",
+            "description": "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react v3.0.2` и `@steroidsjs/ckeditor5 v27.0.2-rc.2`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nИмпортированные компоненты нужно передать в проп `createTaskEditorConfig`,\nв поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.\n",
             "tags": {},
             "defaultProps": null,
             "extends": [
@@ -13633,6 +13641,15 @@
                     "example": "{\n enable: true,\n minLength: 2,\n delay: 100\n}",
                     "defaultValue": null
                 },
+                {
+                    "name": "autoCompleteInputRef",
+                    "decorators": [],
+                    "description": " Ref autocomplete поиска",
+                    "required": false,
+                    "type": "MutableRefObject",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "autoFetch",
                     "decorators": [],
@@ -15447,6 +15464,15 @@
                     "example": "{\n enable: true,\n minLength: 2,\n delay: 100\n}",
                     "defaultValue": null
                 },
+                {
+                    "name": "autoCompleteInputRef",
+                    "decorators": [],
+                    "description": " Ref autocomplete поиска",
+                    "required": false,
+                    "type": "MutableRefObject",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "autoFetch",
                     "decorators": [],
@@ -15976,6 +16002,15 @@
                     "example": "{\n enable: true,\n minLength: 2,\n delay: 100\n}",
                     "defaultValue": null
                 },
+                {
+                    "name": "autoCompleteInputRef",
+                    "decorators": [],
+                    "description": " Ref autocomplete поиска",
+                    "required": false,
+                    "type": "MutableRefObject",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "autoFetch",
                     "decorators": [],
@@ -18819,6 +18854,15 @@
                     "example": "{\n enable: true,\n minLength: 2,\n delay: 100\n}",
                     "defaultValue": null
                 },
+                {
+                    "name": "autoCompleteInputRef",
+                    "decorators": [],
+                    "description": " Ref autocomplete поиска",
+                    "required": false,
+                    "type": "MutableRefObject",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "autoFetch",
                     "decorators": [],
@@ -19264,6 +19308,14 @@
                     "type": "boolean | IAutoCompleteConfig",
                     "example": "{\n enable: true,\n minLength: 2,\n delay: 100\n}"
                 },
+                {
+                    "name": "autoCompleteInputRef",
+                    "decorators": [],
+                    "description": " Ref autocomplete поиска",
+                    "required": false,
+                    "type": "MutableRefObject",
+                    "example": null
+                },
                 {
                     "name": "autoFetch",
                     "decorators": [],
@@ -19328,6 +19380,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "forwardedInputRef",
+                    "decorators": [],
+                    "description": "",
+                    "required": true,
+                    "type": "MutableRefObject",
+                    "example": null
+                },
                 {
                     "name": "forwardedRef",
                     "decorators": [],
@@ -27294,6 +27354,15 @@
                     "example": "{\n enable: true,\n minLength: 2,\n delay: 100\n}",
                     "defaultValue": null
                 },
+                {
+                    "name": "autoCompleteInputRef",
+                    "decorators": [],
+                    "description": " Ref autocomplete поиска",
+                    "required": false,
+                    "type": "MutableRefObject",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "autoFetch",
                     "decorators": [],
@@ -29491,6 +29560,15 @@
                     "example": "{\n enable: true,\n minLength: 2,\n delay: 100\n}",
                     "defaultValue": null
                 },
+                {
+                    "name": "autoCompleteInputRef",
+                    "decorators": [],
+                    "description": " Ref autocomplete поиска",
+                    "required": false,
+                    "type": "MutableRefObject",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "autoFetch",
                     "decorators": [],
@@ -33565,7 +33643,7 @@
             "name": "ITooltipProps",
             "moduleName": "ui/layout/Tooltip/Tooltip",
             "title": "Tooltip",
-            "description": "\nКомпонент Tooltip предоставляет всплывающую подсказку для дочерних элементов.\n",
+            "description": "\nКомпонент Tooltip предоставляет всплывающую подсказку для дочерних элементов.\nВнутри компонента, то есть между тегами Tooltip можно использовать только html теги, например div, span и тд\n",
             "tags": {},
             "defaultProps": {
                 "animationMs": "300",
@@ -37785,10 +37863,10 @@
                 {
                     "name": "customIcon",
                     "decorators": [],
-                    "description": "",
+                    "description": "Кастомная иконка для сворачивания элементов",
                     "required": false,
                     "type": "string | ReactElement",
-                    "example": null
+                    "example": "'arrow'"
                 },
                 {
                     "name": "diagram",
@@ -38001,19 +38079,19 @@
                 {
                     "name": "customIcon",
                     "decorators": [],
-                    "description": "",
+                    "description": "Кастомная иконка для сворачивания элементов",
                     "required": false,
                     "type": "string | ReactElement",
-                    "example": null,
+                    "example": "'arrow'",
                     "defaultValue": null
                 },
                 {
                     "name": "isSinglePageItems",
                     "decorators": [],
-                    "description": "",
+                    "description": "Если флаг true, то данные в items переданы только для одной страницы, если false, то данные в items переданы сразу для всех страниц",
                     "required": false,
                     "type": "boolean",
-                    "example": null,
+                    "example": "true",
                     "defaultValue": null
                 },
                 {

package/en.json

@@ -977,12 +977,14 @@
     "Время": "",
     "Флаг, который позволяет использовать вложенные роуты 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": "",
+    "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react v3.0.2` и `@steroidsjs/ckeditor5 v27.0.2-rc.2`,\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Компонент Tooltip предоставляет всплывающую подсказку для дочерних элементов.\nВнутри компонента, то есть между тегами Tooltip можно использовать только html теги, например div, span и тд\n": "",
     "Компонент с бесконечным скроллом страниц.": "",
     "Компонент, который представляет в виде дерева список с иерархической структурой данных\n\nДополнительный функционал: в кастомном view компонента есть возможность реализовать кнопку, по клику на которую\nбудет вызываться функция props.onItemFocus. Данная функция \"находит\" текущий роут в дереве -\nраскрывает родительские уровни, делает элемент активным.\nДанная функция не включает скролл к активному компоненту внутри дерева, это также необходимо\nреализовать в кастомном view локально в проекте.\n": "",
     "Значение страницы по умолчанию.": "",
     "Логическое значение, указывающее, можно ли загрузить еще элементы для списка при скролле.": "",
+    " Ref autocomplete поиска": "",
     "Подключение бесконечного скролла": "",
     "Дополнительный свойства для view части компонента": "",
     "Используется для управления раскрытием всех элементов в дереве": "",
@@ -1025,6 +1027,7 @@
     "Аттрибут (название) в форме для поля с флагом, определяющим есть ли следующая страница": "",
     "Аттрибут (название) в форме для поля с номером текущей страницы": "",
     "Список, для которого используется пагинация, пример {items: [...], total: number},": "",
+    "Кастомная иконка для сворачивания элементов": "",
     "CSS-класс для элемента навигации.": "",
     "Тип данных для параметров маршрута.": "",
     "Обертка над Redux Store со встроенными middleware (thunk, multi, promise..) и react-router.": ""

package/hooks/useDataSelect.d.ts

@@ -1,3 +1,4 @@
+import { MutableRefObject } from 'react';
 export interface IDataSelectItem {
     /**
     * Идентификатор элемента
@@ -49,6 +50,10 @@ export interface IDataSelectConfig {
      *  Список со всеми элементами
      */
     sourceItems?: IDataSelectItem[];
+    /**
+     *  Ref autocomplete поиска
+     */
+    autoCompleteInputRef?: MutableRefObject<HTMLInputElement>;
 }
 export interface IDataSelectResult {
     isOpened: boolean;

package/hooks/useDataSelect.js

@@ -25,6 +25,7 @@ var react_use_1 = require("react-use");
 var defaultProps = {
     primaryKey: 'id'
 };
+var isAutoCompleteInputFocused = function (autoCompleteInputRef) { return document.activeElement === autoCompleteInputRef.current; };
 var getFlattenedItems = function (items, groupAttribute) {
     var result = [];
     items.forEach(function (item) {
@@ -218,8 +219,8 @@ function useDataSelect(config) {
             }
             setIsOpened(false);
         }
-        // Keys: space (toggle select)
-        if (e.which === 32 && isOpened) {
+        // Keys: space (toggle select), disable in DropDownField with focused autocomplete
+        if (e.which === 32 && isOpened && !isAutoCompleteInputFocused(config.autoCompleteInputRef)) {
             if (hoveredId) {
                 e.preventDefault();
                 // Select hovered
@@ -253,7 +254,7 @@ function useDataSelect(config) {
                 setHoveredId(keys[newIndex]);
             }
         }
-    }, [isFocused, isOpened, hoveredId, selectedIds, flattenedItems, setSelectedIds]);
+    }, [isFocused, isOpened, config.autoCompleteInputRef, hoveredId, selectedIds, flattenedItems, setSelectedIds]);
     (0, react_use_1.useEvent)('keydown', onKeyDown);
     return {
         isOpened: isOpened,

package/index.d.ts

@@ -15,7 +15,7 @@ declare module '*.png' {
 
 /**
  * Метод для локализации фраз и предложений
- * @example {__('{count} {count, plural, one{день} few{дня} many{дней}}', {count: 2})}
+ * @example {__('{count} {count, plural, one{день} few{дня} other{дней}}', {count: 2})}
  * @param {string} phrase
  * @param {object} params
  * @private

package/package.json

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

package/ui/content/Kanban/Kanban.d.ts

@@ -81,7 +81,7 @@ export interface IKanbanTaskDetailsModalViewProps extends IModalProps {
  * компоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.
  *
  * Для корректной работы функционала создания задач,
- * необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,
+ * необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react v3.0.2` и `@steroidsjs/ckeditor5 v27.0.2-rc.2`,
  * затем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.
  * Импортированные компоненты нужно передать в проп `createTaskEditorConfig`,
  * в поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.

package/ui/form/DropDownField/DropDownField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MutableRefObject } from 'react';
 import { IAccordionItemViewProps } from '../../../ui/content/Accordion/Accordion';
 import { DataProviderItems, IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
@@ -165,6 +165,7 @@ export interface IDropDownFieldViewProps extends IDropDownFieldProps {
     hoveredId: PrimaryKey | any;
     selectedIds: (PrimaryKey | any)[];
     forwardedRef: any;
+    forwardedInputRef: MutableRefObject<HTMLInputElement>;
     searchInputProps: {
         type: string;
         name: string;

package/ui/form/DropDownField/DropDownField.js

@@ -87,6 +87,7 @@ function DropDownField(props) {
     var components = (0, hooks_1.useComponents)();
     // Query state
     var _a = (0, react_1.useState)(''), query = _a[0], setQuery = _a[1];
+    var forwardedInputRef = (0, react_1.useRef)(null);
     var hasGroup = !!props.groupAttribute;
     var _b = react_1["default"].useState([]), selectedAccordionItems = _b[0], setSelectedAccordionItems = _b[1];
     var normalizedItemToSelectAll = react_1["default"].useMemo(function () { return normalizeItemToSelectAll(props.itemToSelectAll); }, [props.itemToSelectAll]);
@@ -123,7 +124,8 @@ function DropDownField(props) {
         groupAttribute: props.groupAttribute,
         items: items,
         sourceItems: sourceItems,
-        inputValue: props.input.value
+        inputValue: props.input.value,
+        autoCompleteInputRef: forwardedInputRef
     }), isOpened = _d.isOpened, setIsOpened = _d.setIsOpened, setIsFocused = _d.setIsFocused, hoveredId = _d.hoveredId, setHoveredId = _d.setHoveredId, selectedIds = _d.selectedIds, setSelectedIds = _d.setSelectedIds, selectedItems = _d.selectedItems, setSelectedAll = _d.setSelectedAll, isSelectedAll = _d.isSelectedAll;
     var onOpen = (0, react_1.useCallback)(function () {
         setQuery('');
@@ -226,7 +228,7 @@ function DropDownField(props) {
         }
         return renderItemView(item, 'default', null);
     };
-    var viewProps = (0, react_1.useMemo)(function () { return (__assign({ isAutoComplete: isAutoComplete, items: items, hoveredId: hoveredId, selectedIds: selectedIds, forwardedRef: forwardedRef, searchInputProps: searchInputProps, isOpened: isOpened, isLoading: isLoading, onOpen: onOpen, selectedItems: selectedItems, 
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign({ isAutoComplete: isAutoComplete, items: items, hoveredId: hoveredId, selectedIds: selectedIds, forwardedRef: forwardedRef, forwardedInputRef: forwardedInputRef, searchInputProps: searchInputProps, isOpened: isOpened, isLoading: isLoading, onOpen: onOpen, selectedItems: selectedItems, 
         // TODO onFocus
         // TODO onBlur
         onReset: onReset, onClose: onClose, renderItem: renderItem, onItemRemove: onItemRemove, hasGroup: hasGroup, multiple: props.multiple, isSearchAutoFocus: props.isSearchAutoFocus, itemToSelectAll: normalizedItemToSelectAll, className: props.className, viewProps: props.viewProps, style: props.style, size: props.size, color: props.color, outline: props.outline, placeholder: props.placeholder, showReset: props.showReset, showEllipses: props.showEllipses, errors: props.errors, disabled: props.disabled }, dataProvider)); }, [isAutoComplete, items, hoveredId, selectedIds, searchInputProps, isOpened, isLoading, onOpen, selectedItems, onReset, onClose,

package/ui/layout/Tooltip/Tooltip.d.ts

@@ -36,6 +36,7 @@ export interface ITooltipStylePosition {
  * Tooltip
  *
  * Компонент Tooltip предоставляет всплывающую подсказку для дочерних элементов.
+ * Внутри компонента, то есть между тегами Tooltip можно использовать только html теги, например div, span и тд
  **/
 export interface ITooltipProps {
     /**

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

@@ -27,7 +27,15 @@ export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreePr
      * ]
      */
     items?: ITreeItem[];
+    /**
+     * Если флаг true, то данные в items переданы только для одной страницы, если false, то данные в items переданы сразу для всех страниц
+     * @example true
+     */
     isSinglePageItems?: boolean;
+    /**
+     * Кастомная иконка для сворачивания элементов
+     * @example 'arrow'
+     */
     customIcon?: string | React.ReactElement;
 }
 export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[], levelPadding: string | number, customIcon?: string | React.ReactElement) => IGridColumn[];

package/ui/nav/Nav/Nav.js

@@ -103,7 +103,7 @@ function Nav(props) {
                 toRouteParams: routerParams,
                 visible: route.isNavVisible,
                 isActive: (activeRouteIds || []).includes(route.id),
-                isActiveNested: ((_a = route.items) === null || _a === void 0 ? void 0 : _a.filter(function (nestedItem) { return activeRouteIds.includes(nestedItem.id); })),
+                isActiveNested: !(0, isEmpty_1["default"])((_a = route.items) === null || _a === void 0 ? void 0 : _a.filter(function (nestedItem) { return activeRouteIds.includes(nestedItem.id); })),
                 items: route.items ? formatItems(route.items) : null
             });
         })