@cypress-design/react-docmenu 0.5.4 → 0.7.0

package/dist/index.umd.js

@@ -183,10 +183,11 @@ const classes = {
 };
 
 var DocLink = React__namespace.forwardRef(function (_a, ref) {
-    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 item = _a.item, 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 = itemRest.href === activePath;
+    var active = React__namespace.useMemo(function () { return item.href === context.activePath; }, [item.href, context.activePath]);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    item.label; var itemRest = __rest$1(item, ["label"]);
     var setActiveMarkerPosition = function () {
         var _a;
         if (active) {
@@ -200,6 +201,23 @@ var DocLink = React__namespace.forwardRef(function (_a, ref) {
     // on mount, if the item is active,
     // send the top position to the parent
     React__namespace.useEffect(setActiveMarkerPosition, [onActive, active]);
+    React__namespace.useEffect(function () {
+        if (active && activeLIRef.current) {
+            // if active check if the item is visible in the
+            // viewport and scrollIntoView if not
+            var rect = activeLIRef.current.getBoundingClientRect();
+            if (rect.top > 0 && rect.bottom < window.innerHeight) {
+                return;
+            }
+            if (rect.left > 0 && rect.right < window.innerWidth) {
+                return;
+            }
+            activeLIRef.current.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        }
+    }, [active]);
     React__namespace.useImperativeHandle(ref, function () { return ({
         setActiveMarkerPosition: setActiveMarkerPosition,
     }); });
@@ -214,11 +232,12 @@ var DocLink = React__namespace.forwardRef(function (_a, ref) {
             } }),
             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,
+                    'group-hover:block bg-gray-300': !active && context.collapsible,
                     'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
                 }) })) : null,
-            label)));
+            item.label)));
 });
+DocLink.displayName = 'DocMenuDocLink';
 
 var hasActiveItemRecursively = function (items, localActivePath) {
     return items.some(function (item) {
@@ -238,6 +257,11 @@ var DocGroup = React__namespace.forwardRef(function (_a, ref) {
     var _e = React__namespace.useState(!group.collapsed), open = _e[0], setOpen = _e[1];
     var _f = React__namespace.useState(), markerIsMovingTimeout = _f[0], setMarkerIsMovingTimeout = _f[1];
     var $groupElements = React__namespace.useRef(null);
+    React__namespace.useEffect(function () {
+        if (hasActiveItemRecursivelyMemo && !open) {
+            setOpen(true);
+        }
+    }, [hasActiveItemRecursivelyMemo, activePath, open]);
     var toggleMenu = function (localOpen) {
         if (!collapsible || markerIsMoving)
             return;
@@ -327,6 +351,7 @@ var DocGroup = React__namespace.forwardRef(function (_a, ref) {
             open && collapsible && depth === 0 ? (React__namespace.createElement("div", { className: classes.openListBorderLeft })) : null,
             React__namespace.createElement(DocGroupElements, { ref: $groupElements, className: "overflow-hidden", items: group.items, depth: depth, context: context, markerIsMoving: markerIsMoving, onActivePosition: setActivePosition, updateMarkerPosition: onUpdateMarkerPosition, LinkComponent: LinkComponent }))));
 });
+DocGroup.displayName = 'DocMenuDocGroup';
 var DocGroupElements = React__namespace.forwardRef(function (_a, ref) {
     var items = _a.items, _b = _a.depth, depth = _b === void 0 ? 0 : _b, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, markerIsMoving = _a.markerIsMoving, LinkComponent = _a.LinkComponent, className = _a.className, context = _a.context, rest = __rest$1(_a, ["items", "depth", "onActivePosition", "updateMarkerPosition", "markerIsMoving", "LinkComponent", "className", "context"]);
     var $groups = React__namespace.useRef([]);
@@ -371,6 +396,7 @@ var DocGroupElements = React__namespace.forwardRef(function (_a, ref) {
             }, LinkComponent: LinkComponent }));
     })));
 });
+DocGroupElements.displayName = 'DocMenuDocGroupElements';
 
 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"]);
@@ -418,4 +444,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 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 visible block inline 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"> */