@rh-support/troubleshoot 2.7.1 → 2.7.11

package/lib/esm/components/shared/fileUpload/types/index.d.ts

@@ -1,10 +1,14 @@
 export interface IFileUploaderCommonProps {
-    isSecureSupport: boolean;
+    isSecureSupport?: boolean;
     idToUploadTo: string;
+    /** Salesforce case Id from caseDetails.state — avoids an extra GetCaseByCaseNumber on upload. */
+    caseSalesforceId?: string;
     needsAnalyzing?: boolean;
     isSessionId: boolean;
     autoUploadOnSelect?: boolean;
     isPrivate?: boolean;
     onUploadClick?: () => void;
+    /** Fired after each successful case attachment upload so discussion can refresh immediately. */
+    onCaseFileUploaded?: () => void;
 }
 //# sourceMappingURL=index.d.ts.map

package/lib/esm/components/shared/fileUpload/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/fileUpload/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,wBAAwB;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/fileUpload/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,wBAAwB;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,iGAAiG;IACjG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gGAAgG;IAChG,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC"}

package/lib/esm/components/shared/fileUpload/useFileUploader.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { IFileLocal } from './reducer/AttachmentReducer';
 import { IFileUploaderCommonProps } from './types';
 export declare function useFileUploader(props: IFileUploaderCommonProps): {
-    retryUpload: (indexToRetry: number) => void;
+    retryUpload: (indexToRetry: number) => Promise<void>;
     editFile: (editedLocalFile: IFileLocal, fileIndexToEdit: number, changes: IFileLocal) => Promise<void>;
     removeFile: (fileIndexToRemove: number, file: IFileLocal) => Promise<void>;
     uploadAll: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void>;
-    uploadFile: (fileIndex: number) => void;
+    uploadFile: (fileIndex: number) => Promise<void>;
     retryAnalysis: (indexToRetry: number) => void;
 };
 //# sourceMappingURL=useFileUploader.d.ts.map

package/lib/esm/components/shared/fileUpload/useFileUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFileUploader.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/fileUpload/useFileUploader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8D,MAAM,OAAO,CAAC;AAenF,OAAO,EAAE,UAAU,EAAmD,MAAM,6BAA6B,CAAC;AAE1G,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAEnD,wBAAgB,eAAe,CAAC,KAAK,EAAE,wBAAwB;gCA8DvB,MAAM;gCAYM,UAAU,mBAAmB,MAAM,WAAW,UAAU;oCAOpD,MAAM,QAAQ,UAAU;wBAczC,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC;4BA4BjD,MAAM;kCAxDA,MAAM;EA8EhD"}
+{"version":3,"file":"useFileUploader.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/fileUpload/useFileUploader.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA8D,MAAM,OAAO,CAAC;AAgBnF,OAAO,EACH,UAAU,EAKb,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAKnD,wBAAgB,eAAe,CAAC,KAAK,EAAE,wBAAwB;gCA8JjB,MAAM;gCAYA,UAAU,mBAAmB,MAAM,WAAW,UAAU;oCAOpD,MAAM,QAAQ,UAAU;wBAxGzD,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC;4BAwJ3B,MAAM;kCA9DN,MAAM;EAwFhD"}

package/lib/esm/components/shared/fileUpload/useFileUploader.js

@@ -7,37 +7,111 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { caseAttachments, sessionAttachments } from '@cee-eng/hydrajs';
+import { useApolloClient } from '@apollo/client/react';
+import { sessionAttachments } from '@cee-eng/hydrajs';
 import { useFetch, usePrevious } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { getConfigField, getUserAgentForCaseMode, PCM_CONFIG_FIELD_TYPE } from '@rh-support/utils';
+import { deleteCaseAttachment, fetchCaseDetailsByCaseNumber, getConfigField, getUserAgentForCaseMode, PCM_CONFIG_FIELD_TYPE, } from '@rh-support/utils';
 import debounce from 'lodash/debounce';
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { SessionRestoreDispatchContext, SessionRestoreStateContext } from '../../../context/SessionRestoreContext';
 import { SESSION_REFERRER_URL_LIMIT } from '../../../reducers/CaseConstNTypes';
 import { getSessionDetailsFromCase } from '../../../reducers/CaseHelpers';
 import { createSession } from '../../../reducers/SessionRestoreReducer';
-import { doSosReportAnalysisForFile, isAnalysingAnyAttachment, isUploadedSuccessfully, isUploadingAttachment, updateUploadMetadata, uploadAllFiles, uploadFile, } from './reducer/AttachmentHelper';
-import { onFileEdit, onFileRemove, UploadStatusConstants } from './reducer/AttachmentReducer';
+import { doSosReportAnalysisForFile, hasSomeSelectedFiles, isAnalysingAnyAttachment, isUploadedSuccessfully, isUploadingAttachment, updateUploadMetadata, uploadAllFiles, uploadFile, } from './reducer/AttachmentHelper';
+import { onFileEdit, onFileRemove, resetAttachment, UploadStatusConstants, } from './reducer/AttachmentReducer';
 import { AttachmentDispatchContext, AttachmentStateContext } from './reducer/AttachmentReducerContext';
+/** Wait for staggered onDrop dispatches before auto-uploading. */
+const AUTO_UPLOAD_ON_SELECT_DEBOUNCE_MS = 300;
 export function useFileUploader(props) {
+    var _a;
     const { attachmentState, attachmentState: { caseFiles }, } = useContext(AttachmentStateContext);
     const dispatch = useContext(AttachmentDispatchContext);
+    const apolloClient = useApolloClient();
+    const caseSalesforceIdRef = useRef();
     const { request: deleteSessionAttachment } = useFetch(sessionAttachments.deleteSesionAttachment);
-    const { request: deleteCaseAttachment } = useFetch(caseAttachments.deleteAttachment);
-    const { idToUploadTo, needsAnalyzing, isSecureSupport, isSessionId, autoUploadOnSelect, onUploadClick } = props;
-    const { globalMetadataState: { pcmConfig, referrerUrl, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const { request: deleteCaseAttachmentRequest } = useFetch(deleteCaseAttachment);
+    const { idToUploadTo, caseSalesforceId, needsAnalyzing, isSessionId, autoUploadOnSelect, onUploadClick, onCaseFileUploaded, } = props;
+    useEffect(() => {
+        if (caseSalesforceId) {
+            caseSalesforceIdRef.current = caseSalesforceId;
+        }
+    }, [caseSalesforceId]);
+    const { globalMetadataState: { pcmConfig, referrerUrl, loggedInUserRights, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
     const { sessionRestore } = useContext(SessionRestoreStateContext);
     const sessionRestoreDispatch = useContext(SessionRestoreDispatchContext);
     const checkForS3SlowUploads = getConfigField(pcmConfig.data, 'checkForS3SlowUploads', PCM_CONFIG_FIELD_TYPE.FEATURE_FLAG);
     const useBrowserAPIForDetection = getConfigField(pcmConfig.data, 'useBrowserAPIForSpeedDetection', PCM_CONFIG_FIELD_TYPE.FEATURE_FLAG);
-    const slowUploadConfig = {
+    const slowUploadConfig = useMemo(() => ({
         checkForS3SlowUploads,
         useBrowserAPIForDetection,
-    };
+    }), [checkForS3SlowUploads, useBrowserAPIForDetection]);
     const isInitialMountRef = useRef(true);
+    const caseFilesRef = useRef(caseFiles);
+    caseFilesRef.current = caseFiles;
     const selectedLocalFiles = attachmentState.caseFiles.selectedLocalFiles;
     const prevSelectedFiles = usePrevious(selectedLocalFiles);
+    const resolveCaseSalesforceId = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        if (caseSalesforceIdRef.current || isSessionId || !idToUploadTo || !apolloClient) {
+            return;
+        }
+        try {
+            const caseDetails = yield fetchCaseDetailsByCaseNumber(apolloClient, idToUploadTo, Boolean((_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.secureSupport));
+            caseSalesforceIdRef.current = caseDetails === null || caseDetails === void 0 ? void 0 : caseDetails.id;
+        }
+        catch (_b) {
+            caseSalesforceIdRef.current = undefined;
+        }
+    }), [apolloClient, idToUploadTo, isSessionId, (_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.secureSupport]);
+    const onUploadAll = useCallback((event) => __awaiter(this, void 0, void 0, function* () {
+        onUploadClick && onUploadClick();
+        yield resolveCaseSalesforceId();
+        // on truobleshoot flow, user can upload a file while no data has added therefore no sessionId is available
+        let sessionId = '';
+        if (!idToUploadTo) {
+            const userAgent = getUserAgentForCaseMode(true);
+            const session = {
+                userAgent,
+                originatingSystem: userAgent,
+                referrerUrl: referrerUrl.substring(0, SESSION_REFERRER_URL_LIMIT),
+                isInternal: loggedInUserRights.data.isInternal(),
+            };
+            if (!sessionRestore.sessionCreationStatus.isCreating && !sessionRestore.sessionCreationStatus.isError) {
+                sessionId = yield createSession(sessionRestoreDispatch, getSessionDetailsFromCase({}, []), session);
+            }
+        }
+        uploadAllFiles({
+            dispatch,
+            idToUploadTo: idToUploadTo || sessionId,
+            caseFiles: caseFilesRef.current,
+            needsAnalyzing,
+            isSessionId,
+            slowUploadConfig,
+            apolloClient: !isSessionId ? apolloClient : undefined,
+            caseSalesforceId: !isSessionId ? caseSalesforceIdRef.current : undefined,
+            onCaseFileUploaded: !isSessionId ? onCaseFileUploaded : undefined,
+        });
+    }), [
+        apolloClient,
+        dispatch,
+        idToUploadTo,
+        isSessionId,
+        loggedInUserRights.data,
+        needsAnalyzing,
+        onCaseFileUploaded,
+        onUploadClick,
+        referrerUrl,
+        resolveCaseSalesforceId,
+        sessionRestore.sessionCreationStatus.isCreating,
+        sessionRestore.sessionCreationStatus.isError,
+        sessionRestoreDispatch,
+        slowUploadConfig,
+    ]);
+    const onUploadAllRef = useRef(onUploadAll);
+    onUploadAllRef.current = onUploadAll;
+    const debouncedAutoUploadOnSelect = useMemo(() => debounce(() => void onUploadAllRef.current(), AUTO_UPLOAD_ON_SELECT_DEBOUNCE_MS), []);
+    useEffect(() => () => debouncedAutoUploadOnSelect.cancel(), [debouncedAutoUploadOnSelect]);
     useEffect(() => {
         if (isInitialMountRef.current) {
             isInitialMountRef.current = false;
@@ -47,19 +121,18 @@ export function useFileUploader(props) {
             prevSelectedFiles &&
             selectedLocalFiles &&
             selectedLocalFiles.length > prevSelectedFiles.length) {
-            onUploadAll();
+            debouncedAutoUploadOnSelect();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedLocalFiles]);
+    }, [autoUploadOnSelect, debouncedAutoUploadOnSelect, prevSelectedFiles, selectedLocalFiles]);
     const updateSessionAttachmentMetadata = useCallback((file, changes) => __awaiter(this, void 0, void 0, function* () {
         sessionAttachments.updateSessionAttachmentMetadata(idToUploadTo, [Object.assign({ id: file.attachmentId }, changes)]);
     }), [idToUploadTo]);
     const debounceSessionMetadataUpdate = useMemo(() => debounce(updateSessionAttachmentMetadata, 800), [updateSessionAttachmentMetadata]);
-    const onRetryLocal = (indexToRetry) => {
+    const onRetryLocal = (indexToRetry) => __awaiter(this, void 0, void 0, function* () {
         if (idToUploadTo && attachmentState.caseFiles.selectedLocalFiles[indexToRetry]) {
-            onUploadFile(indexToRetry);
+            yield onUploadFile(indexToRetry);
         }
-    };
+    });
     const onRetryAnalysis = (indexToRetry) => {
         const file = attachmentState.caseFiles.selectedLocalFiles[indexToRetry];
         if (idToUploadTo && file && file.attachmentId) {
@@ -75,59 +148,58 @@ export function useFileUploader(props) {
             debounceSessionMetadataUpdate(editedLocalFile, changes);
     });
     const onFileRemoveLocal = (fileIndexToRemove, file) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c;
+        // Stop in-flight S3 transfer if Remove is used while upload/verify is still active
+        (_b = (_a = file.uploadProgress).onAbort) === null || _b === void 0 ? void 0 : _b.call(_a, fileIndexToRemove);
+        const attachmentIdToDelete = file.attachmentId || ((_c = file.uploadProgress.multipartResumeState) === null || _c === void 0 ? void 0 : _c.attachmentId);
         const selectedLocalFiles = attachmentState.caseFiles.selectedLocalFiles;
-        if (!isUploadingAttachment(selectedLocalFiles) && !isAnalysingAnyAttachment(selectedLocalFiles)) {
+        const isBusy = isUploadingAttachment(selectedLocalFiles) || isAnalysingAnyAttachment(selectedLocalFiles);
+        let nextLocalFiles;
+        if (!isBusy) {
             onFileRemove(dispatch, fileIndexToRemove);
+            nextLocalFiles = selectedLocalFiles.filter((_, index) => index !== fileIndexToRemove);
         }
         else {
             updateUploadMetadata(dispatch, fileIndexToRemove, {
                 uploadStatus: UploadStatusConstants.deleted,
+                onAbort: undefined,
             });
+            nextLocalFiles = selectedLocalFiles.map((localFile, index) => index === fileIndexToRemove
+                ? Object.assign(Object.assign({}, localFile), { uploadProgress: Object.assign(Object.assign({}, localFile.uploadProgress), { uploadStatus: UploadStatusConstants.deleted, onAbort: undefined }) }) : localFile);
         }
-        isUploadedSuccessfully(file) && isSessionId && deleteSessionAttachment(idToUploadTo, file.attachmentId);
-        isUploadedSuccessfully(file) &&
-            !isSessionId &&
-            deleteCaseAttachment(idToUploadTo, file.attachmentId, isSecureSupport);
-    });
-    const onUploadAll = (event) => __awaiter(this, void 0, void 0, function* () {
-        onUploadClick && onUploadClick();
-        // on truobleshoot flow, user can upload a file while no data has added therefore no sessionId is available
-        let sessionId = '';
-        if (!idToUploadTo) {
-            const userAgent = getUserAgentForCaseMode(true);
-            let session = {
-                userAgent,
-                originatingSystem: userAgent,
-                referrerUrl: referrerUrl.substring(0, SESSION_REFERRER_URL_LIMIT),
-                isInternal: loggedInUserRights.data.isInternal(),
-            };
-            if (!sessionRestore.sessionCreationStatus.isCreating && !sessionRestore.sessionCreationStatus.isError) {
-                sessionId = yield createSession(sessionRestoreDispatch, getSessionDetailsFromCase({}, []), session);
+        // Drop soft-deleted stubs so "Uploading attachment(s)" / Upload new file do not linger
+        if (!hasSomeSelectedFiles(nextLocalFiles)) {
+            resetAttachment(dispatch);
+        }
+        if (attachmentIdToDelete && isSessionId && isUploadedSuccessfully(file)) {
+            deleteSessionAttachment(idToUploadTo, attachmentIdToDelete);
+        }
+        // Abort/fail after Hydra init still has an attachmentId — clean up SFDC "In Progress" on Remove only
+        if (attachmentIdToDelete && !isSessionId) {
+            try {
+                yield deleteCaseAttachmentRequest(idToUploadTo, attachmentIdToDelete);
+            }
+            catch (_d) {
+                // Best-effort: row is already removed from the PCM queue
             }
         }
-        uploadAllFiles({
-            dispatch,
-            idToUploadTo: idToUploadTo || sessionId,
-            caseFiles,
-            isSecureSupport,
-            needsAnalyzing,
-            isSessionId,
-            slowUploadConfig,
-        });
     });
-    const onUploadFile = (fileIndex) => {
+    const onUploadFile = (fileIndex) => __awaiter(this, void 0, void 0, function* () {
+        yield resolveCaseSalesforceId();
         uploadFile({
             dispatch,
             idToUploadTo,
             localFile: attachmentState.caseFiles.selectedLocalFiles[fileIndex],
             originalFile: attachmentState.caseFiles.selectedOriginalFiles[fileIndex],
             index: fileIndex,
-            isSecureSupport,
             needsAnalyzing,
             isSessionId,
             slowUploadConfig,
+            apolloClient: !isSessionId ? apolloClient : undefined,
+            caseSalesforceId: !isSessionId ? caseSalesforceIdRef.current : undefined,
+            onCaseFileUploaded: !isSessionId ? onCaseFileUploaded : undefined,
         });
-    };
+    });
     return {
         retryUpload: onRetryLocal,
         editFile: onFileEditLocal,

package/lib/esm/components/shared/input/ContactSelectorInternal.d.ts

@@ -1,7 +1,6 @@
 import { IContact } from '@cee-eng/hydrajs/@types/models/contact';
 import { IContactListParams } from '@cee-eng/hydrajs/@types/models/contacts/contact';
 import React from 'react';
-import { TypeaheadBsSizes } from 'react-bootstrap-typeahead';
 export interface IProps {
     onSelect: (contacts: IContact[]) => any;
     placeholder?: string;
@@ -9,9 +8,10 @@ export interface IProps {
     disabled?: boolean;
     selectedContacts?: IContact[];
     contactsToExclude?: IContact[];
+    disableContactRemoval?: IContact[];
     className?: string;
     id: string;
-    typeAheadSize?: TypeaheadBsSizes;
+    typeAheadSize?: 'sm' | 'md' | 'lg';
     showSelectedContacts?: boolean;
     clearButton?: boolean;
     multiple?: boolean;
@@ -28,10 +28,14 @@ export interface IState {
     options: IContact[];
     selectedContacts?: IContact[];
     isLoading: boolean;
+    isOpen: boolean;
+    searchValue: string;
+    focusedItemIndex: number | null;
 }
 export declare class ContactSelectorInternal extends React.Component<IProps, IState> {
-    typeahead: any;
     controller: AbortController;
+    searchTimeout: NodeJS.Timeout | null;
+    inputRef: React.RefObject<HTMLInputElement>;
     static defaultProps: Partial<IProps>;
     constructor(props: IProps);
     getSelectedLabel: (contact: IContact) => string;
@@ -39,9 +43,15 @@ export declare class ContactSelectorInternal extends React.Component<IProps, ISt
     isValidContactForQuery: (c: IContact) => boolean;
     componentDidUpdate(prevProps: IProps): void;
     onChange: (contacts: IContact[]) => Promise<void>;
-    onFocus: (event: Event) => void;
-    handleSearch: (query: string | number) => Promise<void>;
-    renderMenuItemChildren: (option: IContact, p: any) => React.JSX.Element;
+    handleSearch: (query: string) => Promise<void>;
+    handleInputChange: (value: string) => void;
+    handleSelect: (event: any, selection: any) => void;
+    handleRemoveContact: (contactToRemove: IContact) => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleClear: () => void;
+    onToggle: () => void;
     render(): React.JSX.Element;
 }
 //# sourceMappingURL=ContactSelectorInternal.d.ts.map

package/lib/esm/components/shared/input/ContactSelectorInternal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/input/ContactSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AAMrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE1F,MAAM,WAAW,MAAM;IACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,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;CAClE;AAED,MAAM,WAAW,MAAM;IACnB,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;CACtB;AAGD,qBAAa,uBAAwB,SAAQ,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;IACxE,SAAS,EAAE,GAAG,CAAC;IACf,UAAU,EAAE,eAAe,CAAC;IAE5B,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,CAalC;gBAEU,KAAK,EAAE,MAAM;IAUzB,gBAAgB,YAAa,QAAQ,KAAG,MAAM,CAS5C;IAEF,mBAAmB,aAAc,QAAQ,EAAE,KAAG,QAAQ,EAAE,CAGtD;IAEF,sBAAsB,MAAO,QAAQ,KAAG,OAAO,CAE7C;IAEF,kBAAkB,CAAC,SAAS,EAAE,MAAM;IAoBpC,QAAQ,aAAoB,QAAQ,EAAE,mBAKpC;IAEF,OAAO,UAAW,KAAK,UAIrB;IAEF,YAAY,UAAiB,MAAM,GAAG,MAAM,mBA0C1C;IACF,sBAAsB,WAAY,QAAQ,+BAIxC;IAEF,MAAM;CAgCT"}
+{"version":3,"file":"ContactSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/input/ContactSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AAsBrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,MAAM;IACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC/B,qBAAqB,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,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;CAClE;AAED,MAAM,WAAW,MAAM;IACnB,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC;AAED,qBAAa,uBAAwB,SAAQ,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;IACxE,UAAU,EAAE,eAAe,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI,CAAQ;IAC5C,QAAQ,oCAAuC;IAE/C,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,CAalC;gBAEU,KAAK,EAAE,MAAM;IAYzB,gBAAgB,GAAI,SAAS,QAAQ,KAAG,MAAM,CAS5C;IAEF,mBAAmB,GAAI,UAAU,QAAQ,EAAE,KAAG,QAAQ,EAAE,CAGtD;IAEF,sBAAsB,GAAI,GAAG,QAAQ,KAAG,OAAO,CAE7C;IAEF,kBAAkB,CAAC,SAAS,EAAE,MAAM;IAmBpC,QAAQ,GAAU,UAAU,QAAQ,EAAE,mBAKpC;IAEF,YAAY,GAAU,OAAO,MAAM,mBA0CjC;IAEF,iBAAiB,GAAI,OAAO,MAAM,UAiBhC;IAEF,YAAY,GAAI,OAAO,GAAG,EAAE,WAAW,GAAG,UAkBxC;IAEF,mBAAmB,GAAI,iBAAiB,QAAQ,UAI9C;IAEF,aAAa,GAAI,OAAO,KAAK,CAAC,aAAa,UAkCzC;IAEF,WAAW,aAIT;IAEF,UAAU,aAKR;IAEF,WAAW,aAGT;IAEF,QAAQ,aAEN;IAEF,MAAM;CA8GT"}

package/lib/esm/components/shared/input/ContactSelectorInternal.js

@@ -8,20 +8,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { contacts } from '@cee-eng/hydrajs';
+import { Button, Label, LabelGroup, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import { haltEvent } from '@rh-support/utils';
 import assign from 'lodash/assign';
 import differenceBy from 'lodash/differenceBy';
 import filter from 'lodash/filter';
 import isEmpty from 'lodash/isEmpty';
 import unionBy from 'lodash/unionBy';
 import React from 'react';
-import { AsyncTypeahead, Highlighter } from 'react-bootstrap-typeahead';
-// https://github.com/ericgio/react-bootstrap-typeahead/blob/master/docs/Props.md
 export class ContactSelectorInternal extends React.Component {
     constructor(props) {
         super(props);
+        this.searchTimeout = null;
+        this.inputRef = React.createRef();
         this.getSelectedLabel = (contact) => {
             if (!contact) {
-                return undefined;
+                return '';
             }
             const userName = contact.internalSso || contact.ssoUsername || '';
             const fullName = contact.fullNameCustom
@@ -31,7 +34,7 @@ export class ContactSelectorInternal extends React.Component {
         };
         this.getContactsSelected = (contacts) => {
             if (!contacts)
-                return undefined;
+                return [];
             return filter(contacts, (c) => this.isValidContactForQuery(c));
         };
         this.isValidContactForQuery = (c) => {
@@ -43,11 +46,6 @@ export class ContactSelectorInternal extends React.Component {
                 this.props.onSelect(contacts);
             }
         });
-        this.onFocus = (event) => {
-            if (!this.state.selectedContacts && isEmpty(this.state.options) && this.props.contactListParams) {
-                this.handleSearch('');
-            }
-        };
         this.handleSearch = (query) => __awaiter(this, void 0, void 0, function* () {
             if (query == null) {
                 return;
@@ -73,7 +71,7 @@ export class ContactSelectorInternal extends React.Component {
                 const response = yield contacts.getSFDCContacts(queryParams, this.controller.signal);
                 const options = response && response.items && response.items.length ? this.getContactsSelected(response.items) : [];
                 this.setState({
-                    options: differenceBy(options, this.props.contactsToExclude, 'ssoUsername'),
+                    options: differenceBy(options, this.props.contactsToExclude || [], 'ssoUsername'),
                     isLoading: false,
                 });
             }
@@ -85,35 +83,147 @@ export class ContactSelectorInternal extends React.Component {
                 });
             }
         });
-        this.renderMenuItemChildren = (option, p) => (React.createElement(Highlighter, { key: option.ssoUsername, search: p.text }, this.getSelectedLabel(option)));
-        this.typeahead = React.createRef();
+        this.handleInputChange = (value) => {
+            this.setState({ searchValue: value });
+            // Clear existing timeout
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+            // Set new timeout for debounced search
+            this.searchTimeout = setTimeout(() => {
+                if (value.length >= (this.props.minLength || 0)) {
+                    this.handleSearch(value);
+                    this.setState({ isOpen: true });
+                }
+                else if (value.length === 0) {
+                    this.setState({ options: [], isOpen: false });
+                }
+            }, this.props.debounceDelay || 300);
+        };
+        this.handleSelect = (event, selection) => {
+            if (this.props.multiple) {
+                const currentSelected = this.state.selectedContacts || [];
+                const isAlreadySelected = currentSelected.some((c) => c.ssoUsername === selection.ssoUsername);
+                if (isAlreadySelected) {
+                    const newSelected = currentSelected.filter((c) => c.ssoUsername !== selection.ssoUsername);
+                    this.onChange(newSelected);
+                }
+                else {
+                    const newSelected = [...currentSelected, selection];
+                    this.onChange(newSelected);
+                }
+                // Clear search value after selection in multiple mode
+                this.setState({ searchValue: '' });
+            }
+            else {
+                this.onChange([selection]);
+                this.setState({ isOpen: false, searchValue: '' });
+            }
+        };
+        this.handleRemoveContact = (contactToRemove) => {
+            const currentSelected = this.state.selectedContacts || [];
+            const newSelected = currentSelected.filter((c) => c.ssoUsername !== contactToRemove.ssoUsername);
+            this.onChange(newSelected);
+        };
+        this.handleKeyDown = (event) => {
+            const { options, focusedItemIndex, isOpen } = this.state;
+            if (!isOpen || options.length === 0)
+                return;
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.setState((prevState) => ({
+                        focusedItemIndex: prevState.focusedItemIndex === null || prevState.focusedItemIndex >= options.length - 1
+                            ? 0
+                            : prevState.focusedItemIndex + 1,
+                    }));
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.setState((prevState) => ({
+                        focusedItemIndex: prevState.focusedItemIndex === null || prevState.focusedItemIndex <= 0
+                            ? options.length - 1
+                            : prevState.focusedItemIndex - 1,
+                    }));
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    if (focusedItemIndex !== null && options[focusedItemIndex]) {
+                        this.handleSelect(null, options[focusedItemIndex]);
+                    }
+                    break;
+                case 'Escape':
+                    this.setState({ isOpen: false, focusedItemIndex: null });
+                    break;
+            }
+        };
+        this.handleFocus = () => {
+            if (this.state.searchValue.length >= (this.props.minLength || 0)) {
+                this.setState({ isOpen: true });
+            }
+        };
+        this.handleBlur = () => {
+            // Delay closing to allow for clicks on menu items
+            setTimeout(() => {
+                this.setState({ isOpen: false, focusedItemIndex: null });
+            }, 150);
+        };
+        this.handleClear = () => {
+            this.setState({ searchValue: '', options: [], isOpen: false });
+            this.onChange([]);
+        };
+        this.onToggle = () => {
+            this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
+        };
         this.state = {
             isLoading: false,
-            selectedContacts: this.getContactsSelected(props.selectedContacts),
+            selectedContacts: this.getContactsSelected(props.selectedContacts || []),
             options: [],
+            isOpen: false,
+            searchValue: '',
+            focusedItemIndex: null,
         };
     }
     componentDidUpdate(prevProps) {
-        if (!isEmpty(prevProps.selectedContacts) && isEmpty(this.props.selectedContacts)) {
+        if (!isEmpty(prevProps.selectedContacts || []) && isEmpty(this.props.selectedContacts || [])) {
             this.setState({ selectedContacts: [], options: [] });
-            this.typeahead.current.clear();
         }
         if (this.props.showSelectedContacts) {
-            if (prevProps.selectedContacts.length !== this.props.selectedContacts.length) {
-                this.setState({ selectedContacts: this.getContactsSelected(this.props.selectedContacts) });
+            const prevSelected = prevProps.selectedContacts || [];
+            const currentSelected = this.props.selectedContacts || [];
+            if (prevSelected.length !== currentSelected.length) {
+                this.setState({ selectedContacts: this.getContactsSelected(currentSelected) });
             }
             else {
-                const unionOldNew = unionBy(prevProps.selectedContacts, this.props.selectedContacts, 'ssoUsername');
-                if (unionOldNew.length !== this.props.selectedContacts.length ||
-                    prevProps.selectedContacts.length !== this.props.selectedContacts.length) {
-                    this.setState({ selectedContacts: this.getContactsSelected(this.props.selectedContacts) });
+                const unionOldNew = unionBy(prevSelected, currentSelected, 'ssoUsername');
+                if (unionOldNew.length !== currentSelected.length || prevSelected.length !== currentSelected.length) {
+                    this.setState({ selectedContacts: this.getContactsSelected(currentSelected) });
                 }
             }
         }
     }
     render() {
-        const conditionalProps = Object.assign({}, (this.props.renderToken ? { renderToken: this.props.renderToken } : undefined));
-        return (React.createElement(AsyncTypeahead, Object.assign({ id: this.props.id + '-contact-select', className: `${this.props.className} contact-select`, defaultInputValue: "", autoFocus: this.props.autoFocus, clearButton: this.props.clearButton, isLoading: this.state.isLoading || this.props.isUpdating, options: this.state.options, selected: !isEmpty(this.state.selectedContacts) ? this.state.selectedContacts : [], onChange: this.onChange, onFocus: this.onFocus, labelKey: this.getSelectedLabel, onSearch: this.handleSearch, delay: this.props.debounceDelay, maxResults: this.props.maxResults, placeholder: this.props.placeholder, ref: this.typeahead, renderMenuItemChildren: this.renderMenuItemChildren, size: this.props.typeAheadSize, useCache: this.props.useCache, minLength: this.props.minLength, disabled: this.props.disabled || this.props.isUpdating, multiple: this.props.multiple }, conditionalProps)));
+        const { selectedContacts = [], options, isLoading, isOpen, searchValue, focusedItemIndex } = this.state;
+        // For multiple selection, always show the search value so typed text is visible
+        // For single selection, show selected contact label or search value
+        const displayValue = this.props.multiple
+            ? searchValue
+            : selectedContacts[0]
+                ? this.getSelectedLabel(selectedContacts[0])
+                : searchValue;
+        const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: this.onToggle, isExpanded: isOpen, isDisabled: this.props.disabled || this.props.isUpdating, isFullWidth: true },
+            React.createElement(TextInputGroup, { isPlain: true },
+                React.createElement(TextInputGroupMain, { value: displayValue, onChange: (_, value) => this.handleInputChange(value), onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, placeholder: this.props.placeholder || 'Search contact by name or username', ref: this.inputRef, autoComplete: "off", isExpanded: isOpen, role: "combobox" }, this.props.multiple && selectedContacts.length > 0 && (React.createElement(LabelGroup, { "aria-label": "Selected contacts" }, selectedContacts.map((contact, index) => {
+                    var _a, _b;
+                    const isDisabled = !!((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.disableContactRemoval) === null || _b === void 0 ? void 0 : _b.find((v) => v.ssoUsername === contact.ssoUsername));
+                    return (React.createElement(Label, { key: contact.ssoUsername, variant: "outline", color: "blue", onClick: haltEvent, onClose: () => this.handleRemoveContact(contact), isDisabled: isDisabled }, this.getSelectedLabel(contact)));
+                })))),
+                React.createElement(TextInputGroupUtilities, null,
+                    isLoading && React.createElement(Spinner, { size: "sm" }),
+                    this.props.clearButton && (searchValue || selectedContacts.length > 0) && (React.createElement(Button, { variant: "plain", icon: React.createElement(TimesCircleIcon, null), onClick: this.handleClear, "aria-label": "Clear input" }))))));
+        return (React.createElement("div", { className: `${this.props.className} contact-select` },
+            React.createElement(Select, { id: this.props.id + '-contact-select', isOpen: isOpen, selected: this.props.multiple ? selectedContacts : selectedContacts[0] || null, onSelect: this.handleSelect, onOpenChange: (isOpen) => this.setState({ isOpen }), toggle: toggle, shouldFocusFirstItemOnOpen: false, shouldFocusToggleOnSelect: false, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onBlur: this.handleBlur, "data-tracking-id": "external-case-contact-selector", className: "external-case-contact-selector" },
+                React.createElement(SelectList, { isAriaMultiselectable: this.props.multiple }, options.length > 0 ? (options.map((contact, index) => (React.createElement(SelectOption, { key: contact.ssoUsername, value: contact, isFocused: focusedItemIndex === index, isSelected: selectedContacts.some((c) => c.ssoUsername === contact.ssoUsername) }, this.getSelectedLabel(contact))))) : (React.createElement(SelectOption, { isDisabled: true }, isLoading ? 'Searching...' : searchValue ? 'No matches found.' : 'Type to search...'))))));
     }
 }
 ContactSelectorInternal.defaultProps = {

package/lib/esm/components/shared/useIsSectionValid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsSectionValid.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/useIsSectionValid.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAuB1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAKnE,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,gBAAgB;;;;;EAgR9D"}
+{"version":3,"file":"useIsSectionValid.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/useIsSectionValid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAuBrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAKnE,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,gBAAgB;;;;;EAoP9D"}