react-resizable-panels 0.0.33 → 0.0.35
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 +8 -1
- package/dist/react-resizable-panels.d.ts +6 -1
- package/dist/react-resizable-panels.d.ts.map +1 -1
- package/dist/react-resizable-panels.js +264 -208
- package/dist/react-resizable-panels.js.map +1 -1
- package/dist/react-resizable-panels.module.js +262 -206
- package/dist/react-resizable-panels.module.js.map +1 -1
- package/package.json +5 -2
- package/src/PanelGroup.ts +112 -29
- package/src/hooks/useWindowSplitterBehavior.ts +2 -1
- package/src/index.ts +2 -0
- package/src/types.ts +5 -0
- package/src/utils/arrays.ts +13 -0
- package/src/utils/coordinates.ts +27 -8
- package/src/utils/group.ts +40 -23
- package/src/utils/serialization.ts +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.0.35
|
|
4
|
+
* [#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.
|
|
5
|
+
## 0.0.34
|
|
6
|
+
* [#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).
|
|
7
|
+
* [#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.
|
|
8
|
+
* [#86](https://github.com/bvaughn/react-resizable-panels/issues/86): Layout changes triggered by keyboard no longer affect the global cursor.
|
|
9
|
+
* Fixed small cursor regression introduced in 0.0.33.
|
|
10
|
+
|
|
3
11
|
## 0.0.33
|
|
4
12
|
* Collapsible `Panel`s will always call `onCollapse` on-mount regardless of their collapsed state.
|
|
5
13
|
* Fixed regression in b5d3ec1 where arrow keys may fail to expand a collapsed panel.
|
package/README.md
CHANGED
|
@@ -30,9 +30,14 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
|
|
|
30
30
|
| `direction` | `"horizontal" \| "vertical"` | Group orientation
|
|
31
31
|
| `id` | `?string` | Group id; falls back to `useId` when not provided
|
|
32
32
|
| `onLayout` | `?(sizes: number[]) => void` | Called when group layout changes
|
|
33
|
+
| `storage` | `?PanelGroupStorage` | Custom storage API; defaults to `localStorage` <sup>1</sup>
|
|
33
34
|
| `style` | `?CSSProperties` | CSS style to attach to root element
|
|
34
35
|
| `tagName` | `?string = "div"` | HTML element tag name for root element
|
|
35
36
|
|
|
37
|
+
<sup>1</sup>: Storage API must define the following _synchronous_ methods:
|
|
38
|
+
* `getItem: (name:string) => string`
|
|
39
|
+
* `setItem: (name: string, value: string) => void`
|
|
40
|
+
|
|
36
41
|
### `Panel`
|
|
37
42
|
| prop | type | description
|
|
38
43
|
| :------------ | :------------------------------ | :---
|
|
@@ -44,11 +49,13 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
|
|
|
44
49
|
| `maxSize` | `?number = 100` | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`
|
|
45
50
|
| `minSize` | `?number = 10` | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`
|
|
46
51
|
| `onCollapse` | `?(collapsed: boolean) => void` | Called when panel is collapsed; `collapsed` boolean parameter reflecting the new state
|
|
47
|
-
| `onResize` | `?(size: number) => void` | Called when panel is resized; `size` parameter is a numeric value between 1-100
|
|
52
|
+
| `onResize` | `?(size: number) => void` | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup>
|
|
48
53
|
| `order` | `?number` | Order of panel within group; required for groups with conditionally rendered panels
|
|
49
54
|
| `style` | `?CSSProperties` | CSS style to attach to root element
|
|
50
55
|
| `tagName` | `?string = "div"` | HTML element tag name for root element
|
|
51
56
|
|
|
57
|
+
<sup>1</sup>: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.
|
|
58
|
+
|
|
52
59
|
`Panel` components also expose an imperative API for manual resizing:
|
|
53
60
|
| method | description
|
|
54
61
|
| :--------------------------- | :---
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { RefObject, CSSProperties, ElementType, ReactNode } from "react";
|
|
2
2
|
type Direction = "horizontal" | "vertical";
|
|
3
|
+
export type PanelGroupStorage = {
|
|
4
|
+
getItem(name: string): string | null;
|
|
5
|
+
setItem(name: string, value: string): void;
|
|
6
|
+
};
|
|
3
7
|
type PanelGroupOnLayout = (sizes: number[]) => void;
|
|
4
8
|
type PanelOnCollapse = (collapsed: boolean) => void;
|
|
5
9
|
type PanelOnResize = (size: number) => void;
|
|
@@ -45,10 +49,11 @@ export type PanelGroupProps = {
|
|
|
45
49
|
direction: Direction;
|
|
46
50
|
id?: string | null;
|
|
47
51
|
onLayout?: PanelGroupOnLayout;
|
|
52
|
+
storage?: PanelGroupStorage;
|
|
48
53
|
style?: CSSProperties;
|
|
49
54
|
tagName?: ElementType;
|
|
50
55
|
};
|
|
51
|
-
export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, id: idFromProps, onLayout, style: styleFromProps, tagName: Type, }: PanelGroupProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
|
|
56
|
+
export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, id: idFromProps, onLayout, storage, style: styleFromProps, tagName: Type, }: PanelGroupProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
|
|
52
57
|
activeHandleId: string;
|
|
53
58
|
collapsePanel: (id: string) => void;
|
|
54
59
|
direction: "horizontal" | "vertical";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AEEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,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;AAEnD,iBAAwB;IACtB,YAAY,EAAE,UAAU;QACtB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;QACnC,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAC;KAChC,CAAC,CAAC;IACH,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,mBAA0B,aAAa,GAAG,UAAU,GAAG,UAAU,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"}
|