@steroidsjs/core 3.0.0-beta.1 → 3.0.0-beta.100

package/ui/form/EmailField/EmailField.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable max-len */
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../../hooks");
+var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+var useInputTypeEmail_1 = __importDefault(require("./hooks/useInputTypeEmail"));
+/**
+ * EmailField
+ * Поле для ввода почты
+ */
+function EmailField(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var onInputChange = (0, useInputTypeEmail_1["default"])(currentInputRef, onChange, props.input.value).onInputChange;
+    var onClear = react_1["default"].useCallback(function () { return props.input.onChange(''); }, [props.input]);
+    var inputProps = react_1["default"].useMemo(function () {
+        var _a;
+        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onInputChange, type: 'text', placeholder: props.placeholder, disabled: props.disabled, required: props.required }, props.inputProps));
+    }, [onInputChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, props.required]);
+    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign({}, props), { inputProps: inputProps, inputRef: currentInputRef, onClear: onClear }));
+}
+EmailField.defaultProps = {
+    size: 'md',
+    disabled: false,
+    required: false,
+    showClear: false,
+    maskOptions: null
+};
+exports["default"] = (0, fieldWrapper_1["default"])('EmailField', EmailField);

package/ui/form/EmailField/hooks/useInputTypeEmail.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const useInputTypeEmail: (currentInputRef: React.MutableRefObject<HTMLInputElement>, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void, currentValue: string | null | undefined) => {
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export default useInputTypeEmail;

package/ui/form/EmailField/hooks/useInputTypeEmail.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable max-len */
+/* eslint-disable no-unused-expressions */
+var react_1 = __importDefault(require("react"));
+var DEFAULT_VALIDITY = __('Неправильный формат адреса электронной почты.');
+var useInputTypeEmail = function (currentInputRef, onChange, currentValue) {
+    var isValueEmail = function (value) {
+        //In that case it's testing if value is empty string or not defined
+        if (!value) {
+            return false;
+        }
+        var emailRegexp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return emailRegexp.test(value.toLowerCase());
+    };
+    var errorMessage = isValueEmail(currentValue) ? '' : DEFAULT_VALIDITY;
+    react_1["default"].useEffect(function () {
+        var _a;
+        (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(errorMessage);
+    }, [currentInputRef, currentValue, errorMessage]);
+    var onInputChange = function (event) {
+        onChange(event);
+    };
+    return {
+        onInputChange: onInputChange
+    };
+};
+exports["default"] = useInputTypeEmail;

package/ui/form/EmailField/index.d.ts

@@ -0,0 +1,2 @@
+import EmailField from './EmailField';
+export default EmailField;

package/ui/form/EmailField/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var EmailField_1 = __importDefault(require("./EmailField"));
+exports["default"] = EmailField_1["default"];

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

@@ -3,8 +3,9 @@ import { IFieldWrapperInputProps } from './fieldWrapper';
 import { Model } from '../../../components/MetaComponent';
 /**
  * Field
- * Компонент, который рендерит соответствующее поле, исходя из переданной модели и названия аттрибута.
- * По дефолту будет отрендерен InputField.
+ *
+ * Компонент, который рендерит соответствующее поле, исходя из переданной модели и названия атрибута.
+ * По умолчанию будет отрендерен InputField.
  * Также можно не использовать модель, а передавать компонент поля напрямую через пропсы.
  */
 export interface IFieldProps extends IFieldWrapperInputProps {

package/ui/form/Field/Field.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -40,13 +44,14 @@ var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var hooks_1 = require("../../../hooks");
 var Form_1 = require("../Form/Form");
 function Field(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     // Get model
-    var context = react_1.useContext(Form_1.FormContext);
-    var fieldModel = react_1.useMemo(function () {
+    var context = (0, react_1.useContext)(Form_1.FormContext);
+    var fieldModel = (0, react_1.useMemo)(function () {
         var _a;
         var model = props.model || context.model;
-        var result = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || [])
+        var modelAttributes = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || []);
+        var result = modelAttributes
             .find(function (field) { return field.attribute === props.attribute; });
         return result || {};
     }, [components, props.model, context.model, props.attribute]);
@@ -54,12 +59,12 @@ function Field(props) {
         || fieldModel.searchField
         || fieldModel.field
         || 'InputField';
-    var ComponentField = isString_1["default"](component)
-        ? components.ui.getField("form." + component)
+    var ComponentField = (0, isString_1["default"])(component)
+        ? components.ui.getField("form.".concat(component))
         : component;
     var componentProps = __assign(__assign(__assign(__assign({}, fieldModel), props), fieldModel.fieldProps), fieldModel.searchFieldProps);
     // Render
-    return isFunction_1["default"](ComponentField)
+    return (0, isFunction_1["default"])(ComponentField)
         ? ComponentField(componentProps)
         : React.createElement(ComponentField, __assign({}, componentProps));
 }

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

@@ -41,12 +41,16 @@ export interface IFieldWrapperInputProps {
      */
     placeholder?: string;
     /**
-     * Шаблон для поля, который настраивает его расположение внутри формы.
-     * Если false, то поле будет отрендерено без шаблона.
-     * @example 'horizontal'
+     * Input ID для связи поля с label
      */
-    layout?: FormLayout;
+    id?: string;
+    /**
+    * Значение для поля
+    */
     value?: any;
+    /**
+    * Callback-функция, которая вызывается при изменении данных
+    */
     onChange?: (...args: any[]) => any;
     /**
      * Ошибки в поле
@@ -54,25 +58,42 @@ export interface IFieldWrapperInputProps {
      */
     errors?: string[];
     date?: any;
-    /**
-     * Темная тема
-     */
-    dark?: boolean;
     /**
      * Размер поля
      */
     size?: Size;
+    /**
+     * Дополнительный CSS-класс для обертки FieldLayout
+     */
+    fieldLayoutClassName?: CssClassName;
+    /**
+     * Возможность отрендерить поле без обертки в компонент FieldLayout
+     */
+    isRenderWithoutFieldLayout?: boolean;
     [key: string]: any;
 }
+export interface IInputParams {
+    name?: string;
+    value?: any;
+    onChange: (value: any) => void;
+}
 export interface IFieldWrapperOutputProps {
+    /**
+    * Id формы
+    */
     formId?: string;
+    /**
+    * Id компонента
+    */
     componentId?: string;
+    /**
+    * Коллекция ошибок
+    */
     errors?: string[];
-    input?: {
-        name?: string;
-        value?: any;
-        onChange: (value: any) => void;
-    };
+    /**
+    * Параметры для input элемента
+    */
+    input?: IInputParams;
 }
 interface IFieldWrapperOptions {
     label?: boolean;
@@ -85,5 +106,5 @@ export interface FieldWrapperComponent<T> {
     displayName: any;
     defaultProps: any;
 }
-export default function fieldWrapper<T = any>(componentId: any, Component: any, optionsConfig?: IFieldWrapperOptions): FieldWrapperComponent<T>;
+export default function fieldWrapper<T = any>(componentId: string, Component: any, optionsConfig?: IFieldWrapperOptions): FieldWrapperComponent<T>;
 export {};

package/ui/form/Field/fieldWrapper.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -41,13 +45,13 @@ var form_1 = require("../../../utils/form");
 var Form_1 = require("../Form/Form");
 var FieldLayout_1 = __importDefault(require("../FieldLayout/FieldLayout"));
 var hooks_1 = require("../../../hooks");
-var getKey = function (baseName, attribute) { return baseName + upperFirst_1["default"](attribute || ''); };
+var getKey = function (baseName, attribute) { return baseName + (0, upperFirst_1["default"])(attribute || ''); };
 var createDynamicField = function (componentId, Component, options) {
     var DynamicField = function (props) {
-        var components = hooks_1.useComponents();
+        var components = (0, hooks_1.useComponents)();
         // Get context, formId
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        var context = props.formId !== false ? react_1.useContext(Form_1.FormContext) : null;
+        var context = props.formId !== false ? (0, react_1.useContext)(Form_1.FormContext) : null;
         var formId = props.formId || props.formId === false ? props.formId : ((context === null || context === void 0 ? void 0 : context.formId) || null);
         var model = props.model || (context === null || context === void 0 ? void 0 : context.model) || null;
         // Result wrapper props
@@ -75,7 +79,7 @@ var createDynamicField = function (componentId, Component, options) {
                 value = providerResult.value;
                 setValue = providerResult.setValue;
             }
-            else if (has_1["default"](props, 'value') && has_1["default"](props, 'onChange')) {
+            else if ((0, has_1["default"])(props, 'value') && (0, has_1["default"])(props, 'onChange')) {
                 // Controlled component via props
                 errors = null;
                 value = props.value;
@@ -91,7 +95,7 @@ var createDynamicField = function (componentId, Component, options) {
             // Set errors
             wrapperProps[errorsKey] = errors;
             // Input object
-            wrapperProps[inputKey] = react_1.useMemo(function () { return ({
+            wrapperProps[inputKey] = (0, react_1.useMemo)(function () { return ({
                 name: name,
                 value: value,
                 onChange: setValue
@@ -110,9 +114,9 @@ function fieldWrapper(componentId, Component, optionsConfig) {
     }; }
     var options = __assign(__assign({}, optionsConfig), { attributeSuffixes: optionsConfig.attributeSuffixes || [''] });
     var NewComponent = function (props) {
-        var components = hooks_1.useComponents();
+        var components = (0, hooks_1.useComponents)();
         // Get context, formId
-        var context = react_1.useContext(Form_1.FormContext);
+        var context = (0, react_1.useContext)(Form_1.FormContext);
         var model = props.model || (context === null || context === void 0 ? void 0 : context.model) || null;
         var attributesProps = options.attributeSuffixes.reduce(function (obj, suffix) {
             var attributeKey = getKey('attribute', suffix);
@@ -121,16 +125,16 @@ function fieldWrapper(componentId, Component, optionsConfig) {
         }, {});
         var attribute = Object.values(attributesProps)[0];
         // Get UI props and create Field Class dynamically (for add field props - input, errors, model, ...)
-        var metaProps = react_1.useMemo(function () { return components.ui.getFieldProps(componentId, model, attribute); }, [components.ui, attribute, model]);
+        var metaProps = (0, react_1.useMemo)(function () { return components.ui.getFieldProps(componentId, model, attribute); }, [components.ui, attribute, model]);
         if (!Component.DynamicField) {
             Component.DynamicField = createDynamicField(componentId, Component, options);
         }
-        // Resolve layout
-        var layout = react_1.useMemo(function () { return form_1.mergeLayoutProp(context.layout, props.layout); }, [context.layout, props.layout]);
-        if (layout !== null) {
-            return components.ui.renderView(FieldLayout_1["default"], __assign(__assign({}, attributesProps), { layout: layout, size: props.size || context.size || null, required: has_1["default"](props, 'required') ? props.required : metaProps.required, label: options.label === false ? null : (has_1["default"](props, 'label') ? props.label : metaProps.label), hint: has_1["default"](props, 'hint') ? props.hint : metaProps.hint, errors: props.errors, children: (React.createElement(Component.DynamicField, __assign({}, props))) }));
+        var uniqueId = (0, hooks_1.useUniqueId)('input');
+        var inputId = props.id || uniqueId;
+        if (props.isRenderWithoutFieldLayout) {
+            return components.ui.renderView(Component.DynamicField, props);
         }
-        return components.ui.renderView(Component.DynamicField, props);
+        return components.ui.renderView(FieldLayout_1["default"], __assign(__assign({}, attributesProps), { className: props.fieldLayoutClassName, size: props.size || context.size || null, required: (0, has_1["default"])(props, 'required') ? props.required : metaProps.required, label: options.label === false ? null : ((0, has_1["default"])(props, 'label') ? props.label : metaProps.label), hint: (0, has_1["default"])(props, 'hint') ? props.hint : metaProps.hint, errors: props.errors, id: inputId, children: (React.createElement(Component.DynamicField, __assign({}, props, { id: inputId }))) }));
     };
     NewComponent.WrappedComponent = Component;
     NewComponent.displayName = componentId;

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

@@ -1,16 +1,18 @@
 import * as React from 'react';
 /**
  * FieldLayout
- * Специальный шаблон для поля, который настраивает его расположение внутри формы, рендерит лейбл, подсказки и ошибки
+ *
+ * Специальный шаблон для поля, который настраивает его расположение внутри формы, рендерит лейбл, подсказки и ошибки.
+ *
  */
-export interface IFieldLayoutProps {
+export interface IFieldLayoutProps extends IUiComponent {
     /**
      * Название поля либо отмена отображение поля (false)
      * @example 'Visible'
      */
     label?: string | boolean | any;
     /**
-     * Подсказка, которая отображается, когда в поле нет ошибок и layout !== 'inline'
+     * Подсказка, которая отображается, когда в поле нет ошибок
      * @example 'Save'
      */
     hint?: string | boolean;
@@ -20,37 +22,28 @@ export interface IFieldLayoutProps {
      * @example true
      */
     required?: boolean;
-    /**
-     * Выбор шаблона для расположения поля. Если false, то поле будет отрендерено без шаблона
-     * @example 'inline'
-     */
-    layout?: FormLayout;
     /**
      * Ошибки в поле
      * @example 'Field is required'
      */
     errors?: string[];
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
+     * Отображать ли состояние successful на поле
+     * @example 'true'
      */
-    layoutView?: CustomView;
+    successful?: boolean;
     [key: string]: any;
 }
 export interface IFieldLayoutViewProps {
     label: string | boolean | any;
     required: boolean;
     hint: string | boolean;
-    errors: string | string[];
-    layout?: {
-        layout: FormLayoutName | boolean;
-        className?: string;
-        style?: any;
-        label: boolean;
-        cols: number[];
-        [key: string]: any;
-    };
+    errors: string[];
+    successful: boolean;
+    id: string;
+    size: Size;
     children?: React.ReactNode;
+    className?: string;
 }
 declare function FieldLayout(props: IFieldLayoutProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FieldLayout>;

package/ui/form/FieldLayout/FieldLayout.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -35,23 +39,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var get_1 = __importDefault(require("lodash-es/get"));
-var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
-var form_1 = require("../../../utils/form");
-var defaultProps = {
-    layout: {
-        layout: 'default',
-        cols: [3, 6]
-    }
-};
 function FieldLayout(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     // Error from state
-    var errors = hooks_1.useForm().formSelector(function (state) { return get_1["default"](state, 'errors.' + props.attribute); });
-    var layout = react_1.useMemo(function () { return form_1.mergeLayoutProp(defaultProps.layout, props.layout); }, [props.layout]);
-    if (layout === false) {
-        return props.children;
-    }
-    return components.ui.renderView(props.layoutView || 'form.FieldLayoutView', __assign(__assign({}, props), { errors: props.errors || errors, layout: layout }));
+    var errors = (0, hooks_1.useForm)().formSelector(function (state) { return (0, get_1["default"])(state, 'errors.' + props.attribute); });
+    return components.ui.renderView(props.view || 'form.FieldLayoutView', __assign(__assign({}, props), { errors: props.errors || errors }));
 }
 exports["default"] = React.memo(FieldLayout);

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

@@ -4,7 +4,7 @@ import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Fi
  * FieldList
  * Создает список из сгруппированных полей формы
  */
-interface IFieldListItem extends IFieldWrapperInputProps {
+export interface IFieldListItem extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Будет ли отображён item ?
      * @example true
@@ -20,22 +20,17 @@ interface IFieldListItem extends IFieldWrapperInputProps {
      * @example Your text...
      */
     placeholder?: string;
-    /**
-     * Дополнительный CSS-класс для item
-     */
-    className?: CssClassName;
     /**
      * Дополнительный CSS-класс для заголовка
      */
     headerClassName?: CssClassName;
     /**
-     * Переопределение view React компонента для кастомизации отображения item
-     * @example MyCustomView
+     * Заголовок для колонки таблицы.
      */
-    view?: CustomView;
+    title?: string;
     [key: string]: any;
 }
-export interface IFieldListProps extends IFieldWrapperInputProps {
+export interface IFieldListProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Начальные значения в полях
      * @example {name: 'Ivan', amount: 5}
@@ -62,19 +57,10 @@ export interface IFieldListProps extends IFieldWrapperInputProps {
      * @example true
      */
     showRemove?: boolean;
-    /**
-     * Дополнительный CSS-класс для списка с группами полей
-     */
-    className?: CssClassName;
     /**
      * Дополнительный CSS-класс для таблицы
      */
     tableClassName?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения списка с группами полей
-     * @example MyCustomView
-     */
-    view?: any;
     /**
      * Пропсы для компонента отображения списка с группами полей - FieldListView
      */
@@ -94,6 +80,10 @@ export interface IFieldListProps extends IFieldWrapperInputProps {
      * @example true
      */
     enableKeyboardNavigation?: boolean;
+    /**
+     * Добавляет эффект зебры к таблице
+     */
+    hasAlternatingColors?: boolean;
     [key: string]: any;
 }
 export interface IFieldListViewProps {
@@ -105,12 +95,13 @@ export interface IFieldListViewProps {
     showRemove?: boolean;
     showAdd?: boolean;
     children?: React.ReactNode;
-    className?: string;
+    className?: CssClassName;
     tableClassName?: string;
-    style?: any;
+    style?: CustomStyle;
     forwardedRef?: any;
     disabled?: boolean;
     size?: Size;
+    hasAlternatingColors?: boolean;
 }
 export interface IFieldListItemViewProps extends IFieldWrapperOutputProps {
     items?: (IFieldListItem & {

package/ui/form/FieldList/FieldList.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -45,51 +49,50 @@ var tableNavigationHandler_1 = __importStar(require("./tableNavigationHandler"))
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 function FieldList(props) {
     var _a;
-    var components = hooks_1.useComponents();
-    var context = react_1.useContext(Form_1.FormContext);
+    var components = (0, hooks_1.useComponents)();
+    var context = (0, react_1.useContext)(Form_1.FormContext);
     // Resolve model
     var modelAttributes = (_a = components.meta.getModel(props.model)) === null || _a === void 0 ? void 0 : _a.attributes;
     var dispatch = context.provider.useDispatch();
     // Add and Remove handlers
-    var onAdd = react_1.useCallback(function (rowsCount) {
+    var onAdd = (0, react_1.useCallback)(function (rowsCount) {
         if (rowsCount === void 0) { rowsCount = 1; }
-        dispatch(form_1.formArrayAdd(context.formId, props.input.name, rowsCount, props.initialValues));
+        dispatch((0, form_1.formArrayAdd)(context.formId, props.input.name, rowsCount, props.initialValues));
     }, [context.formId, dispatch, props.initialValues, props.input.name]);
-    var onRemove = react_1.useCallback(function (rowIndex) {
-        dispatch(form_1.formArrayRemove(context.formId, props.input.name, rowIndex));
+    var onRemove = (0, react_1.useCallback)(function (rowIndex) {
+        dispatch((0, form_1.formArrayRemove)(context.formId, props.input.name, rowIndex));
     }, [context.formId, dispatch, props.input.name]);
     // Add initial rows
-    react_use_1.useMount(function () {
+    (0, react_use_1.useMount)(function () {
         if (!props.input.value) {
             onAdd(props.initialRowsCount);
         }
     });
     // Keyboard navigation
-    var nodeRef = react_1.useRef();
-    var onKeyDown = react_1.useCallback(function (event) {
-        if (props.enableKeyboardNavigation && tableNavigationHandler_1.isDescendant(nodeRef.current, event.target)) {
-            tableNavigationHandler_1["default"](event, function () { return onAdd(); });
+    var nodeRef = (0, react_1.useRef)();
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        if (props.enableKeyboardNavigation && (0, tableNavigationHandler_1.isDescendant)(nodeRef.current, event.target)) {
+            (0, tableNavigationHandler_1["default"])(event, function () { return onAdd(); });
         }
     }, [onAdd, props.enableKeyboardNavigation]);
-    react_use_1.useEvent('keydown', onKeyDown);
+    (0, react_use_1.useEvent)('keydown', onKeyDown);
     // Rows items
-    var items = react_1.useMemo(function () { return (props.items || [])
+    var items = (0, react_1.useMemo)(function () { return (props.items || [])
         .filter(function (field) { return field.visible !== false; })
         .map(function (field) {
         if (typeof field === 'string') {
             field = { attribute: field };
         }
-        return __assign(__assign(__assign({}, (modelAttributes || []).find(function (attributeItem) { return attributeItem.attribute === field.attribute; })), field), { disabled: isBoolean_1["default"](field.disabled) ? field.disabled : props.disabled, size: field.size || props.size });
+        return __assign(__assign(__assign({}, (modelAttributes || []).find(function (attributeItem) { return attributeItem.attribute === field.attribute; })), field), { disabled: (0, isBoolean_1["default"])(field.disabled) ? field.disabled : props.disabled, size: field.size || props.size });
     }); }, [modelAttributes, props.disabled, props.items, props.size]);
-    var contextValue = react_1.useMemo(function () { return ({
+    var contextValue = (0, react_1.useMemo)(function () { return ({
         formId: props.formId,
         model: props.model,
         prefix: props.prefix,
         size: props.size,
-        layout: props.layout,
         provider: context.provider,
         reducer: context.reducer
-    }); }, [context.provider, context.reducer, props.formId, props.layout, props.model, props.prefix, props.size]);
+    }); }, [context.provider, context.reducer, props.formId, props.model, props.prefix, props.size]);
     var commonProps = {
         showAdd: props.showAdd,
         showRemove: props.showRemove,
@@ -103,7 +106,7 @@ function FieldList(props) {
     var FieldListView = props.view || components.ui.getView('form.FieldListView');
     var FieldListItemView = props.itemView || components.ui.getView('form.FieldListItemView');
     return (React.createElement(Form_1.FormContext.Provider, { value: contextValue },
-        React.createElement(FieldListView, __assign({}, props.viewProps, commonProps, { forwardedRef: nodeRef, onAdd: onAdd }), range_1["default"](props.input.value || 0)
+        React.createElement(FieldListView, __assign({}, props.viewProps, commonProps, { forwardedRef: nodeRef, onAdd: onAdd, hasAlternatingColors: props.hasAlternatingColors }), (0, range_1["default"])(props.input.value || 0)
             .map(function (index) { return (React.createElement(FieldListItemView, __assign({}, props.itemViewProps, commonProps, { key: index, onRemove: onRemove, prefix: props.input.name + '.' + index, rowIndex: index }))); }))));
 }
 FieldList.defaultProps = {
@@ -116,4 +119,4 @@ FieldList.defaultProps = {
     initialRowsCount: 1,
     enableKeyboardNavigation: true
 };
-exports["default"] = fieldWrapper_1["default"]('FieldList', FieldList, { list: true });
+exports["default"] = (0, fieldWrapper_1["default"])('FieldList', FieldList, { list: true });

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

@@ -21,13 +21,13 @@ export interface IFieldSetProps extends IFormContext {
      */
     view?: CustomView;
     /**
-     * Дополнительный CSS-класс для \<fieldset\>...\<\/fieldset\>
+     * Дополнительный CSS-класс для '<fieldset>...</fieldset>'
      */
     className?: CssClassName;
     [key: string]: any;
 }
 export interface IFieldSetViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
     label?: string | any;
 }