@dashforge/tw 0.7.0-beta → 0.8.1-beta

package/src/components/DataGrid/dataGrid.variants.ts

@@ -78,7 +78,7 @@ export const dataGridVariants = tv({
       'border-t border-neutral-200',
       'bg-neutral-50 shadow-md',
     ],
-    // Sticky left column — uses `position: sticky; left: 0` + z-index
+    // Sticky LEFT column — uses `position: sticky; left: 0` + z-index
     // so the column stays pinned during horizontal scroll. The
     // `bg-neutral-50` ensures the column doesn't bleed when content
     // scrolls underneath.
@@ -86,6 +86,14 @@ export const dataGridVariants = tv({
     // Sticky left × header intersection (top-left corner): higher
     // z-index than both header (`z-10`) and sticky col (`z-[1]`).
     stickyLeftHeaderCell: 'sticky left-0 z-20 bg-neutral-50',
+    // Sticky RIGHT column — mirror of stickyLeftCell. The first
+    // right-sticky column gets a `border-l` to separate it visually
+    // from the scrollable area (the consumer can override via
+    // slotProps if they don't want it).
+    stickyRightCell:
+      'sticky right-0 z-[1] bg-neutral-50 border-l border-neutral-200',
+    stickyRightHeaderCell:
+      'sticky right-0 z-20 bg-neutral-50 border-l border-neutral-200',
     paginationFooter: 'flex justify-end mt-3',
   },
   variants: {

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

@@ -0,0 +1,432 @@
+import { useState, type ReactNode } from 'react';
+import { Popover } from '../../Popover/Popover.js';
+import { cn } from '../../../utils/cn.js';
+import type {
+  TableFilterItem,
+  TableFilterModel,
+  TableFilterType,
+} from '../../Table/table.types.js';
+
+/**
+ * Per-column filter UI for DataGrid.
+ *
+ * `<ColumnFilterTrigger>` renders the filter icon button in the
+ * column header — when clicked, opens a Popover with the
+ * appropriate filter UI for the column type:
+ *
+ *  - `text` → `<TextFilter>` with single input (op: `contains`)
+ *  - `number` → `<NumberRangeFilter>` with min/max inputs (op: `between`)
+ *  - `boolean` → `<BooleanFilter>` with true/false/all radio (op: `equals`)
+ *  - `date` → `<DateRangeFilter>` with min/max date inputs (op: `between`)
+ *
+ * Each filter UI has Apply + Clear actions; Apply commits the
+ * filter to the model, Clear removes any existing filter for that
+ * column.
+ */
+
+// ───── Helper: read/write filter model for a single column ─────
+
+function findFilter(model: TableFilterModel, field: string): TableFilterItem | undefined {
+  return model.find((f) => f.field === field);
+}
+
+function setFilter(
+  model: TableFilterModel,
+  field: string,
+  next: TableFilterItem | null,
+): TableFilterModel {
+  const rest = model.filter((f) => f.field !== field);
+  if (next == null) return rest;
+  return [...rest, next];
+}
+
+// ───── Filter labels (i18n) ─────
+
+export interface ColumnFilterLabels {
+  filterColumn?: string;
+  filterApply?: string;
+  filterClear?: string;
+  filterMin?: string;
+  filterMax?: string;
+  filterFrom?: string;
+  filterTo?: string;
+  filterAll?: string;
+  filterTrue?: string;
+  filterFalse?: string;
+}
+
+const DEFAULT_FILTER_LABELS: Required<ColumnFilterLabels> = {
+  filterColumn: 'Filter',
+  filterApply: 'Apply',
+  filterClear: 'Clear',
+  filterMin: 'Min',
+  filterMax: 'Max',
+  filterFrom: 'From',
+  filterTo: 'To',
+  filterAll: 'All',
+  filterTrue: 'True',
+  filterFalse: 'False',
+};
+
+// ───── Trigger (icon button in column header) ─────
+
+export interface ColumnFilterTriggerProps {
+  field: string;
+  filterType: TableFilterType;
+  filterModel: TableFilterModel;
+  onFilterChange: (model: TableFilterModel) => void;
+  disabled?: boolean;
+  labels?: ColumnFilterLabels;
+}
+
+export function ColumnFilterTrigger(props: ColumnFilterTriggerProps) {
+  const {
+    field,
+    filterType,
+    filterModel,
+    onFilterChange,
+    disabled,
+    labels: labelsProp,
+  } = props;
+  const labels = { ...DEFAULT_FILTER_LABELS, ...labelsProp };
+  const [open, setOpen] = useState(false);
+  const active = findFilter(filterModel, field) != null;
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      side="bottom"
+      align="end"
+      content={
+        <FilterPanel
+          field={field}
+          filterType={filterType}
+          filterModel={filterModel}
+          onFilterChange={(next) => {
+            onFilterChange(next);
+            setOpen(false);
+          }}
+          labels={labels}
+        />
+      }
+    >
+      <button
+        type="button"
+        aria-label={labels.filterColumn}
+        aria-pressed={active}
+        disabled={disabled}
+        className={cn(
+          'inline-flex items-center justify-center h-6 w-6 rounded',
+          'text-neutral-500 hover:text-neutral-900',
+          active && 'text-primary-700',
+          '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',
+        )}
+      >
+        <FilterIcon />
+      </button>
+    </Popover>
+  );
+}
+
+// ───── Panel — dispatches to the right filter UI ─────
+
+function FilterPanel(props: {
+  field: string;
+  filterType: TableFilterType;
+  filterModel: TableFilterModel;
+  onFilterChange: (model: TableFilterModel) => void;
+  labels: Required<ColumnFilterLabels>;
+}) {
+  const { field, filterType, filterModel, onFilterChange, labels } = props;
+  const current = findFilter(filterModel, field);
+
+  const commit = (next: TableFilterItem | null) => {
+    onFilterChange(setFilter(filterModel, field, next));
+  };
+
+  switch (filterType) {
+    case 'number':
+      return <NumberRangeFilter field={field} current={current} onCommit={commit} labels={labels} />;
+    case 'boolean':
+      return <BooleanFilter field={field} current={current} onCommit={commit} labels={labels} />;
+    case 'date':
+      return <DateRangeFilter field={field} current={current} onCommit={commit} labels={labels} />;
+    case 'text':
+    default:
+      return <TextFilter field={field} current={current} onCommit={commit} labels={labels} />;
+  }
+}
+
+// ───── Text filter ─────
+
+function TextFilter(props: {
+  field: string;
+  current: TableFilterItem | undefined;
+  onCommit: (next: TableFilterItem | null) => void;
+  labels: Required<ColumnFilterLabels>;
+}) {
+  const { field, current, onCommit, labels } = props;
+  const [value, setValue] = useState<string>(
+    typeof current?.value === 'string' ? current.value : '',
+  );
+
+  return (
+    <div className="flex flex-col gap-2 min-w-[200px]">
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="…"
+        autoFocus
+        className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+      />
+      <FilterActions
+        onApply={() => onCommit(value.trim() ? { field, op: 'contains', value } : null)}
+        onClear={() => {
+          setValue('');
+          onCommit(null);
+        }}
+        labels={labels}
+      />
+    </div>
+  );
+}
+
+// ───── Number range filter ─────
+
+function NumberRangeFilter(props: {
+  field: string;
+  current: TableFilterItem | undefined;
+  onCommit: (next: TableFilterItem | null) => void;
+  labels: Required<ColumnFilterLabels>;
+}) {
+  const { field, current, onCommit, labels } = props;
+  const currentValue = current?.value;
+  const currentTuple: [unknown, unknown] = Array.isArray(currentValue)
+    ? (currentValue as [unknown, unknown])
+    : [null, null];
+  const [min, setMin] = useState<string>(
+    currentTuple[0] != null ? String(currentTuple[0]) : '',
+  );
+  const [max, setMax] = useState<string>(
+    currentTuple[1] != null ? String(currentTuple[1]) : '',
+  );
+
+  const apply = () => {
+    const minN = min.trim() ? Number(min) : null;
+    const maxN = max.trim() ? Number(max) : null;
+    if ((minN == null || Number.isFinite(minN)) && (maxN == null || Number.isFinite(maxN))) {
+      if (minN == null && maxN == null) {
+        onCommit(null);
+      } else {
+        onCommit({ field, op: 'between', value: [minN, maxN] });
+      }
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2 min-w-[220px]">
+      <div className="grid grid-cols-2 gap-2">
+        <label className="flex flex-col gap-1 text-xs text-neutral-700">
+          <span>{labels.filterMin}</span>
+          <input
+            type="number"
+            value={min}
+            onChange={(e) => setMin(e.target.value)}
+            autoFocus
+            className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          />
+        </label>
+        <label className="flex flex-col gap-1 text-xs text-neutral-700">
+          <span>{labels.filterMax}</span>
+          <input
+            type="number"
+            value={max}
+            onChange={(e) => setMax(e.target.value)}
+            className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          />
+        </label>
+      </div>
+      <FilterActions
+        onApply={apply}
+        onClear={() => {
+          setMin('');
+          setMax('');
+          onCommit(null);
+        }}
+        labels={labels}
+      />
+    </div>
+  );
+}
+
+// ───── Boolean filter ─────
+
+function BooleanFilter(props: {
+  field: string;
+  current: TableFilterItem | undefined;
+  onCommit: (next: TableFilterItem | null) => void;
+  labels: Required<ColumnFilterLabels>;
+}) {
+  const { field, current, onCommit, labels } = props;
+  const initial: 'all' | 'true' | 'false' =
+    current?.value === true ? 'true' : current?.value === false ? 'false' : 'all';
+  const [value, setValue] = useState(initial);
+
+  const apply = () => {
+    if (value === 'all') onCommit(null);
+    else onCommit({ field, op: 'equals', value: value === 'true' });
+  };
+
+  return (
+    <div className="flex flex-col gap-2 min-w-[160px]">
+      <fieldset className="flex flex-col gap-1">
+        {(['all', 'true', 'false'] as const).map((opt) => (
+          <label key={opt} className="flex items-center gap-2 text-sm cursor-pointer">
+            <input
+              type="radio"
+              name={`filter-${field}`}
+              value={opt}
+              checked={value === opt}
+              onChange={() => setValue(opt)}
+              className="cursor-pointer"
+            />
+            <span>
+              {opt === 'all'
+                ? labels.filterAll
+                : opt === 'true'
+                  ? labels.filterTrue
+                  : labels.filterFalse}
+            </span>
+          </label>
+        ))}
+      </fieldset>
+      <FilterActions
+        onApply={apply}
+        onClear={() => {
+          setValue('all');
+          onCommit(null);
+        }}
+        labels={labels}
+      />
+    </div>
+  );
+}
+
+// ───── Date range filter ─────
+
+function DateRangeFilter(props: {
+  field: string;
+  current: TableFilterItem | undefined;
+  onCommit: (next: TableFilterItem | null) => void;
+  labels: Required<ColumnFilterLabels>;
+}) {
+  const { field, current, onCommit, labels } = props;
+  const currentValue = current?.value;
+  const currentTuple: [unknown, unknown] = Array.isArray(currentValue)
+    ? (currentValue as [unknown, unknown])
+    : [null, null];
+  const [from, setFrom] = useState<string>(
+    typeof currentTuple[0] === 'string' ? currentTuple[0] : '',
+  );
+  const [to, setTo] = useState<string>(
+    typeof currentTuple[1] === 'string' ? currentTuple[1] : '',
+  );
+
+  const apply = () => {
+    if (!from && !to) {
+      onCommit(null);
+    } else {
+      onCommit({
+        field,
+        op: 'between',
+        value: [from || null, to || null],
+      });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2 min-w-[220px]">
+      <div className="grid grid-cols-2 gap-2">
+        <label className="flex flex-col gap-1 text-xs text-neutral-700">
+          <span>{labels.filterFrom}</span>
+          <input
+            type="date"
+            value={from}
+            onChange={(e) => setFrom(e.target.value)}
+            autoFocus
+            className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          />
+        </label>
+        <label className="flex flex-col gap-1 text-xs text-neutral-700">
+          <span>{labels.filterTo}</span>
+          <input
+            type="date"
+            value={to}
+            onChange={(e) => setTo(e.target.value)}
+            className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          />
+        </label>
+      </div>
+      <FilterActions
+        onApply={apply}
+        onClear={() => {
+          setFrom('');
+          setTo('');
+          onCommit(null);
+        }}
+        labels={labels}
+      />
+    </div>
+  );
+}
+
+// ───── Apply + Clear actions ─────
+
+function FilterActions(props: {
+  onApply: () => void;
+  onClear: () => void;
+  labels: Required<ColumnFilterLabels>;
+}) {
+  return (
+    <div className="flex justify-end gap-2 pt-1 border-t border-neutral-200">
+      <button
+        type="button"
+        onClick={props.onClear}
+        className="text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline px-2 py-1"
+      >
+        {props.labels.filterClear}
+      </button>
+      <button
+        type="button"
+        onClick={props.onApply}
+        className="text-xs 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"
+      >
+        {props.labels.filterApply}
+      </button>
+    </div>
+  );
+}
+
+// ───── Icon ─────
+
+function FilterIcon(): 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"
+    >
+      <path d="M2 3h12M4 8h8M6 13h4" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,38 @@
+// @vitest-environment node
+import { describe, it, expect } from 'vitest';
+import { moveColumn } from './useColumnReorder.js';
+
+describe('moveColumn', () => {
+  const order = ['a', 'b', 'c', 'd'];
+
+  it('moves source BEFORE target on left drop', () => {
+    expect(moveColumn(order, 'd', 'b', 'left')).toEqual(['a', 'd', 'b', 'c']);
+  });
+
+  it('moves source AFTER target on right drop', () => {
+    expect(moveColumn(order, 'a', 'c', 'right')).toEqual(['b', 'c', 'a', 'd']);
+  });
+
+  it('handles dragging right by one', () => {
+    expect(moveColumn(order, 'a', 'b', 'right')).toEqual(['b', 'a', 'c', 'd']);
+  });
+
+  it('handles dragging left by one', () => {
+    expect(moveColumn(order, 'd', 'c', 'left')).toEqual(['a', 'b', 'd', 'c']);
+  });
+
+  it('no-ops when source == target', () => {
+    // moveColumn assumes the caller has already filtered source==target,
+    // but if not, the source ends up next to itself (still valid order).
+    expect(moveColumn(order, 'b', 'b', 'left')).toEqual(['a', 'b', 'c', 'd']);
+  });
+
+  it('returns the original list when target is not in the order', () => {
+    expect(moveColumn(order, 'a', 'zzz', 'left')).toEqual(order);
+  });
+
+  it('preserves all fields after the move', () => {
+    const result = moveColumn(order, 'a', 'd', 'right');
+    expect(result.sort()).toEqual(['a', 'b', 'c', 'd']);
+  });
+});

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

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