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

Author: mainframev

packages/react-hooks/src/useMergedRefs.ts

@@ -12,6 +12,8 @@ export type RefObjectFunction<T> = React.RefObject<T> & ((value: T) => void);
  * @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.
  */
+
+// React 18 migration: replace Ref with LegactRef
 export function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObjectFunction<T> {
   const mergedCallback: RefObjectFunction<T> = React.useCallback(
     (value: T) => {

packages/react/etc/react.api.md

@@ -4,7 +4,7 @@ import { AnnouncedBase } from './Announced.base';
 import { getStyles } from './Announced.styles';
 import type { IAnnouncedProps, IAnnouncedStyles } from './Announced.types';
 
-export const Announced: React.FunctionComponent<IAnnouncedProps> = styled<IAnnouncedProps, {}, IAnnouncedStyles>(
+export const Announced: React.FunctionComponent<React.PropsWithChildren<IAnnouncedProps>> = styled<IAnnouncedProps, {}, IAnnouncedStyles>(
   AnnouncedBase,
   getStyles,
   undefined,

packages/react/src/components/Announced/Announced.ts

@@ -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

@@ -4,7 +4,7 @@ import { BreadcrumbBase } from './Breadcrumb.base';
 import { getStyles } from './Breadcrumb.styles';
 import type { IBreadcrumbProps, IBreadcrumbStyleProps, IBreadcrumbStyles } from './Breadcrumb.types';
 
-export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = styled<
+export const Breadcrumb: React.FunctionComponent<React.PropsWithChildren<IBreadcrumbProps>> = styled<
   IBreadcrumbProps,
   IBreadcrumbStyleProps,
   IBreadcrumbStyles

packages/react/src/components/Breadcrumb/Breadcrumb.tsx

@@ -154,7 +154,7 @@ function useFocusLogic({ componentRef }: ICalendarProps, isDayPickerVisible: boo
   return [dayPicker, monthPicker, focusOnNextUpdate] as const;
 }
 
-export const CalendarBase: React.FunctionComponent<ICalendarProps> = React.forwardRef<HTMLDivElement, ICalendarProps>(
+export const CalendarBase: React.FunctionComponent<React.PropsWithChildren<ICalendarProps>> = React.forwardRef<HTMLDivElement, ICalendarProps>(
   (propsWithoutDefaults, forwardedRef) => {
     const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
 

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

@@ -4,6 +4,6 @@ import { CalendarBase } from './Calendar.base';
 import { styles } from './Calendar.styles';
 import type { ICalendarProps } from './Calendar.types';
 
-export const Calendar: React.FunctionComponent<ICalendarProps> = styled(CalendarBase, styles, undefined, {
+export const Calendar: React.FunctionComponent<React.PropsWithChildren<ICalendarProps>> = styled(CalendarBase, styles, undefined, {
   scope: 'Calendar',
 });

packages/react/src/components/Calendar/Calendar.tsx

@@ -10,7 +10,7 @@ import type { ICalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid.typ
 
 const getClassNames = classNamesFunction<ICalendarDayStyleProps, ICalendarDayStyles>();
 
-export const CalendarDayBase: React.FunctionComponent<ICalendarDayProps> = props => {
+export const CalendarDayBase: React.FunctionComponent<React.PropsWithChildren<ICalendarDayProps>> = props => {
   const dayGrid = React.useRef<ICalendarDayGrid>(null);
 
   React.useImperativeHandle(

packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx

@@ -4,6 +4,6 @@ import { styles } from './CalendarDay.styles';
 import { styled } from '../../../Utilities';
 import type { ICalendarDayProps } from './CalendarDay.types';
 
-export const CalendarDay: React.FunctionComponent<ICalendarDayProps> = styled(CalendarDayBase, styles, undefined, {
+export const CalendarDay: React.FunctionComponent<React.PropsWithChildren<ICalendarDayProps>> = styled(CalendarDayBase, styles, undefined, {
   scope: 'CalendarDay',
 });

packages/react/src/components/Calendar/CalendarDay/CalendarDay.tsx

@@ -71,7 +71,7 @@ function useFocusLogic({ componentRef }: ICalendarMonthProps) {
   return [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] as const;
 }
 
-export const CalendarMonthBase: React.FunctionComponent<ICalendarMonthProps> = propsWithoutDefaults => {
+export const CalendarMonthBase: React.FunctionComponent<React.PropsWithChildren<ICalendarMonthProps>> = propsWithoutDefaults => {
   const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
   const [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] = useFocusLogic(props);
   const [isYearPickerVisible, setIsYearPickerVisible] = React.useState(false);