Allow ReactNode as LabeledValue value

adobe · Jan 28, 2025 · 9493cf0 · 9493cf0
1 parent fd7075c
commit 9493cf0
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx b/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx
@@ -78,6 +78,15 @@ export const LabeledValue = React.forwardRef(function LabeledValue<T extends Spe
   } = props;
   let domRef = useDOMRef(ref);
 
+  // todo(sanmalik) - fix this
+  if (
+    domRef?.current &&
+    domRef.current.querySelectorAll("input, [contenteditable], textarea")
+      .length > 0
+  ) {
+    throw new Error("LabeledValue cannot contain an editable element.");
+  }
+
   let children;
   if (Array.isArray(value)) {
     children = <FormattedStringList value={value} formatOptions={formatOptions as Intl.ListFormatOptions} />;
@@ -103,6 +112,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>

diff --git a/packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx b/packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx
@@ -17,6 +17,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
 import {LabeledValue} from '..';
 import React from 'react';
+import { Link } from "@react-spectrum/link";
 
 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: "CustomComponent",
+};
+
 export let WithContextualHelp: LabeledValueStory = {
   args: {
     label: 'Test',

diff --git a/packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js b/packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js
@@ -275,6 +275,36 @@ 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", function () {
+    expect(() => {
+      render(
+        <LabeledValue
+          data-testid="test-id"
+          label={<input />}
+          value="test"
+          isEditable
+        />
+      );
+    }).toThrow("LabeledValue cannot contain an editable element.");
+  });
+
   it('attaches a user provided ref to the outer div', function () {
     let ref = React.createRef();
     let {getByTestId} = render(