@steroidsjs/core 3.1.8 → 3.1.9

package/tests/ui/form/InputField/InputFieldMockView.js

@@ -0,0 +1,49 @@
+"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 import/no-extraneous-dependencies */
+var hooks_1 = require("../../../../src/hooks");
+var Icon_1 = __importDefault(require("../../../../src/ui/content/Icon"));
+var renderIconMock_1 = __importDefault(require("../../../mocks/renderIconMock"));
+function InputFieldView(props) {
+    var _a, _b;
+    var bem = (0, hooks_1.useBem)('InputFieldView');
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem(bem.block({
+            disabled: props.disabled,
+            size: props.size,
+            hasError: !!props.errors,
+            hasLeadIcon: !!props.leadIcon,
+            hasClearIcon: props.showClear && !props.disabled,
+            filled: !!((_a = props.input) === null || _a === void 0 ? void 0 : _a.value),
+            hasAddonAfter: !!props.addonAfter,
+            hasAddonBefore: !!props.addonBefore,
+            hasAddon: !!props.addonAfter || !!props.addonBefore,
+            hasTextAddon: !!props.textAfter || !!props.textBefore,
+            hasTextAddonBefore: !!props.textBefore,
+            hasTextAddonAfter: !!props.textAfter
+        }), props.className), style: props.style }, { children: [props.addonBefore && ((0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('addon-before') }, { children: props.addonBefore }))), props.textBefore && ((0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('text-before') }, { children: props.textBefore }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('input-wrapper') }, { children: [props.leadIcon && (0, renderIconMock_1["default"])(props.leadIcon, {
+                        className: bem.element('lead-icon'),
+                        tabIndex: -1
+                    }), props.maskOptions
+                        ? ((0, jsx_runtime_1.jsx)("input", __assign({ onBlur: props.onBlur, onFocus: props.onFocus, onMouseDown: props.onMouseDown, className: bem(bem.element('input', {
+                                size: props.size
+                            })) }, props.inputProps, { type: props.inputProps.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef })))
+                        : ((0, jsx_runtime_1.jsx)("input", __assign({ className: bem(bem.element('input', {
+                                size: props.size
+                            })) }, props.inputProps, { type: (_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef }))), !props.disabled && props.showClear && !props.maskProps && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { name: "mockIcon", className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))] })), props.textAfter && ((0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('text-after') }, { children: props.textAfter }))), props.addonAfter && ((0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('addon-after') }, { children: props.addonAfter })))] })));
+}
+exports["default"] = InputFieldView;

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var InputField_1 = require("../../../../src/ui/form/InputField/InputField");
+var MaskField_1 = __importDefault(require("../../../../src/ui/form/MaskField/MaskField"));
+var helpers_1 = require("../../../helpers");
+describe('MaskField tests', function () {
+    var label = 'mask phone';
+    var props = {
+        label: label,
+        maskOptions: InputField_1.MASK_PRESETS.phone,
+        showClear: true
+    };
+    it('should be in the document', function () {
+        var getByText = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(MaskField_1["default"], props)).getByText;
+        var maskField = getByText(label + ':');
+        expect(maskField).toBeInTheDocument();
+    });
+});

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

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

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

@@ -0,0 +1,208 @@
+"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 react_1 = require("@testing-library/react");
+var NumberFieldMockView_1 = __importDefault(require("./NumberFieldMockView"));
+var NumberField_1 = __importDefault(require("../../../../src/ui/form/NumberField/NumberField"));
+var helpers_1 = require("../../../helpers");
+describe('NumberField tests', function () {
+    var externalClassName = 'external-class-name';
+    var hint = 'hint';
+    var props = {
+        view: NumberFieldMockView_1["default"],
+        className: externalClassName,
+        max: 3,
+        min: 1,
+        hint: hint
+    };
+    var expectedNumberFieldClassName = 'NumberFieldView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(NumberField_1["default"], props)).container;
+        var numberField = (0, helpers_1.getElementByClassName)(container, expectedNumberFieldClassName);
+        expect(numberField).toBeInTheDocument();
+    });
+    it('should have the external class name', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(NumberField_1["default"], props)).container;
+        var numberField = (0, helpers_1.getElementByClassName)(container, expectedNumberFieldClassName);
+        expect(numberField).toHaveClass(externalClassName);
+    });
+    it('should have the min max attributes', function () {
+        var _a, _b;
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(NumberField_1["default"], props)).container;
+        var input = (0, helpers_1.getElementByTag)(container, 'input');
+        expect(input).toHaveAttribute('min', (_a = props.min) === null || _a === void 0 ? void 0 : _a.toString());
+        expect(input).toHaveAttribute('max', (_b = props.max) === null || _b === void 0 ? void 0 : _b.toString());
+    });
+    it('should have hint', function () {
+        var getByText = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(NumberField_1["default"], props)).getByText;
+        var message = getByText(hint);
+        expect(message).toBeInTheDocument();
+    });
+    it('should be disabled', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(NumberField_1["default"], __assign(__assign({}, props), { disabled: true }))).container;
+        var component = (0, helpers_1.getElementByClassName)(container, "".concat(expectedNumberFieldClassName, "_disabled"));
+        expect(component).toBeInTheDocument();
+    });
+    it('should have filled class', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var container, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(NumberField_1["default"], props)).container;
+                    input = (0, helpers_1.getElementByTag)(container, 'input');
+                    dom_1.fireEvent.input(input, {
+                        target: {
+                            value: '1'
+                        }
+                    });
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            var component = (0, helpers_1.getElementByClassName)(container, "".concat(expectedNumberFieldClassName, "_filled"));
+                            expect(component).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('validation', function () {
+        var validationCases = [
+            ['allows an empty optional field', {
+                    value: ''
+                }, true],
+            ['rejects an empty required field', {
+                    value: '',
+                    required: true
+                }, false],
+            ['allows a required field without min and max', {
+                    value: '5',
+                    required: true
+                }, true],
+            ['rejects a non-numeric value in an optional field', {
+                    value: 'not-a-number'
+                }, false],
+            ['rejects a whitespace-only value', {
+                    value: ' '
+                }, false],
+            ['rejects a non-finite value', {
+                    value: Infinity
+                }, false],
+            ['allows a value equal to zero', {
+                    value: '0',
+                    required: true
+                }, true],
+            ['applies min without max', {
+                    value: '4',
+                    min: 5
+                }, false],
+            ['allows a value equal to min', {
+                    value: '5',
+                    min: 5
+                }, true],
+            ['applies max without min', {
+                    value: '6',
+                    max: 5
+                }, false],
+            ['allows a value equal to max', {
+                    value: '5',
+                    max: 5
+                }, true],
+            ['rejects a decimal value when decimal is not set', {
+                    value: '1.2'
+                }, false],
+            ['rejects a decimal separator when decimal is zero', {
+                    value: '1.',
+                    decimal: 0
+                }, false],
+            ['allows the configured number of decimal places', {
+                    value: '1.23',
+                    decimal: 2
+                }, true],
+            ['rejects too many decimal places', {
+                    value: '1.234',
+                    decimal: 2
+                }, false],
+            ['rejects a negative value when it is forbidden', {
+                    value: '-1',
+                    isCanBeNegative: false
+                }, false],
+            ['allows a formatted numeric value', {
+                    value: '1 000.5',
+                    decimal: 1,
+                    thousandSeparator: ' '
+                }, true],
+        ];
+        it.each(validationCases)('%s', function (description, validationProps, expectedValid) { return __awaiter(void 0, void 0, void 0, function () {
+            var container, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(NumberField_1["default"], __assign({ view: NumberFieldMockView_1["default"], onChange: jest.fn() }, validationProps))).container;
+                        input = (0, helpers_1.getElementByTag)(container, 'input');
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                if (expectedValid) {
+                                    expect(input).toBeValid();
+                                }
+                                else {
+                                    expect(input).toBeInvalid();
+                                }
+                            })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+});

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

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

package/tests/ui/form/NumberField/NumberFieldMockView.js

@@ -0,0 +1,38 @@
+"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 isNumber_1 = __importDefault(require("lodash-es/isNumber"));
+var hooks_1 = require("../../../../src/hooks");
+var Icon_1 = __importDefault(require("../../../../src/ui/content/Icon"));
+var IconMockView_1 = __importDefault(require("../../content/Icon/IconMockView"));
+function NumberFieldView(props) {
+    var _a, _b;
+    var bem = (0, hooks_1.useBem)('NumberFieldView');
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem(bem.block({
+            disabled: props.inputProps.disabled,
+            size: props.size,
+            hasErrors: !!props.errors,
+            filled: !!((_b = (_a = props.inputRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.value)
+        }), props.className) }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({ ref: props.inputRef, className: bem(bem.element('input', {
+                    hasErrors: !!props.errors
+                })) }, props.inputProps, { onWheel: function (event) { return event.currentTarget.blur(); }, id: props.id, onBlur: props.onBlur })), !props.disabled && !props.errors && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('arrows-container') }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ className: bem.element('arrow', {
+                            disabled: (0, isNumber_1["default"])(props.inputProps.max) && props.inputProps.value >= props.inputProps.max
+                        }), type: 'button', onClick: props.onStepUp }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { view: IconMockView_1["default"], name: 'mockIcon' }) })), (0, jsx_runtime_1.jsx)("button", __assign({ className: bem.element('arrow', {
+                            disabled: (0, isNumber_1["default"])(props.inputProps.min) && props.inputProps.value <= props.inputProps.min
+                        }), type: 'button', onClick: props.onStepDown }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { view: IconMockView_1["default"], name: 'mockIcon' }) }))] }))), (0, jsx_runtime_1.jsx)("span", { className: bem.element('input-effects') })] })));
+}
+exports["default"] = NumberFieldView;

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

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

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

@@ -0,0 +1,66 @@
+"use strict";
+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 PasswordFieldMockView_1 = __importDefault(require("./PasswordFieldMockView"));
+var PasswordField_1 = __importDefault(require("../../../../src/ui/form/PasswordField/PasswordField"));
+var helpers_1 = require("../../../helpers");
+describe('PasswordField tests', function () {
+    var props = {
+        view: PasswordFieldMockView_1["default"],
+        showSecurityBar: true,
+        showSecurityIcon: true,
+        inputProps: {
+            disabled: true,
+            name: 'password-test',
+            type: 'password',
+            placeholder: 'Password'
+        },
+        size: 'md'
+    };
+    var expectedPasswordFieldClass = 'PasswordFieldView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PasswordField_1["default"], props)).container;
+        var passwordField = (0, helpers_1.getElementByClassName)(container, expectedPasswordFieldClass);
+        expect(passwordField).toBeInTheDocument();
+    });
+    it('should have right attributes', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PasswordField_1["default"], props)).container;
+        var input = (0, helpers_1.getElementByTag)(container, 'input');
+        expect(input).toHaveAttribute('type', 'password');
+        expect(input).toHaveAttribute('name', 'password-test');
+        expect(input).toHaveAttribute('placeholder', 'Password');
+        expect(input).toHaveAttribute('disabled');
+    });
+    it('should have right classes', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PasswordField_1["default"], props)).container;
+        var passwordField = (0, helpers_1.getElementByClassName)(container, expectedPasswordFieldClass);
+        expect(passwordField).toHaveClass(expectedPasswordFieldClass);
+        expect(passwordField).toHaveClass("".concat(expectedPasswordFieldClass, "_size_md"));
+        expect(passwordField).toHaveClass("".concat(expectedPasswordFieldClass, "_disabled"));
+    });
+    it('should have security bar', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PasswordField_1["default"], props)).container;
+        var securityBar = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPasswordFieldClass, "__security-bar"));
+        expect(securityBar).toBeInTheDocument();
+    });
+    it('should have controls', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PasswordField_1["default"], props)).container;
+        var eyeIcon = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPasswordFieldClass, "__icon-eye"));
+        expect(eyeIcon).toBeInTheDocument();
+    });
+    it('should have filled className after typeing', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PasswordField_1["default"], props)).container;
+        var input = (0, helpers_1.getElementByTag)(container, 'input');
+        dom_1.fireEvent.change(input, {
+            target: {
+                value: 'test'
+            }
+        });
+        var passwordFieldWithFilledClass = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPasswordFieldClass, "_filled"));
+        expect(passwordFieldWithFilledClass).toBeInTheDocument();
+    });
+});

package/tests/ui/form/PasswordField/PasswordFieldMockView.d.ts

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

package/tests/ui/form/PasswordField/PasswordFieldMockView.js

@@ -0,0 +1,31 @@
+"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/no-static-element-interactions */
+var hooks_1 = require("../../../../src/hooks");
+var Icon_1 = __importDefault(require("../../../../src/ui/content/Icon"));
+var IconMockView_1 = __importDefault(require("../../content/Icon/IconMockView"));
+function PasswordFieldView(props) {
+    var _a, _b;
+    var bem = (0, hooks_1.useBem)('PasswordFieldView');
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem(bem.block({
+            size: props.size,
+            filled: !!((_a = props.input) === null || _a === void 0 ? void 0 : _a.value),
+            disabled: (_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.disabled
+        }), props.className) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('container') }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({ className: bem.element('input') }, props.inputProps)), props.showSecurityIcon && ((0, jsx_runtime_1.jsx)("span", __assign({ className: bem(bem.element('icon-eye')), onMouseDown: props.onShowPassword, onMouseUp: props.onHidePassword }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { view: IconMockView_1["default"], name: 'mockIcon' }) })))] })), props.showSecurityBar && ((0, jsx_runtime_1.jsx)("div", { className: bem.element('security-bar', props.securityLevel) }))] })));
+}
+exports["default"] = PasswordFieldView;

package/tests/ui/form/PhoneField/DropDownCountrySelectMockView.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IPhoneFieldDropdownProps } from '../../../../src/ui/form/PhoneField/PhoneField';
+interface IDropDownCountrySelectViewProps extends IPhoneFieldDropdownProps {
+    disabled?: boolean;
+}
+export default function DropDownCountrySelectView(props: IDropDownCountrySelectViewProps): JSX.Element;
+export {};

package/tests/ui/form/PhoneField/DropDownCountrySelectMockView.js

@@ -0,0 +1,61 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var 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 content_1 = require("../../../../src/ui/content");
+var INITIAL_PAGE_SIZE = 40;
+var PAGE_SIZE = 40;
+var SCROLL_THRESHOLD = 80;
+function DropDownCountrySelectView(props) {
+    var _a;
+    var bem = (0, hooks_1.useBem)('DropDownCountrySelectView');
+    var _b = (0, react_1.useState)(INITIAL_PAGE_SIZE), visibleCount = _b[0], setVisibleCount = _b[1];
+    var listRef = (0, react_1.useRef)(null);
+    var selectedCountry = props.selectedItems[0];
+    var items = (_a = props.items) !== null && _a !== void 0 ? _a : [];
+    var visibleItems = items.slice(0, visibleCount);
+    var hasMore = visibleCount < items.length;
+    (0, react_1.useEffect)(function () {
+        if (!props.isOpened) {
+            setVisibleCount(INITIAL_PAGE_SIZE);
+        }
+    }, [props.isOpened]);
+    var handleScroll = (0, react_1.useCallback)(function () {
+        var el = listRef.current;
+        if (!el || !hasMore) {
+            return;
+        }
+        var scrollTop = el.scrollTop, clientHeight = el.clientHeight, scrollHeight = el.scrollHeight;
+        if (scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD) {
+            setVisibleCount(function (prev) { return Math.min(prev + PAGE_SIZE, items.length); });
+        }
+    }, [hasMore, items.length]);
+    var renderList = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('drop-down') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ ref: listRef, className: bem.element('drop-down-list'), onScroll: handleScroll }, { children: visibleItems.map(function (item) { return ((0, jsx_runtime_1.jsxs)("button", __assign({ type: 'button', className: bem.element('drop-down-item', {
+                    select: props.selectedIds.includes(item[props.primaryKey])
+                }), onClick: function (e) {
+                    e.preventDefault();
+                    props.onItemSelect(item[props.primaryKey]);
+                } }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('img') }, { children: (0, jsx_runtime_1.jsx)("img", { src: item.contentSrc, alt: 'custom source for item' }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('country-name') }, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ className: bem.element('text') }, { children: item.label })), (0, jsx_runtime_1.jsx)("p", __assign({ className: bem.element('code') }, { children: item.phoneCode }))] }))] }), String(item[props.primaryKey]))); }) })) }))); }, [bem, props, visibleItems, handleScroll]);
+    var closeIfOpened = (0, react_1.useCallback)(function () {
+        if (props.isOpened) {
+            props.onClose();
+        }
+    }, [props]);
+    return ((0, jsx_runtime_1.jsx)(content_1.DropDown, __assign({ content: renderList, visible: props.isOpened, onClose: props.onClose, hasArrow: false, className: bem.element('wrapper') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: bem(bem.block({
+                opened: props.isOpened
+            })), onKeyPress: function (e) { return e.key === 'Enter' && !props.disabled && props.onOpen(); }, role: 'button', tabIndex: 0, onClick: closeIfOpened }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('selected-items'), tabIndex: -1, role: 'button', onClick: props.onOpen }, { children: [(0, jsx_runtime_1.jsx)("img", { src: selectedCountry.contentSrc, alt: 'custom source for item' }), (0, jsx_runtime_1.jsx)(content_1.Icon, { name: 'arrow_down_24x24', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen })] })) })) })));
+}
+exports["default"] = DropDownCountrySelectView;

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

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