@dxos/react-ui-table 0.8.3-staging.0fa589b → 0.8.4-main.c1de068

package/src/components/Table/Table.tsx

@@ -16,9 +16,11 @@ import React, {
 } 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 {
@@ -50,15 +52,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}
@@ -91,6 +95,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 +105,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 +126,26 @@ 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();
-            }
-          },
-        };
-      },
-      [presentation, dxGrid],
-    );
+      return {
+        update: (cell) => {
+          if (cell) {
+            dxGrid.updateIfWithinBounds(cell, true);
+          } else {
+            dxGrid.updateCells(true);
+            dxGrid.requestUpdate();
+          }
+        },
+      };
+    }, [presentation, 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 +191,17 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               model?.sorting?.toggleSort(data.fieldId);
               break;
             }
+            case 'saveDraftRow': {
+              if (model) {
+                const didCommitSuccessfully = model.commitDraftRow(data.rowIndex);
+                if (dxGrid && didCommitSuccessfully) {
+                  requestAnimationFrame(() => {
+                    dxGrid.scrollToEndRow();
+                  });
+                }
+              }
+              break;
+            }
           }
           return;
         }
@@ -222,7 +236,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           }
         }
       },
-      [model, modals],
+      [model, modals, dxGrid],
     );
 
     const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
@@ -242,7 +256,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
         // TODO(burdon): Insert row only if bottom row isn't completely blank already.
         if (model && cell.row === model.getRowCount() - 1) {
-          model.insertRow(cell.row);
+          model.insertRow();
           if (dxGrid) {
             requestAnimationFrame(() => {
               dxGrid?.scrollToRow(cell.row + 1);
@@ -307,7 +321,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 +363,10 @@ const TableMain = forwardRef<TableController, TableMainProps>(
       [model, client, t],
     );
 
+    const handleSave = useCallback(() => {
+      dxGrid?.updateCells(true);
+    }, [dxGrid]);
+
     if (!model || !modals) {
       return <span role='none' className='attention-surface' />;
     }
@@ -362,14 +380,14 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           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}

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

@@ -4,27 +4,24 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
-import { SchemaAST } from 'effect';
-import React, { useEffect, useMemo } from 'react';
-
-import { Obj, type Type } from '@dxos/echo';
-import { getSchemaTypename, toJsonSchema } from '@dxos/echo-schema';
-import { getAnnotation } from '@dxos/effect';
-import { invariant } from '@dxos/invariant';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Type } from '@dxos/echo';
+import { type JsonSchemaType } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { makeRef } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { DataType, createView, ViewProjection, ViewType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Table } from './Table';
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
-import translations from '../../translations';
-import { TableType } from '../../types';
+import { translations } from '../../translations';
+import { TableView } from '../../types';
+import { createTable } from '../../util';
 
 faker.seed(1);
 const generator: ValueGenerator = faker as any;
@@ -34,35 +31,30 @@ const generator: ValueGenerator = faker as any;
 // TODO(burdon): Reconcile schemas types and utils (see API PR).
 // TODO(burdon): Base type for T (with id); see ECHO API PR?
 const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
+  const client = useClient();
   const { space } = useClientProvider();
-
-  const jsonSchema = useMemo(() => toJsonSchema(schema), [schema]);
-  const table = useMemo(() => {
-    if (!space) {
-      return undefined;
-    }
-    const typename = getSchemaTypename(schema);
-    invariant(typename);
-    const name = getAnnotation<string>(SchemaAST.TitleAnnotationId)(schema.ast) ?? typename;
-    const view = createView({ name, typename, jsonSchema });
-    return space.db.add(Obj.make(TableType, { view: makeRef(view) }));
-  }, [schema, space, jsonSchema]);
-
-  const projection = useMemo(() => {
-    if (!table?.view?.target) {
-      return undefined;
-    }
-
-    // TODO(burdon): Just pass in view? Reuse same jsonSchema instance? View determines if mutable, etc.
-    return new ViewProjection(jsonSchema, table.view.target);
-  }, [jsonSchema, table]);
+  const [view, setView] = useState<DataType.View>();
+  const [jsonSchema, setJsonSchema] = useState<JsonSchemaType>();
 
   const features = useMemo<TableFeatures>(
     () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
     [],
   );
 
-  const model = useTableModel<TableRow>({ table, projection, rows: [], features });
+  useEffect(() => {
+    if (!space) {
+      return;
+    }
+
+    const timeout = setTimeout(async () => {
+      const { jsonSchema, view } = await createTable({ client, space, typename: Type.getTypename(schema) });
+      setJsonSchema(jsonSchema);
+      setView(view);
+    });
+    return () => clearTimeout(timeout);
+  }, [client, space, schema]);
+
+  const model = useTableModel<TableRow>({ view, schema: jsonSchema, rows: [], features });
   useEffect(() => {
     if (!model || !space) {
       return;
@@ -108,7 +100,7 @@ const meta: Meta<typeof DefaultStory> = {
   parameters: { translations, controls: { disable: true } },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, DataType.Organization, DataType.Person],
+      types: [DataType.View, DataType.Organization, DataType.Person, TableView],
       createIdentity: true,
       createSpace: true,
     }),

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -8,10 +8,12 @@ import { useGridContext, type GridScopedProps } from '@dxos/react-ui-grid';
 
 export type CellValidationMessageProps = {
   validationError: string | null;
+  variant?: 'error' | 'warning';
 };
 
 export const CellValidationMessage = ({
   validationError,
+  variant = 'error',
   __gridScope,
 }: GridScopedProps<CellValidationMessageProps>) => {
   const { editing, editBox: box } = useGridContext('GridSheetCellEditor', __gridScope);
@@ -20,10 +22,13 @@ export const CellValidationMessage = ({
     return null;
   }
 
+  const bgClass = variant === 'error' ? 'bg-errorSurface' : 'bg-warningSurface';
+  const textClass = variant === 'error' ? 'text-errorSurfaceText' : 'text-warningSurfaceText';
+
   return (
     <div
       role='none'
-      className='absolute bg-errorSurface text-errorSurfaceText rounded-bs-sm text-xs p-1'
+      className={`absolute ${bgClass} ${textClass} rounded-bs-sm text-xs p-1`}
       style={{
         ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },
         zIndex: 10,

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Schema } from 'effect';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { getSnapshot } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -20,18 +20,26 @@ type FormCellEditorProps = {
   fieldProjection: FieldProjection;
   model?: TableModel;
   schema?: Schema.Schema.AnyNoContext;
+  onSave?: () => void;
   __gridScope: any;
 };
 
-export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }: FormCellEditorProps) => {
-  const { editing, setEditing } = useGridContext('ArrayEditor', __gridScope);
-  const cellRef = useRef<HTMLButtonElement | null>(null);
+export const FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }: FormCellEditorProps) => {
+  const { editing: contextEditing, setEditing } = useGridContext('ArrayEditor', __gridScope);
+  const [editing, setLocalEditing] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
-    if (editing && editing.cellElement) {
-      cellRef.current = editing.cellElement as HTMLButtonElement;
+    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);
     }
-  }, [editing?.cellElement]);
+  }, [contextEditing]);
 
   const narrowedSchema = useMemo(() => {
     if (!schema) {
@@ -41,8 +49,8 @@ export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }:
   }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
 
   const originalRow = useMemo(() => {
-    if (model && editing) {
-      const cell = parseCellIndex(editing.index);
+    if (model && contextEditing) {
+      const cell = parseCellIndex(contextEditing.index);
       const row = model.getRowAt(cell.row);
       invariant(row);
 
@@ -50,7 +58,7 @@ export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }:
     }
 
     return undefined;
-  }, [model, editing]);
+  }, [model, contextEditing]);
 
   const formValues = useMemo(() => {
     if (originalRow) {
@@ -65,27 +73,28 @@ export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }:
       const value = getDeep(values, [path]);
       setDeep(originalRow, [path], value);
       setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
     },
     [fieldProjection.field.path, originalRow],
   );
 
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (nextOpen === false) {
-        setEditing(null);
-      }
-    },
-    [setEditing],
-  );
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    if (nextOpen === false) {
+      setEditing(null);
+      onSave?.();
+    }
+    setLocalEditing(nextOpen);
+  }, []);
 
   if (!editing) {
     return null;
   }
 
   return (
-    <Popover.Root open={editing !== null} onOpenChange={handleOpenChange}>
-      <Popover.VirtualTrigger virtualRef={cellRef} />
-      <Popover.Content tabIndex={-1} classNames='popover-card-width'>
+    <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} />

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -4,25 +4,25 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
 import { type EchoSchema, isMutable } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Filter, useQuery, live } from '@dxos/react-client/echo';
+import { Filter, useQuery } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { defaultRowSize, Grid, type GridEditing } from '@dxos/react-ui-grid';
-import { ViewProjection, ViewType } from '@dxos/schema';
+import { createDefaultSchema, DataType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { TableCellEditor, type TableCellEditorProps } from './TableCellEditor';
 import { useTableModel } from '../../hooks';
 import { type TableFeatures } from '../../model';
-import translations from '../../translations';
-import { TableType } from '../../types';
-import { initializeTable } from '../../util';
+import { translations } from '../../translations';
+import { TableView } from '../../types';
+import { createTable } from '../../util';
 
 type StoryProps = {
   editing: GridEditing;
@@ -32,23 +32,16 @@ const DefaultStory = ({ editing }: StoryProps) => {
   const { space } = useClientProvider();
   invariant(space);
 
-  const tables = useQuery(space, Filter.type(TableType));
-  const [table, setTable] = useState<TableType>();
+  const views = useQuery(space, Filter.type(DataType.View));
+  const [view, setView] = useState<DataType.View>();
   const [schema, setSchema] = useState<EchoSchema>();
   useEffect(() => {
-    if (space && tables.length && !table) {
-      const table = tables[0];
-      invariant(table.view);
-      setTable(table);
-      setSchema(space.db.schemaRegistry.getSchema(table.view.target!.query.typename!));
+    if (space && views.length && !view) {
+      const view = views[0];
+      setView(view);
+      setSchema(space.db.schemaRegistry.getSchema(view.query.typename!));
     }
-  }, [space, tables]);
-
-  const projection = useMemo(() => {
-    if (schema && table?.view) {
-      return new ViewProjection(schema.jsonSchema, table.view.target!);
-    }
-  }, [schema, table?.view]);
+  }, [space, views, view]);
 
   const features: Partial<TableFeatures> = useMemo(
     () => ({
@@ -59,7 +52,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
     [schema],
   );
 
-  const model = useTableModel({ table, projection, features });
+  const model = useTableModel({ view, schema: schema?.jsonSchema, features });
 
   const handleQuery: TableCellEditorProps['onQuery'] = async ({ field }) => {
     // TODO(dmaretskyi): If no schema query nothing
@@ -73,7 +66,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
     });
   };
 
-  if (!model || !schema || !table) {
+  if (!model || !schema || !view) {
     return <div />;
   }
 
@@ -87,22 +80,25 @@ const DefaultStory = ({ editing }: StoryProps) => {
 };
 
 const meta: Meta<StoryProps> = {
-  title: 'plugins/plugin-table/TableCellEditor',
+  title: 'ui/react-ui-table/TableCellEditor',
   component: DefaultStory,
   render: DefaultStory,
   parameters: { translations, layout: 'centered' },
   decorators: [
     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 });
+        const schema = createDefaultSchema();
+        const { view } = await createTable({ client, space, typename: schema.typename });
+        space.db.add(view);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            live(schema, {
-              name: faker.person.fullName(),
+            Obj.make(schema, {
+              title: faker.person.fullName(),
+              status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
+              description: faker.lorem.sentence(),
             }),
           );
         });