react-resizable-panels 0.0.63 → 1.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "0.0.63",
+  "version": "1.0.0-rc.1",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/Panel.test.tsx

@@ -1,12 +1,8 @@
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
-import {
-  ImperativePanelHandle,
-  MixedSizes,
-  Panel,
-  PanelGroup,
-  PanelResizeHandle,
-} from ".";
+import { ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle } from ".";
+import { assert } from "./utils/assert";
+import { getPanelElement } from "./utils/dom/getPanelElement";
 import {
   mockPanelGroupOffsetWidthAndHeight,
   verifyExpandedPanelGroupLayout,
@@ -66,7 +62,7 @@ describe("PanelGroup", () => {
       let leftPanelRef = createRef<ImperativePanelHandle>();
       let rightPanelRef = createRef<ImperativePanelHandle>();
 
-      let mostRecentLayout: MixedSizes[] | null;
+      let mostRecentLayout: number[] | null;
 
       beforeEach(() => {
         leftPanelRef = createRef<ImperativePanelHandle>();
@@ -74,67 +70,65 @@ describe("PanelGroup", () => {
 
         mostRecentLayout = null;
 
-        const onLayout = (layout: MixedSizes[]) => {
+        const onLayout = (layout: number[]) => {
           mostRecentLayout = layout;
         };
 
         act(() => {
           root.render(
             <PanelGroup direction="horizontal" onLayout={onLayout}>
-              <Panel
-                collapsible
-                defaultSizePercentage={50}
-                ref={leftPanelRef}
-              />
+              <Panel collapsible defaultSize={50} ref={leftPanelRef} />
               <PanelResizeHandle />
-              <Panel
-                collapsible
-                defaultSizePercentage={50}
-                ref={rightPanelRef}
-              />
+              <Panel collapsible defaultSize={50} ref={rightPanelRef} />
             </PanelGroup>
           );
         });
       });
 
       it("should expand and collapse the first panel in a group", () => {
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [50, 50]);
+        assert(mostRecentLayout);
+
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
         act(() => {
-          leftPanelRef.current!.collapse();
+          leftPanelRef.current?.collapse();
         });
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [0, 100]);
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [0, 100]);
         act(() => {
-          leftPanelRef.current!.expand();
+          leftPanelRef.current?.expand();
         });
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [50, 50]);
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
       });
 
       it("should expand and collapse the last panel in a group", () => {
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [50, 50]);
+        assert(mostRecentLayout);
+
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
         act(() => {
-          rightPanelRef.current!.collapse();
+          rightPanelRef.current?.collapse();
         });
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [100, 0]);
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [100, 0]);
         act(() => {
-          rightPanelRef.current!.expand();
+          rightPanelRef.current?.expand();
         });
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [50, 50]);
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
       });
 
       it("should re-expand to the most recent size before collapsing", () => {
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [50, 50]);
+        assert(mostRecentLayout);
+
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [50, 50]);
         act(() => {
-          leftPanelRef.current!.resize({ sizePercentage: 30 });
+          leftPanelRef.current?.resize(30);
         });
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [30, 70]);
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [30, 70]);
         act(() => {
-          leftPanelRef.current!.collapse();
+          leftPanelRef.current?.collapse();
         });
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [0, 100]);
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [0, 100]);
         act(() => {
-          leftPanelRef.current!.expand();
+          leftPanelRef.current?.expand();
         });
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [30, 70]);
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [30, 70]);
       });
     });
 
@@ -143,7 +137,7 @@ describe("PanelGroup", () => {
       let middlePanelRef = createRef<ImperativePanelHandle>();
       let rightPanelRef = createRef<ImperativePanelHandle>();
 
-      let mostRecentLayout: MixedSizes[] | null;
+      let mostRecentLayout: number[] | null;
 
       beforeEach(() => {
         leftPanelRef = createRef<ImperativePanelHandle>();
@@ -152,45 +146,51 @@ describe("PanelGroup", () => {
 
         mostRecentLayout = null;
 
-        const onLayout = (layout: MixedSizes[]) => {
+        const onLayout = (layout: number[]) => {
           mostRecentLayout = layout;
         };
 
         act(() => {
           root.render(
             <PanelGroup direction="horizontal" onLayout={onLayout}>
-              <Panel defaultSizePercentage={20} ref={leftPanelRef} />
+              <Panel defaultSize={20} ref={leftPanelRef} />
               <PanelResizeHandle />
-              <Panel defaultSizePercentage={60} ref={middlePanelRef} />
+              <Panel defaultSize={60} ref={middlePanelRef} />
               <PanelResizeHandle />
-              <Panel defaultSizePercentage={20} ref={rightPanelRef} />
+              <Panel defaultSize={20} ref={rightPanelRef} />
             </PanelGroup>
           );
         });
       });
 
       it("should resize the first panel in a group", () => {
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [20, 60, 20]);
+        assert(mostRecentLayout);
+
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [20, 60, 20]);
         act(() => {
-          leftPanelRef.current!.resize({ sizePercentage: 40 });
+          leftPanelRef.current?.resize(40);
         });
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [40, 40, 20]);
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [40, 40, 20]);
       });
 
       it("should resize the middle panel in a group", () => {
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [20, 60, 20]);
+        assert(mostRecentLayout);
+
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [20, 60, 20]);
         act(() => {
-          middlePanelRef.current!.resize({ sizePercentage: 40 });
+          middlePanelRef.current?.resize(40);
         });
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [20, 40, 40]);
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [20, 40, 40]);
       });
 
       it("should resize the last panel in a group", () => {
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [20, 60, 20]);
+        assert(mostRecentLayout);
+
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [20, 60, 20]);
         act(() => {
-          rightPanelRef.current!.resize({ sizePercentage: 40 });
+          rightPanelRef.current?.resize(40);
         });
-        verifyExpandedPanelGroupLayout(mostRecentLayout!, [20, 40, 40]);
+        verifyExpandedPanelGroupLayout(mostRecentLayout, [20, 40, 40]);
       });
     });
   });
@@ -207,7 +207,7 @@ describe("PanelGroup", () => {
         act(() => {
           root.render(
             <PanelGroup direction="horizontal">
-              <Panel defaultSizePercentage={-1} />
+              <Panel defaultSize={-1} />
             </PanelGroup>
           );
         });
@@ -217,7 +217,7 @@ describe("PanelGroup", () => {
         act(() => {
           root.render(
             <PanelGroup direction="horizontal">
-              <Panel defaultSizePercentage={101} />
+              <Panel defaultSize={101} />
             </PanelGroup>
           );
         });
@@ -235,6 +235,24 @@ describe("PanelGroup", () => {
     });
   });
 
+  it("should support ...rest attributes", () => {
+    act(() => {
+      root.render(
+        <PanelGroup direction="horizontal">
+          <Panel data-test-name="foo" id="panel" tabIndex={123} title="bar" />
+          <PanelResizeHandle />
+          <Panel />
+        </PanelGroup>
+      );
+    });
+
+    const element = getPanelElement("panel");
+    assert(element);
+    expect(element.tabIndex).toBe(123);
+    expect(element.getAttribute("data-test-name")).toBe("foo");
+    expect(element.title).toBe("bar");
+  });
+
   describe("DEV warnings", () => {
     it("should warn about server rendered panels with no default size", () => {
       jest.resetModules();
@@ -254,15 +272,15 @@ describe("PanelGroup", () => {
         // No warning expected if default sizes provided
         renderToStaticMarkup(
           <PanelGroup direction="horizontal">
-            <Panel defaultSizePercentage={100} />
+            <Panel defaultSize={100} />
             <PanelResizeHandle />
-            <Panel defaultSizePixels={1_000} />
+            <Panel defaultSize={1_000} />
           </PanelGroup>
         );
       });
 
       expectWarning(
-        "Panel defaultSizePercentage or defaultSizePixels prop recommended to avoid layout shift after server rendering"
+        "Panel defaultSize prop recommended to avoid layout shift after server rendering"
       );
 
       act(() => {
@@ -274,30 +292,13 @@ describe("PanelGroup", () => {
       });
     });
 
-    it("should warn if both pixel and percentage units are specified", () => {
-      // We just spot check this here; validatePanelConstraints() has its own in-depth tests
-      expectWarning(
-        "should not specify both percentage and pixel units for: min size"
-      );
-
-      expectWarning("Pixel based constraints require ResizeObserver");
-
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal" key="minSize">
-            <Panel minSizePercentage={100} minSizePixels={1_000} />
-          </PanelGroup>
-        );
-      });
-    });
-
     it("should warn if invalid sizes are specified declaratively", () => {
       expectWarning("default size should not be less than 0");
 
       act(() => {
         root.render(
           <PanelGroup direction="horizontal" key="collapsedSize">
-            <Panel defaultSizePercentage={-1} />
+            <Panel defaultSize={-1} />
             <PanelResizeHandle />
             <Panel />
           </PanelGroup>

package/src/Panel.ts

@@ -3,10 +3,10 @@ import { isDevelopment } from "#is-development";
 import { PanelGroupContext } from "./PanelGroupContext";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
-import { DataAttributes, MixedSizes } from "./types";
 import {
   ElementType,
   ForwardedRef,
+  HTMLAttributes,
   PropsWithChildren,
   createElement,
   forwardRef,
@@ -18,8 +18,8 @@ import {
 export type PanelOnCollapse = () => void;
 export type PanelOnExpand = () => void;
 export type PanelOnResize = (
-  mixedSizes: MixedSizes,
-  prevMixedSizes: MixedSizes | undefined
+  size: number,
+  prevSize: number | undefined
 ) => void;
 
 export type PanelCallbacks = {
@@ -29,15 +29,11 @@ export type PanelCallbacks = {
 };
 
 export type PanelConstraints = {
-  collapsedSizePercentage?: number | undefined;
-  collapsedSizePixels?: number | undefined;
+  collapsedSize?: number | undefined;
   collapsible?: boolean | undefined;
-  defaultSizePercentage?: number | undefined;
-  defaultSizePixels?: number | undefined;
-  maxSizePercentage?: number | undefined;
-  maxSizePixels?: number | undefined;
-  minSizePercentage?: number | undefined;
-  minSizePixels?: number | undefined;
+  defaultSize?: number | undefined;
+  maxSize?: number | undefined;
+  minSize?: number | undefined;
 };
 
 export type PanelData = {
@@ -52,54 +48,46 @@ export type ImperativePanelHandle = {
   collapse: () => void;
   expand: () => void;
   getId(): string;
-  getSize(): MixedSizes;
+  getSize(): number;
   isCollapsed: () => boolean;
   isExpanded: () => boolean;
-  resize: (size: Partial<MixedSizes>) => void;
+  resize: (size: number) => void;
 };
 
-export type PanelProps = PropsWithChildren<{
-  className?: string;
-  collapsedSizePercentage?: number | undefined;
-  collapsedSizePixels?: number | undefined;
-  collapsible?: boolean | undefined;
-  dataAttributes?: DataAttributes;
-  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 type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> &
+  PropsWithChildren<{
+    className?: string;
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    id?: string;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    onCollapse?: PanelOnCollapse;
+    onExpand?: PanelOnExpand;
+    onResize?: PanelOnResize;
+    order?: number;
+    style?: object;
+    tagName?: ElementType;
+  }>;
 
 export function PanelWithForwardedRef({
   children,
   className: classNameFromProps = "",
-  collapsedSizePercentage,
-  collapsedSizePixels,
+  collapsedSize,
   collapsible,
-  dataAttributes,
-  defaultSizePercentage,
-  defaultSizePixels,
+  defaultSize,
   forwardedRef,
   id: idFromProps,
-  maxSizePercentage,
-  maxSizePixels,
-  minSizePercentage,
-  minSizePixels,
+  maxSize,
+  minSize,
   onCollapse,
   onExpand,
   onResize,
   order,
   style: styleFromProps,
   tagName: Type = "div",
+  ...rest
 }: PanelProps & {
   forwardedRef: ForwardedRef<ImperativePanelHandle>;
 }) {
@@ -131,15 +119,11 @@ export function PanelWithForwardedRef({
       onResize,
     },
     constraints: {
-      collapsedSizePercentage,
-      collapsedSizePixels,
+      collapsedSize,
       collapsible,
-      defaultSizePercentage,
-      defaultSizePixels,
-      maxSizePercentage,
-      maxSizePixels,
-      minSizePercentage,
-      minSizePixels,
+      defaultSize,
+      maxSize,
+      minSize,
     },
     id: panelId,
     idIsFromProps: idFromProps !== undefined,
@@ -156,14 +140,10 @@ export function PanelWithForwardedRef({
   // but effects don't run on the server, so we can't do it there
   if (isDevelopment) {
     if (!devWarningsRef.current.didLogMissingDefaultSizeWarning) {
-      if (
-        !isBrowser &&
-        defaultSizePercentage == null &&
-        defaultSizePixels == null
-      ) {
+      if (!isBrowser && defaultSize == null) {
         devWarningsRef.current.didLogMissingDefaultSizeWarning = true;
         console.warn(
-          `WARNING: Panel defaultSizePercentage or defaultSizePixels prop recommended to avoid layout shift after server rendering`
+          `WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`
         );
       }
     }
@@ -180,15 +160,11 @@ export function PanelWithForwardedRef({
     callbacks.onExpand = onExpand;
     callbacks.onResize = onResize;
 
-    constraints.collapsedSizePercentage = collapsedSizePercentage;
-    constraints.collapsedSizePixels = collapsedSizePixels;
+    constraints.collapsedSize = collapsedSize;
     constraints.collapsible = collapsible;
-    constraints.defaultSizePercentage = defaultSizePercentage;
-    constraints.defaultSizePixels = defaultSizePixels;
-    constraints.maxSizePercentage = maxSizePercentage;
-    constraints.maxSizePixels = maxSizePixels;
-    constraints.minSizePercentage = minSizePercentage;
-    constraints.minSizePixels = minSizePixels;
+    constraints.defaultSize = defaultSize;
+    constraints.maxSize = maxSize;
+    constraints.minSize = minSize;
   });
 
   useIsomorphicLayoutEffect(() => {
@@ -222,8 +198,8 @@ export function PanelWithForwardedRef({
       isExpanded() {
         return !isPanelCollapsed(panelDataRef.current);
       },
-      resize: (mixedSizes: Partial<MixedSizes>) => {
-        resizePanel(panelDataRef.current, mixedSizes);
+      resize: (size: number) => {
+        resizePanel(panelDataRef.current, size);
       },
     }),
     [
@@ -239,6 +215,8 @@ export function PanelWithForwardedRef({
   const style = getPanelStyle(panelDataRef.current);
 
   return createElement(Type, {
+    ...rest,
+
     children,
     className: classNameFromProps,
     style: {
@@ -246,8 +224,6 @@ export function PanelWithForwardedRef({
       ...styleFromProps,
     },
 
-    ...dataAttributes,
-
     // CSS selectors
     "data-panel": "",
     "data-panel-id": panelId,

package/src/PanelGroup.test.tsx

@@ -2,11 +2,12 @@ import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import {
   ImperativePanelGroupHandle,
-  MixedSizes,
   Panel,
   PanelGroup,
   PanelResizeHandle,
 } from ".";
+import { assert } from "./utils/assert";
+import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
 import { mockPanelGroupOffsetWidthAndHeight } from "./utils/test-utils";
 import { createRef } from "./vendor/react";
 
@@ -67,71 +68,74 @@ describe("PanelGroup", () => {
         root.render(<PanelGroup direction="horizontal" id="one" ref={ref} />);
       });
 
-      expect(ref.current!.getId()).toBe("one");
+      expect(ref.current?.getId()).toBe("one");
 
       act(() => {
         root.render(<PanelGroup direction="horizontal" id="two" ref={ref} />);
       });
 
-      expect(ref.current!.getId()).toBe("two");
+      expect(ref.current?.getId()).toBe("two");
     });
 
     it("should get and set layouts", () => {
       const ref = createRef<ImperativePanelGroupHandle>();
 
-      let mostRecentLayout: MixedSizes[] | null = null;
+      let mostRecentLayout: number[] | null = null;
 
-      const onLayout = (layout: MixedSizes[]) => {
+      const onLayout = (layout: number[]) => {
         mostRecentLayout = layout;
       };
 
       act(() => {
         root.render(
           <PanelGroup direction="horizontal" onLayout={onLayout} ref={ref}>
-            <Panel defaultSizePercentage={50} id="a" />
+            <Panel defaultSize={50} id="a" />
             <PanelResizeHandle />
-            <Panel defaultSizePercentage={50} id="b" />
+            <Panel defaultSize={50} id="b" />
           </PanelGroup>
         );
       });
 
-      expect(mostRecentLayout).toEqual([
-        {
-          sizePercentage: 50,
-          sizePixels: 500,
-        },
-        {
-          sizePercentage: 50,
-          sizePixels: 500,
-        },
-      ]);
+      expect(mostRecentLayout).toEqual([50, 50]);
 
       act(() => {
-        ref.current!.setLayout([
-          { sizePercentage: 25 },
-          { sizePercentage: 75 },
-        ]);
+        ref.current?.setLayout([25, 75]);
       });
 
-      expect(mostRecentLayout).toEqual([
-        {
-          sizePercentage: 25,
-          sizePixels: 250,
-        },
-        {
-          sizePercentage: 75,
-          sizePixels: 750,
-        },
-      ]);
+      expect(mostRecentLayout).toEqual([25, 75]);
     });
   });
 
+  it("should support ...rest attributes", () => {
+    act(() => {
+      root.render(
+        <PanelGroup
+          data-test-name="foo"
+          direction="horizontal"
+          id="group"
+          tabIndex={123}
+          title="bar"
+        >
+          <Panel />
+          <PanelResizeHandle />
+          <Panel />
+        </PanelGroup>
+      );
+    });
+
+    const element = getPanelGroupElement("group");
+    assert(element);
+    expect(element.tabIndex).toBe(123);
+    expect(element.getAttribute("data-test-name")).toBe("foo");
+    expect(element.title).toBe("bar");
+  });
+
   describe("DEV warnings", () => {
     it("should warn about unstable layouts without id and order props", () => {
       act(() => {
         root.render(
           <PanelGroup direction="horizontal">
-            <Panel defaultSizePercentage={100} id="a" />
+            <Panel defaultSize={100} id="a" />
           </PanelGroup>
         );
       });
@@ -143,9 +147,9 @@ describe("PanelGroup", () => {
       act(() => {
         root.render(
           <PanelGroup direction="horizontal">
-            <Panel defaultSizePercentage={50} id="a" />
+            <Panel defaultSize={50} id="a" />
             <PanelResizeHandle />
-            <Panel defaultSizePercentage={50} id="b" />
+            <Panel defaultSize={50} id="b" />
           </PanelGroup>
         );
       });
@@ -172,9 +176,9 @@ describe("PanelGroup", () => {
       act(() => {
         root.render(
           <PanelGroup direction="horizontal" id="group-without-handle">
-            <Panel defaultSizePercentage={60} />
+            <Panel defaultSize={60} />
             <PanelResizeHandle />
-            <Panel defaultSizePercentage={80} />
+            <Panel defaultSize={80} />
           </PanelGroup>
         );
       });
@@ -190,9 +194,9 @@ describe("PanelGroup", () => {
             id="group-without-handle"
             ref={ref}
           >
-            <Panel defaultSizePercentage={30} />
+            <Panel defaultSize={30} />
             <PanelResizeHandle />
-            <Panel defaultSizePercentage={70} />
+            <Panel defaultSize={70} />
           </PanelGroup>
         );
       });
@@ -200,10 +204,7 @@ describe("PanelGroup", () => {
       expectWarning("Invalid layout total size: 60%, 80%");
 
       act(() => {
-        ref.current!.setLayout([
-          { sizePercentage: 60 },
-          { sizePercentage: 80 },
-        ]);
+        ref.current?.setLayout([60, 80]);
       });
     });
   });