@steroidsjs/core 2.1.0-beta.26 → 2.1.0-beta.30

package/actions/modal.d.ts

@@ -1,4 +1,4 @@
-import { IModalProps } from '@steroidsjs/core/ui/modal/Modal/Modal';
+import { IModalProps } from '../ui/modal/Modal/Modal';
 export declare const MODAL_OPEN = "@modal/open";
 export declare const MODAL_MARK_CLOSING = "@modal/markClosing";
 export declare const MODAL_CLOSE = "@modal/close";

package/components/SocialComponent.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var social_1 = __importDefault(require("./social"));
+var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 /**
  * Social Component
  * Провайдер для социальных сетей. Обеспечивает вызов окна соц сети для oauth авторизации
@@ -17,11 +17,15 @@ var SocialComponent = /** @class */ (function () {
     SocialComponent.prototype.init = function () {
         var _this = this;
         Object.keys(this.providers).forEach(function (name) {
-            if (social_1["default"][name]) {
-                var config = _this.providers[name] || {};
-                _this.providers[name] = new social_1["default"][name](_this._components);
-                Object.assign(_this.providers[name], config);
+            if (isFunction_1["default"](_this.providers[name])) {
+                _this.providers[name] = { className: _this.providers[name] };
             }
+            var ProviderClass = _this.providers[name].className;
+            delete _this.providers[name].className;
+            if (!ProviderClass) {
+                throw new Error('Not found class for social provider: ' + name);
+            }
+            _this.providers[name] = new ProviderClass(_this._components, _this.providers[name]);
         });
         Object.keys(this.providers).forEach(function (name) {
             _this._initializing[name] = _this.providers[name].init();
@@ -32,9 +36,7 @@ var SocialComponent = /** @class */ (function () {
         if (!this._initializing[socialName]) {
             return Promise.reject();
         }
-        return this._initializing[socialName].then(function () {
-            return _this.providers[socialName].start();
-        });
+        return this._initializing[socialName].then(function () { return _this.providers[socialName].start(); });
     };
     return SocialComponent;
 }());

package/components/social/FacebookProvider.d.ts

@@ -2,7 +2,7 @@ export default class FacebookProvider {
     _components: any;
     clientId: string;
     language: string;
-    constructor(components: any);
+    constructor(components: any, config: any);
     init(): Promise<any>;
     start(): Promise<unknown>;
 }

package/components/social/FacebookProvider.js

@@ -37,13 +37,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 exports.__esModule = true;
 var FacebookProvider = /** @class */ (function () {
-    function FacebookProvider(components) {
+    function FacebookProvider(components, config) {
         this._components = components;
-        this.clientId = '';
-        this.language =
-            this._components.locale.language +
-                '_' +
-                this._components.locale.language.toUpperCase();
+        this.clientId = config.clientId || '';
+        this.language = this._components.locale.language
+            + '_'
+            + this._components.locale.language.toUpperCase();
     }
     FacebookProvider.prototype.init = function () {
         return __awaiter(this, void 0, void 0, function () {

package/components/social/GitlabProvider.d.ts

@@ -2,7 +2,7 @@ export default class GitlabProvider {
     _components: any;
     url: string;
     redirectUrl: any;
-    constructor(components: any);
+    constructor(components: any, config: any);
     init(): Promise<void>;
     start(): Promise<unknown>;
 }

package/components/social/GitlabProvider.js

@@ -37,10 +37,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 exports.__esModule = true;
 var GitlabProvider = /** @class */ (function () {
-    function GitlabProvider(components) {
+    function GitlabProvider(components, config) {
         this._components = components;
-        this.url = '';
-        this.redirectUrl = this._components.http.getUrl('/api/v1/auth/social/proxy');
+        this.url = config.url || '';
+        this.redirectUrl = config.redirectUrl || this._components.http.getUrl('/api/v1/auth/social/proxy');
     }
     GitlabProvider.prototype.init = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -78,9 +78,9 @@ var GitlabProvider = /** @class */ (function () {
                             .join(','));
                         popup.onbeforeunload = function () { return reject(); };
                         // This is a handler which is used by child window to pass auth result
-                        // @ts-ignore
                         window.authCallback = function (link) {
-                            // link: http://127.0.0.1:9424/api/v1/auth/social/proxy?provider=gitlab_kozhindev#access_token=7b87e3de0000000111111122222223333333d1b4ff3ee3f040085518198d885d&token_type=Bearer
+                            // link: http://127.0.0.1:9424/api/v1/auth/social/proxy
+                            // ?provider=gitlab_kozhindev#access_token=7b87e3de0...5518198d885d&token_type=Bearer
                             var token = (/access_token=(\w+)/.exec(link) || [])[1];
                             if (token) {
                                 resolve({ token: token });

package/components/social/GoogleProvider.d.ts

@@ -1,7 +1,7 @@
 export default class GoogleProvider {
     _components: any;
     clientId: string;
-    constructor(components: any);
+    constructor(components: any, config: any);
     init(): Promise<any>;
     start(): Promise<{
         token: any;

package/components/social/GoogleProvider.js

@@ -37,9 +37,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 exports.__esModule = true;
 var GoogleProvider = /** @class */ (function () {
-    function GoogleProvider(components) {
+    function GoogleProvider(components, config) {
         this._components = components;
-        this.clientId = '';
+        this.clientId = config.clientId;
     }
     GoogleProvider.prototype.init = function () {
         return __awaiter(this, void 0, void 0, function () {

package/components/social/SteamProvider.d.ts

@@ -1,7 +1,7 @@
 export default class Vk {
     _components: any;
     clientId: string;
-    constructor(components: any);
+    constructor(components: any, config: any);
     init(): Promise<void>;
     start(): Promise<unknown>;
 }

package/components/social/SteamProvider.js

@@ -57,9 +57,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 exports.__esModule = true;
 var queryString = __importStar(require("qs"));
 var Vk = /** @class */ (function () {
-    function Vk(components) {
+    function Vk(components, config) {
         this._components = components;
-        this.clientId = '';
+        this.clientId = config.clientId;
     }
     Vk.prototype.init = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -74,14 +74,14 @@ var Vk = /** @class */ (function () {
             return __generator(this, function (_a) {
                 return [2 /*return*/, new Promise(function (resolve, reject) {
                         // Generate url
-                        var url = 'https://steamcommunity.com/openid/login?' +
-                            queryString.stringify({
+                        var url = 'https://steamcommunity.com/openid/login?'
+                            + queryString.stringify({
                                 'openid.mode': 'checkid_setup',
                                 'openid.ns': 'http://specs.openid.net/auth/2.0',
                                 'openid.identity': 'http://specs.openid.net/auth/2.0/identifier_select',
                                 'openid.claimed_id': 'http://specs.openid.net/auth/2.0/identifier_select',
                                 'openid.return_to': _this._components.http.getUrl('/api/v1/auth/social/proxy'),
-                                'openid.realm': location.origin
+                                'openid.realm': window.location.origin
                             });
                         // Open popup auth window
                         var width = 900;
@@ -107,14 +107,13 @@ var Vk = /** @class */ (function () {
                             .join(','));
                         popup.onbeforeunload = function () { return reject(); };
                         // This is a handler which is used by child window to pass auth result
-                        // @ts-ignore
                         window.authCallback = function (link) {
-                            var params = queryString.parse(new URL(link).search);
-                            if (!params['openid.mode']) {
+                            var query = queryString.parse(new URL(link).search);
+                            if (!query['openid.mode']) {
                                 reject();
                             }
                             else {
-                                resolve(params);
+                                resolve(query);
                             }
                         };
                     })];

package/components/social/VkProvider.d.ts

@@ -2,7 +2,7 @@ export default class VkProvider {
     _components: any;
     clientId: string;
     redirectUrl: any;
-    constructor(components: any);
+    constructor(components: any, config: any);
     init(): Promise<void>;
     start(): Promise<unknown>;
 }

package/components/social/VkProvider.js

@@ -57,10 +57,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 exports.__esModule = true;
 var queryString = __importStar(require("qs"));
 var VkProvider = /** @class */ (function () {
-    function VkProvider(components) {
+    function VkProvider(components, config) {
         this._components = components;
-        this.clientId = '';
-        this.redirectUrl = this._components.http.getUrl('/api/v1/auth/social/proxy');
+        this.clientId = config.clientId;
+        this.redirectUrl = config.redirectUrl || this._components.http.getUrl('/api/v1/auth/social/proxy');
     }
     VkProvider.prototype.init = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -75,8 +75,8 @@ var VkProvider = /** @class */ (function () {
             return __generator(this, function (_a) {
                 return [2 /*return*/, new Promise(function (resolve, reject) {
                         // Generate url
-                        var url = 'https://oauth.vk.com/authorize/?' +
-                            queryString.stringify({
+                        var url = 'https://oauth.vk.com/authorize/?'
+                            + queryString.stringify({
                                 client_id: _this.clientId,
                                 redirect_uri: _this.redirectUrl,
                                 scope: 'offline,public_profile',
@@ -106,16 +106,15 @@ var VkProvider = /** @class */ (function () {
                             .join(','));
                         popup.onbeforeunload = function () { return reject(); };
                         // This is a handler which is used by child window to pass auth result
-                        // @ts-ignore
                         window.authCallback = function (link) {
-                            var params = new URL(link).searchParams;
-                            var error = params.get('error');
+                            var query = new URL(link).searchParams;
+                            var error = query.get('error');
                             if (error) {
                                 reject(error);
                             }
                             else {
                                 resolve({
-                                    token: params.get('code')
+                                    token: query.get('code')
                                 });
                             }
                         };

package/hooks/useComponents.js

@@ -3,10 +3,9 @@ exports.__esModule = true;
 var react_1 = require("react");
 var ComponentsProvider_1 = require("../providers/ComponentsProvider");
 function useComponents() {
-    var components = react_1.useContext(ComponentsProvider_1.ComponentsContext);
     if (!process.env.IS_SSR) {
         return window.SteroidsComponents;
     }
-    return components;
+    return react_1.useContext(ComponentsProvider_1.ComponentsContext); // eslint-disable-line react-hooks/rules-of-hooks
 }
 exports["default"] = useComponents;

package/hooks/useDataProvider.d.ts

@@ -22,6 +22,7 @@ export declare type DataProviderItems = string | ({
 }) | (string | number | {
     id: string | number | boolean;
     label: string | any;
+    [key: string]: any;
 })[];
 export interface IDataProviderConfig {
     /**

package/hooks/useDataProvider.js

@@ -54,11 +54,11 @@ var react_redux_1 = require("react-redux");
 var isString_1 = __importDefault(require("lodash-es/isString"));
 var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var react_1 = require("react");
+var react_use_1 = require("react-use");
 var data_1 = require("../utils/data");
 var index_1 = require("./index");
 var fields_1 = require("../reducers/fields");
 var text_1 = require("../utils/text");
-var react_use_1 = require("react-use");
 var defaultProps = {
     autoComplete: {
         enable: false,
@@ -137,8 +137,7 @@ function useDataProvider(config) {
                 delayTimerRef.current = setTimeout(fetchRemote, autoComplete.delay);
             }
         }
-    }, [autoComplete, components.api, components.http, config.autoFetch, config.dataProvider, config.query,
-        dataProvider, dataProvider.action, dataProvider.onSearch, sourceItems]);
+    }, [autoComplete, components.api, components.http, config.autoFetch, config.dataProvider, config.query, dataProvider, dataProvider.action, dataProvider.onSearch, prevQuery, sourceItems]);
     return {
         sourceItems: sourceItems,
         items: items,

package/hooks/useDataSelect.d.ts

@@ -13,7 +13,7 @@ export interface IDataSelectConfig {
      * Список с видимыми элементами
      * @example [{id: 1, label: 'Krasnoyarsk'}, {id: 2, label: 'Moscow'}]
      */
-    items: IDataSelectItem[];
+    items?: IDataSelectItem[];
     /**
      * Сделать активным первый элемент в списке
      * @example true
@@ -23,7 +23,7 @@ export interface IDataSelectConfig {
      * Список с идентификаторами выбранных элементов
      * @example [1, 4]
      */
-    selectedIds: any;
+    selectedIds?: any;
     /**
      * Первичный ключ для item
      * @example id
@@ -32,7 +32,7 @@ export interface IDataSelectConfig {
     /**
      * Значение поля в форме
      */
-    inputValue: any;
+    inputValue?: any;
     /**
      *  Список со всеми элементами
      */

package/hooks/useDataSelect.js

@@ -34,7 +34,9 @@ function useDataSelect(config) {
     }, [config.items, config.selectFirst, config.selectedIds, primaryKey, config.inputValue]);
     var initialSelectedItems = react_1.useMemo(function () { return config.items.length > 0
         && initialSelectedIds.length > 0
-        ? initialSelectedIds.map(function (selectedId) { return config.items.find(function (item) { return item.id === selectedId; }); })
+        ? initialSelectedIds
+            .map(function (selectedId) { return config.items.find(function (item) { return item.id === selectedId; }); })
+            .filter(Boolean)
         : []; }, [initialSelectedIds, config.items]);
     // State
     var _a = react_1.useState(false), isOpened = _a[0], setIsOpened = _a[1];
@@ -81,7 +83,7 @@ function useDataSelect(config) {
         var hasChanges = false;
         selectedIds.forEach(function (selectedId) {
             var finedItem = config.items.find(function (item) { return item[primaryKey] === selectedId; });
-            if (!finedItem) {
+            if (!finedItem && config.sourceItems) {
                 finedItem = config.sourceItems.find(function (item) { return item[primaryKey] === selectedId; });
             }
             var selectedItem = selectedItems.find(function (item) { return item[primaryKey] === selectedId; });
@@ -112,7 +114,8 @@ function useDataSelect(config) {
             ? itemsForSelect.map(function (item) { return item[primaryKey]; }).filter(function (id) { return config.selectedIds.includes(id); })
             : [];
         selectedItems.forEach(function (selectedItem) {
-            if (!newSelectedIds.includes(selectedItem.id) && config.selectedIds && config.selectedIds.includes(selectedItem.id)) {
+            if (!newSelectedIds.includes(selectedItem.id) && config.selectedIds
+                && config.selectedIds.includes(selectedItem.id)) {
                 newSelectedIds.push(selectedItem.id);
             }
         });

package/hooks/useFetch.js

@@ -60,6 +60,9 @@ var normalizeConfig = function (config) { return (config
     ? __assign({ id: null, url: '', method: 'get', params: {}, options: null, onFetch: null }, config) : null); };
 exports.normalizeConfig = normalizeConfig;
 var getConfigId = function (config) {
+    if (config === null) {
+        return null;
+    }
     var result = trim_1["default"](config.id || config.url, '/');
     if (!result) {
         // eslint-disable-next-line no-console

package/hooks/useLayout.js

@@ -81,14 +81,18 @@ var runInitAction = function (initAction, components, dispatch) { return (initAc
 exports.runInitAction = runInitAction;
 function useLayout(initAction) {
     if (initAction === void 0) { initAction = null; }
-    var _a = useSelector_1["default"](function (state) { return ({
-        route: router_1.getRoute(state),
-        user: auth_1.getUser(state),
-        data: auth_1.getData(state),
-        isInitialized: auth_1.isInitialized(state),
-        initializeCounter: auth_1.getInitializeCounter(state),
-        redirectPageId: state.auth.redirectPageId
-    }); }), route = _a.route, user = _a.user, data = _a.data, isInitialized = _a.isInitialized, initializeCounter = _a.initializeCounter, redirectPageId = _a.redirectPageId;
+    var _a = useSelector_1["default"](function (state) {
+        var routesMap = router_1.getRoutesMap(state);
+        return {
+            route: router_1.getRoute(state),
+            user: auth_1.getUser(state),
+            data: auth_1.getData(state),
+            isInitialized: auth_1.isInitialized(state),
+            initializeCounter: auth_1.getInitializeCounter(state),
+            redirectPageId: state.auth.redirectPageId,
+            loginRouteId: Object.keys(routesMap).find(function (name) { return routesMap[name].role === 'login'; })
+        };
+    }), route = _a.route, user = _a.user, data = _a.data, isInitialized = _a.isInitialized, initializeCounter = _a.initializeCounter, redirectPageId = _a.redirectPageId, loginRouteId = _a.loginRouteId;
     var _b = react_1.useState(null), error = _b[0], setError = _b[1];
     var dispatch = useDispatch_1["default"]();
     var components = useComponents_1["default"]();
@@ -133,10 +137,15 @@ function useLayout(initAction) {
             userRoles.push(null); // Guest
         }
         if (intersection_1["default"](pageRoles, userRoles).length === 0) {
-            status = exports.STATUS_ACCESS_DENIED;
-            if (process.env.NODE_ENV !== 'production') {
-                // eslint-disable-next-line no-console
-                console.log('Access denied. Page roles: ', pageRoles, 'User roles:', userRoles.join(), 'Route:', route);
+            if (loginRouteId && route.id !== loginRouteId) {
+                dispatch(router_2.goToRoute(loginRouteId));
+            }
+            else {
+                status = exports.STATUS_ACCESS_DENIED;
+                if (process.env.NODE_ENV !== 'production') {
+                    // eslint-disable-next-line no-console
+                    console.log('Access denied. Page roles: ', pageRoles, 'User roles:', userRoles.join(), 'Route:', route);
+                }
             }
         }
     }

package/hooks/useList.d.ts

@@ -1,3 +1,4 @@
+import { IApiMethod } from '../components/ApiComponent';
 import { IList } from '../actions/list';
 import { ILayoutNamesProps } from '../ui/list/LayoutNames/LayoutNames';
 import { IPaginationProps } from '../ui/list/Pagination/Pagination';
@@ -50,7 +51,7 @@ export interface IListConfig {
      * Url, который вернет коллекцию элементов
      * @example api/v1/articles
      */
-    action?: string;
+    action?: string | IApiMethod;
     /**
      * Тип HTTP запроса (GET | POST | PUT | DELETE)
      * @example GET
@@ -128,6 +129,15 @@ export interface IListConfig {
      * Элементы коллекции
      */
     items?: Array<any>;
+    /**
+     * Начальные элементы. Используется для подгрузки нескольких списков в один запрос, при этом не отменяя пагинацию
+     * и последующие запросы на бекенд для 2-й и следующих страниц
+     */
+    initialItems?: Array<any>;
+    /**
+     * Количество элементов всего в списке (для отрисовки пагинации), заданное вручную
+     */
+    initialTotal?: number;
 }
 export interface IListOutput {
     list: IList;

package/hooks/useList.js

@@ -193,6 +193,7 @@ function useList(config) {
                     scope: config.scope,
                     items: null,
                     sourceItems: config.items || null,
+                    total: config.initialTotal,
                     isRemote: !config.items,
                     primaryKey: config.primaryKey || exports.defaultConfig.primaryKey,
                     formId: formId,
@@ -202,9 +203,13 @@ function useList(config) {
                     sortAttribute: sort.attribute || null,
                     layoutAttribute: layoutNamesProps.attribute || null
                 }),
-                list_2.listSetItems(config.listId, config.items),
-                list_2.listLazyFetch(config.listId),
             ];
+            if (config.initialItems || config.items) {
+                toDispatch.push(list_2.listSetItems(config.listId, config.initialItems || config.items));
+            }
+            if (!config.initialItems) {
+                toDispatch.push(list_2.listLazyFetch(config.listId));
+            }
             dispatch(toDispatch);
         }
     });
@@ -215,7 +220,7 @@ function useList(config) {
     }); });
     var prevFormValues = react_use_1.usePrevious(formValues);
     react_use_1.useUpdateEffect(function () {
-        if (!isEqual_1["default"](formValues, prevFormValues)) {
+        if (prevFormValues && !isEqual_1["default"](formValues, prevFormValues)) {
             // Has changes (but not page) -> reset page
             var attribute = paginationProps.attribute;
             if ((prevFormValues === null || prevFormValues === void 0 ? void 0 : prevFormValues[attribute]) === formValues[attribute] && formValues[attribute] > 1) {

package/package.json

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

package/reducers/form.d.ts

@@ -7,3 +7,4 @@ export declare function reducerItem(state: any, action: any): any;
 declare const _default: (state: {}, action: any) => any;
 export default _default;
 export declare const formSelector: (state: any, formId: any, selector: any) => any;
+export declare const getFormValues: (state: any, formId: any) => any;

package/reducers/form.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.formSelector = exports.reducerItem = void 0;
+exports.getFormValues = exports.formSelector = exports.reducerItem = void 0;
 var get_1 = __importDefault(require("lodash-es/get"));
 var cloneDeep_1 = __importDefault(require("lodash-es/cloneDeep"));
 var dot_prop_immutable_1 = require("dot-prop-immutable");
@@ -66,3 +66,5 @@ exports["default"] = (function (state, action) {
 });
 var formSelector = function (state, formId, selector) { var _a; return selector(((_a = state.form) === null || _a === void 0 ? void 0 : _a[formId]) || {}); };
 exports.formSelector = formSelector;
+var getFormValues = function (state, formId) { var _a, _b; return ((_b = (_a = state.form) === null || _a === void 0 ? void 0 : _a[formId]) === null || _b === void 0 ? void 0 : _b.values) || null; };
+exports.getFormValues = getFormValues;

package/reducers/router.js

@@ -40,6 +40,7 @@ var react_router_1 = require("react-router");
 var queryString = __importStar(require("qs"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var pick_1 = __importDefault(require("lodash-es/pick"));
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
@@ -157,9 +158,12 @@ var reducerMap = (_a = {},
             activeIds: activeIds, match: getMatch(currentRoute, state) });
     },
     _a['@@router/LOCATION_CHANGE'] = function (state, action) {
-        var activeIds = Object.keys(state.routesMap).filter(function (id) { return checkIsActive(state, state.routesMap[id]); });
-        var currentRoute = activeIds.length > 0 ? state.routesMap[activeIds[0]] : null;
-        return __assign(__assign({}, state), { activeIds: activeIds, match: getMatch(currentRoute, state) });
+        var newActiveIds = Object.keys(state.routesMap).filter(function (id) { return checkIsActive(state, state.routesMap[id]); });
+        var currentRoute = newActiveIds.length > 0 ? state.routesMap[newActiveIds[0]] : null;
+        if (!isEqual_1["default"](newActiveIds, state.activeIds)) {
+            state.activeIds = newActiveIds;
+        }
+        return __assign(__assign({}, state), { match: getMatch(currentRoute, state) });
     },
     _a[router_1.ROUTER_SET_PARAMS] = function (state, action) { return (__assign(__assign({}, state), { params: __assign(__assign(__assign({}, state.params), state.location.query), action.params) })); },
     _a);

package/ui/content/Detail/Detail.d.ts

@@ -74,7 +74,7 @@ export interface IDetailProps {
     /**
      * Дочерние компоненты
      */
-    children: React.ReactNode | React.ReactNode[];
+    children?: React.ReactNode | React.ReactNode[];
     [key: string]: any;
 }
 export interface IDetailItemOutputProps extends IDetailItemProps {

package/ui/crud/Crud/Crud.js

@@ -150,13 +150,15 @@ function Crud(props) {
         model: props.model,
         restUrl: props.restUrl,
         restApi: props.restApi,
+        grid: props.grid,
+        form: props.form,
         goToAction: goToAction,
         items: items,
         itemsToControls: itemsToControls,
         record: record,
         recordId: recordId
-    }); }, [crudId, goToAction, items, itemsToControls, props.model, props.primaryKey,
-        props.queryKey, props.restUrl, props.restApi, record, recordId]);
+    }); }, [crudId, props.queryKey, props.primaryKey, props.model, props.restUrl, props.restApi, props.grid,
+        props.form, goToAction, items, itemsToControls, record, recordId]);
     // Open modal on route change
     react_1.useEffect(function () {
         if (mode === MODE_MODAL && routeAction !== utils_1.CRUD_ACTION_INDEX) {

package/ui/crud/Crud/CrudContent.d.ts

@@ -1,4 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { IGridProps } from '@steroidsjs/core/ui/list/Grid/Grid';
+import { IFormProps } from '@steroidsjs/core/ui/form/Form/Form';
 import { ICrudItem } from './Crud';
 import { IApiRest } from '../../../components/ApiComponent';
 export interface ICrudContentProps {
@@ -14,5 +16,7 @@ export interface ICrudContentProps {
     record?: Record<string, unknown>;
     recordId?: PrimaryKey;
     action?: string;
+    grid?: IGridProps | React.ReactNode;
+    form?: IFormProps | React.ReactNode;
 }
 export default function CrudContent(props: ICrudContentProps): JSX.Element;

package/ui/crud/Crud/CrudContent.js

@@ -68,23 +68,23 @@ function CrudContent(props) {
                 ItemComponent = Grid_1["default"];
             }
             return (React.createElement(ItemComponent // Grid
-            , { key: props.crudId, listId: props.crudId, action: props.restApi ? props.restApi.index : props.restUrl, scope: ['model', 'permission'], primaryKey: props.primaryKey, model: props.model, 
+            , __assign({ key: props.crudId, listId: props.crudId, action: props.restApi ? props.restApi.index : props.restUrl, scope: ['model', 'permission'], primaryKey: props.primaryKey, model: props.model, 
                 //searchModel={props.searchModel}
                 controls: controlsGetter, columns: [props.primaryKey], pagination: {
                     loadMore: false
-                } }));
+                } }, props.grid)));
         case utils_1.CRUD_ACTION_CREATE:
         case utils_1.CRUD_ACTION_UPDATE:
             if (!ItemComponent) {
                 ItemComponent = Form_1["default"];
             }
-            if (props.action === utils_1.CRUD_ACTION_UPDATE && !props.record) {
+            if (props.action === utils_1.CRUD_ACTION_UPDATE && (props.restUrl || props.restApi) && !props.record) {
                 return null;
             }
             return (React.createElement(ItemComponent // Form
-            , { key: formId, formId: formId, action: props.restApi
+            , __assign({ key: formId, formId: formId, action: props.restApi
                     ? (props.recordId ? props.restApi.update : props.restApi.create)
-                    : [props.restUrl, props.recordId].filter(Boolean).join('/'), model: props.model, autoFocus: true, submitLabel: props.recordId ? __('Сохранить') : __('Добавить'), layout: 'horizontal', onComplete: onFormComplete, initialValues: formInitialValues }));
+                    : [props.restUrl, props.recordId].filter(Boolean).join('/'), model: props.model, autoFocus: true, submitLabel: props.recordId ? __('Сохранить') : __('Добавить'), layout: 'horizontal', onComplete: onFormComplete }, props.form, { initialValues: formInitialValues })));
         default:
             if (ItemComponent) {
                 return (React.createElement(ItemComponent, __assign({ key: props.crudId + '_' + props.action }, props, crudItem.componentProps)));

package/ui/crud/index.d.ts

@@ -26,6 +26,7 @@ export declare const generateCrud: (routeId: string, props: ICrudGeneratorProps)
     isNavVisible?: boolean;
     models: string | string[];
     enums: string | string[];
+    role?: string;
     roles?: string[];
     fetch?: import("../../hoc/fetch").IFetchHocConfigFunc;
     items?: IRouteItem[] | {

package/ui/form/AutoCompleteField/AutoCompleteField.d.ts

@@ -35,10 +35,5 @@ export interface IAutoCompleteFieldViewProps extends Omit<IAutoCompleteFieldProp
     onItemSelect: (id: PrimaryKey | any) => void;
     onItemHover: (id: PrimaryKey | any) => void;
 }
-declare const _default: {
-    (props: import("../../../ui/form/Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-};
+declare const _default: import("../../../ui/form/Field/fieldWrapper").FieldWrapperComponent<IAutoCompleteFieldProps>;
 export default _default;