@expressms/smartapp-ui 3.0.0-alpha.19 → 3.0.0-alpha.190

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

@@ -20,12 +20,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable max-lines */
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+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';
 import ContactBottomSheet from './ContactBottomSheet/ContactBottomSheet';
 import LoadingMessage from './LoadingMessage/LoadingMessage';
@@ -34,100 +34,80 @@ import MultiValueLabel from './MultiValueLabel/MultiValueLabel';
 import Option from './Option/Option';
 import SearchInCatalogButton from './SearchInCatalogButton/SearchInCatalogButton';
 import selectStyles from './selectStyles';
-import { 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, ENTER_KEY, EVENT_LISTENER_TYPES, LANGUAGES, LAYOUT_TYPE, MASK_INPUT_PL, MENU_POSITIONS, PLATFORM, SPACE, SPACE_KEY, } from '../../constants';
+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, generateFontFamilyStyle, generateId, isIosPlatform, isMobilePlatform } 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, EMAIL_FIELD, EMPTY_STRING, ENTER_KEY, EVENT_LISTENER_TYPES, 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 MIN_INPUT_SYMBOLS = 3;
-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;
-export var EMAIL_FIELD = 'email';
-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) { return _jsx(components.Input, __assign({}, props, { enterKeyHint: "done" })); };
 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.language, language = _s === void 0 ? LANGUAGES.ru : _s, _t = _a.layoutType, layoutType = _t === void 0 ? LAYOUT_TYPE.minimal : _t, externalInputValue = _a.externalInputValue, title = _a.title, mask = _a.mask, placeholder = _a.placeholder, hint = _a.hint, onShowCatalogSearchButtonClick = _a.onShowCatalogSearchButtonClick, noOptionsMessage = _a.noOptionsMessage, maxMembersCount = _a.maxMembersCount, _u = _a.menuPosition, menuPosition = _u === void 0 ? MENU_POSITIONS.top : _u, _v = _a.autoFocus, autoFocus = _v === void 0 ? false : _v, containerClassName = _a.containerClassName, containerPadding = _a.containerPadding, containerStyles = _a.containerStyles, _w = _a.selectedEntries, selectedEntries = _w === void 0 ? [] : _w, corporateEntries = _a.corporateEntries, myContactsEntries = _a.myContactsEntries, _x = _a.emailsToExclude, emailsToExclude = _x === void 0 ? [] : _x, onInputChange = _a.onInputChange, onChange = _a.onChange, onMenuOpen = _a.onMenuOpen, onMenuClose = _a.onMenuClose, onLoadNextPage = _a.onLoadNextPage;
-    var _y = useState(''), userDropdownId = _y[0], setUserDropdownId = _y[1];
-    var _z = useState([]), selectedUsers = _z[0], setSelectedUsers = _z[1];
-    var _0 = useState(''), paddingLeft = _0[0], setPaddingLeft = _0[1];
-    var _1 = useState(0), maskWidth = _1[0], setMaskWidth = _1[1];
-    var _2 = useState(false), isError = _2[0], setIsError = _2[1];
-    var _3 = useState(true), isSearchable = _3[0], setIsSearchable = _3[1];
-    var _4 = useState(false), isUserTyping = _4[0], setIsUserTyping = _4[1];
-    var _5 = useState(null), modalData = _5[0], setModalData = _5[1];
-    var _6 = useState(''), chipLabelWithMaxWidth = _6[0], setChipLabelWithMaxWidth = _6[1];
-    var _7 = useState(''), inputValue = _7[0], setInputValue = _7[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.isMenuCloseOnSelect, isMenuCloseOnSelect = _l === void 0 ? true : _l, _m = _a.isFilteringDisabled, isFilteringDisabled = _m === void 0 ? false : _m, _o = _a.hasNextPage, hasNextPage = _o === void 0 ? false : _o, _p = _a.isNextPageLoading, isNextPageLoading = _p === void 0 ? false : _p, _q = _a.isInputHidden, isInputHidden = _q === void 0 ? false : _q, _r = _a.isBackspaceChipToInput, isBackspaceChipToInput = _r === void 0 ? false : _r, _s = _a.isShowCatalogSearchButton, isShowCatalogSearchButton = _s === void 0 ? false : _s, _t = _a.isDisabledMenuOffsetAtFullscreen, isDisabledMenuOffsetAtFullscreen = _t === void 0 ? false : _t, _u = _a.isDisabledCheckUniqueEmails, isDisabledCheckUniqueEmails = _u === void 0 ? false : _u, _v = _a.isMenuShadowless, isMenuShadowless = _v === void 0 ? false : _v, _w = _a.isStateless, isStateless = _w === void 0 ? false : _w, _x = _a.isSelectedOptionsHidden, isSelectedOptionsHidden = _x === void 0 ? true : _x, _y = _a.isInputValueClearedOnBlur, isInputValueClearedOnBlur = _y === void 0 ? false : _y, _z = _a.language, language = _z === void 0 ? LANGUAGES.ru : _z, _0 = _a.layoutType, layoutType = _0 === void 0 ? LAYOUT_TYPE.minimal : _0, externalInputValue = _a.externalInputValue, title = _a.title, contactInfoTitle = _a.contactInfoTitle, mask = _a.mask, suffix = _a.suffix, _1 = _a.placeholder, placeholder = _1 === void 0 ? EMPTY_STRING : _1, focusPlaceholder = _a.focusPlaceholder, hint = _a.hint, onShowCatalogSearchButtonClick = _a.onShowCatalogSearchButtonClick, noOptionsMessage = _a.noOptionsMessage, maxMembersCount = _a.maxMembersCount, skeletonRowsCount = _a.skeletonRowsCount, _2 = _a.maxRowsCountToCollapseChips, maxRowsCountToCollapseChips = _2 === void 0 ? DEFAULT_MAX_ROWS_COUNT_TO_COLLAPSE_CHIPS : _2, _3 = _a.menuListMaxHeight, menuListMaxHeight = _3 === void 0 ? DEFAULT_MENU_LIST_MAX_HEIGHT : _3, _4 = _a.menuPosition, menuPosition = _4 === void 0 ? MENU_POSITIONS.top : _4, menuLocation = _a.menuLocation, menuPortalTarget = _a.menuPortalTarget, _5 = _a.autoFocus, autoFocus = _5 === void 0 ? false : _5, containerClassName = _a.containerClassName, charHintClassName = _a.charHintClassName, containerPadding = _a.containerPadding, containerStyles = _a.containerStyles, selectedEntries = _a.selectedEntries, corporateEntries = _a.corporateEntries, myContactsEntries = _a.myContactsEntries, emailsToExclude = _a.emailsToExclude, _6 = _a.userDropdownId, initialUserDropdownId = _6 === void 0 ? EMPTY_STRING : _6, 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 _7 = useState(initialUserDropdownId), userDropdownId = _7[0], setUserDropdownId = _7[1];
+    var _8 = useState([]), selectedUsers = _8[0], setSelectedUsers = _8[1];
+    var _9 = useState(EMPTY_STRING), paddingLeft = _9[0], setPaddingLeft = _9[1];
+    var _10 = useState(EMPTY_STRING), paddingRight = _10[0], setPaddingRight = _10[1];
+    var _11 = useState(0), maskWidth = _11[0], setMaskWidth = _11[1];
+    var _12 = useState(0), suffixWidth = _12[0], setSuffixWidth = _12[1];
+    var _13 = useState(true), isSearchable = _13[0], setIsSearchable = _13[1];
+    var _14 = useState(false), isUserTyping = _14[0], setIsUserTyping = _14[1];
+    var _15 = useState(null), modalData = _15[0], setModalData = _15[1];
+    var _16 = useState(EMPTY_STRING), chipLabelWithMaxWidth = _16[0], setChipLabelWithMaxWidth = _16[1];
+    var _17 = useState(EMPTY_STRING), inputValue = _17[0], setInputValue = _17[1];
+    var _18 = useState(placeholder), placeholderValue = _18[0], setPlaceholderValue = _18[1];
+    var _19 = useState(false), isDelimiterVisible = _19[0], setIsDelimiterVisible = _19[1];
+    var _20 = useState(0), delimiterOffset = _20[0], setDelimiterOffset = _20[1];
     var isInputFocused = useRef(false);
     var selectRef = useRef(null);
     var maskRef = useRef(null);
+    var suffixRef = useRef(null);
     var menuScrollFromTop = useRef(0);
     var collapsableChipsCount = useRef(0);
+    var visibleChipsCount = useRef(0);
+    var isNeedCheckChipCollapsableCount = useRef(false);
     var lastVisibleChipIndex = useRef(-1);
     var skipAddUserToChipsOnNextBlurRef = useRef(false);
+    var userTypingTimeoutRef = useRef(null);
+    var prevIsLoadingRef = useRef(isLoading);
     var selectedUsersLength = selectedUsers.length;
+    var _21 = useDroppable({ id: userDropdownId }), setNodeRef = _21.setNodeRef, over = _21.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;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useImperativeHandle(focusRef, function () { return ({ focus: handleFocus, blur: function () { return handleDragBlur(true); } }); }, []);
     var fontFamilyStyle = generateFontFamilyStyle(fontFamily);
-    var checkIsValueIsEmail = function (inputValue) {
-        var regex = new RegExp(/^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/);
-        return regex.test(inputValue);
-    };
-    var checkIsEmailToExclude = 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 isCharHintVisible = useCharHintDisplay({ inputValue: inputValue }).isCharHintVisible;
+    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,
-            isError: isError,
+            isInputPlaceholderVisible: isInputPlaceholderVisible,
             lastRowNumber: isChipsVisible ? Math.ceil(selectedUsersLength / 2) + 1 : 1,
             paddingLeft: paddingLeft,
+            paddingRight: !isChipsVisible && !isEmpty(inputValue) ? PADDING_WITH_CLEAR_ICON : paddingRight,
             platform: platform,
             layoutType: layoutType,
             isInputHidden: isInputHidden,
             isDisabledMenuOffsetAtFullscreen: isDisabledMenuOffsetAtFullscreen,
+            isInputFocused: isInputFocused.current,
             isMaskRepresented: !isEmpty(mask),
+            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) {
@@ -152,71 +132,74 @@ 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) || '';
-        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;
+        if (userTypingTimeoutRefCurrent) {
+            clearTimeout(userTypingTimeoutRefCurrent);
+            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);
-            setIsUserTyping(false);
+            clearUserTypingTimeout();
+            userTypingTimeoutRef.current = setTimeout(function () { return setIsUserTyping(false); }, CLEAR_USER_TYPING_TIMEOUT);
         }, USER_TYPING_TIMEOUT);
-    }, [onInputChange]);
-    var resetIsUserTypingDebounce = useMemo(function () { return debounce(function () { return setIsUserTyping(false); }, USER_TYPING_TIMEOUT); }, []);
-    var handleResetError = function () { return isError && setIsError(false); };
+    }, [clearUserTypingTimeout, onInputChange]);
     var handleMenuClose = function () {
         menuScrollFromTop.current = 0;
-        handleResetError();
-        onMenuClose && onMenuClose();
+        setIsDelimiterVisible(false);
+        onMenuClose === null || onMenuClose === void 0 ? void 0 : onMenuClose();
     };
-    var handleInputChange = function (inputValue, additionalInfo) {
+    var handleInputChange = useCallback(function (inputValue, additionalInfo) {
         if (additionalInfo) {
-            var action = additionalInfo.action, prevInputValue = additionalInfo.prevInputValue;
+            var action = additionalInfo.action, _a = additionalInfo.prevInputValue, prevInputValue = _a === void 0 ? EMPTY_STRING : _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);
+                onImmediateInputChange === null || onImmediateInputChange === void 0 ? void 0 : onImmediateInputChange(inputValue);
+            }
             if ((isInputBlurAction || isMenuCloseAction) && checkIsValueIsEmail(trimPrevInputValue_1)) {
                 var isUserAlreadySelected = selectedUsers.some(function (_a) {
                     var email = _a.email;
                     return email === trimPrevInputValue_1;
                 });
-                setInputValue(isUserAlreadySelected || checkIsEmailToExclude(trimPrevInputValue_1) ? trimPrevInputValue_1 : inputValue);
+                var nextInputValue = isUserAlreadySelected || checkIsEmailToExclude(trimPrevInputValue_1) ? trimPrevInputValue_1 : inputValue;
+                setInputValue(nextInputValue);
+                onImmediateInputChange === null || onImmediateInputChange === void 0 ? void 0 : onImmediateInputChange(nextInputValue);
             }
         }
-        setIsUserTyping(!isEmpty(inputValue));
-        handleResetError();
-        inputValue.length >= MIN_INPUT_SYMBOLS ? requestInputChangeDebounce(inputValue) : resetIsUserTypingDebounce();
-    };
-    var extractInputEmails = function (inputValue) {
-        return inputValue
-            .split(/[,;]+/)
-            .map(function (inputStr) { return inputStr.trim(); })
-            .filter(function (inputStr) { return !!inputStr.length; });
-    };
-    var handleAddUser = function (needToShowError) {
-        if (needToShowError === void 0) { needToShowError = true; }
-        var props = selectRef.current.props;
-        var options = props.options, inputValue = props.inputValue, onChange = props.onChange;
-        if (isEmpty(inputValue))
+        if (!isEmpty(inputValue)) {
+            clearUserTypingTimeout();
+            setIsUserTyping(true);
+        }
+        inputValue.length >= MIN_INPUT_SYMBOLS && requestInputChangeDebounce(inputValue);
+    }, [onImmediateInputChange, requestInputChangeDebounce, selectedUsers, checkIsEmailToExclude, clearUserTypingTimeout]);
+    var handleAddUser = function () {
+        var selectRefCurrent = selectRef.current;
+        if (isNil(selectRefCurrent))
             return;
+        var props = selectRefCurrent.props;
+        var options = props.options, onChange = props.onChange;
+        if (isEmpty(inputValue))
+            return Promise.resolve();
         var trimInputValue = inputValue.trim();
         var optionProps = {
             platform: platform,
@@ -248,10 +231,10 @@ var UserDropdown = function (_a) {
                     return email === inputEmail;
                 });
                 enteredUsers.push(existingUser || generateEnteredByUserOption(__assign(__assign({}, optionProps), { email: inputEmail })));
-                if (isUserAlreadySelected && needToShowError && isSingleEmailEntered)
-                    setIsError(true);
+                if (isUserAlreadySelected && isSingleEmailEntered)
+                    return;
                 else
-                    handleInputChange('', { action: INPUT_ACTIONS.change, prevInputValue: trimInputValue });
+                    handleInputChange(EMPTY_STRING, { action: INPUT_ACTIONS.change, prevInputValue: trimInputValue });
             }
             !isValueIsEmail && incorrectEmails.push(inputEmail);
         });
@@ -265,7 +248,7 @@ var UserDropdown = function (_a) {
         var isEnterPressed = code === ENTER_KEY || key === ENTER_KEY;
         var isBackspacePressed = code === BACKSPACE_KEY || key === BACKSPACE_KEY;
         var isSpacePressed = code === SPACE_KEY;
-        var isTransformChipToInputValue = isBackspacePressed && isBackspaceChipToInput && inputValue === '' && !isEmpty(selectedUsers);
+        var isTransformChipToInputValue = isBackspacePressed && isBackspaceChipToInput && inputValue === EMPTY_STRING && !isEmpty(selectedUsers);
         if (isEnterPressed) {
             event.preventDefault();
             (_a = handleAddUser()) === null || _a === void 0 ? void 0 : _a.then(function () { });
@@ -291,26 +274,29 @@ var UserDropdown = function (_a) {
             (_c = (_b = selectRef.current) === null || _b === void 0 ? void 0 : _b.onMenuOpen) === null || _c === void 0 ? void 0 : _c.call(_b);
         }
     };
-    var transformCurrentChipToInputValue = function (label, email) {
+    var transformCurrentChipToInputValue = useCallback(function (label, value) {
         var _a, _b;
         skipAddUserToChipsOnNextBlurRef.current = true;
         setSelectedUsers(function (prevSelectedUsers) {
             var nextSelectedUsers = prevSelectedUsers.filter(function (_a) {
-                var userEmail = _a.email;
-                return userEmail !== email;
+                var userEmail = _a.email, userType = _a.userType, userUid = _a.uid;
+                return checkIfContactTypeIsGroup(userType) ? userUid !== value : userEmail !== value;
             });
             onChange === null || onChange === void 0 ? void 0 : onChange(nextSelectedUsers.map(function (userData) { return omit(userData, COMMON_FIELDS_TO_OMIT); }));
             return nextSelectedUsers;
         });
+        handleFocus();
         setInputValue(label);
         onInputChange(label);
         handleInputChange(label);
         onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
         (_b = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.onMenuOpen) === null || _b === void 0 ? void 0 : _b.call(_a);
-    };
+        setIsUserTyping(false);
+    }, 
+    // eslint-disable-next-line
+    [onInputChange, handleInputChange, onMenuOpen, onChange]);
     var handleChange = function (newSelectedUsers) {
-        var uniqNewSelectedUsers = uniqBy(newSelectedUsers, EMAIL_FIELD);
-        var users = [];
+        var uniqNewSelectedUsers = isDisabledCheckUniqueEmails ? newSelectedUsers : uniqBy(newSelectedUsers, EMAIL_FIELD);
         var deletedUser = selectedUsers.find(function (_a) {
             var value = _a.value;
             return !uniqNewSelectedUsers.some(function (_a) {
@@ -320,108 +306,59 @@ 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 = '';
-        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;
-        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) || '';
-                }
-            }
-        });
+        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 = numberOfVisibleChips;
         collapsableChipsCount.current = collapsableChips;
-        lastVisibleChipIndex.current = chips.length - collapsableChips;
+        lastVisibleChipIndex.current = numberOfVisibleChips;
         setChipLabelWithMaxWidth(chipLabelWithMaxWidth || generateId());
     };
-    var handleUnCollapseChips = function () {
-        var _a;
+    var handleUnCollapseChips = useCallback(function () {
         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) || '';
-            chipLabel === chipLabelWithMaxWidth && (chip.style.maxWidth = '100%');
-        });
+        var chips = retrieveChipsElements(userDropdownId);
+        unCollapseChips(chipLabelWithMaxWidth, chips);
+        isNeedCheckChipCollapsableCount.current = false;
+        visibleChipsCount.current = chips.length;
         collapsableChipsCount.current = 0;
         lastVisibleChipIndex.current = -1;
-        setChipLabelWithMaxWidth('');
+        setChipLabelWithMaxWidth(EMPTY_STRING);
+    }, [chipLabelWithMaxWidth, userDropdownId]);
+    var handleDragBlur = function (isDisableCheckFocused) {
+        var _a;
+        if (!isInputFocused.current && !isDisableCheckFocused)
+            return;
+        if (selectRef.current)
+            selectRef.current._preventBlur = false;
+        (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     };
     var handleBlur = function () {
         var _a;
         var shouldSkipAddUserToChipsOnNextBlur = skipAddUserToChipsOnNextBlurRef.current;
+        var _b = selectRef.current || {}, _preventBlur = _b._preventBlur, _contextMenuOpen = _b._contextMenuOpen, _isDragging = _b._isDragging;
+        if (_preventBlur || _contextMenuOpen || _isDragging || skipAddUserToChipsOnNextBlurRef.current)
+            return;
         var onBlurComplete = function () {
             isChipsCollapsable && handleCollapseChips();
             isInputFocused.current = false;
@@ -431,19 +368,42 @@ var UserDropdown = function (_a) {
             return;
         }
         else
-            (_a = handleAddUser(false)) === null || _a === void 0 ? void 0 : _a.then(onBlurComplete);
+            (_a = handleAddUser()) === null || _a === void 0 ? void 0 : _a.then(function () { return requestAnimationFrame(function () { return requestAnimationFrame(function () { return onBlurComplete(); }); }); });
         skipAddUserToChipsOnNextBlurRef.current = false;
     };
-    var handleFocus = function () {
-        if (isIosPlatform(platform)) {
-            new Promise(function (resolve) { return resolve(); }).then(function () { var _a; return (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
-        }
-        else {
-            setTimeout(function () { var _a; return (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+    var handleSelectBlur = function () {
+        setPlaceholderValue(placeholder);
+        if (isInputValueClearedOnBlur) {
+            setInputValue(EMPTY_STRING);
+            onImmediateInputChange === null || onImmediateInputChange === void 0 ? void 0 : onImmediateInputChange(EMPTY_STRING);
         }
+        setTimeout(handleBlur, RENDER_DELAY);
+    };
+    var focusInputIOS = useCallback(function (input) {
+        var length = input.value.length;
+        requestAnimationFrame(function () {
+            input.focus();
+            input.value === EMPTY_STRING ? setCaretInEmptyInput(input) : setCaretPosition(input, length);
+        });
+    }, []);
+    var handleFocus = useCallback(function (isDisableCheckFocused) {
+        setPlaceholderValue(focusPlaceholder || SEARCH_PLACEHOLDER[language]);
+        if (isInputFocused.current && !isDisableCheckFocused)
+            return;
         isInputFocused.current = 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();
+        }, RENDER_DELAY);
         isChipsCollapsable && handleUnCollapseChips();
-    };
+    }, [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);
@@ -451,16 +411,7 @@ var UserDropdown = function (_a) {
             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);
@@ -472,48 +423,45 @@ var UserDropdown = function (_a) {
         !userDropdownId && setUserDropdownId("user_dropdown_".concat(generateId().replace(/-/g, '_')));
     }, [userDropdownId]);
     useLayoutEffect(function () {
-        if (userDropdownId) {
-            isChipsCollapsable ? handleCollapseChips() : handleUnCollapseChips();
+        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(calculateHorizontalPadding(suffixRef, setSuffixWidth));
+    }, [suffix]);
     useEffect(function () {
         setSelectedUsers(function (prevSelectedUsers) {
             return prevSelectedUsers.map(function (selectedUser) { return (__assign(__assign({}, selectedUser), { layoutType: layoutType, fontFamily: fontFamily, language: language, isChipsCollapsable: isChipsCollapsable })); });
         });
     }, [layoutType, fontFamily, language, isChipsCollapsable]);
     useEffect(function () {
-        if (!isEmpty(selectedEntries)) {
+        if (isArray(selectedEntries) && !isEmpty(selectedEntries)) {
             setSelectedUsers(selectedEntries.map(function (entity) {
-                var isOrganizer = entity.isOrganizer, isWarning = entity.isWarning, isLoading = entity.isLoading, uid = entity.uid, userType = entity.userType, contextMenuItems = entity.contextMenuItems, isResetChipsToInputValue = entity.isResetChipsToInputValue;
-                var commonFields = {
-                    platform: platform,
-                    layoutType: layoutType,
-                    fontFamily: fontFamily,
-                    language: language,
-                    isChipsCollapsable: isChipsCollapsable,
-                    isResetChipsToInputValue: isResetChipsToInputValue,
-                    contextMenuItems: contextMenuItems,
-                    isSelectedChipHasTooltip: isSelectedChipHasTooltip,
-                    isLoading: isLoading,
-                    isWarning: isWarning,
-                    isOrganizer: isOrganizer,
-                    userType: userType,
-                    uid: uid,
-                    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);
+                            isMobilePlatform(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
+            setSelectedUsers([]);
         // eslint-disable-next-line
     }, [selectedEntries]);
     useEffect(function () {
@@ -526,15 +474,42 @@ var UserDropdown = function (_a) {
     useEffect(function () {
         return function () {
             requestInputChangeDebounce.cancel();
-            resetIsUserTypingDebounce.cancel();
+            clearUserTypingTimeout();
         };
-    }, [requestInputChangeDebounce, resetIsUserTypingDebounce]);
-    var OptionComponent = useCallback(function (props) { return _jsx(Option, __assign({}, props, { children: props.children })); }, []);
-    var MenuListComponent = useCallback(function (props) { return (_jsx(MenuList, __assign({}, props, { children: props.children, selectRef: selectRef, scrollFromTop: menuScrollFromTop, language: language, hasNextPage: hasNextPage, isLoading: isLoading, isShowCatalogSearchButton: isShowCatalogSearchButton, onShowCatalogSearchButtonClick: onShowCatalogSearchButtonClick, isUserTyping: isUserTyping, isNextPageLoading: isNextPageLoading, onLoadNextPage: function (inputValue) { return onLoadNextPage && onLoadNextPage(inputValue); } }))); }, [language, hasNextPage, isLoading, isShowCatalogSearchButton, onShowCatalogSearchButtonClick, isUserTyping, isNextPageLoading, onLoadNextPage]);
-    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 MultiValueLabelComponent = function (props) { return (_jsx(MultiValueLabel, __assign({}, props, { isChipsOutline: isChipsOutline, transformCurrentChipToInputValue: transformCurrentChipToInputValue }))); };
-    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" }, { children: [renderMask(), _jsx(Select, { ref: selectRef, menuIsOpen: isInputHidden ? !!externalInputValue : undefined, isMulti: true, openMenuOnFocus: true, blurInputOnSelect: false, captureMenuScroll: false, isSearchable: isSearchable, menuPlacement: menuPosition, controlShouldRenderValue: isChipsVisible, backspaceRemovesValue: isChipsVisible, isDisabled: isDisabled, closeMenuOnSelect: isMenuCloseOnSelect, isLoading: isLoading || isUserTyping, isClearable: false, styles: generateStyles(), placeholder: placeholder || '', noOptionsMessage: generateNoOptionsMessage, loadingMessage: function () { return _jsx(LoadingMessage, {}); }, value: selectedUsers, inputValue: inputValue, options: !isNull(corporateEntries) || !isNull(myContactsEntries) ? generateOptions() : undefined, filterOption: handleFilterOption, onInputChange: handleInputChange, onChange: handleChange, onMenuClose: handleMenuClose, onMenuOpen: onMenuOpen, onKeyDown: handleKeyDown, onBlur: handleBlur, autoFocus: autoFocus, onFocus: handleFocus, components: {
-                            Input: Input,
+    }, [clearUserTypingTimeout, requestInputChangeDebounce]);
+    useEffect(function () {
+        if (isChipsCollapsable && !isInputFocused.current && isNeedCheckChipCollapsableCount.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, 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,
+        isMenuShadowless,
+        isNextPageLoading,
+        isShowCatalogSearchButton,
+        isUserTyping,
+        language,
+        menuListMaxHeight,
+        onLoadNextPage,
+        onShowCatalogSearchButtonClick,
+        platform,
+    ]);
+    var NoOptionsButton = function (props) { return (_jsx(components.NoOptionsMessage, __assign({}, props, { 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(isShowCatalogSearchButton ? 0 : left);
+    };
+    return (_jsxs("div", __assign({ id: userDropdownId, className: classNames('smartapp-user-dropdown', containerClassName), 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 }), _jsx(Select, { ref: selectRef, menuIsOpen: isInputHidden ? !!externalInputValue : undefined, menuPortalTarget: menuPortalTarget === null || menuPortalTarget === void 0 ? void 0 : menuPortalTarget.current, isMulti: true, openMenuOnFocus: true, hideSelectedOptions: isSelectedOptionsHidden, blurInputOnSelect: false, captureMenuScroll: false, isSearchable: isSearchable, 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: onMenuOpen, onKeyDown: handleKeyDown, onBlur: handleSelectBlur, autoFocus: autoFocus, onFocus: handleSelectFocus, instanceId: userDropdownId, components: {
+                            Input: InputComponent,
                             MultiValueLabel: MultiValueLabelComponent,
                             MultiValueRemove: MultiValueRemove,
                             Option: OptionComponent,
@@ -543,7 +518,7 @@ var UserDropdown = function (_a) {
                             LoadingIndicator: LoadingIndicator,
                             MenuList: MenuListComponent,
                             NoOptionsMessage: NoOptionsButton,
-                        } })] })), 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: isMobilePlatform(platform), backgroundColor: "var(--color-bg-blackout-transparent)", handleCloseModal: handleCloseModal })] })));
 };
-export default UserDropdown;
+export default memo(UserDropdown);
 //# sourceMappingURL=UserDropdown.js.map