@rh-support/manage 2.5.30 → 2.5.32

package/lib/esm/components/Configs/ConfigsTable.js

@@ -120,7 +120,7 @@ export const ConfigsTable = () => {
             React.createElement("div", { className: "toolbar-right" },
                 React.createElement("label", { htmlFor: "search-config-filelds" },
                     React.createElement(Trans, null, "Filter by")),
-                React.createElement(SearchInput, { className: "pf-v5-u-flex-grow-1 pf-v5-c-search-input pf-v5-u-background-color-100", id: "search-config-filelds", placeholder: "Search for an existing config name", value: searchString, onChange: (_, value) => onSearchChange(value), onClear: () => onSearchChange(''), "aria-label": "Search for an existing config name" }))),
+                React.createElement(SearchInput, { className: "pf-v6-u-flex-grow-1 pf-v6-c-search-input pf-v6-u-background-color-100", id: "search-config-filelds", placeholder: "Search for an existing config name", value: searchString, onChange: (_, value) => onSearchChange(value), onClear: () => onSearchChange(''), "aria-label": "Search for an existing config name" }))),
         React.createElement(ErrorBoundary, { errorMsgInfo: { message: 'There was an error loading config page' } },
             React.createElement(ManageTable, { sortInfo: { column: 'created-date', direction: 'desc' }, ariaLabel: 'Table to manage pcm config', columns: columns, data: filteredValues, isFetching: isFetching, isError: false, errorTitle: 'Config table error', errorComponent: React.createElement(Trans, null, "Could not get configs"), keepPageNumberOnDataChange: keepPageNumberOnDataChange }))));
 };

package/lib/esm/components/Groups/DefualtGroupSwitch/DefaultGroupSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultGroupSwitch.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/DefualtGroupSwitch/DefaultGroupSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAIvF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,MAAM;IACZ,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,kBAAkB,UAAW,MAAM,sBA6C/C,CAAC"}
+{"version":3,"file":"DefaultGroupSwitch.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/DefualtGroupSwitch/DefaultGroupSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAIvF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,MAAM;IACZ,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,kBAAkB,UAAW,MAAM,sBA4C/C,CAAC"}

package/lib/esm/components/Groups/DefualtGroupSwitch/DefaultGroupSwitch.js

@@ -34,6 +34,6 @@ export const DefaultGroupSwitch = (props) => {
         }
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Switch, { "aria-label": "Toggle default group", "data-tracking-id": `group-user-toggle-default-${user.isDefault ? 'off' : 'on'}`, label: t('On'), labelOff: t('Off'), id: id, isDisabled: user.access === false || user.write === false || toggleDefaultGroupFetch.isFetching, isChecked: user.isDefault, onChange: (_event, isChecked) => toggleDefault(isChecked) }),
+        React.createElement(Switch, { "aria-label": "Toggle default group", "data-tracking-id": `group-user-toggle-default-${user.isDefault ? 'off' : 'on'}`, label: t('On'), id: id, isDisabled: user.access === false || user.write === false || toggleDefaultGroupFetch.isFetching, isChecked: user.isDefault, onChange: (_event, isChecked) => toggleDefault(isChecked) }),
         React.createElement(LoadingIndicator, { show: toggleDefaultGroupFetch.isFetching, size: "xs" })));
 };

package/lib/esm/components/Groups/GroupSelect/GroupSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/GroupSelect/GroupSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AA4B3E,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,UAAU,MAAM;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD;AAKD,eAAO,MAAM,WAAW,UAAW,MAAM,sBAycxC,CAAC"}
+{"version":3,"file":"GroupSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/GroupSelect/GroupSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAuC3E,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,UAAU,MAAM;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD;AAKD,eAAO,MAAM,WAAW,UAAW,MAAM,sBAuhBxC,CAAC"}

package/lib/esm/components/Groups/GroupSelect/GroupSelect.js

@@ -8,9 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Dropdown, DropdownItem, DropdownToggle, Select, SelectOption, SelectVariant, } from '@patternfly/react-core/deprecated';
+import { Button, Dropdown, MenuContent, MenuItem, MenuList, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInput, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
-import { AlertMessage, AlertType, ToastNotification, useConfirmation, useFetch, usePrevious, } from '@rh-support/components';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { AlertMessage, AlertType, ToastNotification, useConfirmation, useFetch, usePrevious, useSelectKeyboardNavigator, } from '@rh-support/components';
 import { fetchCaseGroupsForSSO, setCaseGroups, useGlobalDispatchContext, useGlobalStateContext, } from '@rh-support/react-context';
 import { ability, resourceActions, resources } from '@rh-support/user-permissions';
 import { haventLoadedMetadata } from '@rh-support/utils';
@@ -34,6 +35,8 @@ export const GroupSelect = (props) => {
             : t('Select a group to view accounts');
     const getGroup = useCallback((groupName) => (caseGroups.data || []).find((groupObj) => groupObj.name === groupName), [caseGroups]);
     const confirmation = useConfirmation();
+    const [input, setInput] = useState('');
+    const [shouldFilter, setShouldFilter] = useState(false);
     // Fetch groups on init
     useEffect(() => {
         var _a, _b;
@@ -53,12 +56,12 @@ export const GroupSelect = (props) => {
     }, [dispatch, loggedInUserJwtToken, caseGroups]);
     // handle dropdown open/close toggle.
     const [isOpen, setIsOpen] = useState(false);
-    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
     // handle group selection
     const [selectedGroup, setSelectedGroup] = useState();
     const previouslySelectedGroup = usePrevious(selectedGroup);
     const onClear = () => {
         setSelectedGroup(null);
+        setShouldFilter(false);
         props.onSelect(null);
     };
     useEffect(() => {
@@ -66,10 +69,12 @@ export const GroupSelect = (props) => {
             onSelectProp(selectedGroup ? getGroup(selectedGroup) : null);
         }
     }, [selectedGroup, getGroup, onSelectProp, previouslySelectedGroup]);
-    const onSelect = (event, group) => {
-        const newGroup = getGroup(group);
+    const handleSelect = (group) => {
+        const newGroup = selectedGroup !== group.name;
+        setInput(group.name);
         if (newGroup) {
-            setSelectedGroup(group);
+            setSelectedGroup(group.name);
+            setShouldFilter(false);
         }
         setIsOpen(false);
     };
@@ -91,17 +96,17 @@ export const GroupSelect = (props) => {
     const deleteGroupFetch = useFetch(publicApi.caseGroups.deleteGroup, { propgateErrors: true });
     const duplicateGroupFetch = useFetch(publicApi.caseGroups.createGroup, { propgateErrors: true });
     // group actions input state
-    const [input, setInput] = useState('');
-    const onMultiSelect = () => null;
-    const onMultiClear = () => setInput('');
+    const textInputRef = useRef();
     const disableOnFetch = caseGroups.isFetching ||
         createGroupFetch.isFetching ||
         renameGroupFetch.isFetching ||
         deleteGroupFetch.isFetching ||
         duplicateGroupFetch.isFetching;
-    const onChange = (e) => {
-        setInput(e.target.value);
-        return [];
+    const onChange = (e, value) => {
+        setInput(value);
+        if (value !== input) {
+            setShouldFilter(true);
+        }
     };
     useEffect(() => setInput(selectedGroup), [selectedGroup]);
     // group actions
@@ -261,12 +266,12 @@ export const GroupSelect = (props) => {
         setInput(selectedGroup);
     };
     const dropdownItems = [
-        React.createElement(DropdownItem, { className: "create-group-action", isDisabled: !ability.can(resourceActions.CREATE, resources.CASE_GROUPS), key: "create", component: "button", onClick: onActionFocus(actions.create), "data-tracking-id": "manage-group-create" }, t('Create')),
-        React.createElement(DropdownItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.UPDATE, resources.CASE_GROUPS), key: "rename", component: "button", onClick: onActionFocus(actions.rename), "data-tracking-id": "manage-group-rename" }, t('Rename')),
-        React.createElement(DropdownItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.DELETE, resources.CASE_GROUPS), key: "delete", component: "button", onClick: onActionFocus(actions.delete), "data-tracking-id": "manage-group-delete" }, t('Delete')),
-        React.createElement(DropdownItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.CREATE, resources.CASE_GROUPS), key: "duplicate", component: "button", "data-tracking-id": "manage-group-duplicate", onClick: onActionFocus(actions.duplicate) }, t('Duplicate')),
+        React.createElement(MenuItem, { className: "create-group-action", isDisabled: !ability.can(resourceActions.CREATE, resources.CASE_GROUPS), key: "create", onClick: onActionFocus(actions.create), "data-tracking-id": "manage-group-create" }, t('Create')),
+        React.createElement(MenuItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.UPDATE, resources.CASE_GROUPS), key: "rename", onClick: onActionFocus(actions.rename), "data-tracking-id": "manage-group-rename" }, t('Rename')),
+        React.createElement(MenuItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.DELETE, resources.CASE_GROUPS), key: "delete", onClick: onActionFocus(actions.delete), "data-tracking-id": "manage-group-delete" }, t('Delete')),
+        React.createElement(MenuItem, { className: "create-group-action", isDisabled: !selectedGroup || !ability.can(resourceActions.CREATE, resources.CASE_GROUPS), key: "duplicate", onClick: onActionFocus(actions.duplicate), "data-tracking-id": "manage-group-duplicate" }, t('Duplicate')),
     ];
-    const dropdownToggle = (React.createElement(DropdownToggle, { isDisabled: props.isDisabled || disableOnFetch, toggleIndicator: null, onToggle: toggleIsDropdownOpen, "data-tracking-id": "manage-group-toggle-options", "aria-label": "Group actions dropdown toggle" },
+    const dropdownToggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, isDisabled: props.isDisabled || disableOnFetch, onClick: toggleIsDropdownOpen, isExpanded: isDropdownOpen, "data-tracking-id": "manage-group-toggle-options", "aria-label": "Group actions dropdown toggle", variant: "plain" },
         React.createElement(CogIcon, null)));
     const submitActionBtn = useRef();
     useEffect(() => {
@@ -316,18 +321,45 @@ export const GroupSelect = (props) => {
     const containsOnlySpecialChars = (str) => {
         return /^[^a-zA-Z0-9]*$/.test(str);
     };
+    const onToggleClick = () => {
+        var _a;
+        setIsOpen(!isOpen);
+        setShouldFilter(false);
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const filteredGroups = (caseGroups.data || [])
+        .filter((g) => g.groupNum !== unGroupedCaseGroupNumber)
+        .filter((g) => !shouldFilter ||
+        isEmpty(input && typeof input === 'string' && input.trim()) ||
+        g.name.toLowerCase().includes(input.toLowerCase()));
+    const { focusedItemIndex, onInputKeyDown } = useSelectKeyboardNavigator({
+        list: filteredGroups,
+        isOpen,
+        ignoreResetOnListChange: true,
+        resetIndexOnClose: true,
+        isDisabled: props.isDisabled,
+        setIsOpen,
+        onSelect: (selection) => handleSelect(selection),
+    });
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isOpen, isFullWidth: true, isDisabled: props.isDisabled },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: input, onClick: onToggleClick, onKeyDown: onInputKeyDown, onChange: onChange, autoComplete: "off", innerRef: textInputRef, placeholder: selectAGroupText, role: "combobox", isExpanded: isOpen, "aria-controls": "group-selector-listbox" }),
+            caseGroups.isFetching ? (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Spinner, { size: "md" }))) : (React.createElement(TextInputGroupUtilities, Object.assign({}, (!input ? { style: { display: 'none' } } : {})),
+                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClear, "aria-label": "Clear input value" }))))));
     return (React.createElement("div", { ref: manageActionsRef, className: "toolbar-left" },
         showErrorMessage && (React.createElement(AlertMessage, { variant: AlertType.DANGER, title: t('Could not create group'), show: true })),
         !showErrorMessage && !showInput && (React.createElement(React.Fragment, null,
             React.createElement("label", null,
                 React.createElement(Trans, null, "Group")),
-            React.createElement(Select, { variant: SelectVariant.typeahead, isDisabled: caseGroups.isFetching || caseGroups.isError || props.isDisabled || disableOnFetch, "aria-label": "Select a group to view accounts", onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onSelect, onClear: onClear, noResultsFoundText: t('No results found'), selections: selectedGroup, isOpen: isOpen, "aria-labelledby": selectAGroupText, placeholderText: selectAGroupText, "data-tracking-id": "group-list-selector" }, (caseGroups.data || [])
-                .filter((g) => g.groupNum !== unGroupedCaseGroupNumber)
-                .map((data, index) => (React.createElement(SelectOption, { key: index, isSelected: data.name === selectedGroup, value: data.name }, data.name)))))),
-        !showErrorMessage && showDropdown && (React.createElement(Dropdown, { className: "group-actions-dropdown group-action", onSelect: closeDropdown, toggle: dropdownToggle, isOpen: isDropdownOpen, "aria-label": t('Group actions dropdown'), isPlain: true, dropdownItems: dropdownItems })),
+            React.createElement(Select, { id: "group-selector", isOpen: isOpen, onSelect: (e, selection) => handleSelect(selection), onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: toggle, selected: selectedGroup, shouldFocusFirstItemOnOpen: false, "aria-label": "Select a group to view accounts", "aria-labelledby": selectAGroupText, "data-tracking-id": "group-list-selector" },
+                React.createElement(SelectList, { id: "group-selector-listbox" }, filteredGroups.length > 0 ? (filteredGroups.map((group, index) => (React.createElement(SelectOption, { id: `group-option-${group.name}`, key: index, value: group, isFocused: focusedItemIndex === index, className: "pf-v6-c-select__menu-wrapper", isSelected: group.name === selectedGroup }, group.name)))) : (React.createElement(SelectOption, { key: "no-results", value: '' }, t('No results found'))))))),
+        !showErrorMessage && showDropdown && (React.createElement(Dropdown, { className: "group-actions-dropdown group-action", toggle: dropdownToggle, isOpen: isDropdownOpen, onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), "aria-label": t('Group actions dropdown'), shouldFocusFirstItemOnOpen: false, shouldFocusToggleOnSelect: true, isPlain: true },
+            React.createElement(MenuContent, null,
+                React.createElement(MenuList, null, dropdownItems)))),
         !showErrorMessage && showInput && (React.createElement("div", { className: "group-name-select" },
             React.createElement("div", { className: "group-name-buttons" },
-                React.createElement(Select, { className: "group-select-input pf-v5-u-mr-sm", isDisabled: disableOnFetch, variant: SelectVariant.typeahead, "aria-label": t('Enter group name'), onToggle: onMultiSelect, onSelect: onMultiSelect, onClear: onMultiClear, onFilter: onChange, selections: input, isOpen: false, placeholderText: t('Enter group name') }),
+                React.createElement(TextInput, { className: "group-select-input pf-v6-u-mr-sm", isDisabled: disableOnFetch, "aria-label": t('Enter group name'), placeholder: t('Enter group name'), onChange: onChange, value: input || '' }),
                 React.createElement("button", { ref: submitActionBtn, disabled: disableOnFetch || input.length === 0 || containsOnlySpecialChars(input), className: "btn btn-app btn-link group-action", onClick: onAction, "aria-label": "Group action submit", "data-tracking-id": "group-action-submit", type: "button" },
                     React.createElement(Trans, null, "Save")),
                 React.createElement("button", { key: "cancel", onClick: onGroupActionCancel, className: "btn btn-app btn-link group-action", disabled: disableOnFetch, "data-tracking-id": "group-action-cancel", "aria-label": "Group action cancel", type: "button" },

package/lib/esm/components/Groups/GroupUserPermissionsSelect/GroupUserPermissionsSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupUserPermissionsSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/GroupUserPermissionsSelect/GroupUserPermissionsSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAGlE,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,MAAM;IACZ,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CAClE;AAID,eAAO,MAAM,0BAA0B,UAAW,MAAM,sBAoFvD,CAAC"}
+{"version":3,"file":"GroupUserPermissionsSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Groups/GroupUserPermissionsSelect/GroupUserPermissionsSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAQlE,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,MAAM;IACZ,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CAClE;AAID,eAAO,MAAM,0BAA0B,UAAW,MAAM,sBAkFvD,CAAC"}

package/lib/esm/components/Groups/GroupUserPermissionsSelect/GroupUserPermissionsSelect.js

@@ -8,40 +8,35 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
-import { LoadingIndicator, ToastNotification, useFetch } from '@rh-support/components';
+import { LoadingIndicator, SingleSelectDropdown, ToastNotification, useFetch, } from '@rh-support/components';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GroupUserPermissionOptions } from '../../../constants/GroupUserPermissionsOptions';
 const options = GroupUserPermissionOptions;
 export const GroupUserPermissionsSelect = (props) => {
     const { t } = useTranslation();
-    const [isOpen, setIsOpen] = useState(false);
-    const onToggle = () => setIsOpen(!isOpen);
     const [option, setOption] = useState(initialOptionsSelect(props.user));
-    const onClear = () => setOption(null);
     const updateUsersFetch = useFetch(publicApi.caseGroups.updateUsers, { propgateErrors: true });
     // reset options when user changes
     useEffect(() => setOption(initialOptionsSelect(props.user)), [props.user]);
-    const onSelect = (event, newOption) => __awaiter(void 0, void 0, void 0, function* () {
-        setIsOpen(false);
-        if (newOption === option) {
+    const onSelect = (newOption) => __awaiter(void 0, void 0, void 0, function* () {
+        if (newOption.value === option) {
             return;
         }
         try {
             let newUser = null;
             switch (true) {
-                case options.readWrite === newOption:
+                case options.readWrite === newOption.value:
                     newUser = Object.assign(Object.assign({}, props.user), { write: true, access: true });
                     break;
-                case options.read === newOption:
+                case options.read === newOption.value:
                     newUser = Object.assign(Object.assign({}, props.user), { write: false, access: true });
                     break;
-                case options.noAccess === newOption:
+                case options.noAccess === newOption.value:
                     newUser = Object.assign(Object.assign({}, props.user), { write: false, access: false });
                     break;
             }
-            setOption(newOption);
+            setOption(newOption.value);
             yield updateUsersFetch.request(props.account.accountNumber, props.group.groupNum, [newUser]);
             props.onChange(newUser);
             ToastNotification.addSuccessMessage(t(`User permission updated successfully`));
@@ -71,7 +66,17 @@ export const GroupUserPermissionsSelect = (props) => {
      * 3. We are fetching users
      * 4. Non-org admins cannot see the manage tab itself and thus that check is not added.
      */
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Select, { isDisabled: updateUsersFetch.isFetching, className: "permissions-select", "aria-label": t('User permissions'), onToggle: onToggle, onSelect: onSelect, onClear: onClear, selections: option, isOpen: isOpen, "aria-labelledby": t('User permissions'), placeholderText: t('Select a permission') }, Object.keys(options).map((key) => (React.createElement(SelectOption, { key: key, value: options[key], "data-tracking-id": `group-user-permission-${key}` }, t(options[key]))))),
+    const getSelectedDropdownOption = {
+        label: option || '',
+        value: option || '',
+    };
+    const getDropdownOptions = () => {
+        return Object.keys(options).map((key) => ({
+            label: t(options[key]),
+            value: options[key],
+        }));
+    };
+    return (React.createElement("div", { className: "permissions-select" },
+        React.createElement(SingleSelectDropdown, { placeholder: 'Select a permission', className: "permissions-select", ariaLabel: t('User permissions'), options: getDropdownOptions(), onSelect: onSelect, isDisabled: updateUsersFetch.isFetching, selected: getSelectedDropdownOption }),
         React.createElement(LoadingIndicator, { show: updateUsersFetch.isFetching, size: "xs" })));
 };

package/lib/esm/components/Groups/ManageGroupUsers/ManageGroupUsers.js

@@ -132,7 +132,7 @@ export const ManageGroupUsers = () => {
     return (React.createElement(React.Fragment, null,
         React.createElement(AlertMessage, { variant: AlertType.INFO, show: loggedInUserRights.data.isOrgAdmin() &&
                 !loggedInUsersAccount.data.hasGroupACLs &&
-                !loggedInUserRights.data.isInternal(), isInline: true, className: "pf-v5-u-mb-md", title: t('Case Group ACL is not enabled') },
+                !loggedInUserRights.data.isInternal(), isInline: true, className: "pf-v6-u-mb-md", title: t('Case Group ACL is not enabled') },
             React.createElement("p", null,
                 React.createElement(Trans, { i18nKey: "i18nRequestControl" },
                     "To use case groups to limit user access, enable the",
@@ -146,7 +146,7 @@ export const ManageGroupUsers = () => {
                         }, "data-tracking-id": "case-contact-phone-number-review" }, "Preferences")),
                 React.createElement("br", null),
                 React.createElement(Trans, null, "You can organize and group related cases and filter on the case list page, but you cannot change permissions for case groups unless the Case Group ACL is enabled."))),
-        React.createElement(AlertMessage, { variant: AlertType.INFO, show: loggedInUserRights.data.isInternal(), isInline: true, className: "pf-v5-u-mb-md", title: t('Case Group ACL is not available for internal users.') },
+        React.createElement(AlertMessage, { variant: AlertType.INFO, show: loggedInUserRights.data.isInternal(), isInline: true, className: "pf-v6-u-mb-md", title: t('Case Group ACL is not available for internal users.') },
             React.createElement("p", null,
                 React.createElement(Trans, { i18nKey: "i18nRequestControl" },
                     "As an internal user you can use case group without ACL functionality. To use case groups to limit user access, customers can enable the",
@@ -168,7 +168,7 @@ export const ManageGroupUsers = () => {
             React.createElement("span", { className: "toolbar-right" },
                 React.createElement("label", { htmlFor: "account-group-filter" },
                     React.createElement(Trans, null, "Filter by")),
-                React.createElement(SearchInput, { className: "pf-v5-u-flex-grow-1 pf-v5-c-search-input pf-v5-u-background-color-100", id: "account-group-filter", value: userSearch, isDisabled: isFetching || !selectedGroup, onChange: (_, value) => setUserSearch(value), placeholder: t('Search for people in this group'), "aria-label": "Group search input", onClear: () => setUserSearch('') }))),
+                React.createElement(SearchInput, { className: "pf-v6-u-flex-grow-1 pf-v6-c-search-input pf-v6-u-background-color-100", id: "account-group-filter", value: userSearch, isDisabled: isFetching || !selectedGroup, onChange: (_, value) => setUserSearch(value), placeholder: t('Search for people in this group'), "aria-label": "Group search input", onClear: () => setUserSearch('') }))),
         React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading group users list') } },
             React.createElement(ManageTable, { ariaLabel: t('Table to manage groups'), columns: columns, data: data, sortInfo: { column: 'first-name', direction: 'asc' }, isFetching: isFetching, isError: false }))));
 };

package/lib/esm/components/ManageBookmarkedAccountsTab/AddEditBookmarkModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddEditBookmarkModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/AddEditBookmarkModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,CAAC,gBAAgB,EAAE,SAAS,EAAE,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,gBAAgB,EAAE,SAAS,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,uBAAuB,EAAE,SAAS,EAAE,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,oBAAoB,UAAW,MAAM,sBA2IjD,CAAC"}
+{"version":3,"file":"AddEditBookmarkModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/AddEditBookmarkModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,CAAC,gBAAgB,EAAE,SAAS,EAAE,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,gBAAgB,EAAE,SAAS,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,uBAAuB,EAAE,SAAS,EAAE,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,oBAAoB,UAAW,MAAM,sBA0IjD,CAAC"}

package/lib/esm/components/ManageBookmarkedAccountsTab/AddEditBookmarkModal.js

@@ -1,4 +1,4 @@
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, Modal, ModalFooter, ModalVariant } from '@patternfly/react-core';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
@@ -70,18 +70,18 @@ export const AddEditBookmarkModal = (props) => {
             isEqual(props.selectedAccounts.map((a) => a.accountNumber).sort(), localSelectedBookmarks.map((a) => a.accountNumber).sort()) &&
             selectedGroup === ((_a = props.selectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.bookmarkGroupName));
     };
-    return (React.createElement(Modal, { id: "Add-edit-bookmark-modal", className: "pf-modal-overflow-visible", title: props.title, "aria-describedby": "Add-edit-bookmark-modal", isOpen: props.isOpen, onClose: close, showClose: true, onEscapePress: props.onClose, variant: ModalVariant.medium, actions: [
-            React.createElement(Button, { key: "save", variant: ButtonVariant.primary, onClick: save, isDisabled: isInValid || isNothingIsChangedOnEditMode() },
-                React.createElement(Trans, null, "Save")),
-            React.createElement(Button, { key: "cancel", variant: props.addMode ? ButtonVariant.link : ButtonVariant.secondary, onClick: close },
-                React.createElement(Trans, null, "Cancel")),
-        ] },
+    return (React.createElement(Modal, { id: "Add-edit-bookmark-modal", className: "pf-modal-overflow-visible", title: props.title, "aria-describedby": "Add-edit-bookmark-modal", isOpen: props.isOpen, onClose: close, onEscapePress: props.onClose, variant: ModalVariant.medium },
         React.createElement("div", null,
-            React.createElement("div", { className: "pf-v5-u-mb-lg" },
+            React.createElement("div", { className: "pf-v6-u-mb-lg" },
                 React.createElement(BookmarkGroupSelector, { selectedGroup: selectedGroup, groups: props.groups, onGroupInputBoxChanged: onGroupInputBoxChanged, isInValid: isInValid && (isPresentInGroups || isEmpty(selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.trim())), setIsInValid: setIsInValid, isPresentInGroups: isPresentInGroups })),
             React.createElement("div", null,
                 React.createElement("label", { id: "add-bookmark-account-on-add-modal" },
                     React.createElement(Trans, null, "Account(s)"),
                     React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-                React.createElement(BookmarkAccountSelector, { defaultSelected: props.selectedAccounts, labelId: "add-bookmark-account-on-add-modal", bookmarkedGroupAccounts: props.bookmarkedGroupAccounts, onBookMarkAccountSelected: onBookMarkAccountSelected, addMode: props.addMode, isInValid: isInValid && isEmpty(localSelectedBookmarks) })))));
+                React.createElement(BookmarkAccountSelector, { defaultSelected: props.selectedAccounts, labelId: "add-bookmark-account-on-add-modal", bookmarkedGroupAccounts: props.bookmarkedGroupAccounts, onBookMarkAccountSelected: onBookMarkAccountSelected, addMode: props.addMode, isInValid: isInValid && isEmpty(localSelectedBookmarks) }))),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { key: "save", variant: ButtonVariant.primary, onClick: save, isDisabled: isInValid || isNothingIsChangedOnEditMode() },
+                React.createElement(Trans, null, "Save")),
+            React.createElement(Button, { key: "cancel", variant: props.addMode ? ButtonVariant.link : ButtonVariant.secondary, onClick: close },
+                React.createElement(Trans, null, "Cancel")))));
 };

package/lib/esm/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BookmarkAccountSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAIhF,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAC;AAO3E,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,UAAU,MAAM;IACZ,uBAAuB,EAAE,SAAS,EAAE,CAAC;IACrC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBA6PpD;yBA7Pe,uBAAuB"}
+{"version":3,"file":"BookmarkAccountSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAmBhF,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAC;AAO3E,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,UAAU,MAAM;IACZ,uBAAuB,EAAE,SAAS,EAAE,CAAC;IACrC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBA0UpD;yBA1Ue,uBAAuB"}

package/lib/esm/components/ManageBookmarkedAccountsTab/BookmarkAccountSelector.js

@@ -8,9 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { accounts } from '@cee-eng/hydrajs';
-import { Label, LabelGroup, Tooltip } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Button, Label, LabelGroup, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Tooltip, } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { useSelectKeyboardNavigator } from '@rh-support/components';
 import { sortAccountsByQuery } from '@rh-support/react-context';
 import assign from 'lodash/assign';
 import compact from 'lodash/compact';
@@ -21,15 +22,18 @@ import remove from 'lodash/remove';
 import React, { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 export function BookmarkAccountSelector(props) {
+    const { t } = useTranslation();
+    const textInputRef = useRef();
+    const abortControllerRef = useRef(undefined);
     const [options, setOptions] = useState([]);
     const [isSearching, setIsSearching] = useState(false);
-    const abortControllerRef = useRef(undefined);
-    const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [selected, setSelected] = useState([]);
-    const onToggle = (isOpen) => setIsOpen(isOpen);
+    const [inputValue, setInputValue] = useState('');
+    const [activeItem, setActiveItem] = useState(null);
     const clearSelection = () => {
         setIsOpen(false);
+        setInputValue('');
         setSelected([]);
         props.onBookMarkAccountSelected([]);
     };
@@ -67,9 +71,9 @@ export function BookmarkAccountSelector(props) {
             const response = yield accounts.getAccounts(queryParams, controller.signal);
             const accountsResponse = response.items.map((account) => {
                 const bookmarksMatch = props.bookmarkedGroupAccounts.filter((a) => a.accountNumber === account.accountNumber);
-                const acountGroups = (bookmarksMatch || []).map((b) => b.bookmarkGroupName);
+                const accountGroups = (bookmarksMatch || []).map((b) => b.bookmarkGroupName);
                 return bookmarksMatch.length > 0
-                    ? Object.assign(Object.assign({}, account), { bookmarkGroupName: acountGroups, isBookmarked: true, isBookmarkedAndHasGroup: acountGroups.length > 0 }) : Object.assign(Object.assign({}, account), { bookmarkGroupName: [], isBookmarked: false, isBookmarkedAndHasGroup: false });
+                    ? Object.assign(Object.assign({}, account), { bookmarkGroupName: accountGroups, isBookmarked: true, isBookmarkedAndHasGroup: accountGroups.length > 0 }) : Object.assign(Object.assign({}, account), { bookmarkGroupName: [], isBookmarked: false, isBookmarkedAndHasGroup: false });
             });
             const sortedOptions = sortAccountsByQuery(accountsResponse, query, queryKey);
             setOptions(sortedOptions);
@@ -84,24 +88,61 @@ export function BookmarkAccountSelector(props) {
             }
         }
     });
-    const onTypeaheadInputChanged = (input) => __awaiter(this, void 0, void 0, function* () {
-        yield fetchAccounts(input);
+    const onSelect = (value) => {
+        if (value) {
+            const currentSelected = value;
+            const alreadySelected = find(selected, (account) => account.accountNumber === currentSelected.accountNumber);
+            if (alreadySelected)
+                return;
+            const selectedAccounts = [
+                ...selected,
+                Object.assign(Object.assign({}, currentSelected), { bookmarkId: currentSelected.bookmarkId || undefined, rootBookmarkId: currentSelected.rootBookmarkId || undefined }),
+            ];
+            setSelected(selectedAccounts);
+            props.onBookMarkAccountSelected(selectedAccounts);
+            setIsOpen(false);
+            setInputValue('');
+        }
+    };
+    const { focusedItemIndex, onInputKeyDown, setFocusedItemIndex } = useSelectKeyboardNavigator({
+        list: options,
+        isOpen,
+        ignoreResetOnListChange: false,
+        resetIndexOnClose: true,
+        isDisabled: props.isDisabled,
+        setIsOpen,
+        onSelect: (value) => onSelect(value),
     });
-    // this ref is used to call clearSelection() outside component
-    props.clearRef.current = clearSelection;
-    const debounceFn = debounce(onTypeaheadInputChanged, 500);
-    const onSelect = (event, currentSelected) => {
-        const alreadySelected = find(selected, (account) => account.accountNumber === currentSelected.accountNumber);
-        if (alreadySelected)
-            return;
-        const selectedAccounts = [
-            ...selected,
-            Object.assign(Object.assign({}, currentSelected), { bookmarkId: currentSelected.bookmarkId || undefined, rootBookmarkId: currentSelected.rootBookmarkId || undefined }),
-        ];
-        setSelected(selectedAccounts);
-        props.onBookMarkAccountSelected(selectedAccounts);
-        setIsOpen(false);
+    const onToggleClick = (e) => {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
     };
+    const removeAccountLabel = (event, removedAccount) => {
+        event.stopPropagation();
+        const updatedSelectedAccounts = remove(selected, (account) => account.accountNumber !== removedAccount.accountNumber);
+        setSelected(updatedSelectedAccounts);
+        props.onBookMarkAccountSelected(updatedSelectedAccounts);
+    };
+    const debounceFn = debounce((value) => fetchAccounts(value), 500);
+    const onTextInputChange = (_event, value) => {
+        setInputValue(value);
+        debounceFn(value);
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, Object.assign({ value: inputValue, onChange: onTextInputChange, onClick: (e) => {
+                    e.stopPropagation();
+                    setIsOpen(true);
+                    setFocusedItemIndex(null);
+                    setActiveItem(null);
+                }, onKeyDown: onInputKeyDown, id: "bookmark-account-select-input", autoComplete: "off", innerRef: textInputRef, placeholder: t('Search for account names or numbers'), role: "combobox", isExpanded: isOpen, "aria-controls": "bookmark-account-select-listbox" }, (activeItem && { 'aria-activedescendant': activeItem })),
+                React.createElement(LabelGroup, { "aria-label": "Selected accounts" }, selected.map((account, index) => (React.createElement(Label, { key: index, color: "teal", onClose: (ev) => removeAccountLabel(ev, account) },
+                    account.name,
+                    " (",
+                    account.accountNumber,
+                    ")"))))),
+            selected.length > 0 && (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Button, { variant: "plain", onClick: clearSelection, "aria-label": "Clear input value", icon: React.createElement(TimesIcon, { "aria-hidden": true }) }))))));
     const duplicateAccounts = (props.selectedGroup &&
         props.addMode &&
         props.bookmarkedGroupAccounts
@@ -110,57 +151,55 @@ export function BookmarkAccountSelector(props) {
         })
             .map((a) => a.accountNumber)) ||
         [];
-    const removeAccountLabel = (event, removedAccount) => {
-        event.stopPropagation();
-        const updatedSelectedAccounts = remove(selected, (account) => account.accountNumber !== removedAccount.accountNumber);
-        setSelected(updatedSelectedAccounts);
-        props.onBookMarkAccountSelected(updatedSelectedAccounts);
-    };
-    const labelGroupComponent = () => {
-        return (React.createElement(LabelGroup, { numLabels: 2 }, (selected || []).map((currentLabel) => (React.createElement(Label, { key: currentLabel.accountNumber, onClose: (event) => removeAccountLabel(event, currentLabel), color: "cyan", onClick: (event) => event.stopPropagation() },
-            currentLabel.name,
-            " (",
-            currentLabel.accountNumber,
-            ")")))));
-    };
+    const renderAccountOption = (account, index) => (React.createElement(SelectOption, { value: account, key: index, isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `bookmark-account-${account.accountNumber}` },
+        React.createElement("div", null,
+            React.createElement("div", { className: "pf-v6-u-color-100 pf-v6-u-font-size-sm" },
+                account.name,
+                " (",
+                account.accountNumber,
+                ")"),
+            React.createElement("div", null, account.bookmarkGroupName.length === 0 ? (React.createElement("span", { className: "pf-v6-u-color-400" },
+                React.createElement(Trans, null, "This account has not been bookmarked."))) : account.bookmarkGroupName.length > 2 ? (React.createElement("div", null,
+                React.createElement(Tooltip, { isContentLeftAligned: true, content: Array.isArray(account.bookmarkGroupName) ? (account.bookmarkGroupName.map((group) => React.createElement("div", { key: group }, group))) : (React.createElement("div", null, account.bookmarkGroupName)) },
+                    React.createElement(Label, { color: "purple", icon: React.createElement(InfoCircleIcon, null), key: `${account.accountNumber}${account.bookmarkGroupName}` },
+                        "Bookmarked ",
+                        account.bookmarkGroupName.length,
+                        " times")))) : Array.isArray(account.bookmarkGroupName) ? (account.bookmarkGroupName.map((group) => !isEmpty(group) && (React.createElement(Label, { color: "purple", key: `${account.accountNumber}-${group}` }, group)))) : (!isEmpty(account.bookmarkGroupName) && (React.createElement(Label, { color: "purple", key: `${account.accountNumber}-${account.bookmarkGroupName}` }, account.bookmarkGroupName)))))));
     useEffect(() => {
         setSelected(props.defaultSelected || []);
     }, [props.defaultSelected]);
-    // when a group is added or removed from account we need to update dropdown
-    // options to show correct group
     useEffect(() => {
-        let newOptions = [];
-        setOptions(undefined);
-        // if group is not empty then add it
-        options.forEach((option) => {
-            const updatedGroupNames = compact(props.bookmarkedGroupAccounts
-                .filter((b) => b.accountNumber === option.accountNumber)
-                .map((b) => b.bookmarkGroupName));
-            newOptions = [
-                ...newOptions,
-                Object.assign(Object.assign({}, option), { bookmarkGroupName: compact(updatedGroupNames), isBookmarked: true, isBookmarkedAndHasGroup: !!updatedGroupNames.length }),
-            ];
-        });
-        setOptions(newOptions);
+        if (options.length > 0) {
+            const newOptions = options.map((option) => {
+                const updatedGroupNames = compact(props.bookmarkedGroupAccounts
+                    .filter((b) => b.accountNumber === option.accountNumber)
+                    .map((b) => b.bookmarkGroupName));
+                return Object.assign(Object.assign({}, option), { bookmarkGroupName: compact(updatedGroupNames), isBookmarked: true, isBookmarkedAndHasGroup: !!updatedGroupNames.length });
+            });
+            setOptions(newOptions);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.bookmarkedGroupAccounts]);
-    const titleId = 'multi-typeahead-bookmark-chip-group-props-id';
+    // Update activeItem when focusedItemIndex changes
+    useEffect(() => {
+        var _a;
+        if (focusedItemIndex !== null && options[focusedItemIndex]) {
+            setActiveItem(`bookmark-account-${(_a = options[focusedItemIndex]) === null || _a === void 0 ? void 0 : _a.accountNumber}`);
+        }
+        else {
+            setActiveItem(null);
+        }
+    }, [focusedItemIndex, options]);
+    props.clearRef.current = clearSelection;
     return (React.createElement(React.Fragment, null,
-        React.createElement("span", { id: titleId, hidden: true }, "Select a state"),
-        React.createElement(Select, Object.assign({ chipGroupComponent: labelGroupComponent(), variant: SelectVariant.typeaheadMulti, typeAheadAriaLabel: t('Search for account names or numbers'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, onClear: clearSelection, "data-tracking-id": props.labelId, selections: selected, isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Search for account names or numbers'), hasInlineFilter: false, onTypeaheadInputChanged: debounceFn, onFilter: () => undefined, "aria-describedby": "clusterID-validate-helper" }, (isSearching && { loadingVariant: 'spinner' })), options.map((account, index) => (React.createElement(SelectOption, { value: account, key: index },
-            React.createElement("div", null,
-                React.createElement("div", { className: "pf-v5-u-color-100 pf-v5-u-font-size-sm" },
-                    account.name,
-                    " (",
-                    account.accountNumber,
-                    ")"),
-                React.createElement("div", null, account.bookmarkGroupName.length === 0 ? (React.createElement("span", { className: "pf-v5-u-color-400" },
-                    React.createElement(Trans, null, "This account has not been bookmarked."))) : account.bookmarkGroupName.length > 2 ? (React.createElement("div", null,
-                    React.createElement(Tooltip, { isContentLeftAligned: true, content: account.bookmarkGroupName.map((group) => (React.createElement("div", null, group))) },
-                        React.createElement(Label, { color: "purple", icon: React.createElement(InfoCircleIcon, null), key: `${account.accountNumber}${account.bookmarkGroupName}` },
-                            "Bookmarked ",
-                            account.bookmarkGroupName.length,
-                            " times")))) : (account.bookmarkGroupName.map((group) => !isEmpty(group) && (React.createElement(Label, { color: "purple", key: `${account.accountNumber}-${group}` }, group)))))))))),
+        React.createElement(Select, { id: "bookmark-account-select", isPlain: true, isOpen: isOpen, selected: selected, onSelect: onSelect, toggle: toggle, onOpenChange: (nextOpen) => {
+                setIsOpen(nextOpen);
+                if (!nextOpen) {
+                    setInputValue('');
+                }
+            }, isScrollable: true },
+            React.createElement(SelectList, { id: "bookmark-account-select-listbox" }, isSearching ? (React.createElement(SelectOption, { isLoading: true, value: "loader", className: "pf-v6-u-text-align-center" },
+                React.createElement(Spinner, { size: "lg" }))) : options.length > 0 ? (options.map((account, index) => renderAccountOption(account, index))) : (React.createElement(SelectOption, { value: '', key: 'no-value' }, "No results found")))),
         props.isInValid && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(Trans, null, "Select one or more accounts to bookmark"))),
         duplicateAccounts.length !== 0 && (React.createElement("p", { className: "form-instructions" },

package/lib/esm/components/ManageBookmarkedAccountsTab/ManageGroupedBookmarkedAccountsTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManageGroupedBookmarkedAccountsTab.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/ManageGroupedBookmarkedAccountsTab.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,UAAU,MAAM;IACZ,yBAAyB,EAAE,OAAO,CAAC;CACtC;AAED,wBAAgB,kCAAkC,CAAC,EAAE,yBAAyB,EAAE,EAAE,MAAM,qBAqZvF"}
+{"version":3,"file":"ManageGroupedBookmarkedAccountsTab.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageBookmarkedAccountsTab/ManageGroupedBookmarkedAccountsTab.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,UAAU,MAAM;IACZ,yBAAyB,EAAE,OAAO,CAAC;CACtC;AAED,wBAAgB,kCAAkC,CAAC,EAAE,yBAAyB,EAAE,EAAE,MAAM,qBA0ZvF"}