From fc71f44471a5511fcafdb23342356f18c1ace0e4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 30 Dec 2023 12:31:07 +1100
Subject: [PATCH 1/2] feat: adds refs to imperative API

Add `elementRef: RefObject<HTMLElement>` to both `ImperativePanelHandle` and `ImperativePanelGroupHandle`, giving access to the underlying DOM elements for these components.
---
 packages/react-resizable-panels/src/Panel.ts      | 6 ++++++
 packages/react-resizable-panels/src/PanelGroup.ts | 6 ++++++
 2 files changed, 12 insertions(+)

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<HTMLElement>;
 };
 
 export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> &
@@ -112,6 +114,8 @@ export function PanelWithForwardedRef({
 
   const panelId = useUniqueId(idFromProps);
 
+  const panelElementRef = useRef<HTMLElement>(null);
+
   const panelDataRef = useRef<PanelData>({
     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<HTMLElement>;
 };
 
 export type PanelGroupStorage = {
@@ -106,6 +108,8 @@ function PanelGroupWithForwardedRef({
   const [dragState, setDragState] = useState<DragState | null>(null);
   const [layout, setLayout] = useState<number[]>([]);
 
+  const panelGroupElementRef = useRef<HTMLElement>(null);
+
   const panelIdToLastNotifiedSizeMapRef = useRef<Record<string, number>>({});
   const panelSizeBeforeCollapseRef = useRef<Map<string, number>>(new Map());
   const prevDeltaRef = useRef<number>(0);
@@ -184,6 +188,7 @@ function PanelGroupWithForwardedRef({
           );
         }
       },
+      elementRef: panelGroupElementRef,
     }),
     []
   );
@@ -804,6 +809,7 @@ function PanelGroupWithForwardedRef({
         ...style,
         ...styleFromProps,
       },
+      ref: panelGroupElementRef,
 
       // CSS selectors
       "data-panel-group": "",

From 5584ccc0c43ae8b12316b524c38abd58ec6787e9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 30 Dec 2023 12:31:45 +1100
Subject: [PATCH 2/2] docs: updates README

Updates Imperative API docs.
---
 packages/react-resizable-panels/README.md | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

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<HTMLElement>` | 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<HTMLElement>` | A ref to the underlying DOM element for the panel.
 
 ### `PanelResizeHandle`