react-resizable-panels 2.0.8-rc.1 → 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,6 +180,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -1972,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,
@@ -2180,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,6 +186,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -2078,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,
@@ -2286,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,6 +162,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -2054,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,
@@ -2262,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,6 +156,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -1948,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,
@@ -2156,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,6 +182,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -1974,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,
@@ -2182,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,6 +193,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -2085,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,
@@ -2293,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,6 +169,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -2061,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,
@@ -2269,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,6 +155,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -1853,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,
@@ -2058,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,6 +131,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -1829,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,
@@ -2034,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,6 +158,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -1950,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,
@@ -2158,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,6 +144,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -1752,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,
@@ -1957,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,6 +120,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -1728,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,
@@ -1933,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.8-rc.1",
+  "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,

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,