@patternfly/chatbot 6.8.0-prerelease.7 → 6.8.0-prerelease.8

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent } from 'react';
-import { ButtonProps, DrawerProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, TitleProps, SearchInputProps, MenuProps, MenuListProps, MenuItemProps, MenuGroupProps, MenuContentProps } from '@patternfly/react-core';
+import type { FunctionComponent, ReactNode } from 'react';
+import { ButtonProps, DrawerProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, TitleProps, SearchInputProps, MenuProps, MenuListProps, MenuItemProps, MenuGroupProps, MenuContentProps, ExpandableSectionProps, ExpandableSectionToggleProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import { HistoryEmptyStateProps } from './EmptyState';
 export interface Conversation {
@@ -24,6 +24,49 @@ export interface Conversation {
     /** Custom dropdown ID to ensure uniqueness across demo instances */
     dropdownId?: string;
 }
+export interface ConversationGroupShowAll {
+    /** Number of items visible when collapsed */
+    visibleCount: number;
+    /** Whether all items are shown */
+    isExpanded: boolean;
+    /** Callback when show all / show less is toggled */
+    onToggle: (isExpanded: boolean) => void;
+    /** Custom content rendered in the show all / show less toggle. Defaults to "Show all" when collapsed and "Show less" when expanded. */
+    label?: ReactNode;
+}
+export interface ConversationGroupExpandable {
+    /** Whether the group content is expanded */
+    isExpanded: boolean;
+    /** Callback when the group is toggled */
+    onToggle: (isExpanded: boolean) => void;
+    /** Additional props applied to ExpandableSection */
+    expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+    /** Additional props applied to ExpandableSectionToggle */
+    expandableSectionToggleProps?: ExpandableSectionToggleProps;
+}
+export interface ConversationGroup {
+    /** Unique group id */
+    id: string;
+    /** Group label rendered as a MenuGroup heading or expandable toggle label */
+    label: ReactNode;
+    /** Conversation items or custom menu content such as a "Show all" action */
+    items: (Conversation | ReactNode)[];
+    /** Content rendered after the group's menu list */
+    footer?: ReactNode;
+    /** Custom group header that replaces the default label or expandable toggle */
+    header?: ReactNode;
+    /** When set, the group renders as an expandable section */
+    expandable?: ConversationGroupExpandable;
+    /** When set, truncates the list with an expandable show all / show less section */
+    showAll?: ConversationGroupShowAll;
+    /** Additional props applied to the conversation menu group */
+    menuGroupProps?: MenuGroupProps;
+    /** Additional props applied to the conversation list */
+    menuListProps?: Omit<MenuListProps, 'children'>;
+}
+export type Conversations = (Conversation | ReactNode)[] | ConversationGroup[] | {
+    [key: string]: (Conversation | ReactNode)[];
+};
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     /** Function called to toggle drawer */
     onDrawerToggle: (event: React.KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
@@ -35,9 +78,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     /** Callback function for when an item is selected */
     onSelectActiveItem?: (event?: React.MouseEvent, itemId?: string | number) => void;
     /** Items shown in chat history */
-    conversations: Conversation[] | {
-        [key: string]: Conversation[];
-    };
+    conversations: Conversations;
     /** Additional button props for new chat button. */
     newChatButtonProps?: ButtonProps;
     /** Additional props applied to conversation menu group. If conversations is an object, you should pass an object of MenuGroupProps for each group. */

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -24,35 +24,144 @@ const Chatbot_1 = require("../Chatbot/Chatbot");
 const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotConversationHistoryDropdown"));
 const LoadingState_1 = __importDefault(require("./LoadingState"));
 const EmptyState_1 = __importDefault(require("./EmptyState"));
+const isConversation = (item) => Boolean(item && typeof item === 'object' && 'id' in item && 'text' in item && !('items' in item));
+const isConversationGroup = (item) => Boolean(item && typeof item === 'object' && 'id' in item && 'label' in item && 'items' in item);
+const isConversationGroupArray = (items) => items.length > 0 && isConversationGroup(items[0]);
+const getExpandableGroupContentId = (groupId) => `chatbot-nav-group-${groupId}-content`;
+const getGroupLabelId = (groupId) => `chatbot-nav-group-${groupId}-label`;
+const getExpandableGroupToggleId = (groupId) => `chatbot-nav-group-${groupId}-toggle`;
+const getShowAllToggleId = (groupId) => `chatbot-nav-group-${groupId}-show-all-toggle`;
+const getStaticMenuLabelId = (group) => { var _a, _b; return (_b = (_a = group.menuGroupProps) === null || _a === void 0 ? void 0 : _a.titleId) !== null && _b !== void 0 ? _b : getGroupLabelId(group.id); };
+const getMenuListLabelledBy = (group) => {
+    var _a, _b, _c, _d;
+    if (group.expandable) {
+        return (_b = (_a = group.menuGroupProps) === null || _a === void 0 ? void 0 : _a['aria-labelledby']) !== null && _b !== void 0 ? _b : getExpandableGroupToggleId(group.id);
+    }
+    return (_d = (_c = group.menuGroupProps) === null || _c === void 0 ? void 0 : _c['aria-labelledby']) !== null && _d !== void 0 ? _d : getStaticMenuLabelId(group);
+};
+const getMenuListProps = (group) => {
+    var _a, _b;
+    return (Object.assign(Object.assign({}, group.menuListProps), { 'aria-labelledby': (_b = (_a = group.menuListProps) === null || _a === void 0 ? void 0 : _a['aria-labelledby']) !== null && _b !== void 0 ? _b : getMenuListLabelledBy(group) }));
+};
+const focusElementById = (id) => {
+    var _a;
+    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.focus();
+};
+// Matches PatternFly's Menu "view more" example: expanding moves focus to the first
+// newly revealed item; collapsing keeps focus on the toggle as it updates to "Show all".
+const useShowAllFocusManagement = (isExpanded, toggleId, firstOverflowItemRef, hasOverflowItems) => {
+    const wasExpandedRef = (0, react_1.useRef)(isExpanded);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (hasOverflowItems && isExpanded !== wasExpandedRef.current) {
+            if (isExpanded) {
+                (_a = firstOverflowItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                focusElementById(toggleId);
+            }
+        }
+        wasExpandedRef.current = isExpanded;
+    }, [isExpanded, toggleId, firstOverflowItemRef, hasOverflowItems]);
+};
+// The toggle is rendered as a real MenuItem (rather than a standalone button) so it
+// participates in the Menu's built-in roving tabindex and arrow-key navigation just
+// like any other conversation item, instead of being skipped over or interrupting
+// arrow-key handling. Since it keeps a stable key and DOM position regardless of how
+// many overflow items are shown, it also keeps focus across clicks without being
+// unmounted or recreated.
+const ShowAllGroupBody = ({ group, getNavItem }) => {
+    const { visibleCount, isExpanded, onToggle, label } = group.showAll;
+    const conversationItems = group.items.filter(isConversation);
+    const alwaysVisibleItems = conversationItems.slice(0, visibleCount);
+    const overflowItems = conversationItems.slice(visibleCount);
+    const hasOverflowItems = overflowItems.length > 0;
+    const toggleId = getShowAllToggleId(group.id);
+    const firstOverflowItemRef = (0, react_1.useRef)(null);
+    const toggleLabel = label !== null && label !== void 0 ? label : (isExpanded ? 'Show less' : 'Show all');
+    useShowAllFocusManagement(isExpanded, toggleId, firstOverflowItemRef, hasOverflowItems);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.MenuList, Object.assign({}, getMenuListProps(group), { children: [alwaysVisibleItems.map((chat) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(chat) }, chat.id))), isExpanded &&
+                        overflowItems.map((chat, index) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(chat, undefined, index === 0 ? firstOverflowItemRef : undefined) }, chat.id))), hasOverflowItems && ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, { id: toggleId, itemId: toggleId, className: "pf-chatbot__menu-show-all-toggle", onClick: () => onToggle(!isExpanded), children: toggleLabel }, "show-all-toggle"))] })), group.footer] }));
+};
+const ExpandableConversationGroup = ({ group, children }) => {
+    var _a, _b;
+    const toggleId = getExpandableGroupToggleId(group.id);
+    const contentId = getExpandableGroupContentId(group.id);
+    const { isExpanded, onToggle, expandableSectionProps, expandableSectionToggleProps } = group.expandable;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `pf-chatbot__menu-item-header pf-chatbot__menu-item-header--expandable ${(_b = (_a = group.menuGroupProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ''}`, children: [(0, jsx_runtime_1.jsx)(react_core_1.ExpandableSectionToggle, Object.assign({ toggleId: toggleId, contentId: contentId, isExpanded: isExpanded, onToggle: onToggle, toggleWrapper: "h3", className: "pf-chatbot__menu-group-toggle" }, expandableSectionToggleProps, { children: group.label })), (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ isDetached: true, isExpanded: isExpanded, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: isExpanded && children }))] }));
+};
+const buildConversationMenuSegments = (groups) => groups.reduce((segments, group) => {
+    if (group.expandable) {
+        return [...segments, { type: 'expandable', group }];
+    }
+    const last = segments[segments.length - 1];
+    if ((last === null || last === void 0 ? void 0 : last.type) === 'static') {
+        last.groups.push(group);
+        return segments;
+    }
+    return [...segments, { type: 'static', groups: [group] }];
+}, []);
 const ChatbotConversationHistoryNav = (_a) => {
     var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, menuListProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Search previous conversations', searchInputProps, handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, hasDrawerHeadDivider, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history', navTitleProps, navTitleIcon = (0, jsx_runtime_1.jsx)(react_icons_1.RhUiClockIcon, {}), searchInputScreenReaderText, searchActionStart, searchActionEnd, searchToolbar, menuProps, menuGroupProps, menuContentProps } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "menuListProps", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "searchInputProps", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "hasDrawerHeadDivider", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title", "navTitleProps", "navTitleIcon", "searchInputScreenReaderText", "searchActionStart", "searchActionEnd", "searchToolbar", "menuProps", "menuGroupProps", "menuContentProps"]);
     const drawerRef = (0, react_1.useRef)(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
     };
-    const isConversation = (item) => item && typeof item === 'object' && 'id' in item && 'text' in item;
-    const getNavItem = (conversation) => {
+    const getNavItem = (conversation, itemOverrides, itemRef) => {
         var _a;
-        return ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCommentIcon, {}) }), (conversation.menuItems
+        return ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id, ref: itemRef }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCommentIcon, {}) }), (conversation.menuItems
             ? {
                 actions: ((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
             }
-            : {}), conversation.additionalProps, { children: conversation.text })));
+            : {}), conversation.additionalProps, itemOverrides, { children: conversation.text })));
     };
+    const renderConversationItems = (items, keyPrefix = '') => items.map((item, index) => {
+        if (isConversation(item)) {
+            return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(item) }, item.id);
+        }
+        const key = (0, react_1.isValidElement)(item) && item.key != null ? String(item.key) : `${keyPrefix}-${index}`;
+        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: item }, key);
+    });
+    const renderGroupBody = (group) => {
+        if (group.showAll) {
+            return (0, jsx_runtime_1.jsx)(ShowAllGroupBody, { group: group, getNavItem: getNavItem });
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, getMenuListProps(group), { children: renderConversationItems(group.items, group.id) })), group.footer] }));
+    };
+    const renderConversationGroup = (group) => {
+        var _a, _b, _c, _d;
+        if (group.header) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: `pf-chatbot__menu-item-header ${(_b = (_a = group.menuGroupProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ''}`, children: [group.header, renderGroupBody(group)] }, group.id));
+        }
+        const labelId = getStaticMenuLabelId(group);
+        return ((0, jsx_runtime_1.jsx)(react_core_1.MenuGroup, Object.assign({ className: "pf-chatbot__menu-item-header", label: group.label, labelHeadingLevel: "h3" }, group.menuGroupProps, { titleId: labelId, "aria-labelledby": (_d = (_c = group.menuGroupProps) === null || _c === void 0 ? void 0 : _c['aria-labelledby']) !== null && _d !== void 0 ? _d : labelId, children: renderGroupBody(group) }), group.id));
+    };
+    const renderConversationMenu = (content, key) => ((0, jsx_runtime_1.jsx)(react_core_1.Menu, Object.assign({ className: "pf-chatbot__history-menu", isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuContent, Object.assign({}, menuContentProps, { children: content })) }), key));
+    const renderConversationMenuSegment = (segment) => {
+        if (segment.type === 'static') {
+            return renderConversationMenu((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: segment.groups.map(renderConversationGroup) }), segment.groups.map((group) => group.id).join('-'));
+        }
+        return ((0, jsx_runtime_1.jsx)(ExpandableConversationGroup, { group: segment.group, children: renderConversationMenu(renderGroupBody(segment.group)) }, segment.group.id));
+    };
+    const normalizeObjectGroups = (groupedConversations) => Object.keys(groupedConversations).map((groupKey) => ({
+        id: groupKey,
+        label: groupKey,
+        items: groupedConversations[groupKey],
+        menuGroupProps: menuGroupProps && typeof menuGroupProps === 'object' && groupKey in menuGroupProps
+            ? menuGroupProps[groupKey]
+            : undefined,
+        menuListProps: menuListProps && typeof menuListProps === 'object' && groupKey in menuListProps
+            ? menuListProps[groupKey]
+            : undefined
+    }));
     const buildConversations = () => {
         if (Array.isArray(conversations)) {
-            return ((0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, menuListProps, { children: conversations.map((conversation) => {
-                    if (isConversation(conversation)) {
-                        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id);
-                    }
-                    else {
-                        return conversation;
-                    }
-                }) })));
-        }
-        else {
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.keys(conversations).map((navGroup) => ((0, jsx_runtime_1.jsx)(react_core_1.MenuGroup, Object.assign({ className: "pf-chatbot__menu-item-header", label: navGroup, labelHeadingLevel: "h3" }, menuGroupProps === null || menuGroupProps === void 0 ? void 0 : menuGroupProps[navGroup], { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps[navGroup], { children: conversations[navGroup].map((conversation) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id))) })) }), navGroup))) }));
+            if (isConversationGroupArray(conversations)) {
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buildConversationMenuSegments(conversations).map(renderConversationMenuSegment) });
+            }
+            return renderConversationMenu((0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, menuListProps, { children: renderConversationItems(conversations) })));
         }
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buildConversationMenuSegments(normalizeObjectGroups(conversations)).map(renderConversationMenuSegment) }));
     };
     // Menu Content
     // - Consumers should pass an array to <Chatbot> of the list of conversations
@@ -67,7 +176,7 @@ const ChatbotConversationHistoryNav = (_a) => {
         if (noResultsState) {
             return (0, jsx_runtime_1.jsx)(EmptyState_1.default, Object.assign({}, noResultsState));
         }
-        return ((0, jsx_runtime_1.jsx)(react_core_1.Menu, Object.assign({ className: "pf-chatbot__history-menu", isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuContent, Object.assign({}, menuContentProps, { children: buildConversations() })) })));
+        return buildConversations();
     };
     const renderDrawerContent = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() })) }));
     const searchInputContainer = handleTextInputChange && ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__input", children: [(0, jsx_runtime_1.jsx)(react_core_1.SearchInput, Object.assign({ "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }, searchInputProps)), searchInputScreenReaderText && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__filter-announcement pf-chatbot-m-hidden", children: searchInputScreenReaderText }))] }));

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js

@@ -19,6 +19,7 @@ const Chatbot_1 = require("../Chatbot/Chatbot");
 const ChatbotConversationHistoryNav_1 = __importDefault(require("./ChatbotConversationHistoryNav"));
 const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
+const react_2 = require("react");
 const ERROR = {
     bodyText: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["To try again, check your connection and reload this page. If the issue persists,", ' ', (0, jsx_runtime_1.jsx)("a", { href: "", children: "contact the support team" }), "."] })),
     buttonText: 'Reload',
@@ -274,4 +275,327 @@ describe('ChatbotConversationHistoryNav', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, navTitleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.BellIcon, { "data-testid": "bell" }) }));
         expect(react_1.screen.getByTestId('bell')).toBeInTheDocument();
     });
+    it('renders static and expandable groups from ConversationGroup[]', () => {
+        const groups = [
+            {
+                id: 'pinned',
+                label: 'Pinned chats',
+                items: initialConversations
+            },
+            {
+                id: 'chats',
+                label: 'Chats',
+                expandable: {
+                    isExpanded: true,
+                    onToggle: jest.fn()
+                },
+                items: [{ id: '2', text: 'Chatbot extension' }]
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        expect(react_1.screen.getByRole('heading', { name: 'Pinned chats', level: 3 })).toBeInTheDocument();
+        expect(react_1.screen.queryByRole('button', { name: 'Pinned chats' })).not.toBeInTheDocument();
+        expect(react_1.screen.getByRole('button', { name: 'Chats' })).toBeInTheDocument();
+    });
+    it('labels each MenuList with aria-labelledby referencing its visible label', () => {
+        const groups = [
+            {
+                id: 'pinned',
+                label: 'Pinned chats',
+                items: initialConversations
+            },
+            {
+                id: 'chats',
+                label: 'Chats',
+                expandable: {
+                    isExpanded: true,
+                    onToggle: jest.fn()
+                },
+                items: [{ id: '2', text: 'Chatbot extension' }]
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        const pinnedHeading = react_1.screen.getByRole('heading', { name: 'Pinned chats', level: 3 });
+        expect(pinnedHeading).toHaveAttribute('id', 'chatbot-nav-group-pinned-label');
+        expect(pinnedHeading.closest('section')).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-pinned-label');
+        expect(react_1.screen.getByRole('menu', { name: 'Pinned chats' })).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-pinned-label');
+        expect(document.querySelector('ul.pf-v6-c-menu__list[aria-labelledby="chatbot-nav-group-pinned-label"]')).toBeTruthy();
+        const chatsToggle = react_1.screen.getByRole('button', { name: 'Chats' });
+        expect(chatsToggle).toHaveAttribute('id', 'chatbot-nav-group-chats-toggle');
+        expect(react_1.screen.getByRole('menu', { name: 'Chats' })).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-chats-toggle');
+        expect(document.querySelector('ul.pf-v6-c-menu__list[aria-labelledby="chatbot-nav-group-chats-toggle"]')).toBeTruthy();
+    });
+    it('labels grouped object conversations on the menu list element', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations } }));
+        expect(document.querySelector('ul.pf-v6-c-menu__list')).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-Today-label');
+    });
+    it('labels each menu list in a shared static menu with its group title id', () => {
+        const groups = [
+            {
+                id: 'pinned',
+                label: 'Pinned chats',
+                items: initialConversations
+            },
+            {
+                id: 'recent',
+                label: 'Recent chats',
+                items: [{ id: '2', text: 'Chatbot extension' }]
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        expect(react_1.screen.getByRole('menu', { name: 'Pinned chats' })).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-pinned-label');
+        expect(react_1.screen.getByRole('menu', { name: 'Recent chats' })).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-recent-label');
+    });
+    it('does not autofocus the first menu item when an expandable group is expanded', () => __awaiter(void 0, void 0, void 0, function* () {
+        const ExpandableGroupDemo = () => {
+            const [isExpanded, setIsExpanded] = (0, react_2.useState)(false);
+            return ((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: [
+                    {
+                        id: 'saved-prompts',
+                        label: 'Saved prompts',
+                        expandable: {
+                            isExpanded,
+                            onToggle: setIsExpanded
+                        },
+                        items: [
+                            { id: '7', text: 'Summarize this document' },
+                            { id: '8', text: 'Draft a release announcement' }
+                        ]
+                    }
+                ] }));
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ExpandableGroupDemo, {}));
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Saved prompts' }));
+        yield (0, react_1.waitFor)(() => {
+            expect(react_1.screen.getByRole('menuitem', { name: 'Summarize this document' })).toBeInTheDocument();
+        });
+        expect(react_1.screen.getByRole('menuitem', { name: 'Summarize this document' })).not.toHaveFocus();
+    }));
+    it('does not render a collapsed expandable group menu', () => {
+        const groups = [
+            {
+                id: 'chats',
+                label: 'Chats',
+                items: [
+                    { id: '2', text: 'Chat two' },
+                    { id: '3', text: 'Chat three' }
+                ]
+            },
+            {
+                id: 'saved-prompts',
+                label: 'Saved prompts',
+                expandable: {
+                    isExpanded: false,
+                    onToggle: jest.fn()
+                },
+                items: [
+                    { id: '7', text: 'Summarize this document' },
+                    { id: '8', text: 'Draft a release announcement' }
+                ]
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        // Collapsed expandable groups render their toggle outside the menu and omit the menu
+        // entirely until expanded, so their items are not part of arrow-key navigation.
+        expect(react_1.screen.getAllByRole('menu')).toHaveLength(1);
+        expect(react_1.screen.getByRole('menu', { name: 'Chats' })).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-chats-label');
+        expect(react_1.screen.queryByRole('menuitem', { name: 'Summarize this document' })).not.toBeInTheDocument();
+        expect(react_1.screen.queryByRole('menuitem', { name: 'Draft a release announcement' })).not.toBeInTheDocument();
+        const firstItem = react_1.screen.getByRole('menuitem', { name: 'Chat two' });
+        const lastItem = react_1.screen.getByRole('menuitem', { name: 'Chat three' });
+        lastItem.focus();
+        react_1.fireEvent.keyDown(lastItem, { key: 'ArrowDown' });
+        expect(firstItem).toHaveFocus();
+    });
+    it('collapses and expands a group when expandable.onToggle is called', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onToggle = jest.fn();
+        const groups = [
+            {
+                id: 'chats',
+                label: 'Chats',
+                expandable: {
+                    isExpanded: true,
+                    onToggle
+                },
+                items: [{ id: '2', text: 'Chatbot extension' }]
+            }
+        ];
+        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        expect(react_1.screen.getByRole('menuitem', { name: /Chatbot extension/i })).toBeInTheDocument();
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Chats' }));
+        expect(onToggle).toHaveBeenCalledWith(false);
+        rerender((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [
+                Object.assign(Object.assign({}, groups[0]), { expandable: {
+                        isExpanded: false,
+                        onToggle
+                    } })
+            ] }));
+        yield (0, react_1.waitFor)(() => {
+            expect(react_1.screen.queryByRole('menuitem', { name: /Chatbot extension/i })).not.toBeInTheDocument();
+        });
+    }));
+    it('renders custom menu items and footers supplied in ConversationGroup', () => {
+        const groups = [
+            {
+                id: 'chats',
+                label: 'Chats',
+                items: [
+                    initialConversations[0],
+                    (0, jsx_runtime_1.jsx)(react_core_1.MenuItem, { itemId: "show-all", children: "Show all" }, "show-all")
+                ],
+                footer: (0, jsx_runtime_1.jsx)("div", { "data-testid": "group-footer", children: "Footer content" })
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        expect(react_1.screen.getByRole('menuitem', { name: 'Show all' })).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('group-footer')).toBeInTheDocument();
+    });
+    it('moves focus to the first overflow item when show all is expanded', () => __awaiter(void 0, void 0, void 0, function* () {
+        const recentChats = [
+            { id: '2', text: 'Chat two' },
+            { id: '3', text: 'Chat three' },
+            { id: '4', text: 'Chat four' },
+            { id: '5', text: 'Chat five' },
+            { id: '6', text: 'Chat six' }
+        ];
+        const VISIBLE_CHAT_COUNT = 3;
+        const ShowAllDemo = () => {
+            const [isShowingAllChats, setIsShowingAllChats] = (0, react_2.useState)(false);
+            return ((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: [
+                    {
+                        id: 'chats',
+                        label: 'Chats',
+                        items: recentChats,
+                        showAll: {
+                            visibleCount: VISIBLE_CHAT_COUNT,
+                            isExpanded: isShowingAllChats,
+                            onToggle: setIsShowingAllChats
+                        }
+                    }
+                ] }));
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ShowAllDemo, {}));
+        react_1.fireEvent.click(react_1.screen.getByRole('menuitem', { name: /Show all/i }));
+        yield (0, react_1.waitFor)(() => {
+            expect(react_1.screen.getByRole('menuitem', { name: 'Chat five' })).toHaveFocus();
+        });
+    }));
+    it('keeps focus on the toggle when show all is collapsed', () => __awaiter(void 0, void 0, void 0, function* () {
+        const recentChats = [
+            { id: '2', text: 'Chat two' },
+            { id: '3', text: 'Chat three' },
+            { id: '4', text: 'Chat four' },
+            { id: '5', text: 'Chat five' }
+        ];
+        const ShowAllDemo = () => {
+            const [isShowingAllChats, setIsShowingAllChats] = (0, react_2.useState)(true);
+            return ((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: [
+                    {
+                        id: 'chats',
+                        label: 'Chats',
+                        items: recentChats,
+                        showAll: {
+                            visibleCount: 2,
+                            isExpanded: isShowingAllChats,
+                            onToggle: setIsShowingAllChats
+                        }
+                    }
+                ] }));
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ShowAllDemo, {}));
+        react_1.fireEvent.click(react_1.screen.getByRole('menuitem', { name: 'Show less' }));
+        yield (0, react_1.waitFor)(() => {
+            expect(react_1.screen.getByRole('menuitem', { name: /Show all/i })).toHaveFocus();
+        });
+    }));
+    it('renders overflow items above the show all toggle so it stays in a fixed position', () => {
+        const recentChats = [
+            { id: '2', text: 'Chat two' },
+            { id: '3', text: 'Chat three' },
+            { id: '4', text: 'Chat four' }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: [
+                {
+                    id: 'chats',
+                    label: 'Chats',
+                    items: recentChats,
+                    showAll: {
+                        visibleCount: 1,
+                        isExpanded: true,
+                        onToggle: jest.fn()
+                    }
+                }
+            ] }));
+        const overflowItem = react_1.screen.getByRole('menuitem', { name: 'Chat four' });
+        const toggle = react_1.screen.getByRole('menuitem', { name: 'Show less' });
+        const isToggleAfterOverflowItem = Boolean(
+        // eslint-disable-next-line no-bitwise
+        overflowItem.compareDocumentPosition(toggle) & Node.DOCUMENT_POSITION_FOLLOWING);
+        expect(isToggleAfterOverflowItem).toBe(true);
+    });
+    it('allows arrow key navigation to flow through the show all toggle like any other menu item', () => __awaiter(void 0, void 0, void 0, function* () {
+        const recentChats = [
+            { id: '2', text: 'Chat two' },
+            { id: '3', text: 'Chat three' },
+            { id: '4', text: 'Chat four' }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: [
+                {
+                    id: 'chats',
+                    label: 'Chats',
+                    items: recentChats,
+                    showAll: {
+                        visibleCount: 2,
+                        isExpanded: false,
+                        onToggle: jest.fn()
+                    }
+                }
+            ] }));
+        const lastVisibleItem = react_1.screen.getByRole('menuitem', { name: 'Chat three' });
+        const toggle = react_1.screen.getByRole('menuitem', { name: /Show all/i });
+        lastVisibleItem.focus();
+        react_1.fireEvent.keyDown(lastVisibleItem, { key: 'ArrowDown' });
+        yield (0, react_1.waitFor)(() => {
+            expect(toggle).toHaveFocus();
+        });
+        react_1.fireEvent.keyDown(toggle, { key: 'ArrowUp' });
+        yield (0, react_1.waitFor)(() => {
+            expect(lastVisibleItem).toHaveFocus();
+        });
+    }));
+    it('preserves custom menu item identity when preceding items change', () => {
+        const renderShowAll = () => ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, { itemId: "show-all-chats", children: "Show all" }, "show-all-chats"));
+        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [
+                {
+                    id: 'chats',
+                    label: 'Chats',
+                    items: [initialConversations[0], renderShowAll()]
+                }
+            ] }));
+        const showAllBefore = react_1.screen.getByRole('menuitem', { name: 'Show all' });
+        rerender((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [
+                {
+                    id: 'chats',
+                    label: 'Chats',
+                    items: [initialConversations[0], initialConversations[1], initialConversations[2], renderShowAll()]
+                }
+            ] }));
+        expect(react_1.screen.getByRole('menuitem', { name: 'Show all' })).toBe(showAllBefore);
+    });
+    it('passes expandableSectionProps from expandable ConversationGroup', () => {
+        const groups = [
+            {
+                id: 'saved',
+                label: 'Saved prompts',
+                expandable: {
+                    isExpanded: true,
+                    onToggle: jest.fn(),
+                    expandableSectionProps: { className: 'test-expandable-section' }
+                },
+                items: initialConversations
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        expect(document.querySelector('.test-expandable-section')).toBeInTheDocument();
+    });
 });

package/dist/cjs/MessageBox/MessageBox.d.ts

@@ -27,6 +27,8 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     jumpButtonTopTooltipProps?: TooltipProps;
     /** Props passed to top jump button tooltip */
     jumpButtonBottomTooltipProps?: TooltipProps;
+    /** Whether scrollbar is on the page or message box in embedded mode */
+    hasOuterScrollbar?: boolean;
 }
 export interface MessageBoxHandle extends HTMLDivElement {
     /** Scrolls to the top of the message box */

package/dist/cjs/MessageBox/MessageBox.js

@@ -22,6 +22,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const JumpButton_1 = __importDefault(require("./JumpButton"));
 const react_core_1 = require("@patternfly/react-core");
+const react_styles_1 = require("@patternfly/react-styles");
 const SCROLL_EDGE_DELTA = 100;
 const getScrollMetrics = (element) => {
     const { scrollTop, scrollHeight, clientHeight } = element;
@@ -46,7 +47,7 @@ const shouldFollowContentGrowth = (metrics, enableSmartScroll, autoScroll, pause
     metrics.nearBottom ||
     (enableSmartScroll && autoScroll && !pauseAutoScroll && metrics.roundedScrollTop > 0);
 exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
-    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false, jumpButtonTopProps, jumpButtonBottomProps, jumpButtonBottomTooltipProps, jumpButtonTopTooltipProps } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll", "jumpButtonTopProps", "jumpButtonBottomProps", "jumpButtonBottomTooltipProps", "jumpButtonTopTooltipProps"]);
+    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false, jumpButtonTopProps, jumpButtonBottomProps, jumpButtonBottomTooltipProps, jumpButtonTopTooltipProps, hasOuterScrollbar = false } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll", "jumpButtonTopProps", "jumpButtonBottomProps", "jumpButtonBottomTooltipProps", "jumpButtonTopTooltipProps", "hasOuterScrollbar"]);
     const [atTop, setAtTop] = (0, react_1.useState)(true);
     const [atBottom, setAtBottom] = (0, react_1.useState)(false);
     const [isOverflowing, setIsOverflowing] = (0, react_1.useState)(false);
@@ -257,6 +258,6 @@ exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
         onTouchMove,
         onTouchEnd
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", isHidden: !hasMeasuredScroll || (isOverflowing && atTop), onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: !hasMeasuredScroll || (isOverflowing && atBottom), onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", isHidden: !hasMeasuredScroll || (isOverflowing && atTop), onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: !hasMeasuredScroll || (isOverflowing && atBottom), onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: (0, react_styles_1.css)('pf-chatbot__messagebox', position === 'bottom' && 'pf-chatbot__messagebox--bottom', hasOuterScrollbar && 'pf-chatbot__messagebox--outer-scroll', className), ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] }))] }));
 });
 exports.default = exports.MessageBox;