@rh-support/components 2.5.6 → 2.5.7

package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts

@@ -11,6 +11,7 @@ interface IProps extends IDClassNameProps {
     selected: (IContact | ICaseNotificationAddresses)[];
     onChange: (selectedContacts: (IContact | ICaseNotificationAddresses)[]) => void;
     loggedInUserRights: UserAuth;
+    contactSsoUsername: string;
     contactsToExclude?: IContact[];
     name?: string;
     clearButton?: boolean;
@@ -30,6 +31,7 @@ interface IProps extends IDClassNameProps {
 }
 export declare const CONTACTS_PAGE_SIZE = 10;
 export declare const DEFAULT_CONTACTS_OFFSET: number;
+export declare const isCustomEmailAddress: (user: INotificationContact) => user is ICaseNotificationAddresses;
 declare const getHydraContactLabel: (user: INotificationContact) => string;
 declare function CaseContactsSelectorExternal(props: IProps): React.JSX.Element;
 export { CaseContactsSelectorExternal, getHydraContactLabel };

package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseContactsSelectorExternal.d.ts","sourceRoot":"","sources":["../../../src/Functional/CaseContactsSelectorExternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAuB,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAQxD,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AAEzF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,0BAA0B,CAAC;AACzE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,QAAQ,EAAE,CAAC,QAAQ,GAAG,0BAA0B,CAAC,EAAE,CAAC;IACpD,QAAQ,EAAE,CAAC,gBAAgB,EAAE,CAAC,QAAQ,GAAG,0BAA0B,CAAC,EAAE,KAAK,IAAI,CAAC;IAChF,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,KAAK,KAAA,EAAE,GAAG,KAAA,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,6BAA6B,EAAE,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD;AAED,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAU9D,QAAA,MAAM,oBAAoB,SAAU,oBAAoB,KAAG,MAa1D,CAAC;AAEF,iBAAS,4BAA4B,CAAC,KAAK,EAAE,MAAM,qBA2NlD;AAED,OAAO,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"CaseContactsSelectorExternal.d.ts","sourceRoot":"","sources":["../../../src/Functional/CaseContactsSelectorExternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAuB,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAQxD,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AAEzF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,0BAA0B,CAAC;AACzE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,QAAQ,EAAE,CAAC,QAAQ,GAAG,0BAA0B,CAAC,EAAE,CAAC;IACpD,QAAQ,EAAE,CAAC,gBAAgB,EAAE,CAAC,QAAQ,GAAG,0BAA0B,CAAC,EAAE,KAAK,IAAI,CAAC;IAChF,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,KAAK,KAAA,EAAE,GAAG,KAAA,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,6BAA6B,EAAE,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD;AAED,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAE9D,eAAO,MAAM,oBAAoB,SAAU,oBAAoB,KAAG,IAAI,IAAI,0BAEzE,CAAC;AAMF,QAAA,MAAM,oBAAoB,SAAU,oBAAoB,KAAG,MAa1D,CAAC;AAEF,iBAAS,4BAA4B,CAAC,KAAK,EAAE,MAAM,qBA4NlD;AAED,OAAO,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,CAAC"}

package/lib/esm/Functional/CaseContactsSelectorExternal.js

@@ -20,7 +20,7 @@ import { usePrevious } from '../hooks/usePrevious';
 import { OwnerTypeaheadDropdown } from '../OwnerTypeaheadDropdown';
 export const CONTACTS_PAGE_SIZE = 10;
 export const DEFAULT_CONTACTS_OFFSET = CONTACTS_PAGE_SIZE - 1;
-const isCustomEmailAddress = (user) => {
+export const isCustomEmailAddress = (user) => {
     return !!(user === null || user === void 0 ? void 0 : user.emailAddress);
 };
 const isContact = (user) => {
@@ -42,7 +42,7 @@ const getHydraContactLabel = (user) => {
     return label ? label : '';
 };
 function CaseContactsSelectorExternal(props) {
-    const { customEmails, isInvalid, groupContactsAndEmails } = props;
+    const { customEmails, contactSsoUsername, isInvalid, groupContactsAndEmails, selected } = props;
     const previousSelectedAccountNumber = usePrevious(props.selectedAccountNumber);
     const [filteredContacts, setFilteredContacts] = useState([]);
     /**
@@ -184,7 +184,7 @@ function CaseContactsSelectorExternal(props) {
      * Removes contacts based on the hydra
      */
     const onChipRemoved = (option) => {
-        props.onChange(filter(props.selected, (c) => c !== option));
+        props.onChange([option]);
     };
     const canAddNew = (options, query) => {
         if (!props.allowCustomEmailAdd)
@@ -198,7 +198,7 @@ function CaseContactsSelectorExternal(props) {
      */
     useEffect(() => {
         setFilteredContacts(allOptions);
-    }, [contactList.data, customEmails, allOptions]);
-    return (React.createElement(OwnerTypeaheadDropdown, { id: props.id || '', hasClearButton: true, multiple: !!props.multiple, groupContactsAndEmails: groupContactsAndEmails, selected: !isEmpty(props.selected) ? props.selected : [], options: filteredContacts, placeholder: props.placeholder || 'Search by name or username', "data-tracking-id": "external-case-contact-selector", isDisabled: isDisabled, status: isInvalid ? 'danger' : undefined, onChipRemoved: onChipRemoved, onClearQuery: onClearQuery, onQueryUpdated: onQueryUpdated, onBlur: onCustomerContactSelectBlur, onSelect: onCustomerContactSelect, canAddNew: canAddNew, getCreateNewText: props === null || props === void 0 ? void 0 : props.getCreateNewText, isLoading: props.isUpdating || contactList.isFetching }));
+    }, [contactList.data, customEmails, allOptions, selected]);
+    return (React.createElement(OwnerTypeaheadDropdown, { id: props.id || '', hasClearButton: true, multiple: !!props.multiple, contactSsoUsername: contactSsoUsername, groupContactsAndEmails: groupContactsAndEmails, selected: !isEmpty(props.selected) ? props.selected : [], options: filteredContacts, placeholder: props.placeholder || 'Search by name or username', "data-tracking-id": "external-case-contact-selector", isDisabled: isDisabled, status: isInvalid ? 'danger' : undefined, onChipRemoved: onChipRemoved, onClearQuery: onClearQuery, onQueryUpdated: onQueryUpdated, onBlur: onCustomerContactSelectBlur, onSelect: onCustomerContactSelect, canAddNew: canAddNew, getCreateNewText: props === null || props === void 0 ? void 0 : props.getCreateNewText, isLoading: props.isUpdating || contactList.isFetching }));
 }
 export { CaseContactsSelectorExternal, getHydraContactLabel };

package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.d.ts

@@ -5,6 +5,7 @@ export type IOwnerSelectorExtends = Omit<ITypeaheadDropdownProps, 'selected' | '
 export interface IOwnerSelectorProps extends IOwnerSelectorExtends {
     selected: IContact[];
     options: IOwnerOption[];
+    contactSsoUsername: string;
     groupContactsAndEmails?: boolean;
     onSelect: (contacts: IContact[]) => void;
     onChipRemoved?: (contact: IContact) => void;

package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OwnerTypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAKlE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAGH,uBAAuB,EAE1B,MAAM,wCAAwC,CAAC;AAGhD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACpC,uBAAuB,EACvB,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,kBAAkB,GAAG,yBAAyB,GAAG,eAAe,GAAG,OAAO,CACnH,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAC9D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAMD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,mBAAmB,qBA6GhE"}
+{"version":3,"file":"OwnerTypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAKlE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAGH,uBAAuB,EAE1B,MAAM,wCAAwC,CAAC;AAGhD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACpC,uBAAuB,EACvB,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,kBAAkB,GAAG,yBAAyB,GAAG,eAAe,GAAG,OAAO,CACnH,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAC9D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAcD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,mBAAmB,qBA2HhE"}

package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.js

@@ -15,23 +15,30 @@ import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getHydraContactLabel } from '../Functional/CaseContactsSelectorExternal';
+import { getHydraContactLabel, isCustomEmailAddress } from '../Functional/CaseContactsSelectorExternal';
 import { useProgressiveLoading } from '../hooks/useProgressiveLoading';
 import { TypeaheadDropdown, } from '../TypeaheadDropdown/TypeaheadDropdown';
 const PAGE_SIZE = 10;
-function getTypeaheadOptionsFromContacts(contacts) {
-    return map(contacts, (o) => ({ label: getHydraContactLabel(o), value: o.ssoUsername }));
+function getTypeaheadOptionsFromContacts(contacts, caseContactSsoUsername) {
+    return map(contacts, (o) => ({
+        label: getHydraContactLabel(o),
+        value: isCustomEmailAddress(o) ? o === null || o === void 0 ? void 0 : o.emailAddress : o === null || o === void 0 ? void 0 : o.ssoUsername,
+        disableDelete: o.ssoUsername === caseContactSsoUsername,
+    }));
 }
 export function OwnerTypeaheadDropdown(props) {
-    const { groupContactsAndEmails, options, selected, onSelect, onBlur, onToggleClosed, onChipRemoved } = props, restProps = __rest(props, ["groupContactsAndEmails", "options", "selected", "onSelect", "onBlur", "onToggleClosed", "onChipRemoved"]);
-    const selectedTypeaheadOptions = useMemo(() => getTypeaheadOptionsFromContacts(selected), [selected]);
+    const { contactSsoUsername, groupContactsAndEmails, options, selected, onSelect, onToggleClosed, onChipRemoved } = props, restProps = __rest(props, ["contactSsoUsername", "groupContactsAndEmails", "options", "selected", "onSelect", "onToggleClosed", "onChipRemoved"]);
+    const selectedTypeaheadOptions = useMemo(() => getTypeaheadOptionsFromContacts(selected, contactSsoUsername), [selected, contactSsoUsername]);
     const { t } = useTranslation();
     const { visibleItems, hasMoreItems, onHandleLoadMore, resetVisibleItems } = useProgressiveLoading(options, PAGE_SIZE);
     const typeaheadOptions = useMemo(() => {
         const contacts = [];
         const customEmails = [];
         for (const option of visibleItems) {
-            const typeaheadOption = { label: getHydraContactLabel(option.contact), value: option.contact.ssoUsername };
+            const typeaheadOption = {
+                label: getHydraContactLabel(option.contact),
+                value: option.contact.ssoUsername,
+            };
             if (option.isCustomEmail) {
                 customEmails.push(typeaheadOption);
             }
@@ -70,10 +77,6 @@ export function OwnerTypeaheadDropdown(props) {
         const selectedContacts = map(filter(options, (option) => !!find(selectedOptions, (selectedOption) => selectedOption.value === option.contact.ssoUsername)), (o) => o.contact);
         onSelect(selectedContacts);
     };
-    const onLocalBlur = (event) => {
-        resetVisibleItems();
-        !!onBlur && onBlur(event);
-    };
     const onLocalToggleClosed = () => {
         resetVisibleItems();
         !!onToggleClosed && onToggleClosed();
@@ -83,7 +86,7 @@ export function OwnerTypeaheadDropdown(props) {
      * @param option The option that is to be removed.
      */
     const onLocalChipRemoved = (option) => {
-        const contact = find(selected, (o) => o.ssoUsername === option.value);
+        const contact = find(selected, (o) => (o === null || o === void 0 ? void 0 : o.ssoUsername) === option.value || (o === null || o === void 0 ? void 0 : o.emailAddress) === option.value);
         if (contact && !!onChipRemoved) {
             onChipRemoved(contact);
         }
@@ -94,5 +97,5 @@ export function OwnerTypeaheadDropdown(props) {
         };
         onSelect([newCustomOption]);
     };
-    return (React.createElement(TypeaheadDropdown, Object.assign({ "data-tracking-id": "external-case-contact-selector", selected: selectedTypeaheadOptions, options: typeaheadOptions, onSelect: onSelectContact, onHandleLoadMore: onHandleLoadMore, isShowMoreOptionVisible: hasMoreItems(), onBlur: onLocalBlur, onToggleClosed: onLocalToggleClosed, onChipRemoved: onLocalChipRemoved, onNew: onLocalNew }, restProps)));
+    return (React.createElement(TypeaheadDropdown, Object.assign({ "data-tracking-id": "external-case-contact-selector", selected: selectedTypeaheadOptions, options: typeaheadOptions, onSelect: onSelectContact, onHandleLoadMore: onHandleLoadMore, isShowMoreOptionVisible: hasMoreItems(), onToggleClosed: onLocalToggleClosed, onChipRemoved: onLocalChipRemoved, onNew: onLocalNew }, restProps)));
 }

package/lib/esm/PhoneInput/FlagSvgs.js

@@ -587,7 +587,7 @@ export const FlagSvgs = () => {
                 React.createElement("clipPath", { id: "clip0_301_1229" },
                     React.createElement("rect", { width: "513", height: "341.967", fill: "white", transform: "translate(0 0.65918)" })))),
         React.createElement("symbol", { viewBox: "0 0 513 343", id: "cc_fr" },
-            React.createElement("g", { "clip-path": "url(#clip0_301_1221)" },
+            React.createElement("g", { clipPath: "url(#clip0_301_1221)" },
                 React.createElement("path", { d: "M0 0.925293H513V342.929H0V0.925293Z", fill: "white" }),
                 React.createElement("path", { d: "M0 0.925293H170.996V342.929H0V0.925293Z", fill: "#0052B4" }),
                 React.createElement("path", { d: "M342.004 0.925293H513V342.929H342.004V0.925293Z", fill: "#D80027" })),

package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.d.ts

@@ -1,3 +1,4 @@
+import { LabelProps } from '@patternfly/react-core';
 import React from 'react';
 export interface ITypeaheadDropdownProps {
     selected: ITypeaheadDropdownOption[];
@@ -12,6 +13,7 @@ export interface ITypeaheadDropdownProps {
     defaultIsOpen?: boolean;
     status?: 'success' | 'warning' | 'danger' | undefined;
     isLoading?: boolean;
+    color?: LabelProps['color'];
     onSelect: (options: ITypeaheadDropdownOption[]) => void;
     onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
     onToggleClosed?: () => void;
@@ -28,6 +30,7 @@ export interface ITypeaheadDropdownOption {
     value: any;
     label: string;
     group?: string;
+    disableDelete?: boolean;
 }
 export interface ITypeaheadDropdownGroup {
     groupLabel: string;

package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/TypeaheadDropdown/TypeaheadDropdown.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,OAAO,EAAE,+BAA+B,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,EAAE,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,uBAAuB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,wBAAwB,EAAE,CAAC;CACvC;AAED,MAAM,MAAM,+BAA+B,GAAG,wBAAwB,GAAG,uBAAuB,CAAC;AACjG,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AA2BvD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,qBAoT/D"}
+{"version":3,"file":"TypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/TypeaheadDropdown/TypeaheadDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EAWb,MAAM,wBAAwB,CAAC;AAOhC,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,OAAO,EAAE,+BAA+B,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAE5B,QAAQ,EAAE,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAuB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,wBAAwB,EAAE,CAAC;CACvC;AAED,MAAM,MAAM,+BAA+B,GAAG,wBAAwB,GAAG,uBAAuB,CAAC;AACjG,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AA2BvD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,qBA8V/D"}

package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.js

@@ -1,15 +1,13 @@
 import { Button, Label, LabelGroup, MenuToggle, Select, SelectGroup, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
 import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
 import { haltEvent } from '@rh-support/utils';
-import concat from 'lodash/concat';
-import filter from 'lodash/filter';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
-import isEqual from 'lodash/isEqual';
 import isNumber from 'lodash/isNumber';
 import isString from 'lodash/isString';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { usePrevious } from '../hooks/usePrevious';
 import { useSelectKeyboardNavigator } from '../hooks/useSelectKeyboardNavigator';
 export const VIEW_MORE_OPTION_VALUE = 'view-more-option-value';
 export const ADD_NEW_OPTION_VALUE = 'new-option-value';
@@ -36,11 +34,13 @@ function flattenOptions(options) {
 }
 export function TypeaheadDropdown(props) {
     var _a;
-    const { options, selected, hasClearButton, id, isDisabled, multiple, placeholder, isShowMoreOptionVisible, defaultIsOpen, inputAriaControls, status, onSelect, onBlur, onToggleClosed, onClearQuery, onChipRemoved, onQueryUpdated, onHandleLoadMore, onOpenChange, onNew, canAddNew, getCreateNewText, isLoading, } = props;
+    const { color, options, selected, hasClearButton, id, isDisabled, multiple, placeholder, isShowMoreOptionVisible, defaultIsOpen, inputAriaControls, status, onSelect, onBlur, onToggleClosed, onClearQuery, onChipRemoved, onQueryUpdated, onHandleLoadMore, onOpenChange, onNew, canAddNew, getCreateNewText, isLoading, } = props;
     const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(defaultIsOpen !== null && defaultIsOpen !== void 0 ? defaultIsOpen : false);
     const [query, setQuery] = useState(!multiple ? (!isEmpty(selected) ? selected[0].label : '') : '');
     const [allOptions, setAllOptions] = useState((_a = flattenOptions(options)) !== null && _a !== void 0 ? _a : []);
+    const prevSelected = usePrevious(selected);
+    const inputRef = useRef();
     const { focusedItemIndex, onInputKeyDown, setFocusedItemIndex } = useSelectKeyboardNavigator({
         ignoreResetOnListChange: true,
         isDisabled: isDisabled,
@@ -51,19 +51,38 @@ export function TypeaheadDropdown(props) {
     });
     /**
      * Allows the select toggle component to open and close itself.
+     * Resets the query for single select if the dropdown is going to be closed.
      */
     const handleToggle = () => {
         setIsOpen((open) => {
+            var _a, _b;
             const isOpen = !open;
+            if (!isEmpty(selected) && !multiple && !isOpen) {
+                setQuery((_b = (_a = selected[0]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '');
+            }
             return isOpen;
         });
     };
+    /**
+     * Opens the dropdown on click if it is not open.
+     */
+    const handleInputToggle = () => {
+        if (!isOpen) {
+            setIsOpen(true);
+        }
+        else if (isEmpty(query)) {
+            setIsOpen(false);
+        }
+    };
     /**
      * Set the query to an empty string when the clear button is pressed.
      */
     const handleClearQuery = (event) => {
+        var _a;
         setQuery('');
         onClearQuery && onClearQuery();
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setIsOpen(true);
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         event === null || event === void 0 ? void 0 : event.preventDefault();
     };
@@ -75,17 +94,22 @@ export function TypeaheadDropdown(props) {
     const updateQuery = (event, v) => {
         setQuery(v);
         onQueryUpdated && onQueryUpdated(v);
+        setFocusedItemIndex(null);
         if (!isOpen) {
             setIsOpen(true);
         }
     };
     /**
      * Used by the Select patternfly component to change the toggle open state.
-     * @param isOpen The state used to change the open state of the toggle
+     * @param newIsOpen The state used to change the open state of the toggle
      */
-    const localOnOpenChange = (isOpen) => {
-        setIsOpen(isOpen);
-        !!onOpenChange && onOpenChange(isOpen);
+    const localOnOpenChange = (newIsOpen) => {
+        var _a, _b;
+        if (!isEmpty(selected) && !multiple && !newIsOpen) {
+            setQuery((_b = (_a = selected[0]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '');
+        }
+        setIsOpen(newIsOpen);
+        !!onOpenChange && onOpenChange(newIsOpen);
     };
     const isAlreadySelected = (option) => {
         return !!find(selected, (selectedOption) => selectedOption.value === option.value);
@@ -119,28 +143,28 @@ export function TypeaheadDropdown(props) {
             // Single selection: replace the selection with the new option
             onSelect([selectedOption]);
             setQuery(selectedOption.label);
+            !!onQueryUpdated && onQueryUpdated(selectedOption.label);
         }
         else {
-            // Multiple selection: add or remove the contact
-            const updatedSelection = isAlreadySelected(selectedOption)
-                ? filter(selected, (o) => !isEqual(selectedOption, o)) // Remove
-                : concat(selected, selectedOption); // Add
-            onSelect(updatedSelection);
+            onSelect([selectedOption]);
             setQuery('');
+            !!onQueryUpdated && onQueryUpdated('');
         }
         setIsOpen(false);
         setFocusedItemIndex(null);
     };
-    const toggle = (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, variant: "typeahead", onClick: handleToggle, innerRef: toggleRef, isExpanded: isOpen, isDisabled: isDisabled, status: status },
-        React.createElement(TextInputGroup, { isPlain: true },
-            React.createElement(TextInputGroupMain, { value: query, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t(`Search by name or username`), onChange: updateQuery, onClick: handleToggle, onKeyDown: onInputKeyDown, isExpanded: isOpen, "aria-controls": inputAriaControls, role: "combobox" }, !!multiple && (React.createElement(LabelGroup, { "aria-label": "Current selections" }, selected.map((option, index) => (React.createElement(Label, { key: index, variant: "outline", onClick: haltEvent, onClose: (ev) => {
-                    haltEvent(ev);
-                    !!onChipRemoved && onChipRemoved(option);
-                } }, option.label)))))),
-            React.createElement(TextInputGroupUtilities, null,
-                query && hasClearButton && !isDisabled && (React.createElement(Button, { "aria-label": "Clear input value", variant: "plain", onClick: handleClearQuery, isDisabled: isDisabled },
-                    React.createElement(TimesCircleIcon, null))),
-                isLoading && React.createElement(Spinner, { size: "sm" })))));
+    const toggle = (toggleRef) => {
+        return (React.createElement(MenuToggle, { isFullWidth: true, variant: "typeahead", onClick: handleToggle, innerRef: toggleRef, isExpanded: isOpen, isDisabled: isDisabled, status: status },
+            React.createElement(TextInputGroup, { isPlain: true },
+                React.createElement(TextInputGroupMain, { value: query, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t(`Search by name or username`), innerRef: inputRef, onChange: updateQuery, onClick: handleInputToggle, onKeyDown: onInputKeyDown, isExpanded: isOpen, "aria-controls": inputAriaControls, role: "combobox" }, !!multiple && (React.createElement(LabelGroup, { "aria-label": "Current selections" }, selected.map((option, index) => (React.createElement(Label, { key: index, variant: "outline", onClick: haltEvent, color: color !== null && color !== void 0 ? color : 'blue', isDisabled: isDisabled || (option === null || option === void 0 ? void 0 : option.disableDelete), onClose: (ev) => {
+                        haltEvent(ev);
+                        !!onChipRemoved && onChipRemoved(option);
+                    } }, option.label)))))),
+                React.createElement(TextInputGroupUtilities, null,
+                    query && hasClearButton && !isDisabled && (React.createElement(Button, { "aria-label": "Clear input value", variant: "plain", onClick: handleClearQuery, isDisabled: isDisabled },
+                        React.createElement(TimesCircleIcon, null))),
+                    isLoading && React.createElement(Spinner, { size: "sm" })))));
+    };
     /**
      * Renders the options and group options.
      * @returns {JSX.Element[]} The rendered options.
@@ -190,7 +214,8 @@ export function TypeaheadDropdown(props) {
         else if (option.value === ADD_NEW_OPTION_VALUE) {
             return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: false, isSelected: false }, !!getCreateNewText ? getCreateNewText(query) : `${option.label}: ${query}`));
         }
-        return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: focusedItemIndex === index, isSelected: isAlreadySelected(option) }, option.label));
+        const isSelected = isAlreadySelected(option);
+        return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: focusedItemIndex === index, isSelected: isSelected, isDisabled: isSelected }, option.label));
     };
     useEffect(() => {
         const localAllOptions = [...flattenOptions(options)];
@@ -204,13 +229,22 @@ export function TypeaheadDropdown(props) {
         // There is no need to recall this when canAddNew has been changed.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options, isShowMoreOptionVisible, query]);
+    /**
+     * Will set the query to the currently selected label if the previous selection
+     * was empty and the dropdown is single select.
+     */
+    useEffect(() => {
+        if (!multiple && isEmpty(prevSelected) && !isEmpty(selected)) {
+            setQuery(selected[0].label);
+        }
+    }, [selected, prevSelected, isOpen, multiple]);
     useEffect(() => {
         if (!isOpen) {
             setFocusedItemIndex(null);
             !!onToggleClosed && onToggleClosed();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isOpen]);
+    }, [isOpen, selected]);
     return (React.createElement(Select, { id: id || '', "data-tracking-id": "external-case-contact-selector", role: "menu", shouldFocusFirstItemOnOpen: false, shouldFocusToggleOnSelect: false, isOpen: isOpen, onOpenChange: localOnOpenChange, toggle: toggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onBlur: onBlur, onSelect: onLocalSelect },
         React.createElement(SelectList, { isAriaMultiselectable: multiple }, ...renderOptions())));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "2.5.6",
+    "version": "2.5.7",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -106,5 +106,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "b6a8eed6fd124d98a0da537fc889513e3e533f06"
+    "gitHead": "5eaf1c740ed00678417977760f52519d0ac85ee9"
 }