@patternfly/chatbot 6.9.0-prerelease.1 → 6.9.0-prerelease.11

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -172,81 +172,91 @@
 
 // Chatbot Header - Drawer
 // ----------------------------------------------------------------------------
+// Child combinators keep these rules off nested drawers such as canvas.
 .pf-chatbot__history.pf-v6-c-drawer {
-  --pf-v6-c-drawer__panel--MinWidth: 24rem;
-  --pf-v6-c-drawer__panel--xl--MinWidth: 24rem;
   height: 70vh;
 
   // Drawer panel
-  .pf-v6-c-drawer__panel {
+  > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+    --pf-v6-c-drawer__panel--MinWidth: 24rem;
+    --pf-v6-c-drawer__panel--xl--MinWidth: 24rem;
     --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+    --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+    --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--floating--default);
     --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--lg);
     --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
     --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
     overflow-x: hidden;
     overflow-y: hidden;
-  }
 
-  // Drawer head
-  .pf-v6-c-drawer__head {
-    --pf-v6-c-drawer__head--PaddingBlockStart: 0;
-    --pf-v6-c-drawer__head--PaddingBlockEnd: 0;
-    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
-    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+    // Drawer head
+    .pf-v6-c-drawer__head {
+      --pf-v6-c-drawer__head--PaddingBlockStart: 0;
+      --pf-v6-c-drawer__head--PaddingBlockEnd: 0;
+      --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+      --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
 
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: var(--pf-t--global--spacer--2xl);
-  }
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: var(--pf-t--global--spacer--2xl);
+    }
 
-  // Drawer actions
-  .pf-v6-c-drawer__actions {
-    --pf-v6-c-drawer__actions--MarginBlockStart: 0;
-    --pf-v6-c-drawer__actions--MarginInlineEnd: 0;
+    // Drawer actions
+    .pf-v6-c-drawer__actions {
+      --pf-v6-c-drawer__actions--MarginBlockStart: 0;
+      --pf-v6-c-drawer__actions--MarginInlineEnd: 0;
 
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    align-self: center;
-    width: 100%;
-    height: 100%;
-  }
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      align-self: center;
+      width: 100%;
+      height: 100%;
+    }
 
-  .pf-v6-c-drawer__actions--reversed {
-    flex-direction: row-reverse;
-  }
+    .pf-v6-c-drawer__actions--reversed {
+      flex-direction: row-reverse;
+    }
 
-  // Close drawer
-  .pf-v6-c-drawer__close {
-    .pf-v6-c-button {
-      width: var(--pf-t--global--spacer--2xl);
-      height: var(--pf-t--global--spacer--2xl);
-      border-radius: var(--pf-t--global--border--radius--pill);
-      justify-content: center;
-      align-items: center;
+    // Close drawer
+    .pf-v6-c-drawer__close {
+      .pf-v6-c-button {
+        width: var(--pf-t--global--spacer--2xl);
+        height: var(--pf-t--global--spacer--2xl);
+        border-radius: var(--pf-t--global--border--radius--pill);
+        justify-content: center;
+        align-items: center;
+      }
     }
-  }
 
-  // Drawer body
-  .pf-v6-c-drawer__body {
-    --pf-v6-c-drawer__panel__body--PaddingBlockStart: 0;
-    --pf-v6-c-drawer__panel__body--PaddingBlockEnd: 0;
-    --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
-    --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+    // Drawer body
+    .pf-v6-c-drawer__body {
+      --pf-v6-c-drawer__panel__body--PaddingBlockStart: 0;
+      --pf-v6-c-drawer__panel__body--PaddingBlockEnd: 0;
+      --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+      --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      height: 70vh;
+    }
 
+    // Resizable drawer spacing is different - needs manual adjustment for gaps between buttons, inputs, etc.
+    &.pf-m-resizable {
+      .pf-v6-c-drawer__panel-main {
+        row-gap: var(--pf-v6-c-drawer__panel--RowGap);
+      }
+    }
+  }
+
+  > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     height: 70vh;
   }
-
-  // Resizable drawer spacing is different - needs manual adjustment for gaps between buttons, inputs, etc.
-  .pf-v6-c-drawer__panel.pf-m-resizable {
-    .pf-v6-c-drawer__panel-main {
-      row-gap: var(--pf-v6-c-drawer__panel--RowGap);
-    }
-  }
 }
 
 .pf-chatbot:is(.pf-chatbot--drawer, .pf-chatbot--docked) .pf-chatbot__history {
@@ -279,7 +289,9 @@
 .pf-chatbot--fullscreen {
   .pf-chatbot__history.pf-v6-c-drawer {
     height: 100vh;
-    .pf-v6-c-drawer__body {
+
+    > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body,
+    > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__body {
       width: 100%;
     }
   }
@@ -291,11 +303,14 @@
 .pf-chatbot--embedded {
   .pf-chatbot__history.pf-v6-c-drawer {
     height: 100%;
-    .pf-v6-c-drawer__body {
+
+    > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body,
+    > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__body {
       width: 100%;
       height: 100%;
     }
-    .pf-v6-c-drawer__panel {
+
+    > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
       height: 100%;
     }
   }
@@ -327,37 +342,36 @@
 }
 
 .pf-chatbot__history.pf-m-compact {
-  .pf-v6-c-drawer__main {
-    .pf-v6-c-drawer__panel {
-      --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-      --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-      --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
-      --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-      --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--md);
-    }
+  > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+    --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+    --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--md);
 
     .pf-v6-c-drawer__body {
       --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
       --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
     }
+
+    .pf-v6-c-drawer__head {
+      --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+      --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+    }
+
+    .pf-v6-c-drawer__close {
+      .pf-v6-c-button {
+        width: 2rem;
+        height: 2rem;
+        --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+        --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+        --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+        --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+      }
+    }
   }
 
   .pf-chatbot__menu-item {
     font-size: var(--pf-t--global--font--size--body--md);
   }
-
-  .pf-v6-c-drawer__head {
-    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
-    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  }
-  .pf-v6-c-drawer__close {
-    .pf-v6-c-button {
-      width: 2rem;
-      height: 2rem;
-      --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
-      --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--xs);
-      --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
-      --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
-    }
-  }
 }

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -161,17 +161,23 @@ describe('ChatbotConversationHistoryNav', () => {
   });
 
   it('should close the drawer when escape key is pressed', async () => {
-    render(
-      <ChatbotConversationHistoryNav
-        onDrawerToggle={onDrawerToggle}
-        isDrawerOpen={true}
-        displayMode={ChatbotDisplayMode.fullscreen}
-        setIsDrawerOpen={jest.fn()}
-        reverseButtonOrder={false}
-        handleTextInputChange={jest.fn()}
-        conversations={initialConversations}
-      />
-    );
+    const HistoryNavigationTest = () => {
+      const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+
+      return (
+        <ChatbotConversationHistoryNav
+          onDrawerToggle={onDrawerToggle}
+          isDrawerOpen={isDrawerOpen}
+          displayMode={ChatbotDisplayMode.fullscreen}
+          setIsDrawerOpen={setIsDrawerOpen}
+          reverseButtonOrder={false}
+          handleTextInputChange={jest.fn()}
+          conversations={initialConversations}
+        />
+      );
+    };
+
+    render(<HistoryNavigationTest />);
 
     fireEvent.keyDown(screen.getByPlaceholderText(/Search/i), {
       key: 'Escape',
@@ -180,8 +186,8 @@ describe('ChatbotConversationHistoryNav', () => {
       charCode: 27
     });
 
-    waitFor(() => {
-      expect(screen.queryByText('ChatBot documentation')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('dialog', { hidden: true })).toHaveAttribute('hidden');
     });
   });
 
@@ -204,6 +210,19 @@ describe('ChatbotConversationHistoryNav', () => {
     );
   });
 
+  it('should keep an opaque panel background in glass theme', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-m-no-plain-on-glass');
+  });
+
   it('should accept drawerContentProps', () => {
     const { container } = render(
       <ChatbotConversationHistoryNav

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -683,6 +683,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
         aria-live="polite"
         focusTrap={{ enabled: true }}
         defaultSize="384px"
+        isNoPlainOnGlass
         {...drawerPanelContentProps}
       >
         {drawer}

package/src/ChatbotFooter/ChatbotFooternote.test.tsx

@@ -1,6 +1,9 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import ChatbotFootnote from './ChatbotFootnote';
 
+const POPOVER_CLOSE_ERROR =
+  'ChatbotFootnote: You must provide either the popover.cta or popover.showClose props in order to render a button that can close the popover.';
+
 describe('ChatbotFooternote', () => {
   const onClick = jest.fn();
   const popoverProps = {
@@ -20,11 +23,58 @@ describe('ChatbotFooternote', () => {
     }
   };
 
+  let consoleErrorSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
   it('should render ChatbotFooternote', () => {
     render(<ChatbotFootnote label="Chatbot footer" />);
     expect(screen.getByText('Chatbot footer')).toBeTruthy();
   });
 
+  it('should not log a console error when no popover is provided', () => {
+    render(<ChatbotFootnote label="Chatbot footer" />);
+    expect(consoleErrorSpy).not.toHaveBeenCalledWith(POPOVER_CLOSE_ERROR);
+  });
+
+  it('should not log a console error when popover has a cta', () => {
+    render(<ChatbotFootnote label="Chatbot footer" popover={popoverProps} />);
+    expect(consoleErrorSpy).not.toHaveBeenCalledWith(POPOVER_CLOSE_ERROR);
+  });
+
+  it('should not log a console error when popover has showClose', () => {
+    render(
+      <ChatbotFootnote
+        label="Chatbot footer"
+        popover={{
+          title: 'Verify accuracy',
+          description: 'description',
+          showClose: true
+        }}
+      />
+    );
+    expect(consoleErrorSpy).not.toHaveBeenCalledWith(POPOVER_CLOSE_ERROR);
+  });
+
+  it('should log a console error when popover is provided without cta or showClose', () => {
+    render(
+      <ChatbotFootnote
+        label="Chatbot footer"
+        popover={{
+          title: 'Verify accuracy',
+          description: 'description'
+        }}
+      />
+    );
+    expect(consoleErrorSpy).toHaveBeenCalledWith(POPOVER_CLOSE_ERROR);
+  });
+
   it('should render ChatbotFooternote with popover', async () => {
     render(<ChatbotFootnote label="Chatbot footer" popover={popoverProps} />);
 

package/src/ChatbotFooter/ChatbotFootnote.tsx

@@ -63,7 +63,7 @@ export const ChatbotFootnote: FunctionComponent<ChatbotFootnoteProps> = ({
   className,
   ...props
 }: ChatbotFootnoteProps) => {
-  if (!popover?.cta && !popover?.showClose) {
+  if (popover && !popover.cta && !popover.showClose) {
     // eslint-disable-next-line no-console
     console.error(
       'ChatbotFootnote: You must provide either the popover.cta or popover.showClose props in order to render a button that can close the popover.'

package/src/ChatbotModal/ChatbotModal.scss

@@ -27,13 +27,8 @@
   }
 }
 
-:root:where(.pf-v6-theme-glass) {
-  .pf-chatbot__chatbot-modal {
-    --pf-v6-c-modal-box--BackgroundColor: var(
-      --pf-t--global--background--color--glass--primary--default,
-      var(--pf-t--global--background--color--secondary--default)
-    );
-  }
+:root:where(.pf-v6-theme-glass) .pf-chatbot__code-modal {
+  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
 }
 
 // ============================================================================

package/src/ChatbotModal/ChatbotModal.tsx

@@ -32,6 +32,7 @@ export const ChatbotModal: FunctionComponent<ChatbotModalProps> = ({
       aria-describedby="chatbot-modal"
       className={`pf-chatbot__chatbot-modal pf-chatbot__chatbot-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className}`}
       backdropClassName="pf-chatbot__chatbot-modal-backdrop"
+      hasAnimations={false}
       {...props}
     >
       {children}

package/src/ChatbotToggle/ChatbotToggle.scss

@@ -5,6 +5,7 @@
   position: fixed;
   inset-block-end: var(--pf-t--global--spacer--md);
   inset-inline-end: var(--pf-t--global--spacer--md);
+  --pf-v6-c-button--BorderRadius: 0;
   --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
   --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--floating--clicked);
@@ -48,8 +49,8 @@
   }
 }
 
-.pf-chatbot__button--round {
-  border-radius: var(--pf-t--global--border--radius--pill);
+.pf-chatbot__button.pf-chatbot__button--round {
+  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
   width: 3rem;
   height: 3rem;
 }

package/src/ChatbotToggle/ChatbotToggle.test.tsx

@@ -38,6 +38,10 @@ describe('ChatbotToggle', () => {
     expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
     expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--round');
   });
+  it('should handle isRound correctly when false', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" isRound={false} />);
+    expect(screen.getByRole('button')).not.toHaveClass('pf-chatbot__button--round');
+  });
   it('should handle className correctly', () => {
     render(<ChatbotToggle tooltipLabel="Chatbot" className="test" />);
     expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss

@@ -30,6 +30,15 @@
     flex: 1;
     overflow: visible;
     height: 100%;
+    min-width: 0;
+ }
+
+  .pf-chatbot__prompt-suggestion-body {
+    overflow-wrap: anywhere;
+  }
+
+  .pf-chatbot__prompt-suggestion-title {
+    --pf-v6-c-card__title-text--OverflowWrap: anywhere;
   }
 }
 

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx

@@ -64,9 +64,11 @@ export const ChatbotWelcomePrompt: FunctionComponent<ChatbotWelcomePromptProps>
                 selectableActionAriaLabelledby: `welcome-prompt-title-${index}`
               }}
             >
-              <CardTitle id={`welcome-prompt-title-${index}`}>{prompt.title}</CardTitle>
+              <CardTitle className="pf-chatbot__prompt-suggestion-title" id={`welcome-prompt-title-${index}`}>
+                {prompt.title}
+              </CardTitle>
             </CardHeader>
-            {prompt.message && <CardBody>{prompt.message}</CardBody>}
+            {prompt.message && <CardBody className="pf-chatbot__prompt-suggestion-body">{prompt.message}</CardBody>}
           </Card>
         ))}
       </div>

package/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap

@@ -43,15 +43,11 @@ exports[`FileDetails should render file details 1`] = `
     <div
       class="pf-v6-l-flex pf-m-gap-xs"
     >
-      <div
-        class=""
-      >
+      <div>
         <div
           class="pf-v6-l-flex pf-m-column pf-m-gap-none"
         >
-          <div
-            class=""
-          >
+          <div>
             <span
               class="pf-chatbot__code-fileName"
             >

package/src/FileDetailsLabel/__snapshots__/FileDetailsLabel.test.tsx.snap

@@ -55,15 +55,11 @@ exports[`FileDetailsLabel should render file details label 1`] = `
             <div
               class="pf-v6-l-flex pf-m-gap-xs"
             >
-              <div
-                class=""
-              >
+              <div>
                 <div
                   class="pf-v6-l-flex pf-m-column pf-m-gap-none"
                 >
-                  <div
-                    class=""
-                  >
+                  <div>
                     <span
                       class="pf-chatbot__code-fileName"
                     >

package/src/Message/Message.scss

@@ -55,6 +55,7 @@
 
     // Author name
     .pf-chatbot__message-name {
+      display: flex;
       font-family: var(
         --pf-v6-c-content--heading--FontFamily,
         redhatdisplayvf,
@@ -65,6 +66,14 @@
       );
       font-weight: 600;
       font-size: var(--pf-t--global--font--size--sm);
+
+      // Truncate measures this container and treats textWidth >= parentWidth as
+      // truncated. This extra space keeps full names stay untruncated and out of
+      // the tab flow.
+      &::after {
+        content: '';
+        flex: 0 0 1px;
+      }
     }
 
     // Badge

package/src/MessageBar/AttachButton.scss

@@ -7,30 +7,13 @@
   width: 3rem;
   height: 3rem;
 
-  .pf-v6-c-button__icon {
-    color: var(--pf-t--global--icon--color--subtle);
-  }
-
-  // Interactive states
-  &:hover {
-    .pf-v6-c-button__icon {
-      color: var(--pf-t--global--icon--color--regular);
-    }
-  }
-
-  &:active,
-  &:focus {
+  &.pf-m-clicked,
+  &.pf-m-clicked:hover,
+  &.pf-m-clicked:focus {
     background-color: var(--pf-t--global--color--brand--clicked);
 
     .pf-v6-c-button__icon {
-      color: var(--pf-t--global--icon--color--inverse);
-    }
-
-    &:hover,
-    &:focus {
-      .pf-v6-c-button__icon {
-        color: var(--pf-t--global--icon--color--inverse);
-      }
+      color: var(--pf-t--global--icon--color--on-brand--default);
     }
   }
 }

package/src/MessageBar/MessageBar.scss

@@ -46,14 +46,14 @@
 
   &:hover {
     &::after {
-      border-color: var(--pf-t--global--border--color--control--hover);
+      border-color: var(--pf-t--global--border--color--hover);
       border-width: var(--pf-t--global--border--width--control--hover);
     }
   }
 
   &:focus-within {
     &::after {
-      border-color: var(--pf-t--global--border--color--control--clicked);
+      border-color: var(--pf-t--global--border--color--clicked);
       border-width: var(--pf-t--global--border--width--control--clicked);
     }
   }

package/src/MessageBar/MessageBar.test.tsx

@@ -191,6 +191,9 @@ describe('Message bar', () => {
         }}
       />
     );
+    const attachButton = screen.getByRole('button', { name: 'Attach' });
+    expect(attachButton).toHaveClass('pf-m-clicked');
+    expect(attachButton).toHaveAttribute('aria-expanded', 'true');
     expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
     expect(screen.getByRole('menuitem', { name: /auth-operator/i })).toBeTruthy();
     expect(screen.getByRole('menuitem', { name: /Alerts/i })).toBeTruthy();
@@ -224,6 +227,23 @@ describe('Message bar', () => {
     await userEvent.click(attachButton);
     expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
   });
+  it('can toggle attach menu without an optional toggle callback', async () => {
+    const setIsAttachMenuOpen = jest.fn();
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        attachMenuProps={{
+          isAttachMenuOpen: false,
+          setIsAttachMenuOpen,
+          attachMenuItems: ATTACH_MENU_ITEMS
+        }}
+      />
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
+
+    expect(setIsAttachMenuOpen).toHaveBeenCalledWith(true);
+  });
   it('can pass searchInputProps to search input in AttachMenu', () => {
     render(
       <MessageBar

package/src/MessageBar/MessageBar.tsx

@@ -28,7 +28,7 @@ export interface MessageBarWithAttachMenuProps {
   /** Items in menu */
   attachMenuItems: React.ReactNode;
   /** A callback for when the attachment menu toggle is clicked */
-  onAttachMenuToggleClick: () => void;
+  onAttachMenuToggleClick?: () => void;
   /** A callback for when the input value in the menu changes. */
   onAttachMenuInputChange?: (value: string) => void;
   /** Function callback called when user selects item in menu. */
@@ -368,7 +368,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
 
   const handleAttachMenuToggle = () => {
     attachMenuProps?.setIsAttachMenuOpen && attachMenuProps?.setIsAttachMenuOpen(!attachMenuProps?.isAttachMenuOpen);
-    attachMenuProps?.onAttachMenuToggleClick();
+    attachMenuProps?.onAttachMenuToggleClick?.();
   };
 
   const handleSpeechRecognition = (message) => {
@@ -419,6 +419,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
           validator={validator}
           dropzoneProps={dropzoneProps}
           {...buttonProps?.attach}
+          isClicked={attachMenuProps.isAttachMenuOpen}
+          aria-expanded={attachMenuProps.isAttachMenuOpen}
         />
       );
     }
@@ -523,7 +525,9 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
         {...(attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange })}
         popperProps={{ direction: 'up', distance: 8 }}
         searchInputPlaceholder={attachMenuProps?.attachMenuInputPlaceholder}
-        {...attachMenuProps}
+        menuSearchProps={attachMenuProps?.menuSearchProps}
+        menuSearchInputProps={attachMenuProps?.menuSearchInputProps}
+        searchInputProps={attachMenuProps?.searchInputProps}
       />
     );
   }