@patternfly/chatbot 6.3.0-prerelease.8 → 6.3.0

package/src/AttachMenu/AttachMenu.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Attachment Menu
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import {
@@ -41,7 +41,7 @@ export interface AttachMenuProps extends DropdownProps {
   toggle: DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
 }
 
-export const AttachMenu: React.FunctionComponent<AttachMenuProps> = ({
+export const AttachMenu: FunctionComponent<AttachMenuProps> = ({
   className,
   filteredItems,
   handleTextInputChange,

package/src/AttachmentEdit/AttachmentEdit.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import AttachmentEdit, { AttachmentEditProps } from './AttachmentEdit';
 
 describe('AttachmentEdit', () => {
@@ -52,4 +52,48 @@ describe('AttachmentEdit', () => {
     fireEvent.click(screen.getByText('Cancel'));
     expect(onCancelHandler).toHaveBeenCalled();
   });
+
+  it('should render custom button text for footer actions buttons', () => {
+    render(
+      <AttachmentEdit
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onCancel={jest.fn()}
+        onSave={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Save"
+        secondaryActionButtonText="Close"
+      />
+    );
+
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByText('Close')).toBeInTheDocument();
+  });
+
+  it('should render AttachmentEdit with custom classNames', async () => {
+    render(
+      <AttachmentEdit
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onCancel={jest.fn()}
+        onSave={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Save"
+        secondaryActionButtonText="Close"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></AttachmentEdit>
+    );
+
+    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/AttachmentEdit/AttachmentEdit.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Attachment Edit - Chatbot Code Snippet Editor
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
 import CodeModal from '../CodeModal';
 import { ChatbotDisplayMode } from '../Chatbot';
 
@@ -24,9 +24,19 @@ export interface AttachmentEditProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Primary action button text */
+  primaryActionButtonText?: string;
+  /** Secondary action button text */
+  secondaryActionButtonText?: string;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
-export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
+export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
   fileName,
   code,
   handleModalToggle,
@@ -35,14 +45,19 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
   onSave,
   title = 'Edit attachment',
   displayMode = ChatbotDisplayMode.default,
-  isCompact
+  isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
+  primaryActionButtonText = 'Save',
+  secondaryActionButtonText = 'Cancel'
 }: AttachmentEditProps) => {
-  const handleSave = (_event: React.MouseEvent | MouseEvent | KeyboardEvent, code) => {
+  const handleSave = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent, code) => {
     handleModalToggle(_event);
     onSave(_event, code);
   };
 
-  const handleCancel = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleCancel = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onCancel(_event);
   };
@@ -55,11 +70,14 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
       isModalOpen={isModalOpen}
       onPrimaryAction={handleSave}
       onSecondaryAction={handleCancel}
-      primaryActionBtn="Save"
-      secondaryActionBtn="Cancel"
+      primaryActionBtn={primaryActionButtonText}
+      secondaryActionBtn={secondaryActionButtonText}
       title={title}
       displayMode={displayMode}
       isCompact={isCompact}
+      modalHeaderClassName={modalHeaderClassName}
+      modalBodyClassName={modalBodyClassName}
+      modalFooterClassName={modalFooterClassName}
     />
   );
 };

package/src/Chatbot/Chatbot.test.tsx

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

package/src/Chatbot/Chatbot.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot
 // ============================================================================
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+
+import { forwardRef } from 'react';
 import { motion } from 'framer-motion';
 
 export interface ChatbotProps {
@@ -29,7 +31,7 @@ export enum ChatbotDisplayMode {
   drawer = 'drawer'
 }
 
-const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
+const ChatbotBase: FunctionComponent<ChatbotProps> = ({
   children,
   displayMode = ChatbotDisplayMode.default,
   isVisible = true,
@@ -69,7 +71,7 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
   );
 };
 
-const Chatbot = React.forwardRef((props: ChatbotProps, ref: React.Ref<HTMLDivElement>) => (
+const Chatbot = forwardRef((props: ChatbotProps, ref: Ref<HTMLDivElement>) => (
   <ChatbotBase innerRef={ref} {...props} />
 ));
 

package/src/ChatbotAlert/ChatbotAlert.test.tsx

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

package/src/ChatbotAlert/ChatbotAlert.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { Alert, AlertActionCloseButton, AlertProps } from '@patternfly/react-core';
 
 export interface ChatbotAlert extends AlertProps {
@@ -6,7 +6,7 @@ export interface ChatbotAlert extends AlertProps {
   onClose?: () => void;
 }
 
-export const ChatbotAlert: React.FunctionComponent<ChatbotAlert> = ({
+export const ChatbotAlert: FunctionComponent<ChatbotAlert> = ({
   variant = 'info',
   title,
   children = '',

package/src/ChatbotContent/ChatbotContent.test.tsx

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

package/src/ChatbotContent/ChatbotContent.tsx

@@ -1,16 +1,16 @@
 // ============================================================================
 // Chatbot Main
 // ============================================================================
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
 
-export interface ChatbotContentProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotContentProps extends HTMLProps<HTMLDivElement> {
   /** Content to be displayed in the chatbot */
   children: React.ReactNode;
   /** Custom classname for the ChatbotContent component */
   className?: string;
 }
 
-export const ChatbotContent: React.FunctionComponent<ChatbotContentProps> = ({
+export const ChatbotContent: FunctionComponent<ChatbotContentProps> = ({
   children,
   className,
   ...props

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '@testing-library/jest-dom';
 import { DropdownItem } from '@patternfly/react-core';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Header - Chatbot Conversation History Nav
 // ============================================================================
-import React from 'react';
+import type { MouseEvent, FunctionComponent, Ref } from 'react';
+
+import { useState } from 'react';
 
 // Import PatternFly components
 import { MenuToggleElement, Tooltip, MenuToggle, Dropdown, DropdownProps } from '@patternfly/react-core';
@@ -19,15 +21,15 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
 }
 
-export const ChatbotConversationHistoryDropdown: React.FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
+export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
   menuItems,
   menuClassName,
   onSelect,
   label
 }: ChatbotConversationHistoryDropdownProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
       content={label ?? 'Conversation options'}

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
@@ -6,6 +5,7 @@ import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav, { Conversation } from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
 import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
+import { ComponentType } from 'react';
 
 const ERROR = {
   bodyText: (
@@ -25,13 +25,13 @@ const ERROR = {
 const NO_RESULTS = {
   bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
   titleText: 'No results found',
-  icon: SearchIcon
+  icon: SearchIcon as ComponentType<any>
 };
 
 const EMPTY_STATE = {
   bodyText: 'Access timely assistance by starting a conversation with an AI model.',
   titleText: 'Start a new chat',
-  icon: OutlinedCommentsIcon
+  icon: OutlinedCommentsIcon as ComponentType<any>
 };
 
 const ERROR_WITHOUT_BUTTON = {

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Header - Chatbot Conversation History Nav
 // ============================================================================
-import React from 'react';
+import type { KeyboardEvent, FunctionComponent } from 'react';
+
+import { useRef, Fragment } from 'react';
 
 // Import PatternFly components
 import {
@@ -120,7 +122,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   isCompact?: boolean;
 }
 
-export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
+export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
   onDrawerToggle,
   isDrawerOpen,
   setIsDrawerOpen,
@@ -152,7 +154,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   isCompact,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
-  const drawerRef = React.useRef<HTMLDivElement>(null);
+  const drawerRef = useRef<HTMLDivElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
@@ -190,7 +192,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
       return (
         <MenuList>
           {conversations.map((conversation) => (
-            <React.Fragment key={conversation.id}>{getNavItem(conversation)}</React.Fragment>
+            <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
           ))}
         </MenuList>
       );
@@ -202,7 +204,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
             <MenuGroup className="pf-chatbot__menu-item-header" label={navGroup} key={navGroup}>
               <MenuList>
                 {conversations[navGroup].map((conversation) => (
-                  <React.Fragment key={conversation.id}>{getNavItem(conversation)}</React.Fragment>
+                  <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
                 ))}
               </MenuList>
             </MenuGroup>
@@ -283,7 +285,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
 
   // An onKeyDown property must be passed to the Drawer component to handle closing
   // the drawer panel and deactivating the focus trap via the Escape key.
-  const onEscape = (event: React.KeyboardEvent) => {
+  const onEscape = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
       // prevents using escape key on menu buttons from closing the panel, but I'm not sure if this is allowed
       if (event.target instanceof HTMLInputElement && event.target.type !== 'button') {

package/src/ChatbotConversationHistoryNav/EmptyState.tsx

@@ -6,7 +6,7 @@ import {
   EmptyStateFooter,
   EmptyStateProps
 } from '@patternfly/react-core';
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface HistoryEmptyStateProps extends EmptyStateProps {
   onClick?: () => void;
@@ -16,7 +16,7 @@ export interface HistoryEmptyStateProps extends EmptyStateProps {
   hasButton?: boolean;
 }
 
-export const HistoryEmptyState: React.FunctionComponent<HistoryEmptyStateProps> = ({
+export const HistoryEmptyState: FunctionComponent<HistoryEmptyStateProps> = ({
   bodyText,
   buttonIcon,
   buttonText,

package/src/ChatbotConversationHistoryNav/LoadingState.tsx

@@ -1,7 +1,7 @@
 import { Skeleton, SkeletonProps } from '@patternfly/react-core';
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
-export const LoadingState: React.FunctionComponent<SkeletonProps> = ({ screenreaderText, ...rest }: SkeletonProps) => (
+export const LoadingState: FunctionComponent<SkeletonProps> = ({ screenreaderText, ...rest }: SkeletonProps) => (
   <div className="pf-chatbot__history-loading">
     <div className="pf-chatbot__history-loading-block">
       <Skeleton

package/src/ChatbotFooter/ChatbotFooter.test.tsx

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

package/src/ChatbotFooter/ChatbotFooter.tsx

@@ -8,11 +8,11 @@
 // - Footnote
 // - Footnote popover
 
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
 
 import { Divider } from '@patternfly/react-core';
 
-export interface ChatbotFooterProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotFooterProps extends HTMLProps<HTMLDivElement> {
   /** Children for the Footer that supports MessageBar and FootNote components*/
   children?: React.ReactNode;
   /** Custom classname for the Footer component */
@@ -20,7 +20,7 @@ export interface ChatbotFooterProps extends React.HTMLProps<HTMLDivElement> {
   isCompact?: boolean;
 }
 
-export const ChatbotFooter: React.FunctionComponent<ChatbotFooterProps> = ({
+export const ChatbotFooter: FunctionComponent<ChatbotFooterProps> = ({
   children,
   className,
   isCompact,

package/src/ChatbotFooter/ChatbotFooternote.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import ChatbotFootnote from './ChatbotFootnote';
 

package/src/ChatbotFooter/ChatbotFootnote.tsx

@@ -2,7 +2,9 @@
 // Chatbot Footer - Footnote
 // ============================================================================
 
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
+
+import { useState } from 'react';
 
 // Import Patternfly components
 import { Button, Content, ContentVariants, Flex, PopoverProps } from '@patternfly/react-core';
@@ -14,7 +16,7 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/exte
 // Import Chatbot components
 import ChatbotPopover from '../ChatbotPopover/ChatbotPopover';
 
-export interface ChatbotFootnoteProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotFootnoteProps extends Omit<HTMLProps<HTMLDivElement>, 'popover'> {
   /** Label to show for the footnote */
   label: string;
   /** Config for the popover which opens up when footnote is clicked */
@@ -58,14 +60,14 @@ export interface ChatbotFootnotePopoverLink {
   url: string;
 }
 
-export const ChatbotFootnote: React.FunctionComponent<ChatbotFootnoteProps> = ({
+export const ChatbotFootnote: FunctionComponent<ChatbotFootnoteProps> = ({
   label,
   popover,
   className,
   ...props
 }: ChatbotFootnoteProps) => {
   // Popover visibility state
-  const [isVisible, setIsVisible] = React.useState<boolean>(false);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
 
   // Define popover body content
   const popoverBodyContent = (

package/src/ChatbotHeader/ChatbotHeader.test.tsx

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

package/src/ChatbotHeader/ChatbotHeader.tsx

@@ -1,18 +1,15 @@
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
 
 import { Divider } from '@patternfly/react-core';
 
-export interface ChatbotHeaderProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotHeaderProps extends HTMLProps<HTMLDivElement> {
   /** Content to be displayed in the chatbot header */
   children: React.ReactNode;
   /** Custom classname for the header component */
   className?: string;
 }
 
-export const ChatbotHeader: React.FunctionComponent<ChatbotHeaderProps> = ({
-  className,
-  children
-}: ChatbotHeaderProps) => (
+export const ChatbotHeader: FunctionComponent<ChatbotHeaderProps> = ({ className, children }: ChatbotHeaderProps) => (
   <div className="pf-chatbot__header-container">
     <div className={`pf-chatbot__header${className ? ` ${className}` : ''}`}>{children}</div>
     <Divider className="pf-chatbot__header__divider" />

package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx

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

package/src/ChatbotHeader/ChatbotHeaderActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface ChatbotHeaderActionsProps {
   /** Content to be displayed in the chatbot header */
@@ -7,7 +7,7 @@ export interface ChatbotHeaderActionsProps {
   className?: string;
 }
 
-export const ChatbotHeaderActions: React.FunctionComponent<ChatbotHeaderActionsProps> = ({
+export const ChatbotHeaderActions: FunctionComponent<ChatbotHeaderActionsProps> = ({
   className,
   children
 }: ChatbotHeaderActionsProps) => <div className={`pf-chatbot__actions ${className || ''}`}>{children}</div>;

package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx

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

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+import { forwardRef } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { CloseIcon } from '@patternfly/react-icons';
@@ -20,7 +21,7 @@ export interface ChatbotHeaderCloseButtonProps extends ButtonProps {
   isCompact?: boolean;
 }
 
-const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
+const ChatbotHeaderCloseButtonBase: FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
   className,
   onClick,
   tooltipProps,
@@ -56,8 +57,8 @@ const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseBu
   </div>
 );
 
-export const ChatbotHeaderCloseButton = React.forwardRef(
-  (props: ChatbotHeaderCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+export const ChatbotHeaderCloseButton = forwardRef(
+  (props: ChatbotHeaderCloseButtonProps, ref: Ref<HTMLButtonElement>) => (
     <ChatbotHeaderCloseButtonBase innerRef={ref} {...props} />
   )
 );

package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx

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

package/src/ChatbotHeader/ChatbotHeaderMain.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface ChatbotHeaderMainProps {
   /** Custom classname for the header component */
@@ -7,7 +7,7 @@ export interface ChatbotHeaderMainProps {
   children: React.ReactNode;
 }
 
-export const ChatbotHeaderMain: React.FunctionComponent<ChatbotHeaderMainProps> = ({
+export const ChatbotHeaderMain: FunctionComponent<ChatbotHeaderMainProps> = ({
   className,
   children
 }: ChatbotHeaderMainProps) => (

package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

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

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+import { forwardRef } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
@@ -16,10 +17,11 @@ export interface ChatbotHeaderMenuProps extends ButtonProps {
   innerRef?: React.Ref<HTMLButtonElement>;
   /** Content used in tooltip */
   tooltipContent?: string;
+  /** Sets menu to compact styling. */
   isCompact?: boolean;
 }
 
-const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
+const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   className,
   onMenuToggle,
   tooltipProps,
@@ -55,8 +57,6 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
   </div>
 );
 
-export const ChatbotHeaderMenu = React.forwardRef(
-  (props: ChatbotHeaderMenuProps, ref: React.Ref<HTMLButtonElement>) => (
-    <ChatbotHeaderMenuBase innerRef={ref} {...props} />
-  )
-);
+export const ChatbotHeaderMenu = forwardRef((props: ChatbotHeaderMenuProps, ref: Ref<HTMLButtonElement>) => (
+  <ChatbotHeaderMenuBase innerRef={ref} {...props} />
+));

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.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 { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
@@ -48,4 +47,13 @@ describe('ChatbotHeaderOptionsDropdown', () => {
     render(<ChatbotHeaderOptionsDropdown isCompact>{dropdownItems}</ChatbotHeaderOptionsDropdown>);
     expect(screen.getByRole('button', { name: 'Chatbot options' })).toHaveClass('pf-m-compact');
   });
+
+  it('should handle toggleProps', () => {
+    render(
+      <ChatbotHeaderOptionsDropdown isCompact toggleProps={{ isDisabled: true }}>
+        {dropdownItems}
+      </ChatbotHeaderOptionsDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Chatbot options/i })).toBeDisabled();
+  });
 });