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

package/dist/esm/Message/UserFeedback/UserFeedback.js

@@ -9,20 +9,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Main - Messages - Feedback Card
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
 // Import PatternFly components
 import { ActionGroup, Button, Card, CardBody, CardHeader, Form, TextArea } from '@patternfly/react-core';
 import QuickResponse from '../QuickResponse/QuickResponse';
 import CloseButton from './CloseButton';
 const UserFeedback = (_a) => {
     var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact"]);
-    const [selectedResponse, setSelectedResponse] = React.useState();
-    const [value, setValue] = React.useState('');
-    const divRef = React.useRef(null);
-    React.useEffect(() => {
+    const [selectedResponse, setSelectedResponse] = useState();
+    const [value, setValue] = useState('');
+    const divRef = useRef(null);
+    useEffect(() => {
         var _a;
         if (focusOnLoad) {
             (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -30,20 +28,11 @@ const UserFeedback = (_a) => {
     }, []);
     return (
     /* card does not have ref forwarding; hence wrapper div */
-    React.createElement("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title },
-        React.createElement(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
-            React.createElement(CardHeader, { actions: {
-                    actions: React.createElement(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
-                } },
-                React.createElement(HeadingLevel, { className: "pf-chatbot__feedback-card-title" }, title)),
-            React.createElement(CardBody, null,
-                React.createElement(Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` },
-                    quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })),
-                    hasTextArea && (React.createElement(TextArea, { value: value, onChange: (_event, value) => {
-                            setValue(value);
-                            onTextAreaChange && onTextAreaChange(_event, value);
-                        }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" })),
-                    React.createElement(ActionGroup, null,
-                        React.createElement(Button, { onClick: () => onSubmit(selectedResponse, value) }, submitWord)))))));
+    _jsx("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title, children: _jsxs(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props, { children: [_jsx(CardHeader, { actions: {
+                        actions: _jsx(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
+                    }, children: _jsx(HeadingLevel, { className: "pf-chatbot__feedback-card-title", children: title }) }), _jsx(CardBody, { children: _jsxs(Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`, children: [quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && (_jsx(TextArea, { value: value, onChange: (_event, value) => {
+                                    setValue(value);
+                                    onTextAreaChange && onTextAreaChange(_event, value);
+                                }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" })), _jsx(ActionGroup, { children: _jsx(Button, { onClick: () => onSubmit(selectedResponse, value), children: submitWord }) })] }) })] })) }));
 };
 export default UserFeedback;

package/dist/esm/Message/UserFeedback/UserFeedback.test.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
@@ -19,7 +19,7 @@ const MOCK_RESPONSES = [
 ];
 describe('UserFeedback', () => {
     it('should render correctly', () => {
-        render(React.createElement(UserFeedback, { onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, timestamp: "12/12/12" }));
+        render(_jsx(UserFeedback, { onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, timestamp: "12/12/12" }));
         expect(screen.getByRole('heading', { name: /Why did you choose this rating?/i })).toBeTruthy();
         expect(screen.getByRole('list', { name: 'Quick feedback for message received at 12/12/12' })).toBeTruthy();
         expect(screen.getByRole('button', { name: /Helpful information/i })).toBeTruthy();
@@ -30,35 +30,35 @@ describe('UserFeedback', () => {
         expect(screen.queryByRole('textbox', { name: /Provide optional additional feedback/i })).toBeFalsy();
     });
     it('should render different title correctly', () => {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, title: "Thanks! Why?" }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, title: "Thanks! Why?" }));
         expect(screen.getByText('Thanks! Why?')).toBeTruthy();
     });
     it('should render different submit button text correctly', () => {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, submitWord: "Give feedback" }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, submitWord: "Give feedback" }));
         expect(screen.getByRole('button', { name: /Give feedback/i })).toBeTruthy();
     });
     it('should render text area correctly', () => {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
         expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toBeTruthy();
     });
     it('should call onTextAreaChange correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, onTextAreaChange: spy }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, onTextAreaChange: spy }));
         const textbox = screen.getByRole('textbox', { name: /Provide optional additional feedback/i });
         yield userEvent.type(textbox, 'test');
         expect(spy).toHaveBeenCalledTimes(4);
     }));
     it('should render different placeholder correctly', () => {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, textAreaPlaceholder: "Provide any other information" }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, textAreaPlaceholder: "Provide any other information" }));
         expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toHaveAttribute('placeholder', 'Provide any other information');
     });
     it('should render different text area label correctly', () => {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, textAreaAriaLabel: "Provide more details" }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, textAreaAriaLabel: "Provide more details" }));
         expect(screen.getByRole('textbox', { name: /Provide more details/i })).toBeTruthy();
     });
     it('should handle onClose correctly when close button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(UserFeedback, { onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, onClose: spy, timestamp: "12/12/12" }));
+        render(_jsx(UserFeedback, { onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, onClose: spy, timestamp: "12/12/12" }));
         const closeButton = screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' });
         expect(closeButton).toBeTruthy();
         yield userEvent.click(closeButton);
@@ -66,27 +66,27 @@ describe('UserFeedback', () => {
     }));
     it('should be able to change close button aria label', () => {
         const spy = jest.fn();
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, onClose: spy, closeButtonAriaLabel: "Ima button" }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, onClose: spy, closeButtonAriaLabel: "Ima button" }));
         expect(screen.getByRole('button', { name: /Ima button/i })).toBeTruthy();
     });
     it('should handle className', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, className: "test", "data-testid": "card" }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, className: "test", "data-testid": "card" }));
         expect(screen.getByTestId('card')).toHaveClass('test');
     }));
     it('should apply id', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, id: "test", "data-testid": "card" }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, id: "test", "data-testid": "card" }));
         expect(screen.getByTestId('card').parentElement).toHaveAttribute('id', 'test');
     }));
     it('should handle submit correctly when nothing is selected', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES }));
         yield userEvent.click(screen.getByRole('button', { name: /Submit/i }));
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy).toHaveBeenCalledWith(undefined, '');
     }));
     it('should handle submit correctly when item is selected', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES }));
         yield userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
         yield userEvent.click(screen.getByRole('button', { name: /Submit/i }));
         expect(spy).toHaveBeenCalledTimes(1);
@@ -94,7 +94,7 @@ describe('UserFeedback', () => {
     }));
     it('should handle submit correctly when there is just text input', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
         yield userEvent.type(screen.getByRole('textbox', { name: /Provide optional additional feedback/i }), 'What a great experience!');
         yield userEvent.click(screen.getByRole('button', { name: /Submit/i }));
         expect(spy).toHaveBeenCalledTimes(1);
@@ -102,7 +102,7 @@ describe('UserFeedback', () => {
     }));
     it('should handle submit correctly when item is selected and there is text input', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
         yield userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
         yield userEvent.type(screen.getByRole('textbox', { name: /Provide optional additional feedback/i }), 'What a great experience!');
         yield userEvent.click(screen.getByRole('button', { name: /Submit/i }));
@@ -110,23 +110,23 @@ describe('UserFeedback', () => {
         expect(spy).toHaveBeenCalledWith('2', 'What a great experience!');
     }));
     it('should default title heading level to h1', () => {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES }));
         expect(screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i })).toBeTruthy();
     });
     it('should be able to change title heading level', () => {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, headingLevel: "h6" }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, headingLevel: "h6" }));
         expect(screen.getByRole('heading', { level: 6, name: /Why did you choose this rating?/i })).toBeTruthy();
     });
     it('should focus on load by default', () => {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card" }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card" }));
         expect(screen.getByTestId('card').parentElement).toHaveFocus();
     });
     it('should not focus on load if focusOnLoad = false', () => {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", focusOnLoad: false }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", focusOnLoad: false }));
         expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
     });
     it('should handle isCompact', () => {
-        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", isCompact: true }));
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", isCompact: true }));
         expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
     });
 });

package/dist/esm/Message/UserFeedback/UserFeedbackComplete.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { CardProps, OUIAProps } from '@patternfly/react-core';
 export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAProps {
     /** Additional classes for the pagination navigation container. */
@@ -38,5 +38,5 @@ export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAP
     /** Timestamp passed in by Message for more context in aria announcements */
     timestamp?: string;
 }
-declare const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps>;
+declare const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps>;
 export default UserFeedbackComplete;

package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js

@@ -9,36 +9,34 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Main - Messages - Feedback Complete Card
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
 // Import PatternFly components
 import { Card, CardBody, CardHeader, CardTitle, useOUIAProps } from '@patternfly/react-core';
 import CloseButton from './CloseButton';
 const UserFeedbackComplete = (_a) => {
     var { className, title = 'Feedback submitted', body = "We've received your response. Thank you for sharing your feedback!", timestamp, timeout = false, timeoutAnimation = 3000, onTimeout, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, onMouseEnter, onMouseLeave, ouiaId, ouiaSafe, isLiveRegion, id, focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "title", "body", "timestamp", "timeout", "timeoutAnimation", "onTimeout", "onClose", "closeButtonAriaLabel", "onMouseEnter", "onMouseLeave", "ouiaId", "ouiaSafe", "isLiveRegion", "id", "focusOnLoad", "isCompact"]);
-    const [timedOut, setTimedOut] = React.useState(false);
-    const [timedOutAnimation, setTimedOutAnimation] = React.useState(true);
-    const [isMouseOver, setIsMouseOver] = React.useState();
-    const [containsFocus, setContainsFocus] = React.useState();
+    const [timedOut, setTimedOut] = useState(false);
+    const [timedOutAnimation, setTimedOutAnimation] = useState(true);
+    const [isMouseOver, setIsMouseOver] = useState();
+    const [containsFocus, setContainsFocus] = useState();
     const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
-    const divRef = React.useRef(null);
+    const divRef = useRef(null);
     const ouiaProps = useOUIAProps('User Feedback Complete', ouiaId, ouiaSafe);
-    React.useEffect(() => {
+    useEffect(() => {
         var _a;
         if (focusOnLoad) {
             (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, []);
-    React.useEffect(() => {
+    useEffect(() => {
         const calculatedTimeout = timeout === true ? 8000 : Number(timeout);
         if (calculatedTimeout > 0) {
             const timer = setTimeout(() => setTimedOut(true), calculatedTimeout);
             return () => clearTimeout(timer);
         }
     }, [timeout]);
-    React.useEffect(() => {
+    useEffect(() => {
         const onDocumentFocus = () => {
             if (divRef.current) {
                 if (divRef.current.contains(document.activeElement)) {
@@ -53,13 +51,13 @@ const UserFeedbackComplete = (_a) => {
         document.addEventListener('focus', onDocumentFocus, true);
         return () => document.removeEventListener('focus', onDocumentFocus, true);
     }, [containsFocus]);
-    React.useEffect(() => {
+    useEffect(() => {
         if (containsFocus === false || isMouseOver === false) {
             const timer = setTimeout(() => setTimedOutAnimation(true), timeoutAnimation);
             return () => clearTimeout(timer);
         }
     }, [containsFocus, isMouseOver, timeoutAnimation]);
-    React.useEffect(() => {
+    useEffect(() => {
         dismissed && onTimeout && onTimeout();
     }, [dismissed, onTimeout]);
     if (dismissed) {
@@ -76,37 +74,15 @@ const UserFeedbackComplete = (_a) => {
     };
     return (
     /* card does not have ref forwarding; hence wrapper div */
-    React.createElement("div", Object.assign({ ref: divRef, onMouseEnter: myOnMouseEnter, onMouseLeave: myOnMouseLeave }, (isLiveRegion && {
+    _jsx("div", Object.assign({ ref: divRef, onMouseEnter: myOnMouseEnter, onMouseLeave: myOnMouseLeave }, (isLiveRegion && {
         'aria-live': 'polite',
         'aria-atomic': 'false'
-    }), { id: id, tabIndex: 0, "aria-label": title }, ouiaProps),
-        React.createElement(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}` }, props),
-            React.createElement(CardHeader, { className: onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header', actions: 
-                /* eslint-disable indent */
-                onClose
-                    ? {
-                        actions: React.createElement(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
-                    }
-                    : undefined }),
-            React.createElement("div", { className: "pf-chatbot__feedback-complete-body" },
-                React.createElement("div", { className: "pf-chatbot__feedback-complete-image" },
-                    React.createElement("svg", { width: "60", height: "64", viewBox: "0 0 60 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                        React.createElement("path", { d: "M53.0555 21.5975H6.94323C3.57013 21.5975 0.835693 24.3319 0.835693 27.705V57.8925C0.835693 61.2656 3.57013 64 6.94323 64H53.0555C56.4286 64 59.1631 61.2656 59.1631 57.8925V27.705C59.1631 24.3319 56.4286 21.5975 53.0555 21.5975Z", fill: "#F8AE54" }),
-                        React.createElement("path", { d: "M55.8973 19.8247C52.5894 15.7926 29.9992 0 29.9992 0C29.9992 0 7.40996 15.7926 4.10102 19.8247C0.79312 23.8568 0.835476 25.7184 0.835476 27.8899H59.1629C59.1629 25.7184 59.2052 23.8578 55.8973 19.8257V19.8247Z", fill: "#FFCC17" }),
-                        React.createElement("g", null,
-                            React.createElement("path", { d: "M53.0567 8.48981H6.94336V61.8388H53.0567V8.48981Z", fill: "#F2F2F2" })),
-                        React.createElement("path", { d: "M51.6589 7.49908H8.34204V60.8481H51.6589V7.49908Z", fill: "white" }),
-                        React.createElement("path", { d: "M0.835693 29.1296V57.8925C0.835693 59.2375 1.27165 60.4803 2.00823 61.4896L23.0303 43.5462L0.835693 29.1296Z", fill: "#FFCC17" }),
-                        React.createElement("path", { d: "M36.9695 43.5472L57.9905 61.4907C58.7271 60.4813 59.1631 59.2386 59.1631 57.8935V29.1306L36.9685 43.5472H36.9695Z", fill: "#FFF4CC" }),
-                        React.createElement("path", { d: "M0.835693 57.8925V57.8067L22.4146 42.7992L29.9994 37.5244L37.5842 42.7992L59.1641 57.8067V57.8925C59.1641 61.2665 56.4296 64 53.0566 64H6.94323C3.57024 64 0.835693 61.2665 0.835693 57.8925Z", fill: "#FFE072" }),
-                        React.createElement("g", null,
-                            React.createElement("path", { d: "M22.1563 42.978L0.835693 57.8067V56.6993L22.1563 42.978Z", fill: "#FEF07C" })),
-                        React.createElement("g", null,
-                            React.createElement("path", { d: "M37.8425 42.978L59.1631 57.8067V56.6993L37.8425 42.978Z", fill: "#FEF07C" })),
-                        React.createElement("path", { d: "M37.8037 32.2373C42.1136 27.9273 42.1136 20.9395 37.8037 16.6295C33.4937 12.3196 26.5059 12.3196 22.196 16.6295C17.886 20.9395 17.886 27.9273 22.196 32.2373C26.5059 36.5472 33.4937 36.5472 37.8037 32.2373Z", fill: "#0066CC" }),
-                        React.createElement("path", { d: "M27.7803 30.1276C27.6098 30.1276 27.4497 30.0614 27.3298 29.9406L22.9465 25.5562C22.8267 25.4364 22.7595 25.2762 22.7595 25.1068C22.7595 24.9374 22.8256 24.7762 22.9465 24.6554L24.2379 23.364C24.3577 23.2442 24.5178 23.177 24.6883 23.177C24.8587 23.177 25.0168 23.2431 25.1377 23.363L27.7803 26.0056L34.861 18.9259C34.9808 18.8061 35.1409 18.7389 35.3103 18.7389C35.4798 18.7389 35.6389 18.8051 35.7597 18.9239L37.0531 20.2173C37.173 20.3361 37.2401 20.4962 37.2401 20.6677C37.2401 20.8392 37.174 20.9983 37.0531 21.1181L28.2317 29.9406C28.1119 30.0604 27.9518 30.1265 27.7823 30.1265L27.7803 30.1276Z", fill: "white" }))),
-                React.createElement("div", { className: "pf-chatbot__feedback-complete-text" },
-                    React.createElement(CardTitle, { className: "pf-chatbot__feedback-complete-title" }, title),
-                    React.createElement(CardBody, { className: `pf-chatbot__feedback-complete-card-body` }, body))))));
+    }), { id: id, tabIndex: 0, "aria-label": title }, ouiaProps, { children: _jsxs(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}` }, props, { children: [_jsx(CardHeader, { className: onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header', actions: 
+                    /* eslint-disable indent */
+                    onClose
+                        ? {
+                            actions: _jsx(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
+                        }
+                        : undefined }), _jsxs("div", { className: "pf-chatbot__feedback-complete-body", children: [_jsx("div", { className: "pf-chatbot__feedback-complete-image", children: _jsxs("svg", { width: "60", height: "64", viewBox: "0 0 60 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M53.0555 21.5975H6.94323C3.57013 21.5975 0.835693 24.3319 0.835693 27.705V57.8925C0.835693 61.2656 3.57013 64 6.94323 64H53.0555C56.4286 64 59.1631 61.2656 59.1631 57.8925V27.705C59.1631 24.3319 56.4286 21.5975 53.0555 21.5975Z", fill: "#F8AE54" }), _jsx("path", { d: "M55.8973 19.8247C52.5894 15.7926 29.9992 0 29.9992 0C29.9992 0 7.40996 15.7926 4.10102 19.8247C0.79312 23.8568 0.835476 25.7184 0.835476 27.8899H59.1629C59.1629 25.7184 59.2052 23.8578 55.8973 19.8257V19.8247Z", fill: "#FFCC17" }), _jsx("g", { children: _jsx("path", { d: "M53.0567 8.48981H6.94336V61.8388H53.0567V8.48981Z", fill: "#F2F2F2" }) }), _jsx("path", { d: "M51.6589 7.49908H8.34204V60.8481H51.6589V7.49908Z", fill: "white" }), _jsx("path", { d: "M0.835693 29.1296V57.8925C0.835693 59.2375 1.27165 60.4803 2.00823 61.4896L23.0303 43.5462L0.835693 29.1296Z", fill: "#FFCC17" }), _jsx("path", { d: "M36.9695 43.5472L57.9905 61.4907C58.7271 60.4813 59.1631 59.2386 59.1631 57.8935V29.1306L36.9685 43.5472H36.9695Z", fill: "#FFF4CC" }), _jsx("path", { d: "M0.835693 57.8925V57.8067L22.4146 42.7992L29.9994 37.5244L37.5842 42.7992L59.1641 57.8067V57.8925C59.1641 61.2665 56.4296 64 53.0566 64H6.94323C3.57024 64 0.835693 61.2665 0.835693 57.8925Z", fill: "#FFE072" }), _jsx("g", { children: _jsx("path", { d: "M22.1563 42.978L0.835693 57.8067V56.6993L22.1563 42.978Z", fill: "#FEF07C" }) }), _jsx("g", { children: _jsx("path", { d: "M37.8425 42.978L59.1631 57.8067V56.6993L37.8425 42.978Z", fill: "#FEF07C" }) }), _jsx("path", { d: "M37.8037 32.2373C42.1136 27.9273 42.1136 20.9395 37.8037 16.6295C33.4937 12.3196 26.5059 12.3196 22.196 16.6295C17.886 20.9395 17.886 27.9273 22.196 32.2373C26.5059 36.5472 33.4937 36.5472 37.8037 32.2373Z", fill: "#0066CC" }), _jsx("path", { d: "M27.7803 30.1276C27.6098 30.1276 27.4497 30.0614 27.3298 29.9406L22.9465 25.5562C22.8267 25.4364 22.7595 25.2762 22.7595 25.1068C22.7595 24.9374 22.8256 24.7762 22.9465 24.6554L24.2379 23.364C24.3577 23.2442 24.5178 23.177 24.6883 23.177C24.8587 23.177 25.0168 23.2431 25.1377 23.363L27.7803 26.0056L34.861 18.9259C34.9808 18.8061 35.1409 18.7389 35.3103 18.7389C35.4798 18.7389 35.6389 18.8051 35.7597 18.9239L37.0531 20.2173C37.173 20.3361 37.2401 20.4962 37.2401 20.6677C37.2401 20.8392 37.174 20.9983 37.0531 21.1181L28.2317 29.9406C28.1119 30.0604 27.9518 30.1265 27.7823 30.1265L27.7803 30.1276Z", fill: "white" })] }) }), _jsxs("div", { className: "pf-chatbot__feedback-complete-text", children: [_jsx(CardTitle, { className: "pf-chatbot__feedback-complete-title", children: title }), _jsx(CardBody, { className: `pf-chatbot__feedback-complete-card-body`, children: body })] })] })] })) })));
 };
 export default UserFeedbackComplete;

package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.js

@@ -7,36 +7,36 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { act, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import UserFeedbackComplete from './UserFeedbackComplete';
 describe('UserFeedbackComplete', () => {
     it('should render correctly', () => {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12" }));
         expect(screen.getByText('Feedback submitted')).toBeTruthy();
         screen.getByText(/We've received your response. Thank you for sharing your feedback!/i);
         expect(screen.queryByRole('button', { name: /Close/i })).toBeFalsy();
     });
     it('should render different title correctly', () => {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", title: "Thanks!" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", title: "Thanks!" }));
         expect(screen.getByText('Thanks!')).toBeTruthy();
         screen.getByText(/We've received your response. Thank you for sharing your feedback!/i);
     });
     it('should render different string body correctly', () => {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", body: "Thanks!" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", body: "Thanks!" }));
         expect(screen.getByText('Feedback submitted')).toBeTruthy();
         expect(screen.getByText('Thanks!')).toBeTruthy();
     });
     it('should render different node body correctly', () => {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", body: React.createElement("div", null, "Thanks!") }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", body: _jsx("div", { children: "Thanks!" }) }));
         expect(screen.getByText('Feedback submitted')).toBeTruthy();
         expect(screen.getByText('Thanks!')).toBeTruthy();
     });
     it('should handle onClose correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", onClose: spy }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", onClose: spy }));
         const closeButton = screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' });
         expect(closeButton).toBeTruthy();
         yield userEvent.click(closeButton);
@@ -44,20 +44,20 @@ describe('UserFeedbackComplete', () => {
     }));
     it('should be able to change close button aria label', () => {
         const spy = jest.fn();
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", onClose: spy, closeButtonAriaLabel: "Ima button" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", onClose: spy, closeButtonAriaLabel: "Ima button" }));
         expect(screen.getByRole('button', { name: /Ima button/i })).toBeTruthy();
     });
     it('should handle className', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", className: "test", "data-testid": "card" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", className: "test", "data-testid": "card" }));
         expect(screen.getByTestId('card')).toHaveClass('test');
     }));
     it('should apply id', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", id: "test", "data-testid": "card" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", id: "test", "data-testid": "card" }));
         expect(screen.getByTestId('card').parentElement).toHaveAttribute('id', 'test');
     }));
     it('renders with no timeout by default', () => {
         jest.useFakeTimers();
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12" }));
         act(() => {
             jest.advanceTimersByTime(8000);
         });
@@ -66,7 +66,7 @@ describe('UserFeedbackComplete', () => {
     });
     it('should handle timeout correctly after 8000ms when timeout = true', () => __awaiter(void 0, void 0, void 0, function* () {
         jest.useFakeTimers();
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true }));
         act(() => {
             jest.advanceTimersByTime(7999);
         });
@@ -79,7 +79,7 @@ describe('UserFeedbackComplete', () => {
     }));
     it('should handle timeout correctly when timeout = numeric value', () => __awaiter(void 0, void 0, void 0, function* () {
         jest.useFakeTimers();
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: 300 }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: 300 }));
         act(() => {
             jest.advanceTimersByTime(299);
         });
@@ -95,7 +95,7 @@ describe('UserFeedbackComplete', () => {
             advanceTimers: (delay) => jest.advanceTimersByTime(delay)
         });
         jest.useFakeTimers();
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card" }));
         expect(screen.getByText('Feedback submitted')).toBeTruthy();
         yield user.click(screen.getByTestId('card'));
         act(() => {
@@ -109,7 +109,7 @@ describe('UserFeedbackComplete', () => {
             advanceTimers: (delay) => jest.advanceTimersByTime(delay)
         });
         jest.useFakeTimers();
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card" }));
         const card = screen.getByTestId('card');
         yield user.hover(card);
         act(() => {
@@ -123,9 +123,7 @@ describe('UserFeedbackComplete', () => {
             advanceTimers: (delay) => jest.advanceTimersByTime(delay)
         });
         jest.useFakeTimers();
-        render(React.createElement("div", null,
-            React.createElement("input", null),
-            React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card" })));
+        render(_jsxs("div", { children: [_jsx("input", {}), _jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card" })] }));
         const card = screen.getByTestId('card');
         yield user.click(card);
         act(() => {
@@ -143,9 +141,7 @@ describe('UserFeedbackComplete', () => {
             advanceTimers: (delay) => jest.advanceTimersByTime(delay)
         });
         jest.useFakeTimers();
-        render(React.createElement("div", null,
-            React.createElement("input", null),
-            React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card" })));
+        render(_jsxs("div", { children: [_jsx("input", {}), _jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card" })] }));
         const card = screen.getByTestId('card');
         yield user.hover(card);
         act(() => {
@@ -163,9 +159,7 @@ describe('UserFeedbackComplete', () => {
             advanceTimers: (delay) => jest.advanceTimersByTime(delay)
         });
         jest.useFakeTimers();
-        render(React.createElement("div", null,
-            React.createElement("input", null),
-            React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card", timeoutAnimation: 1000 })));
+        render(_jsxs("div", { children: [_jsx("input", {}), _jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card", timeoutAnimation: 1000 })] }));
         const card = screen.getByTestId('card');
         yield user.hover(card);
         act(() => {
@@ -181,7 +175,7 @@ describe('UserFeedbackComplete', () => {
     it('does not call the onTimeout callback before the timeout period has expired', () => {
         const spy = jest.fn();
         jest.useFakeTimers();
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card", onTimeout: spy }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card", onTimeout: spy }));
         act(() => {
             jest.advanceTimersByTime(7999);
         });
@@ -191,7 +185,7 @@ describe('UserFeedbackComplete', () => {
     it('calls the onTimeout callback after the timeout period has expired', () => {
         jest.useFakeTimers();
         const spy = jest.fn();
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card", onTimeout: spy }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card", onTimeout: spy }));
         act(() => {
             jest.advanceTimersByTime(8000);
         });
@@ -199,13 +193,13 @@ describe('UserFeedbackComplete', () => {
         jest.useRealTimers();
     });
     it('renders without aria-live and aria-atomic attributes by default', () => {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card" }));
         const card = screen.getByTestId('card').parentElement;
         expect(card).not.toHaveAttribute('aria-live');
         expect(card).not.toHaveAttribute('aria-atomic');
     });
     it('has an aria-live value of polite and aria-atomic value of false when isLiveRegion = true', () => {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card", isLiveRegion: true }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", timeout: true, "data-testid": "card", isLiveRegion: true }));
         const card = screen.getByTestId('card').parentElement;
         expect(card).toHaveAttribute('aria-live', 'polite');
         expect(card).toHaveAttribute('aria-atomic', 'false');
@@ -213,9 +207,7 @@ describe('UserFeedbackComplete', () => {
     it('calls onMouseEnter appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         const user = userEvent.setup();
-        render(React.createElement("div", null,
-            React.createElement("input", null),
-            React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", onMouseEnter: spy })));
+        render(_jsxs("div", { children: [_jsx("input", {}), _jsx(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", onMouseEnter: spy })] }));
         const card = screen.getByTestId('card');
         expect(spy).toHaveBeenCalledTimes(0);
         yield user.hover(card);
@@ -224,9 +216,7 @@ describe('UserFeedbackComplete', () => {
     it('calls onMouseLeave appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         const user = userEvent.setup();
-        render(React.createElement("div", null,
-            React.createElement("input", null),
-            React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", onMouseLeave: spy })));
+        render(_jsxs("div", { children: [_jsx("input", {}), _jsx(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", onMouseLeave: spy })] }));
         const card = screen.getByTestId('card');
         expect(spy).toHaveBeenCalledTimes(0);
         yield user.hover(card);
@@ -234,15 +224,15 @@ describe('UserFeedbackComplete', () => {
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should focus on load by default', () => {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card" }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card" }));
         expect(screen.getByTestId('card').parentElement).toHaveFocus();
     });
     it('should not focus on load if focusOnLoad = false', () => {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", focusOnLoad: false }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", focusOnLoad: false }));
         expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
     });
     it('should handle isCompact', () => {
-        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", isCompact: true }));
+        render(_jsx(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", isCompact: true }));
         expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
     });
 });

package/dist/esm/MessageBar/AttachButton.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ButtonProps, DropEvent, TooltipProps } from '@patternfly/react-core';
 export interface AttachButtonProps extends ButtonProps {
     /** Callback for when button is clicked */
@@ -19,4 +18,4 @@ export interface AttachButtonProps extends ButtonProps {
     inputTestId?: string;
     isCompact?: boolean;
 }
-export declare const AttachButton: React.ForwardRefExoticComponent<AttachButtonProps & React.RefAttributes<any>>;
+export declare const AttachButton: import("react").ForwardRefExoticComponent<AttachButtonProps & import("react").RefAttributes<any>>;

package/dist/esm/MessageBar/AttachButton.js

@@ -9,10 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Footer - Message Bar - Attach
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 // Import PatternFly components
 import { Button, Icon, Tooltip } from '@patternfly/react-core';
 import { useDropzone } from 'react-dropzone';
@@ -23,12 +21,8 @@ const AttachButtonBase = (_a) => {
         multiple: true,
         onDropAccepted: onAttachAccepted
     });
-    return (React.createElement(React.Fragment, null,
-        React.createElement("input", Object.assign({ "data-testid": inputTestId }, getInputProps(), { hidden: true })),
-        React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, 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, 
-            // prevents VO announcements of both aria label and tooltip
-            aria: "none" }, tooltipProps),
-            React.createElement(Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: React.createElement(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
-                    React.createElement(PaperclipIcon, null)), size: isCompact ? 'sm' : undefined }, props)))));
+    return (_jsxs(_Fragment, { children: [_jsx("input", Object.assign({ "data-testid": inputTestId }, getInputProps(), { hidden: true })), _jsx(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, 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, 
+                // prevents VO announcements of both aria label and tooltip
+                aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: _jsx(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(PaperclipIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) }))] }));
 };
-export const AttachButton = React.forwardRef((props, ref) => (React.createElement(AttachButtonBase, Object.assign({ innerRef: ref }, props))));
+export const AttachButton = forwardRef((props, ref) => (_jsx(AttachButtonBase, Object.assign({ innerRef: ref }, props))));