Update to use ReactElement

packages/@react-spectrum/labeledvalue/docs/types.ts

@@ -1,11 +1,11 @@
 import {DateTime, LabeledValueBaseProps} from '@react-spectrum/labeledvalue/src/LabeledValue';
 import {RangeValue} from '@react-types/shared';
-import {ReactNode} from 'react';
+import {ReactElement} from 'react';
 
 // The doc generator is not smart enough to handle the real types for LabeledValue so this is a simpler one.
 export interface LabeledValueProps extends LabeledValueBaseProps {
   /** The value to display. */
-  value: string | string[] | number | RangeValue<number> | DateTime | RangeValue<DateTime> | ReactNode,
+  value: string | string[] | number | RangeValue<number> | DateTime | RangeValue<DateTime> | ReactElement,
   /** Formatting options for the value. The available options depend on the type passed to the `value` prop. */
   formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions | Intl.ListFormatOptions
 }

packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx

@@ -16,7 +16,7 @@ import type {DOMProps, DOMRef, RangeValue, SpectrumLabelableProps, StyleProps} f
 import {Field} from '@react-spectrum/label';
 import {filterDOMProps} from '@react-aria/utils';
 import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
-import React, {ReactNode, useEffect} from 'react';
+import React, {ReactElement, ReactNode, useEffect} from 'react';
 import {useDateFormatter, useListFormatter, useNumberFormatter} from '@react-aria/i18n';
 
 // NOTE: the types here need to be synchronized with the ones in docs/types.ts, which are simpler so the documentation generator can handle them.
@@ -58,7 +58,7 @@ interface StringListProps<T extends string[]> {
   formatOptions?: Intl.ListFormatOptions
 }
 
-interface ReactNodeProps<T extends ReactNode> {
+interface ReactElementProps<T extends ReactElement> {
   /** The value to display. */
   value: T,
   /** Formatting options for the value. */
@@ -70,10 +70,10 @@ type LabeledValueProps<T> =
   T extends DateTimeValue ? DateProps<T> :
   T extends string[] ? StringListProps<T> :
   T extends string ? StringProps<T> :
-  T extends ReactNode ? ReactNodeProps<T> :
+  T extends ReactElement ? ReactElementProps<T> :
   never;
 
-type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime> | ReactNode;
+type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime> | ReactElement;
 export type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBaseProps;
 
 /**

packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js

@@ -275,7 +275,7 @@ describe('LabeledValue', function () {
     expect(staticField).toHaveTextContent('10 – 20');
   });
 
-  it('renders correctly with ReactNode value', function () {
+  it('renders correctly with ReactElement value', function () {
     let {getByTestId} = render(
       <LabeledValue
         data-testid="test-id"