Merge pull request #5301 from qburst/upgrade/react-19

🚨 Fix TypeScript Linting warnings for React 19 upgrade

src/calendar.tsx

@@ -281,7 +281,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     }
   }
 
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
 
   monthContainer: CalendarState["monthContainer"] = undefined;
 

src/calendar_icon.tsx

@@ -44,11 +44,16 @@ const CalendarIcon: React.FC<CalendarIconProps> = ({
 
   if (React.isValidElement(icon)) {
     // Because we are checking that typeof icon is string first, we can safely cast icon as React.ReactElement on types level and code level
-    return React.cloneElement(icon as React.ReactElement, {
-      className: `${icon.props.className || ""} ${defaultClass} ${className}`,
+    const iconElement = icon as React.ReactElement<{
+      className: string;
+      onClick: (event: React.MouseEvent) => void;
+    }>;
+
+    return React.cloneElement(iconElement, {
+      className: `${iconElement.props.className || ""} ${defaultClass} ${className}`,
       onClick: (event: React.MouseEvent) => {
-        if (typeof icon.props.onClick === "function") {
-          icon.props.onClick(event);
+        if (typeof iconElement.props.onClick === "function") {
+          iconElement.props.onClick(event);
         }
 
         if (typeof onClick === "function") {

src/input_time.tsx

@@ -5,7 +5,11 @@ interface InputTimeProps {
   date?: Date;
   timeString?: string;
   timeInputLabel?: string;
-  customTimeInput?: React.ReactElement;
+  customTimeInput?: React.ReactElement<{
+    date?: Date;
+    value: string;
+    onChange: (time: string) => void;
+  }>;
 }
 
 interface InputTimeState {
@@ -32,7 +36,7 @@ export default class InputTime extends Component<
   InputTimeProps,
   InputTimeState
 > {
-  inputRef: React.RefObject<HTMLInputElement> = React.createRef();
+  inputRef: React.RefObject<HTMLInputElement | null> = React.createRef();
 
   constructor(props: InputTimeProps) {
     super(props);

src/tab_loop.tsx

@@ -54,7 +54,7 @@ export default class TabLoop extends Component<TabLoopProps> {
     this.tabLoopRef = createRef();
   }
 
-  private tabLoopRef: React.RefObject<HTMLDivElement>;
+  private tabLoopRef: React.RefObject<HTMLDivElement | null>;
 
   /**
    * `getTabChildren` is a method of the `TabLoop` class that retrieves all tabbable children of the component.

src/with_floating.tsx

@@ -48,7 +48,7 @@ export default function withFloating<T extends FloatingProps>(
   const WithFloating: React.FC<R> = (props): React.ReactElement => {
     const hidePopper: boolean =
       typeof props.hidePopper === "boolean" ? props.hidePopper : true;
-    const arrowRef: React.RefObject<HTMLElement> = useRef(null);
+    const arrowRef: React.RefObject<HTMLElement | null> = useRef(null);
     const floatingProps = useFloating({
       open: !hidePopper,
       whileElementsMounted: autoUpdate,

src/year_dropdown_options.tsx

@@ -87,7 +87,7 @@ export default class YearDropdownOptions extends Component<
     }
   }
 
-  dropdownRef: React.RefObject<HTMLDivElement>;
+  dropdownRef: React.RefObject<HTMLDivElement | null>;
 
   renderOptions = (): React.ReactElement[] => {
     const selectedYear = this.props.year;