@rh-support/troubleshoot 2.6.13 → 2.6.15

package/lib/esm/components/CaseManagement/NoClusterIDReasonSelector.js

@@ -1,94 +1,65 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { LoadingIndicator } from '@rh-support/components';
+import { LoadingIndicator, SingleSelectDropdown } from '@rh-support/components';
 import { fetchNoClusterIdReasonsMetadata, GlobalMetadataStateContext, useGlobalDispatchContext, } from '@rh-support/react-context';
 import { haventLoadedMetadata } from '@rh-support/utils';
 import filter from 'lodash/filter';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import map from 'lodash/map';
+import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { PDFContext } from '../CaseEditView/PDFContainer';
-const createState = (display_value, display_name) => {
-    return {
-        display_name,
-        display_value,
-        toString: () => display_name || '',
-        compareTo: function (value) {
-            const displayName = this.toString().toLowerCase();
-            const val = (value || '').toString().toLowerCase();
-            return displayName.includes(val);
-        },
-    };
-};
 const NoClusterIDReasonSelector = (props) => {
     const { t } = useTranslation();
-    const [isOpen, setIsOpen] = useState(false);
-    const [validated, setValidated] = useState('default');
-    const [inputVal, setInputVal] = useState('');
     const [notRegistered, setNotRegistered] = useState(false);
+    const [inputValue, setInputValue] = useState(props.noClusterIdReasonExplanation || '');
     const globalDispatch = useGlobalDispatchContext();
     const { globalMetadataState: { caseNoClusterIdReasons }, } = useContext(GlobalMetadataStateContext);
     const { isExportingPDF } = useContext(PDFContext);
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
     const caseNoClusterIdReasonsList = props.isCustomer
         ? filter(caseNoClusterIdReasons.data, (item) => item !==
             'I am opening a case on behalf of the customer and cannot provide their Cluster ID at this time')
         : caseNoClusterIdReasons.data;
-    const selectRef = useRef(undefined);
-    const onSelect = (event, selection) => {
+    const clearSelection = () => {
+        setNotRegistered(false);
+        setInputValue('');
+        props.onReasonInputBoxChanged('');
+        props.onReasonChange('');
+    };
+    const handleReasonChange = (option) => {
         clearSelection();
-        const selected = selection.display_value;
+        const selected = option.value;
         props.onReasonChange(selected);
-        if (selected === 'Other') {
-            window.setTimeout(() => {
-                var _a;
-                (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.inputRef.current.focus();
-            }, 100);
-        }
         if (selected === 'My cluster is disconnected and / or has not been registered') {
             setNotRegistered(true);
         }
     };
-    const clearSelection = () => {
-        setIsOpen(false);
-        setNotRegistered(false);
-        setInputVal('');
-        props.onReasonInputBoxChanged('');
-        props.onReasonChange('');
+    const handleInputChange = (_event, value) => {
+        setInputValue(value);
+        props.onReasonInputBoxChanged(value);
     };
-    const getSelectedItem = () => {
+    const getDropdownOptions = () => {
+        return map(caseNoClusterIdReasonsList || [], (option) => ({
+            label: t(option),
+            value: option,
+        }));
+    };
+    const getSelectedOption = () => {
         if (props.noClusterIdReason) {
-            if (props.noClusterIdReason === 'Other' || props.noClusterIdReasonExplanation) {
-                return createState(inputVal || props.noClusterIdReasonExplanation, inputVal || props.noClusterIdReasonExplanation);
-            }
-            else {
-                return createState(props.noClusterIdReason, t(props.noClusterIdReason));
-            }
-        }
-        else if (props.noClusterIdReasonExplanation) {
-            return createState(props.noClusterIdReasonExplanation, props.noClusterIdReasonExplanation);
+            return {
+                label: t(props.noClusterIdReason),
+                value: props.noClusterIdReason,
+            };
         }
-    };
-    const onTypeaheadInputChanged = (input) => {
-        setIsOpen(false);
-        setInputVal(input);
-        props.onReasonInputBoxChanged(input);
+        return {
+            label: '',
+            value: '',
+        };
     };
     useEffect(() => {
         if (haventLoadedMetadata(caseNoClusterIdReasons)) {
             fetchNoClusterIdReasonsMetadata(globalDispatch);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [caseNoClusterIdReasons]);
-    useEffect(() => {
-        if (props.isInValid) {
-            setValidated('error');
-        }
-        else {
-            setValidated('default');
-        }
-    }, [props.isInValid]);
+    }, [caseNoClusterIdReasons, globalDispatch]);
     const titleId = 'Reason-name-select';
     const registerMyClusterID = () => (React.createElement("a", { className: `show-target ${isExportingPDF ? 'hide-in-pdf' : ''}`, href: "https://console.redhat.com/openshift/register ", target: "_blank", rel: "noopener noreferrer" },
         React.createElement(Trans, null, "Register my Cluster ID")));
@@ -98,11 +69,16 @@ const NoClusterIDReasonSelector = (props) => {
             React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true },
                 ' ',
                 "*")),
-        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Select an option or briefly describe your reason'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, selections: getSelectedItem(), isOpen: isOpen, placeholderText: t('Select an option or briefly describe your reason'), noValidate: props.isInValid, "aria-labelledby": titleId, "aria-invalid": props.isInValid, "aria-describedby": "validate-reason-helper", validated: validated, className: `${props.isInValid ? ' form-invalid' : ''}`, isDisabled: caseNoClusterIdReasons.isFetching || props.isDisabled, required: true, onFilter: () => null, ref: selectRef, onTypeaheadInputChanged: onTypeaheadInputChanged, "data-tracking-id": "no-openshift-cluster-id-reason" }, (caseNoClusterIdReasonsList || []).map((option, index) => (React.createElement(SelectOption, { key: index, value: createState(option, t(option)) })))),
+        React.createElement("div", { className: "no-cluster-id-reason-container" },
+            React.createElement("div", { className: props.noClusterIdReason === 'Other' ? 'd-none' : '' },
+                React.createElement(SingleSelectDropdown, { placeholder: t('Select an option or briefly describe your reason'), dataTrackingId: "no-openshift-cluster-id-reason", options: getDropdownOptions(), selected: getSelectedOption(), isDisabled: caseNoClusterIdReasons.isFetching || props.isDisabled, isLoading: caseNoClusterIdReasons.isFetching, isInvalid: props.isInValid, onSelect: handleReasonChange, "aria-labelledby": titleId, "aria-invalid": props.isInValid, "aria-describedby": "validate-reason-helper" })),
+            props.noClusterIdReason === 'Other' && (React.createElement("div", { className: "text-input-wrapper" },
+                React.createElement(TextInputGroup, null,
+                    React.createElement(TextInputGroupMain, { value: inputValue, onChange: handleInputChange, placeholder: t('Briefly describe your reason'), "aria-label": t('Other reason description') }))))),
         React.createElement(LoadingIndicator, { show: caseNoClusterIdReasons.isFetching, size: "xs" }),
         React.createElement("p", { id: "validate-reason-helper", className: `form-instructions ${props.isInValid ? 'form-invalid' : ''}` },
             React.createElement(React.Fragment, null,
-                props.isInValid && React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v5-u-mr-sm" }),
+                props.isInValid && React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v6-u-mr-sm" }),
                 ' ',
                 notRegistered ? (registerMyClusterID()) : (React.createElement(Trans, null, "Describing your reason can help us better understand and support your issue."))))));
 };

package/lib/esm/components/CaseManagement/OpenShiftClusterId.js

@@ -29,7 +29,7 @@ export const v3Tov4TransitionLink = () => (React.createElement("a", { className:
     React.createElement(Trans, null, "How to transition from v3 to v4?")));
 export const discoverV4ClusterIdLink = () => (React.createElement("a", { className: "show-target", href: "/solutions/4505861", target: "_blank", rel: "noopener noreferrer" }, "How do I determine my OpenShift 4.x Cluster ID?"));
 export const discoverV4ClusterIdLinkError = () => (React.createElement(React.Fragment, null,
-    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v5-u-mr-sm" }),
+    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v6-u-mr-sm" }),
     React.createElement(Trans, { i18nKey: 'v4ClusterRequiredField' },
         "Cluster ID is required.",
         React.createElement("div", null,

package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenshiftDropdownV4.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAI5E,OAAO,EAAE,gBAAgB,EAAuB,MAAM,0BAA0B,CAAC;AAIjF,OAAO,KAA2D,MAAM,OAAO,CAAC;AAOhF,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iCAAiC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAuBD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAsXzC;kBAtXQ,mBAAmB;;;AAyX5B,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"OpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenshiftDropdownV4.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAiB5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,KAA2D,MAAM,OAAO,CAAC;AAOhF,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iCAAiC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAuBD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBA6bzC;kBA7bQ,mBAAmB;;;AAgc5B,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.js

@@ -8,9 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { cloud } from '@cee-eng/hydrajs';
-import { Checkbox, Divider } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
-import { useLRUCache } from '@rh-support/components';
+import { Button, Checkbox, Divider, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { useLRUCache, useSelectKeyboardNavigator } from '@rh-support/components';
 import debounce from 'lodash/debounce';
 import groupBy from 'lodash/groupBy';
 import isEmpty from 'lodash/isEmpty';
@@ -45,12 +45,12 @@ function OpenshiftDropdownV4(props) {
     const abortControllerRef = useRef();
     const [clustersSelectOptions, setClustersSelectOptions] = useState([]);
     const [isOpen, setIsOpen] = useState(false);
-    const [validated, setValidated] = useState('default');
     const [inputVal, setInputVal] = useState('');
     const [showArchivedClusters, setShowArchivedClusters] = useState(false);
     const [isFetchingClusters, setIsFetchingClusters] = useState(false);
     const [totalResultsNo, setTotalResultsNo] = useState(0);
     const { getFromCache, setInCache } = useLRUCache(50);
+    const textInputRef = useRef();
     const { isExportingPDF } = useContext(PDFContext);
     // gets a cluster id and returns display name
     const getDisplayName = (id, noClusterIdReasonExplanation, display_name) => {
@@ -74,7 +74,7 @@ function OpenshiftDropdownV4(props) {
         setTotalResultsNo(fetchedClusters.total);
         setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
     });
-    const onToggle = (isOpen) => setIsOpen(isOpen);
+    const onToggle = () => setIsOpen(!isOpen);
     const onViewMoreClick = () => __awaiter(this, void 0, void 0, function* () {
         const page = Math.floor(clustersRawResponse.length / PER_PAGE) + 1;
         const fetchedClusters = yield fetchAccountClusters(inputVal, page);
@@ -85,31 +85,60 @@ function OpenshiftDropdownV4(props) {
     });
     const onSelect = (event, selectedCluster) => __awaiter(this, void 0, void 0, function* () {
         setInputVal('');
-        if (event.target.tagName !== 'BUTTON') {
-            // checkbox is clicked
+        if (selectedCluster.type === 'checkbox') {
             setShowArchivedClusters(!showArchivedClusters);
-            // reset
             props.onClusterClear();
             setClustersRawResponse([]);
         }
         else {
             props.onClusterIdStateUpdate(selectedCluster);
+            const displayName = selectedCluster.display_name || selectedCluster.toString();
+            setInputVal(displayName);
             setIsOpen(false);
         }
     });
+    // Define dropdown options for keyboard navigation
+    const dropdownOptions = useMemo(() => [
+        { type: 'checkbox', key: 'show-hide-archived-clusters', label: t('Show archived clusters') },
+        { type: 'option', key: 'dont-have-id', label: t("I don't have my Cluster ID") },
+        ...(props.isV3 ? [{ type: 'option', key: 'v3-cluster', label: t('The case is for a v3 cluster') }] : []),
+    ], [props.isV3, t]);
+    // Use the keyboard navigation hook
+    const { focusedItemIndex, onInputKeyDown } = useSelectKeyboardNavigator({
+        list: dropdownOptions,
+        isOpen,
+        resetIndexOnClose: true,
+        isDisabled: props.isDisabled,
+        setIsOpen,
+        onSelect: (item) => {
+            if (item.type === 'checkbox') {
+                setShowArchivedClusters(!showArchivedClusters);
+                props.onClusterClear();
+                setClustersRawResponse([]);
+            }
+            else if (item.key === 'dont-have-id') {
+                props.onClusterIdStateUpdate(createState('dont-have-id', t("I don't have my Cluster ID")));
+                setIsOpen(false);
+            }
+            else if (item.key === 'v3-cluster') {
+                props.onClusterIdStateUpdate(createState('v3-cluster', t('The case is for a v3 cluster')));
+                setIsOpen(false);
+            }
+        },
+    });
     const dropdownHeaderOptions = useMemo(() => [
-        React.createElement(SelectOption, { key: 'show-hide-archived-clusters', inputId: "check-box" },
-            React.createElement(Checkbox, { label: t('Show archived clusters'), key: "show-archived-clusters", "aria-label": t('Show archived clusters'), id: "show-archived-clusters", "data-tracking-id": "show-hide-archived-clusters", isChecked: showArchivedClusters, className: "archived-clusters-checkbox" })),
+        React.createElement(SelectOption, { key: 'show-hide-archived-clusters', value: { type: 'checkbox' } },
+            React.createElement(Checkbox, { label: t('Show archived clusters'), key: "show-archived-clusters", "aria-label": t('Show archived clusters'), id: "show-archived-clusters", "data-tracking-id": "show-hide-archived-clusters", isChecked: showArchivedClusters || false, className: "archived-clusters-checkbox" })),
         React.createElement(Divider, { component: "div", key: 'cluster-id-options-divider-e' }),
-        React.createElement(SelectOption, { key: 'dont-have-id', value: createState('dont-have-id', t("I don't have my Cluster ID")), "data-tracking-id": "dont-have-cluster-id" }),
+        React.createElement(SelectOption, { key: 'dont-have-id', value: createState('dont-have-id', t("I don't have my Cluster ID")), "data-tracking-id": "dont-have-cluster-id", isFocused: focusedItemIndex === 1 }, "I don't have my Cluster ID"),
         ...(props.isV3
             ? [
-                React.createElement(SelectOption, { key: 'v3-cluster', value: createState('v3-cluster', t('The case is for a v3 cluster')) }),
+                React.createElement(SelectOption, { key: 'v3-cluster', value: createState('v3-cluster', t('The case is for a v3 cluster')), isFocused: focusedItemIndex === 2 }),
             ]
             : []),
     ], 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [showArchivedClusters]);
+    [showArchivedClusters, focusedItemIndex]);
     const getClusterOptions = (clusters) => {
         const clustersResponseGrouped = groupBy(clusters, 'console_url') || [];
         const domainNames = Object.keys(clustersResponseGrouped) || [];
@@ -124,13 +153,16 @@ function OpenshiftDropdownV4(props) {
         const clusterOptions = [];
         domainNames.forEach((domain, index) => {
             domain !== '' &&
-                clusterOptions.push(React.createElement(SelectOption, { isDisabled: true, className: "pf-v5-u-font-weight-bold pf-v5-u-color-400", value: createState(domain, domain), key: domain + index }));
+                clusterOptions.push(React.createElement(SelectOption, { isDisabled: true, className: "pf-v6-u-font-weight-bold pf-v6-u-color-400", value: createState(domain, domain), key: domain + index }));
             clustersResponseGrouped[domain] &&
                 clustersResponseGrouped[domain].forEach((cluster, i) => {
                     clusterOptions.push(React.createElement(SelectOption, { key: cluster.external_cluster_id, value: createState(cluster.external_cluster_id, getDisplayNameForCluster(cluster) || cluster.external_cluster_id, cluster.openshift_version) }));
                 });
             clusterOptions.push(React.createElement(Divider, { component: "div", key: index + domain }));
         });
+        if (!isFetchingClusters && clustersRawResponse.length < totalResultsNo) {
+            clusterOptions.push(React.createElement(SelectOption, { key: "load-more-option", value: {}, onClick: onViewMoreClick, isDisabled: false, className: "pf-v6-u-font-weight-bold" }, "Display additional results"));
+        }
         return [
             ...dropdownHeaderOptions,
             ...(clusterOptions.length !== 0 ? [React.createElement(Divider, { component: "div", key: 'cluster-id-options-divider' })] : []),
@@ -255,24 +287,17 @@ function OpenshiftDropdownV4(props) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.isV3, showArchivedClusters, isOpen, inputVal]);
-    useEffect(() => {
-        if (props.isClusterIdInvalid) {
-            setValidated('error');
-        }
-        else {
-            setValidated('default');
-        }
-    }, [props.isClusterIdInvalid]);
-    // when user type or paste a clusterId we land here
-    const onTypeaheadInputChanged = (input) => __awaiter(this, void 0, void 0, function* () {
-        setInputVal(input);
-        const fetchedClusters = yield fetchAccountClusters(input);
+    const onTextInputChange = (_event, value) => {
+        setInputVal(value);
+        props.onClusterIdStateUpdate({ external_cluster_id: value });
+        debounceFn(value);
+    };
+    const debounceFn = debounce((value) => __awaiter(this, void 0, void 0, function* () {
+        const fetchedClusters = yield fetchAccountClusters(value);
         setClustersRawResponse(fetchedClusters.items);
         setTotalResultsNo(fetchedClusters.total);
         setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
-        props.onClusterIdStateUpdate({ external_cluster_id: input });
-    });
-    const debounceFn = debounce(onTypeaheadInputChanged, 500);
+    }), 500);
     const getSelectedItem = () => {
         if (!isEmpty(inputVal)) {
             return createState(props.openshiftClusterIDState, inputVal);
@@ -281,6 +306,12 @@ function OpenshiftDropdownV4(props) {
             return createState(props.openshiftClusterIDState, getDisplayName(props.openshiftClusterIDState, props.noClusterIdReasonExplanation || '', props.openshiftDisplayName || props.openshiftClusterIDState));
         }
     };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggle, onKeyDown: onInputKeyDown, isExpanded: isOpen, isFullWidth: true, isDisabled: props.isDisabled },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: inputVal, onClick: onToggle, onChange: onTextInputChange, onKeyDown: onInputKeyDown, autoComplete: "off", innerRef: textInputRef, placeholder: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), role: "combobox", isExpanded: isOpen, "aria-controls": "openshift-cluster-selector-listbox" }),
+            isFetchingClusters ? (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Spinner, { size: "md" }))) : (inputVal && (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onDropdownClear, "aria-label": t('Clear input value') })))))));
     const titleId = 'case-details-cluster-nickname-selector';
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `${props.className} form-group` },
@@ -289,13 +320,8 @@ function OpenshiftDropdownV4(props) {
                 React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true }, "*"),
                 !isExportingPDF ? React.createElement(CaseOpenShiftPopover, null) : ''),
             React.createElement("span", { id: titleId, hidden: true }, "Select a state"),
-            React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, isDisabled: props.isDisabled, typeAheadAriaLabel: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, onClear: !isExportingPDF ? onDropdownClear : undefined, selections: getSelectedItem(), isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), hasInlineFilter: false, onTypeaheadInputChanged: debounceFn, onFilter: () => undefined, validated: validated, "aria-invalid": props.isClusterIdInvalid, "aria-describedby": "clusterID-validate-helper", required: true }, (isFetchingClusters && { loadingVariant: 'spinner' }), (!isFetchingClusters &&
-                clustersRawResponse.length < totalResultsNo && {
-                loadingVariant: {
-                    text: 'Display additional results',
-                    onClick: onViewMoreClick,
-                },
-            }), { "data-tracking-id": "openshift-cluster-id", className: "openshift-cluster-id" }), clustersSelectOptions),
+            React.createElement(Select, { id: "openshift-cluster-selector", isOpen: isOpen, selected: getSelectedItem(), onSelect: onSelect, onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: toggle, shouldFocusFirstItemOnOpen: true, isScrollable: true, "aria-invalid": props.isClusterIdInvalid, "aria-describedby": "clusterID-validate-helper", "data-tracking-id": "openshift-cluster-id", className: "openshift-cluster-id" },
+                React.createElement(SelectList, { id: "openshift-cluster-selector-listbox" }, clustersSelectOptions)),
             React.createElement("div", { id: "clusterID-validate-helper", className: `form-instructions ${props.isClusterIdInvalid ? 'form-invalid' : ''}` }, props.clusterIdDropdownFormInstructions))));
 }
 OpenshiftDropdownV4.defaultProps = defaultProps;

package/lib/esm/components/CaseManagement/RHAssociatesSelector.js

@@ -121,7 +121,7 @@ function RHAssociatesSelector(props) {
                 }, placeholder: t(`Add an internal associate to watch this case`), onSelect: onNotifiedUserChange, renderToken: renderToken, isUpdating: isRHAssociatesUpdating, "data-tracking-id": "case-contact-select-rh-watcher" })),
         caseNumber && showAddWatchButton() && !isExportingPDF && (React.createElement(Button, { variant: "secondary", onClick: addCurrentUser, type: "button", "data-tracking-id": "case-add-me-rh-watcher" },
             React.createElement(Trans, null, "Add me as a watcher"))),
-        caseNumber && showRemoveWatchButton() && !isExportingPDF && (React.createElement("div", { ref: toolTipRef, className: "remove-me-as-watcher pf-v5-u-display-inline-block" }, isCurrentUserCaseContact ? (React.createElement(React.Fragment, null,
+        caseNumber && showRemoveWatchButton() && !isExportingPDF && (React.createElement("div", { ref: toolTipRef, className: "remove-me-as-watcher pf-v6-u-display-inline-block" }, isCurrentUserCaseContact ? (React.createElement(React.Fragment, null,
             React.createElement(Tooltip, { trigger: 'mouseenter focus', triggerRef: toolTipRef, position: TooltipPosition.top, content: React.createElement(Trans, null, "You are case contact and therefore you cannot be removed as watcher") }),
             React.createElement(Button, { variant: "tertiary", onClick: removeCurrentUser, type: "button", isDisabled: true, "data-tracking-id": "case-remove-me-rh-watcher-case-contact" },
                 React.createElement(Trans, null, "Remove me as a watcher")))) : (React.createElement(Button, { variant: "secondary", onClick: removeCurrentUser, type: "button", "data-tracking-id": "case-remove-me-rh-watcher" },

package/lib/esm/components/CaseManagement/SendNotifications/AddContactToGroupModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddContactToGroupModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/AddContactToGroupModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAGvF,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,UAAU,CAAC;IAC9B,eAAe,EAAE,UAAU,CAAC;IAC5B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBAuDnD"}
+{"version":3,"file":"AddContactToGroupModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/AddContactToGroupModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAGvF,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,UAAU,CAAC;IAC9B,eAAe,EAAE,UAAU,CAAC;IAC5B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBAkDnD"}

package/lib/esm/components/CaseManagement/SendNotifications/AddContactToGroupModal.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Button, Modal, ModalVariant, TextInput } from '@patternfly/react-core';
+import { Button, Modal, ModalFooter, ModalVariant, TextInput } from '@patternfly/react-core';
 import { ToastNotification, useFetch } from '@rh-support/components';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -30,16 +30,16 @@ export function AddContactToGroupModal(props) {
     const handleClose = () => {
         props.onClose && props.onClose();
     };
-    return (React.createElement(Modal, { variant: ModalVariant.medium, title: t('Add to a group'), isOpen: true, onClose: handleClose, actions: [
-            React.createElement(Button, { spinnerAriaValueText: isFetching ? t('Adding') : undefined, isLoading: isFetching, key: "confirm", variant: "primary", onClick: onAdd, isDisabled: isFetching },
-                React.createElement(Trans, null, "Add")),
-            React.createElement(Button, { key: "cancel", variant: "link", onClick: handleClose },
-                React.createElement(Trans, null, " Cancel")),
-        ] },
+    return (React.createElement(Modal, { variant: ModalVariant.medium, title: t('Add to a group'), isOpen: true, onClose: handleClose },
         React.createElement("label", { htmlFor: "group-member" },
             React.createElement(Trans, null, "New group member")),
         React.createElement(TextInput, { id: "group-member", isDisabled: true, value: props.selectedContact.ssoUsername }),
         React.createElement("label", { htmlFor: "group-selector" },
             React.createElement(Trans, null, "Group")),
-        React.createElement(TextInput, { id: "group-selector", value: props.selectedCaseGroup.name, isDisabled: true })));
+        React.createElement(TextInput, { id: "group-selector", value: props.selectedCaseGroup.name, isDisabled: true }),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { spinnerAriaValueText: isFetching ? t('Adding') : undefined, isLoading: isFetching, key: "confirm", variant: "primary", onClick: onAdd, isDisabled: isFetching },
+                React.createElement(Trans, null, "Add")),
+            React.createElement(Button, { key: "cancel", variant: "link", onClick: handleClose },
+                React.createElement(Trans, null, " Cancel")))));
 }

package/lib/esm/components/CaseManagement/SendNotifications/AddCustomEmailToAccountModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddCustomEmailToAccountModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/AddCustomEmailToAccountModal.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,UAAU,MAAM;IACZ,kBAAkB,EAAE,MAAM,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBAsGpD"}
+{"version":3,"file":"AddCustomEmailToAccountModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/AddCustomEmailToAccountModal.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,UAAU,MAAM;IACZ,kBAAkB,EAAE,MAAM,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBAsGpD"}

package/lib/esm/components/CaseManagement/SendNotifications/AddCustomEmailToAccountModal.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { customEmail } from '@cee-eng/hydrajs';
-import { Button, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalVariant, TextInput, ValidatedOptions, } from '@patternfly/react-core';
+import { Button, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalFooter, ModalVariant, TextInput, ValidatedOptions, } from '@patternfly/react-core';
 import { ToastNotification, useFetch } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
 import React, { useState } from 'react';
@@ -45,13 +45,8 @@ export function AddCustomEmailToAccount(props) {
         : isEmpty(firstName.trim())
             ? ValidatedOptions.error
             : ValidatedOptions.default;
-    return (React.createElement(Modal, { variant: ModalVariant.medium, title: t('Add a notification email to your account'), isOpen: true, onClose: handleClose, onEscapePress: handleClose, actions: [
-            React.createElement(Button, { spinnerAriaValueText: isFetching ? t('Adding') : undefined, isLoading: isFetching, key: "confirm", variant: "primary", onClick: onAdd, isDisabled: isFetching || (isSaveButtonClicked && isEmpty(firstName.trim())) },
-                React.createElement(Trans, null, "Add to account")),
-            React.createElement(Button, { key: "cancel", variant: "link", onClick: handleClose, isDisabled: isFetching },
-                React.createElement(Trans, null, "Cancel")),
-        ] },
-        React.createElement("p", { className: "pf-v5-u-mb-lg" },
+    return (React.createElement(Modal, { variant: ModalVariant.medium, title: t('Add a notification email to your account'), isOpen: true, onClose: handleClose, onEscapePress: handleClose },
+        React.createElement("p", { className: "pf-v6-u-mb-lg" },
             React.createElement(Trans, null, "Note: This email will be added at an account level, not a case level.")),
         React.createElement(Form, null,
             React.createElement(FormGroup, { label: t('New email address'), fieldId: "custom-email-address", isRequired: true },
@@ -62,6 +57,11 @@ export function AddCustomEmailToAccount(props) {
                         React.createElement(HelperTextItem, { variant: "error" },
                             React.createElement(Trans, null, "First name cannot be empty"))))),
                 React.createElement(TextInput, { id: "custom-email-firstName", value: firstName, isRequired: true, type: "text", validated: firstNameValidated, onChange: (_event, firstName) => onFirstNameChange(firstName), "aria-label": t('First name'), placeholder: t('First name'), maxLength: 254 })),
-            React.createElement(FormGroup, { label: t('Last name'), fieldId: "custom-email-lastName", className: "pf-v5-u-mb-md" },
-                React.createElement(TextInput, { id: "custom-email-lastName", value: lastName, type: "text", onChange: (_event, lastName) => onLastNameChange(lastName), "aria-label": t('Last name'), placeholder: t('Last name'), maxLength: 254 })))));
+            React.createElement(FormGroup, { label: t('Last name'), fieldId: "custom-email-lastName", className: "pf-v6-u-mb-md" },
+                React.createElement(TextInput, { id: "custom-email-lastName", value: lastName, type: "text", onChange: (_event, lastName) => onLastNameChange(lastName), "aria-label": t('Last name'), placeholder: t('Last name'), maxLength: 254 }))),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { spinnerAriaValueText: isFetching ? t('Adding') : undefined, isLoading: isFetching, key: "confirm", variant: "primary", onClick: onAdd, isDisabled: isFetching || (isSaveButtonClicked && isEmpty(firstName.trim())) },
+                React.createElement(Trans, null, "Add to account")),
+            React.createElement(Button, { key: "cancel", variant: "link", onClick: handleClose, isDisabled: isFetching },
+                React.createElement(Trans, null, "Cancel")))));
 }

package/lib/esm/components/CaseManagement/SendNotifications/CaseContactSelector.js

@@ -259,7 +259,7 @@ function CaseContactSelector(props) {
     const getCreateNewText = (query) => `Add to your account: ${query}`;
     if (!canSeeEmailNotifications)
         return React.createElement(React.Fragment, null);
-    return (React.createElement("div", { className: "form-group pf-v5-u-mb-md" },
+    return (React.createElement("div", { className: "form-group pf-v6-u-mb-md" },
         React.createElement("label", { className: "react-typeahead-label-wrapper", htmlFor: "get-support-notifications" },
             React.createElement(Trans, null, "Send notifications"),
             loggedInUserRights.data.isOrgAdmin() ? (React.createElement(React.Fragment, null,
@@ -286,7 +286,7 @@ function CaseContactSelector(props) {
                     React.createElement(Button, { variant: "link", isInline: true, component: "span", onClick: onAddEmailToAccountBtnClick }, "add them at the account level"))))),
                 caseNumber && showAddWatchButton() && !isExportingPDF && (React.createElement(Button, { variant: "secondary", onClick: addCurrentUser, type: "button", "data-tracking-id": "case-add-me-watcher" },
                     React.createElement(Trans, null, "Add me as a watcher"))),
-                caseNumber && showRemoveWatchButton() && !isExportingPDF && (React.createElement("div", { ref: toolTipRef, className: "remove-me-as-watcher pf-v5-u-display-inline-block" }, isCurrentUserCaseContact ? (React.createElement(React.Fragment, null,
+                caseNumber && showRemoveWatchButton() && !isExportingPDF && (React.createElement("div", { ref: toolTipRef, className: "remove-me-as-watcher pf-v6-u-display-inline-block" }, isCurrentUserCaseContact ? (React.createElement(React.Fragment, null,
                     React.createElement(Tooltip, { trigger: 'mouseenter focus', triggerRef: toolTipRef, position: TooltipPosition.top, content: React.createElement(Trans, null, "You are case contact and therefore you cannot be removed as watcher") }),
                     React.createElement(Button, { variant: "tertiary", onClick: removeCurrentUser, type: "button", isDisabled: true, "data-tracking-id": "case-remove-me-watcher" },
                         React.createElement(Trans, null, "Remove me as a watcher")))) : (React.createElement(Button, { variant: "secondary", onClick: removeCurrentUser, type: "button", "data-tracking-id": "case-remove-me-watcher" },

package/lib/esm/components/CaseManagement/SendNotifications/NonOrgCaseNotifyeesSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NonOrgCaseNotifyeesSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/NonOrgCaseNotifyeesSelector.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,oBAAoB,EAAY,MAAM,wBAAwB,CAAC;AAE9F,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAA+B,MAAM,OAAO,CAAC;AAIpD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,aAAa,EAAE,oBAAoB,EAAE,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,aAAa,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC1C,kBAAkB,EAAE,MAAM,CAAC;CAC9B;AAeD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,qBA4JxD"}
+{"version":3,"file":"NonOrgCaseNotifyeesSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseManagement/SendNotifications/NonOrgCaseNotifyeesSelector.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAwB,oBAAoB,EAAY,MAAM,wBAAwB,CAAC;AAE9F,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,aAAa,EAAE,oBAAoB,EAAE,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,aAAa,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC1C,kBAAkB,EAAE,MAAM,CAAC;CAC9B;AAqCD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,qBA0MxD"}

package/lib/esm/components/CaseManagement/SendNotifications/NonOrgCaseNotifyeesSelector.js

@@ -19,11 +19,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { accounts } from '@cee-eng/hydrajs';
-import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, Label, LabelGroup, Menu, MenuContent, MenuItem, MenuList, Popper, TextInput, } from '@patternfly/react-core';
 import { getHydraContactLabel, useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import React, { useContext, useState } from 'react';
-import { Highlighter, Token, Typeahead } from 'react-bootstrap-typeahead';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans } from 'react-i18next';
 const isCustomEmailAddress = (user) => {
     return !!(user === null || user === void 0 ? void 0 : user.emailAddress);
@@ -35,18 +34,41 @@ const getKey = (option) => {
     if (isCustomEmailAddress(option))
         return option.emailAddress;
     if (isContact(option))
-        return option.ssoUsername;
+        return option.ssoUsername || '';
+    return '';
+};
+const CustomHighlighter = ({ search, children }) => {
+    if (!search)
+        return React.createElement(React.Fragment, null, children);
+    const regex = new RegExp(`(${search})`, 'gi');
+    const parts = children.split(regex);
+    return (React.createElement(React.Fragment, null, parts.map((part, index) => regex.test(part) ? (React.createElement("mark", { key: index, style: { backgroundColor: '#fff3cd' } }, part)) : (part))));
 };
 export function NonOrgCaseNotifyeesSelector(props) {
     const [inputVal, setInputVal] = useState('');
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const inputRef = useRef(null);
+    const menuRef = useRef(null);
     const { request, isFetching } = useFetch(accounts.searchAccountForContactAndNotificationAddress);
     const [notifyeesList, setNotifyeesList] = useState([]);
     const { globalMetadataState: { loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
     const [showGroupPermissionError, setShowGroupPermissionError] = useState(false);
     const [showAccountPermissionError, setShowAccountPermissionError] = useState(false);
-    const onItemSelect = (selected) => {
-        props.onChange && props.onChange(selected);
+    useEffect(() => {
+        if (props.typeaheadRef) {
+            props.typeaheadRef.current = inputRef.current;
+        }
+    }, [props.typeaheadRef]);
+    const onItemSelect = (option) => {
+        const newSelected = [...props.selectedItems, option];
+        props.onChange && props.onChange(newSelected);
+        setInputVal('');
         clearList();
+        setIsDropdownOpen(false);
+    };
+    const onRemoveItem = (optionToRemove) => {
+        const newSelected = props.selectedItems.filter((item) => getKey(item) !== getKey(optionToRemove));
+        props.onChange && props.onChange(newSelected);
     };
     const onAddClick = () => __awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c;
@@ -62,7 +84,11 @@ export function NonOrgCaseNotifyeesSelector(props) {
                 const { ssoName } = c, rest = __rest(c, ["ssoName"]);
                 return Object.assign({ ssoUsername: ssoName }, rest);
             });
-            setNotifyeesList([...mappedContacts, { emailAddress: notificationAddress.email }]);
+            setNotifyeesList([
+                ...mappedContacts,
+                { emailAddress: notificationAddress.email, caseNumber: '' },
+            ]);
+            setIsDropdownOpen(true);
         }
         else {
             if (notificationAddress === null || notificationAddress === void 0 ? void 0 : notificationAddress.email) {
@@ -102,22 +128,37 @@ export function NonOrgCaseNotifyeesSelector(props) {
             setInputVal(val);
         }
         clearList();
+        setIsDropdownOpen(false);
     };
-    const renderToken = (option, thProps, idx) => {
-        const isContactOption = isContact(option);
-        const isCurrentUserCaseContact = option.ssoUsername === props.contactSsoUsername;
-        return (React.createElement(Token, { option: option, key: idx, onRemove: thProps.onRemove, disabled: (props.isChipDisabled && isContactOption) || isCurrentUserCaseContact }, getHydraContactLabel(option)));
-    };
-    const renderMenuItemChildren = (option, p) => (React.createElement(Highlighter, { key: getKey(option), search: p.text }, getHydraContactLabel(option)));
-    const onBlur = () => {
+    const onBlur = (event) => {
+        if (menuRef.current && menuRef.current.contains(event.relatedTarget)) {
+            return;
+        }
         clearList();
+        setIsDropdownOpen(false);
+    };
+    const renderSelectedItems = () => {
+        if (props.selectedItems.length === 0)
+            return null;
+        return (React.createElement(LabelGroup, { style: { marginBottom: '8px' } }, props.selectedItems.map((option, index) => {
+            const isContactOption = isContact(option);
+            const isCurrentUserCaseContact = isContactOption && option.ssoUsername === props.contactSsoUsername;
+            const isDisabled = (props.isChipDisabled && isContactOption) || isCurrentUserCaseContact;
+            return (React.createElement(Label, { key: getKey(option) || index, onClose: !isDisabled ? () => onRemoveItem(option) : undefined, closeBtnAriaLabel: `Remove ${getHydraContactLabel(option)}`, variant: "outline" }, getHydraContactLabel(option)));
+        })));
     };
+    const menu = (React.createElement(Menu, { ref: menuRef },
+        React.createElement(MenuContent, null,
+            React.createElement(MenuList, null, notifyeesList.map((option, index) => (React.createElement(MenuItem, { key: getKey(option) || index, onClick: () => onItemSelect(option) },
+                React.createElement(CustomHighlighter, { search: inputVal }, getHydraContactLabel(option)))))))));
     return (React.createElement(Flex, null,
         React.createElement(FlexItem, { grow: { sm: 'grow' } },
-            React.createElement(Typeahead, { id: props.id, "data-tracking-id": props.dataTrackingId, onChange: onItemSelect, onInputChange: onInputChange, open: notifyeesList.length > 0, ref: props.typeaheadRef, selected: props.selectedItems, placeholder: props.placeholder, disabled: props.isDisabled || isFetching, options: notifyeesList, renderToken: renderToken, multiple: true, filterBy: () => true, labelKey: getHydraContactLabel, renderMenuItemChildren: renderMenuItemChildren, onBlur: onBlur, isInvalid: showGroupPermissionError || showAccountPermissionError }),
+            React.createElement("div", null,
+                renderSelectedItems(),
+                React.createElement(Popper, { trigger: React.createElement(TextInput, { ref: inputRef, id: props.id, "data-tracking-id": props.dataTrackingId, value: inputVal, onChange: (event, value) => onInputChange(value), placeholder: props.placeholder, isDisabled: props.isDisabled || isFetching, onBlur: onBlur, validated: showGroupPermissionError || showAccountPermissionError ? 'error' : 'default' }), popper: menu, isVisible: isDropdownOpen && notifyeesList.length > 0, position: "start" })),
             props.selectedItems.length > 0 && !showAccountPermissionError && !showAccountPermissionError && (React.createElement("p", { className: "form-instructions" },
                 React.createElement(Trans, null, "Enter an email address or username for the person you want to notify"))),
-            React.createElement("p", { className: "pf-v5-c-form__helper-text pf-m-error", style: { color: '#c9190b' } },
+            React.createElement("p", { className: "pf-v6-c-form__helper-text pf-m-error", style: { color: '#c9190b' } },
                 showGroupPermissionError && (React.createElement(Trans, null,
                     inputVal,
                     " was not found under the selected group. Please contact your Org Admin to add them to this group.")),

package/lib/esm/components/ConfirmationModals/NoAttachmentSelectedModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NoAttachmentSelectedModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfirmationModals/NoAttachmentSelectedModal.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAiBvE,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,qBAuJtD"}
+{"version":3,"file":"NoAttachmentSelectedModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfirmationModals/NoAttachmentSelectedModal.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAiBvE,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,qBAiJtD"}