collapsible-react-component - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/Collapsible.d.ts

 import { ReactNode } from 'react';
-import type { RevealType } from './revealTypes';
+import { RevealType } from './revealTypes';
 export type CollapsibleProps = {
@@ -4,0 +4,0 @@ open: boolean;

dist/Collapsible.js

 import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { useRef, useCallback } from 'react';
 import styles from './Collapsible.module.css.js';
+import { revealTypes } from './revealTypes.js';
 
 var transitioningProperty = 'grid-template-rows';
 var Collapsible = function (_a) {
-    var children = _a.children, open = _a.open, onTransitionEnd = _a.onTransitionEnd, onTransitionStart = _a.onTransitionStart, _b = _a.revealType, revealType = _b === void 0 ? 'bottomFirst' : _b, _c = _a.alwaysKeepChildrenMounted, alwaysKeepChildrenMounted = _c === void 0 ? false : _c;
+    var children = _a.children, open = _a.open, onTransitionEnd = _a.onTransitionEnd, onTransitionStart = _a.onTransitionStart, _b = _a.revealType, revealType = _b === void 0 ? revealTypes[0] : _b, _c = _a.alwaysKeepChildrenMounted, alwaysKeepChildrenMounted = _c === void 0 ? false : _c;
     var wrapperRef = useRef(null);
-    var _d = useState({ isOpen: open, isTransitioning: false }), state = _d[0], setState = _d[1];
-    var isOpenRef = useRef(open);
-    useEffect(function () {
-        if (isOpenRef.current === open) {
-            return;
-        }
-        isOpenRef.current = open;
-        onTransitionStart === null || onTransitionStart === void 0 ? void 0 : onTransitionStart(open);
-        setState({ isOpen: open, isTransitioning: true });
-    }, [onTransitionStart, open]);
+    var lastOpenRef = useRef(open);
+    var stateRef = useRef({ open: open, transitioning: false });
+    if (lastOpenRef.current !== open) {
+        lastOpenRef.current = open;
+        setTimeout(function () {
+            onTransitionStart === null || onTransitionStart === void 0 ? void 0 : onTransitionStart(open);
+        });
+        stateRef.current = { open: open, transitioning: true };
+    }
     var handleTransitionEnd = useCallback(function (event) {
         if (event.propertyName === transitioningProperty &&
             event.target === wrapperRef.current) {
-            onTransitionEnd === null || onTransitionEnd === void 0 ? void 0 : onTransitionEnd(open);
-            setState({ isOpen: open, isTransitioning: false });
+            setTimeout(function () {
+                onTransitionEnd === null || onTransitionEnd === void 0 ? void 0 : onTransitionEnd(open);
+            });
+            stateRef.current = { open: open, transitioning: false };
         }
     }, [open, onTransitionEnd]);
-    var className = useMemo(function () {
+    var className = (function () {
         var classNames = [
             styles.wrapper,
-            state.isOpen ? styles.is_state_open : styles.is_state_closed,
+            stateRef.current.open ? styles.is_state_open : styles.is_state_closed,
             styles["is_revealType_".concat(revealType)],
         ];
-        if (state.isTransitioning) {
+        if (stateRef.current.transitioning) {
             classNames.push(styles.is_transitioning);
         }
         return classNames.join(' ');
-    }, [state, revealType]);
-    return (jsx("div", { ref: wrapperRef, className: className, "aria-hidden": !state.isOpen, onTransitionEnd: handleTransitionEnd, children: jsx("div", { className: styles.in, children: jsx("div", { className: styles.content, children: (state.isOpen ||
-                    state.isTransitioning ||
+    })();
+    return (jsx("div", { ref: wrapperRef, className: className, "aria-hidden": !stateRef.current.open, onTransitionEnd: handleTransitionEnd, children: jsx("div", { className: styles.in, children: jsx("div", { className: styles.content, children: (stateRef.current.open ||
+                    stateRef.current.transitioning ||
                     alwaysKeepChildrenMounted) &&
@@ -40,0 +42,0 @@ children }) }) }));

package.json

 {
 	"name": "collapsible-react-component",
-	"version": "3.0.0",
+	"version": "3.0.1",
 	"description": "Collapses and expands content with an animation.",
@@ -5,0 +5,0 @@ "type": "module",

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14983

increased by0.26%

Lines of code

116

increased by1.75%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes