@dxos/react-ui-table 0.8.4-main.28f8d3d → 0.8.4-main.406dc2a

package/src/components/Table/Table.stories.tsx

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { Obj, Type } from '@dxos/echo';
+import { Obj, type QueryAST, Type } from '@dxos/echo';
 import {
   EchoObject,
   FormatAnnotation,
@@ -16,25 +14,25 @@ import {
   GeneratorAnnotation,
   LabelAnnotation,
   PropertyMetaAnnotationId,
-} from '@dxos/echo-schema';
+} from '@dxos/echo/internal';
+import { live } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
-import { type Space, live } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { DataType, getSchemaFromPropertyDefinitions } from '@dxos/schema';
+import { DataType, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
 import { Testing, createObjectFactory } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
-import { TableView } from '../../types';
-import { createTable } from '../../util';
+import { Table } from '../../types';
 import { TableToolbar } from '../TableToolbar';
 
-import { Table } from './Table';
+import { Table as TableComponent } from './Table';
 
 const TestSchema = Schema.Struct({
   // TODO(wittjosiah): Should be title. Currently name to work with default label.
@@ -77,13 +75,13 @@ const StoryViewEditor = ({
   space?: Space;
   handleDeleteColumn: (fieldId: string) => void;
 }) => {
-  const handleTypenameChanged = useCallback(
-    (typename: string) => {
+  const handleQueryChanged = useCallback(
+    (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
-      schema.updateTypename(typename);
+      schema.updateTypename(getTypenameFromQuery(newQuery));
       invariant(view);
-      view.query.typename = typename;
+      view.query.ast = newQuery;
     },
     [schema, view],
   );
@@ -97,7 +95,7 @@ const StoryViewEditor = ({
       registry={space?.db.schemaRegistry}
       schema={schema}
       view={view}
-      onTypenameChanged={handleTypenameChanged}
+      onQueryChanged={handleQueryChanged}
       onDelete={handleDeleteColumn}
     />
   );
@@ -129,8 +127,8 @@ const DefaultStory = () => {
     <div className='grow grid grid-cols-[1fr_350px]'>
       <div className='grid grid-rows-[min-content_1fr] min-bs-0 overflow-hidden'>
         <TableToolbar classNames='border-be border-subduedSeparator' onAdd={handleInsertRow} onSave={handleSaveView} />
-        <Table.Root>
-          <Table.Main
+        <TableComponent.Root>
+          <TableComponent.Main
             ref={tableRef}
             model={model}
             presentation={presentation}
@@ -138,11 +136,11 @@ const DefaultStory = () => {
             client={client}
             ignoreAttention
           />
-        </Table.Root>
+        </TableComponent.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
         <StoryViewEditor view={view} schema={schema} space={space} handleDeleteColumn={handleDeleteColumn} />
-        <SyntaxHighlighter language='json' className='w-full text-xs'>
+        <SyntaxHighlighter language='json' className='text-xs'>
           {JSON.stringify({ view, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
@@ -158,26 +156,23 @@ type StoryProps = { rows?: number };
 
 // TODO(burdon): Need super simple story.
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
-  parameters: {
-    translations,
-    layout: 'fullscreen',
-    controls: {
-      disable: true,
-    },
-  },
   decorators: [
     withTheme,
-    withLayout({ fullscreen: true }),
     withClientProvider({
-      types: [DataType.View, TableView],
+      types: [DataType.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
+      onCreateSpace: async ({ client, space }) => {
         const [schema] = await space.db.schemaRegistry.register([TestSchema]);
-        const { view } = await createTable({ client, space, typename: schema.typename });
+        const { view } = await Table.makeView({ client, space, typename: schema.typename });
+        view.projection.fields = [
+          view.projection.fields.find((field) => field.path === 'name')!,
+          ...view.projection.fields.filter((field) => field.path !== 'name'),
+        ];
+
         space.db.add(view);
 
         Array.from({ length: 10 }).map(() => {
@@ -192,22 +187,30 @@ const meta: Meta<StoryProps> = {
       },
     }),
   ],
-};
+  parameters: {
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
+    translations,
+  },
+} satisfies Meta<typeof TableComponent>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
 
 export const StaticSchema: StoryObj = {
   render: DefaultStory,
-  parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [DataType.View, TableView, Testing.Contact, Testing.Organization],
+      types: [DataType.View, Table.Table, Testing.Contact, Testing.Organization],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
-        const { view } = await createTable({ client, space, typename: Testing.Contact.typename });
+      onCreateSpace: async ({ client, space }) => {
+        const { view } = await Table.makeView({ client, space, typename: Testing.Contact.typename });
         space.db.add(view);
 
         const factory = createObjectFactory(space.db, faker as any);
@@ -217,9 +220,11 @@ export const StaticSchema: StoryObj = {
         ]);
       },
     }),
-    withLayout({ fullscreen: true }),
-    withTheme,
   ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 };
 
 const ContactWithArrayOfEmails = Schema.Struct({
@@ -241,14 +246,13 @@ const ContactWithArrayOfEmails = Schema.Struct({
 
 export const ArrayOfObjects: StoryObj = {
   render: DefaultStory,
-  parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [DataType.View, TableView, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
+      types: [DataType.View, Table.Table, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
-        const { view } = await createTable({ client, space, typename: ContactWithArrayOfEmails.typename });
+      onCreateSpace: async ({ client, space }) => {
+        const { view } = await Table.makeView({ client, space, typename: ContactWithArrayOfEmails.typename });
         space.db.add(view);
 
         const factory = createObjectFactory(space.db, faker as any);
@@ -259,21 +263,22 @@ export const ArrayOfObjects: StoryObj = {
         ]);
       },
     }),
-    withLayout({ fullscreen: true }),
-    withTheme,
   ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 };
 
 export const Tags: Meta<StoryProps> = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
-  parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [DataType.View, TableView],
+      types: [DataType.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
+      onCreateSpace: async ({ client, space }) => {
         // Configure schema.
         const typename = 'example.com/SingleSelect';
         const selectOptions = [
@@ -301,7 +306,7 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const { view } = await createTable({ client, space, typename });
+        const { view } = await Table.makeView({ client, space, typename });
         space.db.add(view);
 
         // Populate.
@@ -315,7 +320,9 @@ export const Tags: Meta<StoryProps> = {
         });
       },
     }),
-    withLayout({ fullscreen: true }),
-    withTheme,
   ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 };

package/src/components/Table/Table.tsx

@@ -2,7 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Schema } from 'effect/Schema';
+import type * as Schema from 'effect/Schema';
+import * as String from 'effect/String';
 import React, {
   type MouseEvent,
   type PropsWithChildren,
@@ -15,13 +16,8 @@ import React, {
   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';
 // TODO(wittjosiah): Remove dependency on react-client.
-import { getSpace } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
+import { type Client } from '@dxos/react-client';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
   type DxGridElement,
@@ -34,19 +30,20 @@ import {
   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 { ModalController, type TableModel, type TablePresentation } from '../../model';
-import { translationKey } from '../../translations';
+import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
 import { tableButtons, tableControls } from '../../util';
-import { type TableCellEditorProps, TableValueEditor, createOption } from '../TableCellEditor';
+import { type OnCreateHandler, type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
-import { CreateRefPanel } from './CreateRefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
 
+const columnDefault = { grid: { minSize: 80, maxSize: 640 } };
+const rowDefault = { frozenRowsStart: { readonly: true, focusUnfurl: false } };
+
 //
 // Table.Root
 //
@@ -77,28 +74,34 @@ const TableRoot = ({ children, role = 'article' }: TableRootProps) => {
 
 export type TableController = {
   update?: (cell?: DxGridPosition) => void;
-  focusDraft?: () => void;
+  handleInsertRowResult?: (insertRowResult?: InsertRowResult) => void;
 };
 
 export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
-  schema?: Schema.AnyNoContext;
+  schema?: Schema.Schema.AnyNoContext;
   client?: Client;
   // TODO(burdon): Rename since attention isn't a useful concept here? Standardize across other components. Pass property into useAttention.
   ignoreAttention?: boolean;
+  onCreate?: OnCreateHandler;
   onRowClick?: (row: any) => void;
+  testId?: string;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, schema, client, onCreate, onRowClick, testId }, 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 &&
@@ -107,7 +110,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,
       };
@@ -125,6 +128,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.
      */
@@ -142,14 +162,9 @@ const TableMain = forwardRef<TableController, TableMainProps>(
             dxGrid.requestUpdate();
           }
         },
-        focusDraft: () => {
-          requestAnimationFrame(() => {
-            dxGrid.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
-            dxGrid.refocus();
-          });
-        },
+        handleInsertRowResult,
       };
-    }, [presentation, dxGrid]);
+    }, [presentation, dxGrid, model]);
 
     const handleSaveDraftRow = useCallback(
       (rowIndex = 0) => {
@@ -167,11 +182,16 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     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') {
@@ -257,15 +277,11 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
       (increment, delta, cell) => {
         if (dxGrid && model) {
-          if (cell?.plane === 'grid' && cell?.row >= model.getRowCount() - 1) {
-            if (draftRowCount < 1) {
-              model.insertRow();
-            }
-            dxGrid.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
+          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);
-            model.insertRow();
-            dxGrid.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
+            handleInsertRowResult(model.insertRow());
           } else {
             dxGrid.refocus(increment, delta);
           }
@@ -285,12 +301,64 @@ 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, 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.
             }
@@ -298,7 +366,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           }
         }
       },
-      [model],
+      [model, dxGrid, handleSave],
     );
 
     const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
@@ -327,58 +395,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?.requestUpdate();
-    }, [dxGrid]);
-
     if (!model || !modals) {
       return <span role='none' className='attention-surface' />;
     }
@@ -390,13 +406,16 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           modals={modals}
           schema={schema}
           onFocus={handleFocus}
-          onQuery={handleQuery}
           onSave={handleSave}
+          onCreate={onCreate}
+          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'
@@ -404,12 +423,12 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           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} />
-        <CreateRefPanel model={model} modals={modals} />
       </Grid.Root>
     );
   },