@dxos/react-ui-table 0.8.4-main.c85a9c8dae → 0.8.4-main.d05539e30a

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

@@ -6,25 +6,25 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { Annotation, type Database, Format, Obj, type QueryAST, Ref, Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { Annotation, type Database, Format, Obj, type QueryAST, Ref, Type, View } from '@dxos/echo';
 import { type Mutable, PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Panel, ScrollArea } from '@dxos/react-ui';
+import { ViewEditor } from '@dxos/react-ui-form';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout, 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 { ViewModel, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
 import { TestSchema, createObjectFactory } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
+import { translations } from '#translations';
+
 import { useTestTableModel } from '../../testing';
-import { translations } from '../../translations';
 import { Table } from '../../types';
-
 import { Table as TableComponent } from './Table';
 
 const Example = Schema.Struct({
@@ -52,7 +52,7 @@ const Example = Schema.Struct({
     title: 'Parent',
   }),
 }).pipe(
-  Type.object({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }),
+  Type.object({ typename: `com.example.type.${PublicKey.random().truncate()}`, version: '0.1.0' }),
   Annotation.LabelAnnotation.set(['name']),
 );
 interface Example extends Schema.Schema.Type<typeof Example> {}
@@ -74,8 +74,8 @@ const StoryViewEditor = ({
       invariant(Type.isMutable(schema));
       schema.updateTypename(getTypenameFromQuery(newQuery));
       invariant(view);
-      Obj.change(view, (v) => {
-        v.query.ast = newQuery as Mutable<typeof newQuery>;
+      Obj.update(view, (view) => {
+        view.query.ast = newQuery as Mutable<typeof newQuery>;
       });
     },
     [schema, view],
@@ -119,7 +119,7 @@ const DefaultStory = () => {
 
   return (
     <div className='grow grid grid-cols-[1fr_350px]'>
-      <TableComponent.Root>
+      <TableComponent.Root ref={tableRef}>
         <Panel.Root>
           <Panel.Toolbar asChild>
             <TableComponent.Toolbar
@@ -129,8 +129,7 @@ const DefaultStory = () => {
             />
           </Panel.Toolbar>
           <Panel.Content asChild>
-            <TableComponent.Main
-              ref={tableRef}
+            <TableComponent.Content
               schema={schema}
               model={model}
               presentation={presentation}
@@ -143,16 +142,14 @@ const DefaultStory = () => {
       <ScrollArea.Root orientation='vertical' classNames='border-l border-separator'>
         <ScrollArea.Viewport>
           <StoryViewEditor view={table.view.target} schema={schema} db={db} handleDeleteColumn={handleDeleteColumn} />
-          <SyntaxHighlighter language='json' className='text-xs'>
-            {JSON.stringify({ view: table.view.target, schema }, null, 2)}
-          </SyntaxHighlighter>
+          <JsonHighlighter data={{ view: table.view.target, schema }} classNames='text-xs' />
         </ScrollArea.Viewport>
       </ScrollArea.Root>
     </div>
   );
 };
 
-type StoryProps = { rows?: number };
+type DefaultStoryProps = { rows?: number };
 
 //
 // Story definitions.
@@ -175,10 +172,10 @@ const meta = {
         const [schema] = await space.db.schemaRegistry.register([Example]);
         const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: schema.typename });
         const table = Table.make({ view, jsonSchema });
-        Obj.change(view, (v) => {
-          v.projection.fields = [
-            v.projection.fields.find((field) => field.path === 'name')!,
-            ...v.projection.fields.filter((field) => field.path !== 'name'),
+        Obj.update(view, (view) => {
+          view.projection.fields = [
+            view.projection.fields.find((field) => field.path === 'name')!,
+            ...view.projection.fields.filter((field) => field.path !== 'name'),
           ];
         });
 
@@ -187,9 +184,9 @@ const meta = {
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
             Obj.make(schema, {
-              name: faker.lorem.sentence(),
-              status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
-              description: faker.lorem.paragraph(),
+              name: random.lorem.sentence(),
+              status: random.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
+              description: random.lorem.paragraph(),
             }),
           );
         });
@@ -226,7 +223,7 @@ export const StaticSchema: StoryObj = {
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
 
-        const factory = createObjectFactory(space.db, faker as any);
+        const factory = createObjectFactory(space.db, random as any);
         await factory([
           { type: TestSchema.Person, count: 10 },
           // { type: TestSchema.Organization, count: 1 },
@@ -252,7 +249,7 @@ const ContactWithArrayOfEmails = Schema.Struct({
   ),
 }).pipe(
   Type.object({
-    typename: 'dxos.org/type/ContactWithArrayOfEmails',
+    typename: 'org.dxos.type.contactWithArrayOfEmails',
     version: '0.1.0',
   }),
 );
@@ -272,7 +269,7 @@ export const ArrayOfObjects: StoryObj = {
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
 
-        const factory = createObjectFactory(space.db, faker as any);
+        const factory = createObjectFactory(space.db, random as any);
         await factory([
           // { type: TestSchema.Person, count: 10 },
           // { type: TestSchema.Organization, count: 1 },
@@ -287,7 +284,7 @@ export const ArrayOfObjects: StoryObj = {
   },
 };
 
-export const Tags: Meta<StoryProps> = {
+export const Tags: Meta<DefaultStoryProps> = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
   decorators: [
@@ -297,7 +294,7 @@ export const Tags: Meta<StoryProps> = {
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         // Configure schema.
-        const typename = 'example.com/SingleSelect';
+        const typename = 'com.example.type.single-select';
         const selectOptions = [
           { id: 'one', title: 'One', color: 'emerald' },
           { id: 'two', title: 'Two', color: 'blue' },
@@ -331,8 +328,8 @@ export const Tags: Meta<StoryProps> = {
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
             Obj.make(storedSchema, {
-              single: faker.helpers.arrayElement([...selectOptionIds, undefined]),
-              multiple: faker.helpers.randomSubset(selectOptionIds),
+              single: random.helpers.arrayElement([...selectOptionIds, undefined]),
+              multiple: random.helpers.randomSubset(selectOptionIds),
             }),
           );
         });

package/src/components/Table/Table.tsx

@@ -2,458 +2,64 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
-import * as String from 'effect/String';
-import React, {
-  type JSX,
-  type MouseEvent,
-  type PropsWithChildren,
-  type Ref,
-  type WheelEvent,
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
+import { Atom } from '@effect-atom/atom-react';
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, type RefObject, forwardRef, useImperativeHandle, useRef } from 'react';
 
-import { type Type } from '@dxos/echo';
-import { log } from '@dxos/log';
-import { useAttention } from '@dxos/react-ui-attention';
-import {
-  type DxGridAxisMeta,
-  type DxGridElement,
-  type DxGridPlane,
-  type DxGridPlaneRange,
-  type DxGridPosition,
-  Grid,
-  type GridContentProps,
-  closestCell,
-  gridSeparatorBlockEnd,
-  gridSeparatorInlineEnd,
-} from '@dxos/react-ui-grid';
-import { DxEditRequest } from '@dxos/react-ui-grid';
-import { mx, useComposableProps } from '@dxos/ui-theme';
-import { type ComposableProps } from '@dxos/ui-types';
+import { type DxGridAxisMeta, type DxGridPosition } from '@dxos/react-ui-grid';
 
-import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
-import { tableButtons, tableControls } from '../../util';
-import { type OnCreateHandler, type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
-import { TableToolbar } from '../TableToolbar';
-
-import { ColumnActionsMenu } from './ColumnActionsMenu';
-import { ColumnSettings } from './ColumnSettings';
-import { RowActionsMenu } from './RowActionsMenu';
+import { type InsertRowResult } from '../../model';
+import { TableContent } from './TableContent';
+import { TableToolbar } from './TableToolbar';
 
 const columnDefault = { grid: { minSize: 80, maxSize: 640 } };
 const rowDefault = { frozenRowsStart: { readonly: true, focusUnfurl: false } };
 const emptyColumnMeta = Atom.make<DxGridAxisMeta>({ grid: {} });
 
 //
-// Table.Root
+// Context
 //
 
-export type TableRootProps = PropsWithChildren;
-
-const TableRoot = ({ children }: TableRootProps) => {
-  return <>{children}</>;
+type TableContextValue = {
+  /** Mutable ref populated by Content so Root can expose the controller. */
+  controllerRef: RefObject<TableController>;
 };
 
+const [TableContextProvider, useTableContext] = createContext<TableContextValue>('Table');
+
 //
-// Table.Main
+// Controller
 //
 
-const emptyRowsAtom = Atom.make<unknown[]>([]);
-const emptyCellUpdateAtom = Atom.make<number>(0);
-
-export type TableController = {
+type TableController = {
   update?: (cell?: DxGridPosition) => void;
   handleInsertRowResult?: (insertRowResult?: InsertRowResult) => void;
 };
 
-export type TableMainProps<T extends Type.AnyEntity = Type.AnyEntity> = ComposableProps<{
-  schema?: T;
-  model?: TableModel;
-  presentation?: TablePresentation;
-  // TODO(burdon): Factor out attention.
-  ignoreAttention?: boolean;
-  onCreate?: OnCreateHandler;
-  onRowClick?: (row: any) => void;
-  testId?: string;
-}>;
-
-const TableMainInner = <T extends Type.AnyEntity = Type.AnyEntity>(
-  { schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }: TableMainProps<T>,
-  forwardedRef: Ref<TableController>,
-) => {
-  const registry = useContext(RegistryContext);
-  const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
-  const { hasAttention } = useAttention(model?.id ?? 'table');
-  const modals = useMemo(() => new ModalController(registry), [registry]);
-  const columnMeta = useAtomValue(model?.columnMeta ?? emptyColumnMeta);
-  // Subscribe to rows atom to trigger re-render when rows change.
-  const rows = useAtomValue(model?.rows ?? emptyRowsAtom);
-  // Subscribe to cell update counter to trigger re-render when individual cells change.
-  const cellUpdateCounter = useAtomValue(model?.cellUpdate ?? emptyCellUpdateAtom);
-  // Derive column count from columnMeta (reactive) with fallback.
-  const columnCount = Object.keys(columnMeta.grid).length || model?.projection.getFields().length || 0;
-
-  const draftRowCount = model?.getDraftRowCount() ?? 0;
-
-  const frozen = useMemo(() => {
-    const noActionColumn =
-      model?.features.dataEditable === false &&
-      model?.features.schemaEditable === false &&
-      model.rowActions.length === 0;
-
-    return {
-      frozenRowsStart: 1,
-      frozenRowsEnd: Math.max(1, draftRowCount),
-      frozenColsStart: model?.features.selection.enabled ? 1 : 0,
-      frozenColsEnd: noActionColumn ? 0 : 1,
-    };
-  }, [model, draftRowCount]);
-
-  const getCells = useCallback<NonNullable<GridContentProps['getCells']>>(
-    (range: DxGridPlaneRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
-    [presentation],
-  );
-
-  useEffect(() => {
-    if (!dxGrid || !presentation) {
-      return;
-    }
-
-    dxGrid.getCells = getCells;
-  }, [dxGrid, presentation, getCells]);
-
-  // Trigger grid update when rows or cell values change.
-  useEffect(() => {
-    if (!dxGrid) {
-      return;
-    }
-
-    dxGrid.updateCells(true);
-    dxGrid.requestUpdate();
-  }, [dxGrid, rows, cellUpdateCounter]);
-
-  const handleInsertRowResult = useCallback(
-    (insertResult?: InsertRowResult) => {
-      if (insertResult === 'draft') {
-        requestAnimationFrame(() => {
-          dxGrid?.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
-          dxGrid?.refocus();
-        });
-      } else {
-        requestAnimationFrame(() => {
-          dxGrid?.setFocus({ plane: 'grid', col: 0, row: model ? model.getRowCount() - 1 : 0 });
-          dxGrid?.refocus();
-        });
-      }
-    },
-    [model, dxGrid],
-  );
-
-  const handleSave = useCallback(() => {
-    dxGrid?.updateCells(true);
-    dxGrid?.requestUpdate();
-  }, [dxGrid]);
-
-  const handleSaveDraftRow = useCallback(
-    (rowIndex = 0) => {
-      if (model && dxGrid) {
-        const didCommitSuccessfully = model.commitDraftRow(rowIndex);
-        if (didCommitSuccessfully) {
-          requestAnimationFrame(() => {
-            dxGrid.scrollToEndRow();
-          });
-        }
-      }
-    },
-    [model, dxGrid],
-  );
-
-  const handleGridClick = useCallback(
-    (event: MouseEvent) => {
-      const cell = closestCell(event.target as HTMLElement);
-      if (cell) {
-        const { row: rowIndex, plane } = cell;
-        if (onRowClick) {
-          if (plane === 'grid') {
-            const row = model?.getRowAt(rowIndex);
-            row && onRowClick(row);
-          } else {
-            onRowClick(cell);
-          }
-        }
-
-        if (model?.features.selection.enabled && model?.selection.selectionMode === 'single') {
-          model.selection.toggleSelectionForRowIndex(rowIndex);
-        }
-      }
-
-      if (!modals) {
-        return;
-      }
-
-      const buttonSelector = Object.values(tableButtons)
-        .map((button) => `button[${button.attr}]`)
-        .join(',');
-
-      const tableButtonElement = (event.target as HTMLElement).closest(buttonSelector) as HTMLElement;
-      if (tableButtonElement) {
-        const button = Object.values(tableButtons).find((btn) => tableButtonElement.hasAttribute(btn.attr));
-        if (!button) {
-          return;
-        }
-
-        modals.setTrigger(tableButtonElement);
-        const data = button.getData(tableButtonElement);
-        switch (data.type) {
-          case 'rowMenu': {
-            modals.showRowMenu(data.rowIndex);
-            break;
-          }
-          case 'columnSettings': {
-            modals.showColumnMenu(data.fieldId);
-            break;
-          }
-          case 'newColumn': {
-            modals.showColumnCreator();
-            break;
-          }
-          case 'sort': {
-            model?.toggleSort(data.fieldId);
-            break;
-          }
-          case 'saveDraftRow': {
-            handleSaveDraftRow();
-            break;
-          }
-        }
-        return;
-      }
-
-      const controlSelector = Object.values(tableControls)
-        .map((control) => `input[${control.attr}]`)
-        .join(',');
-
-      const controlElement = (event.target as HTMLElement).closest(controlSelector) as HTMLElement;
-      if (controlElement) {
-        const control = Object.values(tableControls).find((ctrl) => controlElement.hasAttribute(ctrl.attr));
-        if (!control) {
-          return;
-        }
-
-        const data = control.getData(controlElement);
-        switch (data.type) {
-          case 'checkbox': {
-            if (data.header) {
-              model?.selection.setSelection(model.selection.allRowsSelected ? 'none' : 'all');
-            } else {
-              model?.selection.toggleSelectionForRowIndex(data.rowIndex);
-            }
-            break;
-          }
-          case 'switch': {
-            if (model) {
-              model.updateCellData({ row: data.rowIndex, col: data.colIndex }, (value) => !value);
-            }
-            break;
-          }
-        }
-      }
-    },
-    [model, modals, dxGrid],
-  );
-
-  const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
-    (increment, delta, cell) => {
-      if (dxGrid && model) {
-        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);
-          handleInsertRowResult(model.insertRow());
-        } else {
-          dxGrid.refocus(increment, delta);
-        }
-      }
-    },
-    [dxGrid, model],
-  );
-
-  const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
-    (event) => {
-      if (!model?.features.dataEditable) {
-        return;
-      }
-
-      const cell = closestCell(event.target);
-      if (!model || !cell) {
-        return;
-      }
+//
+// Root
+//
 
-      // Handle Meta+C (Copy) and Meta+V (Paste) commands
-      if (event.metaKey || event.ctrlKey) {
-        switch (event.key) {
-          case 'c': {
-            // Copy focused cell's text content to clipboard
-            try {
-              const cellData = model.getCellData(cell);
-              const textContent = cellData?.toString() ?? '';
-              void navigator.clipboard.writeText(textContent);
-              event.preventDefault();
-            } catch (error) {
-              log.catch(error);
-            }
-            break;
-          }
-          case 'v': {
-            // Paste clipboard content to focused cell
-            event.preventDefault();
-            void navigator.clipboard.readText().then((clipboardText) => {
-              try {
-                // Attempt to set the cell's content to clipboard content
-                model.setCellData(cell, String.trim(clipboardText).replace(/[\n\r]+/, ' '));
-                handleSave();
-              } catch {
-                // If validation fails, emit a DxEditRequest event with initialContent from clipboard
-                // TODO(thure): Should `dx-grid` expose a method like this?
-                const cellElement = (event.target as HTMLElement).closest(
-                  '[data-dx-grid-action="cell"]',
-                ) as HTMLElement;
-                if (cellElement) {
-                  const rect = cellElement.getBoundingClientRect();
-                  const editRequest = new DxEditRequest({
-                    cellIndex: `${cell.plane},${cell.col},${cell.row}`,
-                    cellBox: {
-                      insetInlineStart: rect.left,
-                      insetBlockStart: rect.top,
-                      inlineSize: rect.width,
-                      blockSize: rect.height,
-                    },
-                    cellElement,
-                    initialContent: clipboardText,
-                  });
-                  cellElement.dispatchEvent(editRequest);
-                }
-              }
-            });
-            break;
-          }
-        }
-      }
+const TABLE_ROOT_NAME = 'Table.Root';
 
-      switch (event.key) {
-        case 'Backspace':
-        case 'Delete': {
-          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.
-          }
-          break;
-        }
-      }
-    },
-    [model, dxGrid, handleSave],
-  );
+type TableRootProps = PropsWithChildren;
 
-  const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
-    (event) => {
-      if (event.axis === 'col') {
-        const columnIndex = parseInt(event.index, 10);
-        model?.setColumnWidth(columnIndex, event.size);
-      }
-    },
-    [model],
-  );
+const TableRoot = forwardRef<TableController, TableRootProps>(({ children }, forwardedRef) => {
+  const controllerRef = useRef<TableController>({});
 
-  const handleWheel = useCallback(
-    (event: WheelEvent) => {
-      if (!ignoreAttention && !hasAttention) {
-        event.stopPropagation();
-      }
-    },
-    [hasAttention, ignoreAttention],
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      update: (cell) => controllerRef.current?.update?.(cell),
+      handleInsertRowResult: (result) => controllerRef.current?.handleInsertRowResult?.(result),
+    }),
+    [],
   );
 
-  const handleNewColumn = useCallback(() => {
-    const columns = model?.getColumnCount();
-    if (dxGrid && columns) {
-      dxGrid.scrollToColumn(columns - 1);
-    }
-  }, [model, dxGrid]);
+  return <TableContextProvider controllerRef={controllerRef}>{children}</TableContextProvider>;
+});
 
-  /**
-   * Provides an external controller that can be called to repaint the table.
-   */
-  useImperativeHandle<TableController, TableController>(forwardedRef, () => {
-    if (!dxGrid || !presentation) {
-      return {};
-    }
-
-    return {
-      update: (cell) => {
-        if (cell) {
-          dxGrid.updateIfWithinBounds(cell, true);
-        } else {
-          dxGrid.updateCells(true);
-          dxGrid.requestUpdate();
-        }
-      },
-      handleInsertRowResult,
-    };
-  }, [dxGrid, model, presentation]);
-
-  if (!model || !modals) {
-    return <span role='none' className='dx-attention-surface' />;
-  }
-
-  const { className, ...rest } = useComposableProps(props);
-  return (
-    <div {...rest} role='none' className={mx('dx-container relative', className)}>
-      <Grid.Root id={model.id ?? 'table-grid'}>
-        <TableValueEditor<T>
-          model={model}
-          modals={modals}
-          schema={schema}
-          onFocus={handleFocus}
-          onSave={handleSave}
-          onCreate={onCreate}
-        />
-        <Grid.Content
-          className={mx('[--dx-grid-base:var(--base-surface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
-          frozen={frozen}
-          columns={columnMeta}
-          columnDefault={columnDefault}
-          rowDefault={rowDefault}
-          limitRows={rows.length}
-          limitColumns={columnCount}
-          overscroll='trap'
-          onAxisResize={handleAxisResize}
-          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} />
-      </Grid.Root>
-    </div>
-  );
-};
-
-const TableMain = forwardRef(TableMainInner) as <T extends Type.AnyEntity = Type.AnyEntity>(
-  props: TableMainProps<T> & { ref?: Ref<TableController> },
-) => JSX.Element;
+TableRoot.displayName = TABLE_ROOT_NAME;
 
 //
 // Table
@@ -461,6 +67,10 @@ const TableMain = forwardRef(TableMainInner) as <T extends Type.AnyEntity = Type
 
 export const Table = {
   Root: TableRoot,
-  Main: TableMain,
   Toolbar: TableToolbar,
+  Content: TableContent,
 };
+
+export type { TableController, TableRootProps };
+
+export { useTableContext };