Fjern massa onødvendig javascript fra Collapse

component-overview/examples/buttons/InlineExpandButton.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { InlineExpandButton } from '@sb1/ffe-buttons-react';
-import Collapse from '@sb1/ffe-collapse-react';
+import { Collapse } from '@sb1/ffe-collapse-react';
 import { Paragraph } from '@sb1/ffe-core-react';
 
 () => {

component-overview/examples/collapse/Collapse-onRest.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import Collapse from '@sb1/ffe-collapse-react';
+import { Collapse } from '@sb1/ffe-collapse-react';
 import { ExpandButton } from '@sb1/ffe-buttons-react';
 
 () => {

component-overview/examples/collapse/Collapse.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import Collapse from '@sb1/ffe-collapse-react';
+import { Collapse } from '@sb1/ffe-collapse-react';
 import { ExpandButton } from '@sb1/ffe-buttons-react';
 
 () => {

packages/ffe-accordion-react/src/AccordionItem.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { bool, func, node, string } from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Icon } from '@sb1/ffe-icons-react';
-import Collapse from '@sb1/ffe-collapse-react';
+import { Collapse } from '@sb1/ffe-collapse-react';
 import classNames from 'classnames';
 
 const AccordionItem = ({

packages/ffe-collapse-react/less/collapse.less

@@ -1,3 +1,18 @@
-.ffe-collapse-transition {
-    transition: height @ffe-transition-duration @ffe-ease;
+.ffe-collapse {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--ffe-transition-duration)
+        var(--ffe-ease);
+}
+
+.ffe-collapse--hidden {
+    visibility: hidden;
+}
+
+.ffe-collapse--open {
+    grid-template-rows: 1fr;
+}
+
+.ffe-collapse__inner {
+    overflow: hidden;
 }

packages/ffe-collapse-react/src/Collapse.js

@@ -1,82 +1,53 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { string, bool, func, object } from 'prop-types';
+import React, { useRef, useEffect, useState } from 'react';
+import { string, bool, func, node } from 'prop-types';
 import classNames from 'classnames';
 
-const Collapse = ({ className, style, isOpen, onRest, ...rest }) => {
-    const content = useRef();
-    const [height, setHeight] = useState(() => (isOpen ? 'auto' : '0'));
-    const [overflow, setOverflow] = useState(() =>
-        isOpen ? 'visible' : 'hidden',
-    );
-    const [visibility, setVisibility] = useState(() =>
-        isOpen ? 'visible' : 'hidden',
-    );
+export const Collapse = React.forwardRef(
+    ({ className, isOpen, onRest, children, ...rest }, ref) => {
+        const internalRef = useRef();
+        const collapse = ref ?? internalRef;
+        const [isHidden, setIsHidden] = useState(!isOpen);
 
-    const setExpanded = () => {
-        setHeight('auto');
-        setOverflow('visible');
-    };
-
-    const setCollapsed = () => {
-        setVisibility('hidden');
-    };
-
-    useEffect(() => {
-        if (content.current) {
-            if (isOpen && height !== 'auto') {
-                setHeight(`${content.current.scrollHeight}px`);
-                setVisibility('visible');
-            } else if (!isOpen && height !== '0') {
-                setHeight(`${content.current.scrollHeight}px`);
-                window.requestAnimationFrame(() =>
-                    setTimeout(() => {
-                        setHeight('0');
-                        setOverflow('hidden');
-                    }),
-                );
-            }
-        }
-    }, [isOpen, height]);
-
-    const onTransitionEnd = e => {
-        if (e.target === content.current && e.propertyName === 'height') {
+        useEffect(() => {
             if (isOpen) {
-                setExpanded();
-            } else {
-                setCollapsed();
-            }
-            if (onRest) {
-                onRest();
+                setIsHidden(false);
             }
-        }
-    };
-
-    const mergedStyles = {
-        ...style,
-        willChange: 'height',
-        height,
-        overflow,
-        visibility,
-    };
-
-    return (
-        <div
-            {...rest}
-            ref={content}
-            style={mergedStyles}
-            className={classNames('ffe-collapse-transition', className)}
-            onTransitionEnd={onTransitionEnd}
-        />
-    );
-};
+        }, [isOpen]);
+
+        return (
+            <div
+                {...rest}
+                ref={collapse}
+                className={classNames('ffe-collapse', className, {
+                    'ffe-collapse--open': isOpen,
+                    'ffe-collapse--hidden': isHidden,
+                })}
+                onTransitionEnd={e => {
+                    if (
+                        e.target === collapse.current &&
+                        e.propertyName === 'grid-template-rows'
+                    ) {
+                        if (onRest) {
+                            onRest();
+                        }
+                        if (!isOpen) {
+                            setIsHidden(true);
+                        }
+                    }
+                }}
+            >
+                <div className="ffe-collapse__inner">{children}</div>
+            </div>
+        );
+    },
+);
 
 Collapse.displayName = 'Collapse';
 
 Collapse.propTypes = {
     className: string,
-    style: object,
     isOpen: bool,
     onRest: func,
+    /** The content to appear when expanded */
+    children: node.isRequired,
 };
-
-export default Collapse;

packages/ffe-collapse-react/src/index.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-export interface CollapseProps extends React.HTMLProps<HTMLDivElement> {
+export interface CollapseProps extends React.ComponentProps<'div'> {
     isOpen: boolean;
     onRest?: () => void;
 }
 
 declare class Collapse extends React.Component<CollapseProps, any> {}
 
-export default Collapse;
+export { Collapse };

packages/ffe-collapse-react/src/index.js

@@ -1 +1 @@
-export { default } from './Collapse';
+export { Collapse } from './Collapse';

packages/ffe-form-react/src/Tooltip.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { bool, func, node, string, number } from 'prop-types';
 import classNames from 'classnames';
-import Collapse from '@sb1/ffe-collapse-react';
+import { Collapse } from '@sb1/ffe-collapse-react';
 import { v4 as uuid } from 'uuid';
 
 const Tooltip = React.forwardRef(