react-resizable-panels 0.0.54 → 0.0.56

package/README.md

@@ -1,11 +1,12 @@
 # react-resizable-panels
+
 React components for resizable panel groups/layouts
 
 ```jsx
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 <PanelGroup autoSaveId="example" direction="horizontal">
-  <Panel defaultSize={25}>
+  <Panel defaultSizePercentage={25}>
     <SourcesExplorer />
   </Panel>
   <PanelResizeHandle />
@@ -13,10 +14,10 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
     <SourceViewer />
   </Panel>
   <PanelResizeHandle />
-  <Panel defaultSize={25}>
+  <Panel defaultSizePercentage={25}>
     <Console />
   </Panel>
-</PanelGroup>
+</PanelGroup>;
 ```
 
 ### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)
@@ -24,68 +25,73 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 ## Props
 
 ### `PanelGroup`
-| prop                               | type                         | description
-| :--------------------------------- | :--------------------------- | :---
-| `autoSaveId`                       | `?string`                    | Unique id used to auto-save group arrangement via `localStorage`
-| `children`                         | `ReactNode`                  | Arbitrary React element(s)
-| `className`                        | `?string`                    | Class name to attach to root element
-| `direction`                        | `"horizontal" \| "vertical"` | Group orientation
-| `disablePointerEventsDuringResize` | `?boolean = false`           | Disable pointer events inside `Panel`s during resize <sup>2</sup>
-| `id`                               | `?string`                    | Group id; falls back to `useId` when not provided
-| `onLayout`                         | `?(sizes: number[]) => void` | Called when group layout changes
-| `storage`                          | `?PanelGroupStorage`         | Custom storage API; defaults to `localStorage` <sup>1</sup>
-| `style`                            | `?CSSProperties`             | CSS style to attach to root element
-| `tagName`                          | `?string = "div"`            | HTML element tag name for root element
+
+| prop                               | type                         | description                                                       |
+| :--------------------------------- | :--------------------------- | :---------------------------------------------------------------- |
+| `autoSaveId`                       | `?string`                    | Unique id used to auto-save group arrangement via `localStorage`  |
+| `children`                         | `ReactNode`                  | Arbitrary React element(s)                                        |
+| `className`                        | `?string`                    | Class name to attach to root element                              |
+| `direction`                        | `"horizontal" \| "vertical"` | Group orientation                                                 |
+| `disablePointerEventsDuringResize` | `?boolean = false`           | Disable pointer events inside `Panel`s during resize <sup>2</sup> |
+| `id`                               | `?string`                    | Group id; falls back to `useId` when not provided                 |
+| `onLayout`                         | `?(sizes: number[]) => void` | Called when group layout changes                                  |
+| `storage`                          | `?PanelGroupStorage`         | Custom storage API; defaults to `localStorage` <sup>1</sup>       |
+| `style`                            | `?CSSProperties`             | CSS style to attach to root element                               |
+| `tagName`                          | `?string = "div"`            | HTML element tag name for root element                            |
 
 <sup>1</sup>: Storage API must define the following _synchronous_ methods:
-* `getItem: (name:string) => string`
-* `setItem: (name: string, value: string) => void`
 
- <sup>2</sup>: This behavior is disabled by default because it can interfere with scrollbar styles, but it can be useful in the edge case where a `Panel` contains an `<iframe>`
+- `getItem: (name:string) => string`
+- `setItem: (name: string, value: string) => void`
+
+<sup>2</sup>: This behavior is disabled by default because it can interfere with scrollbar styles, but it can be useful in the edge case where a `Panel` contains an `<iframe>`
 
 `PanelGroup` components also expose an imperative API for manual resizing:
-| method                            | description
+| method | description
 | :-------------------------------- | :---
 | `setLayout(panelSizes: number[])` | Resize panel group to the specified _panelSizes_ (`[1 - 100, ...]`).
 
 ### `Panel`
-| prop            | type                            | description
-| :-------------- | :------------------------------ | :---
-| `children`      | `ReactNode`                     | Arbitrary React element(s)
-| `className`     | `?string`                       | Class name to attach to root element
-| `collapsedSize` | `?number=0`                     | Panel should collapse to this size
-| `collapsible`   | `?boolean=false`                | Panel should collapse when resized beyond its `minSize`
-| `defaultSize`   | `?number`                       | Initial size of panel (numeric value between 1-100)
-| `id`            | `?string`                       | Panel id (unique within group); falls back to `useId` when not provided
-| `maxSize`       | `?number = 100`                 | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`
-| `minSize`       | `?number = 10`                  | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`
-| `onCollapse`    | `?(collapsed: boolean) => void` | Called when panel is collapsed; `collapsed` boolean parameter reflecting the new state
-| `onResize`      | `?(size: number) => void`       | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup>
-| `order`         | `?number`                       | Order of panel within group; required for groups with conditionally rendered panels
-| `style`         | `?CSSProperties`                | CSS style to attach to root element
-| `tagName`       | `?string = "div"`               | HTML element tag name for root element
+
+| prop            | type                            | description                                                                                   |
+| :-------------- | :------------------------------ | :-------------------------------------------------------------------------------------------- |
+| `children`      | `ReactNode`                     | Arbitrary React element(s)                                                                    |
+| `className`     | `?string`                       | Class name to attach to root element                                                          |
+| `collapsedSize` | `?number=0`                     | Panel should collapse to this size                                                            |
+| `collapsible`   | `?boolean=false`                | Panel should collapse when resized beyond its `minSize`                                       |
+| `defaultSize`   | `?number`                       | Initial size of panel (numeric value between 1-100)                                           |
+| `id`            | `?string`                       | Panel id (unique within group); falls back to `useId` when not provided                       |
+| `maxSize`       | `?number = 100`                 | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`              |
+| `minSize`       | `?number = 10`                  | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`               |
+| `onCollapse`    | `?(collapsed: boolean) => void` | Called when panel is collapsed; `collapsed` boolean parameter reflecting the new state        |
+| `onResize`      | `?(size: number) => void`       | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup> |
+| `order`         | `?number`                       | Order of panel within group; required for groups with conditionally rendered panels           |
+| `style`         | `?CSSProperties`                | CSS style to attach to root element                                                           |
+| `tagName`       | `?string = "div"`               | HTML element tag name for root element                                                        |
 
 <sup>1</sup>: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.
 
 `Panel` components also expose an imperative API for manual resizing:
-| method                       | description
+| method | description
 | :--------------------------- | :---
-| `collapse()`                 | If panel is `collapsible`, collapse it fully.
-| `expand()`                   | If panel is currently _collapsed_, expand it to its most recent size.
-| `getCollapsed(): boolean`    | Returns `true` if the panel is currently _collapsed_ (`size === 0`).
-| `getSize(): number`          | Returns the most recently commited size of the panel as a percentage (`1 - 100`).
+| `collapse()` | If panel is `collapsible`, collapse it fully.
+| `expand()` | If panel is currently _collapsed_, expand it to its most recent size.
+| `getCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`).
+| `getSize(): number` | Returns the most recently commited size of the panel as a percentage (`1 - 100`).
 | `resize(percentage: number)` | Resize panel to the specified _percentage_ (`1 - 100`).
 
 ### `PanelResizeHandle`
-| prop          | type                             | description
-| :------------ | :------------------------------- | :---
-| `children`    | `?ReactNode`                     | Custom drag UI; can be any arbitrary React element(s)
-| `className`   | `?string`                        | Class name to attach to root element
-| `disabled`    | `?boolean`                       | Disable drag handle
-| `id`          | `?string`                        | Resize handle id (unique within group); falls back to `useId` when not provided
-| `onDragging`  | `?(isDragging: boolean) => void` | Called when group layout changes
-| `style`       | `?CSSProperties`                 | CSS style to attach to root element
-| `tagName`     | `?string = "div"`                | HTML element tag name for root element
+
+| prop         | type                             | description                                                                     |
+| :----------- | :------------------------------- | :------------------------------------------------------------------------------ |
+| `children`   | `?ReactNode`                     | Custom drag UI; can be any arbitrary React element(s)                           |
+| `className`  | `?string`                        | Class name to attach to root element                                            |
+| `disabled`   | `?boolean`                       | Disable drag handle                                                             |
+| `id`         | `?string`                        | Resize handle id (unique within group); falls back to `useId` when not provided |
+| `onDragging` | `?(isDragging: boolean) => void` | Called when group layout changes                                                |
+| `style`      | `?CSSProperties`                 | CSS style to attach to root element                                             |
+| `tagName`    | `?string = "div"`                | HTML element tag name for root element                                          |
+
 ---
 
-#### If you like this project, [buy me a coffee](http://givebrian.coffee/).
+#### If you like this project, [buy me a coffee](http://givebrian.coffee/).

package/dist/declarations/src/Panel.d.ts

@@ -1,25 +1,81 @@
-import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js";
-import { PanelOnCollapse, PanelOnResize } from "./types.js";
-export type PanelProps = {
-    children?: ReactNode;
-    className?: string;
-    collapsedSize?: number;
-    collapsible?: boolean;
-    defaultSize?: number | null;
-    id?: string | null;
-    maxSize?: number;
-    minSize?: number;
-    onCollapse?: PanelOnCollapse | null;
-    onResize?: PanelOnResize | null;
-    order?: number | null;
-    style?: CSSProperties;
-    tagName?: ElementType;
+import { MixedSizes } from "./types.js";
+import { ElementType, ForwardedRef, PropsWithChildren } from "./vendor/react.js";
+export type PanelOnCollapse = () => void;
+export type PanelOnExpand = () => void;
+export type PanelOnResize = (mixedSizes: MixedSizes, prevMixedSizes: MixedSizes) => void;
+export type PanelCallbacks = {
+    onCollapse?: PanelOnCollapse;
+    onExpand?: PanelOnExpand;
+    onResize?: PanelOnResize;
+};
+export type PanelConstraints = {
+    collapsedSizePercentage?: number | undefined;
+    collapsedSizePixels?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSizePercentage?: number | undefined;
+    defaultSizePixels?: number | undefined;
+    maxSizePercentage?: number | undefined;
+    maxSizePixels?: number | undefined;
+    minSizePercentage?: number | undefined;
+    minSizePixels?: number | undefined;
+};
+export type PanelData = {
+    callbacks: PanelCallbacks;
+    constraints: PanelConstraints;
+    id: string;
+    idIsFromProps: boolean;
+    order: number | undefined;
 };
 export type ImperativePanelHandle = {
     collapse: () => void;
     expand: () => void;
-    getCollapsed(): boolean;
-    getSize(): number;
-    resize: (percentage: number) => void;
+    getId(): string;
+    getSize(): MixedSizes;
+    resize: (size: Partial<MixedSizes>) => void;
 };
-export declare const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<ImperativePanelHandle>>;
+export type PanelProps = PropsWithChildren<{
+    className?: string;
+    collapsedSizePercentage?: number | undefined;
+    collapsedSizePixels?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSizePercentage?: number | undefined;
+    defaultSizePixels?: number | undefined;
+    id?: string;
+    maxSizePercentage?: number | undefined;
+    maxSizePixels?: number | undefined;
+    minSizePercentage?: number | undefined;
+    minSizePixels?: number | undefined;
+    onCollapse?: PanelOnCollapse;
+    onExpand?: PanelOnExpand;
+    onResize?: PanelOnResize;
+    order?: number;
+    style?: object;
+    tagName?: ElementType;
+}>;
+export declare function PanelWithForwardedRef({ children, className: classNameFromProps, collapsedSizePercentage, collapsedSizePixels, collapsible, defaultSizePercentage, defaultSizePixels, forwardedRef, id: idFromProps, maxSizePercentage, maxSizePixels, minSizePercentage, minSizePixels, onCollapse, onExpand, onResize, order, style: styleFromProps, tagName: Type, }: PanelProps & {
+    forwardedRef: ForwardedRef<ImperativePanelHandle>;
+}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare namespace PanelWithForwardedRef {
+    var displayName: string;
+}
+export declare const Panel: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    collapsedSizePercentage?: number | undefined;
+    collapsedSizePixels?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSizePercentage?: number | undefined;
+    defaultSizePixels?: number | undefined;
+    id?: string | undefined;
+    maxSizePercentage?: number | undefined;
+    maxSizePixels?: number | undefined;
+    minSizePercentage?: number | undefined;
+    minSizePixels?: number | undefined;
+    onCollapse?: PanelOnCollapse | undefined;
+    onExpand?: PanelOnExpand | undefined;
+    onResize?: PanelOnResize | undefined;
+    order?: number | undefined;
+    style?: object | undefined;
+    tagName?: ElementType | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<ImperativePanelHandle>>;

package/dist/declarations/src/PanelGroup.d.ts

@@ -1,30 +1,38 @@
-import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js";
-import { Direction, PanelData, PanelGroupOnLayout, PanelGroupStorage } from "./types.js";
-export type CommittedValues = {
-    direction: Direction;
-    panels: Map<string, PanelData>;
-    sizes: number[];
+import { Direction, MixedSizes } from "./types.js";
+import { CSSProperties, ElementType, PropsWithChildren } from "./vendor/react.js";
+export type ImperativePanelGroupHandle = {
+    getId: () => string;
+    getLayout: () => MixedSizes[];
+    setLayout: (layout: Partial<MixedSizes>[]) => void;
 };
-export type PanelDataMap = Map<string, PanelData>;
-export type InitialDragState = {
-    dragHandleRect: DOMRect;
-    dragOffset: number;
-    sizes: number[];
+export type PanelGroupStorage = {
+    getItem(name: string): string | null;
+    setItem(name: string, value: string): void;
 };
-export type PanelGroupProps = {
+export type PanelGroupOnLayout = (layout: MixedSizes[]) => void;
+export type PanelGroupProps = PropsWithChildren<{
     autoSaveId?: string;
-    children?: ReactNode;
     className?: string;
     direction: Direction;
-    disablePointerEventsDuringResize?: boolean;
     id?: string | null;
-    onLayout?: PanelGroupOnLayout;
+    keyboardResizeByPercentage?: number | null;
+    keyboardResizeByPixels?: number | null;
+    onLayout?: PanelGroupOnLayout | null;
     storage?: PanelGroupStorage;
     style?: CSSProperties;
     tagName?: ElementType;
-};
-export type ImperativePanelGroupHandle = {
-    getLayout: () => number[];
-    setLayout: (panelSizes: number[]) => void;
-};
-export declare const PanelGroup: import("react").ForwardRefExoticComponent<PanelGroupProps & import("react").RefAttributes<ImperativePanelGroupHandle>>;
+}>;
+export declare const PanelGroup: import("react").ForwardRefExoticComponent<{
+    autoSaveId?: string | undefined;
+    className?: string | undefined;
+    direction: Direction;
+    id?: string | null | undefined;
+    keyboardResizeByPercentage?: number | null | undefined;
+    keyboardResizeByPixels?: number | null | undefined;
+    onLayout?: PanelGroupOnLayout | null | undefined;
+    storage?: PanelGroupStorage | undefined;
+    style?: CSSProperties | undefined;
+    tagName?: ElementType | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<ImperativePanelGroupHandle>>;

package/dist/declarations/src/PanelResizeHandle.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js";
-import type { PanelResizeHandleOnDragging } from "./types.js";
+export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type PanelResizeHandleProps = {
     children?: ReactNode;
     className?: string;

package/dist/declarations/src/index.d.ts

@@ -1,8 +1,8 @@
 import { Panel } from "./Panel.js";
 import { PanelGroup } from "./PanelGroup.js";
 import { PanelResizeHandle } from "./PanelResizeHandle.js";
-import type { ImperativePanelHandle, PanelProps } from "./Panel.js";
-import type { ImperativePanelGroupHandle, PanelGroupProps } from "./PanelGroup.js";
-import type { PanelResizeHandleProps } from "./PanelResizeHandle.js";
-import type { PanelGroupOnLayout, PanelGroupStorage, PanelOnCollapse, PanelOnResize, PanelResizeHandleOnDragging } from "./types.js";
-export { ImperativePanelGroupHandle, ImperativePanelHandle, Panel, PanelOnCollapse, PanelOnResize, PanelGroup, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelProps, PanelResizeHandle, PanelResizeHandleOnDragging, PanelResizeHandleProps, };
+import type { MixedSizes } from "./types.js";
+import type { ImperativePanelHandle, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps } from "./Panel.js";
+import type { ImperativePanelGroupHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage } from "./PanelGroup.js";
+import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
+export { ImperativePanelGroupHandle, ImperativePanelHandle, MixedSizes, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Panel, PanelGroup, PanelResizeHandle, };

package/dist/declarations/src/types.d.ts

@@ -1,29 +1,7 @@
-import { RefObject } from "./vendor/react.js";
 export type Direction = "horizontal" | "vertical";
-export type PanelGroupStorage = {
-    getItem(name: string): string | null;
-    setItem(name: string, value: string): void;
-};
-export type PanelGroupOnLayout = (sizes: number[]) => void;
-export type PanelOnCollapse = (collapsed: boolean) => void;
-export type PanelOnResize = (size: number, prevSize: number) => void;
-export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
-export type PanelCallbackRef = RefObject<{
-    onCollapse: PanelOnCollapse | null;
-    onResize: PanelOnResize | null;
-}>;
-export type PanelData = {
-    current: {
-        callbacksRef: PanelCallbackRef;
-        collapsedSize: number;
-        collapsible: boolean;
-        defaultSize: number | null;
-        id: string;
-        idWasAutoGenerated: boolean;
-        maxSize: number;
-        minSize: number;
-        order: number | null;
-    };
+export type MixedSizes = {
+    sizePercentage: number;
+    sizePixels: number;
 };
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
 export type ResizeHandler = (event: ResizeEvent) => void;

package/dist/declarations/src/vendor/react.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { CSSProperties, ElementType, ForwardedRef, MouseEvent, ReactNode, RefObject, TouchEvent } from "react";
-declare const createElement: typeof React.createElement, createContext: typeof React.createContext, forwardRef: typeof React.forwardRef, useCallback: typeof React.useCallback, useContext: typeof React.useContext, useEffect: typeof React.useEffect, useImperativeHandle: typeof React.useImperativeHandle, useLayoutEffect: typeof React.useLayoutEffect, useMemo: typeof React.useMemo, useRef: typeof React.useRef, useState: typeof React.useState;
+import type { CSSProperties, ElementType, ForwardedRef, MouseEvent, PropsWithChildren, ReactNode, RefObject, TouchEvent } from "react";
+declare const createElement: typeof React.createElement, createContext: typeof React.createContext, createRef: typeof React.createRef, forwardRef: typeof React.forwardRef, useCallback: typeof React.useCallback, useContext: typeof React.useContext, useEffect: typeof React.useEffect, useImperativeHandle: typeof React.useImperativeHandle, useLayoutEffect: typeof React.useLayoutEffect, useMemo: typeof React.useMemo, useRef: typeof React.useRef, useState: typeof React.useState;
 declare const useId: () => string;
-export { createElement, createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, };
-export type { CSSProperties, ElementType, ForwardedRef, MouseEvent, ReactNode, RefObject, TouchEvent, };
+export { createElement, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, };
+export type { CSSProperties, ElementType, ForwardedRef, MouseEvent, PropsWithChildren, ReactNode, RefObject, TouchEvent, };