@dxos/react-ui-table 0.7.5-labs.a279d8c → 0.7.5-labs.a8b535d

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

@@ -4,14 +4,13 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-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, useQuery, create } from '@dxos/react-client/echo';
+import { Filter, useQuery, useSchema, 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';
@@ -41,13 +40,13 @@ const DefaultStory = () => {
 
   const tables = useQuery(space, Filter.schema(TableType));
   const [table, setTable] = useState<TableType>();
-  const [schema, setSchema] = useState<EchoSchema>();
+  const schema = useSchema(space, table?.view?.target?.query.type);
+
   useEffect(() => {
     if (space && tables.length && !table) {
       const table = tables[0];
       invariant(table.view);
       setTable(table);
-      setSchema(space.db.schemaRegistry.getSchema(table.view.target!.query.type));
     }
   }, [space, tables]);
 
@@ -175,7 +174,7 @@ type StoryProps = {
   rows?: number;
 } & Pick<SimulatorProps, 'insertInterval' | 'updateInterval'>;
 
-const TablePerformanceStory = (props: StoryProps) => {
+const _TablePerformanceStory = (props: StoryProps) => {
   const getDefaultRows = useCallback(() => 10, []);
   const rows = useDefaultValue(props.rows, getDefaultRows);
   const table = useMemo(() => createTable(), []);
@@ -248,22 +247,22 @@ const meta: Meta<StoryProps> = {
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
-
 export const Default = {};
 
-export const Mutations: Story = {
-  render: TablePerformanceStory,
-  args: {
-    rows: 1000,
-    updateInterval: 1,
-  },
-};
-
-export const RapidInsertions: Story = {
-  render: TablePerformanceStory,
-  args: {
-    rows: 0,
-    insertInterval: 100,
-  },
-};
+// TODO(ZaymonFC): Restore the performance stories.
+// type Story = StoryObj<StoryProps>;
+// export const Mutations: Story = {
+//   render: TablePerformanceStory,
+//   args: {
+//     rows: 1000,
+//     updateInterval: 1,
+//   },
+// };
+
+// export const RapidInsertions: Story = {
+//   render: TablePerformanceStory,
+//   args: {
+//     rows: 0,
+//     insertInterval: 100,
+//   },
+// };

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

@@ -38,7 +38,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
       const table = tables[0];
       invariant(table.view);
       setTable(table);
-      setSchema(space.db.schemaRegistry.getSchema(table.view.target!.query.type));
+      setSchema(space.db.schemaRegistry.getSchema(table.view.target!.query.type!));
     }
   }, [space, tables]);
 

package/src/hooks/useTableModel.ts

@@ -2,10 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
+import { effect } from '@preact/signals-core';
 import { useEffect, useState } from 'react';
 
 import { type ReactiveObject } from '@dxos/react-client/echo';
+import { useSelectionActions } from '@dxos/react-ui-attention';
 import { type ViewProjection } from '@dxos/schema';
+import { isNonNullable } from '@dxos/util';
 
 import { type BaseTableRow, TableModel, type TableModelProps } from '../model';
 import { type TableType } from '../types';
@@ -48,5 +51,23 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
     }
   }, [model, objects]);
 
+  const { select, clear } = useSelectionActions([table?.id, table?.view?.target?.query.type].filter(isNonNullable));
+
+  useEffect(() => {
+    if (!model) {
+      return;
+    }
+
+    const unsubscribe = effect(() => {
+      select([...model.selection.selection.value]);
+    });
+
+    // Maybe clear the selection here?
+    return () => {
+      clear();
+      unsubscribe();
+    };
+  }, [model]);
+
   return model;
 };

package/src/model/table-model.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';

package/src/model/table-presentation.ts

@@ -68,7 +68,8 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
           }
 
           switch (props.format) {
-            case FormatEnum.Boolean: {
+            case FormatEnum.Boolean:
+            case FormatEnum.SingleSelect: {
               return '';
             }
             case FormatEnum.Ref: {
@@ -119,6 +120,17 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
         cell.readonly = true;
       }
 
+      if (props.format === FormatEnum.SingleSelect) {
+        const value = getValue(obj, field.path);
+        const options = this.model.projection.getFieldProjection(field.id).props.options;
+        if (options) {
+          const option = options.find((o) => o.id === value);
+          if (option) {
+            cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+          }
+        }
+      }
+
       const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
       cells[idx] = cell;
     };

package/src/model/table-sorting.ts

@@ -188,6 +188,20 @@ export class TableSorting<T extends BaseTableRow> {
       return value;
     }
 
+    /**
+     * For single select fields, the sort value is determined by the index of the option in the
+     * options array. This ensures sort order matches the configured option order.
+     */
+    if (format === FormatEnum.SingleSelect) {
+      const options = props.options;
+      if (!options) {
+        return undefined;
+      }
+
+      const option = options.find((option) => option.id === value);
+      return option ? options.indexOf(option) : undefined;
+    }
+
     // TODO(ZaymonFC): Should we format this returned value for display based on the referenced prop format?
     //   Right now we're going to be sorting based on the raw values.
     //   Maybe we need to recurse this function with the referenced prop format and field?

package/src/playwright/smoke.spec.ts

@@ -145,7 +145,7 @@ test.describe('Table', () => {
     await page.getByRole('option', { name: 'Anita Mayer' }).click();
 
     // Assert that the value is shown in the cell.
-    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' })).toBeVisible();
+    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' }).first()).toBeVisible();
 
     // Create new object.
     await table.grid.cell(4, 1, 'grid').click();
@@ -157,7 +157,7 @@ test.describe('Table', () => {
     await page.getByTestId('save-button').click();
 
     // Scroll to the left.
-    await page.getByRole('gridcell', { name: 'test' }).click();
+    await page.getByRole('gridcell', { name: 'test' }).first().click();
 
     await page.close();
   });
@@ -173,7 +173,7 @@ test.describe('Table', () => {
     await page.getByTestId('table-switch').nth(7).click();
 
     // Test that checks are durable in the data model by sorting.
-    await table.sortColumn(1, 'descending');
+    await table.sortColumn(3, 'descending');
 
     // Assert the first two switch checkboxes are checked.
     await expect(page.getByTestId('table-switch').first()).toBeChecked();

package/src/util/table-buttons.ts

@@ -39,7 +39,7 @@ const createButton = ({
     .join(' ');
 
   const positionClass = type === 'primary' ? 'inline-end-2' : 'inline-end-9';
-  return `<button ${attr} data-testid="${testId}" class="ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 
 const addColumnButton = {

package/src/util/table-controls.ts

@@ -23,8 +23,8 @@ export const CONTROL_IDENTIFIERS = {
 } as const;
 
 const BASE_CLASSES = {
-  checkbox: 'absolute inset-block-[.375rem] inline-end-[.375rem] ch-checkbox',
-  switch: 'absolute inset-block-[.25rem] inline-end-[.25rem] ch-checkbox--switch',
+  checkbox: 'absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox',
+  switch: 'absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch',
 } as const;
 
 const renderAttributes = (data: Record<string, string>) => {

package/src/util/table.ts

@@ -46,7 +46,7 @@ export const initializeTable = async ({
     // We need to get the schema properties here. For now, only simple types and refs, not compound types
     // are going to be supported.
     const fields = getSchemaProperties(schema.ast)
-      .filter((prop) => prop.type !== 'object' || prop.format === FormatEnum.Ref)
+      .filter((prop) => prop.format !== FormatEnum.Ref)
       .map((prop) => prop.name);
 
     table.view = makeRef(

package/dist/types/src/playwright/playwright.config.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
-export default _default;
-//# sourceMappingURL=playwright.config.d.ts.map

package/dist/types/src/playwright/playwright.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"playwright.config.d.ts","sourceRoot":"","sources":["../../../../src/playwright/playwright.config.ts"],"names":[],"mappings":";AASA,wBAQG"}