@cypress-design/react-docmenu 0.4.2 → 0.5.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 15.2s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 15.7s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @cypress-design/react-docmenu
 
+## 0.5.0
+
+### Minor Changes
+
+- [#357](https://github.com/cypress-io/cypress-design/pull/357) [`d0ed7c5`](https://github.com/cypress-io/cypress-design/commit/d0ed7c513df09d24639895ae1c7f2633eab8c254) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: add transition when open/close collapsible menu
+
+### Patch Changes
+
+- Updated dependencies [[`d0ed7c5`](https://github.com/cypress-io/cypress-design/commit/d0ed7c513df09d24639895ae1c7f2633eab8c254)]:
+  - @cypress-design/constants-docmenu@0.2.0
+
+## 0.4.3
+
+### Patch Changes
+
+- [`02ff747`](https://github.com/cypress-io/cypress-design/commit/02ff747ed7aac0ad10a10b250d71d844d910a09c) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: stop using open when it does not exist
+
 ## 0.4.2
 
 ### Patch Changes

package/DocMenu.tsx

@@ -2,6 +2,7 @@ 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
 
@@ -22,6 +23,7 @@ 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 container = React.useRef<HTMLDivElement>(null)
 
@@ -35,29 +37,34 @@ export const DocMenu: React.FC<DocMenuProps> = ({
     [],
   )
 
+  const setShowMarkerFalse = React.useCallback(() => setShowMarker(false), [])
+
   return (
-    <div ref={container} className="relative">
-      {showMarker && 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 + 4}px`,
-            height: `${activeHeight - 8}px`,
-          }}
+    <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}
         />
-      ) : null}
-      <DocGroupElements
-        {...rest}
-        className={!open ? 'hidden' : undefined}
-        items={items}
-        activePath={activePath}
-        collapsible={collapsible}
-        depth={-1}
-        onActivePosition={setActivePosition}
-        LinkComponent={LinkComponent}
-        hideMarker={() => setShowMarker(false)}
-      />
-    </div>
+      </div>
+    </MarkerIsMovingContext.Provider>
   )
 }
 

package/DocMenuReact.cy.tsx

@@ -48,8 +48,12 @@ describe('<DocMenu/>', () => {
           <div className="w-[200px] mt-[60px] absolute">
             <DocMenu
               activePath={activeHref}
-              LinkComponent={({ href, className, children }) => (
-                <div className={className} onClick={() => setActiveHref(href)}>
+              LinkComponent={({ href, className, children, style }) => (
+                <div
+                  style={style}
+                  className={className}
+                  onClick={() => setActiveHref(href)}
+                >
                   {children}
                 </div>
               )}

package/_DocGroup.tsx

@@ -11,6 +11,19 @@ import {
   type DocLinkForward,
   type LinkComponentType,
 } from './_DocLink'
+import { MarkerIsMovingContext } from './markerIsMoving'
+
+const useIsMounted = () => {
+  const isMounted = React.useRef(false)
+
+  React.useEffect(() => {
+    isMounted.current = true
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+  return isMounted
+}
 
 export interface DocGroupProps {
   group: NavGroup
@@ -43,6 +56,8 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
   ) => {
     const [open, setOpen] = React.useState(group.collapsed !== true)
     const $groupElements = React.useRef<DocGroupElementsForward>(null)
+    const $listWrapper = React.useRef<HTMLDivElement>(null)
+    const didMount = useIsMounted()
 
     function toggleMenu(open: boolean) {
       if (!collapsible) return
@@ -72,29 +87,67 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
       [onActivePosition, open],
     )
 
-    function reTriggerSetActiveGroup() {
+    const { setMarkerIsMoving } = React.useContext(MarkerIsMovingContext)
+
+    function reTriggerSetActiveGroupParent() {
       $groupElements.current?.reTriggerSetActiveGroup()
     }
 
     React.useEffect(() => {
-      if (hasActiveItemRecursively()) {
-        if (open) {
-          reTriggerSetActiveGroup()
+      if (didMount.current) {
+        $listWrapper.current?.addEventListener(
+          'transitionstart',
+          () => {
+            setMarkerIsMoving(true)
+          },
+          { once: true },
+        )
+        $listWrapper.current?.addEventListener(
+          'transitionend',
+          () => {
+            setMarkerIsMoving(false)
+            if (open || !hasActiveItemRecursively()) {
+              updateMarkerPosition?.()
+            }
+          },
+          { once: true },
+        )
+      }
+    }, [
+      open,
+      setMarkerIsMoving,
+      updateMarkerPosition,
+      hasActiveItemRecursively,
+      didMount,
+    ])
+
+    React.useEffect(() => {
+      if (didMount.current) {
+        if (hasActiveItemRecursively()) {
+          if (open) {
+            reTriggerSetActiveGroupParent()
+          } else {
+            hideMarker()
+          }
         } else {
-          hideMarker()
+          updateMarkerPosition?.()
         }
-      } else {
-        updateMarkerPosition?.()
       }
-    }, [open, updateMarkerPosition, hideMarker, hasActiveItemRecursively])
+    }, [
+      open,
+      updateMarkerPosition,
+      hideMarker,
+      hasActiveItemRecursively,
+      didMount,
+    ])
 
     React.useImperativeHandle(ref, () => ({
-      reTriggerSetActiveGroup,
+      reTriggerSetActiveGroup: reTriggerSetActiveGroupParent,
     }))
 
     const onUpdateMarkerPosition = React.useCallback(() => {
       if (hasActiveItemRecursively()) {
-        reTriggerSetActiveGroup()
+        reTriggerSetActiveGroupParent()
       } else {
         updateMarkerPosition?.()
       }
@@ -115,30 +168,38 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
             <IconChevronDownSmall
               stroke-color="gray-400"
               size={depth ? '8' : '16'}
-              className={clsx(
-                'absolute transform transition-transform left-0',
-                {
-                  'rotate-0': open,
-                  '-rotate-90': !open,
-                  'ml-[16px]': depth,
-                },
-              )}
+              className={clsx(classes.expandedIcon, {
+                'rotate-0': open,
+                '-rotate-90': !open,
+                'ml-[28px]': depth,
+              })}
             />
           ) : null}
           {group.label}
         </Head>
-        <DocGroupElements
-          ref={$groupElements}
-          className={!open ? 'hidden' : undefined}
-          items={group.items}
-          activePath={activePath}
-          collapsible={collapsible}
-          depth={depth}
-          onActivePosition={setActivePosition}
-          updateMarkerPosition={onUpdateMarkerPosition}
-          LinkComponent={LinkComponent}
-          hideMarker={hideMarker}
-        />
+        <div
+          className={clsx('grid transition-all relative', {
+            'grid-rows-[0fr]': !open && collapsible,
+            'grid-rows-[1fr]': open || !collapsible,
+          })}
+          ref={$listWrapper}
+        >
+          {open && collapsible && depth === 0 ? (
+            <div className={classes.openListBorderLeft} />
+          ) : null}
+          <DocGroupElements
+            ref={$groupElements}
+            className="overflow-hidden"
+            items={group.items}
+            activePath={activePath}
+            collapsible={collapsible}
+            depth={depth}
+            onActivePosition={setActivePosition}
+            updateMarkerPosition={onUpdateMarkerPosition}
+            LinkComponent={LinkComponent}
+            hideMarker={hideMarker}
+          />
+        </div>
       </>
     )
   },
@@ -154,11 +215,11 @@ export interface DocGroupElementsProps
   depth: number
   LinkComponent: LinkComponentType
   hideMarker: () => void
-  className: string | undefined
+  className?: string
 }
 
 export interface DocGroupElementsForward {
-  reTriggerSetActiveGroup: () => void
+  reTriggerSetActiveGroup: (index?: number) => void
 }
 
 export const DocGroupElements = React.forwardRef<
@@ -195,35 +256,44 @@ export const DocGroupElements = React.forwardRef<
       [items, activePath],
     )
 
-    function reTriggerSetActiveGroup() {
-      $groups.current.forEach((group) => {
-        group?.reTriggerSetActiveGroup()
-      })
-      $items.current.forEach((item) => {
-        item?.setActiveMarkerPosition()
-      })
-    }
+    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
+        const indexGroup =
+          index -
+          // remove all the items that are not groups from the array and count them
+          items.slice(0, index).filter((item) => !('items' in item)).length
+
+        // only update groups that come after the toggled one
+        // others will not need to update the marker
+        // since they are "before" in the rendering tree
+        $groups.current.slice(indexGroup + 1).forEach((group) => {
+          group?.reTriggerSetActiveGroup()
+        })
+      },
+      [items],
+    )
 
     React.useImperativeHandle(ref, () => ({
       reTriggerSetActiveGroup,
     }))
 
-    const onUpdateMarkerPosition = React.useCallback(() => {
-      if (hasActiveItemRecursively()) {
-        reTriggerSetActiveGroup()
-      } else {
-        updateMarkerPosition?.()
-      }
-    }, [hasActiveItemRecursively, updateMarkerPosition])
+    const onUpdateMarkerPosition = React.useCallback(
+      (index: number) => {
+        if (hasActiveItemRecursively()) {
+          reTriggerSetActiveGroup(index)
+        } else {
+          updateMarkerPosition?.()
+        }
+      },
+      [hasActiveItemRecursively, updateMarkerPosition, reTriggerSetActiveGroup],
+    )
 
     return (
-      <ul
-        {...rest}
-        className={clsx('list-none p-0', className, {
-          'border-l border-gray-100': depth === 0 && collapsible,
-          'ml-[8px]': depth >= 0,
-        })}
-      >
+      <ul {...rest} className={clsx('list-none p-0', className)}>
         {items.map((item, index) =>
           'items' in item ? (
             <li key={index} className="relative list-none p-0">
@@ -238,7 +308,7 @@ export const DocGroupElements = React.forwardRef<
                 LinkComponent={LinkComponent}
                 hideMarker={hideMarker}
                 onActivePosition={onActivePosition}
-                updateMarkerPosition={onUpdateMarkerPosition}
+                updateMarkerPosition={() => onUpdateMarkerPosition(index)}
               />
             </li>
           ) : (
@@ -251,7 +321,9 @@ export const DocGroupElements = React.forwardRef<
               active={item.href === activePath}
               collapsible={collapsible}
               depth={depth}
-              onActive={onActivePosition}
+              onActive={(opts) =>
+                depth < 0 ? hideMarker() : onActivePosition(opts)
+              }
               LinkComponent={LinkComponent}
             />
           ),

package/_DocLink.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react'
 import clsx from 'clsx'
 import { NavItemLink } from '@cypress-design/constants-docmenu'
+import { MarkerIsMovingContext } from './markerIsMoving'
 
 export type LinkComponentType = React.ElementType<{
   href: string
-  className?: string
-  children?: React.ReactNode
+  className: string
+  style: React.CSSProperties
+  children: React.ReactNode
 }>
 
 export interface DocLinkProps {
@@ -28,13 +30,14 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
   ) => {
     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])
+    const { markerIsMoving, setMarkerIsMoving } = React.useContext(
+      MarkerIsMovingContext,
+    )
 
-    function setActiveMarkerPosition() {
+    const setActiveMarkerPosition = () => {
       if (active) {
         const box = activeLIRef?.current?.getBoundingClientRect()
+
         onActive?.({
           top: box?.top || 0,
           height: box?.height || 0,
@@ -42,36 +45,42 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
       }
     }
 
+    // on mount, if the item is active,
+    // send the top position to the parent
+    React.useEffect(setActiveMarkerPosition, [
+      onActive,
+      active,
+      setMarkerIsMoving,
+    ])
+
     React.useImperativeHandle(ref, () => ({
       setActiveMarkerPosition,
     }))
 
     return (
-      <li
-        ref={activeLIRef}
-        className={clsx('list-none p-0', {
-          'pl-[16px]': depth >= 0,
-        })}
-      >
+      <li ref={activeLIRef} className="list-none p-0">
         <LinkComponent
-          className={clsx('group relative inline-block pl-[24px]', {
+          className={clsx('group relative block w-full pl-[24px]', {
             'text-indigo-500': active,
+            'text-gray-700 dark:text-gray-500': !active,
             'py-[8px] text-[16px] leading-[24px]': depth < 0,
-            'py-[12px] leading-[20px] text-[14px]': depth >= 0,
+            'leading-[20px] text-[14px] py-[12px]': depth >= 0,
           })}
           href={item.href}
+          style={{
+            paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,
+          }}
         >
           {depth >= 0 ? (
             <div
               className={clsx(
-                'absolute w-[4px] z-10 top-[4px] bottom-[4px] rounded-full hidden',
+                '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,
+                  'bg-indigo-500': active && markerIsMoving,
                 },
               )}
-              style={{
-                left: `-${18.5 + depth * 8}px`,
-              }}
             />
           ) : null}
           {item.label}

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;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"}
+{"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"}

package/dist/_DocGroup.d.ts

@@ -30,10 +30,10 @@ export interface DocGroupElementsProps extends React.HTMLAttributes<HTMLUListEle
     depth: number;
     LinkComponent: LinkComponentType;
     hideMarker: () => void;
-    className: string | undefined;
+    className?: string;
 }
 export interface DocGroupElementsForward {
-    reTriggerSetActiveGroup: () => void;
+    reTriggerSetActiveGroup: (index?: number) => 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,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"}
+{"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,uFAmKpB,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"}

package/dist/_DocLink.d.ts

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { NavItemLink } from '@cypress-design/constants-docmenu';
 export type LinkComponentType = React.ElementType<{
     href: string;
-    className?: string;
-    children?: React.ReactNode;
+    className: string;
+    style: React.CSSProperties;
+    children: React.ReactNode;
 }>;
 export interface DocLinkProps {
     item: NavItemLink;

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,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"}
+{"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,qFAiEnB,CAAA"}