@steroidsjs/core 3.1.8 → 3.1.9

package/tests/ui/form/DateRangeField/DateRangeField.test.js

@@ -0,0 +1,56 @@
+"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;
+require("@testing-library/jest-dom");
+var DateRangeFieldMockView_1 = __importDefault(require("./DateRangeFieldMockView"));
+var DateRangeField_1 = __importDefault(require("../../../../src/ui/form/DateRangeField/DateRangeField"));
+var helpers_1 = require("../../../helpers");
+describe('DateRangeField tests', function () {
+    var expectedDateRangeFieldClassName = 'DateRangeFieldView';
+    var externalClass = 'external-class';
+    var externalStyle = {
+        width: '30px'
+    };
+    var props = {
+        view: DateRangeFieldMockView_1["default"],
+        size: 'lg',
+        className: externalClass,
+        isOpened: true,
+        style: externalStyle,
+        placeholder: 'This is a placeholder'
+    };
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateRangeField_1["default"], props)).container;
+        var dateRangeField = (0, helpers_1.getElementByClassName)(container, expectedDateRangeFieldClassName);
+        expect(dateRangeField).toBeInTheDocument();
+    });
+    it('should have correct size', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateRangeField_1["default"], props)).container;
+        var dateRangeField = (0, helpers_1.getElementByClassName)(container, expectedDateRangeFieldClassName);
+        expect(dateRangeField).toHaveClass("".concat(expectedDateRangeFieldClassName, "_size_").concat(props.size));
+    });
+    it('should have external styles and class', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateRangeField_1["default"], props)).container;
+        var dateRangeField = (0, helpers_1.getElementByClassName)(container, expectedDateRangeFieldClassName);
+        expect(dateRangeField).toHaveClass(externalClass);
+        expect(dateRangeField).toHaveStyle(externalStyle);
+    });
+    it('should be disabled', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateRangeField_1["default"], __assign(__assign({}, props), { disabled: true }))).container;
+        var dateRangeField = (0, helpers_1.getElementByClassName)(container, expectedDateRangeFieldClassName);
+        expect(dateRangeField).toHaveClass("".concat(expectedDateRangeFieldClassName, "_disabled"));
+    });
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IDateRangeFieldViewProps } from '../../../../src/ui/form/DateRangeField/DateRangeField';
+export default function DateRangeFieldView(props: IDateRangeFieldViewProps): JSX.Element;

package/tests/ui/form/DateRangeField/DateRangeFieldMockView.js

@@ -0,0 +1,39 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hooks_1 = require("../../../../src/hooks");
+var Calendar_1 = __importDefault(require("../../../../src/ui/content/Calendar"));
+var DropDown_1 = __importDefault(require("../../../../src/ui/content/DropDown"));
+var Icon_1 = __importDefault(require("../../../../src/ui/content/Icon"));
+function DateRangeFieldView(props) {
+    var _a, _b, _c;
+    var bem = (0, hooks_1.useBem)('DateRangeFieldView');
+    var hasValue = ((_a = props.inputPropsFrom) === null || _a === void 0 ? void 0 : _a.value) || ((_b = props.inputPropsTo) === null || _b === void 0 ? void 0 : _b.value);
+    var renderCalendar = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsx)(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
+    return ((0, jsx_runtime_1.jsx)(DropDown_1["default"], __assign({ content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('split') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: bem(bem.block({
+                disabled: props.disabled,
+                size: props.size,
+                'is-invalid': !!props.errors
+            }), props.className), style: props.style }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('body') }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {})), placeholder: (_c = props.inputPropsFrom) === null || _c === void 0 ? void 0 : _c.placeholder, onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })), (0, jsx_runtime_1.jsx)("input", __assign({}, props.inputPropsTo, { className: bem(bem.element('input', {})), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('icon-container') }, { children: [props.icon && !hasValue && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('date-icon'), name: 'mockIcon', tabIndex: -1 })), props.showRemove && hasValue && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
+                                    e.preventDefault();
+                                    if (props.onClear) {
+                                        props.onClear();
+                                    }
+                                }, name: 'mockIcon' }))] })), (0, jsx_runtime_1.jsx)("span", { className: bem.element('effect') })] })) })) })));
+}
+exports["default"] = DateRangeFieldView;

package/tests/ui/form/DateTimeFIeld/DateTimeField.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/DateTimeFIeld/DateTimeField.test.js

@@ -0,0 +1,62 @@
+"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;
+require("@testing-library/jest-dom");
+var DateTimeFieldMockView_1 = __importDefault(require("./DateTimeFieldMockView"));
+var DateTimeField_1 = __importDefault(require("../../../../src/ui/form/DateTimeField/DateTimeField"));
+var helpers_1 = require("../../../helpers");
+describe('DateTimeField tests', function () {
+    var expectedDateTimeFieldClassName = 'DateTimeFieldView';
+    var externalClass = 'external-class';
+    var externalStyle = {
+        width: '30px'
+    };
+    var props = {
+        view: DateTimeFieldMockView_1["default"],
+        size: 'lg',
+        className: externalClass,
+        isOpened: true,
+        style: externalStyle,
+        placeholder: 'This is a placeholder'
+    };
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateTimeField_1["default"], props)).container;
+        var dateField = (0, helpers_1.getElementByClassName)(container, expectedDateTimeFieldClassName);
+        expect(dateField).toBeInTheDocument();
+    });
+    it('should have correct size', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateTimeField_1["default"], props)).container;
+        var dateField = (0, helpers_1.getElementByClassName)(container, expectedDateTimeFieldClassName);
+        expect(dateField).toHaveClass("".concat(expectedDateTimeFieldClassName, "_size_").concat(props.size));
+    });
+    it('should have external styles and class', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateTimeField_1["default"], props)).container;
+        var dateField = (0, helpers_1.getElementByClassName)(container, expectedDateTimeFieldClassName);
+        expect(dateField).toHaveClass(externalClass);
+        expect(dateField).toHaveStyle(externalStyle);
+    });
+    it('should have placeholder', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateTimeField_1["default"], props)).container;
+        var dateFieldInput = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDateTimeFieldClassName, "__input"));
+        expect(dateFieldInput).toHaveAttribute('placeholder', props.placeholder);
+    });
+    it('should be disabled', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateTimeField_1["default"], __assign(__assign({}, props), { disabled: true }))).container;
+        var dateField = (0, helpers_1.getElementByClassName)(container, expectedDateTimeFieldClassName);
+        expect(dateField).toHaveClass("".concat(expectedDateTimeFieldClassName, "_disabled"));
+    });
+    //TODO ACTION
+});

package/tests/ui/form/DateTimeFIeld/DateTimeFieldMockView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IDateTimeFieldViewProps } from '../../../../src/ui/form/DateTimeField/DateTimeField';
+export default function DateTimeFieldView(props: IDateTimeFieldViewProps): JSX.Element;

package/tests/ui/form/DateTimeFIeld/DateTimeFieldMockView.js

@@ -0,0 +1,42 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hooks_1 = require("../../../../src/hooks");
+var Calendar_1 = __importDefault(require("../../../../src/ui/content/Calendar"));
+var DropDown_1 = __importDefault(require("../../../../src/ui/content/DropDown"));
+var Icon_1 = __importDefault(require("../../../../src/ui/content/Icon"));
+var TimePanelMockView_1 = __importDefault(require("../TimeField/TimePanelMockView"));
+function DateTimeFieldView(props) {
+    var bem = (0, hooks_1.useBem)('DateTimeFieldView');
+    var renderContent = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('panel-container') }, { children: [(0, jsx_runtime_1.jsx)(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar') })), (0, jsx_runtime_1.jsx)("div", { className: bem.element('separator') }), (0, jsx_runtime_1.jsx)(TimePanelMockView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') }))] }))); }, [bem, props.calendarProps, props.timePanelViewProps]);
+    return ((0, jsx_runtime_1.jsx)(DropDown_1["default"], __assign({ content: renderContent, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: bem(bem.block({
+                size: props.size,
+                disabled: props.disabled,
+                'is-invalid': !!props.errors
+            }), props.className), style: props.style }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('body') }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props.inputProps, { placeholder: props.placeholder
+                            ? props.placeholder
+                            : props.inputProps.placeholder, className: bem(bem.element('input', {
+                            size: props.size
+                        }), props.isInvalid && 'is-invalid'), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('icon-container') }, { children: [!props.inputProps.value && props.icon && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('date-icon'), name: "mockIcon", tabIndex: -1 })), props.showRemove && props.inputProps.value && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
+                                    e.preventDefault();
+                                    if (props.onClear) {
+                                        props.onClear();
+                                    }
+                                }, name: "mockIcon" }))] }))] })) })) })));
+}
+exports["default"] = DateTimeFieldView;

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/DateTimeRangeField/DateTimeRangeField.test.js

@@ -0,0 +1,62 @@
+"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;
+require("@testing-library/jest-dom");
+var DateTimeRangeFieldMockView_1 = __importDefault(require("./DateTimeRangeFieldMockView"));
+var DateTimeRangeField_1 = __importDefault(require("../../../../src/ui/form/DateTimeRangeField/DateTimeRangeField"));
+var helpers_1 = require("../../../helpers");
+describe('DateTimeRangeField tests', function () {
+    var expectedDateTimeFieldClassName = 'DateTimeRangeFieldView';
+    var externalClass = 'external-class';
+    var externalStyle = {
+        width: '30px'
+    };
+    var props = {
+        view: DateTimeRangeFieldMockView_1["default"],
+        size: 'lg',
+        className: externalClass,
+        isOpened: true,
+        style: externalStyle,
+        placeholder: 'This is a placeholder'
+    };
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateTimeRangeField_1["default"], props)).container;
+        var dateTimeRange = (0, helpers_1.getElementByClassName)(container, expectedDateTimeFieldClassName);
+        expect(dateTimeRange).toBeInTheDocument();
+    });
+    it('should have correct size', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateTimeRangeField_1["default"], props)).container;
+        var dateTimeRange = (0, helpers_1.getElementByClassName)(container, expectedDateTimeFieldClassName);
+        expect(dateTimeRange).toHaveClass("".concat(expectedDateTimeFieldClassName, "_size_").concat(props.size));
+    });
+    it('should have external styles and class', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateTimeRangeField_1["default"], props)).container;
+        var dateTimeRange = (0, helpers_1.getElementByClassName)(container, expectedDateTimeFieldClassName);
+        expect(dateTimeRange).toHaveClass(externalClass);
+        expect(dateTimeRange).toHaveStyle(externalStyle);
+    });
+    it('should have placeholder', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateTimeRangeField_1["default"], props)).container;
+        var dateTimeRange = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDateTimeFieldClassName, "__input"));
+        expect(dateTimeRange).toHaveAttribute('placeholder', props.placeholder);
+    });
+    it('should be disabled', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DateTimeRangeField_1["default"], __assign(__assign({}, props), { disabled: true }))).container;
+        var dateTimeRange = (0, helpers_1.getElementByClassName)(container, expectedDateTimeFieldClassName);
+        expect(dateTimeRange).toHaveClass("".concat(expectedDateTimeFieldClassName, "_disabled"));
+    });
+    //TODO ACTION
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IDateTimeRangeFieldViewProps } from '../../../../src/ui/form/DateTimeRangeField/DateTimeRangeField';
+export default function DateTimeRangeFieldView(props: IDateTimeRangeFieldViewProps): JSX.Element;

package/tests/ui/form/DateTimeRangeField/DateTimeRangeFieldMockView.js

@@ -0,0 +1,44 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hooks_1 = require("../../../../src/hooks");
+var Calendar_1 = __importDefault(require("../../../../src/ui/content/Calendar"));
+var DropDown_1 = __importDefault(require("../../../../src/ui/content/DropDown"));
+var Icon_1 = __importDefault(require("../../../../src/ui/content/Icon"));
+var TimePanelMockView_1 = __importDefault(require("../TimeField/TimePanelMockView"));
+function DateTimeRangeFieldView(props) {
+    var _a, _b;
+    var bem = (0, hooks_1.useBem)('DateTimeRangeFieldView');
+    var hasValue = ((_a = props.inputPropsFrom) === null || _a === void 0 ? void 0 : _a.value) || ((_b = props.inputPropsTo) === null || _b === void 0 ? void 0 : _b.value);
+    var renderCalendar = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('panel-container') }, { children: [(0, jsx_runtime_1.jsx)(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar') })), (0, jsx_runtime_1.jsx)("div", { className: bem.element('separator') }), (0, jsx_runtime_1.jsx)(TimePanelMockView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') }))] }))); }, [bem, props.calendarProps, props.timePanelViewProps]);
+    return ((0, jsx_runtime_1.jsx)(DropDown_1["default"], __assign({ content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: bem(bem.block({
+                disabled: props.disabled,
+                size: props.size,
+                'is-invalid': !!props.errors
+            }), props.className), style: props.style }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('body') }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {
+                            size: props.size
+                        })), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })), (0, jsx_runtime_1.jsx)("input", __assign({}, props.inputPropsTo, { className: bem(bem.element('input', {
+                            size: props.size
+                        }), !!props.errorsTo && 'is-invalid'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('icon-container') }, { children: [props.icon && !hasValue && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('date-icon'), name: 'mockIcon', tabIndex: -1 })), props.showRemove && hasValue && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
+                                    e.preventDefault();
+                                    if (props.onClear) {
+                                        props.onClear();
+                                    }
+                                }, name: 'mockIcon' }))] })), (0, jsx_runtime_1.jsx)("span", { className: bem.element('effect') })] })) })) })));
+}
+exports["default"] = DateTimeRangeFieldView;

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/DropDownField/DropDownField.test.js

@@ -0,0 +1,167 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var dom_1 = require("@testing-library/dom");
+var DropDownFieldMockView_1 = __importDefault(require("./DropDownFieldMockView"));
+var DropDownField_1 = __importDefault(require("../../../../src/ui/form/DropDownField/DropDownField"));
+var helpers_1 = require("../../../helpers");
+describe('DropDownField tests', function () {
+    var defaultItemToSelectAllLabel = 'Все';
+    var items = [
+        {
+            id: 1,
+            label: 'First',
+            items: [{
+                    id: 22,
+                    label: 'InnerItem'
+                }]
+        },
+        {
+            id: 2,
+            label: 'Second'
+        },
+    ];
+    var props = {
+        color: 'warning',
+        size: 'lg',
+        placeholder: 'placeholder',
+        multiple: true,
+        showReset: true,
+        itemsContent: {
+            type: 'checkbox'
+        },
+        groupAttribute: 'items',
+        items: items,
+        view: DropDownFieldMockView_1["default"]
+    };
+    var expectedDropDownFieldClassName = 'DropDownFieldView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DropDownField_1["default"], props)).container;
+        var component = (0, helpers_1.getElementByClassName)(container, expectedDropDownFieldClassName);
+        expect(component).toBeInTheDocument();
+    });
+    it('should have placeholder', function () {
+        var getByText = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DropDownField_1["default"], props)).getByText;
+        var placeholderText = getByText(String(props.placeholder));
+        expect(placeholderText).toBeInTheDocument();
+    });
+    it('should have items with correct type', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DropDownField_1["default"], props)).container;
+        var dropDownTriggerElement = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDropDownFieldClassName, "__selected-items"));
+        dom_1.fireEvent.click(dropDownTriggerElement);
+        var inputs = container.querySelectorAll('input');
+        inputs.forEach(function (input) { return expect(input.type).toBe('checkbox'); });
+    });
+    it('should have correct color and size', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DropDownField_1["default"], props)).container;
+        var component = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDropDownFieldClassName));
+        expect(component).toHaveClass("".concat(expectedDropDownFieldClassName, "_size_lg"));
+        expect(component).toHaveClass("".concat(expectedDropDownFieldClassName, "_warning"));
+    });
+    it('should have selected items after select options', function () {
+        var _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DropDownField_1["default"], props)), container = _a.container, getByText = _a.getByText;
+        var totalItemClicksCount = 2;
+        var dropDownTriggerElement = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDropDownFieldClassName, "__selected-items"));
+        dom_1.fireEvent.click(dropDownTriggerElement);
+        dom_1.fireEvent.click(getByText('InnerItem'));
+        dom_1.fireEvent.click(getByText('Second'));
+        var itemsCounter = getByText("\u0412\u044B\u0431\u0440\u0430\u043D\u043E (".concat(totalItemClicksCount, ")"));
+        expect(itemsCounter).toBeInTheDocument();
+    });
+    it('should have autoComplete with placeholder', function () {
+        var searchPlaceholder = 'search';
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DropDownField_1["default"], __assign(__assign({}, props), { autoComplete: true, searchPlaceholder: searchPlaceholder }))).container;
+        var dropDownTriggerElement = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDropDownFieldClassName, "__selected-items"));
+        dom_1.fireEvent.click(dropDownTriggerElement);
+        var search = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDropDownFieldClassName, "__search"));
+        var searchInput = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDropDownFieldClassName, "__search-input"));
+        expect(search).toBeInTheDocument();
+        expect(searchInput).toBeInTheDocument();
+        expect(searchInput.placeholder).toBe(searchPlaceholder);
+    });
+    it('should have group', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DropDownField_1["default"], props)).container;
+        var dropDownTriggerElement = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDropDownFieldClassName, "__selected-items"));
+        dom_1.fireEvent.click(dropDownTriggerElement);
+        var group = (0, helpers_1.getElementByClassName)(container, 'DropDownItemView__group');
+        expect(group).toBeInTheDocument();
+    });
+    it('should have all item', function () {
+        var _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DropDownField_1["default"], __assign(__assign({}, props), { itemToSelectAll: true }))), container = _a.container, getByText = _a.getByText;
+        var dropDownTriggerElement = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDropDownFieldClassName, "__selected-items"));
+        dom_1.fireEvent.click(dropDownTriggerElement);
+        expect(getByText(defaultItemToSelectAllLabel)).toBeInTheDocument();
+    });
+    it('should have custom all item', function () {
+        var customAllLabel = 'custom all';
+        var _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DropDownField_1["default"], __assign(__assign({}, props), { itemToSelectAll: {
+                id: 'all',
+                label: customAllLabel
+            } }))), container = _a.container, getByText = _a.getByText;
+        var dropDownTriggerElement = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDropDownFieldClassName, "__selected-items"));
+        dom_1.fireEvent.click(dropDownTriggerElement);
+        expect(getByText(customAllLabel)).toBeInTheDocument();
+    });
+    it('should clear selected items on button click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var expectedSelectedItemLabel, _a, container, getByText, dropDownResetElement;
+        return __generator(this, function (_b) {
+            expectedSelectedItemLabel = items[0].label;
+            _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(DropDownField_1["default"], __assign(__assign({}, props), { selectedIds: [items[0].id] }))), container = _a.container, getByText = _a.getByText;
+            expect(getByText(expectedSelectedItemLabel)).toBeInTheDocument();
+            dropDownResetElement = (0, helpers_1.getElementByClassName)(container, "".concat(expectedDropDownFieldClassName, "__icon-close"));
+            dom_1.fireEvent.click(dropDownResetElement);
+            expect(getByText(props.placeholder)).toBeInTheDocument();
+            return [2 /*return*/];
+        });
+    }); });
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IDropDownFieldViewProps } from '../../../../src/ui/form/DropDownField/DropDownField';
+export default function DropDownFieldView(props: IDropDownFieldViewProps): JSX.Element;

package/tests/ui/form/DropDownField/DropDownFieldMockView.js

@@ -0,0 +1,65 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+var react_1 = require("react");
+var hooks_1 = require("../../../../src/hooks");
+var Icon_1 = __importDefault(require("../../../../src/ui/content/Icon"));
+var IconMockView_1 = __importDefault(require("../../content/Icon/IconMockView"));
+var getSelectedItemsLabel = function (selectedItems) { return (selectedItems
+    .map(function (selectedItem) { return selectedItem.label; })
+    .join(', ')); };
+var getSelectedItemsCount = function (selectedItems) {
+    var _a;
+    if (selectedItems.length <= 1) {
+        return (_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.label;
+    }
+    return "".concat(__('Выбрано'), " (").concat(selectedItems.length, ")");
+};
+function DropDownFieldView(props) {
+    var _a;
+    var bem = (0, hooks_1.useBem)('DropDownFieldView');
+    var inputRef = (0, react_1.useRef)(null);
+    // Auto focus on search
+    (0, react_1.useEffect)(function () {
+        if (props.isSearchAutoFocus && props.isAutoComplete && props.isOpened && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
+            inputRef.current.focus();
+        }
+    }, [props.isAutoComplete, props.isOpened, props.isSearchAutoFocus]);
+    var renderPlaceholder = (0, react_1.useCallback)(function () {
+        var _a;
+        return props.placeholder && !((_a = props.selectedIds) === null || _a === void 0 ? void 0 : _a.length)
+            ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('placeholder') }, { children: props.placeholder })))
+            : null;
+    }, [bem, props.placeholder, props.selectedIds]);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: props.forwardedRef, className: bem(bem.block((_a = {
+                size: props.size
+            },
+            _a["".concat(props.color)] = !!props.color && !props.outline,
+            _a["outline_".concat(props.color)] = props.outline,
+            _a.opened = props.isOpened,
+            _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && props.onOpen(); }, style: props.style, role: 'button', tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('selected-items', {
+                    reset: props.showReset,
+                    disabled: props.disabled
+                }), onClick: props.onOpen, tabIndex: -1, role: 'button' }, { children: [renderPlaceholder(), (0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('selected-items') }, { children: props.showEllipses
+                            ? getSelectedItemsLabel(props.selectedItems)
+                            : getSelectedItemsCount(props.selectedItems) }))] })), props.showReset && props.selectedIds.length > 0 && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { view: IconMockView_1["default"], name: 'mockIcon', className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": '\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C' })), (0, jsx_runtime_1.jsx)(Icon_1["default"], { view: IconMockView_1["default"], name: 'mockIcon', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen }), props.isOpened && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('drop-down') }, { children: [props.isAutoComplete && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('search', {
+                            size: props.size
+                        }) }, { children: [(0, jsx_runtime_1.jsx)(Icon_1["default"], { view: IconMockView_1["default"], name: 'mockIcon', className: bem.element('search-icon') }), (0, jsx_runtime_1.jsx)("input", __assign({}, props.searchInputProps, { ref: inputRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem(bem.element('search-input'), props.searchInputProps.className) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('drop-down-list') }, { children: [props.multiple && props.itemToSelectAll
+                                && props.renderItem(props.itemToSelectAll), props.items.map(function (item) { return props.renderItem(item); })] }))] })))] })));
+}
+exports["default"] = DropDownFieldView;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IDropDownFieldItemViewProps } from '../../../../src/ui/form/DropDownField/DropDownField';
+export default function DropDownItemView(props: IDropDownFieldItemViewProps): JSX.Element;