useMeasure instead of Measure in TypeScript components

(cherry picked from commit ee1a0a1f7175839c63595bef6d0221d3787189f4)

frontend/src/Components/Form/Select/EnhancedSelectInput.tsx

@@ -13,11 +13,11 @@ import { Manager, Popper, Reference } from 'react-popper';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import Measure from 'Components/Measure';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
 import Portal from 'Components/Portal';
 import Scroller from 'Components/Scroller/Scroller';
+import useMeasure from 'Helpers/Hooks/useMeasure';
 import { icons } from 'Helpers/Props';
 import ArrayElement from 'typings/Helpers/ArrayElement';
 import { EnhancedSelectInputChanged, InputChanged } from 'typings/inputs';
@@ -162,13 +162,13 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
     onOpen,
   } = props;
 
+  const [measureRef, { width }] = useMeasure();
   const updater = useRef<(() => void) | null>(null);
   const buttonId = useMemo(() => getUniqueElementId(), []);
   const optionsId = useMemo(() => getUniqueElementId(), []);
   const [selectedIndex, setSelectedIndex] = useState(
     getSelectedIndex(value, values)
   );
-  const [width, setWidth] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
   const isMobile = useMemo(() => isMobileUtil(), []);
 
@@ -378,13 +378,6 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
     ]
   );
 
-  const handleMeasure = useCallback(
-    ({ width: newWidth }: { width: number }) => {
-      setWidth(newWidth);
-    },
-    [setWidth]
-  );
-
   const handleOptionsModalClose = useCallback(() => {
     setIsOpen(false);
   }, [setIsOpen]);
@@ -418,7 +411,7 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
         <Reference>
           {({ ref }) => (
             <div ref={ref} id={buttonId}>
-              <Measure whitelist={['width']} onMeasure={handleMeasure}>
+              <div ref={measureRef}>
                 {isEditable && typeof value === 'string' ? (
                   <div className={styles.editableContainer}>
                     <TextInput
@@ -492,7 +485,7 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
                     </div>
                   </Link>
                 )}
-              </Measure>
+              </div>
             </div>
           )}
         </Reference>

frontend/src/Components/Scroller/Scroller.tsx

@@ -4,9 +4,9 @@ import React, {
   ComponentProps,
   ForwardedRef,
   forwardRef,
-  MutableRefObject,
   ReactNode,
   useEffect,
+  useImperativeHandle,
   useRef,
 } from 'react';
 import { ScrollDirection } from 'Helpers/Props/scrollDirections';
@@ -43,13 +43,14 @@ const Scroller = forwardRef(
       ...otherProps
     } = props;
 
-    const internalRef = useRef();
-    const currentRef = (ref as MutableRefObject<HTMLDivElement>) ?? internalRef;
+    const internalRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(ref, () => internalRef.current!, []);
 
     useEffect(
       () => {
         if (initialScrollTop != null) {
-          currentRef.current.scrollTop = initialScrollTop;
+          internalRef.current!.scrollTop = initialScrollTop;
         }
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -58,16 +59,16 @@ const Scroller = forwardRef(
 
     useEffect(() => {
       if (scrollTop != null) {
-        currentRef.current.scrollTop = scrollTop;
+        internalRef.current!.scrollTop = scrollTop;
       }
 
       if (autoFocus && scrollDirection !== 'none') {
-        currentRef.current.focus({ preventScroll: true });
+        internalRef.current!.focus({ preventScroll: true });
       }
-    }, [autoFocus, currentRef, scrollDirection, scrollTop]);
+    }, [autoFocus, scrollDirection, scrollTop]);
 
     useEffect(() => {
-      const div = currentRef.current;
+      const div = internalRef.current!;
 
       const handleScroll = throttle(() => {
         const scrollLeft = div.scrollLeft;
@@ -76,17 +77,17 @@ const Scroller = forwardRef(
         onScroll?.({ scrollLeft, scrollTop });
       }, 10);
 
-      div.addEventListener('scroll', handleScroll);
+      div?.addEventListener('scroll', handleScroll);
 
       return () => {
-        div.removeEventListener('scroll', handleScroll);
+        div?.removeEventListener('scroll', handleScroll);
       };
-    }, [currentRef, onScroll]);
+    }, [onScroll]);
 
     return (
       <div
         {...otherProps}
-        ref={currentRef}
+        ref={internalRef}
         className={classNames(
           className,
           styles.scroller,