diff --git a/packages/@react-spectrum/labeledvalue/docs/types.ts b/packages/@react-spectrum/labeledvalue/docs/types.ts index b1371894f1f..afe1e2a0b81 100644 --- a/packages/@react-spectrum/labeledvalue/docs/types.ts +++ b/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 | DateTime | RangeValue | ReactNode, + value: string | string[] | number | RangeValue | DateTime | RangeValue | 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 } diff --git a/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx b/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx index efcb5c33d21..0ad3da053cc 100644 --- a/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx +++ b/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 { formatOptions?: Intl.ListFormatOptions } -interface ReactNodeProps { +interface ReactElementProps { /** The value to display. */ value: T, /** Formatting options for the value. */ @@ -70,10 +70,10 @@ type LabeledValueProps = T extends DateTimeValue ? DateProps : T extends string[] ? StringListProps : T extends string ? StringProps : - T extends ReactNode ? ReactNodeProps : + T extends ReactElement ? ReactElementProps : never; -type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue | RangeValue | ReactNode; +type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue | RangeValue | ReactElement; export type SpectrumLabeledValueProps = LabeledValueProps & LabeledValueBaseProps; /** diff --git a/packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js b/packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js index 2ad09adce2a..9e0f9a050ba 100644 --- a/packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js +++ b/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(