@dashforge/tw 0.8.0-beta → 0.9.0-beta

package/src/components/DataGrid/filters/ColumnFilters.test.tsx

@@ -0,0 +1,330 @@
+// @vitest-environment jsdom
+/**
+ * Unit tests for the per-column filter UI (`ColumnFilterTrigger`).
+ *
+ * Sprint 6 P4 — the filter UI shipped in 0.8.0-beta with only
+ * DataGrid-integration coverage. This file exercises each filter
+ * type (text / number / boolean / date) directly, including the
+ * apply / clear branches + edge cases.
+ */
+import * as React from 'react';
+import { describe, it, expect, afterEach, beforeAll, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { ColumnFilterTrigger } from './ColumnFilters.js';
+import type { TableFilterModel } from '../../Table/table.types.js';
+
+void React;
+afterEach(() => cleanup());
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+const EMPTY: TableFilterModel = [];
+
+describe('ColumnFilterTrigger — trigger button', () => {
+  it('renders a filter button', () => {
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Filter' })).not.toBeNull();
+  });
+
+  it('shows aria-pressed=false when no filter is active', () => {
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={() => {}}
+      />,
+    );
+    expect(
+      screen.getByRole('button', { name: 'Filter' }).getAttribute('aria-pressed'),
+    ).toBe('false');
+  });
+
+  it('shows aria-pressed=true when a filter is active on the field', () => {
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={[{ field: 'name', op: 'contains', value: 'x' }]}
+        onFilterChange={() => {}}
+      />,
+    );
+    expect(
+      screen.getByRole('button', { name: 'Filter' }).getAttribute('aria-pressed'),
+    ).toBe('true');
+  });
+
+  it('translates the trigger label via labels', () => {
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={() => {}}
+        labels={{ filterColumn: 'Filtra' }}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Filtra' })).not.toBeNull();
+  });
+
+  it('is disabled when disabled is set', () => {
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={() => {}}
+        disabled
+      />,
+    );
+    expect(
+      (screen.getByRole('button', { name: 'Filter' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+  });
+});
+
+describe('ColumnFilterTrigger — text filter', () => {
+  it('Apply commits a contains filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.change(screen.getByPlaceholderText('…'), {
+      target: { value: 'abc' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'name', op: 'contains', value: 'abc' },
+    ]);
+  });
+
+  it('Apply with an empty value commits a removal (null → no filter)', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={[{ field: 'name', op: 'contains', value: 'old' }]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.change(screen.getByDisplayValue('old'), {
+      target: { value: '' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([]);
+  });
+
+  it('Clear removes the filter for the field', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={[{ field: 'name', op: 'contains', value: 'x' }]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Clear' }));
+    expect(onFilterChange).toHaveBeenCalledWith([]);
+  });
+
+  it('Enter in the text input applies the filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const input = screen.getByPlaceholderText('…');
+    fireEvent.change(input, { target: { value: 'typed' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'name', op: 'contains', value: 'typed' },
+    ]);
+  });
+});
+
+describe('ColumnFilterTrigger — number range filter', () => {
+  it('Apply with min + max commits a between filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="age"
+        filterType="number"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const inputs = screen.getAllByRole('spinbutton');
+    fireEvent.change(inputs[0]!, { target: { value: '10' } });
+    fireEvent.change(inputs[1]!, { target: { value: '50' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'age', op: 'between', value: [10, 50] },
+    ]);
+  });
+
+  it('Apply with only a min commits an open-ended range', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="age"
+        filterType="number"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const inputs = screen.getAllByRole('spinbutton');
+    fireEvent.change(inputs[0]!, { target: { value: '18' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'age', op: 'between', value: [18, null] },
+    ]);
+  });
+
+  it('Apply with both ends empty removes the filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="age"
+        filterType="number"
+        filterModel={[{ field: 'age', op: 'between', value: [1, 2] }]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    // The two inputs are seeded from the current value — clear them.
+    const inputs = screen.getAllByRole('spinbutton');
+    fireEvent.change(inputs[0]!, { target: { value: '' } });
+    fireEvent.change(inputs[1]!, { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([]);
+  });
+});
+
+describe('ColumnFilterTrigger — boolean filter', () => {
+  it('Apply with True selected commits an equals=true filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="active"
+        filterType="boolean"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.click(screen.getByLabelText('True'));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'active', op: 'equals', value: true },
+    ]);
+  });
+
+  it('Apply with False selected commits an equals=false filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="active"
+        filterType="boolean"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.click(screen.getByLabelText('False'));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'active', op: 'equals', value: false },
+    ]);
+  });
+
+  it('Apply with All selected removes the filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="active"
+        filterType="boolean"
+        filterModel={[{ field: 'active', op: 'equals', value: true }]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.click(screen.getByLabelText('All'));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([]);
+  });
+});
+
+describe('ColumnFilterTrigger — date range filter', () => {
+  it('Apply with from + to commits a between filter (ISO strings)', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="joined"
+        filterType="date"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const dateInputs = document.querySelectorAll('input[type="date"]');
+    fireEvent.change(dateInputs[0]!, { target: { value: '2024-01-01' } });
+    fireEvent.change(dateInputs[1]!, { target: { value: '2024-12-31' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'joined', op: 'between', value: ['2024-01-01', '2024-12-31'] },
+    ]);
+  });
+
+  it('Apply with both date ends empty removes the filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="joined"
+        filterType="date"
+        filterModel={[
+          { field: 'joined', op: 'between', value: ['2024-01-01', null] },
+        ]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const dateInputs = document.querySelectorAll('input[type="date"]');
+    fireEvent.change(dateInputs[0]!, { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([]);
+  });
+});

package/src/components/DataGrid/filters/ColumnFilters.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react';
+import { useState, type ReactNode, type KeyboardEvent } from 'react';
 import { Popover } from '../../Popover/Popover.js';
 import { cn } from '../../../utils/cn.js';
 import type {
@@ -40,6 +40,22 @@ function setFilter(
   return [...rest, next];
 }
 
+/**
+ * Shared `onKeyDown` for filter inputs — pressing Enter commits the
+ * filter (equivalent to clicking Apply). Without this the user has to
+ * leave the keyboard and click the button, which reads as broken for
+ * a single-field text filter.
+ */
+function onEnterApply(
+  e: KeyboardEvent<HTMLInputElement>,
+  apply: () => void,
+): void {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    apply();
+  }
+}
+
 // ───── Filter labels (i18n) ─────
 
 export interface ColumnFilterLabels {
@@ -173,18 +189,22 @@ function TextFilter(props: {
     typeof current?.value === 'string' ? current.value : '',
   );
 
+  const apply = () =>
+    onCommit(value.trim() ? { field, op: 'contains', value } : null);
+
   return (
     <div className="flex flex-col gap-2 min-w-[200px]">
       <input
         type="text"
         value={value}
         onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => onEnterApply(e, apply)}
         placeholder="…"
         autoFocus
         className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
       />
       <FilterActions
-        onApply={() => onCommit(value.trim() ? { field, op: 'contains', value } : null)}
+        onApply={apply}
         onClear={() => {
           setValue('');
           onCommit(null);
@@ -236,6 +256,7 @@ function NumberRangeFilter(props: {
             type="number"
             value={min}
             onChange={(e) => setMin(e.target.value)}
+            onKeyDown={(e) => onEnterApply(e, apply)}
             autoFocus
             className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
           />
@@ -246,6 +267,7 @@ function NumberRangeFilter(props: {
             type="number"
             value={max}
             onChange={(e) => setMax(e.target.value)}
+            onKeyDown={(e) => onEnterApply(e, apply)}
             className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
           />
         </label>
@@ -357,6 +379,7 @@ function DateRangeFilter(props: {
             type="date"
             value={from}
             onChange={(e) => setFrom(e.target.value)}
+            onKeyDown={(e) => onEnterApply(e, apply)}
             autoFocus
             className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
           />
@@ -367,6 +390,7 @@ function DateRangeFilter(props: {
             type="date"
             value={to}
             onChange={(e) => setTo(e.target.value)}
+            onKeyDown={(e) => onEnterApply(e, apply)}
             className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
           />
         </label>

package/src/components/DataGrid/reorder/useColumnReorder.test.ts

@@ -1,6 +1,27 @@
-// @vitest-environment node
-import { describe, it, expect } from 'vitest';
-import { moveColumn } from './useColumnReorder.js';
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { moveColumn, useColumnReorder } from './useColumnReorder.js';
+
+/** Minimal fake of the bits of a drag event the hook reads. */
+function fakeDragStart() {
+  return {
+    dataTransfer: { effectAllowed: '', setData: vi.fn() },
+  } as unknown as React.DragEvent<HTMLElement>;
+}
+function fakeDragOver(clientX: number) {
+  return {
+    preventDefault: vi.fn(),
+    dataTransfer: { dropEffect: '' },
+    currentTarget: {
+      getBoundingClientRect: () => ({ left: 0, width: 100 }),
+    },
+    clientX,
+  } as unknown as React.DragEvent<HTMLElement>;
+}
+function fakeDrop() {
+  return { preventDefault: vi.fn() } as unknown as React.DragEvent<HTMLElement>;
+}
 
 describe('moveColumn', () => {
   const order = ['a', 'b', 'c', 'd'];
@@ -36,3 +57,74 @@ describe('moveColumn', () => {
     expect(result.sort()).toEqual(['a', 'b', 'c', 'd']);
   });
 });
+
+describe('useColumnReorder — drag handlers', () => {
+  const order = ['a', 'b', 'c', 'd'];
+
+  it('dragStart records the source field + dragging state', () => {
+    const { result } = renderHook(() =>
+      useColumnReorder({ order, onChange: vi.fn() }),
+    );
+    const e = fakeDragStart();
+    act(() => result.current.dragStart('a')(e));
+    expect(result.current.draggingField).toBe('a');
+    expect(e.dataTransfer.setData).toHaveBeenCalledWith('text/plain', 'a');
+  });
+
+  it('dragOver on the RIGHT half marks a right-side drop target', () => {
+    const { result } = renderHook(() =>
+      useColumnReorder({ order, onChange: vi.fn() }),
+    );
+    act(() => result.current.dragStart('a')(fakeDragStart()));
+    // clientX 80 of a 0..100 cell → past the midpoint → 'right'.
+    act(() => result.current.dragOver('c')(fakeDragOver(80)));
+    expect(result.current.dropTarget).toEqual({ field: 'c', side: 'right' });
+  });
+
+  it('dragOver on the LEFT half marks a left-side drop target', () => {
+    const { result } = renderHook(() =>
+      useColumnReorder({ order, onChange: vi.fn() }),
+    );
+    act(() => result.current.dragStart('a')(fakeDragStart()));
+    act(() => result.current.dragOver('c')(fakeDragOver(20)));
+    expect(result.current.dropTarget).toEqual({ field: 'c', side: 'left' });
+  });
+
+  it('dragOver onto the source column itself is a no-op', () => {
+    const { result } = renderHook(() =>
+      useColumnReorder({ order, onChange: vi.fn() }),
+    );
+    act(() => result.current.dragStart('a')(fakeDragStart()));
+    act(() => result.current.dragOver('a')(fakeDragOver(80)));
+    expect(result.current.dropTarget).toBeNull();
+  });
+
+  it('drop commits the reordered list via onChange', () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() => useColumnReorder({ order, onChange }));
+    act(() => result.current.dragStart('a')(fakeDragStart()));
+    act(() => result.current.dragOver('c')(fakeDragOver(80)));
+    act(() => result.current.drop('c')(fakeDrop()));
+    // 'a' dropped on the RIGHT of 'c' → ['b','c','a','d'].
+    expect(onChange).toHaveBeenCalledWith(['b', 'c', 'a', 'd']);
+  });
+
+  it('drop on the source column does not call onChange', () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() => useColumnReorder({ order, onChange }));
+    act(() => result.current.dragStart('a')(fakeDragStart()));
+    act(() => result.current.drop('a')(fakeDrop()));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('dragEnd clears the dragging + drop-target state', () => {
+    const { result } = renderHook(() =>
+      useColumnReorder({ order, onChange: vi.fn() }),
+    );
+    act(() => result.current.dragStart('a')(fakeDragStart()));
+    act(() => result.current.dragOver('c')(fakeDragOver(80)));
+    act(() => result.current.dragEnd());
+    expect(result.current.draggingField).toBeNull();
+    expect(result.current.dropTarget).toBeNull();
+  });
+});

package/src/components/DataGrid/resize/useColumnResize.test.ts

@@ -0,0 +1,144 @@
+// @vitest-environment jsdom
+/**
+ * Unit tests for `useColumnResize` — the pointer-drag + keyboard
+ * column-resize hook (Sprint 4.2-bis, keyboard `nudge` added in
+ * Sprint 6 P2). Sprint 6 P4 — direct coverage of the clamp logic
+ * and the drag commit path.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useColumnResize } from './useColumnResize.js';
+
+describe('useColumnResize — nudge (keyboard path)', () => {
+  it('commits currentWidth + delta', () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useColumnResize({ widths: { a: 100 }, onChange }),
+    );
+    result.current.nudge('a', 100, 16, 40, 400);
+    expect(onChange).toHaveBeenCalledWith({ a: 116 });
+  });
+
+  it('clamps to the effective minimum', () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useColumnResize({ widths: { a: 50 }, onChange }),
+    );
+    // currentWidth 50, delta -64 → 14, clamped up to min 40.
+    result.current.nudge('a', 50, -64, 40, 400);
+    expect(onChange).toHaveBeenCalledWith({ a: 40 });
+  });
+
+  it('clamps to the effective maximum', () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useColumnResize({ widths: { a: 380 }, onChange }),
+    );
+    // currentWidth 380, delta +64 → 444, clamped down to max 400.
+    result.current.nudge('a', 380, 64, 40, 400);
+    expect(onChange).toHaveBeenCalledWith({ a: 400 });
+  });
+
+  it('honors the hook-level minWidth/maxWidth floor/ceiling', () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useColumnResize({
+        widths: {},
+        onChange,
+        minWidth: 80,
+        maxWidth: 200,
+      }),
+    );
+    // clampMin 40 < hook min 80 → effective min is 80.
+    result.current.nudge('a', 100, -64, 40, 1000);
+    expect(onChange).toHaveBeenCalledWith({ a: 80 });
+  });
+
+  it('preserves the other columns in the width map', () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useColumnResize({ widths: { a: 100, b: 200 }, onChange }),
+    );
+    result.current.nudge('a', 100, 16, 40, 400);
+    expect(onChange).toHaveBeenCalledWith({ a: 116, b: 200 });
+  });
+});
+
+describe('useColumnResize — startResize (pointer-drag path)', () => {
+  it('returns an event handler from the factory', () => {
+    const { result } = renderHook(() =>
+      useColumnResize({ widths: {}, onChange: () => {} }),
+    );
+    const handler = result.current.startResize('a', 100, 40, 400);
+    expect(typeof handler).toBe('function');
+  });
+
+  it('a pointer drag commits a clamped new width via pointermove', () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useColumnResize({ widths: { a: 100 }, onChange }),
+    );
+    const el = document.createElement('span');
+    document.body.appendChild(el);
+
+    // Synthetic pointerdown — shape mirrors React's PointerEvent.
+    const downEvent = {
+      pointerType: 'mouse',
+      button: 0,
+      clientX: 500,
+      pointerId: 1,
+      currentTarget: el,
+      preventDefault: () => {},
+      stopPropagation: () => {},
+    } as unknown as React.PointerEvent<HTMLElement>;
+
+    result.current.startResize('a', 100, 40, 400)(downEvent);
+
+    // Drag 30px to the right → 100 + 30 = 130.
+    const move = new Event('pointermove') as Event & { clientX: number };
+    move.clientX = 530;
+    el.dispatchEvent(move);
+    expect(onChange).toHaveBeenLastCalledWith({ a: 130 });
+
+    // Drag far left → clamps to min 40.
+    const move2 = new Event('pointermove') as Event & { clientX: number };
+    move2.clientX = 0;
+    el.dispatchEvent(move2);
+    expect(onChange).toHaveBeenLastCalledWith({ a: 40 });
+
+    // pointerup tears the listeners down — a later move is a no-op.
+    const up = new Event('pointerup') as Event & { pointerId: number };
+    up.pointerId = 1;
+    el.dispatchEvent(up);
+    onChange.mockClear();
+    const move3 = new Event('pointermove') as Event & { clientX: number };
+    move3.clientX = 999;
+    el.dispatchEvent(move3);
+    expect(onChange).not.toHaveBeenCalled();
+
+    document.body.removeChild(el);
+  });
+
+  it('ignores a non-primary mouse button', () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useColumnResize({ widths: {}, onChange }),
+    );
+    const el = document.createElement('span');
+    const downEvent = {
+      pointerType: 'mouse',
+      button: 2, // right-click
+      clientX: 0,
+      pointerId: 1,
+      currentTarget: el,
+      preventDefault: () => {},
+      stopPropagation: () => {},
+    } as unknown as React.PointerEvent<HTMLElement>;
+    result.current.startResize('a', 100, 40, 400)(downEvent);
+    const move = new Event('pointermove') as Event & { clientX: number };
+    move.clientX = 200;
+    el.dispatchEvent(move);
+    // No listener was attached → no commit.
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});