Repository: bvaughn/react-resizable-panels
Pull request #470 (2025-04-27 13:30:54)

Minor code cleanup: data attributes, `AbortController`
Non-controversial portions of #467 (cc @OhadC)

* Attributes as const
* use `AbortController` for `updateListeners` (avoid the need to call `removeEventListener` on each element)
* Add & Update usage for all resize handle related attributes


vercel[bot]: [vc]: #EAictU7yNdOJPZPYnACSjRpN0vvONrc/wPrSMwC8LFk=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJyZWFjdC1yZXNpemFibGUtcGFuZWxzIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6InJlYWN0LXJlc2l6YWJsZS1wYW5lbHMtZ2l0LXJlZmFjdG9yaW5nLWJyaWFuLXZhdWdobnMtcHJvamVjdHMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vYnJpYW4tdmF1Z2hucy1wcm9qZWN0cy9yZWFjdC1yZXNpemFibGUtcGFuZWxzLzNMYktDOXVqd2l4eE00RWhMYkdlY1FNbmtRWmgiLCJwcmV2aWV3VXJsIjoicmVhY3QtcmVzaXphYmxlLXBhbmVscy1naXQtcmVmYWN0b3JpbmctYnJpYW4tdmF1Z2hucy1wcm9qZWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **react-resizable-panels** | ✅ Ready ([Inspect](https://vercel.com/brian-vaughns-projects/react-resizable-panels/3LbKC9ujwixxM4EhLbGecQMnkQZh)) | [Visit Preview](https://react-resizable-panels-git-refactoring-brian-vaughns-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/react-resizable-panels-git-refactoring-brian-vaughns-projects.vercel.app?via=pr-comment-feedback-link) | Apr 27, 2025 1:30pm |



Patch:
diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.ts b/packages/react-resizable-panels/src/PanelResizeHandle.ts
index 26b1bd3..ac0ebc4 100644
--- a/packages/react-resizable-panels/src/PanelResizeHandle.ts
+++ b/packages/react-resizable-panels/src/PanelResizeHandle.ts
@@ -1,3 +1,15 @@
+import {
+  createElement,
+  CSSProperties,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { RESIZE_HANDLE_ATTRIBUTES } from "./constants";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 import { useWindowSplitterResizeHandlerBehavior } from "./hooks/useWindowSplitterBehavior";
@@ -12,17 +24,6 @@ import {
   ResizeHandlerAction,
 } from "./PanelResizeHandleRegistry";
 import { assert } from "./utils/assert";
-import {
-  createElement,
-  CSSProperties,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactElement,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
 
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type ResizeHandlerState = "drag" | "hover" | "inactive";
@@ -145,53 +146,54 @@ export function PanelResizeHandle({
       isActive: boolean,
       event: ResizeEvent | null
     ) => {
-      if (isActive) {
-        switch (action) {
-          case "down": {
-            setState("drag");
-
-            didMove = false;
+      if (!isActive) {
+        setState("inactive");
+        return;
+      }
 
-            assert(event, 'Expected event to be defined for "down" action');
+      switch (action) {
+        case "down": {
+          setState("drag");
 
-            startDragging(resizeHandleId, event);
+          didMove = false;
 
-            const { onDragging, onPointerDown } = callbacksRef.current;
-            onDragging?.(true);
-            onPointerDown?.();
-            break;
-          }
-          case "move": {
-            const { state } = committedValuesRef.current;
+          assert(event, 'Expected event to be defined for "down" action');
 
-            didMove = true;
+          startDragging(resizeHandleId, event);
 
-            if (state !== "drag") {
-              setState("hover");
-            }
+          const { onDragging, onPointerDown } = callbacksRef.current;
+          onDragging?.(true);
+          onPointerDown?.();
+          break;
+        }
+        case "move": {
+          const { state } = committedValuesRef.current;
 
-            assert(event, 'Expected event to be defined for "move" action');
+          didMove = true;
 
-            resizeHandler(event);
-            break;
-          }
-          case "up": {
+          if (state !== "drag") {
             setState("hover");
+          }
 
-            stopDragging();
+          assert(event, 'Expected event to be defined for "move" action');
 
-            const { onClick, onDragging, onPointerUp } = callbacksRef.current;
-            onDragging?.(false);
-            onPointerUp?.();
+          resizeHandler(event);
+          break;
+        }
+        case "up": {
+          setState("hover");
+
+          stopDragging();
 
-            if (!didMove) {
-              onClick?.();
-            }
-            break;
+          const { onClick, onDragging, onPointerUp } = callbacksRef.current;
+          onDragging?.(false);
+          onPointerUp?.();
+
+          if (!didMove) {
+            onClick?.();
           }
+          break;
         }
-      } else {
-        setState("inactive");
       }
     };
 
@@ -254,12 +256,12 @@ export function PanelResizeHandle({
     // CSS selectors
     "data-panel-group-direction": direction,
     "data-panel-group-id": groupId,
-    "data-resize-handle": "",
-    "data-resize-handle-active":
+    [RESIZE_HANDLE_ATTRIBUTES.root]: "",
+    [RESIZE_HANDLE_ATTRIBUTES.active]:
       state === "drag" ? "pointer" : isFocused ? "keyboard" : undefined,
-    "data-resize-handle-state": state,
-    "data-panel-resize-handle-enabled": !disabled,
-    "data-panel-resize-handle-id": resizeHandleId,
+    [RESIZE_HANDLE_ATTRIBUTES.state]: state,
+    [RESIZE_HANDLE_ATTRIBUTES.enabled]: !disabled,
+    [RESIZE_HANDLE_ATTRIBUTES.id]: resizeHandleId,
   });
 }
 
diff --git a/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts b/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts
index cb88942..e2e181d 100644
--- a/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts
+++ b/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts
@@ -1,3 +1,4 @@
+import { RESIZE_HANDLE_ATTRIBUTES } from "./constants";
 import { Direction, ResizeEvent } from "./types";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 import { getResizeEventCoordinates } from "./utils/events/getResizeEventCoordinates";
@@ -278,49 +279,44 @@ function updateCursor() {
   }
 }
 
-function updateListeners() {
-  ownerDocumentCounts.forEach((_, ownerDocument) => {
-    const { body } = ownerDocument;
-
-    body.removeEventListener("contextmenu", handlePointerUp);
-    body.removeEventListener("pointerdown", handlePointerDown, {
-      capture: true,
-    });
-    body.removeEventListener("pointerleave", handlePointerMove);
-    body.removeEventListener("pointermove", handlePointerMove);
-  });
-
-  window.removeEventListener("pointerup", handlePointerUp);
-  window.removeEventListener("pointercancel", handlePointerUp);
+let listenersAbortController = new AbortController();
 
-  if (registeredResizeHandlers.size > 0) {
-    if (isPointerDown) {
-      if (intersectingHandles.length > 0) {
-        ownerDocumentCounts.forEach((count, ownerDocument) => {
-          const { body } = ownerDocument;
+function updateListeners() {
+  listenersAbortController.abort();
+  listenersAbortController = new AbortController();
+  const { signal } = listenersAbortController;
 
-          if (count > 0) {
-            body.addEventListener("contextmenu", handlePointerUp);
-            body.addEventListener("pointerleave", handlePointerMove);
-            body.addEventListener("pointermove", handlePointerMove);
-          }
-        });
-      }
+  if (!registeredResizeHandlers.size) {
+    return;
+  }
 
-      window.addEventListener("pointerup", handlePointerUp);
-      window.addEventListener("pointercancel", handlePointerUp);
-    } else {
+  if (isPointerDown) {
+    if (intersectingHandles.length > 0) {
       ownerDocumentCounts.forEach((count, ownerDocument) => {
         const { body } = ownerDocument;
 
         if (count > 0) {
-          body.addEventListener("pointerdown", handlePointerDown, {
-            capture: true,
-          });
-          body.addEventListener("pointermove", handlePointerMove);
+          body.addEventListener("contextmenu", handlePointerUp, { signal });
+          body.addEventListener("pointerleave", handlePointerMove, { signal });
+          body.addEventListener("pointermove", handlePointerMove, { signal });
         }
       });
     }
+
+    window.addEventListener("pointerup", handlePointerUp, { signal });
+    window.addEventListener("pointercancel", handlePointerUp, { signal });
+  } else {
+    ownerDocumentCounts.forEach((count, ownerDocument) => {
+      const { body } = ownerDocument;
+
+      if (count > 0) {
+        body.addEventListener("pointerdown", handlePointerDown, {
+          capture: true,
+          signal,
+        });
+        body.addEventListener("pointermove", handlePointerMove, { signal });
+      }
+    });
   }
 }
 
diff --git a/packages/react-resizable-panels/src/constants.ts b/packages/react-resizable-panels/src/constants.ts
index c81d2a8..0813228 100644
--- a/packages/react-resizable-panels/src/constants.ts
+++ b/packages/react-resizable-panels/src/constants.ts
@@ -1,1 +1,9 @@
 export const PRECISION = 10;
+
+export const RESIZE_HANDLE_ATTRIBUTES = {
+  root: "data-resize-handle",
+  active: "data-resize-handle-active",
+  state: "data-resize-handle-state",
+  enabled: "data-panel-resize-handle-enabled",
+  id: "data-panel-resize-handle-id",
+} as const;
diff --git a/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts b/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts
index bbb080b..58fe7fb 100644
--- a/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts
+++ b/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts
@@ -1,4 +1,6 @@
 import { isDevelopment } from "#is-development";
+import { RefObject, useEffect, useRef } from "react";
+import { RESIZE_HANDLE_ATTRIBUTES } from "../constants";
 import { PanelData } from "../Panel";
 import { Direction } from "../types";
 import { adjustLayoutByDelta } from "../utils/adjustLayoutByDelta";
@@ -9,7 +11,6 @@ import { getPanelGroupElement } from "../utils/dom/getPanelGroupElement";
 import { getResizeHandleElementsForGroup } from "../utils/dom/getResizeHandleElementsForGroup";
 import { getResizeHandlePanelIds } from "../utils/dom/getResizeHandlePanelIds";
 import { fuzzyNumbersEqual } from "../utils/numbers/fuzzyNumbersEqual";
-import { RefObject, useEffect, useRef } from "react";
 import useIsomorphicLayoutEffect from "./useIsomorphicEffect";
 
 // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
@@ -115,7 +116,7 @@ export function useWindowSplitterPanelGroupBehavior({
     assert(handles, `No resize handles found for group id "${groupId}"`);
 
     const cleanupFunctions = handles.map((handle) => {
-      const handleId = handle.getAttribute("data-panel-resize-handle-id");
+      const handleId = handle.getAttribute(RESIZE_HANDLE_ATTRIBUTES.id);
       assert(handleId, `Resize handle element has no handle id attribute`);
 
       const [idBefore, idAfter] = getResizeHandlePanelIds(
diff --git a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts
index 378d2d1..8b61263 100644
--- a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts
+++ b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts
@@ -1,8 +1,12 @@
+import { RESIZE_HANDLE_ATTRIBUTES } from "../../constants";
+
 export function getResizeHandleElement(
   id: string,
   scope: ParentNode | HTMLElement = document
 ): HTMLElement | null {
-  const element = scope.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+  const element = scope.querySelector(
+    `[${RESIZE_HANDLE_ATTRIBUTES.id}="${id}"]`
+  );
   if (element) {
     return element as HTMLElement;
   }
diff --git a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementIndex.ts b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementIndex.ts
index d4a1f2d..b4625c3 100644
--- a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementIndex.ts
+++ b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementIndex.ts
@@ -1,3 +1,4 @@
+import { RESIZE_HANDLE_ATTRIBUTES } from "../../constants";
 import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
 
 export function getResizeHandleElementIndex(
@@ -7,7 +8,7 @@ export function getResizeHandleElementIndex(
 ): number | null {
   const handles = getResizeHandleElementsForGroup(groupId, scope);
   const index = handles.findIndex(
-    (handle) => handle.getAttribute("data-panel-resize-handle-id") === id
+    (handle) => handle.getAttribute(RESIZE_HANDLE_ATTRIBUTES.id) === id
   );
   return index ?? null;
 }
diff --git a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementsForGroup.ts b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementsForGroup.ts
index 3082f9c..1cb33b5 100644
--- a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementsForGroup.ts
+++ b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementsForGroup.ts
@@ -1,10 +1,12 @@
+import { RESIZE_HANDLE_ATTRIBUTES } from "../../constants";
+
 export function getResizeHandleElementsForGroup(
   groupId: string,
   scope: ParentNode | HTMLElement = document
 ): HTMLElement[] {
   return Array.from(
     scope.querySelectorAll(
-      `[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`
+      `[${RESIZE_HANDLE_ATTRIBUTES.id}][data-panel-group-id="${groupId}"]`
     )
   );
 }


Test patch:
diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx b/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx
index fb0548d..1611bdc 100644
--- a/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx
+++ b/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx
@@ -6,6 +6,7 @@ import {
   PanelResizeHandle,
   type PanelResizeHandleProps,
 } from ".";
+import { RESIZE_HANDLE_ATTRIBUTES } from "./constants";
 import { assert } from "./utils/assert";
 import * as cursorUtils from "./utils/cursor";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
@@ -262,92 +263,88 @@ describe("PanelResizeHandle", () => {
       const { leftElement, rightElement } = setupMockedGroup();
 
       verifyAttribute(leftElement, "data-panel-group-id", "test-group");
-      verifyAttribute(leftElement, "data-resize-handle", "");
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.root, "");
       verifyAttribute(leftElement, "data-panel-group-direction", "horizontal");
-      verifyAttribute(leftElement, "data-panel-resize-handle-enabled", "true");
-      verifyAttribute(
-        leftElement,
-        "data-panel-resize-handle-id",
-        "handle-left"
-      );
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.enabled, "true");
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.id, "handle-left");
 
       verifyAttribute(rightElement, "data-panel-group-id", "test-group");
-      verifyAttribute(rightElement, "data-resize-handle", "");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.root, "");
       verifyAttribute(rightElement, "data-panel-group-direction", "horizontal");
-      verifyAttribute(rightElement, "data-panel-resize-handle-enabled", "true");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.enabled, "true");
       verifyAttribute(
         rightElement,
-        "data-panel-resize-handle-id",
+        RESIZE_HANDLE_ATTRIBUTES.id,
         "handle-right"
       );
     });
 
-    it("should update data-resize-handle-active and data-resize-handle-state when dragging starts/stops", () => {
+    it(`should update ${RESIZE_HANDLE_ATTRIBUTES.active} and ${RESIZE_HANDLE_ATTRIBUTES.state} when dragging starts/stops`, () => {
       const { leftElement, rightElement } = setupMockedGroup();
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "inactive");
-      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.state, "inactive");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.state, "inactive");
 
       act(() => {
         dispatchPointerEvent("pointermove", leftElement);
       });
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "hover");
-      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.state, "hover");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.state, "inactive");
 
       act(() => {
         dispatchPointerEvent("pointerdown", leftElement);
       });
-      verifyAttribute(leftElement, "data-resize-handle-active", "pointer");
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "drag");
-      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, "pointer");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.state, "drag");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.state, "inactive");
 
       act(() => {
         dispatchPointerEvent("pointermove", leftElement);
       });
-      verifyAttribute(leftElement, "data-resize-handle-active", "pointer");
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "drag");
-      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, "pointer");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.state, "drag");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.state, "inactive");
 
       act(() => {
         dispatchPointerEvent("pointerup", leftElement);
       });
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "hover");
-      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.state, "hover");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.state, "inactive");
 
       act(() => {
         dispatchPointerEvent("pointermove", rightElement);
       });
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "inactive");
-      verifyAttribute(rightElement, "data-resize-handle-state", "hover");
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.state, "inactive");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.state, "hover");
     });
 
-    it("should update data-resize-handle-active when focused", () => {
+    it(`should update ${RESIZE_HANDLE_ATTRIBUTES.active} when focused`, () => {
       const { leftElement, rightElement } = setupMockedGroup();
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
 
       act(() => {
         leftElement.focus();
       });
       expect(document.activeElement).toBe(leftElement);
-      verifyAttribute(leftElement, "data-resize-handle-active", "keyboard");
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, "keyboard");
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
 
       act(() => {
         leftElement.blur();
       });
       expect(document.activeElement).not.toBe(leftElement);
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
     });
   });
 
@@ -363,7 +360,9 @@ describe("PanelResizeHandle", () => {
         );
       });
 
-      const element = container.querySelector("[data-resize-handle]");
+      const element = container.querySelector(
+        `[${RESIZE_HANDLE_ATTRIBUTES.root}]`
+      );
 
       expect(element).not.toBeNull();
       expect(element?.getAttribute("id")).toBe("explicit-id");
@@ -380,7 +379,9 @@ describe("PanelResizeHandle", () => {
         );
       });
 
-      const element = container.querySelector("[data-resize-handle]");
+      const element = container.querySelector(
+        `[${RESIZE_HANDLE_ATTRIBUTES.root}]`
+      );
 
       expect(element).not.toBeNull();
       expect(element?.getAttribute("id")).toBeNull();
diff --git a/packages/react-resizable-panels/src/utils/test-utils.ts b/packages/react-resizable-panels/src/utils/test-utils.ts
index faa87b9..5335cf4 100644
--- a/packages/react-resizable-panels/src/utils/test-utils.ts
+++ b/packages/react-resizable-panels/src/utils/test-utils.ts
@@ -1,3 +1,4 @@
+import { RESIZE_HANDLE_ATTRIBUTES } from "../constants";
 import { assert } from "./assert";
 
 const util = require("util");
@@ -98,7 +99,7 @@ export function mockPanelGroupOffsetWidthAndHeight(
   Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
     configurable: true,
     get: function () {
-      if (this.hasAttribute("data-resize-handle")) {
+      if (this.hasAttribute(RESIZE_HANDLE_ATTRIBUTES.root)) {
         return 0;
       } else if (this.hasAttribute("data-panel-group")) {
         return mockHeight;
@@ -109,7 +110,7 @@ export function mockPanelGroupOffsetWidthAndHeight(
   Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
     configurable: true,
     get: function () {
-      if (this.hasAttribute("data-resize-handle")) {
+      if (this.hasAttribute(RESIZE_HANDLE_ATTRIBUTES.root)) {
         return 0;
       } else if (this.hasAttribute("data-panel-group")) {
         return mockWidth;