@steroidsjs/core 3.0.0-beta.91 → 3.0.0-beta.93

package/ui/content/Kanban/hooks/useKanban.d.ts

@@ -1,4 +1,4 @@
-import { IDragEndResult, IKanbanColumn } from '../Kanban';
+import { IDragEndResult, IKanbanColumn, IKanbanTask, ITaskAssigner, ITaskTag } from '../Kanban';
 export interface IKanbanConfig {
     /**
      * Идентификатор канбан доски
@@ -6,20 +6,65 @@ export interface IKanbanConfig {
      */
     kanbanId?: string;
     /**
-     * Колонки канбан доски
+     * Коллекция с наименованиями и свойствами колонок в таблице
+     * @example [
+     *             {
+     *              id: 1,
+     *              title: 'column 1',
+     *              tasks: [{ content: 'item 1', id: 1 }],
+     *             },
+     *             {
+     *              id: 2,
+     *              title: 'column 2',
+     *              tasks: [],
+     *             }
+     *          ]
      */
-    columns?: IKanbanColumn[];
+    columns: IKanbanColumn[];
+    /**
+     * Массив тегов для задач
+     */
+    tags?: ITaskTag[];
+    /**
+     * Массив исполнителей, которых можно назначить для выполнения задачи
+     */
+    assigners?: ITaskAssigner[];
     /**
      * Обработчик события окончания перетаскивания карточки или колонки
+     * В result передается объект с информацией о событии
+     * @example {
+     *     draggableId: 1,
+     *     type: 'task',
+     *     source: {
+     *         index: 0,
+     *         droppableId: 2
+     *     },
+     *     reason: 'DROP',
+     *     mode: 'FLUID',
+     *     destination: {
+     *         droppableId: 2,
+     *         index: 1
+     *     },
+     *     combine: null
+     * }
+     */
+    onDragEnd?: (result: IDragEndResult) => void;
+    /**
+     * Обработчик события создания карточки
+     */
+    onCreateTask?: (kanbanId: string, columnId: number, task: IKanbanTask) => void;
+    /**
+     * Обработчик события редактирования карточки
+     */
+    onEditTask?: (task: IKanbanTask) => void;
+    /**
+     * Идентификатор последней созданной задачи, нужен для определения последовательности id для новых задач
      */
-    onDragEnd: (result: IDragEndResult) => void;
+    lastTaskId?: number;
 }
-export declare const DEFAULT_COLUMNS: {
-    id: string;
-    title: string;
-    tasks: any[];
-}[];
 export default function useKanban(config: IKanbanConfig): {
     columns: any;
     onDragEnd: (result: any) => void;
+    onOpenTaskDetailsModal: (task: any, columnId: any) => void;
+    onOpenCreateTaskModal: (columnId: any) => void;
 };

package/ui/content/Kanban/hooks/useKanban.js

@@ -1,37 +1,73 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+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;
+};
 exports.__esModule = true;
-exports.DEFAULT_COLUMNS = void 0;
+var react_1 = __importStar(require("react"));
 var react_use_1 = require("react-use");
-var react_1 = require("react");
+var modal_1 = require("../../../../actions/modal");
 var hooks_1 = require("../../../../hooks");
+var enums_1 = require("../enums");
 var reducers_1 = require("../reducers");
 var actions_1 = require("../actions");
+var modalAndFormIds_1 = require("../constants/modalAndFormIds");
 var COLUMNS_DROPPABLE_ID = 'all-columns';
-exports.DEFAULT_COLUMNS = [
-    {
-        id: 'column-1',
-        title: 'TO DO',
-        tasks: []
-    },
-    {
-        id: 'column-2',
-        title: 'IN PROGRESS',
-        tasks: []
-    },
-    {
-        id: 'column-3',
-        title: 'IN REVIEW',
-        tasks: []
-    },
-    {
-        id: 'column-4',
-        title: 'DONE',
-        tasks: []
-    },
-];
+var INITIAL_TASK_ID = 1;
+var normalizeAssignersForDropDownItems = function (assigners) { return assigners.map(function (assigner) {
+    var _a, _b;
+    return ({
+        id: assigner.id,
+        label: "".concat(assigner.firstName || '', " ").concat(assigner.lastName || ''),
+        contentType: assigner.avatar ? 'img' : 'icon',
+        contentSrc: (_b = (_a = assigner.avatar) === null || _a === void 0 ? void 0 : _a.src) !== null && _b !== void 0 ? _b : 'user'
+    });
+}); };
+var normalizeEditTaskFormForState = function (id, data, assigners, tags) { return ({
+    id: id,
+    title: data.title || '',
+    description: data.description || '',
+    fullDescription: data.fullDescription || '',
+    priority: enums_1.KanbanPrioritiesEnum.getPriorityById(data.priority),
+    assigner: assigners.find(function (user) { return user.id === data.assigner; }) || null,
+    tags: data.tags && tags && tags.filter(function (tag) { return data.tags.includes(tag.id); })
+}); };
 function useKanban(config) {
-    // Get kanban from redux state
-    var kanban = (0, hooks_1.useSelector)(function (state) { return (0, reducers_1.getKanban)(state, config.kanbanId); });
+    var _a = (0, hooks_1.useSelector)(function (state) { return ({
+        kanban: (0, reducers_1.getKanban)(state, config.kanbanId),
+        lastTaskId: (0, reducers_1.getLastTaskId)(state, config.kanbanId),
+        tags: (0, reducers_1.getKanbanTags)(state, config.kanbanId)
+    }); }), kanban = _a.kanban, lastTaskId = _a.lastTaskId, tags = _a.tags;
     var dispatch = (0, hooks_1.useDispatch)();
     // move card
     var moveCard = (0, react_1.useCallback)(function (source, destination) {
@@ -41,6 +77,64 @@ function useKanban(config) {
     var moveColumn = (0, react_1.useCallback)(function (source, destination) {
         dispatch((0, actions_1.kanbanMoveColumn)(config.kanbanId, source, destination));
     }, [config.kanbanId, dispatch]);
+    var components = (0, hooks_1.useComponents)();
+    var onCreateTask = react_1["default"].useCallback(function (_, data) {
+        var newTaskId = lastTaskId ? lastTaskId + 1 : INITIAL_TASK_ID;
+        var newTask = normalizeEditTaskFormForState(newTaskId, data, config.assigners, tags);
+        if (config.onCreateTask) {
+            config.onCreateTask(config.kanbanId, data.columnId, newTask);
+        }
+        var toDispatch = [
+            (0, actions_1.kanbanAddTask)(config.kanbanId, data.columnId, newTask),
+            (0, actions_1.kanbanIncreaseTaskId)(config.kanbanId, newTaskId),
+            (0, modal_1.closeModal)(modalAndFormIds_1.CREATE_TASK_MODAL_ID),
+        ];
+        dispatch(toDispatch);
+    }, [config, dispatch, lastTaskId, tags]);
+    var onEditTask = react_1["default"].useCallback(function (id, data, prevColumnId) {
+        var editedTask = normalizeEditTaskFormForState(id, data, config.assigners, tags);
+        if (config.onEditTask) {
+            config.onEditTask(editedTask);
+        }
+        var toDispatch = [
+            (0, actions_1.kanbanEditTask)(config.kanbanId, data.columnId, prevColumnId, editedTask),
+            (0, modal_1.closeModal)(modalAndFormIds_1.EDIT_TASK_MODAL_ID),
+        ];
+        dispatch(toDispatch);
+    }, [config, dispatch, tags]);
+    // common modal
+    var KanbanModalView = components.ui.getView('content.KanbanModalView');
+    var createOrEditTaskCommonModalProps = react_1["default"].useMemo(function () { return ({
+        columns: kanban === null || kanban === void 0 ? void 0 : kanban.columns,
+        assigners: normalizeAssignersForDropDownItems(config.assigners || []),
+        tags: tags
+    }); }, [config.assigners, kanban === null || kanban === void 0 ? void 0 : kanban.columns, tags]);
+    // create task modal
+    var onOpenCreateTaskModal = react_1["default"].useCallback(function (columnId) {
+        if (columnId) {
+            dispatch((0, modal_1.openModal)(KanbanModalView, __assign(__assign({}, createOrEditTaskCommonModalProps), { modalId: modalAndFormIds_1.CREATE_TASK_MODAL_ID, modalType: enums_1.KanbanModalTypeEnum.CREATE, title: enums_1.KanbanModalTypeEnum.getLabel(enums_1.KanbanModalTypeEnum.CREATE), formId: modalAndFormIds_1.CREATE_TASK_FORM_ID, columnId: columnId, onSubmit: onCreateTask })));
+        }
+    }, [KanbanModalView, createOrEditTaskCommonModalProps, dispatch, onCreateTask]);
+    // task details modal
+    var onOpenTaskDetailsModal = react_1["default"].useCallback(function (task, columnId) {
+        if (task && columnId) {
+            dispatch((0, modal_1.openModal)(KanbanModalView, {
+                modalId: modalAndFormIds_1.EDIT_TASK_MODAL_ID,
+                modalType: enums_1.KanbanModalTypeEnum.DETAILS,
+                title: "#".concat(task.id, " ").concat(task.title),
+                task: task,
+                tags: tags,
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                onToggleModalType: function () { return onOpenEditTaskModal(task, columnId); }
+            }));
+        }
+    }, [KanbanModalView, dispatch, kanban]);
+    // edit task modal
+    var onOpenEditTaskModal = react_1["default"].useCallback(function (task, columnId) {
+        if (task && columnId) {
+            dispatch((0, modal_1.openModal)(KanbanModalView, __assign(__assign({}, createOrEditTaskCommonModalProps), { modalId: modalAndFormIds_1.EDIT_TASK_MODAL_ID, modalType: enums_1.KanbanModalTypeEnum.EDIT, title: enums_1.KanbanModalTypeEnum.getLabel(enums_1.KanbanModalTypeEnum.EDIT), formId: modalAndFormIds_1.EDIT_TASK_FORM_ID, columnId: columnId, onSubmit: onEditTask, onToggleModalType: function () { return onOpenTaskDetailsModal(task, columnId); } })));
+        }
+    }, [KanbanModalView, createOrEditTaskCommonModalProps, dispatch, onEditTask, onOpenTaskDetailsModal]);
     var onDragEnd = function (result) {
         if (config.onDragEnd) {
             config.onDragEnd(result);
@@ -64,13 +158,17 @@ function useKanban(config) {
         if (!kanban) {
             dispatch((0, actions_1.kanbanInit)(config.kanbanId, {
                 kanbanId: config.kanbanId,
-                columns: config.columns || exports.DEFAULT_COLUMNS
+                columns: config.columns || null,
+                tags: config.tags || null,
+                lastTaskId: config.lastTaskId || null
             }));
         }
     });
     return {
         columns: kanban === null || kanban === void 0 ? void 0 : kanban.columns,
-        onDragEnd: onDragEnd
+        onDragEnd: onDragEnd,
+        onOpenTaskDetailsModal: onOpenTaskDetailsModal,
+        onOpenCreateTaskModal: onOpenCreateTaskModal
     };
 }
 exports["default"] = useKanban;

package/ui/content/Kanban/reducers/index.d.ts

@@ -1,3 +1,3 @@
-import kanban, { getKanban } from './kanban';
-export { getKanban };
+import kanban, { getKanban, getLastTaskId, getKanbanTags, getKanbanPriorities } from './kanban';
+export { getKanban, getLastTaskId, getKanbanTags, getKanbanPriorities };
 export default kanban;

package/ui/content/Kanban/reducers/index.js

@@ -23,7 +23,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 exports.__esModule = true;
-exports.getKanban = void 0;
+exports.getKanbanPriorities = exports.getKanbanTags = exports.getLastTaskId = exports.getKanban = void 0;
 var kanban_1 = __importStar(require("./kanban"));
 exports.getKanban = kanban_1.getKanban;
+exports.getLastTaskId = kanban_1.getLastTaskId;
+exports.getKanbanTags = kanban_1.getKanbanTags;
+exports.getKanbanPriorities = kanban_1.getKanbanPriorities;
 exports["default"] = kanban_1["default"];

package/ui/content/Kanban/reducers/kanban.d.ts

@@ -1,5 +1,9 @@
+export declare const getKanbanColumns: (state: any, kanbanId: any) => any;
 declare const _default: (state: {
     kanbans: {};
 }, action: any) => any;
 export default _default;
 export declare const getKanban: (state: any, kanbanId: any) => any;
+export declare const getLastTaskId: (state: any, kanbanId: any) => any;
+export declare const getKanbanTags: (state: any, kanbanId: any) => any;
+export declare const getKanbanPriorities: (state: any, kanbanId: any) => any;

package/ui/content/Kanban/reducers/kanban.js

@@ -24,13 +24,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _a;
 exports.__esModule = true;
-exports.getKanban = void 0;
+exports.getKanbanPriorities = exports.getKanbanTags = exports.getLastTaskId = exports.getKanban = exports.getKanbanColumns = void 0;
 var get_1 = __importDefault(require("lodash-es/get"));
 var actions_1 = require("../actions");
 var initialState = {
     kanbans: {}
 };
 var getKanbanColumns = function (state, kanbanId) { return (0, get_1["default"])(state, ['kanbans', kanbanId, 'columns']) || []; };
+exports.getKanbanColumns = getKanbanColumns;
 var reducerMap = (_a = {},
     _a[actions_1.KANBAN_INIT] = function (state, action) {
         var _a;
@@ -39,13 +40,13 @@ var reducerMap = (_a = {},
     _a[actions_1.KANBAN_MOVE_TASK] = function (state, action) {
         var _a;
         if (state.kanbans[action.kanbanId]) {
-            var columns = getKanbanColumns(state, action.kanbanId);
-            var sourceColumn = columns.find(function (column) { return column.id === action.source.droppableId; });
+            var columns = (0, exports.getKanbanColumns)(state, action.kanbanId);
+            var sourceColumn = columns.find(function (column) { return column.id === Number(action.source.droppableId); });
             var sourceTasks = sourceColumn.tasks;
             var removedTask = sourceTasks.splice(action.source.index, 1)[0];
             // move task to different column
             if (action.source.droppableId !== action.destination.droppableId) {
-                var destinationColumn = columns.find(function (column) { return column.id === action.destination.droppableId; });
+                var destinationColumn = columns.find(function (column) { return column.id === Number(action.destination.droppableId); });
                 var destinationTasks = destinationColumn.tasks;
                 destinationTasks.splice(action.destination.index, 0, removedTask);
             }
@@ -59,13 +60,51 @@ var reducerMap = (_a = {},
     _a[actions_1.KANBAN_MOVE_COLUMN] = function (state, action) {
         var _a;
         if (state.kanbans[action.kanbanId]) {
-            var columns = getKanbanColumns(state, action.kanbanId);
+            var columns = (0, exports.getKanbanColumns)(state, action.kanbanId);
             var removedColumn = columns.splice(action.source.index, 1)[0];
             columns.splice(action.destination.index, 0, removedColumn);
             return __assign(__assign({}, state), { kanbans: __assign(__assign({}, state.kanbans), (_a = {}, _a[action.kanbanId] = __assign(__assign({}, state.kanbans[action.kanbanId]), { columns: __spreadArray([], columns, true) }), _a)) });
         }
         return [];
     },
+    _a[actions_1.KANBAN_ADD_TASK] = function (state, action) {
+        var _a;
+        if (state.kanbans[action.kanbanId]) {
+            var columns = (0, exports.getKanbanColumns)(state, action.kanbanId);
+            var sourceColumn = columns.find(function (column) { return column.id === action.columnId; });
+            var sourceTasks = sourceColumn.tasks;
+            sourceTasks.unshift(action.task);
+            return __assign(__assign({}, state), { kanbans: __assign(__assign({}, state.kanbans), (_a = {}, _a[action.kanbanId] = __assign(__assign({}, state.kanbans[action.kanbanId]), { columns: __spreadArray([], columns, true) }), _a)) });
+        }
+        return [];
+    },
+    _a[actions_1.KANBAN_EDIT_TASK] = function (state, action) {
+        var _a;
+        if (state.kanbans[action.kanbanId]) {
+            var columns = (0, exports.getKanbanColumns)(state, action.kanbanId);
+            var sourceColumn = columns.find(function (column) { return column.tasks.find(function (task) { return task.id === action.task.id; }); });
+            var sourceTasks = sourceColumn.tasks;
+            // move to different column
+            if (action.columnId !== action.prevColumnId) {
+                var destinationColumn = columns.find(function (column) { return column.id === action.columnId; });
+                var destinationTasks = destinationColumn.tasks;
+                var taskIndex = sourceTasks.findIndex(function (task) { return task.id === action.task.id; });
+                var removedTask = sourceTasks.splice(taskIndex, 1)[0];
+                destinationTasks.unshift(removedTask);
+                Object.assign(removedTask, action.task);
+            }
+            else {
+                var sourceTask = sourceTasks.find(function (task) { return task.id === action.task.id; });
+                Object.assign(sourceTask, action.task);
+            }
+            return __assign(__assign({}, state), { kanbans: __assign(__assign({}, state.kanbans), (_a = {}, _a[action.kanbanId] = __assign(__assign({}, state.kanbans[action.kanbanId]), { columns: __spreadArray([], columns, true) }), _a)) });
+        }
+        return [];
+    },
+    _a[actions_1.KANBAN_INCREASE_TASK_ID] = function (state, action) {
+        var _a;
+        return (__assign(__assign({}, state), { kanbans: __assign(__assign({}, state.kanbans), (_a = {}, _a[action.kanbanId] = __assign(__assign({}, state.kanbans[action.kanbanId]), { lastTaskId: action.lastTaskId }), _a)) }));
+    },
     _a);
 exports["default"] = (function (state, action) {
     if (state === void 0) { state = initialState; }
@@ -75,3 +114,9 @@ exports["default"] = (function (state, action) {
 });
 var getKanban = function (state, kanbanId) { return (0, get_1["default"])(state, ['kanban', 'kanbans', kanbanId]) || null; };
 exports.getKanban = getKanban;
+var getLastTaskId = function (state, kanbanId) { return (0, get_1["default"])(state, ['kanban', 'kanbans', kanbanId, 'lastTaskId']) || null; };
+exports.getLastTaskId = getLastTaskId;
+var getKanbanTags = function (state, kanbanId) { return (0, get_1["default"])(state, ['kanban', 'kanbans', kanbanId, 'tags']) || null; };
+exports.getKanbanTags = getKanbanTags;
+var getKanbanPriorities = function (state, kanbanId) { return (0, get_1["default"])(state, ['kanban', 'kanbans', kanbanId, 'priorities']) || null; };
+exports.getKanbanPriorities = getKanbanPriorities;

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

@@ -0,0 +1,6 @@
+import { IBaseFieldProps } from '../InputField/InputField';
+import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
+export interface IEmailFieldProps extends IBaseFieldProps, IFieldWrapperInputProps {
+}
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IEmailFieldProps>;
+export default _default;

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/FieldSet/FieldSet.d.ts

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

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

@@ -28,6 +28,9 @@ interface IFileFieldCommonProps extends IFileInput {
  * Компонент `FileField` представляет собой поле формы для загрузки файлов.
  * Он использует хук `useFile` для управления состоянием файлов и выполнения операций с файлами, таких как выбор и удаление.
  * Компонент поддерживает различные варианты отображения файлов (список или стена) с помощью перечисления `FilesLayout`.
+ * На backendUrl по дефолту файл отправляется в теле запроса в виде бинарного кода.
+ * Чтобы отправлять файл в виде form-data (например в таком виде принимает файл FileModule в библиотеке steroidsjs/nest),
+ * нужно передать в `FileField` пропс uploaderConfig, в котором нужно указать поле useFormData: true.
  **/
 export interface IFileFieldProps extends IFieldWrapperInputProps, IFileFieldCommonProps, IUiComponent {
     /**

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

@@ -116,7 +116,7 @@ export interface IFormProps extends IUiComponent {
      */
     addressBar?: boolean | IAddressBarConfig;
     /**
-     * Если в форме есть элементы \<input\>, то произойдет автоматическая фокусировка на первом из них
+     * Если в форме есть элементы '<input>', то произойдет автоматическая фокусировка на первом из них
      * @example true
      */
     autoFocus?: boolean;

package/ui/form/InputField/InputField.d.ts

@@ -3,7 +3,7 @@ import { InputHTMLAttributes, ReactNode } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 export declare const MASK_PRESETS: {
-    date: MaskitoOptions;
+    date: Required<MaskitoOptions>;
     phone: {
         mask: any[];
     };
@@ -11,7 +11,7 @@ export declare const MASK_PRESETS: {
         mask: any[];
     };
 };
-type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | string;
+export type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | string;
 export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Свойства для элемента input
@@ -48,7 +48,7 @@ export interface IInputFieldProps extends IBaseFieldProps {
     textBefore?: number | ReactNode | string;
     /**
      * Изображение или React-нода, которая будет отрендерена справа от поля.
-     * @example require('icon.png') | <component/>
+     * @example require('icon.png') | '<component/>'
      */
     textAfter?: number | ReactNode | string;
     /**

package/ui/form/InputField/InputField.js

@@ -47,12 +47,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.MASK_PRESETS = void 0;
+/* eslint-disable no-unused-expressions */
+/* eslint-disable max-len */
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_2 = require("@maskito/react");
 var kit_1 = require("@maskito/kit");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
+var useInputFieldWarningByType_1 = require("./hooks/useInputFieldWarningByType");
 exports.MASK_PRESETS = {
     date: (0, kit_1.maskitoDateOptionsGenerator)({
         mode: 'dd/mm/yyyy'
@@ -93,6 +96,7 @@ function InputField(props) {
             maskedInputRef(inputRef.current);
         }
     }, [inputRef, maskedInputRef]);
+    (0, useInputFieldWarningByType_1.useInputFieldWarningByType)(props.type);
     var onClear = React.useCallback(function () { return props.input.onChange(''); }, [props.input]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
@@ -102,7 +106,9 @@ function InputField(props) {
     if (props.type === 'hidden') {
         return null;
     }
-    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, inputRef: inputRef, onClear: onClear }));
+    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, 
+        // If type was recognized as unsupported in InputField, then we do not pass ref.
+        inputRef: useInputFieldWarningByType_1.INPUT_TYPES_SUPPORTED_SELECTION.includes(props.type) ? inputRef : null, onClear: onClear }));
 }
 InputField.defaultProps = {
     type: 'text',

package/ui/form/InputField/hooks/useInputFieldWarningByType.d.ts

@@ -0,0 +1,3 @@
+import { IElementInputType } from '../InputField';
+export declare const INPUT_TYPES_SUPPORTED_SELECTION: string[];
+export declare const useInputFieldWarningByType: (type: IElementInputType) => void;

package/ui/form/InputField/hooks/useInputFieldWarningByType.js

@@ -0,0 +1,35 @@
+"use strict";
+exports.__esModule = true;
+exports.useInputFieldWarningByType = exports.INPUT_TYPES_SUPPORTED_SELECTION = void 0;
+/* eslint-disable max-len */
+/* eslint-disable no-unused-expressions */
+var react_use_1 = require("react-use");
+exports.INPUT_TYPES_SUPPORTED_SELECTION = ['text', 'search', 'tel', 'url', 'password'];
+var INPUT_TYPES_REPLACEMENT_HASH = {
+    email: 'EmailField',
+    date: 'DateField',
+    month: 'DateField',
+    week: 'CalendarSystem',
+    time: 'DateTimeField',
+    'datetime-local': 'DateField',
+    number: 'NumberField',
+    range: 'SliderField',
+    checkbox: 'CheckboxField',
+    radio: 'RadioField',
+    button: 'Button',
+    file: 'FileField',
+    submit: 'Button',
+    image: 'Button',
+    reset: 'Button'
+};
+var useInputFieldWarningByType = function (type) {
+    (0, react_use_1.useMount)(function () {
+        if (!exports.INPUT_TYPES_SUPPORTED_SELECTION.includes(type)) {
+            var recommendedUiComponent = "<".concat(INPUT_TYPES_REPLACEMENT_HASH[type], " />");
+            INPUT_TYPES_REPLACEMENT_HASH[type]
+                ? console.warn("<InputField /> with \"".concat(type, "\" type does not support setSelectionRange() method. Try to use ").concat(recommendedUiComponent, " instead."))
+                : console.warn("< InputField /> with \"".concat(type, "\" type does not support setSelectionRange() method.Try to use native <input /> tag."));
+        }
+    });
+};
+exports.useInputFieldWarningByType = useInputFieldWarningByType;

package/ui/form/NumberField/hooks/useInputTypeNumber.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface IInputTypeNumberProps {
     max: any;
     min: any;
-    value: any;
+    value: string | undefined | null;
 }
 declare const useInputTypeNumber: (currentInputRef: React.MutableRefObject<HTMLInputElement>, inputTypeNumberProps: IInputTypeNumberProps, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void) => {
     onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;