deps: react-migration-to-v19 (#6764)

Co-authored-by: Talisson <talisson.odcosta@gmail.com>

Author: Zaimwa9

frontend/.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    "@babel/preset-react",
+    ["@babel/preset-react", { "runtime": "automatic" }],
     "@babel/preset-typescript",
     [
       "@babel/preset-env",
@@ -33,8 +33,7 @@
     "production": {
       "plugins": [
         "transform-react-remove-prop-types",
-        "@babel/transform-react-constant-elements",
-        "@babel/transform-react-inline-elements"
+        "@babel/transform-react-constant-elements"
       ]
     }
   }

frontend/common/Component.js

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Hook for animating height transitions (expand/collapse).
+ *
+ * Uses a double requestAnimationFrame on collapse to ensure the browser
+ * paints the current scrollHeight before transitioning to 0.
+ */
+export default function useCollapsibleHeight(open: boolean) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [height, setHeight] = useState<number | undefined>(open ? undefined : 0)
+
+  useEffect(() => {
+    if (!contentRef.current) return
+    if (open) {
+      setHeight(contentRef.current.scrollHeight)
+      const timer = setTimeout(() => setHeight(undefined), 300)
+      return () => clearTimeout(timer)
+    } else {
+      setHeight(contentRef.current.scrollHeight)
+      let innerFrameId: number
+      const outerFrameId = requestAnimationFrame(() => {
+        innerFrameId = requestAnimationFrame(() => {
+          setHeight(0)
+        })
+      })
+      return () => {
+        cancelAnimationFrame(outerFrameId)
+        cancelAnimationFrame(innerFrameId)
+      }
+    }
+  }, [open])
+
+  const style = {
+    height: height !== undefined ? `${height}px` : 'auto',
+    overflow: 'hidden' as const,
+    transition: 'height 0.3s ease',
+  }
+
+  return { contentRef, style }
+}

frontend/common/hooks/useCollapsibleHeight.ts

@@ -28,7 +28,6 @@ export default (WrappedComponent) => {
 
       return (
         <WrappedComponent
-          ref='wrappedComponent'
           isLoading={isLoading}
           error={error}
           history={this.props.history}

frontend/common/providers/ConfigProvider.js

@@ -225,7 +225,6 @@ export default (WrappedComponent) => {
     render() {
       return (
         <WrappedComponent
-          ref='wrappedComponent'
           updateSegments={this.updateSegments}
           onEnvironmentVariationsChange={this.onEnvironmentVariationsChange}
           removeMultivariateOption={this.removeMultivariateOption}