@steroidsjs/core 3.0.0-beta.81 → 3.0.0-beta.83

package/ui/content/Chart/Chart.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+/**
+ * Chart
+ * Этот компонент позволяет создавать в проекте графики разных типов. Под капотом для графиков используется библиотека nivo.
+ * Для работы этого компонента необходимо установить в проекте зависимости @nivo/core и пакет конкретного графика nivo, например @nivo/line.
+ * Компонент графика nivo нужно передать в пропс chartComponent
+ */
+export interface IChartProps extends IUiComponent {
+    /**
+     * Компонент графика из библиотеки nivo
+     * @example ResponsiveLine
+     */
+    chartComponent: any;
+    /**
+     * Данные для графика
+     * @example [{id: 1, value: 15}, {id: 2, value: 30}]
+     */
+    data: Record<string, any>[];
+    /**
+     * Конфигурация, настройки отображения графика
+     * @example {lineWidth: 3, pointSize: 10}
+     */
+    config?: Record<string, any>;
+    /**
+     * Фиксированная высота графика в пикселях
+     * @example 500
+     */
+    height?: number;
+    /**
+     * Использовать ли дефолтную конфигурацию для графика типа line
+     * @example ResponsiveLine
+     */
+    useDefaultLineChartConfig?: boolean;
+    [key: string]: any;
+}
+export type IChartViewProps = IChartProps;
+export default function Chart(props: IChartProps): JSX.Element;

package/ui/content/Chart/Chart.js

@@ -0,0 +1,19 @@
+"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);
+};
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+function Chart(props) {
+    var components = (0, hooks_1.useComponents)();
+    return components.ui.renderView(props.view || 'content.ChartView', __assign({}, props));
+}
+exports["default"] = Chart;

package/ui/content/Chart/index.d.ts

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

package/ui/content/Chart/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 Chart_1 = __importDefault(require("./Chart"));
+exports["default"] = Chart_1["default"];

package/ui/content/DropDown/DropDown.d.ts

@@ -16,7 +16,7 @@ export interface IDropDownProps extends IAbsolutePositioningInputProps {
      * В каком случае закрывать DropDown. По-умолчанию - `click-away`
      * @example click-any
      */
-    closeMode?: 'click-away' | 'click-any';
+    closeMode?: 'click-away' | 'click-any' | string;
     /**
     * Позволяет управлять отображением указателя
     * @example true

package/ui/content/DropDown/DropDown.js

@@ -96,7 +96,7 @@ function DropDown(props) {
             React.createElement(DropDownView, __assign({}, props, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide }))))));
 }
 DropDown.defaultProps = {
-    autoPositioning: false,
+    autoPositioning: true,
     componentDestroyDelay: 300,
     defaultVisible: false,
     gap: 15,

package/ui/content/index.d.ts

@@ -8,5 +8,6 @@ import { Detail, DetailItem } from './Detail';
 import Icon from './Icon';
 import Menu from './Menu';
 import CopyToClipboard from './CopyToClipboard';
+import Chart from './Chart';
 import Slider from './Slider';
-export { Avatar, AvatarGroup, Accordion, AccordionItem, Alert, Card, DropDown, Badge, Detail, DetailItem, Icon, Menu, CopyToClipboard, Slider, };
+export { Avatar, AvatarGroup, Accordion, AccordionItem, Alert, Card, DropDown, Badge, Detail, DetailItem, Icon, Menu, CopyToClipboard, Chart, Slider, };

package/ui/content/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.Slider = exports.CopyToClipboard = exports.Menu = exports.Icon = exports.DetailItem = exports.Detail = exports.Badge = exports.DropDown = exports.Card = exports.Alert = exports.AccordionItem = exports.Accordion = exports.AvatarGroup = exports.Avatar = void 0;
+exports.Slider = exports.Chart = exports.CopyToClipboard = exports.Menu = exports.Icon = exports.DetailItem = exports.Detail = exports.Badge = exports.DropDown = exports.Card = exports.Alert = exports.AccordionItem = exports.Accordion = exports.AvatarGroup = exports.Avatar = void 0;
 var Avatar_1 = require("./Avatar");
 exports.Avatar = Avatar_1.Avatar;
 exports.AvatarGroup = Avatar_1.AvatarGroup;
@@ -27,5 +27,7 @@ var Menu_1 = __importDefault(require("./Menu"));
 exports.Menu = Menu_1["default"];
 var CopyToClipboard_1 = __importDefault(require("./CopyToClipboard"));
 exports.CopyToClipboard = CopyToClipboard_1["default"];
+var Chart_1 = __importDefault(require("./Chart"));
+exports.Chart = Chart_1["default"];
 var Slider_1 = __importDefault(require("./Slider"));
 exports.Slider = Slider_1["default"];

package/ui/form/CheckboxListField/CheckboxListField.d.ts

@@ -7,7 +7,6 @@ import { ICheckboxFieldViewProps } from '../CheckboxField/CheckboxField';
  * CheckboxListField
  *
  * Список с чекбоксами. Используется в формах для выбора нескольких значений.
- *
  */
 export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
@@ -39,6 +38,7 @@ export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
     orientation?: Orientation;
     disabled?: boolean;
     renderCheckbox: (checkboxProps: ICheckboxFieldViewProps) => JSX.Element;
+    size?: Size;
 }
 declare const _default: import("../../../ui/form/Field/fieldWrapper").FieldWrapperComponent<ICheckboxListFieldProps>;
 export default _default;

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -77,7 +77,7 @@ function CheckboxListField(props) {
         }
     }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
     var CheckboxFieldView = components.ui.getView('form.CheckboxFieldView');
-    var renderCheckbox = function (checkboxProps) { return React.createElement(CheckboxFieldView, __assign({}, checkboxProps)); };
+    var renderCheckbox = function (checkboxProps) { return (React.createElement(CheckboxFieldView, __assign({}, checkboxProps))); };
     return components.ui.renderView(props.view || 'form.CheckboxListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds, renderCheckbox: renderCheckbox }));
 }
 CheckboxListField.defaultProps = {

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

@@ -1,4 +1,5 @@
-interface IUseDateRangeProps {
+import { IDateInputStateInput } from '@steroidsjs/core/ui/form/DateField/useDateInputState';
+interface IUseDateRangeProps extends Pick<IDateInputStateInput, 'displayFormat' | 'valueFormat' | 'useUTC' | 'dateInUTC'> {
     onCloseFrom: any;
     onCloseTo: any;
     onClearFrom: any;

package/ui/form/DateField/useDateRange.js

@@ -10,9 +10,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
 var react_1 = require("react");
 var react_use_1 = require("react-use");
+var dayjs_1 = __importDefault(require("dayjs"));
+var calendar_1 = require("@steroidsjs/core/utils/calendar");
 function useDateRange(props) {
     // Tracking focus for input being edited
     var _a = (0, react_1.useState)('from'), focus = _a[0], setFocus = _a[1];
@@ -64,6 +69,24 @@ function useDateRange(props) {
         }
         // eslint-disable-next-line max-len
     }, [focus, 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,

package/ui/form/DateRangeField/DateRangeField.js

@@ -62,7 +62,9 @@ function DateRangeField(props) {
         inputPropsTo: inputPropsTo,
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
-        useSmartFocus: true
+        useSmartFocus: true,
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat
     }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return ({

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -76,7 +76,9 @@ function DateTimeRangeField(props) {
         inputPropsTo: inputPropsTo,
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
-        useSmartFocus: false
+        useSmartFocus: false,
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat
     }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: [dateValueFrom, dateValueTo], onChange: focus === 'from' ? onDateFromSelect : onDateToSelect, valueFormat: dateValueFormat }, props.calendarProps)); }, [dateValueFormat, dateValueFrom, dateValueTo, focus, onDateFromSelect, onDateToSelect, props.calendarProps]);

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

@@ -72,6 +72,11 @@ export interface IFieldWrapperInputProps {
     isRenderWithoutFieldLayout?: boolean;
     [key: string]: any;
 }
+export interface IInputParams {
+    name?: string;
+    value?: any;
+    onChange: (value: any) => void;
+}
 export interface IFieldWrapperOutputProps {
     /**
     * Id формы
@@ -88,11 +93,7 @@ export interface IFieldWrapperOutputProps {
     /**
     * Параметры для input элемента
     */
-    input?: {
-        name?: string;
-        value?: any;
-        onChange: (value: any) => void;
-    };
+    input?: IInputParams;
 }
 interface IFieldWrapperOptions {
     label?: boolean;

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

@@ -85,7 +85,7 @@ export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOut
     inputProps: {
         type: string;
         name: string;
-        onChange: (value: any) => void;
+        onInput: (event: any, value?: string) => void;
         value: string | number;
         placeholder: string;
         disabled: boolean;
@@ -94,7 +94,6 @@ export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOut
     onFocus?: (e: Event | React.FocusEvent) => void;
     onBlur?: (e: Event | React.FocusEvent) => void;
     onMouseDown?: (e: Event | React.MouseEvent) => void;
-    maskedInputRef?: React.RefCallback<HTMLElement>;
     defaultValue?: string;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IInputFieldProps>;

package/ui/form/InputField/InputField.js

@@ -87,17 +87,22 @@ function InputField(props) {
     var maskedInputRef = (0, react_2.useMaskito)({
         options: props.maskOptions
     });
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), inputRef = _a.inputRef, onChange = _a.onChange;
+    React.useEffect(function () {
+        if (inputRef.current) {
+            maskedInputRef(inputRef.current);
+        }
+    }, [inputRef, maskedInputRef]);
     var onClear = React.useCallback(function () { return props.input.onChange(''); }, [props.input]);
-    props.onClear = onClear;
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
-        return (__assign({ type: props.type, name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: function (value) { return props.input.onChange(value); }, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [props.disabled, props.input, props.inputProps, props.placeholder, props.type]);
+        return (__assign({ type: props.type, name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onInput: onChange, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
+    }, [onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, props.type]);
     // No render for hidden input
     if (props.type === 'hidden') {
         return null;
     }
-    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, maskedInputRef: maskedInputRef }));
+    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, inputRef: inputRef, onClear: onClear }));
 }
 InputField.defaultProps = {
     type: 'text',

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

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import React, { ChangeEvent } from 'react';
 import { IBaseFieldProps } from '../InputField/InputField';
 import { IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
@@ -21,7 +21,7 @@ export interface INumberFieldProps extends IBaseFieldProps {
      * Шаг увеличения/уменьшения значения
      * @example 5
      */
-    step?: string | number;
+    step?: number;
 }
 export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperOutputProps {
     inputProps: {
@@ -35,6 +35,10 @@ export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperO
         max: number;
         step: string | number;
     };
+    inputRef: React.MutableRefObject<any>;
+    onStepUp: VoidFunction;
+    onStepDown: VoidFunction;
+    onKeyDown: VoidFunction;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<INumberFieldProps>;
 export default _default;

package/ui/form/NumberField/NumberField.js

@@ -14,16 +14,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable max-len */
 var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+var useInputTypeNumber_1 = __importDefault(require("./hooks/useInputTypeNumber"));
+var DEFAULT_STEP = 1;
 function NumberField(props) {
     var components = (0, hooks_1.useComponents)();
-    props.inputProps = (0, react_1.useMemo)(function () {
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var onInputChange = (0, useInputTypeNumber_1["default"])(currentInputRef, {
+        max: props.max,
+        min: props.min,
+        value: props.input.value
+    }, onChange).onInputChange;
+    var onStep = (0, react_1.useCallback)(function (isIncrement) {
         var _a;
-        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: function (value) { return props.input.onChange(value); }, type: 'number', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [props.disabled, props.input, props.inputProps, props.placeholder, props.min, props.max, props.step]);
-    return components.ui.renderView(props.view || 'form.NumberFieldView', props);
+        var step = props.step || DEFAULT_STEP;
+        onChange(null, String(Number((_a = currentInputRef === null || currentInputRef === void 0 ? void 0 : currentInputRef.current) === null || _a === void 0 ? void 0 : _a.value) + (isIncrement ? step : -step)));
+    }, [currentInputRef, onChange, props.step]);
+    var onStepUp = (0, react_1.useCallback)(function () {
+        onStep(true);
+    }, [onStep]);
+    var onStepDown = (0, react_1.useCallback)(function () {
+        onStep(false);
+    }, [onStep]);
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        if (event.key === 'ArrowUp') {
+            onStepUp();
+        }
+        else if (event.key === 'ArrowDown') {
+            onStepDown();
+        }
+    }, [onStepDown, onStepUp]);
+    var inputProps = (0, react_1.useMemo)(function () {
+        var _a;
+        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onInputChange, type: 'text', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled, autoComplete: 'off', onKeyDown: onKeyDown }, props.inputProps));
+    }, [props.input.name, props.input.value, props.min, props.max, props.step, props.placeholder, props.disabled, props.inputProps, onInputChange, onKeyDown]);
+    return components.ui.renderView(props.view || 'form.NumberFieldView', __assign(__assign({}, props), { inputProps: inputProps, onStepUp: onStepUp, onStepDown: onStepDown, inputRef: currentInputRef }));
 }
 NumberField.defaultProps = {
     disabled: false,

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface IInputTypeNumberProps {
+    max: any;
+    min: any;
+    value: any;
+}
+declare const useInputTypeNumber: (currentInputRef: React.MutableRefObject<HTMLInputElement>, inputTypeNumberProps: IInputTypeNumberProps, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void) => {
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export default useInputTypeNumber;

package/ui/form/NumberField/hooks/useInputTypeNumber.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useInputTypeNumber = function (currentInputRef, inputTypeNumberProps, onChange) {
+    var setValidity = react_1["default"].useCallback(function (message) {
+        var _a;
+        (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);
+    }, [currentInputRef]);
+    var checkIsValueFalsy = function (value) { return value === '' || value === null || value === undefined; };
+    react_1["default"].useEffect(function () {
+        var defaultValidity = 'The number is not included in the range';
+        // eslint-disable-next-line no-unused-expressions
+        inputTypeNumberProps.value > inputTypeNumberProps.max
+            || inputTypeNumberProps.value < inputTypeNumberProps.min
+            || checkIsValueFalsy(inputTypeNumberProps.value)
+            ? setValidity(__(defaultValidity) + " ".concat(inputTypeNumberProps.min, " \u2014 ").concat(inputTypeNumberProps.max))
+            : setValidity('');
+    }, [currentInputRef, inputTypeNumberProps.value, inputTypeNumberProps.max, inputTypeNumberProps.min, setValidity]);
+    var isValueNumeric = function (value) {
+        if (checkIsValueFalsy(value)) {
+            return true;
+        }
+        /**
+        * Подходят как отрицательные так и положительные числа
+        * @example -1
+        * @example 1
+        */
+        var numericRegex = /^-?\d*\.?\d+$/;
+        return numericRegex.test(value);
+    };
+    var onInputChange = function (event) {
+        var _a;
+        var value = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+        if (isValueNumeric(value)) {
+            onChange(event);
+        }
+    };
+    return {
+        onInputChange: onInputChange
+    };
+};
+exports["default"] = useInputTypeNumber;

package/ui/form/PasswordField/PasswordField.js

@@ -55,14 +55,15 @@ exports.checkPassword = checkPassword;
 function PasswordField(props) {
     var _a = (0, react_1.useState)(InputType.PASSWORD), type = _a[0], setType = _a[1];
     var components = (0, hooks_1.useComponents)();
+    var _b = (0, hooks_1.useSaveCursorPosition)(props.input), inputRef = _b.inputRef, onChange = _b.onChange;
     var onClear = (0, react_1.useCallback)(function () { return props.input.onChange(''); }, [props.input]);
     var onShowButtonClick = (0, react_1.useCallback)(function () {
         type === InputType.PASSWORD ? setType(InputType.TEXT) : setType(InputType.PASSWORD);
     }, [type]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
-        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: function (value) { return props.input.onChange(value); }, type: type, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [props.disabled, props.input, props.inputProps, props.placeholder, type]);
+        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onChange, type: type, placeholder: props.placeholder, disabled: props.disabled, ref: inputRef }, props.inputProps));
+    }, [inputRef, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, type]);
     return components.ui.renderView(props.view || 'form.PasswordFieldView' || 'form.InputFieldView', __assign(__assign({}, props), { inputProps: inputProps, securityLevel: props.showSecurityBar ? (0, exports.checkPassword)(props.input.value) : null, onClear: onClear, onShowButtonClick: onShowButtonClick }));
 }
 PasswordField.defaultProps = {

package/ui/form/RadioListField/RadioListField.js

@@ -82,7 +82,7 @@ RadioListField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
-    multiple: false,
+    multiple: true,
     errors: null,
     size: 'md',
     orientation: 'vertical'

package/ui/form/TextField/TextField.js

@@ -20,6 +20,7 @@ var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 function TextField(props) {
     // const dispatch = useDispatch();
     var components = (0, hooks_1.useComponents)();
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), inputRef = _a.inputRef, onChange = _a.onChange;
     var onKeyUp = (0, react_1.useCallback)(function (e) {
         if (props.submitOnEnter
             && props.formId
@@ -30,12 +31,12 @@ function TextField(props) {
             // dispatch(submit(props.formId));
         }
     }, [props.formId, props.submitOnEnter]);
-    var onChange = (0, react_1.useCallback)(function (e) { return props.input.onChange.call(null, e.target ? e.target.value : e.nativeEvent.text); }, [props.input.onChange]);
+    var handleChange = (0, react_1.useCallback)(function (event) { return onChange(event, event.target ? event.target.value : event.nativeEvent.text); }, [onChange]);
     var onClear = (0, react_1.useCallback)(function () { return props.input.onChange(''); }, [props.input]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
-        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onChange, onKeyUp: onKeyUp, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [onKeyUp, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder]);
+        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: handleChange, onKeyUp: onKeyUp, placeholder: props.placeholder, disabled: props.disabled, ref: inputRef }, props.inputProps));
+    }, [props.input.name, props.input.value, props.placeholder, props.disabled, props.inputProps, handleChange, onKeyUp, inputRef]);
     return components.ui.renderView(props.view || 'form.TextFieldView', __assign(__assign({}, props), { inputProps: inputProps, onClear: onClear }));
 }
 TextField.defaultProps = {

package/ui/layout/Sidebar/Sidebar.d.ts

@@ -60,11 +60,6 @@ export interface ISidebarProps extends IUiComponent {
      * Флаг, определяющий, будет ли сайдбар открытым по умолчанию.
      */
     isOpenedByDefault?: boolean;
-    /**
-     * Callback-функция, вызывается при переключении сайдбара.
-     * @param toggleState - текущее состояние сайдбара (открыт или закрыт).
-     */
-    onToggleSidebar?: (toggleState: boolean) => void;
     /**
      * Callback-функция, вызывается при клике на элемент навигации.
      * @param itemId - идентификатор элемента навигации, по которому произошел клик.

package/ui/layout/Sidebar/Sidebar.js

@@ -42,10 +42,7 @@ function Sidebar(props) {
     var toggleSidebar = (0, react_1.useCallback)(function () {
         var newState = !isOpened;
         setIsOpened(newState);
-        if (props === null || props === void 0 ? void 0 : props.onToggleSidebar) {
-            props.onToggleSidebar(newState);
-        }
-    }, [isOpened, props]);
+    }, [isOpened]);
     var onClickNav = react_1["default"].useCallback(function (itemId) {
         if (props === null || props === void 0 ? void 0 : props.onClickItem) {
             props.onClickItem(itemId);

package/ui/layout/Tooltip/Tooltip.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
-/**
- * Варианты позиций всплывающей подсказки
- * @example 'top'
- */
-type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
+import { PositionType } from '../../../hooks/useAbsolutePositioning';
 export interface ITooltipArrowPosition {
     /**
     * Позиция стрелки слева
@@ -54,7 +50,7 @@ export interface ITooltipProps {
     /**
      * Позиционирование подсказки, относительно целевого элемента
      */
-    position?: TooltipPosition;
+    position?: PositionType;
     /**
      * Показывать ли подсказку сразу после рендера страницы
      * @example true
@@ -88,7 +84,7 @@ export interface ITooltipProps {
 export interface ITooltipViewProps extends ITooltipProps {
     isTooltipVisible: boolean;
     content: string | any;
-    position: TooltipPosition;
+    position: PositionType;
     style: ITooltipStylePosition;
 }
 declare function Tooltip(props: ITooltipProps): JSX.Element;

package/ui/layout/Tooltip/Tooltip.js

@@ -29,8 +29,8 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
-var calculate_1 = __importDefault(require("../Tooltip/calculate"));
 var hooks_1 = require("../../../hooks");
+var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
 var TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
 /*
 * @Todo + check all calculations + describe
@@ -44,53 +44,21 @@ var TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
 * */
 function Tooltip(props) {
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, react_1.useState)(false), isComponentExist = _a[0], setIsComponentExist = _a[1];
-    var _b = (0, react_1.useState)(props.defaultVisible), isTooltipVisible = _b[0], setIsTooltipVisible = _b[1];
-    var _c = (0, react_1.useState)({
-        left: null,
-        right: null,
-        top: null
-    }), style = _c[0], setStyle = _c[1];
-    var _d = (0, react_1.useState)({
-        left: null,
-        right: null,
-        top: null,
-        bottom: null
-    }), arrowPosition = _d[0], setArrowPosition = _d[1];
-    var timerRef = (0, react_1.useRef)(null);
-    var positionRef = (0, react_1.useRef)(props.position);
+    var _a = (0, useAbsolutePositioning_1["default"])({
+        componentDestroyDelay: props.animationMs,
+        position: props.position,
+        children: props.children,
+        gap: props.gap,
+        defaultVisible: props.defaultVisible
+    }), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, arrowPosition = _a.arrowPosition, style = _a.style;
     var childRef = (0, react_1.useRef)(null);
-    var onShowTooltip = (0, react_1.useCallback)(function () {
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        setIsComponentExist(true);
-        setIsTooltipVisible(false);
-        // TODO: How to wait setState callback?
-        setTimeout(function () { return setIsTooltipVisible(true); });
-    }, []);
-    var onHideTooltip = (0, react_1.useCallback)(function () {
-        setIsTooltipVisible(false);
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        timerRef.current = setTimeout(function () { return setIsComponentExist(false); }, props.animationMs);
-    }, [props.animationMs]);
-    // Основная функция расчета позиции
     var calculatePosition = (0, react_1.useCallback)(function (tooltipSize, arrowSize) {
-        var result = (0, calculate_1["default"])(props.gap, positionRef.current, childRef.current, tooltipSize, arrowSize);
-        if (!result) {
-            return;
-        }
-        positionRef.current = result.position;
-        setStyle(result.style);
-        if (result.arrowPosition) {
-            setArrowPosition(result.arrowPosition);
-        }
-    }, [props.gap]);
+        calculateAbsolutePosition(position, childRef.current, tooltipSize, arrowSize);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     (0, react_use_1.useMount)(function () {
-        if (isTooltipVisible) {
-            onShowTooltip();
+        if (isComponentVisible) {
+            onShow();
         }
     });
     if (!props.content) {
@@ -104,12 +72,12 @@ function Tooltip(props) {
         childrenElement
             ? React.cloneElement(childrenElement, {
                 ref: childRef,
-                onMouseOver: onShowTooltip,
-                onMouseOut: onHideTooltip
+                onMouseOver: onShow,
+                onMouseOut: onHide
             })
-            : (React.createElement("span", { ref: childRef, onFocus: onShowTooltip, onMouseOver: onShowTooltip, onBlur: onHideTooltip, onMouseOut: onHideTooltip }, props.children)),
+            : (React.createElement("span", { ref: childRef, onFocus: onShow, onMouseOver: onShow, onBlur: onHide, onMouseOut: onHide }, props.children)),
         isComponentExist && (React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(TooltipView, { isTooltipVisible: isTooltipVisible, content: props.content, position: positionRef.current, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition })))));
+            React.createElement(TooltipView, { isTooltipVisible: isComponentVisible, content: props.content, position: position, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition })))));
 }
 Tooltip.defaultProps = {
     content: '',