@cypress-design/react-docmenu 0.4.0 → 0.4.1

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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @cypress-design/react-docmenu
 
+## 0.4.1
+
+### Patch Changes
+
+- [#353](https://github.com/cypress-io/cypress-design/pull/353) [`b382b9e`](https://github.com/cypress-io/cypress-design/commit/b382b9ecc99e3ab6288eee406831199edb661c19) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: Docgen wrapping active links
+
+- Updated dependencies [[`b382b9e`](https://github.com/cypress-io/cypress-design/commit/b382b9ecc99e3ab6288eee406831199edb661c19)]:
+  - @cypress-design/constants-docmenu@0.1.2
+
 ## 0.4.0
 
 ### Minor Changes

package/DocMenu.tsx

@@ -1,45 +1,63 @@
 import * as React from 'react'
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
-import { DocLink, LinkComponentType } from './_DocLink'
-import { DocGroup } from './_DocGroup'
-import clsx from 'clsx'
+import type { LinkComponentType } from './_DocLink'
+import { DocGroupElements } from './_DocGroup'
 
 export type NavItem = NavGroup | NavItemLink
 
 export interface DocMenuProps extends React.HTMLAttributes<HTMLUListElement> {
   items: NavItem[]
+  activePath?: string
   collapsible?: boolean
   LinkComponent?: LinkComponentType
 }
 
 export const DocMenu: React.FC<DocMenuProps> = ({
   items,
+  activePath = '<unknown>',
   collapsible = true,
   LinkComponent = 'a',
   ...rest
 }) => {
+  const [activeTop, setActiveTop] = React.useState(0)
+  const [activeHeight, setActiveHeight] = React.useState(36)
+  const [showMarker, setShowMarker] = React.useState(false)
+
+  const container = React.useRef<HTMLDivElement>(null)
+
+  const setActivePosition = React.useCallback(
+    (opts: { top: number; height: number }) => {
+      const containerTop = container.current?.getBoundingClientRect().top || 0
+      setShowMarker(true)
+      setActiveTop(opts.top - containerTop)
+      setActiveHeight(opts.height)
+    },
+    [],
+  )
+
   return (
-    <ul {...rest} className={clsx('list-none p-0', rest.className)}>
-      {items.map((item, index) =>
-        'items' in item ? (
-          <li key={index} className="relative list-none p-0">
-            <DocGroup
-              index={index}
-              group={item}
-              collapsible={collapsible}
-              LinkComponent={LinkComponent}
-            />
-          </li>
-        ) : (
-          <DocLink
-            key={index}
-            item={item}
-            collapsible={collapsible}
-            LinkComponent={LinkComponent}
-          />
-        ),
-      )}
-    </ul>
+    <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`,
+          }}
+        />
+      ) : null}
+      <DocGroupElements
+        {...rest}
+        className={!open ? 'hidden' : undefined}
+        items={items}
+        activePath={activePath}
+        collapsible={collapsible}
+        depth={-1}
+        onActivePosition={setActivePosition}
+        LinkComponent={LinkComponent}
+        hideMarker={() => setShowMarker(false)}
+      />
+    </div>
   )
 }
 

package/DocMenuReact.cy.tsx

@@ -25,13 +25,117 @@ describe('<DocMenu/>', () => {
         items={[
           {
             label: 'Baaaaaaz',
-            items: [{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }],
+            items: [
+              {
+                label: 'Bar',
+                items: [{ href: '/foo', label: 'Foo' }],
+              },
+            ],
           },
         ]}
       />,
     )
   })
 
+  it(
+    'wraps items correctly',
+    { viewportHeight: 950, viewportWidth: 350 },
+    () => {
+      const Sut = () => {
+        const [activeHref, setActiveHref] = React.useState<string | undefined>()
+
+        return (
+          <div className="w-[200px] mt-[60px] absolute">
+            <DocMenu
+              activePath={activeHref}
+              LinkComponent={({ href, className, children }) => (
+                <div className={className} onClick={() => setActiveHref(href)}>
+                  {children}
+                </div>
+              )}
+              items={[
+                {
+                  href: '/fooTop',
+                  label: 'Foo Top',
+                },
+                {
+                  href: '/test',
+                  label: 'Getting started',
+                },
+                {
+                  href: '/faaz',
+                  label:
+                    'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,',
+                },
+                {
+                  label: 'Baaaaaaz',
+                  items: [
+                    {
+                      label: 'Bar',
+                      items: [
+                        {
+                          href: '/foo',
+                          label: 'Foo',
+                        },
+                        {
+                          href: '/test',
+                          label: 'Getting started',
+                        },
+                      ],
+                    },
+                    {
+                      label: 'Code',
+                      collapsed: true,
+                      items: [
+                        {
+                          href: '/faa',
+                          label: 'sasassa',
+                        },
+                        {
+                          href: '/faa1',
+                          label: 'sasassa2',
+                        },
+                        {
+                          href: '/faa2',
+                          label: 'sasassa3',
+                        },
+                        {
+                          href: '/faa3',
+                          label: 'sasassa4',
+                        },
+                        {
+                          href: '/faa4',
+                          label:
+                            'lorem ipsum dolor sit amet consectetur adipisicing elit',
+                        },
+                        {
+                          href: '/faa5',
+                          label: 'sasassa5',
+                        },
+                        {
+                          href: '/faa6',
+                          label:
+                            'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ]}
+            />
+          </div>
+        )
+      }
+      mount(<Sut />)
+
+      cy.findByText('Bar').click()
+      cy.findByText('Code').click()
+      cy.findByText(
+        'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos',
+      ).click()
+    },
+  )
+
   it('renders the custom link components', () => {
     mount(
       <DocMenu
@@ -48,12 +152,15 @@ describe('<DocMenu/>', () => {
         )}
       />,
     )
-    cy.findByText('Bar').click()
+
     cy.findByText('Foo + href: /foo', { selector: 'div' }).should('be.visible')
   })
 
-  function mountStory(items: (NavItemLink | NavGroup)[] = []) {
-    mount(<DocMenu items={items} />)
+  function mountStory(items: (NavItemLink | NavGroup)[] = [], activePath = '') {
+    mount(<DocMenu items={items} activePath={activePath} />)
   }
   assertions(mountStory)
 })
+
+// pseudo text
+// lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos

package/ReadMe.md

@@ -23,22 +23,22 @@ import DocMenu from '@cypress-design/react-docmenu'
 ```tsx live
 export default () => (
   <DocMenu
+    activePath="#group-item-3"
     items={[
       {
         label: 'Get Started',
-        href: '#',
+        href: '#get-started',
       },
       {
         label: 'Overview',
         items: [
           {
             label: 'Overview Item 1',
-            href: '#',
+            href: '#overview-item-1',
           },
           {
             label: 'Overview Item 2',
-            href: '#',
-            active: true,
+            href: '#overview-item-2',
           },
         ],
       },
@@ -47,33 +47,32 @@ export default () => (
         items: [
           {
             label: 'Item 1',
-            href: '#',
+            href: '#item-1',
           },
           {
             label: 'Group',
             items: [
               {
                 label: 'Item 1',
-                href: '#',
+                href: '#group-item-1',
               },
               {
                 label: 'Item 2',
-                href: '#',
+                href: '#group-item-2',
               },
               {
                 label: 'Item 3',
-                href: '#',
+                href: '#group-item-3',
               },
               {
                 label: 'Item 4',
-                href: '#',
+                href: '#group-item-4',
               },
             ],
           },
           {
             label: 'Item 5',
             href: '#',
-            active: true,
           },
         ],
       },

package/_DocGroup.tsx

@@ -1,140 +1,262 @@
 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, LinkComponentType } from './_DocLink'
+import {
+  type NavGroup,
+  type NavItemLink,
+  classes,
+} from '@cypress-design/constants-docmenu'
+import {
+  DocLink,
+  type DocLinkForward,
+  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 const DocGroup: React.FC<DocGroupProps> = ({
-  group,
-  collapsible,
-  depth = 0,
-  setHeight,
-  index,
-  LinkComponent = 'a',
-}) => {
-  const [open, setOpen] = React.useState(depth === 0)
-  const [itemsHeights, setItemsHeights] = React.useState<number[]>(
-    Array(group.items.length).fill(1),
-  )
-
-  React.useEffect(() => {
-    // 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
-    }
+export interface DocGroupForward {
+  reTriggerSetActiveGroup: () => void
+}
 
-    const newHeight = open ? itemsHeights.reduce((a, b) => a + b, 1) : 1
+export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
+  (
+    {
+      group,
+      activePath,
+      collapsible,
+      depth = 0,
+      onActivePosition,
+      updateMarkerPosition,
+      LinkComponent = 'a',
+      hideMarker,
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = React.useState(group.collapsed !== true)
+    const $groupElements = React.useRef<DocGroupElementsForward>(null)
 
-    setHeight?.(newHeight)
-  }, [itemsHeights, open, setHeight, group.items, group.label])
+    function toggleMenu(open: boolean) {
+      if (!collapsible) return
+      setOpen(open)
+    }
 
-  const [activeTop, setActiveTop] = React.useState(0)
+    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],
+    )
 
-  React.useEffect(() => {
-    const activeItem = group.items.findIndex(
-      (item) => 'href' in item && item.active,
+    const Head = collapsible ? 'button' : group.href ? 'a' : 'div'
+
+    const setActivePosition = React.useCallback(
+      ({ top, height }: { top: number; height: number }) => {
+        if (open) {
+          onActivePosition({ top, height })
+        }
+      },
+      [onActivePosition, open],
     )
-    if (activeItem >= 0) {
-      setActiveTop(
-        itemsHeights.slice(0, activeItem).reduce((a, b) => a + b, 1) * 44,
-      )
+
+    function reTriggerSetActiveGroup() {
+      $groupElements.current?.reTriggerSetActiveGroup()
     }
-  }, [itemsHeights, group.items])
-
-  function toggleMenu(open: boolean) {
-    if (!collapsible) return
-    setOpen(open)
-  }
-
-  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'
-
-  return (
-    <>
-      <Head
-        onClick={() => toggleMenu(!open)}
-        href={group.href}
-        className={clsx(classes.button, {
-          'text-indigo-500': group.active,
-          [classes.topButton]: depth === 0,
-          [classes.leafButton]: depth,
-        })}
-      >
-        {collapsible ? (
-          <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,
-            })}
-          />
-        ) : null}
-        {group.label}
-      </Head>
-      {collapsible &&
-      depth >= 0 &&
-      open &&
-      group.items.some((item) => 'href' in item && item.active) ? (
-        <div
-          className="absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px]"
-          style={{
-            top: `${activeTop}px`,
-            left: `${depth === 0 ? 0.5 : -(depth * 8) - 0.5}px`,
-          }}
+
+    React.useEffect(() => {
+      if (hasActiveItemRecursively()) {
+        if (open) {
+          reTriggerSetActiveGroup()
+        } else {
+          hideMarker()
+        }
+      } else {
+        updateMarkerPosition?.()
+      }
+    }, [open, updateMarkerPosition, hideMarker, hasActiveItemRecursively])
+
+    React.useImperativeHandle(ref, () => ({
+      reTriggerSetActiveGroup,
+    }))
+
+    const onUpdateMarkerPosition = React.useCallback(() => {
+      if (hasActiveItemRecursively()) {
+        reTriggerSetActiveGroup()
+      } else {
+        updateMarkerPosition?.()
+      }
+    }, [hasActiveItemRecursively, updateMarkerPosition])
+
+    return (
+      <>
+        <Head
+          onClick={() => toggleMenu(!open)}
+          href={group.href}
+          className={clsx(classes.button, {
+            [classes.topButton]: depth === 0,
+            [classes.leafButton]: depth,
+            'text-indigo-500': activePath === group.href,
+          })}
+        >
+          {collapsible ? (
+            <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,
+                },
+              )}
+            />
+          ) : 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}
         />
-      ) : null}
+      </>
+    )
+  },
+)
+
+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 const DocGroupElements = React.forwardRef<
+  DocGroupElementsForward,
+  DocGroupElementsProps
+>(
+  (
+    {
+      items,
+      activePath,
+      collapsible,
+      depth = 0,
+      onActivePosition,
+      updateMarkerPosition,
+      LinkComponent,
+      hideMarker,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    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],
+    )
+
+    function reTriggerSetActiveGroup() {
+      $groups.current.forEach((group) => {
+        group?.reTriggerSetActiveGroup()
+      })
+      $items.current.forEach((item) => {
+        item?.setActiveMarkerPosition()
+      })
+    }
+
+    React.useImperativeHandle(ref, () => ({
+      reTriggerSetActiveGroup,
+    }))
+
+    const onUpdateMarkerPosition = React.useCallback(() => {
+      if (hasActiveItemRecursively()) {
+        reTriggerSetActiveGroup()
+      } else {
+        updateMarkerPosition?.()
+      }
+    }, [hasActiveItemRecursively, updateMarkerPosition])
+
+    return (
       <ul
-        className={clsx('ml-[8px] list-none p-0', {
+        {...rest}
+        className={clsx('list-none p-0', className, {
           'border-l border-gray-100': depth === 0 && collapsible,
-          hidden: !open,
+          'ml-[8px]': depth >= 0,
         })}
       >
-        {group.items.map((item, index) =>
+        {items.map((item, index) =>
           'items' in item ? (
             <li key={index} className="relative list-none p-0">
               <DocGroup
+                ref={(el: DocGroupForward) => {
+                  $groups.current[index] = el
+                }}
                 group={item}
+                activePath={activePath}
                 depth={depth + 1}
-                setHeight={onSetHeightCallback}
-                index={index}
                 collapsible={collapsible}
                 LinkComponent={LinkComponent}
+                hideMarker={hideMarker}
+                onActivePosition={onActivePosition}
+                updateMarkerPosition={onUpdateMarkerPosition}
               />
             </li>
           ) : (
             <DocLink
+              ref={(el: DocLinkForward) => {
+                $items.current[index] = el
+              }}
               key={index}
               item={item}
+              active={item.href === activePath}
               collapsible={collapsible}
               depth={depth}
-              onActive={(top) => setActiveTop(top)}
+              onActive={onActivePosition}
               LinkComponent={LinkComponent}
             />
           ),
         )}
       </ul>
-    </>
-  )
-}
+    )
+  },
+)