@dxos/react-ui-table 0.8.4-main.9735255 → 0.8.4-main.abd8ff62ef

package/src/components/Table/TableContent.tsx

@@ -0,0 +1,421 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import * as String from 'effect/String';
+import React, { type MouseEvent, type WheelEvent, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+import { type Type } from '@dxos/echo';
+import { log } from '@dxos/log';
+import { useAttention } from '@dxos/react-ui-attention';
+import {
+  type DxGridAxisMeta,
+  type DxGridElement,
+  type DxGridPlane,
+  type DxGridPlaneRange,
+  Grid,
+  type GridContentProps,
+  closestCell,
+  gridSeparatorBlockEnd,
+  gridSeparatorInlineEnd,
+} from '@dxos/react-ui-grid';
+import { DxEditRequest } from '@dxos/react-ui-grid';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
+import { tableButtons, tableControls } from '../../util';
+import { type OnCreateHandler, type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
+import { ColumnActionsMenu } from './ColumnActionsMenu';
+import { ColumnSettings } from './ColumnSettings';
+import { RowActionsMenu } from './RowActionsMenu';
+import { TableController, useTableContext } from './Table';
+
+const columnDefault = { grid: { minSize: 80, maxSize: 640 } };
+const rowDefault = { frozenRowsStart: { readonly: true, focusUnfurl: false } };
+const emptyColumnMeta = Atom.make<DxGridAxisMeta>({ grid: {} });
+const emptyRowsAtom = Atom.make<unknown[]>([]);
+const emptyCellUpdateAtom = Atom.make<number>(0);
+
+//
+// Content
+//
+
+const TABLE_CONTENT_NAME = 'Table.Content';
+
+export type TableContentProps = {
+  schema?: Type.AnyEntity;
+  model?: TableModel;
+  presentation?: TablePresentation;
+  // TODO(burdon): Factor out attention.
+  ignoreAttention?: boolean;
+  onCreate?: OnCreateHandler;
+  onRowClick?: (row: any) => void;
+  testId?: string;
+};
+
+export const TableContent = composable<HTMLDivElement, TableContentProps>(
+  ({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
+    const registry = useContext(RegistryContext);
+    const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
+    const { hasAttention } = useAttention(model?.id ?? 'table');
+    const modals = useMemo(() => new ModalController(registry), [registry]);
+    const columnMeta = useAtomValue(model?.columnMeta ?? emptyColumnMeta);
+    // Subscribe to rows atom to trigger re-render when rows change.
+    const rows = useAtomValue(model?.rows ?? emptyRowsAtom);
+    // Subscribe to cell update counter to trigger re-render when individual cells change.
+    const cellUpdateCounter = useAtomValue(model?.cellUpdate ?? emptyCellUpdateAtom);
+    // Derive column count from columnMeta (reactive) with fallback.
+    const columnCount = Object.keys(columnMeta.grid).length || model?.projection.getFields().length || 0;
+
+    const draftRowCount = model?.getDraftRowCount() ?? 0;
+
+    const frozen = useMemo(() => {
+      const noActionColumn =
+        model?.features.dataEditable === false &&
+        model?.features.schemaEditable === false &&
+        model.rowActions.length === 0;
+
+      return {
+        frozenRowsStart: 1,
+        frozenRowsEnd: Math.max(1, draftRowCount),
+        frozenColsStart: model?.features.selection.enabled ? 1 : 0,
+        frozenColsEnd: noActionColumn ? 0 : 1,
+      };
+    }, [model, draftRowCount]);
+
+    const getCells = useCallback<NonNullable<GridContentProps['getCells']>>(
+      (range: DxGridPlaneRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
+      [presentation],
+    );
+
+    useEffect(() => {
+      if (!dxGrid || !presentation) {
+        return;
+      }
+
+      dxGrid.getCells = getCells;
+    }, [dxGrid, presentation, getCells]);
+
+    // Trigger grid update when rows or cell values change.
+    useEffect(() => {
+      if (!dxGrid) {
+        return;
+      }
+
+      dxGrid.updateCells(true);
+      dxGrid.requestUpdate();
+    }, [dxGrid, rows, cellUpdateCounter]);
+
+    const handleInsertRowResult = useCallback(
+      (insertResult?: InsertRowResult) => {
+        if (insertResult === 'draft') {
+          requestAnimationFrame(() => {
+            dxGrid?.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
+            dxGrid?.refocus();
+          });
+        } else {
+          requestAnimationFrame(() => {
+            dxGrid?.setFocus({ plane: 'grid', col: 0, row: model ? model.getRowCount() - 1 : 0 });
+            dxGrid?.refocus();
+          });
+        }
+      },
+      [model, dxGrid],
+    );
+
+    const handleSave = useCallback(() => {
+      dxGrid?.updateCells(true);
+      dxGrid?.requestUpdate();
+    }, [dxGrid]);
+
+    const handleSaveDraftRow = useCallback(
+      (rowIndex = 0) => {
+        if (model && dxGrid) {
+          const didCommitSuccessfully = model.commitDraftRow(rowIndex);
+          if (didCommitSuccessfully) {
+            requestAnimationFrame(() => {
+              dxGrid.scrollToEndRow();
+            });
+          }
+        }
+      },
+      [model, dxGrid],
+    );
+
+    const handleGridClick = useCallback(
+      (event: MouseEvent) => {
+        const cell = closestCell(event.target as HTMLElement);
+        if (cell) {
+          const { row: rowIndex, plane } = cell;
+          if (onRowClick) {
+            if (plane === 'grid') {
+              const row = model?.getRowAt(rowIndex);
+              row && onRowClick(row);
+            } else {
+              onRowClick(cell);
+            }
+          }
+
+          if (model?.features.selection.enabled && model?.selection.selectionMode === 'single') {
+            model.selection.toggleSelectionForRowIndex(rowIndex);
+          }
+        }
+
+        if (!modals) {
+          return;
+        }
+
+        const buttonSelector = Object.values(tableButtons)
+          .map((button) => `button[${button.attr}]`)
+          .join(',');
+
+        const tableButtonElement = (event.target as HTMLElement).closest(buttonSelector) as HTMLElement;
+        if (tableButtonElement) {
+          const button = Object.values(tableButtons).find((btn) => tableButtonElement.hasAttribute(btn.attr));
+          if (!button) {
+            return;
+          }
+
+          modals.setTrigger(tableButtonElement);
+          const data = button.getData(tableButtonElement);
+          switch (data.type) {
+            case 'rowMenu': {
+              modals.showRowMenu(data.rowIndex);
+              break;
+            }
+            case 'columnSettings': {
+              modals.showColumnMenu(data.fieldId);
+              break;
+            }
+            case 'newColumn': {
+              modals.showColumnCreator();
+              break;
+            }
+            case 'sort': {
+              model?.toggleSort(data.fieldId);
+              break;
+            }
+            case 'saveDraftRow': {
+              handleSaveDraftRow();
+              break;
+            }
+          }
+          return;
+        }
+
+        const controlSelector = Object.values(tableControls)
+          .map((control) => `input[${control.attr}]`)
+          .join(',');
+
+        const controlElement = (event.target as HTMLElement).closest(controlSelector) as HTMLElement;
+        if (controlElement) {
+          const control = Object.values(tableControls).find((ctrl) => controlElement.hasAttribute(ctrl.attr));
+          if (!control) {
+            return;
+          }
+
+          const data = control.getData(controlElement);
+          switch (data.type) {
+            case 'checkbox': {
+              if (data.header) {
+                model?.selection.setSelection(model.selection.allRowsSelected ? 'none' : 'all');
+              } else {
+                model?.selection.toggleSelectionForRowIndex(data.rowIndex);
+              }
+              break;
+            }
+            case 'switch': {
+              if (model) {
+                model.updateCellData({ row: data.rowIndex, col: data.colIndex }, (value) => !value);
+              }
+              break;
+            }
+          }
+        }
+      },
+      [model, modals, dxGrid],
+    );
+
+    const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
+      (increment, delta, cell) => {
+        if (dxGrid && model) {
+          if (cell?.plane === 'grid' && cell?.row >= model.getRowCount() - 1 && increment !== 'col') {
+            handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : 'final');
+          } else if (cell?.plane === 'frozenRowsEnd' && increment === 'row') {
+            handleSaveDraftRow(cell.row);
+            handleInsertRowResult(model.insertRow());
+          } else {
+            dxGrid.refocus(increment, delta);
+          }
+        }
+      },
+      [dxGrid, model],
+    );
+
+    const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
+      (event) => {
+        if (!model?.features.dataEditable) {
+          return;
+        }
+
+        const cell = closestCell(event.target);
+        if (!model || !cell) {
+          return;
+        }
+
+        // Handle Meta+C (Copy) and Meta+V (Paste) commands
+        if (event.metaKey || event.ctrlKey) {
+          switch (event.key) {
+            case 'c': {
+              // Copy focused cell's text content to clipboard
+              try {
+                const cellData = model.getCellData(cell);
+                const textContent = cellData?.toString() ?? '';
+                void navigator.clipboard.writeText(textContent);
+                event.preventDefault();
+              } catch (error) {
+                log.catch(error);
+              }
+              break;
+            }
+            case 'v': {
+              // Paste clipboard content to focused cell
+              event.preventDefault();
+              void navigator.clipboard.readText().then((clipboardText) => {
+                try {
+                  // Attempt to set the cell's content to clipboard content
+                  model.setCellData(cell, String.trim(clipboardText).replace(/[\n\r]+/, ' '));
+                  handleSave();
+                } catch {
+                  // If validation fails, emit a DxEditRequest event with initialContent from clipboard
+                  // TODO(thure): Should `dx-grid` expose a method like this?
+                  const cellElement = (event.target as HTMLElement).closest(
+                    '[data-dx-grid-action="cell"]',
+                  ) as HTMLElement;
+                  if (cellElement) {
+                    const rect = cellElement.getBoundingClientRect();
+                    const editRequest = new DxEditRequest({
+                      cellIndex: `${cell.plane},${cell.col},${cell.row}`,
+                      cellBox: {
+                        insetInlineStart: rect.left,
+                        insetBlockStart: rect.top,
+                        inlineSize: rect.width,
+                        blockSize: rect.height,
+                      },
+                      cellElement,
+                      initialContent: clipboardText,
+                    });
+                    cellElement.dispatchEvent(editRequest);
+                  }
+                }
+              });
+              break;
+            }
+          }
+        }
+
+        switch (event.key) {
+          case 'Backspace':
+          case 'Delete': {
+            try {
+              model.setCellData(cell, undefined);
+              event.preventDefault();
+              handleSave();
+            } catch {
+              // Delete results in a validation error; don’t prevent default so dx-grid can emit an edit request.
+            }
+            break;
+          }
+        }
+      },
+      [model, dxGrid, handleSave],
+    );
+
+    const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
+      (event) => {
+        if (event.axis === 'col') {
+          const columnIndex = parseInt(event.index, 10);
+          model?.setColumnWidth(columnIndex, event.size);
+        }
+      },
+      [model],
+    );
+
+    const handleWheel = useCallback(
+      (event: WheelEvent) => {
+        if (!ignoreAttention && !hasAttention) {
+          event.stopPropagation();
+        }
+      },
+      [hasAttention, ignoreAttention],
+    );
+
+    const handleNewColumn = useCallback(() => {
+      const columns = model?.getColumnCount();
+      if (dxGrid && columns) {
+        dxGrid.scrollToColumn(columns - 1);
+      }
+    }, [model, dxGrid]);
+
+    // Publish controller to Root.
+    const { controllerRef } = useTableContext(TABLE_CONTENT_NAME);
+    controllerRef.current = useMemo<TableController>(() => {
+      if (!dxGrid || !presentation) {
+        return {};
+      }
+
+      return {
+        update: (cell) => {
+          if (cell) {
+            dxGrid.updateIfWithinBounds(cell, true);
+          } else {
+            dxGrid.updateCells(true);
+            dxGrid.requestUpdate();
+          }
+        },
+        handleInsertRowResult,
+      };
+    }, [dxGrid, model, presentation]);
+
+    if (!model || !modals) {
+      return <span role='none' className='dx-attention-surface' />;
+    }
+
+    return (
+      <div {...composableProps(props, { classNames: 'dx-container relative' })} ref={forwardedRef}>
+        <Grid.Root id={model.id ?? 'table-grid'}>
+          <TableValueEditor
+            model={model}
+            modals={modals}
+            schema={schema}
+            onFocus={handleFocus}
+            onSave={handleSave}
+            onCreate={onCreate}
+          />
+          <Grid.Content
+            className={mx('[--dx-grid-base:var(--base-surface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
+            frozen={frozen}
+            columns={columnMeta}
+            columnDefault={columnDefault}
+            rowDefault={rowDefault}
+            limitRows={rows.length}
+            limitColumns={columnCount}
+            overscroll='trap'
+            onAxisResize={handleAxisResize}
+            onClick={handleGridClick}
+            onKeyDownCapture={handleKeyDown}
+            onWheelCapture={handleWheel}
+            {...(testId && { 'data-testid': testId })}
+            ref={setDxGrid}
+          />
+          <RowActionsMenu model={model} modals={modals} />
+          <ColumnActionsMenu model={model} modals={modals} />
+          <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
+        </Grid.Root>
+      </div>
+    );
+  },
+);
+
+TableContent.displayName = TABLE_CONTENT_NAME;

package/src/components/{TableToolbar → Table}/TableToolbar.tsx

@@ -5,20 +5,20 @@
 import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import React, { useContext, useEffect, useMemo } from 'react';
 
-import { type ThemedClassName } from '@dxos/react-ui';
 import {
   type ActionGraphEdges,
   type ActionGraphNodes,
   type ActionGraphProps,
+  Menu,
   type MenuAction,
-  MenuProvider,
-  ToolbarMenu,
+  MenuRootProps,
   createGapSeparator,
   createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
+import { composable, composableProps } from '@dxos/ui-theme';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
 export type TableToolbarActionProperties = { type: TableToolbarActionType };
 
@@ -28,17 +28,6 @@ export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
 
 type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
-// TODO(burdon): Radix style layout.
-
-export type TableToolbarProps = ThemedClassName<
-  TableToolbarState & {
-    onAdd?: () => void;
-    onSave?: () => void;
-    attendableId?: string;
-    customActions?: Atom.Atom<ActionGraphProps>;
-  }
->;
-
 const createTableToolbarActions = ({
   stateAtom,
   onAdd,
@@ -56,7 +45,7 @@ const createTableToolbarActions = ({
       const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
         type: 'add-row' as const,
         icon: 'ph--plus--regular',
-        label: ['add row label', { ns: translationKey }],
+        label: ['add-row.label', { ns: translationKey }],
         testId: 'table.toolbar.add-row',
       });
       nodes.push(add);
@@ -66,7 +55,7 @@ const createTableToolbarActions = ({
       const save = createMenuAction<TableToolbarActionProperties>('save-view', onSave, {
         type: 'save-view' as const,
         icon: 'ph--floppy-disk--regular',
-        label: ['save view label', { ns: translationKey }],
+        label: ['save-view.label', { ns: translationKey }],
         testId: 'table.toolbar.save-view',
         iconOnly: false,
         hidden: !state.viewDirty,
@@ -75,7 +64,7 @@ const createTableToolbarActions = ({
     }
     const gap = createGapSeparator();
     nodes.push(...gap.nodes);
-    const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target }));
+    const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target, relation: 'child' }));
     if (customActions) {
       const custom = get(customActions);
       nodes.push(...custom.nodes);
@@ -88,31 +77,35 @@ const createTableToolbarActions = ({
     };
   });
 
-export const TableToolbar = ({
-  classNames,
-  viewDirty,
-  attendableId,
-  onAdd,
-  onSave,
-  customActions,
-}: TableToolbarProps) => {
-  const registry = useContext(RegistryContext);
-  const stateAtom = useMemo(() => Atom.make<TableToolbarState>({ viewDirty }), []);
+export type TableToolbarProps = Pick<MenuRootProps, 'attendableId'> &
+  TableToolbarState & {
+    onAdd?: () => void;
+    onSave?: () => void;
+    customActions?: Atom.Atom<ActionGraphProps>;
+  };
+
+export const TableToolbar = composable<HTMLDivElement, TableToolbarProps>(
+  ({ attendableId, viewDirty, onAdd, onSave, customActions, ...props }, forwardedRef) => {
+    const registry = useContext(RegistryContext);
+    const stateAtom = useMemo(() => Atom.make<TableToolbarState>({ viewDirty }), []);
+
+    // Update state.viewDirty when the prop changes.
+    useEffect(() => {
+      registry.set(stateAtom, { viewDirty });
+    }, [registry, stateAtom, viewDirty]);
 
-  // Update state.viewDirty when the prop changes.
-  useEffect(() => {
-    registry.set(stateAtom, { viewDirty });
-  }, [registry, stateAtom, viewDirty]);
+    const actionsCreator = useMemo(
+      () => createTableToolbarActions({ stateAtom, onAdd, onSave, customActions }),
+      [stateAtom, onAdd, onSave, customActions],
+    );
+    const menuActions = useMenuActions(actionsCreator);
 
-  const actionsCreator = useMemo(
-    () => createTableToolbarActions({ stateAtom, onAdd, onSave, customActions }),
-    [stateAtom, onAdd, onSave, customActions],
-  );
-  const menu = useMenuActions(actionsCreator);
+    return (
+      <Menu.Root {...menuActions} attendableId={attendableId}>
+        <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
+      </Menu.Root>
+    );
+  },
+);
 
-  return (
-    <MenuProvider {...menu} attendableId={attendableId}>
-      <ToolbarMenu classNames={classNames} />
-    </MenuProvider>
-  );
-};
+TableToolbar.displayName = 'TableToolbar';

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -22,15 +22,15 @@ export const CellValidationMessage = ({
     return null;
   }
 
-  const bgClass = variant === 'error' ? 'bg-errorSurface' : 'bg-warningSurface';
-  const textClass = variant === 'error' ? 'text-errorSurfaceText' : 'text-warningSurfaceText';
+  const bgClass = variant === 'error' ? 'bg-error-surface' : 'bg-warning-surface';
+  const textClass = variant === 'error' ? 'text-error-surface-text' : 'text-warning-surface-text';
 
   return (
     <div
       role='none'
-      className={`absolute ${bgClass} ${textClass} rounded-bs-sm text-xs p-1`}
+      className={`absolute ${bgClass} ${textClass} rounded-h-sm text-xs p-1`}
       style={{
-        ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },
+        ...{ '--dx-grid-cell-width': `${box?.inlineSize ?? 200}px` },
         zIndex: 10,
         insetBlockEnd: `calc(100% - ${box.insetBlockStart}px)`,
         insetInlineStart: box.insetInlineStart,

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -14,15 +14,16 @@ import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
 import { type FieldProjection } from '@dxos/schema';
 import { getDeep, isTruthy, setDeep } from '@dxos/util';
 
+import { translationKey } from '#translations';
+
 import { type ModalController, type TableModel, type TableRow } from '../../model';
-import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
-const createOptionLabel: Label = ['create new object label', { ns: translationKey }];
+const createOptionLabel: Label = ['create-new-object.label', { ns: translationKey }];
 
-export type OnCreateHandler = (schema: Type.Entity.Any, values: any) => Parameters<typeof Ref.make>[0];
+export type OnCreateHandler = (schema: Type.AnyEntity, values: any) => Parameters<typeof Ref.make>[0];
 
-export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+export type FormCellEditorProps<T extends Type.AnyEntity = Type.AnyEntity> = {
   __gridScope: any;
   schema?: T;
   model?: TableModel;
@@ -32,7 +33,7 @@ export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
   onCreate?: OnCreateHandler;
 } & Omit<FormRootProps<any>, 'values' | 'schema' | 'onCreate'>;
 
-export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
+export const FormCellEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
   __gridScope,
   schema,
   model,
@@ -85,8 +86,12 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
 
   // NOTE: Important to get a mutable deep clone to eject from the echo object.
   // TODO(wittjosiah): Consider using something like Obj.clone for this use case.
-  const formValues = useMemo(() => (originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}), [originalRow]);
+  const initialFormValues = useMemo(() => (originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}), [originalRow]);
+  const [formValues, setFormValues] = useState<any>(initialFormValues);
 
+  const handleValuesChanged = useCallback<NonNullable<FormRootProps<any>['onValuesChanged']>>((values) => {
+    setFormValues(values);
+  }, []);
   const handleOpenChange = useCallback((nextOpen: boolean) => {
     if (nextOpen === false) {
       setEditing(null);
@@ -162,7 +167,7 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
     <Popover.Root open={editing} onOpenChange={handleOpenChange}>
       <Popover.VirtualTrigger virtualRef={anchorRef} />
       <Popover.Portal>
-        <Popover.Content tabIndex={-1} classNames='popover-card-width density-fine'>
+        <Popover.Content tabIndex={-1} classNames='dx-card-popover-width dx-density-fine'>
           <Popover.Arrow />
           <Popover.Viewport>
             <Form.Root
@@ -170,6 +175,8 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
               autoFocus
               schema={narrowedSchema}
               values={formValues}
+              onValuesChanged={handleValuesChanged}
+              projection={model?.projection}
               createInitialValuePath={fieldProjection.field.referencePath}
               createOptionIcon='ph--plus--regular'
               createOptionLabel={createOptionLabel}