@dxos/react-ui-table 0.7.4 → 0.7.5-main.499c70c

package/src/components/Table/ColumnSettings.tsx

@@ -9,13 +9,13 @@ import { DropdownMenu } from '@dxos/react-ui';
 import { FieldEditor } from '@dxos/react-ui-form';
 import { type FieldType } from '@dxos/schema';
 
-import { type TableModel } from '../../model';
+import { type TableModel, type ModalController } from '../../model';
 
-type ColumnSettingsProps = { model?: TableModel; onNewColumn: () => void };
+type ColumnSettingsProps = { model?: TableModel; modals: ModalController; onNewColumn: () => void };
 
-export const ColumnSettings = ({ model, onNewColumn }: ColumnSettingsProps) => {
+export const ColumnSettings = ({ model, modals, onNewColumn }: ColumnSettingsProps) => {
   const [newField, setNewField] = useState<FieldType>();
-  const state = model?.modalController.state.value;
+  const state = modals.state.value;
 
   const space = getSpace(model?.table);
 
@@ -34,17 +34,17 @@ export const ColumnSettings = ({ model, onNewColumn }: ColumnSettingsProps) => {
     if (state?.type === 'columnSettings') {
       const { mode } = state;
       if (mode.type === 'edit') {
-        return model?.table?.view?.fields.find((f) => f.id === mode.fieldId);
+        return model?.table?.view?.target?.fields.find((f) => f.id === mode.fieldId);
       }
     }
     return undefined;
-  }, [model?.table?.view?.fields, state]);
+  }, [model?.table?.view?.target?.fields, state]);
 
   const field = existingField ?? newField;
 
   const handleSave = useCallback(() => {
-    model?.modalController.close();
-  }, [model?.modalController]);
+    modals.close();
+  }, [modals]);
 
   const handleCancel = useCallback(() => {
     if (state?.type === 'columnSettings' && state.mode.type === 'create' && newField) {
@@ -52,18 +52,18 @@ export const ColumnSettings = ({ model, onNewColumn }: ColumnSettingsProps) => {
     }
   }, [model?.projection, state, newField]);
 
-  if (!model?.table?.view || !model.projection || !field) {
+  if (!model?.table?.view?.target || !model.projection || !field) {
     return null;
   }
 
   return (
     <DropdownMenu.Root modal={false} open={state?.type === 'columnSettings'}>
-      <DropdownMenu.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <DropdownMenu.VirtualTrigger virtualRef={modals.trigger} />
       <DropdownMenu.Portal>
         <DropdownMenu.Content classNames='md:is-64'>
           <DropdownMenu.Viewport>
             <FieldEditor
-              view={model.table.view}
+              view={model.table.view.target!}
               projection={model.projection}
               field={field}
               registry={space?.db.schemaRegistry}

package/src/components/Table/CreateRefPanel.tsx

@@ -10,15 +10,15 @@ import { Popover } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { type GridScopedProps, useGridContext } from '@dxos/react-ui-grid';
 
-import { type TableModel } from '../../model';
+import { type TableModel, type ModalController } from '../../model';
 
-export type CreateRefPanelProps = { model?: TableModel };
+export type CreateRefPanelProps = { model?: TableModel; modals: ModalController };
 
 // TODO(burdon): Factor out Space dependency (to plugin?)
-export const CreateRefPanel = ({ model, __gridScope }: GridScopedProps<CreateRefPanelProps>) => {
+export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<CreateRefPanelProps>) => {
   const { id: gridId } = useGridContext('TableCellEditor', __gridScope);
   const space = getSpace(model?.table);
-  const state = model?.modalController.state.value;
+  const state = modals.state.value;
   const schema = useMemo<S.Schema<any> | undefined>(() => {
     if (!space || state?.type !== 'createRefPanel') {
       return;
@@ -44,16 +44,16 @@ export const CreateRefPanel = ({ model, __gridScope }: GridScopedProps<CreateRef
         state.onCreate?.(obj);
       }
 
-      void model.modalController.close();
+      void modals.close();
     },
-    [model?.modalController, space, state],
+    [modals, space, state],
   );
 
   const handleCancel = useCallback(() => {
     if (model) {
-      model.modalController.close();
+      modals.close();
     }
-  }, [model?.modalController]);
+  }, [modals]);
 
   if (!model?.table?.view || !model.projection) {
     return null;
@@ -65,11 +65,11 @@ export const CreateRefPanel = ({ model, __gridScope }: GridScopedProps<CreateRef
       open={state?.type === 'createRefPanel' && !!schema}
       onOpenChange={(nextOpen) => {
         if (model && !nextOpen) {
-          return model.modalController.close();
+          return modals.close();
         }
       }}
     >
-      <Popover.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <Popover.VirtualTrigger virtualRef={modals.trigger} />
       <Popover.Portal>
         <Popover.Content classNames='md:is-64' data-grid={gridId}>
           {state?.type === 'createRefPanel' && schema && (

package/src/components/Table/RefPanel.tsx

@@ -8,9 +8,9 @@ import { getSpace, type Space } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
-import { type TableModel } from '../../model';
+import { type TableModel, type ModalController } from '../../model';
 
-type RefPanelProps = { model?: TableModel };
+type RefPanelProps = { model: TableModel; modals: ModalController };
 
 const getRefTargetObj = (space?: Space, id?: string) => {
   if (space && id) {
@@ -20,13 +20,13 @@ const getRefTargetObj = (space?: Space, id?: string) => {
   }
 };
 
-export const RefPanel = ({ model }: RefPanelProps) => {
-  const state = model?.modalController.state.value;
-  const space = getSpace(model?.table);
+export const RefPanel = ({ model, modals }: RefPanelProps) => {
+  const state = modals.state.value;
+  const space = getSpace(model.table);
   const targetObj = getRefTargetObj(space, state?.type === 'refPanel' ? state.targetId : undefined);
   const schema = space && state?.type === 'refPanel' ? space.db.schemaRegistry.getSchema(state.typename) : undefined;
 
-  if (!model?.table?.view || !model.projection) {
+  if (!model.table?.view || !model.projection) {
     return null;
   }
 
@@ -35,12 +35,12 @@ export const RefPanel = ({ model }: RefPanelProps) => {
       modal={false}
       open={state?.type === 'refPanel' && !!targetObj && !!schema}
       onOpenChange={(nextOpen) => {
-        if (model && !nextOpen) {
-          return model.modalController.close();
+        if (!nextOpen) {
+          return modals.close();
         }
       }}
     >
-      <Popover.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <Popover.VirtualTrigger virtualRef={modals.trigger} />
       <Popover.Portal>
         <Popover.Content classNames='md:is-64'>
           {targetObj && schema && <Form readonly values={targetObj} schema={schema} />}

package/src/components/Table/RowActionsMenu.tsx

@@ -6,22 +6,21 @@ import React from 'react';
 
 import { DropdownMenu, useTranslation } from '@dxos/react-ui';
 
-import { type TableModel } from '../../model';
+import { type TableModel, type ModalController } from '../../model';
 import { translationKey } from '../../translations';
 
-type RowActionsMenuProps = { model: TableModel };
+type RowActionsMenuProps = { model: TableModel; modals: ModalController };
 
-export const RowActionsMenu = ({ model }: RowActionsMenuProps) => {
+export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
   const { t } = useTranslation(translationKey);
   const hasSelection = model.selection.hasSelection.value;
-  const state = model.modalController.state.value;
+  const state = modals.state.value;
   if (state?.type !== 'row') {
     return null;
   }
-
   return (
-    <DropdownMenu.Root modal={false} open={true} onOpenChange={model.modalController.close}>
-      <DropdownMenu.VirtualTrigger virtualRef={model.modalController.trigger} />
+    <DropdownMenu.Root modal={false} open={true} onOpenChange={modals.close}>
+      <DropdownMenu.VirtualTrigger virtualRef={modals.trigger} />
       <DropdownMenu.Content>
         <DropdownMenu.Viewport>
           <DropdownMenu.Item data-testid='row-menu-delete' onClick={() => model.deleteRow(state.rowIndex)}>

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

@@ -7,12 +7,12 @@ import '@dxos-theme';
 import { type StoryObj, type Meta } from '@storybook/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { type MutableSchema } from '@dxos/echo-schema';
+import { type EchoSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
-import { Filter, useSpaces, useQuery, create } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { Filter, useQuery, create } from '@dxos/react-client/echo';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { useDefaultValue } from '@dxos/react-ui';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
@@ -21,12 +21,14 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Table, type TableController } from './Table';
 import { useTableModel, type UseTableModelParams } from '../../hooks';
+import { TablePresentation } from '../../model';
 import translations from '../../translations';
 import { TableType } from '../../types';
 import { initializeTable } from '../../util';
 import { Toolbar } from '../Toolbar';
 import { createItems, createTable, type SimulatorProps, useSimulator } from '../testing';
 
+// NOTE(ZaymonFC): We rely on this seed being 0 in the smoke tests.
 faker.seed(0);
 
 //
@@ -34,25 +36,26 @@ faker.seed(0);
 //
 
 const DefaultStory = () => {
-  const spaces = useSpaces();
-  const space = spaces[spaces.length - 1];
+  const { space } = useClientProvider();
+  invariant(space);
+
   const tables = useQuery(space, Filter.schema(TableType));
   const [table, setTable] = useState<TableType>();
-  const [schema, setSchema] = useState<MutableSchema>();
+  const [schema, setSchema] = useState<EchoSchema>();
   useEffect(() => {
-    if (tables.length && !table) {
+    if (space && tables.length && !table) {
       const table = tables[0];
       invariant(table.view);
       setTable(table);
-      setSchema(space.db.schemaRegistry.getSchema(table.view.query.type));
+      setSchema(space.db.schemaRegistry.getSchema(table.view.target!.query.type));
     }
-  }, [tables]);
+  }, [space, tables]);
 
   const projection = useMemo(() => {
-    if (schema && table?.view) {
-      return new ViewProjection(schema, table.view);
+    if (schema && table?.view?.target) {
+      return new ViewProjection(schema, table.view.target);
     }
-  }, [schema, table?.view]);
+  }, [schema, table?.view?.target]);
 
   const objects = useQuery(space, schema ? Filter.schema(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
@@ -93,10 +96,18 @@ const DefaultStory = () => {
         }
       }
     },
-    [table, spaces],
+    [table],
   );
 
   const tableRef = useRef<TableController>(null);
+  const handleCellUpdate = useCallback((cell: any) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+
+  const handleRowOrderChanged = useCallback(() => {
+    tableRef.current?.update?.();
+  }, []);
+
   const model = useTableModel({
     table,
     projection,
@@ -104,10 +115,16 @@ const DefaultStory = () => {
     onInsertRow: handleInsertRow,
     onDeleteRows: handleDeleteRows,
     onDeleteColumn: handleDeleteColumn,
-    onCellUpdate: (cell) => tableRef.current?.update?.(cell),
-    onRowOrderChanged: () => tableRef.current?.update?.(),
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChanged: handleRowOrderChanged,
   });
 
+  const presentation = useMemo(() => {
+    if (model) {
+      return new TablePresentation(model);
+    }
+  }, [model]);
+
   if (!schema || !table) {
     return <div />;
   }
@@ -121,21 +138,21 @@ const DefaultStory = () => {
           <Toolbar.Actions />
         </Toolbar.Root>
         <Table.Root>
-          <Table.Main ref={tableRef} model={model} ignoreAttention />
+          <Table.Main ref={tableRef} model={model} presentation={presentation} ignoreAttention />
         </Table.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
-        {table.view && (
+        {table.view?.target && (
           <ViewEditor
             registry={space?.db.schemaRegistry}
             schema={schema}
-            view={table.view}
+            view={table.view.target!}
             onDelete={handleDeleteColumn}
           />
         )}
 
         <SyntaxHighlighter language='json' className='w-full text-xs'>
-          {JSON.stringify({ view: table.view, schema }, null, 2)}
+          {JSON.stringify({ view: table.view?.target, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
     </div>
@@ -161,9 +178,9 @@ const TablePerformanceStory = (props: StoryProps) => {
 
   const handleDeleteColumn = useCallback<NonNullable<UseTableModelParams<any>['onDeleteColumn']>>(
     (fieldId) => {
-      if (table && table.view) {
-        const fieldPosition = table.view.fields.findIndex((field) => field.id === fieldId);
-        table.view.fields.splice(fieldPosition, 1);
+      if (table && table.view?.target) {
+        const fieldPosition = table.view.target!.fields.findIndex((field) => field.id === fieldId);
+        table.view.target!.fields.splice(fieldPosition, 1);
       }
     },
     [table],
@@ -202,7 +219,7 @@ const meta: Meta<StoryProps> = {
       createSpace: true,
       onSpaceCreated: async ({ space }) => {
         const table = space.db.add(create(TableType, {}));
-        const schema = initializeTable({ space, table, initialRow: false });
+        const schema = await initializeTable({ space, table, initialRow: false });
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
             create(schema, {