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

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,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDropZone from './FileDropZone';

package/src/FileDropZone/FileDropZone.tsx

@@ -1,5 +1,6 @@
 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';
 
@@ -16,7 +17,7 @@ export interface FileDropZoneProps {
   displayMode?: ChatbotDisplayMode;
 }
 
-const FileDropZone: React.FunctionComponent<FileDropZoneProps> = ({
+const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
   children,
   className,
   infoText = 'Maximum file size is 25 MB',
@@ -24,7 +25,7 @@ const FileDropZone: React.FunctionComponent<FileDropZoneProps> = ({
   displayMode = ChatbotDisplayMode.default,
   ...props
 }: FileDropZoneProps) => {
-  const [showDropZone, setShowDropZone] = React.useState(false);
+  const [showDropZone, setShowDropZone] = useState(false);
 
   const renderDropZone = () => (
     <>

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">

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-import React from 'react';
+import { useState, useRef, useId, useCallback, useEffect } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 // Import PatternFly components
@@ -16,22 +16,22 @@ const CodeBlockMessage = ({
   className,
   'aria-label': ariaLabel,
   ...props
-}: JSX.IntrinsicElements['code'] & ExtraProps) => {
-  const [copied, setCopied] = React.useState(false);
+}: Omit<JSX.IntrinsicElements['code'], 'ref'> & ExtraProps) => {
+  const [copied, setCopied] = useState(false);
 
-  const buttonRef = React.useRef();
-  const tooltipID = React.useId();
+  const buttonRef = useRef(undefined);
+  const tooltipID = useId();
 
   const language = /language-(\w+)/.exec(className || '')?.[1];
 
   // Handle clicking copy button
-  const handleCopy = React.useCallback((event, text) => {
+  const handleCopy = useCallback((event, text) => {
     navigator.clipboard.writeText(text.toString());
     setCopied(true);
   }, []);
 
   // Reset copied state
-  React.useEffect(() => {
+  useEffect(() => {
     if (copied) {
       const timer = setTimeout(() => {
         setCopied(false);

package/src/Message/ErrorMessage/ErrorMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - Error
 // ============================================================================
 
-import React from 'react';
 import { Alert, AlertProps } from '@patternfly/react-core';
 
 const ErrorMessage = ({ title, actionLinks, children, ...props }: AlertProps) => (

package/src/Message/ImageMessage/ImageMessage.tsx

@@ -2,10 +2,9 @@
 // Chatbot Main - Message - Content - Image
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 
-const ImageMessage = ({ children, ...props }: JSX.IntrinsicElements['img'] & ExtraProps) => (
+const ImageMessage = ({ children, ...props }: Omit<JSX.IntrinsicElements['img'], 'ref'> & ExtraProps) => (
   <img className="pf-chatbot__message-image" {...props}>
     {children}
   </img>

package/src/Message/LinkMessage/LinkMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - Link
 // ============================================================================
 
-import React from 'react';
 import { Button, ButtonProps } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 

package/src/Message/ListMessage/ListItemMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { ListItem } from '@patternfly/react-core';
 

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
 

package/src/Message/ListMessage/UnorderedListMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List } from '@patternfly/react-core';
 

package/src/Message/Message.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Message from './Message';
@@ -146,14 +146,14 @@ const ERROR = {
   title: 'Could not load chat',
   children: 'Wait a few minutes and check your network settings. If the issue persists: ',
   actionLinks: (
-    <React.Fragment>
+    <Fragment>
       <AlertActionLink component="a" href="#">
         Start a new chat
       </AlertActionLink>
       <AlertActionLink component="a" href="#">
         Contact support
       </AlertActionLink>
-    </React.Fragment>
+    </Fragment>
   )
 };
 const checkListItemsRendered = () => {

package/src/Message/Message.tsx

@@ -1,9 +1,8 @@
 // ============================================================================
 // Chatbot Main - Message
 // ============================================================================
-
-import React, { ReactNode } from 'react';
-
+import { forwardRef, ReactNode, useEffect, useState } from 'react';
+import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {
@@ -78,7 +77,7 @@ export interface MessageExtraContent {
   endContent?: ReactNode;
 }
 
-export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
+export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   /** Unique id for message */
   id?: string;
   /** Role of the user sending the message */
@@ -139,7 +138,7 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
   isLiveRegion?: boolean;
   /** Ref applied to message  */
-  innerRef?: React.Ref<HTMLDivElement>;
+  innerRef?: Ref<HTMLDivElement>;
   /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
   tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
   /** Additional rehype plugins passed from the consumer */
@@ -159,16 +158,16 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   /** Label for the English word "Cancel" used in edit mode. */
   cancelWord?: string;
   /** Callback function for when edit mode update button is clicked */
-  onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onEditUpdate?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /** Callback functionf or when edit cancel update button is clicked */
-  onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onEditCancel?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /** Props for edit form */
   editFormProps?: FormProps;
   /** Sets message to compact styling. */
   isCompact?: boolean;
 }
 
-export const MessageBase: React.FunctionComponent<MessageProps> = ({
+export const MessageBase: FunctionComponent<MessageProps> = ({
   role,
   content,
   extraContent,
@@ -206,9 +205,9 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   isCompact,
   ...props
 }: MessageProps) => {
-  const [messageText, setMessageText] = React.useState(content);
+  const [messageText, setMessageText] = useState(content);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setMessageText(content);
   }, [content]);
 
@@ -243,9 +242,9 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
             editPlaceholder={editPlaceholder}
             updateWord={updateWord}
             cancelWord={cancelWord}
-            onEditUpdate={(event, text) => {
+            onEditUpdate={(event: ReactMouseEvent<HTMLButtonElement, MouseEvent>, value: string) => {
               onEditUpdate && onEditUpdate(event);
-              setMessageText(text);
+              setMessageText(value);
             }}
             onEditCancel={onEditCancel}
             {...editFormProps}
@@ -390,7 +389,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   );
 };
 
-const Message = React.forwardRef((props: MessageProps, ref: React.Ref<HTMLDivElement>) => (
+const Message = forwardRef((props: MessageProps, ref: Ref<HTMLDivElement>) => (
   <MessageBase innerRef={ref} {...props} />
 ));
 

package/src/Message/MessageInput.tsx

@@ -1,8 +1,8 @@
 // ============================================================================
 // Chatbot Main - Message Input
 // ============================================================================
-
-import React from 'react';
+import type { FormEvent, FunctionComponent } from 'react';
+import { useState } from 'react';
 import { ActionGroup, Button, Form, FormProps, TextArea } from '@patternfly/react-core';
 
 export interface MessageInputProps extends FormProps {
@@ -20,7 +20,7 @@ export interface MessageInputProps extends FormProps {
   content?: string;
 }
 
-const MessageInput: React.FunctionComponent<MessageInputProps> = ({
+const MessageInput: FunctionComponent<MessageInputProps> = ({
   editPlaceholder = 'Edit prompt message...',
   updateWord = 'Update',
   cancelWord = 'Cancel',
@@ -29,9 +29,9 @@ const MessageInput: React.FunctionComponent<MessageInputProps> = ({
   content,
   ...props
 }: MessageInputProps) => {
-  const [messageText, setMessageText] = React.useState(content ?? '');
+  const [messageText, setMessageText] = useState(content ?? '');
 
-  const onChange = (event: React.FormEvent<HTMLTextAreaElement>, value: string) => {
+  const onChange = (_event: FormEvent<HTMLTextAreaElement>, value: string) => {
     setMessageText(value);
   };
 

package/src/Message/MessageLoading.tsx

@@ -2,8 +2,6 @@
 // Chatbot Main - Message - Processing
 // ============================================================================
 
-import React from 'react';
-
 const MessageLoading = ({ loadingWord }) => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { Label, LabelGroup, LabelGroupProps, LabelProps } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons';
 
@@ -19,13 +20,13 @@ export interface QuickResponseProps {
   isCompact?: boolean;
 }
 
-export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
+export const QuickResponse: FunctionComponent<QuickResponseProps> = ({
   quickResponses,
   quickResponseContainerProps = { numLabels: 5 },
   onSelect,
   isCompact
 }: QuickResponseProps) => {
-  const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
+  const [selectedQuickResponse, setSelectedQuickResponse] = useState<string>();
 
   const handleQuickResponseClick = (id: string, onClick?: () => void) => {
     setSelectedQuickResponse(id);

package/src/Message/QuickStarts/FallbackImg.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import type { FC } from 'react';
+import { useState } from 'react';
 
 interface FallbackImgProps {
   /** Image source */
@@ -11,8 +12,8 @@ interface FallbackImgProps {
   fallback?: React.ReactNode;
 }
 
-const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
-  const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);
+const FallbackImg: FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = useState<boolean>(true);
 
   if (src && isSrcValid) {
     return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;

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;