react-resizable-panels 2.0.8-rc.1 → 2.0.9

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 2.0.9
+
+- Fix Flex stacking context bug (#301)
+- Fix case where pointer event listeners were sometimes added to the document unnecessarily
+
+## 2.0.8
+
+- `Panel`/`PanelGroup`/`PanelResizeHandle`` pass "id" prop through to DOM (#299)
+- `Panel` attributes `data-panel-collapsible` and `data-panel-size` are no longer DEV-only (#297)
+
 ## 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)

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var stackingOrder = require('stacking-order');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -180,6 +179,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -303,6 +303,114 @@ function intersects(rectOne, rectTwo, strict) {
   }
 }
 
+// Forked from NPM stacking-order@2.0.0
+
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param {HTMLElement} a
+ * @param {HTMLElement} b
+ */
+function compare(a, b) {
+  if (a === b) throw new Error("Cannot compare node with itself");
+  const ancestors = {
+    a: get_ancestors(a),
+    b: get_ancestors(b)
+  };
+  let common_ancestor;
+
+  // remove shared ancestors
+  while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+    a = ancestors.a.pop();
+    b = ancestors.b.pop();
+    common_ancestor = a;
+  }
+  assert(common_ancestor);
+  const z_indexes = {
+    a: get_z_index(find_stacking_context(ancestors.a)),
+    b: get_z_index(find_stacking_context(ancestors.b))
+  };
+  if (z_indexes.a === z_indexes.b) {
+    const children = common_ancestor.childNodes;
+    const furthest_ancestors = {
+      a: ancestors.a.at(-1),
+      b: ancestors.b.at(-1)
+    };
+    let i = children.length;
+    while (i--) {
+      const child = children[i];
+      if (child === furthest_ancestors.a) return 1;
+      if (child === furthest_ancestors.b) return -1;
+    }
+  }
+  return Math.sign(z_indexes.a - z_indexes.b);
+}
+const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+
+/** @param {HTMLElement} node */
+function is_flex_item(node) {
+  const display = getComputedStyle(get_parent(node)).display;
+  return display === "flex" || display === "inline-flex";
+}
+
+/** @param {HTMLElement} node */
+function creates_stacking_context(node) {
+  const style = getComputedStyle(node);
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+  if (style.position === "fixed") return true;
+  // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
+  // if (
+  //   (style.zIndex !== "auto" && style.position !== "static") ||
+  //   is_flex_item(node)
+  // )
+  if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
+  if (+style.opacity < 1) return true;
+  if ("transform" in style && style.transform !== "none") return true;
+  if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
+  if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
+  if ("filter" in style && style.filter !== "none") return true;
+  if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
+  if ("isolation" in style && style.isolation === "isolate") return true;
+  if (props.test(style.willChange)) return true;
+  // @ts-expect-error
+  if (style.webkitOverflowScrolling === "touch") return true;
+  return false;
+}
+
+/** @param {HTMLElement[]} nodes */
+function find_stacking_context(nodes) {
+  let i = nodes.length;
+  while (i--) {
+    const node = nodes[i];
+    assert(node);
+    if (creates_stacking_context(node)) return node;
+  }
+  return null;
+}
+
+/** @param {HTMLElement} node */
+function get_z_index(node) {
+  return node && Number(getComputedStyle(node).zIndex) || 0;
+}
+
+/** @param {HTMLElement} node */
+function get_ancestors(node) {
+  const ancestors = [];
+  while (node) {
+    ancestors.push(node);
+    node = get_parent(node);
+  }
+  return ancestors; // [ node, ... <body>, <html>, document ]
+}
+
+/** @param {HTMLElement} node */
+function get_parent(node) {
+  var _node$parentNode;
+  // @ts-ignore
+  return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
+}
+
 const EXCEEDED_HORIZONTAL_MIN = 0b0001;
 const EXCEEDED_HORIZONTAL_MAX = 0b0010;
 const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -444,7 +552,7 @@ function recalculateIntersectingHandles({
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM
-      stackingOrder.compare(targetElement, dragHandleElement) > 0) {
+      compare(targetElement, dragHandleElement) > 0) {
         // If the target is above the drag handle, then we also need to confirm they overlap
         // If they are beside each other (e.g. a panel and its drag handle) then the handle is still interactive
         //
@@ -515,7 +623,7 @@ function updateListeners() {
   window.removeEventListener("mouseup", handlePointerUp);
   window.removeEventListener("touchcancel", handlePointerUp);
   window.removeEventListener("touchend", handlePointerUp);
-  if (registerResizeHandle.length > 0) {
+  if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
         ownerDocumentCounts.forEach((count, ownerDocument) => {
@@ -1972,11 +2080,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2180,6 +2289,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var stackingOrder = require('stacking-order');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -186,6 +185,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -309,6 +309,114 @@ function intersects(rectOne, rectTwo, strict) {
   }
 }
 
+// Forked from NPM stacking-order@2.0.0
+
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param {HTMLElement} a
+ * @param {HTMLElement} b
+ */
+function compare(a, b) {
+  if (a === b) throw new Error("Cannot compare node with itself");
+  const ancestors = {
+    a: get_ancestors(a),
+    b: get_ancestors(b)
+  };
+  let common_ancestor;
+
+  // remove shared ancestors
+  while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+    a = ancestors.a.pop();
+    b = ancestors.b.pop();
+    common_ancestor = a;
+  }
+  assert(common_ancestor);
+  const z_indexes = {
+    a: get_z_index(find_stacking_context(ancestors.a)),
+    b: get_z_index(find_stacking_context(ancestors.b))
+  };
+  if (z_indexes.a === z_indexes.b) {
+    const children = common_ancestor.childNodes;
+    const furthest_ancestors = {
+      a: ancestors.a.at(-1),
+      b: ancestors.b.at(-1)
+    };
+    let i = children.length;
+    while (i--) {
+      const child = children[i];
+      if (child === furthest_ancestors.a) return 1;
+      if (child === furthest_ancestors.b) return -1;
+    }
+  }
+  return Math.sign(z_indexes.a - z_indexes.b);
+}
+const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+
+/** @param {HTMLElement} node */
+function is_flex_item(node) {
+  const display = getComputedStyle(get_parent(node)).display;
+  return display === "flex" || display === "inline-flex";
+}
+
+/** @param {HTMLElement} node */
+function creates_stacking_context(node) {
+  const style = getComputedStyle(node);
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+  if (style.position === "fixed") return true;
+  // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
+  // if (
+  //   (style.zIndex !== "auto" && style.position !== "static") ||
+  //   is_flex_item(node)
+  // )
+  if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
+  if (+style.opacity < 1) return true;
+  if ("transform" in style && style.transform !== "none") return true;
+  if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
+  if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
+  if ("filter" in style && style.filter !== "none") return true;
+  if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
+  if ("isolation" in style && style.isolation === "isolate") return true;
+  if (props.test(style.willChange)) return true;
+  // @ts-expect-error
+  if (style.webkitOverflowScrolling === "touch") return true;
+  return false;
+}
+
+/** @param {HTMLElement[]} nodes */
+function find_stacking_context(nodes) {
+  let i = nodes.length;
+  while (i--) {
+    const node = nodes[i];
+    assert(node);
+    if (creates_stacking_context(node)) return node;
+  }
+  return null;
+}
+
+/** @param {HTMLElement} node */
+function get_z_index(node) {
+  return node && Number(getComputedStyle(node).zIndex) || 0;
+}
+
+/** @param {HTMLElement} node */
+function get_ancestors(node) {
+  const ancestors = [];
+  while (node) {
+    ancestors.push(node);
+    node = get_parent(node);
+  }
+  return ancestors; // [ node, ... <body>, <html>, document ]
+}
+
+/** @param {HTMLElement} node */
+function get_parent(node) {
+  var _node$parentNode;
+  // @ts-ignore
+  return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
+}
+
 const EXCEEDED_HORIZONTAL_MIN = 0b0001;
 const EXCEEDED_HORIZONTAL_MAX = 0b0010;
 const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -450,7 +558,7 @@ function recalculateIntersectingHandles({
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM
-      stackingOrder.compare(targetElement, dragHandleElement) > 0) {
+      compare(targetElement, dragHandleElement) > 0) {
         // If the target is above the drag handle, then we also need to confirm they overlap
         // If they are beside each other (e.g. a panel and its drag handle) then the handle is still interactive
         //
@@ -521,7 +629,7 @@ function updateListeners() {
   window.removeEventListener("mouseup", handlePointerUp);
   window.removeEventListener("touchcancel", handlePointerUp);
   window.removeEventListener("touchend", handlePointerUp);
-  if (registerResizeHandle.length > 0) {
+  if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
         ownerDocumentCounts.forEach((count, ownerDocument) => {
@@ -2078,11 +2186,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2286,6 +2395,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { compare } from 'stacking-order';
 
 // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
 
@@ -162,6 +161,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -285,6 +285,114 @@ function intersects(rectOne, rectTwo, strict) {
   }
 }
 
+// Forked from NPM stacking-order@2.0.0
+
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param {HTMLElement} a
+ * @param {HTMLElement} b
+ */
+function compare(a, b) {
+  if (a === b) throw new Error("Cannot compare node with itself");
+  const ancestors = {
+    a: get_ancestors(a),
+    b: get_ancestors(b)
+  };
+  let common_ancestor;
+
+  // remove shared ancestors
+  while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+    a = ancestors.a.pop();
+    b = ancestors.b.pop();
+    common_ancestor = a;
+  }
+  assert(common_ancestor);
+  const z_indexes = {
+    a: get_z_index(find_stacking_context(ancestors.a)),
+    b: get_z_index(find_stacking_context(ancestors.b))
+  };
+  if (z_indexes.a === z_indexes.b) {
+    const children = common_ancestor.childNodes;
+    const furthest_ancestors = {
+      a: ancestors.a.at(-1),
+      b: ancestors.b.at(-1)
+    };
+    let i = children.length;
+    while (i--) {
+      const child = children[i];
+      if (child === furthest_ancestors.a) return 1;
+      if (child === furthest_ancestors.b) return -1;
+    }
+  }
+  return Math.sign(z_indexes.a - z_indexes.b);
+}
+const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+
+/** @param {HTMLElement} node */
+function is_flex_item(node) {
+  const display = getComputedStyle(get_parent(node)).display;
+  return display === "flex" || display === "inline-flex";
+}
+
+/** @param {HTMLElement} node */
+function creates_stacking_context(node) {
+  const style = getComputedStyle(node);
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+  if (style.position === "fixed") return true;
+  // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
+  // if (
+  //   (style.zIndex !== "auto" && style.position !== "static") ||
+  //   is_flex_item(node)
+  // )
+  if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
+  if (+style.opacity < 1) return true;
+  if ("transform" in style && style.transform !== "none") return true;
+  if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
+  if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
+  if ("filter" in style && style.filter !== "none") return true;
+  if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
+  if ("isolation" in style && style.isolation === "isolate") return true;
+  if (props.test(style.willChange)) return true;
+  // @ts-expect-error
+  if (style.webkitOverflowScrolling === "touch") return true;
+  return false;
+}
+
+/** @param {HTMLElement[]} nodes */
+function find_stacking_context(nodes) {
+  let i = nodes.length;
+  while (i--) {
+    const node = nodes[i];
+    assert(node);
+    if (creates_stacking_context(node)) return node;
+  }
+  return null;
+}
+
+/** @param {HTMLElement} node */
+function get_z_index(node) {
+  return node && Number(getComputedStyle(node).zIndex) || 0;
+}
+
+/** @param {HTMLElement} node */
+function get_ancestors(node) {
+  const ancestors = [];
+  while (node) {
+    ancestors.push(node);
+    node = get_parent(node);
+  }
+  return ancestors; // [ node, ... <body>, <html>, document ]
+}
+
+/** @param {HTMLElement} node */
+function get_parent(node) {
+  var _node$parentNode;
+  // @ts-ignore
+  return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
+}
+
 const EXCEEDED_HORIZONTAL_MIN = 0b0001;
 const EXCEEDED_HORIZONTAL_MAX = 0b0010;
 const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -497,7 +605,7 @@ function updateListeners() {
   window.removeEventListener("mouseup", handlePointerUp);
   window.removeEventListener("touchcancel", handlePointerUp);
   window.removeEventListener("touchend", handlePointerUp);
-  if (registerResizeHandle.length > 0) {
+  if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
         ownerDocumentCounts.forEach((count, ownerDocument) => {
@@ -2054,11 +2162,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2262,6 +2371,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { compare } from 'stacking-order';
 
 // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
 
@@ -156,6 +155,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -279,6 +279,114 @@ function intersects(rectOne, rectTwo, strict) {
   }
 }
 
+// Forked from NPM stacking-order@2.0.0
+
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param {HTMLElement} a
+ * @param {HTMLElement} b
+ */
+function compare(a, b) {
+  if (a === b) throw new Error("Cannot compare node with itself");
+  const ancestors = {
+    a: get_ancestors(a),
+    b: get_ancestors(b)
+  };
+  let common_ancestor;
+
+  // remove shared ancestors
+  while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+    a = ancestors.a.pop();
+    b = ancestors.b.pop();
+    common_ancestor = a;
+  }
+  assert(common_ancestor);
+  const z_indexes = {
+    a: get_z_index(find_stacking_context(ancestors.a)),
+    b: get_z_index(find_stacking_context(ancestors.b))
+  };
+  if (z_indexes.a === z_indexes.b) {
+    const children = common_ancestor.childNodes;
+    const furthest_ancestors = {
+      a: ancestors.a.at(-1),
+      b: ancestors.b.at(-1)
+    };
+    let i = children.length;
+    while (i--) {
+      const child = children[i];
+      if (child === furthest_ancestors.a) return 1;
+      if (child === furthest_ancestors.b) return -1;
+    }
+  }
+  return Math.sign(z_indexes.a - z_indexes.b);
+}
+const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+
+/** @param {HTMLElement} node */
+function is_flex_item(node) {
+  const display = getComputedStyle(get_parent(node)).display;
+  return display === "flex" || display === "inline-flex";
+}
+
+/** @param {HTMLElement} node */
+function creates_stacking_context(node) {
+  const style = getComputedStyle(node);
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+  if (style.position === "fixed") return true;
+  // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
+  // if (
+  //   (style.zIndex !== "auto" && style.position !== "static") ||
+  //   is_flex_item(node)
+  // )
+  if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
+  if (+style.opacity < 1) return true;
+  if ("transform" in style && style.transform !== "none") return true;
+  if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
+  if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
+  if ("filter" in style && style.filter !== "none") return true;
+  if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
+  if ("isolation" in style && style.isolation === "isolate") return true;
+  if (props.test(style.willChange)) return true;
+  // @ts-expect-error
+  if (style.webkitOverflowScrolling === "touch") return true;
+  return false;
+}
+
+/** @param {HTMLElement[]} nodes */
+function find_stacking_context(nodes) {
+  let i = nodes.length;
+  while (i--) {
+    const node = nodes[i];
+    assert(node);
+    if (creates_stacking_context(node)) return node;
+  }
+  return null;
+}
+
+/** @param {HTMLElement} node */
+function get_z_index(node) {
+  return node && Number(getComputedStyle(node).zIndex) || 0;
+}
+
+/** @param {HTMLElement} node */
+function get_ancestors(node) {
+  const ancestors = [];
+  while (node) {
+    ancestors.push(node);
+    node = get_parent(node);
+  }
+  return ancestors; // [ node, ... <body>, <html>, document ]
+}
+
+/** @param {HTMLElement} node */
+function get_parent(node) {
+  var _node$parentNode;
+  // @ts-ignore
+  return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
+}
+
 const EXCEEDED_HORIZONTAL_MIN = 0b0001;
 const EXCEEDED_HORIZONTAL_MAX = 0b0010;
 const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -491,7 +599,7 @@ function updateListeners() {
   window.removeEventListener("mouseup", handlePointerUp);
   window.removeEventListener("touchcancel", handlePointerUp);
   window.removeEventListener("touchend", handlePointerUp);
-  if (registerResizeHandle.length > 0) {
+  if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
         ownerDocumentCounts.forEach((count, ownerDocument) => {
@@ -1948,11 +2056,12 @@ function PanelGroupWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
     style: {
       ...style,
       ...styleFromProps
     },
-    ref: panelGroupElementRef,
     // CSS selectors
     "data-panel-group": "",
     "data-panel-group-direction": direction,
@@ -2156,6 +2265,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,