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

package/dist/cjs/MessageBar/MessageBar.js

@@ -15,7 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageBar = 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");
 // Import Chatbot components
 const SendButton_1 = __importDefault(require("./SendButton"));
@@ -27,11 +28,11 @@ const MessageBar = (_a) => {
     var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact"]);
     // Text Input
     // --------------------------------------------------------------------------
-    const [message, setMessage] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
-    const [isListeningMessage, setIsListeningMessage] = react_1.default.useState(false);
-    const [hasSentMessage, setHasSentMessage] = react_1.default.useState(false);
-    const textareaRef = react_1.default.useRef(null);
-    const attachButtonRef = react_1.default.useRef(null);
+    const [message, setMessage] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
+    const [isListeningMessage, setIsListeningMessage] = (0, react_1.useState)(false);
+    const [hasSentMessage, setHasSentMessage] = (0, react_1.useState)(false);
+    const textareaRef = (0, react_1.useRef)(null);
+    const attachButtonRef = (0, react_1.useRef)(null);
     const topMargin = '1rem';
     const setInitialLineHeight = (field) => {
         field.style.setProperty('line-height', '1rem');
@@ -69,7 +70,7 @@ const MessageBar = (_a) => {
         const lines = field.scrollHeight / lineHeight;
         return lines > 2;
     };
-    const setAutoWidth = react_1.default.useCallback((field) => {
+    const setAutoWidth = (0, react_1.useCallback)((field) => {
         const parent = field.parentElement;
         if (parent) {
             const grandparent = parent.parentElement;
@@ -85,7 +86,7 @@ const MessageBar = (_a) => {
             parent.style.setProperty('margin-top', topMargin);
         }
     };
-    react_1.default.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const field = textareaRef.current;
         if (field) {
             if (field.value === '') {
@@ -116,26 +117,26 @@ const MessageBar = (_a) => {
             window.removeEventListener('resize', resetHeight);
         };
     }, [setAutoWidth]);
-    react_1.default.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const field = textareaRef.current;
         if (field) {
             if (field.value === '') {
-                setInitialLineHeight(textareaRef.current);
+                setInitialLineHeight(field);
             }
             else {
-                setAutoHeight(textareaRef.current);
+                setAutoHeight(field);
                 setAutoWidth(field);
             }
         }
     }, [displayMode, message, setAutoWidth]);
-    react_1.default.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const field = textareaRef.current;
         if (field) {
             setInitialLineHeight(field);
             setHasSentMessage(false);
         }
     }, [hasSentMessage]);
-    const handleChange = react_1.default.useCallback((event) => {
+    const handleChange = (0, react_1.useCallback)((event) => {
         onChange && onChange(event, event.target.value);
         if (textareaRef.current) {
             if (event.target.value === '') {
@@ -148,12 +149,12 @@ const MessageBar = (_a) => {
         setMessage(event.target.value);
     }, [onChange]);
     // Handle sending message
-    const handleSend = react_1.default.useCallback((newMessage) => {
+    const handleSend = (0, react_1.useCallback)((newMessage) => {
         onSendMessage(newMessage);
         setHasSentMessage(true);
         setMessage('');
     }, [onSendMessage]);
-    const handleKeyDown = react_1.default.useCallback((event) => {
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
             if (!isSendButtonDisabled && !hasStopButton) {
@@ -177,27 +178,20 @@ const MessageBar = (_a) => {
     const renderButtons = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         if (hasStopButton && handleStopButton) {
-            return (react_1.default.createElement(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent, isCompact: isCompact, tooltipProps: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.tooltipProps }, (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _c === void 0 ? void 0 : _c.props)));
+            return ((0, jsx_runtime_1.jsx)(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent, isCompact: isCompact, tooltipProps: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.tooltipProps }, (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _c === void 0 ? void 0 : _c.props)));
         }
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            attachMenuProps && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.tooltipContent, isCompact: isCompact, tooltipProps: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipProps }, (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.props))),
-            !attachMenuProps && hasAttachButton && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.tooltipContent, inputTestId: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.inputTestId, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.tooltipProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _k === void 0 ? void 0 : _k.props))),
-            hasMicrophoneButton && (react_1.default.createElement(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.tooltipContent, language: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.language, isCompact: isCompact, tooltipProps: (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.tooltipProps }, (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _p === void 0 ? void 0 : _p.props))),
-            (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipContent, isCompact: isCompact, tooltipProps: (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.tooltipProps }, (_s = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _s === void 0 ? void 0 : _s.props)))));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [attachMenuProps && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.tooltipContent, isCompact: isCompact, tooltipProps: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipProps }, (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.props))), !attachMenuProps && hasAttachButton && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.tooltipContent, inputTestId: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.inputTestId, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.tooltipProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _k === void 0 ? void 0 : _k.props))), hasMicrophoneButton && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.tooltipContent, language: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.language, isCompact: isCompact, tooltipProps: (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.tooltipProps }, (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _p === void 0 ? void 0 : _p.props))), (alwayShowSendButton || message) && ((0, jsx_runtime_1.jsx)(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipContent, isCompact: isCompact, tooltipProps: (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.tooltipProps }, (_s = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _s === void 0 ? void 0 : _s.props)))] }));
     };
-    const messageBarContents = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}` },
-            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props))),
-        react_1.default.createElement("div", { className: "pf-chatbot__message-bar-actions" }, renderButtons())));
+    const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props)) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
     if (attachMenuProps) {
-        return (react_1.default.createElement(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => (react_1.default.createElement("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents)), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
+        return ((0, jsx_runtime_1.jsx)(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => ((0, jsx_runtime_1.jsx)("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
                 var _a;
                 (_a = attachButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(isAttachMenuOpen);
                 (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange(isAttachMenuOpen));
             }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: '8' }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder })));
     }
-    return react_1.default.createElement("div", { className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents);
+    return (0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents });
 };
 exports.MessageBar = MessageBar;
 exports.default = exports.MessageBar;

package/dist/cjs/MessageBar/MessageBar.test.js

@@ -12,31 +12,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
 require("@testing-library/jest-dom");
-const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
-const react_2 = require("@testing-library/react");
+const react_1 = require("@testing-library/react");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const SourceDetailsMenuItem_1 = __importDefault(require("../SourceDetailsMenuItem"));
 const MessageBar_1 = require("./MessageBar");
 const ATTACH_MENU_ITEMS = [
-    react_1.default.createElement(react_core_1.DropdownList, { key: "list-1" },
-        react_1.default.createElement(react_core_1.DropdownItem, { className: "pf-chatbot-source-details-dropdown-item", value: "auth-operator Pod", id: "0" },
-            react_1.default.createElement(SourceDetailsMenuItem_1.default, { icon: react_1.default.createElement("svg", { width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    react_1.default.createElement("path", { d: "M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z", fill: "currentColor" }),
-                    react_1.default.createElement("g", { clipPath: "url(#clip0_3280_27488)" },
-                        react_1.default.createElement("path", { d: "M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z", fill: "white" })),
-                    react_1.default.createElement("defs", null,
-                        react_1.default.createElement("clipPath", { id: "clip0_3280_27488" },
-                            react_1.default.createElement("rect", { width: "7.5", height: "12", fill: "white", transform: "translate(8.25 6.5)" })))), name: "auth-operator", type: "Pod" }))),
-    react_1.default.createElement(react_core_1.DropdownGroup, { key: "group2" },
-        react_1.default.createElement(react_core_1.DropdownList, null,
-            react_1.default.createElement(react_core_1.DropdownItem, { value: "Alerts", id: "1", icon: react_1.default.createElement(react_icons_1.BellIcon, null) }, "Alerts"),
-            react_1.default.createElement(react_core_1.DropdownItem, { value: "Events", id: "2", icon: react_1.default.createElement(react_icons_1.CalendarAltIcon, null) }, "Events"),
-            react_1.default.createElement(react_core_1.DropdownItem, { value: "Logs", id: "3", icon: react_1.default.createElement(react_icons_1.ClipboardIcon, null) }, "Logs"),
-            react_1.default.createElement(react_core_1.DropdownItem, { value: "YAML - Status", id: "4", icon: react_1.default.createElement(react_icons_1.CodeIcon, null) }, "YAML - Status"),
-            react_1.default.createElement(react_core_1.DropdownItem, { value: "YAML - All contents", id: "5", icon: react_1.default.createElement(react_icons_1.CodeIcon, null) }, "YAML - All contents")))
+    (0, jsx_runtime_1.jsx)(react_core_1.DropdownList, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { className: "pf-chatbot-source-details-dropdown-item", value: "auth-operator Pod", id: "0", children: (0, jsx_runtime_1.jsx)(SourceDetailsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_3280_27488)", children: (0, jsx_runtime_1.jsx)("path", { d: "M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z", fill: "white" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_3280_27488", children: (0, jsx_runtime_1.jsx)("rect", { width: "7.5", height: "12", fill: "white", transform: "translate(8.25 6.5)" }) }) })] }), name: "auth-operator", type: "Pod" }) }) }, "list-1"),
+    (0, jsx_runtime_1.jsx)(react_core_1.DropdownGroup, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DropdownList, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Alerts", id: "1", icon: (0, jsx_runtime_1.jsx)(react_icons_1.BellIcon, {}), children: "Alerts" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Events", id: "2", icon: (0, jsx_runtime_1.jsx)(react_icons_1.CalendarAltIcon, {}), children: "Events" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Logs", id: "3", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ClipboardIcon, {}), children: "Logs" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "YAML - Status", id: "4", icon: (0, jsx_runtime_1.jsx)(react_icons_1.CodeIcon, {}), children: "YAML - Status" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "YAML - All contents", id: "5", icon: (0, jsx_runtime_1.jsx)(react_icons_1.CodeIcon, {}), children: "YAML - All contents" })] }) }, "group2")
 ];
 const originalSpeechRecognition = window.SpeechRecognition;
 const mockSpeechRecognition = () => {
@@ -52,16 +38,16 @@ describe('Message bar', () => {
         window.SpeechRecognition = originalSpeechRecognition;
     });
     it('should render correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
-        expect(react_2.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
-        expect(react_2.screen.queryByRole('button', { name: 'Send' })).toBeFalsy();
-        expect(react_2.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
-        expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        expect(react_1.screen.queryByRole('button', { name: 'Send' })).toBeFalsy();
+        expect(react_1.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
+        expect(react_1.screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
     });
     it('can send via enter key', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: spy }));
-        const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: spy }));
+        const input = react_1.screen.getByRole('textbox', { name: /Send a message.../i });
         yield user_event_1.default.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
         yield user_event_1.default.type(input, '[Enter]');
@@ -69,210 +55,210 @@ describe('Message bar', () => {
     }));
     it('calls onChange callback appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, onChange: spy }));
-        const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, onChange: spy }));
+        const input = react_1.screen.getByRole('textbox', { name: /Send a message.../i });
         yield user_event_1.default.type(input, 'A');
         expect(input).toHaveTextContent('A');
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
     }));
     it('can use specified placeholder text', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, placeholder: "test placeholder" }));
-        const input = react_2.screen.getByRole('textbox', { name: /test placeholder/i });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, placeholder: "test placeholder" }));
+        const input = react_1.screen.getByRole('textbox', { name: /test placeholder/i });
         yield user_event_1.default.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
     }));
     // Send button
     // --------------------------------------------------------------------------
     it('shows send button when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
-        const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
+        const input = react_1.screen.getByRole('textbox', { name: /Send a message.../i });
         yield user_event_1.default.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
-        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
     }));
     it('can disable send button shown when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, isSendButtonDisabled: true }));
-        const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, isSendButtonDisabled: true }));
+        const input = react_1.screen.getByRole('textbox', { name: /Send a message.../i });
         yield user_event_1.default.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
-        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeDisabled();
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeDisabled();
     }));
     it('can click send button', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: spy }));
-        const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: spy }));
+        const input = react_1.screen.getByRole('textbox', { name: /Send a message.../i });
         yield user_event_1.default.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
-        const sendButton = react_2.screen.getByRole('button', { name: 'Send' });
+        const sendButton = react_1.screen.getByRole('button', { name: 'Send' });
         expect(sendButton).toBeTruthy();
         yield user_event_1.default.click(sendButton);
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('can always show send button', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeEnabled();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeEnabled();
     });
     it('can disable send button if always showing', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, isSendButtonDisabled: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeDisabled();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, isSendButtonDisabled: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeDisabled();
     });
     it('can handle buttonProps tooltipContent  appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipContent: 'Test' } } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipContent: 'Test' } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Send' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('can handle buttonProps tooltipProps  appropriately for send', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipProps: { isVisible: true } } } }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipProps: { isVisible: true } } } }));
         // isVisible, so no need for click
-        expect(react_2.screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
+        expect(react_1.screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
     });
     it('can handle buttonProps props appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { props: { 'aria-label': 'Test' } } } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Test' }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Test' }));
     }));
     // Attach button
     // --------------------------------------------------------------------------
     it('can show attach menu', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
                 isAttachMenuOpen: true,
                 setIsAttachMenuOpen: jest.fn(),
                 onAttachMenuToggleClick: jest.fn(),
                 onAttachMenuInputChange: jest.fn(),
                 attachMenuItems: ATTACH_MENU_ITEMS
             } }));
-        expect(react_2.screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('menuitem', { name: /auth-operator/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('menuitem', { name: /Alerts/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('menuitem', { name: /Events/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('menuitem', { name: /Logs/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('menuitem', { name: /YAML - Status/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('menuitem', { name: /YAML - All contents/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /auth-operator/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /Alerts/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /Events/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /Logs/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /YAML - Status/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /YAML - All contents/i })).toBeTruthy();
     }));
     it('can toggle attach menu', () => __awaiter(void 0, void 0, void 0, function* () {
         const attachToggleClickSpy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
                 isAttachMenuOpen: false,
                 setIsAttachMenuOpen: jest.fn(),
                 onAttachMenuToggleClick: attachToggleClickSpy,
                 onAttachMenuInputChange: jest.fn(),
                 attachMenuItems: ATTACH_MENU_ITEMS
             } }));
-        expect(react_2.screen.queryByRole('textbox', { name: /Filter menu items/i })).toBeFalsy();
-        expect(react_2.screen.queryByRole('menuitem', { name: /auth-operator/i })).toBeFalsy();
-        expect(react_2.screen.queryByRole('menuitem', { name: /Alerts/i })).toBeFalsy();
-        expect(react_2.screen.queryByRole('menuitem', { name: /Events/i })).toBeFalsy();
-        expect(react_2.screen.queryByRole('menuitem', { name: /Logs/i })).toBeFalsy();
-        expect(react_2.screen.queryByRole('menuitem', { name: /YAML - Status/i })).toBeFalsy();
-        expect(react_2.screen.queryByRole('menuitem', { name: /YAML - All contents/i })).toBeFalsy();
-        const attachButton = react_2.screen.getByRole('button', { name: 'Attach' });
+        expect(react_1.screen.queryByRole('textbox', { name: /Filter menu items/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /auth-operator/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /Alerts/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /Events/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /Logs/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /YAML - Status/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /YAML - All contents/i })).toBeFalsy();
+        const attachButton = react_1.screen.getByRole('button', { name: 'Attach' });
         yield user_event_1.default.click(attachButton);
         expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
     }));
     it('can hide attach button', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: false }));
-        expect(react_2.screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: false }));
+        expect(react_1.screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
     });
     // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
     // See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
     it('can handle handleAttach', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, handleAttach: spy, buttonProps: { attach: { inputTestId: 'input' } } }));
-        expect(react_2.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach' }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, handleAttach: spy, buttonProps: { attach: { inputTestId: 'input' } } }));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
         const file = new File(['test'], 'test.json');
-        const input = react_2.screen.getByTestId('input');
+        const input = react_1.screen.getByTestId('input');
         yield user_event_1.default.upload(input, file);
         expect(input.files).toHaveLength(1);
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('can handle buttonProps tooltipContent appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { tooltipContent: 'Test' } } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { tooltipContent: 'Test' } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('can handle buttonProps tooltipProps  appropriately for attach', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { attach: { tooltipProps: { isVisible: true } } } }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { attach: { tooltipProps: { isVisible: true } } } }));
         // isVisible, so no need for click
-        expect(react_2.screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
+        expect(react_1.screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
     });
     it('can handle buttonProps props appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { props: { 'aria-label': 'Test' } } } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Test' }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Test' }));
     }));
     // Stop button
     // --------------------------------------------------------------------------
     it('can show stop button', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn }));
-        expect(react_2.screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn }));
+        expect(react_1.screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
     });
     it('can call handleStopButton', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop' }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: spy }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Stop' }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('can handle buttonProps tooltipContent appropriately for stop', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipContent: 'Test' } } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipContent: 'Test' } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Stop' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('can handle buttonProps tooltipProps  appropriately for stop', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipProps: { isVisible: true } } } }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipProps: { isVisible: true } } } }));
         // isVisible, so no need for click
-        expect(react_2.screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
+        expect(react_1.screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
     });
     it('can handle buttonProps props appropriately for stop', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { props: { 'aria-label': 'Test' } } } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Test' }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Test' }));
     }));
     // Microphone button
     // --------------------------------------------------------------------------
     it('can hide microphone button when window.SpeechRecognition is not there', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
-        expect(react_2.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
+        expect(react_1.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
     });
     it('can show microphone button', () => {
         mockSpeechRecognition();
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Use microphone' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Use microphone' })).toBeTruthy();
     });
     it('can handle buttonProps appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
         mockSpeechRecognition();
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: {
                 microphone: { tooltipContent: { active: 'Currently listening', inactive: 'Not currently listening' } }
             } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Use microphone' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop listening' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Use microphone' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Stop listening' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
     }));
     it('can customize the listening placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
         mockSpeechRecognition();
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Use microphone' }));
-        const input = react_2.screen.getByRole('textbox', { name: /I am listening/i });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Use microphone' }));
+        const input = react_1.screen.getByRole('textbox', { name: /I am listening/i });
         expect(input).toBeTruthy();
     }));
     it('can handle buttonProps tooltipProps  appropriately for microphone', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { tooltipProps: { isVisible: true } } } }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { tooltipProps: { isVisible: true } } } }));
         // isVisible, so no need for click
-        expect(react_2.screen.getByRole('tooltip', { name: 'Use microphone' })).toBeTruthy();
+        expect(react_1.screen.getByRole('tooltip', { name: 'Use microphone' })).toBeTruthy();
     });
     it('can handle buttonProps props appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
         mockSpeechRecognition();
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Test' }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Test' }));
     }));
     it('can be controlled', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test" }));
-        expect(react_2.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
-        expect(react_2.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
-        expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
-        expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test" }));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_1.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
+        expect(react_1.screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+        expect(react_1.screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
     });
 });

package/dist/cjs/MessageBar/MicrophoneButton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 export interface MicrophoneButtonProps extends ButtonProps {
     /** Boolean check if the browser is listening to speech or not */
@@ -20,5 +20,5 @@ export interface MicrophoneButtonProps extends ButtonProps {
     language?: string;
     isCompact?: boolean;
 }
-export declare const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps>;
+export declare const MicrophoneButton: FunctionComponent<MicrophoneButtonProps>;
 export default MicrophoneButton;

package/dist/cjs/MessageBar/MicrophoneButton.js

@@ -10,15 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MicrophoneButton = void 0;
-// ============================================================================
-// Chatbot Footer - Message Bar - Microphone
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 // Import FontAwesome icons
@@ -27,23 +22,23 @@ const MicrophoneButton = (_a) => {
     var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US', isCompact } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language", "isCompact"]);
     // Microphone
     // --------------------------------------------------------------------------
-    const [speechRecognition, setSpeechRecognition] = react_1.default.useState();
+    const [speechRecognition, setSpeechRecognition] = (0, react_1.useState)();
     // Listen for speech
-    const startListening = react_1.default.useCallback(() => {
+    const startListening = (0, react_1.useCallback)(() => {
         if (speechRecognition) {
             speechRecognition.start();
             onIsListeningChange(true);
         }
     }, [onIsListeningChange, speechRecognition]);
     // Stop listening for speech
-    const stopListening = react_1.default.useCallback(() => {
+    const stopListening = (0, react_1.useCallback)(() => {
         if (speechRecognition && isListening) {
             speechRecognition.stop();
             onIsListeningChange(false);
         }
     }, [isListening, onIsListeningChange, speechRecognition]);
     // Detect speech recognition browser support
-    react_1.default.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
             // Initialize SpeechRecognition
             const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
@@ -68,9 +63,7 @@ const MicrophoneButton = (_a) => {
     if (!speechRecognition) {
         return null;
     }
-    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ aria: "none", "aria-live": "polite", id: "pf-chatbot__tooltip--use-microphone", content: isListening ? tooltipContent.active : tooltipContent.inactive, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone'), "aria-pressed": isListening, onClick: isListening ? stopListening : startListening, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
-                react_1.default.createElement(microphone_icon_1.MicrophoneIcon, null)), size: isCompact ? 'sm' : undefined }, props))));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ aria: "none", "aria-live": "polite", id: "pf-chatbot__tooltip--use-microphone", content: isListening ? tooltipContent.active : tooltipContent.inactive, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone'), "aria-pressed": isListening, onClick: isListening ? stopListening : startListening, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(microphone_icon_1.MicrophoneIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })));
 };
 exports.MicrophoneButton = MicrophoneButton;
 exports.default = exports.MicrophoneButton;