fix(sidebar): derive the unmountOnHide fallback from the transition duration

Co-Authored-By: Claude <noreply@anthropic.com>

Author: frankieyan

src/sidebar/sidebar.stories.tsx

@@ -618,6 +618,7 @@ type PlaygroundArgs = {
     width: number
     resizable: boolean
     dismissOverlayOnEscape: boolean
+    unmountOnHide: boolean
 }
 
 export const Playground = {
@@ -629,6 +630,7 @@ export const Playground = {
         width: 280,
         resizable: true,
         dismissOverlayOnEscape: true,
+        unmountOnHide: false,
     },
     argTypes: {
         align: { control: { type: 'inline-radio' }, options: ['start', 'end'] },
@@ -638,6 +640,7 @@ export const Playground = {
         width: { control: { type: 'range', min: 210, max: 400, step: 10 } },
         resizable: { control: { type: 'boolean' } },
         dismissOverlayOnEscape: { control: { type: 'boolean' } },
+        unmountOnHide: { control: { type: 'boolean' } },
     },
     render: function Playground({
         align,
@@ -647,6 +650,7 @@ export const Playground = {
         width: widthArg,
         resizable,
         dismissOverlayOnEscape,
+        unmountOnHide,
     }: PlaygroundArgs) {
         const [isOpen, setIsOpen] = React.useState(isOpenArg)
         const [width, setWidth] = React.useState(widthArg)
@@ -671,6 +675,7 @@ export const Playground = {
                 overlayMode={overlayMode}
                 isOpen={isOpen}
                 dismissOverlayOnEscape={dismissOverlayOnEscape}
+                unmountOnHide={unmountOnHide}
                 onDismiss={() => setIsOpen(false)}
                 width={width}
                 onWidthChange={setWidth}

src/sidebar/sidebar.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { axe } from 'jest-axe'
 
 import { Sidebar, SidebarContent, SidebarResizeHandle } from './sidebar'
@@ -288,6 +288,50 @@ describe('focus management', () => {
     })
 })
 
+describe('unmountOnHide', () => {
+    const tree = (isOpen: boolean) => (
+        <Sidebar align="start" isOpen={isOpen} unmountOnHide>
+            <SidebarContent data-testid="sidebar-panel" aria-label="Nav">
+                <nav aria-label="Primary">Panel body</nav>
+            </SidebarContent>
+        </Sidebar>
+    )
+
+    it('keeps children through the exit, then drops them on transitionend', () => {
+        const { rerender } = render(tree(true))
+        expect(screen.getByText('Panel body')).toBeInTheDocument()
+
+        rerender(tree(false))
+        expect(screen.getByText('Panel body')).toBeInTheDocument()
+
+        fireEvent.transitionEnd(screen.getByTestId('sidebar-panel'))
+        expect(screen.queryByText('Panel body')).not.toBeInTheDocument()
+    })
+
+    it('cancels a pending unmount when reopened mid-exit', () => {
+        const { rerender } = render(tree(true))
+        rerender(tree(false))
+        rerender(tree(true))
+        fireEvent.transitionEnd(screen.getByTestId('sidebar-panel'))
+        expect(screen.getByText('Panel body')).toBeInTheDocument()
+    })
+
+    it('unmounts without a transitionend when there is no transition (reduced motion)', () => {
+        jest.useFakeTimers()
+        try {
+            const { rerender } = render(tree(true))
+            rerender(tree(false))
+            expect(screen.getByText('Panel body')).toBeInTheDocument()
+            act(() => {
+                jest.runOnlyPendingTimers()
+            })
+            expect(screen.queryByText('Panel body')).not.toBeInTheDocument()
+        } finally {
+            jest.useRealTimers()
+        }
+    })
+})
+
 describe('SidebarResizeHandle', () => {
     function renderResizable(props: Partial<SidebarProps> = {}) {
         const onWidthChange = jest.fn()

src/sidebar/sidebar.tsx

@@ -392,7 +392,10 @@ function useDeferredUnmount({
 
             const panel = panelRef.current
             // setExited only fires from async callbacks below, never synchronously here.
-            const fallbackTimeout = window.setTimeout(() => setExited(true), 500)
+            const fallbackTimeout = window.setTimeout(
+                () => setExited(true),
+                getExitTimeoutMs(panel),
+            )
 
             function handleTransitionEnd(event: TransitionEvent) {
                 if (event.target === panel) {
@@ -413,6 +416,23 @@ function useDeferredUnmount({
     return isOpen || !unmountOnHide || !exited
 }
 
+function parseCssDurationMs(value: string): number {
+    return value.split(',').reduce((max, part) => {
+        const trimmed = part.trim()
+        const numeric = Number.parseFloat(trimmed)
+        if (!Number.isFinite(numeric)) return max
+        return Math.max(max, trimmed.endsWith('ms') ? numeric : numeric * 1000)
+    }, 0)
+}
+
+function getExitTimeoutMs(panel: HTMLElement | null): number {
+    if (!panel) return 0
+    const style = window.getComputedStyle(panel)
+    const durationMs = parseCssDurationMs(style.transitionDuration)
+    if (durationMs === 0) return 0
+    return durationMs + parseCssDurationMs(style.transitionDelay) + 50
+}
+
 //
 // SidebarResizeHandle
 //