react-resizable-panels 0.0.55 → 0.0.57

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 (95) hide show
  1. package/.eslintrc.cjs +26 -0
  2. package/CHANGELOG.md +238 -90
  3. package/README.md +55 -49
  4. package/dist/declarations/src/Panel.d.ts +75 -20
  5. package/dist/declarations/src/PanelGroup.d.ts +29 -25
  6. package/dist/declarations/src/PanelResizeHandle.d.ts +1 -1
  7. package/dist/declarations/src/index.d.ts +5 -6
  8. package/dist/declarations/src/types.d.ts +3 -26
  9. package/dist/declarations/src/vendor/react.d.ts +4 -4
  10. package/dist/react-resizable-panels.browser.cjs.js +1276 -1043
  11. package/dist/react-resizable-panels.browser.cjs.mjs +1 -2
  12. package/dist/react-resizable-panels.browser.development.cjs.js +1410 -1097
  13. package/dist/react-resizable-panels.browser.development.cjs.mjs +1 -2
  14. package/dist/react-resizable-panels.browser.development.esm.js +1411 -1097
  15. package/dist/react-resizable-panels.browser.esm.js +1277 -1043
  16. package/dist/react-resizable-panels.cjs.js +1276 -1043
  17. package/dist/react-resizable-panels.cjs.js.map +1 -1
  18. package/dist/react-resizable-panels.cjs.mjs +1 -2
  19. package/dist/react-resizable-panels.development.cjs.js +1415 -1102
  20. package/dist/react-resizable-panels.development.cjs.mjs +1 -2
  21. package/dist/react-resizable-panels.development.esm.js +1416 -1102
  22. package/dist/react-resizable-panels.development.node.cjs.js +1179 -947
  23. package/dist/react-resizable-panels.development.node.cjs.mjs +1 -2
  24. package/dist/react-resizable-panels.development.node.esm.js +1180 -947
  25. package/dist/react-resizable-panels.esm.js +1277 -1043
  26. package/dist/react-resizable-panels.esm.js.map +1 -1
  27. package/dist/react-resizable-panels.node.cjs.js +1068 -910
  28. package/dist/react-resizable-panels.node.cjs.mjs +1 -2
  29. package/dist/react-resizable-panels.node.esm.js +1069 -910
  30. package/jest.config.js +10 -0
  31. package/package.json +5 -1
  32. package/src/Panel.test.tsx +308 -0
  33. package/src/Panel.ts +175 -123
  34. package/src/PanelGroup.test.tsx +210 -0
  35. package/src/PanelGroup.ts +730 -667
  36. package/src/PanelGroupContext.ts +33 -0
  37. package/src/PanelResizeHandle.ts +21 -17
  38. package/src/hooks/useUniqueId.ts +1 -1
  39. package/src/hooks/useWindowSplitterBehavior.ts +9 -164
  40. package/src/hooks/useWindowSplitterPanelGroupBehavior.ts +185 -0
  41. package/src/index.ts +19 -14
  42. package/src/types.ts +3 -30
  43. package/src/utils/adjustLayoutByDelta.test.ts +1808 -0
  44. package/src/utils/adjustLayoutByDelta.ts +211 -0
  45. package/src/utils/calculateAriaValues.test.ts +111 -0
  46. package/src/utils/calculateAriaValues.ts +67 -0
  47. package/src/utils/calculateDeltaPercentage.ts +68 -0
  48. package/src/utils/calculateDragOffsetPercentage.ts +30 -0
  49. package/src/utils/calculateUnsafeDefaultLayout.test.ts +92 -0
  50. package/src/utils/calculateUnsafeDefaultLayout.ts +55 -0
  51. package/src/utils/callPanelCallbacks.ts +81 -0
  52. package/src/utils/compareLayouts.test.ts +9 -0
  53. package/src/utils/compareLayouts.ts +12 -0
  54. package/src/utils/computePanelFlexBoxStyle.ts +44 -0
  55. package/src/utils/computePercentagePanelConstraints.test.ts +98 -0
  56. package/src/utils/computePercentagePanelConstraints.ts +56 -0
  57. package/src/utils/convertPercentageToPixels.test.ts +9 -0
  58. package/src/utils/convertPercentageToPixels.ts +6 -0
  59. package/src/utils/convertPixelConstraintsToPercentages.test.ts +47 -0
  60. package/src/utils/convertPixelConstraintsToPercentages.ts +72 -0
  61. package/src/utils/convertPixelsToPercentage.test.ts +9 -0
  62. package/src/utils/convertPixelsToPercentage.ts +6 -0
  63. package/src/utils/determinePivotIndices.ts +10 -0
  64. package/src/utils/dom/calculateAvailablePanelSizeInPixels.ts +29 -0
  65. package/src/utils/dom/getAvailableGroupSizePixels.ts +29 -0
  66. package/src/utils/dom/getPanelElement.ts +7 -0
  67. package/src/utils/dom/getPanelGroupElement.ts +9 -0
  68. package/src/utils/dom/getResizeHandleElement.ts +9 -0
  69. package/src/utils/dom/getResizeHandleElementIndex.ts +12 -0
  70. package/src/utils/dom/getResizeHandleElementsForGroup.ts +9 -0
  71. package/src/utils/dom/getResizeHandlePanelIds.ts +18 -0
  72. package/src/utils/events.ts +13 -0
  73. package/src/utils/getPercentageSizeFromMixedSizes.test.ts +47 -0
  74. package/src/utils/getPercentageSizeFromMixedSizes.ts +15 -0
  75. package/src/utils/getResizeEventCursorPosition.ts +19 -0
  76. package/src/utils/initializeDefaultStorage.ts +26 -0
  77. package/src/utils/numbers/fuzzyCompareNumbers.test.ts +16 -0
  78. package/src/utils/numbers/fuzzyCompareNumbers.ts +17 -0
  79. package/src/utils/numbers/fuzzyNumbersEqual.ts +9 -0
  80. package/src/utils/resizePanel.test.ts +45 -0
  81. package/src/utils/resizePanel.ts +60 -0
  82. package/src/utils/serialization.ts +9 -4
  83. package/src/utils/shouldMonitorPixelBasedConstraints.test.ts +23 -0
  84. package/src/utils/shouldMonitorPixelBasedConstraints.ts +13 -0
  85. package/src/utils/test-utils.ts +136 -0
  86. package/src/utils/validatePanelConstraints.test.ts +151 -0
  87. package/src/utils/validatePanelConstraints.ts +103 -0
  88. package/src/utils/validatePanelGroupLayout.test.ts +233 -0
  89. package/src/utils/validatePanelGroupLayout.ts +88 -0
  90. package/src/vendor/react.ts +4 -0
  91. package/.eslintrc.json +0 -22
  92. package/dist/declarations/src/utils/group.d.ts +0 -29
  93. package/src/PanelContexts.ts +0 -22
  94. package/src/utils/coordinates.ts +0 -149
  95. package/src/utils/group.ts +0 -614
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,23 +1,114 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.0.57
4
+
5
+ - [#207](https://github.com/bvaughn/react-resizable-panels/pull/207): Fix DEV conditional error that broke data attributes (and selectors).
6
+
7
+ ## 0.0.56
8
+
9
+ Support a mix of percentage and pixel based units at the `Panel` level:
10
+
11
+ ```jsx
12
+ <Panel defaultSizePixels={100} minSizePercentage={20} maxSizePercentage={50} />
13
+ ```
14
+
15
+ > **Note**: Pixel units require the use of a `ResizeObserver` to validate. Percentage based units are recommended when possible.
16
+
17
+ ### Example migrating panels with percentage units
18
+
19
+ <table>
20
+ <thead>
21
+ <tr>
22
+ <th>v55</th>
23
+ <th>v56</th>
24
+ </tr>
25
+ </thead>
26
+ <tbody>
27
+ <tr>
28
+ <td>
29
+ <pre lang="jsx">
30
+ &lt;Panel
31
+ defaultSize={25}
32
+ minSize={10}
33
+ maxSize={50}
34
+ /&gt;
35
+ </pre>
36
+ </td>
37
+ <td>
38
+ <pre lang="jsx">
39
+ &lt;Panel
40
+ defaultSizePercentage={25}
41
+ minSizePercentage={10}
42
+ maxSizePercentage={50}
43
+ /&gt;
44
+ </pre>
45
+ </td>
46
+ </tr>
47
+ </tbody>
48
+ </table>
49
+
50
+ ### Example migrating panels with pixel units
51
+
52
+ <table>
53
+ <thead>
54
+ <tr>
55
+ <th>v55</th>
56
+ <th>v56</th>
57
+ </tr>
58
+ </thead>
59
+ <tbody>
60
+ <tr>
61
+ <td>
62
+ <pre lang="jsx">
63
+ &lt;PanelGroup
64
+ direction="horizontal"
65
+ units="pixels"
66
+ &gt;
67
+ &lt;Panel minSize={100} maxSize={200} /&gt;
68
+ &lt;PanelResizeHandle /&gt;
69
+ &lt;Panel /&gt;
70
+ &lt;/PanelGroup&gt;
71
+ </pre>
72
+ </td>
73
+ <td>
74
+ <pre lang="jsx">
75
+ &lt;PanelGroup direction="horizontal"&gt;
76
+ &lt;Panel
77
+ minSizePixels={100}
78
+ maxSizePixels={200}
79
+ /&gt;
80
+ &lt;PanelResizeHandle /&gt;
81
+ &lt;Panel /&gt;
82
+ &lt;/PanelGroup&gt;
83
+ </pre>
84
+ </td>
85
+ </tr>
86
+ </tbody>
87
+ </table>
88
+
89
+ For a complete list of supported properties and example usage, refer to the docs.
90
+
3
91
  ## 0.0.55
4
- * New `units` prop added to `PanelGroup` to support pixel-based panel size constraints.
92
+
93
+ - New `units` prop added to `PanelGroup` to support pixel-based panel size constraints.
5
94
 
6
95
  This prop defaults to "percentage" but can be set to "pixels" for static, pixel based layout constraints.
7
96
 
8
97
  This can be used to add enable pixel-based min/max and default size values, e.g.:
9
- ```tsx
10
- <PanelGroup direction="horizontal" units="pixels">
11
- {/* Will be constrained to 100-200 pixels (assuming group is large enough to permit this) */}
12
- <Panel minSize={100} maxSize={200} />
13
- <PanelResizeHandle />
14
- <Panel />
15
- <PanelResizeHandle />
16
- <Panel />
17
- </PanelGroup>
98
+
99
+ ```jsx
100
+ <PanelGroup direction="horizontal" units="pixels">
101
+ {/* Will be constrained to 100-200 pixels (assuming group is large enough to permit this) */}
102
+ <Panel minSize={100} maxSize={200} />
103
+ <PanelResizeHandle />
104
+ <Panel />
105
+ <PanelResizeHandle />
106
+ <Panel />
107
+ </PanelGroup>
18
108
  ```
19
109
 
20
110
  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.
111
+
21
112
  ```ts
22
113
  panelRef.resize(100, "pixels");
23
114
  panelGroupRef.setLayout([25, 50, 25], "percentages");
@@ -30,186 +121,243 @@ const layout = panelGroupRef.getLayout("pixels");
30
121
  ```
31
122
 
32
123
  ## 0.0.54
33
- * [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
34
- * [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
124
+
125
+ - [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
126
+ - [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
35
127
 
36
128
  ## 0.0.53
37
- * Fix edge case race condition for `onResize` callbacks during initial mount
129
+
130
+ - Fix edge case race condition for `onResize` callbacks during initial mount
38
131
 
39
132
  ## 0.0.52
40
- * [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
41
- * [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
133
+
134
+ - [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
135
+ - [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
42
136
 
43
137
  ## 0.0.51
44
- * [154](https://github.com/bvaughn/react-resizable-panels/issues/154): `onResize` and `onCollapse` props are called in response to `PanelGroup.setLayout`
45
- * [123](https://github.com/bvaughn/react-resizable-panels/issues/123): `onResize` called when number of panels in a group change due to conditional rendering
138
+
139
+ - [154](https://github.com/bvaughn/react-resizable-panels/issues/154): `onResize` and `onCollapse` props are called in response to `PanelGroup.setLayout`
140
+ - [123](https://github.com/bvaughn/react-resizable-panels/issues/123): `onResize` called when number of panels in a group change due to conditional rendering
46
141
 
47
142
  ## 0.0.50
48
- * Improved panel size validation in `PanelGroup`.
143
+
144
+ - Improved panel size validation in `PanelGroup`.
49
145
 
50
146
  ## 0.0.49
51
- * Improved development warnings and props validation checks in `PanelGroup`.
147
+
148
+ - Improved development warnings and props validation checks in `PanelGroup`.
52
149
 
53
150
  ## 0.0.48
54
- * [148](https://github.com/bvaughn/react-resizable-panels/pull/148): Build release bundle with Preconstruct
151
+
152
+ - [148](https://github.com/bvaughn/react-resizable-panels/pull/148): Build release bundle with Preconstruct
55
153
 
56
154
  ## 0.0.47
57
- * Mimic VS COde behavior; collapse a panel if it's smaller than half of its min-size
155
+
156
+ - Mimic VS COde behavior; collapse a panel if it's smaller than half of its min-size
58
157
 
59
158
  ## 0.0.46
60
- * SSR: Avoid accessing default storage (`localStorage`) during initialization; avoid throwing error in browsers that have 3rd party cookies/storage disabled.
159
+
160
+ - SSR: Avoid accessing default storage (`localStorage`) during initialization; avoid throwing error in browsers that have 3rd party cookies/storage disabled.
61
161
 
62
162
  ## 0.0.45
63
- * SSR: Avoid layout shift by using `defaultSize` to set initial `flex-grow` style
64
- * SSR: Warn if `Panel` is server-rendered without a `defaultSize` prop
65
- * [#135](https://github.com/bvaughn/react-resizable-panels/issues/135): Support RTL layouts
163
+
164
+ - SSR: Avoid layout shift by using `defaultSize` to set initial `flex-grow` style
165
+ - SSR: Warn if `Panel` is server-rendered without a `defaultSize` prop
166
+ - [#135](https://github.com/bvaughn/react-resizable-panels/issues/135): Support RTL layouts
66
167
 
67
168
  ## 0.0.44
68
- * [#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
169
+
170
+ - [#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
69
171
 
70
172
  ## 0.0.43
71
- * Add imperative `getLayout` API to `PanelGroup`
72
- * [#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
173
+
174
+ - Add imperative `getLayout` API to `PanelGroup`
175
+ - [#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
73
176
 
74
177
  ## 0.0.42
75
- * Change cursor style from `col-resize`/`row-resize` to `ew-resize`/`ns-resize` to better match cursor style at edges of a panel.
178
+
179
+ - Change cursor style from `col-resize`/`row-resize` to `ew-resize`/`ns-resize` to better match cursor style at edges of a panel.
76
180
 
77
181
  ## 0.0.41
78
- * Add imperative `setLayout` API for `PanelGroup`.
182
+
183
+ - Add imperative `setLayout` API for `PanelGroup`.
79
184
 
80
185
  ## 0.0.40
81
- * README changes
186
+
187
+ - README changes
82
188
 
83
189
  ## 0.0.39
84
- * [#118](https://github.com/bvaughn/react-resizable-panels/issues/118): Fix import regression from 0.0.38.
190
+
191
+ - [#118](https://github.com/bvaughn/react-resizable-panels/issues/118): Fix import regression from 0.0.38.
85
192
 
86
193
  ## 0.0.38
87
- * [#117](https://github.com/bvaughn/react-resizable-panels/issues/117): `Panel` collapse behavior works better near viewport edges.
88
- * [#115](https://github.com/bvaughn/react-resizable-panels/pull/115): `PanelResizeHandle` logic calls `event.preventDefault` for events it handles.
89
- * [#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.)
194
+
195
+ - [#117](https://github.com/bvaughn/react-resizable-panels/issues/117): `Panel` collapse behavior works better near viewport edges.
196
+ - [#115](https://github.com/bvaughn/react-resizable-panels/pull/115): `PanelResizeHandle` logic calls `event.preventDefault` for events it handles.
197
+ - [#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.)
90
198
 
91
199
  ## 0.0.37
92
- * [#94](https://github.com/bvaughn/react-resizable-panels/issues/94): Add `onDragging` prop to `PanelResizeHandle` to be notified of when dragging starts/stops.
200
+
201
+ - [#94](https://github.com/bvaughn/react-resizable-panels/issues/94): Add `onDragging` prop to `PanelResizeHandle` to be notified of when dragging starts/stops.
93
202
 
94
203
  ## 0.0.36
95
- * [#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`.
204
+
205
+ - [#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`.
96
206
 
97
207
  ## 0.0.35
98
- * [#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.
208
+
209
+ - [#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.
210
+
99
211
  ## 0.0.34
100
- * [#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).
101
- * [#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.
102
- * [#86](https://github.com/bvaughn/react-resizable-panels/issues/86): Layout changes triggered by keyboard no longer affect the global cursor.
103
- * Fixed small cursor regression introduced in 0.0.33.
212
+
213
+ - [#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).
214
+ - [#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.
215
+ - [#86](https://github.com/bvaughn/react-resizable-panels/issues/86): Layout changes triggered by keyboard no longer affect the global cursor.
216
+ - Fixed small cursor regression introduced in 0.0.33.
104
217
 
105
218
  ## 0.0.33
106
- * Collapsible `Panel`s will always call `onCollapse` on-mount regardless of their collapsed state.
107
- * Fixed regression in b5d3ec1 where arrow keys may fail to expand a collapsed panel.
219
+
220
+ - Collapsible `Panel`s will always call `onCollapse` on-mount regardless of their collapsed state.
221
+ - Fixed regression in b5d3ec1 where arrow keys may fail to expand a collapsed panel.
108
222
 
109
223
  ## 0.0.32
110
- * [#75](https://github.com/bvaughn/react-resizable-panels/issues/75): Ensure `Panel` and `PanelGroup` callbacks are always called after mounting.
224
+
225
+ - [#75](https://github.com/bvaughn/react-resizable-panels/issues/75): Ensure `Panel` and `PanelGroup` callbacks are always called after mounting.
111
226
 
112
227
  ## 0.0.31
113
- * [#71](https://github.com/bvaughn/react-resizable-panels/issues/71): Added `getSize` and `getCollapsed` to imperative API exposed by `Panel`.
114
- * [#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.
115
- * Fix edge case when expanding a panel via imperative API that was collapsed by user drag
228
+
229
+ - [#71](https://github.com/bvaughn/react-resizable-panels/issues/71): Added `getSize` and `getCollapsed` to imperative API exposed by `Panel`.
230
+ - [#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.
231
+ - Fix edge case when expanding a panel via imperative API that was collapsed by user drag
116
232
 
117
233
  ## 0.0.30
118
- * [#68](https://github.com/bvaughn/react-resizable-panels/pull/68): Reduce volume/frequency of local storage writes for `PanelGroup`s configured to _auto-save_.
119
- * 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).
234
+
235
+ - [#68](https://github.com/bvaughn/react-resizable-panels/pull/68): Reduce volume/frequency of local storage writes for `PanelGroup`s configured to _auto-save_.
236
+ - 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).
120
237
 
121
238
  ## 0.0.29
122
- * [#58](https://github.com/bvaughn/react-resizable-panels/pull/58): Add imperative `collapse`, `expand`, and `resize` methods to `Panel`.
123
- * [#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.
124
- * [#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.
239
+
240
+ - [#58](https://github.com/bvaughn/react-resizable-panels/pull/58): Add imperative `collapse`, `expand`, and `resize` methods to `Panel`.
241
+ - [#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.
242
+ - [#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.
125
243
 
126
244
  ## 0.0.28
127
- * [#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.
245
+
246
+ - [#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.
128
247
 
129
248
  ## 0.0.27
130
- * [#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).
249
+
250
+ - [#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).
131
251
 
132
252
  ## 0.0.26
133
- * Reduce style re-calc from resize-in-progress cursor style.
253
+
254
+ - Reduce style re-calc from resize-in-progress cursor style.
134
255
 
135
256
  ## 0.0.25
136
- * 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).
257
+
258
+ - 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).
137
259
 
138
260
  ## 0.0.24
139
- * [#49](https://github.com/bvaughn/react-resizable-panels/issues/49): Change cursor based on min/max boundaries.
261
+
262
+ - [#49](https://github.com/bvaughn/react-resizable-panels/issues/49): Change cursor based on min/max boundaries.
140
263
 
141
264
  ## 0.0.23
142
- * [#40](https://github.com/bvaughn/react-resizable-panels/issues/40): Add optional `maxSize` prop to `Panel`.
143
- * [#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.
144
- * [#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.
265
+
266
+ - [#40](https://github.com/bvaughn/react-resizable-panels/issues/40): Add optional `maxSize` prop to `Panel`.
267
+ - [#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.
268
+ - [#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.
145
269
 
146
270
  ## 0.0.22
147
- * Replaced the `"ew-resize"` and `"ns-resize"` cursor style with `"col-resize"` and `"row-resize"`.
271
+
272
+ - Replaced the `"ew-resize"` and `"ns-resize"` cursor style with `"col-resize"` and `"row-resize"`.
148
273
 
149
274
  ## 0.0.21
150
- * [#39](https://github.com/bvaughn/react-resizable-panels/issues/39): Fixed regression in TypeScript defs introduced in `0.0.20`
275
+
276
+ - [#39](https://github.com/bvaughn/react-resizable-panels/issues/39): Fixed regression in TypeScript defs introduced in `0.0.20`
151
277
 
152
278
  ## 0.0.20
153
- * Add `displayName` to `Panel`, `PanelGroup`, `PanelGroupContext`, and `PanelResizeHandle` to work around ParcelJS scope hoisting renaming.
279
+
280
+ - Add `displayName` to `Panel`, `PanelGroup`, `PanelGroupContext`, and `PanelResizeHandle` to work around ParcelJS scope hoisting renaming.
154
281
 
155
282
  ## 0.0.19
156
- * Add optional `style` and `tagName` props to `Panel`, `PanelGroup`, and `PanelResizeHandle` to simplify custom styling.
157
- * Add `data-panel-group-direction` attribute to `PanelGroup` and `PanelResizeHandle` to simplify custom drag handle styling.
283
+
284
+ - Add optional `style` and `tagName` props to `Panel`, `PanelGroup`, and `PanelResizeHandle` to simplify custom styling.
285
+ - Add `data-panel-group-direction` attribute to `PanelGroup` and `PanelResizeHandle` to simplify custom drag handle styling.
158
286
 
159
287
  ## 0.0.18
160
- * `Panel` and `PanelGroup` now use `overflow: hidden` style by default to avoid potential scrollbar flickers while resizing.
288
+
289
+ - `Panel` and `PanelGroup` now use `overflow: hidden` style by default to avoid potential scrollbar flickers while resizing.
161
290
 
162
291
  ## 0.0.17
163
- * Bug fix: `Panel` styles include `flex-basis`, `flex-shrink`, and `overflow` so that their sizes are not unintentionally impacted by their content.
292
+
293
+ - Bug fix: `Panel` styles include `flex-basis`, `flex-shrink`, and `overflow` so that their sizes are not unintentionally impacted by their content.
164
294
 
165
295
  ## 0.0.16
166
- * Bug fix: Resize handle ARIA attributes now rendering proper min/max/now values for Window Splitter.
167
- * Bug fix: Up/down arrows are ignored for _horizontal_ layouts and left/right arrows are ignored for _vertical_ layouts as per Window Splitter spec.
168
- * [#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.
296
+
297
+ - Bug fix: Resize handle ARIA attributes now rendering proper min/max/now values for Window Splitter.
298
+ - Bug fix: Up/down arrows are ignored for _horizontal_ layouts and left/right arrows are ignored for _vertical_ layouts as per Window Splitter spec.
299
+ - [#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.
169
300
 
170
301
  ## 0.0.15
171
- * [#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).
302
+
303
+ - [#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).
172
304
 
173
305
  ## 0.0.14
174
- * [#23](https://github.com/bvaughn/react-resizable-panels/issues/23): Fix small regression with `autoSaveId` that was introduced with non-deterministic `useId` ids.
306
+
307
+ - [#23](https://github.com/bvaughn/react-resizable-panels/issues/23): Fix small regression with `autoSaveId` that was introduced with non-deterministic `useId` ids.
175
308
 
176
309
  ## 0.0.13
177
- * [#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.
178
- * `PanelGroup` component now sets `position: relative` style by default, as well as an explicit `height` and `width` style.
310
+
311
+ - [#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.
312
+ - `PanelGroup` component now sets `position: relative` style by default, as well as an explicit `height` and `width` style.
179
313
 
180
314
  ## 0.0.12
181
- * Bug fix: [#19](https://github.com/bvaughn/react-resizable-panels/issues/19): Fix initial "jump" that could occur when dragging started.
182
- * Bug fix: [#20](https://github.com/bvaughn/react-resizable-panels/issues/20): Stop resize/drag operation on "contextmenu" event.
183
- * Bug fix: [#21](https://github.com/bvaughn/react-resizable-panels/issues/21): Disable text selection while dragging active (Firefox only)
315
+
316
+ - Bug fix: [#19](https://github.com/bvaughn/react-resizable-panels/issues/19): Fix initial "jump" that could occur when dragging started.
317
+ - Bug fix: [#20](https://github.com/bvaughn/react-resizable-panels/issues/20): Stop resize/drag operation on "contextmenu" event.
318
+ - Bug fix: [#21](https://github.com/bvaughn/react-resizable-panels/issues/21): Disable text selection while dragging active (Firefox only)
184
319
 
185
320
  ## 0.0.11
186
- * 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!)
187
- * Bug fix: Resize handles are no longer left in a "focused" state after a touch/mouse event.
321
+
322
+ - 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!)
323
+ - Bug fix: Resize handles are no longer left in a "focused" state after a touch/mouse event.
188
324
 
189
325
  ## 0.0.10
190
- * Corrupt build artifact. Don't use this version.
326
+
327
+ - Corrupt build artifact. Don't use this version.
191
328
 
192
329
  ## 0.0.9
193
- * [#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/)
330
+
331
+ - [#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/)
194
332
 
195
333
  ## 0.0.8
196
- * [#7](https://github.com/bvaughn/react-resizable-panels/issues/7): Support "touch" events for mobile compatibility.
334
+
335
+ - [#7](https://github.com/bvaughn/react-resizable-panels/issues/7): Support "touch" events for mobile compatibility.
197
336
 
198
337
  ## 0.0.7
199
- * 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.
338
+
339
+ - 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.
340
+
200
341
  ## 0.0.6
201
- * [#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.
342
+
343
+ - [#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.
344
+
202
345
  ## 0.0.5
203
- * TypeScript props type fix for `PanelGroup`'s `children` prop.
346
+
347
+ - TypeScript props type fix for `PanelGroup`'s `children` prop.
204
348
 
205
349
  ## 0.0.4
206
- * [#8](https://github.com/bvaughn/react-resizable-panels/issues/8): Added optional `order` prop to `Panel` to improve conditional rendering.
350
+
351
+ - [#8](https://github.com/bvaughn/react-resizable-panels/issues/8): Added optional `order` prop to `Panel` to improve conditional rendering.
207
352
 
208
353
  ## 0.0.3
209
- * [#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.
354
+
355
+ - [#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.
210
356
 
211
357
  ## 0.0.2
212
- * Documentation-only update.
358
+
359
+ - Documentation-only update.
213
360
 
214
361
  ## 0.0.1
215
- * Initial release.
362
+
363
+ - Initial release.