@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.6

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -0,0 +1,109 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"));
+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 DATE_TIME_SEPARATOR = ' ';
+function DateTimeRangeField(props) {
+    var components = hooks_1.useComponents();
+    // Global onChange (from props)
+    var onChange = react_1.useCallback(function () {
+        var _a;
+        if (props.onChange) {
+            props.onChange.call(null, (_a = {},
+                _a[props.attributeFrom] = props.inputFrom.value,
+                _a[props.attributeTo] = props.inputTo.value,
+                _a));
+        }
+    }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
+    // Input 'from'
+    var _a = useDateInputState_1["default"]({
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat,
+        input: props.inputFrom,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        required: props.required,
+        inputProps: props.inputPropsFrom,
+        onChange: onChange
+    }), isOpenedFrom = _a.isOpened, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear, onNow = _a.onNow;
+    // Input 'to'
+    var _b = useDateInputState_1["default"]({
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat,
+        input: props.inputTo,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        required: props.required,
+        inputProps: props.inputPropsTo,
+        onChange: onChange
+    }), isOpenedTo = _b.isOpened, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear;
+    var _c = useDateTime_1["default"]({
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat,
+        dateTimeSeparator: DATE_TIME_SEPARATOR,
+        input: props.inputFrom
+    }), dateValueFormat = _c.dateValueFormat, dateValueFrom = _c.dateValue, timeValueFrom = _c.timeValue, onDateFromSelect = _c.onDateSelect, onTimeFromSelect = _c.onTimeSelect;
+    var _d = useDateTime_1["default"]({
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat,
+        dateTimeSeparator: DATE_TIME_SEPARATOR,
+        input: props.inputTo
+    }), dateValueTo = _d.dateValue, timeValueTo = _d.timeValue, onDateToSelect = _d.onDateSelect, onTimeToSelect = _d.onTimeSelect;
+    var _e = useDateRange_1["default"]({
+        onClearFrom: onClearFrom,
+        onCloseTo: onCloseTo,
+        onCloseFrom: onCloseFrom,
+        onClearTo: onClearTo,
+        inputPropsFrom: inputPropsFrom,
+        inputPropsTo: inputPropsTo,
+        inputFrom: props.inputFrom,
+        inputTo: props.inputTo,
+        useSmartFocus: false
+    }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
+    // Calendar props
+    var calendarProps = 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]);
+    // TimePanel props
+    var timePanelViewProps = react_1.useMemo(function () { return (__assign({ value: focus === 'from' ? timeValueFrom : timeValueTo, onSelect: focus === 'from' ? onTimeFromSelect : onTimeToSelect, onNow: onNow,
+        onClose: onClose, showNow: false, showHeader: true }, props.timePanelViewProps)); }, [
+        focus,
+        onClose,
+        onNow,
+        onTimeFromSelect,
+        onTimeToSelect,
+        props.timePanelViewProps,
+        timeValueFrom,
+        timeValueTo,
+    ]);
+    return components.ui.renderView(props.view || 'form.DateTimeRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear,
+        onClose: onClose,
+        calendarProps: calendarProps,
+        timePanelViewProps: timePanelViewProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, disabled: props.disabled, noBorder: props.noBorder }));
+}
+DateTimeRangeField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    displayFormat: 'DD.MM.YYYY' + DATE_TIME_SEPARATOR + 'HH:mm',
+    valueFormat: 'YYYY-MM-DD' + DATE_TIME_SEPARATOR + 'HH:mm',
+    showRemove: true,
+    icon: true
+};
+exports["default"] = fieldWrapper_1["default"]('DateTimeRangeField', DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Можно выбрать точную дату с какого по какое время происходит какое-то событие с точностью до минуты
+ * @order 1
+ * @col 6
+ */
+export default _default;

package/ui/form/DateTimeRangeField/demo/basic.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 DateTimeRangeField_1 = __importDefault(require("../DateTimeRangeField"));
+/**
+ * Можно выбрать точную дату с какого по какое время происходит какое-то событие с точностью до минуты
+ * @order 1
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(DateTimeRangeField_1["default"], null)); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Оключён и без рамок
+ * @order 2
+ * @col 6
+ */
+export default _default;

package/ui/form/DateTimeRangeField/demo/disabled.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 DateTimeRangeField_1 = __importDefault(require("../DateTimeRangeField"));
+/**
+ * Оключён и без рамок
+ * @order 2
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(DateTimeRangeField_1["default"], { disabled: true, noBorder: true })); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обработка ошибок.
+ * @order 4
+ * @col 6
+ */
+export default _default;

package/ui/form/DateTimeRangeField/demo/errors.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 DateTimeRangeField_1 = __importDefault(require("../DateTimeRangeField"));
+/**
+ * Обработка ошибок.
+ * @order 4
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DateTimeRangeField_1["default"], { label: 'Errors', errors: ['Error 1 text', 'Error 2 text'], layout: true }))); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Кастомная иконка справа выбранная по контексту
+ * @order 3
+ * @col 6
+ */
+export default _default;

package/ui/form/DateTimeRangeField/demo/icon.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 DateTimeRangeField_1 = __importDefault(require("../DateTimeRangeField"));
+/**
+ * Кастомная иконка справа выбранная по контексту
+ * @order 3
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(DateTimeRangeField_1["default"], { icon: 'plane' })); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Сообщение внутри импута
+ * @order 6
+ * @col 6
+ */
+export default _default;

package/ui/form/DateTimeRangeField/demo/placeholder.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 DateTimeRangeField_1 = __importDefault(require("../DateTimeRangeField"));
+/**
+ * Сообщение внутри импута
+ * @order 6
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DateTimeRangeField_1["default"], { label: 'Placeholder', placeholder: '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0443\u0434\u043E\u0431\u043D\u0443\u044E \u0432\u0430\u043C \u0434\u0430\u0442\u0443 \u0432\u0441\u0442\u0440\u0435\u0447\u0438' }))); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Как обязательное поле для заполнения.
+ * @order 3
+ * @col 6
+ */
+export default _default;

package/ui/form/DateTimeRangeField/demo/required.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 DateTimeRangeField_1 = __importDefault(require("../DateTimeRangeField"));
+/**
+ * Как обязательное поле для заполнения.
+ * @order 3
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DateTimeRangeField_1["default"], { label: 'Required', required: true }))); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * После введения датты при наведении показывается кнопка, удалить содержание внутри инпута
+ * @order 7
+ * @col 6
+ */
+export default _default;

package/ui/form/DateTimeRangeField/demo/showRemove.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 DateTimeRangeField_1 = __importDefault(require("../DateTimeRangeField"));
+/**
+ * После введения датты при наведении показывается кнопка, удалить содержание внутри инпута
+ * @order 7
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(DateTimeRangeField_1["default"], { showRemove: true })); });

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

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

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

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

@@ -0,0 +1,75 @@
+import { IDataProviderConfig } from '../../../hooks/useDataProvider';
+import { IDataSelectConfig } from '../../../hooks/useDataSelect';
+import { IFieldWrapperInputProps } from '../../form/Field/fieldWrapper';
+/**
+ * DropDownField
+ * Выпадающий список для выбора одного или нескольких значений
+ */
+export interface IDropDownFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'> {
+    /**
+     * Placeholder подсказка
+     * @example Your text...
+     */
+    searchPlaceholder?: string;
+    inputProps?: any;
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName;
+    /**
+     * Объект CSS стилей
+     * @example {width: '45%'}
+     */
+    style?: any;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: any;
+    /**
+     * Показать кнопку для сброса выбранного значения
+     * @example true
+     */
+    showReset?: boolean;
+    /**
+     * Атрибут, в котором должны лежать дочерние элементы списка (для группировки)
+     * Если аттрибут не задан - группировка не производится
+     * @example items
+     */
+    groupAttribute?: string;
+    /**
+     * Включает стиль без 'border'
+     * @example true
+     */
+    noBorder?: boolean;
+    [key: string]: any;
+}
+export interface IDropDownFieldViewProps extends Omit<IDropDownFieldProps, 'items'> {
+    errors?: string[];
+    items: Record<string, unknown>[];
+    selectedItems: Record<string, unknown>[];
+    hoveredId: PrimaryKey | any;
+    selectedIds: (PrimaryKey | any)[];
+    forwardedRef: any;
+    searchInputProps: {
+        type: string;
+        name: string;
+        onChange: (value: string) => void;
+        value: string | number;
+        placeholder: string;
+        disabled: boolean;
+        className: CssClassName;
+    };
+    isOpened?: boolean;
+    isLoading?: boolean;
+    onReset: () => void;
+    onItemSelect: (id: PrimaryKey | any) => void;
+    onItemHover: (id: PrimaryKey | any) => void;
+    onItemRemove: (id: PrimaryKey | any) => void;
+    onClose: () => void;
+    placeholder: string;
+    isAutoComplete?: boolean;
+    isSearchAutoFocus?: boolean;
+}
+declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDropDownFieldProps>;
+export default _default;

package/ui/form/DropDownField/DropDownField.js

@@ -0,0 +1,129 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var hooks_1 = require("../../../hooks");
+var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
+function DropDownField(props) {
+    var components = hooks_1.useComponents();
+    // Query state
+    var _a = react_1.useState(''), query = _a[0], setQuery = _a[1];
+    var inputSelectedIds = react_1.useMemo(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
+    // Data provider
+    var _b = hooks_1.useDataProvider({
+        items: props.items,
+        dataProvider: props.dataProvider,
+        autoComplete: props.autoComplete,
+        autoFetch: props.autoFetch,
+        query: query,
+        initialSelectedIds: inputSelectedIds
+    }), items = _b.items, isLoading = _b.isLoading, isAutoComplete = _b.isAutoComplete, sourceItems = _b.sourceItems;
+    // Data select
+    var _c = hooks_1.useDataSelect({
+        multiple: props.multiple,
+        selectFirst: props.selectFirst,
+        selectedIds: inputSelectedIds,
+        primaryKey: props.primaryKey,
+        groupAttribute: props.groupAttribute,
+        items: items,
+        sourceItems: sourceItems,
+        inputValue: props.input.value
+    }), isOpened = _c.isOpened, setIsOpened = _c.setIsOpened, setIsFocused = _c.setIsFocused, hoveredId = _c.hoveredId, setHoveredId = _c.setHoveredId, selectedIds = _c.selectedIds, setSelectedIds = _c.setSelectedIds, selectedItems = _c.selectedItems;
+    var onOpen = react_1.useCallback(function () {
+        setQuery('');
+        setIsFocused(true);
+        setIsOpened(true);
+        setHoveredId(null);
+    }, [setHoveredId, setIsFocused, setIsOpened]);
+    var onItemHover = react_1.useCallback(function (id) {
+        setHoveredId(id);
+    }, [setHoveredId]);
+    var onItemSelect = react_1.useCallback(function (id) {
+        setSelectedIds(id);
+    }, [setSelectedIds]);
+    var onItemRemove = react_1.useCallback(function (id) {
+        setSelectedIds(selectedIds.filter(function (i) { return i !== id; }));
+    }, [selectedIds, setSelectedIds]);
+    var onReset = react_1.useCallback(function () {
+        setSelectedIds([]);
+    }, [setSelectedIds]);
+    var onClose = react_1.useCallback(function () {
+        setIsFocused(false);
+        setIsOpened(false);
+    }, [setIsFocused, setIsOpened]);
+    // Outside click -> close
+    var forwardedRef = react_1.useRef(null);
+    if (process.env.PLATFORM !== 'mobile') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        react_use_1.useClickAway(forwardedRef, onClose);
+    }
+    // Search input props
+    var searchInputProps = react_1.useMemo(function () { return ({
+        type: 'search',
+        placeholder: props.searchPlaceholder || __('Начните вводить символы для поиска...'),
+        onChange: function (value) { return setQuery(value); },
+        tabIndex: -1
+    }); }, [props]);
+    // Sync with form
+    var prevSelectedIds = react_use_1.usePrevious(selectedIds);
+    react_1.useEffect(function () {
+        if (!isEqual_1["default"](prevSelectedIds || [], selectedIds)) {
+            var newValues = props.multiple ? selectedIds : (selectedIds[0] || null);
+            props.input.onChange.call(null, newValues);
+            if (props.onChange) {
+                props.onChange.call(null, newValues);
+            }
+        }
+    }, [prevSelectedIds, props.input.onChange, props.multiple, props.onChange, selectedIds]);
+    // Reset selected ids on form reset
+    var prevInputValue = react_use_1.usePrevious(props.input.value);
+    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]);
+    return components.ui.renderView(props.view || 'form.DropDownFieldView', __assign(__assign({}, props), { isAutoComplete: isAutoComplete,
+        items: items,
+        hoveredId: hoveredId,
+        selectedIds: selectedIds,
+        forwardedRef: forwardedRef,
+        searchInputProps: searchInputProps,
+        isOpened: isOpened,
+        isLoading: isLoading,
+        onOpen: onOpen,
+        selectedItems: selectedItems,
+        // TODO onFocus
+        // TODO onBlur
+        onItemHover: onItemHover,
+        onItemSelect: onItemSelect,
+        onItemRemove: onItemRemove,
+        onReset: onReset,
+        onClose: onClose }));
+}
+DropDownField.defaultProps = {
+    primaryKey: 'id',
+    disabled: false,
+    required: false,
+    className: '',
+    autoComplete: false,
+    showReset: false,
+    multiple: false,
+    isSearchAutoFocus: true
+};
+exports["default"] = fieldWrapper_1["default"]('DropDownField', DropDownField);

package/ui/form/DropDownField/demo/auto-complete.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Использование свойства самозаполнения.
+ * @order 5
+ * @col 6
+ */
+export default _default;