@patternfly/chatbot 2.2.0-prerelease.23 → 2.2.0-prerelease.24

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps, DropEvent } from '@patternfly/react-core';
+import { ButtonProps, DropEvent, TextAreaProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
     /** Flag to enable whether attach menu is open */
@@ -21,9 +21,9 @@ 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 {
+export interface MessageBarProps extends TextAreaProps {
     /** Callback to get the value of input message by user */
-    onSendMessage: (message: string) => void;
+    onSendMessage: (message: string | number) => void;
     /** Class Name for the MessageBar component */
     className?: string;
     /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
@@ -67,7 +67,7 @@ export interface MessageBarProps {
         };
     };
     /** A callback for when the text area value changes. */
-    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+    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;
 }

package/dist/cjs/MessageBar/MessageBar.js

@@ -24,10 +24,10 @@ const AttachButton_1 = require("./AttachButton");
 const AttachMenu_1 = __importDefault(require("../AttachMenu"));
 const StopButton_1 = __importDefault(require("./StopButton"));
 const MessageBar = (_a) => {
-    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode"]);
+    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
     // Text Input
     // --------------------------------------------------------------------------
-    const [message, setMessage] = react_1.default.useState('');
+    const [message, setMessage] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = react_1.default.useState(false);
     const [hasSentMessage, setHasSentMessage] = react_1.default.useState(false);
     const textareaRef = react_1.default.useRef(null);

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

@@ -234,4 +234,12 @@ describe('Message bar', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));
         yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Test' }));
     }));
+    it('can be controlled', () => {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test" }));
+        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(react_2.screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+        expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
+    });
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps, DropEvent } from '@patternfly/react-core';
+import { ButtonProps, DropEvent, TextAreaProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
     /** Flag to enable whether attach menu is open */
@@ -21,9 +21,9 @@ 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 {
+export interface MessageBarProps extends TextAreaProps {
     /** Callback to get the value of input message by user */
-    onSendMessage: (message: string) => void;
+    onSendMessage: (message: string | number) => void;
     /** Class Name for the MessageBar component */
     className?: string;
     /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
@@ -67,7 +67,7 @@ export interface MessageBarProps {
         };
     };
     /** A callback for when the text area value changes. */
-    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+    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;
 }

package/dist/esm/MessageBar/MessageBar.js

@@ -18,10 +18,10 @@ import { AttachButton } from './AttachButton';
 import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
 export const MessageBar = (_a) => {
-    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode"]);
+    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
     // Text Input
     // --------------------------------------------------------------------------
-    const [message, setMessage] = React.useState('');
+    const [message, setMessage] = React.useState(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = React.useState(false);
     const [hasSentMessage, setHasSentMessage] = React.useState(false);
     const textareaRef = React.useRef(null);

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

@@ -229,4 +229,12 @@ describe('Message bar', () => {
         render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));
         yield userEvent.click(screen.getByRole('button', { name: 'Test' }));
     }));
+    it('can be controlled', () => {
+        render(React.createElement(MessageBar, { onSendMessage: jest.fn, value: "test" }));
+        expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+        expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.23",
+  "version": "2.2.0-prerelease.24",
   "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

@@ -315,4 +315,12 @@ describe('Message bar', () => {
     );
     await userEvent.click(screen.getByRole('button', { name: 'Test' }));
   });
+  it('can be controlled', () => {
+    render(<MessageBar onSendMessage={jest.fn} value="test" />);
+    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+    expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+    expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
+  });
 });

package/src/MessageBar/MessageBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps, DropEvent, TextArea } from '@patternfly/react-core';
+import { ButtonProps, DropEvent, TextArea, TextAreaProps } from '@patternfly/react-core';
 
 // Import Chatbot components
 import SendButton from './SendButton';
@@ -30,9 +30,9 @@ export interface MessageBarWithAttachMenuProps {
   onAttachMenuOpenChange?: (isOpen: boolean) => void;
 }
 
-export interface MessageBarProps {
+export interface MessageBarProps extends TextAreaProps {
   /** Callback to get the value of input message by user */
-  onSendMessage: (message: string) => void;
+  onSendMessage: (message: string | number) => void;
   /** Class Name for the MessageBar component */
   className?: string;
   /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
@@ -63,7 +63,7 @@ export interface MessageBarProps {
     };
   };
   /** A callback for when the text area value changes. */
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+  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;
 }
@@ -82,11 +82,12 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   buttonProps,
   onChange,
   displayMode,
+  value,
   ...props
 }: MessageBarProps) => {
   // Text Input
   // --------------------------------------------------------------------------
-  const [message, setMessage] = React.useState<string>('');
+  const [message, setMessage] = React.useState<string | number>(value ?? '');
   const [isListeningMessage, setIsListeningMessage] = React.useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = React.useState(false);
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);