Repository: bvaughn/react-resizable-panels
Pull request #471 (2025-04-27 15:24:54)

Further cleanup data attribute references

vercel[bot]: [vc]: #0rWcMTyJzI+Nr0P5HhP9by7CMBmttTHHI65fqjvok6o=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJyZWFjdC1yZXNpemFibGUtcGFuZWxzIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL2JyaWFuLXZhdWdobnMtcHJvamVjdHMvcmVhY3QtcmVzaXphYmxlLXBhbmVscy8yRVRIRW5rZ1R0akJwdmo5a1ZkMUI3WFluRlFxIiwicHJldmlld1VybCI6InJlYWN0LXJlc2l6YWJsZS1wYW5lbHMtZ2l0LWRhdGEtYS1iNGM5NGItYnJpYW4tdmF1Z2hucy1wcm9qZWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IlBFTkRJTkciLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoicmVhY3QtcmVzaXphYmxlLXBhbmVscy1naXQtZGF0YS1hLWI0Yzk0Yi1icmlhbi12YXVnaG5zLXByb2plY3RzLnZlcmNlbC5hcHAifX1dfQ==
**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** | 🔄 Building ([Inspect](https://vercel.com/brian-vaughns-projects/react-resizable-panels/2ETHEnkgTtjBpvj9kVd1B7XYnFQq)) | [Visit Preview](https://react-resizable-panels-git-data-a-b4c94b-brian-vaughns-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/react-resizable-panels-git-data-a-b4c94b-brian-vaughns-projects.vercel.app?via=pr-comment-feedback-link) | Apr 27, 2025 3:24pm |



Patch:
diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts
index ef2f442..639ce3b 100644
--- a/packages/react-resizable-panels/src/Panel.ts
+++ b/packages/react-resizable-panels/src/Panel.ts
@@ -1,8 +1,5 @@
 import { isBrowser } from "#is-browser";
 import { isDevelopment } from "#is-development";
-import { PanelGroupContext } from "./PanelGroupContext";
-import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
-import useUniqueId from "./hooks/useUniqueId";
 import {
   ForwardedRef,
   HTMLAttributes,
@@ -14,6 +11,10 @@ import {
   useImperativeHandle,
   useRef,
 } from "react";
+import { PanelGroupContext } from "./PanelGroupContext";
+import { DATA_ATTRIBUTES } from "./constants";
+import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
+import useUniqueId from "./hooks/useUniqueId";
 
 export type PanelOnCollapse = () => void;
 export type PanelOnExpand = () => void;
@@ -242,11 +243,11 @@ export function PanelWithForwardedRef({
     },
 
     // CSS selectors
-    "data-panel": "",
-    "data-panel-collapsible": collapsible || undefined,
-    "data-panel-group-id": groupId,
-    "data-panel-id": panelId,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1),
+    [DATA_ATTRIBUTES.groupId]: groupId,
+    [DATA_ATTRIBUTES.panel]: "",
+    [DATA_ATTRIBUTES.panelCollapsible]: collapsible || undefined,
+    [DATA_ATTRIBUTES.panelId]: panelId,
+    [DATA_ATTRIBUTES.panelSize]: parseFloat("" + style.flexGrow).toFixed(1),
   });
 }
 
diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts
index 4b7fb33..23c6279 100644
--- a/packages/react-resizable-panels/src/PanelGroup.ts
+++ b/packages/react-resizable-panels/src/PanelGroup.ts
@@ -1,4 +1,19 @@
 import { isDevelopment } from "#is-development";
+import {
+  CSSProperties,
+  ForwardedRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { PanelConstraints, PanelData } from "./Panel";
 import {
   DragState,
@@ -13,6 +28,7 @@ import {
   EXCEEDED_VERTICAL_MIN,
   reportConstraintsViolation,
 } from "./PanelResizeHandleRegistry";
+import { DATA_ATTRIBUTES } from "./constants";
 import { useForceUpdate } from "./hooks/useForceUpdate";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
@@ -42,21 +58,6 @@ import {
 } from "./utils/serialization";
 import { validatePanelConstraints } from "./utils/validatePanelConstraints";
 import { validatePanelGroupLayout } from "./utils/validatePanelGroupLayout";
-import {
-  CSSProperties,
-  ForwardedRef,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactElement,
-  createElement,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
 
 const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
 
@@ -953,9 +954,9 @@ function PanelGroupWithForwardedRef({
       },
 
       // CSS selectors
-      "data-panel-group": "",
-      "data-panel-group-direction": direction,
-      "data-panel-group-id": groupId,
+      [DATA_ATTRIBUTES.group]: "",
+      [DATA_ATTRIBUTES.groupDirection]: direction,
+      [DATA_ATTRIBUTES.groupId]: groupId,
     })
   );
 }
diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.ts b/packages/react-resizable-panels/src/PanelResizeHandle.ts
index ac0ebc4..61358d0 100644
--- a/packages/react-resizable-panels/src/PanelResizeHandle.ts
+++ b/packages/react-resizable-panels/src/PanelResizeHandle.ts
@@ -9,7 +9,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { RESIZE_HANDLE_ATTRIBUTES } from "./constants";
+import { DATA_ATTRIBUTES } from "./constants";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 import { useWindowSplitterResizeHandlerBehavior } from "./hooks/useWindowSplitterBehavior";
@@ -254,14 +254,14 @@ export function PanelResizeHandle({
     tabIndex,
 
     // CSS selectors
-    "data-panel-group-direction": direction,
-    "data-panel-group-id": groupId,
-    [RESIZE_HANDLE_ATTRIBUTES.root]: "",
-    [RESIZE_HANDLE_ATTRIBUTES.active]:
+    [DATA_ATTRIBUTES.groupDirection]: direction,
+    [DATA_ATTRIBUTES.groupId]: groupId,
+    [DATA_ATTRIBUTES.resizeHandle]: "",
+    [DATA_ATTRIBUTES.resizeHandleActive]:
       state === "drag" ? "pointer" : isFocused ? "keyboard" : undefined,
-    [RESIZE_HANDLE_ATTRIBUTES.state]: state,
-    [RESIZE_HANDLE_ATTRIBUTES.enabled]: !disabled,
-    [RESIZE_HANDLE_ATTRIBUTES.id]: resizeHandleId,
+    [DATA_ATTRIBUTES.resizeHandleEnabled]: !disabled,
+    [DATA_ATTRIBUTES.resizeHandleId]: resizeHandleId,
+    [DATA_ATTRIBUTES.resizeHandleState]: state,
   });
 }
 
diff --git a/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts b/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts
index 304b5f6..f03f9b8 100644
--- a/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts
+++ b/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts
@@ -1,4 +1,4 @@
-import { RESIZE_HANDLE_ATTRIBUTES } from "./constants";
+import { DATA_ATTRIBUTES } from "./constants";
 import { Direction, ResizeEvent } from "./types";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 import { getResizeEventCoordinates } from "./utils/events/getResizeEventCoordinates";
@@ -168,7 +168,7 @@ function isWithinResizeHandle(element: HTMLElement | null) {
   let currentElement = element;
 
   while (currentElement) {
-    if (currentElement.hasAttribute(RESIZE_HANDLE_ATTRIBUTES.root)) {
+    if (currentElement.hasAttribute(DATA_ATTRIBUTES.resizeHandle)) {
       return true;
     }
 
diff --git a/packages/react-resizable-panels/src/constants.ts b/packages/react-resizable-panels/src/constants.ts
index 0813228..eec9d6d 100644
--- a/packages/react-resizable-panels/src/constants.ts
+++ b/packages/react-resizable-panels/src/constants.ts
@@ -1,9 +1,16 @@
-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",
+export const DATA_ATTRIBUTES = {
+  group: "data-panel-group",
+  groupDirection: "data-panel-group-direction",
+  groupId: "data-panel-group-id",
+  panel: "data-panel",
+  panelCollapsible: "data-panel-collapsible",
+  panelId: "data-panel-id",
+  panelSize: "data-panel-size",
+  resizeHandle: "data-resize-handle",
+  resizeHandleActive: "data-resize-handle-active",
+  resizeHandleEnabled: "data-panel-resize-handle-enabled",
+  resizeHandleId: "data-panel-resize-handle-id",
+  resizeHandleState: "data-resize-handle-state",
 } as const;
+
+export const PRECISION = 10;
diff --git a/packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts b/packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts
index 77808a9..8877a2b 100644
--- a/packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts
+++ b/packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts
@@ -1,3 +1,4 @@
+import { DATA_ATTRIBUTES } from "..";
 import { ResizeHandler } from "../types";
 import { assert } from "../utils/assert";
 import { getResizeHandleElement } from "../utils/dom/getResizeHandleElement";
@@ -48,7 +49,7 @@ export function useWindowSplitterResizeHandlerBehavior({
         case "F6": {
           event.preventDefault();
 
-          const groupId = handleElement.getAttribute("data-panel-group-id");
+          const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
           assert(groupId, `No group element found for id "${groupId}"`);
 
           const handles = getResizeHandleElementsForGroup(
diff --git a/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts b/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts
index 58fe7fb..16dad19 100644
--- a/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts
+++ b/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts
@@ -1,7 +1,7 @@
 import { isDevelopment } from "#is-development";
 import { RefObject, useEffect, useRef } from "react";
-import { RESIZE_HANDLE_ATTRIBUTES } from "../constants";
 import { PanelData } from "../Panel";
+import { DATA_ATTRIBUTES } from "../constants";
 import { Direction } from "../types";
 import { adjustLayoutByDelta } from "../utils/adjustLayoutByDelta";
 import { assert } from "../utils/assert";
@@ -116,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(RESIZE_HANDLE_ATTRIBUTES.id);
+      const handleId = handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId);
       assert(handleId, `Resize handle element has no handle id attribute`);
 
       const [idBefore, idAfter] = getResizeHandlePanelIds(
diff --git a/packages/react-resizable-panels/src/index.ts b/packages/react-resizable-panels/src/index.ts
index 39b33a0..01e833c 100644
--- a/packages/react-resizable-panels/src/index.ts
+++ b/packages/react-resizable-panels/src/index.ts
@@ -1,11 +1,12 @@
 import { Panel } from "./Panel";
 import { PanelGroup } from "./PanelGroup";
 import { PanelResizeHandle } from "./PanelResizeHandle";
+import { DATA_ATTRIBUTES } from "./constants";
 import { assert } from "./utils/assert";
 import { setNonce } from "./utils/csp";
 import {
-  enableGlobalCursorStyles,
   disableGlobalCursorStyles,
+  enableGlobalCursorStyles,
 } from "./utils/cursor";
 import { getPanelElement } from "./utils/dom/getPanelElement";
 import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
@@ -74,4 +75,7 @@ export {
   enableGlobalCursorStyles,
   disableGlobalCursorStyles,
   setNonce,
+
+  // Data attributes (primarily intended for e2e testing)
+  DATA_ATTRIBUTES,
 };
diff --git a/packages/react-resizable-panels/src/utils/calculateDragOffsetPercentage.ts b/packages/react-resizable-panels/src/utils/calculateDragOffsetPercentage.ts
index 4b051ba..b5908dc 100644
--- a/packages/react-resizable-panels/src/utils/calculateDragOffsetPercentage.ts
+++ b/packages/react-resizable-panels/src/utils/calculateDragOffsetPercentage.ts
@@ -1,3 +1,4 @@
+import { DATA_ATTRIBUTES } from "..";
 import { DragState, ResizeEvent } from "../PanelGroupContext";
 import { Direction } from "../types";
 import { assert } from "./assert";
@@ -20,7 +21,7 @@ export function calculateDragOffsetPercentage(
     `No resize handle element found for id "${dragHandleId}"`
   );
 
-  const groupId = handleElement.getAttribute("data-panel-group-id");
+  const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
   assert(groupId, `Resize handle element has no group id attribute`);
 
   let { initialCursorPosition } = initialDragState;
diff --git a/packages/react-resizable-panels/src/utils/cursor.ts b/packages/react-resizable-panels/src/utils/cursor.ts
index de4f903..b438ac4 100644
--- a/packages/react-resizable-panels/src/utils/cursor.ts
+++ b/packages/react-resizable-panels/src/utils/cursor.ts
@@ -99,5 +99,5 @@ export function setGlobalCursorStyle(
     document.head.appendChild(styleElement);
   }
 
-  styleElement.innerHTML = `*{cursor: ${style}!important;}`;
+  styleElement.sheet?.insertRule(`*{cursor: ${style}!important;}`)
 }
diff --git a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts
index 8b61263..cd1cc74 100644
--- a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts
+++ b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts
@@ -1,11 +1,11 @@
-import { RESIZE_HANDLE_ATTRIBUTES } from "../../constants";
+import { DATA_ATTRIBUTES } from "../../constants";
 
 export function getResizeHandleElement(
   id: string,
   scope: ParentNode | HTMLElement = document
 ): HTMLElement | null {
   const element = scope.querySelector(
-    `[${RESIZE_HANDLE_ATTRIBUTES.id}="${id}"]`
+    `[${DATA_ATTRIBUTES.resizeHandleId}="${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 b4625c3..0966c53 100644
--- a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementIndex.ts
+++ b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementIndex.ts
@@ -1,4 +1,4 @@
-import { RESIZE_HANDLE_ATTRIBUTES } from "../../constants";
+import { DATA_ATTRIBUTES } from "../../constants";
 import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
 
 export function getResizeHandleElementIndex(
@@ -8,7 +8,7 @@ export function getResizeHandleElementIndex(
 ): number | null {
   const handles = getResizeHandleElementsForGroup(groupId, scope);
   const index = handles.findIndex(
-    (handle) => handle.getAttribute(RESIZE_HANDLE_ATTRIBUTES.id) === id
+    (handle) => handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId) === 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 1cb33b5..2fc0ef5 100644
--- a/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementsForGroup.ts
+++ b/packages/react-resizable-panels/src/utils/dom/getResizeHandleElementsForGroup.ts
@@ -1,4 +1,4 @@
-import { RESIZE_HANDLE_ATTRIBUTES } from "../../constants";
+import { DATA_ATTRIBUTES } from "../../constants";
 
 export function getResizeHandleElementsForGroup(
   groupId: string,
@@ -6,7 +6,7 @@ export function getResizeHandleElementsForGroup(
 ): HTMLElement[] {
   return Array.from(
     scope.querySelectorAll(
-      `[${RESIZE_HANDLE_ATTRIBUTES.id}][data-panel-group-id="${groupId}"]`
+      `[${DATA_ATTRIBUTES.resizeHandleId}][data-panel-group-id="${groupId}"]`
     )
   );
 }


Test patch:
diff --git a/packages/react-resizable-panels-website/src/routes/EndToEndTesting/index.tsx b/packages/react-resizable-panels-website/src/routes/EndToEndTesting/index.tsx
index 3e2d85b..6df6e91 100644
--- a/packages/react-resizable-panels-website/src/routes/EndToEndTesting/index.tsx
+++ b/packages/react-resizable-panels-website/src/routes/EndToEndTesting/index.tsx
@@ -8,6 +8,7 @@ import {
   useState,
 } from "react";
 import {
+  DATA_ATTRIBUTES,
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
   assert,
@@ -17,11 +18,11 @@ import {
   assertImperativePanelHandle,
 } from "../../../tests/utils/assert";
 import Icon from "../../components/Icon";
+import { VisibleCursor } from "../../components/VisibleCursor";
 import { urlPanelGroupToPanelGroup, urlToUrlData } from "../../utils/UrlData";
 import DebugLog, { ImperativeDebugLogHandle } from "../examples/DebugLog";
 import "./styles.css";
 import styles from "./styles.module.css";
-import { VisibleCursor } from "../../components/VisibleCursor";
 
 // Special route that can be configured via URL parameters.
 
@@ -65,7 +66,7 @@ function EndToEndTesting() {
     const populateDropDowns = () => {
       const panelElements = document.querySelectorAll("[data-panel-id]");
       const panelIds = Array.from(panelElements).map(
-        (element) => element.getAttribute("data-panel-id")!
+        (element) => element.getAttribute(DATA_ATTRIBUTES.panelId)!
       );
 
       const firstPanelId = panelIds[0];
@@ -77,7 +78,7 @@ function EndToEndTesting() {
       const panelGroupElements =
         document.querySelectorAll("[data-panel-group]");
       const panelGroupIds = Array.from(panelGroupElements).map(
-        (element) => element.getAttribute("data-panel-group-id")!
+        (element) => element.getAttribute(DATA_ATTRIBUTES.groupId)!
       );
 
       const firstPanelGroupId = panelGroupIds[0];
@@ -108,7 +109,7 @@ function EndToEndTesting() {
 
       // Let layout effects fire first
       setTimeout(() => {
-        const panelId = panelElement.getAttribute("data-panel-id");
+        const panelId = panelElement.getAttribute(DATA_ATTRIBUTES.panelId);
         if (panelId != null) {
           const panel = idToRefMapRef.current.get(
             panelId
diff --git a/packages/react-resizable-panels-website/tests/ResizeHandle.spec.ts b/packages/react-resizable-panels-website/tests/ResizeHandle.spec.ts
index dc13ede..846d6d5 100644
--- a/packages/react-resizable-panels-website/tests/ResizeHandle.spec.ts
+++ b/packages/react-resizable-panels-website/tests/ResizeHandle.spec.ts
@@ -1,6 +1,11 @@
 import { expect, test } from "@playwright/test";
 import { createElement } from "react";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import {
+  DATA_ATTRIBUTES,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from "react-resizable-panels";
 
 import { goToUrl, goToUrlWithIframe } from "./utils/url";
 import assert from "assert";
@@ -27,28 +32,28 @@ test.describe("Resize handle", () => {
     const last = resizeHandles.last();
 
     await expect(
-      await first.getAttribute("data-resize-handle-active")
+      await first.getAttribute(DATA_ATTRIBUTES.resizeHandleActive)
     ).toBeNull();
     await expect(
-      await last.getAttribute("data-resize-handle-active")
+      await last.getAttribute(DATA_ATTRIBUTES.resizeHandleActive)
     ).toBeNull();
 
     await first.focus();
 
-    await expect(await first.getAttribute("data-resize-handle-active")).toBe(
-      "keyboard"
-    );
     await expect(
-      await last.getAttribute("data-resize-handle-active")
+      await first.getAttribute(DATA_ATTRIBUTES.resizeHandleActive)
+    ).toBe("keyboard");
+    await expect(
+      await last.getAttribute(DATA_ATTRIBUTES.resizeHandleActive)
     ).toBeNull();
 
     await first.blur();
 
     await expect(
-      await first.getAttribute("data-resize-handle-active")
+      await first.getAttribute(DATA_ATTRIBUTES.resizeHandleActive)
     ).toBeNull();
     await expect(
-      await last.getAttribute("data-resize-handle-active")
+      await last.getAttribute(DATA_ATTRIBUTES.resizeHandleActive)
     ).toBeNull();
 
     const bounds = (await last.boundingBox())!;
@@ -56,19 +61,19 @@ test.describe("Resize handle", () => {
     await page.mouse.down();
 
     await expect(
-      await first.getAttribute("data-resize-handle-active")
+      await first.getAttribute(DATA_ATTRIBUTES.resizeHandleActive)
     ).toBeNull();
-    await expect(await last.getAttribute("data-resize-handle-active")).toBe(
-      "pointer"
-    );
+    await expect(
+      await last.getAttribute(DATA_ATTRIBUTES.resizeHandleActive)
+    ).toBe("pointer");
 
     await page.mouse.up();
 
     await expect(
-      await first.getAttribute("data-resize-handle-active")
+      await first.getAttribute(DATA_ATTRIBUTES.resizeHandleActive)
     ).toBeNull();
     await expect(
-      await last.getAttribute("data-resize-handle-active")
+      await last.getAttribute(DATA_ATTRIBUTES.resizeHandleActive)
     ).toBeNull();
   });
 
@@ -93,7 +98,9 @@ test.describe("Resize handle", () => {
       assert(iframeBounds);
 
       const panel = page.frameLocator("#frame").locator("[data-panel]").first();
-      await expect(await panel.getAttribute("data-panel-size")).toBe("50.0");
+      await expect(await panel.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "50.0"
+      );
 
       const handle = page
         .frameLocator("#frame")
@@ -108,37 +115,51 @@ test.describe("Resize handle", () => {
 
       // Mouse move to iframe edge (and verify resize)
       await page.mouse.move(iframeBounds.x, iframeBounds.y);
-      await expect(await panel.getAttribute("data-panel-size")).toBe("10.0");
+      await expect(await panel.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "10.0"
+      );
 
       // Mouse move outside of iframe (and verify no resize)
       await page.mouse.move(iframeBounds.x - 10, iframeBounds.y - 10);
-      await expect(await panel.getAttribute("data-panel-size")).toBe("10.0");
+      await expect(await panel.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "10.0"
+      );
 
       // Mouse move within frame (and verify resize)
       await page.mouse.move(iframeBounds.x, iframeBounds.y);
       await page.mouse.move(handleBounds.x, handleBounds.y);
-      await expect(await panel.getAttribute("data-panel-size")).toBe("50.0");
+      await expect(await panel.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "50.0"
+      );
 
       // Mouse move to iframe edge
       await page.mouse.move(
         iframeBounds.x + iframeBounds.width,
         iframeBounds.y + iframeBounds.height
       );
-      await expect(await panel.getAttribute("data-panel-size")).toBe("90.0");
+      await expect(await panel.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "90.0"
+      );
 
       // Mouse move outside of iframe and release
       await page.mouse.move(
         iframeBounds.x + iframeBounds.width + 10,
         iframeBounds.y + iframeBounds.height + 10
       );
-      await expect(await panel.getAttribute("data-panel-size")).toBe("90.0");
+      await expect(await panel.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "90.0"
+      );
       await page.mouse.up();
 
       // Mouse move within frame (and verify no resize)
       await page.mouse.move(handleBounds.x, handleBounds.y);
-      await expect(await panel.getAttribute("data-panel-size")).toBe("90.0");
+      await expect(await panel.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "90.0"
+      );
       await page.mouse.move(iframeBounds.x, iframeBounds.y);
-      await expect(await panel.getAttribute("data-panel-size")).toBe("90.0");
+      await expect(await panel.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "90.0"
+      );
     }
   });
 });
diff --git a/packages/react-resizable-panels-website/tests/utils/panels.ts b/packages/react-resizable-panels-website/tests/utils/panels.ts
index 1d43399..9ebf978 100644
--- a/packages/react-resizable-panels-website/tests/utils/panels.ts
+++ b/packages/react-resizable-panels-website/tests/utils/panels.ts
@@ -1,5 +1,6 @@
 import { Locator, Page, expect } from "@playwright/test";
 import {
+  DATA_ATTRIBUTES,
   assert,
   getIntersectingRectangle,
   intersects,
@@ -28,7 +29,7 @@ export async function dragResizeBy(
     `[data-panel-resize-handle-id="${panelResizeHandleId}"]`
   );
   const direction = await dragHandle.getAttribute(
-    "data-panel-group-direction"
+    DATA_ATTRIBUTES.groupDirection
   )!;
 
   let dragHandleRect = (await dragHandle.boundingBox())!;
@@ -75,18 +76,18 @@ export async function dragResizeIntersecting(
 
   await page.mouse.move(centerPageX, centerPageY);
   await expect(
-    await dragHandleOne.getAttribute("data-resize-handle-state")
+    await dragHandleOne.getAttribute(DATA_ATTRIBUTES.resizeHandleState)
   ).toBe("hover");
   await expect(
-    await dragHandleTwo.getAttribute("data-resize-handle-state")
+    await dragHandleTwo.getAttribute(DATA_ATTRIBUTES.resizeHandleState)
   ).toBe("hover");
 
   await page.mouse.down();
   await expect(
-    await dragHandleOne.getAttribute("data-resize-handle-state")
+    await dragHandleOne.getAttribute(DATA_ATTRIBUTES.resizeHandleState)
   ).toBe("drag");
   await expect(
-    await dragHandleTwo.getAttribute("data-resize-handle-state")
+    await dragHandleTwo.getAttribute(DATA_ATTRIBUTES.resizeHandleState)
   ).toBe("drag");
 
   let increment = 20;
@@ -124,10 +125,10 @@ export async function dragResizeIntersecting(
 
   await page.mouse.up();
   await expect(
-    await dragHandleOne.getAttribute("data-resize-handle-state")
+    await dragHandleOne.getAttribute(DATA_ATTRIBUTES.resizeHandleState)
   ).toBe("hover");
   await expect(
-    await dragHandleTwo.getAttribute("data-resize-handle-state")
+    await dragHandleTwo.getAttribute(DATA_ATTRIBUTES.resizeHandleState)
   ).toBe("hover");
 }
 
@@ -144,7 +145,7 @@ export async function dragResizeTo(
   for (panelIndex = 0; panelIndex < panelCount; panelIndex++) {
     panel = panels.nth(panelIndex);
 
-    const id = await panel.getAttribute("data-panel-id");
+    const id = await panel.getAttribute(DATA_ATTRIBUTES.panelId);
     if (id === panelId) {
       break;
     }
@@ -159,11 +160,13 @@ export async function dragResizeTo(
   );
   const dragHandleRect = (await dragHandle.boundingBox())!;
 
-  const panelGroupId = await dragHandle.getAttribute("data-panel-group-id");
+  const panelGroupId = await dragHandle.getAttribute(DATA_ATTRIBUTES.groupId);
   const panelGroup = page.locator(
     `[data-panel-group][data-panel-group-id="${panelGroupId}"]`
   );
-  const direction = await panelGroup.getAttribute("data-panel-group-direction");
+  const direction = await panelGroup.getAttribute(
+    DATA_ATTRIBUTES.groupDirection
+  );
   const panelGroupRect = (await panelGroup.boundingBox())!;
 
   let pageX = dragHandleRect.x + dragHandleRect.width / 2;
@@ -188,7 +191,7 @@ export async function dragResizeTo(
 
     const { expectedSizes, expectedCursor, size: nextSize } = operations;
 
-    const prevSize = (await panel.getAttribute("data-panel-size"))!;
+    const prevSize = (await panel.getAttribute(DATA_ATTRIBUTES.panelSize))!;
     const isExpanding = parseFloat(prevSize) < nextSize;
 
     // Last panel should drag the handle before it back (left/up)
@@ -216,7 +219,9 @@ export async function dragResizeTo(
 
       await page.mouse.move(pageX, pageY);
 
-      const currentSizeString = (await panel.getAttribute("data-panel-size"))!;
+      const currentSizeString = (await panel.getAttribute(
+        DATA_ATTRIBUTES.panelSize
+      ))!;
       const currentSize = parseFloat(currentSizeString);
 
       if (isExpanding) {
@@ -298,7 +303,7 @@ export async function verifyPanelSizePercentage(
   locator: Locator,
   expectedSize: number
 ) {
-  await expect(await locator.getAttribute("data-panel-size")).toBe(
+  await expect(await locator.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
     expectedSize.toFixed(1)
   );
 }
diff --git a/packages/react-resizable-panels/src/Panel.test.tsx b/packages/react-resizable-panels/src/Panel.test.tsx
index f1cf41a..1373326 100644
--- a/packages/react-resizable-panels/src/Panel.test.tsx
+++ b/packages/react-resizable-panels/src/Panel.test.tsx
@@ -1,6 +1,13 @@
+import { createRef } from "react";
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
-import { ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle } from ".";
+import {
+  DATA_ATTRIBUTES,
+  ImperativePanelHandle,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from ".";
 import { assert } from "./utils/assert";
 import { getPanelElement } from "./utils/dom/getPanelElement";
 import {
@@ -8,7 +15,6 @@ import {
   verifyAttribute,
   verifyExpandedPanelGroupLayout,
 } from "./utils/test-utils";
-import { createRef } from "react";
 
 describe("PanelGroup", () => {
   let expectedWarnings: string[] = [];
@@ -453,9 +459,11 @@ describe("PanelGroup", () => {
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
-      expect(leftElement.getAttribute("data-panel-size")).toBe("10.0");
-      expect(middleElement.getAttribute("data-panel-size")).toBe("80.0");
-      expect(rightElement.getAttribute("data-panel-size")).toBe("10.0");
+      expect(leftElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("10.0");
+      expect(middleElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "80.0"
+      );
+      expect(rightElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("10.0");
 
       act(() => {
         root.render(
@@ -469,9 +477,11 @@ describe("PanelGroup", () => {
         );
       });
 
-      expect(leftElement.getAttribute("data-panel-size")).toBe("5.0");
-      expect(middleElement.getAttribute("data-panel-size")).toBe("90.0");
-      expect(rightElement.getAttribute("data-panel-size")).toBe("5.0");
+      expect(leftElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("5.0");
+      expect(middleElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "90.0"
+      );
+      expect(rightElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("5.0");
     });
 
     it("it should not expand a collapsed panel if other constraints change", () => {
@@ -505,9 +515,11 @@ describe("PanelGroup", () => {
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
-      expect(leftElement.getAttribute("data-panel-size")).toBe("10.0");
-      expect(middleElement.getAttribute("data-panel-size")).toBe("80.0");
-      expect(rightElement.getAttribute("data-panel-size")).toBe("10.0");
+      expect(leftElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("10.0");
+      expect(middleElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "80.0"
+      );
+      expect(rightElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("10.0");
 
       act(() => {
         root.render(
@@ -521,9 +533,11 @@ describe("PanelGroup", () => {
         );
       });
 
-      expect(leftElement.getAttribute("data-panel-size")).toBe("10.0");
-      expect(middleElement.getAttribute("data-panel-size")).toBe("80.0");
-      expect(rightElement.getAttribute("data-panel-size")).toBe("10.0");
+      expect(leftElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("10.0");
+      expect(middleElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "80.0"
+      );
+      expect(rightElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("10.0");
     });
 
     it("should resize a panel if the minSize prop changes", () => {
@@ -545,9 +559,11 @@ describe("PanelGroup", () => {
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
-      expect(leftElement.getAttribute("data-panel-size")).toBe("15.0");
-      expect(middleElement.getAttribute("data-panel-size")).toBe("70.0");
-      expect(rightElement.getAttribute("data-panel-size")).toBe("15.0");
+      expect(leftElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("15.0");
+      expect(middleElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "70.0"
+      );
+      expect(rightElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("15.0");
 
       act(() => {
         root.render(
@@ -561,9 +577,11 @@ describe("PanelGroup", () => {
         );
       });
 
-      expect(leftElement.getAttribute("data-panel-size")).toBe("20.0");
-      expect(middleElement.getAttribute("data-panel-size")).toBe("60.0");
-      expect(rightElement.getAttribute("data-panel-size")).toBe("20.0");
+      expect(leftElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("20.0");
+      expect(middleElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "60.0"
+      );
+      expect(rightElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("20.0");
     });
 
     it("should resize a panel if the maxSize prop changes", () => {
@@ -585,9 +603,11 @@ describe("PanelGroup", () => {
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
-      expect(leftElement.getAttribute("data-panel-size")).toBe("25.0");
-      expect(middleElement.getAttribute("data-panel-size")).toBe("50.0");
-      expect(rightElement.getAttribute("data-panel-size")).toBe("25.0");
+      expect(leftElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("25.0");
+      expect(middleElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "50.0"
+      );
+      expect(rightElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("25.0");
 
       act(() => {
         root.render(
@@ -601,9 +621,11 @@ describe("PanelGroup", () => {
         );
       });
 
-      expect(leftElement.getAttribute("data-panel-size")).toBe("20.0");
-      expect(middleElement.getAttribute("data-panel-size")).toBe("60.0");
-      expect(rightElement.getAttribute("data-panel-size")).toBe("20.0");
+      expect(leftElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("20.0");
+      expect(middleElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+        "60.0"
+      );
+      expect(rightElement.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe("20.0");
     });
   });
 
@@ -952,17 +974,17 @@ describe("PanelGroup", () => {
       assert(leftElement, "");
       assert(rightElement, "");
 
-      verifyAttribute(leftElement, "data-panel", "");
-      verifyAttribute(leftElement, "data-panel-id", "left-panel");
-      verifyAttribute(leftElement, "data-panel-group-id", "test-group");
-      verifyAttribute(leftElement, "data-panel-size", "75.0");
-      verifyAttribute(leftElement, "data-panel-collapsible", null);
-
-      verifyAttribute(rightElement, "data-panel", "");
-      verifyAttribute(rightElement, "data-panel-id", "right-panel");
-      verifyAttribute(rightElement, "data-panel-group-id", "test-group");
-      verifyAttribute(rightElement, "data-panel-size", "25.0");
-      verifyAttribute(rightElement, "data-panel-collapsible", "true");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.panel, "");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.panelId, "left-panel");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.groupId, "test-group");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.panelSize, "75.0");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.panelCollapsible, null);
+
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.panel, "");
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.panelId, "right-panel");
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.groupId, "test-group");
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.panelSize, "25.0");
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.panelCollapsible, "true");
     });
 
     it("should update the data-panel-size attribute when the panel resizes", () => {
@@ -984,15 +1006,15 @@ describe("PanelGroup", () => {
       assert(leftElement, "");
       assert(rightElement, "");
 
-      verifyAttribute(leftElement, "data-panel-size", "75.0");
-      verifyAttribute(rightElement, "data-panel-size", "25.0");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.panelSize, "75.0");
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.panelSize, "25.0");
 
       act(() => {
         leftPanelRef.current?.resize(30);
       });
 
-      verifyAttribute(leftElement, "data-panel-size", "30.0");
-      verifyAttribute(rightElement, "data-panel-size", "70.0");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.panelSize, "30.0");
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.panelSize, "70.0");
     });
   });
 
diff --git a/packages/react-resizable-panels/src/PanelGroup.test.tsx b/packages/react-resizable-panels/src/PanelGroup.test.tsx
index 4f71c92..5ac0df4 100644
--- a/packages/react-resizable-panels/src/PanelGroup.test.tsx
+++ b/packages/react-resizable-panels/src/PanelGroup.test.tsx
@@ -1,9 +1,10 @@
 // @ts-expect-error This is an experimental API
 // eslint-disable-next-line no-restricted-imports
-import { unstable_Activity as Activity, Fragment } from "react";
+import { unstable_Activity as Activity, createRef } from "react";
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import {
+  DATA_ATTRIBUTES,
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
   Panel,
@@ -17,7 +18,6 @@ import {
   mockPanelGroupOffsetWidthAndHeight,
   verifyAttribute,
 } from "./utils/test-utils";
-import { createRef } from "react";
 
 describe("PanelGroup", () => {
   let expectedWarnings: string[] = [];
@@ -95,8 +95,12 @@ describe("PanelGroup", () => {
 
     const leftPanelElement = getPanelElement("left");
     const rightPanelElement = getPanelElement("right");
-    expect(leftPanelElement?.getAttribute("data-panel-size")).toBe("60.0");
-    expect(rightPanelElement?.getAttribute("data-panel-size")).toBe("40.0");
+    expect(leftPanelElement?.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+      "60.0"
+    );
+    expect(rightPanelElement?.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+      "40.0"
+    );
 
     act(() => {
       root.render(
@@ -126,8 +130,12 @@ describe("PanelGroup", () => {
     expect(panelRef.current?.getSize()).toEqual(60);
 
     // This bug is only observable in the DOM; callbacks will not re-fire
-    expect(leftPanelElement?.getAttribute("data-panel-size")).toBe("60.0");
-    expect(rightPanelElement?.getAttribute("data-panel-size")).toBe("40.0");
+    expect(leftPanelElement?.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+      "60.0"
+    );
+    expect(rightPanelElement?.getAttribute(DATA_ATTRIBUTES.panelSize)).toBe(
+      "40.0"
+    );
   });
 
   // github.com/bvaughn/react-resizable-panels/issues/303
@@ -299,9 +307,9 @@ describe("PanelGroup", () => {
       const element = getPanelGroupElement("test-group", container);
       assert(element, "");
 
-      verifyAttribute(element, "data-panel-group", "");
-      verifyAttribute(element, "data-panel-group-direction", "horizontal");
-      verifyAttribute(element, "data-panel-group-id", "test-group");
+      verifyAttribute(element, DATA_ATTRIBUTES.group, "");
+      verifyAttribute(element, DATA_ATTRIBUTES.groupDirection, "horizontal");
+      verifyAttribute(element, DATA_ATTRIBUTES.groupId, "test-group");
     });
   });
 
diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx b/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx
index 1611bdc..741b457 100644
--- a/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx
+++ b/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx
@@ -6,7 +6,7 @@ import {
   PanelResizeHandle,
   type PanelResizeHandleProps,
 } from ".";
-import { RESIZE_HANDLE_ATTRIBUTES } from "./constants";
+import { DATA_ATTRIBUTES } from "./constants";
 import { assert } from "./utils/assert";
 import * as cursorUtils from "./utils/cursor";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
@@ -262,89 +262,145 @@ describe("PanelResizeHandle", () => {
     it("should initialize with the correct props based attributes", () => {
       const { leftElement, rightElement } = setupMockedGroup();
 
-      verifyAttribute(leftElement, "data-panel-group-id", "test-group");
-      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.root, "");
-      verifyAttribute(leftElement, "data-panel-group-direction", "horizontal");
-      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.enabled, "true");
-      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.id, "handle-left");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.groupId, "test-group");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandle, "");
+      verifyAttribute(
+        leftElement,
+        DATA_ATTRIBUTES.groupDirection,
+        "horizontal"
+      );
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleEnabled, "true");
+      verifyAttribute(
+        leftElement,
+        DATA_ATTRIBUTES.resizeHandleId,
+        "handle-left"
+      );
 
-      verifyAttribute(rightElement, "data-panel-group-id", "test-group");
-      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.root, "");
-      verifyAttribute(rightElement, "data-panel-group-direction", "horizontal");
-      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.enabled, "true");
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.groupId, "test-group");
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandle, "");
+      verifyAttribute(
+        rightElement,
+        DATA_ATTRIBUTES.groupDirection,
+        "horizontal"
+      );
+      verifyAttribute(
+        rightElement,
+        DATA_ATTRIBUTES.resizeHandleEnabled,
+        "true"
+      );
       verifyAttribute(
         rightElement,
-        RESIZE_HANDLE_ATTRIBUTES.id,
+        DATA_ATTRIBUTES.resizeHandleId,
         "handle-right"
       );
     });
 
-    it(`should update ${RESIZE_HANDLE_ATTRIBUTES.active} and ${RESIZE_HANDLE_ATTRIBUTES.state} when dragging starts/stops`, () => {
+    it(`should update ${DATA_ATTRIBUTES.resizeHandleActive} and ${DATA_ATTRIBUTES.resizeHandleState} when dragging starts/stops`, () => {
       const { leftElement, rightElement } = setupMockedGroup();
-      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");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(
+        leftElement,
+        DATA_ATTRIBUTES.resizeHandleState,
+        "inactive"
+      );
+      verifyAttribute(
+        rightElement,
+        DATA_ATTRIBUTES.resizeHandleState,
+        "inactive"
+      );
 
       act(() => {
         dispatchPointerEvent("pointermove", leftElement);
       });
-      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");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleState, "hover");
+      verifyAttribute(
+        rightElement,
+        DATA_ATTRIBUTES.resizeHandleState,
+        "inactive"
+      );
 
       act(() => {
         dispatchPointerEvent("pointerdown", leftElement);
       });
-      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");
+      verifyAttribute(
+        leftElement,
+        DATA_ATTRIBUTES.resizeHandleActive,
+        "pointer"
+      );
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleState, "drag");
+      verifyAttribute(
+        rightElement,
+        DATA_ATTRIBUTES.resizeHandleState,
+        "inactive"
+      );
 
       act(() => {
         dispatchPointerEvent("pointermove", leftElement);
       });
-      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");
+      verifyAttribute(
+        leftElement,
+        DATA_ATTRIBUTES.resizeHandleActive,
+        "pointer"
+      );
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleState, "drag");
+      verifyAttribute(
+        rightElement,
+        DATA_ATTRIBUTES.resizeHandleState,
+        "inactive"
+      );
 
       act(() => {
         dispatchPointerEvent("pointerup", leftElement);
       });
-      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");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleState, "hover");
+      verifyAttribute(
+        rightElement,
+        DATA_ATTRIBUTES.resizeHandleState,
+        "inactive"
+      );
 
       act(() => {
         dispatchPointerEvent("pointermove", rightElement);
       });
-      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");
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(
+        leftElement,
+        DATA_ATTRIBUTES.resizeHandleState,
+        "inactive"
+      );
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandleState, "hover");
     });
 
-    it(`should update ${RESIZE_HANDLE_ATTRIBUTES.active} when focused`, () => {
+    it(`should update ${DATA_ATTRIBUTES.resizeHandleActive} when focused`, () => {
       const { leftElement, rightElement } = setupMockedGroup();
-      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
-      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandleActive, null);
 
       act(() => {
         leftElement.focus();
       });
       expect(document.activeElement).toBe(leftElement);
-      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, "keyboard");
-      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(
+        leftElement,
+        DATA_ATTRIBUTES.resizeHandleActive,
+        "keyboard"
+      );
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandleActive, null);
 
       act(() => {
         leftElement.blur();
       });
       expect(document.activeElement).not.toBe(leftElement);
-      verifyAttribute(leftElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
-      verifyAttribute(rightElement, RESIZE_HANDLE_ATTRIBUTES.active, null);
+      verifyAttribute(leftElement, DATA_ATTRIBUTES.resizeHandleActive, null);
+      verifyAttribute(rightElement, DATA_ATTRIBUTES.resizeHandleActive, null);
     });
   });
 
@@ -361,7 +417,7 @@ describe("PanelResizeHandle", () => {
       });
 
       const element = container.querySelector(
-        `[${RESIZE_HANDLE_ATTRIBUTES.root}]`
+        `[${DATA_ATTRIBUTES.resizeHandle}]`
       );
 
       expect(element).not.toBeNull();
@@ -380,7 +436,7 @@ describe("PanelResizeHandle", () => {
       });
 
       const element = container.querySelector(
-        `[${RESIZE_HANDLE_ATTRIBUTES.root}]`
+        `[${DATA_ATTRIBUTES.resizeHandle}]`
       );
 
       expect(element).not.toBeNull();
diff --git a/packages/react-resizable-panels/src/utils/test-utils.ts b/packages/react-resizable-panels/src/utils/test-utils.ts
index 5335cf4..90cda11 100644
--- a/packages/react-resizable-panels/src/utils/test-utils.ts
+++ b/packages/react-resizable-panels/src/utils/test-utils.ts
@@ -1,4 +1,4 @@
-import { RESIZE_HANDLE_ATTRIBUTES } from "../constants";
+import { DATA_ATTRIBUTES } from "../constants";
 import { assert } from "./assert";
 
 const util = require("util");
@@ -99,9 +99,9 @@ export function mockPanelGroupOffsetWidthAndHeight(
   Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
     configurable: true,
     get: function () {
-      if (this.hasAttribute(RESIZE_HANDLE_ATTRIBUTES.root)) {
+      if (this.hasAttribute(DATA_ATTRIBUTES.resizeHandle)) {
         return 0;
-      } else if (this.hasAttribute("data-panel-group")) {
+      } else if (this.hasAttribute(DATA_ATTRIBUTES.group)) {
         return mockHeight;
       }
     },
@@ -110,9 +110,9 @@ export function mockPanelGroupOffsetWidthAndHeight(
   Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
     configurable: true,
     get: function () {
-      if (this.hasAttribute(RESIZE_HANDLE_ATTRIBUTES.root)) {
+      if (this.hasAttribute(DATA_ATTRIBUTES.resizeHandle)) {
         return 0;
-      } else if (this.hasAttribute("data-panel-group")) {
+      } else if (this.hasAttribute(DATA_ATTRIBUTES.group)) {
         return mockWidth;
       }
     },