@rh-support/components 2.5.1 → 2.5.2

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/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.1",
+    "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": "78f51b2cfd60107a49503d13542ba46d29df4d04"
+    "gitHead": "c4edba0ff68de868d7de31a8afcca922b218476a"
 }