react-resizable-panels 0.0.54 → 0.0.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/.eslintrc.cjs +26 -0
  2. package/CHANGELOG.md +253 -80
  3. package/README.md +55 -49
  4. package/dist/declarations/src/Panel.d.ts +76 -20
  5. package/dist/declarations/src/PanelGroup.d.ts +29 -21
  6. package/dist/declarations/src/PanelResizeHandle.d.ts +1 -1
  7. package/dist/declarations/src/index.d.ts +5 -5
  8. package/dist/declarations/src/types.d.ts +3 -25
  9. package/dist/declarations/src/vendor/react.d.ts +4 -4
  10. package/dist/react-resizable-panels.browser.cjs.js +1279 -796
  11. package/dist/react-resizable-panels.browser.development.cjs.js +1404 -809
  12. package/dist/react-resizable-panels.browser.development.esm.js +1398 -803
  13. package/dist/react-resizable-panels.browser.esm.js +1279 -796
  14. package/dist/react-resizable-panels.cjs.js +1279 -796
  15. package/dist/react-resizable-panels.cjs.js.map +1 -0
  16. package/dist/react-resizable-panels.development.cjs.js +1399 -804
  17. package/dist/react-resizable-panels.development.esm.js +1400 -805
  18. package/dist/react-resizable-panels.development.node.cjs.js +1172 -755
  19. package/dist/react-resizable-panels.development.node.esm.js +1173 -756
  20. package/dist/react-resizable-panels.esm.js +1279 -796
  21. package/dist/react-resizable-panels.esm.js.map +1 -0
  22. package/dist/react-resizable-panels.node.cjs.js +1064 -749
  23. package/dist/react-resizable-panels.node.esm.js +1065 -750
  24. package/jest.config.js +10 -0
  25. package/package.json +3 -1
  26. package/src/Panel.test.tsx +308 -0
  27. package/src/Panel.ts +179 -127
  28. package/src/PanelGroup.test.tsx +210 -0
  29. package/src/PanelGroup.ts +751 -580
  30. package/src/PanelGroupContext.ts +33 -0
  31. package/src/PanelResizeHandle.ts +13 -8
  32. package/src/hooks/useUniqueId.ts +1 -1
  33. package/src/hooks/useWindowSplitterBehavior.ts +9 -161
  34. package/src/hooks/useWindowSplitterPanelGroupBehavior.ts +185 -0
  35. package/src/index.ts +24 -11
  36. package/src/types.ts +3 -29
  37. package/src/utils/adjustLayoutByDelta.test.ts +1808 -0
  38. package/src/utils/adjustLayoutByDelta.ts +211 -0
  39. package/src/utils/calculateAriaValues.test.ts +111 -0
  40. package/src/utils/calculateAriaValues.ts +67 -0
  41. package/src/utils/calculateDeltaPercentage.ts +68 -0
  42. package/src/utils/calculateDragOffsetPercentage.ts +30 -0
  43. package/src/utils/calculateUnsafeDefaultLayout.test.ts +92 -0
  44. package/src/utils/calculateUnsafeDefaultLayout.ts +55 -0
  45. package/src/utils/callPanelCallbacks.ts +81 -0
  46. package/src/utils/compareLayouts.test.ts +9 -0
  47. package/src/utils/compareLayouts.ts +12 -0
  48. package/src/utils/computePanelFlexBoxStyle.ts +44 -0
  49. package/src/utils/computePercentagePanelConstraints.test.ts +71 -0
  50. package/src/utils/computePercentagePanelConstraints.ts +56 -0
  51. package/src/utils/convertPercentageToPixels.test.ts +9 -0
  52. package/src/utils/convertPercentageToPixels.ts +6 -0
  53. package/src/utils/convertPixelConstraintsToPercentages.ts +55 -0
  54. package/src/utils/convertPixelsToPercentage.test.ts +9 -0
  55. package/src/utils/convertPixelsToPercentage.ts +6 -0
  56. package/src/utils/determinePivotIndices.ts +10 -0
  57. package/src/utils/dom/calculateAvailablePanelSizeInPixels.ts +29 -0
  58. package/src/utils/dom/getAvailableGroupSizePixels.ts +29 -0
  59. package/src/utils/dom/getPanelElement.ts +7 -0
  60. package/src/utils/dom/getPanelGroupElement.ts +7 -0
  61. package/src/utils/dom/getResizeHandleElement.ts +9 -0
  62. package/src/utils/dom/getResizeHandleElementIndex.ts +12 -0
  63. package/src/utils/dom/getResizeHandleElementsForGroup.ts +9 -0
  64. package/src/utils/dom/getResizeHandlePanelIds.ts +18 -0
  65. package/src/utils/events.ts +13 -0
  66. package/src/utils/getPercentageSizeFromMixedSizes.test.ts +47 -0
  67. package/src/utils/getPercentageSizeFromMixedSizes.ts +15 -0
  68. package/src/utils/getResizeEventCursorPosition.ts +19 -0
  69. package/src/utils/initializeDefaultStorage.ts +26 -0
  70. package/src/utils/numbers/fuzzyCompareNumbers.test.ts +16 -0
  71. package/src/utils/numbers/fuzzyCompareNumbers.ts +17 -0
  72. package/src/utils/numbers/fuzzyNumbersEqual.ts +9 -0
  73. package/src/utils/resizePanel.ts +41 -0
  74. package/src/utils/serialization.ts +9 -4
  75. package/src/utils/shouldMonitorPixelBasedConstraints.test.ts +23 -0
  76. package/src/utils/shouldMonitorPixelBasedConstraints.ts +13 -0
  77. package/src/utils/test-utils.ts +136 -0
  78. package/src/utils/validatePanelConstraints.test.ts +151 -0
  79. package/src/utils/validatePanelConstraints.ts +103 -0
  80. package/src/utils/validatePanelGroupLayout.test.ts +233 -0
  81. package/src/utils/validatePanelGroupLayout.ts +88 -0
  82. package/src/vendor/react.ts +4 -0
  83. package/.eslintrc.json +0 -22
  84. package/src/PanelContexts.ts +0 -20
  85. package/src/utils/coordinates.ts +0 -149
  86. package/src/utils/group.ts +0 -315
package/.eslintrc.cjs ADDED
@@ -0,0 +1,26 @@
1
+ /* eslint-env node */
2
+ module.exports = {
3
+ ignorePatterns: [".parcel-cache", "dist", "node_modules"],
4
+ parser: "@typescript-eslint/parser",
5
+ parserOptions: {
6
+ project: "../../tsconfig.json",
7
+ tsconfigRootDir: __dirname,
8
+ },
9
+ plugins: ["@typescript-eslint", "no-restricted-imports", "react-hooks"],
10
+ root: true,
11
+ rules: {
12
+ "no-restricted-imports": [
13
+ "error",
14
+ {
15
+ paths: ["react"],
16
+ },
17
+ ],
18
+ "react-hooks/rules-of-hooks": "error",
19
+ "react-hooks/exhaustive-deps": [
20
+ "warn",
21
+ {
22
+ additionalHooks: "(useIsomorphicLayoutEffect)",
23
+ },
24
+ ],
25
+ },
26
+ };
package/CHANGELOG.md CHANGED
@@ -1,186 +1,359 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.0.56
4
+
5
+ Support a mix of percentage and pixel based units at the `Panel` level:
6
+
7
+ ```jsx
8
+ <Panel defaultSizePixels={100} minSizePercentage={20} maxSizePercentage={50} />
9
+ ```
10
+
11
+ > **Note**: Pixel units require the use of a `ResizeObserver` to validate. Percentage based units are recommended when possible.
12
+
13
+ ### Example migrating panels with percentage units
14
+
15
+ <table>
16
+ <thead>
17
+ <tr>
18
+ <th>v55</th>
19
+ <th>v56</th>
20
+ </tr>
21
+ </thead>
22
+ <tbody>
23
+ <tr>
24
+ <td>
25
+ <pre lang="jsx">
26
+ &lt;Panel
27
+ defaultSize={25}
28
+ minSize={10}
29
+ maxSize={50}
30
+ /&gt;
31
+ </pre>
32
+ </td>
33
+ <td>
34
+ <pre lang="jsx">
35
+ &lt;Panel
36
+ defaultSizePercentage={25}
37
+ minSizePercentage={10}
38
+ maxSizePercentage={50}
39
+ /&gt;
40
+ </pre>
41
+ </td>
42
+ </tr>
43
+ </tbody>
44
+ </table>
45
+
46
+ ### Example migrating panels with pixel units
47
+
48
+ <table>
49
+ <thead>
50
+ <tr>
51
+ <th>v55</th>
52
+ <th>v56</th>
53
+ </tr>
54
+ </thead>
55
+ <tbody>
56
+ <tr>
57
+ <td>
58
+ <pre lang="jsx">
59
+ &lt;PanelGroup
60
+ direction="horizontal"
61
+ units="pixels"
62
+ &gt;
63
+ &lt;Panel minSize={100} maxSize={200} /&gt;
64
+ &lt;PanelResizeHandle /&gt;
65
+ &lt;Panel /&gt;
66
+ &lt;/PanelGroup&gt;
67
+ </pre>
68
+ </td>
69
+ <td>
70
+ <pre lang="jsx">
71
+ &lt;PanelGroup direction="horizontal"&gt;
72
+ &lt;Panel
73
+ minSizePixels={100}
74
+ maxSizePixels={200}
75
+ /&gt;
76
+ &lt;PanelResizeHandle /&gt;
77
+ &lt;Panel /&gt;
78
+ &lt;/PanelGroup&gt;
79
+ </pre>
80
+ </td>
81
+ </tr>
82
+ </tbody>
83
+ </table>
84
+
85
+ For a complete list of supported properties and example usage, refer to the docs.
86
+
87
+ ## 0.0.55
88
+
89
+ - New `units` prop added to `PanelGroup` to support pixel-based panel size constraints.
90
+
91
+ This prop defaults to "percentage" but can be set to "pixels" for static, pixel based layout constraints.
92
+
93
+ This can be used to add enable pixel-based min/max and default size values, e.g.:
94
+
95
+ ```jsx
96
+ <PanelGroup direction="horizontal" units="pixels">
97
+ {/* Will be constrained to 100-200 pixels (assuming group is large enough to permit this) */}
98
+ <Panel minSize={100} maxSize={200} />
99
+ <PanelResizeHandle />
100
+ <Panel />
101
+ <PanelResizeHandle />
102
+ <Panel />
103
+ </PanelGroup>
104
+ ```
105
+
106
+ 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.
107
+
108
+ ```ts
109
+ panelRef.resize(100, "pixels");
110
+ panelGroupRef.setLayout([25, 50, 25], "percentages");
111
+
112
+ // Works for getters too, e.g.
113
+ const percentage = panelRef.getSize("percentages");
114
+ const pixels = panelRef.getSize("pixels");
115
+
116
+ const layout = panelGroupRef.getLayout("pixels");
117
+ ```
118
+
3
119
  ## 0.0.54
4
- * [172](https://github.com/bvaughn/react-resizable-panels/issues/172): Development warning added to `PanelGroup` for conditionally-rendered `Panel`(s) that don't have `id` and `order` props
5
- * [156](https://github.com/bvaughn/react-resizable-panels/pull/156): Package exports now used to select between node (server-rendering) and browser (client-rendering) bundles
120
+
121
+ - [172](https://github.com/bvaughn/react-resizable-panels/issues/172): Development warning added to `PanelGroup` for conditionally-rendered `Panel`(s) that don't have `id` and `order` props
122
+ - [156](https://github.com/bvaughn/react-resizable-panels/pull/156): Package exports now used to select between node (server-rendering) and browser (client-rendering) bundles
6
123
 
7
124
  ## 0.0.53
8
- * Fix edge case race condition for `onResize` callbacks during initial mount
125
+
126
+ - Fix edge case race condition for `onResize` callbacks during initial mount
9
127
 
10
128
  ## 0.0.52
11
- * [162](https://github.com/bvaughn/react-resizable-panels/issues/162): Add `Panel.collapsedSize` property to allow panels to be collapsed to custom, non-0 sizes
12
- * [161](https://github.com/bvaughn/react-resizable-panels/pull/161): Bug fix: `onResize` should be called for the initial `Panel` size regardless of the `onLayout` prop
129
+
130
+ - [162](https://github.com/bvaughn/react-resizable-panels/issues/162): Add `Panel.collapsedSize` property to allow panels to be collapsed to custom, non-0 sizes
131
+ - [161](https://github.com/bvaughn/react-resizable-panels/pull/161): Bug fix: `onResize` should be called for the initial `Panel` size regardless of the `onLayout` prop
13
132
 
14
133
  ## 0.0.51
15
- * [154](https://github.com/bvaughn/react-resizable-panels/issues/154): `onResize` and `onCollapse` props are called in response to `PanelGroup.setLayout`
16
- * [123](https://github.com/bvaughn/react-resizable-panels/issues/123): `onResize` called when number of panels in a group change due to conditional rendering
134
+
135
+ - [154](https://github.com/bvaughn/react-resizable-panels/issues/154): `onResize` and `onCollapse` props are called in response to `PanelGroup.setLayout`
136
+ - [123](https://github.com/bvaughn/react-resizable-panels/issues/123): `onResize` called when number of panels in a group change due to conditional rendering
17
137
 
18
138
  ## 0.0.50
19
- * Improved panel size validation in `PanelGroup`.
139
+
140
+ - Improved panel size validation in `PanelGroup`.
20
141
 
21
142
  ## 0.0.49
22
- * Improved development warnings and props validation checks in `PanelGroup`.
143
+
144
+ - Improved development warnings and props validation checks in `PanelGroup`.
23
145
 
24
146
  ## 0.0.48
25
- * [148](https://github.com/bvaughn/react-resizable-panels/pull/148): Build release bundle with Preconstruct
147
+
148
+ - [148](https://github.com/bvaughn/react-resizable-panels/pull/148): Build release bundle with Preconstruct
26
149
 
27
150
  ## 0.0.47
28
- * Mimic VS COde behavior; collapse a panel if it's smaller than half of its min-size
151
+
152
+ - Mimic VS COde behavior; collapse a panel if it's smaller than half of its min-size
29
153
 
30
154
  ## 0.0.46
31
- * SSR: Avoid accessing default storage (`localStorage`) during initialization; avoid throwing error in browsers that have 3rd party cookies/storage disabled.
155
+
156
+ - SSR: Avoid accessing default storage (`localStorage`) during initialization; avoid throwing error in browsers that have 3rd party cookies/storage disabled.
32
157
 
33
158
  ## 0.0.45
34
- * SSR: Avoid layout shift by using `defaultSize` to set initial `flex-grow` style
35
- * SSR: Warn if `Panel` is server-rendered without a `defaultSize` prop
36
- * [#135](https://github.com/bvaughn/react-resizable-panels/issues/135): Support RTL layouts
159
+
160
+ - SSR: Avoid layout shift by using `defaultSize` to set initial `flex-grow` style
161
+ - SSR: Warn if `Panel` is server-rendered without a `defaultSize` prop
162
+ - [#135](https://github.com/bvaughn/react-resizable-panels/issues/135): Support RTL layouts
37
163
 
38
164
  ## 0.0.44
39
- * [#142](https://github.com/bvaughn/react-resizable-panels/pull/142): Avoid re-registering Panel when props change; this should reduce the number of scenarios requiring the `order` prop
165
+
166
+ - [#142](https://github.com/bvaughn/react-resizable-panels/pull/142): Avoid re-registering Panel when props change; this should reduce the number of scenarios requiring the `order` prop
40
167
 
41
168
  ## 0.0.43
42
- * Add imperative `getLayout` API to `PanelGroup`
43
- * [#139](https://github.com/bvaughn/react-resizable-panels/pull/139): Fix edge case bug where simultaneous `localStorage` updates to multiple saved groups would drop some values
169
+
170
+ - Add imperative `getLayout` API to `PanelGroup`
171
+ - [#139](https://github.com/bvaughn/react-resizable-panels/pull/139): Fix edge case bug where simultaneous `localStorage` updates to multiple saved groups would drop some values
44
172
 
45
173
  ## 0.0.42
46
- * Change cursor style from `col-resize`/`row-resize` to `ew-resize`/`ns-resize` to better match cursor style at edges of a panel.
174
+
175
+ - Change cursor style from `col-resize`/`row-resize` to `ew-resize`/`ns-resize` to better match cursor style at edges of a panel.
47
176
 
48
177
  ## 0.0.41
49
- * Add imperative `setLayout` API for `PanelGroup`.
178
+
179
+ - Add imperative `setLayout` API for `PanelGroup`.
50
180
 
51
181
  ## 0.0.40
52
- * README changes
182
+
183
+ - README changes
53
184
 
54
185
  ## 0.0.39
55
- * [#118](https://github.com/bvaughn/react-resizable-panels/issues/118): Fix import regression from 0.0.38.
186
+
187
+ - [#118](https://github.com/bvaughn/react-resizable-panels/issues/118): Fix import regression from 0.0.38.
56
188
 
57
189
  ## 0.0.38
58
- * [#117](https://github.com/bvaughn/react-resizable-panels/issues/117): `Panel` collapse behavior works better near viewport edges.
59
- * [#115](https://github.com/bvaughn/react-resizable-panels/pull/115): `PanelResizeHandle` logic calls `event.preventDefault` for events it handles.
60
- * [#82](https://github.com/bvaughn/react-resizable-panels/issues/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.)
190
+
191
+ - [#117](https://github.com/bvaughn/react-resizable-panels/issues/117): `Panel` collapse behavior works better near viewport edges.
192
+ - [#115](https://github.com/bvaughn/react-resizable-panels/pull/115): `PanelResizeHandle` logic calls `event.preventDefault` for events it handles.
193
+ - [#82](https://github.com/bvaughn/react-resizable-panels/issues/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.)
61
194
 
62
195
  ## 0.0.37
63
- * [#94](https://github.com/bvaughn/react-resizable-panels/issues/94): Add `onDragging` prop to `PanelResizeHandle` to be notified of when dragging starts/stops.
196
+
197
+ - [#94](https://github.com/bvaughn/react-resizable-panels/issues/94): Add `onDragging` prop to `PanelResizeHandle` to be notified of when dragging starts/stops.
64
198
 
65
199
  ## 0.0.36
66
- * [#96](https://github.com/bvaughn/react-resizable-panels/issues/96): No longer disable `pointer-events` during resize by default. This behavior can be re-enabled using the newly added `PanelGroup` prop `disablePointerEventsDuringResize`.
200
+
201
+ - [#96](https://github.com/bvaughn/react-resizable-panels/issues/96): No longer disable `pointer-events` during resize by default. This behavior can be re-enabled using the newly added `PanelGroup` prop `disablePointerEventsDuringResize`.
67
202
 
68
203
  ## 0.0.35
69
- * [#92](https://github.com/bvaughn/react-resizable-panels/pull/92): Change `browserslist` so compiled module works with CRA 4.0.3 Babel config out of the box.
204
+
205
+ - [#92](https://github.com/bvaughn/react-resizable-panels/pull/92): Change `browserslist` so compiled module works with CRA 4.0.3 Babel config out of the box.
206
+
70
207
  ## 0.0.34
71
- * [#85](https://github.com/bvaughn/react-resizable-panels/issues/85): Add optional `storage` prop to `PanelGroup` to make it easier to persist layouts somewhere other than `localStorage` (e.g. like a Cookie).
72
- * [#70](https://github.com/bvaughn/react-resizable-panels/issues/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.
73
- * [#86](https://github.com/bvaughn/react-resizable-panels/issues/86): Layout changes triggered by keyboard no longer affect the global cursor.
74
- * Fixed small cursor regression introduced in 0.0.33.
208
+
209
+ - [#85](https://github.com/bvaughn/react-resizable-panels/issues/85): Add optional `storage` prop to `PanelGroup` to make it easier to persist layouts somewhere other than `localStorage` (e.g. like a Cookie).
210
+ - [#70](https://github.com/bvaughn/react-resizable-panels/issues/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.
211
+ - [#86](https://github.com/bvaughn/react-resizable-panels/issues/86): Layout changes triggered by keyboard no longer affect the global cursor.
212
+ - Fixed small cursor regression introduced in 0.0.33.
75
213
 
76
214
  ## 0.0.33
77
- * Collapsible `Panel`s will always call `onCollapse` on-mount regardless of their collapsed state.
78
- * Fixed regression in b5d3ec1 where arrow keys may fail to expand a collapsed panel.
215
+
216
+ - Collapsible `Panel`s will always call `onCollapse` on-mount regardless of their collapsed state.
217
+ - Fixed regression in b5d3ec1 where arrow keys may fail to expand a collapsed panel.
79
218
 
80
219
  ## 0.0.32
81
- * [#75](https://github.com/bvaughn/react-resizable-panels/issues/75): Ensure `Panel` and `PanelGroup` callbacks are always called after mounting.
220
+
221
+ - [#75](https://github.com/bvaughn/react-resizable-panels/issues/75): Ensure `Panel` and `PanelGroup` callbacks are always called after mounting.
82
222
 
83
223
  ## 0.0.31
84
- * [#71](https://github.com/bvaughn/react-resizable-panels/issues/71): Added `getSize` and `getCollapsed` to imperative API exposed by `Panel`.
85
- * [#67](https://github.com/bvaughn/react-resizable-panels/issues/67), [#72](https://github.com/bvaughn/react-resizable-panels/issues/72): Removed nullish coalescing operator (`??`) because it caused problems with default create-react-app configuration.
86
- * Fix edge case when expanding a panel via imperative API that was collapsed by user drag
224
+
225
+ - [#71](https://github.com/bvaughn/react-resizable-panels/issues/71): Added `getSize` and `getCollapsed` to imperative API exposed by `Panel`.
226
+ - [#67](https://github.com/bvaughn/react-resizable-panels/issues/67), [#72](https://github.com/bvaughn/react-resizable-panels/issues/72): Removed nullish coalescing operator (`??`) because it caused problems with default create-react-app configuration.
227
+ - Fix edge case when expanding a panel via imperative API that was collapsed by user drag
87
228
 
88
229
  ## 0.0.30
89
- * [#68](https://github.com/bvaughn/react-resizable-panels/pull/68): Reduce volume/frequency of local storage writes for `PanelGroup`s configured to _auto-save_.
90
- * Added `onLayout` prop to `PanelGroup` to be called when group layout changes. Note that some form of debouncing is recommended before processing these values (e.g. saving to a database).
230
+
231
+ - [#68](https://github.com/bvaughn/react-resizable-panels/pull/68): Reduce volume/frequency of local storage writes for `PanelGroup`s configured to _auto-save_.
232
+ - Added `onLayout` prop to `PanelGroup` to be called when group layout changes. Note that some form of debouncing is recommended before processing these values (e.g. saving to a database).
91
233
 
92
234
  ## 0.0.29
93
- * [#58](https://github.com/bvaughn/react-resizable-panels/pull/58): Add imperative `collapse`, `expand`, and `resize` methods to `Panel`.
94
- * [#64](https://github.com/bvaughn/react-resizable-panels/pull/64): Disable `pointer-events` inside of `Panel`s during resize. This avoid edge cases like nested iframes.
95
- * [#57](https://github.com/bvaughn/react-resizable-panels/pull/57): Improve server rendering check to include `window.document`. This more closely matches React's own check and avoids false positives for environments that alias `window` to some global object.
235
+
236
+ - [#58](https://github.com/bvaughn/react-resizable-panels/pull/58): Add imperative `collapse`, `expand`, and `resize` methods to `Panel`.
237
+ - [#64](https://github.com/bvaughn/react-resizable-panels/pull/64): Disable `pointer-events` inside of `Panel`s during resize. This avoid edge cases like nested iframes.
238
+ - [#57](https://github.com/bvaughn/react-resizable-panels/pull/57): Improve server rendering check to include `window.document`. This more closely matches React's own check and avoids false positives for environments that alias `window` to some global object.
96
239
 
97
240
  ## 0.0.28
98
- * [#53](https://github.com/bvaughn/react-resizable-panels/issues/53): Avoid `useLayoutEffect` warning when server rendering. Render panels with default style of `flex: 1 1 auto` during initial render.
241
+
242
+ - [#53](https://github.com/bvaughn/react-resizable-panels/issues/53): Avoid `useLayoutEffect` warning when server rendering. Render panels with default style of `flex: 1 1 auto` during initial render.
99
243
 
100
244
  ## 0.0.27
101
- * [#4](https://github.com/bvaughn/react-resizable-panels/issues/4): Add `collapsible` and `onCollapse` props to `Panel` to support auto-collapsing panels that resize beyond their `minSize` value (similar to VS Code's panel UX).
245
+
246
+ - [#4](https://github.com/bvaughn/react-resizable-panels/issues/4): Add `collapsible` and `onCollapse` props to `Panel` to support auto-collapsing panels that resize beyond their `minSize` value (similar to VS Code's panel UX).
102
247
 
103
248
  ## 0.0.26
104
- * Reduce style re-calc from resize-in-progress cursor style.
249
+
250
+ - Reduce style re-calc from resize-in-progress cursor style.
105
251
 
106
252
  ## 0.0.25
107
- * 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).
253
+
254
+ - 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).
108
255
 
109
256
  ## 0.0.24
110
- * [#49](https://github.com/bvaughn/react-resizable-panels/issues/49): Change cursor based on min/max boundaries.
257
+
258
+ - [#49](https://github.com/bvaughn/react-resizable-panels/issues/49): Change cursor based on min/max boundaries.
111
259
 
112
260
  ## 0.0.23
113
- * [#40](https://github.com/bvaughn/react-resizable-panels/issues/40): Add optional `maxSize` prop to `Panel`.
114
- * [#41](https://github.com/bvaughn/react-resizable-panels/issues/41): Add optional `onResize` prop to `Panel`. This prop can be used (along with `defaultSize`) to persistence layouts somewhere externally.
115
- * [#42](https://github.com/bvaughn/react-resizable-panels/issues/42): Don't cancel resize operations when exiting the window. Only cancel when a `"mouseup"` (or `"touchend"`) event is fired.
261
+
262
+ - [#40](https://github.com/bvaughn/react-resizable-panels/issues/40): Add optional `maxSize` prop to `Panel`.
263
+ - [#41](https://github.com/bvaughn/react-resizable-panels/issues/41): Add optional `onResize` prop to `Panel`. This prop can be used (along with `defaultSize`) to persistence layouts somewhere externally.
264
+ - [#42](https://github.com/bvaughn/react-resizable-panels/issues/42): Don't cancel resize operations when exiting the window. Only cancel when a `"mouseup"` (or `"touchend"`) event is fired.
116
265
 
117
266
  ## 0.0.22
118
- * Replaced the `"ew-resize"` and `"ns-resize"` cursor style with `"col-resize"` and `"row-resize"`.
267
+
268
+ - Replaced the `"ew-resize"` and `"ns-resize"` cursor style with `"col-resize"` and `"row-resize"`.
119
269
 
120
270
  ## 0.0.21
121
- * [#39](https://github.com/bvaughn/react-resizable-panels/issues/39): Fixed regression in TypeScript defs introduced in `0.0.20`
271
+
272
+ - [#39](https://github.com/bvaughn/react-resizable-panels/issues/39): Fixed regression in TypeScript defs introduced in `0.0.20`
122
273
 
123
274
  ## 0.0.20
124
- * Add `displayName` to `Panel`, `PanelGroup`, `PanelGroupContext`, and `PanelResizeHandle` to work around ParcelJS scope hoisting renaming.
275
+
276
+ - Add `displayName` to `Panel`, `PanelGroup`, `PanelGroupContext`, and `PanelResizeHandle` to work around ParcelJS scope hoisting renaming.
125
277
 
126
278
  ## 0.0.19
127
- * Add optional `style` and `tagName` props to `Panel`, `PanelGroup`, and `PanelResizeHandle` to simplify custom styling.
128
- * Add `data-panel-group-direction` attribute to `PanelGroup` and `PanelResizeHandle` to simplify custom drag handle styling.
279
+
280
+ - Add optional `style` and `tagName` props to `Panel`, `PanelGroup`, and `PanelResizeHandle` to simplify custom styling.
281
+ - Add `data-panel-group-direction` attribute to `PanelGroup` and `PanelResizeHandle` to simplify custom drag handle styling.
129
282
 
130
283
  ## 0.0.18
131
- * `Panel` and `PanelGroup` now use `overflow: hidden` style by default to avoid potential scrollbar flickers while resizing.
284
+
285
+ - `Panel` and `PanelGroup` now use `overflow: hidden` style by default to avoid potential scrollbar flickers while resizing.
132
286
 
133
287
  ## 0.0.17
134
- * Bug fix: `Panel` styles include `flex-basis`, `flex-shrink`, and `overflow` so that their sizes are not unintentionally impacted by their content.
288
+
289
+ - Bug fix: `Panel` styles include `flex-basis`, `flex-shrink`, and `overflow` so that their sizes are not unintentionally impacted by their content.
135
290
 
136
291
  ## 0.0.16
137
- * Bug fix: Resize handle ARIA attributes now rendering proper min/max/now values for Window Splitter.
138
- * Bug fix: Up/down arrows are ignored for _horizontal_ layouts and left/right arrows are ignored for _vertical_ layouts as per Window Splitter spec.
139
- * [#36](https://github.com/bvaughn/react-resizable-panels/issues/36): Removed `PanelContext` in favor of adding `data-resize-handle-active` attribute to active resize handles. This attribute can be used to update the style for active handles.
292
+
293
+ - Bug fix: Resize handle ARIA attributes now rendering proper min/max/now values for Window Splitter.
294
+ - Bug fix: Up/down arrows are ignored for _horizontal_ layouts and left/right arrows are ignored for _vertical_ layouts as per Window Splitter spec.
295
+ - [#36](https://github.com/bvaughn/react-resizable-panels/issues/36): Removed `PanelContext` in favor of adding `data-resize-handle-active` attribute to active resize handles. This attribute can be used to update the style for active handles.
140
296
 
141
297
  ## 0.0.15
142
- * [#30](https://github.com/bvaughn/react-resizable-panels/issues/30): `PanelGroup` uses `display: flex` rather than absolute positioning. This provides several benefits: (a) more responsive resizing for nested groups, (b) no explicit `width`/`height` props, and (c) `PanelResizeHandle` components can now be rendered directly within `PanelGroup` (rather than as children of `Panel`s).
298
+
299
+ - [#30](https://github.com/bvaughn/react-resizable-panels/issues/30): `PanelGroup` uses `display: flex` rather than absolute positioning. This provides several benefits: (a) more responsive resizing for nested groups, (b) no explicit `width`/`height` props, and (c) `PanelResizeHandle` components can now be rendered directly within `PanelGroup` (rather than as children of `Panel`s).
143
300
 
144
301
  ## 0.0.14
145
- * [#23](https://github.com/bvaughn/react-resizable-panels/issues/23): Fix small regression with `autoSaveId` that was introduced with non-deterministic `useId` ids.
302
+
303
+ - [#23](https://github.com/bvaughn/react-resizable-panels/issues/23): Fix small regression with `autoSaveId` that was introduced with non-deterministic `useId` ids.
146
304
 
147
305
  ## 0.0.13
148
- * [#18](https://github.com/bvaughn/react-resizable-panels/issues/18): Support server-side rendering (e.g. Next JS) by using `useId` (when available). `Panel` components no longer _require_ a user-provided `id` prop and will also fall back to using `useId` when none is provided.
149
- * `PanelGroup` component now sets `position: relative` style by default, as well as an explicit `height` and `width` style.
306
+
307
+ - [#18](https://github.com/bvaughn/react-resizable-panels/issues/18): Support server-side rendering (e.g. Next JS) by using `useId` (when available). `Panel` components no longer _require_ a user-provided `id` prop and will also fall back to using `useId` when none is provided.
308
+ - `PanelGroup` component now sets `position: relative` style by default, as well as an explicit `height` and `width` style.
150
309
 
151
310
  ## 0.0.12
152
- * Bug fix: [#19](https://github.com/bvaughn/react-resizable-panels/issues/19): Fix initial "jump" that could occur when dragging started.
153
- * Bug fix: [#20](https://github.com/bvaughn/react-resizable-panels/issues/20): Stop resize/drag operation on "contextmenu" event.
154
- * Bug fix: [#21](https://github.com/bvaughn/react-resizable-panels/issues/21): Disable text selection while dragging active (Firefox only)
311
+
312
+ - Bug fix: [#19](https://github.com/bvaughn/react-resizable-panels/issues/19): Fix initial "jump" that could occur when dragging started.
313
+ - Bug fix: [#20](https://github.com/bvaughn/react-resizable-panels/issues/20): Stop resize/drag operation on "contextmenu" event.
314
+ - Bug fix: [#21](https://github.com/bvaughn/react-resizable-panels/issues/21): Disable text selection while dragging active (Firefox only)
155
315
 
156
316
  ## 0.0.11
157
- * 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!)
158
- * Bug fix: Resize handles are no longer left in a "focused" state after a touch/mouse event.
317
+
318
+ - 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!)
319
+ - Bug fix: Resize handles are no longer left in a "focused" state after a touch/mouse event.
159
320
 
160
321
  ## 0.0.10
161
- * Corrupt build artifact. Don't use this version.
322
+
323
+ - Corrupt build artifact. Don't use this version.
162
324
 
163
325
  ## 0.0.9
164
- * [#13](https://github.com/bvaughn/react-resizable-panels/issues/13): `PanelResizeHandle` should declare "separator" role and implement the recommended ["Window Splitter" pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
326
+
327
+ - [#13](https://github.com/bvaughn/react-resizable-panels/issues/13): `PanelResizeHandle` should declare "separator" role and implement the recommended ["Window Splitter" pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
165
328
 
166
329
  ## 0.0.8
167
- * [#7](https://github.com/bvaughn/react-resizable-panels/issues/7): Support "touch" events for mobile compatibility.
330
+
331
+ - [#7](https://github.com/bvaughn/react-resizable-panels/issues/7): Support "touch" events for mobile compatibility.
168
332
 
169
333
  ## 0.0.7
170
- * Add `PanelContext` with `activeHandleId` property identifying the resize handle currently being dragged (or `null`). This enables more customized UI/UX when resizing is in progress.
334
+
335
+ - Add `PanelContext` with `activeHandleId` property identifying the resize handle currently being dragged (or `null`). This enables more customized UI/UX when resizing is in progress.
336
+
171
337
  ## 0.0.6
172
- * [#5](https://github.com/bvaughn/react-resizable-panels/issues/5): Removed `panelBefore` and `panelAfter` props from `PanelResizeHandle`. `PanelGroup` now infers this based on position within the group.
338
+
339
+ - [#5](https://github.com/bvaughn/react-resizable-panels/issues/5): Removed `panelBefore` and `panelAfter` props from `PanelResizeHandle`. `PanelGroup` now infers this based on position within the group.
340
+
173
341
  ## 0.0.5
174
- * TypeScript props type fix for `PanelGroup`'s `children` prop.
342
+
343
+ - TypeScript props type fix for `PanelGroup`'s `children` prop.
175
344
 
176
345
  ## 0.0.4
177
- * [#8](https://github.com/bvaughn/react-resizable-panels/issues/8): Added optional `order` prop to `Panel` to improve conditional rendering.
346
+
347
+ - [#8](https://github.com/bvaughn/react-resizable-panels/issues/8): Added optional `order` prop to `Panel` to improve conditional rendering.
178
348
 
179
349
  ## 0.0.3
180
- * [#3](https://github.com/bvaughn/react-resizable-panels/issues/3): `Panel`s can be conditionally rendered within a group. `PanelGroup` will persist separate layouts for each combination of visible panels.
350
+
351
+ - [#3](https://github.com/bvaughn/react-resizable-panels/issues/3): `Panel`s can be conditionally rendered within a group. `PanelGroup` will persist separate layouts for each combination of visible panels.
181
352
 
182
353
  ## 0.0.2
183
- * Documentation-only update.
354
+
355
+ - Documentation-only update.
184
356
 
185
357
  ## 0.0.1
186
- * Initial release.
358
+
359
+ - Initial release.