@steroidsjs/core 3.0.0-beta.9 → 3.0.0-beta.90

package/ui/form/AutoCompleteField/AutoCompleteField.js

@@ -19,6 +19,17 @@ var react_use_1 = require("react-use");
 var useComponents_1 = __importDefault(require("../../../hooks/useComponents"));
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
+var getCategories = function (items) {
+    if (!items) {
+        return [];
+    }
+    return items.reduce(function (allCategories, item) {
+        if (item.category && !allCategories.includes(item.category)) {
+            allCategories.push(item.category);
+        }
+        return allCategories;
+    }, []);
+};
 function AutoCompleteField(props) {
     var components = (0, useComponents_1["default"])();
     // Query state
@@ -81,12 +92,15 @@ function AutoCompleteField(props) {
             props.inputProps.onBlur(e);
         }
     }, [onClose, props.inputProps, props.isOpened]);
-    var inputProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputProps), { type: 'text', name: props.input.name, value: props.input.value || '', placeholder: props.placeholder, disabled: props.disabled, onChange: onChange, onBlur: onBlur })); }, [onBlur, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder]);
+    var inputProps = (0, react_1.useMemo)(function () {
+        var _a;
+        return (__assign(__assign({}, props.inputProps), { type: 'text', name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', placeholder: props.placeholder, disabled: props.disabled, onChange: onChange, onBlur: onBlur }));
+    }, [onBlur, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder]);
     //Sync with form
     (0, react_1.useEffect)(function () {
         props.input.onChange.call(null, selectedIds[0] || null);
     }, [props.input.onChange, selectedIds]);
-    return components.ui.renderView(props.view || 'form.AutoCompleteFieldView', __assign(__assign({}, props), { inputProps: inputProps, items: items, isLoading: isLoading, hoveredId: hoveredId, selectedIds: selectedIds, onOpen: onOpen, isOpened: isOpened, onClose: onClose, forwardedRef: forwardedRef, onItemHover: onItemHover, onItemSelect: onItemSelect }));
+    return components.ui.renderView(props.view || 'form.AutoCompleteFieldView', __assign(__assign({}, props), { inputProps: inputProps, items: items, isLoading: isLoading, hoveredId: hoveredId, selectedIds: selectedIds, onOpen: onOpen, isOpened: isOpened, onClose: onClose, forwardedRef: forwardedRef, onItemHover: onItemHover, onItemSelect: onItemSelect, categories: getCategories(props.items) }));
 }
 AutoCompleteField.defaultProps = {
     primaryKey: 'label',
@@ -94,6 +108,6 @@ AutoCompleteField.defaultProps = {
     multiple: false,
     disabled: false,
     required: false,
-    className: ''
+    size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('AutoCompleteField', AutoCompleteField);

package/ui/form/BlankField/BlankField.d.ts

@@ -1,7 +1,25 @@
 import * as React from 'react';
 import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
-export interface IBlankFieldProps extends IFieldWrapperInputProps {
+/**
+ * BlankField
+ *
+ * Пустое поле. Он отображает переданный текст или дочерние элементы.
+ *
+ * Компонент `BlankField` принимает следующие свойства:
+ *
+ * - `text`: текст для отображения (тип: string | React.ReactNode)
+ * - `children`: дочерние элементы (тип: React.ReactNode)
+ * - все остальные свойства являются наследниками интерфейсов `IFieldWrapperInputProps` и `IUiComponent`
+ */
+export interface IBlankFieldProps extends IFieldWrapperInputProps, IUiComponent {
+    /**
+    * Текст для отображения
+    * @example 'Hello World!'
+    */
     text?: string | React.ReactNode;
+    /**
+     * Дочерние элементы
+     */
     children?: React.ReactNode;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IBlankFieldProps>;

package/ui/form/Button/Button.d.ts

@@ -1,8 +1,24 @@
 import * as React from 'react';
-interface IButtonBadge {
+export interface IButtonBadge {
+    /**
+    * Включить/выключить badge
+    * @example true
+    */
     enable?: boolean;
+    /**
+    * Значение badge
+    * @example 'Badge'
+    */
     value?: number;
+    /**
+    * Цвет
+    * @example 'secondary'
+    */
     color?: ColorName;
+    /**
+    * Дополнительный CSS-класс для элемента отображения
+    * @example bem.element('additional-class')
+    */
     className?: CssClassName;
 }
 /**
@@ -10,7 +26,7 @@ interface IButtonBadge {
  * Кнопка или ссылка. Используется в интерфейсе для выполнения какого-либо действия по клику (onClick),
  * смена страницы в рамках роутинга (goToRoute), переход по внешней ссылке (url) или отправки формы (submit form)
  */
-export interface IButtonProps {
+export interface IButtonProps extends IUiComponent {
     /**
      * Текст кнопки или ссылки
      * @example Save
@@ -71,7 +87,7 @@ export interface IButtonProps {
     target?: string;
     /**
      * Ссылка на внешнюю страницу, используется совместно с свойством `link`
-     * @example https://ya.ru
+     * @example https://kozhindev.com
      */
     url?: string;
     /**
@@ -96,20 +112,6 @@ export interface IButtonProps {
      * @example true
      */
     block?: boolean;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-    /**
-     * Дополнительный CSS-класс для кнопки или ссылки
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: React.ComponentType;
     /**
      * Вложенные элементы
      */
@@ -125,14 +127,6 @@ export interface IButtonProps {
      * @example {userId: 52}
      */
     toRouteParams?: Record<string, unknown>;
-    /**
-     * Выбор макета для распложения кнопки в форме. Если кнопка находится внутри `<Form>...</Form>`, то `layout` будет
-     * взят из контекста формы и автоматически применен при отораженн. Для его отключения укажите `false`.
-     * Данное свойство так же может принимать объект, если нужно прокинуть дополнительные свойства в шаблон макета.
-     * Пример: `{layout: 'horizontal', cols: [2,6]}`
-     * @example horizontal
-     */
-    layout?: FormLayout;
     /**
      * ID формы, для которой кнопка выполняет submit. При указании ID формы кнопка будет показывать состояние загрузки
      * при отправке формы.
@@ -161,7 +155,6 @@ export interface IButtonViewProps extends IButtonProps {
     badge?: IButtonBadge;
     url?: string;
     formId?: string;
-    layout?: string;
     disabled?: boolean;
     onClick?: any;
     submitting?: boolean;

package/ui/form/Button/Button.js

@@ -33,19 +33,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var react_1 = require("react");
-var FieldLayout_1 = __importDefault(require("../FieldLayout"));
 var router_1 = require("../../../actions/router");
 var router_2 = require("../../../reducers/router");
 var hooks_1 = require("../../../hooks");
 var Form_1 = require("../Form/Form");
-var form_1 = require("../../../utils/form");
 function Button(props) {
     var components = (0, hooks_1.useComponents)();
     var dispatch = (0, react_redux_1.useDispatch)();
@@ -71,7 +66,6 @@ function Button(props) {
     }
     var disabled = submitting || props.disabled;
     var tag = props.tag || (props.link || url ? 'a' : 'button');
-    var layout = (0, react_1.useMemo)(function () { return (0, form_1.mergeLayoutProp)(context.layout, props.layout); }, [context.layout, props.layout]);
     var failedTimer = (0, react_1.useRef)(null);
     var onClick = (0, react_1.useCallback)(function (e) {
         e.stopPropagation();
@@ -126,10 +120,7 @@ function Button(props) {
             }
         }
     }, [dispatch, props, tag]);
-    var button = components.ui.renderView(props.view || 'form.ButtonView', __assign(__assign({}, props), { badge: badge, layout: layout, isFailed: isFailed, isLoading: isLoading, disabled: disabled, submitting: submitting, tag: tag, formId: (context === null || context === void 0 ? void 0 : context.formId) || null, url: url || (tag === 'a' ? '#' : null), onClick: !disabled ? onClick : undefined, children: props.label || props.children }));
-    if (layout) {
-        return (React.createElement(FieldLayout_1["default"], { layout: layout }, button));
-    }
+    var button = components.ui.renderView(props.view || 'form.ButtonView', __assign(__assign({}, props), { badge: badge, isFailed: isFailed, isLoading: isLoading, disabled: disabled, submitting: submitting, tag: tag, formId: (context === null || context === void 0 ? void 0 : context.formId) || null, url: url || (tag === 'a' ? '#' : null), onClick: !disabled ? onClick : undefined, children: props.label || props.children }));
     return button;
 }
 Button.defaultProps = {

package/ui/form/CheckboxField/CheckboxField.d.ts

@@ -2,23 +2,24 @@ import * as React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * CheckboxField
+ *
  * Одиночный чекбокс. Используется в формах для отметки булевого значения.
  */
-export interface ICheckboxFieldProps extends IFieldWrapperInputProps {
+export interface ICheckboxFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
-     * Свойства для элемента \<input /\>
+     * Свойства для элемента input
      * @example {onKeyDown: ...}
      */
     inputProps?: any;
     /**
-     * Дополнительный CSS-класс для элемента \<input /\>
+     * Флаг определяющий включен ли элемент
+     * @example true
      */
-    className?: CssClassName;
+    checked?: boolean;
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
+    * Пользовательский цвет для чекбокса
+    */
+    color?: string;
     [key: string]: any;
 }
 export interface ICheckboxFieldViewProps extends ICheckboxFieldProps, IFieldWrapperOutputProps {

package/ui/form/CheckboxField/CheckboxField.js

@@ -10,28 +10,58 @@ 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;
-var react_use_1 = require("react-use");
+var React = __importStar(require("react"));
 var react_1 = require("react");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
 function CheckboxField(props) {
+    var _a, _b;
     var components = (0, hooks_1.useComponents)();
-    (0, react_use_1.useMount)(function () {
-        if (props.input.value === undefined) {
-            props.input.onChange(false);
+    var onChangeHandler = React.useCallback(function () {
+        var _a;
+        props.input.onChange(!((_a = props.input) === null || _a === void 0 ? void 0 : _a.value));
+        if (props.onChange) {
+            props.onChange();
         }
-    });
-    var inputProps = (0, react_1.useMemo)(function () { return (__assign({ name: props.input.name, type: 'checkbox', checked: !!props.input.value, onChange: function () { return props.input.onChange(!props.input.value); }, disabled: props.disabled }, props.inputProps)); }, [props.disabled, props.input, props.inputProps]);
+    }, [props]);
+    var inputProps = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        return (__assign({ name: (_a = props.input) === null || _a === void 0 ? void 0 : _a.name, type: 'checkbox', checked: !!((_b = props.input) === null || _b === void 0 ? void 0 : _b.value), onChange: onChangeHandler, disabled: props.disabled }, props.inputProps));
+    }, [onChangeHandler, props.disabled, (_a = props.input) === null || _a === void 0 ? void 0 : _a.name, (_b = props.input) === null || _b === void 0 ? void 0 : _b.value, props.inputProps]);
     return components.ui.renderView(props.view || 'form.CheckboxFieldView', __assign(__assign({}, props), { inputProps: inputProps }));
 }
 CheckboxField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
+    size: 'md',
     inputProps: {}
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxField', CheckboxField, { label: false });

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

@@ -1,26 +1,37 @@
 import * as React from 'react';
+import Enum from '../../../base/Enum';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../../ui/form/Field/fieldWrapper';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
+import { ICheckboxFieldViewProps } from '../CheckboxField/CheckboxField';
+type CheckboxFieldListItems = string | ({
+    new (): Enum;
+}) | (string | number | {
+    id: string | number | boolean;
+    label: string | any;
+    color?: string;
+    [key: string]: any;
+})[];
 /**
  * CheckboxListField
+ *
  * Список с чекбоксами. Используется в формах для выбора нескольких значений.
  */
-export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'> {
+export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
-     * Свойства для элемента \<input /\>
+     * Свойства для элемента input
      * @example {onKeyDown: ...}
      */
     inputProps?: any;
     /**
-     * Дополнительный CSS-класс для элемента отображения
+     * Ориентация списка
      */
-    className?: CssClassName;
+    orientation?: Orientation;
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
+     * Коллекция элементов
+     * @example [{id: 1, label: 'Krasnoyarsk', color: 'red'}, {id: 2, label: 'Moscow', color: 'purple'}]
      */
-    view?: CustomView;
+    items: CheckboxFieldListItems;
     [key: string]: any;
 }
 export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
@@ -35,10 +46,14 @@ export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
         label?: string;
         isSelected: boolean;
         isHovered: boolean;
+        color?: string;
     }[];
     selectedIds: (PrimaryKey | any)[];
     onItemSelect: (id: PrimaryKey | any) => void;
-    onItemHover: (id: PrimaryKey | any) => void;
+    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

@@ -10,39 +10,64 @@ 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;
+var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
 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)({
         items: props.items
     }).items;
     // Data select
     var _a = (0, hooks_1.useDataSelect)({
+        selectedIds: inputSelectedIds,
         multiple: props.multiple,
-        selectedIds: props.selectedIds,
         primaryKey: props.primaryKey,
         items: items,
         inputValue: props.input.value
-    }), hoveredId = _a.hoveredId, setHoveredId = _a.setHoveredId, selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
+    }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
     var onItemSelect = (0, react_1.useCallback)(function (id) {
         setSelectedIds(id);
     }, [setSelectedIds]);
-    var onItemHover = (0, react_1.useCallback)(function (id) {
-        setHoveredId(id);
-    }, [setHoveredId]);
     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
     (0, react_1.useEffect)(function () {
         props.input.onChange.call(null, selectedIds);
-    }, [props.input.onChange, selectedIds]);
+        if (props.onChange) {
+            props.onChange(selectedIds);
+        }
+    }, [props, props.input.onChange, selectedIds]);
     var onReset = (0, react_1.useCallback)(function () {
         setSelectedIds([]);
     }, [setSelectedIds]);
@@ -54,12 +79,15 @@ function CheckboxListField(props) {
             onReset();
         }
     }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
-    return components.ui.renderView(props.view || 'form.CheckboxListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds, onItemHover: onItemHover, hoveredId: hoveredId }));
+    var CheckboxFieldView = components.ui.getView('form.CheckboxFieldView');
+    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 = {
     disabled: false,
     required: false,
     className: '',
-    multiple: true
+    multiple: true,
+    orientation: 'vertical'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxListField', CheckboxListField);

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

@@ -1,20 +1,17 @@
+/// <reference types="react" />
+import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from './useDateInputState';
-export interface IDateFieldProps extends IDateInputStateInput {
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
+/**
+ * DateField
+ *
+ * Поле ввода с выпадающим календарём для выбора даты.
+ *
+ * Компонент `DateField` предоставляет возможность создания поля ввода с календарём для выбора даты.
+ * Он предоставляет пользователю удобный интерфейс для выбора даты с помощью календаря,
+ * а также поддерживает настройку формата отображения даты и другие параметры.
+ */
+export interface IDateFieldProps extends IDateInputStateInput, IUiComponent {
     /**
      * Свойства для view компонента
      */
@@ -23,9 +20,17 @@ export interface IDateFieldProps extends IDateInputStateInput {
      * Свойства для компонента Calendar
      */
     calendarProps?: ICalendarProps;
+    /**
+     * Опции маски для поля ввода
+     */
+    maskOptions?: MaskitoOptions;
     [key: string]: any;
 }
 export interface IDateFieldViewProps extends IDateInputStateOutput, Pick<IDateFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'className' | 'calendarProps'> {
+    /**
+     * Ref для input элемента, который накладывает маску
+     */
+    maskInputRef?: React.RefCallback<HTMLElement>;
     [key: string]: any;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateFieldProps>;

package/ui/form/DateField/DateField.js

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
+var react_2 = require("@maskito/react");
+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"));
@@ -24,6 +26,7 @@ var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
  */
 function DateField(props) {
     var components = (0, hooks_1.useComponents)();
+    var maskInputRef = (0, react_2.useMaskito)({ options: props.maskOptions });
     var _a = (0, useDateInputState_1["default"])({
         input: props.input,
         disabled: props.disabled,
@@ -36,7 +39,7 @@ 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]);
-    return components.ui.renderView(props.view || 'form.DateFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove }));
+    return components.ui.renderView(props.view || 'form.DateFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, maskInputRef: maskInputRef }));
 }
 DateField.defaultProps = {
     disabled: false,
@@ -44,6 +47,8 @@ DateField.defaultProps = {
     icon: true,
     required: false,
     showRemove: true,
-    valueFormat: 'YYYY-MM-DD'
+    valueFormat: 'YYYY-MM-DD',
+    maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({ mode: 'dd/mm/yyyy', separator: '.' }),
+    size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateField', DateField);

package/ui/form/DateField/useDateInputState.js

@@ -14,9 +14,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
 var react_1 = require("react");
 var react_use_1 = require("react-use");
-var moment_1 = __importDefault(require("moment"));
+var dayjs_1 = __importDefault(require("dayjs"));
 var calendar_1 = require("../../../utils/calendar");
 function useDateInputState(props) {
     // Get props value
@@ -78,10 +79,10 @@ function useDateInputState(props) {
         onDisplayValueChange('');
     }, [onDisplayValueChange]);
     var onNow = (0, react_1.useCallback)(function () {
-        onDisplayValueChange((0, moment_1["default"])().format(props.displayFormat));
+        onDisplayValueChange((0, dayjs_1["default"])().format(props.displayFormat));
     }, [onDisplayValueChange, props.displayFormat]);
     // Display input props
-    var inputProps = (0, react_1.useMemo)(function () { return (__assign({ value: displayValue, onChange: onDisplayValueChange, onFocus: onFocus, onBlur: onBlur, disabled: props.disabled, placeholder: props.placeholder || props.displayFormat, required: props.required, name: props.input.name, autoComplete: 'off', type: 'text' }, props.inputProps)); }, [displayValue, onBlur, onDisplayValueChange, onFocus, props.disabled, props.displayFormat,
+    var inputProps = (0, react_1.useMemo)(function () { return (__assign({ value: displayValue, onChange: onDisplayValueChange, onFocus: onFocus, onBlur: onBlur, disabled: props.disabled, placeholder: props.placeholder || props.displayFormat.toLowerCase(), required: props.required, name: props.input.name, autoComplete: 'off', type: 'text' }, props.inputProps)); }, [displayValue, onBlur, onDisplayValueChange, onFocus, props.disabled, props.displayFormat,
         props.input.name, props.inputProps, props.placeholder, props.required]);
     return {
         isOpened: isOpened,

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/DateField/useDateTime.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
 var react_1 = require("react");
-var moment_1 = __importDefault(require("moment"));
+var dayjs_1 = __importDefault(require("dayjs"));
 var calendar_1 = require("../../../utils/calendar");
 /**
  * useDateTime
@@ -26,7 +27,7 @@ function useDateTime(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.dateTimeSeparator, props.input.onChange, props.valueFormat, timeValue]);
     var onTimeSelect = (0, react_1.useCallback)(function (time) {
-        var result = (dateValue || (0, moment_1["default"])().format(dateValueFormat)) + props.dateTimeSeparator + time;
+        var result = (dateValue || (0, dayjs_1["default"])().format(dateValueFormat)) + props.dateTimeSeparator + time;
         props.input.onChange.call(null, (0, calendar_1.convertDate)(result, [props.valueFormat, 'YYYY-MM-DD HH:mm'], props.valueFormat, 
         // converting to UTC here depends on whether the date is stored in UTC
         props.dateInUTC,