@steroidsjs/core 3.0.56 → 3.0.59

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -1,118 +1,41 @@
 "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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var react_1 = __importStar(require("react"));
-var react_use_1 = require("react-use");
-var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
+var enums_1 = require("../../../enums");
 function CheckboxListField(props) {
     var components = (0, hooks_1.useComponents)();
-    var inputSelectedIds = (0, react_1.useMemo)(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
-    // Data Provider
-    var items = (0, hooks_1.useDataProvider)({
+    var _a = (0, hooks_1.useListField)({
+        inputType: props.multiple ? 'checkbox' : 'radio',
+        defaultItemView: props.multiple ? 'form.CheckboxFieldView' : 'form.RadioFieldView',
+        selectedIds: props.selectedIds,
+        input: props.input,
         items: props.items,
-        initialSelectedIds: inputSelectedIds,
-        dataProvider: props.dataProvider
-    }).items;
-    // Data select
-    var _a = (0, hooks_1.useDataSelect)({
-        selectedIds: inputSelectedIds,
+        dataProvider: props.dataProvider,
         multiple: props.multiple,
-        primaryKey: props.primaryKey,
         selectFirst: props.selectFirst,
-        items: items,
-        inputValue: props.input.value
-    }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
-    var onItemSelect = (0, react_1.useCallback)(function (id) {
-        setSelectedIds(id);
-    }, [setSelectedIds]);
-    var inputProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputProps), { type: 'checkbox', name: props.input.name, disabled: props.disabled })); }, [props.disabled, props.input, props.inputProps]);
-    // Sync with form
-    var prevSelectedIds = (0, react_use_1.usePrevious)(selectedIds);
-    (0, react_1.useEffect)(function () {
-        if (!(0, isEqual_1["default"])(prevSelectedIds || [], selectedIds)) {
-            props.input.onChange.call(null, selectedIds);
-            if (props.onChange) {
-                props.onChange.call(null, selectedIds);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.input.onChange, selectedIds]);
-    var onReset = (0, react_1.useCallback)(function () {
-        setSelectedIds([]);
-    }, [setSelectedIds]);
-    // Reset selected ids on form reset
-    var prevInputValue = (0, react_use_1.usePrevious)(props.input.value);
-    (0, react_use_1.useUpdateEffect)(function () {
-        // if form reset
-        if (prevInputValue && props.input.value === undefined && selectedIds.length > 0) {
-            onReset();
-        }
-    }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
-    var CheckboxFieldView = props.itemView || components.ui.getView('form.CheckboxFieldView');
-    var renderCheckbox = (0, react_1.useCallback)(function (checkboxProps) { return (react_1["default"].createElement(CheckboxFieldView, __assign({}, checkboxProps, props.itemViewProps))); }, [CheckboxFieldView, props.itemViewProps]);
+        primaryKey: props.primaryKey,
+        inputProps: props.inputProps,
+        disabled: props.disabled
+    }), selectedIds = _a.selectedIds, items = _a.items, inputProps = _a.inputProps, onItemSelect = _a.onItemSelect, renderItem = _a.renderItem;
     var viewProps = (0, react_1.useMemo)(function () { return ({
         items: items,
         inputProps: inputProps,
         onItemSelect: onItemSelect,
         selectedIds: selectedIds,
-        renderCheckbox: renderCheckbox,
+        renderItem: renderItem,
         orientation: props.orientation,
         size: props.size,
         disabled: props.disabled,
         className: props.className,
         style: props.style,
         viewProps: props.viewProps
-    }); }, [
-        inputProps,
-        items,
-        onItemSelect,
-        props.className,
-        props.disabled,
-        props.orientation,
-        props.size,
-        props.style,
-        props.viewProps,
-        renderCheckbox,
-        selectedIds,
-    ]);
+    }); }, [inputProps, items, onItemSelect, props.className, props.disabled,
+        props.orientation, props.size, props.style, props.viewProps, renderItem, selectedIds]);
     return components.ui.renderView(props.view || 'form.CheckboxListFieldView', viewProps);
 }
 CheckboxListField.defaultProps = {
@@ -122,4 +45,4 @@ CheckboxListField.defaultProps = {
     multiple: true,
     orientation: 'vertical'
 };
-exports["default"] = (0, fieldWrapper_1["default"])('CheckboxListField', CheckboxListField);
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.CHECKBOX_LIST_FIELD, CheckboxListField);

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -44,6 +44,7 @@ var isArray_1 = __importDefault(require("lodash-es/isArray"));
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
+var enums_1 = require("../../../enums");
 var getNestedItemsIds = function (item, groupAttribute, hasOnlyLeafCheckboxes) {
     if (hasOnlyLeafCheckboxes === void 0) { hasOnlyLeafCheckboxes = false; }
     if (item.disabled) {
@@ -149,4 +150,4 @@ CheckboxTreeField.defaultProps = {
     saveInClientStorage: false,
     collapseChildItems: false
 };
-exports["default"] = (0, fieldWrapper_1["default"])('CheckboxTreeField', CheckboxTreeField);
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.CHECKBOX_TREE_FIELD, CheckboxTreeField);

package/ui/form/DateField/DateField.js

@@ -20,6 +20,7 @@ var kit_1 = require("@maskito/kit");
 var hooks_1 = require("../../../hooks");
 var useDateInputState_1 = __importDefault(require("./useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
+var enums_1 = require("../../../enums");
 /**
  * DateField
  * Поле ввода с выпадающим календарём для выбора даты
@@ -39,9 +40,11 @@ function DateField(props) {
     }), onClear = _a.onClear, onClose = _a.onClose, isOpened = _a.isOpened, inputProps = _a.inputProps;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: props.input.value, onChange: props.input.onChange, valueFormat: props.valueFormat }, props.calendarProps)); }, [props.calendarProps, props.input.onChange, props.input.value, props.valueFormat]);
-    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { calendarProps: calendarProps, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, autoPositioning: props.autoPositioning, maskInputRef: maskInputRef, id: props.id })); }, [props.viewProps, props.size, props.icon, props.errors, props.label, props.disabled,
-        props.className, props.showRemove, props.style, props.autoPositioning, props.id,
-        calendarProps, onClear, onClose, isOpened, inputProps, maskInputRef]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { calendarProps: calendarProps, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, autoPositioning: props.autoPositioning, maskInputRef: maskInputRef, id: props.id })); }, [
+        props.viewProps, props.size, props.icon, props.errors, props.label, props.disabled,
+        props.className, props.showRemove, props.style, props.autoPositioning, props.id, calendarProps,
+        onClear, onClose, isOpened, inputProps, maskInputRef,
+    ]);
     return components.ui.renderView(props.view || 'form.DateFieldView', viewProps);
 }
 DateField.defaultProps = {
@@ -57,4 +60,4 @@ DateField.defaultProps = {
         separator: '.'
     })
 };
-exports["default"] = (0, fieldWrapper_1["default"])('DateField', DateField);
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DATE_FIELD, DateField);

package/ui/form/DateField/useDateRange.js

@@ -42,6 +42,8 @@ function useDateRange(props) {
     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);

package/ui/form/DateRangeField/DateRangeField.d.ts

@@ -1,8 +1,13 @@
 import React from 'react';
 import { MaskitoOptions } from '@maskito/core';
+import { ILocaleComponent } from '../../../components/LocaleComponent';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
+export interface IDateRangeButton {
+    label: string;
+    onClick: (locale: ILocaleComponent, changeFrom: (value: string) => void, changeTo: (value: string) => void) => void;
+}
 /**
  * DateRangeField
  *
@@ -22,16 +27,6 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
      * @example 'toTime'
      */
     attributeTo?: string;
-    /**
-     * Свойства для компонента DayPickerInput
-     * @example
-     * {
-     *  dayPickerProps: {
-     *   showWeekNumbers: true
-     *  }
-     * }
-     */
-    pickerProps?: any;
     /**
      * Формат даты показываемый пользователю
      * @example DD.MM.YYYY
@@ -92,9 +87,30 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
         */
         to: MaskitoOptions;
     };
+    /**
+     * Активирует логику:
+     * - Если кликнули по дате начала или конца диапазона, то позволяем её изменить следующим кликом
+     * - Если клик не на дату конца или начала диапазона, а диапазон есть, то сбрасываем его
+     * - Если клик не на дату конца или начала диапазона, а диапазона нет, то устанавливаем кликнутую дату в поле from
+     * @example true
+     */
+    useSmartRangeReset?: boolean;
+    /**
+     * Добавляет дополнительные кнопки к календарю
+     * 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 IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {
+export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style' | 'withRangeButtons' | 'rangeButtonsPosition' | 'displayFormat'> {
     inputPropsFrom?: any;
     inputPropsTo?: any;
     errorsFrom?: string[];

package/ui/form/DateRangeField/DateRangeField.js

@@ -1,4 +1,15 @@
 "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);
@@ -33,6 +44,8 @@ var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"
 var hooks_1 = require("../../../hooks");
 var useDateInputState_1 = __importDefault(require("../DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
+var enums_1 = require("../../../enums");
+var useOnDayClick_1 = __importDefault(require("./useOnDayClick"));
 function DateRangeField(props) {
     var _a, _b;
     var components = (0, hooks_1.useComponents)();
@@ -95,15 +108,16 @@ function DateRangeField(props) {
         maskInputFromRef,
         maskInputToRef,
     ]);
+    var onDayClick = (0, useOnDayClick_1["default"])({
+        focus: focus,
+        useSmartRangeReset: props.useSmartRangeReset,
+        fromValue: props.inputFrom.value,
+        toValue: props.inputTo.value,
+        onFromChange: props.inputFrom.onChange,
+        onToChange: props.inputTo.onChange
+    });
     // Calendar props
-    var calendarProps = (0, react_1.useMemo)(function () { return ({
-        value: [props.inputFrom.value, props.inputTo.value],
-        onChange: focus === 'from' ? props.inputFrom.onChange : props.inputTo.onChange,
-        valueFormat: props.valueFormat,
-        numberOfMonths: 2,
-        showFooter: false
-    }); }, [focus, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange,
-        props.inputTo.value, props.valueFormat]);
+    var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: [props.inputFrom.value, props.inputTo.value], onChange: onDayClick, valueFormat: props.valueFormat, numberOfMonths: 2, showFooter: false }, props.calendarProps)); }, [onDayClick, props.calendarProps, props.inputFrom.value, props.inputTo.value, props.valueFormat]);
     var viewProps = (0, react_1.useMemo)(function () { return ({
         onClear: onClear,
         onClose: onClose,
@@ -119,9 +133,13 @@ function DateRangeField(props) {
         inputPropsFrom: extendedInputPropsFrom,
         isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo,
         style: props.style,
-        id: props.id
-    }); }, [calendarProps, extendedInputPropsFrom, extendedInputPropsTo, focus, isOpenedFrom, isOpenedTo, onClear, onClose,
-        props.className, props.disabled, props.errorsFrom, props.errorsTo, props.icon, props.id, props.showRemove, props.size, props.style]);
+        id: props.id,
+        withRangeButtons: props.withRangeButtons,
+        rangeButtonsPosition: props.rangeButtonsPosition,
+        displayFormat: props.displayFormat
+    }); }, [calendarProps, extendedInputPropsFrom, extendedInputPropsTo, focus, isOpenedFrom, isOpenedTo, onClear,
+        onClose, props.className, props.disabled, props.errorsFrom, props.errorsTo, props.icon, props.id, props.showRemove,
+        props.size, props.style, props.withRangeButtons, props.rangeButtonsPosition, props.displayFormat]);
     return components.ui.renderView(props.view || 'form.DateRangeFieldView', viewProps);
 }
 DateRangeField.defaultProps = {
@@ -134,6 +152,7 @@ DateRangeField.defaultProps = {
     useSmartFocus: true,
     hasInitialFocus: false,
     icon: true,
+    useSmartRangeReset: true,
     maskOptions: {
         from: (0, kit_1.maskitoDateOptionsGenerator)({
             mode: 'dd/mm/yyyy',
@@ -143,6 +162,7 @@ DateRangeField.defaultProps = {
             mode: 'dd/mm/yyyy',
             separator: '.'
         })
-    }
+    },
+    rangeButtonsPosition: 'left-bottom'
 };
-exports["default"] = (0, fieldWrapper_1["default"])('DateRangeField', DateRangeField, { attributeSuffixes: ['from', 'to'] });
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DATE_RANGE_FIELD, DateRangeField, { attributeSuffixes: ['from', 'to'] });

package/ui/form/DateRangeField/useOnDayClick.d.ts

@@ -0,0 +1,10 @@
+interface IUseOnDayClickProps {
+    useSmartRangeReset?: boolean;
+    focus: 'from' | 'to';
+    fromValue: string;
+    toValue: string;
+    onFromChange: (value: string) => void;
+    onToChange: (value: string) => void;
+}
+export default function useOnDayClick(props: IUseOnDayClickProps): (value: any) => void;
+export {};

package/ui/form/DateRangeField/useOnDayClick.js

@@ -0,0 +1,41 @@
+"use strict";
+exports.__esModule = true;
+var react_1 = require("react");
+function useOnDayClick(props) {
+    var useSmartRangeReset = props.useSmartRangeReset, focus = props.focus, fromValue = props.fromValue, toValue = props.toValue, onFromChange = props.onFromChange, onToChange = props.onToChange;
+    var onDayClick = (0, react_1.useCallback)(function (value) {
+        if (useSmartRangeReset) {
+            // Если кликнули по дате начала или конца диапазона, то позволяем её изменить следующим кликом
+            // Если клик не на дату конца или начала диапазона, а диапазон есть, то сбрасываем его
+            if (value === fromValue) {
+                onFromChange(toValue);
+                onToChange(null);
+                return;
+            }
+            if (value === toValue) {
+                onFromChange(fromValue);
+                onToChange(null);
+                return;
+            }
+            if (fromValue && toValue) {
+                onToChange(null);
+                onFromChange(value);
+                return;
+            }
+            if (fromValue) {
+                onToChange(value);
+                return;
+            }
+            onFromChange(value);
+            return;
+        }
+        if (focus === 'from') {
+            onFromChange(value);
+        }
+        else {
+            onToChange(value);
+        }
+    }, [focus, fromValue, onFromChange, onToChange, toValue, useSmartRangeReset]);
+    return onDayClick;
+}
+exports["default"] = useOnDayClick;

package/ui/form/DateTimeField/DateTimeField.js

@@ -21,6 +21,7 @@ var useDateTime_1 = __importDefault(require("../DateField/useDateTime"));
 var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
+var enums_1 = require("../../../enums");
 var DATE_TIME_SEPARATOR = ', ';
 /**
  * DateTimeField
@@ -77,8 +78,10 @@ function DateTimeField(props) {
         disabled: props.disabled,
         style: props.style,
         id: props.id
-    }); }, [calendarProps, inputProps, isOpened, maskInputRef, onClear, onClose, props.className, props.disabled, props.errors, props.icon,
-        props.id, props.placeholder, props.showRemove, props.size, props.style, timePanelViewProps]);
+    }); }, [
+        calendarProps, inputProps, isOpened, maskInputRef, onClear, onClose, props.className, props.disabled, props.errors,
+        props.icon, props.id, props.placeholder, props.showRemove, props.size, props.style, timePanelViewProps,
+    ]);
     return components.ui.renderView(props.view || 'form.DateTimeFieldView', viewProps);
 }
 DateTimeField.defaultProps = {
@@ -97,4 +100,4 @@ DateTimeField.defaultProps = {
         dateTimeSeparator: DATE_TIME_SEPARATOR
     })
 };
-exports["default"] = (0, fieldWrapper_1["default"])('DateTimeField', DateTimeField);
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DATE_TIME_FIELD, DateTimeField);

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

@@ -1,6 +1,6 @@
 import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
-import { IDateRangeFieldProps } from '../../form/DateRangeField/DateRangeField';
+import { IDateRangeButton, IDateRangeFieldProps } from '../../form/DateRangeField/DateRangeField';
 import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
 /**
@@ -23,16 +23,6 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
      * @example 'toTime'
      */
     attributeTo?: string;
-    /**
-     * Свойства для компонента DayPickerInput
-     * @example
-     * {
-     *  dayPickerProps: {
-     *   showWeekNumbers: true
-     *  }
-     * }
-     */
-    pickerProps?: any;
     /**
      * Свойства для поля 'from'
      */
@@ -67,9 +57,22 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
         */
         to: MaskitoOptions;
     };
+    /**
+     * Добавляет дополнительные кнопки к календарю
+     * 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' | 'noBorder' | 'style'> {
+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;

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -45,6 +45,7 @@ var useDateTime_1 = __importDefault(require("../../form/DateField/useDateTime"))
 var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
+var enums_1 = require("../../../enums");
 var DATE_TIME_SEPARATOR = ', ';
 function DateTimeRangeField(props) {
     var _a, _b;
@@ -157,10 +158,13 @@ function DateTimeRangeField(props) {
         isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo,
         disabled: props.disabled,
         style: props.style,
-        id: props.id
+        id: props.id,
+        withRangeButtons: props.withRangeButtons,
+        rangeButtonsPosition: props.rangeButtonsPosition,
+        displayFormat: props.displayFormat
     }); }, [calendarProps, extendedInputPropsFrom, extendedInputPropsTo, focus, isOpenedFrom,
-        isOpenedTo, onClear, onClose, props.className, props.disabled, props.errorsFrom,
-        props.errorsTo, props.icon, props.id, props.showRemove, props.size, props.style, timePanelViewProps]);
+        isOpenedTo, onClear, onClose, props.className, props.disabled, props.errorsFrom, props.withRangeButtons, props.rangeButtonsPosition,
+        props.errorsTo, props.icon, props.id, props.showRemove, props.size, props.style, timePanelViewProps, props.displayFormat]);
     return components.ui.renderView(props.view || 'form.DateTimeRangeFieldView', viewProps);
 }
 DateTimeRangeField.defaultProps = {
@@ -185,6 +189,7 @@ DateTimeRangeField.defaultProps = {
             timeMode: 'HH:MM',
             dateSeparator: '.'
         })
-    }
+    },
+    rangeButtonsPosition: 'left-bottom'
 };
-exports["default"] = (0, fieldWrapper_1["default"])('DateTimeRangeField', DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DATE_TIME_RANGE_FIELD, DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });

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

@@ -3,6 +3,7 @@ import { IAccordionItemViewProps } from '../../../ui/content/Accordion/Accordion
 import { DataProviderItems, IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
 import { IFieldWrapperInputProps } from '../../form/Field/fieldWrapper';
+import { IDropDownProps } from '../../content/DropDown/DropDown';
 export declare const GROUP_CONTENT_TYPE = "group";
 export declare const CHECKBOX_CONTENT_TYPE = "checkbox";
 export declare const RADIO_CONTENT_TYPE = "radio";
@@ -140,6 +141,10 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     viewProps?: {
         [key: string]: any;
     };
+    /**
+     * Свойства, которые напрямую передаются в DropDown компонент
+     */
+    dropDownProps?: IDropDownProps;
     /**
      * Callback-функция, которая вызывается при выборе элемента DropDown
      */
@@ -157,6 +162,10 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
      * @example true
      */
     isFetchOnClose?: boolean;
+    /**
+     * Число в пикселях, больше которого не может быть выпадающее меню
+     */
+    maxHeight?: number;
     [key: string]: any;
 }
 export interface IDropDownFieldViewProps extends IDropDownFieldProps {
@@ -164,7 +173,6 @@ export interface IDropDownFieldViewProps extends IDropDownFieldProps {
     selectedItems: Record<string, unknown>[];
     hoveredId: PrimaryKey | any;
     selectedIds: (PrimaryKey | any)[];
-    forwardedRef: any;
     autoCompleteInputForwardedRef: MutableRefObject<HTMLInputElement>;
     inputRef: MutableRefObject<HTMLInputElement>;
     searchInputProps: {
@@ -180,6 +188,7 @@ export interface IDropDownFieldViewProps extends IDropDownFieldProps {
     isLoading?: boolean;
     onReset: () => void;
     onOpen: () => void;
+    onClose: () => void;
     renderItem: (item: IDropDownFieldItem) => JSX.Element;
     onItemRemove: (id: PrimaryKey | any) => void;
     isAutoComplete?: boolean;

package/ui/form/DropDownField/DropDownField.js

@@ -64,8 +64,10 @@ var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var includes_1 = __importDefault(require("lodash-es/includes"));
 var isPlainObject_1 = __importDefault(require("lodash-es/isPlainObject"));
+var merge_1 = __importDefault(require("lodash-es/merge"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
+var enums_1 = require("../../../enums");
 exports.GROUP_CONTENT_TYPE = 'group';
 exports.CHECKBOX_CONTENT_TYPE = 'checkbox';
 exports.RADIO_CONTENT_TYPE = 'radio';
@@ -83,6 +85,10 @@ var normalizeItemToSelectAll = function (itemToSelectAll) {
         label: __('Все')
     };
 };
+var DEFAULT_DROP_DOWN_PROPS = {
+    position: 'bottom',
+    autoPositioning: true
+};
 function DropDownField(props) {
     var components = (0, hooks_1.useComponents)();
     // Query state
@@ -168,12 +174,6 @@ function DropDownField(props) {
         setIsFocused(false);
         setIsOpened(false);
     }, [fetchRemote, isOpened, props, selectedIds, setIsFocused, setIsOpened]);
-    // Outside click -> close
-    var forwardedRef = (0, react_1.useRef)(null);
-    if (process.env.PLATFORM !== 'mobile') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        (0, react_use_1.useClickAway)(forwardedRef, onClose);
-    }
     // Search input props
     var searchInputProps = (0, react_1.useMemo)(function () { return ({
         type: 'search',
@@ -236,13 +236,15 @@ function DropDownField(props) {
         }
         return renderItemView(item, 'default', null);
     }, [hasGroup, props.groupAttribute, props.itemsContent, renderItemView]);
-    var viewProps = (0, react_1.useMemo)(function () { return (__assign({ isAutoComplete: isAutoComplete, items: items, hoveredId: hoveredId, selectedIds: selectedIds, forwardedRef: forwardedRef, inputRef: inputRef, autoCompleteInputForwardedRef: autoCompleteInputForwardedRef, searchInputProps: searchInputProps, isOpened: isOpened, isLoading: isLoading, onOpen: onOpen, selectedItems: selectedItems, 
+    var dropDownProps = (0, react_1.useMemo)(function () { return (0, merge_1["default"])(DEFAULT_DROP_DOWN_PROPS, props.dropDownProps); }, [props.dropDownProps]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign({ isAutoComplete: isAutoComplete, items: items, hoveredId: hoveredId, selectedIds: selectedIds, inputRef: inputRef, autoCompleteInputForwardedRef: autoCompleteInputForwardedRef, searchInputProps: searchInputProps, isOpened: isOpened, isLoading: isLoading, onOpen: onOpen, selectedItems: selectedItems, 
         // TODO onFocus
         // TODO onBlur
-        onReset: onReset, onClose: onClose, renderItem: renderItem, onItemRemove: onItemRemove, hasGroup: hasGroup, multiple: props.multiple, isSearchAutoFocus: props.isSearchAutoFocus, itemToSelectAll: normalizedItemToSelectAll, className: props.className, viewProps: props.viewProps, style: props.style, size: props.size, color: props.color, outline: props.outline, placeholder: props.placeholder, showReset: props.showReset, showEllipses: props.showEllipses, errors: props.errors, disabled: props.disabled }, dataProvider)); }, [isAutoComplete, items, hoveredId, selectedIds, searchInputProps, isOpened, isLoading, onOpen, selectedItems, onReset, onClose,
-        renderItem, onItemRemove, hasGroup, props.multiple, props.isSearchAutoFocus, props.className, props.viewProps, props.style, props.size,
-        props.color, props.outline, props.placeholder, props.showReset, props.showEllipses, props.errors, props.disabled,
-        normalizedItemToSelectAll, dataProvider, inputRef, autoCompleteInputForwardedRef, forwardedRef]);
+        onReset: onReset, onClose: onClose, renderItem: renderItem, onItemRemove: onItemRemove, hasGroup: hasGroup, multiple: props.multiple, isSearchAutoFocus: props.isSearchAutoFocus, itemToSelectAll: normalizedItemToSelectAll, className: props.className, viewProps: props.viewProps, dropDownProps: dropDownProps, style: props.style, size: props.size, color: props.color, outline: props.outline, placeholder: props.placeholder, showReset: props.showReset, showEllipses: props.showEllipses, errors: props.errors, disabled: props.disabled, maxHeight: props.maxHeight }, dataProvider)); }, [isAutoComplete, items, hoveredId, selectedIds, searchInputProps,
+        isOpened, isLoading, onOpen, selectedItems, onReset, onClose, renderItem, dropDownProps,
+        onItemRemove, hasGroup, props.multiple, props.isSearchAutoFocus, props.className,
+        props.style, props.size, props.color, props.outline, props.placeholder, props.showReset,
+        props.showEllipses, props.errors, props.disabled, normalizedItemToSelectAll, props.viewProps, dataProvider, props.maxHeight]);
     return components.ui.renderView(props.view || 'form.DropDownFieldView', viewProps);
 }
 DropDownField.defaultProps = {
@@ -259,4 +261,4 @@ DropDownField.defaultProps = {
     itemToSelectAll: false,
     isFetchOnClose: false
 };
-exports["default"] = (0, fieldWrapper_1["default"])('DropDownField', DropDownField);
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DROPDOWN_FIELD, DropDownField);

package/ui/form/EmailField/EmailField.js

@@ -41,6 +41,7 @@ var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var useInputTypeEmail_1 = __importDefault(require("./hooks/useInputTypeEmail"));
+var enums_1 = require("../../../enums");
 function EmailField(props) {
     var components = (0, hooks_1.useComponents)();
     var _a = (0, hooks_1.useSaveCursorPosition)({
@@ -89,4 +90,4 @@ EmailField.defaultProps = {
     showClear: false,
     maskOptions: null
 };
-exports["default"] = (0, fieldWrapper_1["default"])('EmailField', EmailField);
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.EMAIL_FIELD, EmailField);