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

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

@@ -4,150 +4,91 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback } from 'react';
 
 import { Obj, Type } from '@dxos/echo';
-import { FormatEnum, isMutable, toJsonSchema, EchoObject, GeneratorAnnotation } from '@dxos/echo-schema';
+import {
+  EchoObject,
+  FormatAnnotation,
+  FormatEnum,
+  GeneratorAnnotation,
+  LabelAnnotation,
+  PropertyMetaAnnotationId,
+} from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { Filter, useQuery, useSchema, live } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { PublicKey } from '@dxos/react-client';
+import { type Space, live } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { getSchemaFromPropertyDefinitions, ViewProjection, ViewType } from '@dxos/schema';
+import { DataType, getSchemaFromPropertyDefinitions } from '@dxos/schema';
 import { Testing, createObjectFactory } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Table, type TableController } from './Table';
-import { useTableModel } from '../../hooks';
-import { TablePresentation } from '../../model';
-import translations from '../../translations';
-import { TableType } from '../../types';
-import { initializeTable } from '../../util';
+import { useTestTableModel } from '../../testing';
+import { translations } from '../../translations';
+import { TableView } from '../../types';
+import { createTable } from '../../util';
 import { TableToolbar } from '../TableToolbar';
 
-faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
-
-/**
- * Custom hook to create and manage a test table model for storybook demonstrations.
- * Provides table data, schema, and handlers for table operations.
- */
-const useTestTableModel = () => {
-  const client = useClient();
-  const { space } = useClientProvider();
-
-  const filter = useMemo(() => Filter.type(TableType), []);
-  const tables = useQuery(space, filter);
-  const table = useMemo(() => tables.at(0), [tables]);
-  const schema = useSchema(client, space, table?.view?.target?.query.typename);
-
-  const projection = useMemo(() => {
-    if (schema && table?.view?.target) {
-      return new ViewProjection(toJsonSchema(schema), table.view.target);
-    }
-  }, [schema, table?.view?.target]);
-
-  const features = useMemo(
-    () => ({
-      selection: { enabled: true, mode: 'multiple' as const },
-      dataEditable: true,
-      schemaEditable: schema && isMutable(schema),
-    }),
-    [schema],
-  );
-
-  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
-  const filteredObjects = useGlobalFilteredObjects(objects);
-
-  const tableRef = useRef<TableController>(null);
-  const handleCellUpdate = useCallback((cell: any) => {
-    tableRef.current?.update?.(cell);
-  }, []);
-
-  const handleRowOrderChange = useCallback(() => {
-    tableRef.current?.update?.();
-  }, []);
-
-  const handleInsertRow = useCallback(() => {
-    if (space && schema) {
-      space.db.add(live(schema, {}));
-    }
-  }, [space, schema]);
-
-  const handleDeleteRows = useCallback(
-    (_: number, objects: any[]) => {
-      for (const object of objects) {
-        space?.db.remove(object);
-      }
-    },
-    [space],
-  );
-
-  const handleDeleteColumn = useCallback(
-    (fieldId: string) => {
-      if (projection) {
-        projection.deleteFieldProjection(fieldId);
-      }
-    },
-    [projection],
-  );
-
-  const model = useTableModel({
-    table,
-    projection,
-    features,
-    rows: filteredObjects,
-    onInsertRow: handleInsertRow,
-    onDeleteRows: handleDeleteRows,
-    onDeleteColumn: handleDeleteColumn,
-    onCellUpdate: handleCellUpdate,
-    onRowOrderChange: handleRowOrderChange,
-  });
-
-  const handleSaveView = useCallback(() => {
-    model?.saveView();
-  }, [model]);
-
-  const presentation = useMemo(() => {
-    if (model) {
-      return new TablePresentation(model);
-    }
-  }, [model]);
-
-  return {
-    schema,
-    table,
-    tableRef,
-    model,
-    presentation,
-    space,
-    client,
-    handleInsertRow,
-    handleSaveView,
-    handleDeleteRows,
-    handleDeleteColumn,
-  };
-};
-
-const StoryViewEditor = () => {
-  const { table, space, schema, handleDeleteColumn } = useTestTableModel();
-
+import { Table } from './Table';
+
+const TestSchema = Schema.Struct({
+  // TODO(wittjosiah): Should be title. Currently name to work with default label.
+  name: Schema.optional(Schema.String).annotations({ title: 'Title' }),
+  urgent: Schema.optional(Schema.Boolean).annotations({ title: 'Urgent' }),
+  status: Schema.optional(
+    Schema.Literal('todo', 'in-progress', 'done')
+      .pipe(FormatAnnotation.set(FormatEnum.SingleSelect))
+      .annotations({
+        title: 'Status',
+        [PropertyMetaAnnotationId]: {
+          singleSelect: {
+            options: [
+              { id: 'todo', title: 'Todo', color: 'indigo' },
+              { id: 'in-progress', title: 'In Progress', color: 'purple' },
+              { id: 'done', title: 'Done', color: 'amber' },
+            ],
+          },
+        },
+      }),
+  ),
+  description: Schema.optional(Schema.String).annotations({ title: 'Description' }),
+  parent: Schema.optional(Schema.suspend((): Type.Ref<TestSchema> => Type.Ref(TestSchema))).annotations({
+    title: 'Parent',
+  }),
+}).pipe(
+  Type.Obj({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }),
+  LabelAnnotation.set(['name']),
+);
+interface TestSchema extends Schema.Schema.Type<typeof TestSchema> {}
+
+const StoryViewEditor = ({
+  view,
+  schema,
+  space,
+  handleDeleteColumn,
+}: {
+  view?: DataType.View;
+  schema?: Schema.Schema.AnyNoContext;
+  space?: Space;
+  handleDeleteColumn: (fieldId: string) => void;
+}) => {
   const handleTypenameChanged = useCallback(
     (typename: string) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
       schema.updateTypename(typename);
-      invariant(table?.view?.target);
-      table.view.target.query.typename = typename;
+      invariant(view);
+      view.query.typename = typename;
     },
-    [schema, table?.view?.target],
+    [schema, view],
   );
 
-  if (!table || !schema || !table.view?.target) {
+  if (!view || !schema) {
     return null;
   }
 
@@ -155,7 +96,7 @@ const StoryViewEditor = () => {
     <ViewEditor
       registry={space?.db.schemaRegistry}
       schema={schema}
-      view={table.view.target!}
+      view={view}
       onTypenameChanged={handleTypenameChanged}
       onDelete={handleDeleteColumn}
     />
@@ -167,9 +108,20 @@ const StoryViewEditor = () => {
 //
 
 const DefaultStory = () => {
-  const { schema, table, tableRef, model, presentation, client, handleInsertRow, handleSaveView } = useTestTableModel();
+  const {
+    space,
+    schema,
+    view,
+    tableRef,
+    model,
+    presentation,
+    client,
+    handleInsertRow,
+    handleSaveView,
+    handleDeleteColumn,
+  } = useTestTableModel();
 
-  if (!schema || !table) {
+  if (!schema || !view) {
     return <div />;
   }
 
@@ -189,9 +141,9 @@ const DefaultStory = () => {
         </Table.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
-        <StoryViewEditor />
+        <StoryViewEditor view={view} schema={schema} space={space} handleDeleteColumn={handleDeleteColumn} />
         <SyntaxHighlighter language='json' className='w-full text-xs'>
-          {JSON.stringify({ view: table.view?.target, schema }, null, 2)}
+          {JSON.stringify({ view, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
     </div>
@@ -209,26 +161,36 @@ type StoryProps = { rows?: number };
 const meta: Meta<StoryProps> = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
-  parameters: { translations, controls: { disable: true } },
+  parameters: {
+    translations,
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
+  },
   decorators: [
+    withTheme,
+    withLayout({ fullscreen: true }),
     withClientProvider({
-      types: [TableType, ViewType],
+      types: [DataType.View, TableView],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(Obj.make(TableType, {}));
-        const schema = await initializeTable({ client, space, table, initialRow: false });
+        const [schema] = await space.db.schemaRegistry.register([TestSchema]);
+        const { view } = await createTable({ client, space, typename: schema.typename });
+        space.db.add(view);
+
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            live(schema, {
-              name: faker.person.fullName(),
+            Obj.make(schema, {
+              name: faker.lorem.sentence(),
+              status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
+              description: faker.lorem.paragraph(),
             }),
           );
         });
       },
     }),
-    withLayout({ fullscreen: true }),
-    withTheme,
   ],
 };
 
@@ -241,18 +203,17 @@ export const StaticSchema: StoryObj = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.Contact, Testing.Organization],
+      types: [DataType.View, TableView, Testing.Contact, Testing.Organization],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(Obj.make(TableType, {}));
-        await initializeTable({ client, space, table, typename: Testing.Organization.typename });
+        const { view } = await createTable({ client, space, typename: Testing.Contact.typename });
+        space.db.add(view);
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          // { type: Testing.Contact, count: 10 },
+          { type: Testing.Contact, count: 10 },
           // { type: Testing.Organization, count: 1 },
-          { type: ContactWithArrayOfEmails, count: 10 },
         ]);
       },
     }),
@@ -283,12 +244,12 @@ export const ArrayOfObjects: StoryObj = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
+      types: [DataType.View, TableView, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(Obj.make(TableType, {}));
-        await initializeTable({ client, space, table, typename: ContactWithArrayOfEmails.typename });
+        const { view } = await createTable({ client, space, typename: ContactWithArrayOfEmails.typename });
+        space.db.add(view);
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
@@ -309,7 +270,7 @@ export const Tags: Meta<StoryProps> = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType],
+      types: [DataType.View, TableView],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
@@ -340,8 +301,8 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const table = space.db.add(Obj.make(TableType, {}));
-        await initializeTable({ client, space, table, initialRow: false, typename });
+        const { view } = await createTable({ client, space, typename });
+        space.db.add(view);
 
         // Populate.
         Array.from({ length: 10 }).map(() => {

package/src/components/Table/Table.tsx

@@ -9,40 +9,43 @@ 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 { Filter } from '@dxos/react-client/echo';
+// 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 { 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 { tableButtons, tableControls } from '../../util';
+import { type TableCellEditorProps, TableValueEditor, createOption } 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';
 
 //
 // Table.Root
@@ -50,15 +53,17 @@ import { createOption, TableValueEditor, type TableCellEditorProps } from '../Ta
 
 export type TableRootProps = PropsWithChildren<{ role?: string }>;
 
-const TableRoot = ({ children, role }: TableRootProps) => {
+const TableRoot = ({ children, role = 'article' }: TableRootProps) => {
   return (
     <div
       role='none'
       className={mx(
-        'relative !border-separator',
-        role === 'section' // TODO(burdon): This leaks composer plugin concepts? Standardize for react-ui?
-          ? 'attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]'
-          : 'flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]',
+        'relative !border-separator [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]',
+        role === 'card--popover' && 'popover-card-height',
+        role === 'section' && 'attention-surface',
+        role === 'card--intrinsic' && '[&_.dx-grid]:bs-[--dx-grid-content-block-size]',
+        ['card--popover', 'section', 'card--extrinsic'].includes(role) && 'overflow-hidden',
+        ['article', 'slide'].includes(role) && 'flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:bs-0',
       )}
     >
       {children}
@@ -72,6 +77,7 @@ const TableRoot = ({ children, role }: TableRootProps) => {
 
 export type TableController = {
   update?: (cell?: DxGridPosition) => void;
+  focusDraft?: () => void;
 };
 
 export type TableMainProps = {
@@ -91,6 +97,8 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     const { t } = useTranslation(translationKey);
     const modals = useMemo(() => new ModalController(), []);
 
+    const draftRowCount = model?.getDraftRowCount() ?? 0;
+
     const frozen = useMemo(() => {
       const noActionColumn =
         model?.features.dataEditable === false &&
@@ -99,10 +107,11 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
       return {
         frozenRowsStart: 1,
+        frozenRowsEnd: draftRowCount,
         frozenColsStart: model?.features.selection.enabled ? 1 : 0,
         frozenColsEnd: noActionColumn ? 0 : 1,
       };
-    }, [model]);
+    }, [model, draftRowCount]);
 
     const getCells = useCallback<NonNullable<GridContentProps['getCells']>>(
       (range: DxGridPlaneRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
@@ -119,30 +128,46 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     /**
      * Provides an external controller that can be called to repaint the table.
      */
-    useImperativeHandle<TableController, TableController>(
-      forwardedRef,
-      () => {
-        if (!presentation || !dxGrid) {
-          return {};
-        }
+    useImperativeHandle<TableController, TableController>(forwardedRef, () => {
+      if (!presentation || !dxGrid) {
+        return {};
+      }
 
-        return {
-          update: (cell) => {
-            if (cell) {
-              dxGrid.updateIfWithinBounds(cell);
-            } else {
-              dxGrid.updateCells(true);
-              dxGrid.requestUpdate();
-            }
-          },
-        };
+      return {
+        update: (cell) => {
+          if (cell) {
+            dxGrid.updateIfWithinBounds(cell, true);
+          } else {
+            dxGrid.updateCells(true);
+            dxGrid.requestUpdate();
+          }
+        },
+        focusDraft: () => {
+          requestAnimationFrame(() => {
+            dxGrid.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
+            dxGrid.refocus();
+          });
+        },
+      };
+    }, [presentation, dxGrid]);
+
+    const handleSaveDraftRow = useCallback(
+      (rowIndex = 0) => {
+        if (model && dxGrid) {
+          const didCommitSuccessfully = model.commitDraftRow(rowIndex);
+          if (didCommitSuccessfully) {
+            requestAnimationFrame(() => {
+              dxGrid.scrollToEndRow();
+            });
+          }
+        }
       },
-      [presentation, dxGrid],
+      [model, dxGrid],
     );
 
     const handleGridClick = useCallback(
       (event: MouseEvent) => {
-        const rowIndex = safeParseInt((event.target as HTMLElement).ariaRowIndex ?? '');
+        const rowIndex = safeParseInt((event.target as HTMLElement).closest('[aria-rowindex]')?.ariaRowIndex ?? '');
         if (rowIndex != null) {
           if (onRowClick) {
             const row = model?.getRowAt(rowIndex);
@@ -188,6 +213,10 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               model?.sorting?.toggleSort(data.fieldId);
               break;
             }
+            case 'saveDraftRow': {
+              handleSaveDraftRow();
+              break;
+            }
           }
           return;
         }
@@ -222,36 +251,27 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           }
         }
       },
-      [model, modals],
+      [model, modals, dxGrid],
     );
 
     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(cell.row);
-          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) {
+            if (draftRowCount < 1) {
+              model.insertRow();
+            }
+            dxGrid.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
+          } else if (cell?.plane === 'frozenRowsEnd' && increment === 'row') {
+            handleSaveDraftRow(cell.row);
+            model.insertRow();
+            dxGrid.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
+          } else {
+            dxGrid.refocus(increment, delta);
           }
         }
       },
-      [model, dxGrid],
+      [dxGrid, model],
     );
 
     const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
@@ -268,7 +288,12 @@ const TableMain = forwardRef<TableController, TableMainProps>(
         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;
           }
         }
@@ -307,7 +332,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     const handleQuery = useCallback<NonNullable<TableCellEditorProps['onQuery']>>(
       async ({ field, props }, text) => {
         if (model && props.referenceSchema && field.referencePath) {
-          const space = model.space;
+          const space = getSpace(model.view);
           invariant(space);
 
           let schema;
@@ -349,6 +374,11 @@ const TableMain = forwardRef<TableController, TableMainProps>(
       [model, client, t],
     );
 
+    const handleSave = useCallback(() => {
+      dxGrid?.updateCells(true);
+      dxGrid?.requestUpdate();
+    }, [dxGrid]);
+
     if (!model || !modals) {
       return <span role='none' className='attention-surface' />;
     }
@@ -359,21 +389,20 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           model={model}
           modals={modals}
           schema={schema}
-          onEnter={handleEnter}
           onFocus={handleFocus}
           onQuery={handleQuery}
+          onSave={handleSave}
         />
         <Grid.Content
           className={mx('[--dx-grid-base:var(--baseSurface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
           frozen={frozen}
-          // getCells={getCells}
           columns={model.columnMeta.value}
           limitRows={model.getRowCount() ?? 0}
-          limitColumns={model.view?.fields?.length ?? 0}
+          limitColumns={model.projection.fields.length}
           overscroll='trap'
           onAxisResize={handleAxisResize}
           onClick={handleGridClick}
-          onKeyDown={handleKeyDown}
+          onKeyDownCapture={handleKeyDown}
           onWheelCapture={handleWheel}
           ref={setDxGrid}
         />