@cypress-design/react-docmenu 0.3.1 → 0.4.0

package/dist/index.umd.js

@@ -80,7 +80,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 var DocLink = function (_a) {
-    var item = _a.item, collapsible = _a.collapsible, _b = _a.depth, depth = _b === void 0 ? -1 : _b, onActive = _a.onActive;
+    var item = _a.item, 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);
     // on mount, if the item is active,
     // send the top position to the parent
@@ -89,13 +89,11 @@ var DocLink = function (_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
-    }, []);
+    }, [onActive, item.active]);
     return (React__namespace.createElement("li", { ref: activeLIRef, className: clsx('list-none p-0', {
             'pl-[16px]': depth >= 0,
         }) },
-        React__namespace.createElement("a", { className: clsx('group relative inline-block pl-[24px]', {
+        React__namespace.createElement(LinkComponent, { 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,
@@ -105,7 +103,7 @@ var DocLink = function (_a) {
                 }), style: {
                     left: "-".concat(18.5 + depth * 8, "px"),
                 } })) : null,
-            item.text)));
+            item.label)));
 };
 
 /******************************************************************************
@@ -221,13 +219,19 @@ const classes = {
 
 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__namespace.useState(depth === 0), open = _d[0], setOpen = _d[1];
-    var _e = React__namespace.useState(Array(group.items.length).fill(1)), itemsHeights = _e[0], setItemsHeights = _e[1];
+    var group = _a.group, collapsible = _a.collapsible, _c = _a.depth, depth = _c === void 0 ? 0 : _c, setHeight = _a.setHeight, index = _a.index, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d;
+    var _e = React__namespace.useState(depth === 0), open = _e[0], setOpen = _e[1];
+    var _f = React__namespace.useState(Array(group.items.length).fill(1)), itemsHeights = _f[0], setItemsHeights = _f[1];
     React__namespace.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__namespace.useState(0), activeTop = _f[0], setActiveTop = _f[1];
+        // if this group contains other groups, ignore this effect
+        // it will be triggered by a leaf and trickle up
+        if (group.items.some(function (item) { return 'items' in item; })) {
+            return;
+        }
+        var newHeight = open ? itemsHeights.reduce(function (a, b) { return a + b; }, 1) : 1;
+        setHeight === null || setHeight === void 0 ? void 0 : setHeight(newHeight);
+    }, [itemsHeights, open, setHeight, group.items, group.label]);
+    var _g = React__namespace.useState(0), activeTop = _g[0], setActiveTop = _g[1];
     React__namespace.useEffect(function () {
         var activeItem = group.items.findIndex(function (item) { return 'href' in item && item.active; });
         if (activeItem >= 0) {
@@ -239,13 +243,13 @@ var DocGroup = function (_a) {
             return;
         setOpen(open);
     }
-    function onSetHeight(index, height) {
+    var onSetHeightCallback = React__namespace.useCallback(function (height) {
         setItemsHeights(function (prev) {
             var newHeights = __spreadArray([], prev, true);
             newHeights[index] = height;
             return newHeights;
         });
-    }
+    }, [setItemsHeights, index]);
     var Head = collapsible ? 'button' : group.href ? 'a' : 'div';
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(Head, { onClick: function () { return toggleMenu(!open); }, href: group.href, className: clsx(classes.button, (_b = {
@@ -259,7 +263,7 @@ var DocGroup = function (_a) {
                     '-rotate-90': !open,
                     'ml-[16px]': depth,
                 }) })) : null,
-            group.text),
+            group.label),
         collapsible &&
             depth >= 0 &&
             open &&
@@ -272,15 +276,15 @@ var DocGroup = function (_a) {
                 hidden: !open,
             }) }, group.items.map(function (item, index) {
             return 'items' in item ? (React__namespace.createElement("li", { key: index, className: "relative list-none p-0" },
-                React__namespace.createElement(DocGroup, { group: item, depth: depth + 1, setHeight: function (height) { return onSetHeight(index, height); }, collapsible: collapsible }))) : (React__namespace.createElement(DocLink, { key: index, item: item, collapsible: collapsible, depth: depth, onActive: function (top) { return setActiveTop(top); } }));
+                React__namespace.createElement(DocGroup, { group: item, depth: depth + 1, setHeight: onSetHeightCallback, index: index, collapsible: collapsible, LinkComponent: LinkComponent }))) : (React__namespace.createElement(DocLink, { key: index, item: item, collapsible: collapsible, depth: depth, onActive: function (top) { return setActiveTop(top); }, LinkComponent: LinkComponent }));
         }))));
 };
 
 var DocMenu = function (_a) {
-    var items = _a.items, _b = _a.collapsible, collapsible = _b === void 0 ? true : _b, rest = __rest$1(_a, ["items", "collapsible"]);
+    var items = _a.items, _b = _a.collapsible, collapsible = _b === void 0 ? true : _b, _c = _a.LinkComponent, LinkComponent = _c === void 0 ? 'a' : _c, rest = __rest$1(_a, ["items", "collapsible", "LinkComponent"]);
     return (React__namespace.createElement("ul", __assign$1({}, rest, { className: clsx('list-none p-0', rest.className) }), items.map(function (item, index) {
         return 'items' in item ? (React__namespace.createElement("li", { key: index, className: "relative list-none p-0" },
-            React__namespace.createElement(DocGroup, { group: item, collapsible: collapsible }))) : (React__namespace.createElement(DocLink, { key: index, item: item, collapsible: collapsible }));
+            React__namespace.createElement(DocGroup, { index: index, group: item, collapsible: collapsible, LinkComponent: LinkComponent }))) : (React__namespace.createElement(DocLink, { key: index, item: item, collapsible: collapsible, LinkComponent: LinkComponent }));
     })));
 };