@purpurds/table 8.7.0 → 8.8.0

package/dist/use-drag-handle.hook.d.ts

@@ -1,15 +1,11 @@
 import { default as React } from 'react';
 
-export declare function useDragHandle(): {
-    mouseDownActive: boolean;
-    handleMouseDown: () => void;
-};
 export type TableColumnDragHandleProps = {
-    onMouseDown: () => void;
     overlayActive?: boolean;
     isFirstColumn: boolean;
     isLastColumn: boolean;
     columnDragAriaLabel: string;
+    [key: string]: unknown;
 };
-export declare function TableColumnDragHandle({ onMouseDown, overlayActive, isFirstColumn, isLastColumn, columnDragAriaLabel, }: TableColumnDragHandleProps): React.JSX.Element;
+export declare function TableColumnDragHandle({ overlayActive, isFirstColumn, isLastColumn, columnDragAriaLabel, ...dragListeners }: TableColumnDragHandleProps): React.JSX.Element;
 //# sourceMappingURL=use-drag-handle.hook.d.ts.map

package/dist/use-drag-handle.hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-drag-handle.hook.d.ts","sourceRoot":"","sources":["../src/use-drag-handle.hook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,wBAAgB,aAAa;;;EAa5B;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,mBAAmB,GACpB,EAAE,0BAA0B,qBAqB5B"}
+{"version":3,"file":"use-drag-handle.hook.d.ts","sourceRoot":"","sources":["../src/use-drag-handle.hook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAE5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,aAAa,EACb,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,GAAG,aAAa,EACjB,EAAE,0BAA0B,qBAgB5B"}

package/dist/utils/custom-keyboard-coordinates.d.ts

@@ -1,8 +1,9 @@
 import { 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 declare const enhancedColumnKeyboardCoordinates: KeyboardCoordinateGetter;
 //# sourceMappingURL=custom-keyboard-coordinates.d.ts.map

package/dist/utils/custom-keyboard-coordinates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-keyboard-coordinates.d.ts","sourceRoot":"","sources":["../../src/utils/custom-keyboard-coordinates.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,wBAAwB,EAC9B,MAAM,eAAe,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,iCAAiC,EAAE,wBAsE/C,CAAC"}
+{"version":3,"file":"custom-keyboard-coordinates.d.ts","sourceRoot":"","sources":["../../src/utils/custom-keyboard-coordinates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAE5E;;;;GAIG;AACH,eAAO,MAAM,iCAAiC,EAAE,wBAoC/C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/table",
-  "version": "8.7.0",
+  "version": "8.8.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/table.cjs.js",
   "types": "./dist/table.d.ts",
@@ -21,26 +21,26 @@
     "@dnd-kit/utilities": "~3.2.2",
     "@tanstack/react-table": "~8.21.2",
     "classnames": "~2.5.0",
-    "@purpurds/badge": "8.7.0",
-    "@purpurds/button": "8.7.0",
-    "@purpurds/cta-link": "8.7.0",
-    "@purpurds/drawer": "8.7.0",
-    "@purpurds/heading": "8.7.0",
-    "@purpurds/icon": "8.7.0",
-    "@purpurds/paragraph": "8.7.0",
-    "@purpurds/link": "8.7.0",
-    "@purpurds/select": "8.7.0",
-    "@purpurds/skeleton": "8.7.0",
-    "@purpurds/text-field": "8.7.0",
-    "@purpurds/checkbox": "8.7.0",
-    "@purpurds/visually-hidden": "8.7.0",
-    "@purpurds/tooltip": "8.7.0",
-    "@purpurds/tokens": "8.7.0",
-    "@purpurds/toggle": "8.7.0"
+    "@purpurds/badge": "8.8.0",
+    "@purpurds/checkbox": "8.8.0",
+    "@purpurds/cta-link": "8.8.0",
+    "@purpurds/button": "8.8.0",
+    "@purpurds/drawer": "8.8.0",
+    "@purpurds/heading": "8.8.0",
+    "@purpurds/icon": "8.8.0",
+    "@purpurds/paragraph": "8.8.0",
+    "@purpurds/link": "8.8.0",
+    "@purpurds/select": "8.8.0",
+    "@purpurds/skeleton": "8.8.0",
+    "@purpurds/text-field": "8.8.0",
+    "@purpurds/toggle": "8.8.0",
+    "@purpurds/tokens": "8.8.0",
+    "@purpurds/tooltip": "8.8.0",
+    "@purpurds/visually-hidden": "8.8.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/react-vite": "^9.0.18",
+    "@storybook/react-vite": "^10.0.7",
     "@testing-library/dom": "~10.4.0",
     "@testing-library/jest-dom": "~6.4.0",
     "@testing-library/react": "~16.2.0",
@@ -54,19 +54,19 @@
     "prettier": "~2.8.8",
     "react-dom": "^19.0.0",
     "react": "^19.0.0",
-    "storybook": "^9.0.18",
+    "storybook": "^10.0.7",
     "typescript": "^5.6.3",
     "vite": "^6.2.1",
     "vitest-axe": "~0.1.0",
     "vitest-canvas-mock": "~0.3.3",
     "vitest": "^3.1.2",
-    "@purpurds/autocomplete": "8.7.0",
+    "@purpurds/autocomplete": "8.8.0",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/label": "8.7.0",
-    "@purpurds/illustrative-icon": "8.7.0",
-    "@purpurds/listbox": "8.7.0",
-    "@purpurds/grid": "8.7.0",
-    "@purpurds/pagination": "8.7.0"
+    "@purpurds/illustrative-icon": "8.8.0",
+    "@purpurds/grid": "8.8.0",
+    "@purpurds/label": "8.8.0",
+    "@purpurds/listbox": "8.8.0",
+    "@purpurds/pagination": "8.8.0"
   },
   "scripts": {
     "build:dev": "vite",

package/src/table-column-header-cell.tsx

@@ -22,7 +22,7 @@ import c from "classnames/bind";
 
 import { DragIndicatorCircle } from "./drag-indicator-circle";
 import styles from "./table.module.scss";
-import { TableColumnDragHandle, useDragHandle } from "./use-drag-handle.hook";
+import { TableColumnDragHandle } from "./use-drag-handle.hook";
 import { useDragIndicatorPosition } from "./use-drag-indicator-position.hook";
 import { useDropIndicator } from "./use-drop-indicator.hook";
 import { useElementVisibility } from "./use-element-visibility.hook";
@@ -100,9 +100,8 @@ export const TableColumnHeaderCell = <TData extends RowData>({
     disabled: !enableColumnDrag || activeId !== null,
   });
 
-  const { mouseDownActive, handleMouseDown } = useDragHandle();
   const isActiveColumn = activeId === header.id || sortableId === activeId;
-  const draggingActive = (overlayActive || isSorting || mouseDownActive) && isActiveColumn;
+  const draggingActive = (overlayActive || isSorting) && isActiveColumn;
   const isCheckBox = header.column.id === "row-selection" || header.id === "row-selection";
   const isRadiobutton = header.column.id === "row-radio" || header.id === "row-radio";
   const canSort = enableSorting && header.column.getCanSort();
@@ -184,12 +183,17 @@ export const TableColumnHeaderCell = <TData extends RowData>({
         aria-sort={getSortingDirection(header.column.getIsSorted())}
         aria-label={ariaLabel}
         {...(enableColumnDrag
-          ? { ...attributes, ...listeners, id: `header-${sortableId || header.id}` }
+          ? {
+              ...attributes,
+              role: "columnheader", // Override the role="button" from useSortable
+              tabIndex: -1, // Make th non-focusable
+              id: `header-${sortableId || header.id}`,
+            }
           : {})}
       >
         {enableColumnDrag && (
           <TableColumnDragHandle
-            onMouseDown={handleMouseDown}
+            {...listeners}
             overlayActive={overlayActive}
             isFirstColumn={isFirstColumn}
             isLastColumn={isLastColumn}

package/src/table.tsx

@@ -205,7 +205,7 @@ export const Table = <TData extends RowData>({
     ...restProps,
   });
 
-  const rowCount = useMemo(() => tanstackTable.getRowCount(), [tanstackTable]);
+  const rowCount = tanstackTable.getRowCount();
 
   useEffect(() => {
     if (onRowsCountChange) {
@@ -316,10 +316,6 @@ export const Table = <TData extends RowData>({
   const tableRows = tanstackTable.getRowModel().rows;
   const emptyTable = tableRows.length === 0 && Boolean(emptyTableCopy);
 
-  const memoizedGetColumnWidths = React.useCallback(() => {
-    return tanstackTable.getVisibleLeafColumns().map((column) => column.getSize() || "100%");
-  }, [tanstackTable]);
-
   // Extract header groups to avoid complex expression in dependency array
   const headerGroups = tanstackTable.getHeaderGroups();
 
@@ -379,6 +375,13 @@ export const Table = <TData extends RowData>({
       sortingAriaLabels,
       columnDragAriaLabelsCopy,
       tanstackTable,
+      emptyTable,
+      stickyFirstColumn,
+      stickyHeaders,
+      isScrolled,
+      getStickyColumn,
+      showBorder,
+      activeId,
     ]
   );
 
@@ -399,7 +402,9 @@ export const Table = <TData extends RowData>({
       showBorder={showBorder}
       enableColumnDrag={enableColumnDrag}
       activeId={activeId}
-      getColumnWidths={memoizedGetColumnWidths}
+      getColumnWidths={() =>
+        tanstackTable.getVisibleLeafColumns().map((column) => column.getSize() || "100%")
+      }
       variant={variant}
       emptyTableHeadingTag={emptyTableHeadingTag}
       emptyTableCopy={emptyTableCopy}

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { IconDragHorizontal } from "@purpurds/icon/drag-horizontal";
 import c from "classnames/bind";
 
@@ -7,52 +7,33 @@ import styles from "./table.module.scss";
 const cx = c.bind(styles);
 const rootClassName = "purpur-table-column-header-cell";
 
-export function useDragHandle() {
-  const [mouseDownActive, setMouseDownActive] = useState(false);
-
-  const handleMouseDown = () => {
-    setMouseDownActive(true);
-    window.addEventListener("mouseup", handleMouseUp, { once: true });
-  };
-
-  const handleMouseUp = () => {
-    setMouseDownActive(false);
-  };
-
-  return { mouseDownActive, handleMouseDown };
-}
-
 export type TableColumnDragHandleProps = {
-  onMouseDown: () => void;
   overlayActive?: boolean;
   isFirstColumn: boolean;
   isLastColumn: boolean;
   columnDragAriaLabel: string;
+  // Add any additional props from listeners
+  [key: string]: unknown;
 };
 
 export function TableColumnDragHandle({
-  onMouseDown,
   overlayActive,
   isFirstColumn,
   isLastColumn,
   columnDragAriaLabel,
+  ...dragListeners // Capture the listeners from useSortable
 }: TableColumnDragHandleProps) {
   return (
     <div
+      role="button"
+      tabIndex={0}
       className={cx(`${rootClassName}__drag-handle`, {
         [`${rootClassName}__border-radius-first-cell`]: isFirstColumn && !overlayActive,
         [`${rootClassName}__border-radius-last-cell`]: isLastColumn && !overlayActive,
         [`${rootClassName}__drag-handle--active`]: overlayActive,
       })}
-      role="button"
-      tabIndex={0}
       aria-label={columnDragAriaLabel}
-      onMouseDown={onMouseDown}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          onMouseDown();
-        }
-      }}
+      {...dragListeners}
     >
       <IconDragHorizontal className={cx(`${rootClassName}__drag-handle-icon`)} size="sm" />
     </div>

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,
+  };
 };