@cdx-ui/data-grid 0.3.10 → 0.3.12

package/src/adapter/filterOperators.ts

@@ -0,0 +1,524 @@
+import type {
+  GridColDef,
+  GridColType,
+  GridFilterItem,
+  GridFilterOperator,
+  GridSingleSelectColDef,
+  GridValidRowModel,
+  GridValueOption,
+} from '../types';
+import {
+  getColumnFilterText,
+  normalizeFilterQuery,
+  untypedCellIncludesQuery,
+  usesDisplayFilter,
+} from './columnTypes';
+
+const STRING_OPERATORS: readonly GridFilterOperator[] = [
+  'contains',
+  'doesNotContain',
+  'equals',
+  'doesNotEqual',
+  'startsWith',
+  'endsWith',
+  'isEmpty',
+  'isNotEmpty',
+  'isAnyOf',
+];
+
+const NUMBER_OPERATORS: readonly GridFilterOperator[] = [
+  '=',
+  '!=',
+  '>',
+  '>=',
+  '<',
+  '<=',
+  'isEmpty',
+  'isNotEmpty',
+  'isAnyOf',
+];
+
+const DATE_OPERATORS: readonly GridFilterOperator[] = [
+  'is',
+  'not',
+  'after',
+  'onOrAfter',
+  'before',
+  'onOrBefore',
+  'isEmpty',
+  'isNotEmpty',
+];
+
+const BOOLEAN_OPERATORS: readonly GridFilterOperator[] = ['is'];
+
+const SINGLE_SELECT_OPERATORS: readonly GridFilterOperator[] = ['is', 'not', 'isAnyOf'];
+
+/** Operators a column of `type` accepts. An omitted `type` accepts the `string` operators. */
+export function getGridFilterOperators(type?: GridColType): readonly GridFilterOperator[] {
+  switch (type) {
+    case 'number':
+      return NUMBER_OPERATORS;
+    case 'date':
+    case 'dateTime':
+      return DATE_OPERATORS;
+    case 'boolean':
+      return BOOLEAN_OPERATORS;
+    case 'singleSelect':
+      return SINGLE_SELECT_OPERATORS;
+    default:
+      return STRING_OPERATORS;
+  }
+}
+
+/** The operator a filter UI preselects for a column of `type`. Matches MUI. */
+export function getDefaultFilterOperator(type?: GridColType): GridFilterOperator {
+  return getGridFilterOperators(type)[0];
+}
+
+const OPERATOR_LABELS: Record<GridFilterOperator, string> = {
+  contains: 'contains',
+  doesNotContain: 'does not contain',
+  equals: 'equals',
+  doesNotEqual: 'does not equal',
+  startsWith: 'starts with',
+  endsWith: 'ends with',
+  isEmpty: 'is empty',
+  isNotEmpty: 'is not empty',
+  isAnyOf: 'is any of',
+  '=': '=',
+  '!=': '!=',
+  '>': '>',
+  '>=': '>=',
+  '<': '<',
+  '<=': '<=',
+  is: 'is',
+  not: 'is not',
+  after: 'is after',
+  onOrAfter: 'is on or after',
+  before: 'is before',
+  onOrBefore: 'is on or before',
+};
+
+/** Short label for an operator, in the style of the MUI operator menu. */
+export function getFilterOperatorLabel(operator: GridFilterOperator): string {
+  return OPERATOR_LABELS[operator];
+}
+
+/** `isEmpty` and `isNotEmpty` ignore the item's `value`. */
+export function filterOperatorNeedsValue(operator: GridFilterOperator): boolean {
+  return operator !== 'isEmpty' && operator !== 'isNotEmpty';
+}
+
+/** True when a value-taking operator has nothing to compare against, so it filters nothing. */
+export function isBlankFilterValue(value: unknown): boolean {
+  if (value == null) {
+    return true;
+  }
+  if (typeof value === 'string') {
+    return value.trim().length === 0;
+  }
+  return Array.isArray(value) && value.length === 0;
+}
+
+export interface OperatorFilterValue {
+  operator: GridFilterOperator;
+  value: unknown;
+}
+
+const KNOWN_OPERATORS: ReadonlySet<string> = new Set([
+  ...STRING_OPERATORS,
+  ...NUMBER_OPERATORS,
+  ...DATE_OPERATORS,
+  ...BOOLEAN_OPERATORS,
+  ...SINGLE_SELECT_OPERATORS,
+]);
+
+/** Several filter items on one column. Every item must match. */
+export interface FilterValueGroup {
+  items: readonly unknown[];
+}
+
+export function isFilterValueGroup(filterValue: unknown): filterValue is FilterValueGroup {
+  return (
+    typeof filterValue === 'object' &&
+    filterValue !== null &&
+    'items' in filterValue &&
+    Array.isArray(filterValue.items)
+  );
+}
+
+export function isOperatorFilterValue(filterValue: unknown): filterValue is OperatorFilterValue {
+  return (
+    typeof filterValue === 'object' &&
+    filterValue !== null &&
+    'operator' in filterValue &&
+    typeof filterValue.operator === 'string' &&
+    KNOWN_OPERATORS.has(filterValue.operator)
+  );
+}
+
+const DATE_ONLY_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+
+function parseDate(value: unknown): Date | null {
+  if (value instanceof Date) {
+    return Number.isFinite(value.getTime()) ? value : null;
+  }
+  if (typeof value === 'number') {
+    const date = new Date(value);
+    return Number.isFinite(date.getTime()) ? date : null;
+  }
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const text = value.trim();
+  const dateOnly = DATE_ONLY_PATTERN.exec(text);
+  if (dateOnly) {
+    return new Date(Number(dateOnly[1]), Number(dateOnly[2]) - 1, Number(dateOnly[3]));
+  }
+  const date = new Date(text);
+  return Number.isFinite(date.getTime()) ? date : null;
+}
+
+function startOfDay(date: Date): number {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+
+function parseNumber(value: unknown): number | null {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : null;
+  }
+  if (typeof value === 'string' && value.trim().length > 0) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+}
+
+function parseBoolean(value: unknown): boolean | null {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  if (value === 'true') {
+    return true;
+  }
+  if (value === 'false') {
+    return false;
+  }
+  return null;
+}
+
+function isEmptyCell(value: unknown): boolean {
+  if (value == null || value === '') {
+    return true;
+  }
+  return typeof value === 'number' && Number.isNaN(value);
+}
+
+function toList(value: unknown): unknown[] {
+  return Array.isArray(value) ? value : [value];
+}
+
+function selectKey(value: unknown): string | null {
+  return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean'
+    ? String(value)
+    : null;
+}
+
+function sameSelectValue(a: unknown, b: unknown): boolean {
+  const keyA = selectKey(a);
+  return keyA !== null && keyA === selectKey(b);
+}
+
+function compareNumbers(operator: GridFilterOperator, cell: number, operand: number): boolean {
+  switch (operator) {
+    case '=':
+      return cell === operand;
+    case '!=':
+      return cell !== operand;
+    case '>':
+      return cell > operand;
+    case '>=':
+      return cell >= operand;
+    case '<':
+      return cell < operand;
+    case '<=':
+      return cell <= operand;
+    default:
+      return true;
+  }
+}
+
+function matchNumber(operator: GridFilterOperator, cell: unknown, operand: unknown): boolean {
+  const cellNumber = typeof cell === 'number' && Number.isFinite(cell) ? cell : null;
+  if (operator === 'isAnyOf') {
+    const operands = toList(operand)
+      .map(parseNumber)
+      .filter((n): n is number => n !== null);
+    return cellNumber !== null && operands.includes(cellNumber);
+  }
+  const operandNumber = parseNumber(operand);
+  if (operandNumber === null) {
+    return true;
+  }
+  if (cellNumber === null) {
+    return operator === '!=';
+  }
+  return compareNumbers(operator, cellNumber, operandNumber);
+}
+
+function matchDate(
+  type: 'date' | 'dateTime',
+  operator: GridFilterOperator,
+  cell: unknown,
+  operand: unknown,
+): boolean {
+  const operandDate = parseDate(operand);
+  if (operandDate === null) {
+    return true;
+  }
+  const cellDate = cell instanceof Date && Number.isFinite(cell.getTime()) ? cell : null;
+  if (cellDate === null) {
+    return operator === 'not';
+  }
+  const normalize = (date: Date) => (type === 'date' ? startOfDay(date) : date.getTime());
+  const cellTime = normalize(cellDate);
+  const operandTime = normalize(operandDate);
+  switch (operator) {
+    case 'is':
+      return cellTime === operandTime;
+    case 'not':
+      return cellTime !== operandTime;
+    case 'after':
+      return cellTime > operandTime;
+    case 'onOrAfter':
+      return cellTime >= operandTime;
+    case 'before':
+      return cellTime < operandTime;
+    case 'onOrBefore':
+      return cellTime <= operandTime;
+    default:
+      return true;
+  }
+}
+
+function matchText(operator: GridFilterOperator, text: string, operand: unknown): boolean {
+  if (operator === 'isAnyOf') {
+    const operands = toList(operand).filter((item) => !isBlankFilterValue(item));
+    return operands.some((item) => String(item) === text);
+  }
+  const needle = String(operand).trim().toLowerCase();
+  const haystack = text.toLowerCase();
+  switch (operator) {
+    case 'contains':
+      return haystack.includes(needle);
+    case 'doesNotContain':
+      return !haystack.includes(needle);
+    case 'equals':
+      return haystack === needle;
+    case 'doesNotEqual':
+      return haystack !== needle;
+    case 'startsWith':
+      return haystack.startsWith(needle);
+    case 'endsWith':
+      return haystack.endsWith(needle);
+    default:
+      return true;
+  }
+}
+
+function matchSingleSelect(operator: GridFilterOperator, cell: unknown, operand: unknown): boolean {
+  if (operator === 'isAnyOf') {
+    return toList(operand).some((item) => sameSelectValue(item, cell));
+  }
+  const operandValue = Array.isArray(operand) ? operand[0] : operand;
+  switch (operator) {
+    case 'is':
+      return sameSelectValue(operandValue, cell);
+    case 'not':
+      return !sameSelectValue(operandValue, cell);
+    default:
+      return true;
+  }
+}
+
+function matchBoolean(cell: unknown, operand: unknown): boolean {
+  const operandBoolean = parseBoolean(operand);
+  if (operandBoolean === null) {
+    return true;
+  }
+  return cell === operandBoolean;
+}
+
+/**
+ * Evaluates one operator filter against a cell. Operators the column's type does not accept,
+ * and operators whose operand is blank, filter nothing, as in MUI.
+ */
+export function matchesOperatorFilter<R extends GridValidRowModel>(
+  col: GridColDef<R>,
+  cell: unknown,
+  row: R,
+  { operator, value }: OperatorFilterValue,
+): boolean {
+  if (!getGridFilterOperators(col.type).includes(operator)) {
+    return true;
+  }
+  if (operator === 'isEmpty') {
+    return isEmptyCell(cell);
+  }
+  if (operator === 'isNotEmpty') {
+    return !isEmptyCell(cell);
+  }
+  if (isBlankFilterValue(value)) {
+    return true;
+  }
+  switch (col.type) {
+    case 'number':
+      return matchNumber(operator, cell, value);
+    case 'date':
+    case 'dateTime':
+      return matchDate(col.type, operator, cell, value);
+    case 'boolean':
+      return matchBoolean(cell, value);
+    case 'singleSelect':
+      return matchSingleSelect(operator, cell, value);
+    default:
+      return matchText(operator, cell == null ? '' : getColumnFilterText(col, cell, row), value);
+  }
+}
+
+/** False for items that filter nothing: a value-taking operator without a value, or blank text. */
+export function isActiveFilterItem(item: GridFilterItem): boolean {
+  if (item.operator !== undefined) {
+    return !filterOperatorNeedsValue(item.operator) || !isBlankFilterValue(item.value);
+  }
+  return normalizeFilterQuery(item.value).length > 0;
+}
+
+export function rowMatchesFilterItem<R extends GridValidRowModel>(
+  col: GridColDef<R>,
+  row: R,
+  item: GridFilterItem,
+): boolean {
+  const raw = row[col.field];
+  const cell: unknown = col.valueGetter ? col.valueGetter(raw, row, col) : raw;
+  if (item.operator !== undefined) {
+    return matchesOperatorFilter(col, cell, row, { operator: item.operator, value: item.value });
+  }
+  const query = normalizeFilterQuery(item.value);
+  if (usesDisplayFilter(col)) {
+    return getColumnFilterText(col, cell, row).toLowerCase().includes(query);
+  }
+  return untypedCellIncludesQuery(cell, query);
+}
+
+function selectOptions<R extends GridValidRowModel>(
+  col: GridSingleSelectColDef<R>,
+): readonly GridValueOption[] {
+  return typeof col.valueOptions === 'function' ? col.valueOptions({}) : col.valueOptions;
+}
+
+function coerceSelectToken<R extends GridValidRowModel>(col: GridColDef<R>, text: string): unknown {
+  if (col.type !== 'singleSelect') {
+    return text;
+  }
+  const trimmed = text.trim();
+  const match = selectOptions(col).find((option) => {
+    if (typeof option === 'object') {
+      return (
+        String(option.value) === trimmed || option.label.toLowerCase() === trimmed.toLowerCase()
+      );
+    }
+    return String(option).toLowerCase() === trimmed.toLowerCase();
+  });
+  if (!match) {
+    return text;
+  }
+  return typeof match === 'object' ? match.value : match;
+}
+
+/**
+ * Reads a header-filter field. `isAnyOf` splits on commas. Number pieces that round-trip
+ * become numbers. A `singleSelect` label (`Open`) becomes its stored value (`open`).
+ */
+export function headerFilterValueFromText<R extends GridValidRowModel>(
+  col: GridColDef<R> | undefined,
+  operator: GridFilterOperator,
+  text: string,
+): unknown {
+  if (!filterOperatorNeedsValue(operator)) {
+    return undefined;
+  }
+  if (operator === 'isAnyOf') {
+    const parts = text
+      .split(',')
+      .map((part) => part.trim())
+      .filter((part) => part.length > 0);
+    if (col?.type === 'number') {
+      return parts.map((part) => coerceFilterInput(col, '=', part));
+    }
+    if (col?.type === 'singleSelect') {
+      return parts.map((part) => coerceSelectToken(col, part));
+    }
+    return parts;
+  }
+  if (col?.type === 'singleSelect') {
+    return coerceSelectToken(col, text);
+  }
+  return coerceFilterInput(col, operator, text);
+}
+
+/**
+ * Converts header-input text to the typed operand its column and operator expect. Text that
+ * would not survive a round trip back into the input (`'1.'`, `'1.50'`) stays text, so typing
+ * is never rewritten under the cursor.
+ */
+export function coerceFilterInput<R extends GridValidRowModel>(
+  col: GridColDef<R> | undefined,
+  operator: GridFilterOperator,
+  text: string,
+): unknown {
+  if (operator === 'isAnyOf' || !filterOperatorNeedsValue(operator)) {
+    return text;
+  }
+  const trimmed = text.trim();
+  switch (col?.type) {
+    case 'number': {
+      const parsed = parseNumber(trimmed);
+      return parsed !== null && String(parsed) === trimmed ? parsed : text;
+    }
+    case 'date': {
+      return DATE_ONLY_PATTERN.test(trimmed) ? (parseDate(trimmed) ?? text) : text;
+    }
+    case 'boolean': {
+      return parseBoolean(trimmed) ?? text;
+    }
+    default:
+      return text;
+  }
+}
+
+function pad(value: number, length: number): string {
+  return String(value).padStart(length, '0');
+}
+
+/** The text a header filter input shows for an operand. */
+export function filterValueToInputText(value: unknown): string {
+  if (value == null) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value);
+  }
+  if (value instanceof Date) {
+    return Number.isFinite(value.getTime())
+      ? `${pad(value.getFullYear(), 4)}-${pad(value.getMonth() + 1, 2)}-${pad(value.getDate(), 2)}`
+      : '';
+  }
+  if (Array.isArray(value)) {
+    return value.map(filterValueToInputText).join(', ');
+  }
+  return '';
+}

package/src/adapter/pinning.ts

@@ -0,0 +1,125 @@
+import type { ViewStyle } from 'react-native';
+import type { ColumnPinningState } from '@tanstack/react-table';
+import { SELECT_COLUMN_ID, type GridColDef, type GridValidRowModel } from '../types';
+
+export const DEFAULT_PINNED_COLUMN_WIDTH = 100;
+export const SELECT_COLUMN_WIDTH = 56;
+
+export type ColumnPinEdge = 'start' | 'end';
+
+export function isColumnPinningActive(state: ColumnPinningState): boolean {
+  return state.start.length > 0 || state.end.length > 0;
+}
+
+export function pinnedFieldSet(state: ColumnPinningState): Set<string> {
+  return new Set([...state.start, ...state.end]);
+}
+
+export function pinnedColumnPixelWidth<R extends GridValidRowModel>(
+  columnId: string,
+  col: GridColDef<R> | undefined,
+): number {
+  if (columnId === SELECT_COLUMN_ID) {
+    return SELECT_COLUMN_WIDTH;
+  }
+  return Math.max(col?.width ?? DEFAULT_PINNED_COLUMN_WIDTH, col?.minWidth ?? 0);
+}
+
+export interface PinnedOffsetMaps {
+  start: ReadonlyMap<string, number>;
+  end: ReadonlyMap<string, number>;
+  startTotal: number;
+  endTotal: number;
+}
+
+export function buildPinnedOffsets<R extends GridValidRowModel>(
+  state: ColumnPinningState,
+  colByField: ReadonlyMap<string, GridColDef<R>>,
+): PinnedOffsetMaps {
+  const start = new Map<string, number>();
+  let startOffset = 0;
+  for (const id of state.start) {
+    start.set(id, startOffset);
+    startOffset += pinnedColumnPixelWidth(id, colByField.get(id));
+  }
+
+  const end = new Map<string, number>();
+  let endOffset = 0;
+  for (let index = state.end.length - 1; index >= 0; index -= 1) {
+    const id = state.end[index];
+    end.set(id, endOffset);
+    endOffset += pinnedColumnPixelWidth(id, colByField.get(id));
+  }
+
+  return { start, end, startTotal: startOffset, endTotal: endOffset };
+}
+
+export function pinnedCellStyle(edge: ColumnPinEdge, offset: number, isHeader: boolean): ViewStyle {
+  // Logical insets / sticky are valid on web; RN ViewStyle typing does not list them yet.
+  return {
+    position: 'sticky',
+    ...(edge === 'start' ? { insetInlineStart: offset } : { insetInlineEnd: offset }),
+    zIndex: isHeader ? 30 : 10,
+  } as unknown as ViewStyle;
+}
+
+/**
+ * Draws the pinned edge dividers on the scroll container itself so they reach its bottom when the
+ * rows are shorter than the viewport. A non-local background does not scroll with the content,
+ * matching sticky pinned cells, and its positioning area excludes scrollbars.
+ */
+export function pinnedEdgeGuidesImage(
+  offsets: Pick<PinnedOffsetMaps, 'startTotal' | 'endTotal'>,
+  color: string,
+  isRTL: boolean,
+): string | undefined {
+  const { startTotal, endTotal } = offsets;
+  const stops: string[] = [];
+  if (startTotal > 0) {
+    const edge = `${startTotal.toString()}px`;
+    const inner = `${(startTotal - 1).toString()}px`;
+    stops.push(
+      `transparent ${inner}`,
+      `${color} ${inner}`,
+      `${color} ${edge}`,
+      `transparent ${edge}`,
+    );
+  }
+  if (endTotal > 0) {
+    const edge = `calc(100% - ${endTotal.toString()}px)`;
+    const inner = `calc(100% - ${(endTotal - 1).toString()}px)`;
+    stops.push(
+      `transparent ${edge}`,
+      `${color} ${edge}`,
+      `${color} ${inner}`,
+      `transparent ${inner}`,
+    );
+  }
+  if (stops.length === 0) {
+    return undefined;
+  }
+  return `linear-gradient(${isRTL ? 'to left' : 'to right'}, ${stops.join(', ')})`;
+}
+
+const warnedPinnedFlexFields = new Set<string>();
+
+export function warnPinnedFlexColumns<R extends GridValidRowModel>(
+  columns: readonly GridColDef<R>[],
+  pinned: ReadonlySet<string>,
+): void {
+  if (!__DEV__) {
+    return;
+  }
+  for (const column of columns) {
+    if (
+      pinned.has(column.field) &&
+      (column.flex ?? 0) > 0 &&
+      !warnedPinnedFlexFields.has(column.field)
+    ) {
+      warnedPinnedFlexFields.add(column.field);
+      console.warn(
+        `[DataGrid] Pinned column "${column.field}" ignores flex and uses a fixed width.`,
+      );
+    }
+  }
+}

package/src/index.ts

@@ -1,18 +1,33 @@
 export { DataGrid } from './DataGrid';
+export { getDefaultFilterOperator, getGridFilterOperators } from './adapter/filterOperators';
+export { gridDeltaNumberColDef, gridPolarityNumberColDef } from './numberCells';
+export type {
+  GridDeltaNumberColDefOptions,
+  GridDeltaNumberSymbol,
+  GridNumberCellDensity,
+  GridPolarityNumberColDefOptions,
+} from './numberCells';
 export type {
   DataGridProps,
   GridAlignment,
+  GridBaseColDef,
   GridColDef,
+  GridColType,
   GridFeatureMode,
   GridFilterItem,
   GridFilterModel,
+  GridFilterOperator,
+  GridLogicOperator,
   GridPaginationModel,
+  GridPinnedColumnFields,
   GridRenderCellParams,
   GridRowId,
   GridRowSelectionModel,
   GridRowsProp,
+  GridSingleSelectColDef,
   GridSortDirection,
   GridSortItem,
   GridSortModel,
   GridValidRowModel,
+  GridValueOption,
 } from './types';