collapsible-react-component - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

dist/index.js

@@ -5,4 +5,3 @@ var React = require('react');
 
-var useIsomorphicLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
+var transitioningProperty = 'grid-template-rows';
 var Collapsible = function Collapsible(_ref) {
@@ -15,2 +14,3 @@ var children = _ref.children,
       revealType = _ref$revealType === void 0 ? 'bottomFirst' : _ref$revealType;
+  var wrapperRef = React.useRef(null);
 
@@ -21,17 +21,21 @@ var _React$useState = React.useState(false),
 
-  useIsomorphicLayoutEffect(function () {
-    return function () {
-      if (onTransitionStart) {
-        onTransitionStart(open);
-      }
+  var _React$useState2 = React.useState(open),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
 
-      setIsTransitioning(true);
-    };
-  }, [open]);
+  var isOpenRef = React.useRef(open);
+  React.useEffect(function () {
+    if (isOpenRef.current === open) {
+      return;
+    }
+
+    isOpenRef.current = open;
+    onTransitionStart === null || onTransitionStart === void 0 ? void 0 : onTransitionStart(open);
+    setIsOpen(open);
+    setIsTransitioning(true);
+  }, [onTransitionStart, open]);
   var handleTransitionEnd = React.useCallback(function (event) {
-    if (event.propertyName === 'grid-template-rows') {
-      if (onTransitionEnd) {
-        onTransitionEnd(open);
-      }
-
+    if (event.propertyName === transitioningProperty && event.target === wrapperRef.current) {
+      onTransitionEnd === null || onTransitionEnd === void 0 ? void 0 : onTransitionEnd(open);
+      setIsOpen(open);
       setIsTransitioning(false);
@@ -41,3 +45,3 @@ }
   var className = React.useMemo(function () {
-    var classNames = [styles.wrapper, open ? styles.is_state_open : styles.is_state_closed, styles["is_revealType_" + revealType]];
+    var classNames = [styles.wrapper, isOpen ? styles.is_state_open : styles.is_state_closed, styles["is_revealType_" + revealType]];
 
@@ -49,4 +53,5 @@ if (isTransitioning) {
     return classNames.join(' ');
-  }, [isTransitioning, open, revealType]);
+  }, [isTransitioning, isOpen, revealType]);
   return React.createElement("div", {
+    ref: wrapperRef,
     className: className,
@@ -53,0 +58,0 @@ "aria-hidden": !open,

dist/index.modern.js

@@ -1,7 +0,6 @@
-import { useLayoutEffect, useEffect, useState, useCallback, useMemo, createElement } from 'react';
+import { useRef, useState, useEffect, useCallback, useMemo, createElement } from 'react';
 
 var styles = {"wrapper":"_1I_qj","is_state_closed":"_1L6Gs","is_state_open":"_2mqKm","is_revealType_bottomFirst":"_2KsIP","in":"_VrGmt","is_revealType_topFirst":"_3DkiG","is_transitioning":"_12f0Z","content":"_2jwZj"};
 
-var useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
-
+var transitioningProperty = 'grid-template-rows';
 var Collapsible = function Collapsible(_ref) {
@@ -14,2 +13,3 @@ var children = _ref.children,
       revealType = _ref$revealType === void 0 ? 'bottomFirst' : _ref$revealType;
+  var wrapperRef = useRef(null);
 
@@ -20,17 +20,21 @@ var _React$useState = useState(false),
 
-  useIsomorphicLayoutEffect(function () {
-    return function () {
-      if (onTransitionStart) {
-        onTransitionStart(open);
-      }
+  var _React$useState2 = useState(open),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
 
-      setIsTransitioning(true);
-    };
-  }, [open]);
+  var isOpenRef = useRef(open);
+  useEffect(function () {
+    if (isOpenRef.current === open) {
+      return;
+    }
+
+    isOpenRef.current = open;
+    onTransitionStart === null || onTransitionStart === void 0 ? void 0 : onTransitionStart(open);
+    setIsOpen(open);
+    setIsTransitioning(true);
+  }, [onTransitionStart, open]);
   var handleTransitionEnd = useCallback(function (event) {
-    if (event.propertyName === 'grid-template-rows') {
-      if (onTransitionEnd) {
-        onTransitionEnd(open);
-      }
-
+    if (event.propertyName === transitioningProperty && event.target === wrapperRef.current) {
+      onTransitionEnd === null || onTransitionEnd === void 0 ? void 0 : onTransitionEnd(open);
+      setIsOpen(open);
       setIsTransitioning(false);
@@ -40,3 +44,3 @@ }
   var className = useMemo(function () {
-    var classNames = [styles.wrapper, open ? styles.is_state_open : styles.is_state_closed, styles["is_revealType_" + revealType]];
+    var classNames = [styles.wrapper, isOpen ? styles.is_state_open : styles.is_state_closed, styles["is_revealType_" + revealType]];
 
@@ -48,4 +52,5 @@ if (isTransitioning) {
     return classNames.join(' ');
-  }, [isTransitioning, open, revealType]);
+  }, [isTransitioning, isOpen, revealType]);
   return createElement("div", {
+    ref: wrapperRef,
     className: className,
@@ -52,0 +57,0 @@ "aria-hidden": !open,

package.json

 {
   "name": "collapsible-react-component",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Collapses and expands content with an animation.",
@@ -5,0 +5,0 @@ "author": "FilipChalupa",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19667

increased by7.92%

Lines of code

164

increased by7.89%

No dependency changes