feat: polish types to be compatible with React 18.3

Author: sarkaaa

packages/orbit-components/src/Accordion/AccordionSection/index.tsx

@@ -50,7 +50,7 @@ const AccordionSection = ({
         )}
 
         <Slide maxHeight={height} expanded={isExpanded} id={slideId}>
-          <div ref={ref}>
+          <div ref={ref as React.RefObject<HTMLDivElement>}>
             {children && <SectionContent dataTest={dataTest}>{children}</SectionContent>}
             {footer && <SectionFooter dataTest={dataTest}>{footer}</SectionFooter>}
           </div>

packages/orbit-components/src/Card/CardSection/components/Expandable.tsx

@@ -14,7 +14,7 @@ export default function Expandable({ expanded, children, slideID }: Props) {
 
   return (
     <Slide maxHeight={height} expanded={expanded} id={slideID}>
-      <div ref={ref}>{children}</div>
+      <div ref={ref as React.RefObject<HTMLDivElement>}>{children}</div>
     </Slide>
   );
 }

packages/orbit-components/src/Collapse/index.tsx

@@ -105,7 +105,7 @@ const Collapse = ({
         </Stack>
       </div>
       <Slide maxHeight={height} expanded={expanded} id={slideID}>
-        <div className="my-300 mx-0" ref={node}>
+        <div className="my-300 mx-0" ref={node as React.RefObject<HTMLDivElement>}>
           {children}
         </div>
       </Slide>

packages/orbit-components/src/InputSelect/index.tsx

@@ -272,7 +272,7 @@ const InputSelect = React.forwardRef<HTMLInputElement, Props>(
               id={optionId}
               active={activeIdx === idx}
               isSelected={isSelected}
-              ref={optionRef}
+              ref={optionRef as React.RefObject<HTMLDivElement>}
               title={title}
               description={description}
               prefix={prefix}
@@ -325,7 +325,7 @@ const InputSelect = React.forwardRef<HTMLInputElement, Props>(
                       id={optionId}
                       active={!!isLargeMobile && activeIdx === optionIdx}
                       isSelected={isSelected}
-                      ref={optionRef}
+                      ref={optionRef as React.RefObject<HTMLDivElement>}
                       title={title}
                       description={description}
                       prefix={prefix}
@@ -354,7 +354,7 @@ const InputSelect = React.forwardRef<HTMLInputElement, Props>(
             const { title, description, prefix, value: optValue, group } = option;
             if (group && !showAll) return null;
             idx += 1;
-            const optionRef = React.createRef() as React.RefObject<HTMLDivElement | null>;
+            const optionRef = React.createRef() as React.RefObject<HTMLDivElement>;
             const optionIdx = idx;
             refs[optionIdx] = optionRef;
 

packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx

@@ -71,7 +71,10 @@ const ItinerarySegmentDetail = ({
           ariaLabelledBy={randomId("slide")}
           stopClickPropagation={false}
         >
-          <div className="pt-300 cursor-pointer overflow-hidden" ref={slideRef}>
+          <div
+            className="pt-300 cursor-pointer overflow-hidden"
+            ref={slideRef as React.RefObject<HTMLDivElement>}
+          >
             <div
               className="px-300 z-default relative py-0"
               style={{

packages/orbit-components/src/Modal/index.tsx

@@ -92,6 +92,7 @@ const Modal = React.forwardRef<Instance, Props>(
           if (typeof scrollingElementRef === "function") {
             scrollingElementRef(node);
           } else {
+            // @ts-expect-error TODO
             // eslint-disable-next-line no-param-reassign
             scrollingElementRef.current = node;
           }

packages/orbit-components/src/Modal/types.d.ts

@@ -21,7 +21,7 @@ export type Props = Common.Globals &
   closable & {
     readonly size?: Size;
     readonly children: React.ReactNode;
-    readonly triggerRef?: React.RefObject<HTMLElement | null>;
+    readonly triggerRef?: React.RefObject<HTMLElement>;
     readonly lockScrolling?: boolean;
     readonly scrollingElementRef?: React.Ref<HTMLElement | null>;
     readonly onClose?: Common.Event<

packages/orbit-components/src/Tile/components/TileExpandable/index.tsx

@@ -84,7 +84,11 @@ const TileExpandable = ({
         />
       )}
       <Slide maxHeight={height} expanded={isExpanded} id={slideID} ariaLabelledBy={labelID}>
-        <TileContent noPadding={noPadding} ref={node} withBorder={hasHeader}>
+        <TileContent
+          noPadding={noPadding}
+          ref={node as React.RefObject<HTMLDivElement>}
+          withBorder={hasHeader}
+        >
           {children}
         </TileContent>
       </Slide>

packages/orbit-components/src/utils/mergeRefs/index.ts

@@ -8,6 +8,7 @@ export default function mergeRefs<T = HTMLElement>(
       if (typeof ref === "function") {
         ref(value);
       } else if (ref != null && typeof ref !== "string") {
+        // @ts-expect-error expected to be mutable
         // eslint-disable-next-line no-param-reassign
         ref.current = value;
       }