@dxos/react-ui-table 0.8.3 → 0.8.4-main.03d5cd7b56

package/src/model/table-presentation.ts

@@ -2,24 +2,26 @@
 // Copyright 2024 DXOS.org
 //
 
-import { signal } from '@preact/signals-core';
-import { isNotNullable } from 'effect/Predicate';
+import { Atom, type Registry } from '@effect-atom/atom-react';
+import * as Predicate from 'effect/Predicate';
 
-import { FormatEnum, getObjectDXN, getValue, TypeEnum } from '@dxos/echo-schema';
+import { Obj } from '@dxos/echo';
+import { type View } from '@dxos/echo';
+import { Format, TypeEnum, getValue } from '@dxos/echo/internal';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
+  type DxGridCellValue,
   type DxGridPlane,
   type DxGridPlaneCells,
   type DxGridPlaneRange,
-  type DxGridCellValue,
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
-import { mx } from '@dxos/react-ui-theme';
-import { VIEW_FIELD_LIMIT, type FieldType } from '@dxos/schema';
+import { VIEW_FIELD_LIMIT } from '@dxos/schema';
+import { mx } from '@dxos/ui-theme';
 
-import { type SelectionMode } from './selection-model';
-import { type TableRow, type TableModel } from './table-model';
 import { tableButtons, tableControls } from '../util';
+import { type SelectionMode } from './selection-model';
+import { type TableModel, type TableRow } from './table-model';
 
 /**
  * Presentation layer for a table component, handling cell rendering and grid display logic.
@@ -27,20 +29,30 @@ import { tableButtons, tableControls } from '../util';
  * different grid planes.
  */
 export class TablePresentation<T extends TableRow = TableRow> {
+  private readonly _registry: Registry.Registry;
+  private readonly _visibleRange: Atom.Writable<DxGridPlaneRange>;
+  private fieldProjectionCache = new Map<string, ReturnType<typeof this.model.projection.getFieldProjection>>();
+
   constructor(
+    registry: Registry.Registry,
     private readonly model: TableModel<T>,
-    private readonly _visibleRange = signal<DxGridPlaneRange>({
+  ) {
+    this._registry = registry;
+    this._visibleRange = Atom.make<DxGridPlaneRange>({
       start: { row: 0, col: 0 },
       end: { row: 0, col: 0 },
-    }),
-  ) {}
+    });
+  }
 
   public getCells(range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells {
+    // Clear cache at the start of each render pass
+    this.fieldProjectionCache.clear();
+
     let cells: DxGridPlaneCells;
 
     switch (plane) {
       case 'grid':
-        this._visibleRange.value = range;
+        this._registry.set(this._visibleRange, range);
         cells = this.getMainGridCells(range);
         break;
       case 'frozenRowsStart':
@@ -58,12 +70,21 @@ export class TablePresentation<T extends TableRow = TableRow> {
       case 'fixedStartEnd':
         cells = this.getNewColumnCell();
         break;
+      case 'frozenRowsEnd':
+        cells = this.getDraftRowCells(range);
+        break;
+      case 'fixedEndStart':
+        cells = this.getDraftIconCells(range);
+        break;
+      case 'fixedEndEnd':
+        cells = this.getDraftActionCells(range);
+        break;
       default:
         cells = {};
     }
 
     if (plane === 'grid' && this.model.features.dataEditable === false) {
-      Object.values(cells).forEach((cell) => {
+      Object.values<DxGridCellValue>(cells).forEach((cell) => {
         cell.readonly = 'text-select';
       });
     }
@@ -71,155 +92,180 @@ export class TablePresentation<T extends TableRow = TableRow> {
     return cells;
   }
 
-  private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
-    const cells: DxGridPlaneCells = {};
-    const fields = this.model.view?.fields ?? [];
+  /**
+   * Gets a field projection, using cache if available within the current render pass.
+   */
+  private getFieldProjection(fieldId: string) {
+    let projection = this.fieldProjectionCache.get(fieldId);
+    if (!projection) {
+      projection = this.model.projection.getFieldProjection(fieldId);
+      this.fieldProjectionCache.set(fieldId, projection);
+    }
+    return projection;
+  }
 
-    const addCell = (obj: T, field: FieldType, colIndex: number, displayIndex: number): void => {
-      const { props } = this.model.projection.getFieldProjection(field.id);
+  private createDataCell(
+    cells: DxGridPlaneCells,
+    obj: T,
+    field: View.FieldType,
+    colIndex: number,
+    displayIndex: number,
+  ): void {
+    const { props } = this.getFieldProjection(field.id);
+
+    const cell: DxGridCellValue = {
+      get value() {
+        const value = getValue(obj, field.path);
+        if (value == null) {
+          return '';
+        }
 
-      const cell: DxGridCellValue = {
-        get value() {
-          const value = getValue(obj, field.path);
-          if (value == null) {
-            return '';
-          }
+        if (props.type === 'array') {
+          return '';
+        }
 
-          if (props.type === 'array') {
+        switch (props.format) {
+          case Format.TypeFormat.Boolean:
+          case Format.TypeFormat.SingleSelect:
+          case Format.TypeFormat.MultiSelect: {
             return '';
           }
-
-          switch (props.format) {
-            case FormatEnum.Boolean:
-            case FormatEnum.SingleSelect:
-            case FormatEnum.MultiSelect: {
-              return '';
+          case Format.TypeFormat.Ref: {
+            if (!field.referencePath) {
+              return ''; // TODO(burdon): Show error.
             }
-            case FormatEnum.Ref: {
-              if (!field.referencePath) {
-                return ''; // TODO(burdon): Show error.
-              }
 
-              return getValue(value.target, field.referencePath);
-            }
+            return getValue(value.target, field.referencePath);
+          }
 
-            default: {
-              return formatForDisplay({ type: props.type, format: props.format, value });
-            }
+          default: {
+            return formatForDisplay({ type: props.type, format: props.format, value });
           }
-        },
-      };
+        }
+      },
+    };
 
-      const classes = [];
-      const formatClasses = cellClassesForFieldType({ type: props.type, format: props.format });
-      if (formatClasses) {
-        classes.push(formatClasses);
-      }
-      const rowSelectionClasses = cellClassesForRowSelection(
-        this.model.selection.isObjectSelected(obj),
-        this.model.selection.selectionMode,
-      );
-      if (rowSelectionClasses) {
-        classes.push(rowSelectionClasses);
-      }
-      if (classes.length > 0) {
-        cell.className = mx(classes.flat());
-      }
+    const classes = [];
+    const formatClasses = cellClassesForFieldType(props);
 
-      if (props.type === TypeEnum.Array) {
-        const targetArray = getValue(obj, field.path);
-        if (targetArray && Array.isArray(targetArray)) {
-          // TODO(ZaymonFC): For arrays of objects, objects should have a 'label' annotation on the field
-          // that can be used to render tags.
-          // TODO(ZaymonFC): Move to util.
-          const getLabel = (value: any) => {
-            // If the value is falsy, return undefined
-            // If the object is an array, check for 'name' property
-            // If the object is a primitive type (string, number, boolean) stringify
-            // If the object is an array return 'Array'
-            if (!value) {
-              return undefined;
-            }
-            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-              return String(value);
-            }
-            if (Array.isArray(value)) {
-              return 'Array';
-            }
-            if (typeof value === 'object' && value.name) {
-              return value.name;
-            }
-            if (typeof value === 'object' && value.value) {
-              return `${value.value}`;
-            }
-            return 'Object';
-          };
-
-          const tags = targetArray
-            .map(getLabel)
-            .filter(isNotNullable)
-            .map((title) => {
-              return `<span class="dx-tag rounded-xl" data-hue="neutral">${title}</span>`;
-            })
-            .join('');
+    if (formatClasses) {
+      classes.push(formatClasses);
+    }
 
-          cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
-        }
-      }
+    const rowSelectionClasses = cellClassesForRowSelection(
+      this.model.selection.isObjectSelected(obj),
+      this.model.selection.selectionMode,
+    );
 
-      if (props.format === FormatEnum.Ref && props.referenceSchema) {
-        const targetObj = getValue(obj, field.path)?.target;
-        if (targetObj) {
-          const dxn = getObjectDXN(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
-        }
+    if (rowSelectionClasses) {
+      classes.push(rowSelectionClasses);
+    }
+
+    cell.className = mx(classes);
+
+    // Arrays.
+    if (props.type === TypeEnum.Array) {
+      const targetArray = getValue(obj, field.path);
+      if (targetArray && Array.isArray(targetArray)) {
+        // TODO(ZaymonFC): For arrays of objects, objects should have a 'label' annotation on the field
+        // that can be used to render tags.
+        // TODO(ZaymonFC): Move to util.
+        const getLabel = (value: any) => {
+          // If the value is falsy, return undefined
+          // If the object is an array, check for 'name' property
+          // If the object is a primitive type (string, number, boolean) stringify
+          // If the object is an array return 'Array'
+          if (!value) {
+            return undefined;
+          }
+          if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+            return String(value);
+          }
+          if (Array.isArray(value)) {
+            return 'Array';
+          }
+          if (typeof value === 'object' && value.name) {
+            return value.name;
+          }
+          if (typeof value === 'object' && value.value) {
+            return `${value.value}`;
+          }
+          return 'Object';
+        };
+
+        const tags = targetArray
+          .map(getLabel)
+          .filter(Predicate.isNotNullable)
+          .map((title) => {
+            return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
+          })
+          .join('');
+
+        cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
       }
+    }
 
-      if (props.format === FormatEnum.Boolean) {
-        const value = getValue(obj, field.path);
-        cell.accessoryHtml = tableControls.switch.render({
-          colIndex,
-          rowIndex: displayIndex,
-          checked: value ?? false,
-        });
-        cell.readonly = 'no-text-select';
+    // References.
+    if (props.format === Format.TypeFormat.Ref && props.referenceSchema) {
+      const targetObj = getValue(obj, field.path)?.target;
+      if (targetObj) {
+        const dxn = Obj.getDXN(targetObj)?.toString();
+        cell.accessoryHtml = `<div role="none" class="absolute end-0 inset-y-0 p-(--dx-grid-cell-content-padding-block)"><dx-anchor dxn=${dxn} class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
       }
+    }
 
-      if (props.format === FormatEnum.SingleSelect) {
-        const value = getValue(obj, field.path);
-        const options = this.model.projection.getFieldProjection(field.id).props.options;
-        if (options) {
-          const option = options.find((o) => o.id === value);
-          if (option) {
-            cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
-          }
+    // Booleans.
+    if (props.format === Format.TypeFormat.Boolean) {
+      const value = getValue(obj, field.path);
+      cell.accessoryHtml = tableControls.switch.render({
+        colIndex,
+        rowIndex: displayIndex,
+        checked: value ?? false,
+      });
+      cell.readonly = 'no-text-select';
+    }
+
+    // Single-Selects.
+    if (props.format === Format.TypeFormat.SingleSelect) {
+      const value = getValue(obj, field.path);
+      const options = this.model.projection.getFieldProjection(field.id).props.options;
+      if (options) {
+        const option = options.find((o) => o.id === value);
+        if (option) {
+          cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
         }
       }
+    }
 
-      if (props.format === FormatEnum.MultiSelect) {
-        const values = getValue(obj, field.path) as string[] | undefined;
-        const options = this.model.projection.getFieldProjection(field.id).props.options;
-        if (options && values && values.length > 0) {
-          const tags = values
-            .map((value) => {
-              const option = options.find((o) => o.id === value);
-              if (option) {
-                return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
-              }
-              return null;
-            })
-            .filter(Boolean)
-            .join(' ');
+    // Multi-Selects.
+    if (props.format === Format.TypeFormat.MultiSelect) {
+      const values = getValue(obj, field.path) as string[] | undefined;
+      const options = this.model.projection.getFieldProjection(field.id).props.options;
+      if (options && values && values.length > 0) {
+        const tags = values
+          .map((value) => {
+            const option = options.find((o) => o.id === value);
+            if (option) {
+              return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+            }
+            return null;
+          })
+          .filter(Boolean)
+          .join('');
 
-          if (tags) {
-            cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1">${tags}</div>`;
-          }
+        if (tags) {
+          cell.accessoryHtml = tags;
         }
       }
+    }
 
-      const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
-      cells[idx] = cell;
-    };
+    const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
+    cells[idx] = cell;
+  }
+
+  private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const fields = this.model.projection?.getFields() ?? [];
 
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
@@ -228,7 +274,48 @@ export class TablePresentation<T extends TableRow = TableRow> {
           continue;
         }
 
-        addCell(this.model.rows.value[row], field, col, row);
+        this.createDataCell(cells, this.model.getRows()[row], field, col, row);
+      }
+    }
+
+    return cells;
+  }
+
+  private getDraftRowCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const fields = this.model.projection?.getFields() ?? [];
+    const draftRows = this.model.getDraftRows();
+
+    // Return cells of the CTA row if no draft row is active
+    if (draftRows.length === 0) {
+      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+        cells[toPlaneCellIndex({ col, row: 0 })] = {
+          value: '',
+          readonly: true,
+          className: 'dx-grid__row--cta__cell',
+        };
+      }
+    } else {
+      for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+        const draftRow = draftRows[row];
+        for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+          const cellIndex = toPlaneCellIndex({ col, row });
+          const field = fields[col];
+          if (!field) {
+            continue;
+          }
+
+          this.createDataCell(cells, draftRow.data, field, col, row);
+
+          if (this.model.hasDraftRowValidationError(row, field.path)) {
+            const cellValue = cells[cellIndex];
+            if (cellValue) {
+              const existingClasses = cellValue.className || '';
+              const draftClasses = 'dx-grid__cell--flagged';
+              cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+            }
+          }
+        }
       }
     }
 
@@ -237,22 +324,22 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.view?.fields ?? [];
+    const fields = this.model.projection?.getFields() ?? [];
+    const currentSort = this.model.getSorting();
     for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
       const { field, props } = this.model.projection.getFieldProjection(fields[col].id);
-      const sorting = this.model.sorting?.sorting;
-      const direction = sorting?.fieldId === field.id ? sorting.direction : undefined;
+      const direction = currentSort?.fieldId === field.id ? currentSort.direction : undefined;
 
       cells[toPlaneCellIndex({ col, row: 0 })] = {
         // TODO(burdon): Use same logic as form for fallback title.
-        value: props.title ?? field.path,
-        readonly: true,
+        value: '',
         resizeHandle: 'col',
         accessoryHtml: `
+          <span class="grow min-w-0 truncate">${props.title ?? field.path}</span>
           ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
           ${tableButtons.columnSettings.render({ fieldId: field.id })}
         `,
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbar-surface text-description! [&>div]:flex [&>div]:items-stretch',
       };
     }
 
@@ -295,7 +382,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     if (!this.model.features.selection.enabled || this.model.selection.selectionMode === 'single') {
       return {
         [toPlaneCellIndex({ col: 0, row: 0 })]: {
-          className: '!bg-toolbarSurface',
+          className: '!bg-toolbar-surface',
           readonly: true,
           value: '',
         },
@@ -307,9 +394,9 @@ export class TablePresentation<T extends TableRow = TableRow> {
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: 0,
           header: true,
-          checked: this.model.selection.allRowsSeleted.value,
+          checked: this.model.selection.allRowsSelected,
         }),
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbar-surface',
         readonly: true,
         value: '',
       },
@@ -321,21 +408,64 @@ export class TablePresentation<T extends TableRow = TableRow> {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
         accessoryHtml: this.model.features.schemaEditable
           ? tableButtons.addColumn.render({
-              disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+              disabled: (this.model.projection?.getFields()?.length ?? 0) >= VIEW_FIELD_LIMIT,
             })
           : undefined,
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbar-surface',
         readonly: true,
         value: '',
       },
     };
   }
+
+  private getDraftActionCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const draftRows = this.model.getDraftRows();
+
+    // Return cells of the CTA row if no draft row is active
+    if (draftRows.length === 0) {
+      cells[toPlaneCellIndex({ col: 0, row: 0 })] = {
+        value: '',
+        className: 'dx-grid__row--cta__cell',
+        readonly: true,
+      };
+    } else {
+      for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+        const draftRow = draftRows[row];
+        const disabled = !draftRow.valid;
+
+        cells[toPlaneCellIndex({ col: 0, row })] = {
+          value: '',
+          readonly: true,
+          accessoryHtml: tableButtons.saveDraftRow.render({ rowIndex: row, disabled }),
+        };
+      }
+    }
+
+    return cells;
+  }
+
+  private getDraftIconCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const draftRows = this.model.getDraftRows();
+
+    for (let row = range.start.row; row <= range.end.row; row++) {
+      cells[toPlaneCellIndex({ col: 0, row })] = {
+        value: '',
+        readonly: true,
+        accessoryHtml: '<dx-icon icon="ph--plus--regular" class="contents"></dx-icon>',
+        className: mx('[&>div]:grid [&>div]:place-content-center', draftRows.length < 1 && 'dx-grid__row--cta__cell'),
+      };
+    }
+
+    return cells;
+  }
 }
 
 export const cellClassesForRowSelection = (selected: boolean, selectionMode: SelectionMode) => {
   if (!selected) {
     if (selectionMode === 'single') {
-      return ['!cursor-pointer'];
+      return ['cursor-pointer!'];
     } else {
       return undefined;
     }
@@ -343,9 +473,8 @@ export const cellClassesForRowSelection = (selected: boolean, selectionMode: Sel
 
   switch (selectionMode) {
     case 'single':
-      // TODO(ZaymonFC): @thure, do we need a grid version of 'currentRelated'?
-      return ['!bg-currentRelated hover:bg-hoverSurface', '!cursor-pointer'];
+      return ['dx-grid__cell--no-focus-unfurl !bg-current-surface hover:bg-hover-surface cursor-pointer!'];
     case 'multiple':
-      return ['!bg-gridCellSelected'];
+      return ['!bg-grid-cell-selected'];
   }
 };

package/src/playwright/TableManager.ts

@@ -17,6 +17,7 @@ const TABLE_SELECTORS = {
   },
   columnDelete: 'column-delete',
   rowDelete: 'row-menu-delete',
+  addRow: 'table.toolbar.add-row',
 } as const;
 
 export class TableManager {
@@ -53,12 +54,18 @@ export class TableManager {
     await this.page.getByTestId(TABLE_SELECTORS.columnSort[direction]).click();
   }
 
-  public async addColumn({ label, format }: { label: string; format: 'number' }): Promise<void> {
+  public async addRow(): Promise<void> {
+    await this.page.getByTestId(TABLE_SELECTORS.addRow).click();
+  }
+
+  public async addColumn({ label, format }: { label: string; format?: string }): Promise<void> {
     await this.page.getByTestId(TABLE_SELECTORS.newColumnButton).click();
-    await this.page.getByRole('combobox').click();
-    await this.page.getByLabel(`format ${format}`).click();
-    await this.page.getByPlaceholder('Property label.').click();
-    await this.page.getByPlaceholder('Property label.').fill(label);
-    await this.page.getByRole('button', { name: 'button save' }).click();
+    if (format) {
+      await this.page.getByRole('combobox').click();
+      await this.page.getByLabel(format).click();
+    }
+    await this.page.getByPlaceholder('Property label').click();
+    await this.page.getByPlaceholder('Property label').fill(label);
+    await this.page.getByRole('button', { name: 'Save' }).click();
   }
 }

package/src/playwright/playwright.config.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { defineConfig } from '@playwright/test';
+
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...e2ePreset(import.meta.dirname),
+  // TODO(wittjosiah): Avoid hard-coding ports.
+  webServer: {
+    command: 'pnpm storybook dev --ci --quiet --port=9004 --config-dir=.storybook',
+    port: 9004,
+    reuseExistingServer: false,
+  },
+});