Replaced dataAttributes prop with ...rest for all HTMLAttributes

packages/react-resizable-panels-website/src/routes/EndToEndTesting/index.tsx

@@ -9,7 +9,6 @@ import {
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
-  MixedSizes,
 } from "react-resizable-panels";
 
 import { urlPanelGroupToPanelGroup, urlToUrlData } from "../../utils/UrlData";

packages/react-resizable-panels-website/src/routes/examples/ImperativePanelGroupApi.tsx

@@ -1,8 +1,5 @@
 import { useRef, useState } from "react";
-import type {
-  ImperativePanelGroupHandle,
-  MixedSizes,
-} from "react-resizable-panels";
+import type { ImperativePanelGroupHandle } from "react-resizable-panels";
 import { Panel, PanelGroup } from "react-resizable-panels";
 
 import { ResizeHandle } from "../../components/ResizeHandle";

packages/react-resizable-panels-website/src/routes/examples/types.ts

@@ -1,5 +1,3 @@
-import { MixedSizes } from "react-resizable-panels";
-
 export type PanelCollapseLogEntryType = "onCollapse";
 export type PanelExpandLogEntryType = "onExpand";
 export type PanelGroupLayoutLogEntryType = "onLayout";
@@ -21,12 +19,12 @@ export type PanelResizeHandleDraggingLogEntry = {
 };
 export type PanelGroupLayoutLogEntry = {
   groupId: string;
-  layout: MixedSizes[];
+  layout: number[];
   type: PanelGroupLayoutLogEntryType;
 };
 export type PanelResizeLogEntry = {
   panelId: string;
-  size: MixedSizes;
+  size: number;
   type: PanelResizeLogEntryType;
 };
 

packages/react-resizable-panels-website/src/utils/UrlData.ts

@@ -9,7 +9,6 @@ import {
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
-  MixedSizes,
   Panel,
   PanelGroup,
   PanelGroupOnLayout,
@@ -183,7 +182,7 @@ function urlPanelToPanel(
       }
     };
 
-    onResize = (size: MixedSizes) => {
+    onResize = (size: number) => {
       const debugLog = debugLogRef.current;
       if (debugLog) {
         debugLog.log({
@@ -248,7 +247,7 @@ export function urlPanelGroupToPanelGroup(
 
   const groupId = urlPanelGroup.id;
   if (groupId) {
-    onLayout = (layout: MixedSizes[]) => {
+    onLayout = (layout: number[]) => {
       const debugLog = debugLogRef.current;
       if (debugLog) {
         debugLog.log({ groupId, type: "onLayout", layout });

packages/react-resizable-panels-website/tests/utils/panels.ts

@@ -2,7 +2,6 @@ import { Locator, Page, expect } from "@playwright/test";
 import { assert } from "./assert";
 import { getBodyCursorStyle } from "./cursor";
 import { verifyFuzzySizesPercentages } from "./verify";
-import { Size } from "react-resizable-panels";
 
 type Operation = {
   expectedCursor?: string;
@@ -150,7 +149,7 @@ export async function dragResizeTo(
 export async function imperativeResizePanel(
   page: Page,
   panelId: string,
-  size: Size
+  size: number
 ) {
   const panelIdSelect = page.locator("#panelIdSelect");
   await panelIdSelect.selectOption(panelId);

packages/react-resizable-panels/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.0.0-rc.1
+
+- Remove support for pixel-based Panel constraints; props like `defaultSizePercentage` should now be `defaultSize`
+- Replaced `dataAttributes` prop with `...rest` prop that supports all HTML attributes
+
 ## 0.0.63
 
 - Change default (not-yet-registered) Panel flex-grow style from 0 to 1

packages/react-resizable-panels/src/Panel.test.tsx

@@ -1,12 +1,8 @@
+import assert from "assert";
 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 { getPanelElement } from "./utils/dom/getPanelElement";
 import {
   mockPanelGroupOffsetWidthAndHeight,
   verifyExpandedPanelGroupLayout,
@@ -66,15 +62,15 @@ describe("PanelGroup", () => {
       let leftPanelRef = createRef<ImperativePanelHandle>();
       let rightPanelRef = createRef<ImperativePanelHandle>();
 
-      let mostRecentLayout: MixedSizes[] | null;
+      let mostRecentLayout: number[] | null;
 
       beforeEach(() => {
         leftPanelRef = createRef<ImperativePanelHandle>();
         rightPanelRef = createRef<ImperativePanelHandle>();
 
         mostRecentLayout = null;
 
-        const onLayout = (layout: MixedSizes[]) => {
+        const onLayout = (layout: number[]) => {
           mostRecentLayout = layout;
         };
 
@@ -135,7 +131,7 @@ describe("PanelGroup", () => {
       let middlePanelRef = createRef<ImperativePanelHandle>();
       let rightPanelRef = createRef<ImperativePanelHandle>();
 
-      let mostRecentLayout: MixedSizes[] | null;
+      let mostRecentLayout: number[] | null;
 
       beforeEach(() => {
         leftPanelRef = createRef<ImperativePanelHandle>();
@@ -144,7 +140,7 @@ describe("PanelGroup", () => {
 
         mostRecentLayout = null;
 
-        const onLayout = (layout: MixedSizes[]) => {
+        const onLayout = (layout: number[]) => {
           mostRecentLayout = layout;
         };
 
@@ -227,6 +223,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();

packages/react-resizable-panels/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, Size } 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: Size,
-  prevMixedSizes: Size | undefined
+  size: number,
+  prevSize: number | undefined
 ) => void;
 
 export type PanelCallbacks = {
@@ -48,35 +48,34 @@ export type ImperativePanelHandle = {
   collapse: () => void;
   expand: () => void;
   getId(): string;
-  getSize(): Size;
+  getSize(): number;
   isCollapsed: () => boolean;
   isExpanded: () => boolean;
-  resize: (size: Partial<Size>) => void;
+  resize: (size: number) => void;
 };
 
-export type PanelProps = PropsWithChildren<{
-  className?: string;
-  collapsedSize?: number | undefined;
-  collapsible?: boolean | undefined;
-  dataAttributes?: DataAttributes;
-  defaultSize?: number | undefined;
-  id?: string;
-  maxSize?: number | undefined;
-  minSize?: 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 = "",
   collapsedSize,
   collapsible,
-  dataAttributes,
   defaultSize,
   forwardedRef,
   id: idFromProps,
@@ -88,6 +87,7 @@ export function PanelWithForwardedRef({
   order,
   style: styleFromProps,
   tagName: Type = "div",
+  ...rest
 }: PanelProps & {
   forwardedRef: ForwardedRef<ImperativePanelHandle>;
 }) {
@@ -198,8 +198,8 @@ export function PanelWithForwardedRef({
       isExpanded() {
         return !isPanelCollapsed(panelDataRef.current);
       },
-      resize: (mixedSizes: Partial<Size>) => {
-        resizePanel(panelDataRef.current, mixedSizes);
+      resize: (size: number) => {
+        resizePanel(panelDataRef.current, size);
       },
     }),
     [
@@ -215,15 +215,15 @@ export function PanelWithForwardedRef({
   const style = getPanelStyle(panelDataRef.current);
 
   return createElement(Type, {
+    ...rest,
+
     children,
     className: classNameFromProps,
     style: {
       ...style,
       ...styleFromProps,
     },
 
-    ...dataAttributes,
-
     // CSS selectors
     "data-panel": "",
     "data-panel-id": panelId,

packages/react-resizable-panels/src/PanelGroup.test.tsx

@@ -2,13 +2,14 @@ import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import {
   ImperativePanelGroupHandle,
-  MixedSizes,
   Panel,
   PanelGroup,
   PanelResizeHandle,
 } from ".";
 import { mockPanelGroupOffsetWidthAndHeight } from "./utils/test-utils";
 import { createRef } from "./vendor/react";
+import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
+import assert from "assert";
 
 describe("PanelGroup", () => {
   let expectedWarnings: string[] = [];
@@ -79,9 +80,9 @@ describe("PanelGroup", () => {
     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;
       };
 
@@ -105,6 +106,30 @@ describe("PanelGroup", () => {
     });
   });
 
+  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(() => {