@rh-support/components 2.5.223 → 2.5.226

package/lib/esm/CaseLabelLoadErrorModal/CaseLabelLoadErrorModal.d.ts

@@ -0,0 +1,10 @@
+import './CaseLabelLoadErrorModal.scss';
+import React from 'react';
+interface IProps {
+    isOpen: boolean;
+    onRetry: () => void;
+    onClose: () => void;
+}
+export declare function CaseLabelLoadErrorModal({ isOpen, onRetry, onClose }: IProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CaseLabelLoadErrorModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseLabelLoadErrorModal.d.ts","sourceRoot":"","sources":["../../../src/CaseLabelLoadErrorModal/CaseLabelLoadErrorModal.tsx"],"names":[],"mappings":"AAAA,OAAO,gCAAgC,CAAC;AAWxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAKD,wBAAgB,uBAAuB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,MAAM,qBAuC3E"}

package/lib/esm/CaseLabelLoadErrorModal/CaseLabelLoadErrorModal.js

@@ -0,0 +1,17 @@
+import './CaseLabelLoadErrorModal.scss';
+import { Button, ButtonVariant, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, } from '@patternfly/react-core';
+import React from 'react';
+import { Trans } from 'react-i18next';
+const MODAL_TITLE_ID = 'case-label-load-error-modal-title';
+const MODAL_DESCRIPTION_ID = 'case-label-load-error-modal-description';
+export function CaseLabelLoadErrorModal({ isOpen, onRetry, onClose }) {
+    return (React.createElement(Modal, { id: "case-label-load-error-modal", className: "case-label-load-error-modal", "aria-labelledby": MODAL_TITLE_ID, "aria-describedby": MODAL_DESCRIPTION_ID, isOpen: isOpen, variant: ModalVariant.small, onClose: onClose },
+        React.createElement(ModalHeader, { title: React.createElement(Trans, null, "Something went wrong"), titleIconVariant: "warning", labelId: MODAL_TITLE_ID }),
+        React.createElement(ModalBody, { id: MODAL_DESCRIPTION_ID },
+            React.createElement(Trans, null, "The case label(s) you selected failed to load, please try again")),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { key: "retry", variant: ButtonVariant.primary, onClick: onRetry, "data-tracking-id": "case-label-load-error-retry" },
+                React.createElement(Trans, null, "Try again")),
+            React.createElement(Button, { key: "cancel", variant: ButtonVariant.link, onClick: onClose, "data-tracking-id": "case-label-load-error-cancel" },
+                React.createElement(Trans, null, "Cancel")))));
+}

package/lib/esm/CaseLabelLoadErrorModal/CaseLabelLoadErrorModal.scss

@@ -0,0 +1,13 @@
+.case-label-load-error-modal {
+    .pf-v6-c-modal-box__title-icon {
+        color: var(--pf-t--global--icon--color--status--warning--default);
+    }
+
+    .pf-v6-c-modal-box__body {
+        padding-top: var(--pf-t--global--spacer--md);
+    }
+
+    .pf-v6-c-modal-box__footer {
+        padding-top: var(--pf-t--global--spacer--lg);
+    }
+}

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

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

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

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

package/lib/esm/CaseLabelLoadErrorModal/index.js

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

package/lib/esm/ConfirmationModal/ConfirmationDialog.js

@@ -15,7 +15,7 @@ function ConfirmationDialog(props) {
         !isEmpty(props.title) && (React.createElement(ModalHeader, null,
             React.createElement("h2", null, props.title))),
         React.createElement(ModalBody, null,
-            React.createElement("p", { id: "se-confirm-dialog" }, props.description)),
+            React.createElement("div", { id: "se-confirm-dialog" }, props.description)),
         React.createElement(ModalFooter, null,
             React.createElement(Button, { key: "confirm", onClick: props.onConfirm, variant: props.confirmButtonVariant },
                 React.createElement(Trans, null, props.confirmText)),

package/lib/esm/CustomDatePicker/CustomDatePicker.d.ts

@@ -0,0 +1,18 @@
+import './customDatePicker.css';
+import React from 'react';
+export interface ICustomDatePickerProps {
+    id?: string;
+    value?: string;
+    'aria-label'?: string;
+    onChange?: (event: React.FormEvent<HTMLInputElement>, value: string, date?: Date) => void;
+    validators?: Array<(date: Date) => string>;
+    popoverPosition?: 'bottom' | 'bottom-start' | 'bottom-end';
+    dateParse?: (value: string) => Date;
+    placeholder?: string;
+    invalidFormatText?: string;
+    className?: string;
+    isDisabled?: boolean;
+    validationError?: string;
+}
+export declare function CustomDatePicker({ id, value, 'aria-label': ariaLabel, onChange, validators, popoverPosition, dateParse, placeholder, invalidFormatText, className, isDisabled, validationError, }: ICustomDatePickerProps): React.JSX.Element;
+//# sourceMappingURL=CustomDatePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomDatePicker.d.ts","sourceRoot":"","sources":["../../../src/CustomDatePicker/CustomDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAGhC,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,MAAM,WAAW,sBAAsB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1F,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC;IAC3C,eAAe,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,YAAY,CAAC;IAC3D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,EAAE,EACF,KAAU,EACV,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,UAAU,EACV,eAAgC,EAChC,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,GAClB,EAAE,sBAAsB,qBA4CxB"}

package/lib/esm/CustomDatePicker/CustomDatePicker.js

@@ -0,0 +1,27 @@
+import './customDatePicker.css';
+import { DatePicker, HelperText, HelperTextItem } from '@patternfly/react-core';
+import React, { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+export function CustomDatePicker({ id, value = '', 'aria-label': ariaLabel, onChange, validators, popoverPosition = 'bottom-start', dateParse, placeholder, invalidFormatText, className, isDisabled, validationError, }) {
+    const { t } = useTranslation();
+    const datePickerRef = useRef(null);
+    const datePickerClassName = [
+        'custom-date-picker',
+        'custom-date-picker--input-only',
+        validationError && 'custom-date-picker--has-error',
+        validationError && 'custom-date-picker--external-validation',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DatePicker, { ref: datePickerRef, id: id, value: value, isDisabled: isDisabled, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('YYYY-MM-DD'), invalidFormatText: invalidFormatText !== null && invalidFormatText !== void 0 ? invalidFormatText : t('Invalid date format.'), dateParse: dateParse, "aria-label": ariaLabel, validators: validators, appendTo: () => document.body, className: datePickerClassName, popoverProps: {
+                className: 'custom-date-picker-popover',
+                hasAutoWidth: false,
+                position: popoverPosition,
+            }, onChange: onChange, inputProps: {
+                onClick: () => { var _a; return (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.toggleCalendar(); },
+            } }),
+        validationError && (React.createElement(HelperText, null,
+            React.createElement(HelperTextItem, { variant: "error" }, validationError)))));
+}

package/lib/esm/CustomDatePicker/customDatePicker.css

@@ -0,0 +1,52 @@
+.custom-date-picker--input-only {
+    display: block;
+    width: 100%;
+    --pf-v6-c-date-picker__input--c-form-control--Width: 100%;
+}
+
+.custom-date-picker--has-error .pf-v6-c-form-control {
+    --pf-v6-c-form-control--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
+
+.custom-date-picker--external-validation .pf-v6-c-date-picker__helper-text {
+    display: none;
+}
+
+.custom-date-picker--input-only .pf-v6-c-input-group {
+    display: block;
+}
+
+.custom-date-picker--input-only .pf-v6-c-input-group__item:first-child {
+    width: 100%;
+}
+
+.custom-date-picker--input-only .pf-v6-c-input-group__item:last-child {
+    display: none;
+}
+
+.pf-v6-c-popover.custom-date-picker-popover {
+    --pf-v6-c-popover--MaxWidth: 18.5rem;
+    max-width: 18.5rem;
+    width: 18.5rem;
+}
+
+.pf-v6-c-popover.custom-date-picker-popover .pf-v6-c-calendar-month {
+    --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-calendar-month--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-calendar-month--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-calendar-month--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-calendar-month__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-calendar-month__date--Width: 2.25rem;
+    --pf-v6-c-calendar-month__date--Height: 2.25rem;
+    --pf-v6-c-calendar-month__day--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+    width: 100%;
+}
+
+.pf-v6-c-popover.custom-date-picker-popover .pf-v6-c-calendar-month__header-month .pf-v6-c-menu-toggle {
+    width: 100% !important;
+    max-width: 6.5rem;
+}
+
+.pf-v6-c-popover.custom-date-picker-popover .pf-v6-c-calendar-month__calendar {
+    width: 100%;
+}

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

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

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

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

package/lib/esm/CustomDatePicker/index.js

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

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

@@ -28,6 +28,8 @@ interface IProps extends IDClassNameProps {
     onNew?: (query: string) => void;
     canAddNew?: (options: ITypeaheadDropdownGroupOrOption[], query: string) => boolean;
     getCreateNewText?: (query: string) => string;
+    onContactEnriched?: (contact: IContact) => void;
+    contactFilter?: (contact: IContact) => boolean;
 }
 export declare const CONTACTS_PAGE_SIZE = 10;
 export declare const DEFAULT_CONTACTS_OFFSET: number;

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

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

package/lib/esm/Functional/CaseContactsSelectorExternal.js

@@ -7,8 +7,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { accounts } from '@cee-eng/hydrajs';
-import { getApiResourceObject, isEmailValid, sortHydraContacts } from '@rh-support/utils';
+import { useApolloClient } from '@apollo/client/react';
+import { GET_ACCOUNT_CONTACTS, getApiResourceObject, isEmailValid, } from '@rh-support/utils';
+import debounce from 'lodash/debounce';
 import differenceBy from 'lodash/differenceBy';
 import filter from 'lodash/filter';
 import isArray from 'lodash/isArray';
@@ -16,7 +17,6 @@ import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
 import sortBy from 'lodash/sortBy';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { usePrevious } from '../hooks/usePrevious';
 import { OwnerTypeaheadDropdown } from '../OwnerTypeaheadDropdown';
 export const CONTACTS_PAGE_SIZE = 10;
 export const DEFAULT_CONTACTS_OFFSET = CONTACTS_PAGE_SIZE - 1;
@@ -42,82 +42,152 @@ const getHydraContactLabel = (user) => {
     return label ? label : '';
 };
 function CaseContactsSelectorExternal(props) {
+    const apolloClient = useApolloClient();
     const { customEmails, contactSsoUsername, isInvalid, groupContactsAndEmails, selected } = props;
-    const previousSelectedAccountNumber = usePrevious(props.selectedAccountNumber);
     const [filteredContacts, setFilteredContacts] = useState([]);
-    /**
-     * External owner selector related
-     */
-    /** Getting user list for selected account when logged in user is a external */
     const [contactList, setContactList] = useState(getApiResourceObject([]));
-    const controllerRef1 = useRef(new AbortController());
-    const controllerRef2 = useRef(new AbortController());
-    useEffect(() => {
-        if (props.isExportingPDF)
+    const [hasNextPage, setHasNextPage] = useState(false);
+    const [endCursor, setEndCursor] = useState(null);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const mapContactEdges = (edges, accountNumber) => edges
+        .filter(({ node }) => { var _a; return (_a = node.SSOUserName__c) === null || _a === void 0 ? void 0 : _a.value; })
+        .map(({ node }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        return ({
+            id: node.Id,
+            ssoUsername: node.SSOUserName__c.value,
+            firstName: (_b = (_a = node.FirstName) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '',
+            lastName: (_d = (_c = node.LastName) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '',
+            fullNameCustom: (_f = (_e = node.Name) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : '',
+            manageSupportCases: (_h = (_g = node.ManageSupportCases__c) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : true,
+            isInternal: (_k = (_j = node.IsInternal__c) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : false,
+            isOrgAdmin: (_m = (_l = node.IsOrgAdmin__c) === null || _l === void 0 ? void 0 : _l.value) !== null && _m !== void 0 ? _m : false,
+            phone: (_p = (_o = node.Phone) === null || _o === void 0 ? void 0 : _o.value) !== null && _p !== void 0 ? _p : '',
+            defaultCaseGroup: (_r = (_q = node.DefaultCaseGroup__c) === null || _q === void 0 ? void 0 : _q.value) !== null && _r !== void 0 ? _r : null,
+            accountNumber,
+        });
+    });
+    const buildContactsWhere = (searchQuery) => {
+        const base = { IsActive__c: { eq: true } };
+        if (!(searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.trim()))
+            return base;
+        const term = `%${searchQuery.trim()}%`;
+        return {
+            and: [
+                base,
+                {
+                    or: [{ Name: { like: term } }, { SSOUserName__c: { like: term } }],
+                },
+            ],
+        };
+    };
+    const fetchContactsPage = (after, searchQuery) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const { data } = yield apolloClient.query({
+            query: GET_ACCOUNT_CONTACTS,
+            variables: Object.assign(Object.assign({ first: CONTACTS_PAGE_SIZE }, (after ? { after } : {})), { contactsWhere: buildContactsWhere(searchQuery) }),
+            fetchPolicy: after ? 'network-only' : 'network-only',
+        });
+        const response = data;
+        const accountNode = (_e = (_d = (_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.redhat_support_uiapi) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.RedHatSupportAccount) === null || _c === void 0 ? void 0 : _c.edges) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.node;
+        const contactEdges = (_g = (_f = accountNode === null || accountNode === void 0 ? void 0 : accountNode.Contacts) === null || _f === void 0 ? void 0 : _f.edges) !== null && _g !== void 0 ? _g : [];
+        const pageInfo = (_j = (_h = accountNode === null || accountNode === void 0 ? void 0 : accountNode.Contacts) === null || _h === void 0 ? void 0 : _h.pageInfo) !== null && _j !== void 0 ? _j : { hasNextPage: false, endCursor: null };
+        const accountNumber = (_l = (_k = accountNode === null || accountNode === void 0 ? void 0 : accountNode.AccountNumber) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : props.selectedAccountNumber;
+        return { contacts: mapContactEdges(contactEdges, accountNumber), pageInfo };
+    });
+    const currentSearchQuery = useRef('');
+    const loadMoreContacts = () => __awaiter(this, void 0, void 0, function* () {
+        if (!hasNextPage || isLoadingMore)
             return;
-        // when component is unmonted and error happens after apis responses are ready, we use this variable to prevent state update.
-        let isSubscribed = true;
-        const fetchStrataAccountUsers = () => __awaiter(this, void 0, void 0, function* () {
-            if (controllerRef1.current) {
-                controllerRef1.current.abort();
-            }
-            controllerRef1.current = new AbortController();
-            if (controllerRef2.current) {
-                controllerRef2.current.abort();
+        setIsLoadingMore(true);
+        try {
+            const { contacts: newContacts, pageInfo } = yield fetchContactsPage(endCursor, currentSearchQuery.current);
+            setContactList((prev) => getApiResourceObject([...(prev.data || []), ...newContacts]));
+            setHasNextPage(pageInfo.hasNextPage);
+            setEndCursor(pageInfo.endCursor);
+        }
+        catch (_a) {
+            // silently fail on load more
+        }
+        setIsLoadingMore(false);
+    });
+    const searchContacts = (query) => __awaiter(this, void 0, void 0, function* () {
+        currentSearchQuery.current = query;
+        setContactList(getApiResourceObject([], true));
+        setHasNextPage(false);
+        setEndCursor(null);
+        try {
+            const { contacts, pageInfo } = yield fetchContactsPage(null, query);
+            if (currentSearchQuery.current === query) {
+                setContactList(getApiResourceObject(contacts));
+                setHasNextPage(pageInfo.hasNextPage);
+                setEndCursor(pageInfo.endCursor);
             }
-            controllerRef2.current = new AbortController();
+        }
+        catch (_a) {
+            setContactList(getApiResourceObject([]));
+        }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedSearch = useCallback(debounce(searchContacts, 400), [apolloClient]);
+    useEffect(() => {
+        const { selectedAccountNumber, loggedInUserRights, isExportingPDF } = props;
+        const isNonOrgAdminSameAccount = loggedInUserRights.isExternal() && loggedInUserRights.isNonOrgAdminWithSameAccount(selectedAccountNumber);
+        if (isExportingPDF || !selectedAccountNumber || isNonOrgAdminSameAccount) {
+            return;
+        }
+        let cancelled = false;
+        const fetchAccountContacts = () => __awaiter(this, void 0, void 0, function* () {
+            setContactList(getApiResourceObject([], true));
             try {
-                setContactList(getApiResourceObject([], true));
-                let contactListTemp = [];
-                if (props.loggedInUserRights.isPartner() &&
-                    props.loggedInUserRights.isAccountDifferentFromLoggedInAccount(props.selectedAccountNumber)) {
-                    /** Show Partner contacts even when customer account is selected
-                        - Non Org-Admin partners => Only logged in contact + All Customer contacts
-                        - Org-Admin partners => All partner contacts + All Customer contacts  */
-                    if (props.loggedInUserRights.isNonOrgAdmin()) {
-                        const extraLoggedInContacts = props.loggedInUserRights.getHydraContactFromLoggedInUser();
-                        const contacts = yield accounts.getAccountContacts(props.selectedAccountNumber, controllerRef1.current.signal);
-                        contactListTemp = contacts.concat(extraLoggedInContacts);
-                    }
-                    else {
-                        let promiseArray = [
-                            accounts.getAccountContacts(props.selectedAccountNumber, controllerRef1.current.signal),
-                            accounts.getAccountContacts(props.loggedInUserRights.getAccountNumber(), controllerRef2.current.signal),
-                        ];
-                        const loggedInContactsResponse = yield Promise.all(promiseArray);
-                        const selectedAccountsContacts = loggedInContactsResponse[0];
-                        const currentAccountsContacts = loggedInContactsResponse[1];
-                        contactListTemp = [...selectedAccountsContacts, ...currentAccountsContacts];
-                    }
-                }
-                else {
-                    contactListTemp = yield accounts.getAccountContacts(props.selectedAccountNumber, controllerRef1.current.signal);
-                }
-                if (props.contactsToExclude && props.contactsToExclude.length > 0) {
-                    contactListTemp = differenceBy(contactListTemp, props.contactsToExclude, 'ssoUsername');
+                const { contacts, pageInfo } = yield fetchContactsPage();
+                if (!cancelled) {
+                    setContactList(getApiResourceObject(contacts));
+                    setHasNextPage(pageInfo.hasNextPage);
+                    setEndCursor(pageInfo.endCursor);
                 }
-                setContactList(getApiResourceObject(sortHydraContacts(contactListTemp)));
             }
             catch (e) {
-                isSubscribed && setContactList(getApiResourceObject([], false, true, e.message));
+                if (!cancelled) {
+                    setContactList(getApiResourceObject([], false, true, e.message));
+                }
             }
         });
-        const isOldAccountNumber = props.selectedAccountNumber && props.selectedAccountNumber === previousSelectedAccountNumber;
-        if (isOldAccountNumber ||
-            (props.loggedInUserRights.isExternal() &&
-                props.loggedInUserRights.isNonOrgAdminWithSameAccount(props.selectedAccountNumber)))
-            return;
-        fetchStrataAccountUsers();
+        fetchAccountContacts();
         return () => {
-            isSubscribed = false;
+            cancelled = true;
         };
-    }, [
-        previousSelectedAccountNumber,
-        props.contactsToExclude,
-        props.loggedInUserRights,
-        props.selectedAccountNumber,
-        props.isExportingPDF,
-    ]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [apolloClient, props.selectedAccountNumber, props.isExportingPDF]);
+    useEffect(() => {
+        if (contactList.isFetching || isEmpty(contactList.data) || isEmpty(selected))
+            return;
+        const currentOwner = selected[0];
+        if (!(currentOwner === null || currentOwner === void 0 ? void 0 : currentOwner.ssoUsername))
+            return;
+        const matchedContact = contactList.data.find((c) => {
+            var _a, _b;
+            return c.id === (currentOwner === null || currentOwner === void 0 ? void 0 : currentOwner.id) ||
+                ((_a = c.ssoUsername) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = currentOwner.ssoUsername) === null || _b === void 0 ? void 0 : _b.toLowerCase());
+        });
+        if (matchedContact === null || matchedContact === void 0 ? void 0 : matchedContact.id) {
+            props.onContactEnriched
+                ? props.onContactEnriched(matchedContact)
+                : props.onChange && props.onChange([matchedContact]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [contactList.data, contactList.isFetching]);
+    const displayedContacts = useMemo(() => {
+        var _a;
+        let contacts = (_a = contactList.data) !== null && _a !== void 0 ? _a : [];
+        if (props.contactsToExclude && props.contactsToExclude.length > 0) {
+            contacts = differenceBy(contacts, props.contactsToExclude, 'ssoUsername');
+        }
+        if (props.contactFilter) {
+            contacts = contacts.filter(props.contactFilter);
+        }
+        return contacts;
+    }, [contactList.data, props.contactsToExclude, props.contactFilter]);
     const onCustomerContactSelect = (contacts) => {
         if (!isArray(contacts))
             return;
@@ -134,11 +204,10 @@ function CaseContactsSelectorExternal(props) {
             ];
         props.onChange && props.onChange(customerContacts);
     };
-    const isDisabled = (props.loggedInUserRights.isExternal() &&
-        props.loggedInUserRights.isNonOrgAdminWithSameAccount(props.selectedAccountNumber)) ||
-        props.isUpdating ||
-        contactList.isFetching ||
-        props.isDisabled;
+    const isNonOrgAdminSameAccountDisabled = props.loggedInUserRights.isExternal() &&
+        props.loggedInUserRights.isNonOrgAdminWithSameAccount(props.selectedAccountNumber);
+    const isDisabled = isNonOrgAdminSameAccountDisabled || props.isUpdating || contactList.isFetching || props.isDisabled;
+    const isLoading = props.isUpdating || contactList.isFetching;
     const getCustomEmails = useCallback(() => {
         return sortBy((customEmails || []).map((item) => (Object.assign(Object.assign({}, item), { ssoUsername: item.emailAddress, firstName: item.emailAddress, lastName: item.emailAddress }))), 'emailAddress');
     }, [customEmails]);
@@ -147,34 +216,39 @@ function CaseContactsSelectorExternal(props) {
      */
     const allOptions = useMemo(() => {
         return [
-            ...map(contactList.data, (contact) => ({ contact, isCustomEmail: false })),
+            ...map(displayedContacts, (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]);
+    }, [displayedContacts, 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) => {
+        setHasNextPage(false);
         if (isEmpty(query)) {
-            setFilteredContacts(allOptions);
+            currentSearchQuery.current = '';
+            debouncedSearch.cancel();
+            searchContacts('');
         }
         else {
-            const filteredContacts = filter(allOptions, (option) => getHydraContactLabel(option.contact).toLowerCase().includes(query.toLowerCase()));
-            setFilteredContacts(filteredContacts);
+            const localFiltered = filter(allOptions, (option) => getHydraContactLabel(option.contact).toLowerCase().includes(query.toLowerCase()));
+            setFilteredContacts(localFiltered);
+            debouncedSearch(query);
         }
     };
     /**
      * 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;
+        if (currentSearchQuery.current) {
+            currentSearchQuery.current = '';
+            debouncedSearch.cancel();
+            searchContacts('');
+        }
         setFilteredContacts(allOptions);
     };
     /**
@@ -195,7 +269,7 @@ function CaseContactsSelectorExternal(props) {
      */
     useEffect(() => {
         setFilteredContacts(allOptions);
-    }, [contactList.data, customEmails, allOptions, selected]);
-    return (React.createElement(OwnerTypeaheadDropdown, { id: props.id || '', hasClearButton: true, multiple: !!props.multiple, contactSsoUsername: contactSsoUsername, groupContactsAndEmails: groupContactsAndEmails, selected: !isEmpty(props.selected) ? props.selected : [], options: filteredContacts, placeholder: props.placeholder || 'Search by name or username', "data-tracking-id": "external-case-contact-selector", isDisabled: isDisabled, status: isInvalid ? 'danger' : undefined, onChipRemoved: onChipRemoved, onClearQuery: onClearQuery, onQueryUpdated: onQueryUpdated, onSelect: onCustomerContactSelect, canAddNew: canAddNew, getCreateNewText: props === null || props === void 0 ? void 0 : props.getCreateNewText, isLoading: props.isUpdating || contactList.isFetching }));
+    }, [displayedContacts, customEmails, allOptions, selected]);
+    return (React.createElement(OwnerTypeaheadDropdown, { id: props.id || '', hasClearButton: true, multiple: !!props.multiple, contactSsoUsername: contactSsoUsername, groupContactsAndEmails: groupContactsAndEmails, selected: !isEmpty(props.selected) ? props.selected : [], options: filteredContacts, placeholder: props.placeholder || 'Search by name or username', "data-tracking-id": "external-case-contact-selector", isDisabled: isDisabled, status: isInvalid ? 'danger' : undefined, onChipRemoved: onChipRemoved, onClearQuery: onClearQuery, onQueryUpdated: onQueryUpdated, onSelect: onCustomerContactSelect, canAddNew: canAddNew, getCreateNewText: props === null || props === void 0 ? void 0 : props.getCreateNewText, isLoading: isLoading || isLoadingMore, onHandleLoadMore: loadMoreContacts, isShowMoreOptionVisible: hasNextPage }));
 }
 export { CaseContactsSelectorExternal, getHydraContactLabel };

package/lib/esm/InlineEdit/NewInlineEdit.d.ts

@@ -32,6 +32,8 @@ interface IProps {
     isSpaceAllowed?: boolean;
     inputValue?: string;
     isExportingPDF?: boolean;
+    /** When false with allowInlineEdit false, render read-only content instead of the input children. */
+    showAlwaysEditableInput?: boolean;
 }
 declare function NewInlineEdit(props: IProps): React.JSX.Element;
 declare namespace NewInlineEdit {

package/lib/esm/InlineEdit/NewInlineEdit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewInlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/NewInlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAI7B,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAsBD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,qBA6LnC;kBA7LQ,aAAa;;;AAgMtB,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"NewInlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/NewInlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAI7B,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qGAAqG;IACrG,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AAsBD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,qBAsMnC;kBAtMQ,aAAa;;;AAyMtB,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/lib/esm/InlineEdit/NewInlineEdit.js

@@ -106,7 +106,10 @@ function NewInlineEdit(props) {
             React.createElement(Trans, null, props.saveLabel)),
         React.createElement("button", { type: "button", "data-tracking-id": props.dataTrackingId ? `${props.dataTrackingId}-inline-edit-cancel` : null, className: "btn btn-app btn-link", onClick: onCancelClicked },
             React.createElement(Trans, null, props.cancelLabel))));
+    const showAlwaysEditableInput = props.showAlwaysEditableInput !== false;
     const canShowContent = !isEditing && props.allowInlineEdit && props.content;
+    const canShowReadOnlyContent = !props.allowInlineEdit && !showAlwaysEditableInput && props.content;
+    const contentDisplayClassName = props.hideLabel ? 'pf-v6-u-display-inline' : 'pf-v6-u-display-block';
     const showCount = ` ${props.charCount} / ${props.charTotal}`;
     return (React.createElement("div", { className: `form-group edit-question pf-v6-u-display-flex pf-v6-u-flex-direction-column ${props.formClassName}`, id: props.formId },
         !props.hideLabel && (React.createElement(React.Fragment, null,
@@ -118,16 +121,18 @@ function NewInlineEdit(props) {
         props.hideSaveCancel && isEditing && (React.createElement("span", { className: `
                         ${props.charCount > props.charTotal ? 'char-count pf-v6-u-danger-color-100' : 'char-count'}` }, props.charCount ? showCount : null)),
         canShowContent && !props.usePreformattedTag && (React.createElement(React.Fragment, null,
-            React.createElement("p", { id: props.inputId, style: { display: props.hideLabel ? 'inline' : 'block' } },
+            React.createElement("p", { id: props.inputId, className: contentDisplayClassName },
                 props.content,
                 React.createElement(React.Fragment, null,
                     props.helperContent,
                     renderEditButton()),
                 props.loadingIndicator && React.createElement("span", { className: "loading-indicator" }, props.loadingIndicator)))),
         canShowContent && props.usePreformattedTag && React.createElement("pre", { id: props.inputId }, props.content),
+        canShowReadOnlyContent && !props.usePreformattedTag && (React.createElement("p", { id: props.inputId, className: contentDisplayClassName }, props.content)),
+        canShowReadOnlyContent && props.usePreformattedTag && React.createElement("pre", { id: props.inputId }, props.content),
         React.createElement(React.Fragment, null,
             React.createElement("div", { onBlur: onBlurChild, onKeyDown: handleKeyDown, className: "inlineEdit-wrapper", "data-tracking-id": "inline-edit-input-wrapper" },
-                !props.allowInlineEdit && props.children,
+                !props.allowInlineEdit && showAlwaysEditableInput && props.children,
                 props.allowInlineEdit &&
                     isEditing &&
                     React.Children.map(props.children, (child) => {

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

@@ -10,6 +10,8 @@ export interface IOwnerSelectorProps extends IOwnerSelectorExtends {
     onSelect: (contacts: IContact[]) => void;
     onChipRemoved?: (contact: IContact) => void;
     isLoading?: boolean;
+    onHandleLoadMore?: (event: any) => void;
+    isShowMoreOptionVisible?: boolean;
 }
 export interface IOwnerOption {
     contact: IContact;

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

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

package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.js

@@ -27,14 +27,19 @@ function getTypeaheadOptionsFromContacts(contacts, caseContactSsoUsername) {
     }));
 }
 export function OwnerTypeaheadDropdown(props) {
+    var _a;
     const { contactSsoUsername, groupContactsAndEmails, options, selected, onSelect, onToggleClosed, onChipRemoved } = props, restProps = __rest(props, ["contactSsoUsername", "groupContactsAndEmails", "options", "selected", "onSelect", "onToggleClosed", "onChipRemoved"]);
     const selectedTypeaheadOptions = useMemo(() => getTypeaheadOptionsFromContacts(selected, contactSsoUsername), [selected, contactSsoUsername]);
     const { t } = useTranslation();
-    const { visibleItems, hasMoreItems, onHandleLoadMore, resetVisibleItems } = useProgressiveLoading(options, PAGE_SIZE);
+    const { visibleItems, hasMoreItems: hasMoreItemsLocal, onHandleLoadMore: onHandleLoadMoreLocal, resetVisibleItems, } = useProgressiveLoading(options, PAGE_SIZE);
+    const useServerPagination = !!props.onHandleLoadMore;
+    const displayItems = useServerPagination ? options : visibleItems;
+    const showMore = useServerPagination ? (_a = props.isShowMoreOptionVisible) !== null && _a !== void 0 ? _a : false : hasMoreItemsLocal();
+    const handleLoadMore = useServerPagination ? props.onHandleLoadMore : onHandleLoadMoreLocal;
     const typeaheadOptions = useMemo(() => {
         const contacts = [];
         const customEmails = [];
-        for (const option of visibleItems) {
+        for (const option of displayItems) {
             const typeaheadOption = {
                 label: getHydraContactLabel(option.contact),
                 value: option.contact.ssoUsername,
@@ -97,5 +102,5 @@ export function OwnerTypeaheadDropdown(props) {
         };
         onSelect([newCustomOption]);
     };
-    return (React.createElement(TypeaheadDropdown, Object.assign({ "data-tracking-id": "external-case-contact-selector", selected: selectedTypeaheadOptions, options: typeaheadOptions, onSelect: onSelectContact, onHandleLoadMore: onHandleLoadMore, isShowMoreOptionVisible: hasMoreItems(), onToggleClosed: onLocalToggleClosed, onChipRemoved: onLocalChipRemoved, onNew: onLocalNew }, restProps)));
+    return (React.createElement(TypeaheadDropdown, Object.assign({ "data-tracking-id": "external-case-contact-selector", selected: selectedTypeaheadOptions, options: typeaheadOptions, onSelect: onSelectContact, onHandleLoadMore: handleLoadMore, isShowMoreOptionVisible: showMore, onToggleClosed: onLocalToggleClosed, onChipRemoved: onLocalChipRemoved, onNew: onLocalNew }, restProps)));
 }