@expressms/smartapp-ui 3.0.0-alpha.99 → 3.0.1

package/build/main//321/201omponents/UserDropdown/UserDropdown.js

@@ -23,9 +23,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Select, { components } from 'react-select';
 import classNames from 'classnames';
-import { ru } from 'convert-layout';
-import { debounce, includes, isEmpty, isNil, isNull, isString, omit, uniq, uniqBy } from 'lodash';
-import { transliterate as tr } from 'transliteration';
+import { debounce, includes, isArray, isEmpty, isNil, isNull, omit, pick, uniqBy } from 'lodash';
 import { useDroppable } from '@dnd-kit/core';
 import { useCharHintDisplay } from '../../hooks/useCharHintDisplay';
 import Modal from '../Modal';
@@ -36,89 +34,36 @@ import MultiValueLabel from './MultiValueLabel/MultiValueLabel';
 import Option from './Option/Option';
 import SearchInCatalogButton from './SearchInCatalogButton/SearchInCatalogButton';
 import selectStyles from './selectStyles';
-import { checkIfContactTypeIsGroup, generateFontFamilyStyle, generateId, isIosPlatform, isMobilePlatform } from '../../helpers';
-import { DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove, generateContactsOption, generateContactsOptionsToSelect, generateCorporateOption, generateCorporateOptionsToSelect, generateEnteredByUserOption, sortContacts, } from './helpers';
-import { BACKSPACE_KEY, DEFAULT_INPUT_PADDING, EMAIL_FIELD, ENTER_KEY, EVENT_LISTENER_TYPES, LANGUAGES, LAYOUT_TYPE, MASK_INPUT_PL, MENU_POSITIONS, MIN_INPUT_SYMBOLS, PLATFORM, RENDER_DELAY, SEARCH_PLACEHOLDER, SPACE, SPACE_KEY, SUFFIX_INPUT_PR, } from '../../constants';
-import { ReactComponent as ClearIcon } from '../../assets/icons/clear.svg';
+import Delimiter from './components/Delimiter';
+import Hint from './components/Hint';
+import Input from './components/Input';
+import Mask from './components/Mask';
+import Title from './components/Title';
+import { checkIfContactTypeIsGroup, checkIsIosPlatform, checkIsMobilePlatform, generateFontFamilyStyle, generateId } from '../../helpers';
+import { DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove, applyFilteringToOption, calculateHorizontalPadding, checkIsValueIsEmail, collapseChips, extractInputEmails, generateContactsOptionsToSelect, generateCorporateOptionsToSelect, generateEnteredByUserOption, retrieveChipsElements, retrieveFilteredContacts, setCaretInEmptyInput, setCaretPosition, transformSelectedEntity, transformSelectedUsers, unCollapseChips, } from './helpers';
+import { BACKSPACE_KEY, DEFAULT_INPUT_PADDING, EMAIL_FIELD, EMPTY_STRING, ENTER_KEY, EVENT_LISTENER_TYPES, FULL_HEIGHT_BOTTOM_SHEET_TOP_MARGIN, LANGUAGES, LAYOUT_TYPE, MENU_POSITIONS, MIN_INPUT_SYMBOLS, PLATFORM, RENDER_DELAY, SEARCH_PLACEHOLDER, SPACE, SPACE_KEY, } from '../../constants';
+import { CLEAR_USER_TYPING_TIMEOUT, COMMON_FIELDS_TO_OMIT, COMMON_FIELDS_TO_PICK, DEFAULT_MAX_ROWS_COUNT_TO_COLLAPSE_CHIPS, DEFAULT_MENU_LIST_MAX_HEIGHT, EMAIL_SEPARATORS, INPUT_ACTIONS, MENU_ACTIONS, PADDING_WITH_CLEAR_ICON, USER_TYPING_TIMEOUT, } from './constants';
 import '../../styles/styles.scss';
-var THREE_DIGIT_NUMBER_WIDTH = 48;
-var TWO_DIGIT_NUMBER_WIDTH = 40;
-var SINGLE_DIGIT_NUMBER_WIDTH = 32;
-var INPUT_SPACE_WIDTH = 46;
-var GAP = 8;
-var USER_TYPING_TIMEOUT = 1000;
-var CLEAR_USER_TYPING_TIMEOUT = 500;
-var INPUT = 'input';
-var EMPTY_STRING = '';
-var BUBBLES = { bubbles: true };
-var PADDING_WITH_CLEAR_ICON = '40px';
-export var DEFAULT_MENU_LIST_MAX_HEIGHT = 220;
-var dispatchInputEvent = function (input) { return input.dispatchEvent(new Event(INPUT, BUBBLES)); };
-var setCaretPosition = function (input, position) { return input.setSelectionRange(position, position); };
-var setCaretInEmptyInput = function (input) {
-    input.value = SPACE;
-    dispatchInputEvent(input);
-    setTimeout(function () {
-        input.value = EMPTY_STRING;
-        dispatchInputEvent(input);
-        setCaretPosition(input, 0);
-    }, 0);
-};
-var MENU_ACTIONS;
-(function (MENU_ACTIONS) {
-    MENU_ACTIONS["close"] = "menu-close";
-})(MENU_ACTIONS || (MENU_ACTIONS = {}));
-var INPUT_ACTIONS;
-(function (INPUT_ACTIONS) {
-    INPUT_ACTIONS["change"] = "input-change";
-    INPUT_ACTIONS["blur"] = "input-blur";
-})(INPUT_ACTIONS || (INPUT_ACTIONS = {}));
-var EMAIL_SEPARATORS;
-(function (EMAIL_SEPARATORS) {
-    EMAIL_SEPARATORS["semicolon"] = ";";
-    EMAIL_SEPARATORS["comma"] = ",";
-})(EMAIL_SEPARATORS || (EMAIL_SEPARATORS = {}));
-var EXCLUDED_FIELDS;
-(function (EXCLUDED_FIELDS) {
-    EXCLUDED_FIELDS["value"] = "value";
-    EXCLUDED_FIELDS["label"] = "label";
-    EXCLUDED_FIELDS["layoutType"] = "layoutType";
-    EXCLUDED_FIELDS["platform"] = "platform";
-    EXCLUDED_FIELDS["language"] = "language";
-    EXCLUDED_FIELDS["isEnteredByUser"] = "isEnteredByUser";
-    EXCLUDED_FIELDS["isMyContacts"] = "isMyContacts";
-    EXCLUDED_FIELDS["isChipsCollapsable"] = "isChipsCollapsable";
-    EXCLUDED_FIELDS["isSelectedChipHasTooltip"] = "isSelectedChipHasTooltip";
-    EXCLUDED_FIELDS["isInputFocused"] = "isInputFocused";
-    EXCLUDED_FIELDS["setIsSearchable"] = "setIsSearchable";
-    EXCLUDED_FIELDS["selectRef"] = "selectRef";
-    EXCLUDED_FIELDS["setModalData"] = "setModalData";
-    EXCLUDED_FIELDS["collapsableChipsCount"] = "collapsableChipsCount";
-    EXCLUDED_FIELDS["lastVisibleChipIndex"] = "lastVisibleChipIndex";
-    EXCLUDED_FIELDS["fontFamily"] = "fontFamily";
-})(EXCLUDED_FIELDS || (EXCLUDED_FIELDS = {}));
-var COMMON_FIELDS_TO_OMIT = Object.keys(omit(EXCLUDED_FIELDS, [EXCLUDED_FIELDS.language, EXCLUDED_FIELDS.isMyContacts, EXCLUDED_FIELDS.isEnteredByUser]));
-var Input = function (props) {
-    var isClearable = props["data-is-clearable"], value = props.value, suffix = props.suffix, suffixRef = props.suffixref, onInputChange = props.selectProps.onInputChange;
-    var handleClearInput = function () { return onInputChange(EMPTY_STRING, { action: INPUT_ACTIONS.change, prevInputValue: value }); };
-    return (_jsxs(_Fragment, { children: [_jsx(components.Input, __assign({}, props, { enterKeyHint: "done" })), suffix && (_jsx("div", __assign({ ref: suffixRef, className: "smartapp-user-dropdown__suffix" }, { children: suffix }))), isClearable && !isEmpty(value) && (_jsx("div", __assign({ className: "smartapp-user-dropdown__clear-icon", onMouseDown: handleClearInput, onTouchEnd: handleClearInput }, { children: _jsx(ClearIcon, {}) })))] }));
-};
+var generateContactBottomSheetMaxHeight = function () { var _a, _b; return ((_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : window.innerHeight) - FULL_HEIGHT_BOTTOM_SHEET_TOP_MARGIN; };
 var UserDropdown = function (_a) {
-    var _b = _a.platform, platform = _b === void 0 ? PLATFORM.web : _b, fontFamily = _a.fontFamily, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.isChipsOutline, isChipsOutline = _e === void 0 ? false : _e, _f = _a.isChipsVisible, isChipsVisible = _f === void 0 ? true : _f, _g = _a.isChipsCollapsable, isChipsCollapsable = _g === void 0 ? false : _g, _h = _a.isSelectedChipHasTooltip, isSelectedChipHasTooltip = _h === void 0 ? false : _h, _j = _a.isMenuCloseOnSelect, isMenuCloseOnSelect = _j === void 0 ? true : _j, _k = _a.isFilteringDisabled, isFilteringDisabled = _k === void 0 ? false : _k, _l = _a.hasNextPage, hasNextPage = _l === void 0 ? false : _l, _m = _a.isNextPageLoading, isNextPageLoading = _m === void 0 ? false : _m, _o = _a.isInputHidden, isInputHidden = _o === void 0 ? false : _o, _p = _a.isBackspaceChipToInput, isBackspaceChipToInput = _p === void 0 ? false : _p, _q = _a.isShowCatalogSearchButton, isShowCatalogSearchButton = _q === void 0 ? false : _q, _r = _a.isDisabledMenuOffsetAtFullscreen, isDisabledMenuOffsetAtFullscreen = _r === void 0 ? false : _r, _s = _a.isDisabledCheckUniqueEmails, isDisabledCheckUniqueEmails = _s === void 0 ? false : _s, _t = _a.isMenuShadowless, isMenuShadowless = _t === void 0 ? false : _t, _u = _a.language, language = _u === void 0 ? LANGUAGES.ru : _u, _v = _a.layoutType, layoutType = _v === void 0 ? LAYOUT_TYPE.minimal : _v, externalInputValue = _a.externalInputValue, title = _a.title, mask = _a.mask, suffix = _a.suffix, _w = _a.placeholder, placeholder = _w === void 0 ? EMPTY_STRING : _w, hint = _a.hint, onShowCatalogSearchButtonClick = _a.onShowCatalogSearchButtonClick, noOptionsMessage = _a.noOptionsMessage, maxMembersCount = _a.maxMembersCount, skeletonRowsCount = _a.skeletonRowsCount, _x = _a.menuListMaxHeight, menuListMaxHeight = _x === void 0 ? DEFAULT_MENU_LIST_MAX_HEIGHT : _x, _y = _a.menuPosition, menuPosition = _y === void 0 ? MENU_POSITIONS.top : _y, menuLocation = _a.menuLocation, menuPortalTarget = _a.menuPortalTarget, _z = _a.autoFocus, autoFocus = _z === void 0 ? false : _z, containerClassName = _a.containerClassName, containerPadding = _a.containerPadding, containerStyles = _a.containerStyles, _0 = _a.selectedEntries, selectedEntries = _0 === void 0 ? [] : _0, corporateEntries = _a.corporateEntries, myContactsEntries = _a.myContactsEntries, _1 = _a.emailsToExclude, emailsToExclude = _1 === void 0 ? [] : _1, _2 = _a.userDropdownId, initialUserDropdownId = _2 === void 0 ? EMPTY_STRING : _2, focusRef = _a.focusRef, onInputChange = _a.onInputChange, onImmediateInputChange = _a.onImmediateInputChange, onChange = _a.onChange, onMenuOpen = _a.onMenuOpen, onMenuClose = _a.onMenuClose, onLoadNextPage = _a.onLoadNextPage, onFocus = _a.onFocus;
-    var _3 = useState(initialUserDropdownId), userDropdownId = _3[0], setUserDropdownId = _3[1];
-    var _4 = useState([]), selectedUsers = _4[0], setSelectedUsers = _4[1];
-    var _5 = useState(EMPTY_STRING), paddingLeft = _5[0], setPaddingLeft = _5[1];
-    var _6 = useState(EMPTY_STRING), paddingRight = _6[0], setPaddingRight = _6[1];
-    var _7 = useState(0), maskWidth = _7[0], setMaskWidth = _7[1];
-    var _8 = useState(0), suffixWidth = _8[0], setSuffixWidth = _8[1];
-    var _9 = useState(true), isSearchable = _9[0], setIsSearchable = _9[1];
-    var _10 = useState(false), isUserTyping = _10[0], setIsUserTyping = _10[1];
-    var _11 = useState(null), modalData = _11[0], setModalData = _11[1];
-    var _12 = useState(EMPTY_STRING), chipLabelWithMaxWidth = _12[0], setChipLabelWithMaxWidth = _12[1];
-    var _13 = useState(EMPTY_STRING), inputValue = _13[0], setInputValue = _13[1];
-    var _14 = useState(placeholder), placeholderValue = _14[0], setPlaceholderValue = _14[1];
-    var _15 = useState(false), isDelimiterVisible = _15[0], setIsDelimiterVisible = _15[1];
-    var _16 = useState(0), delimiterOffset = _16[0], setDelimiterOffset = _16[1];
+    var _b;
+    var _c = _a.platform, platform = _c === void 0 ? PLATFORM.web : _c, fontFamily = _a.fontFamily, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, _f = _a.isChipsOutline, isChipsOutline = _f === void 0 ? false : _f, _g = _a.isError, isError = _g === void 0 ? false : _g, _h = _a.isChipsVisible, isChipsVisible = _h === void 0 ? true : _h, _j = _a.isChipsCollapsable, isChipsCollapsable = _j === void 0 ? false : _j, _k = _a.isSelectedChipHasTooltip, isSelectedChipHasTooltip = _k === void 0 ? false : _k, _l = _a.isMenuCloseOnBlur, isMenuCloseOnBlur = _l === void 0 ? true : _l, _m = _a.isMenuCloseOnSelect, isMenuCloseOnSelect = _m === void 0 ? true : _m, _o = _a.isFilteringDisabled, isFilteringDisabled = _o === void 0 ? false : _o, _p = _a.hasNextPage, hasNextPage = _p === void 0 ? false : _p, _q = _a.isNextPageLoading, isNextPageLoading = _q === void 0 ? false : _q, _r = _a.isInputHidden, isInputHidden = _r === void 0 ? false : _r, _s = _a.isBackspaceChipToInput, isBackspaceChipToInput = _s === void 0 ? false : _s, _t = _a.isShowCatalogSearchButton, isShowCatalogSearchButton = _t === void 0 ? false : _t, _u = _a.isDisabledMenuOffsetAtFullscreen, isDisabledMenuOffsetAtFullscreen = _u === void 0 ? false : _u, _v = _a.isDisabledCheckUniqueEmails, isDisabledCheckUniqueEmails = _v === void 0 ? false : _v, _w = _a.isMenuShadowless, isMenuShadowless = _w === void 0 ? false : _w, _x = _a.isStateless, isStateless = _x === void 0 ? false : _x, _y = _a.isSelectedOptionsHidden, isSelectedOptionsHidden = _y === void 0 ? true : _y, _z = _a.isMaskHiddenOnFocus, isMaskHiddenOnFocus = _z === void 0 ? false : _z, _0 = _a.isInputValueClearedOnBlur, isInputValueClearedOnBlur = _0 === void 0 ? false : _0, _1 = _a.isNotClickable, isNotClickable = _1 === void 0 ? false : _1, _2 = _a.isConvertTextToChipOnBlur, isConvertTextToChipOnBlur = _2 === void 0 ? true : _2, _3 = _a.language, language = _3 === void 0 ? LANGUAGES.ru : _3, _4 = _a.layoutType, layoutType = _4 === void 0 ? LAYOUT_TYPE.minimal : _4, externalInputValue = _a.externalInputValue, title = _a.title, contactInfoTitle = _a.contactInfoTitle, mask = _a.mask, suffix = _a.suffix, _5 = _a.placeholder, placeholder = _5 === void 0 ? EMPTY_STRING : _5, focusPlaceholder = _a.focusPlaceholder, hint = _a.hint, onShowCatalogSearchButtonClick = _a.onShowCatalogSearchButtonClick, noOptionsMessage = _a.noOptionsMessage, maxMembersCount = _a.maxMembersCount, skeletonRowsCount = _a.skeletonRowsCount, _6 = _a.maxRowsCountToCollapseChips, maxRowsCountToCollapseChips = _6 === void 0 ? DEFAULT_MAX_ROWS_COUNT_TO_COLLAPSE_CHIPS : _6, _7 = _a.menuListMaxHeight, menuListMaxHeight = _7 === void 0 ? DEFAULT_MENU_LIST_MAX_HEIGHT : _7, _8 = _a.menuShouldScrollIntoView, menuShouldScrollIntoView = _8 === void 0 ? true : _8, _9 = _a.menuPosition, menuPosition = _9 === void 0 ? MENU_POSITIONS.top : _9, menuLocation = _a.menuLocation, menuPortalTarget = _a.menuPortalTarget, _10 = _a.autoFocus, autoFocus = _10 === void 0 ? false : _10, containerClassName = _a.containerClassName, charHintClassName = _a.charHintClassName, noOptionsMessageClassName = _a.noOptionsMessageClassName, containerPadding = _a.containerPadding, containerStyles = _a.containerStyles, selectedEntries = _a.selectedEntries, corporateEntries = _a.corporateEntries, myContactsEntries = _a.myContactsEntries, emailsToExclude = _a.emailsToExclude, _11 = _a.userDropdownId, initialUserDropdownId = _11 === void 0 ? EMPTY_STRING : _11, focusRef = _a.focusRef, onInputChange = _a.onInputChange, onImmediateInputChange = _a.onImmediateInputChange, onChange = _a.onChange, onMenuOpen = _a.onMenuOpen, onMenuClose = _a.onMenuClose, onLoadNextPage = _a.onLoadNextPage, onClickContactInfoCopyEmail = _a.onClickContactInfoCopyEmail, onFocus = _a.onFocus;
+    var _12 = useState(initialUserDropdownId), userDropdownId = _12[0], setUserDropdownId = _12[1];
+    var _13 = useState([]), selectedUsers = _13[0], setSelectedUsers = _13[1];
+    var _14 = useState(EMPTY_STRING), paddingLeft = _14[0], setPaddingLeft = _14[1];
+    var _15 = useState(EMPTY_STRING), paddingRight = _15[0], setPaddingRight = _15[1];
+    var _16 = useState(0), maskWidth = _16[0], setMaskWidth = _16[1];
+    var _17 = useState(0), suffixWidth = _17[0], setSuffixWidth = _17[1];
+    var _18 = useState(true), isSearchable = _18[0], setIsSearchable = _18[1];
+    var _19 = useState(false), isUserTyping = _19[0], setIsUserTyping = _19[1];
+    var _20 = useState(null), modalData = _20[0], setModalData = _20[1];
+    var _21 = useState(EMPTY_STRING), chipLabelWithMaxWidth = _21[0], setChipLabelWithMaxWidth = _21[1];
+    var _22 = useState(EMPTY_STRING), inputValue = _22[0], setInputValue = _22[1];
+    var _23 = useState(placeholder), placeholderValue = _23[0], setPlaceholderValue = _23[1];
+    var _24 = useState(false), isDelimiterVisible = _24[0], setIsDelimiterVisible = _24[1];
+    var _25 = useState(0), delimiterOffset = _25[0], setDelimiterOffset = _25[1];
+    var _26 = useState(false), isFocused = _26[0], setIsFocused = _26[1];
+    var _27 = useState(false), isMenuOpen = _27[0], setIsMenuOpen = _27[1];
     var isInputFocused = useRef(false);
     var selectRef = useRef(null);
     var maskRef = useRef(null);
@@ -130,54 +75,43 @@ var UserDropdown = function (_a) {
     var lastVisibleChipIndex = useRef(-1);
     var skipAddUserToChipsOnNextBlurRef = useRef(false);
     var userTypingTimeoutRef = useRef(null);
+    var prevIsLoadingRef = useRef(isLoading);
     var selectedUsersLength = selectedUsers.length;
-    var _17 = useDroppable({ id: userDropdownId }), setNodeRef = _17.setNodeRef, over = _17.over;
+    var _28 = useDroppable({ id: userDropdownId }), setNodeRef = _28.setNodeRef, over = _28.over;
     var overId = (over || {}).id;
     var isDraggable = overId === userDropdownId;
+    var isInputPlaceholderVisible = selectedUsersLength === 1 && isEmpty(inputValue) ? ((_b = selectedUsers[0].isNotRemovable) !== null && _b !== void 0 ? _b : false) : false;
+    var isMaskVisible = !isEmpty(mask) && (!isMaskHiddenOnFocus || (isEmpty(inputValue) && !isFocused));
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useImperativeHandle(focusRef, function () { return ({ focus: handleFocus, blur: function () { return handleDragBlur(true); } }); }, []);
     var fontFamilyStyle = generateFontFamilyStyle(fontFamily);
     var isCharHintVisible = useCharHintDisplay({ inputValue: inputValue }).isCharHintVisible;
-    var checkIsValueIsEmail = function (inputValue) {
-        var regex = new RegExp(/^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/);
-        return regex.test(inputValue);
-    };
-    // TODO: emailsToExclude в массиве зависимостей вызывает бесконечный ререндер при драге
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    var checkIsEmailToExclude = useCallback(function (email) { return includes(emailsToExclude, email); }, []);
-    var calculatePaddingLeft = function () {
-        var _a, _b;
-        var maskWidth = ((_b = (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || null;
-        maskWidth && setMaskWidth(maskWidth + GAP);
-        return "".concat(maskWidth ? maskWidth + MASK_INPUT_PL : DEFAULT_INPUT_PADDING, "px");
-    };
-    var calculatePaddingRight = function () {
-        var _a, _b;
-        var suffixWidth = ((_b = (_a = suffixRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || null;
-        suffixWidth && setSuffixWidth(suffixWidth + GAP);
-        return "".concat(suffixWidth ? suffixWidth + SUFFIX_INPUT_PR : DEFAULT_INPUT_PADDING, "px");
-    };
+    var checkIsEmailToExclude = useCallback(function (email) { return includes(emailsToExclude, email); }, [emailsToExclude]);
     var generateStyles = function () {
         return selectStyles({
             isChipsVisible: isChipsVisible,
             isMaxMembersAdded: maxMembersCount && isChipsVisible ? selectedUsersLength === maxMembersCount : false,
             isDisabled: isDisabled,
+            isInputPlaceholderVisible: isInputPlaceholderVisible,
             lastRowNumber: isChipsVisible ? Math.ceil(selectedUsersLength / 2) + 1 : 1,
-            paddingLeft: paddingLeft,
+            paddingLeft: isMaskVisible || isEmpty(mask) ? paddingLeft : "".concat(DEFAULT_INPUT_PADDING, "px"),
             paddingRight: !isChipsVisible && !isEmpty(inputValue) ? PADDING_WITH_CLEAR_ICON : paddingRight,
             platform: platform,
             layoutType: layoutType,
             isInputHidden: isInputHidden,
             isDisabledMenuOffsetAtFullscreen: isDisabledMenuOffsetAtFullscreen,
             isInputFocused: isInputFocused.current,
-            isMaskRepresented: !isEmpty(mask),
+            isMaskRepresented: isMaskVisible,
             isSuffixRepresented: !isNil(suffix),
             isMenuShadowless: isMenuShadowless,
+            isShowCatalogSearchButton: isShowCatalogSearchButton,
             fontFamilyStyle: fontFamilyStyle,
             containerPadding: containerPadding,
             isDraggable: isDraggable,
             isChipsCollapsed: isChipsCollapsable && !isInputFocused.current,
             menuListMaxHeight: menuListMaxHeight,
+            maxRowsCountToCollapseChips: maxRowsCountToCollapseChips,
+            isError: isError,
         });
     };
     var generateNoOptionsMessage = function (_a) {
@@ -202,25 +136,13 @@ var UserDropdown = function (_a) {
             collapsableChipsCount: collapsableChipsCount,
             lastVisibleChipIndex: lastVisibleChipIndex,
         };
-        var corporateContacts = uniqBy(__spreadArray(__spreadArray([], ((corporateEntries === null || corporateEntries === void 0 ? void 0 : corporateEntries.corpPhonebookEntries) || []), true), ((corporateEntries === null || corporateEntries === void 0 ? void 0 : corporateEntries.trustSearchEntries) || []), true), function (_a) {
-            var contacts = _a.contacts;
-            return contacts.filter(function (_a) {
-                var contactType = _a.contactType;
-                return contactType === EMAIL_FIELD;
-            })[0].contact;
-        });
-        var query = ((_b = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.inputValue) || EMPTY_STRING;
-        var sortedCorporateContacts = sortContacts(corporateContacts, query);
-        var sortedMyContacts = sortContacts(myContactsEntries || [], query);
-        var filteredCorporateContacts = sortedCorporateContacts.filter(function (_a) {
-            var email = _a.email, contacts = _a.contacts;
-            return [email, contacts[0].contact].every(function (email) { return !checkIsEmailToExclude(email); });
-        });
-        var filteredMyContacts = sortedMyContacts.filter(function (_a) {
-            var email = _a.email;
-            return !checkIsEmailToExclude(email);
-        });
-        return __spreadArray(__spreadArray([], generateCorporateOptionsToSelect(__assign({ options: filteredCorporateContacts }, commonFields)), true), generateContactsOptionsToSelect(__assign({ options: filteredMyContacts }, commonFields)), true);
+        var _c = retrieveFilteredContacts({
+            query: ((_b = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.inputValue) || EMPTY_STRING,
+            corporateEntries: corporateEntries,
+            myContactsEntries: myContactsEntries,
+            checkIsEmailToExclude: checkIsEmailToExclude,
+        }), filteredCorporateContacts = _c.filteredCorporateContacts, filteredLocalContacts = _c.filteredLocalContacts, filteredMyContacts = _c.filteredMyContacts;
+        return __spreadArray(__spreadArray(__spreadArray([], generateCorporateOptionsToSelect(__assign({ options: filteredCorporateContacts }, commonFields)), true), generateContactsOptionsToSelect(__assign({ options: filteredLocalContacts, isLocalContact: true }, commonFields)), true), generateContactsOptionsToSelect(__assign({ options: filteredMyContacts, isMyContacts: true }, commonFields)), true);
     };
     var clearUserTypingTimeout = useCallback(function () {
         var userTypingTimeoutRefCurrent = userTypingTimeoutRef.current;
@@ -229,6 +151,13 @@ var UserDropdown = function (_a) {
             userTypingTimeoutRef.current = null;
         }
     }, []);
+    useEffect(function () {
+        if (prevIsLoadingRef.current && !isLoading) {
+            setIsUserTyping(false);
+            clearUserTypingTimeout();
+        }
+        prevIsLoadingRef.current = isLoading;
+    }, [isLoading, clearUserTypingTimeout]);
     var requestInputChangeDebounce = useMemo(function () {
         return debounce(function (inputValue) {
             onInputChange(inputValue);
@@ -236,6 +165,10 @@ var UserDropdown = function (_a) {
             userTypingTimeoutRef.current = setTimeout(function () { return setIsUserTyping(false); }, CLEAR_USER_TYPING_TIMEOUT);
         }, USER_TYPING_TIMEOUT);
     }, [clearUserTypingTimeout, onInputChange]);
+    var handleMenuOpen = function () {
+        setIsMenuOpen(true);
+        onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
+    };
     var handleMenuClose = function () {
         menuScrollFromTop.current = 0;
         setIsDelimiterVisible(false);
@@ -247,33 +180,33 @@ var UserDropdown = function (_a) {
             var trimPrevInputValue_1 = prevInputValue.trim();
             var isInputBlurAction = action === INPUT_ACTIONS.blur;
             var isMenuCloseAction = action === MENU_ACTIONS.close;
-            if (!isInputBlurAction && !isMenuCloseAction)
+            if (!isInputBlurAction && !isMenuCloseAction) {
                 setInputValue(inputValue);
-            if ((isInputBlurAction || isMenuCloseAction) && checkIsValueIsEmail(trimPrevInputValue_1)) {
+                onImmediateInputChange === null || onImmediateInputChange === void 0 ? void 0 : onImmediateInputChange(inputValue);
+            }
+            if ((isInputBlurAction || isMenuCloseAction) && checkIsValueIsEmail(trimPrevInputValue_1) && isConvertTextToChipOnBlur) {
                 var isUserAlreadySelected = selectedUsers.some(function (_a) {
                     var email = _a.email;
                     return email === trimPrevInputValue_1;
                 });
-                setInputValue(isUserAlreadySelected || checkIsEmailToExclude(trimPrevInputValue_1) ? trimPrevInputValue_1 : prevInputValue);
+                var nextInputValue = isUserAlreadySelected || checkIsEmailToExclude(trimPrevInputValue_1) ? trimPrevInputValue_1 : inputValue;
+                setInputValue(nextInputValue);
+                onImmediateInputChange === null || onImmediateInputChange === void 0 ? void 0 : onImmediateInputChange(nextInputValue);
             }
         }
         if (!isEmpty(inputValue)) {
             clearUserTypingTimeout();
             setIsUserTyping(true);
         }
-        onImmediateInputChange === null || onImmediateInputChange === void 0 ? void 0 : onImmediateInputChange(inputValue);
         inputValue.length >= MIN_INPUT_SYMBOLS && requestInputChangeDebounce(inputValue);
-    }, [onImmediateInputChange, requestInputChangeDebounce, selectedUsers, checkIsEmailToExclude, clearUserTypingTimeout]);
-    var extractInputEmails = function (inputValue) {
-        return inputValue
-            .split(/[,;]+/)
-            .map(function (inputStr) { return inputStr.trim(); })
-            .filter(function (inputStr) { return !!inputStr.length; });
-    };
-    var handleAddUser = function () {
-        var props = selectRef.current.props;
+    }, [requestInputChangeDebounce, isConvertTextToChipOnBlur, onImmediateInputChange, selectedUsers, checkIsEmailToExclude, clearUserTypingTimeout]);
+    var handleAddUser = function (isInputBlurAction) {
+        var selectRefCurrent = selectRef.current;
+        if (isNil(selectRefCurrent))
+            return;
+        var props = selectRefCurrent.props;
         var options = props.options, onChange = props.onChange;
-        if (isEmpty(inputValue))
+        if (isEmpty(inputValue) || (isInputBlurAction && !isConvertTextToChipOnBlur))
             return Promise.resolve();
         var trimInputValue = inputValue.trim();
         var optionProps = {
@@ -372,7 +305,6 @@ var UserDropdown = function (_a) {
     [onInputChange, handleInputChange, onMenuOpen, onChange]);
     var handleChange = function (newSelectedUsers) {
         var uniqNewSelectedUsers = isDisabledCheckUniqueEmails ? newSelectedUsers : uniqBy(newSelectedUsers, EMAIL_FIELD);
-        var users = [];
         var deletedUser = selectedUsers.find(function (_a) {
             var value = _a.value;
             return !uniqNewSelectedUsers.some(function (_a) {
@@ -382,104 +314,39 @@ var UserDropdown = function (_a) {
         });
         if (deletedUser === null || deletedUser === void 0 ? void 0 : deletedUser.isNotRemovable)
             return;
-        uniqNewSelectedUsers.forEach(function (user) {
-            var isEnteredByUser = user.isEnteredByUser, isMyContacts = user.isMyContacts;
-            var userToAdd = omit(user, COMMON_FIELDS_TO_OMIT);
-            var entryFieldsToExclude = isMyContacts ? [EXCLUDED_FIELDS.isMyContacts] : [EXCLUDED_FIELDS.language];
-            var fieldsToExclude = isEnteredByUser ? [EXCLUDED_FIELDS.isEnteredByUser] : entryFieldsToExclude;
-            users.push(omit(userToAdd, fieldsToExclude));
-        });
+        var users = transformSelectedUsers(uniqNewSelectedUsers);
         onChange(users);
-        if (!isInputHidden)
+        if (!isInputHidden && !isStateless)
             setSelectedUsers(uniqNewSelectedUsers);
         if (!isInputFocused.current && isChipsCollapsable)
             handleFocus();
     };
-    var isContainsValue = function (_a) {
-        var label = _a.label, email = _a.email, value = _a.value;
-        return label.toLowerCase().includes(value) || email.toLowerCase().includes(value);
-    };
     var handleFilterOption = function (_a, inputValue) {
-        var _b = _a.data, label = _b.label, optionEmail = _b.email;
-        var originInputValue = inputValue.toLowerCase();
-        var transliteratedInputValue = tr(originInputValue);
-        var toEngInputValue = ru.toEn(originInputValue);
-        var fromEngInputValue = ru.fromEn(originInputValue);
-        var isUserAlreadySelected = selectedUsers.find(function (_a) {
-            var email = _a.email;
-            return email === optionEmail;
-        });
-        var isContainsInputValue = [originInputValue, transliteratedInputValue, toEngInputValue, fromEngInputValue].some(function (value) {
-            return isContainsValue({ label: label, email: optionEmail, value: value });
-        });
-        if (isFilteringDisabled)
-            return !isEmpty(selectedUsers) ? !isUserAlreadySelected : true;
-        return !isEmpty(selectedUsers) ? !isUserAlreadySelected && isContainsInputValue : isContainsInputValue;
-    };
-    var generateTruncatedElementY = function (element) { return Math.trunc(element.getBoundingClientRect().y); };
-    var calculateCounterWidth = function (counterNumber) {
-        if (counterNumber >= 100)
-            return THREE_DIGIT_NUMBER_WIDTH;
-        if (counterNumber >= 10)
-            return TWO_DIGIT_NUMBER_WIDTH;
-        return SINGLE_DIGIT_NUMBER_WIDTH;
+        var data = _a.data;
+        return applyFilteringToOption({ isFilteringDisabled: isFilteringDisabled, isSelectedOptionsHidden: isSelectedOptionsHidden, inputValue: inputValue, data: data, selectedUsers: selectedUsers });
     };
     var handleCollapseChips = function () {
-        var _a, _b;
-        var collapsableChips = 0;
-        var chipLabelWithMaxWidth = EMPTY_STRING;
-        var chipsNodes = ((_a = document.querySelector("#".concat(userDropdownId))) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.smartapp-chip')) || [];
-        var chips = Array.from(chipsNodes);
+        var chips = retrieveChipsElements(userDropdownId);
         if (isEmpty(chips))
             return;
-        var yRows = uniq(chips.map(function (chip) { return generateTruncatedElementY(chip); }));
-        var ySecondRow = yRows[1];
-        var rowsToHide = yRows.slice(2);
-        var secondRow = [];
-        chips.forEach(function (chip) {
-            var y = generateTruncatedElementY(chip);
-            if (rowsToHide.includes(y)) {
-                collapsableChips += 1;
-            }
-            else {
-                y === ySecondRow && secondRow.push(chip);
-            }
-        });
-        var counterWidth = calculateCounterWidth(collapsableChips);
-        var rowWidth = counterWidth + INPUT_SPACE_WIDTH;
-        var dropdownWidth = ((_b = document.querySelector("#".concat(userDropdownId))) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) - maskWidth - suffixWidth;
-        secondRow.forEach(function (chip) {
-            var _a;
-            rowWidth += chip.getBoundingClientRect().width + GAP;
-            if (rowWidth > dropdownWidth) {
-                if (secondRow.length > 1) {
-                    collapsableChips += 1;
-                }
-                else {
-                    var emptySpaceWidth = collapsableChips > 0 ? counterWidth + INPUT_SPACE_WIDTH + GAP : INPUT_SPACE_WIDTH;
-                    chip.style.maxWidth = "".concat(dropdownWidth - emptySpaceWidth, "px");
-                    chipLabelWithMaxWidth = ((_a = chip.querySelector('.smartapp-chip__info--name')) === null || _a === void 0 ? void 0 : _a.innerHTML) || EMPTY_STRING;
-                }
-            }
-        });
-        var visibleChipsCurrentCount = chips.length - collapsableChips;
+        var _a = collapseChips({
+            userDropdownId: userDropdownId,
+            maxRowsCountToCollapseChips: maxRowsCountToCollapseChips,
+            maskWidth: maskWidth,
+            suffixWidth: suffixWidth,
+            chips: chips,
+        }), collapsableChips = _a.collapsableChips, numberOfVisibleChips = _a.numberOfVisibleChips, chipLabelWithMaxWidth = _a.chipLabelWithMaxWidth;
         isNeedCheckChipCollapsableCount.current = true;
-        visibleChipsCount.current = visibleChipsCurrentCount;
+        visibleChipsCount.current = numberOfVisibleChips;
         collapsableChipsCount.current = collapsableChips;
-        lastVisibleChipIndex.current = visibleChipsCurrentCount;
+        lastVisibleChipIndex.current = numberOfVisibleChips;
         setChipLabelWithMaxWidth(chipLabelWithMaxWidth || generateId());
     };
     var handleUnCollapseChips = useCallback(function () {
-        var _a;
         if (!userDropdownId)
             return;
-        var chipsNodes = ((_a = document.querySelector("#".concat(userDropdownId))) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.smartapp-chip')) || [];
-        var chips = Array.from(chipsNodes);
-        chips.forEach(function (chip) {
-            var _a;
-            var chipLabel = ((_a = chip.querySelector('.smartapp-chip__info--name')) === null || _a === void 0 ? void 0 : _a.innerHTML) || EMPTY_STRING;
-            chipLabel === chipLabelWithMaxWidth && (chip.style.maxWidth = '100%');
-        });
+        var chips = retrieveChipsElements(userDropdownId);
+        unCollapseChips(chipLabelWithMaxWidth, chips);
         isNeedCheckChipCollapsableCount.current = false;
         visibleChipsCount.current = chips.length;
         collapsableChipsCount.current = 0;
@@ -503,17 +370,23 @@ var UserDropdown = function (_a) {
         var onBlurComplete = function () {
             isChipsCollapsable && handleCollapseChips();
             isInputFocused.current = false;
+            setIsFocused(false);
         };
         if (shouldSkipAddUserToChipsOnNextBlur) {
             onBlurComplete();
             return;
         }
         else
-            (_a = handleAddUser()) === null || _a === void 0 ? void 0 : _a.then(onBlurComplete);
+            (_a = handleAddUser(true)) === null || _a === void 0 ? void 0 : _a.then(function () { return requestAnimationFrame(function () { return requestAnimationFrame(function () { return onBlurComplete(); }); }); });
         skipAddUserToChipsOnNextBlurRef.current = false;
     };
     var handleSelectBlur = function () {
         setPlaceholderValue(placeholder);
+        isMenuCloseOnBlur && setIsMenuOpen(false);
+        if (isInputValueClearedOnBlur) {
+            setInputValue(EMPTY_STRING);
+            onImmediateInputChange === null || onImmediateInputChange === void 0 ? void 0 : onImmediateInputChange(EMPTY_STRING);
+        }
         setTimeout(handleBlur, RENDER_DELAY);
     };
     var focusInputIOS = useCallback(function (input) {
@@ -524,36 +397,32 @@ var UserDropdown = function (_a) {
         });
     }, []);
     var handleFocus = useCallback(function (isDisableCheckFocused) {
-        setPlaceholderValue(SEARCH_PLACEHOLDER[language]);
+        setPlaceholderValue(focusPlaceholder || SEARCH_PLACEHOLDER[language]);
         if (isInputFocused.current && !isDisableCheckFocused)
             return;
         isInputFocused.current = true;
+        setIsFocused(true);
         var selectRefCurrent = selectRef.current;
         var _a = selectRefCurrent || {}, _preventBlur = _a._preventBlur, inputRef = _a.inputRef;
         setTimeout(function () {
             if (selectRefCurrent && !_preventBlur)
-                isIosPlatform(platform) && inputRef ? focusInputIOS(inputRef) : selectRefCurrent.focus();
+                checkIsIosPlatform(platform) && inputRef ? focusInputIOS(inputRef) : selectRefCurrent.focus();
         }, RENDER_DELAY);
         isChipsCollapsable && handleUnCollapseChips();
-    }, [language, isChipsCollapsable, handleUnCollapseChips, platform, focusInputIOS]);
+    }, [focusPlaceholder, language, isChipsCollapsable, handleUnCollapseChips, platform, focusInputIOS]);
     var handleForceFocus = useCallback(function () { return setTimeout(function () { return handleFocus(true); }, RENDER_DELAY); }, [handleFocus]);
+    var handleSelectFocus = useCallback(function () {
+        handleFocus();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [handleFocus, onFocus]);
     var handleCloseModal = function () {
         setModalData(null);
         setIsSearchable(true);
-        if (isMobilePlatform(platform)) {
+        if (checkIsMobilePlatform(platform)) {
             new Promise(function (resolve) { return resolve(); }).then(function () { var _a; return (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
         }
     };
-    var renderTitle = function () { return title && _jsx("div", __assign({ className: "smartapp-user-dropdown__title" }, { children: title })); };
-    var renderMask = function () {
-        return mask && (_jsx("div", __assign({ ref: maskRef, className: "smartapp-user-dropdown__container--mask" }, { children: mask })));
-    };
-    var renderHint = function () {
-        if (isNil(hint))
-            return;
-        return isString(hint) ? _jsx("div", __assign({ className: "smartapp-user-dropdown__hint" }, { children: hint })) : hint;
-    };
-    var modalContent = modalData ? (_jsx(ContactBottomSheet, { fontFamily: fontFamily, language: language, avatar: modalData.avatar, name: modalData.name, email: modalData.email, serverName: modalData.serverName, company: modalData.company, department: modalData.department, companyPosition: modalData.companyPosition })) : (_jsx(_Fragment, {}));
+    var modalContent = modalData ? (_jsx(ContactBottomSheet, { fontFamily: fontFamily, language: language, contactInfoTitle: contactInfoTitle, avatar: modalData.avatar, name: modalData.name, email: modalData.email, serverName: modalData.serverName, company: modalData.company, department: modalData.department, companyPosition: modalData.companyPosition, handleCloseModal: handleCloseModal, onClickContactInfoCopyEmail: onClickContactInfoCopyEmail })) : (_jsx(_Fragment, {}));
     useEffect(function () {
         if (externalInputValue && isInputHidden) {
             setInputValue(externalInputValue);
@@ -564,16 +433,23 @@ var UserDropdown = function (_a) {
     useEffect(function () {
         !userDropdownId && setUserDropdownId("user_dropdown_".concat(generateId().replace(/-/g, '_')));
     }, [userDropdownId]);
+    useLayoutEffect(function () {
+        if (isChipsCollapsable && !isEmpty(chipLabelWithMaxWidth) && !isInputFocused.current) {
+            handleUnCollapseChips();
+            handleCollapseChips();
+        }
+        // eslint-disable-next-line
+    }, [hint]);
     useLayoutEffect(function () {
         if (userDropdownId)
             setTimeout(function () { return (isChipsCollapsable ? handleCollapseChips() : handleUnCollapseChips()); }, RENDER_DELAY);
         // eslint-disable-next-line
     }, [isChipsCollapsable, userDropdownId]);
     useEffect(function () {
-        setPaddingLeft(calculatePaddingLeft());
+        setPaddingLeft(calculateHorizontalPadding(maskRef, setMaskWidth));
     }, [mask]);
     useEffect(function () {
-        setPaddingRight(calculatePaddingRight());
+        setPaddingRight(calculateHorizontalPadding(suffixRef, setSuffixWidth));
     }, [suffix]);
     useEffect(function () {
         setSelectedUsers(function (prevSelectedUsers) {
@@ -581,38 +457,18 @@ var UserDropdown = function (_a) {
         });
     }, [layoutType, fontFamily, language, isChipsCollapsable]);
     useEffect(function () {
-        if (!isEmpty(selectedEntries)) {
+        if (isArray(selectedEntries) && !isEmpty(selectedEntries)) {
             setSelectedUsers(selectedEntries.map(function (entity) {
-                var isWarning = entity.isWarning, isLoading = entity.isLoading, isOrganizerShort = entity.isOrganizerShort, isResetChipsToInputValue = entity.isResetChipsToInputValue, userType = entity.userType, currentContextItems = entity.contextMenuItems, uid = entity.uid, organizerName = entity.organizerName;
-                var contextMenuItems = currentContextItems === null || currentContextItems === void 0 ? void 0 : currentContextItems.map(function (item) { return (__assign(__assign({}, item), { action: function (data) {
-                        var _a;
-                        (_a = item.action) === null || _a === void 0 ? void 0 : _a.call(item, data);
-                        isMobilePlatform(platform) && handleFocus(true);
-                    } })); });
-                var commonFields = {
-                    platform: platform,
-                    layoutType: layoutType,
-                    fontFamily: fontFamily,
-                    language: language,
-                    isChipsCollapsable: isChipsCollapsable,
-                    isResetChipsToInputValue: isResetChipsToInputValue,
-                    contextMenuItems: contextMenuItems,
-                    isSelectedChipHasTooltip: isSelectedChipHasTooltip,
-                    isLoading: isLoading,
-                    isWarning: isWarning,
-                    isOrganizerShort: isOrganizerShort,
-                    userType: userType,
-                    uid: uid,
-                    organizerName: organizerName,
-                    isInputFocused: isInputFocused,
-                    selectRef: selectRef,
-                    collapsableChipsCount: collapsableChipsCount,
-                    lastVisibleChipIndex: lastVisibleChipIndex,
+                var contextMenuItems = entity.contextMenuItems;
+                var generateContextMenuItems = function () {
+                    return contextMenuItems === null || contextMenuItems === void 0 ? void 0 : contextMenuItems.map(function (item) { return (__assign(__assign({}, item), { action: function (data) {
+                            var _a;
+                            (_a = item.action) === null || _a === void 0 ? void 0 : _a.call(item, data);
+                            checkIsMobilePlatform(platform) && handleFocus(true);
+                        } })); });
                 };
-                var generatedNotCorporateEntity = Object.keys(entity).length === 1
-                    ? generateEnteredByUserOption(__assign({ email: entity.email }, commonFields))
-                    : generateContactsOption(__assign({ option: entity }, commonFields));
-                return 'contacts' in entity ? generateCorporateOption(__assign({ option: entity }, commonFields)) : generatedNotCorporateEntity;
+                var commonFields = __assign(__assign({}, pick(entity, COMMON_FIELDS_TO_PICK)), { platform: platform, layoutType: layoutType, fontFamily: fontFamily, language: language, isChipsCollapsable: isChipsCollapsable, isSelectedChipHasTooltip: isSelectedChipHasTooltip, isInputFocused: isInputFocused, selectRef: selectRef, collapsableChipsCount: collapsableChipsCount, lastVisibleChipIndex: lastVisibleChipIndex, contextMenuItems: generateContextMenuItems() });
+                return transformSelectedEntity(entity, commonFields);
             }));
         }
         else
@@ -634,10 +490,22 @@ var UserDropdown = function (_a) {
     }, [clearUserTypingTimeout, requestInputChangeDebounce]);
     useEffect(function () {
         if (isChipsCollapsable && !isInputFocused.current && isNeedCheckChipCollapsableCount.current)
-            collapsableChipsCount.current = selectedEntries.length - visibleChipsCount.current;
+            collapsableChipsCount.current = (selectedEntries || []).length - visibleChipsCount.current;
     }, [isChipsCollapsable, selectedEntries]);
     var OptionComponent = useCallback(function (props) { return _jsx(Option, __assign({}, props, { isMenuShadowless: isMenuShadowless, children: props.children })); }, [isMenuShadowless]);
-    var MenuListComponent = useCallback(function (props) { return (_jsx(MenuList, __assign({}, props, { children: props.children, selectRef: selectRef, scrollFromTop: menuScrollFromTop, language: language, menuListMaxHeight: menuListMaxHeight, hasNextPage: hasNextPage, isLoading: isLoading, isShowCatalogSearchButton: isShowCatalogSearchButton, onShowCatalogSearchButtonClick: onShowCatalogSearchButtonClick, isUserTyping: isUserTyping, isCharHintVisible: isCharHintVisible, isMenuShadowless: isMenuShadowless, isNextPageLoading: isNextPageLoading, onLoadNextPage: function (inputValue) { return onLoadNextPage === null || onLoadNextPage === void 0 ? void 0 : onLoadNextPage(inputValue); }, setIsDelimiterVisible: setIsDelimiterVisible }))); }, [
+    // Don't let a menu click force-focus the input (react-select's default behavior). Without this, e.g. on mobile
+    // with the keyboard hidden and the menu still open, the first click only refocuses the field and the
+    // option gets selected only on the second click.
+    var handleMenuMouseDown = useCallback(function (event) {
+        // only handle the primary (left) mouse button, leave right-click/middle-click at their native behavior
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
+    var MenuComponent = useCallback(function (props) { return _jsx(components.Menu, __assign({}, props, { innerProps: __assign(__assign({}, props.innerProps), { onMouseDown: handleMenuMouseDown }) })); }, [handleMenuMouseDown]);
+    var MenuListComponent = useCallback(function (props) { return (_jsx(MenuList, __assign({}, props, { children: props.children, selectRef: selectRef, scrollFromTop: menuScrollFromTop, language: language, platform: platform, menuListMaxHeight: menuListMaxHeight, charHintClassName: charHintClassName, hasNextPage: hasNextPage, isLoading: isLoading, isShowCatalogSearchButton: isShowCatalogSearchButton, onShowCatalogSearchButtonClick: onShowCatalogSearchButtonClick, isUserTyping: isUserTyping, isCharHintVisible: isCharHintVisible, isMenuShadowless: isMenuShadowless, isNextPageLoading: isNextPageLoading, onLoadNextPage: function (inputValue) { return onLoadNextPage === null || onLoadNextPage === void 0 ? void 0 : onLoadNextPage(inputValue); }, setIsDelimiterVisible: setIsDelimiterVisible }))); }, [
+        charHintClassName,
         hasNextPage,
         isCharHintVisible,
         isLoading,
@@ -649,16 +517,20 @@ var UserDropdown = function (_a) {
         menuListMaxHeight,
         onLoadNextPage,
         onShowCatalogSearchButtonClick,
+        platform,
     ]);
-    var NoOptionsButton = function (props) { return (_jsx(components.NoOptionsMessage, __assign({}, props, { children: _jsx(SearchInCatalogButton, { language: language, isOnlyButtonInList: true, onShowCatalogSearchButtonClick: onShowCatalogSearchButtonClick, noOptionText: isShowCatalogSearchButton ? undefined : generateNoOptionsMessage({ inputValue: inputValue }) }) }))); };
-    var InputComponent = useCallback(function (props) { return _jsx(Input, __assign({}, props, { "data-is-clearable": !isChipsVisible, suffixref: suffixRef, suffix: suffix })); }, [isChipsVisible, suffix]);
+    var NoOptionsButton = function (props) { return (_jsx(components.NoOptionsMessage, __assign({}, props, { className: noOptionsMessageClassName }, { children: _jsx(SearchInCatalogButton, { language: language, isOnlyButtonInList: true, isMenuShadowless: isMenuShadowless, noOptionText: isShowCatalogSearchButton ? undefined : generateNoOptionsMessage({ inputValue: inputValue }), onShowCatalogSearchButtonClick: onShowCatalogSearchButtonClick }) }))); };
+    var InputComponent = useCallback(function (props) { return (_jsx(Input, __assign({}, props, { "data-is-clearable": !isChipsVisible, "data-placeholder": placeholderValue, suffixref: suffixRef, suffix: suffix }))); }, [isChipsVisible, placeholderValue, suffix]);
     var MultiValueLabelComponent = useCallback(function (props) { return (_jsx(MultiValueLabel, __assign({}, props, { platform: platform, isChipsOutline: isChipsOutline, transformCurrentChipToInputValue: transformCurrentChipToInputValue, handleBlurDropdown: function () { return handleDragBlur(true); }, handleRequestFocus: handleForceFocus }))); }, [platform, isChipsOutline, transformCurrentChipToInputValue, handleForceFocus]);
     var setContainerNodeRef = function (ref) {
         var _a = ((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect()) || {}).left, left = _a === void 0 ? 0 : _a;
         setNodeRef(ref);
-        setDelimiterOffset(left);
+        setDelimiterOffset(isShowCatalogSearchButton ? 0 : left);
     };
-    return (_jsxs("div", __assign({ id: userDropdownId, className: classNames('smartapp-user-dropdown', containerClassName), style: __assign(__assign({}, fontFamilyStyle), containerStyles) }, { children: [renderTitle(), _jsxs("div", __assign({ className: "smartapp-user-dropdown__container", ref: setContainerNodeRef }, { children: [renderMask(), _jsx(Select, { ref: selectRef, menuIsOpen: isInputHidden ? !!externalInputValue : undefined, menuPortalTarget: menuPortalTarget === null || menuPortalTarget === void 0 ? void 0 : menuPortalTarget.current, isMulti: true, openMenuOnFocus: true, blurInputOnSelect: false, captureMenuScroll: false, isSearchable: isSearchable, menuPlacement: menuPosition, menuPosition: menuLocation, controlShouldRenderValue: isChipsVisible, backspaceRemovesValue: isChipsVisible, isDisabled: isDisabled, closeMenuOnSelect: isMenuCloseOnSelect, isLoading: isLoading || isUserTyping, isClearable: false, styles: generateStyles(), placeholder: placeholderValue, noOptionsMessage: generateNoOptionsMessage, loadingMessage: function () { return _jsx(LoadingMessage, { isMenuShadowless: isMenuShadowless, skeletonRowsCount: skeletonRowsCount }); }, value: selectedUsers, inputValue: inputValue, options: !isNull(corporateEntries) || !isNull(myContactsEntries) ? generateOptions() : undefined, filterOption: handleFilterOption, onInputChange: handleInputChange, onChange: handleChange, onMenuClose: handleMenuClose, onMenuOpen: onMenuOpen, onKeyDown: handleKeyDown, onBlur: handleSelectBlur, autoFocus: autoFocus, onFocus: function () { return (onFocus ? onFocus() : handleFocus()); }, instanceId: userDropdownId, components: {
+    return (_jsxs("div", __assign({ id: userDropdownId, className: classNames('smartapp-user-dropdown', containerClassName, { 'smartapp-user-dropdown__not-clickable': isNotClickable }), style: __assign(__assign({}, fontFamilyStyle), containerStyles) }, { children: [_jsx(Title, { text: title }), _jsxs("div", __assign({ className: "smartapp-user-dropdown__container", ref: setContainerNodeRef }, { children: [_jsx(Mask, { mask: mask, elementRef: maskRef, isVisible: isMaskVisible }), _jsx(Select, { ref: selectRef, menuIsOpen: isInputHidden ? !!externalInputValue : isMenuOpen, menuPortalTarget: menuPortalTarget === null || menuPortalTarget === void 0 ? void 0 : menuPortalTarget.current, isMulti: true, openMenuOnFocus: true, hideSelectedOptions: isSelectedOptionsHidden, blurInputOnSelect: false, captureMenuScroll: false, isSearchable: isSearchable, menuShouldScrollIntoView: menuShouldScrollIntoView, menuPlacement: menuPosition, menuPosition: menuLocation, controlShouldRenderValue: isChipsVisible, backspaceRemovesValue: isChipsVisible, isDisabled: isDisabled, closeMenuOnSelect: isMenuCloseOnSelect, isLoading: isLoading || isUserTyping, isClearable: false, isOptionDisabled: function (_a) {
+                            var _b = _a.isAlreadyAdded, isAlreadyAdded = _b === void 0 ? false : _b;
+                            return isAlreadyAdded;
+                        }, styles: generateStyles(), placeholder: placeholderValue, noOptionsMessage: generateNoOptionsMessage, loadingMessage: function () { return _jsx(LoadingMessage, { isMenuShadowless: isMenuShadowless, skeletonRowsCount: skeletonRowsCount }); }, value: selectedUsers, inputValue: inputValue, options: !isNull(corporateEntries) || !isNull(myContactsEntries) ? generateOptions() : undefined, filterOption: handleFilterOption, onInputChange: handleInputChange, onChange: handleChange, onMenuClose: handleMenuClose, onMenuOpen: handleMenuOpen, onKeyDown: handleKeyDown, onBlur: handleSelectBlur, autoFocus: autoFocus, onFocus: handleSelectFocus, instanceId: userDropdownId, components: {
                             Input: InputComponent,
                             MultiValueLabel: MultiValueLabelComponent,
                             MultiValueRemove: MultiValueRemove,
@@ -666,9 +538,12 @@ var UserDropdown = function (_a) {
                             IndicatorSeparator: IndicatorSeparator,
                             DropdownIndicator: DropdownIndicator,
                             LoadingIndicator: LoadingIndicator,
+                            Menu: MenuComponent,
                             MenuList: MenuListComponent,
                             NoOptionsMessage: NoOptionsButton,
-                        } }), isMenuShadowless && isDelimiterVisible && (_jsx("div", { className: "smartapp-user-dropdown__container--delimiter", style: { '--delimiter-offset': "-".concat(delimiterOffset, "px") } }))] })), renderHint(), _jsx(Modal, { isModalOpen: !isNull(modalData), platform: platform, fontFamily: fontFamily, content: modalContent, isBottomSheet: isMobilePlatform(platform), backgroundColor: "var(--color-bg-blackout-transparent)", handleCloseModal: handleCloseModal })] })));
+                        } }), _jsx(Delimiter, { isDelimiterVisible: isDelimiterVisible, isMenuShadowless: isMenuShadowless, isShowCatalogSearchButton: isShowCatalogSearchButton, delimiterOffset: delimiterOffset })] })), _jsx(Hint, { text: hint }), _jsx(Modal, { isModalOpen: !isNull(modalData), platform: platform, fontFamily: fontFamily, content: modalContent, isBottomSheet: checkIsMobilePlatform(platform), modalMaxHeight: checkIsMobilePlatform(platform) ? generateContactBottomSheetMaxHeight() : undefined, backgroundColor: "var(--color-bg-blackout-transparent)", handleCloseModal: handleCloseModal, 
+                // fix появления ненужного паддинга под клавиатуру android у ContactBottomSheet
+                bottomSheetScrollMobileConfig: { shouldDoScrollToFocusedElement: false } })] })));
 };
 export default memo(UserDropdown);
 //# sourceMappingURL=UserDropdown.js.map