@rh-support/components 2.5.1 → 2.5.3

package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.js

@@ -0,0 +1,218 @@
+import { Button, Label, LabelGroup, MenuToggle, Select, SelectGroup, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
+import { haltEvent } from '@rh-support/utils';
+import concat from 'lodash/concat';
+import filter from 'lodash/filter';
+import find from 'lodash/find';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
+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';
+export const ADD_NEW_OPTION_VALUE = 'new-option-value';
+const VIEW_MORE_OPTION = { label: 'View more', value: VIEW_MORE_OPTION_VALUE };
+const ADD_NEW_OPTION = { label: 'Create new option', value: ADD_NEW_OPTION_VALUE };
+function isDropdownGroup(option) {
+    return option.groupLabel !== undefined;
+}
+function isDropdownOption(option) {
+    const typedOption = option;
+    return typedOption.value !== undefined && typedOption.label !== undefined;
+}
+function flattenOptions(options) {
+    const flattened = [];
+    for (const option of options) {
+        if (isDropdownGroup(option)) {
+            flattened.push(...option.options); // Only add the group's items
+        }
+        else if (isDropdownOption(option)) {
+            flattened.push(option); // Add standalone item
+        }
+    }
+    return flattened;
+}
+export function TypeaheadDropdown(props) {
+    var _a;
+    const { options, selected, hasClearButton, id, isDisabled, multiple, placeholder, isShowMoreOptionVisible, defaultIsOpen, inputAriaControls, status, onSelect, onBlur, onToggleClosed, onClearQuery, onChipRemoved, onQueryUpdated, onHandleLoadMore, onOpenChange, onNew, canAddNew, getCreateNewText, } = 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((_a = flattenOptions(options)) !== null && _a !== void 0 ? _a : []);
+    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 !!find(selected, (selectedOption) => selectedOption.value === option.value);
+    };
+    /**
+     * 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;
+        }
+        if (value === ADD_NEW_OPTION_VALUE) {
+            !!onNew && onNew(query);
+            setQuery('');
+            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);
+            setQuery('');
+        }
+        setIsOpen(false);
+        setFocusedItemIndex(null);
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, variant: "typeahead", onClick: handleToggle, innerRef: toggleRef, isExpanded: isOpen, isDisabled: isDisabled, status: status },
+        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" }, !!multiple && (React.createElement(LabelGroup, { "aria-label": "Current selections" }, selected.map((option, index) => (React.createElement(Label, { key: index, variant: "outline", onClick: haltEvent, onClose: (ev) => {
+                    haltEvent(ev);
+                    !!onChipRemoved && onChipRemoved(option);
+                } }, option.label)))))),
+            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" })))));
+    /**
+     * Renders the options and group options.
+     * @returns {JSX.Element[]} The rendered options.
+     */
+    const renderOptions = () => {
+        let currentIndex = 0;
+        const optionElements = [];
+        for (const option of options) {
+            if (isDropdownOption(option)) {
+                optionElements.push(getOptionElement(option, currentIndex));
+                currentIndex++;
+            }
+            else if (isDropdownGroup(option)) {
+                const typedOption = option;
+                const groupOptionElements = [];
+                for (const groupOption of typedOption.options) {
+                    groupOptionElements.push(getOptionElement(groupOption, currentIndex));
+                    currentIndex++;
+                }
+                optionElements.push(React.createElement(SelectGroup, { label: typedOption.groupLabel }, ...groupOptionElements));
+            }
+        }
+        if (isShowMoreOptionVisible) {
+            optionElements.push(getOptionElement(VIEW_MORE_OPTION, currentIndex));
+            currentIndex++;
+        }
+        if (!!canAddNew && canAddNew(options, query)) {
+            optionElements.push(getOptionElement(ADD_NEW_OPTION, currentIndex));
+        }
+        return optionElements;
+    };
+    /**
+     * Renders individual options.
+     * @param option The option to render
+     * @param index The option's index within the allOptions array
+     * @returns The rendered option
+     */
+    const getOptionElement = (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")));
+        }
+        else if (option.value === ADD_NEW_OPTION_VALUE) {
+            return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: false, isSelected: false }, !!getCreateNewText ? getCreateNewText(query) : `${option.label}: ${query}`));
+        }
+        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)));
+    };
+    useEffect(() => {
+        const localAllOptions = [...flattenOptions(options)];
+        if (isShowMoreOptionVisible) {
+            localAllOptions.push(VIEW_MORE_OPTION);
+        }
+        if (!!canAddNew && canAddNew(options, query)) {
+            localAllOptions.push(ADD_NEW_OPTION);
+        }
+        setAllOptions(localAllOptions);
+        // There is no need to recall this when canAddNew has been changed.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [options, isShowMoreOptionVisible, query]);
+    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 }, ...renderOptions())));
+}

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,6 @@ export * from './useSelectKeyboardNavigator';
 export * from './useLocalStorage';
 export * from './useSessionStorage';
 export * from './useSearchDocument';
+export * from './usePatternFlySingleSelectToggle';
+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,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC"}

package/lib/esm/hooks/index.js

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

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

@@ -0,0 +1,16 @@
+import { MenuToggleElement } from '@patternfly/react-core';
+import React, { Ref } from 'react';
+interface IProps {
+    selected: string;
+    isDisabled: boolean;
+    isLoading?: boolean;
+    placeholder?: string;
+    isInvalid?: boolean;
+}
+export declare function usePatternFlySingleSelectToggle(props: IProps): {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    toggle: (toggleRef: Ref<MenuToggleElement>) => React.JSX.Element;
+};
+export {};
+//# sourceMappingURL=usePatternFlySingleSelectToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePatternFlySingleSelectToggle.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePatternFlySingleSelectToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,iBAAiB,EAAW,MAAM,wBAAwB,CAAC;AAChG,OAAO,KAAK,EAAE,EAAE,GAAG,EAAY,MAAM,OAAO,CAAC;AAE7C,UAAU,MAAM;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAGD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,MAAM;;;wBAO9B,GAAG,CAAC,iBAAiB,CAAC;EAsBpD"}

package/lib/esm/hooks/usePatternFlySingleSelectToggle.js

@@ -0,0 +1,17 @@
+import { Flex, FlexItem, MenuToggle, Spinner } from '@patternfly/react-core';
+import React, { useState } from 'react';
+// The hook to manage the PatternFly Single Select component
+export function usePatternFlySingleSelectToggle(props) {
+    const [isOpen, setIsOpen] = useState(false);
+    const onToggleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { className: "single-select-toggle-text", ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, isDisabled: props.isDisabled, isFullWidth: true, status: props.isInvalid ? 'danger' : undefined },
+        React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+            React.createElement(FlexItem, null,
+                " ",
+                props.selected || props.placeholder),
+            props.isLoading && (React.createElement(FlexItem, null,
+                React.createElement(Spinner, { size: "md" }))))));
+    return { isOpen, setIsOpen, toggle };
+}

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

@@ -1,7 +1,6 @@
 export * from './LoadingIndicator';
 export * from './AlertMessage';
 export * from './ProgressBar';
-export * from './DropDownList';
 export * from './ErrorBoundary';
 export * from './ErrorPages';
 export * from './LoginModal';
@@ -32,4 +31,6 @@ export * from './TextAreaResizable';
 export * from './CustomTextInput';
 export * from './PhoneInput';
 export * from './TagsSelector';
+export * from './SingleSelectDropdown';
+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,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,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC"}

package/lib/esm/index.js

@@ -1,7 +1,6 @@
 export * from './LoadingIndicator';
 export * from './AlertMessage';
 export * from './ProgressBar';
-export * from './DropDownList';
 export * from './ErrorBoundary';
 export * from './ErrorPages';
 export * from './LoginModal';
@@ -32,3 +31,5 @@ export * from './TextAreaResizable';
 export * from './CustomTextInput';
 export * from './PhoneInput';
 export * from './TagsSelector';
+export * from './SingleSelectDropdown';
+export * from './OwnerTypeaheadDropdown';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "2.5.1",
+    "version": "2.5.3",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -44,13 +44,12 @@
         "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",
         "@patternfly/react-table": "5.4.0",
         "dompurify": "^2.2.6",
-        "downshift": "^6.0.5",
         "js-worker-search": "^1.4.1",
         "lazysizes": "^5.3.2",
         "lodash": "^4.17.21",
@@ -62,7 +61,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,10 +69,9 @@
         "@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",
         "lazysizes": "^5.3.2",
         "lodash": "^4.17.21",
@@ -111,5 +109,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "78f51b2cfd60107a49503d13542ba46d29df4d04"
+    "gitHead": "92c1c95e58dc8e6d2df7fd21b3815da9b7d713c9"
 }

package/lib/esm/DropDownList/AsyncDropDownList.d.ts

@@ -1,6 +0,0 @@
-import { MultiSelectDropdownProps } from './MultiSelectDropdownList';
-import { AsyncDropdownProps, IAsyncOnlyProps, IDropdownListProps } from './types';
-declare const AsyncDropDownList: <T extends {}>(props: IAsyncOnlyProps<T> & IDropdownListProps<T>) => JSX.Element;
-declare const AsyncMultiDropDownList: <T extends {}>(props: IAsyncOnlyProps<T> & MultiSelectDropdownProps<T>) => JSX.Element;
-export { AsyncDropDownList, AsyncMultiDropDownList, AsyncDropdownProps };
-//# sourceMappingURL=AsyncDropDownList.d.ts.map

package/lib/esm/DropDownList/AsyncDropDownList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AsyncDropDownList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/AsyncDropDownList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElF,QAAA,MAAM,iBAAiB,EAA0B,CAAC,CAAY,SAAF,EAAE,EAC1D,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,KAChD,GAAG,CAAC,OAAO,CAAC;AAEjB,QAAA,MAAM,sBAAsB,EAAyC,CAAC,CAAY,SAAF,EAAE,EAC9E,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,wBAAwB,CAAC,CAAC,CAAC,KACtD,GAAG,CAAC,OAAO,CAAC;AAEjB,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,CAAC"}

package/lib/esm/DropDownList/AsyncDropDownList.js

@@ -1,6 +0,0 @@
-import { withAsync } from './async';
-import { Dropdown } from './DropDownList';
-import { MultiSelectDropDownList } from './MultiSelectDropdownList';
-const AsyncDropDownList = withAsync(Dropdown);
-const AsyncMultiDropDownList = withAsync(MultiSelectDropDownList);
-export { AsyncDropDownList, AsyncMultiDropDownList };

package/lib/esm/DropDownList/DropDownList.d.ts

@@ -1,9 +0,0 @@
-import './dropdownList.css';
-import React from 'react';
-import { IDropdownListProps } from './types';
-declare function Dropdown<T>(props: IDropdownListProps<T>): React.JSX.Element;
-declare namespace Dropdown {
-    var defaultProps: Partial<IDropdownListProps<any>>;
-}
-export { Dropdown };
-//# sourceMappingURL=DropDownList.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DropDownList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/DropDownList.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAO5B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAuB7C,iBAAS,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAoJhD;kBApJQ,QAAQ;;;AAsJjB,OAAO,EAAE,QAAQ,EAAE,CAAC"}