@patternfly/chatbot 6.3.0-prerelease.9 → 6.3.1

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/Message/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Message';
+export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
 export * from './Message';

package/dist/esm/Message/index.js

@@ -1,2 +1,3 @@
 export { default } from './Message';
+export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
 export * from './Message';

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

@@ -1,10 +1,16 @@
-import React from 'react';
 import { ButtonProps, DropEvent, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
 export interface AttachButtonProps extends ButtonProps {
     /** Callback for when button is clicked */
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Callback function for AttachButton when an attachment is made */
     onAttachAccepted?: (data: File[], event: DropEvent) => void;
+    /** Specifies the file types accepted by the attachment upload component.
+     *  Files that don't match the accepted types will be disabled in the file picker.
+     *  For example,
+     *  allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+     **/
+    allowedFileTypes?: Accept;
     /** Class name for AttachButton */
     className?: string;
     /** Props to control if the AttachButton should be disabled */
@@ -17,6 +23,23 @@ export interface AttachButtonProps extends ButtonProps {
     tooltipContent?: string;
     /** Test id applied to input */
     inputTestId?: string;
+    /** Whether button is compact */
     isCompact?: boolean;
+    /** Minimum file size allowed */
+    minSize?: number;
+    /** Max file size allowed */
+    maxSize?: number;
+    /** Max number of files allowed */
+    maxFiles?: number;
+    /** Whether attachments are disabled */
+    isAttachmentDisabled?: boolean;
+    /** Callback when file(s) are attached */
+    onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Callback function for AttachButton when an attachment fails */
+    onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+    validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
+    /** Additional props passed to react-dropzone */
+    dropzoneProps?: DropzoneOptions;
 }
-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,26 +9,19 @@ 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';
 import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
 const AttachButtonBase = (_a) => {
-    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact"]);
-    const { open, getInputProps } = useDropzone({
-        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 button', 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)))));
+    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps"]);
+    const { open, getInputProps } = useDropzone(Object.assign({ multiple: true, onDropAccepted: onAttachAccepted, accept: allowedFileTypes, minSize,
+        maxSize,
+        maxFiles, disabled: isAttachmentDisabled, onDrop: onAttach, onDropRejected: onAttachRejected, validator }, dropzoneProps));
+    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))));

package/dist/esm/MessageBar/AttachButton.test.js

@@ -7,51 +7,51 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { AttachButton } from './AttachButton';
 describe('Attach button', () => {
     it('should render button correctly', () => {
-        render(React.createElement(AttachButton, null));
-        expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+        render(_jsx(AttachButton, {}));
+        expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
     });
     it('should handle isDisabled prop', () => {
-        render(React.createElement(AttachButton, { isDisabled: true }));
-        expect(screen.getByRole('button', { name: 'Attach button' })).toBeDisabled();
+        render(_jsx(AttachButton, { isDisabled: true }));
+        expect(screen.getByRole('button', { name: 'Attach' })).toBeDisabled();
     });
     it('should handle spread props, including aria-label', () => {
-        render(React.createElement(AttachButton, { "aria-label": "test" }));
+        render(_jsx(AttachButton, { "aria-label": "test" }));
         expect(screen.getByRole('button', { name: 'test' }));
     });
     it('should handle onClick', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(AttachButton, { onClick: spy }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        render(_jsx(AttachButton, { onClick: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
         expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle className prop', () => {
-        render(React.createElement(AttachButton, { className: "test" }));
-        expect(screen.getByRole('button', { name: 'Attach button' })).toHaveClass('test');
+        render(_jsx(AttachButton, { className: "test" }));
+        expect(screen.getByRole('button', { name: 'Attach' })).toHaveClass('test');
     });
     it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(AttachButton, { onClick: jest.fn, tooltipContent: "Test" }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        render(_jsx(AttachButton, { onClick: jest.fn, tooltipContent: "Test" }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
         expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(AttachButton, { tooltipProps: { id: 'test' } }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        render(_jsx(AttachButton, { tooltipProps: { id: 'test' } }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
         expect(screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
     }));
     // 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('should handle onAttachAccepted prop', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(AttachButton, { onAttachAccepted: spy, inputTestId: "input" }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        render(_jsx(AttachButton, { onAttachAccepted: spy, inputTestId: "input" }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
         const file = new File(['test'], 'test.json');
         const input = screen.getByTestId('input');
         yield userEvent.upload(input, file);
@@ -59,7 +59,85 @@ describe('Attach button', () => {
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle isCompact', () => {
-        render(React.createElement(AttachButton, { isCompact: true, "data-testid": "button" }));
+        render(_jsx(AttachButton, { isCompact: true, "data-testid": "button" }));
         expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
     });
+    it('should set correct accept attribute on file input', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(AttachButton, { inputTestId: "input", allowedFileTypes: { 'text/plain': ['.txt'] } }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
+        const input = screen.getByTestId('input');
+        expect(input).toHaveAttribute('accept', 'text/plain,.txt');
+    }));
+    it('should call onAttachAccepted when file type is accepted', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachAccepted = jest.fn();
+        render(_jsx(AttachButton, { inputTestId: "input", allowedFileTypes: { 'text/plain': ['.txt'] }, onAttachAccepted: onAttachAccepted }));
+        const file = new File(['hello'], 'example.txt', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(onAttachAccepted).toHaveBeenCalled();
+        const [attachedFile] = onAttachAccepted.mock.calls[0][0];
+        expect(attachedFile).toEqual(file);
+    }));
+    it('should not call onAttachAccepted when file type is not accepted', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachAccepted = jest.fn();
+        render(_jsx(AttachButton, { inputTestId: "input", allowedFileTypes: { 'text/plain': ['.txt'] }, onAttachAccepted: onAttachAccepted }));
+        const file = new File(['[]'], 'example.json', { type: 'application/json' });
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(onAttachAccepted).not.toHaveBeenCalled();
+    }));
+    it('should respect minSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        render(_jsx(AttachButton, { inputTestId: "input", minSize: 1000, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        render(_jsx(AttachButton, { inputTestId: "input", maxSize: 100, onAttachRejected: onAttachRejected }));
+        const largeContent = 'x'.repeat(200);
+        const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxFiles restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        render(_jsx(AttachButton, { inputTestId: "input", maxFiles: 1, onAttachRejected: onAttachRejected }));
+        const files = [
+            new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+            new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+        ];
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, files);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should be disabled when isAttachmentDisabled is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onFileDrop = jest.fn();
+        render(_jsx(AttachButton, { inputTestId: "input", isAttachmentDisabled: true }));
+        const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(onFileDrop).not.toHaveBeenCalled();
+    }));
+    it('should call onAttach when files are attached', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttach = jest.fn();
+        render(_jsx(AttachButton, { inputTestId: "input", onAttach: onAttach }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(onAttach).toHaveBeenCalled();
+    }));
+    it('should use custom validator when provided', () => __awaiter(void 0, void 0, void 0, function* () {
+        const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+        const onAttachRejected = jest.fn();
+        render(_jsx(AttachButton, { inputTestId: "input", validator: validator, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(validator).toHaveBeenCalledWith(file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
 });

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
+import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
 import { ButtonProps, DropEvent, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
@@ -21,7 +22,7 @@ export interface MessageBarWithAttachMenuProps {
     /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
     onAttachMenuOpenChange?: (isOpen: boolean) => void;
 }
-export interface MessageBarProps extends TextAreaProps {
+export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     /** Callback to get the value of input message by user */
     onSendMessage: (message: string | number) => void;
     /** Class Name for the MessageBar component */
@@ -42,6 +43,28 @@ export interface MessageBarProps extends TextAreaProps {
     handleStopButton?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Callback function for when attach button is used to upload a file */
     handleAttach?: (data: File[], event: DropEvent) => void;
+    /** Specifies the file types accepted by the attachment upload component.
+     *  Files that don't match the accepted types will be disabled in the file picker.
+     *  For example,
+     *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+     **/
+    allowedFileTypes?: Accept;
+    /** Minimum file size allowed */
+    minSize?: number;
+    /** Max file size allowed */
+    maxSize?: number;
+    /** Max number of files allowed */
+    maxFiles?: number;
+    /** Whether attachments are disabled */
+    isAttachmentDisabled?: boolean;
+    /** Callback when file(s) are attached */
+    onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Callback function for AttachButton when an attachment fails */
+    onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+    validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
+    /** Additional props passed to react-dropzone */
+    dropzoneProps?: DropzoneOptions;
     /** Props to enable a menu that opens when the Attach button is clicked, instead of the attachment window */
     attachMenuProps?: MessageBarWithAttachMenuProps;
     /** Flag to provide manual control over whether send button is disabled */
@@ -78,7 +101,12 @@ export interface MessageBarProps extends TextAreaProps {
     onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
     /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
     displayMode?: ChatbotDisplayMode;
+    /** Whether message bar is compact */
     isCompact?: boolean;
+    /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
+    innerRef?: React.Ref<HTMLTextAreaElement>;
 }
-export declare const MessageBar: React.FunctionComponent<MessageBarProps>;
+export declare const MessageBarBase: FunctionComponent<MessageBarProps>;
+declare const MessageBar: import("react").ForwardRefExoticComponent<MessageBarProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { MessageBar };
 export default MessageBar;