@dashforge/tw 0.7.0-beta → 0.8.0-beta

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

@@ -0,0 +1,106 @@
+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;
+}
+
+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],
+  );
+
+  return { startResize };
+}
+
+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/ColumnVisibilityDialog.tsx

@@ -0,0 +1,200 @@
+import { useState, useEffect, type ReactNode } from 'react';
+import { Dialog } from '../../Dialog/Dialog.js';
+import { cn } from '../../../utils/cn.js';
+import type { TableColumn } from '../../Table/table.types.js';
+
+/**
+ * Column visibility dialog for DataGrid.
+ *
+ * Renders a toolbar button (the trigger) that opens a `<Dialog>` with
+ * one checkbox per `hideable` column. The consumer can:
+ *  - Show/hide individual columns
+ *  - "Show all" / "Hide all" shortcuts
+ *  - Persist visibility via the controllable `hiddenColumns` model
+ *
+ * Columns with `hideable: false` are NEVER shown in the dialog —
+ * 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;
+  columnsDescription?: string;
+  columnsShowAll?: string;
+  columnsHideAll?: string;
+  columnsDone?: string;
+}
+
+const DEFAULT_VISIBILITY_LABELS: Required<ColumnVisibilityLabels> = {
+  columnsButton: 'Columns',
+  columnsTitle: 'Manage columns',
+  columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
+  columnsShowAll: 'Show all',
+  columnsHideAll: 'Hide all',
+  columnsDone: 'Done',
+};
+
+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);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        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>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title={labels.columnsTitle}
+        description={labels.columnsDescription}
+        size="sm"
+      >
+        <ColumnVisibilityBody
+          cols={hideableCols}
+          hiddenColumns={hiddenColumns}
+          onChange={onChange}
+          onDone={() => setOpen(false)}
+          labels={labels}
+        />
+      </Dialog>
+    </>
+  );
+}
+
+// ───── Dialog body ─────
+
+function ColumnVisibilityBody<T extends object>(props: {
+  cols: TableColumn<T>[];
+  hiddenColumns: string[];
+  onChange: (next: string[]) => void;
+  onDone: () => void;
+  labels: Required<ColumnVisibilityLabels>;
+}) {
+  const { cols, hiddenColumns, onChange, onDone, labels } = props;
+  // Local draft so the user can stage changes; commit on Done.
+  const [draft, setDraft] = useState<string[]>(hiddenColumns);
+
+  // Re-sync when the dialog re-opens with a different external state.
+  useEffect(() => {
+    setDraft(hiddenColumns);
+  }, [hiddenColumns]);
+
+  const toggle = (field: string) => {
+    setDraft((prev) =>
+      prev.includes(field) ? prev.filter((f) => f !== field) : [...prev, field],
+    );
+  };
+
+  const showAll = () => setDraft([]);
+  const hideAll = () => setDraft(cols.map((c) => c.field as string));
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
+        <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">·</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>
+      <ul className="flex flex-col gap-1.5 max-h-72 overflow-auto">
+        {cols.map((col) => {
+          const field = col.field as string;
+          const hidden = draft.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 className="flex justify-end gap-2 pt-2 border-t border-neutral-200">
+        <button
+          type="button"
+          onClick={() => {
+            onChange(draft);
+            onDone();
+          }}
+          className="text-sm bg-primary-500 text-white rounded-md hover:bg-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 px-3 py-1.5"
+        >
+          {labels.columnsDone}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ───── 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/Table/Table.tsx

@@ -40,10 +40,24 @@ const DEFAULT_LABELS: Required<TableLabels> = {
   filterColumn: 'Filter',
   filterApply: 'Apply',
   filterClear: 'Clear',
+  filterMin: 'Min',
+  filterMax: 'Max',
+  filterFrom: 'From',
+  filterTo: 'To',
+  filterAll: 'All',
+  filterTrue: 'True',
+  filterFalse: 'False',
   density: 'Density',
   densityCompact: 'Compact',
   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',
 };
 
 const DEFAULT_GET_ROW_ID = <T extends object>(_row: T, index: number) => String(index);

package/src/components/Table/table.types.ts

@@ -131,11 +131,20 @@ export interface TableColumn<T extends object> {
   searchable?: boolean;
 
   /**
-   * Enable per-column quick filter (text-based in v1).
+   * Enable per-column quick filter UI in the column header.
    * @default false
    */
   filterable?: boolean;
 
+  /**
+   * Override the filter UI type. By default the type is auto-detected
+   * from `useColumnAutoDetect` (number → range, date → range,
+   * boolean → select, anything else → text contains). Force a
+   * specific UI when the autodetect picks the wrong one — e.g. an
+   * ID column stored as a number that should filter by text contains.
+   */
+  filterType?: TableFilterType;
+
   /**
    * Custom cell renderer. Receives the full row + the resolved
    * (potentially nested) value, the row index, selection state,
@@ -160,9 +169,32 @@ export interface TableColumn<T extends object> {
    */
   sticky?: 'left' | 'right';
 
-  /** Reserved for v1-bis (column-visibility dialog). */
+  /**
+   * Allow user to hide this column from the column-visibility dialog.
+   * Pass `false` for structurally required columns (e.g. an ID column).
+   * @default true
+   */
   hideable?: boolean;
+  /** Hidden on first render (the user can re-show via the dialog). */
   defaultHidden?: boolean;
+
+  /**
+   * Allow user to resize this column by dragging the right edge of
+   * its header. Pass `false` to opt out per-column. The grid-level
+   * `enableColumnResize` flag must also be on (default `true`).
+   * @default true
+   */
+  resizable?: boolean;
+  /** Maximum width (px) honored by the resize drag. */
+  maxWidth?: number;
+
+  /**
+   * Allow user to reorder this column by dragging its header. Pass
+   * `false` to pin its position. The grid-level `enableColumnReorder`
+   * flag must also be on (default `true`).
+   * @default true
+   */
+  reorderable?: boolean;
 }
 
 // ───── State models ─────
@@ -181,15 +213,36 @@ export interface TableSortItem {
  */
 export type TableSortModel = TableSortItem[];
 
+/**
+ * Filter operator. The value shape depends on the operator:
+ *  - `contains` → `value: string` (text substring match)
+ *  - `equals` → `value: unknown` (exact match, used for booleans)
+ *  - `between` → `value: [min, max]` where each end can be `null`
+ *    for an open range. Used for number ranges (`value: [10, 50]`)
+ *    and date ranges (`value: ['2024-01-01', '2024-12-31']` as ISO).
+ */
+export type TableFilterOperator = 'contains' | 'equals' | 'between';
+
 export interface TableFilterItem {
   field: string;
-  /** Text substring match. Future ops: `equals`, `in`, `gte`, `lte`, `between`. */
-  op: 'contains';
-  value: string;
+  op: TableFilterOperator;
+  value: unknown;
 }
 
 export type TableFilterModel = TableFilterItem[];
 
+/**
+ * Column-level filter type hint. Determines which filter UI to
+ * render in the column header Popover. Auto-detected from
+ * `useColumnAutoDetect` when omitted:
+ *
+ *  - `number` → number range filter
+ *  - `date` → date range filter
+ *  - `boolean` → true/false/all select
+ *  - `string` (or anything else) → text contains
+ */
+export type TableFilterType = 'text' | 'number' | 'boolean' | 'date';
+
 export type TableRowSelectionMode = 'none' | 'single' | 'multiple';
 
 // ───── i18n labels ─────
@@ -221,11 +274,27 @@ export interface TableLabels {
   filterColumn?: string;
   filterApply?: string;
   filterClear?: string;
+  /** Number / date range filter inputs. */
+  filterMin?: string;
+  filterMax?: string;
+  filterFrom?: string;
+  filterTo?: string;
+  /** Boolean filter radio options. */
+  filterAll?: string;
+  filterTrue?: string;
+  filterFalse?: string;
   /** Density toggle. */
   density?: string;
   densityCompact?: string;
   densityComfortable?: string;
   densitySpacious?: string;
+  /** Column visibility dialog. */
+  columnsButton?: string;
+  columnsTitle?: string;
+  columnsDescription?: string;
+  columnsShowAll?: string;
+  columnsHideAll?: string;
+  columnsDone?: string;
 }
 
 // ───── Slot props ─────

package/src/components/_shared/data/useTableFilter.test.ts

@@ -0,0 +1,166 @@
+// @vitest-environment node
+import { describe, it, expect } from 'vitest';
+import { passesFilter, toNumber, toDateMs } from './useTableFilter.js';
+
+describe('useTableFilter — toNumber', () => {
+  it('returns null for null and undefined', () => {
+    expect(toNumber(null)).toBeNull();
+    expect(toNumber(undefined)).toBeNull();
+  });
+
+  it('returns the value for finite numbers', () => {
+    expect(toNumber(42)).toBe(42);
+    expect(toNumber(0)).toBe(0);
+    expect(toNumber(-3.14)).toBe(-3.14);
+  });
+
+  it('returns null for non-finite numbers', () => {
+    expect(toNumber(Number.NaN)).toBeNull();
+    expect(toNumber(Number.POSITIVE_INFINITY)).toBeNull();
+  });
+
+  it('coerces numeric strings', () => {
+    expect(toNumber('42')).toBe(42);
+    expect(toNumber('0.5')).toBe(0.5);
+  });
+
+  it('returns null for non-numeric strings', () => {
+    expect(toNumber('abc')).toBeNull();
+  });
+
+  // JS quirk: Number('') === 0 (finite). Empty-string is treated as 0
+  // by toNumber. Callers that need open-range semantics (e.g. the
+  // NumberRangeFilter UI) explicitly null-out empty inputs before
+  // passing them through.
+  it('returns 0 for empty string (JS Number("") === 0)', () => {
+    expect(toNumber('')).toBe(0);
+  });
+
+  it('coerces bigint to number', () => {
+    expect(toNumber(10n)).toBe(10);
+  });
+
+  it('returns null for objects/arrays/booleans', () => {
+    expect(toNumber({})).toBeNull();
+    expect(toNumber([])).toBeNull();
+    expect(toNumber(true)).toBeNull();
+  });
+});
+
+describe('useTableFilter — toDateMs', () => {
+  it('returns null for null and undefined', () => {
+    expect(toDateMs(null)).toBeNull();
+    expect(toDateMs(undefined)).toBeNull();
+  });
+
+  it('returns epoch ms for Date instances', () => {
+    const d = new Date('2026-05-19T00:00:00Z');
+    expect(toDateMs(d)).toBe(d.getTime());
+  });
+
+  it('parses ISO strings', () => {
+    const ms = toDateMs('2026-05-19');
+    expect(ms).not.toBeNull();
+    expect(new Date(ms!).toISOString()).toContain('2026-05-19');
+  });
+
+  it('returns null for invalid date strings', () => {
+    expect(toDateMs('not-a-date')).toBeNull();
+  });
+});
+
+describe('useTableFilter — passesFilter (contains)', () => {
+  it('returns true for empty needle (no-op filter)', () => {
+    expect(passesFilter('Hello', 'contains', '')).toBe(true);
+    expect(passesFilter('Hello', 'contains', '   ')).toBe(true);
+  });
+
+  it('matches substring case-insensitively', () => {
+    expect(passesFilter('Hello World', 'contains', 'hello')).toBe(true);
+    expect(passesFilter('Hello World', 'contains', 'WORLD')).toBe(true);
+    expect(passesFilter('Hello World', 'contains', 'xyz')).toBe(false);
+  });
+
+  it('stringifies non-string row values for searching', () => {
+    expect(passesFilter(42, 'contains', '42')).toBe(true);
+    expect(passesFilter(true, 'contains', 'true')).toBe(true);
+  });
+});
+
+describe('useTableFilter — passesFilter (equals)', () => {
+  it('returns true when filter value is null (no-op)', () => {
+    expect(passesFilter('anything', 'equals', null)).toBe(true);
+  });
+
+  it('does strict equality for booleans', () => {
+    expect(passesFilter(true, 'equals', true)).toBe(true);
+    expect(passesFilter(false, 'equals', false)).toBe(true);
+    expect(passesFilter(true, 'equals', false)).toBe(false);
+  });
+
+  it('does strict equality for primitives', () => {
+    expect(passesFilter('a', 'equals', 'a')).toBe(true);
+    expect(passesFilter('a', 'equals', 'b')).toBe(false);
+    expect(passesFilter(1, 'equals', 1)).toBe(true);
+  });
+});
+
+describe('useTableFilter — passesFilter (between, number range)', () => {
+  it('returns true when range is fully open', () => {
+    expect(passesFilter(42, 'between', [null, null])).toBe(true);
+  });
+
+  it('respects min bound', () => {
+    expect(passesFilter(5, 'between', [10, null])).toBe(false);
+    expect(passesFilter(10, 'between', [10, null])).toBe(true);
+    expect(passesFilter(15, 'between', [10, null])).toBe(true);
+  });
+
+  it('respects max bound', () => {
+    expect(passesFilter(5, 'between', [null, 10])).toBe(true);
+    expect(passesFilter(10, 'between', [null, 10])).toBe(true);
+    expect(passesFilter(15, 'between', [null, 10])).toBe(false);
+  });
+
+  it('respects both bounds inclusively', () => {
+    expect(passesFilter(7, 'between', [5, 10])).toBe(true);
+    expect(passesFilter(5, 'between', [5, 10])).toBe(true);
+    expect(passesFilter(10, 'between', [5, 10])).toBe(true);
+    expect(passesFilter(4, 'between', [5, 10])).toBe(false);
+    expect(passesFilter(11, 'between', [5, 10])).toBe(false);
+  });
+
+  it('coerces string row values to number', () => {
+    expect(passesFilter('7', 'between', [5, 10])).toBe(true);
+  });
+
+  it('returns true for malformed filter value (defensive)', () => {
+    expect(passesFilter(42, 'between', 'not a tuple')).toBe(true);
+    expect(passesFilter(42, 'between', [1])).toBe(true);
+  });
+});
+
+describe('useTableFilter — passesFilter (between, date range)', () => {
+  it('respects ISO date range bounds', () => {
+    const row = '2026-05-19';
+    expect(passesFilter(row, 'between', ['2026-01-01', '2026-12-31'])).toBe(true);
+    expect(passesFilter(row, 'between', ['2026-06-01', '2026-12-31'])).toBe(false);
+    expect(passesFilter(row, 'between', ['2026-01-01', '2026-05-01'])).toBe(false);
+  });
+
+  it('accepts Date instances as row values', () => {
+    const row = new Date('2026-05-19T00:00:00Z');
+    expect(passesFilter(row, 'between', ['2026-01-01', '2026-12-31'])).toBe(true);
+  });
+
+  it('treats null bounds as open ended', () => {
+    expect(passesFilter('2026-05-19', 'between', [null, '2026-12-31'])).toBe(true);
+    expect(passesFilter('2026-05-19', 'between', ['2026-01-01', null])).toBe(true);
+  });
+});
+
+describe('useTableFilter — passesFilter (unknown operator)', () => {
+  it('returns true for unrecognized operator (defensive no-op)', () => {
+    expect(passesFilter('anything', 'unknownOp', 'anything')).toBe(true);
+  });
+});