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

package/src/Panel.ts

@@ -236,6 +236,7 @@ export function PanelWithForwardedRef({
 
     children,
     className: classNameFromProps,
+    id: idFromProps,
     style: {
       ...style,
       ...styleFromProps,

package/src/PanelGroup.test.tsx

@@ -276,6 +276,42 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("a11y", () => {
+    it("should pass explicit id prop to DOM", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="explicit-id">
+            <Panel />
+            <PanelResizeHandle />
+            <Panel />
+          </PanelGroup>
+        );
+      });
+
+      const element = container.querySelector("[data-panel-group]");
+
+      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 />
+            <PanelResizeHandle />
+            <Panel />
+          </PanelGroup>
+        );
+      });
+
+      const element = container.querySelector("[data-panel-group]");
+
+      expect(element).not.toBeNull();
+      expect(element?.getAttribute("id")).toBeNull();
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about unstable layouts without id and order props", () => {
       act(() => {

package/src/PanelGroup.ts

@@ -880,13 +880,16 @@ function PanelGroupWithForwardedRef({
     { value: context },
     createElement(Type, {
       ...rest,
+
       children,
       className: classNameFromProps,
+      id: idFromProps,
+      ref: panelGroupElementRef,
       style: {
         ...style,
         ...styleFromProps,
       },
-      ref: panelGroupElementRef,
+
       // CSS selectors
       "data-panel-group": "",
       "data-panel-group-direction": direction,

package/src/PanelResizeHandle.test.tsx

@@ -269,4 +269,40 @@ describe("PanelResizeHandle", () => {
       verifyAttribute(rightElement, "data-resize-handle-active", null);
     });
   });
+
+  describe("a11y", () => {
+    it("should pass explicit id prop to DOM", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal">
+            <Panel />
+            <PanelResizeHandle id="explicit-id" />
+            <Panel />
+          </PanelGroup>
+        );
+      });
+
+      const element = container.querySelector("[data-resize-handle]");
+
+      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 />
+            <PanelResizeHandle />
+            <Panel />
+          </PanelGroup>
+        );
+      });
+
+      const element = container.querySelector("[data-resize-handle]");
+
+      expect(element).not.toBeNull();
+      expect(element?.getAttribute("id")).toBeNull();
+    });
+  });
 });

package/src/PanelResizeHandle.ts

@@ -203,6 +203,7 @@ export function PanelResizeHandle({
 
     children,
     className: classNameFromProps,
+    id: idFromProps,
     onBlur: () => setIsFocused(false),
     onFocus: () => setIsFocused(true),
     ref: elementRef,

package/src/PanelResizeHandleRegistry.ts

@@ -1,9 +1,9 @@
-import { compare } from "stacking-order";
 import { Direction, ResizeEvent } from "./types";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 import { getResizeEventCoordinates } from "./utils/events/getResizeEventCoordinates";
 import { getInputType } from "./utils/getInputType";
 import { intersects } from "./utils/rects/intersects";
+import { compare } from "./vendor/stacking-order";
 
 export type ResizeHandlerAction = "down" | "move" | "up";
 export type SetResizeHandlerState = (
@@ -269,7 +269,7 @@ function updateListeners() {
   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) => {

package/src/vendor/stacking-order.ts

@@ -0,0 +1,130 @@
+// Forked from NPM stacking-order@2.0.0
+// Background at https://github.com/Rich-Harris/stacking-order/issues/3
+
+import { assert } from "..";
+
+/**
+ * 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
+ */
+export function compare(a: HTMLElement, b: HTMLElement): number {
+  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() as HTMLElement;
+    b = ancestors.b.pop() as HTMLElement;
+
+    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: HTMLElement) {
+  const display = getComputedStyle(get_parent(node)).display;
+  return display === "flex" || display === "inline-flex";
+}
+
+/** @param {HTMLElement} node */
+function creates_stacking_context(node: HTMLElement) {
+  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: HTMLElement[]) {
+  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: HTMLElement | null) {
+  return (node && Number(getComputedStyle(node).zIndex)) || 0;
+}
+
+/** @param {HTMLElement} node */
+function get_ancestors(node: HTMLElement) {
+  const ancestors = [];
+
+  while (node) {
+    ancestors.push(node);
+    node = get_parent(node);
+  }
+
+  return ancestors; // [ node, ... <body>, <html>, document ]
+}
+
+/** @param {HTMLElement} node */
+function get_parent(node: HTMLElement) {
+  // @ts-ignore
+  return node.parentNode?.host || node.parentNode;
+}