fix <details /> on mobile (#3206)

* more

* more

* more

* polish

* Apply suggestions from code review

Author: dimaMachina

.changeset/forty-bats-design.md

@@ -0,0 +1,7 @@
+---
+'nextra-theme-docs': patch
+---
+
+- fix overflow when clicking on `<details>` with open state
+
+- fix animation on mobile when clicking on `<details>` with open state

docs/pages/docs/guide/advanced/playground.mdx

@@ -46,7 +46,7 @@ Z --> G
   const initialRender = useRef(false)
 
   useEffect(() => {
-    if (!initialRender.current && spanRef.current) {
+    if (!initialRender.current) {
       initialRender.current = true
       spanRef.current.textContent = rawMdx
     }

docs/pages/docs/guide/syntax-highlighting.mdx

@@ -1,5 +1,6 @@
 import { OptionTable } from 'components/table'
 import { Callout } from 'nextra/components'
+import { useEffect, useRef } from 'react'
 
 # Syntax Highlighting
 
@@ -195,56 +196,44 @@ Since syntax highlighting is done at build time, you can’t use dynamic content
 in your code blocks. However, since MDX is very powerful there is a workaround
 via client JS. For example:
 
-import { useEffect, useRef } from 'react'
-
 export function DynamicCode({ children }) {
-  const ref = useRef()
+  const ref = useRef(null)
   const tokenRef = useRef()
   // Find the corresponding token from the DOM
   useEffect(() => {
-    if (ref.current) {
-      const token = [...ref.current.querySelectorAll('code span')].find(
-        el => el.innerText === '1'
-      )
-      tokenRef.current = token
-    }
+    tokenRef.current = [
+      ...ref.current.querySelectorAll('code > span > span')
+    ].find(el => el.textContent === '1')
   }, [])
   return (
     <>
-      <div ref={ref} style={{ marginTop: '1.5rem' }}>
+      <div ref={ref} className="mt-6">
         {children}
       </div>
-      <a
-        onClick={() => {
-          tokenRef.current.innerText =
-            (parseInt(tokenRef.current.innerText) || 0) + 1
-        }}
-        style={{
-          cursor: 'pointer',
-          userSelect: 'none'
-        }}
-      >
-        Increase the number
-      </a>
-      <a
-        onClick={() => {
-          tokenRef.current.innerText = '1 + 1'
-        }}
-        style={{
-          marginLeft: '.5rem',
-          cursor: 'pointer',
-          userSelect: 'none'
-        }}
-      >
-        Change to `1 + 1`
-      </a>
+      <div className="flex _text-primary-600 _underline _decoration-from-font [text-underline-position:from-font] mt-3 gap-3 justify-center">
+        <button
+          onClick={() => {
+            const prev = tokenRef.current.textContent
+            tokenRef.current.textContent = +prev + 1
+          }}
+        >
+          Increase the number
+        </button>
+        <button
+          onClick={() => {
+            tokenRef.current.textContent = '1 + 1'
+          }}
+        >
+          Change to `1 + 1`
+        </button>
+      </div>
     </>
   )
 }
 
 <DynamicCode>
-```js copy=false filename="dynamic_code.js"
-function hello () {
+```js copy=false filename="dynamic-code.js"
+function hello() {
   const x = 2 + 3
   console.log(1)
 }

packages/nextra-theme-docs/css/styles.css

@@ -192,5 +192,5 @@ body,
   @apply _z-20 _rounded-xl _py-2.5 _shadow-xl;
   @apply contrast-more:_border contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50;
   @apply _backdrop-blur-lg _bg-[rgb(var(--nextra-bg),.8)];
-  @apply _transition-opacity data-[closed]:_opacity-0 data-[open]:_opacity-100;
+  @apply motion-reduce:_transition-none _transition-opacity data-[closed]:_opacity-0 data-[open]:_opacity-100;
 }

packages/nextra-theme-docs/src/components/collapse.tsx

@@ -4,55 +4,56 @@ import { useEffect, useRef } from 'react'
 
 export function Collapse({
   children,
-  className,
   isOpen,
-  horizontal = false
+  horizontal = false,
+  openDuration = 500,
+  closeDuration = 300
 }: {
   children: ReactNode
-  className?: string
   isOpen: boolean
   horizontal?: boolean
+  openDuration?: number
+  closeDuration?: number
 }): ReactElement {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const innerRef = useRef<HTMLDivElement>(null)
-  const animationRef = useRef(0)
+  const containerRef = useRef<HTMLDivElement>(null!)
   const initialOpen = useRef(isOpen)
+  const animationRef = useRef(0)
   const initialRender = useRef(true)
-
   useEffect(() => {
-    const container = containerRef.current
-    const inner = innerRef.current
     const animation = animationRef.current
+    const container = containerRef.current
     if (animation) {
       clearTimeout(animation)
+      animationRef.current = 0
     }
-    if (initialRender.current || !container || !inner) return
 
-    container.classList.toggle('_duration-500', !isOpen)
-    container.classList.toggle('_duration-300', isOpen)
+    if (initialRender.current) {
+      return
+    }
+    const child = container.children[0] as HTMLDivElement
 
     if (horizontal) {
       // save initial width to avoid word wrapping when container width will be changed
-      inner.style.width = `${inner.clientWidth}px`
-      container.style.width = `${inner.clientWidth}px`
+      child.style.width = `${child.clientWidth}px`
+      container.style.width = `${child.clientWidth}px`
     } else {
-      container.style.height = `${inner.clientHeight}px`
+      container.style.height = `${child.clientHeight}px`
     }
     if (isOpen) {
       animationRef.current = window.setTimeout(() => {
-        // should be style property in kebab-case, not css class name
+        // should be style property in kebab-case, not CSS class name
         container.style.removeProperty('height')
-      }, 300)
+      }, openDuration)
     } else {
       setTimeout(() => {
         if (horizontal) {
-          container.style.width = '0px'
+          container.style.width = '0'
         } else {
-          container.style.height = '0px'
+          container.style.height = '0'
         }
-      }, 0)
+      })
     }
-  }, [horizontal, isOpen])
+  }, [horizontal, isOpen, openDuration])
 
   useEffect(() => {
     initialRender.current = false
@@ -63,20 +64,14 @@ export function Collapse({
       ref={containerRef}
       className={cn(
         '_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none',
-        !isOpen && '_overflow-hidden'
+        isOpen ? '_opacity-100' : ['_opacity-0', '_overflow-hidden']
       )}
-      style={initialOpen.current || horizontal ? undefined : { height: 0 }}
+      style={{
+        ...(initialOpen.current || horizontal ? undefined : { height: 0 }),
+        transitionDuration: (isOpen ? openDuration : closeDuration) + 'ms'
+      }}
     >
-      <div
-        ref={innerRef}
-        className={cn(
-          '_transition-opacity _duration-500 _ease-in-out motion-reduce:_transition-none',
-          isOpen ? '_opacity-100' : '_opacity-0',
-          className
-        )}
-      >
-        {children}
-      </div>
+      <div>{children}</div>
     </div>
   )
 }

packages/nextra-theme-docs/src/components/navbar.tsx

@@ -59,6 +59,7 @@ function NavbarMenu({
       <MenuItems
         transition
         className={cn(
+          'motion-reduce:_transition-none',
           'nextra-scrollbar _transition-opacity data-[closed]:_opacity-0 data-[open]:_opacity-100',
           '_border _border-black/5 dark:_border-white/20',
           '_backdrop-blur-lg _bg-[rgb(var(--nextra-bg),.8)]',

packages/nextra-theme-docs/src/components/search.tsx

@@ -85,7 +85,7 @@ export function Search({
         'max-sm:_hidden'
       )}
     >
-      {navigator.userAgent.includes('Macintosh') ? (
+      {navigator.userAgent.includes('Mac') ? (
         <>
           <span className="_text-xs">⌘</span>K
         </>

packages/nextra-theme-docs/src/components/select.tsx

@@ -40,32 +40,32 @@ export function Select({
         )}
       >
         {selected.name}
-        <ListboxOptions
-          transition
-          anchor={{ to: 'top start', gap: 10 }}
-          className="_transition-opacity data-[closed]:_opacity-0 data-[open]:_opacity-100 _min-w-[--button-width] _z-20 _max-h-64 _rounded-md _border _border-black/5 _backdrop-blur-lg _bg-[rgb(var(--nextra-bg),.8)] _py-1 _text-sm _shadow-lg dark:_border-white/20"
-        >
-          {options.map(option => (
-            <ListboxOption
-              key={option.key}
-              value={option}
-              className={cn(
-                'data-[focus]:_bg-primary-50 data-[focus]:_text-primary-600 data-[focus]:dark:_bg-primary-500/10',
-                '_text-gray-800 dark:_text-gray-100',
-                '_relative _cursor-pointer _whitespace-nowrap _py-1.5',
-                '_transition-colors ltr:_pl-3 ltr:_pr-9 rtl:_pr-3 rtl:_pl-9'
-              )}
-            >
-              {option.name}
-              {option.key === selected.key && (
-                <span className="_absolute _inset-y-0 _flex _items-center ltr:_right-3 rtl:_left-3">
-                  <CheckIcon />
-                </span>
-              )}
-            </ListboxOption>
-          ))}
-        </ListboxOptions>
       </ListboxButton>
+      <ListboxOptions
+        as="ul"
+        transition
+        anchor={{ to: 'top start', gap: 10 }}
+        className="motion-reduce:_transition-none _transition-opacity data-[closed]:_opacity-0 data-[open]:_opacity-100 _min-w-[--button-width] _z-20 _max-h-64 _rounded-md _border _border-black/5 _backdrop-blur-lg _bg-[rgb(var(--nextra-bg),.8)] _py-1 _text-sm _shadow-lg dark:_border-white/20"
+      >
+        {options.map(option => (
+          <ListboxOption
+            key={option.key}
+            value={option}
+            as="li"
+            className={cn(
+              'data-[focus]:_bg-primary-50 data-[focus]:_text-primary-600 data-[focus]:dark:_bg-primary-500/10',
+              '_text-gray-800 dark:_text-gray-100',
+              '_cursor-pointer _whitespace-nowrap _py-1.5 _px-3',
+              '_transition-colors',
+              option.key === selected.key &&
+                '_flex _items-center _justify-between _gap-3'
+            )}
+          >
+            {option.name}
+            {option.key === selected.key && <CheckIcon />}
+          </ListboxOption>
+        ))}
+      </ListboxOptions>
     </Listbox>
   )
 }

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -184,21 +184,21 @@ function FolderImpl({ item, anchors, onFocus }: FolderProps): ReactElement {
           className={cn(
             '_shrink-0',
             '_rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5',
-            '*:_origin-center *:_transition-transform *:rtl:_-rotate-180',
+            'motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180',
             open && '*:ltr:_rotate-90 *:rtl:_rotate-[-270deg]'
           )}
         />
       </ComponentToUse>
-      <Collapse className="_pt-1" isOpen={open}>
-        {Array.isArray(item.children) && (
+      {Array.isArray(item.children) && (
+        <Collapse isOpen={open}>
           <Menu
-            className={cn(classes.border, 'ltr:_ml-3 rtl:_mr-3')}
+            className={cn(classes.border, '_pt-1 ltr:_ml-3 rtl:_mr-3')}
             directories={item.children}
             base={item.route}
             anchors={anchors}
           />
-        )}
-      </Collapse>
+        </Collapse>
+      )}
     </li>
   )
 }
@@ -352,12 +352,12 @@ export function Sidebar({
   const [showToggleAnimation, setToggleAnimation] = useState(false)
 
   const anchors = useMemo(() => toc.filter(v => v.depth === 2), [toc])
-  const sidebarRef = useRef<HTMLDivElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const sidebarRef = useRef<HTMLDivElement>(null!)
+  const containerRef = useRef<HTMLDivElement>(null!)
   const mounted = useMounted()
 
   useEffect(() => {
-    const activeElement = sidebarRef.current?.querySelector('li.active')
+    const activeElement = sidebarRef.current.querySelector('li.active')
 
     if (activeElement && (window.innerWidth > 767 || menu)) {
       const scroll = () => {

packages/nextra-theme-docs/src/mdx-components.tsx

@@ -100,14 +100,25 @@ function Details({
   className,
   ...props
 }: ComponentProps<'details'>): ReactElement {
-  const [isOpen, setIsOpen] = useState(!!open)
+  const [isOpen, setIsOpen] = useState(() => !!open)
   // To animate the close animation we have to delay the DOM node state here.
   const [delayedOpenState, setDelayedOpenState] = useState(isOpen)
+  const animationRef = useRef(0)
 
   useEffect(() => {
+    const animation = animationRef.current
+    if (animation) {
+      clearTimeout(animation)
+      animationRef.current = 0
+    }
     if (!isOpen) {
-      const timeout = setTimeout(() => setDelayedOpenState(isOpen), 500)
-      return () => clearTimeout(timeout)
+      animationRef.current = window.setTimeout(
+        () => setDelayedOpenState(isOpen),
+        300
+      )
+      return () => {
+        clearTimeout(animationRef.current)
+      }
     }
     setDelayedOpenState(true)
   }, [isOpen])
@@ -148,10 +159,13 @@ function Details({
     <details
       className={cn(
         '[&:not(:first-child)]:_mt-4 _rounded _border _border-gray-200 _bg-white _p-2 _shadow-sm dark:_border-neutral-800 dark:_bg-neutral-900',
+        '_overflow-hidden',
         className
       )}
       {...props}
-      open={delayedOpenState}
+      // `isOpen ||` fix issue on mobile devices while clicking on details, open attribute is still
+      // false, and we can't calculate child.clientHeight
+      open={isOpen || delayedOpenState}
       data-expanded={isOpen ? '' : undefined}
     >
       {summaryElement}
@@ -180,7 +194,7 @@ function Summary({
       <ArrowRightIcon
         className={cn(
           '_order-first', // if prettier formats `summary` it will have unexpected margin-top
-          '_h-4 _shrink-0 _mx-1.5',
+          '_h-4 _shrink-0 _mx-1.5 motion-reduce:_transition-none',
           'rtl:_rotate-180 [[data-expanded]>summary:first-child>&]:_rotate-90 _transition'
         )}
         strokeWidth="3"