@dxos/react-ui-table 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -12,9 +12,9 @@ export type CellValidationMessageProps = {
 };
 
 export const CellValidationMessage = ({
+  __gridScope,
   validationError,
   variant = 'error',
-  __gridScope,
 }: GridScopedProps<CellValidationMessageProps>) => {
   const { editing, editBox: box } = useGridContext('GridSheetCellEditor', __gridScope);
 

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -2,95 +2,75 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * 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 { Entity, type Type } from '@dxos/echo';
+import { Ref, 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 { type Label, Popover } from '@dxos/react-ui';
+import { Form, type FormRootProps, type RefFieldProps } from '@dxos/react-ui-form';
+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 { type ModalController, type TableModel, type TableRow } from '../../model';
 import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
-type FormCellEditorProps = {
-  fieldProjection: FieldProjection;
+const createOptionLabel: Label = ['create new object label', { ns: translationKey }];
+
+export type OnCreateHandler = (schema: Type.Entity.Any, values: any) => Parameters<typeof Ref.make>[0];
+
+export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+  __gridScope: any;
+  schema?: T;
   model?: TableModel;
-  schema?: Schema.Schema.AnyNoContext;
+  fieldProjection: FieldProjection;
+  modals?: ModalController; // TODO(burdon): Not used. Remove?
   onSave?: () => void;
-  client?: Client;
-  modals?: ModalController;
-  __gridScope: any;
-} & Omit<FormProps<any>, 'values' | 'schema'>;
+  onCreate?: OnCreateHandler;
+} & Omit<FormRootProps<any>, 'values' | 'schema' | 'onCreate'>;
 
-const createOptionLabel = ['create new object label', { ns: translationKey }] as [string, { ns: string }];
-
-export const FormCellEditor = ({
-  fieldProjection,
-  model,
+export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
+  __gridScope,
   schema,
+  model,
+  fieldProjection,
   onSave,
-  client,
-  modals,
-  __gridScope,
+  onCreate,
   ...formProps
-}: FormCellEditorProps) => {
-  const { editing: contextEditing, setEditing, id: gridId } = useGridContext('ArrayEditor', __gridScope);
-  const [editing, setLocalEditing] = useState(false);
+}: FormCellEditorProps<T>) => {
   const anchorRef = useRef<HTMLButtonElement | null>(null);
+  const { id: _gridId, editing: contextEditing, setEditing } = useGridContext('ArrayEditor', __gridScope);
+  const [editing, setLocalEditing] = useState(false);
 
-  const getSchema = useCallback(
-    (typeAnnotation: TypeAnnotation) => {
-      const space = getSpace(model!.view);
-      invariant(space);
-
-      let schema;
-      if (client) {
-        schema = client.graph.schemaRegistry.getSchema(typeAnnotation.typename);
-      }
-      if (!schema) {
-        schema = space.db.schemaRegistry.getSchema(typeAnnotation.typename);
-      }
-      return { space, schema };
-    },
-    [client, model],
-  );
+  useEffect(() => {
+    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);
+    }
+  }, [contextEditing]);
 
-  const handleQueryRefOptions = useCallback(
-    async (typeAnnotation: TypeAnnotation) => {
-      const { schema, space } = getSchema(typeAnnotation);
-      if (model && schema && space) {
-        const { objects } = await space.db.query(Filter.type(schema)).run();
-        return objects
-          .map((obj) => {
-            return {
-              dxn: Obj.getDXN(obj),
-              label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
-            };
-          })
-          .filter(isNotFalsy);
-      }
+  const narrowedSchema = useMemo<Schema.Schema.AnyNoContext | undefined>(() => {
+    if (!schema) {
+      return undefined;
+    }
 
-      return [];
-    },
-    [client, model],
-  );
+    return narrowSchema(schema, [fieldProjection.field.path]);
+  }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
 
-  const originalRow = useMemo(() => {
+  const originalRow = useMemo<TableRow | undefined>(() => {
     if (model && contextEditing) {
-      const cell = parseCellIndex(contextEditing.index);
-
       // Check if this is a draft cell and get the appropriate row data
+      const cell = parseCellIndex(contextEditing.index);
       if (model.isDraftCell(cell)) {
-        const draftRow = model.draftRows.value[cell.row];
+        const draftRow = model.getDraftRows()[cell.row];
         invariant(draftRow);
         return draftRow.data;
       } else {
@@ -103,79 +83,77 @@ export const FormCellEditor = ({
     return undefined;
   }, [model, contextEditing]);
 
-  const handleSave = useCallback(
-    (values: any) => {
+  // NOTE: Important to get a mutable deep clone to eject from the echo object.
+  // TODO(wittjosiah): Consider using something like Obj.clone for this use case.
+  const formValues = useMemo(() => (originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}), [originalRow]);
+
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    if (nextOpen === false) {
+      setEditing(null);
+      onSave?.();
+    }
+    setLocalEditing(nextOpen);
+  }, []);
+
+  const handleSave = useCallback<NonNullable<FormRootProps<any>['onSave']>>(
+    (values) => {
+      if (!originalRow) {
+        return;
+      }
       const path = fieldProjection.field.path;
       const value = getDeep(values, [path]);
-      setDeep(originalRow, [path], value);
+      // Use model's changeRow for consistent mutation handling.
+      if (model) {
+        model.changeRow(originalRow, (mutableRow) => {
+          setDeep(mutableRow, [path], value);
+        });
+      } else {
+        setDeep(originalRow, [path], value);
+      }
       contextEditing?.cellElement?.focus();
       setEditing(null);
       setLocalEditing(false);
       onSave?.();
     },
-    [fieldProjection.field.path, onSave, contextEditing, originalRow],
+    [fieldProjection.field.path, onSave, contextEditing, originalRow, model],
   );
 
-  const handleCreate = useCallback(
-    (object: any) => {
-      const ref = Ref.make(object);
-      const path = fieldProjection.field.path;
-      setDeep(originalRow, [path], ref);
+  const handleCreate = useCallback<NonNullable<FormRootProps<any>['onCreate']>>(
+    (schema, values) => {
+      const objectWithId = onCreate?.(schema, values);
+      if (objectWithId && originalRow) {
+        const ref = Ref.make(objectWithId);
+        const path = fieldProjection.field.path;
+        // Use model's changeRow for consistent mutation handling.
+        if (model) {
+          model.changeRow(originalRow, (mutableRow) => {
+            setDeep(mutableRow, [path], ref);
+          });
+        } else {
+          setDeep(originalRow, [path], ref);
+        }
+      }
       contextEditing?.cellElement?.focus();
       setEditing(null);
       setLocalEditing(false);
       onSave?.();
     },
-    [fieldProjection.field.path, onSave, contextEditing, originalRow],
+    [fieldProjection.field.path, onSave, contextEditing, originalRow, onCreate, model],
   );
 
-  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],
+  const getOptions = useCallback<NonNullable<RefFieldProps['getOptions']>>(
+    (results) =>
+      results
+        .map((obj) => {
+          return {
+            id: Entity.getDXN(obj).toString(),
+            label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
+          };
+        })
+        .filter(isTruthy),
+    [fieldProjection],
   );
 
-  useEffect(() => {
-    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);
-    }
-  }, [contextEditing]);
-
-  const narrowedSchema = useMemo(() => {
-    if (!schema) {
-      return undefined;
-    }
-    return narrowSchema(schema, [fieldProjection.field.path]);
-  }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
-
-  // NOTE: Important to get a snapshot to eject from the live object.
-  const formValues = useMemo(() => (originalRow ? getSnapshot(originalRow) : {}), [originalRow]);
-
-  const handleOpenChange = useCallback((nextOpen: boolean) => {
-    if (nextOpen === false) {
-      setEditing(null);
-      onSave?.();
-    }
-    setLocalEditing(nextOpen);
-  }, []);
-
   if (!editing) {
     return null;
   }
@@ -187,17 +165,26 @@ export const FormCellEditor = ({
         <Popover.Content tabIndex={-1} classNames='popover-card-width density-fine'>
           <Popover.Arrow />
           <Popover.Viewport>
-            <Form
+            <Form.Root
+              {...formProps}
               autoFocus
+              schema={narrowedSchema}
               values={formValues}
-              schema={narrowedSchema as any}
-              onSave={handleSave}
-              {...formProps}
-              onQueryRefOptions={handleQueryRefOptions}
-              onCreateFromQuery={handleCreateFromQuery}
+              createInitialValuePath={fieldProjection.field.referencePath}
               createOptionIcon='ph--plus--regular'
               createOptionLabel={createOptionLabel}
-            />
+              db={model?.db}
+              getOptions={getOptions}
+              onCreate={handleCreate}
+              onSave={handleSave}
+            >
+              <Form.Viewport>
+                <Form.Content>
+                  <Form.FieldSet />
+                  <Form.Actions />
+                </Form.Content>
+              </Form.Viewport>
+            </Form.Root>
           </Popover.Viewport>
         </Popover.Content>
       </Popover.Portal>

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

@@ -2,23 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useMemo, useState } from 'react';
+import React 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 } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
-import { DataType, createDefaultSchema, typenameFromQuery } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { View } from '@dxos/schema';
+import { Task } from '@dxos/types';
 
-import { useTableModel } from '../../hooks';
-import { type TableFeatures } from '../../model';
+import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
 import { Table } from '../../types';
 
@@ -28,40 +23,18 @@ type StoryProps = {
   editing: GridEditing;
 };
 
+// TODO(burdon): Broken layout.
 const DefaultStory = ({ editing }: StoryProps) => {
-  const { space } = useClientProvider();
-  invariant(space);
-
-  const views = useQuery(space, Filter.type(DataType.View));
-  const [view, setView] = useState<DataType.View>();
-  const [schema, setSchema] = useState<EchoSchema>();
-  useEffect(() => {
-    if (space && views.length && !view) {
-      const view = views[0];
-      setView(view);
-      setSchema(space.db.schemaRegistry.getSchema(typenameFromQuery(view.query)!));
-    }
-  }, [space, views, view]);
-
-  const features: Partial<TableFeatures> = useMemo(
-    () => ({
-      selection: { enabled: true, mode: 'multiple' },
-      dataEditable: true,
-      schemaEditable: schema && isMutable(schema),
-    }),
-    [schema],
-  );
+  const { model, table } = useTestTableModel();
 
-  const model = useTableModel({ view, schema: schema?.jsonSchema, features });
-
-  if (!model || !schema || !view) {
+  if (!model || !table) {
     return <div />;
   }
 
   return (
-    <div className='flex w-[300px] border border-separator' style={{ height: defaultRowSize }}>
+    <div className='border border-separator' style={{ height: defaultRowSize }}>
       <Grid.Root id='test' editing={editing}>
-        <TableCellEditor model={model} schema={schema} />
+        <TableCellEditor model={model} schema={Task.Task} />
       </Grid.Root>
     </div>
   );
@@ -71,19 +44,20 @@ const meta = {
   title: 'ui/react-ui-table/TableCellEditor',
   component: DefaultStory,
   render: DefaultStory,
-  parameters: { translations, layout: 'centered' },
   decorators: [
+    withTheme,
+    withLayout({ layout: 'column' }),
     withClientProvider({
-      types: [DataType.View, Table.Table],
+      types: [View.View, Task.Task, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
-        const schema = createDefaultSchema();
-        const { view } = await Table.makeView({ client, space, typename: schema.typename });
-        space.db.add(view);
+      onCreateSpace: async ({ space }) => {
+        const { view, jsonSchema } = await View.makeFromDatabase({ db: space.db, typename: Task.Task.typename });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            Obj.make(schema, {
+            Obj.make(Task.Task, {
               title: faker.person.fullName(),
               status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
               description: faker.lorem.sentence(),
@@ -92,9 +66,11 @@ const meta = {
         });
       },
     }),
-    withTheme,
-    withLayout(),
   ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;