fix(familie-endringslogg): feilende transition-bibliotek (#1597)

Må fjerne transition-bibliotek pga feilsituasjoner i react 18 - og det hele kan løses med css BREAKING CHANGE: Bumpet til react 19
navikt · Jan 7, 2025 · 8609134 · 8609134
1 parent 260257d
commit 8609134
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 38 deletions.
diff --git 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
@@ -1,60 +1,37 @@
-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 {
     visible: boolean;
     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
@@ -11567,7 +11567,7 @@ [email protected]:
     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==