@dxos/react-ui-table 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

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

@@ -2,31 +2,22 @@
 // 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 {
-  EchoObject,
-  FormatAnnotation,
-  FormatEnum,
-  GeneratorAnnotation,
-  LabelAnnotation,
-  PropertyMetaAnnotationId,
-} from '@dxos/echo-schema';
+import { Annotation, Format, Obj, type QueryAST, Type } from '@dxos/echo';
+import { PropertyMetaAnnotationId } 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 { ViewEditor } from '@dxos/react-ui-form';
+import { withTheme } from '@dxos/react-ui/testing';
+import { ViewEditor, translations as formTranslations } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { DataType, getSchemaFromPropertyDefinitions } from '@dxos/schema';
-import { Testing, createObjectFactory } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { View, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
+import { TestSchema, createObjectFactory } from '@dxos/schema/testing';
 
 import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
@@ -35,13 +26,13 @@ import { TableToolbar } from '../TableToolbar';
 
 import { Table as TableComponent } from './Table';
 
-const TestSchema = Schema.Struct({
+const Example = 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))
+      .pipe(Format.FormatAnnotation.set(Format.TypeFormat.SingleSelect))
       .annotations({
         title: 'Status',
         [PropertyMetaAnnotationId]: {
@@ -56,14 +47,14 @@ const TestSchema = Schema.Struct({
       }),
   ),
   description: Schema.optional(Schema.String).annotations({ title: 'Description' }),
-  parent: Schema.optional(Schema.suspend((): Type.Ref<TestSchema> => Type.Ref(TestSchema))).annotations({
+  parent: Schema.optional(Schema.suspend((): Type.Ref<Example> => Type.Ref(Example))).annotations({
     title: 'Parent',
   }),
 }).pipe(
   Type.Obj({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }),
-  LabelAnnotation.set(['name']),
+  Annotation.LabelAnnotation.set(['name']),
 );
-interface TestSchema extends Schema.Schema.Type<typeof TestSchema> {}
+interface Example extends Schema.Schema.Type<typeof Example> {}
 
 const StoryViewEditor = ({
   view,
@@ -71,18 +62,18 @@ const StoryViewEditor = ({
   space,
   handleDeleteColumn,
 }: {
-  view?: DataType.View;
+  view?: View.View;
   schema?: Schema.Schema.AnyNoContext;
   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],
   );
@@ -96,7 +87,7 @@ const StoryViewEditor = ({
       registry={space?.db.schemaRegistry}
       schema={schema}
       view={view}
-      onTypenameChanged={handleTypenameChanged}
+      onQueryChanged={handleQueryChanged}
       onDelete={handleDeleteColumn}
     />
   );
@@ -110,7 +101,7 @@ const DefaultStory = () => {
   const {
     space,
     schema,
-    view,
+    table,
     tableRef,
     model,
     presentation,
@@ -120,7 +111,7 @@ const DefaultStory = () => {
     handleDeleteColumn,
   } = useTestTableModel();
 
-  if (!schema || !view) {
+  if (!schema || !table?.view.target) {
     return <div />;
   }
 
@@ -139,10 +130,15 @@ const DefaultStory = () => {
           />
         </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'>
-          {JSON.stringify({ view, schema }, null, 2)}
+      <div className='flex flex-col bs-full border-l border-separator overflow-y-auto'>
+        <StoryViewEditor
+          view={table.view.target}
+          schema={schema}
+          space={space}
+          handleDeleteColumn={handleDeleteColumn}
+        />
+        <SyntaxHighlighter language='json' className='text-xs'>
+          {JSON.stringify({ view: table.view.target, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
     </div>
@@ -160,29 +156,22 @@ type StoryProps = { rows?: number };
 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, Table.Table],
+      types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
-        const [schema] = await space.db.schemaRegistry.register([TestSchema]);
-        const { view } = await Table.makeView({ client, space, typename: schema.typename });
+      onCreateSpace: async ({ client, space }) => {
+        const [schema] = await space.db.schemaRegistry.register([Example]);
+        const { view, jsonSchema } = await View.makeFromSpace({ client, space, typename: schema.typename });
+        const table = Table.make({ view, jsonSchema });
         view.projection.fields = [
-          view.projection.fields.find((field) => field.path === 'name')!,
-          ...view.projection.fields.filter((field) => field.path !== 'name'),
+          view.projection.fields.find((field: any) => field.path === 'name')!,
+          ...view.projection.fields.filter((field: any) => field.path !== 'name'),
         ];
 
-        space.db.add(view);
+        space.db.add(table);
 
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
@@ -196,6 +185,13 @@ const meta = {
       },
     }),
   ],
+  parameters: {
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
+    translations: [...translations, ...formTranslations],
+  },
 } satisfies Meta<typeof TableComponent>;
 
 export default meta;
@@ -206,30 +202,32 @@ export const Default: Story = {};
 
 export const StaticSchema: StoryObj = {
   render: DefaultStory,
-  parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [DataType.View, Table.Table, Testing.Contact, Testing.Organization],
+      types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
-        const { view } = await Table.makeView({ client, space, typename: Testing.Contact.typename });
-        space.db.add(view);
+      onCreateSpace: async ({ client, space }) => {
+        const { view, jsonSchema } = await View.makeFromSpace({ client, space, typename: TestSchema.Person.typename });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          { type: Testing.Contact, count: 10 },
-          // { type: Testing.Organization, count: 1 },
+          { type: TestSchema.Person, count: 10 },
+          // { type: TestSchema.Organization, count: 1 },
         ]);
       },
     }),
-    withLayout({ fullscreen: true }),
-    withTheme,
   ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, ...formTranslations],
+  },
 };
 
 const ContactWithArrayOfEmails = Schema.Struct({
-  name: Schema.String.pipe(GeneratorAnnotation.set('person.fullName')),
+  name: Schema.String.pipe(Annotation.GeneratorAnnotation.set('person.fullName')),
   emails: Schema.optional(
     Schema.Array(
       Schema.Struct({
@@ -239,7 +237,7 @@ const ContactWithArrayOfEmails = Schema.Struct({
     ),
   ),
 }).pipe(
-  EchoObject({
+  Type.Obj({
     typename: 'dxos.org/type/ContactWithArrayOfEmails',
     version: '0.1.0',
   }),
@@ -247,39 +245,44 @@ const ContactWithArrayOfEmails = Schema.Struct({
 
 export const ArrayOfObjects: StoryObj = {
   render: DefaultStory,
-  parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [DataType.View, Table.Table, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
+      types: [View.View, Table.Table, TestSchema.Person, TestSchema.Organization, ContactWithArrayOfEmails],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
-        const { view } = await Table.makeView({ client, space, typename: ContactWithArrayOfEmails.typename });
-        space.db.add(view);
+      onCreateSpace: async ({ client, space }) => {
+        const { view, jsonSchema } = await View.makeFromSpace({
+          client,
+          space,
+          typename: ContactWithArrayOfEmails.typename,
+        });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          // { type: Testing.Contact, count: 10 },
-          // { type: Testing.Organization, count: 1 },
+          // { type: TestSchema.Person, count: 10 },
+          // { type: TestSchema.Organization, count: 1 },
           { type: ContactWithArrayOfEmails, count: 10 },
         ]);
       },
     }),
-    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, Table.Table],
+      types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
+      onCreateSpace: async ({ client, space }) => {
         // Configure schema.
         const typename = 'example.com/SingleSelect';
         const selectOptions = [
@@ -295,25 +298,26 @@ export const Tags: Meta<StoryProps> = {
         const schema = getSchemaFromPropertyDefinitions(typename, [
           {
             name: 'single',
-            format: FormatEnum.SingleSelect,
+            format: Format.TypeFormat.SingleSelect,
             config: { options: selectOptions },
           },
           {
             name: 'multiple',
-            format: FormatEnum.MultiSelect,
+            format: Format.TypeFormat.MultiSelect,
             config: { options: selectOptions },
           },
         ]);
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const { view } = await Table.makeView({ client, space, typename });
-        space.db.add(view);
+        const { view, jsonSchema } = await View.makeFromSpace({ client, space, typename });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
 
         // Populate.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            live(storedSchema, {
+            Obj.make(storedSchema, {
               single: faker.helpers.arrayElement([...selectOptionIds, undefined]),
               multiple: faker.helpers.randomSubset(selectOptionIds),
             }),
@@ -321,7 +325,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,8 +16,8 @@ import React, {
   useState,
 } from 'react';
 
-import { type Client } from '@dxos/react-client';
 // TODO(wittjosiah): Remove dependency on react-client.
+import { type Client } from '@dxos/react-client';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
   type DxGridElement,
@@ -34,11 +35,10 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
 import { tableButtons, tableControls } from '../../util';
-import { type TableCellEditorProps, TableValueEditor } 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 } };
@@ -80,15 +80,17 @@ export type TableController = {
 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 modals = useMemo(() => new ModalController(), []);
@@ -275,7 +277,7 @@ 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 (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);
@@ -320,7 +322,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               void navigator.clipboard.readText().then((clipboardText) => {
                 try {
                   // Attempt to set the cell's content to clipboard content
-                  model.setCellData(cell, clipboardText);
+                  model.setCellData(cell, String.trim(clipboardText).replace(/[\n\r]+/, ' '));
                   handleSave();
                 } catch {
                   // If validation fails, emit a DxEditRequest event with initialContent from clipboard
@@ -356,6 +358,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
             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.
             }
@@ -404,6 +407,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           schema={schema}
           onFocus={handleFocus}
           onSave={handleSave}
+          onCreate={onCreate}
           client={client}
         />
         <Grid.Content
@@ -419,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>
     );
   },

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -2,34 +2,37 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Filter, Obj } from '@dxos/echo';
-import { Ref, type TypeAnnotation, getValue } from '@dxos/echo-schema';
+import { Format, Ref, type TypeAnnotation, getValue } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { getSnapshot } from '@dxos/live-object';
 import { type Client } from '@dxos/react-client';
 import { getSpace } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
 import { Form, type FormProps } from '@dxos/react-ui-form';
-import { cellQuery, parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
+import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
 import { type FieldProjection } from '@dxos/schema';
-import { getDeep, isNotFalsy, setDeep } from '@dxos/util';
+import { getDeep, isTruthy, setDeep } from '@dxos/util';
 
 import { type ModalController, type TableModel } from '../../model';
 import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
-type FormCellEditorProps = {
+export type OnCreateHandler = (schema: Schema.Schema.AnyNoContext, values: any) => Parameters<typeof Ref.make>[0];
+
+export type FormCellEditorProps = {
   fieldProjection: FieldProjection;
   model?: TableModel;
   schema?: Schema.Schema.AnyNoContext;
   onSave?: () => void;
+  onCreate?: OnCreateHandler;
   client?: Client;
   modals?: ModalController;
   __gridScope: any;
-} & Omit<FormProps<any>, 'values' | 'schema'>;
+} & Omit<FormProps<any>, 'values' | 'schema' | 'onCreate'>;
 
 const createOptionLabel = ['create new object label', { ns: translationKey }] as [string, { ns: string }];
 
@@ -40,6 +43,7 @@ export const FormCellEditor = ({
   onSave,
   client,
   modals,
+  onCreate,
   __gridScope,
   ...formProps
 }: FormCellEditorProps) => {
@@ -48,7 +52,7 @@ export const FormCellEditor = ({
   const anchorRef = useRef<HTMLButtonElement | null>(null);
 
   const getSchema = useCallback(
-    (typeAnnotation: TypeAnnotation) => {
+    (typeAnnotation: Pick<TypeAnnotation, 'typename'>) => {
       const space = getSpace(model!.view);
       invariant(space);
 
@@ -76,7 +80,7 @@ export const FormCellEditor = ({
               label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
             };
           })
-          .filter(isNotFalsy);
+          .filter(isTruthy);
       }
 
       return [];
@@ -116,36 +120,6 @@ export const FormCellEditor = ({
     [fieldProjection.field.path, onSave, contextEditing, originalRow],
   );
 
-  const handleCreate = useCallback(
-    (object: any) => {
-      const ref = Ref.make(object);
-      const path = fieldProjection.field.path;
-      setDeep(originalRow, [path], ref);
-      contextEditing?.cellElement?.focus();
-      setEditing(null);
-      setLocalEditing(false);
-      onSave?.();
-    },
-    [fieldProjection.field.path, onSave, contextEditing, originalRow],
-  );
-
-  const handleCreateFromQuery = useCallback(
-    async (typeAnnotation: TypeAnnotation, query: string) => {
-      if (model && modals && contextEditing?.index) {
-        setLocalEditing(false);
-        modals.openCreateRef(
-          typeAnnotation.typename,
-          document.querySelector(cellQuery(contextEditing.index, gridId)),
-          {
-            [fieldProjection.field.referencePath!]: query,
-          },
-          handleCreate,
-        );
-      }
-    },
-    [model, modals, client, contextEditing?.index, gridId, fieldProjection, handleSave],
-  );
-
   useEffect(() => {
     if (contextEditing && contextEditing.cellElement) {
       anchorRef.current = (contextEditing.cellElement as HTMLElement).querySelector(
@@ -176,6 +150,38 @@ export const FormCellEditor = ({
     setLocalEditing(nextOpen);
   }, []);
 
+  const refSchema = useMemo(() => {
+    if (fieldProjection.props.format === Format.TypeFormat.Ref && fieldProjection.props.referenceSchema) {
+      const { schema: refSchema } = getSchema({
+        typename: fieldProjection.props.referenceSchema,
+      });
+      return refSchema;
+    }
+    return null;
+  }, [fieldProjection.props.format, fieldProjection.props.referenceSchema, getSchema]);
+
+  const createSchema = useMemo(() => {
+    return refSchema ? Schema.omit<any, any, ['id']>('id')(refSchema) : null;
+  }, [refSchema]);
+
+  const handleCreate = useCallback(
+    (values: any) => {
+      if (refSchema && onCreate) {
+        const objectWithId = onCreate(refSchema, values);
+        if (objectWithId) {
+          const ref = Ref.make(objectWithId);
+          const path = fieldProjection.field.path;
+          setDeep(originalRow, [path], ref);
+        }
+      }
+      contextEditing?.cellElement?.focus();
+      setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
+    },
+    [fieldProjection.field.path, onSave, contextEditing, originalRow, refSchema, onCreate],
+  );
+
   if (!editing) {
     return null;
   }
@@ -194,9 +200,13 @@ export const FormCellEditor = ({
               onSave={handleSave}
               {...formProps}
               onQueryRefOptions={handleQueryRefOptions}
-              onCreateFromQuery={handleCreateFromQuery}
-              createOptionIcon='ph--plus--regular'
-              createOptionLabel={createOptionLabel}
+              {...(createSchema && {
+                onCreate: handleCreate,
+                createSchema,
+                createInitialValuePath: fieldProjection.field.referencePath,
+                createOptionIcon: 'ph--plus--regular',
+                createOptionLabel,
+              })}
             />
           </Popover.Viewport>
         </Popover.Content>