revert highlight function type to return ReactNode

Author: Alice Koreman

package.json

@@ -146,7 +146,7 @@
   "size-limit": [
     {
       "path": "lib/components/index.js",
-      "limit": "6.53kb"
+      "limit": "6.56kb"
     },
     {
       "path": "lib/components/code-view/highlight/javascript.js",

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -28,7 +28,7 @@ exports[`definition for code-view matches the snapshot 1`] = `
       "description": "A function to perform custom syntax highlighting.",
       "name": "highlight",
       "optional": true,
-      "type": "(code: string) => ReactElement",
+      "type": "(code: string) => React.ReactNode",
     },
     {
       "description": "Controls the display of line numbers.

src/code-view/highlight/index.tsx

@@ -7,7 +7,7 @@ import { tokenize } from "ace-code/src/ext/simple_tokenizer";
 import "ace-code/styles/theme/cloud_editor.css";
 import "ace-code/styles/theme/cloud_editor_dark.css";
 
-type CreateHighlightType = (code: string) => React.ReactElement;
+type CreateHighlightType = (code: string) => React.ReactNode;
 
 export function createHighlight(rules: Ace.HighlightRules): CreateHighlightType {
   return (code: string) => {

src/code-view/interfaces.ts

@@ -41,5 +41,5 @@ export interface CodeViewProps {
    * A function to perform custom syntax highlighting.
    *
    */
-  highlight?: (code: string) => React.ReactElement;
+  highlight?: (code: string) => React.ReactNode;
 }

src/code-view/internal.tsx

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useRef } from "react";
-import { Children } from "react";
+import { Children, createElement, Fragment, isValidElement, ReactElement, useRef } from "react";
 import clsx from "clsx";
 
 import { useCurrentMode } from "@cloudscape-design/component-toolkit/internal";
@@ -51,6 +50,7 @@ export function InternalCodeView({
 
   // Create tokenized elements of the content.
   const code = highlight ? highlight(content) : textHighlight(content);
+  const codeElement: ReactElement = isValidElement(code) ? code : createElement(Fragment, null, code);
 
   return (
     <div
@@ -76,7 +76,7 @@ export function InternalCodeView({
             <col style={{ width: "auto" }} />
           </colgroup>
           <tbody>
-            {Children.map(code.props.children, (child, index) => {
+            {Children.map(codeElement.props.children, (child, index) => {
               return (
                 <tr key={index}>
                   {lineNumbers && (
@@ -90,7 +90,7 @@ export function InternalCodeView({
                     <Box variant="code" fontSize="body-m">
                       <span
                         className={clsx(
-                          code.props.className,
+                          codeElement.props.className,
                           lineWrapping ? styles["code-line-wrap"] : styles["code-line-nowrap"],
                         )}
                       >