diff --git a/packages/react-resizable-panels/README.md b/packages/react-resizable-panels/README.md index 90225c1aa..8e3d50970 100644 --- a/packages/react-resizable-panels/README.md +++ b/packages/react-resizable-panels/README.md @@ -46,7 +46,10 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; `PanelGroup` components also expose an imperative API for manual resizing: | method | description | :-------------------------------- | :--- -| `setLayout(panelSizes: number[])` | Resize panel group to the specified _panelSizes_ (`[1 - 100, ...]`). +| `getId(): string` | Gets the panel group's ID. +| `getLayout(): number[]` | Gets the panel group's current _layout_ (`[1 - 100, ...]`). +| `setLayout(layout: number[])` | Resize panel group to the specified _layout_ (`[1 - 100, ...]`). +| `elementRef: RefObject` | A ref to the underlying DOM element for the panel group. ### `Panel` @@ -73,9 +76,13 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; | :--------------------------- | :--- | `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`). +| `getId(): string` | Gets the ID of the panel. +| `getSize(): number` | Gets the current size of the panel as a percentage (`1 - 100`). +| `isCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`). +| `isExpanded(): boolean` | Returns `true` if the panel is currently _not collapsed_ (`!isCollapsed()`). | `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`). +| `resize(size: number)` | Resize panel to the specified _percentage_ (`1 - 100`). +| `elementRef: RefObject` | A ref to the underlying DOM element for the panel. ### `PanelResizeHandle` diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts index 7670989a1..2ef421d61 100644 --- a/packages/react-resizable-panels/src/Panel.ts +++ b/packages/react-resizable-panels/src/Panel.ts @@ -13,6 +13,7 @@ import { useContext, useImperativeHandle, useRef, + RefObject, } from "./vendor/react"; export type PanelOnCollapse = () => void; @@ -52,6 +53,7 @@ export type ImperativePanelHandle = { isCollapsed: () => boolean; isExpanded: () => boolean; resize: (size: number) => void; + elementRef: RefObject; }; export type PanelProps = Omit, "id" | "onResize"> & @@ -112,6 +114,8 @@ export function PanelWithForwardedRef({ const panelId = useUniqueId(idFromProps); + const panelElementRef = useRef(null); + const panelDataRef = useRef({ callbacks: { onCollapse, @@ -201,6 +205,7 @@ export function PanelWithForwardedRef({ resize: (size: number) => { resizePanel(panelDataRef.current, size); }, + elementRef: panelElementRef, }), [ collapsePanel, @@ -223,6 +228,7 @@ export function PanelWithForwardedRef({ ...style, ...styleFromProps, }, + ref: panelElementRef, // CSS selectors "data-panel": "", diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts index 07ff9e23f..b59fec99b 100644 --- a/packages/react-resizable-panels/src/PanelGroup.ts +++ b/packages/react-resizable-panels/src/PanelGroup.ts @@ -40,6 +40,7 @@ import { useMemo, useRef, useState, + RefObject, } from "./vendor/react"; const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100; @@ -48,6 +49,7 @@ export type ImperativePanelGroupHandle = { getId: () => string; getLayout: () => number[]; setLayout: (layout: number[]) => void; + elementRef: RefObject; }; export type PanelGroupStorage = { @@ -106,6 +108,8 @@ function PanelGroupWithForwardedRef({ const [dragState, setDragState] = useState(null); const [layout, setLayout] = useState([]); + const panelGroupElementRef = useRef(null); + const panelIdToLastNotifiedSizeMapRef = useRef>({}); const panelSizeBeforeCollapseRef = useRef>(new Map()); const prevDeltaRef = useRef(0); @@ -184,6 +188,7 @@ function PanelGroupWithForwardedRef({ ); } }, + elementRef: panelGroupElementRef, }), [] ); @@ -804,6 +809,7 @@ function PanelGroupWithForwardedRef({ ...style, ...styleFromProps, }, + ref: panelGroupElementRef, // CSS selectors "data-panel-group": "",