[pull] main from bvaughn:main

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+- Replace `"unset"` styles with safer override values
+- Use capture phase for `"pointerdown"` and `"pointerup"` events; this is necessary for compatibility with certain UI libraries like Blueprint JS
+- Read `Panel` pixel size using `offsetWidth`/`offsetHeight` rather than `inlineSize` to avoid an edgecase bug with `ResizeObserver`
+
 ## 4.3.0
 
 - [583](https://github.com/bvaughn/react-resizable-panels/pull/583): `Group` component now sets default `width`, `height`, and `overflow` styles; (both can be overridden using the `style` property)

lib/components/panel/Panel.test.tsx

@@ -117,18 +117,18 @@ describe("Panel", () => {
 
       const panel = container.querySelector("[data-panel]") as HTMLElement;
 
-      expect(panel.style.minHeight).toBe("unset");
-      expect(panel.style.maxHeight).toBe("unset");
-      expect(panel.style.height).toBe("unset");
-
-      expect(panel.style.minWidth).toBe("unset");
-      expect(panel.style.maxWidth).toBe("unset");
-      expect(panel.style.width).toBe("unset");
-
-      expect(panel.style.border).toBe("unset");
-      expect(panel.style.borderWidth).toBe("unset");
-      expect(panel.style.padding).toBe("unset");
-      expect(panel.style.margin).toBe("unset");
+      expect(panel.style.minHeight).toBe("0");
+      expect(panel.style.maxHeight).toBe("100%");
+      expect(panel.style.height).toBe("auto");
+
+      expect(panel.style.minWidth).toBe("0");
+      expect(panel.style.maxWidth).toBe("100%");
+      expect(panel.style.width).toBe("auto");
+
+      expect(panel.style.border).toBe("0px");
+      expect(panel.style.borderWidth).toBe("0px");
+      expect(panel.style.padding).toBe("0px");
+      expect(panel.style.margin).toBe("0px");
     });
 
     describe("ARIA attributes", () => {

lib/components/panel/Panel.tsx

@@ -153,21 +153,16 @@ export function Panel({
 Panel.displayName = "Panel";
 
 const PROHIBITED_CSS_PROPERTIES: CSSProperties = {
-  minHeight: "unset",
-  maxHeight: "unset",
-  height: "unset",
-
-  minWidth: "unset",
-  maxWidth: "unset",
-  width: "unset",
-
-  flex: "unset",
-  flexBasis: "unset",
-  flexShrink: "unset",
-  flexGrow: "unset",
-
-  border: "unset",
-  borderWidth: "unset",
-  padding: "unset",
-  margin: "unset"
+  minHeight: 0,
+  maxHeight: "100%",
+  height: "auto",
+
+  minWidth: 0,
+  maxWidth: "100%",
+  width: "auto",
+
+  border: "none",
+  borderWidth: 0,
+  padding: 0,
+  margin: 0
 };

lib/global/mountGroup.ts

@@ -170,10 +170,10 @@ export function mountGroup(group: RegisteredGroup) {
 
   // If this is the first group to be mounted, initialize event handlers
   if (ownerDocumentReferenceCounts.get(ownerDocument) === 1) {
-    ownerDocument.addEventListener("pointerdown", onDocumentPointerDown);
+    ownerDocument.addEventListener("pointerdown", onDocumentPointerDown, true);
     ownerDocument.addEventListener("pointerleave", onDocumentPointerLeave);
     ownerDocument.addEventListener("pointermove", onDocumentPointerMove);
-    ownerDocument.addEventListener("pointerup", onDocumentPointerUp);
+    ownerDocument.addEventListener("pointerup", onDocumentPointerUp, true);
   }
 
   return function unmountGroup() {
@@ -197,10 +197,14 @@ export function mountGroup(group: RegisteredGroup) {
 
     // If this was the last group to be mounted, tear down event handlers
     if (!ownerDocumentReferenceCounts.get(ownerDocument)) {
-      ownerDocument.removeEventListener("pointerdown", onDocumentPointerDown);
+      ownerDocument.removeEventListener(
+        "pointerdown",
+        onDocumentPointerDown,
+        true
+      );
       ownerDocument.removeEventListener("pointerleave", onDocumentPointerLeave);
       ownerDocument.removeEventListener("pointermove", onDocumentPointerMove);
-      ownerDocument.removeEventListener("pointerup", onDocumentPointerUp);
+      ownerDocument.removeEventListener("pointerup", onDocumentPointerUp, true);
     }
 
     resizeObserver.disconnect();

lib/global/utils/notifyPanelOnResize.ts

@@ -19,12 +19,15 @@ export function notifyPanelOnResize(
 
   const groupSize = calculateAvailableGroupSize({ group });
 
+  const panelSize =
+    group.orientation === "horizontal"
+      ? panel.element.offsetWidth
+      : panel.element.offsetHeight;
+
   const prevSize = panel.mutableValues.prevSize;
   const nextSize = {
-    asPercentage: formatLayoutNumber(
-      (resizeObserverSize.inlineSize / groupSize) * 100
-    ),
-    inPixels: resizeObserverSize.inlineSize
+    asPercentage: formatLayoutNumber((panelSize / groupSize) * 100),
+    inPixels: panelSize
   };
   panel.mutableValues.prevSize = nextSize;