@patternfly/chatbot 6.3.0-prerelease.9 → 6.3.0

package/dist/esm/ChatbotToggle/ChatbotToggle.test.js

@@ -7,48 +7,48 @@ 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 } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import ChatbotToggle from './ChatbotToggle';
 describe('ChatbotToggle', () => {
     it('should render tooltipLabel correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(ChatbotToggle, { tooltipLabel: "Tooltip" }));
+        render(_jsx(ChatbotToggle, { tooltipLabel: "Tooltip" }));
         yield userEvent.click(screen.getByRole('button', { name: /Tooltip toggle/i }));
         expect(screen.getByRole('tooltip', { name: /Tooltip/i })).toBeTruthy();
     }));
     it('should render toggleButtonLabel correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", toggleButtonLabel: "Button" }));
+        render(_jsx(ChatbotToggle, { tooltipLabel: "Chatbot", toggleButtonLabel: "Button" }));
         expect(screen.getByRole('button', { name: /Button/i })).toBeTruthy();
     }));
     it('should call onToggleChatbot when clicked', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", onToggleChatbot: spy }));
+        render(_jsx(ChatbotToggle, { tooltipLabel: "Chatbot", onToggleChatbot: spy }));
         yield userEvent.click(screen.getByRole('button'));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle isChatbotVisible correctly when true', () => {
-        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", isChatbotVisible: true, openIconTestId: "Open" }));
+        render(_jsx(ChatbotToggle, { tooltipLabel: "Chatbot", isChatbotVisible: true, openIconTestId: "Open" }));
         expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
         expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--active');
         expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
         expect(screen.getByTestId('Open')).toBeTruthy();
     });
     it('should handle isChatbotVisible correctly when false', () => {
-        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", isChatbotVisible: false, openIconTestId: "Open" }));
+        render(_jsx(ChatbotToggle, { tooltipLabel: "Chatbot", isChatbotVisible: false, openIconTestId: "Open" }));
         expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
         expect(screen.getByRole('button')).not.toHaveClass('pf-chatbot__button--active');
         expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
         expect(screen.queryByTestId('Open')).toBeFalsy();
     });
     it('should handle isRound correctly', () => {
-        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", isRound: true }));
+        render(_jsx(ChatbotToggle, { tooltipLabel: "Chatbot", isRound: true }));
         expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
         expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--round');
     });
     it('should handle className correctly', () => {
-        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", className: "test" }));
+        render(_jsx(ChatbotToggle, { tooltipLabel: "Chatbot", className: "test" }));
         expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
         expect(screen.getByRole('button')).toHaveClass('test');
     });

package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 export interface ChatbotWelcomePromptProps extends React.HTMLProps<HTMLDivElement> {
     /** Title for the welcome message*/
     title: string;
@@ -20,5 +20,5 @@ export interface WelcomePrompt {
     /** Callback handler for the onClick event for welcome prompt */
     onClick?: () => void;
 }
-export declare const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptProps>;
+export declare const ChatbotWelcomePrompt: FunctionComponent<ChatbotWelcomePromptProps>;
 export default ChatbotWelcomePrompt;

package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.js

@@ -9,25 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Layout - Chat - Welcome
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Content, ContentVariants, Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 export const ChatbotWelcomePrompt = (_a) => {
     var { title, description, prompts, className, testId, isCompact = false } = _a, props = __rest(_a, ["title", "description", "prompts", "className", "testId", "isCompact"]);
-    return (React.createElement("div", Object.assign({ "data-testid": testId, className: `pf-chatbot--layout--welcome ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props),
-        React.createElement(Content, { component: ContentVariants.h1 },
-            React.createElement("span", { className: "pf-chatbot__hello" }, title),
-            React.createElement("br", null),
-            React.createElement("span", { className: "pf-chatbot__question" }, description)),
-        prompts && (React.createElement("div", { className: "pf-chatbot__prompt-suggestions" }, prompts === null || prompts === void 0 ? void 0 : prompts.map((prompt, index) => (React.createElement(Card, { key: `welcome-prompt-${index}`, className: "pf-chatbot__prompt-suggestion", isClickable: true, isCompact: isCompact },
-            React.createElement(CardHeader, { selectableActions: {
-                    onClickAction: prompt.onClick,
-                    selectableActionId: `welcome-prompt-input-${index}`,
-                    selectableActionAriaLabelledby: `welcome-prompt-title-${index}`
-                } },
-                React.createElement(CardTitle, { id: `welcome-prompt-title-${index}` }, prompt.title)),
-            prompt.message && React.createElement(CardBody, null, prompt.message))))))));
+    return (_jsxs("div", Object.assign({ "data-testid": testId, className: `pf-chatbot--layout--welcome ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: [_jsxs(Content, { component: ContentVariants.h1, children: [_jsx("span", { className: "pf-chatbot__hello", children: title }), _jsx("br", {}), _jsx("span", { className: "pf-chatbot__question", children: description })] }), prompts && (_jsx("div", { className: "pf-chatbot__prompt-suggestions", children: prompts === null || prompts === void 0 ? void 0 : prompts.map((prompt, index) => (_jsxs(Card, { className: "pf-chatbot__prompt-suggestion", isClickable: true, isCompact: isCompact, children: [_jsx(CardHeader, { selectableActions: {
+                                onClickAction: prompt.onClick,
+                                selectableActionId: `welcome-prompt-input-${index}`,
+                                selectableActionAriaLabelledby: `welcome-prompt-title-${index}`
+                            }, children: _jsx(CardTitle, { id: `welcome-prompt-title-${index}`, children: prompt.title }) }), prompt.message && _jsx(CardBody, { children: prompt.message })] }, `welcome-prompt-${index}`))) }))] })));
 };
 export default ChatbotWelcomePrompt;

package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js

@@ -7,34 +7,34 @@ 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 } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ChatbotWelcomePrompt from './ChatbotWelcomePrompt';
 import userEvent from '@testing-library/user-event';
 describe('ChatbotWelcomePrompt', () => {
     it('should render welcome prompt', () => {
-        const { container } = render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
+        const { container } = render(_jsx(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
         expect(container).toMatchSnapshot();
     });
     it('should render correctly', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
+        render(_jsx(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
         expect(screen.getByText('Hi, ChatBot User!')).toBeTruthy();
         expect(screen.getByText('How can I help you today?')).toBeTruthy();
     });
     it('should render prompts with titles correctly', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [{ title: 'Set up account' }] }));
+        render(_jsx(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [{ title: 'Set up account' }] }));
         expect(screen.getByText('Set up account')).toBeTruthy();
     });
     it('should render prompts with messages correctly', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
+        render(_jsx(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
                 { title: 'Set up account', message: 'Choose the necessary settings and preferences for your account.' }
             ] }));
         expect(screen.getByText('Choose the necessary settings and preferences for your account.')).toBeTruthy();
     });
     it('should render prompts with onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
+        render(_jsx(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
                 {
                     title: 'Set up account',
                     message: 'Choose the necessary settings and preferences for your account.',
@@ -45,12 +45,12 @@ describe('ChatbotWelcomePrompt', () => {
         expect(spy).toHaveBeenCalled();
     }));
     it('should apply className appropriately', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt" }));
+        render(_jsx(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt" }));
         const element = screen.getByTestId('welcome-prompt');
         expect(element).toHaveClass('test');
     });
     it('should handle isCompact', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt", isCompact: true }));
+        render(_jsx(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt", isCompact: true }));
         expect(screen.getByTestId('welcome-prompt')).toHaveClass('pf-m-compact');
     });
 });

package/dist/esm/CodeModal/CodeModal.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface CodeModalProps {
     /** Class applied to code editor */
@@ -31,6 +31,12 @@ export interface CodeModalProps {
     displayMode?: ChatbotDisplayMode;
     /** Sets modal to compact styling. */
     isCompact?: boolean;
+    /** Class applied to modal header */
+    modalHeaderClassName?: string;
+    /** Class applied to modal body */
+    modalBodyClassName?: string;
+    /** Class applied to modal footer */
+    modalFooterClassName?: string;
 }
-export declare const CodeModal: React.FunctionComponent<CodeModalProps>;
+export declare const CodeModal: FunctionComponent<CodeModalProps>;
 export default CodeModal;

package/dist/esm/CodeModal/CodeModal.js

@@ -9,10 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Code Modal - Chatbot Modal with Code Editor
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import path from 'path-browserify';
 // Import PatternFly components
 import { CodeEditor } from '@patternfly/react-code-editor';
@@ -21,8 +19,8 @@ import FileDetails, { extensionToLanguage } from '../FileDetails';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
 export const CodeModal = (_a) => {
-    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = ChatbotDisplayMode.default, isCompact } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode", "isCompact"]);
-    const [newCode, setNewCode] = React.useState(code);
+    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = ChatbotDisplayMode.default, isCompact, modalHeaderClassName, modalBodyClassName, modalFooterClassName } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode", "isCompact", "modalHeaderClassName", "modalBodyClassName", "modalFooterClassName"]);
+    const [newCode, setNewCode] = useState(code);
     const handlePrimaryAction = (_event) => {
         handleModalToggle(_event);
         if (!isReadOnly) {
@@ -46,20 +44,10 @@ export const CodeModal = (_a) => {
             setNewCode(value);
         }
     };
-    const modal = (React.createElement(ChatbotModal, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode, isCompact: isCompact },
-        React.createElement(ModalHeader, { title: title, labelId: "code-modal-title" }),
-        React.createElement(ModalBody, { id: "code-modal-body" },
-            React.createElement(Stack, { className: "pf-chatbot__code-modal-body" },
-                React.createElement(StackItem, { className: "pf-chatbot__code-modal-file-details" },
-                    React.createElement(FileDetails, { fileName: fileName })),
-                React.createElement(StackItem, { className: "pf-chatbot__code-modal-editor" },
-                    React.createElement(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
-                            glyphMargin: false,
-                            folding: false
-                        } }, props))))),
-        React.createElement(ModalFooter, null,
-            React.createElement(Button, { isBlock: true, key: "code-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form" }, primaryActionBtn),
-            React.createElement(Button, { isBlock: true, key: "code-modal-secondary", variant: "link", onClick: handleSecondaryAction }, secondaryActionBtn))));
+    const modal = (_jsxs(ChatbotModal, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode, isCompact: isCompact, children: [_jsx(ModalHeader, { className: modalHeaderClassName, title: title, labelId: "code-modal-title" }), _jsx(ModalBody, { className: modalBodyClassName, id: "code-modal-body", children: _jsxs(Stack, { className: "pf-chatbot__code-modal-body", children: [_jsx(StackItem, { className: "pf-chatbot__code-modal-file-details", children: _jsx(FileDetails, { fileName: fileName }) }), _jsx(StackItem, { className: "pf-chatbot__code-modal-editor", children: _jsx(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
+                                    glyphMargin: false,
+                                    folding: false
+                                } }, props)) })] }) }), _jsxs(ModalFooter, { className: modalFooterClassName, children: [_jsx(Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form", children: primaryActionBtn }, "code-modal-primary"), _jsx(Button, { isBlock: true, variant: "link", onClick: handleSecondaryAction, children: secondaryActionBtn }, "code-modal-secondary")] })] }));
     return modal;
 };
 export default CodeModal;

package/dist/esm/CodeModal/CodeModal.test.js

@@ -1,10 +1,29 @@
-import React from 'react';
-import { 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 { render, screen, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import CodeModal from './CodeModal';
 describe('ChatbotModal', () => {
     it('should render compact modal', () => {
-        render(React.createElement(CodeModal, { isCompact: true, code: "Hello world", fileName: "greetings.txt", isModalOpen: true, handleModalToggle: jest.fn(), onPrimaryAction: jest.fn(), onSecondaryAction: jest.fn(), title: "Preview attachment", primaryActionBtn: "Submit", secondaryActionBtn: "Cancel" }));
+        render(_jsx(CodeModal, { isCompact: true, code: "Hello world", fileName: "greetings.txt", isModalOpen: true, handleModalToggle: jest.fn(), onPrimaryAction: jest.fn(), onSecondaryAction: jest.fn(), title: "Preview attachment", primaryActionBtn: "Submit", secondaryActionBtn: "Cancel" }));
         expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
     });
+    it('should render CodeModal with custom classNames', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(CodeModal, { isCompact: true, code: "Hello world", fileName: "greetings.txt", isModalOpen: true, handleModalToggle: jest.fn(), onPrimaryAction: jest.fn(), onSecondaryAction: jest.fn(), title: "Preview attachment", primaryActionBtn: "Submit", secondaryActionBtn: "Cancel", 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/Compare/Compare.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 interface CompareProps {
     /** First of two children to render */
     firstChild: React.ReactNode;
@@ -13,5 +13,5 @@ interface CompareProps {
     /** Callback for when mobile toggle is used */
     onToggleClick?: (event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>) => void;
 }
-export declare const Compare: ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel }: PropsWithChildren<CompareProps>) => React.JSX.Element;
+export declare const Compare: ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel }: PropsWithChildren<CompareProps>) => import("react/jsx-runtime").JSX.Element;
 export default Compare;

package/dist/esm/Compare/Compare.js

@@ -1,10 +1,11 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 export const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
-    const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
-    const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
-    const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
-    React.useEffect(() => {
+    const [isSelected, setIsSelected] = useState('toggle-group-chatbot-1');
+    const [showFirstChatbot, setShowFirstChatbot] = useState(true);
+    const [showSecondChatbot, setShowSecondChatbot] = useState(false);
+    useEffect(() => {
         // we want to show the first if we switch to the mobile toggle view
         // and reset/switch back to normal otherwise
         const updateChatbotVisibility = () => {
@@ -31,13 +32,6 @@ export const Compare = ({ firstChild, secondChild, firstChildDisplayName, second
         setShowFirstChatbot(!showFirstChatbot);
         onToggleClick && onToggleClick(event);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
-            React.createElement(ToggleGroup, { "aria-label": toggleGroupAriaLabel },
-                React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
-                React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
-        React.createElement("div", { className: "pf-chatbot__compare" },
-            React.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
-            React.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pf-chatbot__compare-mobile-controls", children: _jsxs(ToggleGroup, { "aria-label": toggleGroupAriaLabel, children: [_jsx(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }), _jsx(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick })] }) }), _jsxs("div", { className: "pf-chatbot__compare", children: [_jsx("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`, children: firstChild }), _jsx("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`, children: secondChild })] })] }));
 };
 export default Compare;

package/dist/esm/Compare/Compare.test.js

@@ -1,14 +1,12 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Compare from './Compare';
-const firstChild = (React.createElement("div", null,
-    React.createElement("h1", null, "Child 1")));
-const secondChild = (React.createElement("div", null,
-    React.createElement("h1", null, "Child 2")));
+const firstChild = (_jsx("div", { children: _jsx("h1", { children: "Child 1" }) }));
+const secondChild = (_jsx("div", { children: _jsx("h1", { children: "Child 2" }) }));
 describe('Compare', () => {
     it('should render compare correctly', () => {
-        render(React.createElement(Compare, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
+        render(_jsx(Compare, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
         expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
         expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
     });

package/dist/esm/FileDetails/FileDetails.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 interface FileDetailsProps {
     /** Class name applied to container */
     className?: string;
@@ -918,5 +918,5 @@ export declare const extensionToLanguage: {
     odp: string;
     pdf: string;
 };
-export declare const FileDetails: ({ className, fileName, fileNameClassName, languageTestId }: PropsWithChildren<FileDetailsProps>) => React.JSX.Element;
+export declare const FileDetails: ({ className, fileName, fileNameClassName, languageTestId }: PropsWithChildren<FileDetailsProps>) => import("react/jsx-runtime").JSX.Element;
 export default FileDetails;

package/dist/esm/FileDetails/FileDetails.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Stack, StackItem, Truncate } from '@patternfly/react-core';
 import path from 'path-browserify';
 // source https://gist.github.com/ppisarczyk/43962d06686722d26d176fad46879d41
@@ -929,19 +929,6 @@ export const extensionToLanguage = {
 export const FileDetails = ({ className, fileName, fileNameClassName, languageTestId }) => {
     var _a;
     const language = (_a = extensionToLanguage[path.extname(fileName).slice(1)]) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-    return (React.createElement(Flex, { className: `pf-chatbot__file-details ${className ? className : ''}`, gap: { default: 'gapSm' } },
-        React.createElement(Flex, { className: "pf-chatbot__code-icon", justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' } },
-            React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
-                React.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z", fill: "currentColor" }),
-                React.createElement("g", { clipPath: "url(#clip0_3280_27505)" },
-                    React.createElement("path", { d: "M13.8204 5.63002C13.3954 5.50752 12.9529 5.75502 12.8304 6.18002L9.63035 17.38C9.50785 17.805 9.75535 18.2475 10.1804 18.37C10.6054 18.4925 11.0479 18.245 11.1704 17.82L14.3704 6.62002C14.4929 6.19502 14.2454 5.75252 13.8204 5.63002ZM15.8354 8.63252C15.5229 8.94502 15.5229 9.45252 15.8354 9.76502L18.0679 12L15.8329 14.235C15.5204 14.5475 15.5204 15.055 15.8329 15.3675C16.1454 15.68 16.6529 15.68 16.9654 15.3675L19.7654 12.5675C20.0779 12.255 20.0779 11.7475 19.7654 11.435L16.9654 8.63502C16.6529 8.32252 16.1454 8.32252 15.8329 8.63502L15.8354 8.63252ZM8.16785 8.63252C7.85535 8.32002 7.34785 8.32002 7.03535 8.63252L4.23535 11.4325C3.92285 11.745 3.92285 12.2525 4.23535 12.565L7.03535 15.365C7.34785 15.6775 7.85535 15.6775 8.16785 15.365C8.48035 15.0525 8.48035 14.545 8.16785 14.2325L5.93285 12L8.16785 9.76502C8.48035 9.45252 8.48035 8.94502 8.16785 8.63252Z", fill: "white" })),
-                React.createElement("defs", null,
-                    React.createElement("clipPath", null,
-                        React.createElement("rect", { width: "16", height: "12.8", fill: "white", transform: "translate(4 5.60001)" }))))),
-        React.createElement(Stack, null,
-            React.createElement(StackItem, null,
-                React.createElement("span", { className: "pf-chatbot__code-fileName" },
-                    React.createElement(Truncate, { className: fileNameClassName, content: path.parse(fileName).name }))),
-            language && (React.createElement(StackItem, { "data-testid": languageTestId, className: "pf-chatbot__code-language" }, language)))));
+    return (_jsxs(Flex, { className: `pf-chatbot__file-details ${className ? className : ''}`, gap: { default: 'gapSm' }, children: [_jsx(Flex, { className: "pf-chatbot__code-icon", justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' }, children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z", fill: "currentColor" }), _jsx("g", { clipPath: "url(#clip0_3280_27505)", children: _jsx("path", { d: "M13.8204 5.63002C13.3954 5.50752 12.9529 5.75502 12.8304 6.18002L9.63035 17.38C9.50785 17.805 9.75535 18.2475 10.1804 18.37C10.6054 18.4925 11.0479 18.245 11.1704 17.82L14.3704 6.62002C14.4929 6.19502 14.2454 5.75252 13.8204 5.63002ZM15.8354 8.63252C15.5229 8.94502 15.5229 9.45252 15.8354 9.76502L18.0679 12L15.8329 14.235C15.5204 14.5475 15.5204 15.055 15.8329 15.3675C16.1454 15.68 16.6529 15.68 16.9654 15.3675L19.7654 12.5675C20.0779 12.255 20.0779 11.7475 19.7654 11.435L16.9654 8.63502C16.6529 8.32252 16.1454 8.32252 15.8329 8.63502L15.8354 8.63252ZM8.16785 8.63252C7.85535 8.32002 7.34785 8.32002 7.03535 8.63252L4.23535 11.4325C3.92285 11.745 3.92285 12.2525 4.23535 12.565L7.03535 15.365C7.34785 15.6775 7.85535 15.6775 8.16785 15.365C8.48035 15.0525 8.48035 14.545 8.16785 14.2325L5.93285 12L8.16785 9.76502C8.48035 9.45252 8.48035 8.94502 8.16785 8.63252Z", fill: "white" }) }), _jsx("defs", { children: _jsx("clipPath", { children: _jsx("rect", { width: "16", height: "12.8", fill: "white", transform: "translate(4 5.60001)" }) }) })] }) }), _jsxs(Stack, { children: [_jsx(StackItem, { children: _jsx("span", { className: "pf-chatbot__code-fileName", children: _jsx(Truncate, { className: fileNameClassName, content: path.parse(fileName).name }) }) }), language && (_jsx(StackItem, { "data-testid": languageTestId, className: "pf-chatbot__code-language", children: language }))] })] }));
 };
 export default FileDetails;

package/dist/esm/FileDetails/FileDetails.test.js

@@ -1,20 +1,20 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDetails from './FileDetails';
 describe('FileDetails', () => {
     it('should render file details', () => {
-        const { container } = render(React.createElement(FileDetails, { fileName: "test.txt" }));
+        const { container } = render(_jsx(FileDetails, { fileName: "test.txt" }));
         expect(container).toMatchSnapshot();
     });
     it('should render file details correctly if an extension we support is passed in', () => {
-        render(React.createElement(FileDetails, { fileName: "test.txt", languageTestId: "language" }));
+        render(_jsx(FileDetails, { fileName: "test.txt", languageTestId: "language" }));
         expect(screen.getByText('test')).toBeTruthy();
         expect(screen.getByText('TEXT')).toBeTruthy();
         expect(screen.getByTestId('language')).toBeTruthy();
     });
     it('should skip language if we do not support an extension', () => {
-        render(React.createElement(FileDetails, { fileName: "test.joke", languageTestId: "language" }));
+        render(_jsx(FileDetails, { fileName: "test.joke", languageTestId: "language" }));
         expect(screen.getByText('test')).toBeTruthy();
         expect(screen.queryByTestId('language')).toBeFalsy();
     });

package/dist/esm/FileDetailsLabel/FileDetailsLabel.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 interface FileDetailsLabelProps {
     /** Name of file, including extension */
     fileName: string;
@@ -17,5 +17,5 @@ interface FileDetailsLabelProps {
     /** Custom test id for the loading spinner in the component */
     spinnerTestId?: string;
 }
-export declare const FileDetailsLabel: ({ fileName, fileId, isLoading, onClick, onClose, closeButtonAriaLabel, languageTestId, spinnerTestId }: PropsWithChildren<FileDetailsLabelProps>) => React.JSX.Element;
+export declare const FileDetailsLabel: ({ fileName, fileId, isLoading, onClick, onClose, closeButtonAriaLabel, languageTestId, spinnerTestId }: PropsWithChildren<FileDetailsLabelProps>) => import("react/jsx-runtime").JSX.Element;
 export default FileDetailsLabel;

package/dist/esm/FileDetailsLabel/FileDetailsLabel.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Label } from '@patternfly/react-core';
 import FileDetails from '../FileDetails';
 import { Spinner } from '@patternfly/react-core';
@@ -7,9 +7,6 @@ export const FileDetailsLabel = ({ fileName, fileId, isLoading, onClick, onClose
     const handleClose = (event) => {
         onClose && onClose(event, fileName, fileId);
     };
-    return (React.createElement(Label, Object.assign({ className: "pf-chatbot__file-label" }, (onClose && { onClose: (event) => onClose(event, fileName, fileId) }), { closeBtn: React.createElement(Button, { type: "button", variant: "plain", "aria-label": closeButtonAriaLabel !== null && closeButtonAriaLabel !== void 0 ? closeButtonAriaLabel : `Close ${fileName}`, icon: React.createElement(TimesIcon, null), onClick: handleClose }) }, (onClick && { onClick: (event) => onClick(event, fileName, fileId) })),
-        React.createElement("div", { className: "pf-chatbot__file-label-contents" },
-            React.createElement(FileDetails, { className: isLoading ? 'pf-chatbot__file-label-loading' : undefined, fileName: fileName, languageTestId: languageTestId }),
-            isLoading && React.createElement(Spinner, { "data-testid": spinnerTestId, size: "sm" }))));
+    return (_jsx(Label, Object.assign({ className: "pf-chatbot__file-label" }, (onClose && { onClose: (event) => onClose(event, fileName, fileId) }), { closeBtn: _jsx(Button, { type: "button", variant: "plain", "aria-label": closeButtonAriaLabel !== null && closeButtonAriaLabel !== void 0 ? closeButtonAriaLabel : `Close ${fileName}`, icon: _jsx(TimesIcon, {}), onClick: handleClose }) }, (onClick && { onClick: (event) => onClick(event, fileName, fileId) }), { children: _jsxs("div", { className: "pf-chatbot__file-label-contents", children: [_jsx(FileDetails, { className: isLoading ? 'pf-chatbot__file-label-loading' : undefined, fileName: fileName, languageTestId: languageTestId }), isLoading && _jsx(Spinner, { "data-testid": spinnerTestId, size: "sm" })] }) })));
 };
 export default FileDetailsLabel;

package/dist/esm/FileDetailsLabel/FileDetailsLabel.test.js

@@ -7,50 +7,50 @@ 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 } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDetailsLabel from './FileDetailsLabel';
 import userEvent from '@testing-library/user-event';
 describe('FileDetailsLabel', () => {
     it('should render file details label', () => {
-        const { container } = render(React.createElement(FileDetailsLabel, { fileName: "test.txt" }));
+        const { container } = render(_jsx(FileDetailsLabel, { fileName: "test.txt" }));
         expect(container).toMatchSnapshot();
     });
     it('should render file details correctly if an extension we support is passed in', () => {
-        render(React.createElement(FileDetailsLabel, { fileName: "test.txt" }));
+        render(_jsx(FileDetailsLabel, { fileName: "test.txt" }));
         expect(screen.getByText('test')).toBeTruthy();
         expect(screen.getByText('TEXT')).toBeTruthy();
     });
     it('should skip language if we do not support an extension', () => {
-        render(React.createElement(FileDetailsLabel, { fileName: "test.joke", languageTestId: "language" }));
+        render(_jsx(FileDetailsLabel, { fileName: "test.joke", languageTestId: "language" }));
         expect(screen.getByText('test')).toBeTruthy();
         expect(screen.queryByTestId('language')).toBeFalsy();
     });
     it('should not show spinner by default', () => {
-        render(React.createElement(FileDetailsLabel, { fileName: "test.txt", spinnerTestId: "spinner" }));
+        render(_jsx(FileDetailsLabel, { fileName: "test.txt", spinnerTestId: "spinner" }));
         expect(screen.queryByTestId('spinner')).toBeFalsy();
     });
     it('should show spinner if loading', () => {
-        render(React.createElement(FileDetailsLabel, { fileName: "test.txt", isLoading: true, spinnerTestId: "spinner" }));
+        render(_jsx(FileDetailsLabel, { fileName: "test.txt", isLoading: true, spinnerTestId: "spinner" }));
         expect(screen.getByText('test')).toBeTruthy();
         expect(screen.getByText('TEXT')).toBeTruthy();
         expect(screen.queryByTestId('spinner')).toBeTruthy();
     });
     it('should call onClick prop', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(FileDetailsLabel, { fileName: "test.txt", onClick: spy }));
+        render(_jsx(FileDetailsLabel, { fileName: "test.txt", onClick: spy }));
         yield userEvent.click(screen.getByRole('button'));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should call onClose prop', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(FileDetailsLabel, { fileName: "test.txt", onClose: spy }));
+        render(_jsx(FileDetailsLabel, { fileName: "test.txt", onClose: spy }));
         yield userEvent.click(screen.getByRole('button', { name: /Close test.txt/i }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should use closeButtonAriaLabel prop appropriately', () => {
-        render(React.createElement(FileDetailsLabel, { fileName: "test.txt", onClose: jest.fn(), closeButtonAriaLabel: "Delete file" }));
+        render(_jsx(FileDetailsLabel, { fileName: "test.txt", onClose: jest.fn(), closeButtonAriaLabel: "Delete file" }));
         screen.getByRole('button', { name: /Delete file/i });
     });
 });

package/dist/esm/FileDropZone/FileDropZone.d.ts

@@ -1,6 +1,7 @@
 import { DropEvent } from '@patternfly/react-core';
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
+import { Accept, FileError, FileRejection } from 'react-dropzone/.';
 export interface FileDropZoneProps {
     /** Content displayed when the drop zone is not currently in use */
     children?: React.ReactNode;
@@ -10,8 +11,28 @@ export interface FileDropZoneProps {
     infoText?: string;
     /** When files are dropped or uploaded this callback will be called with all accepted files */
     onFileDrop: (event: DropEvent, data: File[]) => void;
+    /** Specifies the file types accepted by the attachment upload component.
+     *  Files that don't match the accepted types will be disabled in the file picker.
+     *  For example,
+     *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+     **/
+    allowedFileTypes?: Accept;
     /** Display mode for the Chatbot parent; this influences the styles applied */
     displayMode?: ChatbotDisplayMode;
+    /** Minimum file size allowed */
+    minSize?: number;
+    /** Max file size allowed */
+    maxSize?: number;
+    /** Max number of files allowed */
+    maxFiles?: number;
+    /** Whether attachments are disabled */
+    isAttachmentDisabled?: boolean;
+    /** Callback when file(s) are attached */
+    onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Callback function for AttachButton when an attachment fails */
+    onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+    validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
 }
-declare const FileDropZone: React.FunctionComponent<FileDropZoneProps>;
+declare const FileDropZone: FunctionComponent<FileDropZoneProps>;
 export default FileDropZone;

package/dist/esm/FileDropZone/FileDropZone.js

@@ -9,15 +9,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
-import React from 'react';
+import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 import { UploadIcon } from '@patternfly/react-icons';
 const FileDropZone = (_a) => {
-    var { children, className, infoText = 'Maximum file size is 25 MB', onFileDrop, displayMode = ChatbotDisplayMode.default } = _a, props = __rest(_a, ["children", "className", "infoText", "onFileDrop", "displayMode"]);
-    const [showDropZone, setShowDropZone] = React.useState(false);
-    const renderDropZone = () => (React.createElement(React.Fragment, null,
-        React.createElement(MultipleFileUploadMain, { titleIcon: React.createElement(UploadIcon, null), titleText: "Drag and drop your file here", infoText: infoText, isUploadButtonHidden: true })));
-    return (React.createElement(MultipleFileUpload, { dropzoneProps: Object.assign({ onDrop: () => setShowDropZone(false) }, props), onDragEnter: () => setShowDropZone(true), onDragLeave: () => setShowDropZone(false), onFileDrop: onFileDrop, className: `pf-chatbot__dropzone pf-chatbot__dropzone--${displayMode} pf-chatbot__dropzone--${showDropZone ? 'visible' : 'invisible'} ${className ? className : ''}` }, showDropZone ? renderDropZone() : children));
+    var { children, className, infoText = 'Maximum file size is 25 MB', onFileDrop, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, displayMode = ChatbotDisplayMode.default } = _a, props = __rest(_a, ["children", "className", "infoText", "onFileDrop", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "displayMode"]);
+    const [showDropZone, setShowDropZone] = useState(false);
+    const renderDropZone = () => (_jsx(_Fragment, { children: _jsx(MultipleFileUploadMain, { titleIcon: _jsx(UploadIcon, {}), titleText: "Drag and drop your file here", infoText: infoText, isUploadButtonHidden: true }) }));
+    return (_jsx(MultipleFileUpload, { dropzoneProps: Object.assign({ accept: allowedFileTypes, onDrop: (acceptedFiles, fileRejections, event) => {
+                setShowDropZone(false);
+                onAttach && onAttach(acceptedFiles, fileRejections, event);
+            }, minSize,
+            maxSize,
+            maxFiles, disabled: isAttachmentDisabled, onDropRejected: onAttachRejected, validator }, props), onDragEnter: () => setShowDropZone(true), onDragLeave: () => setShowDropZone(false), onFileDrop: onFileDrop, className: `pf-chatbot__dropzone pf-chatbot__dropzone--${displayMode} pf-chatbot__dropzone--${showDropZone ? 'visible' : 'invisible'} ${className ? className : ''}`, children: showDropZone ? renderDropZone() : children }));
 };
 export default FileDropZone;