@purpurds/table 8.6.0 → 8.8.0

package/src/use-drag-handle.test.tsx

@@ -1,102 +1,12 @@
 import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { axe } from "vitest-axe";
 
-import { TableColumnDragHandle, useDragHandle } from "./use-drag-handle.hook";
-
-// Test component to test the hook
-function TestDragHandleComponent() {
-  const { mouseDownActive, handleMouseDown } = useDragHandle();
-
-  return (
-    <div>
-      <span data-testid="mouse-down-state">{mouseDownActive ? "active" : "inactive"}</span>
-      <button onClick={handleMouseDown} data-testid="trigger-button">
-        Trigger Mouse Down
-      </button>
-    </div>
-  );
-}
-
-describe("useDragHandle Hook", () => {
-  beforeEach(() => {
-    // Clean up any event listeners
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    // Clean up global event listeners
-    const events = ["mouseup"];
-    events.forEach((event) => {
-      window.removeEventListener(event, () => {});
-    });
-  });
-
-  it("should initialize with mouseDownActive as false", () => {
-    render(<TestDragHandleComponent />);
-
-    const stateElement = screen.getByTestId("mouse-down-state");
-    expect(stateElement).toHaveTextContent("inactive");
-  });
-
-  it("should set mouseDownActive to true when handleMouseDown is called", async () => {
-    const user = userEvent.setup();
-    render(<TestDragHandleComponent />);
-
-    const triggerButton = screen.getByTestId("trigger-button");
-    const stateElement = screen.getByTestId("mouse-down-state");
-
-    expect(stateElement).toHaveTextContent("inactive");
-
-    await user.click(triggerButton);
-
-    expect(stateElement).toHaveTextContent("active");
-  });
-
-  it("should reset mouseDownActive to false when mouse up event occurs", async () => {
-    const user = userEvent.setup();
-    render(<TestDragHandleComponent />);
-
-    const triggerButton = screen.getByTestId("trigger-button");
-    const stateElement = screen.getByTestId("mouse-down-state");
-
-    // Trigger mouse down
-    await user.click(triggerButton);
-    expect(stateElement).toHaveTextContent("active");
-
-    // Simulate mouse up on window
-    fireEvent.mouseUp(window);
-
-    expect(stateElement).toHaveTextContent("inactive");
-  });
-
-  it("should add and remove mouseup event listener correctly", async () => {
-    const addEventListenerSpy = vi.spyOn(window, "addEventListener");
-    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
-
-    const user = userEvent.setup();
-    render(<TestDragHandleComponent />);
-
-    const triggerButton = screen.getByTestId("trigger-button");
-
-    await user.click(triggerButton);
-
-    expect(addEventListenerSpy).toHaveBeenCalledWith("mouseup", expect.any(Function), {
-      once: true,
-    });
-
-    // Trigger mouseup to remove listener
-    fireEvent.mouseUp(window);
-
-    addEventListenerSpy.mockRestore();
-    removeEventListenerSpy.mockRestore();
-  });
-});
+import { TableColumnDragHandle } from "./use-drag-handle.hook";
 
 describe("TableColumnDragHandle Component", () => {
   const defaultProps = {
-    onMouseDown: vi.fn(),
     overlayActive: false,
     isFirstColumn: false,
     isLastColumn: false,
@@ -197,81 +107,31 @@ describe("TableColumnDragHandle Component", () => {
   });
 
   describe("Event Handling", () => {
-    it("should call onMouseDown when clicked", async () => {
-      const user = userEvent.setup();
-      const onMouseDownMock = vi.fn();
-
-      render(<TableColumnDragHandle {...defaultProps} onMouseDown={onMouseDownMock} />);
-
-      const dragHandle = screen.getByRole("button");
-      await user.click(dragHandle);
-
-      expect(onMouseDownMock).toHaveBeenCalledTimes(1);
-    });
-
-    it("should call onMouseDown when mouse down event is triggered", () => {
-      const onMouseDownMock = vi.fn();
-
-      render(<TableColumnDragHandle {...defaultProps} onMouseDown={onMouseDownMock} />);
-
-      const dragHandle = screen.getByRole("button");
-      fireEvent.mouseDown(dragHandle);
+    it("should pass through dragListeners props", () => {
+      const mockListener = vi.fn();
+      const dragListeners = {
+        onMouseDown: mockListener,
+        onTouchStart: mockListener,
+      };
 
-      expect(onMouseDownMock).toHaveBeenCalledTimes(1);
-    });
-
-    it("should call onMouseDown when Enter key is pressed", async () => {
-      const user = userEvent.setup();
-      const onMouseDownMock = vi.fn();
-
-      render(<TableColumnDragHandle {...defaultProps} onMouseDown={onMouseDownMock} />);
-
-      const dragHandle = screen.getByRole("button");
-      dragHandle.focus();
-      await user.keyboard("{Enter}");
-
-      expect(onMouseDownMock).toHaveBeenCalledTimes(1);
-    });
-
-    it("should call onMouseDown when Space key is pressed", async () => {
-      const user = userEvent.setup();
-      const onMouseDownMock = vi.fn();
-
-      render(<TableColumnDragHandle {...defaultProps} onMouseDown={onMouseDownMock} />);
+      render(<TableColumnDragHandle {...defaultProps} {...dragListeners} />);
 
       const dragHandle = screen.getByRole("button");
-      dragHandle.focus();
-      await user.keyboard(" ");
-
-      expect(onMouseDownMock).toHaveBeenCalledTimes(1);
-    });
-
-    it("should not call onMouseDown for other key presses", async () => {
-      const user = userEvent.setup();
-      const onMouseDownMock = vi.fn();
 
-      render(<TableColumnDragHandle {...defaultProps} onMouseDown={onMouseDownMock} />);
-
-      const dragHandle = screen.getByRole("button");
-      dragHandle.focus();
-      await user.keyboard("{Escape}");
-
-      expect(onMouseDownMock).not.toHaveBeenCalled();
+      // Verify the listeners are attached
+      expect(dragHandle).toHaveAttribute("role", "button");
     });
 
-    it("should handle multiple rapid clicks", async () => {
-      const user = userEvent.setup();
-      const onMouseDownMock = vi.fn();
-
-      render(<TableColumnDragHandle {...defaultProps} onMouseDown={onMouseDownMock} />);
-
-      const dragHandle = screen.getByRole("button");
-
-      await user.click(dragHandle);
-      await user.click(dragHandle);
-      await user.click(dragHandle);
-
-      expect(onMouseDownMock).toHaveBeenCalledTimes(3);
+    it("should not throw when receiving additional props", () => {
+      expect(() => {
+        render(
+          <TableColumnDragHandle
+            {...defaultProps}
+            data-testid="custom-test-id"
+            customProp="value"
+          />
+        );
+      }).not.toThrow();
     });
   });
 
@@ -337,19 +197,6 @@ describe("TableColumnDragHandle Component", () => {
   });
 
   describe("Props Validation", () => {
-    it("should handle undefined onMouseDown gracefully", () => {
-      expect(() => {
-        render(
-          <TableColumnDragHandle
-            {...defaultProps}
-            onMouseDown={
-              undefined as unknown as Parameters<typeof TableColumnDragHandle>[0]["onMouseDown"]
-            }
-          />
-        );
-      }).not.toThrow();
-    });
-
     it("should handle empty aria label", () => {
       render(<TableColumnDragHandle {...defaultProps} columnDragAriaLabel="" />);
 

package/src/utils/custom-keyboard-coordinates.ts

@@ -1,83 +1,44 @@
-import {
-  closestCorners,
-  type DroppableContainer,
-  getFirstCollision,
-  KeyboardCode,
-  type KeyboardCoordinateGetter,
-} from "@dnd-kit/core";
+import { KeyboardCode, type KeyboardCoordinateGetter } from "@dnd-kit/core";
 
 /**
- * Enhanced keyboard coordinate handler that better handles columns of different widths
- * by positioning the dragged column appropriately within target columns
+ * Simple keyboard coordinate handler that moves the drag overlay
+ * left or right incrementally and lets collision detection determine
+ * which column we're over.
  */
 export const enhancedColumnKeyboardCoordinates: KeyboardCoordinateGetter = (
   event,
-  { context: { active, collisionRect, droppableRects, droppableContainers, over } }
+  { currentCoordinates, context: { active, droppableRects } }
 ) => {
-  if (!active || !collisionRect) {
+  if (!active || !currentCoordinates) {
     return;
   }
 
-  // Only handle left/right movements for column dragging
-  if (event.code === KeyboardCode.Right || event.code === KeyboardCode.Left) {
-    event.preventDefault();
-
-    const filteredContainers: DroppableContainer[] = [];
-
-    droppableContainers.getEnabled().forEach((container) => {
-      if (container?.disabled) return;
-
-      const rect = droppableRects.get(container.id);
-      if (!rect) return;
-
-      // Filter based on direction
-      if (event.code === KeyboardCode.Right && collisionRect.left < rect.left) {
-        filteredContainers.push(container);
-      } else if (event.code === KeyboardCode.Left && collisionRect.left > rect.left) {
-        filteredContainers.push(container);
-      }
-    });
-
-    // Sort containers by distance (nearest first) for left movement
-    if (event.code === KeyboardCode.Left && filteredContainers.length > 0) {
-      filteredContainers.sort((a, b) => {
-        const rectA = droppableRects.get(a.id);
-        const rectB = droppableRects.get(b.id);
-        if (!rectA || !rectB) return 0;
-
-        // Sort by closest to furthest from the current position (for left movement)
-        return rectB.left - rectA.left;
-      });
-    }
+  // Only handle left/right movements
+  if (event.code !== KeyboardCode.Right && event.code !== KeyboardCode.Left) {
+    return;
+  }
 
-    // Find closest target
-    const collisions = closestCorners({
-      active,
-      collisionRect,
-      droppableRects,
-      droppableContainers: filteredContainers,
-      pointerCoordinates: null,
-    });
+  event.preventDefault();
 
-    let targetId = getFirstCollision(collisions, "id");
+  // Get the active column's width to determine appropriate step size
+  const activeRect = droppableRects.get(active.id);
+  if (!activeRect) {
+    return;
+  }
 
-    // Get second collision if first is current "over" element
-    if (targetId === over?.id && collisions.length > 1) {
-      targetId = collisions[1].id;
-    }
+  // Move by half the width of the active column or max 100px
+  const stepSize = Math.min(activeRect.width * 0.5, 100);
 
-    if (targetId) {
-      const targetRect = droppableRects.get(targetId);
+  let newX: number;
 
-      if (targetRect) {
-        return {
-          x: targetRect.left + targetRect.width * 0.35,
-          y: targetRect.top + targetRect.height / 2,
-        };
-      }
-    }
+  if (event.code === KeyboardCode.Right) {
+    newX = currentCoordinates.x + stepSize;
+  } else {
+    newX = currentCoordinates.x - stepSize;
   }
 
-  // For other keys, we don't handle them
-  return;
+  return {
+    x: newX,
+    y: currentCoordinates.y,
+  };
 };