• Fix conditional layout edge case (#309)

• Fix Flex stacking context bug (#301)
• Fix case where pointer event listeners were sometimes added to the document unnecessarily

• Panel/PanelGroup/`PanelResizeHandle`` pass "id" prop through to DOM (#299)
• Panel attributes data-panel-collapsible and data-panel-size are no longer DEV-only (#297)

• Group default layouts use toPrecision to avoid small layout shifts due to floating point precision differences between initial server rendering and client hydration (#295)

• Replace useLayoutEffect usage with SSR-safe wrapper hook (#294)

• Resize handle hit detection considers stacking context when determining hit detection (#291)

• Fixed PanelResizeHandle onDragging prop to only be called for the handle being dragged (#289)

• Fix resize handle onDragging callback (#278)

• Fixed an issue where size might not be re-initialized correctly after a panel was hidden by the unstable_Activity (previously "Offscreen") API.

• Fixed a regression introduced in 2.0.0 that caused React onClick and onMouseUp handlers not to fire.

• Support resizing multiple (intersecting) panels at once (#274) This behavior can be customized using a new hitAreaMargins prop; defaults to a 15 pixel margin for coarse inputs and a 5 pixel margin for fine inputs.

• Fixed edge case constraints check bug that could cause a collapsed panel to re-expand unnecessarily (#273)

• DOM util methods scope param defaults to document (#262)
• Updating a Panel's pixel constraints will trigger revalidation of the Panel's size (#266)

• Update component signature to declare ReactElement return type (rather than ReactNode) (#256)
• Update Panel dev warning to avoid warning when defaultSize === collapsedSize for collapsible panels (#257)
• Support shadow dom by removing direct references to / dependencies on the root document (#204)

• Narrow tagName prop to only allow HTMLElement names (rather than the broader Element type) (#251)

• Export internal DOM helper methods.

• Fix server rendering regression (#240); Panels will now render with their defaultSize during initial mount (if one is specified). This allows server-rendered components to store the most recent size in a cookie and use that value as the default for subsequent page visits.

• Edge case bug fix for isCollapsed panel method; previously an uninitialized collapsedSize value was not being initialized to 0, which caused isCollapsed to incorrectly report false in some cases.

• Remember most recently expanded panel size in local storage (#234)

• Change local storage key for persisted sizes to avoid restoring pixel-based sizes (#233)

• Small bug fix to guard against saving an incorrect panel layout to local storage

• Remove support for pixel-based Panel constraints; (props like defaultSizePercentage should now be defaultSize)
• Replaced dataAttributes prop with ...rest prop that supports all HTML attributes

• Change default (not-yet-registered) Panel flex-grow style from 0 to 1

• Edge case expand/collapse invalid size guard (#220)

• Better unstable Offscreen/Activity API.

• Better support imperative API usage from mount effects.
• Better support strict effects mode.
• Better checks not to call onResize or onLayout more than once.

• Support imperative panel API usage on-mount.
• Made PanelGroup bailout condition smarter (don't bailout for empty groups unless pixel constraints are used).
• Improved window splitter compatibility by better handling "Enter" key.

• Change group layout to more thoroughly distribute resize delta to support more flexible group size configurations.
• Add data attribute support to Panel, PanelGroup, and PanelResizeHandle.
• Update API documentation to reflect changed imperative API method names.
• PanelOnResize TypeScript def updated to reflect that previous size param is undefined the first time it is called.

• #207: Fix DEV conditional error that broke data attributes (and selectors).

Support a mix of percentage and pixel based units at the Panel level:

<Panel defaultSizePixels={100} minSizePercentage={20} maxSizePercentage={50} />

Note: Pixel units require the use of a ResizeObserver to validate. Percentage based units are recommended when possible.

Example migrating panels with percentage units

<table> <thead> <tr> <th>v55</th> <th>v56</th> </tr> </thead> <tbody> <tr> <td> <pre lang="jsx"> <Panel defaultSize={25} minSize={10} maxSize={50} /> </pre> </td> <td> <pre lang="jsx"> <Panel defaultSizePercentage={25} minSizePercentage={10} maxSizePercentage={50} /> </pre> </td> </tr> </tbody> </table>

Example migrating panels with pixel units

<table> <thead> <tr> <th>v55</th> <th>v56</th> </tr> </thead> <tbody> <tr> <td> <pre lang="jsx"> <PanelGroup direction="horizontal" units="pixels" > <Panel minSize={100} maxSize={200} /> <PanelResizeHandle /> <Panel /> </PanelGroup> </pre> </td> <td> <pre lang="jsx"> <PanelGroup direction="horizontal"> <Panel minSizePixels={100} maxSizePixels={200} /> <PanelResizeHandle /> <Panel /> </PanelGroup> </pre> </td> </tr> </tbody> </table>

For a complete list of supported properties and example usage, refer to the docs.

• New units prop added to PanelGroup to support pixel-based panel size constraints.

This prop defaults to "percentage" but can be set to "pixels" for static, pixel based layout constraints.

This can be used to add enable pixel-based min/max and default size values, e.g.:

<PanelGroup direction="horizontal" units="pixels">
  {/* Will be constrained to 100-200 pixels (assuming group is large enough to permit this) */}
  <Panel minSize={100} maxSize={200} />
  <PanelResizeHandle />
  <Panel />
  <PanelResizeHandle />
  <Panel />
</PanelGroup>

Imperative API methods are also able to work with either pixels or percentages now. They default to whatever units the group has been configured to use, but can be overridden with an additional, optional parameter, e.g.

panelRef.resize(100, "pixels");
panelGroupRef.setLayout([25, 50, 25], "percentages");

// Works for getters too, e.g.
const percentage = panelRef.getSize("percentages");
const pixels = panelRef.getSize("pixels");

const layout = panelGroupRef.getLayout("pixels");

• 172: Development warning added to PanelGroup for conditionally-rendered Panel(s) that don't have id and order props
• 156: Package exports now used to select between node (server-rendering) and browser (client-rendering) bundles

• Fix edge case race condition for onResize callbacks during initial mount

• 162: Add Panel.collapsedSize property to allow panels to be collapsed to custom, non-0 sizes
• 161: Bug fix: onResize should be called for the initial Panel size regardless of the onLayout prop

• 154: onResize and onCollapse props are called in response to PanelGroup.setLayout
• 123: onResize called when number of panels in a group change due to conditional rendering

• Improved panel size validation in PanelGroup.

• Improved development warnings and props validation checks in PanelGroup.

• 148: Build release bundle with Preconstruct

• Mimic VS Code behavior; collapse a panel if it's smaller than half of its min-size

• Improved SSR support: Avoid accessing default storage (localStorage) during initialization; avoid throwing error in browsers that have 3rd party cookies/storage disabled.

• SSR: Avoid layout shift by using defaultSize to set initial flex-grow style
• SSR: Warn if Panel is server-rendered without a defaultSize prop
• #135: Support RTL layouts

• #142: Avoid re-registering Panel when props change. (Hopefully this will avoid cases where Panels without "order" props subtly break.)

• Add imperative getLayout API to PanelGroup
• #139: Fix edge case bug where simultaneous localStorage updates to multiple saved groups would drop some values

• Change cursor style from col-resize/row-resize to ew-resize/ns-resize to better match cursor style at edges of a panel.

• Add imperative setLayout API for PanelGroup.

• README changes

• #118: Fix import regression from 0.0.38.

• #117: Panel collapse behavior works better near viewport edges.
• #115: PanelResizeHandle logic calls event.preventDefault for events it handles.
• #82: useId import changed to avoid triggering errors with older versions of React. (Note this may have an impact on tree-shaking though it is presumed to be minimal, given the small "react" package size.)

• #94: Add onDragging prop to PanelResizeHandle to be notified of when dragging starts/stops.

• #96: No longer disable pointer-events during resize by default. This behavior can be re-enabled using the newly added PanelGroup prop disablePointerEventsDuringResize.

• #92: Change browserslist so compiled module works with CRA 4.0.3 Babel config out of the box.

• #85: Add optional storage prop to PanelGroup to make it easier to persist layouts somewhere other than localStorage (e.g. like a Cookie).
• #70: When resizing is done via mouse/touch event– some initial state is stored so that any panels that contract will also expand if drag direction is reversed.
• #86: Layout changes triggered by keyboard no longer affect the global cursor.
• Fixed small cursor regression introduced in 0.0.33.