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

Author: mainframev

packages/react/etc/react.api.md

@@ -34,6 +34,7 @@ export class Autofill extends React.Component<IAutofillProps, IAutofillState> im
   };
   // need to check WindowContext to get the provided document
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _inputElement = React.createRef<HTMLInputElement>();
   private _autoFillEnabled = true;
@@ -106,7 +107,7 @@ export class Autofill extends React.Component<IAutofillProps, IAutofillState> im
       return;
     }
 
-    const document = this.context?.window.document || getDocument(this._inputElement.current);
+    const document = this.context?.window?.document || getDocument(this._inputElement.current);
     const isFocused = this._inputElement.current && this._inputElement.current === document?.activeElement;
 
     if (

packages/react/src/components/Autofill/Autofill.tsx

@@ -469,7 +469,7 @@ function useDismissHandlers(
   return mouseDownHandlers;
 }
 
-export const CalloutContentBase: React.FunctionComponent<ICalloutProps> = React.memo(
+export const CalloutContentBase: React.FunctionComponent<React.PropsWithChildren<ICalloutProps>> = React.memo(
   React.forwardRef<HTMLDivElement, ICalloutProps>((propsWithoutDefaults, forwardedRef) => {
     const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
 
@@ -502,7 +502,7 @@ export const CalloutContentBase: React.FunctionComponent<ICalloutProps> = React.
 
     const hostElement = React.useRef<HTMLDivElement>(null);
     const popupRef = React.useRef<HTMLDivElement>(null);
-    const mergedPopupRefs = useMergedRefs(popupRef, popupProps?.ref);
+    const mergedPopupRefs = useMergedRefs(popupRef, popupProps?.ref as React.Ref<HTMLDivElement>);
     const [calloutElement, setCalloutElement] = React.useState<HTMLDivElement | null>(null);
     const calloutCallback = React.useCallback((calloutEl: any) => {
       setCalloutElement(calloutEl);

packages/react/src/components/Callout/CalloutContent.base.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
+import type { ICalloutProps } from './Callout.types';
 import { styled } from '../../Utilities';
 import { CalloutContentBase } from './CalloutContent.base';
 import { getStyles } from './CalloutContent.styles';
-import type { ICalloutProps } from './Callout.types';
 
-export const CalloutContent: React.FunctionComponent<ICalloutProps> = styled(CalloutContentBase, getStyles, undefined, {
-  scope: 'CalloutContent',
-});
+export const CalloutContent: React.FunctionComponent<React.PropsWithChildren<ICalloutProps>> = styled(
+  CalloutContentBase,
+  getStyles,
+  undefined,
+  {
+    scope: 'CalloutContent',
+  },
+);

packages/react/src/components/Callout/CalloutContent.tsx

@@ -8,7 +8,7 @@ import type { IFocusTrapCalloutProps } from './FocusTrapCallout.types';
  * A special Callout that uses FocusTrapZone to trap focus
  * @param props - Props for the component
  */
-export const FocusTrapCallout: React.FunctionComponent<IFocusTrapCalloutProps> = (
+export const FocusTrapCallout: React.FunctionComponent<React.PropsWithChildren<IFocusTrapCalloutProps>> = (
   props: IFocusTrapCalloutProps,
 ): JSX.Element => {
   return (

packages/react/src/components/Callout/FocusTrapCallout.tsx

@@ -380,7 +380,7 @@ describe('ColorPicker', () => {
 
     const redInput = getAllByRole('textbox')[1] as HTMLInputElement;
     userEvent.clear(redInput);
-    userEvent.paste(redInput, '255');
+    userEvent.paste('255');
     expect(onChange1).toHaveBeenCalledTimes(1);
     expect(newColor!.r).toBe(255);
     expect(colorPicker!.color.r).toBe(0);
@@ -550,12 +550,12 @@ describe('ColorPicker', () => {
 
     // new value too long "pasted" => use substring
     userEvent.clear(redInput);
-    userEvent.paste(redInput, '1000');
+    userEvent.paste('1000');
     validateChange({ calls: 4, prop: 'r', value: 100, input: redInput });
 
     // invalid new value too long "pasted" => use substring but don't call onChange
     userEvent.clear(redInput);
-    userEvent.paste(redInput, '4567');
+    userEvent.paste('4567');
 
     validateChange({ calls: 4, prop: 'r', value: 100, input: redInput, inputValue: '456' });
   });
@@ -642,7 +642,7 @@ describe('ColorPicker', () => {
     validateChange({ calls: 1, prop: 'hex', value: '123456', input: hexInput });
 
     // invalid new value too long "pasted" => ignore
-    userEvent.paste(hexInput, 'hello world');
+    userEvent.paste('hello world');
     validateChange({ calls: 1, prop: 'hex', value: '123456', input: hexInput });
   });
 
@@ -719,7 +719,7 @@ describe('ColorPicker', () => {
 
     // value too large => allowed in field but onChange not called
     userEvent.clear(transparencyInput);
-    userEvent.paste(transparencyInput, '123');
+    userEvent.paste('123');
     expect(onChange).toHaveBeenCalledTimes(0);
     expect(colorPicker!.color.a).toBe(30); // original value
     expect(colorPicker!.color.t).toBe(70);

packages/react/src/components/ColorPicker/ColorPicker.test.tsx

@@ -4,7 +4,7 @@ import { ColorPickerBase } from './ColorPicker.base';
 import { getStyles } from './ColorPicker.styles';
 import type { IColorPickerProps, IColorPickerStyles, IColorPickerStyleProps } from './ColorPicker.types';
 
-export const ColorPicker: React.FunctionComponent<IColorPickerProps> = styled<
+export const ColorPicker: React.FunctionComponent<React.PropsWithChildren<IColorPickerProps>> = styled<
   IColorPickerProps,
   IColorPickerStyleProps,
   IColorPickerStyles

packages/react/src/components/ColorPicker/ColorPicker.tsx

@@ -29,13 +29,16 @@ export class ColorRectangleBase
   implements IColorRectangle
 {
   public static contextType = WindowContext;
+
   public static defaultProps: Partial<IColorRectangleProps> = {
     minSize: 220,
     ariaLabel: 'Saturation and brightness',
     ariaValueFormat: 'Saturation {0} brightness {1}',
     ariaDescription: 'Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.',
   };
 
+  public context: React.ContextType<typeof WindowContext>;
+
   private _disposables: (() => void)[] = [];
   private _root = React.createRef<HTMLDivElement>();
   private _isAdjustingSaturation: boolean = true;

packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx

@@ -4,7 +4,7 @@ import { ColorRectangleBase } from './ColorRectangle.base';
 import { getStyles } from './ColorRectangle.styles';
 import type { IColorRectangleProps, IColorRectangleStyles, IColorRectangleStyleProps } from './ColorRectangle.types';
 
-export const ColorRectangle: React.FunctionComponent<IColorRectangleProps> = styled<
+export const ColorRectangle: React.FunctionComponent<React.PropsWithChildren<IColorRectangleProps>> = styled<
   IColorRectangleProps,
   IColorRectangleStyleProps,
   IColorRectangleStyles

packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.tsx

@@ -4,7 +4,7 @@ import { ColorSliderBase } from './ColorSlider.base';
 import { getStyles } from './ColorSlider.styles';
 import type { IColorSliderProps, IColorSliderStyleProps, IColorSliderStyles } from './ColorSlider.types';
 
-export const ColorSlider: React.FunctionComponent<IColorSliderProps> = styled<
+export const ColorSlider: React.FunctionComponent<React.PropsWithChildren<IColorSliderProps>> = styled<
   IColorSliderProps,
   IColorSliderStyleProps,
   IColorSliderStyles