react-resizable-panels 2.0.6 → 2.0.8-rc.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 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)
+
 ## 2.0.6
 
 - Replace `useLayoutEffect` usage with SSR-safe wrapper hook (#294)

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

@@ -186,11 +186,10 @@ 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": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1245,7 +1244,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -192,11 +192,10 @@ 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": 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, {
@@ -1261,7 +1260,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -168,11 +168,10 @@ 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": 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, {
@@ -1237,7 +1236,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -162,11 +162,10 @@ 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": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1221,7 +1220,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -188,11 +188,10 @@ 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": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1247,7 +1246,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -199,11 +199,10 @@ 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": 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, {
@@ -1268,7 +1267,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -175,11 +175,10 @@ 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": 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, {
@@ -1244,7 +1243,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -161,11 +161,10 @@ 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": 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, {
@@ -1106,7 +1105,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -137,11 +137,10 @@ 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": 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, {
@@ -1082,7 +1081,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -164,11 +164,10 @@ 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": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1223,7 +1222,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -150,11 +150,10 @@ 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": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1095,7 +1094,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

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

@@ -126,11 +126,10 @@ 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": undefined,
-    "data-panel-size": undefined
+    "data-panel-id": panelId,
+    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1)
   });
 }
 const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
@@ -1071,7 +1070,7 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize !== null && defaultSize !== void 0 ? defaultSize : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";

package/package.json

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

package/src/Panel.ts

@@ -243,16 +243,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/utils/computePanelFlexBoxStyle.test.ts

@@ -0,0 +1,123 @@
+import { PanelConstraints, PanelData } from "../Panel";
+import { computePanelFlexBoxStyle } from "./computePanelFlexBoxStyle";
+
+describe("computePanelFlexBoxStyle", () => {
+  function createPanelData(constraints: PanelConstraints = {}): PanelData {
+    return {
+      callbacks: {},
+      constraints,
+      id: "fake",
+      idIsFromProps: false,
+      order: undefined,
+    };
+  }
+
+  it("should observe a panel's default size if group layout has not yet been computed", () => {
+    expect(
+      computePanelFlexBoxStyle({
+        defaultSize: 0.1233456789,
+        dragState: null,
+        layout: [],
+        panelData: [
+          createPanelData({
+            defaultSize: 0.1233456789,
+          }),
+          createPanelData(),
+        ],
+        panelIndex: 0,
+        precision: 2,
+      })
+    ).toMatchInlineSnapshot(`
+{
+  "flexBasis": 0,
+  "flexGrow": "0.12",
+  "flexShrink": 1,
+  "overflow": "hidden",
+  "pointerEvents": undefined,
+}
+`);
+  });
+
+  it("should always fill the full width for single-panel groups", () => {
+    expect(
+      computePanelFlexBoxStyle({
+        defaultSize: undefined,
+        dragState: null,
+        layout: [],
+        panelData: [createPanelData()],
+        panelIndex: 0,
+        precision: 2,
+      })
+    ).toMatchInlineSnapshot(`
+{
+  "flexBasis": 0,
+  "flexGrow": "1",
+  "flexShrink": 1,
+  "overflow": "hidden",
+  "pointerEvents": undefined,
+}
+`);
+  });
+
+  it("should round sizes to avoid floating point precision errors", () => {
+    const layout = [0.25435, 0.5758, 0.1698];
+    const panelData = [createPanelData(), createPanelData(), createPanelData()];
+
+    expect(
+      computePanelFlexBoxStyle({
+        defaultSize: undefined,
+        dragState: null,
+        layout,
+        panelData,
+        panelIndex: 0,
+        precision: 2,
+      })
+    ).toMatchInlineSnapshot(`
+{
+  "flexBasis": 0,
+  "flexGrow": "0.25",
+  "flexShrink": 1,
+  "overflow": "hidden",
+  "pointerEvents": undefined,
+}
+`);
+
+    expect(
+      computePanelFlexBoxStyle({
+        defaultSize: undefined,
+        dragState: null,
+        layout,
+        panelData,
+        panelIndex: 1,
+        precision: 2,
+      })
+    ).toMatchInlineSnapshot(`
+{
+  "flexBasis": 0,
+  "flexGrow": "0.58",
+  "flexShrink": 1,
+  "overflow": "hidden",
+  "pointerEvents": undefined,
+}
+`);
+
+    expect(
+      computePanelFlexBoxStyle({
+        defaultSize: undefined,
+        dragState: null,
+        layout,
+        panelData,
+        panelIndex: 2,
+        precision: 2,
+      })
+    ).toMatchInlineSnapshot(`
+{
+  "flexBasis": 0,
+  "flexGrow": "0.17",
+  "flexShrink": 1,
+  "overflow": "hidden",
+  "pointerEvents": undefined,
+}
+`);
+  });
+});

package/src/utils/computePanelFlexBoxStyle.ts

@@ -26,7 +26,8 @@ export function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize ?? "1";
+    flexGrow =
+      defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";