@dxos/react-ui-table 0.8.4-main.c1de068 → 0.8.4-main.e098934

package/src/components/Table/Table.tsx

@@ -9,42 +9,40 @@ import React, {
   type WheelEvent,
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
-  useState,
   useMemo,
-  useEffect,
+  useState,
 } from 'react';
 
-import { type Client } from '@dxos/client';
-import { Filter } from '@dxos/echo';
-import { getValue } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
+import { type Client } from '@dxos/react-client';
 // TODO(wittjosiah): Remove dependency on react-client.
-import { getSpace } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
-  closestCell,
   type DxGridElement,
-  type DxGridPosition,
-  type GridContentProps,
-  Grid,
   type DxGridPlane,
   type DxGridPlaneRange,
-  gridSeparatorInlineEnd,
+  type DxGridPosition,
+  Grid,
+  type GridContentProps,
+  closestCell,
   gridSeparatorBlockEnd,
+  gridSeparatorInlineEnd,
 } from '@dxos/react-ui-grid';
+import { DxEditRequest } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
-import { isNotFalsy, safeParseInt } from '@dxos/util';
+
+import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
+import { tableButtons, tableControls } from '../../util';
+import { type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
 import { CreateRefPanel } from './CreateRefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
-import { ModalController, type TableModel, type TablePresentation } from '../../model';
-import { translationKey } from '../../translations';
-import { tableButtons, tableControls } from '../../util';
-import { createOption, TableValueEditor, type TableCellEditorProps } from '../TableCellEditor';
+
+const columnDefault = { grid: { minSize: 80, maxSize: 640 } };
+const rowDefault = { frozenRowsStart: { readonly: true, focusUnfurl: false } };
 
 //
 // Table.Root
@@ -76,6 +74,7 @@ const TableRoot = ({ children, role = 'article' }: TableRootProps) => {
 
 export type TableController = {
   update?: (cell?: DxGridPosition) => void;
+  handleInsertRowResult?: (insertRowResult?: InsertRowResult) => void;
 };
 
 export type TableMainProps = {
@@ -92,11 +91,15 @@ const TableMain = forwardRef<TableController, TableMainProps>(
   ({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
     const { hasAttention } = useAttention(model?.id ?? 'table');
-    const { t } = useTranslation(translationKey);
     const modals = useMemo(() => new ModalController(), []);
 
     const draftRowCount = model?.getDraftRowCount() ?? 0;
 
+    const handleSave = useCallback(() => {
+      dxGrid?.updateCells(true);
+      dxGrid?.requestUpdate();
+    }, [dxGrid]);
+
     const frozen = useMemo(() => {
       const noActionColumn =
         model?.features.dataEditable === false &&
@@ -105,7 +108,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
       return {
         frozenRowsStart: 1,
-        frozenRowsEnd: draftRowCount,
+        frozenRowsEnd: Math.max(1, draftRowCount),
         frozenColsStart: model?.features.selection.enabled ? 1 : 0,
         frozenColsEnd: noActionColumn ? 0 : 1,
       };
@@ -123,6 +126,23 @@ const TableMain = forwardRef<TableController, TableMainProps>(
       dxGrid.getCells = getCells;
     }, [presentation, dxGrid, getCells]);
 
+    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],
+    );
+
     /**
      * Provides an external controller that can be called to repaint the table.
      */
@@ -140,16 +160,36 @@ const TableMain = forwardRef<TableController, TableMainProps>(
             dxGrid.requestUpdate();
           }
         },
+        handleInsertRowResult,
       };
-    }, [presentation, dxGrid]);
+    }, [presentation, dxGrid, model]);
+
+    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 rowIndex = safeParseInt((event.target as HTMLElement).closest('[aria-rowindex]')?.ariaRowIndex ?? '');
-        if (rowIndex != null) {
+        const cell = closestCell(event.target as HTMLElement);
+        if (cell) {
+          const { row: rowIndex, plane } = cell;
           if (onRowClick) {
-            const row = model?.getRowAt(rowIndex);
-            row && onRowClick(row);
+            if (plane === 'grid') {
+              const row = model?.getRowAt(rowIndex);
+              row && onRowClick(row);
+            } else {
+              onRowClick(cell);
+            }
           }
 
           if (model?.features.selection.enabled && model?.selection.selectionMode === 'single') {
@@ -192,14 +232,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               break;
             }
             case 'saveDraftRow': {
-              if (model) {
-                const didCommitSuccessfully = model.commitDraftRow(data.rowIndex);
-                if (dxGrid && didCommitSuccessfully) {
-                  requestAnimationFrame(() => {
-                    dxGrid.scrollToEndRow();
-                  });
-                }
-              }
+              handleSaveDraftRow();
               break;
             }
           }
@@ -240,32 +273,19 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     );
 
     const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
-      (increment, delta) => {
-        if (dxGrid) {
-          dxGrid.refocus(increment, delta);
-        }
-      },
-      [dxGrid],
-    );
-
-    const handleEnter = useCallback<NonNullable<TableCellEditorProps['onEnter']>>(
-      (cell) => {
-        if (!model?.features.dataEditable) {
-          return;
-        }
-
-        // TODO(burdon): Insert row only if bottom row isn't completely blank already.
-        if (model && cell.row === model.getRowCount() - 1) {
-          model.insertRow();
-          if (dxGrid) {
-            requestAnimationFrame(() => {
-              dxGrid?.scrollToRow(cell.row + 1);
-              dxGrid?.refocus('row', 1);
-            });
+      (increment, delta, cell) => {
+        if (dxGrid && model) {
+          if (cell?.plane === 'grid' && cell?.row >= model.getRowCount() - 1) {
+            handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : 'final');
+          } else if (cell?.plane === 'frozenRowsEnd' && increment === 'row') {
+            handleSaveDraftRow(cell.row);
+            handleInsertRowResult(model.insertRow());
+          } else {
+            dxGrid.refocus(increment, delta);
           }
         }
       },
-      [model, dxGrid],
+      [dxGrid, model],
     );
 
     const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
@@ -279,15 +299,71 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           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) {
+                console.warn('Failed to copy cell content:', 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, clipboardText);
+                  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': {
-            model.setCellData(cell, undefined);
+            try {
+              model.setCellData(cell, undefined);
+              event.preventDefault();
+            } catch {
+              // Delete results in a validation error; don’t prevent default so dx-grid can emit an edit request.
+            }
             break;
           }
         }
       },
-      [model],
+      [model, dxGrid, handleSave],
     );
 
     const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
@@ -316,57 +392,6 @@ const TableMain = forwardRef<TableController, TableMainProps>(
       }
     }, [model, dxGrid]);
 
-    // TODO(burdon): Factor out?
-    // TODO(burdon): Generalize to handle other value types (e.g., enums).
-    const handleQuery = useCallback<NonNullable<TableCellEditorProps['onQuery']>>(
-      async ({ field, props }, text) => {
-        if (model && props.referenceSchema && field.referencePath) {
-          const space = getSpace(model.view);
-          invariant(space);
-
-          let schema;
-          if (client) {
-            schema = client.graph.schemaRegistry.getSchema(props.referenceSchema);
-          }
-          if (!schema) {
-            schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
-          }
-
-          if (schema) {
-            const { objects } = await space.db.query(Filter.type(schema)).run();
-            const options = objects
-              .map((obj) => {
-                const value = getValue(obj, field.referencePath!);
-                if (!value || typeof value !== 'string') {
-                  return undefined;
-                }
-
-                return {
-                  label: value,
-                  data: obj,
-                };
-              })
-              .filter(isNotFalsy);
-
-            return [
-              ...options,
-              {
-                label: t('create new object label', { text }),
-                data: createOption(text),
-              },
-            ];
-          }
-        }
-
-        return [];
-      },
-      [model, client, t],
-    );
-
-    const handleSave = useCallback(() => {
-      dxGrid?.updateCells(true);
-    }, [dxGrid]);
-
     if (!model || !modals) {
       return <span role='none' className='attention-surface' />;
     }
@@ -377,21 +402,22 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           model={model}
           modals={modals}
           schema={schema}
-          onEnter={handleEnter}
           onFocus={handleFocus}
-          onQuery={handleQuery}
           onSave={handleSave}
+          client={client}
         />
         <Grid.Content
           className={mx('[--dx-grid-base:var(--baseSurface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
           frozen={frozen}
           columns={model.columnMeta.value}
+          columnDefault={columnDefault}
+          rowDefault={rowDefault}
           limitRows={model.getRowCount() ?? 0}
           limitColumns={model.projection.fields.length}
           overscroll='trap'
           onAxisResize={handleAxisResize}
           onClick={handleGridClick}
-          onKeyDown={handleKeyDown}
+          onKeyDownCapture={handleKeyDown}
           onWheelCapture={handleWheel}
           ref={setDxGrid}
         />

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { useGridContext, type GridScopedProps } from '@dxos/react-ui-grid';
+import { type GridScopedProps, useGridContext } from '@dxos/react-ui-grid';
 
 export type CellValidationMessageProps = {
   validationError: string | null;

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -5,15 +5,20 @@
 import { type Schema } from 'effect';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { getSnapshot } from '@dxos/echo-schema';
+import { Filter, Obj } from '@dxos/echo';
+import { Ref, type TypeAnnotation, getValue } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
+import { getSnapshot } from '@dxos/live-object';
+import { type Client } from '@dxos/react-client';
+import { getSpace } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
+import { Form, type FormProps } from '@dxos/react-ui-form';
+import { cellQuery, parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
 import { type FieldProjection } from '@dxos/schema';
-import { getDeep, setDeep } from '@dxos/util';
+import { getDeep, isNotFalsy, setDeep } from '@dxos/util';
 
-import { type TableModel } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
+import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
 type FormCellEditorProps = {
@@ -21,64 +26,148 @@ type FormCellEditorProps = {
   model?: TableModel;
   schema?: Schema.Schema.AnyNoContext;
   onSave?: () => void;
+  client?: Client;
+  modals?: ModalController;
   __gridScope: any;
-};
+} & Omit<FormProps<any>, 'values' | 'schema'>;
+
+const createOptionLabel = ['create new object label', { ns: translationKey }] as [string, { ns: string }];
 
-export const FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }: FormCellEditorProps) => {
-  const { editing: contextEditing, setEditing } = useGridContext('ArrayEditor', __gridScope);
+export const FormCellEditor = ({
+  fieldProjection,
+  model,
+  schema,
+  onSave,
+  client,
+  modals,
+  __gridScope,
+  ...formProps
+}: FormCellEditorProps) => {
+  const { editing: contextEditing, setEditing, id: gridId } = useGridContext('ArrayEditor', __gridScope);
   const [editing, setLocalEditing] = useState(false);
   const anchorRef = useRef<HTMLButtonElement | null>(null);
 
-  useEffect(() => {
-    if (contextEditing && contextEditing.cellElement) {
-      anchorRef.current = (contextEditing.cellElement as HTMLElement).querySelector(
-        '.dx-grid__cell__content',
-      ) as HTMLButtonElement;
-      setLocalEditing(true);
-    } else {
-      anchorRef.current = null;
-      setLocalEditing(false);
-    }
-  }, [contextEditing]);
+  const getSchema = useCallback(
+    (typeAnnotation: TypeAnnotation) => {
+      const space = getSpace(model!.view);
+      invariant(space);
 
-  const narrowedSchema = useMemo(() => {
-    if (!schema) {
-      return undefined;
-    }
-    return narrowSchema(schema, [fieldProjection.field.path]);
-  }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
+      let schema;
+      if (client) {
+        schema = client.graph.schemaRegistry.getSchema(typeAnnotation.typename);
+      }
+      if (!schema) {
+        schema = space.db.schemaRegistry.getSchema(typeAnnotation.typename);
+      }
+      return { space, schema };
+    },
+    [client, model],
+  );
+
+  const handleQueryRefOptions = useCallback(
+    async (typeAnnotation: TypeAnnotation) => {
+      const { schema, space } = getSchema(typeAnnotation);
+      if (model && schema && space) {
+        const { objects } = await space.db.query(Filter.type(schema)).run();
+        return objects
+          .map((obj) => {
+            return {
+              dxn: Obj.getDXN(obj),
+              label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
+            };
+          })
+          .filter(isNotFalsy);
+      }
+
+      return [];
+    },
+    [client, model],
+  );
 
   const originalRow = useMemo(() => {
     if (model && contextEditing) {
       const cell = parseCellIndex(contextEditing.index);
-      const row = model.getRowAt(cell.row);
-      invariant(row);
 
-      return row;
+      // Check if this is a draft cell and get the appropriate row data
+      if (model.isDraftCell(cell)) {
+        const draftRow = model.draftRows.value[cell.row];
+        invariant(draftRow);
+        return draftRow.data;
+      } else {
+        const row = model.getRowAt(cell.row);
+        invariant(row);
+        return row;
+      }
     }
 
     return undefined;
   }, [model, contextEditing]);
 
-  const formValues = useMemo(() => {
-    if (originalRow) {
-      // NOTE(ZaymonFC): Important to get a snapshot to eject from the live object.
-      return getSnapshot(originalRow);
-    }
-  }, [originalRow]);
-
   const handleSave = useCallback(
     (values: any) => {
       const path = fieldProjection.field.path;
       const value = getDeep(values, [path]);
       setDeep(originalRow, [path], value);
+      contextEditing?.cellElement?.focus();
       setEditing(null);
       setLocalEditing(false);
       onSave?.();
     },
-    [fieldProjection.field.path, originalRow],
+    [fieldProjection.field.path, onSave, contextEditing, originalRow],
   );
 
+  const handleCreate = useCallback(
+    (object: any) => {
+      const ref = Ref.make(object);
+      const path = fieldProjection.field.path;
+      setDeep(originalRow, [path], ref);
+      contextEditing?.cellElement?.focus();
+      setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
+    },
+    [fieldProjection.field.path, onSave, contextEditing, originalRow],
+  );
+
+  const handleCreateFromQuery = useCallback(
+    async (typeAnnotation: TypeAnnotation, query: string) => {
+      if (model && modals && contextEditing?.index) {
+        setLocalEditing(false);
+        modals.openCreateRef(
+          typeAnnotation.typename,
+          document.querySelector(cellQuery(contextEditing.index, gridId)),
+          {
+            [fieldProjection.field.referencePath!]: query,
+          },
+          handleCreate,
+        );
+      }
+    },
+    [model, modals, client, contextEditing?.index, gridId, fieldProjection, handleSave],
+  );
+
+  useEffect(() => {
+    if (contextEditing && contextEditing.cellElement) {
+      anchorRef.current = (contextEditing.cellElement as HTMLElement).querySelector(
+        '.dx-grid__cell__content',
+      ) as HTMLButtonElement;
+      setLocalEditing(true);
+    } else {
+      anchorRef.current = null;
+      setLocalEditing(false);
+    }
+  }, [contextEditing]);
+
+  const narrowedSchema = useMemo(() => {
+    if (!schema) {
+      return undefined;
+    }
+    return narrowSchema(schema, [fieldProjection.field.path]);
+  }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
+
+  // NOTE: Important to get a snapshot to eject from the live object.
+  const formValues = useMemo(() => (originalRow ? getSnapshot(originalRow) : {}), [originalRow]);
+
   const handleOpenChange = useCallback((nextOpen: boolean) => {
     if (nextOpen === false) {
       setEditing(null);
@@ -94,12 +183,24 @@ export const FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridS
   return (
     <Popover.Root open={editing} onOpenChange={handleOpenChange}>
       <Popover.VirtualTrigger virtualRef={anchorRef} />
-      <Popover.Content tabIndex={-1} classNames='popover-card-width density-fine'>
-        <Popover.Arrow />
-        <Popover.Viewport>
-          <Form values={formValues} schema={narrowedSchema as any} onSave={handleSave} />
-        </Popover.Viewport>
-      </Popover.Content>
+      <Popover.Portal>
+        <Popover.Content tabIndex={-1} classNames='popover-card-width density-fine'>
+          <Popover.Arrow />
+          <Popover.Viewport>
+            <Form
+              autoFocus
+              values={formValues}
+              schema={narrowedSchema as any}
+              onSave={handleSave}
+              {...formProps}
+              onQueryRefOptions={handleQueryRefOptions}
+              onCreateFromQuery={handleCreateFromQuery}
+              createOptionIcon='ph--plus--regular'
+              createOptionLabel={createOptionLabel}
+            />
+          </Popover.Viewport>
+        </Popover.Content>
+      </Popover.Portal>
     </Popover.Root>
   );
 };