fix(react): fix issues related to React 18 types

Author: mainframev

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);

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

@@ -4,7 +4,7 @@ import { getStyles } from './CalendarMonth.styles';
 import { styled } from '../../../Utilities';
 import type { ICalendarMonthProps } from './CalendarMonth.types';
 
-export const CalendarMonth: React.FunctionComponent<ICalendarMonthProps> = styled(
+export const CalendarMonth: React.FunctionComponent<React.PropsWithChildren<ICalendarMonthProps>> = styled(
   CalendarMonthBase,
   getStyles,
   undefined,