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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.3-staging.0fa589b",
+  "version": "0.8.4-main.f9ba587",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -53,60 +53,58 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/context": "0.8.3-staging.0fa589b",
-    "@dxos/debug": "0.8.3-staging.0fa589b",
-    "@dxos/echo-schema": "0.8.3-staging.0fa589b",
-    "@dxos/effect": "0.8.3-staging.0fa589b",
-    "@dxos/echo": "0.8.3-staging.0fa589b",
-    "@dxos/invariant": "0.8.3-staging.0fa589b",
-    "@dxos/lit-grid": "0.8.3-staging.0fa589b",
-    "@dxos/live-object": "0.8.3-staging.0fa589b",
-    "@dxos/keys": "0.8.3-staging.0fa589b",
-    "@dxos/log": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-search": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-space": "0.8.3-staging.0fa589b",
-    "@dxos/react-client": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-attention": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-editor": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-form": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-menu": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-grid": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-searchlist": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-stack": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-types": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-tag-picker": "0.8.3-staging.0fa589b",
-    "@dxos/schema": "0.8.3-staging.0fa589b",
-    "@dxos/util": "0.8.3-staging.0fa589b"
+    "@dxos/context": "0.8.4-main.f9ba587",
+    "@dxos/debug": "0.8.4-main.f9ba587",
+    "@dxos/echo": "0.8.4-main.f9ba587",
+    "@dxos/echo-schema": "0.8.4-main.f9ba587",
+    "@dxos/effect": "0.8.4-main.f9ba587",
+    "@dxos/invariant": "0.8.4-main.f9ba587",
+    "@dxos/keys": "0.8.4-main.f9ba587",
+    "@dxos/lit-grid": "0.8.4-main.f9ba587",
+    "@dxos/log": "0.8.4-main.f9ba587",
+    "@dxos/live-object": "0.8.4-main.f9ba587",
+    "@dxos/plugin-search": "0.8.4-main.f9ba587",
+    "@dxos/plugin-space": "0.8.4-main.f9ba587",
+    "@dxos/react-client": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-attention": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-editor": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-form": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-grid": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-menu": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-searchlist": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-stack": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-tag-picker": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-types": "0.8.4-main.f9ba587",
+    "@dxos/schema": "0.8.4-main.f9ba587",
+    "@dxos/util": "0.8.4-main.f9ba587"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.88.0",
     "@types/lodash.orderby": "^4.6.9",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.16.13",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.3-staging.0fa589b",
-    "@dxos/random": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b",
-    "@dxos/storybook-utils": "0.8.3-staging.0fa589b",
-    "@dxos/test-utils": "0.8.3-staging.0fa589b"
+    "@dxos/echo-signals": "0.8.4-main.f9ba587",
+    "@dxos/random": "0.8.4-main.f9ba587",
+    "@dxos/react-ui": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-theme": "0.8.4-main.f9ba587",
+    "@dxos/storybook-utils": "0.8.4-main.f9ba587",
+    "@dxos/test-utils": "0.8.4-main.f9ba587"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b"
+    "@dxos/react-ui": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
   },
   "publishConfig": {
     "access": "public"

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
@@ -19,7 +19,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { DynamicTable } from './DynamicTable';
 import { type TableFeatures } from '../../model';
-import translations from '../../translations';
+import { translations } from '../../translations';
 
 faker.seed(0);
 

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React, { useCallback, useMemo, useRef } from 'react';
 
@@ -23,9 +23,9 @@ 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 { useTableModel, useAddRow } from '../../hooks';
 import { TablePresentation } from '../../model';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { TableType } from '../../types';
 import { initializeTable } from '../../util';
 import { TableToolbar } from '../TableToolbar';
@@ -72,11 +72,7 @@ const useTestTableModel = () => {
     tableRef.current?.update?.();
   }, []);
 
-  const handleInsertRow = useCallback(() => {
-    if (space && schema) {
-      space.db.add(live(schema, {}));
-    }
-  }, [space, schema]);
+  const addRow = useAddRow({ space, schema });
 
   const handleDeleteRows = useCallback(
     (_: number, objects: any[]) => {
@@ -101,13 +97,17 @@ const useTestTableModel = () => {
     projection,
     features,
     rows: filteredObjects,
-    onInsertRow: handleInsertRow,
+    onInsertRow: addRow,
     onDeleteRows: handleDeleteRows,
     onDeleteColumn: handleDeleteColumn,
     onCellUpdate: handleCellUpdate,
     onRowOrderChange: handleRowOrderChange,
   });
 
+  const handleInsertRow = useCallback(() => {
+    model?.insertRow();
+  }, [model]);
+
   const handleSaveView = useCallback(() => {
     model?.saveView();
   }, [model]);
@@ -209,8 +209,16 @@ 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],
       createIdentity: true,
@@ -227,8 +235,6 @@ const meta: Meta<StoryProps> = {
         });
       },
     }),
-    withLayout({ fullscreen: true }),
-    withTheme,
   ],
 };
 

package/src/components/Table/Table.tsx

@@ -91,6 +91,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 +101,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) ?? {},
@@ -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);
@@ -366,7 +380,6 @@ const TableMain = forwardRef<TableController, TableMainProps>(
         <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}

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

@@ -4,17 +4,16 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import { SchemaAST } from 'effect';
 import React, { useEffect, useMemo } from 'react';
 
-import { Obj, type Type } from '@dxos/echo';
+import { Obj, Ref, type Type } from '@dxos/echo';
 import { getSchemaTypename, toJsonSchema } from '@dxos/echo-schema';
 import { getAnnotation } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 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 { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
@@ -23,7 +22,7 @@ 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 { translations } from '../../translations';
 import { TableType } from '../../types';
 
 faker.seed(1);
@@ -45,7 +44,7 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
     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) }));
+    return space.db.add(Obj.make(TableType, { view: Ref.make(view) }));
   }, [schema, space, jsonSchema]);
 
   const projection = useMemo(() => {

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/TableCellEditor.stories.tsx

@@ -4,7 +4,7 @@
 
 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';
@@ -20,7 +20,7 @@ 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 { translations } from '../../translations';
 import { TableType } from '../../types';
 import { initializeTable } from '../../util';
 
@@ -87,7 +87,7 @@ 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' },

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -4,7 +4,7 @@
 
 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';
@@ -24,7 +24,7 @@ import {
   type GridCellEditorProps,
   type GridScopedProps,
 } from '@dxos/react-ui-grid';
-import { tagPickerExtension, createLinks } from '@dxos/react-ui-tag-picker';
+import { tagPicker, createLinks } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
 import { CellValidationMessage } from './CellValidationMessage';
@@ -92,6 +92,8 @@ export const TableValueEditor = ({
   );
 };
 
+const editorSlots = { scroller: { className: '!plb-[--dx-grid-cell-editor-padding-block]' } };
+
 export const TableCellEditor = ({
   model,
   modals,
@@ -104,6 +106,7 @@ export const TableCellEditor = ({
   const suppressNextBlur = useRef(false);
   const { themeMode } = useThemeContext();
   const [_validationError, setValidationError] = useState<string | null>(null);
+  const [_validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -117,6 +120,38 @@ export const TableCellEditor = ({
     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.view.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 +159,17 @@ 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);
       } else {
-        setValidationError(result.error);
-        // Editor stays open on validation failure
+        setValidationError(validationResult.error);
+        setValidationVariant('error');
       }
     },
     [model, editing, onEnter, onFocus, setEditing],
@@ -178,6 +211,7 @@ export const TableCellEditor = ({
           }
         } else {
           setValidationError(result.error);
+          setValidationVariant('error');
         }
       } else {
         setValidationError(null);
@@ -214,9 +248,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(
@@ -300,9 +334,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 +348,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 +376,12 @@ 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/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],
+  );
+};

package/src/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import translations from './translations';
+import { translations } from './translations';
 
 export * from './components';
 export * from './hooks';