npm react-resizable-panels 4.18.0

4 hours ago
  • Add the normalizeWorkspaceModel function, which checks and tidies a model the same way the defaultModel prop does (e.g. removing empty tabsets and fixing selections), and returns null if the value isn't a model (e.g. corrupt saved data). Its mapTab option replaces each saved tab with the app's current version (or removes it, by returning null), so layouts saved by older versions of an app can be restored.
  • Add the free space in each tabset's tab list (the space its tabs don't use; negative once they overflow), e.g. for a toolbar that moves items into an overflow menu when the header runs out of room. It's returned by the new useTabListFreeSpace hook and getTabListFreeSpace imperative method, reported to listeners added with the new subscribeToTabListFreeSpace method (e.g. from a toolbar rendered outside of the Workspace), and set as the tab list's --tab-list-free-space custom property. All of them are updated before the browser paints.
  • Fix Workspace tabsets being shown at their collapsed sizes with their content still rendered (and reported as expanded by useParentTabsetState) when the model's sizes don't fit the tabsets' minimum sizes, e.g. a model saved in a wider window, a workspace that's made narrower, or expandTabset shrinking a sibling below its minimum. Tabsets are now shown within their minimum and maximum sizes (rather than collapsed, when there's room), and tabsets that still have to be collapsed to fit are shown (and reported) as collapsed; the new isCollapsedToFit value (returned by useParentTabsetState) tells them apart from tabsets collapsed in the model (e.g. to hide an "expand" button, since they can't be expanded until they fit). The model isn't changed, so the tabsets are shown as the model has them again once they fit.
  • Add maxWidth and maxHeight to Workspace tabsets (and updateTabset), which limit how large a tabset's content area can be resized (e.g. a sidebar that can only grow so wide). Like minimum sizes, they must use absolute units. A maximum only applies if something else can take up the rest of its split (e.g. another tabset without a maximum); otherwise it's ignored, with a warning in development.
  • The default Workspace tabset drag preview now shows the number of other tabs being dragged after the selected tab's title (e.g. "One (+2)"). Tabsets with one tab, and workspaces with a renderDragPreview or renderTabsetDragPreview prop, show the same preview as before. - #789

Don't miss a new react-resizable-panels release

NewReleases is sending notifications on new releases.