@rh-support/components 2.5.2 → 2.5.3

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

@@ -4,9 +4,9 @@ import { IContact } from '@cee-eng/hydrajs/@types/models/contact';
 import { IDClassNameProps } from '@rh-support/types/shared';
 import { UserAuth } from '@rh-support/user-permissions';
 import React from 'react';
-import { TypeaheadModel, TypeaheadProps } from 'react-bootstrap-typeahead';
+import { ITypeaheadDropdownGroupOrOption } from '../TypeaheadDropdown/TypeaheadDropdown';
 export type INotificationContact = IContact | ICaseNotificationAddresses;
-interface IProps<T extends TypeaheadModel> extends IDClassNameProps, Omit<TypeaheadProps<T>, 'id' | 'selected' | 'onChange' | 'className' | 'multiple' | 'options' | 'newSelectionPrefix'> {
+interface IProps extends IDClassNameProps {
     selectedAccountNumber: string;
     selected: (IContact | ICaseNotificationAddresses)[];
     onChange: (selectedContacts: (IContact | ICaseNotificationAddresses)[]) => void;
@@ -16,16 +16,21 @@ interface IProps<T extends TypeaheadModel> extends IDClassNameProps, Omit<Typeah
     clearButton?: boolean;
     multiple?: boolean;
     placeholder?: string;
-    minLength?: number;
     isUpdating?: boolean;
     renderToken?: (option: any, props: any, idx: any) => string | React.ReactNode;
     isExportingPDF?: boolean;
-    newSelectionPrefix?: React.ReactNode;
     customEmails?: IAccountNotificationAddresses[];
     isDisabled?: boolean;
+    allowCustomEmailAdd?: boolean;
+    isInvalid?: boolean;
+    groupContactsAndEmails?: boolean;
+    onNew?: (query: string) => void;
+    canAddNew?: (options: ITypeaheadDropdownGroupOrOption[], query: string) => boolean;
+    getCreateNewText?: (query: string) => string;
 }
-declare const renderMenuItemChildren: (option: INotificationContact, p: any) => React.JSX.Element;
+export declare const CONTACTS_PAGE_SIZE = 10;
+export declare const DEFAULT_CONTACTS_OFFSET: number;
 declare const getHydraContactLabel: (user: INotificationContact) => string;
-declare function CaseContactsSelectorExternal<T extends TypeaheadModel>(props: IProps<T>): React.JSX.Element;
-export { CaseContactsSelectorExternal, renderMenuItemChildren, getHydraContactLabel };
+declare function CaseContactsSelectorExternal(props: IProps): React.JSX.Element;
+export { CaseContactsSelectorExternal, getHydraContactLabel };
 //# sourceMappingURL=CaseContactsSelectorExternal.d.ts.map

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;AAMxD,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAA0C,cAAc,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAKnH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,0BAA0B,CAAC;AACzE,UAAU,MAAM,CAAC,CAAC,SAAS,cAAc,CACrC,SAAQ,gBAAgB,EACpB,IAAI,CACA,cAAc,CAAC,CAAC,CAAC,EACjB,IAAI,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,oBAAoB,CAC/F;IACL,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,YAAY,CAAC,EAAE,6BAA6B,EAAE,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,sBAAsB,WAAY,oBAAoB,8BAI3D,CAAC;AAcF,QAAA,MAAM,oBAAoB,SAAU,oBAAoB,KAAG,MAa1D,CAAC;AAEF,iBAAS,4BAA4B,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,qBAqN/E;AAED,OAAO,EAAE,4BAA4B,EAAE,sBAAsB,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,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,qBA0NlD;AAED,OAAO,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,CAAC"}

package/lib/esm/Functional/CaseContactsSelectorExternal.js

@@ -7,40 +7,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { accounts } from '@cee-eng/hydrajs';
-import { getApiResourceObject, sortHydraContacts } from '@rh-support/utils';
+import { getApiResourceObject, isEmailValid, sortHydraContacts } from '@rh-support/utils';
 import differenceBy from 'lodash/differenceBy';
+import filter from 'lodash/filter';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
+import map from 'lodash/map';
 import sortBy from 'lodash/sortBy';
-import React, { useEffect, useRef, useState } from 'react';
-import { Highlighter, Menu, MenuItem, Typeahead } from 'react-bootstrap-typeahead';
-import { Trans } from 'react-i18next';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { usePrevious } from '../hooks/usePrevious';
-const renderMenuItemChildren = (option, p) => (React.createElement(Highlighter, { key: getKey(option), search: p.text }, getHydraContactLabel(option)));
+import { OwnerTypeaheadDropdown } from '../OwnerTypeaheadDropdown';
+export const CONTACTS_PAGE_SIZE = 10;
+export const DEFAULT_CONTACTS_OFFSET = CONTACTS_PAGE_SIZE - 1;
 const isCustomEmailAddress = (user) => {
     return !!(user === null || user === void 0 ? void 0 : user.emailAddress);
 };
 const isContact = (user) => {
     return !!(user === null || user === void 0 ? void 0 : user.ssoUsername) && !(user === null || user === void 0 ? void 0 : user.emailAddress);
 };
-const getKey = (option) => {
-    if (isCustomEmailAddress(option))
-        return option.emailAddress;
-    if (isContact(option))
-        return option.ssoUsername;
-};
 const getHydraContactLabel = (user) => {
     if (isEmpty(user) || typeof user !== 'object')
         return '';
@@ -57,7 +42,9 @@ const getHydraContactLabel = (user) => {
     return label ? label : '';
 };
 function CaseContactsSelectorExternal(props) {
+    const { customEmails, isInvalid, groupContactsAndEmails } = props;
     const previousSelectedAccountNumber = usePrevious(props.selectedAccountNumber);
+    const [filteredContacts, setFilteredContacts] = useState([]);
     /**
      * External owner selector related
      */
@@ -147,7 +134,7 @@ function CaseContactsSelectorExternal(props) {
             ];
         props.onChange && props.onChange(customerContacts);
     };
-    const onCustomerContactSelectBlur = (event) => {
+    const onCustomerContactSelectBlur = () => {
         props.onChange && props.onChange(props.selected);
     };
     const isDisabled = (props.loggedInUserRights.isExternal() &&
@@ -155,43 +142,63 @@ function CaseContactsSelectorExternal(props) {
         props.isUpdating ||
         contactList.isFetching ||
         props.isDisabled;
-    const renderMenu = (results, menuProps, state) => {
-        const contacts = results.map((item, index) => {
-            if (item.customOption) {
-                return (React.createElement(MenuItem, { className: "rbt-menu-custom-option", key: index, option: item, position: index },
-                    menuProps.newSelectionPrefix,
-                    React.createElement(Highlighter, { search: state.text }, item['ssoUsername'])));
-            }
-            if (item.paginationOption) {
-                return (React.createElement(React.Fragment, { key: "pagination-item" },
-                    React.createElement(Menu.Divider, null),
-                    React.createElement(MenuItem, { key: index, position: index, option: item, className: "rbt-menu-pagination-option", label: "Display additional results..." }, "Display additional results...")));
-            }
-            else {
-                return (React.createElement(React.Fragment, { key: index },
-                    index === 0 && isContact(item) && (React.createElement(React.Fragment, null,
-                        React.createElement(Menu.Header, null,
-                            React.createElement(Trans, null, "Contacts")))),
-                    (index === 0
-                        ? isCustomEmailAddress(item)
-                        : isCustomEmailAddress(item) && isContact(results[index - 1])) && (React.createElement(React.Fragment, null,
-                        index !== 0 && React.createElement(Menu.Divider, null),
-                        React.createElement(Menu.Header, null,
-                            React.createElement(Trans, null, "Notification emails")))),
-                    React.createElement(MenuItem, { key: index, option: item, position: index }, renderMenuItemChildren(item, state))));
-            }
-        });
-        return React.createElement(Menu, Object.assign({}, menuProps), contacts);
-    };
-    const { customEmails } = props, restProps = __rest(props, ["customEmails"]);
-    const conditionalProps = Object.assign(Object.assign({}, (props.renderToken ? { renderToken: props.renderToken } : undefined)), ((customEmails || []).length > 0 ? { renderMenu } : undefined));
-    const getCustomEmails = () => {
+    const getCustomEmails = useCallback(() => {
         return sortBy((customEmails || []).map((item) => (Object.assign(Object.assign({}, item), { ssoUsername: item.emailAddress, firstName: item.emailAddress, lastName: item.emailAddress }))), 'emailAddress');
+    }, [customEmails]);
+    /**
+     * Get all options for the owner typeahead.
+     */
+    const allOptions = useMemo(() => {
+        return [
+            ...map(contactList.data, (contact) => ({ contact, isCustomEmail: false })),
+            ...map(getCustomEmails(), (email) => ({
+                isCustomEmail: true,
+                contact: Object.assign(Object.assign({}, email), { ssoUsername: email.emailAddress, firstName: email.emailAddress, lastName: email.emailAddress }),
+            })),
+        ];
+    }, [contactList.data, getCustomEmails]);
+    /**
+     * update the shown options in the dropdown and reset the amount of options show to the default.
+     * @param query The user search term
+     */
+    const onQueryUpdated = (query) => {
+        if (isEmpty(query)) {
+            setFilteredContacts(allOptions);
+        }
+        else {
+            const filteredContacts = filter(allOptions, (option) => getHydraContactLabel(option.contact).toLowerCase().includes(query.toLowerCase()));
+            setFilteredContacts(filteredContacts);
+        }
+    };
+    /**
+     * Reset the filtered contacts and the current offset.
+     */
+    const onClearQuery = () => {
+        var _a;
+        const numOfCustomEmails = (_a = customEmails === null || customEmails === void 0 ? void 0 : customEmails.length) !== null && _a !== void 0 ? _a : 0;
+        if (filteredContacts.length === contactList.data.length + numOfCustomEmails)
+            return;
+        setFilteredContacts(allOptions);
+    };
+    /**
+     * Removes contacts based on the hydra
+     */
+    const onChipRemoved = (option) => {
+        props.onChange(filter(props.selected, (c) => c !== option));
+    };
+    const canAddNew = (options, query) => {
+        if (!props.allowCustomEmailAdd)
+            return false;
+        if ((options || []).length === 0 && isEmailValid(query))
+            return true;
+        return false;
     };
-    return (
-    //@ts-ignore
-    React.createElement(Typeahead, Object.assign({}, restProps, { id: props.id || '', className: props.className || '', filterBy: ['firstName', 'lastName', 'ssoUsername'], clearButton: !!props.clearButton, multiple: !!props.multiple, isLoading: contactList.isFetching || props.isUpdating, options: [...contactList.data, ...getCustomEmails()], selected: !isEmpty(props.selected) ? props.selected : [], onChange: onCustomerContactSelect, 
-        //@ts-ignore
-        labelKey: props.multiple ? 'ssoUsername' : getHydraContactLabel, placeholder: props.placeholder || 'Search by name or username', renderMenuItemChildren: renderMenuItemChildren, onBlur: onCustomerContactSelectBlur, minLength: props.minLength || 0, disabled: isDisabled }, conditionalProps, { "data-tracking-id": "external-case-contact-selector" })));
+    /**
+     * Set the filtered contacts to the entire contact list and reset the offset to the default page size.
+     */
+    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 }));
 }
-export { CaseContactsSelectorExternal, renderMenuItemChildren, getHydraContactLabel };
+export { CaseContactsSelectorExternal, getHydraContactLabel };

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

@@ -1,11 +1,13 @@
 import { IContact } from '@cee-eng/hydrajs/@types/models/contact';
 import React from 'react';
 import { ITypeaheadDropdownProps } from '../TypeaheadDropdown/TypeaheadDropdown';
-export type IOwnerSelectorExtends = Omit<ITypeaheadDropdownProps, 'selected' | 'options' | 'onSelect' | 'onHandleLoadMore' | 'isShowMoreOptionVisible'>;
+export type IOwnerSelectorExtends = Omit<ITypeaheadDropdownProps, 'selected' | 'options' | 'onSelect' | 'onHandleLoadMore' | 'isShowMoreOptionVisible' | 'onChipRemoved' | 'onNew'>;
 export interface IOwnerSelectorProps extends IOwnerSelectorExtends {
     selected: IContact[];
     options: IOwnerOption[];
+    groupContactsAndEmails?: boolean;
     onSelect: (contacts: IContact[]) => void;
+    onChipRemoved?: (contact: IContact) => void;
 }
 export interface IOwnerOption {
     contact: IContact;

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

@@ -1 +1 @@
-{"version":3,"file":"OwnerTypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAIlE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAEH,uBAAuB,EAE1B,MAAM,wCAAwC,CAAC;AAGhD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACpC,uBAAuB,EACvB,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,kBAAkB,GAAG,yBAAyB,CACvF,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAC9D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAaD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,mBAAmB,qBAqDhE"}
+{"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;CAC/C;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAMD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,mBAAmB,qBA6GhE"}

package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.js

@@ -11,8 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import filter from 'lodash/filter';
 import find from 'lodash/find';
+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 { useProgressiveLoading } from '../hooks/useProgressiveLoading';
 import { TypeaheadDropdown, } from '../TypeaheadDropdown/TypeaheadDropdown';
@@ -20,14 +22,43 @@ const PAGE_SIZE = 10;
 function getTypeaheadOptionsFromContacts(contacts) {
     return map(contacts, (o) => ({ label: getHydraContactLabel(o), value: o.ssoUsername }));
 }
-function getTypeaheadOptionsFromOption(contacts) {
-    return map(contacts, (o) => ({ label: getHydraContactLabel(o.contact), value: o.contact.ssoUsername }));
-}
 export function OwnerTypeaheadDropdown(props) {
-    const { options, selected, onSelect, onBlur, onToggleClosed } = props, restProps = __rest(props, ["options", "selected", "onSelect", "onBlur", "onToggleClosed"]);
+    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 { t } = useTranslation();
     const { visibleItems, hasMoreItems, onHandleLoadMore, resetVisibleItems } = useProgressiveLoading(options, PAGE_SIZE);
-    const typeaheadOptions = useMemo(() => getTypeaheadOptionsFromOption(visibleItems), [visibleItems]);
+    const typeaheadOptions = useMemo(() => {
+        const contacts = [];
+        const customEmails = [];
+        for (const option of visibleItems) {
+            const typeaheadOption = { label: getHydraContactLabel(option.contact), value: option.contact.ssoUsername };
+            if (option.isCustomEmail) {
+                customEmails.push(typeaheadOption);
+            }
+            else {
+                contacts.push(typeaheadOption);
+            }
+        }
+        const allOptions = [];
+        const isContactsEmpty = isEmpty(contacts);
+        const isCustomEmailsEmpty = isEmpty(customEmails);
+        // If there are only contacts do not group the options together.
+        if (!groupContactsAndEmails) {
+            allOptions.push(...contacts);
+            allOptions.push(...customEmails);
+        }
+        else {
+            if (!isContactsEmpty) {
+                allOptions.push({ groupLabel: t('Contacts'), options: contacts });
+            }
+            if (!isCustomEmailsEmpty) {
+                allOptions.push({ groupLabel: t('Notification emails'), options: customEmails });
+            }
+        }
+        return allOptions;
+        // This only needs to run when the visible items change.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visibleItems]);
     /**
      * Handles selecting or deselecting a contact.
      *
@@ -47,5 +78,21 @@ export function OwnerTypeaheadDropdown(props) {
         resetVisibleItems();
         !!onToggleClosed && onToggleClosed();
     };
-    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 }, restProps)));
+    /**
+     * Finds the correct contact that will be removed.
+     * @param option The option that is to be removed.
+     */
+    const onLocalChipRemoved = (option) => {
+        const contact = find(selected, (o) => o.ssoUsername === option.value);
+        if (contact && !!onChipRemoved) {
+            onChipRemoved(contact);
+        }
+    };
+    const onLocalNew = (query) => {
+        const newCustomOption = {
+            emailAddress: query,
+        };
+        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)));
 }

package/lib/esm/SingleSelectDropdown/SingleSelectDropdown.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface ISingleSelectDropdownOption {
+    value: any;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface SingleSelectDropdownProps {
+    selected: ISingleSelectDropdownOption;
+    options: ISingleSelectDropdownOption[];
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    id?: string;
+    ariaLabel?: string;
+    placeholder?: string;
+    isInvalid?: boolean;
+    className?: string;
+    toggleClassName?: string;
+    dataTrackingId?: string;
+    toggleDataTrackingId?: string;
+    onSelect?: (options: ISingleSelectDropdownOption[]) => void;
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    isScrollable?: boolean;
+    zIndex?: number;
+}
+export declare function SingleSelectDropdown(props: SingleSelectDropdownProps): React.JSX.Element;
+//# sourceMappingURL=SingleSelectDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectDropdown.d.ts","sourceRoot":"","sources":["../../../src/SingleSelectDropdown/SingleSelectDropdown.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,MAAM,WAAW,2BAA2B;IACxC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,yBAAyB;IACtC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,2BAA2B,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,2BAA2B,EAAE,KAAK,IAAI,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAyFpE"}

package/lib/esm/SingleSelectDropdown/SingleSelectDropdown.js

@@ -0,0 +1,26 @@
+import { Flex, FlexItem, MenuToggle, Select, SelectList, SelectOption, Spinner, } from '@patternfly/react-core';
+import isEqual from 'lodash/isEqual';
+import React, { useState } from 'react';
+export function SingleSelectDropdown(props) {
+    const { selected, options, isDisabled, isLoading, id, placeholder, isInvalid, className, toggleClassName, dataTrackingId, toggleDataTrackingId, onSelect, isScrollable, onBlur, ariaLabel, zIndex, } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const onToggleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { className: toggleClassName || 'single-select-toggle-text', ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, isDisabled: isDisabled, isFullWidth: true, status: isInvalid ? 'danger' : undefined, "data-tracking-id": toggleDataTrackingId || '' },
+        React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+            React.createElement(FlexItem, null,
+                " ",
+                selected.label || placeholder),
+            isLoading && (React.createElement(FlexItem, null,
+                React.createElement(Spinner, { size: "md" }))))));
+    const onLocalSelect = (event, value) => {
+        onSelect && onSelect(value);
+        setIsOpen(false);
+    };
+    const onLocalBlur = (event, value) => {
+        !!onBlur && onBlur(value);
+    };
+    return (React.createElement(Select, { id: id || '', className: className || '', "data-tracking-id": dataTrackingId, isOpen: isOpen, selected: selected, onSelect: onLocalSelect, onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: toggle, shouldFocusToggleOnSelect: true, popperProps: { direction: 'down', enableFlip: false }, isScrollable: isScrollable, shouldFocusFirstItemOnOpen: false, onBlur: () => onLocalBlur, "aria-label": ariaLabel, zIndex: zIndex },
+        React.createElement(SelectList, null, options.map((option) => (React.createElement(SelectOption, { key: option.value, value: option, description: option.description || '', isSelected: isEqual(selected.label, option.label), isDisabled: option.disabled }, option.label))))));
+}

package/lib/esm/SingleSelectDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SingleSelectDropdown';
+//# sourceMappingURL=index.d.ts.map

package/lib/esm/SingleSelectDropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/SingleSelectDropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/lib/esm/SingleSelectDropdown/index.js

@@ -0,0 +1 @@
+export * from './SingleSelectDropdown';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface ITypeaheadDropdownProps {
     selected: ITypeaheadDropdownOption[];
-    options: ITypeaheadDropdownOption[];
+    options: ITypeaheadDropdownGroupOrOption[];
     isShowMoreOptionVisible?: boolean;
     id?: string;
     placeholder?: string;
@@ -10,18 +10,30 @@ export interface ITypeaheadDropdownProps {
     multiple?: boolean;
     hasClearButton?: boolean;
     defaultIsOpen?: boolean;
+    status?: 'success' | 'warning' | 'danger' | undefined;
     onSelect: (options: ITypeaheadDropdownOption[]) => void;
     onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
     onToggleClosed?: () => void;
     onClearQuery?: () => void;
+    onChipRemoved?: (option: ITypeaheadDropdownOption) => void;
     onQueryUpdated?: (query: string) => void;
     onOpenChange?: (isOpen: boolean) => void;
     onHandleLoadMore?: (event: any) => void;
+    onNew?: (query: string) => void;
+    canAddNew?: (options: ITypeaheadDropdownGroupOrOption[], query: string) => boolean;
+    getCreateNewText?: (query: string) => string;
 }
 export interface ITypeaheadDropdownOption {
     value: any;
     label: string;
+    group?: string;
+}
+export interface ITypeaheadDropdownGroup {
+    groupLabel: string;
+    options: ITypeaheadDropdownOption[];
 }
+export type ITypeaheadDropdownGroupOrOption = ITypeaheadDropdownOption | ITypeaheadDropdownGroup;
 export declare const VIEW_MORE_OPTION_VALUE = "view-more-option-value";
+export declare const ADD_NEW_OPTION_VALUE = "new-option-value";
 export declare function TypeaheadDropdown(props: ITypeaheadDropdownProps): React.JSX.Element;
 //# sourceMappingURL=TypeaheadDropdown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/TypeaheadDropdown/TypeaheadDropdown.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,OAAO,EAAE,wBAAwB,EAAE,CAAC;IACpC,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;IAExB,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,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;CAC3C;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAG/D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,qBAgO/D"}
+{"version":3,"file":"TypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/TypeaheadDropdown/TypeaheadDropdown.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,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;IAEtD,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,qBAqT/D"}

package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.js

@@ -1,26 +1,47 @@
-import { Button, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+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 includes from 'lodash/includes';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import isNumber from 'lodash/isNumber';
 import isString from 'lodash/isString';
-import map from 'lodash/map';
 import React, { useEffect, useState } from 'react';
 import { Highlighter } from 'react-bootstrap-typeahead';
 import { useTranslation } from 'react-i18next';
 import { useSelectKeyboardNavigator } from '../hooks/useSelectKeyboardNavigator';
 export const VIEW_MORE_OPTION_VALUE = 'view-more-option-value';
+export const ADD_NEW_OPTION_VALUE = 'new-option-value';
 const VIEW_MORE_OPTION = { label: 'View more', value: VIEW_MORE_OPTION_VALUE };
+const ADD_NEW_OPTION = { label: 'Create new option', value: ADD_NEW_OPTION_VALUE };
+function isDropdownGroup(option) {
+    return option.groupLabel !== undefined;
+}
+function isDropdownOption(option) {
+    const typedOption = option;
+    return typedOption.value !== undefined && typedOption.label !== undefined;
+}
+function flattenOptions(options) {
+    const flattened = [];
+    for (const option of options) {
+        if (isDropdownGroup(option)) {
+            flattened.push(...option.options); // Only add the group's items
+        }
+        else if (isDropdownOption(option)) {
+            flattened.push(option); // Add standalone item
+        }
+    }
+    return flattened;
+}
 export function TypeaheadDropdown(props) {
-    const { options, selected, hasClearButton, id, isDisabled, multiple, placeholder, isShowMoreOptionVisible, defaultIsOpen, inputAriaControls, onSelect, onBlur, onToggleClosed, onClearQuery, onQueryUpdated, onHandleLoadMore, onOpenChange, } = 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, } = 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([]);
+    const [allOptions, setAllOptions] = useState((_a = flattenOptions(options)) !== null && _a !== void 0 ? _a : []);
     const { focusedItemIndex, onInputKeyDown, setFocusedItemIndex } = useSelectKeyboardNavigator({
         ignoreResetOnListChange: true,
         isDisabled: isDisabled,
@@ -68,7 +89,7 @@ export function TypeaheadDropdown(props) {
         !!onOpenChange && onOpenChange(isOpen);
     };
     const isAlreadySelected = (option) => {
-        return includes(selected, option);
+        return !!find(selected, (selectedOption) => selectedOption.value === option.value);
     };
     /**
      * Handles selecting or deselecting a contact.
@@ -85,6 +106,11 @@ export function TypeaheadDropdown(props) {
             !!onHandleLoadMore && onHandleLoadMore(event);
             return;
         }
+        if (value === ADD_NEW_OPTION_VALUE) {
+            !!onNew && onNew(query);
+            setQuery('');
+            return;
+        }
         const selectedOption = find(allOptions, (o) => o.value === value);
         if (!selectedOption)
             return;
@@ -101,25 +127,85 @@ export function TypeaheadDropdown(props) {
                 ? filter(selected, (o) => !isEqual(selectedOption, o)) // Remove
                 : concat(selected, selectedOption); // Add
             onSelect(updatedSelection);
+            setQuery('');
         }
         setIsOpen(false);
         setFocusedItemIndex(null);
     };
-    const toggle = (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, variant: "typeahead", onClick: handleToggle, innerRef: toggleRef, isExpanded: isOpen, isDisabled: isDisabled },
+    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" }),
+            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))),
                 isDisabled && React.createElement(Spinner, { size: "sm" })))));
+    /**
+     * Renders the options and group options.
+     * @returns {JSX.Element[]} The rendered options.
+     */
+    const renderOptions = () => {
+        let currentIndex = 0;
+        const optionElements = [];
+        for (const option of options) {
+            if (isDropdownOption(option)) {
+                optionElements.push(getOptionElement(option, currentIndex));
+                currentIndex++;
+            }
+            else if (isDropdownGroup(option)) {
+                const typedOption = option;
+                const groupOptionElements = [];
+                for (const groupOption of typedOption.options) {
+                    groupOptionElements.push(getOptionElement(groupOption, currentIndex));
+                    currentIndex++;
+                }
+                optionElements.push(React.createElement(SelectGroup, { label: typedOption.groupLabel }, ...groupOptionElements));
+            }
+        }
+        if (isShowMoreOptionVisible) {
+            optionElements.push(getOptionElement(VIEW_MORE_OPTION, currentIndex));
+            currentIndex++;
+        }
+        if (!!canAddNew && canAddNew(options, query)) {
+            optionElements.push(getOptionElement(ADD_NEW_OPTION, currentIndex));
+        }
+        return optionElements;
+    };
+    /**
+     * Renders individual options.
+     * @param option The option to render
+     * @param index The option's index within the allOptions array
+     * @returns The rendered option
+     */
+    const getOptionElement = (option, index) => {
+        if (option.value === VIEW_MORE_OPTION_VALUE) {
+            // You cannot use the styling applied by the "isLoadButton" prop
+            // because it overwrites the pf-m-focus styling. Inorder for it to visually
+            // look the same and be able to function with keyboard accessibility,
+            // the selection option text needs to be wrapped in a span with the pf link color class.
+            return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: focusedItemIndex === index, isSelected: false, onClick: onHandleLoadMore },
+                React.createElement("span", { className: "pf-v5-u-link-color" }, "View more")));
+        }
+        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) },
+            React.createElement(Highlighter, { key: option.value, search: query }, option.label)));
+    };
     useEffect(() => {
+        const localAllOptions = [...flattenOptions(options)];
         if (isShowMoreOptionVisible) {
-            setAllOptions([...options, VIEW_MORE_OPTION]);
+            localAllOptions.push(VIEW_MORE_OPTION);
         }
-        else {
-            setAllOptions(options);
+        if (!!canAddNew && canAddNew(options, query)) {
+            localAllOptions.push(ADD_NEW_OPTION);
         }
-    }, [options, isShowMoreOptionVisible]);
+        setAllOptions(localAllOptions);
+        // There is no need to recall this when canAddNew has been changed.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [options, isShowMoreOptionVisible, query]);
     useEffect(() => {
         if (!isOpen) {
             setFocusedItemIndex(null);
@@ -128,16 +214,5 @@ export function TypeaheadDropdown(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen]);
     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 }, map(allOptions, (option, index) => {
-            if (option.value === VIEW_MORE_OPTION_VALUE) {
-                // You cannot use the styling applied by the "isLoadButton" prop
-                // because it overwrites the pf-m-focus styling. Inorder for it to visually
-                // look the same and be able to function with keyboard accessibility,
-                // the selection option text needs to be wrapped in a span with the pf link color class.
-                return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: focusedItemIndex === index, isSelected: false, onClick: onHandleLoadMore },
-                    React.createElement("span", { className: "pf-v5-u-link-color" }, "View more")));
-            }
-            return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: focusedItemIndex === index, isSelected: isAlreadySelected(option) },
-                React.createElement(Highlighter, { key: option.value, search: query }, option.label)));
-        }))));
+        React.createElement(SelectList, { isAriaMultiselectable: multiple }, ...renderOptions())));
 }

package/lib/esm/hooks/index.d.ts

@@ -15,5 +15,6 @@ export * from './useSelectKeyboardNavigator';
 export * from './useLocalStorage';
 export * from './useSessionStorage';
 export * from './useSearchDocument';
+export * from './usePatternFlySingleSelectToggle';
 export * from './useProgressiveLoading';
 //# sourceMappingURL=index.d.ts.map