diff --git a/packages/module/src/AttachMenu/AttachMenu.tsx b/packages/module/src/AttachMenu/AttachMenu.tsx index 0af454e27..91339fcd5 100644 --- a/packages/module/src/AttachMenu/AttachMenu.tsx +++ b/packages/module/src/AttachMenu/AttachMenu.tsx @@ -11,7 +11,10 @@ import { DropdownProps, Dropdown, DropdownToggleProps, - PopperOptions + PopperOptions, + MenuSearchInputProps, + SearchInputProps, + MenuSearchProps } from '@patternfly/react-core'; export interface AttachMenuProps extends DropdownProps { @@ -35,6 +38,12 @@ export interface AttachMenuProps extends DropdownProps { searchInputAriaLabel?: string; /** Toggle to be rendered */ toggle: DropdownToggleProps | ((toggleRef: React.RefObject) => React.ReactNode); + /** Additional props passed to MenuSearch component */ + menuSearchProps?: Omit; + /** Additional props passed to MenuSearchInput component */ + menuSearchInputProps?: Omit; + /** Additional props passed to SearchInput component */ + searchInputProps?: SearchInputProps; } export const AttachMenu: FunctionComponent = ({ @@ -49,6 +58,9 @@ export const AttachMenu: FunctionComponent = ({ searchInputPlaceholder, searchInputAriaLabel = 'Filter menu items', toggle, + menuSearchProps, + menuSearchInputProps, + searchInputProps, ...props }: AttachMenuProps) => ( = ({ onSelect={onSelect} {...props} > - - + + handleTextInputChange(value)} placeholder={searchInputPlaceholder} + {...searchInputProps} /> diff --git a/packages/module/src/MessageBar/MessageBar.test.tsx b/packages/module/src/MessageBar/MessageBar.test.tsx index 84cf51fa6..e585ef5d3 100644 --- a/packages/module/src/MessageBar/MessageBar.test.tsx +++ b/packages/module/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( + + ); + expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeDisabled(); + }); + it('can pass menuSearchProps to search input in AttachMenu', () => { + render( + + ); + expect(screen.getByTestId('menu-search')).toBeTruthy(); + }); + it('can pass menuSearchInputProps to search input in AttachMenu', () => { + render( + + ); + expect(screen.getByTestId('menu-search-input')).toBeTruthy(); + }); it('can hide attach button', () => { render(); expect(screen.queryByRole('button', { name: 'Attach' })).toBeFalsy(); diff --git a/packages/module/src/MessageBar/MessageBar.tsx b/packages/module/src/MessageBar/MessageBar.tsx index 037c6b9aa..51dd7feb4 100644 --- a/packages/module/src/MessageBar/MessageBar.tsx +++ b/packages/module/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; + /** Additional props passed to MenuSearchInput component in attach menu */ + menuSearchInputProps?: Omit; + /** Additional props passed to SearchInput component in attach menu */ + searchInputProps?: SearchInputProps; } export interface MessageBarProps extends Omit { @@ -449,6 +463,7 @@ export const MessageBarBase: FunctionComponent = ({ {...(attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange })} popperProps={{ direction: 'up', distance: 8 }} searchInputPlaceholder={attachMenuProps?.attachMenuInputPlaceholder} + {...attachMenuProps} /> ); }