From 8609134861b08693b7678a2663d13e309bb63967 Mon Sep 17 00:00:00 2001
From: Charlie Midtlyng <charlie.midtlyng@bekk.no>
Date: Tue, 7 Jan 2025 14:35:17 +0100
Subject: [PATCH] fix(familie-endringslogg): feilende transition-bibliotek
 (#1597)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Må fjerne transition-bibliotek pga feilsituasjoner i react 18 - og det hele kan løses med css

BREAKING CHANGE: Bumpet til react 19
---
 packages/familie-endringslogg/package.json    |  3 +-
 .../src/transition-container.tsx              | 47 +++++--------------
 yarn.lock                                     |  2 +-
 3 files changed, 14 insertions(+), 38 deletions(-)

diff --git a/packages/familie-endringslogg/package.json b/packages/familie-endringslogg/package.json
index 308fd32d..8cc43a65 100644
--- a/packages/familie-endringslogg/package.json
+++ b/packages/familie-endringslogg/package.json
@@ -26,8 +26,7 @@
     },
     "dependencies": {
         "@portabletext/react": "^3.2.0",
-        "classnames": "^2.5.1",
-        "react-transition-group": "^4.4.5"
+        "classnames": "^2.5.1"
     },
     "devDependencies": {
         "@navikt/aksel-icons": "7.x",
diff --git a/packages/familie-endringslogg/src/transition-container.tsx b/packages/familie-endringslogg/src/transition-container.tsx
index 0a55b579..b1a6011a 100644
--- a/packages/familie-endringslogg/src/transition-container.tsx
+++ b/packages/familie-endringslogg/src/transition-container.tsx
@@ -1,15 +1,13 @@
-import React, { PropsWithChildren } from 'react';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import React from 'react';
 import { useFocus } from './hooks/use-focus';
 import './endringslogg.css';
 import './collapse-container-transition.css';
 import classNames from 'classnames';
-import { TransitionGroupProps } from 'react-transition-group/TransitionGroup';
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 
 interface CollapseContainerProps {
     children?: React.ReactNode;
     alignLeft?: boolean;
+    visible: boolean;
 }
 
 interface TransitionProps extends CollapseContainerProps {
@@ -17,44 +15,23 @@ interface TransitionProps extends CollapseContainerProps {
     alignLeft?: boolean;
 }
 
-/**
- * Overrider props ettersom transition-group ikke er oppgradert til React 18.
- * Disse to linjene kan fjernes når dette skjer
- */
-const TransitionGroupWithChildren = TransitionGroup as unknown as React.FC<
-    PropsWithChildren<TransitionGroupProps>
->;
-const CSSTransitionWithChildren = CSSTransition as unknown as React.FC<
-    PropsWithChildren<CSSTransitionProps>
->;
-
 const TransitionContainer = (props: TransitionProps) => (
-    <TransitionGroupWithChildren component={null}>
-        {props.visible && (
-            <CSSTransitionWithChildren
-                classNames={{
-                    enter: 'collapse-container-enter',
-                    enterActive: 'collapse-container-enter-active',
-                    exit: 'collapse-container-exit',
-                    exitActive: 'collapse-container-exit-active',
-                }}
-                timeout={400}
-            >
-                <CollapseContainer alignLeft={props.alignLeft}>{props.children}</CollapseContainer>
-            </CSSTransitionWithChildren>
-        )}
-    </TransitionGroupWithChildren>
+    <CollapseContainer alignLeft={props.alignLeft} visible={props.visible}>
+        {props.children}
+    </CollapseContainer>
 );
 
 const CollapseContainer = (props: CollapseContainerProps) => {
     const { focusRef } = useFocus();
     return (
         <div
-            className={
-                props.alignLeft
-                    ? classNames('align-left', 'collapse-container')
-                    : 'collapse-container'
-            }
+            className={classNames(
+                props.alignLeft && 'align-left',
+                props.visible
+                    ? 'collapse-container-enter-active'
+                    : 'collapse-container-exit-active',
+                'collapse-container',
+            )}
         >
             <div
                 className={props.alignLeft ? 'arrow-container-left' : 'arrow-container'}
diff --git a/yarn.lock b/yarn.lock
index e403c46e..c4dc0031 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11567,7 +11567,7 @@ react-select@5.8.0:
     react-transition-group "^4.3.0"
     use-isomorphic-layout-effect "^1.1.2"
 
-react-transition-group@^4.3.0, react-transition-group@^4.4.5:
+react-transition-group@^4.3.0:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==