chore: redeclare RefAttributes instead of supporting LegacyRef

Author: bsunderhus

packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.tsx

@@ -10,14 +10,16 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
  * DataGridBody component
  */
 export const DataGridBody: ForwardRefComponent<DataGridBodyProps> &
-  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
-  const state = useDataGridBody_unstable(props, ref);
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef<HTMLElement, DataGridBodyProps>(
+  (props, ref) => {
+    const state = useDataGridBody_unstable(props, ref);
 
-  useDataGridBodyStyles_unstable(state);
+    useDataGridBodyStyles_unstable(state);
 
-  useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state);
+    useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state);
 
-  return renderDataGridBody_unstable(state);
-}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
+    return renderDataGridBody_unstable(state);
+  },
+) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 DataGridBody.displayName = 'DataGridBody';

packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.tsx

@@ -10,14 +10,16 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
  * DataGridRow component
  */
 export const DataGridRow: ForwardRefComponent<DataGridRowProps> &
-  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
-  const state = useDataGridRow_unstable(props, ref);
+  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef<HTMLElement, DataGridRowProps>(
+  (props, ref) => {
+    const state = useDataGridRow_unstable(props, ref);
 
-  useDataGridRowStyles_unstable(state);
+    useDataGridRowStyles_unstable(state);
 
-  useCustomStyleHook_unstable('useDataGridRowStyles_unstable')(state);
+    useCustomStyleHook_unstable('useDataGridRowStyles_unstable')(state);
 
-  return renderDataGridRow_unstable(state);
-}) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
+    return renderDataGridRow_unstable(state);
+  },
+) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
 
 DataGridRow.displayName = 'DataGridRow';

packages/react-components/react-utilities/etc/react-utilities.api.md

@@ -63,7 +63,7 @@ export type FluentTriggerComponent = {
 };
 
 // @public
-export type ForwardRefComponent<Props> = FunctionComponent<Props & React_2.RefAttributes<InferredElementRefType<Props>>>;
+export type ForwardRefComponent<Props> = NamedExoticComponent<Props & RefAttributes<InferredElementRefType<Props>>>;
 
 // @public
 export function getEventClientCoords(event: TouchOrMouseEvent): {
@@ -359,7 +359,7 @@ export const useIsomorphicLayoutEffect: typeof React_2.useEffect;
 export function useIsSSR(): boolean;
 
 // @public
-export function useMergedRefs<T>(...refs: ReactRefCompat<T>[]): RefObjectFunction<T>;
+export function useMergedRefs<T>(...refs: (React_2.Ref<T> | undefined)[]): RefObjectFunction<T>;
 
 // @internal (undocumented)
 export type UseOnClickOrScrollOutsideOptions = {

packages/react-components/react-utilities/src/compose/types.ts

@@ -3,9 +3,11 @@ import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constan
 import {
   ComponentType,
   FunctionComponent,
+  NamedExoticComponent,
   PropsWithoutChildren,
   PropsWithoutRef,
   ReactNode,
+  RefAttributes,
   ReplaceNullWithUndefined,
 } from '../utils/types';
 
@@ -233,7 +235,7 @@ export type InferredElementRefType<Props> = ObscureEventName extends keyof Props
  *
  * Note: {@link React.RefAttributes} is {@link https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69756 | leaking string references} into forwardRef components, forwardRef component do not support string refs.
  */
-export type ForwardRefComponent<Props> = FunctionComponent<Props & React.RefAttributes<InferredElementRefType<Props>>>;
+export type ForwardRefComponent<Props> = NamedExoticComponent<Props & RefAttributes<InferredElementRefType<Props>>>;
 
 /**
  * Helper type to correctly define the slot class names object.

packages/react-components/react-utilities/src/hooks/useMergedRefs.ts

@@ -9,25 +9,14 @@ export type RefObjectFunction<T> = React.RefObject<T> & ((value: T | null) => vo
 /** @internal */
 type MutableRefObjectFunction<T> = React.MutableRefObject<T | null> & ((value: T | null) => void);
 
-/**
- * This type is used to support both React 17 and React 18.
- *
- * In React 17, this is equivalent to  {@link React.Ref} | undefined,
- * but in React 18, this is equivalent to {@link React.LegacyRef} | undefined.
- *
- * We have to support both types as {@link React.RefAttributes} is used in component creation that are
- * using {@link React.forwardRef} method, which includes the majority of Fluent UI components.
- */
-type ReactRefCompat<T> = React.RefAttributes<T>['ref'];
-
 /**
  * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
  * updates all provided refs
  * @param refs - Refs to collectively update with one ref value.
  * @returns A function with an attached "current" prop, so that it can be treated like a RefObject.
  */
 // LegacyRef is actually not supported, but in React v18 types this is leaking directly from forwardRef component declaration
-export function useMergedRefs<T>(...refs: ReactRefCompat<T>[]): RefObjectFunction<T> {
+export function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObjectFunction<T> {
   'use no memo';
 
   const mergedCallback = React.useCallback(

packages/react-components/react-utilities/src/utils/types.ts

@@ -23,6 +23,16 @@ import * as React from 'react';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : T;
 
+/**
+ * @public
+ *
+ * Helper type that works similar to Pick,
+ * but when modifying an union type it will distribute the picking to all the union members.
+ *
+ * See {@link https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types} for more information
+ */
+export type DistributivePick<T, K> = T extends unknown ? Pick<T, K & keyof T> : never;
+
 /**
  * Converts a union type (`A | B | C`) to an intersection type (`A & B & C`)
  */
@@ -63,10 +73,25 @@ export type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
 export interface FunctionComponent<P> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (props: P): any;
-  defaultProps?: Partial<P>;
   displayName?: string;
 }
 
+export type FC<P> = FunctionComponent<P>;
+
+export interface ExoticComponent<P> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (props: P): any;
+  $$typeof: symbol;
+}
+
+export interface NamedExoticComponent<P> extends ExoticComponent<P> {
+  displayName?: string;
+}
+
+export interface RefAttributes<T> extends React.Attributes {
+  ref?: React.Ref<T> | undefined;
+}
+
 /**
  * @internal
  * **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**