fixup! chore(v8): handle issues with React 18 in v8

Author: mainframev

packages/react/etc/react.api.md

@@ -9918,7 +9918,7 @@ export { labelProperties }
 export const Layer: React_2.FunctionComponent<React_2.PropsWithChildren<ILayerProps>>;
 
 // @public (undocumented)
-export const LayerBase: React_2.ForwardRefExoticComponent<Omit<ILayerProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+export const LayerBase: React_2.FunctionComponent<React_2.PropsWithChildren<ILayerProps>>;
 
 // @public (undocumented)
 export const LayerHost: React_2.FunctionComponent<React_2.PropsWithChildren<ILayerHostProps>>;
@@ -10418,7 +10418,7 @@ export namespace personaSize {
 export const Pivot: React_2.FunctionComponent<React_2.PropsWithChildren<IPivotProps>>;
 
 // @public (undocumented)
-export const PivotBase: React_2.ForwardRefExoticComponent<Omit<IPivotProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+export const PivotBase: React_2.FunctionComponent<React_2.PropsWithChildren<IPivotProps>>;
 
 // @public (undocumented)
 export class PivotItem extends React_2.Component<IPivotItemProps, {}> {
@@ -10458,7 +10458,7 @@ export class PlainCardBase extends React_2.Component<IPlainCardProps, {}> {
 export { Point }
 
 // @public
-export const Popup: React_2.ForwardRefExoticComponent<Omit<IPopupProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+export const Popup: React_2.FunctionComponent<React_2.PropsWithChildren<IPopupProps>>;
 
 export { portalContainsElement }
 
@@ -11371,7 +11371,7 @@ export class ThemeGenerator {
 }
 
 // @public
-export const ThemeProvider: React_2.ForwardRefExoticComponent<Omit<ThemeProviderProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+export const ThemeProvider: React_2.FunctionComponent<React_2.PropsWithChildren<ThemeProviderProps>>;
 
 // @public
 export interface ThemeProviderProps extends React_2.HTMLAttributes<HTMLDivElement> {

packages/react/src/components/Layer/Layer.base.tsx

@@ -46,7 +46,10 @@ interface IHTMLElementWithTabsterFlags extends HTMLElement {
   };
 }
 
-export const LayerBase = React.forwardRef<HTMLDivElement, ILayerProps>((props, ref) => {
+export const LayerBase: React.FunctionComponent<React.PropsWithChildren<ILayerProps>> = React.forwardRef<
+  HTMLDivElement,
+  ILayerProps
+>((props, ref) => {
   const registerPortalEl = usePortalCompat();
 
   const rootRef = React.useRef<HTMLSpanElement>(null);

packages/react/src/components/Pivot/Pivot.base.tsx

@@ -65,7 +65,10 @@ const isPivotItem = (item: React.ReactNode): item is PivotItem => {
   );
 };
 
-export const PivotBase = React.forwardRef<HTMLDivElement, IPivotProps>((props, ref) => {
+export const PivotBase: React.FunctionComponent<React.PropsWithChildren<IPivotProps>> = React.forwardRef<
+  HTMLDivElement,
+  IPivotProps
+>((props, ref) => {
   const focusZoneRef = React.useRef<IFocusZone>(null);
   const overflowMenuButtonComponentRef = React.useRef<IButton>(null);
   const pivotId: string = useId('Pivot');

packages/react/src/components/Popup/Popup.tsx

@@ -139,7 +139,10 @@ function useHideSiblingNodes(props: IPopupProps, root: React.RefObject<HTMLDivEl
 /**
  * This adds accessibility to Dialog and Panel controls
  */
-export const Popup = React.forwardRef<HTMLDivElement, IPopupProps>((propsWithoutDefaults, forwardedRef) => {
+export const Popup: React.FunctionComponent<React.PropsWithChildren<IPopupProps>> = React.forwardRef<
+  HTMLDivElement,
+  IPopupProps
+>((propsWithoutDefaults, forwardedRef) => {
   const props = getPropsWithDefaults(
     { shouldRestoreFocus: true, enableAriaHiddenSiblings: true },
     propsWithoutDefaults,

packages/react/src/utilities/ThemeProvider/ThemeProvider.tsx

@@ -7,21 +7,23 @@ import type { ThemeProviderProps } from './ThemeProvider.types';
 /**
  * ThemeProvider, used for providing css variables and registering stylesheets.
  */
-export const ThemeProvider = React.forwardRef<HTMLDivElement, ThemeProviderProps>(
-  (props: ThemeProviderProps, ref: React.Ref<HTMLDivElement>) => {
-    const rootRef = useMergedRefs(ref, React.useRef<HTMLElement>(null));
-    const { render, state } = useThemeProvider(props, {
-      ref: rootRef,
-      as: 'div',
-      applyTo: 'element',
-    });
+// @ts-expect-error React 18 RefAttibutes LegacyRef issue
+export const ThemeProvider: React.FunctionComponent<React.PropsWithChildren<ThemeProviderProps>> = React.forwardRef<
+  HTMLDivElement,
+  ThemeProviderProps
+>((props: ThemeProviderProps, ref: React.Ref<HTMLDivElement>) => {
+  const rootRef = useMergedRefs(ref, React.useRef<HTMLElement>(null));
+  const { render, state } = useThemeProvider(props, {
+    ref: rootRef,
+    as: 'div',
+    applyTo: 'element',
+  });
 
-    // Render styles.
-    useThemeProviderClasses(state);
+  // Render styles.
+  useThemeProviderClasses(state);
 
-    // Return the rendered content.
-    return render(state);
-  },
-);
+  // Return the rendered content.
+  return render(state);
+});
 
 ThemeProvider.displayName = 'ThemeProvider';