@steroidsjs/core 2.1.0-beta.9 → 2.1.1

package/ui/form/FileField/demo/basic.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обычный пример использования FileField.
+ * @order 1
+ * @col 6
+ */
+export default _default;

package/ui/form/FileField/demo/basic.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var FileField_1 = __importDefault(require("../FileField"));
+/**
+ * Обычный пример использования FileField.
+ * @order 1
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: { display: 'grid', gridGap: '10px' } },
+    React.createElement(FileField_1["default"], { backendUrl: '/api/v1/file-test' }))); });

package/ui/form/Form/Form.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IAddressBarConfig } from '../../../hooks/useAddressBar';
 import { IApiMethod } from '../../../components/ApiComponent';
 import { IFieldProps } from '../Field/Field';
 /**
@@ -114,18 +115,10 @@ export interface IFormProps {
      */
     submitLabel?: string;
     /**
-     * Значения полей формы будут подставляться в качестве query-параметров в адресную строку
+     * Синхронизация значений формы с адресной строкой
      * @example true
      */
-    syncWithAddressBar?: boolean;
-    /**
-     * Обработчик, который используется для форматирования значений из адресной строки в валидные значения формы
-     */
-    restoreCustomizer?: (...args: any[]) => any;
-    /**
-     * Указывает, что в качестве сепаратора для параметров формы в адресной строке нужно использовать '#', а не '?'
-     */
-    useHash?: boolean;
+    addressBar?: boolean | IAddressBarConfig;
     /**
      * Если в форме есть элементы \<input\>, то произойдет автоматическая фокусировка на первом из них
      * @example true
@@ -137,6 +130,11 @@ export interface IFormProps {
      * @example 'addComment'
      */
     captchaActionName?: string;
+    /**
+     * Включает рамки и тень.
+     * @example true
+     */
+    isBordered?: boolean;
     [key: string]: any;
 }
 export interface IFormViewProps {
@@ -144,6 +142,7 @@ export interface IFormViewProps {
     fields?: (string | IFieldProps)[];
     onSubmit: any;
     className?: CssClassName;
+    isBordered?: boolean;
     style?: any;
     layout?: {
         layout: FormLayoutName | boolean;

package/ui/form/Form/Form.js

@@ -71,15 +71,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 exports.FormContext = void 0;
 var React = __importStar(require("react"));
-var react_redux_1 = require("react-redux");
 var get_1 = __importDefault(require("lodash-es/get"));
 var isUndefined_1 = __importDefault(require("lodash-es/isUndefined"));
 var set_1 = __importDefault(require("lodash-es/set"));
-var queryString = __importStar(require("qs"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
+var useAddressBar_1 = __importDefault(require("../../../hooks/useAddressBar"));
 var AutoSaveHelper_1 = __importDefault(require("./AutoSaveHelper"));
-var SyncAddressBarHelper_1 = __importDefault(require("./SyncAddressBarHelper"));
 var hooks_1 = require("../../../hooks");
 var form_1 = require("../../../utils/form");
 var validate_1 = __importDefault(require("../validate"));
@@ -106,15 +104,16 @@ function Form(props) {
     var components = hooks_1.useComponents();
     // Normalize layout
     var layout = react_1.useMemo(function () { return form_1.normalizeLayout(props.layout); }, [props.layout]);
+    // Address bar synchronization
+    var _a = useAddressBar_1["default"](__assign({ enable: !!props.addressBar, model: props.model }, (typeof props.addressBar === 'boolean' ? { enable: props.addressBar } : props.addressBar))), initialQuery = _a.initialQuery, updateQuery = _a.updateQuery;
     // Resolve initial values
     var initialValues = props.initialValues;
     // Restore initial values from address bar and local storage
     var isFirstMount = react_use_1.useFirstMountState();
-    var locationSearch = react_redux_1.useSelector(function (state) { return get_1["default"](state, 'router.location.search', ''); });
     if (isFirstMount) {
         // Query
-        if (props.syncWithAddressBar) {
-            initialValues = SyncAddressBarHelper_1["default"].restore(__assign(__assign({}, props.initialValues), SyncAddressBarHelper_1["default"].cleanValues(queryString.parse(locationSearch))), props.restoreCustomizer);
+        if (initialQuery) {
+            initialValues = __assign(__assign({}, props.initialValues), initialQuery);
         }
         // Local storage
         if (props.autoSave) {
@@ -123,22 +122,11 @@ function Form(props) {
     }
     // Init data provider
     var provider = props.useRedux ? form_1.providers.redux : form_1.providers.reducer;
-    var _a = provider.useForm(props.formId, initialValues), values = _a.values, isInvalid = _a.isInvalid, isSubmitting = _a.isSubmitting, setErrors = _a.setErrors, reducer = _a.reducer, dispatch = _a.dispatch;
+    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isInvalid = _b.isInvalid, isSubmitting = _b.isSubmitting, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
     // Sync with address bar
     react_use_1.useUpdateEffect(function () {
-        if (props.syncWithAddressBar) {
-            // TODO
-            /*const page = Number(_get(values, 'page', 1));
-            SyncAddressBarHelper.save(
-                components.store,
-                SyncAddressBarHelper.cleanValues({
-                    ...values,
-                    page: page > 1 && page,
-                }),
-                props.useHash,
-            );*/
-        }
-    }, [props.syncWithAddressBar, props.useHash, values]);
+        updateQuery(values);
+    }, [updateQuery, values]);
     // Auto focus
     react_use_1.useMount(function () {
         if (props.autoFocus && process.env.IS_WEB) {
@@ -166,116 +154,128 @@ function Form(props) {
         }
     }, [props, values]);
     // OnSubmit handler
-    var onSubmit = react_1.useCallback(function (e) { return __awaiter(_this, void 0, void 0, function () {
-        var cleanedValues, captchaAttribute, googleCaptcha, captchaToken, options, response, _a, data;
-        var _b;
-        var _this = this;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    // TODO
-                    e.preventDefault();
-                    // Append non touched fields to values object
-                    if (props.formId) {
-                        Object.keys(components.ui.getRegisteredFields(props.formId) || {})
-                            .forEach(function (key) {
-                            if (isUndefined_1["default"](get_1["default"](values, key))) {
-                                set_1["default"](values, key, null);
+    var onSubmit = react_1.useCallback(function (e) {
+        if (e === void 0) { e = null; }
+        return __awaiter(_this, void 0, void 0, function () {
+            var cleanedValues, captchaAttribute, googleCaptcha, captchaToken, options, response, _a, data;
+            var _b;
+            var _this = this;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        // TODO
+                        if (e) {
+                            e.preventDefault();
+                        }
+                        // Append non touched fields to values object
+                        if (props.formId) {
+                            Object.keys(components.ui.getRegisteredFields(props.formId) || {})
+                                .forEach(function (key) {
+                                if (isUndefined_1["default"](get_1["default"](values, key))) {
+                                    set_1["default"](values, key, null);
+                                }
+                            });
+                        }
+                        cleanedValues = form_1.cleanEmptyObject(values);
+                        // Event onBeforeSubmit
+                        if (props.onBeforeSubmit && props.onBeforeSubmit.call(null, cleanedValues) === false) {
+                            return [2 /*return*/, null];
+                        }
+                        if (props.validators) {
+                            validate_1["default"](cleanedValues, props.validators);
+                        }
+                        if (props.onSubmit) {
+                            return [2 /*return*/, props.onSubmit.call(null, cleanedValues)];
+                        }
+                        captchaAttribute = null;
+                        Object.entries(components.ui.getRegisteredFields(props.formId) || {}).forEach(function (_a) {
+                            var attribute = _a[0], fieldType = _a[1];
+                            if (fieldType === 'ReCaptchaField') {
+                                captchaAttribute = attribute;
                             }
                         });
-                    }
-                    cleanedValues = form_1.cleanEmptyObject(values);
-                    // Event onBeforeSubmit
-                    if (props.onBeforeSubmit && props.onBeforeSubmit.call(null, cleanedValues) === false) {
-                        return [2 /*return*/, null];
-                    }
-                    if (props.validators) {
-                        validate_1["default"](cleanedValues, props.validators);
-                    }
-                    if (props.onSubmit) {
-                        return [2 /*return*/, props.onSubmit.call(null, cleanedValues)];
-                    }
-                    captchaAttribute = null;
-                    Object.entries(components.ui.getRegisteredFields(props.formId) || {}).forEach(function (_a) {
-                        var attribute = _a[0], fieldType = _a[1];
-                        if (fieldType === 'ReCaptchaField') {
-                            captchaAttribute = attribute;
+                        if (!(captchaAttribute && components.resource.googleCaptchaSiteKey)) return [3 /*break*/, 3];
+                        return [4 /*yield*/, components.resource.loadGoogleCaptcha()];
+                    case 1:
+                        googleCaptcha = _c.sent();
+                        return [4 /*yield*/, getCaptchaToken({
+                                googleCaptcha: googleCaptcha,
+                                siteKey: components.resource.googleCaptchaSiteKey,
+                                actionName: props.captchaActionName
+                            })];
+                    case 2:
+                        captchaToken = _c.sent();
+                        cleanedValues = __assign(__assign({}, cleanedValues), (_b = {}, _b[captchaAttribute] = captchaToken, _b));
+                        _c.label = 3;
+                    case 3:
+                        options = {
+                            onTwoFactor: props.onTwoFactor
+                                ? function (providerName) { return __awaiter(_this, void 0, void 0, function () {
+                                    var info, _a;
+                                    return __generator(this, function (_b) {
+                                        switch (_b.label) {
+                                            case 0:
+                                                if (!props.autoStartTwoFactor) return [3 /*break*/, 2];
+                                                return [4 /*yield*/, components.http.post("/api/v1/auth/2fa/" + providerName + "/send")];
+                                            case 1:
+                                                _a = _b.sent();
+                                                return [3 /*break*/, 3];
+                                            case 2:
+                                                _a = null;
+                                                _b.label = 3;
+                                            case 3:
+                                                info = _a;
+                                                props.onTwoFactor(providerName, info);
+                                                return [2 /*return*/];
+                                        }
+                                    });
+                                }); }
+                                : undefined
+                        };
+                        if (!(typeof props.action === 'function')) return [3 /*break*/, 5];
+                        return [4 /*yield*/, props.action.call(null, components.api, cleanedValues, options)];
+                    case 4:
+                        _a = _c.sent();
+                        return [3 /*break*/, 7];
+                    case 5: return [4 /*yield*/, components.http.send(props.actionMethod, props.action || window.location.pathname, cleanedValues, options)];
+                    case 6:
+                        _a = _c.sent();
+                        _c.label = 7;
+                    case 7:
+                        response = _a;
+                        // Skip on 2fa
+                        if (response.twoFactor) {
+                            return [2 /*return*/, null];
+                        }
+                        data = response.data || {};
+                        // Event onAfterSubmit
+                        if (props.onAfterSubmit && props.onAfterSubmit.call(null, cleanedValues, data, response) === false) {
+                            return [2 /*return*/, null];
+                        }
+                        if (data.errors) {
+                            setErrors(data.errors);
+                            return [2 /*return*/, null];
+                        }
+                        if (props.onComplete) {
+                            props.onComplete.call(null, cleanedValues, data, response);
+                        }
+                        if (props.autoSave) {
+                            // TODO
+                            //const AutoSaveHelper = require('../ui/form/Form/AutoSaveHelper').default;
+                            //AutoSaveHelper.remove(props.clientStorage, props.formId);
                         }
-                    });
-                    if (!(captchaAttribute && components.resource.googleCaptchaSiteKey)) return [3 /*break*/, 3];
-                    return [4 /*yield*/, components.resource.loadGoogleCaptcha()];
-                case 1:
-                    googleCaptcha = _c.sent();
-                    return [4 /*yield*/, getCaptchaToken({
-                            googleCaptcha: googleCaptcha,
-                            siteKey: components.resource.googleCaptchaSiteKey,
-                            actionName: props.captchaActionName
-                        })];
-                case 2:
-                    captchaToken = _c.sent();
-                    cleanedValues = __assign(__assign({}, cleanedValues), (_b = {}, _b[captchaAttribute] = captchaToken, _b));
-                    _c.label = 3;
-                case 3:
-                    options = {
-                        onTwoFactor: props.onTwoFactor
-                            ? function (providerName) { return __awaiter(_this, void 0, void 0, function () {
-                                var info, _a;
-                                return __generator(this, function (_b) {
-                                    switch (_b.label) {
-                                        case 0:
-                                            if (!props.autoStartTwoFactor) return [3 /*break*/, 2];
-                                            return [4 /*yield*/, components.http.post("/api/v1/auth/2fa/" + providerName + "/send")];
-                                        case 1:
-                                            _a = _b.sent();
-                                            return [3 /*break*/, 3];
-                                        case 2:
-                                            _a = null;
-                                            _b.label = 3;
-                                        case 3:
-                                            info = _a;
-                                            props.onTwoFactor(providerName, info);
-                                            return [2 /*return*/];
-                                    }
-                                });
-                            }); }
-                            : undefined
-                    };
-                    if (!(typeof props.action === 'function')) return [3 /*break*/, 5];
-                    return [4 /*yield*/, props.action(components.api, cleanedValues, options)];
-                case 4:
-                    _a = _c.sent();
-                    return [3 /*break*/, 7];
-                case 5: return [4 /*yield*/, components.http.send(props.actionMethod, props.action || window.location.pathname, cleanedValues, options)];
-                case 6:
-                    _a = _c.sent();
-                    _c.label = 7;
-                case 7:
-                    response = _a;
-                    // Skip on 2fa
-                    if (response.twoFactor) {
-                        return [2 /*return*/, null];
-                    }
-                    data = response.data || {};
-                    // Event onAfterSubmit
-                    if (props.onAfterSubmit && props.onAfterSubmit.call(null, cleanedValues, data, response) === false) {
-                        return [2 /*return*/, null];
-                    }
-                    if (data.errors) {
-                        setErrors(data.errors);
                         return [2 /*return*/, null];
-                    }
-                    if (props.onComplete) {
-                        props.onComplete.call(null, cleanedValues, data, response);
-                    }
-                    if (props.autoSave) {
-                        // TODO
-                        //const AutoSaveHelper = require('../ui/form/Form/AutoSaveHelper').default;
-                        //AutoSaveHelper.remove(props.clientStorage, props.formId);
-                    }
-                    return [2 /*return*/, null];
-            }
+                }
+            });
         });
-    }); }, [components.api, components.http, components.resource, components.ui, props, setErrors, values]);
+    }, [components.api, components.http, components.resource, components.ui, props, setErrors, values]);
+    // Manual submit form by reducer action
+    var prevSubmitCounter = react_use_1.usePrevious(submitCounter);
+    react_use_1.useUpdateEffect(function () {
+        if (submitCounter !== prevSubmitCounter) {
+            onSubmit.call(null);
+        }
+    }, [prevSubmitCounter, submitCounter, onSubmit]);
     var formContextValue = react_1.useMemo(function () { return ({
         formId: props.formId,
         model: props.model,
@@ -294,7 +294,7 @@ function Form(props) {
         ? components.ui.renderView(props.view || 'form.FormView', __assign(__assign({}, props.viewProps), { isInvalid: isInvalid,
             isSubmitting: isSubmitting,
             layout: layout,
-            onSubmit: onSubmit, children: props.children, submitLabel: props.submitLabel, fields: props.fields, className: props.className }))
+            onSubmit: onSubmit, submitLabel: props.submitLabel, fields: props.fields, children: props.children, isBordered: props.isBordered, className: props.className, style: props.style }))
         : props.children));
 }
 Form.defaultProps = {

package/ui/form/Form/demo/basic.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Basic
+ * Обычный пример использования Form.
  * @order 1
  * @col 12
  */

package/ui/form/Form/demo/basic.js

@@ -29,12 +29,12 @@ var DateTimeField_1 = __importDefault(require("../../DateTimeField"));
 var TextField_1 = __importDefault(require("../../TextField"));
 var InputField_1 = __importDefault(require("../../InputField"));
 /**
- * Basic
+ * Обычный пример использования Form.
  * @order 1
  * @col 12
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Form_1["default"], { formId: 'TestForm', useRedux: true, syncWithAddressBar: true, autoFocus: true, fields: [
+    React.createElement(Form_1["default"], { formId: 'TestForm', useRedux: true, syncWithAddressBar: true, autoFocus: true, layout: 'default', size: 'large', fields: [
             {
                 component: InputField_1["default"],
                 attribute: 'email',

package/ui/form/Form/demo/border.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обычный пример включения рамок у компонента Form.
+ * @order 4
+ * @col 12
+ */
+export default _default;

package/ui/form/Form/demo/border.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Form_1 = __importDefault(require("../Form"));
+var DateField_1 = __importDefault(require("../../DateField"));
+var DateTimeField_1 = __importDefault(require("../../DateTimeField"));
+var TextField_1 = __importDefault(require("../../TextField"));
+var InputField_1 = __importDefault(require("../../InputField"));
+/**
+ * Обычный пример включения рамок у компонента Form.
+ * @order 4
+ * @col 12
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Form_1["default"], { isBordered: true, formId: 'TestForm', useRedux: true, syncWithAddressBar: true, autoFocus: true, layout: 'default', size: 'large', fields: [
+            {
+                component: InputField_1["default"],
+                attribute: 'email',
+                label: 'Email'
+            },
+            {
+                component: TextField_1["default"],
+                attribute: 'message',
+                label: 'Message'
+            },
+            {
+                component: DateField_1["default"],
+                attribute: 'date',
+                label: 'Date'
+            },
+            {
+                component: DateTimeField_1["default"],
+                attribute: 'startTime',
+                label: 'Start time'
+            },
+        ], submitLabel: 'Submit', validators: [['Email', 'required']] }))); });

package/ui/form/Form/demo/horizontal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обычный пример использования с прокидыванием свойства layout='horizontal'.
+ * @order 2
+ * @col 12
+ */
+export default _default;

package/ui/form/Form/demo/horizontal.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Form_1 = __importDefault(require("../Form"));
+var DateField_1 = __importDefault(require("../../DateField"));
+var InputField_1 = __importDefault(require("../../InputField"));
+/**
+ * Обычный пример использования с прокидыванием свойства layout='horizontal'.
+ * @order 2
+ * @col 12
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Form_1["default"], { formId: 'TestForm', useRedux: true, syncWithAddressBar: true, autoFocus: true, layout: 'horizontal', size: 'large', fields: [
+            {
+                component: InputField_1["default"],
+                attribute: 'email',
+                label: 'Email'
+            },
+            {
+                component: function () { return React.createElement(InputField_1["default"], null); },
+                attribute: 'message',
+                label: 'Message'
+            },
+            {
+                component: DateField_1["default"],
+                attribute: 'date',
+                label: 'Date'
+            },
+        ], submitLabel: 'Submit', validators: [['Email', 'required']] }))); });

package/ui/form/Form/demo/inline.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обычный пример использования с Form в одну строку с использованием layout='inline'.
+ * @order 3
+ * @col 12
+ */
+export default _default;

package/ui/form/Form/demo/inline.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var Form_1 = __importDefault(require("../Form"));
+var DateField_1 = __importDefault(require("../../DateField"));
+var InputField_1 = __importDefault(require("../../InputField"));
+/**
+ * Обычный пример использования с Form в одну строку с использованием layout='inline'.
+ * @order 3
+ * @col 12
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Form_1["default"], { formId: 'TestForm', useRedux: true, syncWithAddressBar: true, autoFocus: true, layout: 'inline', size: 'large', fields: [
+            {
+                component: form_1.DropDownField,
+                attribute: 'email'
+            },
+            {
+                component: InputField_1["default"],
+                attribute: 'message'
+            },
+            {
+                component: DateField_1["default"],
+                attribute: 'date'
+            },
+        ], submitLabel: 'Submit', validators: [['Email', 'required']] }))); });

package/ui/form/HtmlField/HtmlField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * HtmlField
@@ -44,10 +43,5 @@ export interface IHtmlFieldProps extends IFieldWrapperInputProps, IFieldWrapperO
 export interface IHtmlFieldViewProps extends IHtmlFieldProps {
     onChange: (event: any, editor: any) => void;
 }
-declare const _default: {
-    (props: IFieldWrapperInputProps): JSX.Element;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-};
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IHtmlFieldProps>;
 export default _default;

package/ui/form/HtmlField/demo/basic.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Basic
+ * Обычный пример использования HtmlField.
  * @order 1
  * @col 12
  */

package/ui/form/HtmlField/demo/basic.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var HtmlField_1 = __importDefault(require("../HtmlField"));
 /**
- * Basic
+ * Обычный пример использования HtmlField.
  * @order 1
  * @col 12
  */