react-resizable-panels 2.0.7 → 2.0.8

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 2.0.8
+
+- `Panel`/`PanelGroup`/`PanelResizeHandle`` pass "id" prop through to DOM (#299)
+- `Panel` attributes `data-panel-collapsible` and `data-panel-size` are no longer DEV-only (#297)
+
 ## 2.0.7
 
 - Group default layouts use `toPrecision` to avoid small layout shifts due to floating point precision differences between initial server rendering and client hydration (#295)

package/dist/react-resizable-panels.browser.cjs.js

@@ -180,17 +180,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1973,11 +1973,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2181,6 +2182,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.browser.development.cjs.js

@@ -186,17 +186,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": collapsible || undefined ,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1) 
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -2079,11 +2079,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2287,6 +2288,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.browser.development.esm.js

@@ -162,17 +162,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": collapsible || undefined ,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1) 
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -2055,11 +2055,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2263,6 +2264,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.browser.esm.js

@@ -156,17 +156,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1949,11 +1949,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2157,6 +2158,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.cjs.js

@@ -182,17 +182,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1975,11 +1975,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2183,6 +2184,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.development.cjs.js

@@ -193,17 +193,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": collapsible || undefined ,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1) 
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -2086,11 +2086,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2294,6 +2295,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.development.esm.js

@@ -169,17 +169,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": collapsible || undefined ,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1) 
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -2062,11 +2062,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2270,6 +2271,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.development.node.cjs.js

@@ -155,17 +155,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": collapsible || undefined ,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1) 
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1854,11 +1854,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2059,6 +2060,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.development.node.esm.js

@@ -131,17 +131,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": collapsible || undefined ,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1) 
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1830,11 +1830,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2035,6 +2036,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.esm.js

@@ -158,17 +158,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1951,11 +1951,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2159,6 +2160,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.node.cjs.js

@@ -144,17 +144,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1753,11 +1753,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -1958,6 +1959,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.node.esm.js

@@ -120,17 +120,17 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
     },
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1729,11 +1729,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -1934,6 +1935,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/package.json

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

package/src/Panel.test.tsx

@@ -738,6 +738,38 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("a11y", () => {
+    it("should pass explicit id prop to DOM", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel id="explicit-id" />
+          </PanelGroup>
+        );
+      });
+
+      const element = container.querySelector("[data-panel]");
+
+      expect(element).not.toBeNull();
+      expect(element?.getAttribute("id")).toBe("explicit-id");
+    });
+
+    it("should not pass auto-generated id prop to DOM", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel />
+          </PanelGroup>
+        );
+      });
+
+      const element = container.querySelector("[data-panel]");
+
+      expect(element).not.toBeNull();
+      expect(element?.getAttribute("id")).toBeNull();
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about server rendered panels with no default size", () => {
       jest.resetModules();

package/src/Panel.ts

@@ -236,6 +236,7 @@ export function PanelWithForwardedRef({
 
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps,
@@ -243,16 +244,10 @@ export function PanelWithForwardedRef({
 
     // CSS selectors
     "data-panel": "",
-    "data-panel-id": panelId,
+    "data-panel-collapsible": collapsible || undefined,
     "data-panel-group-id": groupId,
-
-    // e2e test attributes
-    "data-panel-collapsible": isDevelopment
-      ? collapsible || undefined
-      : undefined,
-    "data-panel-size": isDevelopment
-      ? parseFloat("" + style.flexGrow).toFixed(1)
-      : undefined,
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1),
   });
 }
 

package/src/PanelGroup.test.tsx

@@ -276,6 +276,42 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("a11y", () => {
+    it("should pass explicit id prop to DOM", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="explicit-id">
+            <Panel />
+            <PanelResizeHandle />
+            <Panel />
+          </PanelGroup>
+        );
+      });
+
+      const element = container.querySelector("[data-panel-group]");
+
+      expect(element).not.toBeNull();
+      expect(element?.getAttribute("id")).toBe("explicit-id");
+    });
+
+    it("should not pass auto-generated id prop to DOM", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel />
+            <PanelResizeHandle />
+            <Panel />
+          </PanelGroup>
+        );
+      });
+
+      const element = container.querySelector("[data-panel-group]");
+
+      expect(element).not.toBeNull();
+      expect(element?.getAttribute("id")).toBeNull();
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about unstable layouts without id and order props", () => {
       act(() => {

package/src/PanelGroup.ts

@@ -880,13 +880,16 @@ function PanelGroupWithForwardedRef({
     { value: context },
     createElement(Type, {
       ...rest,
+
       children,
       className: classNameFromProps,
+      id: idFromProps,
+      ref: panelGroupElementRef,
       style: {
         ...style,
         ...styleFromProps,
       },
-      ref: panelGroupElementRef,
+
       // CSS selectors
       "data-panel-group": "",
       "data-panel-group-direction": direction,

package/src/PanelResizeHandle.test.tsx

@@ -269,4 +269,40 @@ describe("PanelResizeHandle", () => {
       verifyAttribute(rightElement, "data-resize-handle-active", null);
     });
   });
+
+  describe("a11y", () => {
+    it("should pass explicit id prop to DOM", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel />
+            <PanelResizeHandle id="explicit-id" />
+            <Panel />
+          </PanelGroup>
+        );
+      });
+
+      const element = container.querySelector("[data-resize-handle]");
+
+      expect(element).not.toBeNull();
+      expect(element?.getAttribute("id")).toBe("explicit-id");
+    });
+
+    it("should not pass auto-generated id prop to DOM", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel />
+            <PanelResizeHandle />
+            <Panel />
+          </PanelGroup>
+        );
+      });
+
+      const element = container.querySelector("[data-resize-handle]");
+
+      expect(element).not.toBeNull();
+      expect(element?.getAttribute("id")).toBeNull();
+    });
+  });
 });

package/src/PanelResizeHandle.ts

@@ -203,6 +203,7 @@ export function PanelResizeHandle({
 
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,