react-resizable-panels 0.0.36 → 0.0.38
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.
- package/CHANGELOG.md +8 -0
- package/README.md +23 -19
- package/dist/react-resizable-panels.d.ts +3 -1
- package/dist/react-resizable-panels.d.ts.map +1 -1
- package/dist/react-resizable-panels.js +43 -10
- package/dist/react-resizable-panels.js.map +1 -1
- package/dist/react-resizable-panels.module.js +44 -11
- package/dist/react-resizable-panels.module.js.map +1 -1
- package/package.json +1 -1
- package/src/PanelResizeHandle.ts +55 -12
- package/src/hooks/useUniqueId.ts +8 -1
- package/src/hooks/useWindowSplitterBehavior.ts +14 -0
- package/src/types.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.0.38
|
|
4
|
+
* [#117](https://github.com/bvaughn/react-resizable-panels/issues/117): `Panel` collapse behavior works better near viewport edges.
|
|
5
|
+
* [#115](https://github.com/bvaughn/react-resizable-panels/pull/115): `PanelResizeHandle` logic calls `event.preventDefault` for events it handles.
|
|
6
|
+
* [#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.)
|
|
7
|
+
|
|
8
|
+
## 0.0.37
|
|
9
|
+
* [#94](https://github.com/bvaughn/react-resizable-panels/issues/94): Add `onDragging` prop to `PanelResizeHandle` to be notified of when dragging starts/stops.
|
|
10
|
+
|
|
3
11
|
## 0.0.36
|
|
4
12
|
* [#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`.
|
|
5
13
|
|
package/README.md
CHANGED
|
@@ -22,18 +22,18 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
|
|
|
22
22
|
## Props
|
|
23
23
|
|
|
24
24
|
### `PanelGroup`
|
|
25
|
-
| prop | type
|
|
26
|
-
| :--------------------------------- |
|
|
27
|
-
| `autoSaveId` | `?string`
|
|
28
|
-
| `children` | `ReactNode`
|
|
29
|
-
| `className` | `?string`
|
|
25
|
+
| prop | type | description
|
|
26
|
+
| :--------------------------------- | :--------------------------- | :---
|
|
27
|
+
| `autoSaveId` | `?string` | Unique id used to auto-save group arrangement via `localStorage`
|
|
28
|
+
| `children` | `ReactNode` | Arbitrary React element(s)
|
|
29
|
+
| `className` | `?string` | Class name to attach to root element
|
|
30
30
|
| `direction` | `"horizontal" \| "vertical"` | Group orientation
|
|
31
|
-
| `disablePointerEventsDuringResize` | `?boolean = false`
|
|
32
|
-
| `id` | `?string`
|
|
33
|
-
| `onLayout`
|
|
34
|
-
| `storage` | `?PanelGroupStorage`
|
|
35
|
-
| `style` | `?CSSProperties`
|
|
36
|
-
| `tagName` | `?string = "div"`
|
|
31
|
+
| `disablePointerEventsDuringResize` | `?boolean = false` | Disable pointer events inside `Panel`s during resize <sup>2</sup>
|
|
32
|
+
| `id` | `?string` | Group id; falls back to `useId` when not provided
|
|
33
|
+
| `onLayout` | `?(sizes: number[]) => void` | Called when group layout changes
|
|
34
|
+
| `storage` | `?PanelGroupStorage` | Custom storage API; defaults to `localStorage` <sup>1</sup>
|
|
35
|
+
| `style` | `?CSSProperties` | CSS style to attach to root element
|
|
36
|
+
| `tagName` | `?string = "div"` | HTML element tag name for root element
|
|
37
37
|
|
|
38
38
|
<sup>1</sup>: Storage API must define the following _synchronous_ methods:
|
|
39
39
|
* `getItem: (name:string) => string`
|
|
@@ -69,11 +69,15 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
|
|
|
69
69
|
| `resize(percentage: number)` | Resize panel to the specified _percentage_ (`1 - 100`).
|
|
70
70
|
|
|
71
71
|
### `PanelResizeHandle`
|
|
72
|
-
| prop | type
|
|
73
|
-
| :------------ |
|
|
74
|
-
| `children` | `?ReactNode`
|
|
75
|
-
| `className` | `?string`
|
|
76
|
-
| `disabled` | `?boolean`
|
|
77
|
-
| `id` | `?string`
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
72
|
+
| prop | type | description
|
|
73
|
+
| :------------ | :------------------------------- | :---
|
|
74
|
+
| `children` | `?ReactNode` | Custom drag UI; can be any arbitrary React element(s)
|
|
75
|
+
| `className` | `?string` | Class name to attach to root element
|
|
76
|
+
| `disabled` | `?boolean` | Disable drag handle
|
|
77
|
+
| `id` | `?string` | Resize handle id (unique within group); falls back to `useId` when not provided
|
|
78
|
+
| `onDragging` | `?(isDragging: boolean) => void` | Called when group layout changes
|
|
79
|
+
| `style` | `?CSSProperties` | CSS style to attach to root element
|
|
80
|
+
| `tagName` | `?string = "div"` | HTML element tag name for root element
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
#### If you like this project, [buy me a coffee](http://givebrian.coffee/).
|
|
@@ -7,6 +7,7 @@ export type PanelGroupStorage = {
|
|
|
7
7
|
type PanelGroupOnLayout = (sizes: number[]) => void;
|
|
8
8
|
type PanelOnCollapse = (collapsed: boolean) => void;
|
|
9
9
|
type PanelOnResize = (size: number) => void;
|
|
10
|
+
type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
|
|
10
11
|
type PanelData = {
|
|
11
12
|
callbacksRef: RefObject<{
|
|
12
13
|
onCollapse: PanelOnCollapse | null;
|
|
@@ -73,9 +74,10 @@ export type PanelResizeHandleProps = {
|
|
|
73
74
|
className?: string;
|
|
74
75
|
disabled?: boolean;
|
|
75
76
|
id?: string | null;
|
|
77
|
+
onDragging?: PanelResizeHandleOnDragging;
|
|
76
78
|
style?: CSSProperties;
|
|
77
79
|
tagName?: ElementType;
|
|
78
80
|
};
|
|
79
|
-
export function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, style: styleFromProps, tagName: Type, }: PanelResizeHandleProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
81
|
+
export function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, onDragging, style: styleFromProps, tagName: Type, }: PanelResizeHandleProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
80
82
|
|
|
81
83
|
//# sourceMappingURL=react-resizable-panels.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AEEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,gCAAgC;IAC9B,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,0BAAiC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AAC3D,uBAA8B,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;AAC3D,qBAA4B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"mappings":"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","sources":["packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/cursor.ts","packages/react-resizable-panels/src/src/utils/debounce.ts","packages/react-resizable-panels/src/src/utils/arrays.ts","packages/react-resizable-panels/src/src/PanelGroup.ts","packages/react-resizable-panels/src/src/PanelResizeHandle.ts","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\nimport type { PanelGroupStorage } from \"./types\";\n\nexport {\n Panel,\n PanelGroup,\n PanelResizeHandle,\n\n // TypeScript types\n ImperativePanelHandle,\n PanelGroupProps,\n PanelGroupStorage,\n PanelProps,\n PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
|
|
@@ -15,9 +15,13 @@ var $129b5b9a317dcc10$export$2e2bcd8739ae039 = $129b5b9a317dcc10$var$useIsomorph
|
|
|
15
15
|
|
|
16
16
|
|
|
17
17
|
|
|
18
|
+
|
|
19
|
+
// Support React versions older than 18.0
|
|
20
|
+
// Workaround for https://github.com/webpack/webpack/issues/14814
|
|
21
|
+
const $b1693d8d8f570e9c$var$useId = $2IMI0$react["useId".toString()];
|
|
18
22
|
let $b1693d8d8f570e9c$var$counter = 0;
|
|
19
23
|
function $b1693d8d8f570e9c$export$2e2bcd8739ae039(idFromParams = null) {
|
|
20
|
-
const idFromUseId = typeof
|
|
24
|
+
const idFromUseId = typeof $b1693d8d8f570e9c$var$useId === "function" ? $b1693d8d8f570e9c$var$useId() : null;
|
|
21
25
|
const idRef = (0, $2IMI0$react.useRef)(idFromParams || idFromUseId || null);
|
|
22
26
|
if (idRef.current === null) idRef.current = "" + $b1693d8d8f570e9c$var$counter++;
|
|
23
27
|
return idRef.current;
|
|
@@ -457,9 +461,11 @@ function $a695670cc57a5969$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
457
461
|
handle.setAttribute("aria-valuemin", "" + Math.round(ariaValueMin));
|
|
458
462
|
handle.setAttribute("aria-valuenow", "" + Math.round(parseInt(flexGrow)));
|
|
459
463
|
const onKeyDown = (event)=>{
|
|
464
|
+
if (event.defaultPrevented) return;
|
|
460
465
|
switch(event.key){
|
|
461
466
|
case "Enter":
|
|
462
467
|
{
|
|
468
|
+
event.preventDefault();
|
|
463
469
|
const index = panelsArray.findIndex((panel)=>panel.id === idBefore);
|
|
464
470
|
if (index >= 0) {
|
|
465
471
|
const panelData = panelsArray[index];
|
|
@@ -502,6 +508,7 @@ function $a695670cc57a5969$export$33b0bea6ac3ffb03({ disabled: disabled , handle
|
|
|
502
508
|
const handleElement = (0, $cda3cc4b1114cf23$export$2e27d3a347680388)(handleId);
|
|
503
509
|
if (handleElement == null) return;
|
|
504
510
|
const onKeyDown = (event)=>{
|
|
511
|
+
if (event.defaultPrevented) return;
|
|
505
512
|
switch(event.key){
|
|
506
513
|
case "ArrowDown":
|
|
507
514
|
case "ArrowLeft":
|
|
@@ -509,10 +516,12 @@ function $a695670cc57a5969$export$33b0bea6ac3ffb03({ disabled: disabled , handle
|
|
|
509
516
|
case "ArrowUp":
|
|
510
517
|
case "End":
|
|
511
518
|
case "Home":
|
|
519
|
+
event.preventDefault();
|
|
512
520
|
resizeHandler(event);
|
|
513
521
|
break;
|
|
514
522
|
case "F6":
|
|
515
523
|
{
|
|
524
|
+
event.preventDefault();
|
|
516
525
|
const handles = (0, $cda3cc4b1114cf23$export$8d0cd3c32ddc045e)();
|
|
517
526
|
const index = (0, $cda3cc4b1114cf23$export$96a40be80fb6c3c8)(handleId);
|
|
518
527
|
const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
|
|
@@ -943,8 +952,15 @@ $cec4cafe75f3db78$export$1d05749f6f573bb.displayName = "PanelGroup";
|
|
|
943
952
|
|
|
944
953
|
|
|
945
954
|
|
|
946
|
-
function $3a26a712c9163348$export$8829ecf6b6b15484({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div" }) {
|
|
955
|
+
function $3a26a712c9163348$export$8829ecf6b6b15484({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , onDragging: onDragging = null , style: styleFromProps = {} , tagName: Type = "div" }) {
|
|
947
956
|
const divElementRef = (0, $2IMI0$react.useRef)(null);
|
|
957
|
+
// Use a ref to guard against users passing inline props
|
|
958
|
+
const callbacksRef = (0, $2IMI0$react.useRef)({
|
|
959
|
+
onDragging: onDragging
|
|
960
|
+
});
|
|
961
|
+
(0, $2IMI0$react.useEffect)(()=>{
|
|
962
|
+
callbacksRef.current.onDragging = onDragging;
|
|
963
|
+
});
|
|
948
964
|
const panelGroupContext = (0, $2IMI0$react.useContext)((0, $b9cf028330e7f243$export$7d8c6d083caec74a));
|
|
949
965
|
if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
|
|
950
966
|
const { activeHandleId: activeHandleId , direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging } = panelGroupContext;
|
|
@@ -958,6 +974,8 @@ function $3a26a712c9163348$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
958
974
|
const div = divElementRef.current;
|
|
959
975
|
div.blur();
|
|
960
976
|
stopDragging();
|
|
977
|
+
const { onDragging: onDragging } = callbacksRef.current;
|
|
978
|
+
if (onDragging) onDragging(false);
|
|
961
979
|
}, [
|
|
962
980
|
stopDragging
|
|
963
981
|
]);
|
|
@@ -977,15 +995,22 @@ function $3a26a712c9163348$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
977
995
|
const onMove = (event)=>{
|
|
978
996
|
resizeHandler(event);
|
|
979
997
|
};
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
998
|
+
const onMouseLeave = (event)=>{
|
|
999
|
+
resizeHandler(event);
|
|
1000
|
+
};
|
|
1001
|
+
const divElement = divElementRef.current;
|
|
1002
|
+
const targetDocument = divElement.ownerDocument;
|
|
1003
|
+
targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
|
|
1004
|
+
targetDocument.body.addEventListener("mousemove", onMove);
|
|
1005
|
+
targetDocument.body.addEventListener("touchmove", onMove);
|
|
1006
|
+
targetDocument.body.addEventListener("mouseleave", onMouseLeave);
|
|
983
1007
|
window.addEventListener("mouseup", stopDraggingAndBlur);
|
|
984
1008
|
window.addEventListener("touchend", stopDraggingAndBlur);
|
|
985
1009
|
return ()=>{
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
1010
|
+
targetDocument.body.removeEventListener("contextmenu", stopDraggingAndBlur);
|
|
1011
|
+
targetDocument.body.removeEventListener("mousemove", onMove);
|
|
1012
|
+
targetDocument.body.removeEventListener("touchmove", onMove);
|
|
1013
|
+
targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
|
|
989
1014
|
window.removeEventListener("mouseup", stopDraggingAndBlur);
|
|
990
1015
|
window.removeEventListener("touchend", stopDraggingAndBlur);
|
|
991
1016
|
};
|
|
@@ -1016,11 +1041,19 @@ function $3a26a712c9163348$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
1016
1041
|
"data-panel-resize-handle-id": resizeHandleId,
|
|
1017
1042
|
onBlur: ()=>setIsFocused(false),
|
|
1018
1043
|
onFocus: ()=>setIsFocused(true),
|
|
1019
|
-
onMouseDown: (event)=>
|
|
1044
|
+
onMouseDown: (event)=>{
|
|
1045
|
+
startDragging(resizeHandleId, event.nativeEvent);
|
|
1046
|
+
const { onDragging: onDragging } = callbacksRef.current;
|
|
1047
|
+
if (onDragging) onDragging(true);
|
|
1048
|
+
},
|
|
1020
1049
|
onMouseUp: stopDraggingAndBlur,
|
|
1021
1050
|
onTouchCancel: stopDraggingAndBlur,
|
|
1022
1051
|
onTouchEnd: stopDraggingAndBlur,
|
|
1023
|
-
onTouchStart: (event)=>
|
|
1052
|
+
onTouchStart: (event)=>{
|
|
1053
|
+
startDragging(resizeHandleId, event.nativeEvent);
|
|
1054
|
+
const { onDragging: onDragging } = callbacksRef.current;
|
|
1055
|
+
if (onDragging) onDragging(true);
|
|
1056
|
+
},
|
|
1024
1057
|
ref: divElementRef,
|
|
1025
1058
|
role: "separator",
|
|
1026
1059
|
style: {
|