@steroidsjs/core 3.1.8 → 3.1.9

package/src/ui/content/CopyToClipboard/CopyToClipboard.js

@@ -0,0 +1,95 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+exports.__esModule = true;
+/* eslint-disable no-unused-expressions */
+var react_1 = require("react");
+var notifications_1 = require("../../../actions/notifications");
+var hooks_1 = require("../../../hooks");
+var DEFAULT_NOTIFICATION_LEVEL = 'info';
+function CopyToClipboard(props) {
+    var _this = this;
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, react_1.useState)(false), isCopied = _a[0], setIsCopied = _a[1];
+    var dispatch = (0, hooks_1.useDispatch)();
+    var notification = props.notification;
+    var onClick = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
+        var dispatchAction;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (props.disabled) {
+                        return [2 /*return*/];
+                    }
+                    if (!!isCopied) return [3 /*break*/, 3];
+                    if (!navigator.clipboard) return [3 /*break*/, 2];
+                    return [4 /*yield*/, navigator.clipboard.writeText(props.value)];
+                case 1:
+                    _a.sent();
+                    if (props.onCopy) {
+                        props.onCopy();
+                    }
+                    _a.label = 2;
+                case 2:
+                    if (notification) {
+                        dispatchAction = typeof notification === 'string'
+                            ? (0, notifications_1.showNotification)(notification, DEFAULT_NOTIFICATION_LEVEL)
+                            : (0, notifications_1.showNotification)(notification.message, notification.level || DEFAULT_NOTIFICATION_LEVEL, notification.params);
+                        dispatch(dispatchAction);
+                    }
+                    setIsCopied(true);
+                    setTimeout(function () { return setIsCopied(false); }, 1000);
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [dispatch, isCopied, notification, props]);
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        disabled: props.disabled,
+        showCopyIcon: props.showCopyIcon,
+        icon: props.icon,
+        children: props.children,
+        className: props.className,
+        style: props.style,
+        onClick: onClick
+    }); }, [onClick, props.children, props.className, props.disabled, props.icon, props.showCopyIcon, props.style]);
+    return components.ui.renderView(props.view || 'content.CopyToClipboardView', viewProps);
+}
+CopyToClipboard.defaultProps = {
+    showCopyIcon: true
+};
+exports["default"] = CopyToClipboard;

package/src/ui/content/Kanban/Kanban.d.ts

@@ -0,0 +1,124 @@
+/// <reference types="react" />
+import { KanbanModalTypeEnum } from './enums';
+import { IKanbanConfig } from './hooks/useKanban';
+import { IBem } from '../../../hooks/useBem';
+import { IDropDownFieldItem } from '../../form/DropDownField/DropDownField';
+import { IModalProps } from '../../modal/Modal/Modal';
+export interface ITaskTag {
+    id: number;
+    message: string;
+    type: string;
+}
+export interface ITaskAssigner {
+    id: number;
+    firstName?: string;
+    lastName?: string;
+    avatar?: {
+        src: string;
+    };
+}
+export interface ITaskPriority {
+    id: number;
+    type: string;
+}
+export interface IKanbanTask {
+    id: number;
+    title: string;
+    description?: string;
+    fullDescription?: string;
+    priority?: ITaskPriority;
+    assigner?: ITaskAssigner;
+    tags?: ITaskTag[];
+}
+export interface IDragEndResult {
+    draggableId: number;
+    type: string;
+    source: {
+        index: number;
+        droppableId: number;
+    };
+    reason: string;
+    mode: string;
+    destination: {
+        droppableId: number;
+        index: number;
+    };
+    combine: null;
+}
+export interface IKanbanColumn {
+    id: number;
+    title: string;
+    tasks: IKanbanTask[];
+}
+export interface IKanbanModalViewProps extends IModalProps, Pick<IKanbanConfig, 'createTaskEditorConfig'> {
+    modalType: KanbanModalTypeEnum;
+    formId: string;
+    columns: IKanbanColumn[];
+    columnId: string;
+    assigners: IDropDownFieldItem[];
+    submitButtonLabel: string;
+    onSubmit: (id: string | null, data: any, columnId: string) => void;
+    onToggleModalType?: () => void;
+    task?: IKanbanTask;
+    tags?: ITaskTag[];
+}
+export interface ICreateOrEditTaskModalContentViewProps extends Omit<IKanbanModalViewProps, 'modalType'> {
+    bem: IBem;
+}
+export interface IKanbanTaskDetailsModalViewProps extends IModalProps {
+    bem: IBem;
+    task: IKanbanTask;
+}
+/**
+ * Kanban
+ *
+ * Компонент `Kanban` позволяет создать доску для управления задачами.
+ * Количество столбцов задается с помощью пропа `columns`.
+ * Задачи на доске можно создавать, редактировать и перемещать с визуальным отображением.
+ *
+ * Для работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`
+ * и передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`
+ * компоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.
+ *
+ * Для корректной работы функционала создания задач,
+ * необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react v3.0.2` и `@steroidsjs/ckeditor5 v27.0.2-rc.2`,
+ * затем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.
+ * Импортированные компоненты нужно передать в проп `createTaskEditorConfig`,
+ * в поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.
+ */
+export interface IKanbanProps extends IKanbanConfig, IUiComponent {
+    /**
+     * Компонент обертка для инициализации области куда можно переместить элемент из библиотеки react-beautiful-dnd
+     * @example Droppable
+     */
+    droppableComponent: any;
+    /**
+     * Компонент обертка для регистрации элемента который можно переместить из библиотеки react-beautiful-dnd
+     * @example Draggable
+     */
+    draggableComponent: any;
+    /**
+     * Общий контекст обертка из библиотеки react-beautiful-dnd
+     * @example DragDropContext
+     */
+    dndContext: any;
+    [key: string]: any;
+}
+export interface IKanbanTaskViewProps {
+    task: IKanbanTask;
+    columnId: string;
+    index: number;
+    draggableComponent: any;
+    onOpenTaskDetailsModal: (task: IKanbanTask, columnId: string) => void;
+}
+export interface IKanbanColumnViewProps {
+    column: IKanbanColumn;
+    columnIndex: number;
+    droppableComponent: any;
+    draggableComponent: any;
+    task?: IKanbanTask;
+    renderTask: (task: IKanbanTask, columnId: number, index: number) => JSX.Element;
+    onOpenCreateTaskModal: (columnId: number) => void;
+}
+export type IKanbanViewProps = IKanbanProps;
+export default function Kanban(props: IKanbanProps): JSX.Element;

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

@@ -0,0 +1,83 @@
+import { IHtmlFieldProps } from '../../../form/HtmlField/HtmlField';
+import { IDragEndResult, IKanbanColumn, IKanbanTask, ITaskAssigner, ITaskTag } from '../Kanban';
+export interface IKanbanConfig {
+    /**
+     * Идентификатор канбан доски
+     * @example TasksKanban
+     */
+    kanbanId?: string;
+    /**
+     * Коллекция с наименованиями и свойствами колонок в таблице
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   title: 'column 1',
+     *   tasks: [
+     *    {
+     *      content: 'item 1',
+     *      id: 1
+     *    }
+     *    ],
+     *  },
+     *  {
+     *   id: 2,
+     *   title: 'column 2',
+     *   tasks: [],
+     *  }
+     * ]
+     */
+    columns: IKanbanColumn[];
+    /**
+     * Массив тегов для задач
+     */
+    tags?: ITaskTag[];
+    /**
+     * Массив исполнителей, которых можно назначить для выполнения задачи
+     */
+    assigners?: ITaskAssigner[];
+    /**
+     * Компоненты для подключения wysiwyg редактора
+     * @example CKEditor
+     */
+    createTaskEditorConfig: Pick<IHtmlFieldProps, 'htmlComponent' | 'editorConstructor'>;
+    /**
+     * Обработчик события окончания перетаскивания карточки или колонки
+     * В 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?: (kanbanId: string, columnId: number, task: IKanbanTask) => void;
+    /**
+     * Идентификатор последней созданной задачи, нужен для определения последовательности id для новых задач
+     */
+    lastTaskId?: number;
+}
+export default function useKanban(config: IKanbanConfig): {
+    columns: any;
+    onDragEnd: (result: any) => void;
+    onOpenTaskDetailsModal: (task: any, columnId: any) => void;
+    onOpenCreateTaskModal: (columnId: any) => void;
+};

package/src/ui/form/DateField/DateField.d.ts

@@ -0,0 +1,45 @@
+import { MaskitoOptions } from '@maskito/core';
+import { RefCallback } from 'react';
+import { IDateInputStateInput, IDateInputStateOutput } from './useDateInputState';
+import { IAbsolutePositioningInputProps } from '../../../hooks/useAbsolutePositioning';
+import { ICalendarProps } from '../../content/Calendar/Calendar';
+/**
+ * DateField
+ *
+ * Поле ввода с выпадающим календарём для выбора даты.
+ *
+ * Компонент `DateField` предоставляет возможность создания поля ввода с календарём для выбора даты.
+ * Он предоставляет пользователю удобный интерфейс для выбора даты с помощью календаря,
+ * а также поддерживает настройку формата отображения даты и другие параметры.
+ */
+export interface IDateFieldProps extends IDateInputStateInput, IUiComponent, Pick<IAbsolutePositioningInputProps, 'autoPositioning'> {
+    /**
+     * Свойства для view компонента
+     */
+    viewProps?: CustomViewProps;
+    /**
+     * Свойства для компонента Calendar
+     */
+    calendarProps?: ICalendarProps;
+    /**
+     * Опции маски для поля ввода
+     */
+    maskOptions?: MaskitoOptions;
+    /**
+     * Ограничение доступных дат.
+     */
+    disabledDays?: {
+        after?: Date;
+        before?: Date;
+    };
+    [key: string]: any;
+}
+export interface IDateFieldViewProps extends IDateInputStateOutput, Pick<IDateFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'className' | 'calendarProps' | 'autoPositioning'> {
+    /**
+     * Ref для input элемента, который накладывает маску
+     */
+    maskInputRef?: RefCallback<HTMLElement>;
+    [key: string]: any;
+}
+declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateFieldProps>;
+export default _default;

package/src/ui/form/DateField/useDateRange.d.ts

@@ -0,0 +1,21 @@
+import { IDateInputStateInput } from './useDateInputState';
+interface IUseDateRangeProps extends Pick<IDateInputStateInput, 'displayFormat' | 'valueFormat' | 'useUTC' | 'dateInUTC'> {
+    onCloseFrom: any;
+    onCloseTo: any;
+    onClearFrom: any;
+    onClearTo: any;
+    inputPropsFrom: any;
+    inputPropsTo: any;
+    inputTo: any;
+    inputFrom: any;
+    useSmartFocus: boolean;
+    hasInitialFocus: boolean;
+}
+export default function useDateRange(props: IUseDateRangeProps): {
+    focus: "to" | "from";
+    onClose: () => void;
+    onClear: () => void;
+    extendedInputPropsFrom: any;
+    extendedInputPropsTo: any;
+};
+export {};

package/src/ui/form/DateField/useDateRange.js

@@ -0,0 +1,112 @@
+"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;
+var dayjs_1 = __importDefault(require("dayjs"));
+var isNil_1 = __importDefault(require("lodash-es/isNil"));
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var calendar_1 = require("../../../utils/calendar");
+var isOneRangeValueEmpty = function (valueFrom, valueTo) { return !valueFrom || !valueTo; };
+function useDateRange(props) {
+    // Tracking focus for input being edited
+    var _a = (0, react_1.useState)('from'), focus = _a[0], setFocus = _a[1];
+    var isFirstMount = (0, react_use_1.useFirstMountState)();
+    // Refs to handle auto-focus
+    var valueFromRef = (0, react_1.useRef)('');
+    var valueToRef = (0, react_1.useRef)('');
+    // Close handler
+    var onClose = (0, react_1.useCallback)(function () {
+        if (focus === 'from') {
+            props.onCloseFrom();
+        }
+        else {
+            props.onCloseTo();
+        }
+        valueFromRef.current = '';
+        valueToRef.current = '';
+    }, [focus, props]);
+    // Clear handler
+    var onClear = (0, react_1.useCallback)(function () {
+        props.onClearFrom();
+        props.onClearTo();
+        valueFromRef.current = '';
+        valueToRef.current = '';
+    }, [props]);
+    // Custom onFocus for inputFrom
+    var inputFromRef = (0, react_1.useRef)(null);
+    var onFocusFrom = (0, react_1.useCallback)(function (e) {
+        props.inputPropsFrom.onFocus.call(null, e);
+        setFocus('from');
+    }, [props.inputPropsFrom.onFocus]);
+    var extendedInputPropsFrom = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputPropsFrom), { onFocus: onFocusFrom, ref: inputFromRef })); }, [onFocusFrom, props.inputPropsFrom]);
+    // Custom onFocus for inputTo
+    var inputToRef = (0, react_1.useRef)(null);
+    var onFocusTo = (0, react_1.useCallback)(function (e) {
+        props.inputPropsTo.onFocus.call(null, e);
+        setFocus('to');
+    }, [props.inputPropsTo.onFocus]);
+    var extendedInputPropsTo = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputPropsTo), { onFocus: onFocusTo, ref: inputToRef })); }, [onFocusTo, props.inputPropsTo]);
+    var prevValueFrom = (0, react_use_1.usePrevious)(props.inputFrom.value);
+    var prevValueTo = (0, react_use_1.usePrevious)(props.inputTo.value);
+    (0, react_1.useEffect)(function () {
+        if (!props.hasInitialFocus && isFirstMount) {
+            return;
+        }
+        if ((0, isNil_1["default"])(props.inputFrom.value) && (0, isNil_1["default"])(props.inputTo.value)) {
+            return;
+        }
+        if (props.useSmartFocus && isOneRangeValueEmpty(props.inputFrom.value, props.inputTo.value)) {
+            if (focus === 'from' && !valueToRef.current && prevValueFrom !== props.inputFrom.value) {
+                valueFromRef.current = props.inputFrom.value;
+                inputToRef.current.focus();
+            }
+            if (focus === 'to' && !valueFromRef.current && prevValueTo !== props.inputTo.value) {
+                valueToRef.current = props.inputTo.value;
+                inputFromRef.current.focus();
+            }
+        }
+        else if (props.hasInitialFocus && isFirstMount) {
+            inputFromRef.current.focus();
+        }
+        // eslint-disable-next-line max-len
+    }, [focus, isFirstMount, onClose, prevValueFrom, prevValueTo, props, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange, props.inputTo.value]);
+    // Swap start and end dates if start date is later than end date
+    (0, react_1.useEffect)(function () {
+        if (props.inputFrom.value
+            && props.inputTo.value
+            && ((0, dayjs_1["default"])(props.inputTo.value).isBefore((0, dayjs_1["default"])(props.inputFrom.value)))) {
+            var convertedDateFrom = (0, calendar_1.convertDate)(props.inputFrom.value, props.valueFormat, props.valueFormat, props.useUTC, props.dateInUTC);
+            var convertedDateTo = (0, calendar_1.convertDate)(props.inputTo.value, props.valueFormat, props.valueFormat, props.useUTC, props.dateInUTC);
+            props.inputFrom.onChange.call(null, convertedDateTo);
+            props.inputTo.onChange.call(null, convertedDateFrom);
+        }
+    }, [props.dateInUTC,
+        props.inputFrom.onChange,
+        props.inputFrom.value,
+        props.inputTo.onChange,
+        props.inputTo.value,
+        props.useUTC,
+        props.valueFormat,
+    ]);
+    return {
+        focus: focus,
+        onClose: onClose,
+        onClear: onClear,
+        extendedInputPropsFrom: extendedInputPropsFrom,
+        extendedInputPropsTo: extendedInputPropsTo
+    };
+}
+exports["default"] = useDateRange;

package/src/ui/form/DateTimeField/utils.js

@@ -0,0 +1,90 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+exports.__esModule = true;
+exports.createDateTimeMask = void 0;
+var kit_1 = require("@maskito/kit");
+var utils_1 = require("../TimeField/utils");
+var TIME_REGEXP = /(\d{2}:\d{2})$/;
+var clampTime = function (minutes, fromMin, toMin, step) {
+    // Жёсткие границы
+    if (minutes <= fromMin) {
+        return fromMin;
+    }
+    if (minutes >= toMin) {
+        return toMin;
+    }
+    if (!step || step <= 1) {
+        return minutes;
+    }
+    // Округление относительно from
+    var diff = minutes - fromMin;
+    return fromMin + Math.floor(diff / step) * step;
+};
+var createDateTimeMask = function (options) {
+    var _a;
+    var baseMask = (0, kit_1.maskitoDateTimeOptionsGenerator)({
+        dateMode: 'dd/mm/yyyy',
+        timeMode: 'HH:MM',
+        dateSeparator: '.',
+        min: options.min,
+        dateTimeSeparator: options.dateTimeSeparator
+    });
+    return __assign(__assign({}, baseMask), { postprocessors: __spreadArray(__spreadArray([], ((_a = baseMask.postprocessors) !== null && _a !== void 0 ? _a : []), true), [
+            function (_a) {
+                var value = _a.value, selection = _a.selection;
+                if (!value) {
+                    return {
+                        value: value,
+                        selection: selection
+                    };
+                }
+                var match = value.match(TIME_REGEXP);
+                if (!match) {
+                    return {
+                        value: value,
+                        selection: selection
+                    };
+                }
+                var time = match[1];
+                var minutes = (0, utils_1.timeToMinutes)(time);
+                var fromMin = (options === null || options === void 0 ? void 0 : options.from)
+                    ? (0, utils_1.timeToMinutes)(options.from.padStart(5, '0'))
+                    : 0;
+                var toMin = (options === null || options === void 0 ? void 0 : options.to)
+                    ? (0, utils_1.timeToMinutes)(options.to.padStart(5, '0'))
+                    : 24 * 60 - 1;
+                var clamped = clampTime(minutes, fromMin, toMin, options === null || options === void 0 ? void 0 : options.minuteStep);
+                var normalizedTime = (0, utils_1.minutesToTime)(clamped);
+                if (normalizedTime === time) {
+                    return {
+                        value: value,
+                        selection: selection
+                    };
+                }
+                return {
+                    value: value.replace(TIME_REGEXP, normalizedTime),
+                    selection: selection
+                };
+            },
+        ], false) });
+};
+exports.createDateTimeMask = createDateTimeMask;

package/src/ui/form/DateTimeRangeField/DateTimeRangeField.d.ts

@@ -0,0 +1,108 @@
+import { MaskitoOptions } from '@maskito/core';
+import { ICalendarProps } from '../../content/Calendar/Calendar';
+import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
+import { IDateRangeButton, IDateRangeFieldProps } from '../DateRangeField/DateRangeField';
+/**
+ * DateTimeRangeField
+ *
+ * Поле ввода дипазона двух дат со временем, с выпадающим календарём.
+ *
+ * Компонент `DateTimeRangeField` предоставляет возможность создания поля ввода для выбора диапазона двух дат с временем
+ * с помощью выпадающих списков и календаря.
+ * Он объединяет функциональность компонента `DateRangeField` для выбора диапазона дат и компонента `DateTimeField` для выбора времени.
+ */
+export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'inputProps' | 'input'>, Omit<IFieldWrapperInputProps, 'attribute'>, IUiComponent {
+    /**
+    * Аттрибут (название) поля в форме
+    * @example 'fromTime'
+    */
+    attributeFrom?: string;
+    /**
+     * Аттрибут (название) поля в форме
+     * @example 'toTime'
+     */
+    attributeTo?: string;
+    /**
+     * Свойства для поля 'from'
+     */
+    inputPropsFrom?: Record<string, unknown>;
+    /**
+     * Свойства для поля 'to'
+     */
+    inputPropsTo?: Record<string, unknown>;
+    /**
+     * Свойства для компонента панели времени
+     */
+    timePanelViewProps?: any;
+    /**
+     * Свойства для компонента Calendar
+     */
+    calendarProps?: ICalendarProps;
+    /**
+     * Устанавливать ли фокус и показывать календарь сразу после рендера страницы
+     * @example true
+     */
+    hasInitialFocus?: boolean;
+    /**
+    * Опции маски для полей
+    */
+    maskOptions?: {
+        /**
+        * Опции маски для поля from
+        */
+        from: MaskitoOptions;
+        /**
+        * Опции маски для поля to
+        */
+        to: MaskitoOptions;
+    };
+    /**
+     * Ограничение доступных дат.
+     */
+    disabledDays?: {
+        after?: Date;
+        before?: Date;
+    };
+    /**
+     * Разделитель для даты и времени, не влияет на отображение
+     */
+    dateTimeSeparator?: string;
+    /**
+     * Ограничение доступного времени.
+     */
+    availableTime?: {
+        from: string;
+        to: string;
+    };
+    /**
+     * Шаг минут
+     * @example 15
+     */
+    minuteStep?: number;
+    /**
+     * Добавляет дополнительные кнопки к календарю
+     * true - будут отображены кнопки по-умолчанию
+     * список:
+     *  string - одна из кнопок по-умолчанию
+     *  object - кастомная кнопка
+    */
+    withRangeButtons?: boolean | IDateRangeButton[];
+    /**
+     * Положение дополнительных кнопок (сегодня, вчера и прочие)
+     * Если указано в формате 'position1-position2', то 'position1' будет на устройствах > $tablet-width, а 'position2' на остальных.
+     */
+    rangeButtonsPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'top-bottom' | 'bottom-left' | 'bottom-right' | 'bottom-top' | 'left-top' | 'left-bottom' | 'left-right' | 'right-top' | 'right-bottom' | 'right-left';
+    [key: string]: any;
+}
+export interface IDateTimeRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'withRangeButtons' | 'rangeButtonsPosition' | 'noBorder' | 'style' | 'displayFormat'> {
+    timePanelViewProps?: any;
+    calendarProps?: ICalendarProps;
+    inputPropsFrom?: any;
+    inputPropsTo?: any;
+    errorsFrom?: any;
+    errorsTo?: any;
+    id: string;
+}
+declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateTimeRangeFieldProps>;
+export default _default;