@cypress-design/react-docmenu 0.5.1 → 0.5.3

package/dist/index.es.mjs

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createContext } from 'react';
 import clsx from 'clsx';
 import * as iconsRegistry from '@cypress-design/icon-registry';
 import { ICON_COLOR_PROP_NAMES } from '@cypress-design/icon-registry';
@@ -162,20 +161,16 @@ const classes = {
     openListBorderLeft: 'absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900',
 };
 
-var MarkerIsMovingContext = createContext({
-    setMarkerIsMoving: function () { },
-    markerIsMoving: false,
-});
-
 var DocLink = React.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 item = _a.item, depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
     var activeLIRef = React.useRef(null);
-    var markerIsMoving = React.useContext(MarkerIsMovingContext).markerIsMoving;
+    var collapsible = context.collapsible, activePath = context.activePath;
+    var active = item.href === activePath;
     var setActiveMarkerPosition = function () {
         var _a;
         if (active) {
             var box = (_a = activeLIRef === null || activeLIRef === void 0 ? void 0 : activeLIRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            onActive === null || onActive === void 0 ? void 0 : onActive({
+            onActive({
                 top: (box === null || box === void 0 ? void 0 : box.top) || 0,
                 height: (box === null || box === void 0 ? void 0 : box.height) || 0,
             });
@@ -189,7 +184,7 @@ var DocLink = React.forwardRef(function (_a, ref) {
     }); });
     return (React.createElement("li", { ref: activeLIRef, className: "list-none p-0" },
         React.createElement(LinkComponent, { className: clsx('group relative block w-full pl-[24px]', {
-                'text-indigo-500': active,
+                'text-indigo-500 dark:text-indigo-400': active,
                 'text-gray-700 dark:text-gray-500': !active,
                 'py-[8px] text-[16px] leading-[24px]': depth < 0,
                 'leading-[20px] text-[14px] py-[12px]': depth >= 0,
@@ -199,33 +194,42 @@ var DocLink = React.forwardRef(function (_a, ref) {
             depth >= 0 ? (React.createElement("div", { className: clsx('left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full', {
                     hidden: !markerIsMoving || !active,
                     'group-hover:block bg-gray-300': !active && collapsible,
-                    'bg-indigo-500': active && markerIsMoving,
+                    'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
                 }) })) : null,
             item.label)));
 });
 
+var hasActiveItemRecursively = function (items, localActivePath) {
+    return items.some(function (item) {
+        if ('items' in item) {
+            return hasActiveItemRecursively(item.items, localActivePath);
+        }
+        return item.href === localActivePath;
+    });
+};
 var DocGroup = React.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.useState(group.collapsed !== true), open = _e[0], setOpen = _e[1];
+    var group = _a.group, _c = _a.depth, depth = _c === void 0 ? 0 : _c, onActivePosition = _a.onActivePosition, markerIsMoving = _a.markerIsMoving, context = _a.context, updateMarkerPosition = _a.updateMarkerPosition, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d;
+    var setMarkerIsMoving = context.setMarkerIsMoving, activePath = context.activePath, collapsible = context.collapsible, hideMarker = context.hideMarker;
+    var hasActiveItemRecursivelyMemo = React.useMemo(function () {
+        return hasActiveItemRecursively(group.items, activePath);
+    }, [group.items, activePath]);
+    var _e = React.useState(!group.collapsed), open = _e[0], setOpen = _e[1];
+    var _f = React.useState(), markerIsMovingTimeout = _f[0], setMarkerIsMovingTimeout = _f[1];
     var $groupElements = React.useRef(null);
-    var $listWrapper = React.useRef(null);
-    function toggleMenu(open) {
-        if (!collapsible)
+    var toggleMenu = function (localOpen) {
+        if (!collapsible || markerIsMoving)
             return;
-        setOpen(open);
-        hideShowAbsoluteMarker();
-        readjustMarkerPosition();
-    }
-    var hasActiveItemRecursively = React.useCallback(function (items) {
-        if (items === void 0) { items = group.items; }
-        return items.some(function (item) {
-            if ('items' in item) {
-                return hasActiveItemRecursively(item.items);
-            }
-            return item.href === activePath;
-        });
-    }, [group.items, activePath]);
+        setMarkerIsMoving(true);
+        // on browsers than do not support transitionend event
+        // we need to set a timeout to remove the markerIsMoving
+        var timeout = setTimeout(function () {
+            setMarkerIsMoving(false);
+        }, 350);
+        setMarkerIsMovingTimeout(timeout);
+        setOpen(localOpen);
+        readjustMarkerPosition(localOpen);
+    };
     var Head = collapsible ? 'button' : group.href ? 'a' : 'div';
     var setActivePosition = React.useCallback(function (_a) {
         var top = _a.top, height = _a.height;
@@ -233,7 +237,6 @@ var DocGroup = React.forwardRef(function (_a, ref) {
             onActivePosition({ top: top, height: height });
         }
     }, [onActivePosition, open]);
-    var setMarkerIsMoving = React.useContext(MarkerIsMovingContext).setMarkerIsMoving;
     function reTriggerSetActiveGroupParent() {
         var _a;
         (_a = $groupElements.current) === null || _a === void 0 ? void 0 : _a.reTriggerSetActiveGroup();
@@ -243,21 +246,18 @@ var DocGroup = React.forwardRef(function (_a, ref) {
      * We replace the absolute marker by one in the link. After the transition, the
      * marker is replaced by the absolute one again.
      */
-    function hideShowAbsoluteMarker() {
-        var _a, _b;
-        (_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 (open || !hasActiveItemRecursively()) {
-                updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
-            }
-            setMarkerIsMoving(false);
-        }, { once: true });
-    }
-    function readjustMarkerPosition() {
-        if (hasActiveItemRecursively()) {
-            if (open) {
+    var restoreActiveMarkerAfterTransition = function () {
+        if (!markerIsMovingTimeout) {
+            clearTimeout(markerIsMovingTimeout);
+        }
+        if (open || !hasActiveItemRecursivelyMemo) {
+            updateMarkerPosition();
+        }
+        setMarkerIsMoving(false);
+    };
+    function readjustMarkerPosition(localOpen) {
+        if (hasActiveItemRecursivelyMemo) {
+            if (localOpen) {
                 reTriggerSetActiveGroupParent();
             }
             else {
@@ -265,25 +265,27 @@ var DocGroup = React.forwardRef(function (_a, ref) {
             }
         }
         else {
-            updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+            updateMarkerPosition();
         }
     }
     React.useImperativeHandle(ref, function () { return ({
         reTriggerSetActiveGroup: reTriggerSetActiveGroupParent,
     }); });
     var onUpdateMarkerPosition = React.useCallback(function () {
-        if (hasActiveItemRecursively()) {
+        if (hasActiveItemRecursivelyMemo) {
             reTriggerSetActiveGroupParent();
         }
         else {
             updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
         }
-    }, [hasActiveItemRecursively, updateMarkerPosition]);
+    }, [hasActiveItemRecursivelyMemo, updateMarkerPosition]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Head, { onClick: function () { return toggleMenu(!open); }, href: group.href, className: clsx(classes.button, (_b = {},
                 _b[classes.topButton] = depth === 0,
                 _b[classes.leafButton] = depth,
-                _b['text-indigo-500'] = activePath === group.href,
+                _b['text-indigo-500 dark:text-indigo-400'] = activePath === group.href,
+                _b['text-gray-900 dark:text-gray-100'] = hasActiveItemRecursivelyMemo && activePath !== group.href,
+                _b['text-gray-800 dark:text-gray-200'] = !hasActiveItemRecursivelyMemo && activePath !== group.href,
                 _b)) },
             collapsible ? (React.createElement(IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx(classes.expandedIcon, {
                     'rotate-0': open,
@@ -291,32 +293,27 @@ var DocGroup = React.forwardRef(function (_a, ref) {
                     'ml-[28px]': depth,
                 }) })) : null,
             group.label),
-        React.createElement("div", { className: clsx('grid transition-all relative', {
-                'grid-rows-[0fr]': !open && collapsible,
-                'grid-rows-[1fr]': open || !collapsible,
-            }), ref: $listWrapper },
+        React.createElement("div", { className: clsx('relative', collapsible
+                ? {
+                    'transition-all grid': true,
+                    'grid-rows-[0fr]': !open,
+                    'grid-rows-[1fr]': open,
+                }
+                : null), onTransitionEnd: restoreActiveMarkerAfterTransition },
             open && collapsible && depth === 0 ? (React.createElement("div", { className: classes.openListBorderLeft })) : null,
-            React.createElement(DocGroupElements, { ref: $groupElements, className: "overflow-hidden", items: group.items, activePath: activePath, collapsible: collapsible, depth: depth, onActivePosition: setActivePosition, updateMarkerPosition: onUpdateMarkerPosition, LinkComponent: LinkComponent, hideMarker: hideMarker }))));
+            React.createElement(DocGroupElements, { ref: $groupElements, className: "overflow-hidden", items: group.items, depth: depth, context: context, markerIsMoving: markerIsMoving, onActivePosition: setActivePosition, updateMarkerPosition: onUpdateMarkerPosition, LinkComponent: LinkComponent }))));
 });
 var DocGroupElements = React.forwardRef(function (_a, ref) {
-    var items = _a.items, activePath = _a.activePath, collapsible = _a.collapsible, _b = _a.depth, depth = _b === void 0 ? 0 : _b, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, LinkComponent = _a.LinkComponent, hideMarker = _a.hideMarker, className = _a.className, rest = __rest$1(_a, ["items", "activePath", "collapsible", "depth", "onActivePosition", "updateMarkerPosition", "LinkComponent", "hideMarker", "className"]);
+    var items = _a.items, _b = _a.depth, depth = _b === void 0 ? 0 : _b, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, markerIsMoving = _a.markerIsMoving, LinkComponent = _a.LinkComponent, className = _a.className, context = _a.context, rest = __rest$1(_a, ["items", "depth", "onActivePosition", "updateMarkerPosition", "markerIsMoving", "LinkComponent", "className", "context"]);
     var $groups = React.useRef([]);
     var $items = React.useRef([]);
-    var hasActiveItemRecursively = React.useCallback(function (localItems) {
-        if (localItems === void 0) { localItems = items; }
-        return localItems.some(function (item) {
-            if ('items' in item) {
-                return hasActiveItemRecursively(item.items);
-            }
-            return item.href === activePath;
-        });
-    }, [items, activePath]);
     var reTriggerSetActiveGroup = React.useCallback(function (index) {
         if (index === void 0) { index = 0; }
         $items.current.forEach(function (item) {
             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;
@@ -330,21 +327,22 @@ var DocGroupElements = React.forwardRef(function (_a, ref) {
     React.useImperativeHandle(ref, function () { return ({
         reTriggerSetActiveGroup: reTriggerSetActiveGroup,
     }); });
+    var activePath = context.activePath, hideMarker = context.hideMarker;
     var onUpdateMarkerPosition = React.useCallback(function (index) {
-        if (hasActiveItemRecursively()) {
+        if (hasActiveItemRecursively(items, activePath)) {
             reTriggerSetActiveGroup(index);
         }
         else {
             updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
         }
-    }, [hasActiveItemRecursively, updateMarkerPosition, reTriggerSetActiveGroup]);
+    }, [updateMarkerPosition, reTriggerSetActiveGroup, items, activePath]);
     return (React.createElement("ul", __assign$1({}, rest, { className: clsx('list-none p-0', className) }), items.map(function (item, index) {
         return 'items' in item ? (React.createElement("li", { key: index, className: "relative list-none p-0" },
             React.createElement(DocGroup, { ref: function (el) {
                     $groups.current[index] = el;
-                }, group: item, activePath: activePath, depth: depth + 1, collapsible: collapsible, LinkComponent: LinkComponent, hideMarker: hideMarker, onActivePosition: onActivePosition, updateMarkerPosition: function () { return onUpdateMarkerPosition(index); } }))) : (React.createElement(DocLink, { ref: function (el) {
+                }, group: item, depth: depth + 1, LinkComponent: LinkComponent, markerIsMoving: markerIsMoving, context: context, onActivePosition: onActivePosition, updateMarkerPosition: function () { return onUpdateMarkerPosition(index); } }))) : (React.createElement(DocLink, { ref: function (el) {
                 $items.current[index] = el;
-            }, key: index, item: item, active: item.href === activePath, collapsible: collapsible, depth: depth, onActive: function (opts) {
+            }, key: index, item: item, depth: depth, markerIsMoving: markerIsMoving, context: context, onActive: function (opts) {
                 return depth < 0 ? hideMarker() : onActivePosition(opts);
             }, LinkComponent: LinkComponent }));
     })));
@@ -355,7 +353,8 @@ var DocMenu = function (_a) {
     var _e = React.useState(0), activeTop = _e[0], setActiveTop = _e[1];
     var _f = React.useState(36), activeHeight = _f[0], setActiveHeight = _f[1];
     var _g = React.useState(false), showMarker = _g[0], setShowMarker = _g[1];
-    var _h = React.useState(false), markerIsMoving = _h[0], setMarkerIsMoving = _h[1];
+    var _h = React.useState(false), markerIsMoving = _h[0], localSetMarkerIsMoving = _h[1];
+    var _j = React.useState(true), hasCSSTransition = _j[0], setHasCSSTransition = _j[1];
     var container = React.useRef(null);
     var setActivePosition = React.useCallback(function (opts) {
         var _a;
@@ -364,17 +363,35 @@ var DocMenu = function (_a) {
         setActiveTop(opts.top - containerTop);
         setActiveHeight(opts.height);
     }, []);
-    var setShowMarkerFalse = React.useCallback(function () { return setShowMarker(false); }, []);
-    return (React.createElement(MarkerIsMovingContext.Provider, { value: { markerIsMoving: markerIsMoving, setMarkerIsMoving: setMarkerIsMoving } },
-        React.createElement("div", { ref: container, className: "relative" },
-            showMarker && !markerIsMoving && collapsible ? (React.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: {
-                    top: "".concat(activeTop, "px"),
-                    height: "".concat(activeHeight - 8, "px"),
-                } })) : null,
-            React.createElement(DocGroupElements, __assign$1({}, rest, { items: items, activePath: activePath, collapsible: collapsible, depth: -1, onActivePosition: setActivePosition, LinkComponent: LinkComponent, hideMarker: setShowMarkerFalse })))));
+    var hideMarker = React.useCallback(function () { return setShowMarker(false); }, []);
+    var setMarkerIsMoving = React.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.createElement("div", { ref: container, className: "relative" },
+        showMarker && !markerIsMoving && collapsible ? (React.createElement("div", { "data-cy": "doc-menu-active-marker", className: "absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 dark:bg-indigo-400 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.createElement(DocGroupElements, __assign$1({}, rest, { items: items, depth: -1, markerIsMoving: markerIsMoving, onActivePosition: setActivePosition, LinkComponent: LinkComponent, context: {
+                setMarkerIsMoving: setMarkerIsMoving,
+                activePath: activePath,
+                collapsible: collapsible,
+                hideMarker: hideMarker,
+            } }))));
 };
 
 export { DocMenu as default };
 //# sourceMappingURL=index.es.mjs.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] transition 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 dark:bg-indigo-400 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 ml-[28px] transition-all 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-indigo-400 text-gray-500 bg-indigo-400 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"> */