@expressms/smartapp-ui 3.0.0-alpha.8 → 3.0.0-alpha.81

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

@@ -20,12 +20,14 @@ 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 { 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,18 +36,34 @@ 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 { 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, ENTER_KEY, EVENT_LISTENER_TYPES, LANGUAGES, LAYOUT_TYPE, MASK_INPUT_PL, MENU_POSITIONS, PLATFORM, SPACE, SPACE_KEY, } from '../../constants';
+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 '../../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 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";
@@ -80,54 +98,86 @@ var EXCLUDED_FIELDS;
     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 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 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 = _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 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 selectedUsersLength = selectedUsers.length;
+    var _17 = useDroppable({ id: userDropdownId }), setNodeRef = _17.setNodeRef, over = _17.over;
+    var overId = (over || {}).id;
+    var isDraggable = overId === userDropdownId;
+    // 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);
     };
-    var checkIsEmailToExclude = function (email) { return includes(emailsToExclude, email); };
+    // 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 generateStyles = function () {
         return selectStyles({
             isChipsVisible: isChipsVisible,
             isMaxMembersAdded: maxMembersCount && isChipsVisible ? selectedUsersLength === maxMembersCount : false,
             isDisabled: isDisabled,
-            isError: isError,
             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,
             fontFamilyStyle: fontFamilyStyle,
             containerPadding: containerPadding,
+            isDraggable: isDraggable,
+            isChipsCollapsed: isChipsCollapsable && !isInputFocused.current,
+            menuListMaxHeight: menuListMaxHeight,
         });
     };
     var generateNoOptionsMessage = function (_a) {
@@ -159,7 +209,7 @@ var UserDropdown = function (_a) {
                 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 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) {
@@ -172,22 +222,28 @@ var UserDropdown = function (_a) {
         });
         return __spreadArray(__spreadArray([], generateCorporateOptionsToSelect(__assign({ options: filteredCorporateContacts }, commonFields)), true), generateContactsOptionsToSelect(__assign({ options: filteredMyContacts }, commonFields)), true);
     };
+    var clearUserTypingTimeout = useCallback(function () {
+        var userTypingTimeoutRefCurrent = userTypingTimeoutRef.current;
+        if (userTypingTimeoutRefCurrent) {
+            clearTimeout(userTypingTimeoutRefCurrent);
+            userTypingTimeoutRef.current = null;
+        }
+    }, []);
     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;
@@ -198,25 +254,27 @@ var UserDropdown = function (_a) {
                     var email = _a.email;
                     return email === trimPrevInputValue_1;
                 });
-                setInputValue(isUserAlreadySelected || checkIsEmailToExclude(trimPrevInputValue_1) ? trimPrevInputValue_1 : inputValue);
+                setInputValue(isUserAlreadySelected || checkIsEmailToExclude(trimPrevInputValue_1) ? trimPrevInputValue_1 : prevInputValue);
             }
         }
-        setIsUserTyping(!isEmpty(inputValue));
-        handleResetError();
-        inputValue.length >= MIN_INPUT_SYMBOLS ? requestInputChangeDebounce(inputValue) : resetIsUserTypingDebounce();
-    };
+        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 (needToShowError) {
-        if (needToShowError === void 0) { needToShowError = true; }
+    var handleAddUser = function () {
         var props = selectRef.current.props;
-        var options = props.options, inputValue = props.inputValue, onChange = props.onChange;
+        var options = props.options, onChange = props.onChange;
         if (isEmpty(inputValue))
-            return;
+            return Promise.resolve();
         var trimInputValue = inputValue.trim();
         var optionProps = {
             platform: platform,
@@ -248,10 +306,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 +323,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,25 +349,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 uniqNewSelectedUsers = isDisabledCheckUniqueEmails ? newSelectedUsers : uniqBy(newSelectedUsers, EMAIL_FIELD);
         var users = [];
         var deletedUser = selectedUsers.find(function (_a) {
             var value = _a.value;
@@ -365,7 +427,7 @@ var UserDropdown = function (_a) {
     var handleCollapseChips = function () {
         var _a, _b;
         var collapsableChips = 0;
-        var chipLabelWithMaxWidth = '';
+        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);
         if (isEmpty(chips))
@@ -385,7 +447,7 @@ var UserDropdown = function (_a) {
         });
         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;
+        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;
@@ -396,15 +458,18 @@ var UserDropdown = function (_a) {
                 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) || '';
+                    chipLabelWithMaxWidth = ((_a = chip.querySelector('.smartapp-chip__info--name')) === null || _a === void 0 ? void 0 : _a.innerHTML) || EMPTY_STRING;
                 }
             }
         });
+        var visibleChipsCurrentCount = chips.length - collapsableChips;
+        isNeedCheckChipCollapsableCount.current = true;
+        visibleChipsCount.current = visibleChipsCurrentCount;
         collapsableChipsCount.current = collapsableChips;
-        lastVisibleChipIndex.current = chips.length - collapsableChips;
+        lastVisibleChipIndex.current = visibleChipsCurrentCount;
         setChipLabelWithMaxWidth(chipLabelWithMaxWidth || generateId());
     };
-    var handleUnCollapseChips = function () {
+    var handleUnCollapseChips = useCallback(function () {
         var _a;
         if (!userDropdownId)
             return;
@@ -412,16 +477,29 @@ var UserDropdown = function (_a) {
         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) || '';
+            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%');
         });
+        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 +509,34 @@ 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(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);
+        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(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();
-    };
+    }, [language, isChipsCollapsable, handleUnCollapseChips, platform, focusInputIOS]);
+    var handleForceFocus = useCallback(function () { return setTimeout(function () { return handleFocus(true); }, RENDER_DELAY); }, [handleFocus]);
     var handleCloseModal = function () {
         setModalData(null);
         setIsSearchable(true);
@@ -472,14 +565,16 @@ var UserDropdown = function (_a) {
         !userDropdownId && setUserDropdownId("user_dropdown_".concat(generateId().replace(/-/g, '_')));
     }, [userDropdownId]);
     useLayoutEffect(function () {
-        if (userDropdownId) {
-            isChipsCollapsable ? handleCollapseChips() : handleUnCollapseChips();
-        }
+        if (userDropdownId)
+            setTimeout(function () { return (isChipsCollapsable ? handleCollapseChips() : handleUnCollapseChips()); }, RENDER_DELAY);
         // eslint-disable-next-line
     }, [isChipsCollapsable, userDropdownId]);
     useEffect(function () {
         setPaddingLeft(calculatePaddingLeft());
     }, [mask]);
+    useEffect(function () {
+        setPaddingRight(calculatePaddingRight());
+    }, [suffix]);
     useEffect(function () {
         setSelectedUsers(function (prevSelectedUsers) {
             return prevSelectedUsers.map(function (selectedUser) { return (__assign(__assign({}, selectedUser), { layoutType: layoutType, fontFamily: fontFamily, language: language, isChipsCollapsable: isChipsCollapsable })); });
@@ -488,7 +583,12 @@ var UserDropdown = function (_a) {
     useEffect(function () {
         if (!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 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,
@@ -500,9 +600,10 @@ var UserDropdown = function (_a) {
                     isSelectedChipHasTooltip: isSelectedChipHasTooltip,
                     isLoading: isLoading,
                     isWarning: isWarning,
-                    isOrganizer: isOrganizer,
+                    isOrganizerShort: isOrganizerShort,
                     userType: userType,
                     uid: uid,
+                    organizerName: organizerName,
                     isInputFocused: isInputFocused,
                     selectRef: selectRef,
                     collapsableChipsCount: collapsableChipsCount,
@@ -514,6 +615,8 @@ var UserDropdown = function (_a) {
                 return 'contacts' in entity ? generateCorporateOption(__assign({ option: entity }, commonFields)) : generatedNotCorporateEntity;
             }));
         }
+        else
+            setSelectedUsers([]);
         // eslint-disable-next-line
     }, [selectedEntries]);
     useEffect(function () {
@@ -526,15 +629,37 @@ 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]);
+    }, [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, 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 }))); }, [
+        hasNextPage,
+        isCharHintVisible,
+        isLoading,
+        isMenuShadowless,
+        isNextPageLoading,
+        isShowCatalogSearchButton,
+        isUserTyping,
+        language,
+        menuListMaxHeight,
+        onLoadNextPage,
+        onShowCatalogSearchButtonClick,
+    ]);
     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,
+    var InputComponent = useCallback(function (props) { return _jsx(Input, __assign({}, props, { "data-is-clearable": !isChipsVisible, suffixref: suffixRef, suffix: suffix })); }, [isChipsVisible, 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);
+    };
+    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: {
+                            Input: InputComponent,
                             MultiValueLabel: MultiValueLabelComponent,
                             MultiValueRemove: MultiValueRemove,
                             Option: OptionComponent,
@@ -543,7 +668,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 })] })));
+                        } }), 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 })] })));
 };
-export default UserDropdown;
+export default memo(UserDropdown);
 //# sourceMappingURL=UserDropdown.js.map