@cdx-ui/data-grid 0.3.11 → 0.3.13

package/src/adapter/treeData.ts

@@ -0,0 +1,228 @@
+export interface GridTreeIndex<R> {
+  roots: R[];
+  childrenOf: Map<R, R[]>;
+  rowOf: Map<string, R>;
+  parentKeyOf: Map<string, string>;
+  childKeysOf: Map<string, string[]>;
+  depthOf: Map<string, number>;
+  /** Deepest rows first, so a parent is visited after all of its descendants. */
+  keysDeepestFirst: string[];
+}
+
+export type GridTreeSelectionStatus = 'all' | 'some' | 'none';
+
+/** The shape TanStack rows share; filtered and sorted rows carry their filtered `subRows`. */
+export interface GridTreeRowLike {
+  id: string;
+  subRows: readonly GridTreeRowLike[];
+}
+
+const pathKey = (path: readonly string[]) => JSON.stringify(path);
+
+const warnedDuplicatePaths = new Set<string>();
+
+export function buildTreeIndex<R>(
+  rows: readonly R[],
+  getTreeDataPath: (row: R) => readonly string[],
+  keyOf: (row: R) => string,
+): GridTreeIndex<R> {
+  const byPath = new Map<string, R>();
+  const paths = new Map<R, readonly string[]>();
+  for (const row of rows) {
+    const path = getTreeDataPath(row);
+    const key = pathKey(path);
+    if (__DEV__ && byPath.has(key) && !warnedDuplicatePaths.has(key)) {
+      warnedDuplicatePaths.add(key);
+      console.warn(`[DataGrid] Duplicate tree data path ${key}. Paths must be unique.`);
+    }
+    byPath.set(key, row);
+    paths.set(row, path);
+  }
+
+  const roots: R[] = [];
+  const childrenOf = new Map<R, R[]>();
+  const rowOf = new Map<string, R>();
+  const parentKeyOf = new Map<string, string>();
+  const childKeysOf = new Map<string, string[]>();
+
+  for (const row of rows) {
+    const path = paths.get(row) ?? [];
+    const key = keyOf(row);
+    rowOf.set(key, row);
+    let parent: R | undefined;
+    for (let length = path.length - 1; length > 0 && parent === undefined; length -= 1) {
+      parent = byPath.get(pathKey(path.slice(0, length)));
+    }
+    if (parent === undefined || parent === row) {
+      roots.push(row);
+      continue;
+    }
+    const parentKey = keyOf(parent);
+    parentKeyOf.set(key, parentKey);
+    const siblings = childrenOf.get(parent);
+    if (siblings) {
+      siblings.push(row);
+    } else {
+      childrenOf.set(parent, [row]);
+    }
+    const siblingKeys = childKeysOf.get(parentKey);
+    if (siblingKeys) {
+      siblingKeys.push(key);
+    } else {
+      childKeysOf.set(parentKey, [key]);
+    }
+  }
+
+  const depthOf = new Map<string, number>();
+  const breadthFirst = roots.map((row) => keyOf(row));
+  for (const key of breadthFirst) {
+    depthOf.set(key, 0);
+  }
+  // The array iterator also visits children pushed during the loop.
+  for (const key of breadthFirst) {
+    for (const child of childKeysOf.get(key) ?? []) {
+      depthOf.set(child, (depthOf.get(key) ?? 0) + 1);
+      breadthFirst.push(child);
+    }
+  }
+
+  return {
+    roots,
+    childrenOf,
+    rowOf,
+    parentKeyOf,
+    childKeysOf,
+    depthOf,
+    keysDeepestFirst: breadthFirst.reverse(),
+  };
+}
+
+/**
+ * With `propagateParents`, a parent is `all` exactly when every child is `all`, whatever the model
+ * says about the parent itself. Without it, a parent's own selection decides, and partly selected
+ * descendants show as `some`.
+ */
+export function computeTreeSelection<R>(
+  index: GridTreeIndex<R>,
+  selected: ReadonlySet<string>,
+  propagateParents: boolean,
+): Map<string, GridTreeSelectionStatus> {
+  const status = new Map<string, GridTreeSelectionStatus>();
+  for (const key of index.keysDeepestFirst) {
+    const isSelected = selected.has(key);
+    const children = index.childKeysOf.get(key);
+    if (!children?.length) {
+      status.set(key, isSelected ? 'all' : 'none');
+      continue;
+    }
+    let all = true;
+    let some = false;
+    for (const child of children) {
+      const childStatus = status.get(child) ?? 'none';
+      if (childStatus !== 'all') {
+        all = false;
+      }
+      if (childStatus !== 'none') {
+        some = true;
+      }
+    }
+    if (propagateParents) {
+      status.set(key, all ? 'all' : some || isSelected ? 'some' : 'none');
+    } else {
+      status.set(key, isSelected ? 'all' : some ? 'some' : 'none');
+    }
+  }
+  return status;
+}
+
+export function applyTreeSelection<R>(
+  index: GridTreeIndex<R>,
+  selected: ReadonlySet<string>,
+  targets: readonly string[],
+  value: boolean,
+  propagateParents: boolean,
+): Set<string> {
+  const next = new Set(selected);
+  for (const key of targets) {
+    if (value) {
+      next.add(key);
+    } else {
+      next.delete(key);
+    }
+  }
+  if (propagateParents) {
+    for (const key of index.keysDeepestFirst) {
+      const children = index.childKeysOf.get(key);
+      if (!children?.length) {
+        continue;
+      }
+      if (children.every((child) => next.has(child))) {
+        next.add(key);
+      } else {
+        next.delete(key);
+      }
+    }
+  }
+  return next;
+}
+
+/**
+ * Rows a toggle writes (`targets`) and the rows whose state decides the toggle direction
+ * (`units`). With `descendants`, a row's filtered sub-rows are included; a row whose children were
+ * all filtered out takes its whole subtree, so a matching group can still be picked.
+ */
+export function selectionScope<R>(
+  rows: readonly GridTreeRowLike[],
+  index: GridTreeIndex<R>,
+  descendants: boolean,
+): { targets: string[]; units: string[] } {
+  const targets: string[] = [];
+  const units: string[] = [];
+  const visitFullSubtree = (key: string) => {
+    targets.push(key);
+    const children = index.childKeysOf.get(key);
+    if (!children?.length) {
+      units.push(key);
+      return;
+    }
+    children.forEach(visitFullSubtree);
+  };
+  const visit = (row: GridTreeRowLike) => {
+    if (!descendants) {
+      targets.push(row.id);
+      units.push(row.id);
+      return;
+    }
+    if (row.subRows.length === 0) {
+      visitFullSubtree(row.id);
+      return;
+    }
+    targets.push(row.id);
+    row.subRows.forEach(visit);
+  };
+  rows.forEach(visit);
+  return { targets, units };
+}
+
+/** Keeps every row that matches and every ancestor of a match. */
+export function keepMatchesWithAncestors<R>(
+  rows: readonly R[],
+  index: GridTreeIndex<R>,
+  keyOf: (row: R) => string,
+  matches: (row: R) => boolean,
+): R[] {
+  const keep = new Set<string>();
+  for (const row of rows) {
+    if (!matches(row)) {
+      continue;
+    }
+    for (let key: string | undefined = keyOf(row); key !== undefined; ) {
+      if (keep.has(key)) {
+        break;
+      }
+      keep.add(key);
+      key = index.parentKeyOf.get(key);
+    }
+  }
+  return rows.filter((row) => keep.has(keyOf(row)));
+}

package/src/index.ts

@@ -1,18 +1,37 @@
 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,
+  GridColumnVisibilityModel,
   GridFeatureMode,
   GridFilterItem,
   GridFilterModel,
+  GridFilterOperator,
+  GridLogicOperator,
   GridPaginationModel,
+  GridPinnedColumnFields,
   GridRenderCellParams,
   GridRowId,
+  GridRowParams,
   GridRowSelectionModel,
+  GridRowSelectionPropagation,
   GridRowsProp,
+  GridSingleSelectColDef,
   GridSortDirection,
   GridSortItem,
   GridSortModel,
+  GridTreeNodeParams,
   GridValidRowModel,
+  GridValueOption,
 } from './types';

package/src/numberCells.tsx

@@ -0,0 +1,379 @@
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+import { Text } from '@cdx-ui/components';
+import {
+  ArrowDropDown,
+  ArrowDropUp,
+  TrendingDown,
+  TrendingFlat,
+  TrendingUp,
+  type ForgeIcon,
+} from '@cdx-ui/icons';
+import { cn } from '@cdx-ui/utils';
+import type { GridBaseColDef, GridColDef, GridValidRowModel } from './types';
+
+/** Unicode minus (U+2212). The spec requires this character, not a hyphen. */
+const MINUS = '\u2212';
+
+const defaultNumberFormat = new Intl.NumberFormat(undefined, { maximumFractionDigits: 20 });
+
+export type GridNumberCellDensity = 'default' | 'compact';
+
+export type GridDeltaNumberSymbol = 'arrow' | 'trendline' | 'sign';
+
+export interface GridPolarityNumberColDefOptions {
+  /**
+   * `default` uses body-md. `compact` uses body-sm.
+   * @default 'default'
+   */
+  density?: GridNumberCellDensity;
+  /**
+   * Formats the raw signed number. The cell turns a leading hyphen into −.
+   * Sorting uses the raw number. The header filter matches the number column's
+   * formatted value, not this string.
+   */
+  valueFormatter?: (value: number) => string;
+}
+
+export interface GridDeltaNumberColDefOptions {
+  /**
+   * Whether an increase is a favorable change. Color follows this together with
+   * the value's direction: an increase is success when this is true and danger
+   * when it is false; a decrease flips that. Zero stays primary either way.
+   * @default true
+   */
+  increaseIsGood?: boolean;
+  /**
+   * `arrow` uses drop arrows and leaves flat values blank. `trendline` uses
+   * trending icons, including a flat icon at zero. `sign` writes + or − in
+   * front of the value. Arrow and trendline hide the minus sign.
+   * @default 'arrow'
+   */
+  symbol?: GridDeltaNumberSymbol;
+  /**
+   * `default` uses body-md. `compact` uses body-sm.
+   * @default 'default'
+   */
+  density?: GridNumberCellDensity;
+  /**
+   * Formats the raw signed number. The cell applies the symbol's sign treatment
+   * on top of this string. Sorting uses the raw number. The header filter matches
+   * the number column's formatted value, not this string.
+   */
+  valueFormatter?: (value: number) => string;
+}
+
+type NumberTone = 'success' | 'danger' | 'neutral';
+type DeltaDirection = 'increase' | 'decrease' | 'flat';
+
+const TONE_CLASS: Record<NumberTone, string> = {
+  success: 'text-content-success',
+  danger: 'text-content-danger',
+  neutral: 'text-content-primary',
+};
+
+const ARROW_SLOT: Record<GridNumberCellDensity, string> = {
+  default: 'h-5 w-3.5 items-center justify-center overflow-hidden',
+  compact: 'h-4 w-3 items-center justify-center overflow-hidden',
+};
+
+const ARROW_SIZE: Record<GridNumberCellDensity, number> = {
+  default: 20,
+  compact: 16,
+};
+
+const TREND_SIZE: Record<GridNumberCellDensity, number> = {
+  default: 14,
+  compact: 12,
+};
+
+function toFiniteNumber(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+
+function columnValueFormatter<R extends GridValidRowModel>(
+  format: ((value: number) => string) | undefined,
+): GridColDef<R>['valueFormatter'] {
+  if (!format) {
+    return undefined;
+  }
+  return (value) => {
+    const numeric = toFiniteNumber(value);
+    return numeric == null ? '' : format(numeric);
+  };
+}
+
+function formatRaw<R extends GridValidRowModel>(value: number, row: R, col: GridColDef<R>): string {
+  const formatted = col.valueFormatter?.(value, row, col);
+  if (typeof formatted === 'string' && formatted.length > 0) {
+    return formatted;
+  }
+  return defaultNumberFormat.format(value);
+}
+
+function unsigned(formatted: string): string {
+  const withoutSign = formatted.replace(/^[-−+]\s*/, '');
+  if (withoutSign.startsWith('(') && withoutSign.endsWith(')')) {
+    return withoutSign.slice(1, -1);
+  }
+  return withoutSign;
+}
+
+function polarityOf(value: number): 'positive' | 'negative' | 'neutral' {
+  if (value > 0) {
+    return 'positive';
+  }
+  if (value < 0) {
+    return 'negative';
+  }
+  return 'neutral';
+}
+
+function directionOf(value: number): DeltaDirection {
+  if (value > 0) {
+    return 'increase';
+  }
+  if (value < 0) {
+    return 'decrease';
+  }
+  return 'flat';
+}
+
+function polarityTone(polarity: 'positive' | 'negative' | 'neutral'): NumberTone {
+  if (polarity === 'positive') {
+    return 'success';
+  }
+  if (polarity === 'negative') {
+    return 'danger';
+  }
+  return 'neutral';
+}
+
+function deltaTone(direction: DeltaDirection, increaseIsGood: boolean): NumberTone {
+  if (direction === 'flat') {
+    return 'neutral';
+  }
+  const favorable = direction === 'increase' ? increaseIsGood : !increaseIsGood;
+  return favorable ? 'success' : 'danger';
+}
+
+function polarityLabel(polarity: 'positive' | 'negative' | 'neutral'): string {
+  if (polarity === 'positive') {
+    return 'Positive';
+  }
+  if (polarity === 'negative') {
+    return 'Negative';
+  }
+  return 'Neutral';
+}
+
+function directionLabel(direction: DeltaDirection): string {
+  if (direction === 'increase') {
+    return 'Increase';
+  }
+  if (direction === 'decrease') {
+    return 'Decrease';
+  }
+  return 'No change';
+}
+
+function NumberReadout({
+  label,
+  display,
+  tone,
+  density,
+  children,
+}: {
+  label: string;
+  display: string;
+  tone: NumberTone;
+  density: GridNumberCellDensity;
+  children?: ReactNode;
+}) {
+  return (
+    <View className="relative flex-row items-center gap-0.5">
+      <Text className="absolute h-px w-px overflow-hidden opacity-0">{label}</Text>
+      <View
+        aria-hidden
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        className="flex-row items-center gap-0.5"
+      >
+        {children}
+        <Text
+          color={tone === 'neutral' ? 'primary' : tone}
+          size={density === 'compact' ? 'sm' : 'md'}
+        >
+          {display}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function ToneIcon({
+  icon: Icon,
+  tone,
+  size,
+  slotClassName,
+}: {
+  icon: ForgeIcon;
+  tone: NumberTone;
+  size: number;
+  slotClassName?: string;
+}) {
+  return (
+    <View className={cn(TONE_CLASS[tone], slotClassName)}>
+      <Icon size={size} />
+    </View>
+  );
+}
+
+function PolarityNumberCell<R extends GridValidRowModel>({
+  value,
+  row,
+  col,
+  density,
+}: {
+  value: unknown;
+  row: R;
+  col: GridColDef<R>;
+  density: GridNumberCellDensity;
+}) {
+  const numeric = toFiniteNumber(value);
+  if (numeric == null) {
+    return null;
+  }
+
+  const polarity = polarityOf(numeric);
+  const magnitude = unsigned(formatRaw(numeric, row, col));
+  const display = polarity === 'negative' ? `${MINUS}${magnitude}` : magnitude;
+
+  return (
+    <NumberReadout
+      label={`${polarityLabel(polarity)} ${magnitude}`}
+      display={display}
+      tone={polarityTone(polarity)}
+      density={density}
+    />
+  );
+}
+
+function DeltaSymbol({
+  direction,
+  tone,
+  density,
+  symbol,
+}: {
+  direction: DeltaDirection;
+  tone: NumberTone;
+  density: GridNumberCellDensity;
+  symbol: GridDeltaNumberSymbol;
+}) {
+  if (symbol === 'sign') {
+    return null;
+  }
+
+  if (symbol === 'arrow') {
+    if (direction === 'flat') {
+      return <View className={ARROW_SLOT[density]} />;
+    }
+    return (
+      <ToneIcon
+        icon={direction === 'increase' ? ArrowDropUp : ArrowDropDown}
+        tone={tone}
+        size={ARROW_SIZE[density]}
+        slotClassName={ARROW_SLOT[density]}
+      />
+    );
+  }
+
+  const icon =
+    direction === 'increase' ? TrendingUp : direction === 'decrease' ? TrendingDown : TrendingFlat;
+  return <ToneIcon icon={icon} tone={tone} size={TREND_SIZE[density]} />;
+}
+
+function DeltaNumberCell<R extends GridValidRowModel>({
+  value,
+  row,
+  col,
+  density,
+  increaseIsGood,
+  symbol,
+}: {
+  value: unknown;
+  row: R;
+  col: GridColDef<R>;
+  density: GridNumberCellDensity;
+  increaseIsGood: boolean;
+  symbol: GridDeltaNumberSymbol;
+}) {
+  const numeric = toFiniteNumber(value);
+  if (numeric == null) {
+    return null;
+  }
+
+  const direction = directionOf(numeric);
+  const tone = deltaTone(direction, increaseIsGood);
+  const magnitude = unsigned(formatRaw(numeric, row, col));
+  let display = magnitude;
+  if (symbol === 'sign' && direction === 'increase') {
+    display = `+${magnitude}`;
+  } else if (symbol === 'sign' && direction === 'decrease') {
+    display = `${MINUS}${magnitude}`;
+  }
+
+  return (
+    <NumberReadout
+      label={`${directionLabel(direction)} ${magnitude}`}
+      display={display}
+      tone={tone}
+      density={density}
+    >
+      <DeltaSymbol direction={direction} tone={tone} density={density} symbol={symbol} />
+    </NumberReadout>
+  );
+}
+
+export function gridPolarityNumberColDef<R extends GridValidRowModel>(
+  options: GridPolarityNumberColDefOptions = {},
+): Pick<GridBaseColDef<R>, 'type' | 'align' | 'headerAlign' | 'renderCell' | 'valueFormatter'> {
+  const density = options.density ?? 'default';
+  return {
+    type: 'number',
+    align: 'end',
+    headerAlign: 'end',
+    ...(options.valueFormatter
+      ? { valueFormatter: columnValueFormatter<R>(options.valueFormatter) }
+      : {}),
+    renderCell: ({ value, row, col }) => (
+      <PolarityNumberCell value={value} row={row} col={col} density={density} />
+    ),
+  };
+}
+
+export function gridDeltaNumberColDef<R extends GridValidRowModel>(
+  options: GridDeltaNumberColDefOptions = {},
+): Pick<GridBaseColDef<R>, 'type' | 'align' | 'headerAlign' | 'renderCell' | 'valueFormatter'> {
+  const density = options.density ?? 'default';
+  const increaseIsGood = options.increaseIsGood ?? true;
+  const symbol = options.symbol ?? 'arrow';
+  return {
+    type: 'number',
+    align: 'end',
+    headerAlign: 'end',
+    ...(options.valueFormatter
+      ? { valueFormatter: columnValueFormatter<R>(options.valueFormatter) }
+      : {}),
+    renderCell: ({ value, row, col }) => (
+      <DeltaNumberCell
+        value={value}
+        row={row}
+        col={col}
+        density={density}
+        increaseIsGood={increaseIsGood}
+        symbol={symbol}
+      />
+    ),
+  };
+}