@steroidsjs/core 3.0.0-beta.103 → 3.0.0-beta.105

package/ui/content/Chat/Chat.d.ts

@@ -26,35 +26,37 @@ export interface IChatProps extends IUiComponent {
     chatId: string;
     /**
      * Коллекция сообщений
-     * @example [
+     * @example
+     * [
      *  {
-     *         id: 1,
-     *         text: 'Всем привет!',
-     *         user: {
-     *             id: 1,
-     *             firstName: 'Olga',
-     *             lastName: 'Petrova',
-     *             avatar: {
-     *                 src: 'images.com/image.png',
-     *                 status: true,
-     *             },
-     *         },
-     *         timestamp: '2023-10-25T12:38:00',
+     *   id: 1,
+     *   text: 'Всем привет!',
+     *   user: {
+     *     id: 1,
+     *     firstName: 'Olga',
+     *     lastName: 'Petrova',
+     *     avatar: {
+     *       src: 'images.com/image.png',
+     *       status: true,
      *     },
+     *   },
+     *   timestamp: '2023-10-25T12:38:00',
+     *  },
      * ]
      */
     messages: IChatMessage[];
     /**
      * Данные о текущем пользователе, нужны для отправки сообщений и определения сообщений пользователя
-     * @example {
-     *             id: 1,
-     *             firstName: 'Olga',
-     *             lastName: 'Petrova',
-     *             avatar: {
-     *                 src: 'images.com/image.png',
-     *                 status: true,
-     *             },
-     *         }
+     * @example
+     * {
+     *  id: 1,
+     *  firstName: 'Olga',
+     *  lastName: 'Petrova',
+     *  avatar: {
+     *    src: 'images.com/image.png',
+     *    status: true,
+     *  },
+     * }
      */
     currentUser: IChatUser;
     /**

package/ui/content/CopyToClipboard/CopyToClipboard.d.ts

@@ -33,9 +33,9 @@ export interface ICopyToClipboardProps extends IUiComponent {
     *   message: 'Some value has been copied to buffer',
     *   level: 'info',
     *   params: {
-    *   position: 'top-left',
-    *   timeOut: 100,
-    *  }
+    *     position: 'top-left',
+    *     timeOut: 100,
+    *   }
     * }
     */
     notification?: string | {

package/ui/content/Detail/Detail.d.ts

@@ -58,7 +58,16 @@ export interface IDetailProps extends IUiComponent {
     layout?: DetailLayoutEnum;
     /**
      * Перестраивать таблицу при ресайзе
-     * @example {enable: true, media: [{breakpoint: 600, column: 2}]}
+     * @example
+     * {
+     *  enable: true,
+     *  media: [
+     *   {
+     *    breakpoint: 600,
+     *    column: 2
+     *   }
+     *  ]
+     * }
      */
     responsive?: boolean | IDetailResponsive;
     /**
@@ -73,7 +82,11 @@ export interface IDetailProps extends IUiComponent {
     title?: string | React.ReactNode;
     /**
      * Контролы, которые нужно расположить рядом с таблицей
-     * @example [{label: __(('Edit')), onClick: () => props.onClick()}]
+     * @example
+     * [{
+     *  label: __(('Edit')),
+     *  onClick: () => props.onClick()
+     * }]
      */
     controls?: IControlItem[];
     /**

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

@@ -36,7 +36,7 @@ export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioning
     /**
      * Рассчет абсолютной позиции
      */
-    calculatePosition: (componentSize: ClientRect) => void;
+    calculatePosition?: (dropDownDimensions: Record<string, any>, arrowDimensions: Record<string, any>) => void;
     /**
      * Ссылка на view
      */

package/ui/content/DropDown/DropDown.js

@@ -45,7 +45,7 @@ var TooltipPortalInner_1 = __importDefault(require("../../layout/Tooltip/Tooltip
 var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
 function DropDown(props) {
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, useAbsolutePositioning_1["default"])(props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, style = _a.style;
+    var _a = (0, useAbsolutePositioning_1["default"])(props), 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 isManualControl = props.visible !== undefined;
     // Outside click -> close
@@ -70,8 +70,8 @@ function DropDown(props) {
     }, [isComponentExist, isComponentVisible, onHide, props.closeMode]);
     (0, react_use_1.useEvent)('mousedown', onAnyClick);
     (0, react_use_1.useEvent)('touchstart', onAnyClick);
-    var calculatePosition = (0, react_1.useCallback)(function (componentSize) {
-        calculateAbsolutePosition(position, childRef.current, componentSize);
+    var calculatePosition = (0, react_1.useCallback)(function (componentSize, arrowSize) {
+        calculateAbsolutePosition(position, childRef.current, componentSize, arrowSize);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var DropDownView = components.ui.getView(props.view || 'content.DropDownView');
@@ -93,7 +93,7 @@ function DropDown(props) {
         isComponentExist && (
         // TODO Change Portal to global
         React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(DropDownView, __assign({}, props, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide }))))));
+            React.createElement(DropDownView, __assign({}, props, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide }))))));
 }
 DropDown.defaultProps = {
     autoPositioning: true,

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

@@ -7,18 +7,24 @@ export interface IKanbanConfig {
     kanbanId?: string;
     /**
      * Коллекция с наименованиями и свойствами колонок в таблице
-     * @example [
-     *             {
-     *              id: 1,
-     *              title: 'column 1',
-     *              tasks: [{ content: 'item 1', id: 1 }],
-     *             },
-     *             {
-     *              id: 2,
-     *              title: 'column 2',
-     *              tasks: [],
-     *             }
-     *          ]
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   title: 'column 1',
+     *   tasks: [
+     *    {
+     *      content: 'item 1',
+     *      id: 1
+     *    }
+     *    ],
+     *  },
+     *  {
+     *   id: 2,
+     *   title: 'column 2',
+     *   tasks: [],
+     *  }
+     * ]
      */
     columns: IKanbanColumn[];
     /**
@@ -32,20 +38,21 @@ export interface IKanbanConfig {
     /**
      * Обработчик события окончания перетаскивания карточки или колонки
      * В result передается объект с информацией о событии
-     * @example {
-     *     draggableId: 1,
-     *     type: 'task',
-     *     source: {
-     *         index: 0,
-     *         droppableId: 2
-     *     },
-     *     reason: 'DROP',
-     *     mode: 'FLUID',
-     *     destination: {
-     *         droppableId: 2,
-     *         index: 1
-     *     },
-     *     combine: null
+     * @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;

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

@@ -20,7 +20,7 @@ type CheckboxFieldListItems = string | ({
 export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
      * Свойства для элемента input
-     * @example {onKeyDown: ...}
+     * @example { onKeyDown: ... }
      */
     inputProps?: any;
     /**
@@ -29,7 +29,19 @@ export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, Omit<I
     orientation?: Orientation;
     /**
      * Коллекция элементов
-     * @example [{id: 1, label: 'Krasnoyarsk', color: 'red'}, {id: 2, label: 'Moscow', color: 'purple'}]
+     * @example
+     * [
+     *  {
+     *      id: 1,
+     *      label: 'Krasnoyarsk',
+     *      color: 'red'
+     *  },
+     *  {
+     *      id: 2,
+     *      label: 'Moscow',
+     *      color: 'purple'
+     *  }
+     * ]
      */
     items: CheckboxFieldListItems;
     [key: string]: any;

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

@@ -9,6 +9,7 @@ interface IUseDateRangeProps extends Pick<IDateInputStateInput, 'displayFormat'
     inputTo: any;
     inputFrom: any;
     useSmartFocus: boolean;
+    hasInitialFocus: boolean;
 }
 export default function useDateRange(props: IUseDateRangeProps): {
     focus: "to" | "from";

package/ui/form/DateField/useDateRange.js

@@ -21,6 +21,7 @@ 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];
+    var isFirstMount = (0, react_use_1.useFirstMountState)();
     // Local refs to handle auto-focus
     var valueFromRef = (0, react_1.useRef)('');
     var valueToRef = (0, react_1.useRef)('');
@@ -57,6 +58,9 @@ function useDateRange(props) {
     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 (props.useSmartFocus) {
             if (focus === 'from' && !valueToRef.current && prevValueFrom !== props.inputFrom.value) {
                 valueFromRef.current = props.inputFrom.value;
@@ -67,8 +71,11 @@ function useDateRange(props) {
                 inputFromRef.current.focus();
             }
         }
+        else if (props.hasInitialFocus && isFirstMount) {
+            inputFromRef.current.focus();
+        }
         // eslint-disable-next-line max-len
-    }, [focus, onClose, prevValueFrom, prevValueTo, props, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange, props.inputTo.value]);
+    }, [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

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

@@ -22,7 +22,12 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
     attributeTo?: string;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
+     * }
      */
     pickerProps?: any;
     /**
@@ -62,6 +67,11 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
      * Свойства для компонента Calendar
      */
     calendarProps?: ICalendarProps;
+    /**
+     * Устанавливать ли фокус и показывать календарь сразу после рендера страницы
+     * @example true
+     */
+    hasInitialFocus?: boolean;
     [key: string]: any;
 }
 export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {

package/ui/form/DateRangeField/DateRangeField.js

@@ -63,6 +63,7 @@ function DateRangeField(props) {
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
         useSmartFocus: true,
+        hasInitialFocus: props.hasInitialFocus,
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
     }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
@@ -84,6 +85,7 @@ DateRangeField.defaultProps = {
     displayFormat: 'DD.MM.YYYY',
     valueFormat: 'YYYY-MM-DD',
     showRemove: true,
+    hasInitialFocus: false,
     icon: true,
     noBorder: false,
     size: 'md'

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

@@ -24,7 +24,12 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
     attributeTo?: string;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
+     * }
      */
     pickerProps?: any;
     /**
@@ -43,6 +48,11 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
      * Свойства для компонента Calendar
      */
     calendarProps?: ICalendarProps;
+    /**
+     * Устанавливать ли фокус и показывать календарь сразу после рендера страницы
+     * @example true
+     */
+    hasInitialFocus?: boolean;
     [key: string]: any;
 }
 export interface IDateTimeRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -85,6 +85,7 @@ function DateTimeRangeField(props) {
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
         useSmartFocus: false,
+        hasInitialFocus: props.hasInitialFocus,
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
     }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
@@ -110,6 +111,7 @@ DateTimeRangeField.defaultProps = {
     displayFormat: 'DD.MM.YYYY' + DATE_TIME_SEPARATOR + 'HH:mm',
     valueFormat: 'YYYY-MM-DD' + DATE_TIME_SEPARATOR + 'HH:mm',
     showRemove: true,
+    hasInitialFocus: false,
     useUTC: false,
     dateInUTC: false,
     icon: true,

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

@@ -86,7 +86,11 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     groupAttribute?: string;
     /**
      * Свойство, которое устанавливает один type и src контента для всех пунктов
-     * @example {type: 'icon', src: 'user'}
+     * @example
+     * {
+     *  type: 'icon',
+     *  src: 'user'
+     * }
      */
     itemsContent?: {
         type: ContentType | string;
@@ -94,7 +98,15 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     };
     /**
      * Элементы вложенные внутрь DropDownField
-     * @example [{id: 1, label: 'Ivan Ivanov', type: 'icon', typeSrc: 'user'}]
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   label: 'Ivan Ivanov',
+     *   type: 'icon',
+     *   typeSrc: 'user'
+     *  }
+     * ]
      */
     items?: IDropDownFieldItem[] | DataProviderItems;
     /**
@@ -104,7 +116,11 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     showEllipses?: boolean;
     /**
     * Добавляет кнопку при нажатии на которую выбираются все элементы, работает только при multiple: true
-    * @example {label: 'All', id: 'all'}
+    * @example
+     * {
+     *  label: 'All',
+     *  id: 'all'
+     * }
     */
     itemToSelectAll?: boolean | {
         label: string;

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

@@ -16,7 +16,15 @@ export interface IFieldProps extends IFieldWrapperInputProps {
     attribute?: any;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: Model;
     /**

package/ui/form/Field/Field.js

@@ -50,7 +50,7 @@ function Field(props) {
     var fieldModel = (0, react_1.useMemo)(function () {
         var _a;
         var model = props.model || context.model;
-        var modelAttributes = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || []);
+        var modelAttributes = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || (model === null || model === void 0 ? void 0 : model.attributes) || []);
         var result = modelAttributes
             .find(function (field) { return field.attribute === props.attribute; });
         return result || {};

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

@@ -16,7 +16,15 @@ export interface IFieldWrapperInputProps {
     attribute?: string;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: string | ((...args: any[]) => any) | any;
     /**

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

@@ -34,7 +34,11 @@ export interface IFieldListItem extends IFieldWrapperInputProps, IUiComponent {
 export interface IFieldListProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Начальные значения в полях
-     * @example {name: 'Ivan', amount: 5}
+     * @example
+     * {
+     *  name: 'Ivan',
+     *  amount: 5
+     * }
      */
     initialValues?: {
         [key: string]: any;

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

@@ -19,7 +19,15 @@ export interface IFormProps extends IUiComponent {
     prefix?: string;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: string | ((...args: any[]) => any) | any;
     /**
@@ -45,7 +53,11 @@ export interface IFormProps extends IUiComponent {
     /**
      * Набор с правилами для проверки соответствия значений полей формы определенному формату.
      * Проверка запускается в момент отправки формы (в обработчике onSubmit).
-     * @example [['name', 'required'], ['age', 'integer']]
+     * @example
+     * [
+     *  ['name', 'required'],
+     *  ['age', 'integer']
+     * ]
      */
     validators?: any[];
     /**
@@ -97,7 +109,13 @@ export interface IFormProps extends IUiComponent {
     viewProps?: any;
     /**
      * Поля, которые необходимо поместить в форму
-     * @example [{attribute: 'category', component: 'DropDownField'}]
+     * @example
+     * [
+     *  {
+     *   attribute: 'category',
+     *   component: 'DropDownField'
+     *  }
+     * ]
      */
     fields?: (string | IFieldProps)[];
     /**

package/ui/form/Form/Form.js

@@ -129,7 +129,7 @@ function Form(props) {
     }
     // Init data provider
     var provider = props.useRedux ? form_1.providers.redux : form_1.providers.reducer;
-    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isInvalid = _b.isInvalid, isSubmitting = _b.isSubmitting, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
+    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isInvalid = _b.isInvalid, isSubmitting = _b.isSubmitting, errors = _b.errors, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
     // Sync with address bar
     (0, react_use_1.useUpdateEffect)(function () {
         updateQuery(values);
@@ -147,6 +147,9 @@ function Form(props) {
             dispatch((0, form_2.formDestroy)(props.formId));
         }
     });
+    // Clear Errors
+    var prevValues = (0, react_use_1.usePrevious)(values);
+    (0, react_use_1.useUpdateEffect)(function () { return (0, form_1.clearErrors)(values, prevValues, errors, setErrors); }, [errors, prevValues, setErrors, values]);
     // OnChange handler
     (0, react_use_1.useUpdateEffect)(function () {
         if (props.onChange) {

package/ui/form/ImageField/ImageField.d.ts

@@ -6,7 +6,15 @@ import { IButtonProps } from '../Button/Button';
 export interface ICropConfig {
     /**
      * Изначальные параметры обрезки изображения
-     * @example {unit: 'px', aspect: 1, x: 0, y: 0, width: 200, height: 200}
+     * @example
+     * {
+     *  unit: 'px',
+     *  aspect: 1,
+     *  x: 0,
+     *  y: 0,
+     *  width: 200,
+     *  height: 200
+     * }
      */
     initialValues?: Crop;
     /**

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

@@ -15,7 +15,7 @@ export type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'date
 export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Свойства для элемента input
-     * @example {onKeyDown: ...}
+     * @example { onKeyDown: ... }
      */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     /**
@@ -25,7 +25,10 @@ export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
     showClear?: boolean;
     /**
      * Свойства для компонента отображения
-     * @example {customHandler: () => {...}}
+     * @example
+     * {
+     *  customHandler: () => {...}
+     * }
      */
     viewProps?: {
         [key: string]: any;

package/ui/form/NumberField/NumberField.js

@@ -10,12 +10,35 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
 /* eslint-disable max-len */
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var useInputTypeNumber_1 = __importDefault(require("./hooks/useInputTypeNumber"));
@@ -23,6 +46,7 @@ var DEFAULT_STEP = 1;
 function NumberField(props) {
     var components = (0, hooks_1.useComponents)();
     var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var step = react_1["default"].useMemo(function () { var _a; return (_a = props.step) !== null && _a !== void 0 ? _a : DEFAULT_STEP; }, [props.step]);
     var onInputChange = (0, useInputTypeNumber_1["default"])(currentInputRef, {
         max: props.max,
         min: props.min,
@@ -30,15 +54,18 @@ function NumberField(props) {
     }, onChange).onInputChange;
     var onStep = (0, react_1.useCallback)(function (isIncrement) {
         var _a;
-        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]);
+    }, [currentInputRef, onChange, step]);
     var onStepUp = (0, react_1.useCallback)(function () {
-        onStep(true);
-    }, [onStep]);
+        if (!(Number(currentInputRef.current.value) + step > props.max)) {
+            onStep(true);
+        }
+    }, [currentInputRef, onStep, props.max, step]);
     var onStepDown = (0, react_1.useCallback)(function () {
-        onStep(false);
-    }, [onStep]);
+        if (!(Number(currentInputRef.current.value) - step < props.min)) {
+            onStep(false);
+        }
+    }, [currentInputRef, onStep, props.min, step]);
     var onKeyDown = (0, react_1.useCallback)(function (event) {
         if (event.key === 'ArrowUp') {
             onStepUp();