@cdx-ui/data-grid 0.3.11 → 0.3.12

package/src/adapter/columnTypes.ts

@@ -0,0 +1,327 @@
+import type {
+  GridAlignment,
+  GridColDef,
+  GridColType,
+  GridSingleSelectColDef,
+  GridValidRowModel,
+  GridValueOption,
+} from '../types';
+
+const localeNumberFormat = new Intl.NumberFormat();
+const localeDateFormat = new Intl.DateTimeFormat();
+const localeDateTimeFormat = new Intl.DateTimeFormat(undefined, {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+});
+
+export interface DataGridColumnMeta<R extends GridValidRowModel = GridValidRowModel> {
+  colDef: GridColDef<R>;
+  getFilterText: (value: unknown, row: R) => string;
+}
+
+interface ValueRow {
+  getValue: (columnId: string) => unknown;
+  original: unknown;
+  getAllCells: () => readonly {
+    column: { id: string; columnDef: { meta?: unknown } };
+  }[];
+}
+
+function isDataGridColumnMeta(meta: unknown): meta is DataGridColumnMeta {
+  return (
+    typeof meta === 'object' &&
+    meta !== null &&
+    'colDef' in meta &&
+    'getFilterText' in meta &&
+    typeof (meta as { getFilterText: unknown }).getFilterText === 'function'
+  );
+}
+
+const DISPLAY_FILTER_TYPES: ReadonlySet<GridColType> = new Set([
+  'number',
+  'date',
+  'dateTime',
+  'boolean',
+  'singleSelect',
+]);
+
+export function usesDisplayFilter<R extends GridValidRowModel>(col: GridColDef<R>): boolean {
+  return col.type != null && DISPLAY_FILTER_TYPES.has(col.type);
+}
+
+export function metaUsesDisplayFilter(meta: unknown): boolean {
+  return isDataGridColumnMeta(meta) && usesDisplayFilter(meta.colDef);
+}
+
+export function columnSortFnName<R extends GridValidRowModel>(
+  col: GridColDef<R>,
+): 'text' | 'number' | 'datetime' | 'boolean' | 'selectLabel' | undefined {
+  switch (col.type) {
+    case 'string':
+      return 'text';
+    case 'number':
+      return 'number';
+    case 'date':
+    case 'dateTime':
+      return 'datetime';
+    case 'boolean':
+      return 'boolean';
+    case 'singleSelect':
+      return 'selectLabel';
+    default:
+      return undefined;
+  }
+}
+
+export function typeDefaultAlign(type: GridColType | undefined): GridAlignment | undefined {
+  if (type === 'number') {
+    return 'end';
+  }
+  if (type === 'boolean') {
+    return 'center';
+  }
+  return undefined;
+}
+
+function asValidDate(value: unknown): Date | null {
+  return value instanceof Date && Number.isFinite(value.getTime()) ? value : null;
+}
+
+function formatNumberCell(value: unknown): string {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return '';
+  }
+  return localeNumberFormat.format(value);
+}
+
+function formatDateCell(value: unknown): string {
+  const date = asValidDate(value);
+  return date ? localeDateFormat.format(date) : '';
+}
+
+function formatDateTimeCell(value: unknown): string {
+  const date = asValidDate(value);
+  return date ? localeDateTimeFormat.format(date) : '';
+}
+
+function stringifyCellValue(value: unknown): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+    return value.toString();
+  }
+  return '';
+}
+
+function optionValue(option: GridValueOption): string | number {
+  return typeof option === 'object' ? option.value : option;
+}
+
+function optionLabel(option: GridValueOption): string {
+  if (typeof option === 'object') {
+    return option.label;
+  }
+  return typeof option === 'number' ? option.toString() : option;
+}
+
+function resolveValueOptions<R extends GridValidRowModel>(
+  col: GridSingleSelectColDef<R>,
+  row: R,
+): readonly GridValueOption[] {
+  const options = col.valueOptions;
+  return typeof options === 'function' ? options({ row }) : options;
+}
+
+function resolveSelectLabel<R extends GridValidRowModel>(
+  col: GridSingleSelectColDef<R>,
+  value: unknown,
+  row: R,
+): string {
+  const match = resolveValueOptions(col, row).find((option) => optionValue(option) === value);
+  if (match) {
+    return optionLabel(match);
+  }
+  return stringifyCellValue(value);
+}
+
+export function getColumnFilterText<R extends GridValidRowModel>(
+  col: GridColDef<R>,
+  value: unknown,
+  row: R,
+): string {
+  if (value == null) {
+    return '';
+  }
+  switch (col.type) {
+    case 'number':
+      return formatNumberCell(value);
+    case 'date':
+      return formatDateCell(value);
+    case 'dateTime':
+      return formatDateTimeCell(value);
+    case 'boolean':
+      return typeof value === 'boolean' ? (value ? 'Yes' : 'No') : stringifyCellValue(value);
+    case 'singleSelect':
+      return resolveSelectLabel(col, value, row);
+    case 'string':
+      return stringifyCellValue(value);
+    default:
+      return stringifyCellValue(value);
+  }
+}
+
+export function getTypedCellText<R extends GridValidRowModel>(
+  col: GridColDef<R> | undefined,
+  value: unknown,
+  row: R,
+): string | undefined {
+  if (!col?.type || col.type === 'boolean') {
+    return undefined;
+  }
+  if (value == null) {
+    return '';
+  }
+  return getColumnFilterText(col, value, row);
+}
+
+function compareNullish(a: unknown, b: unknown): number | undefined {
+  const aNull = a == null;
+  const bNull = b == null;
+  if (aNull && bNull) {
+    return 0;
+  }
+  if (aNull) {
+    return 1;
+  }
+  if (bNull) {
+    return -1;
+  }
+  return undefined;
+}
+
+function getColumnMeta(row: ValueRow, columnId: string): DataGridColumnMeta | undefined {
+  for (const cell of row.getAllCells()) {
+    if (cell.column.id === columnId) {
+      const meta = cell.column.columnDef.meta;
+      return isDataGridColumnMeta(meta) ? meta : undefined;
+    }
+  }
+  return undefined;
+}
+
+function filterTextForRow(row: ValueRow, columnId: string): string {
+  const value = row.getValue(columnId);
+  const meta = getColumnMeta(row, columnId);
+  if (meta) {
+    return meta.getFilterText(value, row.original as GridValidRowModel);
+  }
+  return stringifyCellValue(value);
+}
+
+export function normalizeFilterQuery(filterValue: unknown): string {
+  if (typeof filterValue !== 'string' && typeof filterValue !== 'number') {
+    return '';
+  }
+  return filterValue.toString().trim().toLowerCase();
+}
+
+function stringifyForIncludes(value: unknown): string {
+  if (typeof value === 'string') {
+    return value.toLowerCase();
+  }
+  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+    return value.toString().toLowerCase();
+  }
+  if (value instanceof Date) {
+    return value.toString().toLowerCase();
+  }
+  if (Array.isArray(value)) {
+    return value.join(',').toLowerCase();
+  }
+  if (typeof value === 'object' && value !== null) {
+    return '[object object]';
+  }
+  if (typeof value === 'symbol' || typeof value === 'function') {
+    return value.toString().toLowerCase();
+  }
+  return '';
+}
+
+export function untypedCellIncludesQuery(value: unknown, query: string): boolean {
+  if (!query) {
+    return true;
+  }
+  if (value == null) {
+    return false;
+  }
+  return stringifyForIncludes(value).includes(query);
+}
+
+export function filterFn_displayText(
+  row: ValueRow,
+  columnId: string,
+  filterValue: unknown,
+): boolean {
+  const query = normalizeFilterQuery(filterValue);
+  if (!query) {
+    return true;
+  }
+  return filterTextForRow(row, columnId).toLowerCase().includes(query);
+}
+
+function toFiniteNumber(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+
+function toTimestamp(value: unknown): number | null {
+  const date = asValidDate(value);
+  return date ? date.getTime() : null;
+}
+
+function compareFinite(a: number | null, b: number | null): number {
+  if (a == null && b == null) {
+    return 0;
+  }
+  if (a == null) {
+    return 1;
+  }
+  if (b == null) {
+    return -1;
+  }
+  return a - b;
+}
+
+export function sortFn_number(rowA: ValueRow, rowB: ValueRow, columnId: string): number {
+  return compareFinite(
+    toFiniteNumber(rowA.getValue(columnId)),
+    toFiniteNumber(rowB.getValue(columnId)),
+  );
+}
+
+export function sortFn_datetime(rowA: ValueRow, rowB: ValueRow, columnId: string): number {
+  return compareFinite(toTimestamp(rowA.getValue(columnId)), toTimestamp(rowB.getValue(columnId)));
+}
+
+export function sortFn_boolean(rowA: ValueRow, rowB: ValueRow, columnId: string): number {
+  const a = rowA.getValue(columnId);
+  const b = rowB.getValue(columnId);
+  return compareFinite(
+    typeof a === 'boolean' ? Number(a) : null,
+    typeof b === 'boolean' ? Number(b) : null,
+  );
+}
+
+export function sortFn_selectLabel(rowA: ValueRow, rowB: ValueRow, columnId: string): number {
+  const a = rowA.getValue(columnId);
+  const b = rowB.getValue(columnId);
+  const nullish = compareNullish(a, b);
+  if (nullish !== undefined) {
+    return nullish;
+  }
+  return filterTextForRow(rowA, columnId).localeCompare(filterTextForRow(rowB, columnId));
+}

package/src/adapter/columns.test.ts

@@ -1,4 +1,12 @@
-import { applyUpdater, gridColDefToColumnDef, normalizeGridAlignment } from './columns';
+import { SELECT_COLUMN_ID, type GridColDef } from '../types';
+import {
+  applyUpdater,
+  gridColDefToColumnDef,
+  normalizeGridAlignment,
+  normalizePinnedColumns,
+  resolveColumnAlign,
+  resolveColumnHeaderAlign,
+} from './columns';
 
 describe('gridColDefToColumnDef', () => {
   it('maps field, header, and sort/filter flags', () => {
@@ -23,6 +31,12 @@ describe('gridColDefToColumnDef', () => {
 
     expect(def.accessorFn?.({ name: 'operating' }, 0)).toBe('OPERATING');
   });
+
+  it('accepts the untyped column shape from the current release', () => {
+    const columns: GridColDef[] = [{ field: 'name' }, { field: 'id', type: 'string' }];
+
+    expect(columns.map((col) => col.field)).toEqual(['name', 'id']);
+  });
 });
 
 describe('applyUpdater', () => {
@@ -45,3 +59,63 @@ describe('normalizeGridAlignment', () => {
     expect(normalizeGridAlignment('right')).toBe('end');
   });
 });
+
+describe('normalizePinnedColumns', () => {
+  const known = new Set(['id', 'name', 'actions']);
+
+  it('maps left/right aliases and merges with logical keys first', () => {
+    expect(
+      normalizePinnedColumns(
+        { start: ['id'], left: ['name', 'id'], end: ['actions'], right: ['name'] },
+        known,
+        false,
+      ),
+    ).toEqual({ start: ['id', 'name'], end: ['actions'] });
+  });
+
+  it('pins conflicts to start and ignores unknown fields', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+    expect(
+      normalizePinnedColumns({ start: ['name'], end: ['name', 'missing'] }, known, false),
+    ).toEqual({ start: ['name'], end: [] });
+    expect(warn).toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  it('maps __check__ and auto-pins the selection column when start is pinned', () => {
+    expect(normalizePinnedColumns({ left: ['__check__', 'name'] }, known, true)).toEqual({
+      start: [SELECT_COLUMN_ID, 'name'],
+      end: [],
+    });
+    expect(normalizePinnedColumns({ start: ['name'] }, known, true)).toEqual({
+      start: [SELECT_COLUMN_ID, 'name'],
+      end: [],
+    });
+  });
+});
+
+describe('resolveColumnAlign', () => {
+  it('uses type defaults only when align is omitted', () => {
+    expect(resolveColumnAlign({ field: 'name' })).toBe('start');
+    expect(resolveColumnAlign({ field: 'amount', type: 'number' })).toBe('end');
+    expect(resolveColumnAlign({ field: 'flag', type: 'boolean' })).toBe('center');
+    expect(resolveColumnAlign({ field: 'amount', type: 'number', align: 'start' })).toBe('start');
+  });
+});
+
+describe('resolveColumnHeaderAlign', () => {
+  it('prefers headerAlign, then align, then the type default', () => {
+    expect(resolveColumnHeaderAlign({ field: 'amount', type: 'number' })).toBe('end');
+    expect(resolveColumnHeaderAlign({ field: 'amount', type: 'number', align: 'start' })).toBe(
+      'start',
+    );
+    expect(
+      resolveColumnHeaderAlign({
+        field: 'amount',
+        type: 'number',
+        align: 'start',
+        headerAlign: 'center',
+      }),
+    ).toBe('center');
+  });
+});

package/src/adapter/columns.ts

@@ -1,7 +1,36 @@
 import type { TableAlignment } from '@cdx-ui/components';
-import type { GridAlignment, GridColDef, GridValidRowModel } from '../types';
+import type { ColumnPinningState } from '@tanstack/react-table';
+import {
+  MUI_CHECKBOX_FIELD,
+  SELECT_COLUMN_ID,
+  type GridAlignment,
+  type GridColDef,
+  type GridPinnedColumnFields,
+  type GridValidRowModel,
+} from '../types';
+import {
+  columnSortFnName,
+  filterFn_displayText,
+  getColumnFilterText,
+  normalizeFilterQuery,
+  untypedCellIncludesQuery,
+  usesDisplayFilter,
+  type DataGridColumnMeta,
+  typeDefaultAlign,
+} from './columnTypes';
+import {
+  isFilterValueGroup,
+  isOperatorFilterValue,
+  matchesOperatorFilter,
+} from './filterOperators';
 
 export function gridColDefToColumnDef<R extends GridValidRowModel>(col: GridColDef<R>) {
+  const sortFn = columnSortFnName(col);
+  const meta: DataGridColumnMeta<R> = {
+    colDef: col,
+    getFilterText: (value, row) => getColumnFilterText(col, value, row),
+  };
+
   return {
     id: col.field,
     accessorFn: (row: R) => {
@@ -12,8 +41,31 @@ export function gridColDefToColumnDef<R extends GridValidRowModel>(col: GridColD
     enableSorting: col.sortable !== false,
     enableColumnFilter: col.filterable !== false,
     enableGlobalFilter: col.filterable !== false,
-    filterFn: 'includesString' as const,
-    meta: { colDef: col },
+    filterFn: (
+      row: Parameters<typeof filterFn_displayText>[0],
+      columnId: string,
+      filterValue: unknown,
+    ): boolean => {
+      const matches = (value: unknown): boolean => {
+        if (isOperatorFilterValue(value)) {
+          return matchesOperatorFilter(col, row.getValue(columnId), row.original as R, value);
+        }
+        if (usesDisplayFilter(col)) {
+          return filterFn_displayText(row, columnId, value);
+        }
+        return untypedCellIncludesQuery(row.getValue(columnId), normalizeFilterQuery(value));
+      };
+      return isFilterValueGroup(filterValue)
+        ? filterValue.items.every(matches)
+        : matches(filterValue);
+    },
+    ...(sortFn
+      ? {
+          sortFn,
+          sortUndefined: 'last' as const,
+        }
+      : {}),
+    meta,
   };
 }
 
@@ -30,3 +82,126 @@ export function normalizeGridAlignment(align?: GridAlignment): TableAlignment {
   }
   return align ?? 'start';
 }
+
+function resolvePinnedFieldId(field: string): string {
+  return field === MUI_CHECKBOX_FIELD ? SELECT_COLUMN_ID : field;
+}
+
+const warnedUnknownPinnedFields = new Set<string>();
+const warnedConflictPinnedFields = new Set<string>();
+
+function warnUnknownPinnedField(raw: string): void {
+  if (!__DEV__ || warnedUnknownPinnedFields.has(raw)) {
+    return;
+  }
+  warnedUnknownPinnedFields.add(raw);
+  console.warn(`[DataGrid] Unknown pinned column field "${raw}" was ignored.`);
+}
+
+function warnConflictPinnedField(field: string): void {
+  if (!__DEV__ || warnedConflictPinnedFields.has(field)) {
+    return;
+  }
+  warnedConflictPinnedFields.add(field);
+  console.warn(
+    `[DataGrid] Column "${field}" is listed in both start and end pinned columns; pinning to start.`,
+  );
+}
+
+/**
+ * Maps `pinnedColumns` (including deprecated `left` / `right` and MUI `__check__`)
+ * to TanStack `ColumnPinningState`. Logical keys win over aliases; start wins over end.
+ */
+export function normalizePinnedColumns(
+  pinnedColumns: GridPinnedColumnFields | undefined,
+  knownFields: ReadonlySet<string>,
+  checkboxSelection: boolean,
+): ColumnPinningState {
+  if (pinnedColumns == null) {
+    return { start: [], end: [] };
+  }
+
+  const appendUnique = (
+    target: string[],
+    seen: Set<string>,
+    fields: readonly string[] | undefined,
+  ) => {
+    if (fields == null) {
+      return;
+    }
+    for (const raw of fields) {
+      const field = resolvePinnedFieldId(raw);
+      if (seen.has(field)) {
+        continue;
+      }
+      const isSelect = field === SELECT_COLUMN_ID;
+      if (isSelect ? !checkboxSelection : !knownFields.has(field)) {
+        warnUnknownPinnedField(raw);
+        continue;
+      }
+      seen.add(field);
+      target.push(field);
+    }
+  };
+
+  const startSeen = new Set<string>();
+  const start: string[] = [];
+  appendUnique(start, startSeen, pinnedColumns.start);
+  // Intentionally accept deprecated MUI X `left` / `right` aliases.
+  // eslint-disable-next-line @typescript-eslint/no-deprecated -- alias merge
+  appendUnique(start, startSeen, pinnedColumns.left);
+
+  const endSeen = new Set<string>();
+  const end: string[] = [];
+  const appendEnd = (fields: readonly string[] | undefined) => {
+    if (fields == null) {
+      return;
+    }
+    for (const raw of fields) {
+      const field = resolvePinnedFieldId(raw);
+      if (startSeen.has(field)) {
+        warnConflictPinnedField(field);
+        continue;
+      }
+      if (endSeen.has(field)) {
+        continue;
+      }
+      const isSelect = field === SELECT_COLUMN_ID;
+      if (isSelect ? !checkboxSelection : !knownFields.has(field)) {
+        warnUnknownPinnedField(raw);
+        continue;
+      }
+      endSeen.add(field);
+      end.push(field);
+    }
+  };
+  appendEnd(pinnedColumns.end);
+  // eslint-disable-next-line @typescript-eslint/no-deprecated -- alias merge
+  appendEnd(pinnedColumns.right);
+
+  if (checkboxSelection && start.length > 0) {
+    const withoutSelect = start.filter((field) => field !== SELECT_COLUMN_ID);
+    start.length = 0;
+    start.push(SELECT_COLUMN_ID, ...withoutSelect);
+  }
+
+  return { start, end };
+}
+
+export function resolveColumnAlign<R extends GridValidRowModel>(
+  col: GridColDef<R> | undefined,
+): TableAlignment {
+  if (!col) {
+    return 'start';
+  }
+  return normalizeGridAlignment(col.align ?? typeDefaultAlign(col.type));
+}
+
+export function resolveColumnHeaderAlign<R extends GridValidRowModel>(
+  col: GridColDef<R> | undefined,
+): TableAlignment {
+  if (!col) {
+    return 'start';
+  }
+  return normalizeGridAlignment(col.headerAlign ?? col.align ?? typeDefaultAlign(col.type));
+}