v.7.0.0

React Mosaic v7.0.0

v7 is a major release. The layout engine moves from a binary tree to an n-ary
tree, tabs become a first-class node type, and the library now targets React
16-19 with a full ESM + CJS build.

Coming from v6? Legacy trees keep working; they are auto-converted at render.
See Migration from v6.

New in 7.0.0 (since v7.0.0-beta0)

• Rewritten add/remove tab API: mosaicActions.addTab(path, ...) now
  dispatches on the target node. It appends to a tab-group (and activates the
  new tab) or promotes a leaf into a two-tab group, and rejects on a split node
  or when createNode is unset. mosaicActions.removeTab(path, index) drops a
  tab, adjusts activeTabIndex, and normalizes the tree (a one-tab group
  collapses back to a leaf). A new exported DefaultAddTabButton is wired into
  the default tab toolbar.
• Improved documentation website: the Docusaurus site ships an embedded,
  editable live demo and expanded guides, including a new custom-toolbar guide
  covering tab-bar customization.
• Drag onRelease fix: see Bug Fixes. This resolves the beta0
  known issue.

Breaking Changes

Tree Structure: Binary to N-ary

Split nodes use a children array with a matching splitPercentages array, and
paths are numeric indices instead of 'first' / 'second' strings.

v6 (binary)	v7 (n-ary)
{ direction, first, second }	{ type: 'split', direction, children: [...] }
splitPercentage: number	splitPercentages: number[]
string paths, ['first', 'second']	numeric paths, [0, 1]

// v6
const tree = { direction: 'row', first: 'a', second: 'b', splitPercentage: 40 };

// v7
const tree = {
  type: 'split',
  direction: 'row',
  children: ['a', 'b'],
  splitPercentages: [40, 60],
};

Migration utility: convertLegacyToNary().

Type System (React 19)

• JSX.Element → React.JSX.Element
• Removed React.ReactFragment (deprecated in React 19)
• Explicit React imports now required in JSX files

Requirements

• Node.js 18+ required
• React peer dependency now 16 - 19 (expanded from v6's 16-18)

New Features

• Tabbed windows: tabs are a real node type
  ({ type: 'tabs', tabs, activeTabIndex }), not a convention on top of splits.
  Drag a window onto another to create a tab group; drag tabs to reorder them or
  move them between groups; customize the tab bar with renderTabToolbar,
  renderTabToolbarControls, renderTabTitle, renderTabButton, and
  canClose. (The addTab / removeTab action API was finalized in 7.0.0; see
  above.)
• N-ary tree structure: splits with any number of children, so richer
  layouts do not require deeply nested binary splits.
• Full ESM module support: dual CommonJS/ESM output with a proper exports
  map.
• Dependency updates: react-dnd-multi-backend upgraded to v9 for React 19
  compatibility.

Bug Fixes

• onRelease timing: onRelease was firing at the start of a drag (and on
  drag cancel) instead of only when a change was committed. It now fires solely
  on an actual drop or resize, for both windows and tabs. Resolves the
  v7.0.0-beta0 known issue.
• React 19 compatibility: fixed the TypeScript JSX-namespace errors and the
  element.ref deprecation warnings; removed deprecated React.ReactFragment
  usage.

Migration from v6

For most apps, no code changes are required. Mosaic runs convertLegacyToNary
on legacy input at render time. To migrate persisted trees explicitly:

import { convertLegacyToNary } from 'react-mosaic-component';

const naryTree = convertLegacyToNary(savedV6Tree);

If you read or build the tree by hand, update to the n-ary shape (table above),
switch splitPercentage to splitPercentages, and replace string paths with
numeric index paths.

Compatibility

React	16 - 19
Node.js	18+
TypeScript	full types shipped
Modules	ESM + CJS

Changelog (since v6.2.0)

• refactor!: Sync repository, binary to n-ary tree migration (#240)
• Replace demo app with a Docusaurus docs site (#243)
• Enrich tab toolbar customization
• Rewrite add/remove tab API
• Fix: onRelease fired during drag start / cancel
• Add Node version to the deployment workflow (#244)

Full diff: v6.2.0...v7.0.0