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

package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.js

@@ -10,31 +10,17 @@ 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.ChatbotWelcomePrompt = void 0;
-// ============================================================================
-// Chatbot Layout - Chat - Welcome
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotWelcomePrompt = (_a) => {
-    var { title, description, prompts, className, testId } = _a, props = __rest(_a, ["title", "description", "prompts", "className", "testId"]);
-    return (react_1.default.createElement("div", Object.assign({ "data-testid": testId, className: `pf-chatbot--layout--welcome ${className !== null && className !== void 0 ? className : ''}` }, props),
-        react_1.default.createElement(react_core_1.Content, { component: react_core_1.ContentVariants.h1 },
-            react_1.default.createElement("span", { className: "pf-chatbot__hello" }, title),
-            react_1.default.createElement("br", null),
-            react_1.default.createElement("span", { className: "pf-chatbot__question" }, description)),
-        prompts && (react_1.default.createElement("div", { className: "pf-chatbot__prompt-suggestions" }, prompts === null || prompts === void 0 ? void 0 : prompts.map((prompt, index) => (react_1.default.createElement(react_core_1.Card, { key: `welcome-prompt-${index}`, className: "pf-chatbot__prompt-suggestion", isClickable: true },
-            react_1.default.createElement(react_core_1.CardHeader, { selectableActions: {
-                    onClickAction: prompt.onClick,
-                    selectableActionId: `welcome-prompt-input-${index}`,
-                    selectableActionAriaLabelledby: `welcome-prompt-title-${index}`
-                } },
-                react_1.default.createElement(react_core_1.CardTitle, { id: `welcome-prompt-title-${index}` }, prompt.title)),
-            prompt.message && react_1.default.createElement(react_core_1.CardBody, null, prompt.message))))))));
+    var { title, description, prompts, className, testId, isCompact = false } = _a, props = __rest(_a, ["title", "description", "prompts", "className", "testId", "isCompact"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-testid": testId, className: `pf-chatbot--layout--welcome ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Content, { component: react_core_1.ContentVariants.h1, children: [(0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__hello", children: title }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__question", children: description })] }), prompts && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__prompt-suggestions", children: prompts === null || prompts === void 0 ? void 0 : prompts.map((prompt, index) => ((0, jsx_runtime_1.jsxs)(react_core_1.Card, { className: "pf-chatbot__prompt-suggestion", isClickable: true, isCompact: isCompact, children: [(0, jsx_runtime_1.jsx)(react_core_1.CardHeader, { selectableActions: {
+                                onClickAction: prompt.onClick,
+                                selectableActionId: `welcome-prompt-input-${index}`,
+                                selectableActionAriaLabelledby: `welcome-prompt-title-${index}`
+                            }, children: (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { id: `welcome-prompt-title-${index}`, children: prompt.title }) }), prompt.message && (0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: prompt.message })] }, `welcome-prompt-${index}`))) }))] })));
 };
 exports.ChatbotWelcomePrompt = ChatbotWelcomePrompt;
 exports.default = exports.ChatbotWelcomePrompt;

package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js

@@ -12,46 +12,50 @@ 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 ChatbotWelcomePrompt_1 = __importDefault(require("./ChatbotWelcomePrompt"));
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('ChatbotWelcomePrompt', () => {
     it('should render welcome prompt', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
         expect(container).toMatchSnapshot();
     });
     it('should render correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
-        expect(react_2.screen.getByText('Hi, ChatBot User!')).toBeTruthy();
-        expect(react_2.screen.getByText('How can I help you today?')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
+        expect(react_1.screen.getByText('Hi, ChatBot User!')).toBeTruthy();
+        expect(react_1.screen.getByText('How can I help you today?')).toBeTruthy();
     });
     it('should render prompts with titles correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [{ title: 'Set up account' }] }));
-        expect(react_2.screen.getByText('Set up account')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [{ title: 'Set up account' }] }));
+        expect(react_1.screen.getByText('Set up account')).toBeTruthy();
     });
     it('should render prompts with messages correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { 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(react_2.screen.getByText('Choose the necessary settings and preferences for your account.')).toBeTruthy();
+        expect(react_1.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();
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { 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.',
                     onClick: spy
                 }
             ] }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Set up account/i }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Set up account/i }));
         expect(spy).toHaveBeenCalled();
     }));
     it('should apply className appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt" }));
-        const element = react_2.screen.getByTestId('welcome-prompt');
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt" }));
+        const element = react_1.screen.getByTestId('welcome-prompt');
         expect(element).toHaveClass('test');
     });
+    it('should handle isCompact', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt", isCompact: true }));
+        expect(react_1.screen.getByTestId('welcome-prompt')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/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 */
@@ -29,6 +29,14 @@ export interface CodeModalProps {
     title: string;
     /** Display mode for the Chatbot parent; this influences the styles applied */
     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/cjs/CodeModal/CodeModal.js

@@ -38,10 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeModal = void 0;
-// ============================================================================
-// Code Modal - Chatbot Modal with Code Editor
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const path_browserify_1 = __importDefault(require("path-browserify"));
 // Import PatternFly components
 const react_code_editor_1 = require("@patternfly/react-code-editor");
@@ -50,8 +48,8 @@ const FileDetails_1 = __importStar(require("../FileDetails"));
 const Chatbot_1 = require("../Chatbot");
 const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
 const CodeModal = (_a) => {
-    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = Chatbot_1.ChatbotDisplayMode.default } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode"]);
-    const [newCode, setNewCode] = react_1.default.useState(code);
+    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = Chatbot_1.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] = (0, react_1.useState)(code);
     const handlePrimaryAction = (_event) => {
         handleModalToggle(_event);
         if (!isReadOnly) {
@@ -75,20 +73,10 @@ const CodeModal = (_a) => {
             setNewCode(value);
         }
     };
-    const modal = (react_1.default.createElement(ChatbotModal_1.default, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode },
-        react_1.default.createElement(react_core_1.ModalHeader, { title: title, labelId: "code-modal-title" }),
-        react_1.default.createElement(react_core_1.ModalBody, { id: "code-modal-body" },
-            react_1.default.createElement(react_core_1.Stack, { className: "pf-chatbot__code-modal-body" },
-                react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-file-details" },
-                    react_1.default.createElement(FileDetails_1.default, { fileName: fileName })),
-                react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-body" },
-                    react_1.default.createElement(react_code_editor_1.CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: FileDetails_1.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
-                            glyphMargin: false,
-                            folding: false
-                        } }, props))))),
-        react_1.default.createElement(react_core_1.ModalFooter, null,
-            react_1.default.createElement(react_core_1.Button, { isBlock: true, key: "code-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form" }, primaryActionBtn),
-            react_1.default.createElement(react_core_1.Button, { isBlock: true, key: "code-modal-secondary", variant: "link", onClick: handleSecondaryAction }, secondaryActionBtn))));
+    const modal = ((0, jsx_runtime_1.jsxs)(ChatbotModal_1.default, { 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: [(0, jsx_runtime_1.jsx)(react_core_1.ModalHeader, { className: modalHeaderClassName, title: title, labelId: "code-modal-title" }), (0, jsx_runtime_1.jsx)(react_core_1.ModalBody, { className: modalBodyClassName, id: "code-modal-body", children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { className: "pf-chatbot__code-modal-body", children: [(0, jsx_runtime_1.jsx)(react_core_1.StackItem, { className: "pf-chatbot__code-modal-file-details", children: (0, jsx_runtime_1.jsx)(FileDetails_1.default, { fileName: fileName }) }), (0, jsx_runtime_1.jsx)(react_core_1.StackItem, { className: "pf-chatbot__code-modal-editor", children: (0, jsx_runtime_1.jsx)(react_code_editor_1.CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: FileDetails_1.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
+                                    glyphMargin: false,
+                                    folding: false
+                                } }, props)) })] }) }), (0, jsx_runtime_1.jsxs)(react_core_1.ModalFooter, { className: modalFooterClassName, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form", children: primaryActionBtn }, "code-modal-primary"), (0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "link", onClick: handleSecondaryAction, children: secondaryActionBtn }, "code-modal-secondary")] })] }));
     return modal;
 };
 exports.CodeModal = CodeModal;

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/CodeModal/CodeModal.test.js

@@ -0,0 +1,34 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const CodeModal_1 = __importDefault(require("./CodeModal"));
+describe('ChatbotModal', () => {
+    it('should render compact modal', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeModal_1.default, { 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(react_1.screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+    });
+    it('should render CodeModal with custom classNames', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeModal_1.default, { 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 = 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/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/cjs/Compare/Compare.js

@@ -1,16 +1,14 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Compare = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
-    const [isSelected, setIsSelected] = react_1.default.useState('toggle-group-chatbot-1');
-    const [showFirstChatbot, setShowFirstChatbot] = react_1.default.useState(true);
-    const [showSecondChatbot, setShowSecondChatbot] = react_1.default.useState(false);
-    react_1.default.useEffect(() => {
+    const [isSelected, setIsSelected] = (0, react_1.useState)('toggle-group-chatbot-1');
+    const [showFirstChatbot, setShowFirstChatbot] = (0, react_1.useState)(true);
+    const [showSecondChatbot, setShowSecondChatbot] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         // we want to show the first if we switch to the mobile toggle view
         // and reset/switch back to normal otherwise
         const updateChatbotVisibility = () => {
@@ -37,14 +35,7 @@ const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDi
         setShowFirstChatbot(!showFirstChatbot);
         onToggleClick && onToggleClick(event);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
-            react_1.default.createElement(react_core_1.ToggleGroup, { "aria-label": toggleGroupAriaLabel },
-                react_1.default.createElement(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
-                react_1.default.createElement(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
-        react_1.default.createElement("div", { className: "pf-chatbot__compare" },
-            react_1.default.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
-            react_1.default.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__compare-mobile-controls", children: (0, jsx_runtime_1.jsxs)(react_core_1.ToggleGroup, { "aria-label": toggleGroupAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }), (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__compare", children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`, children: firstChild }), (0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`, children: secondChild })] })] }));
 };
 exports.Compare = Compare;
 exports.default = exports.Compare;

package/dist/cjs/Compare/Compare.test.js

@@ -3,18 +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");
 require("@testing-library/jest-dom");
 const Compare_1 = __importDefault(require("./Compare"));
-const firstChild = (react_1.default.createElement("div", null,
-    react_1.default.createElement("h1", null, "Child 1")));
-const secondChild = (react_1.default.createElement("div", null,
-    react_1.default.createElement("h1", null, "Child 2")));
+const firstChild = ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { children: "Child 1" }) }));
+const secondChild = ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { children: "Child 2" }) }));
 describe('Compare', () => {
     it('should render compare correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Compare_1.default, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
-        expect(react_2.screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Compare_1.default, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
+        expect(react_1.screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
     });
 });

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

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileDetails = exports.extensionToLanguage = 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 path_browserify_1 = __importDefault(require("path-browserify"));
 // source https://gist.github.com/ppisarczyk/43962d06686722d26d176fad46879d41
@@ -935,20 +935,7 @@ exports.extensionToLanguage = {
 const FileDetails = ({ className, fileName, fileNameClassName, languageTestId }) => {
     var _a;
     const language = (_a = exports.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)]) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-    return (react_1.default.createElement(react_core_1.Flex, { className: `pf-chatbot__file-details ${className}`, gap: { default: 'gapSm' } },
-        react_1.default.createElement(react_core_1.Flex, { className: "pf-chatbot__code-icon", justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' } },
-            react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
-                react_1.default.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_1.default.createElement("g", { clipPath: "url(#clip0_3280_27505)" },
-                    react_1.default.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_1.default.createElement("defs", null,
-                    react_1.default.createElement("clipPath", null,
-                        react_1.default.createElement("rect", { width: "16", height: "12.8", fill: "white", transform: "translate(4 5.60001)" }))))),
-        react_1.default.createElement(react_core_1.Stack, null,
-            react_1.default.createElement(react_core_1.StackItem, null,
-                react_1.default.createElement("span", { className: "pf-chatbot__code-fileName" },
-                    react_1.default.createElement(react_core_1.Truncate, { className: fileNameClassName, content: path_browserify_1.default.parse(fileName).name }))),
-            language && (react_1.default.createElement(react_core_1.StackItem, { "data-testid": languageTestId, className: "pf-chatbot__code-language" }, language)))));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, { className: `pf-chatbot__file-details ${className ? className : ''}`, gap: { default: 'gapSm' }, children: [(0, jsx_runtime_1.jsx)(react_core_1.Flex, { className: "pf-chatbot__code-icon", justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_3280_27505)", children: (0, jsx_runtime_1.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" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { children: (0, jsx_runtime_1.jsx)("rect", { width: "16", height: "12.8", fill: "white", transform: "translate(4 5.60001)" }) }) })] }) }), (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__code-fileName", children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { className: fileNameClassName, content: path_browserify_1.default.parse(fileName).name }) }) }), language && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { "data-testid": languageTestId, className: "pf-chatbot__code-language", children: language }))] })] }));
 };
 exports.FileDetails = FileDetails;
 exports.default = exports.FileDetails;

package/dist/cjs/FileDetails/FileDetails.test.js

@@ -3,24 +3,24 @@ 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 FileDetails_1 = __importDefault(require("./FileDetails"));
 describe('FileDetails', () => {
     it('should render file details', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(FileDetails_1.default, { fileName: "test.txt" }));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDetails_1.default, { fileName: "test.txt" }));
         expect(container).toMatchSnapshot();
     });
     it('should render file details correctly if an extension we support is passed in', () => {
-        (0, react_2.render)(react_1.default.createElement(FileDetails_1.default, { fileName: "test.txt", languageTestId: "language" }));
-        expect(react_2.screen.getByText('test')).toBeTruthy();
-        expect(react_2.screen.getByText('TEXT')).toBeTruthy();
-        expect(react_2.screen.getByTestId('language')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDetails_1.default, { fileName: "test.txt", languageTestId: "language" }));
+        expect(react_1.screen.getByText('test')).toBeTruthy();
+        expect(react_1.screen.getByText('TEXT')).toBeTruthy();
+        expect(react_1.screen.getByTestId('language')).toBeTruthy();
     });
     it('should skip language if we do not support an extension', () => {
-        (0, react_2.render)(react_1.default.createElement(FileDetails_1.default, { fileName: "test.joke", languageTestId: "language" }));
-        expect(react_2.screen.getByText('test')).toBeTruthy();
-        expect(react_2.screen.queryByTestId('language')).toBeFalsy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDetails_1.default, { fileName: "test.joke", languageTestId: "language" }));
+        expect(react_1.screen.getByText('test')).toBeTruthy();
+        expect(react_1.screen.queryByTestId('language')).toBeFalsy();
     });
 });

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

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileDetailsLabel = 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 FileDetails_1 = __importDefault(require("../FileDetails"));
 const react_core_2 = require("@patternfly/react-core");
@@ -13,10 +13,7 @@ const FileDetailsLabel = ({ fileName, fileId, isLoading, onClick, onClose, close
     const handleClose = (event) => {
         onClose && onClose(event, fileName, fileId);
     };
-    return (react_1.default.createElement(react_core_1.Label, Object.assign({ className: "pf-chatbot__file-label" }, (onClose && { onClose: (event) => onClose(event, fileName, fileId) }), { closeBtn: react_1.default.createElement(react_core_1.Button, { type: "button", variant: "plain", "aria-label": closeButtonAriaLabel !== null && closeButtonAriaLabel !== void 0 ? closeButtonAriaLabel : `Close ${fileName}`, icon: react_1.default.createElement(react_icons_1.TimesIcon, null), onClick: handleClose }) }, (onClick && { onClick: (event) => onClick(event, fileName, fileId) })),
-        react_1.default.createElement("div", { className: "pf-chatbot__file-label-contents" },
-            react_1.default.createElement(FileDetails_1.default, { className: isLoading ? 'pf-chatbot__file-label-loading' : undefined, fileName: fileName, languageTestId: languageTestId }),
-            isLoading && react_1.default.createElement(react_core_2.Spinner, { "data-testid": spinnerTestId, size: "sm" }))));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Label, Object.assign({ className: "pf-chatbot__file-label" }, (onClose && { onClose: (event) => onClose(event, fileName, fileId) }), { closeBtn: (0, jsx_runtime_1.jsx)(react_core_1.Button, { type: "button", variant: "plain", "aria-label": closeButtonAriaLabel !== null && closeButtonAriaLabel !== void 0 ? closeButtonAriaLabel : `Close ${fileName}`, icon: (0, jsx_runtime_1.jsx)(react_icons_1.TimesIcon, {}), onClick: handleClose }) }, (onClick && { onClick: (event) => onClick(event, fileName, fileId) }), { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__file-label-contents", children: [(0, jsx_runtime_1.jsx)(FileDetails_1.default, { className: isLoading ? 'pf-chatbot__file-label-loading' : undefined, fileName: fileName, languageTestId: languageTestId }), isLoading && (0, jsx_runtime_1.jsx)(react_core_2.Spinner, { "data-testid": spinnerTestId, size: "sm" })] }) })));
 };
 exports.FileDetailsLabel = FileDetailsLabel;
 exports.default = exports.FileDetailsLabel;

package/dist/cjs/FileDetailsLabel/FileDetailsLabel.test.js

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

package/dist/cjs/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 } from 'react-dropzone/.';
 export interface FileDropZoneProps {
     /** Content displayed when the drop zone is not currently in use */
     children?: React.ReactNode;
@@ -10,8 +11,14 @@ 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;
 }
-declare const FileDropZone: React.FunctionComponent<FileDropZoneProps>;
+declare const FileDropZone: FunctionComponent<FileDropZoneProps>;
 export default FileDropZone;

package/dist/cjs/FileDropZone/FileDropZone.js

@@ -10,19 +10,16 @@ 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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
-const react_1 = __importDefault(require("react"));
+const react_1 = require("react");
 const Chatbot_1 = require("../Chatbot");
 const react_icons_1 = require("@patternfly/react-icons");
 const FileDropZone = (_a) => {
-    var { children, className, infoText = 'Maximum file size is 25 MB', onFileDrop, displayMode = Chatbot_1.ChatbotDisplayMode.default } = _a, props = __rest(_a, ["children", "className", "infoText", "onFileDrop", "displayMode"]);
-    const [showDropZone, setShowDropZone] = react_1.default.useState(false);
-    const renderDropZone = () => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_core_1.MultipleFileUploadMain, { titleIcon: react_1.default.createElement(react_icons_1.UploadIcon, null), titleText: "Drag and drop your file here", infoText: infoText, isUploadButtonHidden: true })));
-    return (react_1.default.createElement(react_core_1.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, displayMode = Chatbot_1.ChatbotDisplayMode.default } = _a, props = __rest(_a, ["children", "className", "infoText", "onFileDrop", "allowedFileTypes", "displayMode"]);
+    const [showDropZone, setShowDropZone] = (0, react_1.useState)(false);
+    const renderDropZone = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.MultipleFileUploadMain, { titleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.UploadIcon, {}), titleText: "Drag and drop your file here", infoText: infoText, isUploadButtonHidden: true }) }));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.MultipleFileUpload, { dropzoneProps: Object.assign({ accept: allowedFileTypes, 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 : ''}`, children: showDropZone ? renderDropZone() : children }));
 };
 exports.default = FileDropZone;