@cypress-design/react-docmenu 0.5.3 → 0.5.4

package/dist/index.umd.js

@@ -183,10 +183,10 @@ const classes = {
 };
 
 var DocLink = React__namespace.forwardRef(function (_a, ref) {
-    var item = _a.item, depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
+    var _b = _a.item, label = _b.label, itemRest = __rest$1(_b, ["label"]), depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
     var activeLIRef = React__namespace.useRef(null);
     var collapsible = context.collapsible, activePath = context.activePath;
-    var active = item.href === activePath;
+    var active = itemRest.href === activePath;
     var setActiveMarkerPosition = function () {
         var _a;
         if (active) {
@@ -204,20 +204,20 @@ var DocLink = React__namespace.forwardRef(function (_a, ref) {
         setActiveMarkerPosition: setActiveMarkerPosition,
     }); });
     return (React__namespace.createElement("li", { ref: activeLIRef, className: "list-none p-0" },
-        React__namespace.createElement(LinkComponent, { className: clsx('group relative block w-full pl-[24px]', {
+        React__namespace.createElement(LinkComponent, __assign$1({}, itemRest, { className: clsx('group relative block w-full pl-[24px]', {
                 '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,
-            }), href: item.href, style: {
+            }), style: {
                 paddingLeft: depth >= 0 ? "".concat(depth * 12 + 48, "px") : undefined,
-            } },
+            } }),
             depth >= 0 ? (React__namespace.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 dark:bg-indigo-400': active && markerIsMoving,
                 }) })) : null,
-            item.label)));
+            label)));
 });
 
 var hasActiveItemRecursively = function (items, localActivePath) {
@@ -307,12 +307,15 @@ var DocGroup = React__namespace.forwardRef(function (_a, ref) {
                 _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)) },
+                _b)), style: {
+                paddingLeft: depth >= 1 ? "".concat((depth - 1) * 12 + 48, "px") : undefined,
+            } },
             collapsible ? (React__namespace.createElement(IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx(classes.expandedIcon, {
                     'rotate-0': open,
                     '-rotate-90': !open,
-                    'ml-[28px]': depth,
-                }) })) : null,
+                }), style: {
+                    marginLeft: depth >= 1 ? "".concat((depth - 1) * 12 + 28, "px") : undefined,
+                } })) : null,
             group.label),
         React__namespace.createElement("div", { className: clsx('relative', collapsible
                 ? {
@@ -415,4 +418,4 @@ var DocMenu = function (_a) {
 module.exports = DocMenu;
 //# sourceMappingURL=index.umd.js.map
 
-/* <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"> */
+/* <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 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"> */