@dashforge/tw 1.0.0 → 1.1.1

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

@@ -1,144 +0,0 @@
-import { useCallback, useRef, useState, type DragEvent } from 'react';
-
-/**
- * Native HTML5 drag-and-drop reorder for DataGrid column headers.
- *
- * Zero new runtime deps — uses the browser's built-in drag events.
- * The hook returns handler factories you wire onto each `<th>` plus
- * a `dropTarget` state used to render the visual indicator (a left
- * or right border on the hovered column).
- *
- *  - `dragStart(field)` → onDragStart; stashes source field in a ref
- *    + sets `dataTransfer.effectAllowed = 'move'`.
- *  - `dragOver(field)` → onDragOver; preventDefault + computes
- *    whether the cursor is over the LEFT or RIGHT half of the
- *    target → updates dropTarget so the indicator renders.
- *  - `drop(field)` → onDrop; computes the new order array via
- *    `moveColumn(source, target, side)` and commits it.
- *  - `dragEnd()` → onDragEnd; clears state.
- *
- * Reorder math: when dropping `source` onto the LEFT half of
- * `target`, the source is inserted BEFORE the target's position
- * in the order list. RIGHT half → AFTER.
- */
-
-export interface UseColumnReorderArgs {
-  /** The current order. */
-  order: string[];
-  /** Commit a new order. */
-  onChange: (next: string[]) => void;
-}
-
-export interface DropTarget {
-  field: string;
-  side: 'left' | 'right';
-}
-
-export interface ColumnReorderHandlers {
-  /** Current drop target (used by the renderer to show the indicator). */
-  dropTarget: DropTarget | null;
-  /** Field currently being dragged (used to dim the source header). */
-  draggingField: string | null;
-  dragStart: (field: string) => (e: DragEvent<HTMLElement>) => void;
-  dragOver: (field: string) => (e: DragEvent<HTMLElement>) => void;
-  drop: (field: string) => (e: DragEvent<HTMLElement>) => void;
-  dragEnd: () => void;
-}
-
-export function useColumnReorder(
-  args: UseColumnReorderArgs,
-): ColumnReorderHandlers {
-  const { order, onChange } = args;
-  const sourceRef = useRef<string | null>(null);
-  const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
-  const [draggingField, setDraggingField] = useState<string | null>(null);
-
-  const dragStart = useCallback(
-    (field: string) => (e: DragEvent<HTMLElement>) => {
-      sourceRef.current = field;
-      setDraggingField(field);
-      try {
-        e.dataTransfer.effectAllowed = 'move';
-        // Some browsers refuse to start a drag if no data is set.
-        e.dataTransfer.setData('text/plain', field);
-      } catch {
-        /* noop — jsdom doesn't implement dataTransfer fully. */
-      }
-    },
-    [],
-  );
-
-  const dragOver = useCallback(
-    (field: string) => (e: DragEvent<HTMLElement>) => {
-      if (sourceRef.current == null) return;
-      if (field === sourceRef.current) return;
-      e.preventDefault();
-      e.dataTransfer.dropEffect = 'move';
-      // Determine LEFT vs RIGHT half of the target.
-      const rect = e.currentTarget.getBoundingClientRect();
-      const midpoint = rect.left + rect.width / 2;
-      const side: 'left' | 'right' = e.clientX < midpoint ? 'left' : 'right';
-      setDropTarget((prev) =>
-        prev && prev.field === field && prev.side === side
-          ? prev
-          : { field, side },
-      );
-    },
-    [],
-  );
-
-  const drop = useCallback(
-    (field: string) => (e: DragEvent<HTMLElement>) => {
-      e.preventDefault();
-      const source = sourceRef.current;
-      sourceRef.current = null;
-      setDraggingField(null);
-      const target = dropTarget;
-      setDropTarget(null);
-      if (!source || source === field) return;
-      const side = target?.field === field ? target.side : 'right';
-      const next = moveColumn(order, source, field, side);
-      if (!arraysEqual(next, order)) onChange(next);
-    },
-    [order, onChange, dropTarget],
-  );
-
-  const dragEnd = useCallback(() => {
-    sourceRef.current = null;
-    setDraggingField(null);
-    setDropTarget(null);
-  }, []);
-
-  return { dropTarget, draggingField, dragStart, dragOver, drop, dragEnd };
-}
-
-/**
- * Move `source` next to `target` in the `order` list.
- * `side='left'` inserts before; `side='right'` inserts after.
- * Exposed for unit testing.
- */
-export function moveColumn(
-  order: string[],
-  source: string,
-  target: string,
-  side: 'left' | 'right',
-): string[] {
-  const withoutSource = order.filter((f) => f !== source);
-  const targetIndex = withoutSource.indexOf(target);
-  if (targetIndex === -1) return order;
-  const insertAt = side === 'left' ? targetIndex : targetIndex + 1;
-  return [
-    ...withoutSource.slice(0, insertAt),
-    source,
-    ...withoutSource.slice(insertAt),
-  ];
-}
-
-function arraysEqual(a: string[], b: string[]): boolean {
-  if (a === b) return true;
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-}

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

@@ -1,144 +0,0 @@
-// @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();
-  });
-});

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

@@ -1,135 +0,0 @@
-import { useCallback, useRef, type PointerEvent as RPointerEvent } from 'react';
-
-/**
- * Native column-resize behavior for DataGrid (and Table later if
- * promoted to `_shared`).
- *
- * The returned `startResize` is wired to a `pointerdown` handler on a
- * thin grabber positioned at the right edge of a `<th>`. We capture
- * the pointer on the target element so `pointermove` / `pointerup`
- * keep flowing even if the cursor leaves the grabber.
- *
- * Why native pointer events vs a drag library:
- *  - Zero new runtime deps (sprint constraint)
- *  - Pointer events normalize mouse/touch/pen out of the box
- *  - Pointer capture means we don't have to track the global
- *    `mousemove` / `mouseup` — the browser routes events to our
- *    listener until release.
- */
-
-export interface UseColumnResizeArgs {
-  /** Current column widths (Record<field, px>). */
-  widths: Record<string, number>;
-  /** Commit a new width map. */
-  onChange: (next: Record<string, number>) => void;
-  /** Hard floor for any column (px). @default 40 */
-  minWidth?: number;
-  /** Hard ceiling for any column (px). @default 1200 */
-  maxWidth?: number;
-}
-
-export interface ColumnResizeHandlers {
-  startResize: (
-    field: string,
-    startWidth: number,
-    clampMin: number,
-    clampMax: number,
-  ) => (e: RPointerEvent<HTMLElement>) => void;
-  /**
-   * Commit a single clamped width delta — the keyboard-resize path.
-   * Wired to ArrowLeft/ArrowRight on the focused resize handle so the
-   * feature is reachable without a pointer (WCAG 2.1 — keyboard
-   * operability). Same clamping as the drag path.
-   */
-  nudge: (
-    field: string,
-    currentWidth: number,
-    delta: number,
-    clampMin: number,
-    clampMax: number,
-  ) => void;
-}
-
-export function useColumnResize(args: UseColumnResizeArgs): ColumnResizeHandlers {
-  const { widths, onChange, minWidth = 40, maxWidth = 1200 } = args;
-
-  // We need the LATEST widths inside the pointermove closure. Stick
-  // them in a ref so the closure captured at pointerdown stays valid
-  // for the duration of the drag.
-  const widthsRef = useRef(widths);
-  widthsRef.current = widths;
-
-  const startResize = useCallback(
-    (
-      field: string,
-      startWidth: number,
-      clampMin: number,
-      clampMax: number,
-    ) => {
-      return (e: RPointerEvent<HTMLElement>) => {
-        // Only respond to the primary mouse button (or touch / pen).
-        if (e.pointerType === 'mouse' && e.button !== 0) return;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const startX = e.clientX;
-        const target = e.currentTarget;
-        try {
-          target.setPointerCapture(e.pointerId);
-        } catch {
-          // jsdom or older browsers — fine to fall back to global listeners.
-        }
-
-        const effectiveMin = Math.max(minWidth, clampMin);
-        const effectiveMax = Math.min(maxWidth, clampMax);
-
-        const handleMove = (ev: PointerEvent) => {
-          const delta = ev.clientX - startX;
-          const next = clamp(startWidth + delta, effectiveMin, effectiveMax);
-          onChange({ ...widthsRef.current, [field]: next });
-        };
-
-        const handleEnd = (ev: PointerEvent) => {
-          try {
-            target.releasePointerCapture(ev.pointerId);
-          } catch {
-            /* noop */
-          }
-          target.removeEventListener('pointermove', handleMove);
-          target.removeEventListener('pointerup', handleEnd);
-          target.removeEventListener('pointercancel', handleEnd);
-        };
-
-        target.addEventListener('pointermove', handleMove);
-        target.addEventListener('pointerup', handleEnd);
-        target.addEventListener('pointercancel', handleEnd);
-      };
-    },
-    [onChange, minWidth, maxWidth],
-  );
-
-  const nudge = useCallback(
-    (
-      field: string,
-      currentWidth: number,
-      delta: number,
-      clampMin: number,
-      clampMax: number,
-    ) => {
-      const effectiveMin = Math.max(minWidth, clampMin);
-      const effectiveMax = Math.min(maxWidth, clampMax);
-      const next = clamp(currentWidth + delta, effectiveMin, effectiveMax);
-      onChange({ ...widthsRef.current, [field]: next });
-    },
-    [onChange, minWidth, maxWidth],
-  );
-
-  return { startResize, nudge };
-}
-
-function clamp(n: number, min: number, max: number): number {
-  if (n < min) return min;
-  if (n > max) return max;
-  return n;
-}

package/src/components/DataGrid/visibility/ColumnVisibilityMenu.tsx

@@ -1,186 +0,0 @@
-import { useState, type ReactNode } from 'react';
-import { Popover } from '../../Popover/Popover.js';
-import { cn } from '../../../utils/cn.js';
-import type { TableColumn } from '../../Table/table.types.js';
-
-/**
- * Column visibility menu for DataGrid.
- *
- * Renders a toolbar button (the trigger) that opens a `<Popover>`
- * with one checkbox per `hideable` column. Auto-commits on every
- * toggle — there's no draft / commit step. Outside-click and Esc
- * close the popover (Radix-managed).
- *
- * UX rationale for Popover-over-Dialog:
- *  - Lightweight, non-modal: the user can keep referring to the grid
- *    while picking columns. A modal Dialog would interrupt the flow.
- *  - Auto-commit reads as a "settings panel" rather than a
- *    "configuration form" — matches AG-Grid / MUI DataGrid v6 /
- *    TanStack examples.
- *  - No focus trap on the rest of the page; the user can scroll the
- *    grid or click the column resize handles without dismissing the
- *    panel first.
- *
- * Columns with `hideable: false` are NEVER shown in the menu —
- * those are considered structurally required (e.g. an ID column).
- *
- * RBAC-hidden columns (`access.onUnauthorized === 'hide'`) are also
- * excluded — they're already removed from `visibleCols` upstream.
- */
-
-export interface ColumnVisibilityLabels {
-  columnsButton?: string;
-  columnsTitle?: string;
-  /**
-   * Accessible label for the tri-state master checkbox that
-   * shows/hides every hideable column at once. Not shown as visible
-   * text — surfaced to assistive tech via `aria-label`.
-   */
-  columnsToggleAll?: string;
-}
-
-const DEFAULT_VISIBILITY_LABELS: Required<ColumnVisibilityLabels> = {
-  columnsButton: 'Columns',
-  columnsTitle: 'Toggle columns',
-  columnsToggleAll: 'Toggle all columns',
-};
-
-export interface ColumnVisibilityTriggerProps<T extends object> {
-  cols: TableColumn<T>[];
-  hiddenColumns: string[];
-  onChange: (next: string[]) => void;
-  disabled?: boolean;
-  labels?: ColumnVisibilityLabels;
-}
-
-export function ColumnVisibilityTrigger<T extends object>(
-  props: ColumnVisibilityTriggerProps<T>,
-) {
-  const { cols, hiddenColumns, onChange, disabled, labels: labelsProp } = props;
-  const labels = { ...DEFAULT_VISIBILITY_LABELS, ...labelsProp };
-  const [open, setOpen] = useState(false);
-
-  // Hideable cols are the only ones the user can toggle. `hideable`
-  // defaults to `true` — a column is hideable unless explicitly opted
-  // out with `hideable: false` (structurally required column).
-  const hideableCols = cols.filter((c) => c.hideable !== false);
-
-  const toggle = (field: string) => {
-    onChange(
-      hiddenColumns.includes(field)
-        ? hiddenColumns.filter((f) => f !== field)
-        : [...hiddenColumns, field],
-    );
-  };
-
-  // Tri-state master: checked = every hideable column visible,
-  // unchecked = every one hidden, indeterminate = mixed.
-  const allVisible = hideableCols.every(
-    (c) => !hiddenColumns.includes(c.field as string),
-  );
-  const allHidden =
-    hideableCols.length > 0 &&
-    hideableCols.every((c) => hiddenColumns.includes(c.field as string));
-  const someHidden = !allVisible && !allHidden;
-
-  // Standard select-all semantics: when everything is visible the
-  // master hides all; otherwise it shows all.
-  const toggleAll = () => {
-    onChange(allVisible ? hideableCols.map((c) => c.field as string) : []);
-  };
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={setOpen}
-      side="bottom"
-      align="end"
-      content={
-        <div className="flex flex-col gap-1 min-w-[220px]">
-          {/*
-            Header row — the tri-state master checkbox + the title.
-            The master replaces the old "Show all · Hide all" text
-            links: one control, no extra copy, consistent with the
-            DataGrid row select-all checkbox. The title is a heading
-            (not part of the checkbox label) and stays consumer-
-            customizable via `labels.columnsTitle`.
-          */}
-          <div className="flex items-center gap-2 px-1 pb-2 mb-1 border-b border-neutral-200">
-            <input
-              type="checkbox"
-              aria-label={labels.columnsToggleAll}
-              checked={allVisible}
-              ref={(el) => {
-                if (el) el.indeterminate = someHidden;
-              }}
-              onChange={toggleAll}
-              className="cursor-pointer"
-            />
-            <span className="text-xs font-semibold text-neutral-700 uppercase tracking-wide">
-              {labels.columnsTitle}
-            </span>
-          </div>
-          <ul className="flex flex-col gap-0.5 max-h-72 overflow-auto">
-            {hideableCols.map((col) => {
-              const field = col.field as string;
-              const hidden = hiddenColumns.includes(field);
-              const header =
-                typeof col.header === 'function' ? col.header() : col.header;
-              return (
-                <li key={field}>
-                  <label className="flex items-center gap-2 cursor-pointer py-1 px-1 rounded hover:bg-neutral-100">
-                    <input
-                      type="checkbox"
-                      checked={!hidden}
-                      onChange={() => toggle(field)}
-                      className="cursor-pointer"
-                    />
-                    <span className="text-sm text-neutral-900">{header}</span>
-                  </label>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      }
-    >
-      <button
-        type="button"
-        disabled={disabled}
-        className={cn(
-          'inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md',
-          'text-sm text-neutral-700 hover:text-neutral-900',
-          'border border-neutral-300 bg-neutral-50 hover:bg-neutral-100',
-          'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
-          'transition-colors motion-reduce:transition-none',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-        )}
-      >
-        <ColumnsIcon />
-        <span>{labels.columnsButton}</span>
-      </button>
-    </Popover>
-  );
-}
-
-// ───── Icon ─────
-
-function ColumnsIcon(): ReactNode {
-  return (
-    <svg
-      width="0.875em"
-      height="0.875em"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <rect x="2" y="3" width="3.5" height="10" rx="0.5" />
-      <rect x="6.25" y="3" width="3.5" height="10" rx="0.5" />
-      <rect x="10.5" y="3" width="3.5" height="10" rx="0.5" />
-    </svg>
-  );
-}

package/src/components/DatePicker/DatePicker.test.tsx

@@ -1,76 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi, beforeAll } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import { DatePicker } from './DatePicker.js';
-
-beforeAll(() => {
-  // Radix Popover (Floating UI) needs ResizeObserver — jsdom lacks it.
-  if (!('ResizeObserver' in globalThis)) {
-    class ResizeObserverStub {
-      observe(): void {
-        /* no-op */
-      }
-      unobserve(): void {
-        /* no-op */
-      }
-      disconnect(): void {
-        /* no-op */
-      }
-    }
-    (globalThis as { ResizeObserver?: unknown }).ResizeObserver =
-      ResizeObserverStub;
-  }
-});
-
-describe('DatePicker', () => {
-  it('renders a labelled trigger with the placeholder', () => {
-    render(
-      <DatePicker name="birthday" label="Birthday" placeholder="Pick one" />,
-    );
-    expect(screen.queryByText('Birthday')).not.toBeNull();
-    expect(screen.getByRole('button').textContent).toContain('Pick one');
-  });
-
-  it('shows a localized controlled value', () => {
-    render(<DatePicker name="d" value="2026-05-20" />);
-    expect(screen.getByRole('button').textContent).toContain('May 20, 2026');
-  });
-
-  it('opens and toggles the calendar popover from the trigger', () => {
-    render(<DatePicker name="d" defaultValue="2026-05-20" />);
-    const trigger = screen.getByRole('button');
-    expect(screen.queryByRole('dialog')).toBeNull();
-    fireEvent.click(trigger);
-    expect(screen.queryByRole('dialog')).not.toBeNull();
-    fireEvent.click(trigger);
-    expect(screen.queryByRole('dialog')).toBeNull();
-  });
-
-  it('selects a date from the popover, updates the trigger and closes', () => {
-    const onChange = vi.fn();
-    render(
-      <DatePicker name="d" defaultValue="2026-05-20" onChange={onChange} />,
-    );
-    fireEvent.click(screen.getByRole('button'));
-    fireEvent.click(screen.getByRole('button', { name: /May 15, 2026/ }));
-    expect(onChange).toHaveBeenCalledWith('2026-05-15');
-    expect(screen.queryByRole('dialog')).toBeNull();
-    expect(screen.getByRole('button').textContent).toContain('May 15, 2026');
-  });
-
-  it('keeps a controlled value fixed but still reports the change', () => {
-    const onChange = vi.fn();
-    render(<DatePicker name="d" value="2026-05-20" onChange={onChange} />);
-    fireEvent.click(screen.getByRole('button'));
-    fireEvent.click(screen.getByRole('button', { name: /May 15, 2026/ }));
-    expect(onChange).toHaveBeenCalledWith('2026-05-15');
-    expect(screen.getByRole('button').textContent).toContain('May 20, 2026');
-  });
-
-  it('does not open the popover when disabled', () => {
-    render(<DatePicker name="d" disabled />);
-    fireEvent.click(screen.getByRole('button'));
-    expect(screen.queryByRole('dialog')).toBeNull();
-  });
-});