fix(theme-common): finalize collapse state when transition duration is 0ms

[himanshu-2l]

Motivation

Fixes #12043.

Collapsible relied solely on the transitionend DOM event to finalize collapsed/expanded state (applying display: none, cleaning up inline styles, calling onCollapseTransitionEnd). When the CSS transition duration is 0ms — whether from a user CSS override (as reported in #12043) or from prefers-reduced-motion — transitionend never fires in the browser, so the component gets stuck with stale inline styles.

This also lets us remove the old prefers-reduced-motion 1ms hack added in #8906, since the new fallback timer handles the zero-duration case generically instead of needing a magic non-zero value to force the event to fire.

Change

packages/docusaurus-theme-common/src/components/Collapsible/index.tsx:

• getAutoHeightDuration now returns 0 (not 1) for prefers-reduced-motion, since it no longer needs to dodge the transitionend bug.
• useCollapseAnimation now schedules a setTimeout fallback (matching the transition duration) alongside the existing transitionend listener. Whichever fires first finalizes the state via a shared finalize() callback; a finalizedRef guard prevents double-finalizing if both fire.
• CollapsibleBase's onTransitionEnd handler now calls the same shared finalize() instead of duplicating the finalization logic inline.

Test Plan

Added packages/docusaurus-theme-common/src/components/Collapsible/__tests__/index.test.tsx:

• Confirms onCollapseTransitionEnd fires via the fallback timer when the transition duration is 0ms (reproduces Theme: can't set sidebar collapsible category transition to transition: 0ms with CSS #12043 — this test fails against the pre-fix code and passes against the fix).
• Confirms no double-finalization when both the fallback timer and a real transitionend event apply.

Commands run locally, all passing:

pnpm --filter @docusaurus/theme-common build      # clean build
npx tsc --noEmit                                   # clean typecheck (from package dir)
npx eslint packages/docusaurus-theme-common/src/components/Collapsible/index.tsx   # clean
npx oxfmt --check packages/docusaurus-theme-common/src/components/Collapsible/     # clean
npx vitest run packages/docusaurus-theme-common    # 121/121 passing (16 files)
npx cspell packages/docusaurus-theme-common/src/components/Collapsible/            # clean

[meta-cla]

Hi @himanshu-2l!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	a908b67
🔍 Latest deploy log	https://app.netlify.com/projects/docusaurus-2/deploys/6a785794979a26000827c710
😎 Deploy Preview	https://deploy-preview-12353--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!