update header from JSX.Element to ReactNode for flexibility

yext · Sep 21, 2023 · daede69 · daede69
1 parent 38947e2
commit daede69
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 7 deletions.
diff --git a/docs/chat-ui-react.chatpanelprops.header.md b/docs/chat-ui-react.chatpanelprops.header.md
@@ -9,5 +9,5 @@ A header to render at the top of the panel.
 **Signature:**
 
 ```typescript
-header?: JSX.Element;
+header?: ReactNode;
 ```
diff --git a/docs/chat-ui-react.chatpanelprops.md b/docs/chat-ui-react.chatpanelprops.md
@@ -18,5 +18,5 @@ export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClass
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [customCssClasses?](./chat-ui-react.chatpanelprops.customcssclasses.md) |  | [ChatPanelCssClasses](./chat-ui-react.chatpanelcssclasses.md) | _(Optional)_ CSS classes for customizing the component styling. |
-|  [header?](./chat-ui-react.chatpanelprops.header.md) |  | JSX.Element | _(Optional)_ A header to render at the top of the panel. |
+|  [header?](./chat-ui-react.chatpanelprops.header.md) |  | ReactNode | _(Optional)_ A header to render at the top of the panel. |
 
diff --git a/etc/chat-ui-react.api.md b/etc/chat-ui-react.api.md
@@ -6,6 +6,7 @@
 
 import { Message } from '@yext/chat-headless-react';
 import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
 
 // @public
 export function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): React_2.JSX.Element;
@@ -82,7 +83,7 @@ export interface ChatPanelCssClasses {
 // @public
 export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClasses" | "message">, Omit<ChatInputProps, "customCssClasses"> {
     customCssClasses?: ChatPanelCssClasses;
-    header?: JSX.Element;
+    header?: ReactNode;
 }
 
 // @public

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ChatPanel.tsx b/src/components/ChatPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { ReactNode, useCallback, useEffect, useRef } from "react";
 import { useChatState, useChatActions } from "@yext/chat-headless-react";
 import {
   MessageBubble,
@@ -48,7 +48,7 @@ export interface ChatPanelProps
   extends Omit<MessageBubbleProps, "customCssClasses" | "message">,
     Omit<ChatInputProps, "customCssClasses"> {
   /** A header to render at the top of the panel. */
-  header?: JSX.Element;
+  header?: ReactNode;
   /**
    * CSS classes for customizing the component styling.
    */