@rh-support/components 2.5.0 → 2.5.2

package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts

@@ -37,6 +37,10 @@ export interface IMDEditorProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'on
     onCommentExceedCharsLimit: (val: boolean) => void;
     fileSelectorProps?: Partial<IFileSelectorProps>;
 }
+export declare const validateFile: (file: Partial<IAttachment>) => {
+    isValid: boolean;
+    errorMsg: string;
+};
 declare function MarkdownEditor(props: IMDEditorProps): React.JSX.Element;
 declare namespace MarkdownEditor {
     var defaultProps: Partial<IMDEditorProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AAgC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAuBD,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,qBA62B5C;kBA72BQ,cAAc;;;AAi3BvB,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AAgC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAMtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AA0BD,eAAO,MAAM,YAAY,SAAU,OAAO,CAAC,WAAW,CAAC,KAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAc7F,CAAC;AAEF,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,qBAi8B5C;kBAj8BQ,cAAc;;;AAq8BvB,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/lib/esm/MarkdownEditor/MarkdownEditor.js

@@ -27,6 +27,7 @@ import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDebounce, usePrevious, useUndo } from '../hooks';
+import { ToastNotification } from '../index';
 export var EditorMode;
 (function (EditorMode) {
     EditorMode["PLAIN"] = "plaintext";
@@ -52,6 +53,21 @@ const defaultProps = {
         showFileSelectorInToolbar: false,
     },
 };
+const MAX_FILE_SIZE = 2 * 1024; // 2MB in KB
+const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/gif'];
+export const validateFile = (file) => {
+    // Check file type
+    if (!ALLOWED_FILE_TYPES.includes(file.fileType)) {
+        // ToastNotification.addDangerMessage(t('Invalid file type, Only JPEG, PNG, GIF files are allowed.'));
+        return { isValid: false, errorMsg: 'Invalid file type, Only JPEG, PNG, GIF files are allowed.' };
+    }
+    // Check file size
+    if (file.sizeKB > MAX_FILE_SIZE) {
+        // ToastNotification.addDangerMessage(t('File too large, File size must be less than 2MB'));
+        return { isValid: false, errorMsg: 'File too large, File size must be less than 2MB' };
+    }
+    return { isValid: true, errorMsg: '' };
+};
 function MarkdownEditor(props) {
     const { t } = useTranslation();
     const { hidePreviewText, showPreviewText, mdPlaceholder, plainTextPlaceholder, textAreaClassName, bindTextArea, markedownOptions, allowEmoji, hideHeadingOptions, rows, showMarkdownPlainTextToggle, editorMode, className, charLimit, minCharsForCounter, id, value, onCommentExceedCharsLimit, fileSelectorProps: { onClipboardPaste, onFileDelete, onFileSelect, isSupportedFile, showFileSelectorInToolbar = false, isUploadingFile = false, filesList = [], attachFileBtn, } } = props, textAreaProps = __rest(props, ["hidePreviewText", "showPreviewText", "mdPlaceholder", "plainTextPlaceholder", "textAreaClassName", "bindTextArea", "markedownOptions", "allowEmoji", "hideHeadingOptions", "rows", "showMarkdownPlainTextToggle", "editorMode", "className", "charLimit", "minCharsForCounter", "id", "value", "onCommentExceedCharsLimit", "fileSelectorProps"]);
@@ -77,6 +93,12 @@ function MarkdownEditor(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filesList]);
     const onFileInsert = (file) => {
+        const { isValid, errorMsg } = validateFile(file);
+        if (!isValid) {
+            ToastNotification.addDangerMessage(t(errorMsg));
+            return;
+        }
+        // Create markdown image syntax
         const template = isImageFile(file.fileType)
             ? `![${file.fileName}](${file.link})`
             : `[${file.fileName}](${file.link})`;
@@ -220,17 +242,93 @@ function MarkdownEditor(props) {
         const whitespaceEdges = selectedText.match(/^\s*|\s*$/g) || [];
         const leadingWhitespace = whitespaceEdges[0] || '';
         const trailingWhitespace = whitespaceEdges[1] || '';
+        const trimmedText = selectedText.trim();
+        let coreText = trimmedText;
+        // Check existing formatting
+        const existingFormats = {
+            h1: coreText.startsWith('# '),
+            h2: coreText.startsWith('## '),
+            h3: coreText.startsWith('### '),
+            bold: coreText.startsWith('**') && coreText.endsWith('**'),
+            italic: coreText.startsWith('_') && coreText.endsWith('_'),
+            quote: coreText.startsWith('> '),
+            link: coreText.match(/^\[.*\]\(.*\)$/),
+        };
+        // Remove existing formatting to get core text
+        if (existingFormats.h1)
+            coreText = coreText.substring(2);
+        else if (existingFormats.h2)
+            coreText = coreText.substring(3);
+        else if (existingFormats.h3)
+            coreText = coreText.substring(4);
+        if (existingFormats.bold)
+            coreText = coreText.substring(2, coreText.length - 2);
+        if (existingFormats.italic)
+            coreText = coreText.substring(1, coreText.length - 1);
+        if (existingFormats.quote)
+            coreText = coreText.substring(2);
+        if (existingFormats.link) {
+            const match = coreText.match(/^\[(.*)\]\((.*)\)$/);
+            if (match)
+                coreText = match[1];
+        }
+        // Determine what formatting we're adding
+        const newFormat = {
+            h1: templateStart === '# ' && templateEnd === '',
+            h2: templateStart === '## ' && templateEnd === '',
+            h3: templateStart === '### ' && templateEnd === '',
+            bold: templateStart === '**' && templateEnd === '**',
+            italic: templateStart === '_' && templateEnd === '_',
+            quote: templateStart === '> ' && (templateEnd === '' || templateEnd === '\n'),
+            link: templateEnd.includes(']('),
+        };
+        // Apply formatting
+        let formattedText = coreText;
+        // First apply inline formatting (bold, italic)
+        if (newFormat.italic && !existingFormats.italic) {
+            formattedText = `_${formattedText}_`;
+        }
+        if (existingFormats.italic && !newFormat.italic) {
+            formattedText = `_${formattedText}_`;
+        }
+        if (newFormat.bold && !existingFormats.bold) {
+            formattedText = `**${formattedText}**`;
+        }
+        if (existingFormats.bold && !newFormat.bold) {
+            formattedText = `**${formattedText}**`;
+        }
+        // Then apply block-level formatting (headings, quotes)
+        if (newFormat.h1 || existingFormats.h1) {
+            formattedText = `# ${formattedText}`;
+        }
+        else if (newFormat.h2 || existingFormats.h2) {
+            formattedText = `## ${formattedText}`;
+        }
+        else if (newFormat.h3 || existingFormats.h3) {
+            formattedText = `### ${formattedText}`;
+        }
+        // Handle quotes - keep them at the start of the line
+        if (newFormat.quote || existingFormats.quote) {
+            formattedText = `> ${formattedText}`;
+        }
+        // Special handling for links
+        if (newFormat.link) {
+            formattedText = `[${formattedText}](URL "TITLE")`;
+        }
+        if (existingFormats.link && !newFormat.link) {
+            const match = trimmedText.match(/^\[(.*)\]\((.*)\)$/);
+            if (match)
+                formattedText = `[${formattedText}](${match[2]})`;
+        }
         const newText = currentText.substring(0, posStart) +
             leadingWhitespace +
-            templateStart +
-            selectedText.trim() +
-            templateEnd +
+            formattedText +
             trailingWhitespace +
             currentText.substring(posEnd);
         // Set the value in the textarea
         textareaRef.current.value = newText;
-        textareaRef.current.selectionStart = posEnd + templateStart.length + templateEnd.length;
-        textareaRef.current.selectionEnd = textareaRef.current.selectionStart;
+        textareaRef.current.selectionStart = posStart + leadingWhitespace.length;
+        textareaRef.current.selectionEnd = posStart + leadingWhitespace.length + formattedText.length;
         textareaRef.current.focus();
         // Call onValueChangeLocal only once
         onValueChangeLocal(newText);
@@ -315,7 +413,7 @@ function MarkdownEditor(props) {
     };
     const quote = () => {
         if (hasSelection()) {
-            wrapSelection('> ', '\n');
+            wrapSelection('> ', '');
         }
         else {
             insert('> QUOTE', 2, 7);

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

@@ -0,0 +1,15 @@
+import { IContact } from '@cee-eng/hydrajs/@types/models/contact';
+import React from 'react';
+import { ITypeaheadDropdownProps } from '../TypeaheadDropdown/TypeaheadDropdown';
+export type IOwnerSelectorExtends = Omit<ITypeaheadDropdownProps, 'selected' | 'options' | 'onSelect' | 'onHandleLoadMore' | 'isShowMoreOptionVisible'>;
+export interface IOwnerSelectorProps extends IOwnerSelectorExtends {
+    selected: IContact[];
+    options: IOwnerOption[];
+    onSelect: (contacts: IContact[]) => void;
+}
+export interface IOwnerOption {
+    contact: IContact;
+    isCustomEmail?: boolean;
+}
+export declare function OwnerTypeaheadDropdown(props: IOwnerSelectorProps): React.JSX.Element;
+//# sourceMappingURL=OwnerTypeaheadDropdown.d.ts.map

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

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

package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import filter from 'lodash/filter';
+import find from 'lodash/find';
+import map from 'lodash/map';
+import React, { useMemo } from 'react';
+import { getHydraContactLabel } from '../Functional/CaseContactsSelectorExternal';
+import { useProgressiveLoading } from '../hooks/useProgressiveLoading';
+import { TypeaheadDropdown, } from '../TypeaheadDropdown/TypeaheadDropdown';
+const PAGE_SIZE = 10;
+function getTypeaheadOptionsFromContacts(contacts) {
+    return map(contacts, (o) => ({ label: getHydraContactLabel(o), value: o.ssoUsername }));
+}
+function getTypeaheadOptionsFromOption(contacts) {
+    return map(contacts, (o) => ({ label: getHydraContactLabel(o.contact), value: o.contact.ssoUsername }));
+}
+export function OwnerTypeaheadDropdown(props) {
+    const { options, selected, onSelect, onBlur, onToggleClosed } = props, restProps = __rest(props, ["options", "selected", "onSelect", "onBlur", "onToggleClosed"]);
+    const selectedTypeaheadOptions = useMemo(() => getTypeaheadOptionsFromContacts(selected), [selected]);
+    const { visibleItems, hasMoreItems, onHandleLoadMore, resetVisibleItems } = useProgressiveLoading(options, PAGE_SIZE);
+    const typeaheadOptions = useMemo(() => getTypeaheadOptionsFromOption(visibleItems), [visibleItems]);
+    /**
+     * Handles selecting or deselecting a contact.
+     *
+     * @param {React.MouseEvent<Element, MouseEvent>} _
+     * @param contactLabel The value of the selected option.
+     * @returns
+     */
+    const onSelectContact = (selectedOptions) => {
+        const selectedContacts = map(filter(options, (option) => !!find(selectedOptions, (selectedOption) => selectedOption.value === option.contact.ssoUsername)), (o) => o.contact);
+        onSelect(selectedContacts);
+    };
+    const onLocalBlur = (event) => {
+        resetVisibleItems();
+        !!onBlur && onBlur(event);
+    };
+    const onLocalToggleClosed = () => {
+        resetVisibleItems();
+        !!onToggleClosed && onToggleClosed();
+    };
+    return (React.createElement(TypeaheadDropdown, Object.assign({ "data-tracking-id": "external-case-contact-selector", selected: selectedTypeaheadOptions, options: typeaheadOptions, onSelect: onSelectContact, onHandleLoadMore: onHandleLoadMore, isShowMoreOptionVisible: hasMoreItems(), onBlur: onLocalBlur, onToggleClosed: onLocalToggleClosed }, restProps)));
+}

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

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

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

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

package/lib/esm/OwnerTypeaheadDropdown/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"TagsSelector.d.ts","sourceRoot":"","sources":["../../../src/TagsSelector/TagsSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAmB3B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,UAAU,MAAM;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,EAAE,EACF,SAAS,EACT,YAAiB,EACjB,QAAgB,GACnB,EAAE,MAAM,qBAuJR"}
+{"version":3,"file":"TagsSelector.d.ts","sourceRoot":"","sources":["../../../src/TagsSelector/TagsSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAmB3B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,UAAU,MAAM;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,EAAE,EACF,SAAS,EACT,YAAiB,EACjB,QAAgB,GACnB,EAAE,MAAM,qBA2JR"}

package/lib/esm/TagsSelector/TagsSelector.js

@@ -22,7 +22,8 @@ export function TagsSelector({ tagOptions, onChange, placeholder, id, typeahead,
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [query, tagOptions]);
     const { t } = useTranslation();
-    const onToggleClick = () => {
+    const onToggleClick = (e) => {
+        e.stopPropagation();
         setIsOpen(!isOpen);
     };
     const onSelect = (selection) => {
@@ -58,7 +59,7 @@ export function TagsSelector({ tagOptions, onChange, placeholder, id, typeahead,
             e.stopPropagation();
             onSelect(label);
         } }, label.tagName)))));
-    const toggle = (toggleRef) => (React.createElement(MenuToggle, Object.assign({ ref: toggleRef, onClick: onToggleClick, className: "pf-v5-u-flex-grow-1 tags-selector-menu-toggle", isExpanded: isOpen, onKeyDown: onInputKeyDown, disabled: isEmpty(tagOptions) || disabled }, (typeahead && { variant: 'typeahead' }), { id: id }), typeahead ? (React.createElement(TextInputGroup, { isPlain: true },
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, Object.assign({ ref: toggleRef, onClick: onToggleClick, className: `pf-v5-u-flex-grow-1 tags-selector-menu-toggle ${isEmpty(tagOptions) || disabled ? 'menu-is-disabld' : ''}`, isExpanded: isOpen, onKeyDown: onInputKeyDown, isDisabled: isEmpty(tagOptions) || disabled }, (typeahead && { variant: 'typeahead' }), { id: id, isFullWidth: true }), typeahead ? (React.createElement(TextInputGroup, { isPlain: true },
         React.createElement(TextInputGroupMain, { id: "tags-selector-search-input", value: query, onClick: onToggleClick, onChange: (e, v) => setQuery(v), onKeyDown: onInputKeyDown, innerRef: textInputRef, isExpanded: isOpen, placeholder: placeholder || t('Search for a tag') }, selectedChipGroup),
         React.createElement(TextInputGroupUtilities, null, selected.length > 0 && (React.createElement(Button, { variant: "plain", onClick: handleClear, "aria-label": "clear-all-tags" },
             React.createElement(TimesIcon, { "aria-hidden": true })))))) : (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' }, alignItems: { default: 'alignItemsCenter' } },

package/lib/esm/TagsSelector/tagSelector.css

@@ -9,3 +9,7 @@
 .tags-selector-menu-toggle .pf-v5-c-menu-toggle__controls {
     padding-left: 0;
 }
+
+.menu-is-disabld {
+    background-color: #d2d2d2 !important;
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface ITypeaheadDropdownProps {
+    selected: ITypeaheadDropdownOption[];
+    options: ITypeaheadDropdownOption[];
+    isShowMoreOptionVisible?: boolean;
+    id?: string;
+    placeholder?: string;
+    inputAriaControls?: string;
+    isDisabled?: boolean;
+    multiple?: boolean;
+    hasClearButton?: boolean;
+    defaultIsOpen?: boolean;
+    onSelect: (options: ITypeaheadDropdownOption[]) => void;
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    onToggleClosed?: () => void;
+    onClearQuery?: () => void;
+    onQueryUpdated?: (query: string) => void;
+    onOpenChange?: (isOpen: boolean) => void;
+    onHandleLoadMore?: (event: any) => void;
+}
+export interface ITypeaheadDropdownOption {
+    value: any;
+    label: string;
+}
+export declare const VIEW_MORE_OPTION_VALUE = "view-more-option-value";
+export declare function TypeaheadDropdown(props: ITypeaheadDropdownProps): React.JSX.Element;
+//# sourceMappingURL=TypeaheadDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/TypeaheadDropdown/TypeaheadDropdown.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,OAAO,EAAE,wBAAwB,EAAE,CAAC;IACpC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,QAAQ,EAAE,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAG/D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,qBAgO/D"}

package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.js

@@ -0,0 +1,143 @@
+import { Button, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
+import concat from 'lodash/concat';
+import filter from 'lodash/filter';
+import find from 'lodash/find';
+import includes from 'lodash/includes';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
+import map from 'lodash/map';
+import React, { useEffect, useState } from 'react';
+import { Highlighter } from 'react-bootstrap-typeahead';
+import { useTranslation } from 'react-i18next';
+import { useSelectKeyboardNavigator } from '../hooks/useSelectKeyboardNavigator';
+export const VIEW_MORE_OPTION_VALUE = 'view-more-option-value';
+const VIEW_MORE_OPTION = { label: 'View more', value: VIEW_MORE_OPTION_VALUE };
+export function TypeaheadDropdown(props) {
+    const { options, selected, hasClearButton, id, isDisabled, multiple, placeholder, isShowMoreOptionVisible, defaultIsOpen, inputAriaControls, onSelect, onBlur, onToggleClosed, onClearQuery, onQueryUpdated, onHandleLoadMore, onOpenChange, } = props;
+    const { t } = useTranslation();
+    const [isOpen, setIsOpen] = useState(defaultIsOpen !== null && defaultIsOpen !== void 0 ? defaultIsOpen : false);
+    const [query, setQuery] = useState(!multiple ? (!isEmpty(selected) ? selected[0].label : '') : '');
+    const [allOptions, setAllOptions] = useState([]);
+    const { focusedItemIndex, onInputKeyDown, setFocusedItemIndex } = useSelectKeyboardNavigator({
+        ignoreResetOnListChange: true,
+        isDisabled: isDisabled,
+        list: allOptions,
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        onSelect: (option) => onLocalSelect(undefined, option.value),
+    });
+    /**
+     * Allows the select toggle component to open and close itself.
+     */
+    const handleToggle = () => {
+        setIsOpen((open) => {
+            const isOpen = !open;
+            return isOpen;
+        });
+    };
+    /**
+     * Set the query to an empty string when the clear button is pressed.
+     */
+    const handleClearQuery = (event) => {
+        setQuery('');
+        onClearQuery && onClearQuery();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+    };
+    /**
+     * Updates the query with the new value and notifies consumers that the query has been updated.
+     * @param _ The unused click event
+     * @param v The new query value
+     */
+    const updateQuery = (event, v) => {
+        setQuery(v);
+        onQueryUpdated && onQueryUpdated(v);
+        if (!isOpen) {
+            setIsOpen(true);
+        }
+    };
+    /**
+     * Used by the Select patternfly component to change the toggle open state.
+     * @param isOpen The state used to change the open state of the toggle
+     */
+    const localOnOpenChange = (isOpen) => {
+        setIsOpen(isOpen);
+        !!onOpenChange && onOpenChange(isOpen);
+    };
+    const isAlreadySelected = (option) => {
+        return includes(selected, option);
+    };
+    /**
+     * Handles selecting or deselecting a contact.
+     *
+     * @param {React.MouseEvent<Element, MouseEvent>} _
+     * @param contactLabel The value of the selected option.
+     * @returns
+     */
+    const onLocalSelect = (event, value) => {
+        if (!isString(value) && !isNumber(value)) {
+            return;
+        }
+        if (value === VIEW_MORE_OPTION_VALUE) {
+            !!onHandleLoadMore && onHandleLoadMore(event);
+            return;
+        }
+        const selectedOption = find(allOptions, (o) => o.value === value);
+        if (!selectedOption)
+            return;
+        if (!multiple) {
+            if (selected[0] === selectedOption)
+                return;
+            // Single selection: replace the selection with the new option
+            onSelect([selectedOption]);
+            setQuery(selectedOption.label);
+        }
+        else {
+            // Multiple selection: add or remove the contact
+            const updatedSelection = isAlreadySelected(selectedOption)
+                ? filter(selected, (o) => !isEqual(selectedOption, o)) // Remove
+                : concat(selected, selectedOption); // Add
+            onSelect(updatedSelection);
+        }
+        setIsOpen(false);
+        setFocusedItemIndex(null);
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, variant: "typeahead", onClick: handleToggle, innerRef: toggleRef, isExpanded: isOpen, isDisabled: isDisabled },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: query, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t(`Search by name or username`), onChange: updateQuery, onClick: handleToggle, onKeyDown: onInputKeyDown, isExpanded: isOpen, "aria-controls": inputAriaControls, role: "combobox" }),
+            React.createElement(TextInputGroupUtilities, null,
+                query && hasClearButton && !isDisabled && (React.createElement(Button, { "aria-label": "Clear input value", variant: "plain", onClick: handleClearQuery, isDisabled: isDisabled },
+                    React.createElement(TimesCircleIcon, null))),
+                isDisabled && React.createElement(Spinner, { size: "sm" })))));
+    useEffect(() => {
+        if (isShowMoreOptionVisible) {
+            setAllOptions([...options, VIEW_MORE_OPTION]);
+        }
+        else {
+            setAllOptions(options);
+        }
+    }, [options, isShowMoreOptionVisible]);
+    useEffect(() => {
+        if (!isOpen) {
+            setFocusedItemIndex(null);
+            !!onToggleClosed && onToggleClosed();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
+    return (React.createElement(Select, { id: id || '', "data-tracking-id": "external-case-contact-selector", role: "menu", shouldFocusFirstItemOnOpen: false, shouldFocusToggleOnSelect: false, isOpen: isOpen, onOpenChange: localOnOpenChange, toggle: toggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onBlur: onBlur, onSelect: onLocalSelect },
+        React.createElement(SelectList, { isAriaMultiselectable: multiple }, map(allOptions, (option, index) => {
+            if (option.value === VIEW_MORE_OPTION_VALUE) {
+                // You cannot use the styling applied by the "isLoadButton" prop
+                // because it overwrites the pf-m-focus styling. Inorder for it to visually
+                // look the same and be able to function with keyboard accessibility,
+                // the selection option text needs to be wrapped in a span with the pf link color class.
+                return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: focusedItemIndex === index, isSelected: false, onClick: onHandleLoadMore },
+                    React.createElement("span", { className: "pf-v5-u-link-color" }, "View more")));
+            }
+            return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: focusedItemIndex === index, isSelected: isAlreadySelected(option) },
+                React.createElement(Highlighter, { key: option.value, search: query }, option.label)));
+        }))));
+}

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

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

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

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

package/lib/esm/TypeaheadDropdown/index.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC"}

package/lib/esm/hooks/index.js

@@ -15,3 +15,4 @@ export * from './useSelectKeyboardNavigator';
 export * from './useLocalStorage';
 export * from './useSessionStorage';
 export * from './useSearchDocument';
+export * from './useProgressiveLoading';

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

@@ -0,0 +1,10 @@
+export declare function useProgressiveLoading<T>(allItems?: T[], defaultPageSize?: number): {
+    pageSize: number;
+    visibleItems: T[];
+    hasMoreItems: () => boolean;
+    onHandleLoadMore: (event: any) => void;
+    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setVisibleItems: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    resetVisibleItems: () => void;
+};
+//# sourceMappingURL=useProgressiveLoading.d.ts.map

package/lib/esm/hooks/useProgressiveLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProgressiveLoading.d.ts","sourceRoot":"","sources":["../../../src/hooks/useProgressiveLoading.ts"],"names":[],"mappings":"AAGA,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,QAAQ,GAAE,CAAC,EAAO,EAAE,eAAe,SAAK;;;;;;;;EAoChF"}

package/lib/esm/hooks/useProgressiveLoading.js

@@ -0,0 +1,33 @@
+import { haltEvent } from '@rh-support/utils';
+import { useEffect, useState } from 'react';
+export function useProgressiveLoading(allItems = [], defaultPageSize = 10) {
+    const [pageSize, setPageSize] = useState(defaultPageSize);
+    const [visibleItems, setVisibleItems] = useState(allItems.slice(0, pageSize));
+    useEffect(() => {
+        setVisibleItems(allItems.slice(0, pageSize));
+    }, [allItems, pageSize]);
+    /**
+     * Load the next "page" of items.
+     * @param event
+     */
+    const onHandleLoadMore = (event) => {
+        const newVisibleOptions = (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) + pageSize;
+        if (newVisibleOptions < allItems.length) {
+            setVisibleItems(allItems.slice(0, newVisibleOptions));
+        }
+        else {
+            setVisibleItems(allItems);
+        }
+        haltEvent(event);
+    };
+    /**
+     * reset the visible items to the "first" page
+     */
+    const resetVisibleItems = () => setVisibleItems(allItems.slice(0, pageSize));
+    /**
+     *
+     * @returns Whether or not the number of visible items is less than the total number of items.
+     */
+    const hasMoreItems = () => visibleItems.length < allItems.length;
+    return { pageSize, visibleItems, hasMoreItems, onHandleLoadMore, setPageSize, setVisibleItems, resetVisibleItems };
+}

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

@@ -2,10 +2,18 @@ import React from 'react';
 interface IProps {
     list: any[];
     isOpen: boolean;
+    ignoreResetOnListChange?: boolean;
+    resetIndexOnClose?: boolean;
+    isDisabled?: boolean;
     setIsOpen: (value: React.SetStateAction<boolean>) => void;
     onSelect: (value: any) => void;
 }
-export declare function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }: IProps): {
+export declare function useSelectKeyboardNavigator({ list, isOpen, ignoreResetOnListChange, resetIndexOnClose, isDisabled, setIsOpen, onSelect, }: IProps): {
+    focusedItemIndex: number;
+    onInputKeyDown: (event: any) => void;
+    setFocusedItemIndex: React.Dispatch<React.SetStateAction<number>>;
+};
+export declare function useSelectKeyboardNavigatorModified({ list, isOpen, setIsOpen, onSelect }: IProps): {
     onInputKeyDown: (event: any) => void;
     focusedItemIndex: number;
 };

package/lib/esm/hooks/useSelectKeyboardNavigator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSelectKeyboardNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,MAAM;IACZ,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,MAAM;;;EAwDvF"}
+{"version":3,"file":"useSelectKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSelectKeyboardNavigator.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,MAAM;IACZ,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,EACvC,IAAI,EACJ,MAAM,EACN,uBAAuB,EACvB,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,QAAQ,GACX,EAAE,MAAM;;;;EAqFR;AAED,wBAAgB,kCAAkC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,MAAM;;;EAqD/F"}

package/lib/esm/hooks/useSelectKeyboardNavigator.js

@@ -1,9 +1,29 @@
+import { haltEvent } from '@rh-support/utils';
 import { useEffect, useState } from 'react';
-export function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }) {
+export function useSelectKeyboardNavigator({ list, isOpen, ignoreResetOnListChange, resetIndexOnClose, isDisabled, setIsOpen, onSelect, }) {
     const [focusedItemIndex, setFocusedItemIndex] = useState(null);
+    /**
+     * Reset the item index whenever the list changes if it is not specified to be ignored.
+     */
     useEffect(() => {
-        setFocusedItemIndex(null);
+        !ignoreResetOnListChange && setFocusedItemIndex(null);
+        // This hook should only run when the list has changed.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [list.length]);
+    /**
+     * Reset the item index whenever isOpen is false and the focused index is not null.
+     * Should only be called when isOpen is changed
+     */
+    useEffect(() => {
+        if (resetIndexOnClose && !isOpen && focusedItemIndex !== null) {
+            setFocusedItemIndex(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
+    /**
+     * Handles transitioning the focus to the next item in the list.
+     * @param key The stringified version of the arrow keys
+     */
     const handleMenuArrowKeys = (key) => {
         let indexToFocus;
         if (isOpen) {
@@ -28,12 +48,18 @@ export function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }
             setFocusedItemIndex(indexToFocus);
         }
     };
+    /**
+     * Listens for keyboard events to handle the opening/closing of the menu,
+     * the selection of a focused menu item and transitioning the focus to the next item.
+     *
+     * @param event The key down event
+     */
     const onInputKeyDown = (event) => {
         const focusedItem = focusedItemIndex !== null ? list[focusedItemIndex] : null;
         switch (event.key) {
             // Select the first available option
             case 'Enter':
-                if (!isOpen) {
+                if (!isOpen && !isDisabled) {
                     setIsOpen((pre) => !pre);
                 }
                 else if (isOpen && focusedItem !== null) {
@@ -41,6 +67,7 @@ export function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }
                 }
                 break;
             case 'Escape':
+                resetIndexOnClose && setFocusedItemIndex(null);
                 setIsOpen(false);
                 break;
             case 'ArrowUp':
@@ -50,5 +77,57 @@ export function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }
                 break;
         }
     };
+    return { focusedItemIndex, onInputKeyDown, setFocusedItemIndex };
+}
+export function useSelectKeyboardNavigatorModified({ list, isOpen, setIsOpen, onSelect }) {
+    const [focusedItemIndex, setFocusedItemIndex] = useState(0);
+    const handleMenuArrowKeys = (key) => {
+        if (isOpen) {
+            setFocusedItemIndex((localIndex) => {
+                let indexToFocus;
+                if (key === 'ArrowUp') {
+                    // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+                    if (localIndex === 0) {
+                        indexToFocus = list.length - 1;
+                    }
+                    else {
+                        indexToFocus = localIndex - 1;
+                    }
+                }
+                if (key === 'ArrowDown') {
+                    // When no index is set or at the last index, focus to the first, otherwise increment focus index
+                    if (localIndex === list.length - 1) {
+                        indexToFocus = 0;
+                    }
+                    else {
+                        indexToFocus = localIndex + 1;
+                    }
+                }
+                return indexToFocus;
+            });
+        }
+    };
+    const onInputKeyDown = (event) => {
+        switch (event.key) {
+            // Select the first available option
+            case 'Enter':
+                const focusedItem = focusedItemIndex !== null ? list[focusedItemIndex] : null;
+                if (!isOpen) {
+                    setIsOpen((pre) => !pre);
+                }
+                else if (isOpen && focusedItem !== null) {
+                    onSelect(focusedItem);
+                }
+                break;
+            case 'Escape':
+                setIsOpen(false);
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                haltEvent(event);
+                handleMenuArrowKeys(event.key);
+                break;
+        }
+    };
     return { onInputKeyDown, focusedItemIndex };
 }

package/lib/esm/index.d.ts

@@ -32,4 +32,5 @@ export * from './TextAreaResizable';
 export * from './CustomTextInput';
 export * from './PhoneInput';
 export * from './TagsSelector';
+export * from './OwnerTypeaheadDropdown';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC"}

package/lib/esm/index.js

@@ -32,3 +32,4 @@ export * from './TextAreaResizable';
 export * from './CustomTextInput';
 export * from './PhoneInput';
 export * from './TagsSelector';
+export * from './OwnerTypeaheadDropdown';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "2.5.0",
+    "version": "2.5.2",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -44,7 +44,7 @@
         "prepublishOnly": "npm run build"
     },
     "peerDependencies": {
-        "@cee-eng/hydrajs": "4.17.36",
+        "@cee-eng/hydrajs": "4.18.0",
         "@cee-eng/ui-toolkit": "1.1.8",
         "@patternfly/patternfly": "5.4.0",
         "@patternfly/react-core": "5.4.0",
@@ -62,7 +62,7 @@
         "use-deep-compare-effect": "^1.6.1"
     },
     "dependencies": {
-        "@cee-eng/hydrajs": "4.17.36",
+        "@cee-eng/hydrajs": "4.18.0",
         "@cee-eng/ui-toolkit": "1.1.8",
         "@patternfly/patternfly": "5.4.0",
         "@patternfly/react-core": "5.4.0",
@@ -70,8 +70,8 @@
         "@patternfly/react-table": "5.1.1",
         "@patternfly/react-tokens": "^5.4.0",
         "@rh-support/types": "2.0.5",
-        "@rh-support/user-permissions": "2.5.0",
-        "@rh-support/utils": "2.5.0",
+        "@rh-support/user-permissions": "2.5.1",
+        "@rh-support/utils": "2.5.1",
         "dompurify": "^2.2.6",
         "downshift": "^6.0.5",
         "js-worker-search": "^1.4.1",
@@ -111,5 +111,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "d867a78014ee4a08aa8d7bf9e0dc9bd08ce6ac5a"
+    "gitHead": "c4edba0ff68de868d7de31a8afcca922b218476a"
 }