feat(AttachMenu): Allow disabling search input (#750)

Author: rebeccaalpert

packages/module/src/AttachMenu/AttachMenu.tsx

@@ -21,7 +21,7 @@ export interface AttachMenuProps extends DropdownProps {
   /** Items in menu */
   filteredItems: React.ReactNode;
   /** A callback for when the input value changes. */
-  handleTextInputChange: (value: string) => void;
+  handleTextInputChange?: (value: string) => void;
   /** Flag to indicate if menu is opened. */
   isOpen: boolean;
   /** Additional properties to pass to the Popper */
@@ -73,16 +73,18 @@ export const AttachMenu: FunctionComponent<AttachMenuProps> = ({
     onSelect={onSelect}
     {...props}
   >
-    <MenuSearch {...menuSearchProps}>
-      <MenuSearchInput {...menuSearchInputProps}>
-        <SearchInput
-          aria-label={searchInputAriaLabel}
-          onChange={(_event, value) => handleTextInputChange(value)}
-          placeholder={searchInputPlaceholder}
-          {...searchInputProps}
-        />
-      </MenuSearchInput>
-    </MenuSearch>
+    {handleTextInputChange && (
+      <MenuSearch {...menuSearchProps}>
+        <MenuSearchInput {...menuSearchInputProps}>
+          <SearchInput
+            aria-label={searchInputAriaLabel}
+            onChange={(_event, value) => handleTextInputChange(value)}
+            placeholder={searchInputPlaceholder}
+            {...searchInputProps}
+          />
+        </MenuSearchInput>
+      </MenuSearch>
+    )}
     {filteredItems}
   </Dropdown>
 );

packages/module/src/MessageBar/MessageBar.test.tsx

@@ -275,6 +275,20 @@ describe('Message bar', () => {
     );
     expect(screen.getByTestId('menu-search-input')).toBeTruthy();
   });
+  it('can remove input from attach menu', async () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        attachMenuProps={{
+          isAttachMenuOpen: true,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS
+        }}
+      />
+    );
+    expect(screen.queryByRole('textbox', { name: /Filter menu items/i })).not.toBeInTheDocument();
+  });
   it('can hide attach button', () => {
     render(<MessageBar onSendMessage={jest.fn} hasAttachButton={false} />);
     expect(screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();

packages/module/src/MessageBar/MessageBar.tsx

@@ -29,7 +29,7 @@ export interface MessageBarWithAttachMenuProps {
   /** A callback for when the attachment menu toggle is clicked */
   onAttachMenuToggleClick: () => void;
   /** A callback for when the input value in the menu changes. */
-  onAttachMenuInputChange: (value: string) => void;
+  onAttachMenuInputChange?: (value: string) => void;
   /** Function callback called when user selects item in menu. */
   onAttachMenuSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
   /** Placeholder for search input */