@dashforge/tw 0.8.0-beta → 0.9.0-beta

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

@@ -0,0 +1,186 @@
+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/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.',
@@ -52,12 +53,8 @@ const DEFAULT_LABELS: Required<TableLabels> = {
   densityComfortable: 'Comfortable',
   densitySpacious: 'Spacious',
   columnsButton: 'Columns',
-  columnsTitle: 'Manage columns',
-  columnsDescription:
-    'Show or hide columns. Required columns cannot be toggled.',
-  columnsShowAll: 'Show all',
-  columnsHideAll: 'Hide all',
-  columnsDone: 'Done',
+  columnsTitle: 'Toggle columns',
+  columnsToggleAll: 'Toggle all columns',
 };
 
 const DEFAULT_GET_ROW_ID = <T extends object>(_row: T, index: number) => String(index);
@@ -135,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>({
@@ -344,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) => {
@@ -736,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' },