@patternfly/chatbot 6.3.0-prerelease.13 → 6.3.0-prerelease.14

package/dist/esm/AttachmentEdit/AttachmentEdit.test.js

@@ -1,5 +1,15 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import AttachmentEdit from './AttachmentEdit';
 describe('AttachmentEdit', () => {
     it('should open AttachmentEdit modal', () => {
@@ -11,7 +21,7 @@ describe('AttachmentEdit', () => {
             isModalOpen: true,
             handleModalToggle: jest.fn()
         };
-        render(React.createElement(AttachmentEdit, Object.assign({}, props)));
+        render(_jsx(AttachmentEdit, Object.assign({}, props)));
         expect(screen.getByText('Edit attachment')).toBeTruthy();
     });
     it('should call onSave handler when the save button is clicked', () => {
@@ -24,7 +34,7 @@ describe('AttachmentEdit', () => {
             isModalOpen: true,
             handleModalToggle: jest.fn()
         };
-        render(React.createElement(AttachmentEdit, Object.assign({}, props)));
+        render(_jsx(AttachmentEdit, Object.assign({}, props)));
         // Click on save button
         fireEvent.click(screen.getByText('Save'));
         expect(onSaveHandler).toHaveBeenCalledWith(expect.any(Object), 'code');
@@ -39,9 +49,24 @@ describe('AttachmentEdit', () => {
             isModalOpen: true,
             handleModalToggle: jest.fn()
         };
-        render(React.createElement(AttachmentEdit, Object.assign({}, props)));
+        render(_jsx(AttachmentEdit, Object.assign({}, props)));
         // Click on cancel button
         fireEvent.click(screen.getByText('Cancel'));
         expect(onCancelHandler).toHaveBeenCalled();
     });
+    it('should render custom button text for footer actions buttons', () => {
+        render(_jsx(AttachmentEdit, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onCancel: jest.fn(), onSave: jest.fn(), handleModalToggle: jest.fn(), primaryActionButtonText: "Save", secondaryActionButtonText: "Close" }));
+        expect(screen.getByText('Save')).toBeInTheDocument();
+        expect(screen.getByText('Close')).toBeInTheDocument();
+    });
+    it('should render AttachmentEdit with custom classNames', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(AttachmentEdit, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onCancel: jest.fn(), onSave: jest.fn(), handleModalToggle: jest.fn(), primaryActionButtonText: "Save", secondaryActionButtonText: "Close", modalHeaderClassName: "custom-header-class", modalBodyClassName: "custom-body-class", modalFooterClassName: "custom-footer-class" }));
+        const modal = screen.getByRole('dialog');
+        const modalHeader = within(modal).getByRole('banner');
+        expect(modalHeader).toHaveClass('custom-header-class');
+        const modalBody = modal.querySelector('#code-modal-body');
+        expect(modalBody).toHaveClass('custom-body-class');
+        const modalfooter = within(modal).getByRole('contentinfo');
+        expect(modalfooter).toHaveClass('custom-footer-class');
+    }));
 });

package/dist/esm/Chatbot/Chatbot.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export interface ChatbotProps {
     /** Content to be displayed in the chatbot */
     children: React.ReactNode;
@@ -22,5 +21,5 @@ export declare enum ChatbotDisplayMode {
     fullscreen = "fullscreen",
     drawer = "drawer"
 }
-declare const Chatbot: React.ForwardRefExoticComponent<ChatbotProps & React.RefAttributes<HTMLDivElement>>;
+declare const Chatbot: import("react").ForwardRefExoticComponent<ChatbotProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Chatbot;

package/dist/esm/Chatbot/Chatbot.js

@@ -9,10 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { motion } from 'framer-motion';
 export var ChatbotDisplayMode;
 (function (ChatbotDisplayMode) {
@@ -29,7 +27,7 @@ const ChatbotBase = (_a) => {
         visible: { opacity: 1, y: 0 },
         hidden: { opacity: 0, y: '16px' }
     };
-    return (React.createElement(motion.div, Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''}  ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, variants: motionChatbot, initial: "hidden", animate: isVisible ? 'visible' : 'hidden' }, props), isVisible ? (React.createElement("section", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Chatbot', className: `pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`, tabIndex: -1, ref: innerRef }, children)) : undefined));
+    return (_jsx(motion.div, Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''}  ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, variants: motionChatbot, initial: "hidden", animate: isVisible ? 'visible' : 'hidden' }, props, { children: isVisible ? (_jsx("section", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Chatbot', className: `pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`, tabIndex: -1, ref: innerRef, children: children })) : undefined })));
 };
-const Chatbot = React.forwardRef((props, ref) => (React.createElement(ChatbotBase, Object.assign({ innerRef: ref }, props))));
+const Chatbot = forwardRef((props, ref) => (_jsx(ChatbotBase, Object.assign({ innerRef: ref }, props))));
 export default Chatbot;

package/dist/esm/Chatbot/Chatbot.test.js

@@ -1,27 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import '@testing-library/jest-dom';
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Chatbot from './Chatbot';
 describe('Chatbot', () => {
     it('should render Chatbot with default display mode', () => {
-        render(React.createElement(Chatbot, null, "Chatbot Content"));
+        render(_jsx(Chatbot, { children: "Chatbot Content" }));
         expect(screen.getByText('Chatbot Content')).toBeTruthy();
     });
     it('should render Chatbot with custom ariaLabel', () => {
-        render(React.createElement(Chatbot, { ariaLabel: "Chatbot" }, "Chatbot Content"));
+        render(_jsx(Chatbot, { ariaLabel: "Chatbot", children: "Chatbot Content" }));
         expect(screen.getByLabelText('Chatbot')).toBeTruthy();
     });
     it('should render Chatbot with custom className', () => {
-        const { container } = render(React.createElement(Chatbot, { ariaLabel: "Chatbot", className: "custom-class" }, "Chatbot Content"));
+        const { container } = render(_jsx(Chatbot, { ariaLabel: "Chatbot", className: "custom-class", children: "Chatbot Content" }));
         const chatbotElement = container.querySelector('.custom-class');
         expect(chatbotElement).toBeInTheDocument();
     });
     it('should not render Chatbot', () => {
-        render(React.createElement(Chatbot, { isVisible: false }, "Chatbot Content"));
+        render(_jsx(Chatbot, { isVisible: false, children: "Chatbot Content" }));
         expect(screen.queryByLabelText('Chatbot')).toBeFalsy();
     });
     it('should handle isCompact', () => {
-        render(React.createElement(Chatbot, { "data-testid": "chatbot", isVisible: true, isCompact: true }, "Chatbot Content"));
+        render(_jsx(Chatbot, { "data-testid": "chatbot", isVisible: true, isCompact: true, children: "Chatbot Content" }));
         expect(screen.getByTestId('chatbot')).toHaveClass('pf-m-compact');
     });
 });

package/dist/esm/ChatbotAlert/ChatbotAlert.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { AlertProps } from '@patternfly/react-core';
 export interface ChatbotAlert extends AlertProps {
     /** Callback for when close button is clicked; if none is provided, there will be no way to dismiss the alert */
     onClose?: () => void;
 }
-export declare const ChatbotAlert: React.FunctionComponent<ChatbotAlert>;
+export declare const ChatbotAlert: FunctionComponent<ChatbotAlert>;
 export default ChatbotAlert;

package/dist/esm/ChatbotAlert/ChatbotAlert.js

@@ -9,13 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
 export const ChatbotAlert = (_a) => {
     var { variant = 'info', title, children = '', onClose } = _a, props = __rest(_a, ["variant", "title", "children", "onClose"]);
-    return (React.createElement("div", { className: "pf-chatbot__alert" },
-        React.createElement(Alert, Object.assign({ variant: variant, isInline: true, title: title, component: "h6" }, (onClose && {
-            actionClose: React.createElement(AlertActionCloseButton, { onClose: onClose })
-        }), props), children)));
+    return (_jsx("div", { className: "pf-chatbot__alert", children: _jsx(Alert, Object.assign({ variant: variant, isInline: true, title: title, component: "h6" }, (onClose && {
+            actionClose: _jsx(AlertActionCloseButton, { onClose: onClose })
+        }), props, { children: children })) }));
 };
 export default ChatbotAlert;

package/dist/esm/ChatbotAlert/ChatbotAlert.test.js

@@ -1,18 +1,18 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { fireEvent, render, screen } from '@testing-library/react';
 import ChatbotAlert from './ChatbotAlert';
 describe('ChatbotAlert', () => {
     it('should render ChatbotAlert with default variant', () => {
-        render(React.createElement(ChatbotAlert, { title: "Chatbot Alert" }));
+        render(_jsx(ChatbotAlert, { title: "Chatbot Alert" }));
         expect(screen.getByText('Chatbot Alert')).toBeTruthy();
     });
     it('should render ChatbotAlert with children', () => {
-        render(React.createElement(ChatbotAlert, { title: "Chatbot Alert" }, "Chatbot Alert Content"));
+        render(_jsx(ChatbotAlert, { title: "Chatbot Alert", children: "Chatbot Alert Content" }));
         expect(screen.getByText('Chatbot Alert Content')).toBeTruthy();
     });
     it('should call onClose handler when onClose button is clicked', () => {
         const onCloseHandler = jest.fn();
-        render(React.createElement(ChatbotAlert, { title: "Chatbot Alert", onClose: onCloseHandler }, "Chatbot Alert Content"));
+        render(_jsx(ChatbotAlert, { title: "Chatbot Alert", onClose: onCloseHandler, children: "Chatbot Alert Content" }));
         expect(screen.getByText('Chatbot Alert')).toBeTruthy();
         expect(screen.getByText('Chatbot Alert Content')).toBeTruthy();
         // click on the close button

package/dist/esm/ChatbotContent/ChatbotContent.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-export interface ChatbotContentProps extends React.HTMLProps<HTMLDivElement> {
+import type { HTMLProps, FunctionComponent } from 'react';
+export interface ChatbotContentProps extends HTMLProps<HTMLDivElement> {
     /** Content to be displayed in the chatbot */
     children: React.ReactNode;
     /** Custom classname for the ChatbotContent component */
     className?: string;
 }
-export declare const ChatbotContent: React.FunctionComponent<ChatbotContentProps>;
+export declare const ChatbotContent: FunctionComponent<ChatbotContentProps>;
 export default ChatbotContent;

package/dist/esm/ChatbotContent/ChatbotContent.js

@@ -9,12 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Main
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ChatbotContent = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: `pf-chatbot__content ${className !== null && className !== void 0 ? className : ''}` }, props), children));
+    return (_jsx("div", Object.assign({ className: `pf-chatbot__content ${className !== null && className !== void 0 ? className : ''}` }, props, { children: children })));
 };
 export default ChatbotContent;

package/dist/esm/ChatbotContent/ChatbotContent.test.js

@@ -1,13 +1,13 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import ChatbotContent from './ChatbotContent';
 describe('ChatbotContent', () => {
     it('should render ChatbotContent with children', () => {
-        render(React.createElement(ChatbotContent, null, "Chatbot Content"));
+        render(_jsx(ChatbotContent, { children: "Chatbot Content" }));
         expect(screen.getByText('Chatbot Content')).toBeTruthy();
     });
     it('should render ChatbotContent with custom classname', () => {
-        const { container } = render(React.createElement(ChatbotContent, { className: "custom-class" }, "Chatbot Content"));
+        const { container } = render(_jsx(ChatbotContent, { className: "custom-class", children: "Chatbot Content" }));
         expect(container.querySelector('.custom-class')).toBeTruthy();
     });
 });

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { DropdownProps } from '@patternfly/react-core';
 export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownProps, 'toggle'> {
     /** Dropdown items rendered in conversation settings dropdown */
@@ -10,5 +10,5 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
 }
-export declare const ChatbotConversationHistoryDropdown: React.FunctionComponent<ChatbotConversationHistoryDropdownProps>;
+export declare const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps>;
 export default ChatbotConversationHistoryDropdown;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js

@@ -1,20 +1,16 @@
-// ============================================================================
-// Chatbot Header - Chatbot Conversation History Nav
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 // Import PatternFly components
 import { Tooltip, MenuToggle, Dropdown } from '@patternfly/react-core';
 import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 export const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const toggle = (toggleRef) => (React.createElement(Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom", 
+    const [isOpen, setIsOpen] = useState(false);
+    const toggle = (toggleRef) => (_jsx(Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom", 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none" },
-        React.createElement(MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": label !== null && label !== void 0 ? label : 'Conversation options', ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), role: "menuitem" },
-            React.createElement(EllipsisIcon, null))));
-    return (React.createElement(Dropdown, { className: `pf-chatbot__selections ${menuClassName !== null && menuClassName !== void 0 ? menuClassName : ''}`, isOpen: isOpen, onSelect: (props) => {
+        aria: "none", children: _jsx(MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": label !== null && label !== void 0 ? label : 'Conversation options', ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), role: "menuitem", children: _jsx(EllipsisIcon, {}) }) }));
+    return (_jsx(Dropdown, { className: `pf-chatbot__selections ${menuClassName !== null && menuClassName !== void 0 ? menuClassName : ''}`, isOpen: isOpen, onSelect: (props) => {
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(props);
             setIsOpen((prev) => !prev);
-        }, onOpenChange: (isOpen) => setIsOpen(isOpen), popperProps: { position: 'right' }, shouldFocusToggleOnSelect: true, shouldFocusFirstItemOnOpen: true, toggle: toggle }, menuItems));
+        }, onOpenChange: (isOpen) => setIsOpen(isOpen), popperProps: { position: 'right' }, shouldFocusToggleOnSelect: true, shouldFocusFirstItemOnOpen: true, toggle: toggle, children: menuItems }));
 };
 export default ChatbotConversationHistoryDropdown;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.js

@@ -7,22 +7,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import '@testing-library/jest-dom';
 import { DropdownItem } from '@patternfly/react-core';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import ChatbotConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 describe('ChatbotConversationHistoryDropdown', () => {
     const onSelect = jest.fn();
-    const menuItems = (React.createElement(React.Fragment, null,
-        React.createElement(DropdownItem, null, "Rename"),
-        React.createElement(DropdownItem, null, "Delete")));
+    const menuItems = (_jsxs(_Fragment, { children: [_jsx(DropdownItem, { children: "Rename" }), _jsx(DropdownItem, { children: "Delete" })] }));
     it('should render the dropdown', () => {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems, menuClassName: "custom-class" }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, menuClassName: "custom-class" }));
         expect(screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
     });
     it('should display the dropdown menuItems', () => {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems }));
         const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         expect(toggle).toBeInTheDocument();
         fireEvent.click(toggle);
@@ -32,14 +30,14 @@ describe('ChatbotConversationHistoryDropdown', () => {
         });
     });
     it('should invoke onSelect callback when menuitem is clicked', () => {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
         const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         fireEvent.click(toggle);
         fireEvent.click(screen.getByText('Rename'));
         expect(onSelect).toHaveBeenCalled();
     });
     it('should toggle the dropdown when menuitem is clicked', () => {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
         const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         fireEvent.click(toggle);
         fireEvent.click(screen.getByText('Delete'));
@@ -47,7 +45,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
         expect(screen.queryByText('Delete')).not.toBeInTheDocument();
     });
     it('should close the dropdown when user clicks outside', () => {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
         const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         fireEvent.click(toggle);
         expect(screen.queryByText('Delete')).toBeInTheDocument();
@@ -55,7 +53,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
         expect(screen.queryByText('Delete')).not.toBeInTheDocument();
     });
     it('should show the tooltip when the user hovers over the toggle button', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems, label: "Actions dropdown" }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, label: "Actions dropdown" }));
         const toggle = screen.queryByRole('menuitem', { name: /Actions dropdown/i });
         fireEvent(toggle, new MouseEvent('mouseenter', {
             bubbles: false,

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { DrawerProps, MenuItemProps, MenuProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import { HistoryEmptyStateProps } from './EmptyState';
@@ -83,5 +83,5 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     /** Sets drawer to compact styling. */
     isCompact?: boolean;
 }
-export declare const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps>;
+export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -9,10 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Header - Chatbot Conversation History Nav
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, Fragment } from 'react';
 // Import PatternFly components
 import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, SearchInput, Menu, MenuList, MenuGroup, MenuItem, MenuContent } from '@patternfly/react-core';
 import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
@@ -22,27 +20,26 @@ import LoadingState from './LoadingState';
 import HistoryEmptyState from './EmptyState';
 export const ChatbotConversationHistoryNav = (_a) => {
     var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Filter menu items', handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', menuProps, drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "menuProps", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact"]);
-    const drawerRef = React.useRef(null);
+    const drawerRef = useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
     };
     const getNavItem = (conversation) => {
         var _a;
-        return (React.createElement(MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id, key: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : React.createElement(OutlinedCommentAltIcon, null) }), (conversation.menuItems
+        return (_jsx(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 : _jsx(OutlinedCommentAltIcon, {}) }), (conversation.menuItems
             ? {
-                actions: (React.createElement(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
+                actions: (_jsx(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
             }
-            : {}), conversation.additionalProps), conversation.text));
+            : {}), conversation.additionalProps, { children: conversation.text }), conversation.id));
     };
     const buildMenu = () => {
         if (Array.isArray(conversations)) {
             // Render for array of MenuItemObject
-            return (React.createElement(MenuList, null, conversations.map((conversation) => (React.createElement(React.Fragment, { key: conversation.id }, getNavItem(conversation))))));
+            return (_jsx(MenuList, { children: conversations.map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) }));
         }
         else {
             // Render for object with NavItemObject arrays as values
-            return (React.createElement(React.Fragment, null, Object.keys(conversations).map((navGroup) => (React.createElement(MenuGroup, { className: "pf-chatbot__menu-item-header", label: navGroup, key: navGroup },
-                React.createElement(MenuList, null, conversations[navGroup].map((conversation) => (React.createElement(React.Fragment, { key: conversation.id }, getNavItem(conversation))))))))));
+            return (_jsx(_Fragment, { children: Object.keys(conversations).map((navGroup) => (_jsx(MenuGroup, { className: "pf-chatbot__menu-item-header", label: navGroup, children: _jsx(MenuList, { children: conversations[navGroup].map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) }) }, navGroup))) }));
         }
     };
     // Menu Content
@@ -50,29 +47,20 @@ export const ChatbotConversationHistoryNav = (_a) => {
     // - Groups could be optional, but items need to be ordered by date
     const renderMenuContent = () => {
         if (errorState) {
-            return React.createElement(HistoryEmptyState, Object.assign({}, errorState));
+            return _jsx(HistoryEmptyState, Object.assign({}, errorState));
         }
         if (emptyState) {
-            return React.createElement(HistoryEmptyState, Object.assign({}, emptyState));
+            return _jsx(HistoryEmptyState, Object.assign({}, emptyState));
         }
         if (noResultsState) {
-            return React.createElement(HistoryEmptyState, Object.assign({}, noResultsState));
+            return _jsx(HistoryEmptyState, Object.assign({}, noResultsState));
         }
-        return (React.createElement(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
-            React.createElement(MenuContent, null, buildMenu())));
+        return (_jsx(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: _jsx(MenuContent, { children: buildMenu() }) })));
     };
-    const renderDrawerContent = () => (React.createElement(React.Fragment, null,
-        handleTextInputChange && (React.createElement("div", { className: "pf-chatbot__input" },
-            React.createElement(SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }))),
-        React.createElement(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps), renderMenuContent())));
+    const renderDrawerContent = () => (_jsxs(_Fragment, { children: [handleTextInputChange && (_jsx("div", { className: "pf-chatbot__input", children: _jsx(SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }) })), _jsx(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() }))] }));
     const renderPanelContent = () => {
-        const drawer = (React.createElement(React.Fragment, null,
-            React.createElement(DrawerHead, Object.assign({}, drawerHeadProps),
-                React.createElement(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps),
-                    React.createElement(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)),
-                    onNewChat && (React.createElement(Button, { size: isCompact ? 'sm' : undefined, onClick: onNewChat }, newChatButtonText)))),
-            isLoading ? React.createElement(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()));
-        return (React.createElement(DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps), drawer));
+        const drawer = (_jsxs(_Fragment, { children: [_jsx(DrawerHead, Object.assign({}, drawerHeadProps, { children: _jsxs(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [_jsx(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && (_jsx(Button, { size: isCompact ? 'sm' : undefined, onClick: onNewChat, children: newChatButtonText }))] })) })), isLoading ? _jsx(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()] }));
+        return (_jsx(DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps, { children: drawer })));
     };
     // An onKeyDown property must be passed to the Drawer component to handle closing
     // the drawer panel and deactivating the focus trap via the Escape key.
@@ -84,11 +72,6 @@ export const ChatbotConversationHistoryNav = (_a) => {
             }
         }
     };
-    return (React.createElement(Drawer, Object.assign({ className: `pf-chatbot__history ${isCompact ? 'pf-m-compact' : ''}`, isExpanded: isDrawerOpen, onExpand: onExpand, position: "start", onKeyDown: onEscape, isInline: displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded }, props),
-        React.createElement(DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps),
-            React.createElement(DrawerContentBody, Object.assign({}, drawerContentBodyProps),
-                React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: `${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked || displayMode === ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),
-                    drawerContent)))));
+    return (_jsx(Drawer, Object.assign({ className: `pf-chatbot__history ${isCompact ? 'pf-m-compact' : ''}`, isExpanded: isDrawerOpen, onExpand: onExpand, position: "start", onKeyDown: onEscape, isInline: displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded }, props, { children: _jsx(DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps, { children: _jsx(DrawerContentBody, Object.assign({}, drawerContentBodyProps, { children: _jsxs(_Fragment, { children: [_jsx("div", { className: `${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked || displayMode === ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }), drawerContent] }) })) })) })));
 };
 export default ChatbotConversationHistoryNav;