@sb1/ffe-collapse-react 4.0.2 → 4.0.4

package/README.md

@@ -19,10 +19,6 @@ Alternatively you can do it by adding style to the class
 `.ffe-collapse-transition`\, adding it to your own class and provide the class
 through the `className` property or by styling it directly through the `style` property.
 
-## TypeScript definition files
-
-This component does not yet have TypeScript definitions.
-
 ## Development
 
 To start a local development server, run the following from the designsystem root folder:

package/es/Collapse.js

@@ -23,47 +23,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useRef, useEffect, useState, } from 'react';
 import classNames from 'classnames';
 import { mergeRefs } from './mergeRefs';
+import { usePreviousIsOpen } from './usePreviousIsOpen';
 export var Collapse = React.forwardRef(function (_a, ref) {
     var className = _a.className, isOpen = _a.isOpen, onRest = _a.onRest, children = _a.children, rest = __rest(_a, ["className", "isOpen", "onRest", "children"]);
     var internalRef = useRef(null);
     var _b = useState(!isOpen), isHidden = _b[0], setIsHidden = _b[1];
     var _c = useState(isOpen), overflowVisible = _c[0], setOverflowVisible = _c[1];
+    var previousIsOpen = usePreviousIsOpen(isOpen);
     useEffect(function () {
-        var handleTransition = function (startOrEnd) { return function (e) {
+        if (typeof previousIsOpen === 'boolean' &&
+            isOpen !== previousIsOpen) {
+            setIsHidden(!isOpen);
+            setOverflowVisible(false);
+        }
+    }, [previousIsOpen, isOpen]);
+    return (React.createElement("div", __assign({}, rest, { ref: mergeRefs([internalRef, ref]), className: classNames('ffe-collapse', className, {
+            'ffe-collapse--open': isOpen,
+            'ffe-collapse--hidden': isHidden,
+        }), onTransitionEnd: function (e) {
             if (e.target === internalRef.current &&
                 e.propertyName === 'grid-template-rows') {
                 setIsHidden(!isOpen);
-                if (startOrEnd === 'start') {
-                    setOverflowVisible(false);
-                }
-                else {
-                    if (isOpen) {
-                        setOverflowVisible(true);
-                    }
-                    if (onRest) {
-                        onRest();
-                    }
+                if (isOpen) {
+                    setOverflowVisible(true);
                 }
+                onRest === null || onRest === void 0 ? void 0 : onRest();
             }
-        }; };
-        var handleTransitionStart = handleTransition('start');
-        var handleTransitionEnd = handleTransition('end');
-        var collapse = internalRef.current;
-        if (collapse) {
-            collapse.addEventListener('transitionstart', handleTransitionStart);
-            collapse.addEventListener('transitionend', handleTransitionEnd);
-        }
-        return function () {
-            if (collapse) {
-                collapse.removeEventListener('transitionstart', handleTransitionStart);
-                collapse.removeEventListener('transitionend', handleTransitionEnd);
-            }
-        };
-    }, [isOpen, onRest]);
-    return (React.createElement("div", __assign({}, rest, { ref: mergeRefs([internalRef, ref]), className: classNames('ffe-collapse', className, {
-            'ffe-collapse--open': isOpen,
-            'ffe-collapse--hidden': isHidden,
-        }) }),
+        } }),
         React.createElement("div", { className: classNames('ffe-collapse__inner', {
                 'ffe-collapse__inner--visible': overflowVisible,
             }) }, children)));

package/es/usePreviousIsOpen.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export var usePreviousIsOpen = function (isOpen) {
+    var ref = useRef();
+    useEffect(function () {
+        ref.current = isOpen;
+    });
+    return ref.current;
+};

package/lib/Collapse.js

@@ -52,47 +52,33 @@ exports.Collapse = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var mergeRefs_1 = require("./mergeRefs");
+var usePreviousIsOpen_1 = require("./usePreviousIsOpen");
 exports.Collapse = react_1.default.forwardRef(function (_a, ref) {
     var className = _a.className, isOpen = _a.isOpen, onRest = _a.onRest, children = _a.children, rest = __rest(_a, ["className", "isOpen", "onRest", "children"]);
     var internalRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)(!isOpen), isHidden = _b[0], setIsHidden = _b[1];
     var _c = (0, react_1.useState)(isOpen), overflowVisible = _c[0], setOverflowVisible = _c[1];
+    var previousIsOpen = (0, usePreviousIsOpen_1.usePreviousIsOpen)(isOpen);
     (0, react_1.useEffect)(function () {
-        var handleTransition = function (startOrEnd) { return function (e) {
+        if (typeof previousIsOpen === 'boolean' &&
+            isOpen !== previousIsOpen) {
+            setIsHidden(!isOpen);
+            setOverflowVisible(false);
+        }
+    }, [previousIsOpen, isOpen]);
+    return (react_1.default.createElement("div", __assign({}, rest, { ref: (0, mergeRefs_1.mergeRefs)([internalRef, ref]), className: (0, classnames_1.default)('ffe-collapse', className, {
+            'ffe-collapse--open': isOpen,
+            'ffe-collapse--hidden': isHidden,
+        }), onTransitionEnd: function (e) {
             if (e.target === internalRef.current &&
                 e.propertyName === 'grid-template-rows') {
                 setIsHidden(!isOpen);
-                if (startOrEnd === 'start') {
-                    setOverflowVisible(false);
-                }
-                else {
-                    if (isOpen) {
-                        setOverflowVisible(true);
-                    }
-                    if (onRest) {
-                        onRest();
-                    }
+                if (isOpen) {
+                    setOverflowVisible(true);
                 }
+                onRest === null || onRest === void 0 ? void 0 : onRest();
             }
-        }; };
-        var handleTransitionStart = handleTransition('start');
-        var handleTransitionEnd = handleTransition('end');
-        var collapse = internalRef.current;
-        if (collapse) {
-            collapse.addEventListener('transitionstart', handleTransitionStart);
-            collapse.addEventListener('transitionend', handleTransitionEnd);
-        }
-        return function () {
-            if (collapse) {
-                collapse.removeEventListener('transitionstart', handleTransitionStart);
-                collapse.removeEventListener('transitionend', handleTransitionEnd);
-            }
-        };
-    }, [isOpen, onRest]);
-    return (react_1.default.createElement("div", __assign({}, rest, { ref: (0, mergeRefs_1.mergeRefs)([internalRef, ref]), className: (0, classnames_1.default)('ffe-collapse', className, {
-            'ffe-collapse--open': isOpen,
-            'ffe-collapse--hidden': isHidden,
-        }) }),
+        } }),
         react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-collapse__inner', {
                 'ffe-collapse__inner--visible': overflowVisible,
             }) }, children)));

package/lib/usePreviousIsOpen.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePreviousIsOpen = void 0;
+var react_1 = require("react");
+var usePreviousIsOpen = function (isOpen) {
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        ref.current = isOpen;
+    });
+    return ref.current;
+};
+exports.usePreviousIsOpen = usePreviousIsOpen;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-collapse-react",
-    "version": "4.0.2",
+    "version": "4.0.4",
     "description": "React component for expand/collapse",
     "keywords": [
         "ffe"
@@ -30,7 +30,7 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-core": "^27.3.12",
+        "@sb1/ffe-core": "^27.4.0",
         "classnames": "^2.3.1"
     },
     "devDependencies": {
@@ -45,5 +45,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a5865069975b15e70cc7a12758fc57e9c87461ea"
+    "gitHead": "fc8abecf2a39e8d2c426a563daaf6802a1e0acec"
 }

package/types/usePreviousIsOpen.d.ts

@@ -0,0 +1 @@
+export declare const usePreviousIsOpen: (isOpen: boolean) => boolean | undefined;