npm - react-resizable-panels - Versions diffs - 2.0.8-rc.1 → 2.0.9 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/CHANGELOG.md +10 -0
package/dist/react-resizable-panels.browser.cjs.js +114 -4
package/dist/react-resizable-panels.browser.development.cjs.js +114 -4
package/dist/react-resizable-panels.browser.development.esm.js +113 -3
package/dist/react-resizable-panels.browser.esm.js +113 -3
package/dist/react-resizable-panels.cjs.js +114 -4
package/dist/react-resizable-panels.development.cjs.js +114 -4
package/dist/react-resizable-panels.development.esm.js +113 -3
package/dist/react-resizable-panels.development.node.cjs.js +114 -4
package/dist/react-resizable-panels.development.node.esm.js +113 -3
package/dist/react-resizable-panels.esm.js +113 -3
package/dist/react-resizable-panels.node.cjs.js +114 -4
package/dist/react-resizable-panels.node.esm.js +113 -3
package/package.json +1 -4
package/src/Panel.test.tsx +32 -0
package/src/Panel.ts +1 -0
package/src/PanelGroup.test.tsx +36 -0
package/src/PanelGroup.ts +4 -1
package/src/PanelResizeHandle.test.tsx +36 -0
package/src/PanelResizeHandle.ts +1 -0
package/src/PanelResizeHandleRegistry.ts +2 -2
package/src/vendor/stacking-order.ts +130 -0

package/dist/react-resizable-panels.development.node.esm.js CHANGED Viewed

@@ -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
@@ -131,6 +130,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -254,6 +254,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;
@@ -466,7 +574,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) => {
@@ -1829,11 +1937,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,
@@ -2034,6 +2143,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { compare } from 'stacking-order';
 const isBrowser = typeof window !== "undefined";
@@ -158,6 +157,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -281,6 +281,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;
@@ -493,7 +601,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) => {
@@ -1950,11 +2058,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,
@@ -2158,6 +2267,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.node.cjs.js CHANGED Viewed

@@ -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;
@@ -144,6 +143,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -267,6 +267,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;
@@ -408,7 +516,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
         //
@@ -479,7 +587,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) => {
@@ -1752,11 +1860,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,
@@ -1957,6 +2066,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/dist/react-resizable-panels.node.esm.js CHANGED Viewed

@@ -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
@@ -120,6 +119,7 @@ function PanelWithForwardedRef({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps
@@ -243,6 +243,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;
@@ -455,7 +563,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) => {
@@ -1728,11 +1836,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,
@@ -1933,6 +2042,7 @@ function PanelResizeHandle({
     ...rest,
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.8-rc.1",
+  "version": "2.0.9",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -66,9 +66,6 @@
     "test:watch": "jest --config=jest.config.js --watch",
     "watch": "parcel watch --port=2345"
   },
-  "dependencies": {
-    "stacking-order": "^1"
-  },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",

package/src/Panel.test.tsx CHANGED Viewed

@@ -738,6 +738,38 @@ describe("PanelGroup", () => {
     });
   });
+  describe("a11y", () => {
+    it("should pass explicit id prop to DOM", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel id="explicit-id" />
+          </PanelGroup>
+        );
+      });
+      const element = container.querySelector("[data-panel]");
+      expect(element).not.toBeNull();
+      expect(element?.getAttribute("id")).toBe("explicit-id");
+    });
+    it("should not pass auto-generated id prop to DOM", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel />
+          </PanelGroup>
+        );
+      });
+      const element = container.querySelector("[data-panel]");
+      expect(element).not.toBeNull();
+      expect(element?.getAttribute("id")).toBeNull();
+    });
+  });
   describe("DEV warnings", () => {
     it("should warn about server rendered panels with no default size", () => {
       jest.resetModules();