Sourced from react-resizable-panels's releases.
4.19.1
- Improve resizing and dragging performance, e.g.
Panels without anonResizeprop are no longer observed, and dragging aWorkspacetab only re-renders what changes.- Remove development-only warnings from production builds.
- With a
dragGroup,disableDropis now called when the drop target changes, rather than on everydragoverevent.4.19.0
- Add the
onTearOffprop toWorkspace, which is called when a tab (or a whole tabset) is dropped outside of the window, e.g. to open it in a popup window. It's passed the tab (or tabset), a model containing just that tab (in a new tabset) or tabset, where the pointer was released (in screen coordinates), and the size of the tabset it was dragged from. Returningtrueremoves the tab (or tabset) from the workspace, reported toonModelChangedwith the new"tear-off"reason. Tabsets with thekeepWhenEmptyflag can't be torn off. TherenderDragPreviewandrenderTabsetDragPreviewprops are passed anisTearOffflag (and the preview has adata-tear-offattribute) while releasing the pointer would tear off the tab. See the new "Multiple windows" guides. - #794- Add the
dragGroupprop toWorkspace, which lets tabs (and tabsets) be dragged between workspaces with the same group, including workspaces in other windows (e.g. popup windows opened by the application and rendered into with a portal). A tab dropped into another workspace keeps its id and data, and both workspaces report the change toonModelChangedwith the new"transfer"reason. Tab ids must be unique within the group (a tab can't be dropped into a workspace that has a tab with its id), and tabsets with thekeepWhenEmptyflag stay in their own workspaces. A workspace's only tabset can be dragged when this prop is set (e.g. from a popout window back into the main window). Mouse drags use the browser's drag and drop when this prop is set (touch drags still use pointer events). Tabs can still be torn off, though some browsers (e.g. Safari) block popup windows opened at the end of these drags. - #794
- Workspaces with the same
dragGroupin other copies of the application from the same origin (e.g. the application loaded in another browser window or tab) are part of the group too, so tabs can be dragged between them. A tab dropped into another copy of the application is sent there with the structured clone algorithm, so its data must be cloneable; tabs whose data can't be cloned can only be dragged within their copy. The newdisableDragBetweenAppsprop keeps a workspace's drags within its copy of the application.disableDropis passed a newsourceargument:"local"for tabs dragged within the workspace, and"external"for tabs dragged from another workspace in the group (including workspaces in other copies of the application).- Fix the
Workspacedrop indicator for an empty workspace (e.g. a popout window whose tabs were all dragged out). A tab or tabset dropped onto it now fills its tabset, keeping that tabset's id and data, instead of showing a half-size edge indicator. - #796- The
Workspacedrop indicator can now be animated between tabsets, not just between the regions of one tabset. It's the same element for the whole drag (positioned within the workspace's root element, rather than rendered within each tabset's panels), so a transition liketransition: inset 250msslides it from one tabset to the next. While a dragged tab isn't over any tabset's panels (e.g. between tabsets, or over a tab list), it stays where it was with nodata-regionattribute andopacity: 0, so it can also be faded (e.g.transition: inset 250ms, opacity 150ms). - #793[!WARNING] The drop indicator (
data-drop-indicator) is no longer a child of a tabset's panels (data-tab-panels); selectors like[data-tab-panels] > [data-drop-indicator]should be changed to[data-drop-indicator].
Sourced from react-resizable-panels's changelog.
4.19.1
- Improve resizing and dragging performance, e.g.
Panels without anonResizeprop are no longer observed, and dragging aWorkspacetab only re-renders what changes.- Remove development-only warnings from production builds.
- With a
dragGroup,disableDropis now called when the drop target changes, rather than on everydragoverevent.[!WARNING] The library now reads
process.env.NODE_ENV(like React does), so it must be loaded with a bundler (or a CDN like esm.sh) that defines it.4.19.0
- Add the
WorkspaceonTearOffprop, called when a tab (or tabset) is dropped outside of the window (e.g. to open it in a popup). Returningtrueremoves it, reported with the new"tear-off"reason. - #794- Add the
WorkspacedragGroupprop, which lets tabs be dragged between workspaces in the same group, including workspaces in popup windows and in other copies of the app (opt out withdisableDragBetweenApps). Both workspaces report the new"transfer"reason, anddisableDropis passed a newsourceargument. - #794- Fix the drop indicator for an empty
Workspace. - #796- The
Workspacedrop indicator is now a single element for the whole drag, so it can be animated between tabsets (e.g.transition: inset 250ms). - #793[!WARNING] The drop indicator (
data-drop-indicator) is no longer a child of a tabset's panels, so selectors like[data-tab-panels] > [data-drop-indicator]should be changed to[data-drop-indicator].
835f0a5
Pending 4.19.1 changese5a22fa
Documentation tweaks150cb3e
4.18.1 -> 4.19.07fe3193
Fix the Workspace drop indicator for an empty workspace (#796)9eea963
Animate the Workspace drop indicator between tabsets (#793)c080a5b
Workspace supports popout windows (#794)de59b82
4.18.0 -> 4.18.12a929ed
Pending 4.18.1 change set (#792)