@cypress-design/react-docmenu 0.3.1 → 0.4.0

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 33.9s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 11.9s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @cypress-design/react-docmenu
 
+## 0.4.0
+
+### Minor Changes
+
+- [#350](https://github.com/cypress-io/cypress-design/pull/350) [`abc414d`](https://github.com/cypress-io/cypress-design/commit/abc414da149eb6fe0cfa61497a0aa8630d8d8d6e) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: allow usage of a custom link component
+
+### Patch Changes
+
+- [#347](https://github.com/cypress-io/cypress-design/pull/347) [`de67952`](https://github.com/cypress-io/cypress-design/commit/de679522ea2269854ec8ac8de925fcf930ce96e4) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: docmenu docusaurus style items structure
+
+- Updated dependencies [[`de67952`](https://github.com/cypress-io/cypress-design/commit/de679522ea2269854ec8ac8de925fcf930ce96e4)]:
+  - @cypress-design/constants-docmenu@0.1.1
+
 ## 0.3.1
 
 ### Patch Changes

package/DocMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
-import { DocLink } from './_DocLink'
+import { DocLink, LinkComponentType } from './_DocLink'
 import { DocGroup } from './_DocGroup'
 import clsx from 'clsx'
 
@@ -9,11 +9,13 @@ export type NavItem = NavGroup | NavItemLink
 export interface DocMenuProps extends React.HTMLAttributes<HTMLUListElement> {
   items: NavItem[]
   collapsible?: boolean
+  LinkComponent?: LinkComponentType
 }
 
 export const DocMenu: React.FC<DocMenuProps> = ({
   items,
   collapsible = true,
+  LinkComponent = 'a',
   ...rest
 }) => {
   return (
@@ -21,11 +23,21 @@ export const DocMenu: React.FC<DocMenuProps> = ({
       {items.map((item, index) =>
         'items' in item ? (
           <li key={index} className="relative list-none p-0">
-            <DocGroup group={item} collapsible={collapsible} />
+            <DocGroup
+              index={index}
+              group={item}
+              collapsible={collapsible}
+              LinkComponent={LinkComponent}
+            />
           </li>
         ) : (
-          <DocLink key={index} item={item} collapsible={collapsible} />
-        )
+          <DocLink
+            key={index}
+            item={item}
+            collapsible={collapsible}
+            LinkComponent={LinkComponent}
+          />
+        ),
       )}
     </ul>
   )

package/DocMenuReact.cy.tsx

@@ -2,13 +2,58 @@
 
 import * as React from 'react'
 import { mount } from 'cypress/react18'
-import DocMenuStory from './DocMenu.rootstory'
+import DocMenu from './index'
 import assertions from '../assertions'
 import { NavGroup, NavItemLink } from '../constants'
 
 describe('<DocMenu/>', () => {
+  it('works with 1 level of items', () => {
+    mount(<DocMenu items={[{ href: '/foo', label: 'Foo' }]} />)
+  })
+
+  it('works with 2 level of items', () => {
+    mount(
+      <DocMenu
+        items={[{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }]}
+      />,
+    )
+  })
+
+  it('works with 3 level of items', () => {
+    mount(
+      <DocMenu
+        items={[
+          {
+            label: 'Baaaaaaz',
+            items: [{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }],
+          },
+        ]}
+      />,
+    )
+  })
+
+  it('renders the custom link components', () => {
+    mount(
+      <DocMenu
+        items={[
+          {
+            label: 'Baaaaaaz',
+            items: [{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }],
+          },
+        ]}
+        LinkComponent={({ href, className, children }) => (
+          <div className={className}>
+            {children} + href: {href}
+          </div>
+        )}
+      />,
+    )
+    cy.findByText('Bar').click()
+    cy.findByText('Foo + href: /foo', { selector: 'div' }).should('be.visible')
+  })
+
   function mountStory(items: (NavItemLink | NavGroup)[] = []) {
-    mount(<DocMenuStory items={items} />)
+    mount(<DocMenu items={items} />)
   }
   assertions(mountStory)
 })

package/ReadMe.md

@@ -18,62 +18,96 @@ yarn add @cypress-design/react-docmenu
 import DocMenu from '@cypress-design/react-docmenu'
 ```
 
+### Default usage
+
+```tsx live
+export default () => (
+  <DocMenu
+    items={[
+      {
+        label: 'Get Started',
+        href: '#',
+      },
+      {
+        label: 'Overview',
+        items: [
+          {
+            label: 'Overview Item 1',
+            href: '#',
+          },
+          {
+            label: 'Overview Item 2',
+            href: '#',
+            active: true,
+          },
+        ],
+      },
+      {
+        label: 'Getting Started',
+        items: [
+          {
+            label: 'Item 1',
+            href: '#',
+          },
+          {
+            label: 'Group',
+            items: [
+              {
+                label: 'Item 1',
+                href: '#',
+              },
+              {
+                label: 'Item 2',
+                href: '#',
+              },
+              {
+                label: 'Item 3',
+                href: '#',
+              },
+              {
+                label: 'Item 4',
+                href: '#',
+              },
+            ],
+          },
+          {
+            label: 'Item 5',
+            href: '#',
+            active: true,
+          },
+        ],
+      },
+    ]}
+  />
+)
+```
+
+### With a custom link
+
 ```tsx live
-<DocMenu
-  items={[
-    {
-      text: 'Get Started',
-      href: '#',
-    },
-    {
-      text: 'Overview',
-      items: [
-        {
-          text: 'Overview Item 1',
-          href: '#',
-        },
-        {
-          text: 'Overview Item 2',
-          href: '#',
-          active: true,
-        },
-      ],
-    },
-    {
-      text: 'Getting Started',
-      items: [
-        {
-          text: 'Item 1',
-          href: '#',
-        },
-        {
-          text: 'Group',
-          items: [
-            {
-              text: 'Item 1',
-              href: '#',
-            },
-            {
-              text: 'Item 2',
-              href: '#',
-            },
-            {
-              text: 'Item 3',
-              href: '#',
-            },
-            {
-              text: 'Item 4',
-              href: '#',
-            },
-          ],
-        },
-        {
-          text: 'Item 5',
-          href: '#',
-          active: true,
-        },
-      ],
-    },
-  ]}
-/>
+const CustomLink = ({ href, children, className }) => {
+  return (
+    <a
+      href={href}
+      className={className}
+      onClick={(evt) => {
+        console.log('The link was clicked.', { target: evt.target })
+      }}
+    >
+      {children} 🔗
+    </a>
+  )
+}
+
+export default () => (
+  <DocMenu
+    LinkComponent={CustomLink}
+    items={[
+      {
+        label: 'Install',
+        href: '#with-a-custom-link',
+      },
+    ]}
+  />
+)
 ```

package/_DocGroup.tsx

@@ -2,13 +2,15 @@ import * as React from 'react'
 import { IconChevronDownSmall } from '@cypress-design/react-icon'
 import clsx from 'clsx'
 import { NavGroup, classes } from '@cypress-design/constants-docmenu'
-import { DocLink } from './_DocLink'
+import { DocLink, LinkComponentType } from './_DocLink'
 
 export interface DocGroupProps {
+  index: number
   group: NavGroup
   collapsible: boolean
   depth?: number
   setHeight?: (height: number) => void
+  LinkComponent?: LinkComponentType
 }
 
 export const DocGroup: React.FC<DocGroupProps> = ({
@@ -16,6 +18,8 @@ export const DocGroup: React.FC<DocGroupProps> = ({
   collapsible,
   depth = 0,
   setHeight,
+  index,
+  LinkComponent = 'a',
 }) => {
   const [open, setOpen] = React.useState(depth === 0)
   const [itemsHeights, setItemsHeights] = React.useState<number[]>(
@@ -23,8 +27,16 @@ export const DocGroup: React.FC<DocGroupProps> = ({
   )
 
   React.useEffect(() => {
-    setHeight?.(open ? itemsHeights.reduce((a, b) => a + b, 1) : 1)
-  }, [itemsHeights, open, setHeight])
+    // if this group contains other groups, ignore this effect
+    // it will be triggered by a leaf and trickle up
+    if (group.items.some((item) => 'items' in item)) {
+      return
+    }
+
+    const newHeight = open ? itemsHeights.reduce((a, b) => a + b, 1) : 1
+
+    setHeight?.(newHeight)
+  }, [itemsHeights, open, setHeight, group.items, group.label])
 
   const [activeTop, setActiveTop] = React.useState(0)
 
@@ -44,13 +56,16 @@ export const DocGroup: React.FC<DocGroupProps> = ({
     setOpen(open)
   }
 
-  function onSetHeight(index: number, height: number) {
-    setItemsHeights((prev) => {
-      const newHeights = [...prev]
-      newHeights[index] = height
-      return newHeights
-    })
-  }
+  const onSetHeightCallback = React.useCallback(
+    (height: number) => {
+      setItemsHeights((prev) => {
+        const newHeights = [...prev]
+        newHeights[index] = height
+        return newHeights
+      })
+    },
+    [setItemsHeights, index],
+  )
 
   const Head = collapsible ? 'button' : group.href ? 'a' : 'div'
 
@@ -76,7 +91,7 @@ export const DocGroup: React.FC<DocGroupProps> = ({
             })}
           />
         ) : null}
-        {group.text}
+        {group.label}
       </Head>
       {collapsible &&
       depth >= 0 &&
@@ -102,8 +117,10 @@ export const DocGroup: React.FC<DocGroupProps> = ({
               <DocGroup
                 group={item}
                 depth={depth + 1}
-                setHeight={(height) => onSetHeight(index, height)}
+                setHeight={onSetHeightCallback}
+                index={index}
                 collapsible={collapsible}
+                LinkComponent={LinkComponent}
               />
             </li>
           ) : (
@@ -113,6 +130,7 @@ export const DocGroup: React.FC<DocGroupProps> = ({
               collapsible={collapsible}
               depth={depth}
               onActive={(top) => setActiveTop(top)}
+              LinkComponent={LinkComponent}
             />
           ),
         )}

package/_DocLink.tsx

@@ -2,11 +2,18 @@ import * as React from 'react'
 import clsx from 'clsx'
 import { NavItemLink } from '@cypress-design/constants-docmenu'
 
+export type LinkComponentType = React.ElementType<{
+  href: string
+  className?: string
+  children?: React.ReactNode
+}>
+
 export interface DocLinkProps {
   item: NavItemLink
   collapsible: boolean
   depth?: number
   onActive?: (top: number) => void
+  LinkComponent?: LinkComponentType
 }
 
 export const DocLink: React.FC<DocLinkProps> = ({
@@ -14,6 +21,7 @@ export const DocLink: React.FC<DocLinkProps> = ({
   collapsible,
   depth = -1,
   onActive,
+  LinkComponent = 'a',
 }) => {
   const activeLIRef = React.useRef<HTMLLIElement>(null)
 
@@ -23,9 +31,7 @@ export const DocLink: React.FC<DocLinkProps> = ({
     if (item.active) {
       onActive?.(activeLIRef?.current?.offsetTop || 0)
     }
-    // supposed to happen only on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [onActive, item.active])
 
   return (
     <li
@@ -34,7 +40,7 @@ export const DocLink: React.FC<DocLinkProps> = ({
         'pl-[16px]': depth >= 0,
       })}
     >
-      <a
+      <LinkComponent
         className={clsx('group relative inline-block pl-[24px]', {
           'text-indigo-500': item.active,
           'py-[8px] text-[16px] leading-[24px]': depth < 0,
@@ -55,8 +61,8 @@ export const DocLink: React.FC<DocLinkProps> = ({
             }}
           />
         ) : null}
-        {item.text}
-      </a>
+        {item.label}
+      </LinkComponent>
     </li>
   )
 }

package/dist/DocMenu.d.ts

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

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;AAKzE,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;CACtB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkB1C,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,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"}

package/dist/_DocGroup.d.ts

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { NavGroup } from '@cypress-design/constants-docmenu';
+import { LinkComponentType } from './_DocLink';
 export interface DocGroupProps {
+    index: number;
     group: NavGroup;
     collapsible: boolean;
     depth?: number;
     setHeight?: (height: number) => void;
+    LinkComponent?: LinkComponentType;
 }
 export declare const DocGroup: React.FC<DocGroupProps>;
 //# 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;AAGrE,MAAM,WAAW,aAAa;IAC5B,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;CACrC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4G5C,CAAA"}
+{"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"}

package/dist/_DocLink.d.ts

@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { NavItemLink } from '@cypress-design/constants-docmenu';
+export type LinkComponentType = React.ElementType<{
+    href: string;
+    className?: string;
+    children?: React.ReactNode;
+}>;
 export interface DocLinkProps {
     item: NavItemLink;
     collapsible: boolean;
     depth?: number;
     onActive?: (top: number) => void;
+    LinkComponent?: LinkComponentType;
 }
 export declare const DocLink: React.FC<DocLinkProps>;
 //# 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,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;CACjC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkD1C,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,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"}

package/dist/index.es.mjs

@@ -59,7 +59,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 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
@@ -68,13 +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);
         }
-        // supposed to happen only on mount
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [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,
@@ -84,7 +82,7 @@ var DocLink = function (_a) {
                 }), style: {
                     left: "-".concat(18.5 + depth * 8, "px"),
                 } })) : null,
-            item.text)));
+            item.label)));
 };
 
 /******************************************************************************
@@ -200,13 +198,19 @@ 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, setHeight]);
-    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) {
@@ -218,13 +222,13 @@ var DocGroup = function (_a) {
             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 = {
@@ -238,7 +242,7 @@ var DocGroup = function (_a) {
                     '-rotate-90': !open,
                     'ml-[16px]': depth,
                 }) })) : null,
-            group.text),
+            group.label),
         collapsible &&
             depth >= 0 &&
             open &&
@@ -251,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 }));
     })));
 };