@rh-support/components 2.5.1 → 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

@@ -0,0 +1,17 @@
+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' | '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;
+    isCustomEmail?: boolean;
+}
+export declare function OwnerTypeaheadDropdown(props: IOwnerSelectorProps): React.JSX.Element;
+//# sourceMappingURL=OwnerTypeaheadDropdown.d.ts.map

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

@@ -0,0 +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;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

@@ -0,0 +1,98 @@
+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 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';
+const PAGE_SIZE = 10;
+function getTypeaheadOptionsFromContacts(contacts) {
+    return map(contacts, (o) => ({ label: getHydraContactLabel(o), value: o.ssoUsername }));
+}
+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 { 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 };
+            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.
+     *
+     * @param {React.MouseEvent<Element, MouseEvent>} _
+     * @param contactLabel The value of the selected option.
+     * @returns
+     */
+    const onSelectContact = (selectedOptions) => {
+        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();
+    };
+    /**
+     * 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/OwnerTypeaheadDropdown/index.d.ts

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

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

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

package/lib/esm/OwnerTypeaheadDropdown/index.js

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

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

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface ITypeaheadDropdownProps {
+    selected: ITypeaheadDropdownOption[];
+    options: ITypeaheadDropdownGroupOrOption[];
+    isShowMoreOptionVisible?: boolean;
+    id?: string;
+    placeholder?: string;
+    inputAriaControls?: string;
+    isDisabled?: boolean;
+    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

@@ -0,0 +1 @@
+{"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"}