refactor: replace _finishTransition with recalculateLayout (#372)

Author: vursen

packages/react-components/src/MasterDetailLayout.tsx

@@ -87,7 +87,7 @@ function Detail({ children }: DetailProps) {
       // _finishTransition) because the WC reads DOM state immediately after.
       // React state updates are async, so we manipulate the DOM directly in
       // the callback, then sync React state afterwards.
-      layout._startTransition(transitionType, () => {
+      layout._startTransition(transitionType, async () => {
         if (transitionType === 'replace' && currentDetailsRef.current) {
           // For replace, _startTransition moved the current div to the
           // detail-outgoing slot for the outgoing animation. Clone it so the
@@ -105,8 +105,12 @@ function Detail({ children }: DetailProps) {
           const hasNext = nextDetailsRef.current.childElementCount > 0;
           nextDetailsRef.current.setAttribute('slot', hasNext ? 'detail' : 'detail-hidden');
         }
-        // Recompute layout state synchronously with the new DOM
-        layout._finishTransition();
+
+        // Wait for Lit elements to render
+        await Promise.resolve();
+
+        // Recompute layout state with the new DOM
+        layout.recalculateLayout();
       }).then(() => {
         // Animation finished — sync React state to match DOM reality
         setCurrentChildren(children);

test/MasterDetailLayout.spec.tsx

@@ -2,15 +2,31 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, type RenderResult } from 'vitest-browser-react';
 import type { ReactNode } from 'react';
 import sinon from 'sinon';
+import { LitElement, html } from 'lit';
 import { MasterDetailLayout, MasterDetailLayoutElement } from '../packages/react-components/src/MasterDetailLayout.js';
 
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'test-lit-element': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+class TestLitElement extends LitElement {
+  override render() {
+    return html`<div style="width: 200px">Lit Content</div>`;
+  }
+}
+
+customElements.define('test-lit-element', TestLitElement);
+
 window.Vaadin ||= {};
 window.Vaadin.featureFlags ||= {};
 window.Vaadin.featureFlags.masterDetailLayoutComponent = true;
 
 describe('MasterDetailLayout', () => {
   let startTransitionSpy: sinon.SinonSpy;
-  let finishTransitionSpy: sinon.SinonSpy;
   let result: RenderResult;
   let layout: MasterDetailLayoutElement;
 
@@ -32,7 +48,6 @@ describe('MasterDetailLayout', () => {
   beforeEach(async () => {
     result = await render(<MasterDetailLayout></MasterDetailLayout>);
     startTransitionSpy = sinon.spy();
-    finishTransitionSpy = sinon.spy();
 
     layout = document.querySelector('vaadin-master-detail-layout')!;
     expect(layout).to.exist;
@@ -42,10 +57,6 @@ describe('MasterDetailLayout', () => {
       callback();
       return Promise.resolve();
     };
-    (layout as any)._finishTransition = () => {
-      finishTransitionSpy();
-      return Promise.resolve();
-    };
   });
 
   it('should render master and detail content', async () => {
@@ -281,27 +292,35 @@ describe('MasterDetailLayout', () => {
     expect(startTransitionSpy.firstCall.args[0]).to.equal('remove');
   });
 
-  it('should properly start and finish transitions', async () => {
+  it('should call recalculateLayout after Lit elements have rendered', async () => {
+    // Use the real _startTransition
+    delete (layout as any)._startTransition;
+
+    layout.style.width = '800px';
+
     // Start without content
     await result.rerender(
       <MasterDetailLayout>
         <MasterDetailLayout.Detail />
       </MasterDetailLayout>,
     );
 
-    // Change detail content to trigger transition
+    // Add a Lit element as detail content. Its intrinsic width should be measured
+    // correctly only if recalculateLayout is called after the Lit element renders.
     await result.rerender(
       <MasterDetailLayout>
         <MasterDetailLayout.Detail>
-          <div>New Content</div>
+          <test-lit-element />
         </MasterDetailLayout.Detail>
       </MasterDetailLayout>,
     );
 
-    await assertDetailsVisible('New Content');
-    expect(startTransitionSpy.calledOnce).to.be.true;
-    expect(finishTransitionSpy.calledOnce).to.be.true;
-    expect(startTransitionSpy.calledBefore(finishTransitionSpy)).to.be.true;
+    const litElement = layout.querySelector('test-lit-element') as TestLitElement;
+    await vi.waitFor(() => {
+      expect(litElement.shadowRoot!.querySelector('div')).to.exist;
+    });
+
+    expect(getComputedStyle(layout).getPropertyValue('--_detail-cached-size')).to.equal('201px'); // 1px border
   });
 
   describe('Child validation', () => {