Layout presets don't work with dynamically rendered windows (.map)

[gfazioli]

Description

When windows are rendered dynamically inside Window.Group using .map(), the layout preset buttons (tile, columns, rows, snap, fill) do not work correctly. Windows are either not repositioned or only partially laid out.

Root Cause

Window registration happens inside a useEffect hook (use-mantine-window.ts, lines 101-126), which is asynchronous. When windows are rendered via .map():

1. Windows mount asynchronously in React's render phase
2. The group's registryRef may be incomplete when applyLayout is called
3. WindowCallbacks stored in callbacksRef can become stale if windows re-register
4. Layout calculations use state snapshots that may not reflect actual dimensions

Reproduction

const [windows, setWindows] = useState([{ id: '1', title: 'Win 1' }, { id: '2', title: 'Win 2' }]);

<Window.Group withinPortal>
  {windows.map((w) => (
    <Window
      id={`window_${w.id}`}
      key={`window_${w.id}`}
      title={w.title}
      controlsPosition={navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? 'left' : 'right'}
      draggable="header"
      opened
      defaultWidth="50%"
      defaultHeight="50%"
    >
      {/* content */}
    </Window>
  ))}
</Window.Group>

Click any layout button in the Window.Group tools menu — windows are not repositioned.

Expected Behavior

Layout presets should work regardless of whether windows are statically declared or dynamically rendered via .map().

Possible Fix

• Defer layout application until all children have registered (e.g., use a requestAnimationFrame loop or a debounced registry check)
• Add a test for dynamic window scenarios
• Consider a onRegistryReady callback or similar mechanism

Reported by

Discord user 0x7d8 (05/04/2026)

[gfazioli]

Fixed in v3.1.0 (merged via #25).

applyLayout no longer silently no-ops when windows are rendered dynamically from a .map(). The registry + container-size readiness is now awaited explicitly: a layout triggered while the registry is empty or the container hasn't been measured is parked and flushed automatically once both become ready via requestAnimationFrame.

The Window.Group internal stacking was also moved from imperative refs to reactive state (stackOrder: string[]), so every consumer — including deferred-flush logic — sees a consistent view of the registered windows.

There's a new Dynamic Windows docs section with a live demo covering the .map() scenario. Thanks @0x7d8 for the report!