@patternfly/chatbot 6.3.0-prerelease.8 → 6.3.0

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { FunctionComponent, Ref } from 'react';
+import { useState } from 'react';
 
 import {
   Tooltip,
@@ -7,7 +8,8 @@ import {
   DropdownProps,
   MenuToggle,
   MenuToggleElement,
-  Icon
+  Icon,
+  MenuToggleProps
 } from '@patternfly/react-core';
 import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -20,21 +22,25 @@ export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, '
   tooltipProps?: TooltipProps;
   /** Aria label for menu toggle */
   menuToggleAriaLabel?: string;
+  /** Sets menu to compact styling. */
   isCompact?: boolean;
+  /** Additional props passed to toggle */
+  toggleProps?: MenuToggleProps;
 }
 
-export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeaderOptionsDropdownProps> = ({
+export const ChatbotHeaderOptionsDropdown: FunctionComponent<ChatbotHeaderOptionsDropdownProps> = ({
   className,
   children,
   onSelect,
   tooltipProps,
   menuToggleAriaLabel = 'Chatbot options',
   isCompact,
+  toggleProps,
   ...props
 }: ChatbotHeaderOptionsDropdownProps) => {
-  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
       content="Chatbot options"
@@ -56,6 +62,7 @@ export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeader
         isExpanded={isOptionsMenuOpen}
         onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
         size={isCompact ? 'sm' : undefined}
+        {...toggleProps}
       />
     </Tooltip>
   );

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DropdownItem } from '@patternfly/react-core';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
@@ -50,4 +49,13 @@ describe('ChatbotHeaderSelectorDropdown', () => {
     );
     expect(screen.getByRole('button', { name: /Select model/i })).toHaveClass('pf-m-compact');
   });
+
+  it('should handle toggleProps', () => {
+    render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" toggleProps={{ isDisabled: true }}>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Select model/i })).toBeDisabled();
+  });
 });

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx

@@ -1,6 +1,15 @@
-import React from 'react';
+import type { FunctionComponent, Ref } from 'react';
+import { useState } from 'react';
 
-import { Tooltip, TooltipProps, Dropdown, DropdownProps, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import {
+  Tooltip,
+  TooltipProps,
+  Dropdown,
+  DropdownProps,
+  MenuToggle,
+  MenuToggleElement,
+  MenuToggleProps
+} from '@patternfly/react-core';
 
 export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps, 'toggle'> {
   /** Value of the selected dropdown item */
@@ -15,10 +24,15 @@ export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps,
   menuToggleAriaLabel?: string;
   /** Text displayed in Tooltip wrapping the display mode dropdown */
   tooltipContent?: string;
+  /** Sets menu to compact styling. */
   isCompact?: boolean;
+  /** Additional props passed to toggle */
+  toggleProps?: MenuToggleProps;
+  /** Custom width for the dropdown */
+  dropdownWidth?: string;
 }
 
-export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
+export const ChatbotHeaderSelectorDropdown: FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
   value,
   className,
   children,
@@ -27,12 +41,14 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
   tooltipContent = 'Select model',
   menuToggleAriaLabel,
   isCompact,
+  toggleProps,
+  dropdownWidth,
   ...props
 }: ChatbotHeaderSelectorDropdownProps) => {
-  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
-  const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Select model');
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
+  const [defaultAriaLabel, setDefaultAriaLabel] = useState('Select model');
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
       content={tooltipContent}
@@ -49,6 +65,10 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
         onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
         size={isCompact ? 'sm' : undefined}
         className={`${isCompact ? 'pf-m-compact' : ''}`}
+        {...toggleProps}
+        style={{
+          width: dropdownWidth
+        }}
       >
         {value}
       </MenuToggle>

package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotHeaderTitle from './ChatbotHeaderTitle';

package/src/ChatbotHeader/ChatbotHeaderTitle.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 import { SplitItem } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
@@ -22,7 +22,7 @@ export interface ChatbotHeaderTitleProps {
   showOnDefault?: React.ReactNode | string;
 }
 
-export const ChatbotHeaderTitle: React.FunctionComponent<ChatbotHeaderTitleProps> = ({
+export const ChatbotHeaderTitle: FunctionComponent<ChatbotHeaderTitleProps> = ({
   className,
   children,
   displayMode,

package/src/ChatbotModal/ChatbotModal.test.tsx

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

package/src/ChatbotModal/ChatbotModal.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Code Modal - Chatbot Modal with Code Editor
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Modal, ModalProps } from '@patternfly/react-core';
@@ -16,7 +16,7 @@ export interface ChatbotModalProps extends Omit<ModalProps, 'ref'> {
   isCompact?: boolean;
 }
 
-export const ChatbotModal: React.FunctionComponent<ChatbotModalProps> = ({
+export const ChatbotModal: FunctionComponent<ChatbotModalProps> = ({
   children,
   displayMode = ChatbotDisplayMode.default,
   className,

package/src/ChatbotPopover/ChatbotPopover.tsx

@@ -1,13 +1,13 @@
 // ============================================================================
 // Chatbot Popover
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Popover, PopoverProps } from '@patternfly/react-core';
 
-export const ChatbotPopover: React.FunctionComponent<PopoverProps> = ({ children, className, ...props }) => (
-  <Popover className={`pf-chatbot__popover  ${className ?? ''}`} showClose={false} {...props}>
+export const ChatbotPopover: FunctionComponent<PopoverProps> = ({ children, className, ...props }) => (
+  <Popover className={`pf-chatbot__popover ${className ?? ''}`} showClose={false} {...props}>
     {children}
   </Popover>
 );

package/src/ChatbotToggle/ChatbotToggle.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/ChatbotToggle/ChatbotToggle.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Toggle
 // ============================================================================
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+
+import { forwardRef } from 'react';
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 
@@ -47,7 +49,7 @@ const ChatIcon = () => (
   </svg>
 );
 
-const ChatbotToggleBase: React.FunctionComponent<ChatbotToggleProps> = ({
+const ChatbotToggleBase: FunctionComponent<ChatbotToggleProps> = ({
   tooltipLabel,
   isChatbotVisible,
   onToggleChatbot,
@@ -87,7 +89,7 @@ const ChatbotToggleBase: React.FunctionComponent<ChatbotToggleProps> = ({
   );
 };
 
-const ChatbotToggle = React.forwardRef((props: ChatbotToggleProps, ref: React.Ref<any>) => (
+const ChatbotToggle = forwardRef((props: ChatbotToggleProps, ref: Ref<any>) => (
   <ChatbotToggleBase innerRef={ref} {...props} />
 ));
 

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx

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

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Layout - Chat - Welcome
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 import { Content, ContentVariants, Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 
@@ -28,7 +28,7 @@ export interface WelcomePrompt {
   onClick?: () => void;
 }
 
-export const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptProps> = ({
+export const ChatbotWelcomePrompt: FunctionComponent<ChatbotWelcomePromptProps> = ({
   title,
   description,
   prompts,

package/src/CodeModal/CodeModal.test.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import CodeModal from './CodeModal';
 
@@ -21,4 +20,32 @@ describe('ChatbotModal', () => {
     );
     expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
   });
+
+  it('should render CodeModal with custom classNames', async () => {
+    render(
+      <CodeModal
+        isCompact
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        handleModalToggle={jest.fn()}
+        onPrimaryAction={jest.fn()}
+        onSecondaryAction={jest.fn()}
+        title="Preview attachment"
+        primaryActionBtn="Submit"
+        secondaryActionBtn="Cancel"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></CodeModal>
+    );
+
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
+  });
 });

package/src/CodeModal/CodeModal.tsx

@@ -1,7 +1,8 @@
 // ============================================================================
 // Code Modal - Chatbot Modal with Code Editor
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
+import { useState } from 'react';
 import path from 'path-browserify';
 
 // Import PatternFly components
@@ -42,9 +43,15 @@ export interface CodeModalProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
-export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
+export const CodeModal: FunctionComponent<CodeModalProps> = ({
   fileName,
   code,
   codeEditorControlClassName: codeEditorClassName,
@@ -60,11 +67,14 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
   title,
   displayMode = ChatbotDisplayMode.default,
   isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
   ...props
 }: CodeModalProps) => {
-  const [newCode, setNewCode] = React.useState(code);
+  const [newCode, setNewCode] = useState(code);
 
-  const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handlePrimaryAction = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     if (!isReadOnly) {
       onPrimaryAction(_event, newCode);
@@ -73,7 +83,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
     }
   };
 
-  const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleSecondaryAction = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onSecondaryAction(_event);
   };
@@ -101,8 +111,8 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
       displayMode={displayMode}
       isCompact={isCompact}
     >
-      <ModalHeader title={title} labelId="code-modal-title" />
-      <ModalBody id="code-modal-body">
+      <ModalHeader className={modalHeaderClassName} title={title} labelId="code-modal-title" />
+      <ModalBody className={modalBodyClassName} id="code-modal-body">
         <Stack className="pf-chatbot__code-modal-body">
           <StackItem className="pf-chatbot__code-modal-file-details">
             <FileDetails fileName={fileName} />
@@ -129,7 +139,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
           </StackItem>
         </Stack>
       </ModalBody>
-      <ModalFooter>
+      <ModalFooter className={modalFooterClassName}>
         <Button isBlock key="code-modal-primary" variant="primary" onClick={handlePrimaryAction} form="code-modal-form">
           {primaryActionBtn}
         </Button>

package/src/Compare/Compare.test.tsx

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

package/src/Compare/Compare.tsx

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, PropsWithChildren } from 'react';
+import { useEffect, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 interface CompareProps {
@@ -24,11 +25,11 @@ export const Compare = ({
   onToggleClick,
   toggleGroupAriaLabel = 'Select which chatbot to display'
 }: PropsWithChildren<CompareProps>) => {
-  const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
-  const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
-  const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
+  const [isSelected, setIsSelected] = useState('toggle-group-chatbot-1');
+  const [showFirstChatbot, setShowFirstChatbot] = useState(true);
+  const [showSecondChatbot, setShowSecondChatbot] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // we want to show the first if we switch to the mobile toggle view
     // and reset/switch back to normal otherwise
     const updateChatbotVisibility = () => {
@@ -50,7 +51,7 @@ export const Compare = ({
 
   // this only happens on mobile
   const handleChildToggleClick = (
-    event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>
+    event: MouseEvent | ReactMouseEvent<any, MouseEvent> | ReactKeyboardEvent<Element>
   ) => {
     const id = event.currentTarget.id;
     setIsSelected(id);

package/src/FileDetails/FileDetails.test.tsx

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

package/src/FileDetails/FileDetails.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { Flex, Stack, StackItem, Truncate } from '@patternfly/react-core';
 import path from 'path-browserify';
 interface FileDetailsProps {

package/src/FileDetailsLabel/FileDetailsLabel.test.tsx

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

package/src/FileDetailsLabel/FileDetailsLabel.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { Button, Label } from '@patternfly/react-core';
 import FileDetails from '../FileDetails';
 import { Spinner } from '@patternfly/react-core';

package/src/FileDropZone/FileDropZone.test.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDropZone from './FileDropZone';
+import userEvent from '@testing-library/user-event';
 
 describe('FileDropZone', () => {
   it('should render file drop zone', () => {
@@ -12,4 +12,115 @@ describe('FileDropZone', () => {
     render(<FileDropZone onFileDrop={jest.fn()}>Hi</FileDropZone>);
     expect(screen.getByText('Hi')).toBeTruthy();
   });
+
+  it('should call onFileDrop when file type is accepted', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone data-testid="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} onFileDrop={onFileDrop} />
+    );
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).toHaveBeenCalled();
+  });
+
+  it('should not call onFileDrop when file type is not accepted', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone data-testid="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} onFileDrop={onFileDrop} />
+    );
+
+    const file = new File(['[]'], 'example.json', { type: 'application/json' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
+
+  it('should respect minSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} minSize={1000} onAttachRejected={onAttachRejected} />
+    );
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+  it('should respect maxSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} maxSize={100} onAttachRejected={onAttachRejected} />
+    );
+
+    const largeContent = 'x'.repeat(200);
+    const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxFiles restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} maxFiles={1} onAttachRejected={onAttachRejected} />
+    );
+
+    const files = [
+      new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+      new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+    ];
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, files);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should be disabled when isAttachmentDisabled is true', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(<FileDropZone onFileDrop={onFileDrop} isAttachmentDisabled={true} />);
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
+
+  it('should call onAttach when files are attached', async () => {
+    const onAttach = jest.fn();
+    const { container } = render(<FileDropZone onFileDrop={jest.fn()} onAttach={onAttach} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttach).toHaveBeenCalled();
+  });
+  it('should use custom validator when provided', async () => {
+    const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+    const onAttachRejected = jest.fn();
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={onFileDrop} validator={validator} onAttachRejected={onAttachRejected} />
+    );
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+
+    expect(validator).toHaveBeenCalledWith(file);
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
 });

package/src/FileDropZone/FileDropZone.tsx

@@ -1,7 +1,9 @@
 import { DropEvent, MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
-import React from 'react';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 import { UploadIcon } from '@patternfly/react-icons';
+import { Accept, FileError, FileRejection } from 'react-dropzone/.';
 
 export interface FileDropZoneProps {
   /** Content displayed when the drop zone is not currently in use */
@@ -12,19 +14,47 @@ export interface FileDropZoneProps {
   infoText?: string;
   /** When files are dropped or uploaded this callback will be called with all accepted files */
   onFileDrop: (event: DropEvent, data: File[]) => void;
+  /** Specifies the file types accepted by the attachment upload component.
+   *  Files that don't match the accepted types will be disabled in the file picker.
+   *  For example,
+   *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+   **/
+  allowedFileTypes?: Accept;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Minimum file size allowed */
+  minSize?: number;
+  /** Max file size allowed */
+  maxSize?: number;
+  /** Max number of files allowed */
+  maxFiles?: number;
+  /** Whether attachments are disabled */
+  isAttachmentDisabled?: boolean;
+  /** Callback when file(s) are attached */
+  onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Callback function for AttachButton when an attachment fails */
+  onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+  validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
 }
 
-const FileDropZone: React.FunctionComponent<FileDropZoneProps> = ({
+const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
   children,
   className,
   infoText = 'Maximum file size is 25 MB',
   onFileDrop,
+  allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
   displayMode = ChatbotDisplayMode.default,
   ...props
 }: FileDropZoneProps) => {
-  const [showDropZone, setShowDropZone] = React.useState(false);
+  const [showDropZone, setShowDropZone] = useState(false);
 
   const renderDropZone = () => (
     <>
@@ -40,7 +70,17 @@ const FileDropZone: React.FunctionComponent<FileDropZoneProps> = ({
   return (
     <MultipleFileUpload
       dropzoneProps={{
-        onDrop: () => setShowDropZone(false),
+        accept: allowedFileTypes,
+        onDrop: (acceptedFiles, fileRejections: FileRejection[], event: DropEvent) => {
+          setShowDropZone(false);
+          onAttach && onAttach(acceptedFiles, fileRejections, event);
+        },
+        minSize,
+        maxSize,
+        maxFiles,
+        disabled: isAttachmentDisabled,
+        onDropRejected: onAttachRejected,
+        validator,
         ...props
       }}
       onDragEnter={() => setShowDropZone(true)}

package/src/LoadingMessage/LoadingMessage.test.tsx

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

package/src/LoadingMessage/LoadingMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { Icon, Split, SplitItem } from '@patternfly/react-core';
 
 import RobotIcon from '@patternfly/react-icons/dist/js/icons/robot-icon';
@@ -7,7 +7,7 @@ export interface LoadingMessageProps {
   icon?: React.ComponentType;
 }
 
-export const LoadingMessage: React.FunctionComponent<LoadingMessageProps> = ({ icon: IconComponent = RobotIcon }) => (
+export const LoadingMessage: FunctionComponent<LoadingMessageProps> = ({ icon: IconComponent = RobotIcon }) => (
   <Split>
     <SplitItem>
       <Icon size="lg" className="pf-v6-u-mr-sm pf-v6-u-pt-md">