@cypress-design/react-docmenu 0.6.0 → 0.7.1

package/dist/index.umd.js

@@ -201,10 +201,30 @@ 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 check if the item is visible in the
+        // viewport and scrollIntoView if not
+        setTimeout(function () {
+            // give it time tp render and expand
+            if (active && activeLIRef.current) {
+                var rect = activeLIRef.current.getBoundingClientRect();
+                if (rect.top > 0 &&
+                    rect.bottom < window.innerHeight &&
+                    rect.left > 0 &&
+                    rect.right < window.innerWidth) {
+                    return;
+                }
+                activeLIRef.current.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
+            }
+        }, 200);
+    }, [active]);
     React__namespace.useImperativeHandle(ref, function () { return ({
         setActiveMarkerPosition: setActiveMarkerPosition,
     }); });
-    return (React__namespace.createElement("li", { ref: activeLIRef, className: "list-none p-0" },
+    return (React__namespace.createElement("li", { ref: activeLIRef, className: "list-none p-0 scroll-my-10" },
         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,
@@ -427,4 +447,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 scroll-my-10 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"> */