forwardedRefs (deephaven#1909)

bmingles · Apr 2, 2024 · e3b3857 · e3b3857
1 parent 2f55e91
commit e3b3857
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 26 deletions.
diff --git a/packages/components/src/spectrum/Heading.tsx b/packages/components/src/spectrum/Heading.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import {
   Heading as SpectrumHeading,
   type HeadingProps as SpectrumHeadingProps,
 } from '@adobe/react-spectrum';
+import type { DOMRefValue } from '@react-types/shared';
 import { type ColorValue, colorValueStyle } from '../theme/colorUtils';
 
 export type HeadingProps = SpectrumHeadingProps & {
@@ -20,7 +21,10 @@ export type HeadingProps = SpectrumHeadingProps & {
  *
  */
 
-export function Heading(props: HeadingProps): JSX.Element {
+export const Heading = forwardRef<
+  DOMRefValue<HTMLHeadingElement>,
+  HeadingProps
+>((props, forwardedRef): JSX.Element => {
   const { color, UNSAFE_style, ...rest } = props;
   const style = useMemo(
     () => ({
@@ -30,7 +34,9 @@ export function Heading(props: HeadingProps): JSX.Element {
     [color, UNSAFE_style]
   );
 
-  return <SpectrumHeading {...rest} UNSAFE_style={style} />;
-}
+  return <SpectrumHeading {...rest} ref={forwardedRef} UNSAFE_style={style} />;
+});
+
+Heading.displayName = 'Heading';
 
 export default Heading;
diff --git a/packages/components/src/spectrum/Text.tsx b/packages/components/src/spectrum/Text.tsx
@@ -4,7 +4,7 @@ import {
   Text as SpectrumText,
   type TextProps as SpectrumTextProps,
 } from '@adobe/react-spectrum';
-import type { DOMRef, DOMRefValue } from '@react-types/shared';
+import type { DOMRefValue } from '@react-types/shared';
 import { type ColorValue, colorValueStyle } from '../theme/colorUtils';
 
 export type TextProps = SpectrumTextProps & {
@@ -20,8 +20,8 @@ export type TextProps = SpectrumTextProps & {
  * @returns The Text component
  *
  */
-export const Text = forwardRef<DOMRefValue<HTMLSpanElement>, SpectrumTextProps>(
-  (props: TextProps, ref): JSX.Element => {
+export const Text = forwardRef<DOMRefValue<HTMLSpanElement>, TextProps>(
+  (props, forwardedRef): JSX.Element => {
     const { color, UNSAFE_style, ...rest } = props;
     const style = useMemo(
       () => ({
@@ -31,13 +31,7 @@ export const Text = forwardRef<DOMRefValue<HTMLSpanElement>, SpectrumTextProps>(
       [color, UNSAFE_style]
     );
 
-    return (
-      <SpectrumText
-        {...rest}
-        ref={ref as unknown as DOMRef<HTMLDivElement>}
-        UNSAFE_style={style}
-      />
-    );
+    return <SpectrumText {...rest} ref={forwardedRef} UNSAFE_style={style} />;
   }
 );
 

diff --git a/packages/components/src/spectrum/View.tsx b/packages/components/src/spectrum/View.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import {
   View as SpectrumView,
   type ViewProps as SpectrumViewProps,
 } from '@adobe/react-spectrum';
+import type { DOMRefValue } from '@react-types/shared';
 import { type ColorValue, colorValueStyle } from '../theme/colorUtils';
 
 export type ViewProps = Omit<SpectrumViewProps<6>, 'backgroundColor'> & {
@@ -20,17 +21,21 @@ export type ViewProps = Omit<SpectrumViewProps<6>, 'backgroundColor'> & {
  *
  */
 
-export function View(props: ViewProps): JSX.Element {
-  const { backgroundColor, UNSAFE_style, ...rest } = props;
-  const style = useMemo(
-    () => ({
-      ...UNSAFE_style,
-      backgroundColor: colorValueStyle(backgroundColor),
-    }),
-    [backgroundColor, UNSAFE_style]
-  );
+export const View = forwardRef<DOMRefValue<HTMLElement>, ViewProps>(
+  (props, forwardedRef): JSX.Element => {
+    const { backgroundColor, UNSAFE_style, ...rest } = props;
+    const style = useMemo(
+      () => ({
+        ...UNSAFE_style,
+        backgroundColor: colorValueStyle(backgroundColor),
+      }),
+      [backgroundColor, UNSAFE_style]
+    );
 
-  return <SpectrumView {...rest} UNSAFE_style={style} />;
-}
+    return <SpectrumView {...rest} ref={forwardedRef} UNSAFE_style={style} />;
+  }
+);
+
+View.displayName = 'View';
 
 export default View;