@cypress-design/react-docmenu 0.3.0 → 0.4.0

package/dist/index.es.mjs

@@ -17,7 +17,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign$1 = function() {
@@ -51,10 +51,15 @@ function __spreadArray(to, from, pack) {
         }
     }
     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 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.useRef(null);
     // on mount, if the item is active,
     // send the top position to the parent
@@ -63,11 +68,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);
         }
-    }, []);
+    }, [onActive, item.active]);
     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]', {
+        React.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,
@@ -77,7 +82,7 @@ var DocLink = function (_a) {
                 }), style: {
                     left: "-".concat(18.5 + depth * 8, "px"),
                 } })) : null,
-            item.text)));
+            item.label)));
 };
 
 /******************************************************************************
@@ -94,7 +99,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign = function() {
@@ -118,7 +123,12 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+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 compileReactIconProperties = function (_a) {
     var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
@@ -132,6 +142,7 @@ var compileReactIconProperties = function (_a) {
         }
         return newAttributes;
     }, {});
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(function () {
         var iconFileId = "".concat(name, "_").concat(size);
         if (defs) {
@@ -145,7 +156,7 @@ var compileReactIconProperties = function (_a) {
             svgElement.innerHTML = defs;
             document.body.appendChild(svgElement);
         }
-    }, [defs]);
+    }, [defs, name, size]);
     var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
             __html: body,
         }, className: undefined }, filteredAttributes);
@@ -187,31 +198,37 @@ 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.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];
+    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.useState(depth === 0), open = _e[0], setOpen = _e[1];
+    var _f = React.useState(Array(group.items.length).fill(1)), itemsHeights = _f[0], setItemsHeights = _f[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]);
-    var _f = React.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.useState(0), activeTop = _g[0], setActiveTop = _g[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);
         }
-    }, [itemsHeights]);
+    }, [itemsHeights, group.items]);
     function toggleMenu(open) {
         if (!collapsible)
             return;
         setOpen(open);
     }
-    function onSetHeight(index, height) {
+    var onSetHeightCallback = React.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.createElement(React.Fragment, null,
         React.createElement(Head, { onClick: function () { return toggleMenu(!open); }, href: group.href, className: clsx(classes.button, (_b = {
@@ -225,7 +242,7 @@ var DocGroup = function (_a) {
                     '-rotate-90': !open,
                     'ml-[16px]': depth,
                 }) })) : null,
-            group.text),
+            group.label),
         collapsible &&
             depth >= 0 &&
             open &&
@@ -238,15 +255,15 @@ var DocGroup = function (_a) {
                 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); } }));
+                React.createElement(DocGroup, { group: item, depth: depth + 1, setHeight: onSetHeightCallback, index: index, collapsible: collapsible, LinkComponent: LinkComponent }))) : (React.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.createElement("ul", __assign$1({}, rest, { className: clsx('list-none p-0', rest.className) }), 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, { index: index, group: item, collapsible: collapsible, LinkComponent: LinkComponent }))) : (React.createElement(DocLink, { key: index, item: item, collapsible: collapsible, LinkComponent: LinkComponent }));
     })));
 };