@cypress-design/react-docmenu 0.5.1 → 0.5.3

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 12.8s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 12.9s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cypress-design/react-docmenu
 
+## 0.5.3
+
+### Patch Changes
+
+- [`9f750c5`](https://github.com/cypress-io/cypress-design/commit/9f750c57722351c43d8dda136796a1ea98c203c8) Thanks [@elevatebart](https://github.com/elevatebart)! - adjust colors according to designs and refactor react side to use context
+
+## 0.5.2
+
+### Patch Changes
+
+- [`5927136`](https://github.com/cypress-io/cypress-design/commit/59271366a460cbdc411a6bec75feb663d3991029) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: make sure when dynamic marker reappear, it does not bounce up
+
 ## 0.5.1
 
 ### Patch Changes

package/DocMenu.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
 import type { LinkComponentType } from './_DocLink'
 import { DocGroupElements } from './_DocGroup'
-import { MarkerIsMovingContext } from './markerIsMoving'
 
 export type NavItem = NavGroup | NavItemLink
 
@@ -23,7 +22,8 @@ export const DocMenu: React.FC<DocMenuProps> = ({
   const [activeTop, setActiveTop] = React.useState(0)
   const [activeHeight, setActiveHeight] = React.useState(36)
   const [showMarker, setShowMarker] = React.useState(false)
-  const [markerIsMoving, setMarkerIsMoving] = React.useState(false)
+  const [markerIsMoving, localSetMarkerIsMoving] = React.useState(false)
+  const [hasCSSTransition, setHasCSSTransition] = React.useState(true)
 
   const container = React.useRef<HTMLDivElement>(null)
 
@@ -37,34 +37,51 @@ export const DocMenu: React.FC<DocMenuProps> = ({
     [],
   )
 
-  const setShowMarkerFalse = React.useCallback(() => setShowMarker(false), [])
+  const hideMarker = React.useCallback(() => setShowMarker(false), [])
+  const setMarkerIsMoving = React.useCallback(
+    (val: boolean) => {
+      localSetMarkerIsMoving(val)
+      if (!val) return
+      // make sure the animation does not fire "after"
+      // the marker has reappeared at its right place
+      setHasCSSTransition(false)
+      setTimeout(() => {
+        setHasCSSTransition(true)
+      }, 300)
+    },
+    [localSetMarkerIsMoving],
+  )
 
   return (
-    <MarkerIsMovingContext.Provider
-      value={{ markerIsMoving, setMarkerIsMoving }}
-    >
-      <div ref={container} className="relative">
-        {showMarker && !markerIsMoving && collapsible ? (
-          <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: `${activeTop}px`,
-              height: `${activeHeight - 8}px`,
-            }}
-          />
-        ) : null}
-        <DocGroupElements
-          {...rest}
-          items={items}
-          activePath={activePath}
-          collapsible={collapsible}
-          depth={-1}
-          onActivePosition={setActivePosition}
-          LinkComponent={LinkComponent}
-          hideMarker={setShowMarkerFalse}
+    <div ref={container} className="relative">
+      {showMarker && !markerIsMoving && collapsible ? (
+        <div
+          data-cy="doc-menu-active-marker"
+          className="absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 dark:bg-indigo-400 ml-[6.5px] mt-[4px]"
+          style={{
+            top: `${activeTop}px`,
+            height: `${activeHeight - 8}px`,
+            transition: hasCSSTransition
+              ? 'height .3s ease-in-out, top .3s ease-in-out'
+              : 'none',
+          }}
         />
-      </div>
-    </MarkerIsMovingContext.Provider>
+      ) : null}
+      <DocGroupElements
+        {...rest}
+        items={items}
+        depth={-1}
+        markerIsMoving={markerIsMoving}
+        onActivePosition={setActivePosition}
+        LinkComponent={LinkComponent}
+        context={{
+          setMarkerIsMoving,
+          activePath,
+          collapsible,
+          hideMarker,
+        }}
+      />
+    </div>
   )
 }
 

package/DocMenuReact.cy.tsx

@@ -39,13 +39,13 @@ describe('<DocMenu/>', () => {
 
   it(
     'wraps items correctly',
-    { viewportHeight: 950, viewportWidth: 350 },
+    { viewportHeight: 950, viewportWidth: 550 },
     () => {
       const Sut = () => {
         const [activeHref, setActiveHref] = React.useState<string | undefined>()
 
         return (
-          <div className="w-[200px] mt-[60px] absolute">
+          <div className="w-[400px] mt-[60px] mx-[24px] absolute">
             <DocMenu
               activePath={activeHref}
               LinkComponent={({ href, className, children, style }) => (
@@ -133,10 +133,12 @@ describe('<DocMenu/>', () => {
       mount(<Sut />)
 
       cy.findByText('Bar').click()
-      cy.findByText('Code').click()
+      cy.findByText('Code').click().click()
       cy.findByText(
         'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos',
       ).click()
+      cy.findByText('Code').click()
+      cy.get('[data-cy=doc-menu-active-marker]').should('not.exist')
     },
   )
 

package/_DocGroup.tsx

@@ -8,63 +8,74 @@ import {
 } from '@cypress-design/constants-docmenu'
 import {
   DocLink,
+  type Context,
   type DocLinkForward,
   type LinkComponentType,
 } from './_DocLink'
-import { MarkerIsMovingContext } from './markerIsMoving'
 
 export interface DocGroupProps {
   group: NavGroup
-  activePath: string
-  collapsible: boolean
+  context: Context
   onActivePosition: (opts: { top: number; height: number }) => void
-  updateMarkerPosition?: () => void
+  updateMarkerPosition: () => void
+  markerIsMoving: boolean
   depth?: number
   LinkComponent?: LinkComponentType
-  hideMarker: () => void
 }
 
 export interface DocGroupForward {
   reTriggerSetActiveGroup: () => void
 }
 
+const hasActiveItemRecursively = (
+  items: (NavGroup | NavItemLink)[],
+  localActivePath: string,
+): boolean => {
+  return items.some((item) => {
+    if ('items' in item) {
+      return hasActiveItemRecursively(item.items, localActivePath)
+    }
+    return item.href === localActivePath
+  })
+}
+
 export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
   (
     {
       group,
-      activePath,
-      collapsible,
       depth = 0,
       onActivePosition,
+      markerIsMoving,
+      context,
       updateMarkerPosition,
       LinkComponent = 'a',
-      hideMarker,
     },
     ref,
   ) => {
-    const [open, setOpen] = React.useState(group.collapsed !== true)
+    const { setMarkerIsMoving, activePath, collapsible, hideMarker } = context
+
+    const hasActiveItemRecursivelyMemo = React.useMemo(() => {
+      return hasActiveItemRecursively(group.items, activePath)
+    }, [group.items, activePath])
+
+    const [open, setOpen] = React.useState(!group.collapsed)
+    const [markerIsMovingTimeout, setMarkerIsMovingTimeout] =
+      React.useState<NodeJS.Timeout>()
     const $groupElements = React.useRef<DocGroupElementsForward>(null)
-    const $listWrapper = React.useRef<HTMLDivElement>(null)
 
-    function toggleMenu(open: boolean) {
-      if (!collapsible) return
-      setOpen(open)
-      hideShowAbsoluteMarker()
-      readjustMarkerPosition()
+    const toggleMenu = (localOpen: boolean) => {
+      if (!collapsible || markerIsMoving) return
+      setMarkerIsMoving(true)
+      // on browsers than do not support transitionend event
+      // we need to set a timeout to remove the markerIsMoving
+      const timeout = setTimeout(function () {
+        setMarkerIsMoving(false)
+      }, 350)
+      setMarkerIsMovingTimeout(timeout)
+      setOpen(localOpen)
+      readjustMarkerPosition(localOpen)
     }
 
-    const hasActiveItemRecursively = React.useCallback(
-      (items = group.items): boolean => {
-        return items.some((item) => {
-          if ('items' in item) {
-            return hasActiveItemRecursively(item.items)
-          }
-          return item.href === activePath
-        })
-      },
-      [group.items, activePath],
-    )
-
     const Head = collapsible ? 'button' : group.href ? 'a' : 'div'
 
     const setActivePosition = React.useCallback(
@@ -76,8 +87,6 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
       [onActivePosition, open],
     )
 
-    const { setMarkerIsMoving } = React.useContext(MarkerIsMovingContext)
-
     function reTriggerSetActiveGroupParent() {
       $groupElements.current?.reTriggerSetActiveGroup()
     }
@@ -87,35 +96,25 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
      * We replace the absolute marker by one in the link. After the transition, the
      * marker is replaced by the absolute one again.
      */
-    function hideShowAbsoluteMarker() {
-      $listWrapper.current?.addEventListener(
-        'transitionstart',
-        () => {
-          setMarkerIsMoving(true)
-        },
-        { once: true },
-      )
-      $listWrapper.current?.addEventListener(
-        'transitionend',
-        () => {
-          if (open || !hasActiveItemRecursively()) {
-            updateMarkerPosition?.()
-          }
-          setMarkerIsMoving(false)
-        },
-        { once: true },
-      )
+    const restoreActiveMarkerAfterTransition = () => {
+      if (!markerIsMovingTimeout) {
+        clearTimeout(markerIsMovingTimeout)
+      }
+      if (open || !hasActiveItemRecursivelyMemo) {
+        updateMarkerPosition()
+      }
+      setMarkerIsMoving(false)
     }
 
-    function readjustMarkerPosition() {
-      if (hasActiveItemRecursively()) {
-        if (open) {
+    function readjustMarkerPosition(localOpen: boolean) {
+      if (hasActiveItemRecursivelyMemo) {
+        if (localOpen) {
           reTriggerSetActiveGroupParent()
         } else {
           hideMarker()
         }
       } else {
-        updateMarkerPosition?.()
+        updateMarkerPosition()
       }
     }
 
@@ -124,12 +123,12 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
     }))
 
     const onUpdateMarkerPosition = React.useCallback(() => {
-      if (hasActiveItemRecursively()) {
+      if (hasActiveItemRecursivelyMemo) {
         reTriggerSetActiveGroupParent()
       } else {
         updateMarkerPosition?.()
       }
-    }, [hasActiveItemRecursively, updateMarkerPosition])
+    }, [hasActiveItemRecursivelyMemo, updateMarkerPosition])
 
     return (
       <>
@@ -139,7 +138,11 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
           className={clsx(classes.button, {
             [classes.topButton]: depth === 0,
             [classes.leafButton]: depth,
-            'text-indigo-500': activePath === group.href,
+            'text-indigo-500 dark:text-indigo-400': activePath === group.href,
+            'text-gray-900 dark:text-gray-100':
+              hasActiveItemRecursivelyMemo && activePath !== group.href,
+            'text-gray-800 dark:text-gray-200':
+              !hasActiveItemRecursivelyMemo && activePath !== group.href,
           })}
         >
           {collapsible ? (
@@ -156,11 +159,17 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
           {group.label}
         </Head>
         <div
-          className={clsx('grid transition-all relative', {
-            'grid-rows-[0fr]': !open && collapsible,
-            'grid-rows-[1fr]': open || !collapsible,
-          })}
-          ref={$listWrapper}
+          className={clsx(
+            'relative',
+            collapsible
+              ? {
+                  'transition-all grid': true,
+                  'grid-rows-[0fr]': !open,
+                  'grid-rows-[1fr]': open,
+                }
+              : null,
+          )}
+          onTransitionEnd={restoreActiveMarkerAfterTransition}
         >
           {open && collapsible && depth === 0 ? (
             <div className={classes.openListBorderLeft} />
@@ -169,13 +178,12 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
             ref={$groupElements}
             className="overflow-hidden"
             items={group.items}
-            activePath={activePath}
-            collapsible={collapsible}
             depth={depth}
+            context={context}
+            markerIsMoving={markerIsMoving}
             onActivePosition={setActivePosition}
             updateMarkerPosition={onUpdateMarkerPosition}
             LinkComponent={LinkComponent}
-            hideMarker={hideMarker}
           />
         </div>
       </>
@@ -186,14 +194,13 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
 export interface DocGroupElementsProps
   extends React.HTMLAttributes<HTMLUListElement> {
   items: (NavGroup | NavItemLink)[]
-  activePath: string
-  collapsible: boolean
   onActivePosition: (opts: { top: number; height: number }) => void
+  markerIsMoving: boolean
   updateMarkerPosition?: () => void
   depth: number
   LinkComponent: LinkComponentType
-  hideMarker: () => void
   className?: string
+  context: Context
 }
 
 export interface DocGroupElementsForward {
@@ -207,14 +214,13 @@ export const DocGroupElements = React.forwardRef<
   (
     {
       items,
-      activePath,
-      collapsible,
       depth = 0,
       onActivePosition,
       updateMarkerPosition,
+      markerIsMoving,
       LinkComponent,
-      hideMarker,
       className,
+      context,
       ...rest
     },
     ref,
@@ -222,24 +228,13 @@ export const DocGroupElements = React.forwardRef<
     const $groups = React.useRef<DocGroupForward[]>([])
     const $items = React.useRef<DocLinkForward[]>([])
 
-    const hasActiveItemRecursively = React.useCallback(
-      (localItems = items): boolean => {
-        return localItems.some((item) => {
-          if ('items' in item) {
-            return hasActiveItemRecursively(item.items)
-          }
-          return item.href === activePath
-        })
-      },
-      [items, activePath],
-    )
-
     const reTriggerSetActiveGroup = React.useCallback(
       (index: number = 0) => {
         $items.current.forEach((item) => {
           item?.setActiveMarkerPosition()
         })
         // calculate the index of the calling group in the list of groups
+        // "index" is the index of the calling group in the list of items (groups and links)
         const indexGroup =
           index -
           // remove all the items that are not groups from the array and count them
@@ -259,15 +254,17 @@ export const DocGroupElements = React.forwardRef<
       reTriggerSetActiveGroup,
     }))
 
+    const { activePath, hideMarker } = context
+
     const onUpdateMarkerPosition = React.useCallback(
       (index: number) => {
-        if (hasActiveItemRecursively()) {
+        if (hasActiveItemRecursively(items, activePath)) {
           reTriggerSetActiveGroup(index)
         } else {
           updateMarkerPosition?.()
         }
       },
-      [hasActiveItemRecursively, updateMarkerPosition, reTriggerSetActiveGroup],
+      [updateMarkerPosition, reTriggerSetActiveGroup, items, activePath],
     )
 
     return (
@@ -280,11 +277,10 @@ export const DocGroupElements = React.forwardRef<
                   $groups.current[index] = el
                 }}
                 group={item}
-                activePath={activePath}
                 depth={depth + 1}
-                collapsible={collapsible}
                 LinkComponent={LinkComponent}
-                hideMarker={hideMarker}
+                markerIsMoving={markerIsMoving}
+                context={context}
                 onActivePosition={onActivePosition}
                 updateMarkerPosition={() => onUpdateMarkerPosition(index)}
               />
@@ -296,9 +292,9 @@ export const DocGroupElements = React.forwardRef<
               }}
               key={index}
               item={item}
-              active={item.href === activePath}
-              collapsible={collapsible}
               depth={depth}
+              markerIsMoving={markerIsMoving}
+              context={context}
               onActive={(opts) =>
                 depth < 0 ? hideMarker() : onActivePosition(opts)
               }

package/_DocLink.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react'
 import clsx from 'clsx'
 import { NavItemLink } from '@cypress-design/constants-docmenu'
-import { MarkerIsMovingContext } from './markerIsMoving'
+
+export interface Context {
+  setMarkerIsMoving: (markerIsMoving: boolean) => void
+  collapsible: boolean
+  activePath: string
+  hideMarker: () => void
+}
 
 export type LinkComponentType = React.ElementType<{
   href: string
@@ -12,11 +18,11 @@ export type LinkComponentType = React.ElementType<{
 
 export interface DocLinkProps {
   item: NavItemLink
-  active: boolean
-  collapsible: boolean
-  depth?: number
-  onActive?: (opts: { top: number; height: number }) => void
-  LinkComponent?: LinkComponentType
+  depth: number
+  markerIsMoving: boolean
+  context: Context
+  onActive: (opts: { top: number; height: number }) => void
+  LinkComponent: LinkComponentType
 }
 
 export interface DocLinkForward {
@@ -24,19 +30,18 @@ export interface DocLinkForward {
 }
 
 export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
-  (
-    { item, active, collapsible, depth = -1, onActive, LinkComponent = 'a' },
-    ref,
-  ) => {
+  ({ item, depth, markerIsMoving, context, onActive, LinkComponent }, ref) => {
     const activeLIRef = React.useRef<HTMLLIElement>(null)
 
-    const { markerIsMoving } = React.useContext(MarkerIsMovingContext)
+    const { collapsible, activePath } = context
+
+    const active = item.href === activePath
 
     const setActiveMarkerPosition = () => {
       if (active) {
         const box = activeLIRef?.current?.getBoundingClientRect()
 
-        onActive?.({
+        onActive({
           top: box?.top || 0,
           height: box?.height || 0,
         })
@@ -55,7 +60,7 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
       <li ref={activeLIRef} className="list-none p-0">
         <LinkComponent
           className={clsx('group relative block w-full pl-[24px]', {
-            'text-indigo-500': active,
+            '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,
@@ -72,7 +77,7 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
                 {
                   hidden: !markerIsMoving || !active,
                   'group-hover:block bg-gray-300': !active && collapsible,
-                  'bg-indigo-500': active && markerIsMoving,
+                  'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
                 },
               )}
             />

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,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAInD,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,CAqD1C,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,CAuE1C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/_DocGroup.d.ts

@@ -1,18 +1,17 @@
 import * as React from 'react';
 import { type NavGroup, type NavItemLink } from '@cypress-design/constants-docmenu';
-import { type LinkComponentType } from './_DocLink';
+import { type Context, type LinkComponentType } from './_DocLink';
 export interface DocGroupProps {
     group: NavGroup;
-    activePath: string;
-    collapsible: boolean;
+    context: Context;
     onActivePosition: (opts: {
         top: number;
         height: number;
     }) => void;
-    updateMarkerPosition?: () => void;
+    updateMarkerPosition: () => void;
+    markerIsMoving: boolean;
     depth?: number;
     LinkComponent?: LinkComponentType;
-    hideMarker: () => void;
 }
 export interface DocGroupForward {
     reTriggerSetActiveGroup: () => void;
@@ -20,17 +19,16 @@ export interface DocGroupForward {
 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;
+    markerIsMoving: boolean;
     updateMarkerPosition?: () => void;
     depth: number;
     LinkComponent: LinkComponentType;
-    hideMarker: () => void;
     className?: string;
+    context: Context;
 }
 export interface DocGroupElementsForward {
     reTriggerSetActiveGroup: (index?: number) => void;

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,EACL,KAAK,QAAQ,EACb,KAAK,WAAW,EAEjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAGnB,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,uFAyJpB,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,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,eAAO,MAAM,gBAAgB,uGA6G5B,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,EAEL,KAAK,OAAO,EAEZ,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,cAAc,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAcD,eAAO,MAAM,QAAQ,uFAsJpB,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAA;IACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,iBAAiB,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,eAAO,MAAM,gBAAgB,uGAkG5B,CAAA"}

package/dist/_DocLink.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
 import { NavItemLink } from '@cypress-design/constants-docmenu';
+export interface Context {
+    setMarkerIsMoving: (markerIsMoving: boolean) => void;
+    collapsible: boolean;
+    activePath: string;
+    hideMarker: () => void;
+}
 export type LinkComponentType = React.ElementType<{
     href: string;
     className: string;
@@ -8,14 +14,14 @@ export type LinkComponentType = React.ElementType<{
 }>;
 export interface DocLinkProps {
     item: NavItemLink;
-    active: boolean;
-    collapsible: boolean;
-    depth?: number;
-    onActive?: (opts: {
+    depth: number;
+    markerIsMoving: boolean;
+    context: Context;
+    onActive: (opts: {
         top: number;
         height: number;
     }) => void;
-    LinkComponent?: LinkComponentType;
+    LinkComponent: LinkComponentType;
 }
 export interface DocLinkForward {
     setActiveMarkerPosition: () => void;

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;AAG/D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,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,qFA2DnB,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,WAAW,OAAO;IACtB,iBAAiB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,WAAW,EAAE,OAAO,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAC,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACzD,aAAa,EAAE,iBAAiB,CAAA;CACjC;AAED,MAAM,WAAW,cAAc;IAC7B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,OAAO,qFA0DnB,CAAA"}