feat: Allow ReactElement in LabeledValue value

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} from 'react';
+import React, {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.
@@ -65,7 +65,7 @@ type LabeledValueProps<T> =
   T extends string ? StringProps<T> :
   never;
 
-type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime>;
+type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime> | ReactNode;
 export type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBaseProps;
 
 /**
@@ -78,6 +78,18 @@ export const LabeledValue = React.forwardRef(function LabeledValue<T extends Spe
   } = props;
   let domRef = useDOMRef(ref);
 
+  // todo(sanmalik) - fix this
+  useEffect(() => {
+    if (
+      domRef?.current &&
+      domRef.current.querySelectorAll('input, [contenteditable], textarea')
+        .length > 0
+    ) {
+      throw new Error('LabeledValue cannot contain an editable value.');
+    }
+  }, [domRef]);
+
+
   let children;
   if (Array.isArray(value)) {
     children = <FormattedStringList value={value} formatOptions={formatOptions as Intl.ListFormatOptions} />;
@@ -103,6 +115,10 @@ export const LabeledValue = React.forwardRef(function LabeledValue<T extends Spe
     children = value;
   }
 
+  if (React.isValidElement(value)) {
+    children = value;
+  }
+
   return (
     <Field {...props as any} wrapperProps={filterDOMProps(props as any)} ref={domRef} elementType="span" wrapperClassName={classNames(labelStyles, 'spectrum-LabeledValue')}>
       <span>{children}</span>

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

@@ -16,6 +16,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
 import {LabeledValue} from '..';
+import {Link} from '@react-spectrum/link';
 import React from 'react';
 
 type LabeledValueStory = ComponentStoryObj<typeof LabeledValue>;
@@ -120,6 +121,15 @@ export let NumberRange: LabeledValueStory = {
   name: 'RangeValue<Number>'
 };
 
+
+export let CustomComponent: LabeledValueStory = {
+  args: {
+    label: 'Test',
+    value: <Link href="https://www.adobe.com">Adobe</Link>
+  },
+  name: 'Custom component'
+};
+
 export let WithContextualHelp: LabeledValueStory = {
   args: {
     label: 'Test',

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

@@ -13,7 +13,7 @@
 import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from '@internationalized/date';
 import {LabeledValue} from '../src';
 import React from 'react';
-import {render, within} from '@react-spectrum/test-utils-internal';
+import {render, waitFor, within} from '@react-spectrum/test-utils-internal';
 
 describe('LabeledValue', function () {
   it('renders a label', function () {
@@ -275,6 +275,33 @@ describe('LabeledValue', function () {
     expect(staticField).toHaveTextContent('10 – 20');
   });
 
+  it('renders correctly with ReactNode value', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={<a href="https://test.com">test</a>} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('test');
+    expect(
+      within(staticField).getByRole('link', {name: 'test'})
+    ).toBeInTheDocument();
+  });
+
+  it('throws when an editable value is provided', async function () {
+    await waitFor(() => { 
+      expect(() => render(
+        <LabeledValue
+          data-testid="test-id"
+          label="Field label"
+          value={<input />} />
+      )).toThrowError('LabeledValue cannot contain an editable value.');
+    });
+  });
+
   it('attaches a user provided ref to the outer div', function () {
     let ref = React.createRef();
     let {getByTestId} = render(