@cypress-design/react-docmenu 0.4.0 → 0.4.2

package/_DocLink.tsx

@@ -10,59 +10,73 @@ export type LinkComponentType = React.ElementType<{
 
 export interface DocLinkProps {
   item: NavItemLink
+  active: boolean
   collapsible: boolean
   depth?: number
-  onActive?: (top: number) => void
+  onActive?: (opts: { top: number; height: number }) => void
   LinkComponent?: LinkComponentType
 }
 
-export const DocLink: React.FC<DocLinkProps> = ({
-  item,
-  collapsible,
-  depth = -1,
-  onActive,
-  LinkComponent = 'a',
-}) => {
-  const activeLIRef = React.useRef<HTMLLIElement>(null)
+export interface DocLinkForward {
+  setActiveMarkerPosition: () => void
+}
+
+export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
+  (
+    { item, active, collapsible, depth = -1, onActive, LinkComponent = 'a' },
+    ref,
+  ) => {
+    const activeLIRef = React.useRef<HTMLLIElement>(null)
+
+    // on mount, if the item is active,
+    // send the top position to the parent
+    React.useEffect(setActiveMarkerPosition, [onActive, active])
 
-  // on mount, if the item is active,
-  // send the top position to the parent
-  React.useEffect(() => {
-    if (item.active) {
-      onActive?.(activeLIRef?.current?.offsetTop || 0)
+    function setActiveMarkerPosition() {
+      if (active) {
+        const box = activeLIRef?.current?.getBoundingClientRect()
+        onActive?.({
+          top: box?.top || 0,
+          height: box?.height || 0,
+        })
+      }
     }
-  }, [onActive, item.active])
 
-  return (
-    <li
-      ref={activeLIRef}
-      className={clsx('list-none p-0', {
-        'pl-[16px]': depth >= 0,
-      })}
-    >
-      <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,
+    React.useImperativeHandle(ref, () => ({
+      setActiveMarkerPosition,
+    }))
+
+    return (
+      <li
+        ref={activeLIRef}
+        className={clsx('list-none p-0', {
+          'pl-[16px]': depth >= 0,
         })}
-        href={item.href}
       >
-        {depth >= 0 ? (
-          <div
-            className={clsx(
-              'absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden',
-              {
-                'group-hover:block bg-gray-300': !item.active && collapsible,
-              },
-            )}
-            style={{
-              left: `-${18.5 + depth * 8}px`,
-            }}
-          />
-        ) : null}
-        {item.label}
-      </LinkComponent>
-    </li>
-  )
-}
+        <LinkComponent
+          className={clsx('group relative inline-block pl-[24px]', {
+            'text-indigo-500': active,
+            'py-[8px] text-[16px] leading-[24px]': depth < 0,
+            'py-[12px] leading-[20px] text-[14px]': depth >= 0,
+          })}
+          href={item.href}
+        >
+          {depth >= 0 ? (
+            <div
+              className={clsx(
+                'absolute w-[4px] z-10 top-[4px] bottom-[4px] rounded-full hidden',
+                {
+                  'group-hover:block bg-gray-300': !active && collapsible,
+                },
+              )}
+              style={{
+                left: `-${18.5 + depth * 8}px`,
+              }}
+            />
+          ) : null}
+          {item.label}
+        </LinkComponent>
+      </li>
+    )
+  },
+)

package/dist/DocMenu.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu';
-import { LinkComponentType } from './_DocLink';
+import type { LinkComponentType } from './_DocLink';
 export type NavItem = NavGroup | NavItemLink;
 export interface DocMenuProps extends React.HTMLAttributes<HTMLUListElement> {
     items: NavItem[];
+    activePath?: string;
     collapsible?: boolean;
     LinkComponent?: LinkComponentType;
 }

package/dist/DocMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocMenu.d.ts","sourceRoot":"./","sources":["DocMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,EAAW,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAIvD,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAA;AAE5C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC1E,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA6B1C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"DocMenu.d.ts","sourceRoot":"./","sources":["DocMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAGnD,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAA;AAE5C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC1E,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA+C1C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/_DocGroup.d.ts

@@ -1,13 +1,39 @@
 import * as React from 'react';
-import { NavGroup } from '@cypress-design/constants-docmenu';
-import { LinkComponentType } from './_DocLink';
+import { type NavGroup, type NavItemLink } from '@cypress-design/constants-docmenu';
+import { type LinkComponentType } from './_DocLink';
 export interface DocGroupProps {
-    index: number;
     group: NavGroup;
+    activePath: string;
     collapsible: boolean;
+    onActivePosition: (opts: {
+        top: number;
+        height: number;
+    }) => void;
+    updateMarkerPosition?: () => void;
     depth?: number;
-    setHeight?: (height: number) => void;
     LinkComponent?: LinkComponentType;
+    hideMarker: () => void;
 }
-export declare const DocGroup: React.FC<DocGroupProps>;
+export interface DocGroupForward {
+    reTriggerSetActiveGroup: () => void;
+}
+export declare const DocGroup: React.ForwardRefExoticComponent<DocGroupProps & React.RefAttributes<DocGroupForward>>;
+export interface DocGroupElementsProps extends React.HTMLAttributes<HTMLUListElement> {
+    items: (NavGroup | NavItemLink)[];
+    activePath: string;
+    collapsible: boolean;
+    onActivePosition: (opts: {
+        top: number;
+        height: number;
+    }) => void;
+    updateMarkerPosition?: () => void;
+    depth: number;
+    LinkComponent: LinkComponentType;
+    hideMarker: () => void;
+    className: string | undefined;
+}
+export interface DocGroupElementsForward {
+    reTriggerSetActiveGroup: () => void;
+}
+export declare const DocGroupElements: React.ForwardRefExoticComponent<DocGroupElementsProps & React.RefAttributes<DocGroupElementsForward>>;
 //# sourceMappingURL=_DocGroup.d.ts.map

package/dist/_DocGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAW,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEvD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,QAAQ,CAAA;IACf,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4H5C,CAAA"}
+{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,WAAW,EAEjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,QAAQ,uFAmHpB,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,iBAAiB,CAAA;IAChC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,gBAAgB,uGAkG5B,CAAA"}

package/dist/_DocLink.d.ts

@@ -7,10 +7,17 @@ export type LinkComponentType = React.ElementType<{
 }>;
 export interface DocLinkProps {
     item: NavItemLink;
+    active: boolean;
     collapsible: boolean;
     depth?: number;
-    onActive?: (top: number) => void;
+    onActive?: (opts: {
+        top: number;
+        height: number;
+    }) => void;
     LinkComponent?: LinkComponentType;
 }
-export declare const DocLink: React.FC<DocLinkProps>;
+export interface DocLinkForward {
+    setActiveMarkerPosition: () => void;
+}
+export declare const DocLink: React.ForwardRefExoticComponent<DocLinkProps & React.RefAttributes<DocLinkForward>>;
 //# sourceMappingURL=_DocLink.d.ts.map

package/dist/_DocLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocLink.d.ts","sourceRoot":"./","sources":["_DocLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAC,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiD1C,CAAA"}
+{"version":3,"file":"_DocLink.d.ts","sourceRoot":"./","sources":["_DocLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAC,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC1D,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,OAAO,qFA0DnB,CAAA"}

package/dist/index.es.mjs

@@ -43,48 +43,11 @@ function __rest$1(s, e) {
     return t;
 }
 
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    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, _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
-    React.useEffect(function () {
-        var _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(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,
-            }), href: item.href },
-            depth >= 0 ? (React.createElement("div", { className: clsx('absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden', {
-                    'group-hover:block bg-gray-300': !item.active && collapsible,
-                }), style: {
-                    left: "-".concat(18.5 + depth * 8, "px"),
-                } })) : null,
-            item.label)));
-};
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -191,51 +154,105 @@ var IconChevronDownSmall = function (props) { return React.createElement('svg',
 /* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
 
 const classes = {
-    button: 'flex leading-[24px] py-[10px] items-center relative w-full',
+    button: 'flex leading-[24px] py-[10px] items-center relative w-full text-start',
     topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',
     leafButton: 'leading-[20px] text-[14px] pl-[40px]',
 };
 
-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, 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 () {
-        // 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);
+var DocLink = React.forwardRef(function (_a, ref) {
+    var item = _a.item, active = _a.active, 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
+    React.useEffect(setActiveMarkerPosition, [onActive, active]);
+    function setActiveMarkerPosition() {
+        var _a;
+        if (active) {
+            var box = (_a = activeLIRef === null || activeLIRef === void 0 ? void 0 : activeLIRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            onActive === null || onActive === void 0 ? void 0 : onActive({
+                top: (box === null || box === void 0 ? void 0 : box.top) || 0,
+                height: (box === null || box === void 0 ? void 0 : box.height) || 0,
+            });
         }
-    }, [itemsHeights, group.items]);
+    }
+    React.useImperativeHandle(ref, function () { return ({
+        setActiveMarkerPosition: setActiveMarkerPosition,
+    }); });
+    return (React.createElement("li", { ref: activeLIRef, className: clsx('list-none p-0', {
+            'pl-[16px]': depth >= 0,
+        }) },
+        React.createElement(LinkComponent, { className: clsx('group relative inline-block pl-[24px]', {
+                'text-indigo-500': active,
+                'py-[8px] text-[16px] leading-[24px]': depth < 0,
+                'py-[12px] leading-[20px] text-[14px]': depth >= 0,
+            }), href: item.href },
+            depth >= 0 ? (React.createElement("div", { className: clsx('absolute w-[4px] z-10 top-[4px] bottom-[4px] rounded-full hidden', {
+                    'group-hover:block bg-gray-300': !active && collapsible,
+                }), style: {
+                    left: "-".concat(18.5 + depth * 8, "px"),
+                } })) : null,
+            item.label)));
+});
+
+var DocGroup = React.forwardRef(function (_a, ref) {
+    var _b;
+    var group = _a.group, activePath = _a.activePath, collapsible = _a.collapsible, _c = _a.depth, depth = _c === void 0 ? 0 : _c, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d, hideMarker = _a.hideMarker;
+    var _e = React.useState(group.collapsed !== true), open = _e[0], setOpen = _e[1];
+    var $groupElements = React.useRef(null);
     function toggleMenu(open) {
         if (!collapsible)
             return;
         setOpen(open);
     }
-    var onSetHeightCallback = React.useCallback(function (height) {
-        setItemsHeights(function (prev) {
-            var newHeights = __spreadArray([], prev, true);
-            newHeights[index] = height;
-            return newHeights;
+    var hasActiveItemRecursively = React.useCallback(function (items) {
+        if (items === void 0) { items = group.items; }
+        return items.some(function (item) {
+            if ('items' in item) {
+                return hasActiveItemRecursively(item.items);
+            }
+            return item.href === activePath;
         });
-    }, [setItemsHeights, index]);
+    }, [group.items, activePath]);
     var Head = collapsible ? 'button' : group.href ? 'a' : 'div';
+    var setActivePosition = React.useCallback(function (_a) {
+        var top = _a.top, height = _a.height;
+        if (open) {
+            onActivePosition({ top: top, height: height });
+        }
+    }, [onActivePosition, open]);
+    function reTriggerSetActiveGroup() {
+        var _a;
+        (_a = $groupElements.current) === null || _a === void 0 ? void 0 : _a.reTriggerSetActiveGroup();
+    }
+    React.useEffect(function () {
+        if (hasActiveItemRecursively()) {
+            if (open) {
+                reTriggerSetActiveGroup();
+            }
+            else {
+                hideMarker();
+            }
+        }
+        else {
+            updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+        }
+    }, [open, updateMarkerPosition, hideMarker, hasActiveItemRecursively]);
+    React.useImperativeHandle(ref, function () { return ({
+        reTriggerSetActiveGroup: reTriggerSetActiveGroup,
+    }); });
+    var onUpdateMarkerPosition = React.useCallback(function () {
+        if (hasActiveItemRecursively()) {
+            reTriggerSetActiveGroup();
+        }
+        else {
+            updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+        }
+    }, [hasActiveItemRecursively, updateMarkerPosition]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Head, { onClick: function () { return toggleMenu(!open); }, href: group.href, className: clsx(classes.button, (_b = {
-                    'text-indigo-500': group.active
-                },
+        React.createElement(Head, { onClick: function () { return toggleMenu(!open); }, href: group.href, className: clsx(classes.button, (_b = {},
                 _b[classes.topButton] = depth === 0,
                 _b[classes.leafButton] = depth,
+                _b['text-indigo-500'] = activePath === group.href,
                 _b)) },
             collapsible ? (React.createElement(IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx('absolute transform transition-transform left-0', {
                     'rotate-0': open,
@@ -243,31 +260,75 @@ var DocGroup = function (_a) {
                     'ml-[16px]': depth,
                 }) })) : null,
             group.label),
-        collapsible &&
-            depth >= 0 &&
-            open &&
-            group.items.some(function (item) { return 'href' in item && item.active; }) ? (React.createElement("div", { className: "absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px]", style: {
-                top: "".concat(activeTop, "px"),
-                left: "".concat(depth === 0 ? 0.5 : -(depth * 8) - 0.5, "px"),
-            } })) : null,
-        React.createElement("ul", { className: clsx('ml-[8px] list-none p-0', {
-                'border-l border-gray-100': depth === 0 && collapsible,
-                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: 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, _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) {
+        React.createElement(DocGroupElements, { ref: $groupElements, className: !open ? 'hidden' : undefined, items: group.items, activePath: activePath, collapsible: collapsible, depth: depth, onActivePosition: setActivePosition, updateMarkerPosition: onUpdateMarkerPosition, LinkComponent: LinkComponent, hideMarker: hideMarker })));
+});
+var DocGroupElements = React.forwardRef(function (_a, ref) {
+    var items = _a.items, activePath = _a.activePath, collapsible = _a.collapsible, _b = _a.depth, depth = _b === void 0 ? 0 : _b, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, LinkComponent = _a.LinkComponent, hideMarker = _a.hideMarker, className = _a.className, rest = __rest$1(_a, ["items", "activePath", "collapsible", "depth", "onActivePosition", "updateMarkerPosition", "LinkComponent", "hideMarker", "className"]);
+    var $groups = React.useRef([]);
+    var $items = React.useRef([]);
+    var hasActiveItemRecursively = React.useCallback(function (localItems) {
+        if (localItems === void 0) { localItems = items; }
+        return localItems.some(function (item) {
+            if ('items' in item) {
+                return hasActiveItemRecursively(item.items);
+            }
+            return item.href === activePath;
+        });
+    }, [items, activePath]);
+    function reTriggerSetActiveGroup() {
+        $groups.current.forEach(function (group) {
+            group === null || group === void 0 ? void 0 : group.reTriggerSetActiveGroup();
+        });
+        $items.current.forEach(function (item) {
+            item === null || item === void 0 ? void 0 : item.setActiveMarkerPosition();
+        });
+    }
+    React.useImperativeHandle(ref, function () { return ({
+        reTriggerSetActiveGroup: reTriggerSetActiveGroup,
+    }); });
+    var onUpdateMarkerPosition = React.useCallback(function () {
+        if (hasActiveItemRecursively()) {
+            reTriggerSetActiveGroup();
+        }
+        else {
+            updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+        }
+    }, [hasActiveItemRecursively, updateMarkerPosition]);
+    return (React.createElement("ul", __assign$1({}, rest, { className: clsx('list-none p-0', className, {
+            'border-l border-gray-100': depth === 0 && collapsible,
+            'ml-[8px]': depth >= 0,
+        }) }), items.map(function (item, index) {
         return 'items' in item ? (React.createElement("li", { key: index, className: "relative list-none p-0" },
-            React.createElement(DocGroup, { index: index, group: item, collapsible: collapsible, LinkComponent: LinkComponent }))) : (React.createElement(DocLink, { key: index, item: item, collapsible: collapsible, LinkComponent: LinkComponent }));
+            React.createElement(DocGroup, { ref: function (el) {
+                    $groups.current[index] = el;
+                }, group: item, activePath: activePath, depth: depth + 1, collapsible: collapsible, LinkComponent: LinkComponent, hideMarker: hideMarker, onActivePosition: onActivePosition, updateMarkerPosition: onUpdateMarkerPosition }))) : (React.createElement(DocLink, { ref: function (el) {
+                $items.current[index] = el;
+            }, key: index, item: item, active: item.href === activePath, collapsible: collapsible, depth: depth, onActive: onActivePosition, LinkComponent: LinkComponent }));
     })));
+});
+
+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"]);
+    var _e = React.useState(0), activeTop = _e[0], setActiveTop = _e[1];
+    var _f = React.useState(36), activeHeight = _f[0], setActiveHeight = _f[1];
+    var _g = React.useState(false), showMarker = _g[0], setShowMarker = _g[1];
+    var container = React.useRef(null);
+    var setActivePosition = React.useCallback(function (opts) {
+        var _a;
+        var containerTop = ((_a = container.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) || 0;
+        setShowMarker(true);
+        setActiveTop(opts.top - containerTop);
+        setActiveHeight(opts.height);
+    }, []);
+    return (React.createElement("div", { ref: container, className: "relative" },
+        showMarker && collapsible ? (React.createElement("div", { className: "absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]", style: {
+                top: "".concat(activeTop + 4, "px"),
+                height: "".concat(activeHeight - 8, "px"),
+            } })) : null,
+        React.createElement(DocGroupElements, __assign$1({}, rest, { className: !open ? 'hidden' : undefined, items: items, activePath: activePath, collapsible: collapsible, depth: -1, onActivePosition: setActivePosition, LinkComponent: LinkComponent, hideMarker: function () { return setShowMarker(false); } }))));
 };
 
 export { DocMenu as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="list-none p-0 relative pl-[16px] inline-block pl-[24px] text-indigo-500 py-[8px] text-[16px] leading-[24px] py-[12px] leading-[20px] text-[14px] absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden group-hover:block bg-gray-300 transform transition-transform left-0 rotate-0 -rotate-90 ml-[16px] h-[36px] bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px] ml-[8px] border-l border-gray-100 flex py-[10px] items-center w-full font-medium pl-[40px]"> */
+/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] hidden text-indigo-500 transform transition-transform left-0 rotate-0 -rotate-90 ml-[16px] list-none p-0 border-l border-gray-100 ml-[8px] pl-[16px] inline-block pl-[24px] py-[8px] text-[16px] leading-[24px] py-[12px] leading-[20px] text-[14px] z-10 top-[4px] bottom-[4px] group-hover:block bg-gray-300 flex py-[10px] items-center w-full text-start font-medium pl-[40px]"> */