@wix/patterns 1.364.0 → 1.369.0

package/src/state/EditableTable/CellInteractionState.ts

@@ -0,0 +1,353 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+import type { Cell, CellBorder } from './types';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from './EditableTableState';
+import { cellKey, parseCellKey, noBorder } from './utils';
+
+type Direction = 'up' | 'down' | 'left' | 'right';
+type CommitHandler = (editingValue: any, cell: Cell) => void;
+export type EditTrigger = 'type' | 'enter' | 'doubleClick';
+
+export class CellInteractionState<T, F extends FiltersMap> {
+  focusedCell: Cell | null = null;
+  editingCell: Cell | null = null;
+  editingValue: any = undefined;
+  editTrigger: EditTrigger | null = null;
+  selectedCells = new Set<string>();
+  selectionAnchor: Cell | null = null;
+  focusedCellElement: HTMLElement | null = null;
+  private readonly _parent: EditableTableState<T, F>;
+  private readonly _commitHandler: CommitHandler;
+
+  constructor(commitHandler: CommitHandler, parent: EditableTableState<T, F>) {
+    this._commitHandler = commitHandler;
+    this._parent = parent;
+    makeObservable(this, {
+      focusedCell: observable.ref,
+      editingCell: observable.ref,
+      editingValue: observable.ref,
+      editTrigger: observable.ref,
+      selectedCells: observable,
+      selectionAnchor: observable.ref,
+      isEditing: computed,
+      selectedCellsList: computed,
+      focusCell: action,
+      clearFocus: action,
+      startEdit: action,
+      commitEdit: action,
+      cancelEdit: action,
+      setEditingValue: action,
+      selectRange: action,
+      selectAll: action,
+      moveFocus: action,
+      moveToNextCell: action,
+      moveToPreviousCell: action,
+    });
+  }
+
+  get isEditing(): boolean {
+    return this.editingCell !== null;
+  }
+
+  focusCell(rowKey: string, columnId: string) {
+    if (this.editingCell) {
+      this.commitEdit();
+    }
+    this.focusedCell = { rowKey, columnId };
+    this.selectedCells.clear();
+    this.selectedCells.add(cellKey(rowKey, columnId));
+    this.selectionAnchor = { rowKey, columnId };
+  }
+
+  clearFocus() {
+    this.focusedCell = null;
+    this.selectedCells.clear();
+    this.selectionAnchor = null;
+    this.cancelEdit();
+  }
+
+  startEdit(
+    rowKey?: string,
+    columnId?: string,
+    trigger: EditTrigger = 'enter',
+  ) {
+    const rk = rowKey ?? this.focusedCell?.rowKey;
+    const cid = columnId ?? this.focusedCell?.columnId;
+    if (rk != null && cid != null) {
+      this.editingValue = undefined;
+      this.editTrigger = trigger;
+      this.editingCell = { rowKey: rk, columnId: cid };
+      this.focusedCell = { rowKey: rk, columnId: cid };
+    }
+  }
+
+  setEditingValue(value: any) {
+    this.editingValue = value;
+  }
+
+  commitEdit() {
+    try {
+      if (this.editingCell) {
+        this._commitHandler(this.editingValue, this.editingCell);
+      }
+    } finally {
+      this.editingValue = undefined;
+      this.editTrigger = null;
+      this.editingCell = null;
+    }
+  }
+
+  cancelEdit() {
+    this.editingValue = undefined;
+    this.editTrigger = null;
+    this.editingCell = null;
+  }
+
+  selectRange(from: Cell, to: Cell) {
+    const fromPos = this._parent._toIndices(from);
+    const toPos = this._parent._toIndices(to);
+    if (!fromPos || !toPos) {
+      return;
+    }
+
+    const { keyedItems, editableColumns } = this._parent;
+    const minRow = Math.min(fromPos.row, toPos.row);
+    const maxRow = Math.max(fromPos.row, toPos.row);
+    const minCol = Math.min(fromPos.col, toPos.col);
+    const maxCol = Math.max(fromPos.col, toPos.col);
+
+    const newKeys = new Set<string>();
+    for (let r = minRow; r <= maxRow; r++) {
+      for (let c = minCol; c <= maxCol; c++) {
+        newKeys.add(cellKey(keyedItems[r].key, editableColumns[c].id));
+      }
+    }
+
+    this._diffSelection(newKeys);
+    this.focusedCell = to;
+  }
+
+  selectAll() {
+    const { keyedItems, editableColumns } = this._parent;
+    const newKeys = new Set<string>();
+    for (const ki of keyedItems) {
+      for (const col of editableColumns) {
+        newKeys.add(cellKey(ki.key, col.id));
+      }
+    }
+
+    this._diffSelection(newKeys);
+
+    if (keyedItems.length > 0 && editableColumns.length > 0) {
+      this.selectionAnchor = this._parent._toPosition(0, 0)!;
+      this.focusedCell = this._parent._toPosition(
+        keyedItems.length - 1,
+        editableColumns.length - 1,
+      )!;
+    }
+  }
+
+  moveFocus(direction: Direction, extend = false) {
+    const pos = this.focusedCell && this._parent._toIndices(this.focusedCell);
+    if (!pos) {
+      return;
+    }
+
+    const { keyedItems, editableColumns } = this._parent;
+    let { row, col } = pos;
+
+    switch (direction) {
+      case 'up':
+        row = Math.max(0, row - 1);
+        break;
+      case 'down':
+        row = Math.min(keyedItems.length - 1, row + 1);
+        break;
+      case 'left':
+        col = Math.max(0, col - 1);
+        break;
+      case 'right':
+        col = Math.min(editableColumns.length - 1, col + 1);
+        break;
+    }
+
+    const target = this._parent._toPosition(row, col)!;
+    if (extend && this.selectionAnchor) {
+      this.selectRange(this.selectionAnchor, target);
+    } else {
+      this.focusCell(target.rowKey, target.columnId);
+    }
+  }
+
+  moveToNextCell() {
+    const pos = this.focusedCell && this._parent._toIndices(this.focusedCell);
+    if (!pos) {
+      return;
+    }
+
+    const { keyedItems, editableColumns } = this._parent;
+    let { row, col } = pos;
+
+    col++;
+    if (col >= editableColumns.length) {
+      col = 0;
+      row++;
+      if (row >= keyedItems.length) {
+        row = keyedItems.length - 1;
+        col = editableColumns.length - 1;
+      }
+    }
+    this.focusCell(keyedItems[row].key, editableColumns[col].id);
+  }
+
+  moveToPreviousCell() {
+    const pos = this.focusedCell && this._parent._toIndices(this.focusedCell);
+    if (!pos) {
+      return;
+    }
+
+    const { keyedItems, editableColumns } = this._parent;
+    let { row, col } = pos;
+
+    col--;
+    if (col < 0) {
+      col = editableColumns.length - 1;
+      row--;
+      if (row < 0) {
+        row = 0;
+        col = 0;
+      }
+    }
+    this.focusCell(keyedItems[row].key, editableColumns[col].id);
+  }
+
+  private _diffSelection(newKeys: Set<string>) {
+    for (const key of this.selectedCells) {
+      if (!newKeys.has(key)) {
+        this.selectedCells.delete(key);
+      }
+    }
+    for (const key of newKeys) {
+      if (!this.selectedCells.has(key)) {
+        this.selectedCells.add(key);
+      }
+    }
+  }
+
+  isCellFocused(rowKey: string, columnId: string): boolean {
+    return (
+      this.focusedCell?.rowKey === rowKey &&
+      this.focusedCell?.columnId === columnId
+    );
+  }
+
+  isCellEditing(rowKey: string, columnId: string): boolean {
+    return (
+      this.editingCell?.rowKey === rowKey &&
+      this.editingCell?.columnId === columnId
+    );
+  }
+
+  isCellSelected(rowKey: string, columnId: string): boolean {
+    return this.selectedCells.has(cellKey(rowKey, columnId));
+  }
+
+  get selectedCellsList(): Cell[] {
+    const result: Cell[] = [];
+    for (const key of this.selectedCells) {
+      const pos = parseCellKey(key);
+      if (pos) {
+        result.push(pos);
+      }
+    }
+    return result;
+  }
+
+  scrollFocusedCellIntoView() {
+    if (typeof requestAnimationFrame === 'undefined') {
+      return;
+    }
+    requestAnimationFrame(() => {
+      const cellEl = this.focusedCellElement;
+      if (!cellEl) {
+        return;
+      }
+
+      cellEl.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      this._adjustScrollForStickyElements(cellEl);
+    });
+  }
+
+  /**
+   * After scrollIntoView, the cell may be hidden behind sticky columns
+   * or the sticky header. If so, scroll a bit more to fully reveal it.
+   */
+  private _adjustScrollForStickyElements(cellEl: HTMLElement) {
+    const td = cellEl.parentElement;
+    if (!td) {
+      return;
+    }
+
+    // Horizontal: check if cell is behind a sticky column.
+    // Sticky columns stay in place while other columns scroll, so their
+    // bounding rect's right edge can overlap the focused cell's left edge.
+    const row = td.parentElement;
+    const cellLeft = td.getBoundingClientRect().left;
+    if (row) {
+      let maxPrevRight = 0;
+      for (const child of Array.from(row.children)) {
+        if (child === td) {
+          break;
+        }
+        const right = child.getBoundingClientRect().right;
+        if (right > maxPrevRight) {
+          maxPrevRight = right;
+        }
+      }
+      if (cellLeft < maxPrevRight) {
+        const scrollParent = cellEl.closest('table')?.parentElement;
+        if (scrollParent) {
+          scrollParent.scrollLeft -= maxPrevRight - cellLeft;
+        }
+      }
+    }
+
+    // Vertical: check if cell is behind the sticky header/toolbar.
+    const headerEl = this._parent.tableState.headerElement;
+    const scrollEl = this._parent.collection.scrollableContent;
+    if (headerEl && scrollEl) {
+      const headerBottom = headerEl.getBoundingClientRect().bottom;
+      const cellTop = td.getBoundingClientRect().top;
+      if (cellTop < headerBottom) {
+        // +2px buffer to prevent the cell from touching the header border
+        scrollEl.scrollTop -= headerBottom - cellTop + 2;
+      }
+    }
+  }
+
+  getSelectionBorder(rowKey: string, columnId: string): CellBorder {
+    if (!this.isCellSelected(rowKey, columnId)) {
+      return noBorder;
+    }
+
+    const pos = this._parent._toIndices({ rowKey, columnId });
+    if (!pos) {
+      return noBorder;
+    }
+
+    const isNeighborSelected = (row: number, col: number) => {
+      const neighbor = this._parent._toPosition(row, col);
+      return (
+        neighbor !== null &&
+        this.selectedCells.has(cellKey(neighbor.rowKey, neighbor.columnId))
+      );
+    };
+
+    return {
+      top: !isNeighborSelected(pos.row - 1, pos.col),
+      bottom: !isNeighborSelected(pos.row + 1, pos.col),
+      left: !isNeighborSelected(pos.row, pos.col - 1),
+      right: !isNeighborSelected(pos.row, pos.col + 1),
+    };
+  }
+}

package/src/state/EditableTable/CellValueState.ts

@@ -0,0 +1,274 @@
+import { action, makeObservable, observable } from 'mobx';
+import type { CellType, Cell, ValidationResult } from './types';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from './EditableTableState';
+import {
+  builtInCellTypes,
+  textCellType,
+} from '../../components/EditableTable/cellTypes';
+import { runCellValidation, validResult } from './utils';
+
+const cellTypeMap = new Map<string, CellType>(
+  builtInCellTypes.map((ct) => [ct.type, ct]),
+);
+
+export class CellValueState<T, F extends FiltersMap> {
+  /** Pending invalid cell values, keyed by `${itemId}:${colId}`. */
+  readonly _pendingCells = new Map<string, { value: any; errors: string[] }>();
+
+  private readonly _parent: EditableTableState<T, F>;
+
+  constructor(parent: EditableTableState<T, F>) {
+    this._parent = parent;
+
+    makeObservable(this, {
+      _pendingCells: observable,
+      clearCells: action,
+      toggleCell: action,
+      commitHandler: action,
+      applyBulkRawValues: action,
+      applyBulkValues: action,
+    });
+  }
+
+  resolveCellType(type: string): CellType {
+    return cellTypeMap.get(type) ?? textCellType;
+  }
+
+  getCellDisplayValue(rowKey: string, columnId: string): any {
+    const pending = this._getPendingCell(rowKey, columnId);
+    if (pending) {
+      return pending.value;
+    }
+    const column = this._parent._columnMap.get(columnId);
+    const keyedItem = this._parent._getKeyedItem(rowKey);
+    return column && keyedItem ? column.getValue(keyedItem.item) : undefined;
+  }
+
+  getCellValidation(rowKey: string, columnId: string): ValidationResult {
+    const pending = this._getPendingCell(rowKey, columnId);
+    if (pending) {
+      return { valid: false, errors: pending.errors };
+    }
+    return validResult;
+  }
+
+  isCellEditable(rowKey: string, columnId: string): boolean {
+    const column = this._parent._columnMap.get(columnId);
+    if (!column) {
+      return false;
+    }
+
+    const resolved = this.resolveCellType(column.cellType);
+    if (resolved.editable === false || !resolved.EditComponent) {
+      return false;
+    }
+    if (!column.setValue) {
+      return false;
+    }
+
+    if (typeof column.editable === 'function') {
+      const keyedItem = this._parent._getKeyedItem(rowKey);
+      return keyedItem ? column.editable(keyedItem.item) : false;
+    }
+    return column.editable !== false;
+  }
+
+  /** Serialize a cell value to a string (for clipboard copy/cut). */
+  serializeCellValue(rowKey: string, columnId: string): string {
+    const column = this._parent._columnMap.get(columnId);
+    const keyedItem = this._parent._getKeyedItem(rowKey);
+    if (!column || !keyedItem) {
+      return '';
+    }
+    const resolved = this.resolveCellType(column.cellType);
+    const pending = this._getPendingCell(rowKey, columnId);
+    const value = pending ? pending.value : column.getValue(keyedItem.item);
+    return resolved.serialize ? resolved.serialize(value) : String(value ?? '');
+  }
+
+  /** Clear selected cells (Delete/Backspace). Respects cellType.clearable. */
+  clearCells(cells: Cell[]) {
+    const changes: { rowKey: string; columnId: string; value: any }[] = [];
+
+    for (const cell of cells) {
+      const column = this._parent._columnMap.get(cell.columnId);
+      if (!column?.setValue) {
+        continue;
+      }
+      const resolved = this.resolveCellType(column.cellType);
+      if (resolved.clearable === false) {
+        continue;
+      }
+
+      const pendingKey = this._pendingCellKey(cell.rowKey, cell.columnId);
+      if (pendingKey) {
+        this._pendingCells.delete(pendingKey);
+      }
+      const value = resolved.deserialize ? resolved.deserialize('') : '';
+      changes.push({ rowKey: cell.rowKey, columnId: cell.columnId, value });
+    }
+
+    if (changes.length > 0) {
+      this.applyBulkValues(changes);
+    }
+  }
+
+  toggleCell(rowKey: string, columnId: string) {
+    const column = this._parent._columnMap.get(columnId);
+    const keyedItem = this._parent._getKeyedItem(rowKey);
+    if (!column?.setValue || !keyedItem) {
+      return;
+    }
+
+    const resolved = this.resolveCellType(column.cellType);
+    if (!resolved.toggleValue) {
+      return;
+    }
+
+    const value = column.getValue(keyedItem.item);
+    const newValue = resolved.toggleValue(value);
+    const updatedItem = column.setValue(keyedItem.item, newValue);
+    this._parent.mutation.updateItems([updatedItem]);
+  }
+
+  /** Commit handler — used as callback for CellInteractionState. */
+  commitHandler(editingValue: any, cell: Cell) {
+    if (editingValue !== undefined) {
+      this._applyValue(cell.rowKey, cell.columnId, editingValue);
+    }
+  }
+
+  private _getPendingCell(
+    rowKey: string,
+    columnId: string,
+  ): { value: any; errors: string[] } | undefined {
+    const key = this._pendingCellKey(rowKey, columnId);
+    return key ? this._pendingCells.get(key) : undefined;
+  }
+
+  private _pendingCellKey(
+    rowKey: string,
+    columnId: string,
+  ): string | undefined {
+    const keyedItem = this._parent._getKeyedItem(rowKey);
+    const column = this._parent._columnMap.get(columnId);
+    if (!keyedItem || !column) {
+      return undefined;
+    }
+    return `${keyedItem.key}:${column.id}`;
+  }
+
+  /**
+   * Deserialize a raw string to a typed value. Returns an error message
+   * if the conversion fails
+   */
+  tryDeserialize(
+    columnId: string,
+    rawValue: string,
+  ): { value: any; error?: string } {
+    const column = this._parent._columnMap.get(columnId);
+    if (!column) {
+      return { value: rawValue };
+    }
+    const resolved = this.resolveCellType(column.cellType);
+    if (!resolved.deserialize) {
+      return { value: rawValue };
+    }
+    try {
+      return { value: resolved.deserialize(rawValue) };
+    } catch {
+      return { value: rawValue, error: 'Value is not compatible' };
+    }
+  }
+
+  /**
+   * Deserialize and apply multiple raw string values in bulk.
+   * Handles conversion failures by storing them as pending cells.
+   */
+  applyBulkRawValues(
+    rawChanges: { rowKey: string; columnId: string; rawValue: string }[],
+  ) {
+    const changes: { rowKey: string; columnId: string; value: any }[] = [];
+    for (const { rowKey, columnId, rawValue } of rawChanges) {
+      const { value, error } = this.tryDeserialize(columnId, rawValue);
+      if (error) {
+        const pendingKey = this._pendingCellKey(rowKey, columnId);
+        if (pendingKey) {
+          this._pendingCells.set(pendingKey, { value, errors: [error] });
+        }
+      } else {
+        changes.push({ rowKey, columnId, value });
+      }
+    }
+    this.applyBulkValues(changes);
+  }
+
+  /**
+   * Apply multiple cell values in bulk. Validates per cell, accumulates
+   * changes per row, and submits all modified items in a single update.
+   */
+  applyBulkValues(changes: { rowKey: string; columnId: string; value: any }[]) {
+    const rowItems = new Map<string, T>();
+
+    for (const { rowKey, columnId, value } of changes) {
+      const column = this._parent._columnMap.get(columnId);
+      const keyedItem = this._parent._getKeyedItem(rowKey);
+      if (!column?.setValue || !keyedItem) {
+        continue;
+      }
+
+      const resolved = this.resolveCellType(column.cellType);
+      const result = runCellValidation(
+        value,
+        column.validation,
+        resolved.validate,
+      );
+      const pendingKey = this._pendingCellKey(rowKey, columnId);
+
+      if (result.valid) {
+        if (pendingKey) {
+          this._pendingCells.delete(pendingKey);
+        }
+        const currentItem = rowItems.get(rowKey) ?? keyedItem.item;
+        rowItems.set(rowKey, column.setValue(currentItem, value));
+      } else if (pendingKey) {
+        this._pendingCells.set(pendingKey, {
+          value,
+          errors: result.errors ?? [],
+        });
+      }
+    }
+
+    this._parent.mutation.updateItems(Array.from(rowItems.values()));
+  }
+
+  private _applyValue(rowKey: string, columnId: string, value: any) {
+    const column = this._parent._columnMap.get(columnId);
+    const keyedItem = this._parent._getKeyedItem(rowKey);
+    if (!column?.setValue || !keyedItem) {
+      return;
+    }
+
+    const resolved = this.resolveCellType(column.cellType);
+    const result = runCellValidation(
+      value,
+      column.validation,
+      resolved.validate,
+    );
+    const pendingKey = this._pendingCellKey(rowKey, columnId);
+
+    if (result.valid) {
+      if (pendingKey) {
+        this._pendingCells.delete(pendingKey);
+      }
+      const updatedItem = column.setValue(keyedItem.item, value);
+      this._parent.mutation.updateItems([updatedItem]);
+    } else if (pendingKey) {
+      this._pendingCells.set(pendingKey, {
+        value,
+        errors: result.errors ?? [],
+      });
+    }
+  }
+}