Auto-expand/collapse nav items

Author: benface

website/src/HomePage.tsx

@@ -200,9 +200,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
                     !['boba-bnb', 'eos-evm', 'polygon-zkevm', 'solana-accounts'].includes(network.id),
                 )
                 // Filter out networks that don't have a proper monochrome logo
-                .filter((network) => {
-                  return network.id !== 'zora'
-                })
+                .filter((network) => network.id !== 'zora')
                 .map((network) => (
                   <li key={network.id} className="-mb-px -mr-px">
                     <Tooltip content={network.shortName}>

website/src/components/Image.tsx

@@ -1,15 +1,10 @@
-import NextImage from 'next/image'
 import type { ComponentProps } from 'react'
 
 import { classNames } from '@edgeandnode/gds'
 
-export interface ImageProps extends Omit<ComponentProps<'img'>, 'src'> {
-  src?: ComponentProps<typeof NextImage>['src']
-}
+interface ImageProps extends ComponentProps<'img'> {}
 
-export const Image = ({ src: passedSrc, alt, className, ...props }: ImageProps) => {
-  const src =
-    typeof passedSrc === 'object' ? ('default' in passedSrc ? passedSrc.default.src : passedSrc.src) : passedSrc
+export const Image = ({ src, alt, className, ...props }: ImageProps) => {
   return (
     <figure
       className={classNames([

website/src/components/Navigation.tsx

@@ -34,11 +34,33 @@ export const NavigationList = ({ className, children, ...props }: ComponentProps
   )
 }
 
+// TODO: Use GDS's `useControlled` when the `OnChangeArgs` generic is added
+function useControlled<T, OnChangeValue extends T = T, OnChangeArgs extends any[] = []>(
+  controlledValue: T | undefined,
+  defaultValue: T,
+  onChange?: (value: OnChangeValue, ...args: OnChangeArgs) => void,
+) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    controlledValue !== undefined ? controlledValue : defaultValue,
+  )
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
+  const setValue = (newValue: OnChangeValue, ...args: OnChangeArgs) => {
+    if (newValue === value) return
+    onChange?.(newValue, ...args)
+    if (controlledValue === undefined) {
+      setUncontrolledValue(newValue)
+    }
+  }
+  return [value, setValue] as const
+}
+
 declare namespace NavigationItemProps {
   interface BaseProps {
     title: string
     icon?: ReactNode
     selected?: boolean | 'partially'
+    expanded?: boolean
+    onExpandedChange?: (expanded: boolean, manual: boolean) => void
   }
   type OmittedButtonOrLinkProps = 'title' | 'selected'
   interface ButtonProps extends BaseProps, Omit<ButtonOrLinkProps.ButtonProps, OmittedButtonOrLinkProps> {}
@@ -55,14 +77,16 @@ export const NavigationItem = ({
   title,
   icon,
   selected,
+  expanded: controlledExpanded,
+  onExpandedChange,
   onClick,
   className,
   children,
   ...props
 }: NavigationItemProps) => {
   const navigationListContext = useContext(NavigationListContext)
   const depth = navigationListContext?.depth ?? 0
-  const [expandedIfChildren, setExpanded] = useState(false)
+  const [expandedIfChildren, setExpanded] = useControlled(controlledExpanded, false, onExpandedChange)
   const expanded = children ? expandedIfChildren : false
 
   return (
@@ -85,7 +109,7 @@ export const NavigationItem = ({
         <ButtonOrLink
           selected={selected === true}
           onClick={(event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {
-            setExpanded(true)
+            setExpanded(true, false)
             onClick?.(event)
           }}
           className={`
@@ -140,7 +164,7 @@ export const NavigationItem = ({
             variant="naked"
             size="xsmall"
             aria-expanded={expanded}
-            onClick={() => setExpanded((expanded) => !expanded)}
+            onClick={() => setExpanded(!expanded, true)}
           >
             <CaretDown
               alt={expanded ? 'Collapse' : 'Expand'}
@@ -160,12 +184,12 @@ export const NavigationItem = ({
             duration={300}
             mode="exit-enter"
             className={`
-              not-safari:group-data-[depth=1]/navigation-list:[--gds-transition-enter-translate-x:-16px]
-              not-safari:group-data-[depth=1]/navigation-list:[--gds-transition-exit-translate-x:-16px]
+              group-data-[depth=1]/navigation-list:[--gds-transition-enter-translate-x:-16px]
+              group-data-[depth=1]/navigation-list:[--gds-transition-exit-translate-x:-16px]
               not-in-group-data-[depth=1]/navigation-list:[--gds-transition-enter-opacity:1]
               not-in-group-data-[depth=1]/navigation-list:[--gds-transition-exit-opacity:1]
-              rtl:not-safari:group-data-[depth=1]/navigation-list:[--gds-transition-enter-translate-x:16px]
-              rtl:not-safari:group-data-[depth=1]/navigation-list:[--gds-transition-exit-translate-x:16px]
+              rtl:group-data-[depth=1]/navigation-list:[--gds-transition-enter-translate-x:16px]
+              rtl:group-data-[depth=1]/navigation-list:[--gds-transition-exit-translate-x:16px]
             `}
           >
             <NavigationList
@@ -190,9 +214,7 @@ export const NavigationItem = ({
                 data-expanded={expanded || undefined}
                 className={`
                   absolute -top-2 start-0 z-10 aspect-square w-full origin-[start] bg-space-1800 fill-none stroke-space-1500 transition duration-150
-                  safari:delay-150
                   not-data-[expanded]:opacity-0
-                  not-data-[expanded]:safari:delay-0
                   rtl:-scale-x-100
                 `}
               >
@@ -232,9 +254,7 @@ export const NavigationItem = ({
                 data-expanded={expanded || undefined}
                 className={`
                   absolute -bottom-2 start-0 aspect-square w-full origin-[start] bg-space-1800 fill-none stroke-space-1500 transition duration-150
-                  safari:delay-150
                   not-data-[expanded]:opacity-0
-                  not-data-[expanded]:safari:delay-0
                   nearest-group-[:has(ul:not(:scope_ul_*,[inert]_*)>li:last-child[data-expanded])]/navigation-item:opacity-0
                   nearest-group-[:has(ul:not(:scope_ul_*,[inert]_*)>li:last-child[data-expanded])]/navigation-item:delay-150
                   @style-[--docs-navigation-item-last=1]:opacity-0

website/src/components/TimeIcon.tsx

@@ -5,7 +5,7 @@ import { HourglassDynamic } from '@edgeandnode/gds/icons'
 
 import { useI18n } from '@/i18n'
 
-export interface TimeIconProps extends ComponentProps<'div'> {
+interface TimeIconProps extends ComponentProps<'div'> {
   variant: 'reading' | 'duration'
   minutes: number
 }