react-resizable-panels 2.0.6 → 2.0.7

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

@@ -1245,7 +1245,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

@@ -1261,7 +1261,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

@@ -1237,7 +1237,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

@@ -1221,7 +1221,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

@@ -1247,7 +1247,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

@@ -1268,7 +1268,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

@@ -1244,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.development.node.cjs.js

@@ -1106,7 +1106,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

@@ -1082,7 +1082,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

@@ -1223,7 +1223,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

@@ -1095,7 +1095,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

@@ -1071,7 +1071,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.7",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

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";