@cypress-design/react-docmenu 0.4.3 → 0.5.1

package/dist/index.es.mjs

@@ -1,4 +1,5 @@
 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';
@@ -154,18 +155,23 @@ var IconChevronDownSmall = function (props) { return React.createElement('svg',
 /* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
 
 const classes = {
+    expandedIcon: 'absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700',
     button: 'flex leading-[24px] py-[10px] items-center relative w-full text-start',
     topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',
-    leafButton: 'leading-[20px] text-[14px] pl-[40px]',
+    leafButton: 'leading-[20px] text-[14px] pl-[48px]',
+    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 activeLIRef = React.useRef(null);
-    // on mount, if the item is active,
-    // send the top position to the parent
-    React.useEffect(setActiveMarkerPosition, [onActive, active]);
-    function setActiveMarkerPosition() {
+    var markerIsMoving = React.useContext(MarkerIsMovingContext).markerIsMoving;
+    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();
@@ -174,23 +180,27 @@ var DocLink = React.forwardRef(function (_a, ref) {
                 height: (box === null || box === void 0 ? void 0 : box.height) || 0,
             });
         }
-    }
+    };
+    // on mount, if the item is active,
+    // send the top position to the parent
+    React.useEffect(setActiveMarkerPosition, [onActive, active]);
     React.useImperativeHandle(ref, function () { return ({
         setActiveMarkerPosition: setActiveMarkerPosition,
     }); });
-    return (React.createElement("li", { ref: activeLIRef, className: clsx('list-none p-0', {
-            'pl-[16px]': depth >= 0,
-        }) },
-        React.createElement(LinkComponent, { className: clsx('group relative inline-block pl-[24px]', {
+    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-gray-700 dark:text-gray-500': !active,
                 'py-[8px] text-[16px] leading-[24px]': depth < 0,
-                'py-[12px] leading-[20px] text-[14px]': depth >= 0,
-            }), href: item.href },
-            depth >= 0 ? (React.createElement("div", { className: clsx('absolute w-[4px] z-10 top-[4px] bottom-[4px] rounded-full hidden', {
+                'leading-[20px] text-[14px] py-[12px]': depth >= 0,
+            }), href: item.href, style: {
+                paddingLeft: depth >= 0 ? "".concat(depth * 12 + 48, "px") : undefined,
+            } },
+            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,
-                }), style: {
-                    left: "-".concat(18.5 + depth * 8, "px"),
-                } })) : null,
+                    'bg-indigo-500': active && markerIsMoving,
+                }) })) : null,
             item.label)));
 });
 
@@ -199,10 +209,13 @@ var DocGroup = React.forwardRef(function (_a, ref) {
     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 $groupElements = React.useRef(null);
+    var $listWrapper = React.useRef(null);
     function toggleMenu(open) {
         if (!collapsible)
             return;
         setOpen(open);
+        hideShowAbsoluteMarker();
+        readjustMarkerPosition();
     }
     var hasActiveItemRecursively = React.useCallback(function (items) {
         if (items === void 0) { items = group.items; }
@@ -220,14 +233,32 @@ var DocGroup = React.forwardRef(function (_a, ref) {
             onActivePosition({ top: top, height: height });
         }
     }, [onActivePosition, open]);
-    function reTriggerSetActiveGroup() {
+    var setMarkerIsMoving = React.useContext(MarkerIsMovingContext).setMarkerIsMoving;
+    function reTriggerSetActiveGroupParent() {
         var _a;
         (_a = $groupElements.current) === null || _a === void 0 ? void 0 : _a.reTriggerSetActiveGroup();
     }
-    React.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() {
+        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) {
-                reTriggerSetActiveGroup();
+                reTriggerSetActiveGroupParent();
             }
             else {
                 hideMarker();
@@ -236,13 +267,13 @@ var DocGroup = React.forwardRef(function (_a, ref) {
         else {
             updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
         }
-    }, [open, updateMarkerPosition, hideMarker, hasActiveItemRecursively]);
+    }
     React.useImperativeHandle(ref, function () { return ({
-        reTriggerSetActiveGroup: reTriggerSetActiveGroup,
+        reTriggerSetActiveGroup: reTriggerSetActiveGroupParent,
     }); });
     var onUpdateMarkerPosition = React.useCallback(function () {
         if (hasActiveItemRecursively()) {
-            reTriggerSetActiveGroup();
+            reTriggerSetActiveGroupParent();
         }
         else {
             updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
@@ -254,13 +285,18 @@ var DocGroup = React.forwardRef(function (_a, ref) {
                 _b[classes.leafButton] = depth,
                 _b['text-indigo-500'] = activePath === group.href,
                 _b)) },
-            collapsible ? (React.createElement(IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx('absolute transform transition-transform left-0', {
+            collapsible ? (React.createElement(IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx(classes.expandedIcon, {
                     'rotate-0': open,
                     '-rotate-90': !open,
-                    'ml-[16px]': depth,
+                    'ml-[28px]': depth,
                 }) })) : null,
             group.label),
-        React.createElement(DocGroupElements, { ref: $groupElements, className: !open ? 'hidden' : undefined, items: group.items, activePath: activePath, collapsible: collapsible, depth: depth, onActivePosition: setActivePosition, updateMarkerPosition: onUpdateMarkerPosition, LinkComponent: LinkComponent, hideMarker: hideMarker })));
+        React.createElement("div", { className: clsx('grid transition-all relative', {
+                'grid-rows-[0fr]': !open && collapsible,
+                'grid-rows-[1fr]': open || !collapsible,
+            }), ref: $listWrapper },
+            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 }))));
 });
 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"]);
@@ -275,35 +311,42 @@ var DocGroupElements = React.forwardRef(function (_a, ref) {
             return item.href === activePath;
         });
     }, [items, activePath]);
-    function reTriggerSetActiveGroup() {
-        $groups.current.forEach(function (group) {
-            group === null || group === void 0 ? void 0 : group.reTriggerSetActiveGroup();
-        });
+    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
+        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;
+        // only update groups that come after the toggled one
+        // others will not need to update the marker
+        // since they are "before" in the rendering tree
+        $groups.current.slice(indexGroup + 1).forEach(function (group) {
+            group === null || group === void 0 ? void 0 : group.reTriggerSetActiveGroup();
+        });
+    }, [items]);
     React.useImperativeHandle(ref, function () { return ({
         reTriggerSetActiveGroup: reTriggerSetActiveGroup,
     }); });
-    var onUpdateMarkerPosition = React.useCallback(function () {
+    var onUpdateMarkerPosition = React.useCallback(function (index) {
         if (hasActiveItemRecursively()) {
-            reTriggerSetActiveGroup();
+            reTriggerSetActiveGroup(index);
         }
         else {
             updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
         }
-    }, [hasActiveItemRecursively, updateMarkerPosition]);
-    return (React.createElement("ul", __assign$1({}, rest, { className: clsx('list-none p-0', className, {
-            'border-l border-gray-100': depth === 0 && collapsible,
-            'ml-[8px]': depth >= 0,
-        }) }), items.map(function (item, index) {
+    }, [hasActiveItemRecursively, updateMarkerPosition, reTriggerSetActiveGroup]);
+    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: onUpdateMarkerPosition }))) : (React.createElement(DocLink, { ref: function (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) {
                 $items.current[index] = el;
-            }, key: index, item: item, active: item.href === activePath, collapsible: collapsible, depth: depth, onActive: onActivePosition, LinkComponent: LinkComponent }));
+            }, key: index, item: item, active: item.href === activePath, collapsible: collapsible, depth: depth, onActive: function (opts) {
+                return depth < 0 ? hideMarker() : onActivePosition(opts);
+            }, LinkComponent: LinkComponent }));
     })));
 });
 
@@ -312,6 +355,7 @@ 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 container = React.useRef(null);
     var setActivePosition = React.useCallback(function (opts) {
         var _a;
@@ -320,15 +364,17 @@ var DocMenu = function (_a) {
         setActiveTop(opts.top - containerTop);
         setActiveHeight(opts.height);
     }, []);
-    return (React.createElement("div", { ref: container, className: "relative" },
-        showMarker && 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 + 4, "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: function () { return setShowMarker(false); } }))));
+    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 })))));
 };
 
 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] text-indigo-500 transform transition-transform left-0 rotate-0 -rotate-90 ml-[16px] hidden list-none p-0 border-l border-gray-100 ml-[8px] pl-[16px] inline-block pl-[24px] py-[8px] text-[16px] leading-[24px] py-[12px] leading-[20px] text-[14px] z-10 top-[4px] bottom-[4px] group-hover:block bg-gray-300 flex py-[10px] items-center w-full text-start font-medium pl-[40px]"> */
+/* <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"> */