react-resizable-panels 0.0.43 → 0.0.45

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.0.45
+* SSR: Avoid layout shift by using `defaultSize` to set initial `flex-grow` style
+* SSR: Warn if `Panel` is server-rendered without a `defaultSize` prop
+* [#135](https://github.com/bvaughn/react-resizable-panels/issues/135): Support RTL layouts
+
+## 0.0.44
+* [#142](https://github.com/bvaughn/react-resizable-panels/pull/142): Avoid re-registering Panel when props change; this should reduce the number of scenarios requiring the `order` prop
+
 ## 0.0.43
 * Add imperative `getLayout` API to `PanelGroup`
 * [#139](https://github.com/bvaughn/react-resizable-panels/pull/139): Fix edge case bug where simultaneous `localStorage` updates to multiple saved groups would drop some values

package/dist/react-resizable-panels.d.ts.map

@@ -1 +1 @@
-{"mappings":";AGEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,gCAAgC;IAC9B,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,0BAAiC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AAC3D,uBAA8B,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;AAC3D,qBAA4B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AACnD,mCAA0C,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AEMxE,yBAAyB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,oCAAoC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,IAAI,OAAO,CAAC;IACxB,OAAO,IAAI,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAyIF,OAAO,MAAM,mHAGZ,CAAC;AUlFF,8BAA8B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,yCAAyC;IACvC,SAAS,EAAE,MAAM,MAAM,EAAE,CAAC;IAC1B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAmkBF,OAAO,MAAM,kIAKZ,CAAC;ACjqBF,qCAAqC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,UAAU,CAAC,EAAE,2BAA2B,CAAC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,kCAAkC,EAChC,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,QAAgB,EAChB,EAAE,EAAE,WAAkB,EACtB,UAAU,EACV,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,sBAAsB,0FAoJxB","sources":["packages/react-resizable-panels/src/src/vendor/react.ts","packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/assert.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/arrays.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/utils/cursor.ts","packages/react-resizable-panels/src/src/utils/debounce.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/PanelGroup.ts","packages/react-resizable-panels/src/src/PanelResizeHandle.ts","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { ImperativePanelGroupHandle, PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\nimport type { PanelGroupStorage } from \"./types\";\n\nexport {\n  // TypeScript types\n  ImperativePanelGroupHandle,\n  ImperativePanelHandle,\n  Panel,\n  PanelGroup,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandle,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
+{"mappings":";AGEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,gCAAgC;IAC9B,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,0BAAiC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AAC3D,uBAA8B,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;AAC3D,qBAA4B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AACnD,mCAA0C,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AEWxE,yBAAyB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,oCAAoC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,IAAI,OAAO,CAAC;IACxB,OAAO,IAAI,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AA+IF,OAAO,MAAM,mHAGZ,CAAC;AW5FF,8BAA8B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,yCAAyC;IACvC,SAAS,EAAE,MAAM,MAAM,EAAE,CAAC;IAC1B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAklBF,OAAO,MAAM,kIAKZ,CAAC;ACjrBF,qCAAqC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,UAAU,CAAC,EAAE,2BAA2B,CAAC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,kCAAkC,EAChC,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,QAAgB,EAChB,EAAE,EAAE,WAAkB,EACtB,UAAU,EACV,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,sBAAsB,0FAoJxB","sources":["packages/react-resizable-panels/src/src/vendor/react.ts","packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/assert.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/arrays.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/utils/cursor.ts","packages/react-resizable-panels/src/src/utils/debounce.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/utils/ssr.ts","packages/react-resizable-panels/src/src/PanelGroup.ts","packages/react-resizable-panels/src/src/PanelResizeHandle.ts","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { ImperativePanelGroupHandle, PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\nimport type { PanelGroupStorage } from \"./types\";\n\nexport {\n  // TypeScript types\n  ImperativePanelGroupHandle,\n  ImperativePanelHandle,\n  Panel,\n  PanelGroup,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandle,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}

package/dist/react-resizable-panels.js

@@ -19,7 +19,6 @@ const { createElement: $6e687094f9ca8395$export$c8a8987d4410bf2d , createContext
 const $6e687094f9ca8395$export$f680877a34711e37 = $2IMI0$react["useId".toString()];
 
 
-
 const $129b5b9a317dcc10$var$canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
 const $129b5b9a317dcc10$var$useIsomorphicLayoutEffect = $129b5b9a317dcc10$var$canUseEffectHooks ? (0, $6e687094f9ca8395$export$e5c5a5f917a5871c) : ()=>{};
 var $129b5b9a317dcc10$export$2e2bcd8739ae039 = $129b5b9a317dcc10$var$useIsomorphicLayoutEffect;
@@ -37,6 +36,7 @@ function $b1693d8d8f570e9c$export$2e2bcd8739ae039(idFromParams = null) {
 
 
 
+
 const $b9cf028330e7f243$export$7d8c6d083caec74a = (0, $6e687094f9ca8395$export$fd42f52fd3ae1109)(null);
 // Workaround for Parcel scope hoisting (which renames objects/functions).
 // Casting to :any is required to avoid corrupting the generated TypeScript types.
@@ -68,37 +68,40 @@ function $45da0e827c614f1d$var$PanelWithForwardedRef({ children: children = null
             defaultSize = minSize;
         }
     }
+    const style = getPanelStyle(panelId, defaultSize);
+    const committedValuesRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
+        size: $45da0e827c614f1d$var$parseSizeFromStyle(style)
+    });
+    const panelDataRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
+        callbacksRef: callbacksRef,
+        collapsible: collapsible,
+        defaultSize: defaultSize,
+        id: panelId,
+        maxSize: maxSize,
+        minSize: minSize,
+        order: order
+    });
     (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
-        const panel = {
-            callbacksRef: callbacksRef,
-            collapsible: collapsible,
-            defaultSize: defaultSize,
-            id: panelId,
-            maxSize: maxSize,
-            minSize: minSize,
-            order: order
-        };
-        registerPanel(panelId, panel);
+        committedValuesRef.current.size = $45da0e827c614f1d$var$parseSizeFromStyle(style);
+        panelDataRef.current.callbacksRef = callbacksRef;
+        panelDataRef.current.collapsible = collapsible;
+        panelDataRef.current.defaultSize = defaultSize;
+        panelDataRef.current.id = panelId;
+        panelDataRef.current.maxSize = maxSize;
+        panelDataRef.current.minSize = minSize;
+        panelDataRef.current.order = order;
+    });
+    (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
+        registerPanel(panelId, panelDataRef);
         return ()=>{
             unregisterPanel(panelId);
         };
     }, [
-        collapsible,
-        defaultSize,
-        panelId,
-        maxSize,
-        minSize,
         order,
+        panelId,
         registerPanel,
         unregisterPanel
     ]);
-    const style = getPanelStyle(panelId);
-    const committedValuesRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
-        size: $45da0e827c614f1d$var$parseSizeFromStyle(style)
-    });
-    (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
-        committedValuesRef.current.size = $45da0e827c614f1d$var$parseSizeFromStyle(style);
-    });
     (0, $6e687094f9ca8395$export$d5a552a76deda3c2)(forwardedRef, ()=>({
             collapse: ()=>collapsePanel(panelId),
             expand: ()=>expandPanel(panelId),
@@ -173,7 +176,7 @@ function $cda3cc4b1114cf23$export$f50bae335f53943c(event, panels, idBefore, idAf
     // Max-bounds check the panel being expanded first.
     {
         const pivotId = delta < 0 ? idAfter : idBefore;
-        const index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+        const index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
         const panel = panelsArray[index];
         const baseSize = baseSizes[index];
         const nextSize = $cda3cc4b1114cf23$var$safeResizePanel(panel, Math.abs(delta), baseSize, event);
@@ -185,14 +188,14 @@ function $cda3cc4b1114cf23$export$f50bae335f53943c(event, panels, idBefore, idAf
         }
     }
     let pivotId = delta < 0 ? idBefore : idAfter;
-    let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    let index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
     while(true){
         const panel = panelsArray[index];
         const baseSize = baseSizes[index];
         const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
         const nextSize = $cda3cc4b1114cf23$var$safeResizePanel(panel, 0 - deltaRemaining, baseSize, event);
         if (baseSize !== nextSize) {
-            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(panel.id, baseSize);
+            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(panel.current.id, baseSize);
             deltaApplied += baseSize - nextSize;
             nextSizes[index] = nextSize;
             if (deltaApplied.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)).localeCompare(Math.abs(delta).toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)), undefined, {
@@ -210,7 +213,7 @@ function $cda3cc4b1114cf23$export$f50bae335f53943c(event, panels, idBefore, idAf
     if (deltaApplied === 0) return baseSizes;
     // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
     pivotId = delta < 0 ? idAfter : idBefore;
-    index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
     nextSizes[index] = baseSizes[index] + deltaApplied;
     return nextSizes;
 }
@@ -218,7 +221,7 @@ function $cda3cc4b1114cf23$export$b8e48269e4faa934(panelsArray, prevSizes, nextS
     nextSizes.forEach((nextSize, index)=>{
         const prevSize = prevSizes[index];
         if (prevSize !== nextSize) {
-            const { callbacksRef: callbacksRef , collapsible: collapsible  } = panelsArray[index];
+            const { callbacksRef: callbacksRef , collapsible: collapsible  } = panelsArray[index].current;
             const { onCollapse: onCollapse , onResize: onResize  } = callbacksRef.current;
             if (onResize) onResize(nextSize);
             if (collapsible && onCollapse) {
@@ -235,14 +238,14 @@ function $cda3cc4b1114cf23$export$5a5b0c1d38c23c3b(id, panelsArray) {
         null,
         null
     ];
-    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const index = panelsArray.findIndex((panel)=>panel.current.id === id);
     if (index < 0) return [
         null,
         null
     ];
     const isLastPanel = index === panelsArray.length - 1;
-    const idBefore = isLastPanel ? panelsArray[index - 1].id : id;
-    const idAfter = isLastPanel ? id : panelsArray[index + 1].id;
+    const idBefore = isLastPanel ? panelsArray[index - 1].current.id : id;
+    const idAfter = isLastPanel ? id : panelsArray[index + 1].current.id;
     return [
         idBefore,
         idAfter
@@ -251,7 +254,7 @@ function $cda3cc4b1114cf23$export$5a5b0c1d38c23c3b(id, panelsArray) {
 function $cda3cc4b1114cf23$export$6f43503e166de6fb(panels, id, sizes) {
     if (panels.size === 1) return "100";
     const panelsArray = $cda3cc4b1114cf23$export$a861c0ad45885494(panels);
-    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const index = panelsArray.findIndex((panel)=>panel.current.id === id);
     const size = sizes[index];
     if (size == null) return "0";
     return size.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879));
@@ -283,14 +286,14 @@ function $cda3cc4b1114cf23$export$ae14931f0a0256a3(groupId) {
     return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
 }
 function $cda3cc4b1114cf23$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
-    var _panelsArray_index, _panelsArray_;
+    var _panelsArray_index, _panelsArray_index_current, _panelsArray_, _panelsArray__current;
     const handle = $cda3cc4b1114cf23$export$2e27d3a347680388(handleId);
     const handles = $cda3cc4b1114cf23$export$ae14931f0a0256a3(groupId);
     const index = handle ? handles.indexOf(handle) : -1;
-    var _panelsArray_index_id;
-    const idBefore = (_panelsArray_index_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : _panelsArray_index.id) !== null && _panelsArray_index_id !== void 0 ? _panelsArray_index_id : null;
-    var _panelsArray__id;
-    const idAfter = (_panelsArray__id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : _panelsArray_.id) !== null && _panelsArray__id !== void 0 ? _panelsArray__id : null;
+    var _panelsArray_index_current_id;
+    const idBefore = (_panelsArray_index_current_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : (_panelsArray_index_current = _panelsArray_index.current) === null || _panelsArray_index_current === void 0 ? void 0 : _panelsArray_index_current.id) !== null && _panelsArray_index_current_id !== void 0 ? _panelsArray_index_current_id : null;
+    var _panelsArray__current_id;
+    const idAfter = (_panelsArray__current_id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : (_panelsArray__current = _panelsArray_.current) === null || _panelsArray__current === void 0 ? void 0 : _panelsArray__current.id) !== null && _panelsArray__current_id !== void 0 ? _panelsArray__current_id : null;
     return [
         idBefore,
         idAfter
@@ -298,8 +301,8 @@ function $cda3cc4b1114cf23$export$68d3a33c21dfbe27(groupId, handleId, panelsArra
 }
 function $cda3cc4b1114cf23$export$a861c0ad45885494(panels) {
     return Array.from(panels.values()).sort((panelA, panelB)=>{
-        const orderA = panelA.order;
-        const orderB = panelB.order;
+        const orderA = panelA.current.order;
+        const orderB = panelB.current.order;
         if (orderA == null && orderB == null) return 0;
         else if (orderA == null) return -1;
         else if (orderB == null) return 1;
@@ -308,7 +311,7 @@ function $cda3cc4b1114cf23$export$a861c0ad45885494(panels) {
 }
 function $cda3cc4b1114cf23$var$safeResizePanel(panel, delta, prevSize, event) {
     const nextSizeUnsafe = prevSize + delta;
-    if (panel.collapsible) {
+    if (panel.current.collapsible) {
         if (prevSize > 0) {
             if (nextSizeUnsafe <= 0) return 0;
         } else {
@@ -318,11 +321,11 @@ function $cda3cc4b1114cf23$var$safeResizePanel(panel, delta, prevSize, event) {
                 // Keyboard events should expand a collapsed panel to the min size,
                 // but mouse events should wait until the panel has reached its min size
                 // to avoid a visual flickering when dragging between collapsed and min size.
-                if (nextSizeUnsafe < panel.minSize) return 0;
+                if (nextSizeUnsafe < panel.current.minSize) return 0;
             }
         }
     }
-    const nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSizeUnsafe));
+    const nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSizeUnsafe));
     return nextSize;
 }
 
@@ -352,12 +355,12 @@ function $a695670cc57a5969$export$d9fcbe062527d159({ committedValuesRef: committ
             let totalMaxSize = 0;
             // A panel's effective min/max sizes also need to account for other panel's sizes.
             panelsArray.forEach((panelData)=>{
-                if (panelData.id === idBefore) {
-                    maxSize = panelData.maxSize;
-                    minSize = panelData.minSize;
+                if (panelData.current.id === idBefore) {
+                    maxSize = panelData.current.maxSize;
+                    minSize = panelData.current.minSize;
                 } else {
-                    totalMinSize += panelData.minSize;
-                    totalMaxSize += panelData.maxSize;
+                    totalMinSize += panelData.current.minSize;
+                    totalMaxSize += panelData.current.maxSize;
                 }
             });
             const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
@@ -372,13 +375,13 @@ function $a695670cc57a5969$export$d9fcbe062527d159({ committedValuesRef: committ
                     case "Enter":
                         {
                             event.preventDefault();
-                            const index = panelsArray.findIndex((panel)=>panel.id === idBefore);
+                            const index = panelsArray.findIndex((panel)=>panel.current.id === idBefore);
                             if (index >= 0) {
                                 const panelData = panelsArray[index];
                                 const size = sizes[index];
                                 if (size != null) {
                                     let delta = 0;
-                                    if (size.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
+                                    if (size.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) <= panelData.current.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
                                     else delta = -(direction === "horizontal" ? width : height);
                                     const nextSizes = (0, $cda3cc4b1114cf23$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
                                     if (sizes !== nextSizes) setSizes(nextSizes);
@@ -518,11 +521,11 @@ function $47eee9224cfec8e8$export$354b17c0684607ed(event, groupId, handleId, pan
         // If expanding from collapsed, they should snap back to their minSize.
         const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
         const targetPanelId = movement < 0 ? idBefore : idAfter;
-        const targetPanelIndex = panelsArray.findIndex((panel)=>panel.id === targetPanelId);
+        const targetPanelIndex = panelsArray.findIndex((panel)=>panel.current.id === targetPanelId);
         const targetPanel = panelsArray[targetPanelIndex];
-        if (targetPanel.collapsible) {
+        if (targetPanel.current.collapsible) {
             const baseSize = baseSizes[targetPanelIndex];
-            if (baseSize === 0 || baseSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
+            if (baseSize === 0 || baseSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) === targetPanel.current.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.current.minSize * groupSizeInPixels : targetPanel.current.minSize * groupSizeInPixels;
         }
         return movement;
     } else return $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
@@ -594,7 +597,7 @@ function $2e8572579e31d898$export$2e2bcd8739ae039(callback, durationMs = 10) {
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
 function $f9cb001fbb908626$var$getSerializationKey(panels) {
     return panels.map((panel)=>{
-        const { minSize: minSize , order: order  } = panel;
+        const { minSize: minSize , order: order  } = panel.current;
         return order ? `${order}:${minSize}` : `${minSize}`;
     }).sort((a, b)=>a.localeCompare(b)).join(",");
 }
@@ -629,6 +632,14 @@ function $f9cb001fbb908626$export$af183b313c61be4f(autoSaveId, panels, sizes, st
 }
 
 
+function $ed0ab1c277bd13ad$export$1aa6024f7a345313() {
+    try {
+        return window, false;
+    } catch (error) {}
+    return true;
+}
+
+
 const $cec4cafe75f3db78$var$debounceMap = {};
 function $cec4cafe75f3db78$var$throwServerError() {
     throw new Error('PanelGroup "storage" prop required for server rendering.');
@@ -737,15 +748,15 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
             // e.g. if Panel A has a maxSize of 40 then Panels A and B can't both have an implicit default size of 50.
             // For now, these logic edge cases are left to the user to handle via props.
             panelsArray.forEach((panel)=>{
-                totalMinSize += panel.minSize;
-                if (panel.defaultSize === null) panelsWithNullDefaultSize++;
-                else totalDefaultSize += panel.defaultSize;
+                totalMinSize += panel.current.minSize;
+                if (panel.current.defaultSize === null) panelsWithNullDefaultSize++;
+                else totalDefaultSize += panel.current.defaultSize;
             });
             if (totalDefaultSize > 100) throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
             else if (totalMinSize > 100) throw new Error(`The sum of the minSize of all panels in a group cannot exceed 100.`);
             setSizes(panelsArray.map((panel)=>{
-                if (panel.defaultSize === null) return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
-                return panel.defaultSize;
+                if (panel.current.defaultSize === null) return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
+                return panel.current.defaultSize;
             }));
         }
     }, [
@@ -768,18 +779,21 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         sizes,
         storage
     ]);
-    const getPanelStyle = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((id)=>{
+    const getPanelStyle = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((id, defaultSize)=>{
         const { panels: panels  } = committedValuesRef.current;
         // Before mounting, Panels will not yet have registered themselves.
         // This includes server rendering.
         // At this point the best we can do is render everything with the same size.
-        if (panels.size === 0) return {
-            flexBasis: "auto",
-            flexGrow: 1,
-            flexShrink: 1,
-            // Without this, Panel sizes may be unintentionally overridden by their content.
-            overflow: "hidden"
-        };
+        if (panels.size === 0) {
+            if ((0, $ed0ab1c277bd13ad$export$1aa6024f7a345313)() && defaultSize == null) console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+            return {
+                flexBasis: 0,
+                flexGrow: defaultSize != null ? defaultSize : undefined,
+                flexShrink: 1,
+                // Without this, Panel sizes may be unintentionally overridden by their content.
+                overflow: "hidden"
+            };
+        }
         const flexGrow = (0, $cda3cc4b1114cf23$export$6f43503e166de6fb)(panels, id, sizes);
         return {
             flexBasis: 0,
@@ -796,11 +810,11 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         disablePointerEventsDuringResize,
         sizes
     ]);
-    const registerPanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((id, panel)=>{
+    const registerPanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((id, panelRef)=>{
         setPanels((prevPanels)=>{
             if (prevPanels.has(id)) return prevPanels;
             const nextPanels = new Map(prevPanels);
-            nextPanels.set(id, panel);
+            nextPanels.set(id, panelRef);
             return nextPanels;
         });
     }, []);
@@ -811,11 +825,13 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
             const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
             const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
             if (idBefore == null || idAfter == null) return;
-            const movement = (0, $47eee9224cfec8e8$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
+            let movement = (0, $47eee9224cfec8e8$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
             if (movement === 0) return;
             const groupElement = (0, $cda3cc4b1114cf23$export$5e67632cf3550a9c)(groupId);
             const rect = groupElement.getBoundingClientRect();
             const isHorizontal = direction === "horizontal";
+            // Support RTL layouts
+            if (document.dir === "rtl" && isHorizontal) movement = -movement;
             const size = isHorizontal ? rect.width : rect.height;
             const delta = movement / size * 100;
             const nextSizes = (0, $cda3cc4b1114cf23$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, initialDragStateRef.current);
@@ -858,7 +874,7 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
     const collapsePanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((id)=>{
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
-        if (panel == null || !panel.collapsible) return;
+        if (panel == null || !panel.current.collapsible) return;
         const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
         const index = panelsArray.indexOf(panel);
         if (index < 0) return;
@@ -881,7 +897,7 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
         if (panel == null) return;
-        const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.minSize;
+        const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
         if (!sizeBeforeCollapse) return;
         const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
         const index = panelsArray.indexOf(panel);
@@ -909,8 +925,8 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         if (index < 0) return;
         const currentSize = prevSizes[index];
         if (currentSize === nextSize) return;
-        if (panel.collapsible && nextSize === 0) ;
-        else nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSize));
+        if (panel.current.collapsible && nextSize === 0) ;
+        else nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSize));
         const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$5a5b0c1d38c23c3b)(id, panelsArray);
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;