@steroidsjs/core 3.0.52 → 3.0.53

package/docs-autogen-result.json

@@ -4143,6 +4143,14 @@
                     "required": true,
                     "type": "Model",
                     "example": null
+                },
+                {
+                    "name": "sort",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "string",
+                    "example": null
                 }
             ],
             "methods": [
@@ -19451,6 +19459,14 @@
                     "type": "boolean | IAutoCompleteConfig",
                     "example": "{\n enable: true,\n minLength: 2,\n delay: 100\n}"
                 },
+                {
+                    "name": "autoCompleteInputForwardedRef",
+                    "decorators": [],
+                    "description": "",
+                    "required": true,
+                    "type": "MutableRefObject",
+                    "example": null
+                },
                 {
                     "name": "autoCompleteInputRef",
                     "decorators": [],
@@ -19523,14 +19539,6 @@
                     "type": "string",
                     "example": null
                 },
-                {
-                    "name": "forwardedInputRef",
-                    "decorators": [],
-                    "description": "",
-                    "required": true,
-                    "type": "MutableRefObject",
-                    "example": null
-                },
                 {
                     "name": "forwardedRef",
                     "decorators": [],
@@ -19579,6 +19587,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "inputRef",
+                    "decorators": [],
+                    "description": "",
+                    "required": true,
+                    "type": "MutableRefObject",
+                    "example": null
+                },
                 {
                     "name": "inputValue",
                     "decorators": [],
@@ -36533,6 +36549,14 @@
                     "required": true,
                     "type": "Model",
                     "example": null
+                },
+                {
+                    "name": "sort",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "string",
+                    "example": null
                 }
             ],
             "methods": [

package/hooks/useList.d.ts

@@ -220,6 +220,7 @@ export interface IListOutput {
     renderInfiniteScroll: () => any;
     onFetch: (params?: Record<string, unknown>) => void;
     onSort: (value: any) => void;
+    sort?: string;
 }
 export declare const defaultConfig: {
     actionMethod: string;

package/hooks/useList.js

@@ -310,7 +310,8 @@ function useList(config) {
         renderSearchForm: renderSearchForm,
         renderInfiniteScroll: renderInfiniteScroll,
         onFetch: onFetch,
-        onSort: onSort
+        onSort: onSort,
+        sort: formValues === null || formValues === void 0 ? void 0 : formValues.sort
     };
 }
 exports["default"] = useList;

package/package.json

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

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

@@ -165,7 +165,8 @@ export interface IDropDownFieldViewProps extends IDropDownFieldProps {
     hoveredId: PrimaryKey | any;
     selectedIds: (PrimaryKey | any)[];
     forwardedRef: any;
-    forwardedInputRef: MutableRefObject<HTMLInputElement>;
+    autoCompleteInputForwardedRef: MutableRefObject<HTMLInputElement>;
+    inputRef: MutableRefObject<HTMLInputElement>;
     searchInputProps: {
         type: string;
         name: string;

package/ui/form/DropDownField/DropDownField.js

@@ -87,7 +87,8 @@ 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 autoCompleteInputForwardedRef = (0, react_1.useRef)(null);
+    var inputRef = (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]);
@@ -125,7 +126,7 @@ function DropDownField(props) {
         items: items,
         sourceItems: sourceItems,
         inputValue: props.input.value,
-        autoCompleteInputRef: forwardedInputRef
+        autoCompleteInputRef: autoCompleteInputForwardedRef
     }), 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('');
@@ -199,6 +200,13 @@ function DropDownField(props) {
             onReset();
         }
     }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
+    // Add required validation
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var defaultValidity = __('Required Field');
+        var errorMessage = props.required && !selectedIds.length ? defaultValidity : '';
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(errorMessage);
+    }, [props.required, selectedIds.length]);
     var renderItemView = function (item, type, src) { return components.ui.renderView(props.itemView || 'form.DropDownFieldItemView', {
         item: __assign(__assign({}, item), { contentSrc: src, contentType: type }),
         selectedIds: selectedIds,
@@ -216,7 +224,7 @@ function DropDownField(props) {
         isItemToSelectAll: item.id === (normalizedItemToSelectAll === null || normalizedItemToSelectAll === void 0 ? void 0 : normalizedItemToSelectAll.id),
         isSelectedAll: isSelectedAll
     }); };
-    var renderItem = function (item) {
+    var renderItem = (0, react_1.useCallback)(function (item) {
         if (hasGroup && Array.isArray(item[props.groupAttribute])) {
             return renderItemView(item, 'group', item[props.groupAttribute]);
         }
@@ -227,14 +235,14 @@ function DropDownField(props) {
             return renderItemView(item, props.itemsContent.type, props.itemsContent.src);
         }
         return renderItemView(item, 'default', null);
-    };
-    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, 
+    }, [hasGroup, props.groupAttribute, props.itemsContent, renderItemView]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign({ isAutoComplete: isAutoComplete, items: items, hoveredId: hoveredId, selectedIds: selectedIds, forwardedRef: forwardedRef, inputRef: inputRef, autoCompleteInputForwardedRef: autoCompleteInputForwardedRef, 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,
         renderItem, onItemRemove, hasGroup, props.multiple, props.isSearchAutoFocus, props.className, props.viewProps, props.style, props.size,
         props.color, props.outline, props.placeholder, props.showReset, props.showEllipses, props.errors, props.disabled,
-        normalizedItemToSelectAll, dataProvider]);
+        normalizedItemToSelectAll, dataProvider, inputRef, autoCompleteInputForwardedRef, forwardedRef]);
     return components.ui.renderView(props.view || 'form.DropDownFieldView', viewProps);
 }
 DropDownField.defaultProps = {

package/ui/form/FieldList/FieldList.js

@@ -33,6 +33,15 @@ 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 };
 };
@@ -40,6 +49,8 @@ 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");
@@ -57,15 +68,26 @@ 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 storeToRowIndexMap = (0, react_1.useMemo)(function () { return (0, range_1["default"])(props.input.value || 0); }, [props.input.value]);
+    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); });
+    }, []);
     // 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]);
+    }, [context.formId, dispatch, props.input.name, removeRowIndex]);
     (0, react_use_1.useMount)(function () {
         // Add initial rows
         if (!props.input.value) {

package/ui/list/Grid/Grid.js

@@ -70,7 +70,7 @@ function Grid(props) {
         initialItems: props.initialItems,
         initialTotal: props.initialTotal,
         autoFetchOnFormChanges: props.autoFetchOnFormChanges
-    }), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderLoading = _a.renderLoading, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, renderInfiniteScroll = _a.renderInfiniteScroll, onFetch = _a.onFetch, onSort = _a.onSort;
+    }), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderLoading = _a.renderLoading, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, renderInfiniteScroll = _a.renderInfiniteScroll, onFetch = _a.onFetch, onSort = _a.onSort, sort = _a.sort;
     var renderLabel = (0, react_1.useCallback)(function (column) {
         if (column.headerView) {
             var HeaderView = column.headerView;
@@ -136,6 +136,7 @@ function Grid(props) {
         columns: columns,
         onFetch: onFetch,
         onSort: onSort,
+        sort: sort,
         items: (list === null || list === void 0 ? void 0 : list.items) || [],
         searchForm: props.searchForm,
         listId: props.listId,
@@ -146,7 +147,8 @@ function Grid(props) {
         primaryKey: props.primaryKey
     }); }, [list, paginationPosition, paginationSizePosition, layoutNamesPosition, renderList, renderLoading, renderEmpty,
         renderPagination, renderPaginationSize, renderLayoutNames, renderSearchForm, renderInfiniteScroll, renderValue, columns,
-        onFetch, onSort, props.searchForm, props.listId, props.isLoading, props.size, props.hasAlternatingColors, props.className, props.primaryKey]);
+        onFetch, onSort, sort, props.searchForm, props.listId, props.isLoading, props.size, props.hasAlternatingColors, props.className,
+        props.primaryKey]);
     return components.ui.renderView(props.view || 'list.GridView', viewProps);
 }
 exports["default"] = Grid;

package/ui/nav/Router/Router.js

@@ -69,7 +69,9 @@ var renderComponent = function (route, activePath, routeProps, alwaysAppendParen
             return null;
         }
         // Check already redirected
-        var toPath = (0, router_2.buildUrl)(redirectPath, (_b = routeProps === null || routeProps === void 0 ? void 0 : routeProps.match) === null || _b === void 0 ? void 0 : _b.params);
+        var toPath = (alwaysAppendParentRoutePath
+            ? redirectPath
+            : (0, router_2.buildUrl)(redirectPath, (_b = routeProps === null || routeProps === void 0 ? void 0 : routeProps.match) === null || _b === void 0 ? void 0 : _b.params));
         if (activePath !== toPath) {
             return (react_1["default"].createElement(react_router_1.Redirect, __assign({}, routeProps, { to: toPath }, route.componentProps)));
         }