@cypress-design/react-docmenu 0.5.0 → 0.5.2

package/dist/index.umd.js

@@ -190,7 +190,7 @@ var MarkerIsMovingContext = React.createContext({
 var DocLink = React__namespace.forwardRef(function (_a, ref) {
     var item = _a.item, active = _a.active, collapsible = _a.collapsible, _b = _a.depth, depth = _b === void 0 ? -1 : _b, onActive = _a.onActive, _c = _a.LinkComponent, LinkComponent = _c === void 0 ? 'a' : _c;
     var activeLIRef = React__namespace.useRef(null);
-    var _d = React__namespace.useContext(MarkerIsMovingContext), markerIsMoving = _d.markerIsMoving, setMarkerIsMoving = _d.setMarkerIsMoving;
+    var markerIsMoving = React__namespace.useContext(MarkerIsMovingContext).markerIsMoving;
     var setActiveMarkerPosition = function () {
         var _a;
         if (active) {
@@ -203,11 +203,7 @@ var DocLink = React__namespace.forwardRef(function (_a, ref) {
     };
     // on mount, if the item is active,
     // send the top position to the parent
-    React__namespace.useEffect(setActiveMarkerPosition, [
-        onActive,
-        active,
-        setMarkerIsMoving,
-    ]);
+    React__namespace.useEffect(setActiveMarkerPosition, [onActive, active]);
     React__namespace.useImperativeHandle(ref, function () { return ({
         setActiveMarkerPosition: setActiveMarkerPosition,
     }); });
@@ -228,27 +224,18 @@ var DocLink = React__namespace.forwardRef(function (_a, ref) {
             item.label)));
 });
 
-var useIsMounted = function () {
-    var isMounted = React__namespace.useRef(false);
-    React__namespace.useEffect(function () {
-        isMounted.current = true;
-        return function () {
-            isMounted.current = false;
-        };
-    }, []);
-    return isMounted;
-};
 var DocGroup = React__namespace.forwardRef(function (_a, ref) {
     var _b;
     var group = _a.group, activePath = _a.activePath, collapsible = _a.collapsible, _c = _a.depth, depth = _c === void 0 ? 0 : _c, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d, hideMarker = _a.hideMarker;
     var _e = React__namespace.useState(group.collapsed !== true), open = _e[0], setOpen = _e[1];
     var $groupElements = React__namespace.useRef(null);
     var $listWrapper = React__namespace.useRef(null);
-    var didMount = useIsMounted();
-    function toggleMenu(open) {
+    function toggleMenu(localOpen) {
         if (!collapsible)
             return;
-        setOpen(open);
+        hideShowAbsoluteMarker(localOpen);
+        setOpen(localOpen);
+        readjustMarkerPosition(localOpen);
     }
     var hasActiveItemRecursively = React__namespace.useCallback(function (items) {
         if (items === void 0) { items = group.items; }
@@ -271,47 +258,36 @@ var DocGroup = React__namespace.forwardRef(function (_a, ref) {
         var _a;
         (_a = $groupElements.current) === null || _a === void 0 ? void 0 : _a.reTriggerSetActiveGroup();
     }
-    React__namespace.useEffect(function () {
+    /**
+     * To make the marker follow smooth open/close animation of the menu groups
+     * We replace the absolute marker by one in the link. After the transition, the
+     * marker is replaced by the absolute one again.
+     */
+    function hideShowAbsoluteMarker(localOpen) {
         var _a, _b;
-        if (didMount.current) {
-            (_a = $listWrapper.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionstart', function () {
-                setMarkerIsMoving(true);
-            }, { once: true });
-            (_b = $listWrapper.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', function () {
-                setMarkerIsMoving(false);
-                if (open || !hasActiveItemRecursively()) {
-                    updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
-                }
-            }, { once: true });
-        }
-    }, [
-        open,
-        setMarkerIsMoving,
-        updateMarkerPosition,
-        hasActiveItemRecursively,
-        didMount,
-    ]);
-    React__namespace.useEffect(function () {
-        if (didMount.current) {
-            if (hasActiveItemRecursively()) {
-                if (open) {
-                    reTriggerSetActiveGroupParent();
-                }
-                else {
-                    hideMarker();
-                }
+        (_a = $listWrapper.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionstart', function () {
+            setMarkerIsMoving(true);
+        }, { once: true });
+        (_b = $listWrapper.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', function () {
+            if (localOpen || !hasActiveItemRecursively()) {
+                updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+            }
+            setMarkerIsMoving(false);
+        }, { once: true });
+    }
+    function readjustMarkerPosition(localOpen) {
+        if (hasActiveItemRecursively()) {
+            if (localOpen) {
+                reTriggerSetActiveGroupParent();
             }
             else {
-                updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+                hideMarker();
             }
         }
-    }, [
-        open,
-        updateMarkerPosition,
-        hideMarker,
-        hasActiveItemRecursively,
-        didMount,
-    ]);
+        else {
+            updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+        }
+    }
     React__namespace.useImperativeHandle(ref, function () { return ({
         reTriggerSetActiveGroup: reTriggerSetActiveGroupParent,
     }); });
@@ -361,6 +337,7 @@ var DocGroupElements = React__namespace.forwardRef(function (_a, ref) {
             item === null || item === void 0 ? void 0 : item.setActiveMarkerPosition();
         });
         // calculate the index of the calling group in the list of groups
+        // "index" is the index of the calling group in the list of items (groups and links)
         var indexGroup = index -
             // remove all the items that are not groups from the array and count them
             items.slice(0, index).filter(function (item) { return !('items' in item); }).length;
@@ -399,7 +376,8 @@ var DocMenu = function (_a) {
     var _e = React__namespace.useState(0), activeTop = _e[0], setActiveTop = _e[1];
     var _f = React__namespace.useState(36), activeHeight = _f[0], setActiveHeight = _f[1];
     var _g = React__namespace.useState(false), showMarker = _g[0], setShowMarker = _g[1];
-    var _h = React__namespace.useState(false), markerIsMoving = _h[0], setMarkerIsMoving = _h[1];
+    var _h = React__namespace.useState(false), markerIsMoving = _h[0], localSetMarkerIsMoving = _h[1];
+    var _j = React__namespace.useState(true), hasCSSTransition = _j[0], setHasCSSTransition = _j[1];
     var container = React__namespace.useRef(null);
     var setActivePosition = React__namespace.useCallback(function (opts) {
         var _a;
@@ -409,11 +387,25 @@ var DocMenu = function (_a) {
         setActiveHeight(opts.height);
     }, []);
     var setShowMarkerFalse = React__namespace.useCallback(function () { return setShowMarker(false); }, []);
+    var setMarkerIsMoving = React__namespace.useCallback(function (val) {
+        localSetMarkerIsMoving(val);
+        if (!val)
+            return;
+        // make sure the animation does not fire "after"
+        // the marker has reappeared at its right place
+        setHasCSSTransition(false);
+        setTimeout(function () {
+            setHasCSSTransition(true);
+        }, 300);
+    }, [localSetMarkerIsMoving]);
     return (React__namespace.createElement(MarkerIsMovingContext.Provider, { value: { markerIsMoving: markerIsMoving, setMarkerIsMoving: setMarkerIsMoving } },
         React__namespace.createElement("div", { ref: container, className: "relative" },
-            showMarker && !markerIsMoving && collapsible ? (React__namespace.createElement("div", { className: "absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]", style: {
+            showMarker && !markerIsMoving && collapsible ? (React__namespace.createElement("div", { className: "absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 ml-[6.5px] mt-[4px]", style: {
                     top: "".concat(activeTop, "px"),
                     height: "".concat(activeHeight - 8, "px"),
+                    transition: hasCSSTransition
+                        ? 'height .3s ease-in-out, top .3s ease-in-out'
+                        : 'none',
                 } })) : null,
             React__namespace.createElement(DocGroupElements, __assign$1({}, rest, { items: items, activePath: activePath, collapsible: collapsible, depth: -1, onActivePosition: setActivePosition, LinkComponent: LinkComponent, hideMarker: setShowMarkerFalse })))));
 };
@@ -421,4 +413,4 @@ var DocMenu = function (_a) {
 module.exports = DocMenu;
 //# sourceMappingURL=index.umd.js.map
 
-/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] text-indigo-500 rotate-0 -rotate-90 ml-[28px] grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 block w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-gray-500 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */
+/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 rotate-0 -rotate-90 ml-[28px] grid transition-all grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 block w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-gray-500 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */