@dxos/react-ui-table 0.8.2-staging.7ac8446 → 0.8.2

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

@@ -5,14 +5,22 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
+import { Schema } from 'effect';
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import { FormatEnum, ImmutableSchema } from '@dxos/echo-schema';
+import {
+  assertEchoSchema,
+  FormatEnum,
+  isMutable,
+  toJsonSchema,
+  EchoObject,
+  GeneratorAnnotation,
+} from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { Filter, useQuery, useSchema, create } from '@dxos/react-client/echo';
+import { Filter, useQuery, useSchema, live } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
@@ -28,8 +36,7 @@ import { TableType } from '../../types';
 import { initializeTable } from '../../util';
 import { TableToolbar } from '../TableToolbar';
 
-// NOTE(ZaymonFC): We rely on this seed being 0 in the smoke tests.
-faker.seed(0);
+faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
 
 /**
  * Custom hook to create and manage a test table model for storybook demonstrations.
@@ -39,14 +46,14 @@ const useTestTableModel = () => {
   const client = useClient();
   const { space } = useClientProvider();
 
-  const filter = useMemo(() => Filter.schema(TableType), []);
+  const filter = useMemo(() => Filter.type(TableType), []);
   const tables = useQuery(space, filter);
   const table = useMemo(() => tables.at(0), [tables]);
   const schema = useSchema(client, space, table?.view?.target?.query.typename);
 
   const projection = useMemo(() => {
     if (schema && table?.view?.target) {
-      return new ViewProjection(schema.jsonSchema, table.view.target);
+      return new ViewProjection(toJsonSchema(schema), table.view.target);
     }
   }, [schema, table?.view?.target]);
 
@@ -54,12 +61,12 @@ const useTestTableModel = () => {
     () => ({
       selection: { enabled: true, mode: 'multiple' as const },
       dataEditable: true,
-      schemaEditable: !(schema instanceof ImmutableSchema),
+      schemaEditable: schema && isMutable(schema),
     }),
     [schema],
   );
 
-  const objects = useQuery(space, schema ? Filter.schema(schema) : Filter.nothing());
+  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
   const tableRef = useRef<TableController>(null);
@@ -73,7 +80,7 @@ const useTestTableModel = () => {
 
   const handleInsertRow = useCallback(() => {
     if (space && schema) {
-      space.db.add(create(schema, {}));
+      space.db.add(live(schema, {}));
     }
   }, [space, schema]);
 
@@ -107,32 +114,16 @@ const useTestTableModel = () => {
     onRowOrderChange: handleRowOrderChange,
   });
 
+  const handleSaveView = useCallback(() => {
+    model?.saveView();
+  }, [model]);
+
   const presentation = useMemo(() => {
     if (model) {
       return new TablePresentation(model);
     }
   }, [model]);
 
-  const handleToolbarAction = useCallback(
-    (action: { type: string }) => {
-      switch (action.type) {
-        case 'on-thread-create': {
-          console.log('Thread creation triggered');
-          break;
-        }
-        case 'add-row': {
-          handleInsertRow();
-          break;
-        }
-        case 'save-view': {
-          model?.saveView();
-          break;
-        }
-      }
-    },
-    [table, model],
-  );
-
   return {
     schema,
     table,
@@ -140,7 +131,8 @@ const useTestTableModel = () => {
     model,
     presentation,
     space,
-    handleToolbarAction,
+    handleInsertRow,
+    handleSaveView,
     handleDeleteRows,
     handleDeleteColumn,
   };
@@ -151,11 +143,10 @@ const StoryViewEditor = () => {
 
   const handleTypenameChanged = useCallback(
     (typename: string) => {
-      if (table?.view?.target) {
-        invariant(schema);
-        schema.mutable.updateTypename(typename);
-        table.view.target.query.typename = typename;
-      }
+      invariant(schema);
+      invariant(table?.view?.target);
+      assertEchoSchema(schema).updateTypename(typename);
+      table.view.target.query.typename = typename;
     },
     [schema, table?.view?.target],
   );
@@ -180,7 +171,7 @@ const StoryViewEditor = () => {
 //
 
 const DefaultStory = () => {
-  const { schema, table, tableRef, model, presentation, handleToolbarAction } = useTestTableModel();
+  const { schema, table, tableRef, model, presentation, handleInsertRow, handleSaveView } = useTestTableModel();
 
   if (!schema || !table) {
     return <div />;
@@ -189,9 +180,9 @@ const DefaultStory = () => {
   return (
     <div className='grow grid grid-cols-[1fr_350px]'>
       <div className='grid grid-rows-[min-content_1fr] min-bs-0 overflow-hidden'>
-        <TableToolbar classNames='border-be border-separator' onAction={handleToolbarAction} />
+        <TableToolbar classNames='border-be border-separator' onAdd={handleInsertRow} onSave={handleSaveView} />
         <Table.Root>
-          <Table.Main ref={tableRef} model={model} presentation={presentation} ignoreAttention />
+          <Table.Main ref={tableRef} model={model} presentation={presentation} schema={schema} ignoreAttention />
         </Table.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
@@ -222,19 +213,19 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(create(TableType, {}));
+        const table = space.db.add(live(TableType, {}));
         const schema = await initializeTable({ client, space, table, initialRow: false });
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            create(schema, {
+            live(schema, {
               name: faker.person.fullName(),
             }),
           );
         });
       },
     }),
+    withLayout({ fullscreen: true }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
   ],
 };
 
@@ -247,22 +238,65 @@ export const StaticSchema: StoryObj = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.Contact, Testing.Org],
+      types: [TableType, ViewType, Testing.Contact, Testing.Organization],
+      createIdentity: true,
+      createSpace: true,
+      onSpaceCreated: async ({ client, space }) => {
+        const table = space.db.add(live(TableType, {}));
+        await initializeTable({ client, space, table, typename: Testing.Organization.typename });
+
+        const factory = createObjectFactory(space.db, faker as any);
+        await factory([
+          // { type: Testing.Contact, count: 10 },
+          // { type: Testing.Organization, count: 1 },
+          { type: ContactWithArrayOfEmails, count: 10 },
+        ]);
+      },
+    }),
+    withLayout({ fullscreen: true }),
+    withTheme,
+  ],
+};
+
+const ContactWithArrayOfEmails = Schema.Struct({
+  name: Schema.String.pipe(GeneratorAnnotation.set('person.fullName')),
+  emails: Schema.optional(
+    Schema.Array(
+      Schema.Struct({
+        value: Schema.String,
+        label: Schema.String.pipe(Schema.optional),
+      }),
+    ),
+  ),
+}).pipe(
+  EchoObject({
+    typename: 'dxos.org/type/ContactWithArrayOfEmails',
+    version: '0.1.0',
+  }),
+);
+
+export const ArrayOfObjects: StoryObj = {
+  render: DefaultStory,
+  parameters: { translations },
+  decorators: [
+    withClientProvider({
+      types: [TableType, ViewType, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(create(TableType, {}));
-        await initializeTable({ client, space, table, typename: Testing.Contact.typename });
+        const table = space.db.add(live(TableType, {}));
+        await initializeTable({ client, space, table, typename: ContactWithArrayOfEmails.typename });
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          { type: Testing.Contact, count: 10 },
-          { type: Testing.Org, count: 1 },
+          // { type: Testing.Contact, count: 10 },
+          // { type: Testing.Organization, count: 1 },
+          { type: ContactWithArrayOfEmails, count: 10 },
         ]);
       },
     }),
+    withLayout({ fullscreen: true }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
   ],
 };
 
@@ -303,13 +337,13 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const table = space.db.add(create(TableType, {}));
+        const table = space.db.add(live(TableType, {}));
         await initializeTable({ client, space, table, initialRow: false, typename });
 
         // Populate.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            create(storedSchema, {
+            live(storedSchema, {
               single: faker.helpers.arrayElement([...selectOptionIds, undefined]),
               multiple: faker.helpers.randomSubset(selectOptionIds),
             }),
@@ -317,7 +351,7 @@ export const Tags: Meta<StoryProps> = {
         });
       },
     }),
+    withLayout({ fullscreen: true }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
   ],
 };

package/src/components/Table/Table.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Schema } from 'effect/Schema';
 import React, {
   type MouseEvent,
   type PropsWithChildren,
@@ -19,26 +20,28 @@ import { invariant } from '@dxos/invariant';
 import { Filter } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { closestCell, type DxGridElement, type DxGridPosition, type GridContentProps, Grid } from '@dxos/react-ui-grid';
+import {
+  closestCell,
+  type DxGridElement,
+  type DxGridPosition,
+  type GridContentProps,
+  Grid,
+  type DxGridPlane,
+  type DxGridPlaneRange,
+  gridSeparatorInlineEnd,
+  gridSeparatorBlockEnd,
+} from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 import { isNotFalsy, safeParseInt } from '@dxos/util';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
 import { CreateRefPanel } from './CreateRefPanel';
-import { RefPanel } from './RefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
 import { ModalController, type TableModel, type TablePresentation } from '../../model';
 import { translationKey } from '../../translations';
 import { tableButtons, tableControls } from '../../util';
-import { createOption, TableCellEditor, type TableCellEditorProps } from '../TableCellEditor';
-
-// NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.
-// These are offset by 1px to avoid double borders in planks.
-const inlineEndLine =
-  '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator';
-const blockEndLine =
-  '[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator';
+import { createOption, TableValueEditor, type TableCellEditorProps } from '../TableCellEditor';
 
 //
 // Table.Root
@@ -73,13 +76,14 @@ export type TableController = {
 export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
+  schema?: Schema.AnyNoContext;
   // TODO(burdon): Rename since attention isn't a useful concept here? Standardize across other components. Pass property into useAttention.
   ignoreAttention?: boolean;
   onRowClick?: (row: any) => void;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention, onRowClick }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, schema, onRowClick }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
     const { hasAttention } = useAttention(model?.id ?? 'table');
     const { t } = useTranslation(translationKey);
@@ -98,20 +102,17 @@ const TableMain = forwardRef<TableController, TableMainProps>(
       };
     }, [model]);
 
-    // TODO(burdon): Replace useEffect below.
-    // const getCells = useCallback<GridContentProps['getCells']>(
-    //   (range: DxGridRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
-    //   [presentation],
-    // );
+    const getCells = useCallback<NonNullable<GridContentProps['getCells']>>(
+      (range: DxGridPlaneRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
+      [presentation],
+    );
 
     useEffect(() => {
       if (!presentation || !dxGrid) {
         return;
       }
-
-      // TODO(burdon): Pass to Grid.Content?
-      dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
-    }, [presentation, dxGrid]);
+      dxGrid.getCells = getCells;
+    }, [presentation, dxGrid, getCells]);
 
     /**
      * Provides an external controller that can be called to repaint the table.
@@ -181,10 +182,6 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               modals.showColumnCreator();
               break;
             }
-            case 'referencedCell': {
-              modals.showReferencePanel(data.targetId, data.schemaId);
-              break;
-            }
             case 'sort': {
               model?.sorting?.toggleSort(data.fieldId);
               break;
@@ -312,7 +309,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           invariant(space);
           const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
           if (schema) {
-            const { objects } = await space.db.query(Filter.schema(schema)).run();
+            const { objects } = await space.db.query(Filter.type(schema)).run();
             const options = objects
               .map((obj) => {
                 const value = getValue(obj, field.referencePath!);
@@ -348,15 +345,16 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     return (
       <Grid.Root id={model.id ?? 'table-grid'}>
-        <TableCellEditor
+        <TableValueEditor
           model={model}
           modals={modals}
+          schema={schema}
           onEnter={handleEnter}
           onFocus={handleFocus}
           onQuery={handleQuery}
         />
         <Grid.Content
-          className={mx('[--dx-grid-base:var(--surface-bg)]', inlineEndLine, blockEndLine)}
+          className={mx('[--dx-grid-base:var(--baseSurface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
           frozen={frozen}
           // getCells={getCells}
           columns={model.columnMeta.value}
@@ -373,7 +371,6 @@ const TableMain = forwardRef<TableController, TableMainProps>(
         <ColumnActionsMenu model={model} modals={modals} />
         <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
         <CreateRefPanel model={model} modals={modals} />
-        <RefPanel model={model} modals={modals} />
       </Grid.Root>
     );
   },

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

@@ -5,20 +5,23 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
+import { type Schema } from 'effect';
+import { SchemaAST } from 'effect';
 import React, { useEffect, useMemo } from 'react';
 
-import { AST, type BaseObject, ImmutableSchema, type BaseSchema, type HasId } from '@dxos/echo-schema';
+import { type BaseObject, getSchemaTypename, type HasId, toJsonSchema } from '@dxos/echo-schema';
 import { getAnnotation } from '@dxos/effect';
+import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { create, makeRef, type ReactiveObject } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { createView, ViewProjection, ViewType } from '@dxos/schema';
-import { createGenerator, Testing, type ValueGenerator } from '@dxos/schema/testing';
+import { live, 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';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Table } from './Table';
 import { useTableModel } from '../../hooks';
-import { TablePresentation } from '../../model';
+import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
 import translations from '../../translations';
 import { TableType } from '../../types';
 
@@ -29,13 +32,16 @@ const generator: ValueGenerator = faker as any;
 // TODO(burdon): Mutable and immutable views.
 // TODO(burdon): Reconcile schemas types and utils (see API PR).
 // TODO(burdon): Base type for T (with id); see ECHO API PR?
-const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count: number) => {
+const useTestModel = <T extends BaseObject & HasId>(schema: Schema.Schema<T>, count: number) => {
+  const { space } = useClientProvider();
+
+  const jsonSchema = useMemo(() => toJsonSchema(schema), [schema]);
   const table = useMemo(() => {
-    // const { typename } = pipe(schema.ast, AST.getAnnotation<TypeAnnotation>(TypeAnnotationId), Option.getOrThrow);
-    const typename = schema.typename;
-    const name = getAnnotation<string>(AST.TitleAnnotationId)(schema.ast) ?? typename;
-    const view = createView({ name, typename, jsonSchema: schema.jsonSchema });
-    return create(TableType, { view: makeRef(view) });
+    const typename = getSchemaTypename(schema);
+    invariant(typename);
+    const name = getAnnotation<string>(SchemaAST.TitleAnnotationId)(schema.ast) ?? typename;
+    const view = createView({ name, typename, jsonSchema });
+    return live(TableType, { view: makeRef(view) });
   }, [schema]);
 
   const projection = useMemo(() => {
@@ -44,19 +50,25 @@ const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count
     }
 
     // TODO(burdon): Just pass in view? Reuse same jsonSchema instance? View determines if mutable, etc.
-    return new ViewProjection(schema.jsonSchema, table.view.target);
+    return new ViewProjection(jsonSchema, table.view.target);
   }, [schema, table]);
 
-  const model = useTableModel({ table, projection, rows: [] });
+  const features = useMemo<TableFeatures>(
+    () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
+    [],
+  );
+
+  const model = useTableModel<TableRow>({ table, projection, rows: [], features });
   useEffect(() => {
-    if (!model) {
+    if (!model || !space) {
       return;
     }
 
-    const objectGenerator = createGenerator(generator, schema, { optional: true });
-    const objects: ReactiveObject<T>[] = Array.from({ length: count }).map(() => objectGenerator.createObject());
-    model.setRows(objects);
-  }, [model]);
+    const objectGenerator = createAsyncGenerator(generator, schema, { db: space?.db, force: true });
+    void objectGenerator.createObjects(count).then((objects) => {
+      model.setRows(objects);
+    });
+  }, [model, space]);
 
   const presentation = useMemo(() => {
     if (!model) {
@@ -70,22 +82,16 @@ const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count
 };
 
 const DefaultStory = () => {
-  // TODO(burdon): Remove need for ImmutableSchema wrapper at API-level.
-  const orgSchema = useMemo(() => new ImmutableSchema(Testing.Org), []);
-  const { model: orgModel, presentation: orgPresentation } = useTestModel<Testing.Org>(orgSchema, 50);
-
-  // TODO(burdon): Generate links with references.
-  const contactSchema = useMemo(() => new ImmutableSchema(Testing.Contact), []);
-  const { model: contactModel, presentation: contactPresentation } = useTestModel<Testing.Contact>(contactSchema, 50);
+  const { model: orgModel, presentation: orgPresentation } = useTestModel(DataType.Organization, 50);
+  const { model: contactModel, presentation: contactPresentation } = useTestModel(DataType.Person, 50);
 
-  // TODO(burdon): Scrolling isn't working.
   return (
-    <div className='grow grid grid-cols-2 divide-x divide-separator'>
+    <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
       <Table.Root>
-        <Table.Main model={orgModel} presentation={orgPresentation} />
+        <Table.Main model={orgModel} presentation={orgPresentation} ignoreAttention />
       </Table.Root>
       <Table.Root>
-        <Table.Main model={contactModel} presentation={contactPresentation} />
+        <Table.Main model={contactModel} presentation={contactPresentation} ignoreAttention />
       </Table.Root>
     </div>
   );
@@ -97,12 +103,12 @@ const meta: Meta<typeof DefaultStory> = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.Org, Testing.Contact],
+      types: [TableType, ViewType, DataType.Organization, DataType.Person],
       createIdentity: true,
       createSpace: true,
     }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
+    withLayout({ fullscreen: true }),
   ],
 };
 

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -0,0 +1,94 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Schema } from 'effect';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { getSnapshot } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { Popover } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
+import { type FieldProjection } from '@dxos/schema';
+import { getDeep, setDeep } from '@dxos/util';
+
+import { type TableModel } from '../../model';
+import { narrowSchema } from '../../util';
+
+type FormCellEditorProps = {
+  fieldProjection: FieldProjection;
+  model?: TableModel;
+  schema?: Schema.Schema.AnyNoContext;
+  __gridScope: any;
+};
+
+export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }: FormCellEditorProps) => {
+  const { editing, setEditing } = useGridContext('ArrayEditor', __gridScope);
+  const cellRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (editing && editing.cellElement) {
+      cellRef.current = editing.cellElement as HTMLButtonElement;
+    }
+  }, [editing?.cellElement]);
+
+  const narrowedSchema = useMemo(() => {
+    if (!schema) {
+      return undefined;
+    }
+    return narrowSchema(schema, [fieldProjection.field.path]);
+  }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
+
+  const originalRow = useMemo(() => {
+    if (model && editing) {
+      const cell = parseCellIndex(editing.index);
+      const row = model.getRowAt(cell.row);
+      invariant(row);
+
+      return row;
+    }
+
+    return undefined;
+  }, [model, editing]);
+
+  const formValues = useMemo(() => {
+    if (originalRow) {
+      // NOTE(ZaymonFC): Important to get a snapshot to eject from the live object.
+      return getSnapshot(originalRow);
+    }
+  }, [originalRow]);
+
+  const handleSave = useCallback(
+    (values: any) => {
+      const path = fieldProjection.field.path;
+      const value = getDeep(values, [path]);
+      setDeep(originalRow, [path], value);
+      setEditing(null);
+    },
+    [fieldProjection.field.path, originalRow],
+  );
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen === false) {
+        setEditing(null);
+      }
+    },
+    [setEditing],
+  );
+
+  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.Arrow />
+        <Form values={formValues} schema={narrowedSchema as any} onSave={handleSave} />
+      </Popover.Content>
+    </Popover.Root>
+  );
+};