fix(react): remove invalid React.RefAttributes with our custome RefAttributes type

Author: Hotell

packages/react/etc/react.api.md

@@ -224,6 +224,7 @@ export type {
   IRefObject,
   IRenderComponent,
   IRenderFunction,
+  RefAttributes,
   ISelection,
   ISelectionOptions,
   ISelectionOptionsWithRequiredGetKey,

packages/react/src/Utilities.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '@fluentui/date-time-utilities';
-import type { IRefObject, IBaseProps, IStyleFunctionOrObject } from '@fluentui/utilities';
+import type { IRefObject, IBaseProps, IStyleFunctionOrObject, RefAttributes } from '@fluentui/utilities';
 import type { IStyle, ITheme } from '@fluentui/style-utilities';
 import type { ICalendarDayProps } from './CalendarDay/CalendarDay.types';
 import type { ICalendarMonthProps } from './CalendarMonth/CalendarMonth.types';
@@ -17,7 +16,7 @@ export interface ICalendar {
 /**
  * {@docCategory Calendar}
  */
-export interface ICalendarProps extends IBaseProps<ICalendar>, React.RefAttributes<HTMLDivElement> {
+export interface ICalendarProps extends IBaseProps<ICalendar>, RefAttributes<HTMLDivElement> {
   /**
    * Optional callback to access the ICalendar interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/react/src/components/Calendar/Calendar.types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import type { IStyle, ITheme } from '../../Styling';
-import type { IRectangle, IStyleFunctionOrObject } from '../../Utilities';
+import type { IRectangle, IStyleFunctionOrObject, RefAttributes } from '../../Utilities';
 import type { ICalloutPositionedInfo } from '../../Positioning';
 import type { ILayerProps } from '../../Layer';
 import type { IPopupProps } from '../../Popup';
@@ -11,7 +11,7 @@ import type { IPopupRestoreFocusParams } from '../../Popup';
 /**
  * {@docCategory Callout}
  */
-export interface ICalloutProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
+export interface ICalloutProps extends React.HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
   /**
    * The target that the Callout should try to position itself based on.
    * It can be an element, a query selector string of a valid element,

packages/react/src/components/Callout/Callout.types.ts

@@ -1,11 +1,10 @@
-import * as React from 'react';
 import type { IStyle, ITheme } from '../../Styling';
-import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
+import type { IRefObject, IStyleFunctionOrObject, RefAttributes } from '../../Utilities';
 
 /**
  * {@docCategory Check}
  */
-export interface ICheckProps extends React.RefAttributes<HTMLDivElement> {
+export interface ICheckProps extends RefAttributes<HTMLDivElement> {
   /**
    * Gets the component ref.
    */

packages/react/src/components/Check/Check.types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { IStyle, ITheme } from '@fluentui/style-utilities';
-import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/utilities';
+import type { IRefObject, IRenderFunction, IStyleFunctionOrObject, RefAttributes } from '@fluentui/utilities';
 import type { IIconProps } from '../Icon/Icon.types';
 
 /**
@@ -22,7 +22,7 @@ export interface ICheckbox {
  * Checkbox properties.
  * {@docCategory Checkbox}
  */
-export interface ICheckboxProps extends React.RefAttributes<HTMLDivElement> {
+export interface ICheckboxProps extends RefAttributes<HTMLDivElement> {
   /**
    * Optional callback to access the `ICheckbox` interface. Use this instead of `ref` for accessing
    * the public methods and properties of the component.

packages/react/src/components/Checkbox/Checkbox.types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { IIconProps } from '../../Icon';
 import type { IStyle, ITheme } from '../../Styling';
-import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
+import type { IRefObject, IRenderFunction, IStyleFunctionOrObject, RefAttributes } from '../../Utilities';
 import type {
   IChoiceGroupOptionStyleProps,
   IChoiceGroupOptionStyles,
@@ -28,7 +28,7 @@ export interface IChoiceGroup {
  */
 export interface IChoiceGroupProps
   extends React.InputHTMLAttributes<HTMLElement | HTMLInputElement>,
-    React.RefAttributes<HTMLDivElement> {
+    RefAttributes<HTMLDivElement> {
   /**
    * Optional callback to access the `IChoiceGroup` interface. Use this instead of `ref` for accessing
    * the public methods and properties of the component.

packages/react/src/components/ChoiceGroup/ChoiceGroup.types.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { RectangleEdge } from '../../../Positioning';
+import type { RefAttributes } from '../../../Utilities';
 
-export interface IBeakProps extends React.RefAttributes<HTMLDivElement> {
+export interface IBeakProps extends RefAttributes<HTMLDivElement> {
   /**
    * @deprecated Not used.
    */

packages/react/src/components/Coachmark/Beak/Beak.types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { IStyle, ITheme } from '../../Styling';
 import type { IPositioningContainerProps } from './PositioningContainer/PositioningContainer.types';
-import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
+import type { IRefObject, IStyleFunctionOrObject, RefAttributes } from '../../Utilities';
 import type { ITeachingBubble } from '../../TeachingBubble';
 import type { Target } from '@fluentui/react-hooks';
 
@@ -19,7 +19,7 @@ export interface ICoachmark {
  * Coachmark component props
  * {@docCategory Coachmark}
  */
-export interface ICoachmarkProps extends React.RefAttributes<HTMLDivElement> {
+export interface ICoachmarkProps extends RefAttributes<HTMLDivElement> {
   /**
    * Optional callback to access the `ICoachmark` interface. Use this instead of `ref` for accessing
    * the public methods and properties of the component.

packages/react/src/components/Coachmark/Coachmark.types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DirectionalHint } from '../../../common/DirectionalHint';
-import type { IRefObject, IBaseProps, Point, IRectangle } from '../../../Utilities';
+import type { IRefObject, IBaseProps, Point, IRectangle, RefAttributes } from '../../../Utilities';
 import type { IPositionedData } from '../../../Positioning';
 import type { Target } from '@fluentui/react-hooks';
 import type { ILayerProps } from '../../../Layer';
@@ -13,9 +13,7 @@ export interface IPositioningContainer {}
 /**
  * {@docCategory Coachmark}
  */
-export interface IPositioningContainerProps
-  extends IBaseProps<IPositioningContainer>,
-    React.RefAttributes<HTMLDivElement> {
+export interface IPositioningContainerProps extends IBaseProps<IPositioningContainer>, RefAttributes<HTMLDivElement> {
   /**
    * All props for your component are to be defined here.
    */