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

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -4,14 +4,16 @@
 
 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;
+  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,26 @@
 
 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 { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
+import { DataType, createDefaultSchema } 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';
+
+import { TableCellEditor, type TableCellEditorProps } from './TableCellEditor';
 
 type StoryProps = {
   editing: GridEditing;
@@ -32,23 +33,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!));
-    }
-  }, [space, tables]);
-
-  const projection = useMemo(() => {
-    if (schema && table?.view) {
-      return new ViewProjection(schema.jsonSchema, table.view.target!);
+    if (space && views.length && !view) {
+      const view = views[0];
+      setView(view);
+      setSchema(space.db.schemaRegistry.getSchema(view.query.typename!));
     }
-  }, [schema, table?.view]);
+  }, [space, views, view]);
 
   const features: Partial<TableFeatures> = useMemo(
     () => ({
@@ -59,7 +53,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 +67,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
     });
   };
 
-  if (!model || !schema || !table) {
+  if (!model || !schema || !view) {
     return <div />;
   }
 
@@ -87,22 +81,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(),
             }),
           );
         });

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -4,33 +4,33 @@
 
 import { type Completion } from '@codemirror/autocomplete';
 import { type Schema } from 'effect/Schema';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { type DxGrid } from '@dxos/lit-grid';
+import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
 import { useThemeContext } from '@dxos/react-ui';
 import { createMarkdownExtensions } from '@dxos/react-ui-editor';
 import {
-  cellQuery,
-  editorKeys,
-  parseCellIndex,
-  useGridContext,
-  type DxGridPlanePosition,
+  type EditorBlurHandler,
   type EditorKeyEvent,
   type EditorKeyOrBlurHandler,
-  type EditorBlurHandler,
   GridCellEditor,
   type GridCellEditorProps,
   type GridScopedProps,
+  cellQuery,
+  editorKeys,
+  parseCellIndex,
+  useGridContext,
 } from '@dxos/react-ui-grid';
-import { tagPickerExtension, createLinks } from '@dxos/react-ui-tag-picker';
+import { createLinks, tagPicker } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
+import { type ModalController, type TableModel } from '../../model';
+
 import { CellValidationMessage } from './CellValidationMessage';
-import { FormCellEditor } from './FormCellEditor';
 import { completion } from './extension';
-import { type TableModel, type ModalController } from '../../model';
+import { FormCellEditor } from './FormCellEditor';
 
 const newValue = Symbol.for('newValue');
 
@@ -47,8 +47,9 @@ export type TableCellEditorProps = {
   model?: TableModel;
   modals?: ModalController;
   schema?: Schema.AnyNoContext;
-  onEnter?: (cell: DxGridPlanePosition) => void;
-  onFocus?: DxGrid['refocus'];
+  onEnter?: (cell: DxGridPosition) => void;
+  onFocus?: (axis?: DxGridAxis, delta?: -1 | 0 | 1, cell?: DxGridPosition) => void;
+  onSave?: () => void;
   onQuery?: (field: FieldProjection, text: string) => Promise<QueryResult[]>;
 };
 
@@ -58,6 +59,7 @@ export const TableValueEditor = ({
   schema,
   onEnter,
   onFocus,
+  onSave,
   onQuery,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
@@ -69,14 +71,26 @@ export const TableValueEditor = ({
     }
 
     const { col } = parseCellIndex(editing.index);
-    const field = model.projection.view.fields[col];
+    const field = model.projection.fields[col];
     const fieldProjection = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection);
     return fieldProjection;
   }, [model, editing]);
 
-  if (fieldProjection?.props.type === TypeEnum.Array) {
-    return <FormCellEditor fieldProjection={fieldProjection} model={model} schema={schema} __gridScope={__gridScope} />;
+  if (
+    fieldProjection?.props.type === TypeEnum.Array ||
+    fieldProjection?.props.format === FormatEnum.SingleSelect
+    // TODO(thure): Support `FormatEnum.MultiSelect`
+  ) {
+    return (
+      <FormCellEditor
+        fieldProjection={fieldProjection}
+        model={model}
+        schema={schema}
+        __gridScope={__gridScope}
+        onSave={onSave}
+      />
+    );
   }
 
   // For all other types, use the existing cell editor
@@ -87,23 +101,28 @@ export const TableValueEditor = ({
       onEnter={onEnter}
       onFocus={onFocus}
       onQuery={onQuery}
+      onSave={onSave}
       __gridScope={__gridScope}
     />
   );
 };
 
+const editorSlots = { scroller: { className: '!plb-[--dx-grid-cell-editor-padding-block]' } };
+
 export const TableCellEditor = ({
   model,
   modals,
   onEnter,
   onFocus,
   onQuery,
+  onSave,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
   const { id: gridId, editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
   const { themeMode } = useThemeContext();
-  const [_validationError, setValidationError] = useState<string | null>(null);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -111,12 +130,44 @@ export const TableCellEditor = ({
     }
 
     const { col } = parseCellIndex(editing.index);
-    const field = model.projection.view.fields[col];
+    const field = model.projection.fields[col];
     const fieldProjection = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection);
     return fieldProjection;
   }, [model, editing]);
 
+  useEffect(() => {
+    // Check for existing validation errors when editing starts (for draft rows).
+    if (!model || !editing || !fieldProjection) {
+      setValidationError(null);
+      return;
+    }
+
+    const cell = parseCellIndex(editing.index);
+    const { row, col } = cell;
+
+    if (model.isDraftCell(cell)) {
+      const field = model.projection.fields[col];
+      const hasValidationError = model.hasDraftRowValidationError(row, field.path);
+
+      if (hasValidationError) {
+        const draftRows = model.draftRows.value;
+        if (row >= 0 && row < draftRows.length) {
+          const draftRow = draftRows[row];
+          const validationError = draftRow.validationErrors?.find((error) => error.path === field.path);
+          if (validationError) {
+            setValidationError(validationError.message);
+            setValidationVariant('warning');
+          }
+        }
+      } else {
+        setValidationError(null);
+      }
+    } else {
+      setValidationError(null);
+    }
+  }, [model, editing, fieldProjection]);
+
   const handleEnter = useCallback(
     async (value: any) => {
       if (!model || !editing) {
@@ -124,19 +175,18 @@ export const TableCellEditor = ({
       }
 
       const cell = parseCellIndex(editing.index);
+      const validationResult = await model.validateCellData(cell, value);
 
-      // Validate the value
-      const result = await model.validateCellData(cell, value);
-
-      if (result.valid) {
+      if (validationResult.valid) {
         setValidationError(null);
         model.setCellData(cell, value);
         onEnter?.(cell);
         onFocus?.();
         setEditing(null);
+        onSave?.();
       } else {
-        setValidationError(result.error);
-        // Editor stays open on validation failure
+        setValidationError(validationResult.error);
+        setValidationVariant('error');
       }
     },
     [model, editing, onEnter, onFocus, setEditing],
@@ -172,22 +222,25 @@ export const TableCellEditor = ({
           setValidationError(null);
           model.setCellData(cell, value);
           setEditing(null);
+          onSave?.();
           onEnter?.(cell);
           if (event && onFocus) {
-            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
           }
         } else {
           setValidationError(result.error);
+          setValidationVariant('error');
         }
       } else {
         setValidationError(null);
         setEditing(null);
+        onSave?.();
         if (event && onFocus) {
           onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
         }
       }
     },
-    [model, editing, onFocus, onEnter, fieldProjection, setEditing],
+    [model, editing, onFocus, onEnter, fieldProjection, setEditing, onSave],
   );
 
   const extension = useMemo(() => {
@@ -214,9 +267,9 @@ export const TableCellEditor = ({
       const mode = format === FormatEnum.SingleSelect ? ('single-select' as const) : ('multi-select' as const);
 
       extension.push(
-        tagPickerExtension({
+        tagPicker({
           mode,
-          inGrid: true,
+          keymap: false,
           onSearch: (text, selectedIds) => {
             return options
               .filter(
@@ -288,7 +341,7 @@ export const TableCellEditor = ({
     if (model && editing) {
       const cell = parseCellIndex(editing.index);
       const { col } = cell;
-      const field = model.projection.view.fields[col];
+      const field = model.projection.fields[col];
       const fieldProjection = model.projection.getFieldProjection(field.id);
 
       if (
@@ -300,9 +353,10 @@ export const TableCellEditor = ({
         if (value !== undefined) {
           const options = fieldProjection.props.options || [];
 
-          if (fieldProjection.props.format === FormatEnum.MultiSelect && Array.isArray(value)) {
+          if (fieldProjection.props.format === FormatEnum.MultiSelect) {
             const tagItems = value
-              .map((id) => {
+              .split(',')
+              .map((id: string) => {
                 const option = options.find((o) => o.id === id);
                 if (option) {
                   return {
@@ -313,7 +367,7 @@ export const TableCellEditor = ({
                 }
                 return undefined;
               })
-              .filter((item): item is { id: any; label: string; hue: any } => item !== undefined);
+              .filter((item: any): item is { id: any; label: string; hue: any } => item !== undefined);
 
             return createLinks(tagItems);
           } else {
@@ -341,8 +395,8 @@ export const TableCellEditor = ({
 
   return (
     <>
-      <CellValidationMessage validationError={_validationError} __gridScope={__gridScope} />
-      <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} />
+      <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
+      <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
     </>
   );
 };

package/src/components/TableCellEditor/extension.ts

@@ -3,10 +3,10 @@
 //
 
 import {
-  autocompletion,
-  pickedCompletion,
   type CompletionContext,
   type CompletionResult,
+  autocompletion,
+  pickedCompletion,
 } from '@codemirror/autocomplete';
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';

package/src/components/TableToolbar/TableToolbar.tsx

@@ -11,11 +11,11 @@ import {
   type ActionGraphEdges,
   type ActionGraphNodes,
   type ActionGraphProps,
-  createGapSeparator,
-  createMenuAction,
   type MenuAction,
   MenuProvider,
   ToolbarMenu,
+  createGapSeparator,
+  createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
 import { rxFromSignal } from '@dxos/react-ui-menu';

package/src/components/testing.ts

@@ -5,13 +5,10 @@
 import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { Obj, Ref } from '@dxos/echo';
-import { FormatEnum, ObjectId, setValue, toJsonSchema, TypedObject, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo-schema';
+import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
-import { live } from '@dxos/react-client/echo';
-import { createView, type ViewProjection } from '@dxos/schema';
-
-import { TableType } from '../types';
+import { type ProjectionModel } from '@dxos/schema';
 
 export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
   id: ObjectId,
@@ -21,18 +18,6 @@ export const TestSchema = TypedObject({ typename: 'example.com/type/Test', versi
   netWorth: Schema.optional(Schema.Number),
 });
 
-export const createTable = (schema = TestSchema) => {
-  return Obj.make(TableType, {
-    view: Ref.make(
-      createView({
-        name: 'Test',
-        typename: schema.typename,
-        jsonSchema: toJsonSchema(schema),
-      }),
-    ),
-  });
-};
-
 export const createItems = (n: number) => {
   const { data } = live({
     data: Array.from({ length: n }, () => ({
@@ -47,13 +32,13 @@ export const createItems = (n: number) => {
 };
 
 export type SimulatorProps = {
-  table: TableType;
+  projection: ProjectionModel;
   items: any[];
   insertInterval?: number;
   updateInterval?: number;
 };
 
-export const useSimulator = ({ items, table, insertInterval, updateInterval }: SimulatorProps) => {
+export const useSimulator = ({ items, projection, insertInterval, updateInterval }: SimulatorProps) => {
   useEffect(() => {
     if (!insertInterval) {
       return;
@@ -74,10 +59,8 @@ export const useSimulator = ({ items, table, insertInterval, updateInterval }: S
 
     const i = setInterval(() => {
       const rowIdx = Math.floor(Math.random() * items.length);
-      const fields = table.view?.target?.fields ?? [];
+      const fields = projection.fields ?? [];
       const columnIdx = Math.floor(Math.random() * fields.length);
-      // TODO(ZaymonFC): ... This is borked.
-      const projection: ViewProjection = (table as any)._projection;
       const field = fields[columnIdx];
       const item = items[rowIdx];
 
@@ -115,5 +98,5 @@ export const useSimulator = ({ items, table, insertInterval, updateInterval }: S
     }, updateInterval);
 
     return () => clearInterval(i);
-  }, [items, table.view?.target?.fields, updateInterval]);
+  }, [items, projection.fields, updateInterval]);
 };

package/src/hooks/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './useTableModel';
+export * from './useAddRow';

package/src/hooks/useAddRow.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Schema } from 'effect';
+import { useCallback } from 'react';
+
+import { type Space } from '@dxos/client/echo';
+import { Obj } from '@dxos/echo';
+
+export type UseAddRowParams = {
+  space?: Space;
+  schema?: Schema.Schema.AnyNoContext;
+};
+
+/**
+ * Hook that provides a safe row creation function that handles schema validation failures.
+ * Returns a callback that attempts to create an object and returns boolean success/failure.
+ * Can accept optional data to create objects with specific content (used for committing draft rows).
+ */
+export const useAddRow = ({ space, schema }: UseAddRowParams) => {
+  return useCallback(
+    (data?: any) => {
+      if (space && schema) {
+        try {
+          space.db.add(Obj.make(schema, data ?? {}));
+          return true;
+        } catch (error) {
+          return false;
+        }
+      }
+      return false;
+    },
+    [space, schema],
+  );
+};