@gooddata/sdk-ui-dashboard 10.37.0 → 10.38.0-alpha.2

package/esm/presentation/scheduledEmail/DefaultScheduledEmailDialog/components/RecipientsSelect/RecipientsSelectRenderer.js

@@ -1,7 +1,7 @@
 // (C) 2019-2025 GoodData Corporation
 /* eslint-disable import/named,import/namespace */
 import { isAutomationUserRecipient, } from "@gooddata/sdk-model";
-import React from "react";
+import React, { memo, useRef, useState, useEffect, useCallback, useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import ReactSelect, { components as ReactSelectComponents, } from "react-select";
 import debounce from "lodash/debounce.js";
@@ -31,39 +31,45 @@ const TOOLTIP_ALIGN_POINTS = [
         offset: { x: 0, y: -2 },
     },
 ];
-export class RecipientsSelectRenderer extends React.PureComponent {
-    recipientRef = React.createRef();
-    constructor(props) {
-        super(props);
-        this.state = {
-            menuOpen: false,
-            minRecipientsError: false,
-            focusedRecipientIndex: -1,
-        };
-    }
-    componentDidMount() {
-        const { current } = this.recipientRef;
+export const RecipientsSelectRenderer = memo(function RecipientsSelectRenderer(props) {
+    const { isMulti, options, value, maxRecipients, className, usersError, allowOnlyLoggedUserRecipients, id, externalRecipientOverride, allowExternalRecipients, loggedUser, notificationChannel, showLabel, onChange, onLoad, isLoading, canListUsersInProject, allowEmptySelection, onKeyDownSubmit, } = props;
+    const [state, setState] = useState({
+        menuOpen: false,
+        minRecipientsError: false,
+        focusedRecipientIndex: -1,
+    });
+    const recipientRef = useRef(null);
+    const intl = useIntl();
+    const keyboardRecipientNavigationHandler = makeKeyboardNavigation({
+        onFocusPrevious: [{ code: ["ArrowLeft"] }],
+        onFocusNext: [{ code: ["ArrowRight"] }],
+        onSubmit: [{ code: ["Enter"] }],
+        onRecipientRemove: [{ code: ["Delete", "Backspace", "Enter"] }],
+    });
+    useEffect(() => {
+        const { current } = recipientRef;
         if (!current) {
             return;
         }
         // update owner component style after recipient rendered
         const ownerContainer = current.querySelector(".gd-owner-user");
-        const style = this.getStyle();
+        const style = getStyle();
         if (ownerContainer && style) {
             ownerContainer.setAttribute("style", `max-width: ${style.maxWidth}px`);
         }
-    }
-    keyboardRecipientNavigationHandler = makeKeyboardNavigation({
-        onFocusPrevious: [{ code: ["ArrowLeft"] }],
-        onFocusNext: [{ code: ["ArrowRight"] }],
-        onSubmit: [{ code: ["Enter"] }],
-        onRecipientRemove: [{ code: ["Delete", "Backspace", "Enter"] }],
     });
-    evaluateErrors() {
-        const { value, maxRecipients, allowExternalRecipients, allowOnlyLoggedUserRecipients, loggedUser } = this.props;
+    const isEmailChannel = useCallback(() => {
+        return notificationChannel?.destinationType === "smtp";
+    }, [notificationChannel]);
+    const getHasEmail = useCallback((recipient) => {
+        return isEmailChannel() && isAutomationUserRecipient(recipient)
+            ? isEmail(recipient.email ?? "")
+            : true;
+    }, [isEmailChannel]);
+    const evaluateErrors = useCallback(() => {
         const maxRecipientsError = maxRecipients !== undefined && value.length > maxRecipients;
-        const minRecipientsError = this.state.minRecipientsError;
-        const someRecipientsMissingEmail = this.isEmailChannel()
+        const minRecipientsError = state.minRecipientsError;
+        const someRecipientsMissingEmail = isEmailChannel()
             ? value.some((v) => (isAutomationUserRecipient(v) ? !isEmail(v.email ?? "") : false))
             : false;
         const invalidExternalRecipients = value.filter((v) => v.type === "externalUser");
@@ -75,7 +81,7 @@ export class RecipientsSelectRenderer extends React.PureComponent {
             .join(", ");
         const authorOnlyError = allowOnlyLoggedUserRecipients &&
             ((value.length === 1 && value[0].id !== loggedUser?.id) || value.length > 1);
-        const missingEmailRecipients = value.filter((v) => this.getHasEmail(v) === false);
+        const missingEmailRecipients = value.filter((v) => !getHasEmail(v));
         const missingEmailRecipientsValues = missingEmailRecipients.map((v) => v.name ?? v.id).join(", ");
         const missingEmailError = !!missingEmailRecipients.length;
         return {
@@ -89,58 +95,17 @@ export class RecipientsSelectRenderer extends React.PureComponent {
             missingEmailRecipientsValues,
             someRecipientsMissingEmail,
         };
-    }
-    render() {
-        const { isMulti, options, value, maxRecipients, className, usersError, allowOnlyLoggedUserRecipients, id, externalRecipientOverride, } = this.props;
-        const creatableSelectComponent = {
-            ...ReactSelectComponents,
-            IndicatorsContainer: this.renderEmptyContainer,
-            Input: this.renderInputContainer,
-            MultiValueContainer: this.renderMultiValueContainer,
-            Menu: this.renderMenuOptions,
-            MenuList: this.renderMenuList,
-            Placeholder: this.renderEmptyContainer,
-            NoOptionsMessage: this.renderNoOptionsContainer,
-            MultiValueRemove: this.renderMultiValueRemove,
-        };
-        const { maxRecipientsError, minRecipientsError, invalidExternalError, invalidUnknownError, someRecipientsMissingEmail, authorOnlyError, missingEmailError, invalidRecipientsValues, missingEmailRecipientsValues, } = this.evaluateErrors();
-        const showInputError = maxRecipientsError ||
-            minRecipientsError ||
-            invalidExternalError ||
-            invalidUnknownError ||
-            someRecipientsMissingEmail ||
-            !!usersError ||
-            authorOnlyError ||
-            missingEmailError;
-        const someExternalRecipients = value.some((v) => v.type === "externalUser");
-        const renderExternalRecipientsNote = someExternalRecipients && !externalRecipientOverride;
-        return (React.createElement("div", { className: cx("gd-input-component gd-recipients-field s-gd-notifications-channels-dialog-recipients", className) },
-            this.props.showLabel ? (React.createElement("label", { htmlFor: id, className: "gd-label" },
-                React.createElement(FormattedMessage, { id: "dialogs.schedule.email.recipients.label" }))) : null,
-            React.createElement("div", { ref: this.recipientRef, className: "gd-input s-gd-recipients-value" },
-                React.createElement(ReactSelect, { tabSelectsValue: false, id: id, className: cx("gd-recipients-container", {
-                        "gd-input-component--invalid": showInputError,
-                    }), classNamePrefix: "gd-recipients", components: creatableSelectComponent, formatOptionLabel: this.renderOptionLabel, filterOption: (opt, value) => {
-                        return matchRecipient(opt.data, value);
-                    }, isClearable: false, isDisabled: !isMulti, isMulti: isMulti, onChange: 
-                    // using as any as it would be too tricky to type properly
-                    this.handleOnChange, onInputChange: this.onSearch, onMenuOpen: this.onMenuOpen, onMenuClose: () => this.setState({ menuOpen: false }), onKeyDown: this.handleKeyDown, options: options, onBlur: this.onBlur, value: value, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name ?? o.id, "aria-describedby": showInputError ? "gd-recipients-field-error" : undefined, "aria-invalid": showInputError }),
-                showInputError ? (this.renderInputError({
-                    authorOnlyError,
-                    invalidExternalError,
-                    invalidUnknownError,
-                    maxRecipientsError,
-                    minRecipientsError,
-                    missingEmailError,
-                    invalidRecipientsValues,
-                    missingEmailRecipientsValues,
-                    maxRecipients,
-                    usersError,
-                })) : renderExternalRecipientsNote ? (React.createElement("div", { className: "gd-recipients-field-note" },
-                    React.createElement(FormattedMessage, { id: "dialogs.schedule.email.recipients.note" }))) : allowOnlyLoggedUserRecipients ? (React.createElement("div", { className: "gd-recipients-field-note" },
-                    React.createElement(FormattedMessage, { id: "dialogs.schedule.email.destinationWarning" }))) : null)));
-    }
-    renderInputError = ({ authorOnlyError, invalidExternalError, invalidUnknownError, maxRecipientsError, minRecipientsError, missingEmailError, invalidRecipientsValues, missingEmailRecipientsValues, maxRecipients, usersError, }) => {
+    }, [
+        maxRecipients,
+        value,
+        state.minRecipientsError,
+        isEmailChannel,
+        allowExternalRecipients,
+        allowOnlyLoggedUserRecipients,
+        loggedUser?.id,
+        getHasEmail,
+    ]);
+    const renderInputError = useCallback(({ authorOnlyError, invalidExternalError, invalidUnknownError, maxRecipientsError, minRecipientsError, missingEmailError, invalidRecipientsValues, missingEmailRecipientsValues, maxRecipients, usersError, }) => {
         return (React.createElement("div", { id: "gd-recipients-field-error", className: "gd-recipients-field-error" },
             authorOnlyError ? (React.createElement("div", { className: "gd-recipients-field-error-item" },
                 React.createElement(FormattedMessage, { id: "dialogs.schedule.email.user.invalid.onlyYou" }))) : null,
@@ -154,31 +119,26 @@ export class RecipientsSelectRenderer extends React.PureComponent {
                 React.createElement(FormattedMessage, { id: "dialogs.schedule.email.user.missing.email", values: { recipients: missingEmailRecipientsValues } }))) : null,
             usersError ? (React.createElement("div", { className: "gd-recipients-field-error-item" },
                 React.createElement(FormattedMessage, { id: "dialogs.schedule.email.usersLoad.error" }))) : null));
-    };
-    renderEmptyContainer = () => {
+    }, []);
+    const renderEmptyContainer = useCallback(() => {
         return null;
-    };
-    getStyle() {
-        const { current } = this.recipientRef;
+    }, []);
+    const getStyle = useCallback(() => {
+        const { current } = recipientRef;
         const { width } = (!isEmpty(current) && current.getBoundingClientRect()) || { width: undefined };
         return {
             maxWidth: width ? width - PADDING : "100%",
             width,
         };
-    }
-    isEmailChannel() {
-        const { notificationChannel } = this.props;
-        return notificationChannel?.destinationType === "smtp";
-    }
-    renderNoOptionsContainer = () => {
-        if (this.props.externalRecipientOverride) {
+    }, []);
+    const renderNoOptionsContainer = useCallback(() => {
+        if (externalRecipientOverride) {
             return null;
         }
         return (React.createElement("div", { className: "gd-recipients-no-match" },
             React.createElement(FormattedMessage, { id: "dialogs.schedule.email.user.noMatch" })));
-    };
-    renderMultiValueRemove = (props) => {
-        const intl = useIntl();
+    }, [externalRecipientOverride]);
+    const renderMultiValueRemove = useCallback((props) => {
         const modifiedProps = {
             ...props,
             innerProps: {
@@ -187,43 +147,42 @@ export class RecipientsSelectRenderer extends React.PureComponent {
             },
         };
         return React.createElement(MultiValueRemove, { ...modifiedProps });
-    };
-    renderMenuOptions = (menuProps) => {
-        const { isLoading } = this.props;
+    }, [intl]);
+    const renderLoadingIcon = useCallback((menuProps) => {
+        return (React.createElement(OverlayControllerProvider, { overlayController: overlayController },
+            React.createElement(Menu, { className: "s-gd-recipients-menu-container", ...menuProps },
+                React.createElement(LoadingMask, { height: LOADING_MENU_HEIGHT }))));
+    }, []);
+    const renderMenuOptionsContainer = useCallback((menuProps) => {
+        const style = getStyle();
+        return (React.createElement(OverlayControllerProvider, { overlayController: overlayController },
+            React.createElement(Overlay, { alignTo: ".gd-recipients-container", alignPoints: [{ align: "bc tc" }] },
+                React.createElement("div", { className: "gd-recipients-overlay", style: { width: style.width } },
+                    React.createElement(Menu, { className: "s-gd-recipients-menu-container", ...menuProps }, menuProps.children)))));
+    }, [getStyle]);
+    const renderMenuOptions = useCallback((menuProps) => {
         const { getValue, selectProps: { inputValue }, } = menuProps;
         const selectedValues = getValue() || [];
         const selectedItemsCount = selectedValues.length;
         const areAllValuesSelected = false;
         if (isLoading) {
-            return this.renderLoadingIcon(menuProps);
+            return renderLoadingIcon(menuProps);
         }
         if (!inputValue && (selectedItemsCount >= MAXIMUM_RECIPIENTS_RECEIVE || areAllValuesSelected)) {
-            return this.renderEmptyContainer();
+            return renderEmptyContainer();
         }
-        return this.renderMenuOptionsContainer(menuProps);
-    };
-    renderMenuList = (menuListProps) => {
+        return renderMenuOptionsContainer(menuProps);
+    }, [isLoading, renderEmptyContainer, renderLoadingIcon, renderMenuOptionsContainer]);
+    const renderMenuList = useCallback((menuListProps) => {
         const modifiedInnerProps = {
             ...menuListProps.innerProps,
             id: MENU_LIST_ID,
         };
         return React.createElement(MenuList, { ...menuListProps, innerProps: modifiedInnerProps });
-    };
-    renderMenuOptionsContainer = (menuProps) => {
-        const style = this.getStyle();
-        return (React.createElement(OverlayControllerProvider, { overlayController: overlayController },
-            React.createElement(Overlay, { alignTo: ".gd-recipients-container", alignPoints: [{ align: "bc tc" }] },
-                React.createElement("div", { className: "gd-recipients-overlay", style: { width: style.width } },
-                    React.createElement(Menu, { className: "s-gd-recipients-menu-container", ...menuProps }, menuProps.children)))));
-    };
-    renderLoadingIcon = (menuProps) => {
-        return (React.createElement(OverlayControllerProvider, { overlayController: overlayController },
-            React.createElement(Menu, { className: "s-gd-recipients-menu-container", ...menuProps },
-                React.createElement(LoadingMask, { height: LOADING_MENU_HEIGHT }))));
-    };
-    renderMultiValueItemContainer = (label, removeIcon, recipientIndex, options = {}) => {
-        const style = this.getStyle();
-        const { focusedRecipientIndex } = this.state;
+    }, []);
+    const renderMultiValueItemContainer = useCallback((label, removeIcon, recipientIndex, options = {}) => {
+        const style = getStyle();
+        const { focusedRecipientIndex } = state;
         const render = () => {
             const showErrorIcon = options.noExternal ||
                 options.invalidExternal ||
@@ -279,25 +238,19 @@ export class RecipientsSelectRenderer extends React.PureComponent {
                 React.createElement(Bubble, { className: "bubble-primary", alignPoints: TOOLTIP_ALIGN_POINTS }, options.email)));
         }
         return render();
-    };
-    getHasEmail = (recipient) => {
-        return this.isEmailChannel() && isAutomationUserRecipient(recipient)
-            ? isEmail(recipient.email ?? "")
-            : true;
-    };
-    renderMultiValueContainer = (multiValueProps) => {
-        const { allowExternalRecipients, allowOnlyLoggedUserRecipients, loggedUser, value } = this.props;
+    }, [getStyle, state]);
+    const renderMultiValueContainer = useCallback((multiValueProps) => {
         const { data, children } = multiValueProps;
         // MultiValueRemove component from react-select
         const removeIcon = children[1];
         const name = data.name ?? data.id;
-        const hasEmail = this.getHasEmail(data);
+        const hasEmail = getHasEmail(data);
         const noExternal = data.type === "externalUser" && !allowExternalRecipients;
         const invalidExternal = data.type === "unknownUser";
         const invalidLoggedUser = allowOnlyLoggedUserRecipients ? data.id !== loggedUser?.id : false;
         // Find the index of this recipient in the value array
         const recipientIndex = value.findIndex((recipient) => recipient.id === data.id);
-        return this.renderMultiValueItemContainer(name, removeIcon, recipientIndex, {
+        return renderMultiValueItemContainer(name, removeIcon, recipientIndex, {
             hasEmail,
             noExternal,
             invalidLoggedUser,
@@ -305,18 +258,31 @@ export class RecipientsSelectRenderer extends React.PureComponent {
             type: data.type,
             email: data.email,
         });
-    };
-    renderOptionLabel = (recipient) => {
-        const { allowExternalRecipients, externalRecipientOverride } = this.props;
+    }, [
+        allowExternalRecipients,
+        allowOnlyLoggedUserRecipients,
+        loggedUser,
+        value,
+        getHasEmail,
+        renderMultiValueItemContainer,
+    ]);
+    const renderRecipientValue = useCallback((recipient) => {
+        const email = isAutomationUserRecipient(recipient) ? (recipient.email ?? "") : "";
+        if (isEmail(email)) {
+            return (React.createElement("span", { className: "gd-recipient-option-value-item s-gd-recipient-option-value-item" }, email));
+        }
+        return renderEmptyContainer();
+    }, [renderEmptyContainer]);
+    const renderOptionLabel = useCallback((recipient) => {
         const displayName = recipient.name ?? recipient.id;
         const email = isAutomationUserRecipient(recipient) ? (recipient.email ?? "") : "";
-        const value = this.renderRecipientValue(recipient);
+        const renderValue = renderRecipientValue(recipient);
         return (React.createElement(BubbleHoverTrigger, null,
             React.createElement("div", { className: "gd-recipient-option-item s-gd-recipient-option-item" },
                 React.createElement("span", { className: "gd-recipient-option-label-item s-gd-recipient-option-label-item" }, displayName),
                 allowExternalRecipients && recipient.type === "externalUser" ? (React.createElement("span", { className: "gd-recipient-quest" },
                     "\u00A0",
-                    React.createElement(FormattedMessage, { id: "dialogs.schedule.email.user.guest" }))) : (value),
+                    React.createElement(FormattedMessage, { id: "dialogs.schedule.email.user.guest" }))) : (renderValue),
                 !externalRecipientOverride &&
                     allowExternalRecipients &&
                     recipient.type === "externalUser" ? (React.createElement("div", { className: "gd-recipient-option-label-external-warning" },
@@ -326,114 +292,52 @@ export class RecipientsSelectRenderer extends React.PureComponent {
                 displayName,
                 " ",
                 isEmail(email) ? `(${email})` : "")));
-    };
-    renderRecipientValue = (recipient) => {
-        const email = isAutomationUserRecipient(recipient) ? (recipient.email ?? "") : "";
-        if (isEmail(email)) {
-            return (React.createElement("span", { className: "gd-recipient-option-value-item s-gd-recipient-option-value-item" }, email));
-        }
-        return this.renderEmptyContainer();
-    };
-    renderInputContainer = (inputProps) => {
-        const { isMulti } = this.props;
+    }, [allowExternalRecipients, externalRecipientOverride, renderRecipientValue]);
+    const renderInputContainer = useCallback((inputProps) => {
         if (!isMulti) {
-            return this.renderEmptyContainer();
+            return renderEmptyContainer();
         }
         const props = {
             ...inputProps,
-            id: this.props.id,
+            id: id,
             "aria-controls": MENU_LIST_ID,
         };
         return (React.createElement("div", { className: "gd-recipient-input s-gd-recipient-input" },
             React.createElement(Input, { ...props })));
-    };
-    handleKeyDown = (e) => {
-        const { menuOpen } = this.state;
-        if (isEscapeKey(e)) {
-            e.stopPropagation();
-        }
-        if (!menuOpen) {
-            this.handleKeyboardNavigation(e);
-        }
-    };
-    handleOnChange = (selectedValues, actionTypes) => {
-        const newSelectedValues = selectedValues;
-        const { value, allowEmptySelection } = this.props;
-        const { action } = actionTypes;
-        if (value.length >= MAXIMUM_RECIPIENTS_RECEIVE &&
-            (action === CREATE_OPTION || action === SELECT_OPTION)) {
-            this.props.onChange?.(value);
-            return;
-        }
-        if (newSelectedValues?.length === 0) {
-            if (allowEmptySelection) {
-                this.props.onChange?.([]);
-                //this.setState({ minRecipientsError: true });
-            }
-            else {
-                this.props.onChange?.([value[0]]);
-            }
-            return;
-        }
-        else {
-            this.setState({ minRecipientsError: false });
-        }
-        this.props.onChange?.(newSelectedValues);
-    };
-    onBlur = () => {
-        const { value, allowEmptySelection } = this.props;
-        if (allowEmptySelection && value.length === 0) {
-            this.setState({ minRecipientsError: true });
-        }
-    };
-    loadUserListItems = (searchString) => {
-        const { value, canListUsersInProject, onLoad } = this.props;
-        const isRecipientAdded = this.isRecipientAdded(value, searchString);
-        if (!canListUsersInProject || isRecipientAdded) {
+    }, [isMulti, id, renderEmptyContainer]);
+    const handleKeyboardRecipientRemove = useCallback((index) => {
+        if (index < 0 || index >= value.length) {
             return;
         }
-        onLoad?.({ search: searchString });
-    };
-    onMenuOpen = () => {
-        const { onLoad, canListUsersInProject, options } = this.props;
-        const userListCount = options.length;
-        this.setState({ menuOpen: true, focusedRecipientIndex: -1 });
-        if (!userListCount && canListUsersInProject) {
-            onLoad?.();
-        }
-    };
-    onSearchCore = (searchString) => {
-        this.loadUserListItems(searchString);
-    };
-    onSearch = debounce(this.onSearchCore, DELAY_TIME);
-    isRecipientAdded = (value, searchKey) => {
-        return value.some((recipient) => isEqual(recipient.id, searchKey));
-    };
-    handleKeyboardNavigation = (e) => {
-        const { focusedRecipientIndex } = this.state;
-        const { value, onKeyDownSubmit, onChange } = this.props;
+        const newValues = value.filter((_, i) => i !== index);
+        onChange?.(newValues);
+        const newFocusIndex = newValues.length === 0 ? -1 : Math.min(index, newValues.length - 1);
+        setState((prev) => ({ ...prev, focusedRecipientIndex: newFocusIndex }));
+    }, [value, onChange]);
+    const handleKeyboardNavigation = useCallback((e) => {
+        const { focusedRecipientIndex } = state;
         const totalRecipients = value.length;
-        const keyboardHandler = this.keyboardRecipientNavigationHandler({
+        const keyboardHandler = keyboardRecipientNavigationHandler({
             onFocusPrevious: () => {
                 if (focusedRecipientIndex === -1 && totalRecipients > 0) {
                     const lastIndex = totalRecipients - 1;
-                    this.setState({ focusedRecipientIndex: lastIndex });
+                    setState((prev) => ({ ...prev, focusedRecipientIndex: lastIndex }));
                 }
                 else if (focusedRecipientIndex > 0) {
                     const prevIndex = focusedRecipientIndex - 1;
-                    this.setState({ focusedRecipientIndex: prevIndex });
+                    setState((prev) => ({ ...prev, focusedRecipientIndex: prevIndex }));
                 }
                 else {
-                    this.setState({ focusedRecipientIndex: -1 });
+                    setState((prev) => ({ ...prev, focusedRecipientIndex: -1 }));
                 }
             },
             onFocusNext: () => {
                 if (focusedRecipientIndex < totalRecipients - 1) {
                     const nextIndex = focusedRecipientIndex + 1;
-                    this.setState({ focusedRecipientIndex: nextIndex });
+                    setState((prev) => ({ ...prev, focusedRecipientIndex: nextIndex }));
                 }
                 else if (focusedRecipientIndex === totalRecipients - 1) {
-                    this.setState({ focusedRecipientIndex: -1 });
+                    setState((prev) => ({ ...prev, focusedRecipientIndex: -1 }));
                 }
             },
             onSubmit: () => {
@@ -441,7 +345,7 @@ export class RecipientsSelectRenderer extends React.PureComponent {
                     onKeyDownSubmit?.(e);
                 }
                 else {
-                    this.handleKeyboardRecipientRemove(focusedRecipientIndex);
+                    handleKeyboardRecipientRemove(focusedRecipientIndex);
                 }
             },
             onRecipientRemove: () => {
@@ -450,24 +354,127 @@ export class RecipientsSelectRenderer extends React.PureComponent {
                     onChange?.(newValues);
                 }
                 if (focusedRecipientIndex !== -1) {
-                    this.handleKeyboardRecipientRemove(focusedRecipientIndex);
+                    handleKeyboardRecipientRemove(focusedRecipientIndex);
                 }
             },
             onUnhandledKeyDown: () => {
-                this.setState({ focusedRecipientIndex: -1 });
+                setState((prev) => ({ ...prev, focusedRecipientIndex: -1 }));
             },
         });
         keyboardHandler(e);
-    };
-    handleKeyboardRecipientRemove = (index) => {
-        const { value, onChange } = this.props;
-        if (index < 0 || index >= value.length) {
+    }, [
+        state,
+        value,
+        keyboardRecipientNavigationHandler,
+        onKeyDownSubmit,
+        handleKeyboardRecipientRemove,
+        onChange,
+    ]);
+    const handleKeyDown = useCallback((e) => {
+        const { menuOpen } = state;
+        if (isEscapeKey(e)) {
+            e.stopPropagation();
+        }
+        if (!menuOpen) {
+            handleKeyboardNavigation(e);
+        }
+    }, [handleKeyboardNavigation, state]);
+    const handleOnChange = useCallback((selectedValues, actionTypes) => {
+        const newSelectedValues = selectedValues;
+        const { action } = actionTypes;
+        if (value.length >= MAXIMUM_RECIPIENTS_RECEIVE &&
+            (action === CREATE_OPTION || action === SELECT_OPTION)) {
+            onChange?.(value);
             return;
         }
-        const newValues = value.filter((_, i) => i !== index);
-        onChange?.(newValues);
-        const newFocusIndex = newValues.length === 0 ? -1 : Math.min(index, newValues.length - 1);
-        this.setState({ focusedRecipientIndex: newFocusIndex });
+        if (newSelectedValues?.length === 0) {
+            if (allowEmptySelection) {
+                onChange?.([]);
+            }
+            else {
+                onChange?.([value[0]]);
+            }
+            return;
+        }
+        else {
+            setState((prev) => ({ ...prev, minRecipientsError: false }));
+        }
+        onChange?.(newSelectedValues);
+    }, [value, allowEmptySelection, onChange]);
+    const onBlur = useCallback(() => {
+        if (allowEmptySelection && value.length === 0) {
+            setState((prev) => ({ ...prev, minRecipientsError: true }));
+        }
+    }, [allowEmptySelection, value.length]);
+    const isRecipientAddedFn = useCallback((value, searchKey) => {
+        return value.some((recipient) => isEqual(recipient.id, searchKey));
+    }, []);
+    const loadUserListItems = useCallback((searchString) => {
+        const isRecipientAdded = isRecipientAddedFn(value, searchString);
+        if (!canListUsersInProject || isRecipientAdded) {
+            return;
+        }
+        onLoad?.({ search: searchString });
+    }, [isRecipientAddedFn, value, canListUsersInProject, onLoad]);
+    const onMenuOpen = useCallback(() => {
+        const userListCount = options.length;
+        setState((prev) => ({ ...prev, menuOpen: true, focusedRecipientIndex: -1 }));
+        if (!userListCount && canListUsersInProject) {
+            onLoad?.();
+        }
+    }, [options.length, canListUsersInProject, onLoad]);
+    const onSearchCore = useCallback((searchString) => {
+        loadUserListItems(searchString);
+    }, [loadUserListItems]);
+    const onSearch = useMemo(() => debounce((searchString) => {
+        onSearchCore(searchString);
+    }, DELAY_TIME), [onSearchCore]);
+    const creatableSelectComponent = {
+        ...ReactSelectComponents,
+        IndicatorsContainer: renderEmptyContainer,
+        Input: renderInputContainer,
+        MultiValueContainer: renderMultiValueContainer,
+        Menu: renderMenuOptions,
+        MenuList: renderMenuList,
+        Placeholder: renderEmptyContainer,
+        NoOptionsMessage: renderNoOptionsContainer,
+        MultiValueRemove: renderMultiValueRemove,
     };
-}
+    const { maxRecipientsError, minRecipientsError, invalidExternalError, invalidUnknownError, someRecipientsMissingEmail, authorOnlyError, missingEmailError, invalidRecipientsValues, missingEmailRecipientsValues, } = evaluateErrors();
+    const showInputError = maxRecipientsError ||
+        minRecipientsError ||
+        invalidExternalError ||
+        invalidUnknownError ||
+        someRecipientsMissingEmail ||
+        !!usersError ||
+        authorOnlyError ||
+        missingEmailError;
+    const someExternalRecipients = value.some((v) => v.type === "externalUser");
+    const renderExternalRecipientsNote = someExternalRecipients && !externalRecipientOverride;
+    return (React.createElement("div", { className: cx("gd-input-component gd-recipients-field s-gd-notifications-channels-dialog-recipients", className) },
+        showLabel ? (React.createElement("label", { htmlFor: id, className: "gd-label" },
+            React.createElement(FormattedMessage, { id: "dialogs.schedule.email.recipients.label" }))) : null,
+        React.createElement("div", { ref: recipientRef, className: "gd-input s-gd-recipients-value" },
+            React.createElement(ReactSelect, { tabSelectsValue: false, id: id, className: cx("gd-recipients-container", {
+                    "gd-input-component--invalid": showInputError,
+                }), classNamePrefix: "gd-recipients", components: creatableSelectComponent, formatOptionLabel: renderOptionLabel, filterOption: (opt, value) => {
+                    return matchRecipient(opt.data, value);
+                }, isClearable: false, isDisabled: !isMulti, isMulti: isMulti, onChange: 
+                // using as any as it would be too tricky to type properly
+                handleOnChange, onInputChange: onSearch, onMenuOpen: onMenuOpen, onMenuClose: () => setState((prev) => ({ ...prev, menuOpen: false })), onKeyDown: handleKeyDown, options: options, onBlur: onBlur, value: value, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name ?? o.id, "aria-describedby": showInputError ? "gd-recipients-field-error" : undefined, "aria-invalid": showInputError }),
+            showInputError ? (renderInputError({
+                authorOnlyError,
+                invalidExternalError,
+                invalidUnknownError,
+                maxRecipientsError,
+                minRecipientsError,
+                missingEmailError,
+                invalidRecipientsValues,
+                missingEmailRecipientsValues,
+                maxRecipients,
+                usersError,
+            })) : renderExternalRecipientsNote ? (React.createElement("div", { className: "gd-recipients-field-note" },
+                React.createElement(FormattedMessage, { id: "dialogs.schedule.email.recipients.note" }))) : allowOnlyLoggedUserRecipients ? (React.createElement("div", { className: "gd-recipients-field-note" },
+                React.createElement(FormattedMessage, { id: "dialogs.schedule.email.destinationWarning" }))) : null)));
+});
 //# sourceMappingURL=RecipientsSelectRenderer.js.map