Reset pointer-event style on Group on pointerup

Author: bvaughn

integrations/vite/tests/pointer-interactions.spec.tsx

@@ -191,4 +191,31 @@ test.describe("pointer interactions", () => {
     await expect(page.getByText('"onLayoutCount": 2')).toBeVisible();
     await expect(page.getByText('"left": 95')).toBeVisible();
   });
+
+  test("should disable pointer-events while resize is active", async ({
+    page
+  }) => {
+    await goToUrl(
+      page,
+      <Group>
+        <Panel id="left" />
+        <Separator />
+        <Panel id="right" />
+      </Group>
+    );
+
+    const hitAreaBox = await calculateHitArea(page, ["left", "right"]);
+    const { x, y } = getCenterCoordinates(hitAreaBox);
+
+    const panel = page.getByText("id: left");
+
+    await page.mouse.move(x, y);
+    await expect(panel).toHaveCSS("pointer-events", "auto");
+
+    await page.mouse.down();
+    await expect(panel).toHaveCSS("pointer-events", "none");
+
+    await page.mouse.up();
+    await expect(panel).toHaveCSS("pointer-events", "auto");
+  });
 });

lib/components/group/Group.tsx

@@ -128,15 +128,18 @@ export function Group({
         "interactionStateChange",
         (interactionState) => {
           switch (interactionState.state) {
-            case "active":
-            case "hover": {
+            case "active": {
               setDragActive(
                 interactionState.hitRegions.some(
                   (current) => current.group === group
                 )
               );
               break;
             }
+            default: {
+              setDragActive(false);
+              break;
+            }
           }
         }
       );

src/components/styled-panels/Panel.tsx

@@ -25,7 +25,7 @@ export function Panel({
 
   return (
     <PanelExternal
-      className={`bg-slate-800 rounded rounded-md ${className}`}
+      className={`bg-slate-800 rounded rounded-md overflow-auto ${className}`}
       {...rest}
       onResize={listenForResize ? setSize : undefined}
     >