react-resizable-panels 2.0.5 → 2.0.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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)
+
 ## 2.0.5
 
 - Resize handle hit detection considers [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) when determining hit detection (#291)

package/dist/declarations/src/vendor/react.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactElement, ReactNode, RefObject, TouchEvent } from "react";
-declare const createElement: typeof React.createElement, createContext: typeof React.createContext, createRef: typeof React.createRef, forwardRef: typeof React.forwardRef, useCallback: typeof React.useCallback, useContext: typeof React.useContext, useEffect: typeof React.useEffect, useImperativeHandle: typeof React.useImperativeHandle, useLayoutEffect: typeof React.useLayoutEffect, useMemo: typeof React.useMemo, useRef: typeof React.useRef, useState: typeof React.useState;
+declare const createElement: typeof React.createElement, createContext: typeof React.createContext, createRef: typeof React.createRef, forwardRef: typeof React.forwardRef, useCallback: typeof React.useCallback, useContext: typeof React.useContext, useEffect: typeof React.useEffect, useImperativeHandle: typeof React.useImperativeHandle, useMemo: typeof React.useMemo, useRef: typeof React.useRef, useState: typeof React.useState;
 declare const useId: () => string;
-export { createElement, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, };
+declare const useLayoutEffect_do_not_use_directly: typeof React.useLayoutEffect;
+export { createElement, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect_do_not_use_directly, useMemo, useRef, useState, };
 export type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactElement, ReactNode, RefObject, TouchEvent, };

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

@@ -46,11 +46,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = useLayoutEffect ;
+const useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -1244,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";
@@ -2098,7 +2099,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

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

@@ -46,11 +46,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = useLayoutEffect ;
+const useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -1260,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";
@@ -2204,7 +2205,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

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

@@ -22,11 +22,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = useLayoutEffect ;
+const useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -1236,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";
@@ -2180,7 +2181,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

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

@@ -22,11 +22,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = useLayoutEffect ;
+const useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -1220,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";
@@ -2074,7 +2075,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

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

@@ -48,11 +48,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -1246,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";
@@ -2100,7 +2101,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

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

@@ -48,11 +48,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -1267,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";
@@ -2211,7 +2212,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

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

@@ -24,11 +24,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -1243,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";
@@ -2187,7 +2188,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

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";
@@ -1980,9 +1980,6 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);

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";
@@ -1956,9 +1956,6 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);

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

@@ -24,11 +24,12 @@ const {
 
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -1222,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";
@@ -2076,7 +2077,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

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";
@@ -1879,9 +1879,6 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);

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";
@@ -1855,9 +1855,6 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);

package/package.json

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

package/src/PanelResizeHandle.ts

@@ -7,7 +7,6 @@ import {
   ReactElement,
   useContext,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
 } from "./vendor/react";
@@ -24,6 +23,7 @@ import {
   ResizeHandlerAction,
 } from "./PanelResizeHandleRegistry";
 import { assert } from "./utils/assert";
+import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type ResizeHandlerState = "drag" | "hover" | "inactive";
@@ -97,7 +97,7 @@ export function PanelResizeHandle({
     state,
   });
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
 

package/src/hooks/useIsomorphicEffect.ts

@@ -1,6 +1,8 @@
 import { isBrowser } from "#is-browser";
-import { useLayoutEffect } from "../vendor/react";
+import { useLayoutEffect_do_not_use_directly } from "../vendor/react";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser
+  ? useLayoutEffect_do_not_use_directly
+  : () => {};
 
 export default useIsomorphicLayoutEffect;

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

package/src/vendor/react.ts

@@ -39,6 +39,8 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = (React as any)["useId".toString()] as () => string;
 
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
+
 export {
   createElement,
   createContext,
@@ -49,7 +51,7 @@ export {
   useEffect,
   useId,
   useImperativeHandle,
-  useLayoutEffect,
+  useLayoutEffect_do_not_use_directly,
   useMemo,
   useRef,
   useState,