21 KiB
21 KiB
Changelog
2.1.4
- Improve TypeScript HTML tag type generics (#407)
- Edge case check to make sure resize handle hasn't been unmounted while dragging (#410)
2.1.3
- Edge case bug fix for a resize handle unmounting while being dragged (#402)
2.1.2
- Suppress invalid layout warning for empty panel groups (#396)
2.1.1
- Fix
onDraggingregression (#391) - Fix cursor icon behavior in nested panels (#390)
2.1.0
- Add opt-in support for setting the
"nonce"attribute for the global cursor style (#386) - Support disabling global cursor styles (#387)
2.0.23
- Improve obfuscation for
React.useIdreferences (#382)
2.0.22
- Force eager layout re-calculation after panel added/removed (#375)
2.0.21
- Handle pointer event edge case with different origin iframes (#374)
2.0.20
- Reset global cursor if an active resize handle is unmounted (#313)
- Resize handle supports (optional)
onFocusoronBlurprops (#370)
2.0.19
- Add optional
minSizeoverride param to panelexpandimperative API
2.0.18
- Inline object
hitAreaMarginswill not trigger re-initialization logic unless inner values change (#342)
2.0.17
- Prevent pointer events handled by resize handles from triggering elements behind/underneath (#338)
2.0.16
- Replaced .toPrecision() with .toFixed() to avoid undesirable layout shift (#323)
2.0.15
- Better account for high-precision sizes with
onCollapseandonExpandcallbacks (#325)
2.0.14
- Better account for high-precision
collapsedSizevalues (#325)
2.0.13
- Fix potential cycle in stacking-order logic for an unmounted node (#317)
2.0.12
- Improve resize for edge cases with collapsed panels; intermediate resize states should now fall back to the most recent valid layout rather than the initial layout (#311)
2.0.11
- Fix resize handle cursor hit detection when when viewport is scrolled (#305)
2.0.10
- Fix conditional layout edge case (#309)
2.0.9
- Fix Flex stacking context bug (#301)
- Fix case where pointer event listeners were sometimes added to the document unnecessarily
2.0.8
Panel/PanelGroup/`PanelResizeHandle`` pass "id" prop through to DOM (#299)Panelattributesdata-panel-collapsibleanddata-panel-sizeare no longer DEV-only (#297)
2.0.7
- Group default layouts use
toPrecisionto avoid small layout shifts due to floating point precision differences between initial server rendering and client hydration (#295)
2.0.6
- Replace
useLayoutEffectusage with SSR-safe wrapper hook (#294)
2.0.5
- Resize handle hit detection considers stacking context when determining hit detection (#291)
2.0.4
- Fixed
PanelResizeHandleonDraggingprop to only be called for the handle being dragged (#289)
2.0.3
- Fix resize handle onDragging callback (#278)
2.0.2
- Fixed an issue where size might not be re-initialized correctly after a panel was hidden by the
unstable_Activity(previously "Offscreen") API.
2.0.1
- Fixed a regression introduced in 2.0.0 that caused React
onClickandonMouseUphandlers not to fire.
2.0.0
- Support resizing multiple (intersecting) panels at once (#274)
This behavior can be customized using a new
hitAreaMarginsprop; defaults to a 15 pixel margin for coarse inputs and a 5 pixel margin for fine inputs.
1.0.10
- Fixed edge case constraints check bug that could cause a collapsed panel to re-expand unnecessarily (#273)
1.0.9
- DOM util methods scope param defaults to
document(#262) - Updating a
Panel's pixel constraints will trigger revalidation of thePanel's size (#266)
1.0.8
- Update component signature to declare
ReactElementreturn type (rather thanReactNode) (#256) - Update
Paneldev warning to avoid warning whendefaultSize === collapsedSizefor collapsible panels (#257) - Support shadow dom by removing direct references to / dependencies on the root
document(#204)
1.0.7
- Narrow
tagNameprop to only allowHTMLElementnames (rather than the broaderElementtype) (#251)
1.0.6
- Export internal DOM helper methods.
1.0.5
- Fix server rendering regression (#240); Panels will now render with their
defaultSizeduring 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.
1.0.4
- Edge case bug fix for
isCollapsedpanel method; previously an uninitializedcollapsedSizevalue was not being initialized to0, which causedisCollapsedto incorrectly reportfalsein some cases.
1.0.3
- Remember most recently expanded panel size in local storage (#234)
1.0.2
- Change local storage key for persisted sizes to avoid restoring pixel-based sizes (#233)
1.0.1
- Small bug fix to guard against saving an incorrect panel layout to local storage
1.0.0
- Remove support for pixel-based Panel constraints; (props like
defaultSizePercentageshould now bedefaultSize) - Replaced
dataAttributesprop with...restprop that supports all HTML attributes
0.0.63
- Change default (not-yet-registered) Panel flex-grow style from 0 to 1
0.0.62
- Edge case expand/collapse invalid size guard (#220)
0.0.61
- Better unstable Offscreen/Activity API.
0.0.60
- Better support imperative API usage from mount effects.
- Better support strict effects mode.
- Better checks not to call
onResizeoronLayoutmore than once.
0.0.59
- 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.
0.0.58
- Change group layout to more thoroughly distribute resize delta to support more flexible group size configurations.
- Add data attribute support to
Panel,PanelGroup, andPanelResizeHandle. - Update API documentation to reflect changed imperative API method names.
PanelOnResizeTypeScript def updated to reflect that previous size param isundefinedthe first time it is called.
0.0.57
- #207: Fix DEV conditional error that broke data attributes (and selectors).
0.0.56
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
ResizeObserverto validate. Percentage based units are recommended when possible.
Example migrating panels with percentage units
| v55 | v56 |
|---|---|
<Panel
defaultSize={25}
minSize={10}
maxSize={50}
/>
|
<Panel
defaultSizePercentage={25}
minSizePercentage={10}
maxSizePercentage={50}
/>
|
Example migrating panels with pixel units
| v55 | v56 |
|---|---|
<PanelGroup
direction="horizontal"
units="pixels"
>
<Panel minSize={100} maxSize={200} />
<PanelResizeHandle />
<Panel />
</PanelGroup>
|
<PanelGroup direction="horizontal">
<Panel
minSizePixels={100}
maxSizePixels={200}
/>
<PanelResizeHandle />
<Panel />
</PanelGroup>
|
For a complete list of supported properties and example usage, refer to the docs.
0.0.55
- New
unitsprop added toPanelGroupto 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");
0.0.54
- 172: Development warning added to
PanelGroupfor conditionally-renderedPanel(s) that don't haveidandorderprops - 156: Package exports now used to select between node (server-rendering) and browser (client-rendering) bundles
0.0.53
- Fix edge case race condition for
onResizecallbacks during initial mount
0.0.52
- 162: Add
Panel.collapsedSizeproperty to allow panels to be collapsed to custom, non-0 sizes - 161: Bug fix:
onResizeshould be called for the initialPanelsize regardless of theonLayoutprop
0.0.51
- 154:
onResizeandonCollapseprops are called in response toPanelGroup.setLayout - 123:
onResizecalled when number of panels in a group change due to conditional rendering
0.0.50
- Improved panel size validation in
PanelGroup.
0.0.49
- Improved development warnings and props validation checks in
PanelGroup.
0.0.48
- 148: Build release bundle with Preconstruct
0.0.47
- Mimic VS COde behavior; collapse a panel if it's smaller than half of its min-size
0.0.46
- SSR: Avoid accessing default storage (
localStorage) during initialization; avoid throwing error in browsers that have 3rd party cookies/storage disabled.
0.0.45
- SSR: Avoid layout shift by using
defaultSizeto set initialflex-growstyle - SSR: Warn if
Panelis server-rendered without adefaultSizeprop - #135: Support RTL layouts
0.0.44
- #142: Avoid re-registering Panel when props change; this should reduce the number of scenarios requiring the
orderprop
0.0.43
- Add imperative
getLayoutAPI toPanelGroup - #139: Fix edge case bug where simultaneous
localStorageupdates to multiple saved groups would drop some values
0.0.42
- Change cursor style from
col-resize/row-resizetoew-resize/ns-resizeto better match cursor style at edges of a panel.
0.0.41
- Add imperative
setLayoutAPI forPanelGroup.
0.0.40
- README changes
0.0.39
- #118: Fix import regression from 0.0.38.
0.0.38
- #117:
Panelcollapse behavior works better near viewport edges. - #115:
PanelResizeHandlelogic callsevent.preventDefaultfor events it handles. - #82:
useIdimport 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.)
0.0.37
- #94: Add
onDraggingprop toPanelResizeHandleto be notified of when dragging starts/stops.
0.0.36
- #96: No longer disable
pointer-eventsduring resize by default. This behavior can be re-enabled using the newly addedPanelGrouppropdisablePointerEventsDuringResize.
0.0.35
- #92: Change
browserslistso compiled module works with CRA 4.0.3 Babel config out of the box.
0.0.34
- #85: Add optional
storageprop toPanelGroupto make it easier to persist layouts somewhere other thanlocalStorage(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.
0.0.33
- Collapsible
Panels will always callonCollapseon-mount regardless of their collapsed state. - Fixed regression in b5d3ec1 where arrow keys may fail to expand a collapsed panel.
0.0.32
- #75: Ensure
PanelandPanelGroupcallbacks are always called after mounting.
0.0.31
- #71: Added
getSizeandgetCollapsedto imperative API exposed byPanel. - #67, #72: Removed nullish coalescing operator (
??) because it caused problems with default create-react-app configuration. - Fix edge case when expanding a panel via imperative API that was collapsed by user drag
0.0.30
- #68: Reduce volume/frequency of local storage writes for
PanelGroups configured to auto-save. - Added
onLayoutprop toPanelGroupto be called when group layout changes. Note that some form of debouncing is recommended before processing these values (e.g. saving to a database).
0.0.29
- #58: Add imperative
collapse,expand, andresizemethods toPanel. - #64: Disable
pointer-eventsinside ofPanels during resize. This avoid edge cases like nested iframes. - #57: Improve server rendering check to include
window.document. This more closely matches React's own check and avoids false positives for environments that aliaswindowto some global object.
0.0.28
- #53: Avoid
useLayoutEffectwarning when server rendering. Render panels with default style offlex: 1 1 autoduring initial render.
0.0.27
- #4: Add
collapsibleandonCollapseprops toPanelto support auto-collapsing panels that resize beyond theirminSizevalue (similar to VS Code's panel UX).
0.0.26
- Reduce style re-calc from resize-in-progress cursor style.
0.0.25
- While a resize is active, the global cursor style now reliably overrides per-element styles (to avoid flickering if you drag over e.g. an anchor element).
0.0.24
- #49: Change cursor based on min/max boundaries.
0.0.23
- #40: Add optional
maxSizeprop toPanel. - #41: Add optional
onResizeprop toPanel. This prop can be used (along withdefaultSize) to persistence layouts somewhere externally. - #42: Don't cancel resize operations when exiting the window. Only cancel when a
"mouseup"(or"touchend") event is fired.
0.0.22
- Replaced the
"ew-resize"and"ns-resize"cursor style with"col-resize"and"row-resize".
0.0.21
- #39: Fixed regression in TypeScript defs introduced in
0.0.20
0.0.20
- Add
displayNametoPanel,PanelGroup,PanelGroupContext, andPanelResizeHandleto work around ParcelJS scope hoisting renaming.
0.0.19
- Add optional
styleandtagNameprops toPanel,PanelGroup, andPanelResizeHandleto simplify custom styling. - Add
data-panel-group-directionattribute toPanelGroupandPanelResizeHandleto simplify custom drag handle styling.
0.0.18
PanelandPanelGroupnow useoverflow: hiddenstyle by default to avoid potential scrollbar flickers while resizing.
0.0.17
- Bug fix:
Panelstyles includeflex-basis,flex-shrink, andoverflowso that their sizes are not unintentionally impacted by their content.
0.0.16
- Bug fix: Resize handle ARIA attributes now rendering proper min/max/now values for Window Splitter.
- Bug fix: Up/down arrows are ignored for horizontal layouts and left/right arrows are ignored for vertical layouts as per Window Splitter spec.
- #36: Removed
PanelContextin favor of addingdata-resize-handle-activeattribute to active resize handles. This attribute can be used to update the style for active handles.
0.0.15
- #30:
PanelGroupusesdisplay: flexrather than absolute positioning. This provides several benefits: (a) more responsive resizing for nested groups, (b) no explicitwidth/heightprops, and (c)PanelResizeHandlecomponents can now be rendered directly withinPanelGroup(rather than as children ofPanels).
0.0.14
- #23: Fix small regression with
autoSaveIdthat was introduced with non-deterministicuseIdids.
0.0.13
- #18: Support server-side rendering (e.g. Next JS) by using
useId(when available).Panelcomponents no longer require a user-providedidprop and will also fall back to usinguseIdwhen none is provided. PanelGroupcomponent now setsposition: relativestyle by default, as well as an explicitheightandwidthstyle.
0.0.12
- Bug fix: #19: Fix initial "jump" that could occur when dragging started.
- Bug fix: #20: Stop resize/drag operation on "contextmenu" event.
- Bug fix: #21: Disable text selection while dragging active (Firefox only)
0.0.11
- Drag UX change: Reversing drag after dragging past the min/max size of a panel will no longer have an effect until the pointer overlaps with the resize handle. (Thanks @davidkpiano for the suggestion!)
- Bug fix: Resize handles are no longer left in a "focused" state after a touch/mouse event.
0.0.10
- Corrupt build artifact. Don't use this version.
0.0.9
- #13:
PanelResizeHandleshould declare "separator" role and implement the recommended "Window Splitter" pattern
0.0.8
- #7: Support "touch" events for mobile compatibility.
0.0.7
- Add
PanelContextwithactiveHandleIdproperty identifying the resize handle currently being dragged (ornull). This enables more customized UI/UX when resizing is in progress.
0.0.6
- #5: Removed
panelBeforeandpanelAfterprops fromPanelResizeHandle.PanelGroupnow infers this based on position within the group.
0.0.5
- TypeScript props type fix for
PanelGroup'schildrenprop.
0.0.4
- #8: Added optional
orderprop toPanelto improve conditional rendering.
0.0.3
- #3:
Panels can be conditionally rendered within a group.PanelGroupwill persist separate layouts for each combination of visible panels.
0.0.2
- Documentation-only update.
0.0.1
- Initial release.