@patternfly/chatbot 6.3.0-prerelease.13 → 6.3.0-prerelease.14

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();
+  });
 });

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,13 @@ 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;
 }
 
-export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
+export const ChatbotHeaderSelectorDropdown: FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
   value,
   className,
   children,
@@ -27,12 +39,13 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
   tooltipContent = 'Select model',
   menuToggleAriaLabel,
   isCompact,
+  toggleProps,
   ...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 +62,7 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
         onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
         size={isCompact ? 'sm' : undefined}
         className={`${isCompact ? 'pf-m-compact' : ''}`}
+        {...toggleProps}
       >
         {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');
+  });
 });