From 46869bcbff37d2c5b796bb3364d92783f07b2ad3 Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Fri, 4 Oct 2024 00:04:17 +0530 Subject: [PATCH] [material-ui] Change React.ReactElement to React.ReactElement (#43402) --- .../material/components/app-bar/BackToTop.tsx | 2 +- .../components/app-bar/ElevateAppBar.tsx | 2 +- .../material/components/app-bar/HideAppBar.tsx | 2 +- .../components/autocomplete/Virtualize.tsx | 12 ++++++++---- .../components/dialogs/FullScreenDialog.tsx | 2 +- .../components/lists/InteractiveList.tsx | 2 +- .../material/components/popper/SpringPopper.tsx | 2 +- .../components/rating/RadioGroupRating.tsx | 2 +- .../components/steppers/CustomizedSteppers.tsx | 2 +- .../material/integrations/routing/ListRouter.tsx | 2 +- docs/src/components/about/HowToSupport.tsx | 2 +- docs/src/components/header/HeaderNavBar.tsx | 2 +- .../components/home/MaterialDesignComponents.tsx | 2 +- docs/src/components/home/UserFeedbacks.tsx | 2 +- docs/src/components/pricing/PricingTable.tsx | 2 +- docs/src/components/productX/XRoadmap.tsx | 2 +- .../src/components/showcase/ViewToggleButton.tsx | 2 +- .../components/typography/SectionHeadline.tsx | 2 +- docs/src/layouts/HeroContainer.tsx | 4 ++-- docs/src/modules/components/JoyUsageDemo.tsx | 2 +- docs/src/modules/components/JoyVariablesDemo.tsx | 4 ++-- docs/types/docs.d.ts | 2 +- .../test-utils/src/createRenderer.tsx | 16 ++++++++++------ packages/mui-lab/test/describeConformance.ts | 2 +- .../v13-pagesRouter/pagesRouterV13Document.tsx | 2 +- packages/mui-material/src/Popper/Popper.spec.tsx | 2 +- .../mui-material/test/describeConformance.ts | 2 +- .../src/GlobalStyles/GlobalStyles.d.ts | 2 +- .../src/GlobalStyles/GlobalStyles.spec.tsx | 2 +- .../src/GlobalStyles/GlobalStyles.d.ts | 2 +- .../src/GlobalStyles/GlobalStyles.spec.tsx | 2 +- packages/mui-system/src/Stack/createStack.tsx | 4 ++-- .../src/cssVars/createCssVarsProvider.d.ts | 2 +- packages/mui-system/test/describeConformance.ts | 2 +- .../getValidReactChildren.ts | 2 +- 35 files changed, 54 insertions(+), 46 deletions(-) diff --git a/docs/data/material/components/app-bar/BackToTop.tsx b/docs/data/material/components/app-bar/BackToTop.tsx index c2d9673bdfa8fe..844439ea2913dd 100644 --- a/docs/data/material/components/app-bar/BackToTop.tsx +++ b/docs/data/material/components/app-bar/BackToTop.tsx @@ -16,7 +16,7 @@ interface Props { * You won't need it on your project. */ window?: () => Window; - children?: React.ReactElement; + children?: React.ReactElement; } function ScrollTop(props: Props) { diff --git a/docs/data/material/components/app-bar/ElevateAppBar.tsx b/docs/data/material/components/app-bar/ElevateAppBar.tsx index df548678f153fd..41f9f304c89c37 100644 --- a/docs/data/material/components/app-bar/ElevateAppBar.tsx +++ b/docs/data/material/components/app-bar/ElevateAppBar.tsx @@ -13,7 +13,7 @@ interface Props { * You won't need it on your project. */ window?: () => Window; - children?: React.ReactElement; + children?: React.ReactElement<{ elevation?: number }>; } function ElevationScroll(props: Props) { diff --git a/docs/data/material/components/app-bar/HideAppBar.tsx b/docs/data/material/components/app-bar/HideAppBar.tsx index 925410ed692eb9..9c4edd8a1af106 100644 --- a/docs/data/material/components/app-bar/HideAppBar.tsx +++ b/docs/data/material/components/app-bar/HideAppBar.tsx @@ -14,7 +14,7 @@ interface Props { * You won't need it on your project. */ window?: () => Window; - children?: React.ReactElement; + children?: React.ReactElement; } function HideOnScroll(props: Props) { diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx index cfa2ccd1a91e93..11440cf0be8ec3 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx +++ b/docs/data/material/components/autocomplete/Virtualize.tsx @@ -58,9 +58,13 @@ const ListboxComponent = React.forwardRef< React.HTMLAttributes >(function ListboxComponent(props, ref) { const { children, ...other } = props; - const itemData: React.ReactElement[] = []; - (children as React.ReactElement[]).forEach( - (item: React.ReactElement & { children?: React.ReactElement[] }) => { + const itemData: React.ReactElement[] = []; + (children as React.ReactElement[]).forEach( + ( + item: React.ReactElement & { + children?: React.ReactElement[]; + }, + ) => { itemData.push(item); itemData.push(...(item.children || [])); }, @@ -73,7 +77,7 @@ const ListboxComponent = React.forwardRef< const itemCount = itemData.length; const itemSize = smUp ? 36 : 48; - const getChildSize = (child: React.ReactElement) => { + const getChildSize = (child: React.ReactElement) => { if (child.hasOwnProperty('group')) { return 48; } diff --git a/docs/data/material/components/dialogs/FullScreenDialog.tsx b/docs/data/material/components/dialogs/FullScreenDialog.tsx index 5b0dc07b9cd042..2215e96f891b12 100644 --- a/docs/data/material/components/dialogs/FullScreenDialog.tsx +++ b/docs/data/material/components/dialogs/FullScreenDialog.tsx @@ -15,7 +15,7 @@ import { TransitionProps } from '@mui/material/transitions'; const Transition = React.forwardRef(function Transition( props: TransitionProps & { - children: React.ReactElement; + children: React.ReactElement; }, ref: React.Ref, ) { diff --git a/docs/data/material/components/lists/InteractiveList.tsx b/docs/data/material/components/lists/InteractiveList.tsx index 661995d60917d4..e667a977cda23a 100644 --- a/docs/data/material/components/lists/InteractiveList.tsx +++ b/docs/data/material/components/lists/InteractiveList.tsx @@ -16,7 +16,7 @@ import Typography from '@mui/material/Typography'; import FolderIcon from '@mui/icons-material/Folder'; import DeleteIcon from '@mui/icons-material/Delete'; -function generate(element: React.ReactElement) { +function generate(element: React.ReactElement) { return [0, 1, 2].map((value) => React.cloneElement(element, { key: value, diff --git a/docs/data/material/components/popper/SpringPopper.tsx b/docs/data/material/components/popper/SpringPopper.tsx index 5526317503ff16..636bedcfc229c1 100644 --- a/docs/data/material/components/popper/SpringPopper.tsx +++ b/docs/data/material/components/popper/SpringPopper.tsx @@ -4,7 +4,7 @@ import Popper from '@mui/material/Popper'; import { useSpring, animated } from '@react-spring/web'; interface FadeProps { - children?: React.ReactElement; + children?: React.ReactElement; in?: boolean; onEnter?: () => void; onExited?: () => void; diff --git a/docs/data/material/components/rating/RadioGroupRating.tsx b/docs/data/material/components/rating/RadioGroupRating.tsx index f42709d21c1359..89a509e2d0effe 100644 --- a/docs/data/material/components/rating/RadioGroupRating.tsx +++ b/docs/data/material/components/rating/RadioGroupRating.tsx @@ -15,7 +15,7 @@ const StyledRating = styled(Rating)(({ theme }) => ({ const customIcons: { [index: string]: { - icon: React.ReactElement; + icon: React.ReactElement; label: string; }; } = { diff --git a/docs/data/material/components/steppers/CustomizedSteppers.tsx b/docs/data/material/components/steppers/CustomizedSteppers.tsx index 64d482102e4d60..3c21df5ca89135 100644 --- a/docs/data/material/components/steppers/CustomizedSteppers.tsx +++ b/docs/data/material/components/steppers/CustomizedSteppers.tsx @@ -146,7 +146,7 @@ const ColorlibStepIconRoot = styled('div')<{ function ColorlibStepIcon(props: StepIconProps) { const { active, completed, className } = props; - const icons: { [index: string]: React.ReactElement } = { + const icons: { [index: string]: React.ReactElement } = { 1: , 2: , 3: , diff --git a/docs/data/material/integrations/routing/ListRouter.tsx b/docs/data/material/integrations/routing/ListRouter.tsx index 103e54c278419c..669d548181ffca 100644 --- a/docs/data/material/integrations/routing/ListRouter.tsx +++ b/docs/data/material/integrations/routing/ListRouter.tsx @@ -27,7 +27,7 @@ function Router(props: { children?: React.ReactNode }) { } interface ListItemLinkProps { - icon?: React.ReactElement; + icon?: React.ReactElement; primary: string; to: string; } diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx index 270d092bb82bc0..bc0ac02fdd79f5 100644 --- a/docs/src/components/about/HowToSupport.tsx +++ b/docs/src/components/about/HowToSupport.tsx @@ -21,7 +21,7 @@ function Widget({ }: { children: React.ReactNode; title: string; - icon: React.ReactElement; + icon: React.ReactElement; }) { return ( ; + icon: React.ReactElement; name: React.ReactNode; description: React.ReactNode; chip?: React.ReactNode; diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx index e65a553dd8e2b9..ef241db8b9ce32 100644 --- a/docs/src/components/home/MaterialDesignComponents.tsx +++ b/docs/src/components/home/MaterialDesignComponents.tsx @@ -125,7 +125,7 @@ function Demo({ }: { name: string; theme: Theme | undefined; - children: React.ReactElement; + children: React.ReactElement; control?: { prop: string; values: Array; defaultValue?: string }; }) { const [propValue, setPropValue] = React.useState( diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx index 8d8316d68bd1e6..c9e280c40132b8 100644 --- a/docs/src/components/home/UserFeedbacks.tsx +++ b/docs/src/components/home/UserFeedbacks.tsx @@ -95,7 +95,7 @@ function Feedback({ avatarSrcSet: string; name: string; role: string; - company?: React.ReactElement; + company?: React.ReactElement; }; }) { return ( diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx index 370b9ad3c4a861..6dd607e3477de8 100644 --- a/docs/src/components/pricing/PricingTable.tsx +++ b/docs/src/components/pricing/PricingTable.tsx @@ -378,7 +378,7 @@ function RowHead({ children, startIcon, ...props -}: BoxProps & { startIcon?: React.ReactElement }) { +}: BoxProps & { startIcon?: React.ReactElement }) { return ( , nested?: boolean) { + function renderList(content: React.ReactElement, nested?: boolean) { return ( > = { +const viewIcons: Record> = { quilt: , module: , agenda: , diff --git a/docs/src/components/typography/SectionHeadline.tsx b/docs/src/components/typography/SectionHeadline.tsx index 87a98753c61487..101cd3c1141d51 100644 --- a/docs/src/components/typography/SectionHeadline.tsx +++ b/docs/src/components/typography/SectionHeadline.tsx @@ -11,7 +11,7 @@ interface SectionHeadlineProps { */ inverted?: boolean; overline?: React.ReactNode; - title: string | React.ReactElement; + title: string | React.ReactElement>; } export default function SectionHeadline(props: SectionHeadlineProps) { diff --git a/docs/src/layouts/HeroContainer.tsx b/docs/src/layouts/HeroContainer.tsx index aef873256e4dc7..bb238bf622e0ad 100644 --- a/docs/src/layouts/HeroContainer.tsx +++ b/docs/src/layouts/HeroContainer.tsx @@ -8,9 +8,9 @@ import { alpha } from '@mui/material/styles'; interface HeroContainerProps { disableMobileHidden?: boolean; disableTabExclusion?: boolean; - left: React.ReactElement; + left: React.ReactElement; linearGradient?: boolean; - right: React.ReactElement; + right: React.ReactElement; rightSx?: BoxProps['sx']; } diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx index 92f13c2fe8f964..98804104e7b016 100644 --- a/docs/src/modules/components/JoyUsageDemo.tsx +++ b/docs/src/modules/components/JoyUsageDemo.tsx @@ -165,7 +165,7 @@ interface JoyUsageDemoProps { * A function to override the code block result. */ getCodeBlock?: (code: string, props: ComponentProps) => string; - renderDemo: (props: ComponentProps) => React.ReactElement; + renderDemo: (props: ComponentProps) => React.ReactElement; } export default function JoyUsageDemo({ diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx index 433d09753ac6a3..a691cc654f9112 100644 --- a/docs/src/modules/components/JoyVariablesDemo.tsx +++ b/docs/src/modules/components/JoyVariablesDemo.tsx @@ -33,7 +33,7 @@ function formatSx(sx: { [k: string]: string | number }) { interface SlotVariablesProps { slot: string; data: Array; - renderField: (item: DataItem) => React.ReactElement; + renderField: (item: DataItem) => React.ReactElement; defaultOpen?: boolean; } @@ -83,7 +83,7 @@ export default function JoyVariablesDemo(props: { componentName: string; childrenAccepted?: boolean; data: Array, { defaultOpen?: boolean } | undefined]>; - renderDemo: (sx: { [k: string]: string | number }) => React.ReactElement; + renderDemo: (sx: { [k: string]: string | number }) => React.ReactElement; renderCode?: (formattedSx: string) => string; }) { const { componentName, data = [], childrenAccepted = false, renderCode } = props; diff --git a/docs/types/docs.d.ts b/docs/types/docs.d.ts index fc96dea50c386a..4d77ba0ecabb66 100644 --- a/docs/types/docs.d.ts +++ b/docs/types/docs.d.ts @@ -23,7 +23,7 @@ declare module 'docs/src/modules/components/HighlightedCode' { component?: React.ElementType; sx?: object; } - export default function HighlightedCode(props: Props): React.ReactElement; + export default function HighlightedCode(props: Props): React.ReactElement; } declare module 'react-imask'; diff --git a/packages-internal/test-utils/src/createRenderer.tsx b/packages-internal/test-utils/src/createRenderer.tsx index 692174acbdc113..6943b10d1d9967 100644 --- a/packages-internal/test-utils/src/createRenderer.tsx +++ b/packages-internal/test-utils/src/createRenderer.tsx @@ -285,8 +285,12 @@ export interface MuiRenderToStringResult { hydrate(): MuiRenderResult; } +interface DataAttributes { + [key: `data-${string}`]: string; +} + function render( - element: React.ReactElement, + element: React.ReactElement, configuration: ClientRenderConfiguration, ): MuiRenderResult { const { container, hydrate, wrapper } = configuration; @@ -322,7 +326,7 @@ function render( } function renderToString( - element: React.ReactElement, + element: React.ReactElement, configuration: ServerRenderConfiguration, ): { container: HTMLElement; hydrate(): MuiRenderResult } { const { container, wrapper: Wrapper } = configuration; @@ -449,9 +453,9 @@ function createClock( export interface Renderer { clock: Clock; - render(element: React.ReactElement, options?: RenderOptions): MuiRenderResult; + render(element: React.ReactElement, options?: RenderOptions): MuiRenderResult; renderToString( - element: React.ReactElement, + element: React.ReactElement, options?: RenderOptions, ): MuiRenderToStringResult; } @@ -593,7 +597,7 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende return { clock, - render(element: React.ReactElement, options: RenderOptions = {}) { + render(element: React.ReactElement, options: RenderOptions = {}) { if (!prepared) { throw new Error( 'Unable to finish setup before `render()` was called. ' + @@ -608,7 +612,7 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende wrapper: createWrapper(options), }); }, - renderToString(element: React.ReactElement, options: RenderOptions = {}) { + renderToString(element: React.ReactElement, options: RenderOptions = {}) { if (!prepared) { throw new Error( 'Unable to finish setup before `render()` was called. ' + diff --git a/packages/mui-lab/test/describeConformance.ts b/packages/mui-lab/test/describeConformance.ts index 62213f84d1e951..466ef545767c2f 100644 --- a/packages/mui-lab/test/describeConformance.ts +++ b/packages/mui-lab/test/describeConformance.ts @@ -5,7 +5,7 @@ import { import { ThemeProvider, createTheme } from '@mui/material/styles'; export default function describeConformance( - minimalElement: React.ReactElement, + minimalElement: React.ReactElement, getOptions: () => ConformanceOptions, ) { function getOptionsWithDefaults() { diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13Document.tsx b/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13Document.tsx index 2bc922d62dd059..924b38638f4bfc 100644 --- a/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13Document.tsx +++ b/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13Document.tsx @@ -37,7 +37,7 @@ export function createGetInitialProps(plugins: Plugin[]) { } export interface DocumentHeadTagsProps { - emotionStyleTags: React.ReactElement[]; + emotionStyleTags: React.ReactElement[]; } export function DocumentHeadTags(props: DocumentHeadTagsProps) { diff --git a/packages/mui-material/src/Popper/Popper.spec.tsx b/packages/mui-material/src/Popper/Popper.spec.tsx index 0431883265da3f..94a4cad381add3 100644 --- a/packages/mui-material/src/Popper/Popper.spec.tsx +++ b/packages/mui-material/src/Popper/Popper.spec.tsx @@ -3,7 +3,7 @@ import { Instance } from '@popperjs/core'; import Tooltip from '@mui/material/Tooltip'; interface Props { - children: React.ReactElement; + children: React.ReactElement; value: number; } diff --git a/packages/mui-material/test/describeConformance.ts b/packages/mui-material/test/describeConformance.ts index 62213f84d1e951..466ef545767c2f 100644 --- a/packages/mui-material/test/describeConformance.ts +++ b/packages/mui-material/test/describeConformance.ts @@ -5,7 +5,7 @@ import { import { ThemeProvider, createTheme } from '@mui/material/styles'; export default function describeConformance( - minimalElement: React.ReactElement, + minimalElement: React.ReactElement, getOptions: () => ConformanceOptions, ) { function getOptionsWithDefaults() { diff --git a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts index 0c2ef1cd47e33f..d1881586abe383 100644 --- a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts +++ b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts @@ -8,4 +8,4 @@ export interface GlobalStylesProps { export default function Global( props: GlobalStylesProps, -): React.ReactElement; +): React.JSX.Element; diff --git a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.spec.tsx b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.spec.tsx index f253f453661a40..8365b797407f18 100644 --- a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.spec.tsx +++ b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.spec.tsx @@ -25,7 +25,7 @@ export interface GlobalStylesProps { styles: SCGlobalStylesProps['styles']; } -function GlobalStyles(props: GlobalStylesProps): React.ReactElement { +function GlobalStyles(props: GlobalStylesProps): React.JSX.Element { return ; } diff --git a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts index e746c3036a3a62..a7a7f66f2c78d5 100644 --- a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts +++ b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts @@ -8,4 +8,4 @@ export interface GlobalStylesProps { export default function GlobalStyles( props: GlobalStylesProps, -): React.ReactElement; +): React.JSX.Element; diff --git a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.spec.tsx b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.spec.tsx index 13b34d7f29b019..142e29f5d4bb75 100644 --- a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.spec.tsx +++ b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.spec.tsx @@ -25,7 +25,7 @@ export interface GlobalStylesProps { styles: EmGlobalStylesProps['styles']; } -function GlobalStyles(props: GlobalStylesProps): React.ReactElement { +function GlobalStyles(props: GlobalStylesProps): React.JSX.Element { return ; } diff --git a/packages/mui-system/src/Stack/createStack.tsx b/packages/mui-system/src/Stack/createStack.tsx index f2a3c1b57e9f69..30293ab42b0a32 100644 --- a/packages/mui-system/src/Stack/createStack.tsx +++ b/packages/mui-system/src/Stack/createStack.tsx @@ -50,7 +50,7 @@ function useThemePropsDefault(props: T) { * > joinChildren([1,2,3], 0) * [1,0,2,0,3] */ -function joinChildren(children: React.ReactNode, separator: React.ReactElement) { +function joinChildren(children: React.ReactNode, separator: React.ReactElement) { const childrenArray = React.Children.toArray(children).filter(Boolean); return childrenArray.reduce((output, child, index) => { @@ -209,7 +209,7 @@ export default function createStack( className={clsx(classes.root, className)} {...other} > - {divider ? joinChildren(children, divider as React.ReactElement) : children} + {divider ? joinChildren(children, divider as React.ReactElement) : children} ); }) as OverridableComponent; diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts index f1d7ba4ddc10a6..5dee405542060e 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts @@ -88,7 +88,7 @@ export interface CreateCssVarsProviderResult< disableStyleSheetGeneration?: boolean; } >, - ) => React.ReactElement; + ) => React.JSX.Element; useColorScheme: () => ColorSchemeContextValue; getInitColorSchemeScript: typeof InitColorSchemeScript; } diff --git a/packages/mui-system/test/describeConformance.ts b/packages/mui-system/test/describeConformance.ts index f642f1973c18cb..0ad3b4a462f7d6 100644 --- a/packages/mui-system/test/describeConformance.ts +++ b/packages/mui-system/test/describeConformance.ts @@ -5,7 +5,7 @@ import { import { ThemeProvider, createTheme } from '@mui/system'; export default function describeConformance( - minimalElement: React.ReactElement, + minimalElement: React.ReactElement, getOptions: () => ConformanceOptions, ) { function getOptionsWithDefaults() { diff --git a/packages/mui-utils/src/getValidReactChildren/getValidReactChildren.ts b/packages/mui-utils/src/getValidReactChildren/getValidReactChildren.ts index ea1132e5fc32ba..f7e33f77d73551 100644 --- a/packages/mui-utils/src/getValidReactChildren/getValidReactChildren.ts +++ b/packages/mui-utils/src/getValidReactChildren/getValidReactChildren.ts @@ -9,5 +9,5 @@ import * as React from 'react'; export default function getValidReactChildren(children: React.ReactNode) { return React.Children.toArray(children).filter((child) => React.isValidElement(child), - ) as React.ReactElement[]; + ) as React.ReactElement[]; }