@patternfly/chatbot 6.3.0-prerelease.9 → 6.3.1

package/src/Message/QuickStarts/QuickStartTile.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { FC, ReactNode } from 'react';
 import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
 import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
 import {
@@ -53,7 +53,7 @@ export interface QuickStartTileProps {
   isCompact?: boolean;
 }
 
-const QuickStartTile: React.FC<QuickStartTileProps> = ({
+const QuickStartTile: FC<QuickStartTileProps> = ({
   className,
   quickStart,
   onClick,
@@ -71,7 +71,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
     spec: { icon, displayName, description, durationMinutes, prerequisites, link, type }
   } = quickStart;
 
-  let quickStartIcon: React.ReactNode;
+  let quickStartIcon: ReactNode;
   if (typeof icon === 'object') {
     quickStartIcon = <Icon size="2xl">{icon}</Icon>;
   } else {

package/src/Message/QuickStarts/QuickStartTileDescription.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/Message/QuickStarts/QuickStartTileDescription.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import type { FC } from 'react';
+import { useRef } from 'react';
 import { Button, Flex, pluralize, Popover } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
@@ -29,7 +30,7 @@ export function pluralizeWord(i: number, singular: string, plural?: string) {
   return `${i === 1 ? singular : plural}`;
 }
 
-const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
+const QuickStartTileDescription: FC<QuickStartTileDescriptionProps> = ({
   description,
   prerequisites,
   prerequisiteWord = 'Prerequisite',
@@ -37,7 +38,7 @@ const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
   quickStartButtonAriaLabel = 'Show prerequisites'
 }) => {
   const prereqs = prerequisites?.filter((p) => p);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const pluralizedPrereq = pluralizeWord(prereqs?.length || 0, prerequisiteWord, prerequisiteWordPlural);
   return (
     <>

package/src/Message/QuickStarts/QuickStartTileHeader.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Button, Flex } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
 
 interface QuickStartTileHeaderProps {
   /** Name for the header */
@@ -10,7 +10,7 @@ interface QuickStartTileHeaderProps {
   onSelect: (e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>) => void;
 }
 
-const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({ name, quickStartId, onSelect }) => (
+const QuickStartTileHeader: FunctionComponent<QuickStartTileHeaderProps> = ({ name, quickStartId, onSelect }) => (
   <Flex flexWrap={{ default: 'nowrap' }}>
     <Button data-test="title" id={quickStartId} variant="link" isInline onClick={onSelect}>
       {name}

package/src/Message/QuickStarts/types.ts

@@ -1,4 +1,5 @@
 import { ButtonProps } from '@patternfly/react-core';
+import type { ComponentType, ReactNode, SyntheticEvent } from 'react';
 
 // These types are all from the QuickStart extension.
 // We want to ensure parity, so be careful when adjusting these.
@@ -77,9 +78,9 @@ export interface QuickstartAction {
   /** Screen reader aria label. */
   'aria-label': string;
   /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
-  icon?: React.ComponentType<unknown>;
+  icon?: ComponentType<unknown>;
   /** Callback with synthetic event parameter. */
-  onClick?: (e: React.SyntheticEvent) => void;
+  onClick?: (e: SyntheticEvent) => void;
   /** Additional button props to be rendered as extra props. */
   buttonProps?: ButtonProps;
 }
@@ -95,7 +96,7 @@ export interface QuickStartSpec {
   version?: number;
   displayName: string;
   durationMinutes?: number;
-  icon: React.ReactNode;
+  icon: ReactNode;
   description: string;
   prerequisites?: string[];
   introduction?: string;

package/src/Message/TableMessage/TableMessage.tsx

@@ -2,7 +2,7 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
+import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Table, TableProps } from '@patternfly/react-table';
 
@@ -19,7 +19,7 @@ export interface TableNode {
   type: string;
 }
 
-const TableMessage = ({ children, ...props }: TableProps & ExtraProps) => {
+const TableMessage = ({ children, ...props }: Omit<TableProps, 'ref'> & ExtraProps) => {
   const { className, ...rest } = props;
 
   // This allows us to parse the nested data we get back from the 3rd party Markdown parser
@@ -53,9 +53,9 @@ const TableMessage = ({ children, ...props }: TableProps & ExtraProps) => {
   // This is somewhat opinionated and may break if 3rd party library changes
   // See Tr and Tbody for other usage
   const modifyChildren = (children) =>
-    React.Children.map(children, (child) => {
+    Children.map(children, (child) => {
       if (child && headerTextValues?.length > 0) {
-        return React.cloneElement(child, { extraHeaders: headerTextValues });
+        return cloneElement(child, { extraHeaders: headerTextValues });
       }
       return child;
     });

package/src/Message/TableMessage/TbodyMessage.tsx

@@ -2,15 +2,15 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
+import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Tbody, TbodyProps } from '@patternfly/react-table';
 
-const TbodyProps = ({ children, ...props }: TbodyProps & ExtraProps & { extraHeaders?: string[] }) => {
+const TbodyProps = ({ children, ...props }: Omit<TbodyProps, 'ref'> & ExtraProps & { extraHeaders?: string[] }) => {
   // passthrough so we can place dataLabel on tds
   const modifyChildren = (children) => {
     if (children && props.extraHeaders) {
-      return React.Children.map(children, (child) => React.cloneElement(child, { extraHeaders: props.extraHeaders }));
+      return Children.map(children, (child) => cloneElement(child, { extraHeaders: props.extraHeaders }));
     }
     return children;
   };

package/src/Message/TableMessage/TdMessage.tsx

@@ -2,10 +2,9 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Td, TdProps } from '@patternfly/react-table';
 
-const TdMessage = ({ children, ...props }: TdProps & ExtraProps) => <Td {...props}>{children}</Td>;
+const TdMessage = ({ children, ...props }: Omit<TdProps, 'ref'> & ExtraProps) => <Td {...props}>{children}</Td>;
 
 export default TdMessage;

package/src/Message/TableMessage/ThMessage.tsx

@@ -2,10 +2,9 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Th, ThProps } from '@patternfly/react-table';
 
-const ThMessage = ({ children, ...props }: ThProps & ExtraProps) => <Th {...props}>{children}</Th>;
+const ThMessage = ({ children, ...props }: Omit<ThProps, 'ref'> & ExtraProps) => <Th {...props}>{children}</Th>;
 
 export default ThMessage;

package/src/Message/TableMessage/TheadMessage.tsx

@@ -2,10 +2,11 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Thead, TheadProps } from '@patternfly/react-table';
 
-const TheadMessage = ({ children, ...props }: TheadProps & ExtraProps) => <Thead {...props}>{children}</Thead>;
+const TheadMessage = ({ children, ...props }: Omit<TheadProps, 'ref'> & ExtraProps) => (
+  <Thead {...props}>{children}</Thead>
+);
 
 export default TheadMessage;

package/src/Message/TableMessage/TrMessage.tsx

@@ -2,19 +2,19 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
+import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Tr, TrProps } from '@patternfly/react-table';
 
-const TrMessage = ({ children, ...props }: TrProps & ExtraProps & { extraHeaders?: string[] }) => {
+const TrMessage = ({ children, ...props }: Omit<TrProps, 'ref'> & ExtraProps & { extraHeaders?: string[] }) => {
   let tdIndex = 0;
 
   // passthrough so we can place dataLabel on tds
   // places column name on correct child
   const modifyChildren = (children) =>
-    React.Children.map(children, (child) => {
+    Children.map(children, (child) => {
       if (child.type.name === 'td' && props.extraHeaders) {
-        const clonedChild = React.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
+        const clonedChild = cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
         tdIndex = tdIndex + 1;
         return clonedChild;
       }

package/src/Message/TextMessage/TextMessage.scss

@@ -3,6 +3,8 @@
 // ============================================================================
 
 .pf-chatbot__message-and-actions {
+  width: 100%;
+
   blockquote {
     .pf-chatbot__message-text {
       display: inline-block;
@@ -10,11 +12,6 @@
   }
 }
 
-// make it full width when there's a table, so the table can grow as needed
-.pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
-  width: 100%;
-}
-
 // Need to inline shorter text
 .pf-chatbot__message-text {
   width: fit-content;

package/src/Message/TextMessage/TextMessage.tsx

@@ -2,11 +2,10 @@
 // Chatbot Main - Message - Content - Text
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Content, ContentProps } from '@patternfly/react-core';
 
-const TextMessage = ({ component, children, ...props }: ContentProps & ExtraProps) => (
+const TextMessage = ({ component, children, ...props }: Omit<ContentProps, 'ref'> & ExtraProps) => (
   <span className="pf-chatbot__message-text">
     <Content component={component} {...props}>
       {children}

package/src/Message/UserFeedback/CloseButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Messages - Close Button
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps } from '@patternfly/react-core';
@@ -14,7 +14,7 @@ export interface CloseButtonProps extends ButtonProps {
   ariaLabel?: string;
 }
 
-const CloseButton: React.FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
+const CloseButton: FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
   <Button variant="plain" onClick={onClose} icon={<CloseIcon />} aria-label={ariaLabel} />
 );
 

package/src/Message/UserFeedback/UserFeedback.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Main - Messages - Feedback Card
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
+
+import { useState, useRef, useEffect } from 'react';
 
 // Import PatternFly components
 import {
@@ -54,7 +56,7 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
   timestamp?: string;
 }
 
-const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
+const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   className,
   timestamp,
   title = 'Why did you choose this rating?',
@@ -74,11 +76,11 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
   isCompact,
   ...props
 }: UserFeedbackProps) => {
-  const [selectedResponse, setSelectedResponse] = React.useState<string>();
-  const [value, setValue] = React.useState('');
-  const divRef = React.useRef<HTMLDivElement>(null);
+  const [selectedResponse, setSelectedResponse] = useState<string>();
+  const [value, setValue] = useState('');
+  const divRef = useRef<HTMLDivElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (focusOnLoad) {
       divRef.current?.focus();
     }

package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { act, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/Message/UserFeedback/UserFeedbackComplete.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Main - Messages - Feedback Complete Card
 // ============================================================================
-import React from 'react';
+import type { MouseEvent as ReactMouseEvent, FunctionComponent } from 'react';
+
+import { useState, useRef, useEffect } from 'react';
 
 // Import PatternFly components
 import { Card, CardBody, CardHeader, CardProps, CardTitle, OUIAProps, useOUIAProps } from '@patternfly/react-core';
@@ -46,7 +48,7 @@ export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAP
   timestamp?: string;
 }
 
-const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> = ({
+const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps> = ({
   className,
   title = 'Feedback submitted',
   body = "We've received your response. Thank you for sharing your feedback!",
@@ -66,21 +68,21 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
   isCompact,
   ...props
 }: UserFeedbackCompleteProps) => {
-  const [timedOut, setTimedOut] = React.useState(false);
-  const [timedOutAnimation, setTimedOutAnimation] = React.useState(true);
-  const [isMouseOver, setIsMouseOver] = React.useState<boolean | undefined>();
-  const [containsFocus, setContainsFocus] = React.useState<boolean | undefined>();
+  const [timedOut, setTimedOut] = useState(false);
+  const [timedOutAnimation, setTimedOutAnimation] = useState(true);
+  const [isMouseOver, setIsMouseOver] = useState<boolean | undefined>();
+  const [containsFocus, setContainsFocus] = useState<boolean | undefined>();
   const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
-  const divRef = React.useRef<HTMLDivElement>(null);
+  const divRef = useRef<HTMLDivElement>(null);
   const ouiaProps = useOUIAProps('User Feedback Complete', ouiaId, ouiaSafe);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (focusOnLoad) {
       divRef.current?.focus();
     }
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const calculatedTimeout = timeout === true ? 8000 : Number(timeout);
     if (calculatedTimeout > 0) {
       const timer = setTimeout(() => setTimedOut(true), calculatedTimeout);
@@ -88,7 +90,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
     }
   }, [timeout]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onDocumentFocus = () => {
       if (divRef.current) {
         if (divRef.current.contains(document.activeElement)) {
@@ -103,14 +105,14 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
     return () => document.removeEventListener('focus', onDocumentFocus, true);
   }, [containsFocus]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (containsFocus === false || isMouseOver === false) {
       const timer = setTimeout(() => setTimedOutAnimation(true), timeoutAnimation);
       return () => clearTimeout(timer);
     }
   }, [containsFocus, isMouseOver, timeoutAnimation]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dismissed && onTimeout && onTimeout();
   }, [dismissed, onTimeout]);
 
@@ -118,13 +120,13 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
     return null;
   }
 
-  const myOnMouseEnter = (ev: React.MouseEvent<HTMLDivElement>) => {
+  const myOnMouseEnter = (ev: ReactMouseEvent<HTMLDivElement>) => {
     setIsMouseOver(true);
     setTimedOutAnimation(false);
     onMouseEnter && onMouseEnter(ev);
   };
 
-  const myOnMouseLeave = (ev: React.MouseEvent<HTMLDivElement>) => {
+  const myOnMouseLeave = (ev: ReactMouseEvent<HTMLDivElement>) => {
     setIsMouseOver(false);
     onMouseLeave && onMouseLeave(ev);
   };

package/src/Message/index.ts

@@ -1,3 +1,4 @@
 export { default } from './Message';
+export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
 
 export * from './Message';

package/src/MessageBar/AttachButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
@@ -7,11 +6,11 @@ import { AttachButton } from './AttachButton';
 describe('Attach button', () => {
   it('should render button correctly', () => {
     render(<AttachButton />);
-    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
   });
   it('should handle isDisabled prop', () => {
     render(<AttachButton isDisabled />);
-    expect(screen.getByRole('button', { name: 'Attach button' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Attach' })).toBeDisabled();
   });
   it('should handle spread props, including aria-label', () => {
     render(<AttachButton aria-label="test" />);
@@ -20,22 +19,22 @@ describe('Attach button', () => {
   it('should handle onClick', async () => {
     const spy = jest.fn();
     render(<AttachButton onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should handle className prop', () => {
     render(<AttachButton className="test" />);
-    expect(screen.getByRole('button', { name: 'Attach button' })).toHaveClass('test');
+    expect(screen.getByRole('button', { name: 'Attach' })).toHaveClass('test');
   });
   it('should handle custom tooltip correctly', async () => {
     render(<AttachButton onClick={jest.fn} tooltipContent="Test" />);
-    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
   it('should handle tooltipProps prop', async () => {
     render(<AttachButton tooltipProps={{ id: 'test' }} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     expect(screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
   });
   // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
@@ -43,7 +42,7 @@ describe('Attach button', () => {
   it('should handle onAttachAccepted prop', async () => {
     const spy = jest.fn();
     render(<AttachButton onAttachAccepted={spy} inputTestId="input" />);
-    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     const file = new File(['test'], 'test.json');
     const input = screen.getByTestId('input') as HTMLInputElement;
     await userEvent.upload(input, file);
@@ -54,4 +53,124 @@ describe('Attach button', () => {
     render(<AttachButton isCompact data-testid="button" />);
     expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
   });
+
+  it('should set correct accept attribute on file input', async () => {
+    render(<AttachButton inputTestId="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    expect(input).toHaveAttribute('accept', 'text/plain,.txt');
+  });
+
+  it('should call onAttachAccepted when file type is accepted', async () => {
+    const onAttachAccepted = jest.fn();
+    render(
+      <AttachButton
+        inputTestId="input"
+        allowedFileTypes={{ 'text/plain': ['.txt'] }}
+        onAttachAccepted={onAttachAccepted}
+      />
+    );
+
+    const file = new File(['hello'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachAccepted).toHaveBeenCalled();
+    const [attachedFile] = onAttachAccepted.mock.calls[0][0];
+    expect(attachedFile).toEqual(file);
+  });
+
+  it('should not call onAttachAccepted when file type is not accepted', async () => {
+    const onAttachAccepted = jest.fn();
+    render(
+      <AttachButton
+        inputTestId="input"
+        allowedFileTypes={{ 'text/plain': ['.txt'] }}
+        onAttachAccepted={onAttachAccepted}
+      />
+    );
+
+    const file = new File(['[]'], 'example.json', { type: 'application/json' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachAccepted).not.toHaveBeenCalled();
+  });
+
+  it('should respect minSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" minSize={1000} onAttachRejected={onAttachRejected} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" maxSize={100} onAttachRejected={onAttachRejected} />);
+
+    const largeContent = 'x'.repeat(200);
+    const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxFiles restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" maxFiles={1} onAttachRejected={onAttachRejected} />);
+
+    const files = [
+      new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+      new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+    ];
+
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, files);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should be disabled when isAttachmentDisabled is true', async () => {
+    const onFileDrop = jest.fn();
+    render(<AttachButton inputTestId="input" isAttachmentDisabled={true} />);
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
+
+  it('should call onAttach when files are attached', async () => {
+    const onAttach = jest.fn();
+    render(<AttachButton inputTestId="input" onAttach={onAttach} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttach).toHaveBeenCalled();
+  });
+  it('should use custom validator when provided', async () => {
+    const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" validator={validator} onAttachRejected={onAttachRejected} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, file);
+
+    expect(validator).toHaveBeenCalledWith(file);
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
 });