@steroidsjs/core 2.1.0-beta.6 → 2.1.1

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
 import { IFieldWrapperInputProps } from '../../form/Field/fieldWrapper';
@@ -42,6 +41,7 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, IDataProvi
 export interface IDropDownFieldViewProps extends Omit<IDropDownFieldProps, 'items'> {
     errors?: string[];
     items: Record<string, unknown>[];
+    selectedItems: Record<string, unknown>[];
     hoveredId: PrimaryKey | any;
     selectedIds: (PrimaryKey | any)[];
     forwardedRef: any;
@@ -63,12 +63,7 @@ export interface IDropDownFieldViewProps extends Omit<IDropDownFieldProps, 'item
     onClose: () => void;
     placeholder: string;
     isAutoComplete?: boolean;
-    searchAutoFocus?: any;
+    isSearchAutoFocus?: boolean;
 }
-declare const _default: {
-    (props: IFieldWrapperInputProps): JSX.Element;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-};
+declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDropDownFieldProps>;
 export default _default;

package/ui/form/DropDownField/DropDownField.js

@@ -23,15 +23,16 @@ function DropDownField(props) {
     var components = hooks_1.useComponents();
     // Query state
     var _a = react_1.useState(''), query = _a[0], setQuery = _a[1];
+    var inputSelectedIds = react_1.useMemo(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
     // Data provider
     var _b = hooks_1.useDataProvider({
         items: props.items,
         dataProvider: props.dataProvider,
         autoComplete: props.autoComplete,
         autoFetch: props.autoFetch,
-        query: query
-    }), items = _b.items, isLoading = _b.isLoading, isAutoComplete = _b.isAutoComplete;
-    var inputSelectedIds = react_1.useMemo(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
+        query: query,
+        initialSelectedIds: inputSelectedIds
+    }), items = _b.items, isLoading = _b.isLoading, isAutoComplete = _b.isAutoComplete, sourceItems = _b.sourceItems;
     // Data select
     var _c = hooks_1.useDataSelect({
         multiple: props.multiple,
@@ -39,8 +40,9 @@ function DropDownField(props) {
         selectedIds: inputSelectedIds,
         primaryKey: props.primaryKey,
         items: items,
+        sourceItems: sourceItems,
         inputValue: props.input.value
-    }), isOpened = _c.isOpened, setIsOpened = _c.setIsOpened, setIsFocused = _c.setIsFocused, hoveredId = _c.hoveredId, setHoveredId = _c.setHoveredId, selectedIds = _c.selectedIds, setSelectedIds = _c.setSelectedIds;
+    }), isOpened = _c.isOpened, setIsOpened = _c.setIsOpened, setIsFocused = _c.setIsFocused, hoveredId = _c.hoveredId, setHoveredId = _c.setHoveredId, selectedIds = _c.selectedIds, setSelectedIds = _c.setSelectedIds, selectedItems = _c.selectedItems;
     var onOpen = react_1.useCallback(function () {
         setQuery('');
         setIsFocused(true);
@@ -65,7 +67,10 @@ function DropDownField(props) {
     }, [setIsFocused, setIsOpened]);
     // Outside click -> close
     var forwardedRef = react_1.useRef(null);
-    react_use_1.useClickAway(forwardedRef, onClose);
+    if (process.env.PLATFORM !== 'mobile') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        react_use_1.useClickAway(forwardedRef, onClose);
+    }
     // Search input props
     var searchInputProps = react_1.useMemo(function () { return ({
         type: 'search',
@@ -76,19 +81,22 @@ function DropDownField(props) {
     // Sync with form
     var prevSelectedIds = react_use_1.usePrevious(selectedIds);
     react_1.useEffect(function () {
-        var _a;
-        if (!isEqual_1["default"](prevSelectedIds, selectedIds)) {
-            var newValues = props.multiple ? selectedIds : ((_a = selectedIds[0]) !== null && _a !== void 0 ? _a : null);
+        if (!isEqual_1["default"](prevSelectedIds || [], selectedIds)) {
+            var newValues = props.multiple ? selectedIds : (selectedIds[0] || null);
             props.input.onChange.call(null, newValues);
             if (props.onChange) {
-                props.onChange(newValues);
+                props.onChange.call(null, newValues);
             }
         }
-        //if form reset
-        if (props.input.value === undefined && selectedIds.length > 0) {
+    }, [prevSelectedIds, props.input.onChange, props.multiple, props.onChange, selectedIds]);
+    // Reset selected ids on form reset
+    var prevInputValue = react_use_1.usePrevious(props.input.value);
+    react_use_1.useUpdateEffect(function () {
+        // if form reset
+        if (prevInputValue && props.input.value === undefined && selectedIds.length > 0) {
             onReset();
         }
-    }, [selectedIds, props.input.onChange, props.multiple, prevSelectedIds, props.attribute, props]);
+    }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
     return components.ui.renderView(props.view || 'form.DropDownFieldView', __assign(__assign({}, props), { isAutoComplete: isAutoComplete,
         items: items,
         hoveredId: hoveredId,
@@ -98,6 +106,7 @@ function DropDownField(props) {
         isOpened: isOpened,
         isLoading: isLoading,
         onOpen: onOpen,
+        selectedItems: selectedItems,
         // TODO onFocus
         // TODO onBlur
         onItemHover: onItemHover,
@@ -113,6 +122,7 @@ DropDownField.defaultProps = {
     className: '',
     autoComplete: false,
     showReset: false,
-    multiple: false
+    multiple: false,
+    isSearchAutoFocus: true
 };
 exports["default"] = fieldWrapper_1["default"]('DropDownField', DropDownField);

package/ui/form/DropDownField/demo/auto-complete.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Auto complete
+ * Использование свойства самозаполнения.
  * @order 5
  * @col 6
  */

package/ui/form/DropDownField/demo/auto-complete.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var DropDownField_1 = __importDefault(require("../DropDownField"));
 var basic_1 = require("./basic");
 /**
- * Auto complete
+ * Использование свойства самозаполнения.
  * @order 5
  * @col 6
  */

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
+/**
+ * Обычный пример использования DropDownField.
+ * @order 1
+ * @col 6
+ */
 export declare const items: {
     id: number;
     label: string;
 }[];
 declare const _default: () => JSX.Element;
-/**
- * Basic
- * @order 1
- * @col 6
- */
 export default _default;

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

@@ -23,8 +23,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.items = void 0;
-var DropDownField_1 = __importDefault(require("../DropDownField"));
 var React = __importStar(require("react"));
+var DropDownField_1 = __importDefault(require("../DropDownField"));
+/**
+ * Обычный пример использования DropDownField.
+ * @order 1
+ * @col 6
+ */
 exports.items = [
     {
         id: 1,
@@ -43,10 +48,5 @@ exports.items = [
         label: 'Fourth'
     },
 ];
-/**
- * Basic
- * @order 1
- * @col 6
- */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
     React.createElement(DropDownField_1["default"], { label: 'Basic', items: exports.items }))); });

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Disabled
+ * Выключенный или недоступный для использования.
  * @order 2
  * @col 6
  */

package/ui/form/DropDownField/demo/disabled.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var DropDownField_1 = __importDefault(require("../DropDownField"));
 var basic_1 = require("./basic");
 /**
- * Disabled
+ * Выключенный или недоступный для использования.
  * @order 2
  * @col 6
  */

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Errors
+ * Обработка ошибок.
  * @order 4
  * @col 6
  */

package/ui/form/DropDownField/demo/errors.js

@@ -26,9 +26,9 @@ var React = __importStar(require("react"));
 var DropDownField_1 = __importDefault(require("../DropDownField"));
 var basic_1 = require("./basic");
 /**
- * Errors
+ * Обработка ошибок.
  * @order 4
  * @col 6
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(DropDownField_1["default"], { label: 'Errors', errors: ['Error 1 text', 'Error 2 text'], items: basic_1.items }))); });
+    React.createElement(DropDownField_1["default"], { label: 'Errors', errors: ['Error 1 text', 'Error 2 text'], layout: true, items: basic_1.items }))); });

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Multiple
+ * С возможность множественного выбора.
  * @order 6
  * @col 6
  */

package/ui/form/DropDownField/demo/multiple.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var DropDownField_1 = __importDefault(require("../DropDownField"));
 var basic_1 = require("./basic");
 /**
- * Multiple
+ * С возможность множественного выбора.
  * @order 6
  * @col 6
  */

package/ui/form/DropDownField/demo/no-border.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * No border
+ * Без полей и рамок.
  * @order 7
  * @col 6
  */

package/ui/form/DropDownField/demo/no-border.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var DropDownField_1 = __importDefault(require("../DropDownField"));
 var basic_1 = require("./basic");
 /**
- * No border
+ * Без полей и рамок.
  * @order 7
  * @col 6
  */

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Search placeholder
+ * С полем для поиска выбора из выпадающего списка.
  * @order 8
  * @col 6
  */

package/ui/form/DropDownField/demo/placeholder.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var DropDownField_1 = __importDefault(require("../DropDownField"));
 var basic_1 = require("./basic");
 /**
- * Search placeholder
+ * С полем для поиска выбора из выпадающего списка.
  * @order 8
  * @col 6
  */

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Required
+ * Как обязательное поле для заполнения.
  * @order 3
  * @col 6
  */

package/ui/form/DropDownField/demo/required.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var DropDownField_1 = __importDefault(require("../DropDownField"));
 var basic_1 = require("./basic");
 /**
- * Required
+ * Как обязательное поле для заполнения.
  * @order 3
  * @col 6
  */

package/ui/form/DropDownField/demo/show-reset.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Show reset
+ * С кнопкой для удаления выбора.
  * @order 9
  * @col 6
  */

package/ui/form/DropDownField/demo/show-reset.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var DropDownField_1 = __importDefault(require("../DropDownField"));
 var basic_1 = require("./basic");
 /**
- * Show reset
+ * С кнопкой для удаления выбора.
  * @order 9
  * @col 6
  */

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Sizes
+ * По-умлочанию DropDownField имеет 3 заданных размера.
  * @order 10
  * @col 6
  */

package/ui/form/DropDownField/demo/size.js

@@ -31,7 +31,7 @@ var sizes = {
     lg: 'Large'
 };
 /**
- * Sizes
+ * По-умлочанию DropDownField имеет 3 заданных размера.
  * @order 10
  * @col 6
  */

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

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

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

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

package/ui/form/Field/demo/component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Field with component
+ * Field с компонентом.
  * @order 3
  * @col 6
  */

package/ui/form/Field/demo/component.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var Field_1 = __importDefault(require("../Field"));
 var DateField_1 = __importDefault(require("../../DateField"));
 /**
- * Field with component
+ * Field с компонентом.
  * @order 3
  * @col 6
  */

package/ui/form/Field/demo/model.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Field with model
+ * Field с прокинутой моделью.
  * @order 2
  * @col 6
  */

package/ui/form/Field/demo/model.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Field_1 = __importDefault(require("../Field"));
 /**
- * Field with model
+ * Field с прокинутой моделью.
  * @order 2
  * @col 6
  */

package/ui/form/Field/fieldWrapper.d.ts

@@ -78,11 +78,11 @@ interface IFieldWrapperOptions {
     list?: boolean;
     attributeSuffixes?: string[];
 }
-declare type FieldWrapperComponent = {
-    (props: IFieldWrapperInputProps): JSX.Element;
+export interface FieldWrapperComponent<T> {
+    (props: IFieldWrapperInputProps & T): JSX.Element;
     WrappedComponent: any;
     displayName: any;
     defaultProps: any;
-};
-export default function fieldWrapper(componentId: any, Component: any, optionsConfig?: IFieldWrapperOptions): FieldWrapperComponent;
+}
+export default function fieldWrapper<T = any>(componentId: any, Component: any, optionsConfig?: IFieldWrapperOptions): FieldWrapperComponent<T>;
 export {};

package/ui/form/FieldLayout/demo/errors.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Errors
+ * Обработка ошибок.
  * @order 3
  * @col 6
  */

package/ui/form/FieldLayout/demo/errors.js

@@ -24,10 +24,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var InputField_1 = __importDefault(require("../../InputField"));
+var FieldLayout_1 = __importDefault(require("../FieldLayout"));
 /**
- * Errors
+ * Обработка ошибок.
  * @order 3
  * @col 6
  */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(InputField_1["default"], { errors: ['The field is filled incorrectly'] }))); });
+exports["default"] = (function () { return (React.createElement(FieldLayout_1["default"], { errors: ['The field is filled incorrectly'] },
+    React.createElement(InputField_1["default"], null))); });

package/ui/form/FieldLayout/demo/layouts.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Inline layout
+ * По-умлочанию FieldLayout имеет 3 заданных ориентации.
  * @order 5
  * @col 12
  */

package/ui/form/FieldLayout/demo/layouts.js

@@ -24,15 +24,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var InputField_1 = __importDefault(require("../../InputField"));
+var FieldLayout_1 = __importDefault(require("../FieldLayout"));
 var layouts = {
     inline: 'Inline',
     "default": 'Default',
     horizontal: 'Horizontal'
 };
 /**
- * Inline layout
+ * По-умлочанию FieldLayout имеет 3 заданных ориентации.
  * @order 5
  * @col 12
  */
-exports["default"] = (function () { return (React.createElement("div", { className: 'row' }, Object.keys(layouts).map(function (layout) { return (React.createElement("div", { className: 'col-12 mb-4', key: layout },
-    React.createElement(InputField_1["default"], { label: layouts[layout], layout: layout }))); }))); });
+exports["default"] = (function () { return (React.createElement("div", { style: { display: 'grid', gridGap: '10px' } }, Object.keys(layouts).map(function (layout) { return (React.createElement(FieldLayout_1["default"], { className: 'col-12 mb-4', key: layout, layout: layout },
+    React.createElement(InputField_1["default"], { label: layouts[layout] }))); }))); });

package/ui/form/FieldLayout/demo/required.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Required
+ * Как обязательное поле для заполнения.
  * @order 2
  * @col 6
  */

package/ui/form/FieldLayout/demo/required.js

@@ -24,10 +24,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var InputField_1 = __importDefault(require("../../InputField"));
+var FieldLayout_1 = __importDefault(require("../FieldLayout"));
 /**
- * Required
+ * Как обязательное поле для заполнения.
  * @order 2
  * @col 6
  */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+exports["default"] = (function () { return (React.createElement(FieldLayout_1["default"], { required: true },
     React.createElement(InputField_1["default"], { required: true, label: 'Required' }))); });

package/ui/form/FieldList/FieldList.d.ts

@@ -118,10 +118,5 @@ export interface IFieldListItemViewProps extends IFieldWrapperOutputProps {
     rowIndex: number;
     showRemove: boolean;
 }
-declare const _default: {
-    (props: IFieldWrapperInputProps): JSX.Element;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-};
+declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IFieldListProps>;
 export default _default;

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

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

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

@@ -28,7 +28,7 @@ var Form_1 = __importDefault(require("../../Form"));
 var InputField_1 = __importDefault(require("../../InputField"));
 var NumberField_1 = __importDefault(require("../../NumberField"));
 /**
- * Basic
+ * Обычный пример использования FieldList.
  * @order 1
  * @col 12
  */

package/ui/form/FieldList/demo/disabled.d.ts

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

package/ui/form/FieldList/demo/disabled.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 FieldList_1 = __importDefault(require("../FieldList"));
+var Form_1 = __importDefault(require("../../Form"));
+var InputField_1 = __importDefault(require("../../InputField"));
+var NumberField_1 = __importDefault(require("../../NumberField"));
+/**
+ * Выключенный или недоступный для использования.
+ * @order 2
+ * @col 12
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Form_1["default"], { formId: 'FieldListForm' },
+        React.createElement(FieldList_1["default"], { disabled: true, attribute: 'items', label: 'Items', initialRowsCount: 2, items: [
+                {
+                    attribute: 'id',
+                    type: 'hidden',
+                    component: InputField_1["default"]
+                },
+                {
+                    label: 'Name',
+                    attribute: 'name',
+                    component: InputField_1["default"]
+                },
+                {
+                    label: 'Description',
+                    attribute: 'description',
+                    component: InputField_1["default"]
+                },
+                {
+                    label: 'Amount',
+                    attribute: 'amount',
+                    component: NumberField_1["default"]
+                },
+            ] })))); });

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

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

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

@@ -28,7 +28,7 @@ var InputField_1 = __importDefault(require("../../InputField"));
 var FieldSet_1 = __importDefault(require("../FieldSet"));
 var DropDownField_1 = __importDefault(require("../../DropDownField"));
 /**
- * Basic
+ * Обычный пример использования FieldSet.
  * @order 1
  * @col 12
  */