Fix bad dev-conditionally around data attributes

bvaughn · Nov 13, 2023 · 65a8e7a · 65a8e7a
1 parent 715ab01
commit 65a8e7a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts
@@ -243,12 +243,12 @@ export function PanelWithForwardedRef({
 
     // CSS selectors
     "data-panel": "",
+    "data-panel-id": panelId,
 
     // e2e test attributes
     "data-panel-collapsible": isDevelopment
       ? collapsible || undefined
       : undefined,
-    "data-panel-id": isDevelopment ? panelId : undefined,
     "data-panel-size": isDevelopment
       ? parseFloat("" + style.flexGrow).toFixed(1)
       : undefined,

diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts
@@ -266,6 +266,10 @@ function PanelGroupWithForwardedRef({
     }
 
     const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
+    if (groupSizePixels <= 0) {
+      // Wait until the group has rendered a non-zero size before computing layout.
+      return;
+    }
 
     if (unsafeLayout == null) {
       unsafeLayout = calculateUnsafeDefaultLayout({
@@ -925,10 +929,8 @@ function PanelGroupWithForwardedRef({
 
       // CSS selectors
       "data-panel-group": "",
-
-      // e2e test attributes
-      "data-panel-group-direction": isDevelopment ? direction : undefined,
-      "data-panel-group-id": isDevelopment ? groupId : undefined,
+      "data-panel-group-direction": direction,
+      "data-panel-group-id": groupId,
     })
   );
 }

diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.ts b/packages/react-resizable-panels/src/PanelResizeHandle.ts
@@ -151,19 +151,6 @@ export function PanelResizeHandle({
   return createElement(Type, {
     children,
     className: classNameFromProps,
-
-    // CSS selectors
-    "data-resize-handle": "",
-
-    "data-resize-handle-active": isDragging
-      ? "pointer"
-      : isFocused
-      ? "keyboard"
-      : undefined,
-    "data-panel-group-direction": direction,
-    "data-panel-group-id": groupId,
-    "data-panel-resize-handle-enabled": !disabled,
-    "data-panel-resize-handle-id": resizeHandleId,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     onMouseDown: (event: ReactMouseEvent) => {
@@ -192,6 +179,18 @@ export function PanelResizeHandle({
       ...styleFromProps,
     },
     tabIndex: 0,
+
+    // CSS selectors
+    "data-panel-group-direction": direction,
+    "data-panel-group-id": groupId,
+    "data-resize-handle": "",
+    "data-resize-handle-active": isDragging
+      ? "pointer"
+      : isFocused
+      ? "keyboard"
+      : undefined,
+    "data-panel-resize-handle-enabled": !disabled,
+    "data-panel-resize-handle-id": resizeHandleId,
   });
 }