@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/dist/cjs/AttachMenu/AttachMenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { DropdownProps, DropdownToggleProps, DropdownPopperProps } from '@patternfly/react-core';
 export interface ExtendedDropdownPopperProps extends DropdownPopperProps {
     distance: string;
@@ -25,5 +25,5 @@ export interface AttachMenuProps extends DropdownProps {
     /** Toggle to be rendered */
     toggle: DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
 }
-export declare const AttachMenu: React.FunctionComponent<AttachMenuProps>;
+export declare const AttachMenu: FunctionComponent<AttachMenuProps>;
 export default AttachMenu;

package/dist/cjs/AttachMenu/AttachMenu.js

@@ -10,24 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AttachMenu = void 0;
-// ============================================================================
-// Chatbot Attachment Menu
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const AttachMenu = (_a) => {
     var { className, filteredItems, handleTextInputChange, isOpen, popperProps = undefined, onOpenChange, onOpenChangeKeys, onSelect, searchInputPlaceholder, searchInputAriaLabel = 'Filter menu items', toggle } = _a, props = __rest(_a, ["className", "filteredItems", "handleTextInputChange", "isOpen", "popperProps", "onOpenChange", "onOpenChangeKeys", "onSelect", "searchInputPlaceholder", "searchInputAriaLabel", "toggle"]);
-    return (react_1.default.createElement(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__menu ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOpen, onOpenChange: (isOpen) => onOpenChange(isOpen), onOpenChangeKeys: onOpenChangeKeys !== null && onOpenChangeKeys !== void 0 ? onOpenChangeKeys : ['Esc'], toggle: toggle, popperProps: popperProps, onSelect: onSelect }, props),
-        react_1.default.createElement(react_core_1.MenuSearch, null,
-            react_1.default.createElement(react_core_1.MenuSearchInput, null,
-                react_1.default.createElement(react_core_1.SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }))),
-        filteredItems));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__menu ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOpen, onOpenChange: (isOpen) => onOpenChange(isOpen), onOpenChangeKeys: onOpenChangeKeys !== null && onOpenChangeKeys !== void 0 ? onOpenChangeKeys : ['Esc'], toggle: toggle, popperProps: popperProps, onSelect: onSelect }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.MenuSearch, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuSearchInput, { children: (0, jsx_runtime_1.jsx)(react_core_1.SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }) }) }), filteredItems] })));
 };
 exports.AttachMenu = AttachMenu;
 exports.default = exports.AttachMenu;

package/dist/cjs/AttachmentEdit/AttachmentEdit.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface AttachmentEditProps {
     /** Text shown in code editor */
@@ -17,6 +17,18 @@ export interface AttachmentEditProps {
     title?: string;
     /** Display mode for the Chatbot parent; this influences the styles applied */
     displayMode?: ChatbotDisplayMode;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
+    /** Primary action button text */
+    primaryActionButtonText?: string;
+    /** Secondary action button text */
+    secondaryActionButtonText?: string;
+    /** Class applied to modal header */
+    modalHeaderClassName?: string;
+    /** Class applied to modal body */
+    modalBodyClassName?: string;
+    /** Class applied to modal footer */
+    modalFooterClassName?: string;
 }
-export declare const AttachmentEdit: React.FunctionComponent<AttachmentEditProps>;
+export declare const AttachmentEdit: FunctionComponent<AttachmentEditProps>;
 export default AttachmentEdit;

package/dist/cjs/AttachmentEdit/AttachmentEdit.js

@@ -4,13 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AttachmentEdit = void 0;
-// ============================================================================
-// Attachment Edit - Chatbot Code Snippet Editor
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const CodeModal_1 = __importDefault(require("../CodeModal"));
 const Chatbot_1 = require("../Chatbot");
-const AttachmentEdit = ({ fileName, code, handleModalToggle, isModalOpen, onCancel, onSave, title = 'Edit attachment', displayMode = Chatbot_1.ChatbotDisplayMode.default }) => {
+const AttachmentEdit = ({ fileName, code, handleModalToggle, isModalOpen, onCancel, onSave, title = 'Edit attachment', displayMode = Chatbot_1.ChatbotDisplayMode.default, isCompact, modalHeaderClassName, modalBodyClassName, modalFooterClassName, primaryActionButtonText = 'Save', secondaryActionButtonText = 'Cancel' }) => {
     const handleSave = (_event, code) => {
         handleModalToggle(_event);
         onSave(_event, code);
@@ -19,7 +16,7 @@ const AttachmentEdit = ({ fileName, code, handleModalToggle, isModalOpen, onCanc
         handleModalToggle(_event);
         onCancel(_event);
     };
-    return (react_1.default.createElement(CodeModal_1.default, { code: code, fileName: fileName, handleModalToggle: handleModalToggle, isModalOpen: isModalOpen, onPrimaryAction: handleSave, onSecondaryAction: handleCancel, primaryActionBtn: "Save", secondaryActionBtn: "Cancel", title: title, displayMode: displayMode }));
+    return ((0, jsx_runtime_1.jsx)(CodeModal_1.default, { code: code, fileName: fileName, handleModalToggle: handleModalToggle, isModalOpen: isModalOpen, onPrimaryAction: handleSave, onSecondaryAction: handleCancel, primaryActionBtn: primaryActionButtonText, secondaryActionBtn: secondaryActionButtonText, title: title, displayMode: displayMode, isCompact: isCompact, modalHeaderClassName: modalHeaderClassName, modalBodyClassName: modalBodyClassName, modalFooterClassName: modalFooterClassName }));
 };
 exports.AttachmentEdit = AttachmentEdit;
 exports.default = exports.AttachmentEdit;

package/dist/cjs/AttachmentEdit/AttachmentEdit.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/cjs/AttachmentEdit/AttachmentEdit.test.js

@@ -1,10 +1,20 @@
 "use strict";
+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());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
 const AttachmentEdit_1 = __importDefault(require("./AttachmentEdit"));
 describe('AttachmentEdit', () => {
     it('should open AttachmentEdit modal', () => {
@@ -16,8 +26,8 @@ describe('AttachmentEdit', () => {
             isModalOpen: true,
             handleModalToggle: jest.fn()
         };
-        (0, react_2.render)(react_1.default.createElement(AttachmentEdit_1.default, Object.assign({}, props)));
-        expect(react_2.screen.getByText('Edit attachment')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachmentEdit_1.default, Object.assign({}, props)));
+        expect(react_1.screen.getByText('Edit attachment')).toBeTruthy();
     });
     it('should call onSave handler when the save button is clicked', () => {
         const onSaveHandler = jest.fn();
@@ -29,9 +39,9 @@ describe('AttachmentEdit', () => {
             isModalOpen: true,
             handleModalToggle: jest.fn()
         };
-        (0, react_2.render)(react_1.default.createElement(AttachmentEdit_1.default, Object.assign({}, props)));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachmentEdit_1.default, Object.assign({}, props)));
         // Click on save button
-        react_2.fireEvent.click(react_2.screen.getByText('Save'));
+        react_1.fireEvent.click(react_1.screen.getByText('Save'));
         expect(onSaveHandler).toHaveBeenCalledWith(expect.any(Object), 'code');
     });
     it('should call cancel handler when the cancel button is clicked', () => {
@@ -44,9 +54,24 @@ describe('AttachmentEdit', () => {
             isModalOpen: true,
             handleModalToggle: jest.fn()
         };
-        (0, react_2.render)(react_1.default.createElement(AttachmentEdit_1.default, Object.assign({}, props)));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachmentEdit_1.default, Object.assign({}, props)));
         // Click on cancel button
-        react_2.fireEvent.click(react_2.screen.getByText('Cancel'));
+        react_1.fireEvent.click(react_1.screen.getByText('Cancel'));
         expect(onCancelHandler).toHaveBeenCalled();
     });
+    it('should render custom button text for footer actions buttons', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachmentEdit_1.default, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onCancel: jest.fn(), onSave: jest.fn(), handleModalToggle: jest.fn(), primaryActionButtonText: "Save", secondaryActionButtonText: "Close" }));
+        expect(react_1.screen.getByText('Save')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Close')).toBeInTheDocument();
+    });
+    it('should render AttachmentEdit with custom classNames', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachmentEdit_1.default, { 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 = react_1.screen.getByRole('dialog');
+        const modalHeader = (0, react_1.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 = (0, react_1.within)(modal).getByRole('contentinfo');
+        expect(modalfooter).toHaveClass('custom-footer-class');
+    }));
 });

package/dist/cjs/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;
@@ -12,6 +11,8 @@ export interface ChatbotProps {
     innerRef?: React.Ref<HTMLDivElement>;
     /** Custom aria label applied to focusable container */
     ariaLabel?: string;
+    /** Density of information within the ChatBot */
+    isCompact?: boolean;
 }
 export declare enum ChatbotDisplayMode {
     default = "default",
@@ -20,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/cjs/Chatbot/Chatbot.js

@@ -10,15 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotDisplayMode = void 0;
-// ============================================================================
-// Chatbot
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const framer_motion_1 = require("framer-motion");
 var ChatbotDisplayMode;
 (function (ChatbotDisplayMode) {
@@ -29,13 +24,13 @@ var ChatbotDisplayMode;
     ChatbotDisplayMode["drawer"] = "drawer";
 })(ChatbotDisplayMode || (exports.ChatbotDisplayMode = ChatbotDisplayMode = {}));
 const ChatbotBase = (_a) => {
-    var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel"]);
+    var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel, isCompact } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel", "isCompact"]);
     // Configure animations
     const motionChatbot = {
         visible: { opacity: 1, y: 0 },
         hidden: { opacity: 0, y: '16px' }
     };
-    return (react_1.default.createElement(framer_motion_1.motion.div, Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''} ${className !== null && className !== void 0 ? className : ''}`, variants: motionChatbot, initial: "hidden", animate: isVisible ? 'visible' : 'hidden' }, props), isVisible ? (react_1.default.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 ((0, jsx_runtime_1.jsx)(framer_motion_1.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 ? ((0, jsx_runtime_1.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_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotBase, Object.assign({ innerRef: ref }, props))));
+const Chatbot = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ChatbotBase, Object.assign({ innerRef: ref }, props))));
 exports.default = Chatbot;

package/dist/cjs/Chatbot/Chatbot.test.js

@@ -3,26 +3,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
 require("@testing-library/jest-dom");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const react_1 = require("@testing-library/react");
 const Chatbot_1 = __importDefault(require("./Chatbot"));
 describe('Chatbot', () => {
     it('should render Chatbot with default display mode', () => {
-        (0, react_2.render)(react_1.default.createElement(Chatbot_1.default, null, "Chatbot Content"));
-        expect(react_2.screen.getByText('Chatbot Content')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Chatbot_1.default, { children: "Chatbot Content" }));
+        expect(react_1.screen.getByText('Chatbot Content')).toBeTruthy();
     });
     it('should render Chatbot with custom ariaLabel', () => {
-        (0, react_2.render)(react_1.default.createElement(Chatbot_1.default, { ariaLabel: "Chatbot" }, "Chatbot Content"));
-        expect(react_2.screen.getByLabelText('Chatbot')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Chatbot_1.default, { ariaLabel: "Chatbot", children: "Chatbot Content" }));
+        expect(react_1.screen.getByLabelText('Chatbot')).toBeTruthy();
     });
     it('should render Chatbot with custom className', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(Chatbot_1.default, { ariaLabel: "Chatbot", className: "custom-class" }, "Chatbot Content"));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Chatbot_1.default, { ariaLabel: "Chatbot", className: "custom-class", children: "Chatbot Content" }));
         const chatbotElement = container.querySelector('.custom-class');
         expect(chatbotElement).toBeInTheDocument();
     });
     it('should not render Chatbot', () => {
-        (0, react_2.render)(react_1.default.createElement(Chatbot_1.default, { isVisible: false }, "Chatbot Content"));
-        expect(react_2.screen.queryByLabelText('Chatbot')).toBeFalsy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Chatbot_1.default, { isVisible: false, children: "Chatbot Content" }));
+        expect(react_1.screen.queryByLabelText('Chatbot')).toBeFalsy();
+    });
+    it('should handle isCompact', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Chatbot_1.default, { "data-testid": "chatbot", isVisible: true, isCompact: true, children: "Chatbot Content" }));
+        expect(react_1.screen.getByTestId('chatbot')).toHaveClass('pf-m-compact');
     });
 });

package/dist/cjs/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/cjs/ChatbotAlert/ChatbotAlert.js

@@ -10,19 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotAlert = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotAlert = (_a) => {
     var { variant = 'info', title, children = '', onClose } = _a, props = __rest(_a, ["variant", "title", "children", "onClose"]);
-    return (react_1.default.createElement("div", { className: "pf-chatbot__alert" },
-        react_1.default.createElement(react_core_1.Alert, Object.assign({ variant: variant, isInline: true, title: title, component: "h6" }, (onClose && {
-            actionClose: react_1.default.createElement(react_core_1.AlertActionCloseButton, { onClose: onClose })
-        }), props), children)));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__alert", children: (0, jsx_runtime_1.jsx)(react_core_1.Alert, Object.assign({ variant: variant, isInline: true, title: title, component: "h6" }, (onClose && {
+            actionClose: (0, jsx_runtime_1.jsx)(react_core_1.AlertActionCloseButton, { onClose: onClose })
+        }), props, { children: children })) }));
 };
 exports.ChatbotAlert = ChatbotAlert;
 exports.default = exports.ChatbotAlert;

package/dist/cjs/ChatbotAlert/ChatbotAlert.test.js

@@ -3,25 +3,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 const ChatbotAlert_1 = __importDefault(require("./ChatbotAlert"));
 describe('ChatbotAlert', () => {
     it('should render ChatbotAlert with default variant', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotAlert_1.default, { title: "Chatbot Alert" }));
-        expect(react_2.screen.getByText('Chatbot Alert')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotAlert_1.default, { title: "Chatbot Alert" }));
+        expect(react_1.screen.getByText('Chatbot Alert')).toBeTruthy();
     });
     it('should render ChatbotAlert with children', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotAlert_1.default, { title: "Chatbot Alert" }, "Chatbot Alert Content"));
-        expect(react_2.screen.getByText('Chatbot Alert Content')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotAlert_1.default, { title: "Chatbot Alert", children: "Chatbot Alert Content" }));
+        expect(react_1.screen.getByText('Chatbot Alert Content')).toBeTruthy();
     });
     it('should call onClose handler when onClose button is clicked', () => {
         const onCloseHandler = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(ChatbotAlert_1.default, { title: "Chatbot Alert", onClose: onCloseHandler }, "Chatbot Alert Content"));
-        expect(react_2.screen.getByText('Chatbot Alert')).toBeTruthy();
-        expect(react_2.screen.getByText('Chatbot Alert Content')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotAlert_1.default, { title: "Chatbot Alert", onClose: onCloseHandler, children: "Chatbot Alert Content" }));
+        expect(react_1.screen.getByText('Chatbot Alert')).toBeTruthy();
+        expect(react_1.screen.getByText('Chatbot Alert Content')).toBeTruthy();
         // click on the close button
-        react_2.fireEvent.click(react_2.screen.getByRole('button'));
+        react_1.fireEvent.click(react_1.screen.getByRole('button'));
         expect(onCloseHandler).toHaveBeenCalled();
     });
 });

package/dist/cjs/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/cjs/ChatbotContent/ChatbotContent.js

@@ -10,18 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotContent = void 0;
-// ============================================================================
-// Chatbot Main
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ChatbotContent = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__content ${className !== null && className !== void 0 ? className : ''}` }, props), children));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `pf-chatbot__content ${className !== null && className !== void 0 ? className : ''}` }, props, { children: children })));
 };
 exports.ChatbotContent = ChatbotContent;
 exports.default = exports.ChatbotContent;

package/dist/cjs/ChatbotContent/ChatbotContent.test.js

@@ -3,16 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 const ChatbotContent_1 = __importDefault(require("./ChatbotContent"));
 describe('ChatbotContent', () => {
     it('should render ChatbotContent with children', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotContent_1.default, null, "Chatbot Content"));
-        expect(react_2.screen.getByText('Chatbot Content')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotContent_1.default, { children: "Chatbot Content" }));
+        expect(react_1.screen.getByText('Chatbot Content')).toBeTruthy();
     });
     it('should render ChatbotContent with custom classname', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotContent_1.default, { className: "custom-class" }, "Chatbot Content"));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotContent_1.default, { className: "custom-class", children: "Chatbot Content" }));
         expect(container.querySelector('.custom-class')).toBeTruthy();
     });
 });

package/dist/cjs/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/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js

@@ -4,24 +4,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotConversationHistoryDropdown = void 0;
-// ============================================================================
-// Chatbot Header - Chatbot Conversation History Nav
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const ellipsis_v_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"));
 const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label }) => {
-    const [isOpen, setIsOpen] = react_1.default.useState(false);
-    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom", 
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const toggle = (toggleRef) => ((0, jsx_runtime_1.jsx)(react_core_1.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_1.default.createElement(react_core_1.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_1.default.createElement(ellipsis_v_icon_1.default, null))));
-    return (react_1.default.createElement(react_core_1.Dropdown, { className: `pf-chatbot__selections ${menuClassName !== null && menuClassName !== void 0 ? menuClassName : ''}`, isOpen: isOpen, onSelect: (props) => {
+        aria: "none", children: (0, jsx_runtime_1.jsx)(react_core_1.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: (0, jsx_runtime_1.jsx)(ellipsis_v_icon_1.default, {}) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.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 }));
 };
 exports.ChatbotConversationHistoryDropdown = ChatbotConversationHistoryDropdown;
 exports.default = exports.ChatbotConversationHistoryDropdown;

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

@@ -12,62 +12,60 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 require("@testing-library/jest-dom");
 const react_core_1 = require("@patternfly/react-core");
-const react_2 = require("@testing-library/react");
+const react_1 = require("@testing-library/react");
 const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotConversationHistoryDropdown"));
 describe('ChatbotConversationHistoryDropdown', () => {
     const onSelect = jest.fn();
-    const menuItems = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_core_1.DropdownItem, null, "Rename"),
-        react_1.default.createElement(react_core_1.DropdownItem, null, "Delete")));
+    const menuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { children: "Rename" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { children: "Delete" })] }));
     it('should render the dropdown', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, menuClassName: "custom-class" }));
-        expect(react_2.screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, menuClassName: "custom-class" }));
+        expect(react_1.screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
     });
     it('should display the dropdown menuItems', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems }));
-        const toggle = react_2.screen.queryByRole('menuitem', { name: /Conversation options/i });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems }));
+        const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
         expect(toggle).toBeInTheDocument();
-        react_2.fireEvent.click(toggle);
-        (0, react_2.waitFor)(() => {
-            expect(react_2.screen.getByText('Rename')).toBeInTheDocument();
-            expect(react_2.screen.getByText('Delete')).toBeInTheDocument();
+        react_1.fireEvent.click(toggle);
+        (0, react_1.waitFor)(() => {
+            expect(react_1.screen.getByText('Rename')).toBeInTheDocument();
+            expect(react_1.screen.getByText('Delete')).toBeInTheDocument();
         });
     });
     it('should invoke onSelect callback when menuitem is clicked', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
-        const toggle = react_2.screen.queryByRole('menuitem', { name: /Conversation options/i });
-        react_2.fireEvent.click(toggle);
-        react_2.fireEvent.click(react_2.screen.getByText('Rename'));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
+        const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
+        react_1.fireEvent.click(toggle);
+        react_1.fireEvent.click(react_1.screen.getByText('Rename'));
         expect(onSelect).toHaveBeenCalled();
     });
     it('should toggle the dropdown when menuitem is clicked', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
-        const toggle = react_2.screen.queryByRole('menuitem', { name: /Conversation options/i });
-        react_2.fireEvent.click(toggle);
-        react_2.fireEvent.click(react_2.screen.getByText('Delete'));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
+        const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
+        react_1.fireEvent.click(toggle);
+        react_1.fireEvent.click(react_1.screen.getByText('Delete'));
         expect(onSelect).toHaveBeenCalled();
-        expect(react_2.screen.queryByText('Delete')).not.toBeInTheDocument();
+        expect(react_1.screen.queryByText('Delete')).not.toBeInTheDocument();
     });
     it('should close the dropdown when user clicks outside', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
-        const toggle = react_2.screen.queryByRole('menuitem', { name: /Conversation options/i });
-        react_2.fireEvent.click(toggle);
-        expect(react_2.screen.queryByText('Delete')).toBeInTheDocument();
-        react_2.fireEvent.click(toggle.parentElement);
-        expect(react_2.screen.queryByText('Delete')).not.toBeInTheDocument();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
+        const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
+        react_1.fireEvent.click(toggle);
+        expect(react_1.screen.queryByText('Delete')).toBeInTheDocument();
+        react_1.fireEvent.click(toggle.parentElement);
+        expect(react_1.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* () {
-        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, label: "Actions dropdown" }));
-        const toggle = react_2.screen.queryByRole('menuitem', { name: /Actions dropdown/i });
-        (0, react_2.fireEvent)(toggle, new MouseEvent('mouseenter', {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, label: "Actions dropdown" }));
+        const toggle = react_1.screen.queryByRole('menuitem', { name: /Actions dropdown/i });
+        (0, react_1.fireEvent)(toggle, new MouseEvent('mouseenter', {
             bubbles: false,
             cancelable: false
         }));
-        yield (0, react_2.waitFor)(() => {
-            expect(react_2.screen.queryByText('Actions dropdown')).toBeInTheDocument();
+        yield (0, react_1.waitFor)(() => {
+            expect(react_1.screen.queryByText('Actions dropdown')).toBeInTheDocument();
         });
     }));
 });

package/dist/cjs/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';
@@ -80,6 +80,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     emptyState?: HistoryEmptyStateProps;
     /** Content to show in no results state. No results state will appear once content is passed in. */
     noResultsState?: HistoryEmptyStateProps;
+    /** Sets drawer to compact styling. */
+    isCompact?: boolean;
 }
-export declare const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps>;
+export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;