@steroidsjs/core 3.0.47 → 3.0.49

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": [],
@@ -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": [],

package/en.json

@@ -983,6 +983,7 @@
     "Компонент, который представляет в виде дерева список с иерархической структурой данных\n\nДополнительный функционал: в кастомном view компонента есть возможность реализовать кнопку, по клику на которую\nбудет вызываться функция props.onItemFocus. Данная функция \"находит\" текущий роут в дереве -\nраскрывает родительские уровни, делает элемент активным.\nДанная функция не включает скролл к активному компоненту внутри дерева, это также необходимо\nреализовать в кастомном view локально в проекте.\n": "",
     "Значение страницы по умолчанию.": "",
     "Логическое значение, указывающее, можно ли загрузить еще элементы для списка при скролле.": "",
+    " Ref autocomplete поиска": "",
     "Подключение бесконечного скролла": "",
     "Дополнительный свойства для view части компонента": "",
     "Используется для управления раскрытием всех элементов в дереве": "",

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/package.json

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

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/form/FieldList/FieldList.js

@@ -33,15 +33,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -49,8 +40,6 @@ exports.__esModule = true;
 var react_1 = __importStar(require("react"));
 var isBoolean_1 = __importDefault(require("lodash-es/isBoolean"));
 var range_1 = __importDefault(require("lodash-es/range"));
-var concat_1 = __importDefault(require("lodash-es/concat"));
-var last_1 = __importDefault(require("lodash-es/last"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var react_use_1 = require("react-use");
@@ -68,26 +57,15 @@ function FieldList(props) {
     var isWithReduxForm = (0, hooks_1.useSelector)(function (state) { return (0, get_1["default"])(state, ['form', context.formId]) || null; });
     var dispatch = context.provider.useDispatch();
     // Mapper for preserving the correct sequence of rows on the UI
-    var _b = (0, react_1.useState)((0, range_1["default"])(props.input.value) || []), storeToRowIndexMap = _b[0], setStoreToRowIndexMap = _b[1];
-    var addRowIndexes = (0, react_1.useCallback)(function (rowsCount) {
-        setStoreToRowIndexMap(function (prevMap) {
-            var lastIndex = !(0, isEmpty_1["default"])(prevMap) ? (0, last_1["default"])(prevMap) + 1 : 0;
-            return (0, concat_1["default"])(prevMap, (0, range_1["default"])(lastIndex, lastIndex + rowsCount));
-        });
-    }, []);
-    var removeRowIndex = (0, react_1.useCallback)(function (rowIndex) {
-        setStoreToRowIndexMap(function (prevMap) { return __spreadArray(__spreadArray([], prevMap.slice(0, rowIndex), true), prevMap.slice(rowIndex + 1), true); });
-    }, []);
+    var storeToRowIndexMap = (0, react_1.useMemo)(function () { return (0, range_1["default"])(props.input.value || 0); }, [props.input.value]);
     // Add and Remove handlers
     var onAdd = (0, react_1.useCallback)(function (rowsCount) {
         if (rowsCount === void 0) { rowsCount = 1; }
-        addRowIndexes(rowsCount);
         dispatch((0, form_1.formArrayAdd)(context.formId, props.input.name, rowsCount, props.initialValues));
-    }, [context.formId, dispatch, props.initialValues, props.input.name, addRowIndexes]);
+    }, [context.formId, dispatch, props.initialValues, props.input.name]);
     var onRemove = (0, react_1.useCallback)(function (rowIndex) {
-        removeRowIndex(rowIndex);
         dispatch((0, form_1.formArrayRemove)(context.formId, props.input.name, rowIndex));
-    }, [context.formId, dispatch, props.input.name, removeRowIndex]);
+    }, [context.formId, dispatch, props.input.name]);
     (0, react_use_1.useMount)(function () {
         // Add initial rows
         if (!props.input.value) {