ref(js): Avoid import * as React in forwardRef only files (#34270)

static/app/components/avatar/backgroundAvatar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {forwardRef} from 'react';
 import styled from '@emotion/styled';
 
 import {imageStyle} from 'sentry/components/avatar/styles';
@@ -31,6 +31,6 @@ BackgroundAvatar.defaultProps = {
   suggested: true,
 };
 
-export default React.forwardRef<SVGSVGElement, Props>((props, ref) => (
+export default forwardRef<SVGSVGElement, Props>((props, ref) => (
   <BackgroundAvatar forwardedRef={ref} {...props} />
 ));

static/app/components/avatar/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {forwardRef} from 'react';
 
 import DocIntegrationAvatar from 'sentry/components/avatar/docIntegrationAvatar';
 import OrganizationAvatar from 'sentry/components/avatar/organizationAvatar';
@@ -30,7 +30,7 @@ type Props = {
   team?: Team;
 } & UserAvatar['props'];
 
-const Avatar = React.forwardRef(function Avatar(
+const Avatar = forwardRef(function Avatar(
   {
     hasTooltip = false,
     user,

static/app/components/charts/heatMapChart.tsx

@@ -1,6 +1,6 @@
 import './components/visualMap';
 
-import * as React from 'react';
+import {forwardRef} from 'react';
 import type {HeatmapSeriesOption, VisualMapComponentOption} from 'echarts';
 
 import {ReactEchartsRef, Series} from 'sentry/types/echarts';
@@ -21,7 +21,7 @@ type Props = Omit<ChartProps, 'series'> & {
   seriesOptions?: HeatmapSeriesOption;
 };
 
-export default React.forwardRef<ReactEchartsRef, Props>((props, ref) => {
+export default forwardRef<ReactEchartsRef, Props>((props, ref) => {
   const {series, seriesOptions, visualMaps, ...otherProps} = props;
   return (
     <BaseChart

static/app/components/dropdownButton.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {forwardRef} from 'react';
 import styled from '@emotion/styled';
 
 import Button, {ButtonProps} from 'sentry/components/button';
@@ -132,6 +132,6 @@ const LabelText = styled('span')`
   }
 `;
 
-export default React.forwardRef<typeof Button, DropdownButtonProps>((props, ref) => (
+export default forwardRef<typeof Button, DropdownButtonProps>((props, ref) => (
   <DropdownButton forwardedRef={ref} {...props} />
 ));

static/app/components/forms/controls/radioBoolean.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {forwardRef} from 'react';
 
 type OnChangeHandler = (
   value: boolean,
@@ -14,7 +14,7 @@ type OptionProps = {
   onChange?: OnChangeHandler;
 };
 
-const Option = React.forwardRef(function Option(
+const Option = forwardRef(function Option(
   {name, disabled, label, value, checked, onChange}: OptionProps,
   ref: React.Ref<HTMLInputElement>
 ) {
@@ -52,7 +52,7 @@ type Props = {
   yesLabel?: string;
 };
 
-const RadioBoolean = React.forwardRef(function RadioBoolean(
+const RadioBoolean = forwardRef(function RadioBoolean(
   {
     disabled,
     name,

static/app/components/forms/controls/textarea.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {forwardRef} from 'react';
 import TextareaAutosize from 'react-autosize-textarea';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
@@ -24,7 +24,7 @@ export interface TextAreaProps
   rows?: number;
 }
 
-const TextAreaControl = React.forwardRef(function TextAreaControl(
+const TextAreaControl = forwardRef(function TextAreaControl(
   {autosize, rows, maxRows, ...p}: TextAreaProps,
   ref: React.Ref<HTMLTextAreaElement>
 ) {

static/app/components/forms/selectControl.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {forwardRef} from 'react';
 import ReactSelect, {
   components as selectComponents,
   GroupedOptionsType,
@@ -471,7 +471,7 @@ function SelectPicker<OptionType>({
 }
 
 // The generics need to be filled here as forwardRef can't expose generics.
-const RefForwardedSelectControl = React.forwardRef<
+const RefForwardedSelectControl = forwardRef<
   ReactSelect<GeneralSelectValue>,
   ControlProps<GeneralSelectValue>
 >(function RefForwardedSelectControl(props, ref) {

static/app/components/letterAvatar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {forwardRef} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -110,6 +110,6 @@ LetterAvatar.defaultProps = {
   round: false,
 };
 
-export default React.forwardRef<SVGSVGElement, Props>((props, ref) => (
+export default forwardRef<SVGSVGElement, Props>((props, ref) => (
   <LetterAvatar forwardedRef={ref} {...props} />
 ));

static/app/components/onboardingWizard/task.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {forwardRef} from 'react';
 import {withRouter, WithRouterProps} from 'react-router';
 import styled from '@emotion/styled';
 import {motion} from 'framer-motion';
@@ -287,7 +287,7 @@ TaskBlankAvatar.defaultProps = {
 
 const WrappedTask = withOrganization(withRouter(Task));
 
-export default React.forwardRef<
+export default forwardRef<
   HTMLDivElement,
   Omit<React.ComponentProps<typeof WrappedTask>, 'forwardedRef'>
 >((props, ref) => <WrappedTask forwardedRef={ref} {...props} />);

static/app/components/organizations/headerItem.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {forwardRef} from 'react';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
@@ -16,7 +16,7 @@ type DefaultProps = {
 
 type Props = {
   icon: React.ReactNode;
-  forwardRef?: React.Ref<HTMLDivElement>;
+  forwardedRef?: React.Ref<HTMLDivElement>;
   hasChanges?: boolean;
   hasSelected?: boolean;
   hint?: string;
@@ -39,7 +39,7 @@ function HeaderItem({
   settingsLink,
   hint,
   loading,
-  forwardRef,
+  forwardedRef,
   onClear,
   allowClear = true,
   ...props
@@ -57,7 +57,7 @@ function HeaderItem({
 
   return (
     <StyledHeaderItem
-      ref={forwardRef}
+      ref={forwardedRef}
       loading={!!loading}
       {...omit(props, 'onClear')}
       {...textColorProps}
@@ -195,6 +195,6 @@ const StyledLock = styled(IconLock)`
   stroke-width: 1.5;
 `;
 
-export default React.forwardRef<HTMLDivElement, Props>((props, ref) => (
-  <HeaderItem forwardRef={ref} {...props} />
+export default forwardRef<HTMLDivElement, Props>((props, ref) => (
+  <HeaderItem forwardedRef={ref} {...props} />
 ));