@dashforge/tw 0.8.1-beta → 0.9.0-beta

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();
+  });
+});

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

@@ -35,6 +35,19 @@ export interface ColumnResizeHandlers {
     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 {
@@ -96,7 +109,23 @@ export function useColumnResize(args: UseColumnResizeArgs): ColumnResizeHandlers
     [onChange, minWidth, maxWidth],
   );
 
-  return { startResize };
+  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 {

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

@@ -31,15 +31,18 @@ import type { TableColumn } from '../../Table/table.types.js';
 export interface ColumnVisibilityLabels {
   columnsButton?: string;
   columnsTitle?: string;
-  columnsShowAll?: string;
-  columnsHideAll?: 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',
-  columnsShowAll: 'Show all',
-  columnsHideAll: 'Hide all',
+  columnsToggleAll: 'Toggle all columns',
 };
 
 export interface ColumnVisibilityTriggerProps<T extends object> {
@@ -70,8 +73,21 @@ export function ColumnVisibilityTrigger<T extends object>(
     );
   };
 
-  const showAll = () => onChange([]);
-  const hideAll = () => onChange(hideableCols.map((c) => c.field as string));
+  // 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
@@ -80,28 +96,29 @@ export function ColumnVisibilityTrigger<T extends object>(
       side="bottom"
       align="end"
       content={
-        <div className="flex flex-col gap-2 min-w-[220px]">
-          <div className="flex items-center justify-between pb-2 border-b border-neutral-200">
+        <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 className="flex items-center gap-2">
-              <button
-                type="button"
-                onClick={showAll}
-                className="text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline"
-              >
-                {labels.columnsShowAll}
-              </button>
-              <span className="text-neutral-300" aria-hidden="true">·</span>
-              <button
-                type="button"
-                onClick={hideAll}
-                className="text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline"
-              >
-                {labels.columnsHideAll}
-              </button>
-            </div>
           </div>
           <ul className="flex flex-col gap-0.5 max-h-72 overflow-auto">
             {hideableCols.map((col) => {

package/src/components/Dialog/Dialog.tsx

@@ -42,6 +42,15 @@ export function Dialog(props: DialogProps) {
         />
         <RadixDialog.Content
           className={cn(v.content(), sx, slotProps?.content?.className)}
+          // When no `description` is supplied we render no
+          // `<RadixDialog.Description>`. Radix then logs a dev warning
+          // unless the Content explicitly opts out via
+          // `aria-describedby={undefined}` — the documented escape
+          // hatch for description-less dialogs. Spread it ONLY in that
+          // case so a present description still auto-links its id.
+          {...(description == null
+            ? { 'aria-describedby': undefined }
+            : {})}
           onPointerDownOutside={(event) => {
             if (disableBackdropClose) event.preventDefault();
           }}

package/src/components/Table/Table.perf.test.tsx

@@ -0,0 +1,81 @@
+// @vitest-environment jsdom
+/**
+ * Performance guardrails for `<Table>` (non-virtualized).
+ *
+ * Table renders EVERY row in the DOM — its design ceiling is ~500
+ * rows (past that, the consumer should switch to `<DataGrid>`). These
+ * tests pin the mount cost at that ceiling so a regression in the
+ * render path (e.g. an accidental O(n²) in the sort / search pipeline)
+ * surfaces in CI.
+ *
+ * Budgets are deliberately generous — they catch order-of-magnitude
+ * regressions under a cold workspace-wide test run, not micro-jitter.
+ */
+import * as React from 'react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/react';
+import { Table } from './Table.js';
+import type { TableColumn } from './table.types.js';
+
+void React;
+afterEach(() => cleanup());
+
+interface Row {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+  city: string;
+}
+
+const COLS: TableColumn<Row>[] = [
+  { field: 'name', header: 'Name', sortable: true, searchable: true },
+  { field: 'email', header: 'Email', searchable: true },
+  { field: 'age', header: 'Age', sortable: true },
+  { field: 'city', header: 'City' },
+];
+
+function makeRows(n: number): Row[] {
+  const cities = ['Roma', 'Milano', 'Berlin'];
+  return Array.from({ length: n }).map((_, i) => ({
+    id: `r${i}`,
+    name: `User ${i}`,
+    email: `user${i}@example.com`,
+    age: 20 + (i % 50),
+    city: cities[i % 3] as string,
+  }));
+}
+
+describe('<Table> performance', () => {
+  it("mounts 500 rows (Table's row-count ceiling) under 800ms", () => {
+    const rows = makeRows(500);
+    const t0 = performance.now();
+    render(<Table rows={rows} cols={COLS} getRowId={(r) => r.id} />);
+    const t1 = performance.now();
+    expect(t1 - t0).toBeLessThan(800);
+  });
+
+  it('renders every row in the DOM (non-virtualized contract)', () => {
+    const rows = makeRows(500);
+    const { container } = render(
+      <Table rows={rows} cols={COLS} getRowId={(r) => r.id} />,
+    );
+    // Non-virtualized: all 500 data rows are mounted.
+    expect(container.querySelectorAll('tbody tr').length).toBe(500);
+  });
+
+  it('applies a default sort over 500 rows within the mount budget', () => {
+    const rows = makeRows(500);
+    const t0 = performance.now();
+    render(
+      <Table
+        rows={rows}
+        cols={COLS}
+        getRowId={(r) => r.id}
+        defaultSortModel={[{ field: 'name', direction: 'asc' }]}
+      />,
+    );
+    const t1 = performance.now();
+    expect(t1 - t0).toBeLessThan(800);
+  });
+});

package/src/components/Table/Table.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import * as React from 'react';
-import { describe, it, expect, afterEach, beforeAll } from 'vitest';
+import { describe, it, expect, afterEach, beforeAll, vi } from 'vitest';
 import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import { Table } from './Table.js';
 import type { TableColumn } from './table.types.js';
@@ -601,3 +601,74 @@ describe('Table — i18n', () => {
     expect(screen.queryByLabelText('Seleziona tutte')).not.toBeNull();
   });
 });
+
+describe('Table — Sprint 6 P2 refinements', () => {
+  // ───── D7: no-results vs no-data empty state ─────
+
+  it('shows the noData message when the dataset is genuinely empty', () => {
+    render(<Table rows={[]} cols={baseCols} getRowId={getRowId} />);
+    expect(screen.queryByText('No data')).not.toBeNull();
+  });
+
+  it('shows the noResults message when a search excludes every row', () => {
+    render(
+      <Table
+        rows={baseRows}
+        cols={baseCols}
+        getRowId={getRowId}
+        enableSearch
+        searchQuery="zzz-no-match"
+        searchDebounceMs={0}
+      />,
+    );
+    expect(screen.queryByText('No matching results')).not.toBeNull();
+    expect(screen.queryByText('No data')).toBeNull();
+  });
+
+  it('shows the noResults message when a filter excludes every row', () => {
+    render(
+      <Table
+        rows={baseRows}
+        cols={baseCols}
+        getRowId={getRowId}
+        filterModel={[{ field: 'name', op: 'contains', value: 'zzz-no-match' }]}
+      />,
+    );
+    expect(screen.queryByText('No matching results')).not.toBeNull();
+  });
+
+  // ───── T1: dev-warn when getRowId omitted + identity-sensitive feature ─────
+
+  it('warns in dev when getRowId is omitted and a sortable column exists', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    // baseCols has sortable columns; no getRowId passed.
+    render(<Table rows={baseRows} cols={baseCols} />);
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('`getRowId` is not set'),
+    );
+    warn.mockRestore();
+  });
+
+  it('does NOT warn when getRowId is provided', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(<Table rows={baseRows} cols={baseCols} getRowId={getRowId} />);
+    expect(warn).not.toHaveBeenCalledWith(
+      expect.stringContaining('`getRowId` is not set'),
+    );
+    warn.mockRestore();
+  });
+
+  it('does NOT warn when getRowId is omitted but no identity-sensitive feature is active', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    // Plain columns: not sortable, not searchable, no selection/expansion.
+    const plainCols: TableColumn<User>[] = [
+      { field: 'name', header: 'Name' },
+      { field: 'email', header: 'Email' },
+    ];
+    render(<Table rows={baseRows} cols={plainCols} />);
+    expect(warn).not.toHaveBeenCalledWith(
+      expect.stringContaining('`getRowId` is not set'),
+    );
+    warn.mockRestore();
+  });
+});

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode, type MouseEvent } from 'react';
+import { useMemo, useEffect, type ReactNode, type MouseEvent } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useAccessState } from '../../hooks/useAccessState.js';
 import { Skeleton } from '../Skeleton/Skeleton.js';
@@ -27,6 +27,7 @@ import type {
 const DEFAULT_LABELS: Required<TableLabels> = {
   searchPlaceholder: 'Search...',
   noData: 'No data',
+  noResults: 'No matching results',
   loading: 'Loading…',
   ariaSortNone: 'Not sorted. Click to sort ascending.',
   ariaSortAscending: 'Sorted ascending. Click to sort descending.',
@@ -53,8 +54,7 @@ const DEFAULT_LABELS: Required<TableLabels> = {
   densitySpacious: 'Spacious',
   columnsButton: 'Columns',
   columnsTitle: 'Toggle columns',
-  columnsShowAll: 'Show all',
-  columnsHideAll: 'Hide all',
+  columnsToggleAll: 'Toggle all columns',
 };
 
 const DEFAULT_GET_ROW_ID = <T extends object>(_row: T, index: number) => String(index);
@@ -132,6 +132,31 @@ export function Table<T extends object>(props: TableProps<T>) {
   const labels = { ...DEFAULT_LABELS, ...labelsProp };
   const tableAccessState = useAccessState(tableAccess);
 
+  // Dev-only guard: `getRowId` is optional (positional-index fallback)
+  // but that fallback breaks row identity once rows reorder (sort) or
+  // change presence (search / filter) — selection + expansion state
+  // then jump to the wrong rows. Warn when it's omitted AND a feature
+  // that relies on stable identity is active. Stripped in production.
+  const getRowIdProvided = props.getRowId !== undefined;
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    if (getRowIdProvided) return;
+    const identityMatters =
+      rowSelection !== 'none' ||
+      expandable != null ||
+      enableSearch ||
+      cols.some((c) => Boolean(c.sortable));
+    if (identityMatters) {
+      console.warn(
+        '[Dashforge Table] `getRowId` is not set — falling back to the ' +
+          'positional row index. With sort / search / selection / ' +
+          'expandable rows active, the index-based key breaks row ' +
+          'identity when rows reorder. Pass a stable resolver, e.g. ' +
+          '`getRowId={(row) => row.id}`.',
+      );
+    }
+  }, [getRowIdProvided, rowSelection, expandable, enableSearch, cols]);
+
   // ───── Controllable state machinery ─────
 
   const [sortModel, setSortModel] = useControllableState<TableSortModel>({
@@ -341,7 +366,14 @@ export function Table<T extends object>(props: TableProps<T>) {
                 ? renderEmptyState({
                     totalColumnCount,
                     emptyState,
-                    fallback: labels.noData,
+                    // Distinguish a genuinely empty dataset from one
+                    // emptied by an active search / filter.
+                    fallback:
+                      rows.length > 0 &&
+                      (debouncedSearchQuery.trim().length > 0 ||
+                        filterModel.length > 0)
+                        ? labels.noResults
+                        : labels.noData,
                     cellClass: cn(v.cell(), v.emptyState(), slotProps?.emptyState?.className),
                   })
                 : sortedRows.map((row, idx) => {
@@ -733,6 +765,10 @@ function renderLoadingRows<T extends object>(args: {
   cellClass: string;
 }): ReactNode {
   const { count, visibleCols, showSelectionColumn, showExpandColumn, showRowActionsColumn, rowClass, cellClass } = args;
+  // No explicit row height here (unlike DataGrid's loading rows, which
+  // pin `rowHeight` for the virtualization math): Table is auto-height
+  // by design. Skeleton rows inherit the same density padding via
+  // `cellClass`, so they line up with real rows without a fixed height.
   return Array.from({ length: count }).map((_, i) => (
     <tr key={`loading-${i}`} className={rowClass} aria-busy="true">
       {showSelectionColumn && <td className={cellClass}><Skeleton variant="rectangle" width="16px" height="16px" /></td>}

package/src/components/Table/cells/RenderChip.tsx

@@ -53,15 +53,12 @@ const chipVariants = tv({
     { variant: 'soft', color: 'danger',    class: 'bg-danger-100 dark:bg-danger-950 text-danger-700 dark:text-danger-300' },
     { variant: 'soft', color: 'info',      class: 'bg-info-100 dark:bg-info-950 text-info-700 dark:text-info-300' },
     { variant: 'soft', color: 'secondary', class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300' },
-    // solid = full bg + light text
-    // solid neutral: bg + text both anchored to neutral palette
-    // (auto-inverts). `text-white` would not invert and would break
-    // contrast in light mode against a `bg-neutral-700` dark bg, so
-    // we stick to `text-neutral-50` (light text in light mode, dark
-    // in dark — wait, that's wrong too). Actually `text-neutral-50`
-    // auto-inverts: light text in light mode (against dark bg) is
-    // what we want; in dark mode `bg-neutral-700` becomes light AND
-    // `text-neutral-50` becomes dark — contrast preserved.
+    // solid = full bg + contrasting text.
+    // solid neutral: both `bg-neutral-700` and `text-neutral-50` sit
+    // on the neutral palette, so they auto-invert together via the
+    // CSS-var swap — bg/text contrast is preserved in BOTH modes.
+    // (`text-white` is deliberately NOT used here: white does not
+    // auto-invert, which would flip the contrast in dark mode.)
     { variant: 'solid', color: 'neutral',   class: 'bg-neutral-700 text-neutral-50' },
     { variant: 'solid', color: 'primary',   class: 'bg-primary-500 text-white' },
     { variant: 'solid', color: 'success',   class: 'bg-success-500 text-white' },