@cypress-design/react-docmenu 0.3.1 → 0.4.1

package/dist/index.es.mjs

@@ -43,50 +43,11 @@ function __rest$1(s, e) {
     return t;
 }
 
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var DocLink = function (_a) {
-    var item = _a.item, collapsible = _a.collapsible, _b = _a.depth, depth = _b === void 0 ? -1 : _b, onActive = _a.onActive;
-    var activeLIRef = React.useRef(null);
-    // on mount, if the item is active,
-    // send the top position to the parent
-    React.useEffect(function () {
-        var _a;
-        if (item.active) {
-            onActive === null || onActive === void 0 ? void 0 : onActive(((_a = activeLIRef === null || activeLIRef === void 0 ? void 0 : activeLIRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0);
-        }
-        // supposed to happen only on mount
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return (React.createElement("li", { ref: activeLIRef, className: clsx('list-none p-0', {
-            'pl-[16px]': depth >= 0,
-        }) },
-        React.createElement("a", { className: clsx('group relative inline-block pl-[24px]', {
-                'text-indigo-500': item.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-[10%] h-[80%] rounded-full hidden', {
-                    'group-hover:block bg-gray-300': !item.active && collapsible,
-                }), style: {
-                    left: "-".concat(18.5 + depth * 8, "px"),
-                } })) : null,
-            item.text)));
-};
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -198,72 +159,176 @@ const classes = {
     leafButton: 'leading-[20px] text-[14px] pl-[40px]',
 };
 
-var DocGroup = function (_a) {
-    var _b;
-    var group = _a.group, collapsible = _a.collapsible, _c = _a.depth, depth = _c === void 0 ? 0 : _c, setHeight = _a.setHeight;
-    var _d = React.useState(depth === 0), open = _d[0], setOpen = _d[1];
-    var _e = React.useState(Array(group.items.length).fill(1)), itemsHeights = _e[0], setItemsHeights = _e[1];
-    React.useEffect(function () {
-        setHeight === null || setHeight === void 0 ? void 0 : setHeight(open ? itemsHeights.reduce(function (a, b) { return a + b; }, 1) : 1);
-    }, [itemsHeights, open, setHeight]);
-    var _f = React.useState(0), activeTop = _f[0], setActiveTop = _f[1];
-    React.useEffect(function () {
-        var activeItem = group.items.findIndex(function (item) { return 'href' in item && item.active; });
-        if (activeItem >= 0) {
-            setActiveTop(itemsHeights.slice(0, activeItem).reduce(function (a, b) { return a + b; }, 1) * 44);
+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 _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({
+                top: (box === null || box === void 0 ? void 0 : box.top) || 0,
+                height: (box === null || box === void 0 ? void 0 : box.height) || 0,
+            });
         }
-    }, [itemsHeights, group.items]);
+    }
+    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]', {
+                'text-indigo-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', {
+                    'group-hover:block bg-gray-300': !active && collapsible,
+                }), style: {
+                    left: "-".concat(18.5 + depth * 8, "px"),
+                } })) : null,
+            item.label)));
+});
+
+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 $groupElements = React.useRef(null);
     function toggleMenu(open) {
         if (!collapsible)
             return;
         setOpen(open);
     }
-    function onSetHeight(index, height) {
-        setItemsHeights(function (prev) {
-            var newHeights = __spreadArray([], prev, true);
-            newHeights[index] = height;
-            return newHeights;
+    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]);
     var Head = collapsible ? 'button' : group.href ? 'a' : 'div';
+    var setActivePosition = React.useCallback(function (_a) {
+        var top = _a.top, height = _a.height;
+        if (open) {
+            onActivePosition({ top: top, height: height });
+        }
+    }, [onActivePosition, open]);
+    function reTriggerSetActiveGroup() {
+        var _a;
+        (_a = $groupElements.current) === null || _a === void 0 ? void 0 : _a.reTriggerSetActiveGroup();
+    }
+    React.useEffect(function () {
+        if (hasActiveItemRecursively()) {
+            if (open) {
+                reTriggerSetActiveGroup();
+            }
+            else {
+                hideMarker();
+            }
+        }
+        else {
+            updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+        }
+    }, [open, updateMarkerPosition, hideMarker, hasActiveItemRecursively]);
+    React.useImperativeHandle(ref, function () { return ({
+        reTriggerSetActiveGroup: reTriggerSetActiveGroup,
+    }); });
+    var onUpdateMarkerPosition = React.useCallback(function () {
+        if (hasActiveItemRecursively()) {
+            reTriggerSetActiveGroup();
+        }
+        else {
+            updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+        }
+    }, [hasActiveItemRecursively, updateMarkerPosition]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Head, { onClick: function () { return toggleMenu(!open); }, href: group.href, className: clsx(classes.button, (_b = {
-                    'text-indigo-500': group.active
-                },
+        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)) },
             collapsible ? (React.createElement(IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx('absolute transform transition-transform left-0', {
                     'rotate-0': open,
                     '-rotate-90': !open,
                     'ml-[16px]': depth,
                 }) })) : null,
-            group.text),
-        collapsible &&
-            depth >= 0 &&
-            open &&
-            group.items.some(function (item) { return 'href' in item && item.active; }) ? (React.createElement("div", { className: "absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px]", style: {
-                top: "".concat(activeTop, "px"),
-                left: "".concat(depth === 0 ? 0.5 : -(depth * 8) - 0.5, "px"),
-            } })) : null,
-        React.createElement("ul", { className: clsx('ml-[8px] list-none p-0', {
-                'border-l border-gray-100': depth === 0 && collapsible,
-                hidden: !open,
-            }) }, group.items.map(function (item, index) {
-            return 'items' in item ? (React.createElement("li", { key: index, className: "relative list-none p-0" },
-                React.createElement(DocGroup, { group: item, depth: depth + 1, setHeight: function (height) { return onSetHeight(index, height); }, collapsible: collapsible }))) : (React.createElement(DocLink, { key: index, item: item, collapsible: collapsible, depth: depth, onActive: function (top) { return setActiveTop(top); } }));
-        }))));
-};
-
-var DocMenu = function (_a) {
-    var items = _a.items, _b = _a.collapsible, collapsible = _b === void 0 ? true : _b, rest = __rest$1(_a, ["items", "collapsible"]);
-    return (React.createElement("ul", __assign$1({}, rest, { className: clsx('list-none p-0', rest.className) }), items.map(function (item, index) {
+            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 })));
+});
+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 $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]);
+    function reTriggerSetActiveGroup() {
+        $groups.current.forEach(function (group) {
+            group === null || group === void 0 ? void 0 : group.reTriggerSetActiveGroup();
+        });
+        $items.current.forEach(function (item) {
+            item === null || item === void 0 ? void 0 : item.setActiveMarkerPosition();
+        });
+    }
+    React.useImperativeHandle(ref, function () { return ({
+        reTriggerSetActiveGroup: reTriggerSetActiveGroup,
+    }); });
+    var onUpdateMarkerPosition = React.useCallback(function () {
+        if (hasActiveItemRecursively()) {
+            reTriggerSetActiveGroup();
+        }
+        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) {
         return 'items' in item ? (React.createElement("li", { key: index, className: "relative list-none p-0" },
-            React.createElement(DocGroup, { group: item, collapsible: collapsible }))) : (React.createElement(DocLink, { key: index, item: item, collapsible: collapsible }));
+            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) {
+                $items.current[index] = el;
+            }, key: index, item: item, active: item.href === activePath, collapsible: collapsible, depth: depth, onActive: onActivePosition, LinkComponent: LinkComponent }));
     })));
+});
+
+var DocMenu = function (_a) {
+    var items = _a.items, _b = _a.activePath, activePath = _b === void 0 ? '<unknown>' : _b, _c = _a.collapsible, collapsible = _c === void 0 ? true : _c, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d, rest = __rest$1(_a, ["items", "activePath", "collapsible", "LinkComponent"]);
+    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 container = React.useRef(null);
+    var setActivePosition = React.useCallback(function (opts) {
+        var _a;
+        var containerTop = ((_a = container.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) || 0;
+        setShowMarker(true);
+        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, { className: !open ? 'hidden' : undefined, items: items, activePath: activePath, collapsible: collapsible, depth: -1, onActivePosition: setActivePosition, LinkComponent: LinkComponent, hideMarker: function () { return setShowMarker(false); } }))));
 };
 
 export { DocMenu as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="list-none p-0 relative pl-[16px] inline-block pl-[24px] text-indigo-500 py-[8px] text-[16px] leading-[24px] py-[12px] leading-[20px] text-[14px] absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden group-hover:block bg-gray-300 transform transition-transform left-0 rotate-0 -rotate-90 ml-[16px] h-[36px] bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px] ml-[8px] border-l border-gray-100 flex py-[10px] items-center w-full 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] hidden text-indigo-500 transform transition-transform left-0 rotate-0 -rotate-90 ml-[16px] 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 font-medium pl-[40px]"> */