@patternfly/chatbot 6.3.0-prerelease.19 → 6.3.0-prerelease.20

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

@@ -22,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 */
@@ -79,6 +79,7 @@ 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;
     /** 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.
@@ -86,6 +87,10 @@ export interface MessageBarProps extends TextAreaProps {
      *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
      **/
     allowedFileTypes?: Accept;
+    /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
+    innerRef?: React.Ref<HTMLTextAreaElement>;
 }
-export declare const MessageBar: FunctionComponent<MessageBarProps>;
+export declare const MessageBarBase: FunctionComponent<MessageBarProps>;
+declare const MessageBar: import("react").ForwardRefExoticComponent<MessageBarProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { MessageBar };
 export default MessageBar;

package/dist/cjs/MessageBar/MessageBar.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageBar = void 0;
+exports.MessageBar = exports.MessageBarBase = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
@@ -24,14 +24,16 @@ const MicrophoneButton_1 = __importDefault(require("./MicrophoneButton"));
 const AttachButton_1 = require("./AttachButton");
 const AttachMenu_1 = __importDefault(require("../AttachMenu"));
 const StopButton_1 = __importDefault(require("./StopButton"));
-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, allowedFileTypes } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes"]);
+const MessageBarBase = (_a) => {
+    var _b;
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, innerRef } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "innerRef"]);
     // Text Input
     // --------------------------------------------------------------------------
     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 inputRef = (0, react_1.useRef)(null);
+    const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
     const attachButtonRef = (0, react_1.useRef)(null);
     const topMargin = '1rem';
     const setInitialLineHeight = (field) => {
@@ -193,5 +195,7 @@ const MessageBar = (_a) => {
     }
     return (0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents });
 };
+exports.MessageBarBase = MessageBarBase;
+const MessageBar = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.MessageBarBase, Object.assign({ innerRef: ref }, props))));
 exports.MessageBar = MessageBar;
-exports.default = exports.MessageBar;
+exports.default = MessageBar;

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

@@ -18,6 +18,7 @@ const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
 const react_1 = require("@testing-library/react");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const react_2 = require("react");
 const SourceDetailsMenuItem_1 = __importDefault(require("../SourceDetailsMenuItem"));
 const MessageBar_1 = require("./MessageBar");
 const ATTACH_MENU_ITEMS = [
@@ -261,4 +262,11 @@ describe('Message bar', () => {
         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');
     });
+    it('should focus textarea when using a custom ref', () => {
+        var _a;
+        const ref = (0, react_2.createRef)();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, innerRef: ref }));
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        expect(document.activeElement).toBe(react_1.screen.getByRole('textbox'));
+    });
 });

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

@@ -22,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 */
@@ -79,6 +79,7 @@ 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;
     /** 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.
@@ -86,6 +87,10 @@ export interface MessageBarProps extends TextAreaProps {
      *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
      **/
     allowedFileTypes?: Accept;
+    /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
+    innerRef?: React.Ref<HTMLTextAreaElement>;
 }
-export declare const MessageBar: FunctionComponent<MessageBarProps>;
+export declare const MessageBarBase: FunctionComponent<MessageBarProps>;
+declare const MessageBar: import("react").ForwardRefExoticComponent<MessageBarProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { MessageBar };
 export default MessageBar;

package/dist/esm/MessageBar/MessageBar.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 // Import Chatbot components
 import SendButton from './SendButton';
@@ -18,14 +18,16 @@ import MicrophoneButton from './MicrophoneButton';
 import { AttachButton } from './AttachButton';
 import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
-export 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, allowedFileTypes } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes"]);
+export const MessageBarBase = (_a) => {
+    var _b;
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, innerRef } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "innerRef"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = useState(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = useState(false);
     const [hasSentMessage, setHasSentMessage] = useState(false);
-    const textareaRef = useRef(null);
+    const inputRef = useRef(null);
+    const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
     const attachButtonRef = useRef(null);
     const topMargin = '1rem';
     const setInitialLineHeight = (field) => {
@@ -187,4 +189,6 @@ export const MessageBar = (_a) => {
     }
     return _jsx("div", { className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents });
 };
+const MessageBar = forwardRef((props, ref) => (_jsx(MessageBarBase, Object.assign({ innerRef: ref }, props))));
+export { MessageBar };
 export default MessageBar;

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

@@ -13,6 +13,7 @@ import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-cor
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
 import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
 import { MessageBar } from './MessageBar';
 const ATTACH_MENU_ITEMS = [
@@ -256,4 +257,11 @@ describe('Message bar', () => {
         expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
         expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
     });
+    it('should focus textarea when using a custom ref', () => {
+        var _a;
+        const ref = createRef();
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, innerRef: ref }));
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        expect(document.activeElement).toBe(screen.getByRole('textbox'));
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.3.0-prerelease.19",
+  "version": "6.3.0-prerelease.20",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/MessageBar/MessageBar.test.tsx

@@ -3,6 +3,7 @@ import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-cor
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
 import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
 import { MessageBar } from './MessageBar';
 
@@ -380,4 +381,10 @@ describe('Message bar', () => {
     expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
     expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
   });
+  it('should focus textarea when using a custom ref', () => {
+    const ref = createRef<HTMLTextAreaElement>();
+    render(<MessageBar onSendMessage={jest.fn} innerRef={ref} />);
+    ref.current?.focus();
+    expect(document.activeElement).toBe(screen.getByRole('textbox'));
+  });
 });

package/src/MessageBar/MessageBar.tsx

@@ -1,5 +1,5 @@
-import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Accept } from 'react-dropzone/.';
 import { ButtonProps, DropEvent, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 
@@ -32,7 +32,7 @@ export interface MessageBarWithAttachMenuProps {
   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 */
@@ -78,6 +78,7 @@ 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;
   /** 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.
@@ -85,9 +86,11 @@ export interface MessageBarProps extends TextAreaProps {
    *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
    **/
   allowedFileTypes?: Accept;
+  /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
+  innerRef?: React.Ref<HTMLTextAreaElement>;
 }
 
-export const MessageBar: FunctionComponent<MessageBarProps> = ({
+export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   onSendMessage,
   className,
   alwayShowSendButton,
@@ -106,6 +109,7 @@ export const MessageBar: FunctionComponent<MessageBarProps> = ({
   value,
   isCompact = false,
   allowedFileTypes,
+  innerRef,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -113,7 +117,8 @@ export const MessageBar: FunctionComponent<MessageBarProps> = ({
   const [message, setMessage] = useState<string | number>(value ?? '');
   const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
   const attachButtonRef = useRef<HTMLButtonElement>(null);
 
   const topMargin = '1rem';
@@ -391,4 +396,9 @@ export const MessageBar: FunctionComponent<MessageBarProps> = ({
   return <div className={`pf-chatbot__message-bar ${className ?? ''}`}>{messageBarContents}</div>;
 };
 
+const MessageBar = forwardRef((props: MessageBarProps, ref: Ref<HTMLTextAreaElement>) => (
+  <MessageBarBase innerRef={ref} {...props} />
+));
+
+export { MessageBar };
 export default MessageBar;