@patternfly/chatbot 6.5.0-prerelease.2 → 6.5.0-prerelease.4

package/src/MessageBar/MessageBar.test.tsx

@@ -1,5 +1,11 @@
 import '@testing-library/jest-dom';
-import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import {
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  MenuSearchInputProps,
+  MenuSearchProps
+} from '@patternfly/react-core';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -218,6 +224,57 @@ describe('Message bar', () => {
     await userEvent.click(attachButton);
     expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
   });
+  it('can pass searchInputProps to search input in AttachMenu', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        value="test"
+        attachMenuProps={{
+          isAttachMenuOpen: true,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: jest.fn(),
+          onAttachMenuInputChange: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS,
+          searchInputProps: { isDisabled: true }
+        }}
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeDisabled();
+  });
+  it('can pass menuSearchProps to search input in AttachMenu', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        value="test"
+        attachMenuProps={{
+          isAttachMenuOpen: true,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: jest.fn(),
+          onAttachMenuInputChange: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS,
+          menuSearchProps: { 'data-testid': 'menu-search' } as MenuSearchProps
+        }}
+      />
+    );
+    expect(screen.getByTestId('menu-search')).toBeTruthy();
+  });
+  it('can pass menuSearchInputProps to search input in AttachMenu', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        value="test"
+        attachMenuProps={{
+          isAttachMenuOpen: true,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: jest.fn(),
+          onAttachMenuInputChange: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS,
+          menuSearchInputProps: { 'data-testid': 'menu-search-input' } as MenuSearchInputProps
+        }}
+      />
+    );
+    expect(screen.getByTestId('menu-search-input')).toBeTruthy();
+  });
   it('can hide attach button', () => {
     render(<MessageBar onSendMessage={jest.fn} hasAttachButton={false} />);
     expect(screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
@@ -387,4 +444,8 @@ describe('Message bar', () => {
     ref.current?.focus();
     expect(document.activeElement).toBe(screen.getByRole('textbox'));
   });
+  it('should handle isPrimary', () => {
+    const { container } = render(<MessageBar isPrimary onSendMessage={jest.fn} />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
 });

package/src/MessageBar/MessageBar.tsx

@@ -1,7 +1,15 @@
 import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
-import { ButtonProps, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import {
+  ButtonProps,
+  MenuSearchInputProps,
+  MenuSearchProps,
+  SearchInputProps,
+  TextArea,
+  TextAreaProps,
+  TooltipProps
+} from '@patternfly/react-core';
 
 // Import Chatbot components
 import SendButton from './SendButton';
@@ -30,6 +38,12 @@ export interface MessageBarWithAttachMenuProps {
   onAttachMenuOnOpenChangeKeys?: string[];
   /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
   onAttachMenuOpenChange?: (isOpen: boolean) => void;
+  /** Additional props passed to MenuSearch component in attach menu */
+  menuSearchProps?: Omit<MenuSearchProps, 'ref'>;
+  /** Additional props passed to MenuSearchInput component in attach menu */
+  menuSearchInputProps?: Omit<MenuSearchInputProps, 'ref'>;
+  /** Additional props passed to SearchInput component in attach menu */
+  searchInputProps?: SearchInputProps;
 }
 
 export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
@@ -104,6 +118,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   isCompact?: boolean;
   /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
   innerRef?: React.Ref<HTMLTextAreaElement>;
+  /** Sets background color to primary */
+  isPrimary?: boolean;
 }
 
 export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
@@ -134,6 +150,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   validator,
   dropzoneProps,
   innerRef,
+  isPrimary,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -449,11 +466,16 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
         {...(attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange })}
         popperProps={{ direction: 'up', distance: 8 }}
         searchInputPlaceholder={attachMenuProps?.attachMenuInputPlaceholder}
+        {...attachMenuProps}
       />
     );
   }
 
-  return <div className={`pf-chatbot__message-bar ${className ?? ''}`}>{messageBarContents}</div>;
+  return (
+    <div className={`pf-chatbot__message-bar ${isPrimary ? 'pf-m-primary' : ''} ${className ?? ''}`}>
+      {messageBarContents}
+    </div>
+  );
 };
 
 const MessageBar = forwardRef((props: MessageBarProps, ref: Ref<HTMLTextAreaElement>) => (

package/src/__mocks__/rehype-highlight.ts

@@ -0,0 +1,3 @@
+const rehypeHighlight = () => (tree) => tree;
+
+export default rehypeHighlight;