@dxos/react-ui-table 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 import {
   TableSchema,
   TableType
-} from "./chunk-5MKYB7NF.mjs";
+} from "./chunk-YWNRUF4J.mjs";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -36,13 +36,13 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-import React7, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2, useMemo as useMemo4 } from "react";
+import React7, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2, useMemo as useMemo4, useEffect as useEffect2 } from "react";
 import { getValue as getValue4 } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { Filter } from "@dxos/react-client/echo";
 import { useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
-import { Grid, closestCell } from "@dxos/react-ui-grid";
+import { closestCell, Grid } from "@dxos/react-ui-grid";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 import { isNotFalsy, safeParseInt } from "@dxos/util";
 
@@ -304,33 +304,60 @@ import { Resource } from "@dxos/context";
 
 // packages/ui/react-ui-table/src/util/dynamic-table.ts
 import { create as create2, makeRef } from "@dxos/live-object";
-import { createView, echoSchemaFromPropertyDefinitions, ViewProjection } from "@dxos/schema";
-var makeDynamicTable = (typename, properties) => {
-  const table = create2(TableType, {
-    name: "dynamic-table"
-  });
-  const echoSchema = echoSchemaFromPropertyDefinitions(typename, properties);
-  const propertyNames = properties.map((property) => property.name);
+import { createView, getSchemaFromPropertyDefinitions, ViewProjection } from "@dxos/schema";
+var getBaseSchems = ({ typename, properties, jsonSchema, schema }) => {
+  if (typename && properties) {
+    const schema2 = getSchemaFromPropertyDefinitions(typename, properties);
+    return {
+      typename: schema2.typename,
+      jsonSchema: schema2.jsonSchema
+    };
+  } else if (schema) {
+    return {
+      typename: schema.typename,
+      jsonSchema: schema.jsonSchema
+    };
+  } else if (typename && jsonSchema) {
+    return {
+      typename,
+      jsonSchema
+    };
+  } else {
+    throw new Error("invalid properties");
+  }
+};
+var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
   const view = createView({
     name: "dynamic-table",
-    typename: echoSchema.typename,
-    jsonSchema: echoSchema.jsonSchema,
-    fields: propertyNames
+    typename,
+    jsonSchema,
+    ...properties && {
+      fields: properties.map((property) => property.name)
+    }
+  });
+  const table = create2(TableType, {
+    name: "dynamic-table",
+    view: makeRef(view)
   });
-  table.view = makeRef(view);
-  const viewProjection = new ViewProjection(echoSchema, view);
+  const projection = new ViewProjection(jsonSchema, view);
+  if (properties && view.fields) {
+    setProperties(view, projection, properties);
+  }
+  return {
+    table,
+    projection
+  };
+};
+var setProperties = (view, projection, properties) => {
   for (const property of properties) {
-    if (!view.fields) {
-      continue;
-    }
     const field = view.fields.find((field2) => field2.path === property.name);
     if (field) {
       if (property.size !== void 0) {
         field.size = property.size;
       }
       if (property.title !== void 0) {
-        const fieldProjection = viewProjection.getFieldProjection(field.id);
-        viewProjection.setFieldProjection({
+        const fieldProjection = projection.getFieldProjection(field.id);
+        projection.setFieldProjection({
           ...fieldProjection,
           props: {
             ...fieldProjection.props,
@@ -349,12 +376,6 @@ var makeDynamicTable = (typename, properties) => {
       }
     }
   }
-  return {
-    table,
-    schema: echoSchema,
-    view,
-    viewProjection
-  };
 };
 
 // packages/ui/react-ui-table/src/util/signals.ts
@@ -418,7 +439,7 @@ var ContactFields = [
   "active"
 ];
 var createProjection = (schema, view) => {
-  const projection = new ViewProjection2(schema, view);
+  const projection = new ViewProjection2(schema.jsonSchema, view);
   projection.setFieldProjection({
     field: {
       id: view.fields.find((f) => f.path === "salary").id,
@@ -581,7 +602,7 @@ var renderAttributes = (data) => {
 var renderInput = (baseClass, attrs, checked = false, disabled = false, preventToggle = false, testId) => {
   return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? "checked" : ""} ${preventToggle ? 'onclick="return false"' : ""} ${disabled ? "disabled" : ""} data-testid="${testId}"/>`;
 };
-var renderCheckbox = ({ rowIndex, header = false, checked = false, disabled = false }) => {
+var CheckboxStory = ({ rowIndex, header = false, checked = false, disabled = false }) => {
   const attrs = {
     [CONTROL_IDENTIFIERS.checkbox]: "",
     "data-row-index": rowIndex.toString(),
@@ -591,7 +612,7 @@ var renderCheckbox = ({ rowIndex, header = false, checked = false, disabled = fa
   };
   return renderInput(BASE_CLASSES.checkbox, attrs, checked, disabled, true, "table-selection");
 };
-var renderSwitch = ({ colIndex, rowIndex, checked = false, disabled = false }) => {
+var SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = false }) => {
   const attrs = {
     [CONTROL_IDENTIFIERS.switch]: "",
     "data-row-index": rowIndex.toString(),
@@ -602,7 +623,7 @@ var renderSwitch = ({ colIndex, rowIndex, checked = false, disabled = false }) =
 var tableControls = {
   checkbox: {
     attr: CONTROL_IDENTIFIERS.checkbox,
-    render: renderCheckbox,
+    render: CheckboxStory,
     getData: (el) => ({
       type: "checkbox",
       rowIndex: Number(el.getAttribute("data-row-index")),
@@ -611,7 +632,7 @@ var tableControls = {
   },
   switch: {
     attr: CONTROL_IDENTIFIERS.switch,
-    render: renderSwitch,
+    render: SwitchStory,
     getData: (el) => ({
       type: "switch",
       rowIndex: Number(el.getAttribute("data-row-index")),
@@ -622,9 +643,10 @@ var tableControls = {
 
 // packages/ui/react-ui-table/src/model/selection-model.ts
 var SelectionModel = class extends Resource {
-  constructor(_rows, _onSelectionChanged) {
+  constructor(_rows, _selectionMode, _onSelectionChanged) {
     super();
     this._rows = _rows;
+    this._selectionMode = _selectionMode;
     this._onSelectionChanged = _onSelectionChanged;
     this._selection = signal(/* @__PURE__ */ new Set());
     this._validSelectedIds = computed(() => {
@@ -662,6 +684,9 @@ var SelectionModel = class extends Resource {
       if (newSelection.has(row.id)) {
         newSelection.delete(row.id);
       } else {
+        if (this._selectionMode === "single") {
+          newSelection.clear();
+        }
         newSelection.add(row.id);
       }
       this._selection.value = newSelection;
@@ -698,6 +723,9 @@ var SelectionModel = class extends Resource {
   get allRowsSeleted() {
     return this._allSelected;
   }
+  get selectionMode() {
+    return this._selectionMode;
+  }
 };
 
 // packages/ui/react-ui-table/src/model/table-sorting.ts
@@ -868,7 +896,10 @@ var TableSorting = class {
 // packages/ui/react-ui-table/src/model/table-model.ts
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var defaultFeatures = {
-  selection: true,
+  selection: {
+    enabled: true,
+    mode: "multiple"
+  },
   dataEditable: false,
   schemaEditable: false
 };
@@ -876,7 +907,7 @@ var TableModel = class extends Resource2 {
   constructor({ id, space, view, projection, features = {}, sorting = [], pinnedRows = {
     top: [],
     bottom: []
-  }, onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChanged, rowActions = [], onRowAction }) {
+  }, rowActions = [], onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
     super();
     this._visibleRange = signal3({
       start: {
@@ -905,7 +936,7 @@ var TableModel = class extends Resource2 {
       const row = this._sorting.getDataIndex(rowIndex);
       const obj = this._rows.value[row];
       const objectsToDelete = [];
-      if (this._selection.hasSelection.value) {
+      if (this.features.selection.enabled && this._selection.hasSelection.value) {
         const selectedRows = this._selection.getSelectedRows();
         objectsToDelete.push(...selectedRows);
       } else {
@@ -984,18 +1015,27 @@ var TableModel = class extends Resource2 {
       ...defaultFeatures,
       ...features
     };
+    invariant(!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === "single"), "Single selection is not compatible with editable tables.", {
+      F: __dxlog_file,
+      L: 114,
+      S: this,
+      A: [
+        "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
+        "'Single selection is not compatible with editable tables.'"
+      ]
+    });
     this._sorting = new TableSorting(this._rows, this._view, projection);
     if (sorting.length > 0) {
       const [sort] = sorting;
       this._sorting.setSort(sort.fieldId, sort.direction);
     }
     this._pinnedRows = pinnedRows;
+    this._rowActions = rowActions;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
     this._onDeleteColumn = onDeleteColumn;
     this._onCellUpdate = onCellUpdate;
-    this._onRowOrderChanged = onRowOrderChanged;
-    this._rowActions = rowActions;
+    this._onRowOrderChange = onRowOrderChange;
     this._onRowAction = onRowAction;
   }
   get id() {
@@ -1037,7 +1077,7 @@ var TableModel = class extends Resource2 {
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 176,
+      L: 183,
       S: this,
       A: [
         "this._columnMeta",
@@ -1062,7 +1102,7 @@ var TableModel = class extends Resource2 {
   async _open() {
     this.initializeColumnMeta();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sorting.sortedRows, () => this._onRowOrderChanged?.());
+    this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? "multiple", () => this._onRowOrderChange?.());
     await this._selection.open(this._ctx);
   }
   initializeColumnMeta() {
@@ -1095,7 +1135,7 @@ var TableModel = class extends Resource2 {
   initializeEffects() {
     const rowOrderWatcher = effect2(() => {
       touch(this._sorting.sortedRows.value);
-      this._onRowOrderChanged?.();
+      this._onRowOrderChange?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
     const rowEffectManager = effect2(() => {
@@ -1264,7 +1304,7 @@ var ModalController = class {
 // packages/ui/react-ui-table/src/model/table-presentation.ts
 import { signal as signal5 } from "@preact/signals-core";
 import { FormatEnum as FormatEnum4, getValue as getValue3 } from "@dxos/echo-schema";
-import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
+import { cellClassesForFieldType, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
 import { toPlaneCellIndex } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
 import { VIEW_FIELD_LIMIT } from "@dxos/schema";
@@ -1309,7 +1349,7 @@ var TablePresentation = class {
     }
     if (plane === "grid" && this.model.features.dataEditable === false) {
       Object.values(cells).forEach((cell) => {
-        cell.readonly = true;
+        cell.readonly = "text-select";
       });
     }
     return cells;
@@ -1327,7 +1367,8 @@ var TablePresentation = class {
           }
           switch (props.format) {
             case FormatEnum4.Boolean:
-            case FormatEnum4.SingleSelect: {
+            case FormatEnum4.SingleSelect:
+            case FormatEnum4.MultiSelect: {
               return "";
             }
             case FormatEnum4.Ref: {
@@ -1354,7 +1395,7 @@ var TablePresentation = class {
       if (formatClasses) {
         classes.push(formatClasses);
       }
-      const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj));
+      const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj), this.model.selection.selectionMode);
       if (rowSelectionClasses) {
         classes.push(rowSelectionClasses);
       }
@@ -1377,7 +1418,7 @@ var TablePresentation = class {
           rowIndex: displayIndex,
           checked: value ?? false
         });
-        cell.readonly = true;
+        cell.readonly = "no-text-select";
       }
       if (props.format === FormatEnum4.SingleSelect) {
         const value = getValue3(obj, field.path);
@@ -1389,6 +1430,22 @@ var TablePresentation = class {
           }
         }
       }
+      if (props.format === FormatEnum4.MultiSelect) {
+        const values = getValue3(obj, field.path);
+        const options = this.model.projection.getFieldProjection(field.id).props.options;
+        if (options && values && values.length > 0) {
+          const tags = values.map((value) => {
+            const option = options.find((o) => o.id === value);
+            if (option) {
+              return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+            }
+            return null;
+          }).filter(Boolean).join(" ");
+          if (tags) {
+            cell.accessoryHtml = tags;
+          }
+        }
+      }
       const idx = toPlaneCellIndex({
         col: colIndex,
         row: displayIndex
@@ -1439,13 +1496,13 @@ var TablePresentation = class {
     const cells = {};
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       const isSelected = this.model.selection.isRowIndexSelected(row);
-      const classes = cellClassesForRowSelection(isSelected);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
       cells[toPlaneCellIndex({
         col: 0,
         row
       })] = {
         value: "",
-        readonly: true,
+        readonly: "no-text-select",
         className: classes ? mx(classes) : void 0,
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: row,
@@ -1459,7 +1516,7 @@ var TablePresentation = class {
     const cells = {};
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       const isSelected = this.model.selection.isRowIndexSelected(row);
-      const classes = cellClassesForRowSelection(isSelected);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
       cells[toPlaneCellIndex({
         col: 0,
         row
@@ -1475,6 +1532,18 @@ var TablePresentation = class {
     return cells;
   }
   getSelectAllCell() {
+    if (!this.model.features.selection.enabled || this.model.selection.selectionMode === "single") {
+      return {
+        [toPlaneCellIndex({
+          col: 0,
+          row: 0
+        })]: {
+          className: "!bg-gridHeader",
+          readonly: true,
+          value: ""
+        }
+      };
+    }
     return {
       [toPlaneCellIndex({
         col: 0,
@@ -1507,12 +1576,37 @@ var TablePresentation = class {
     };
   }
 };
+var cellClassesForRowSelection = (selected, selectionMode) => {
+  if (!selected) {
+    if (selectionMode === "single") {
+      return [
+        "!cursor-pointer"
+      ];
+    } else {
+      return void 0;
+    }
+  }
+  switch (selectionMode) {
+    case "single":
+      return [
+        "!bg-currentRelated hover:bg-hoverSurface",
+        "!cursor-pointer"
+      ];
+    case "multiple":
+      return [
+        "!bg-gridCellSelected"
+      ];
+  }
+};
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
 import React6, { useCallback as useCallback3, useMemo as useMemo3, useRef } from "react";
 import { FormatEnum as FormatEnum5 } from "@dxos/echo-schema";
 import { invariant as invariant2 } from "@dxos/invariant";
+import { useThemeContext } from "@dxos/react-ui";
+import { createMarkdownExtensions } from "@dxos/react-ui-editor";
 import { cellQuery, editorKeys, parseCellIndex, useGridContext as useGridContext2, GridCellEditor } from "@dxos/react-ui-grid";
+import { tagPickerExtension, createLinks } from "@dxos/react-ui-tag-picker";
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/extension.ts
 import { autocompletion, pickedCompletion } from "@codemirror/autocomplete";
@@ -1564,6 +1658,7 @@ var isCreateOption = (data) => typeof data === "object" && data[newValue];
 var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }) => {
   const { id: gridId, editing, setEditing } = useGridContext2("TableCellEditor", __gridScope);
   const suppressNextBlur = useRef(false);
+  const { themeMode } = useThemeContext();
   const fieldProjection = useMemo3(() => {
     if (!model || !editing) {
       return;
@@ -1573,7 +1668,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
     invariant2(fieldProjection2, void 0, {
       F: __dxlog_file3,
-      L: 67,
+      L: 71,
       S: void 0,
       A: [
         "fieldProjection",
@@ -1596,7 +1691,10 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     setEditing(null);
   }, [
     model,
-    editing
+    editing,
+    onEnter,
+    onFocus,
+    setEditing
   ]);
   const handleBlur = useCallback3((value) => {
     if (!model || !editing) {
@@ -1628,9 +1726,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     editing,
     onFocus,
     onEnter,
-    fieldProjection,
-    determineNavigationAxis,
-    determineNavigationDelta
+    fieldProjection
   ]);
   const extension = useMemo3(() => {
     if (!fieldProjection) {
@@ -1644,6 +1740,37 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
         }
       })
     ];
+    const format = fieldProjection.props.format;
+    if (format === FormatEnum5.SingleSelect || format === FormatEnum5.MultiSelect) {
+      extension2.push(createMarkdownExtensions({
+        themeMode
+      }));
+      const options = fieldProjection.props.options || [];
+      const mode = format === FormatEnum5.SingleSelect ? "single-select" : "multi-select";
+      extension2.push(tagPickerExtension({
+        mode,
+        inGrid: true,
+        onSearch: (text, selectedIds) => {
+          return options.filter((option) => selectedIds.indexOf(option.id) === -1 && (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase()))).map((option) => ({
+            id: option.id,
+            label: option.title,
+            hue: option.color
+          }));
+        },
+        onUpdate: (ids) => {
+          if (model && editing) {
+            if (ids.length === 0) {
+              return;
+            }
+            if (mode === "single-select") {
+              handleEnter(ids[0]);
+            } else {
+              handleEnter(ids);
+            }
+          }
+        }
+      }));
+    }
     if (onQuery) {
       switch (fieldProjection.props.format) {
         case FormatEnum5.Ref: {
@@ -1679,11 +1806,49 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     modals,
     editing,
     fieldProjection,
-    handleClose
+    handleClose,
+    themeMode
   ]);
   const getCellContent = useCallback3(() => {
     if (model && editing) {
-      const value = model.getCellData(parseCellIndex(editing.index));
+      const cell = parseCellIndex(editing.index);
+      const { col } = cell;
+      const field = model.projection.view.fields[col];
+      const fieldProjection2 = model.projection.getFieldProjection(field.id);
+      if (fieldProjection2?.props.format === FormatEnum5.SingleSelect || fieldProjection2?.props.format === FormatEnum5.MultiSelect) {
+        const value2 = model.getCellData(cell);
+        if (value2 !== void 0) {
+          const options = fieldProjection2.props.options || [];
+          if (fieldProjection2.props.format === FormatEnum5.MultiSelect && Array.isArray(value2)) {
+            const tagItems = value2.map((id) => {
+              const option = options.find((o) => o.id === id);
+              if (option) {
+                return {
+                  id,
+                  label: option.title,
+                  hue: option.color
+                };
+              }
+              return void 0;
+            }).filter((item) => item !== void 0);
+            return createLinks(tagItems);
+          } else {
+            const option = options.find((o) => o.id === value2);
+            if (option) {
+              const tagItem = {
+                id: value2,
+                label: option.title,
+                hue: option.color
+              };
+              return createLinks([
+                tagItem
+              ]);
+            }
+          }
+        }
+        return "";
+      }
+      const value = model.getCellData(cell);
       return value !== void 0 ? String(value) : "";
     }
   }, [
@@ -1728,26 +1893,37 @@ var blockEndLine = "[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inlin
 var TableRoot = ({ children, role }) => {
   return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
-    className: mx2("relative border-bs !border-separator", role === "section" ? "attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]")
+    className: mx2("relative !border-separator", role === "section" ? "attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]")
   }, children);
 };
-var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, onRowClicked }, forwardedRef) => {
+var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, onRowClick }, forwardedRef) => {
   const [dxGrid, setDxGrid] = useState2(null);
   const { hasAttention } = useAttention(model?.id ?? "table");
   const { t } = useTranslation3(translationKey);
   const modals = useMemo4(() => new ModalController(), []);
-  const frozen = useMemo4(() => ({
-    frozenRowsStart: 1,
-    frozenColsStart: model?.features.selection ? 1 : 0,
-    frozenColsEnd: 1
-  }), [
+  const frozen = useMemo4(() => {
+    const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
+    return {
+      frozenRowsStart: 1,
+      frozenColsStart: model?.features.selection.enabled ? 1 : 0,
+      frozenColsEnd: noActionColumn ? 0 : 1
+    };
+  }, [
     model
   ]);
+  useEffect2(() => {
+    if (!presentation || !dxGrid) {
+      return;
+    }
+    dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
+  }, [
+    presentation,
+    dxGrid
+  ]);
   useImperativeHandle(forwardedRef, () => {
     if (!presentation || !dxGrid) {
       return {};
     }
-    dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
     return {
       update: (cell) => {
         if (cell) {
@@ -1763,11 +1939,14 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     dxGrid
   ]);
   const handleGridClick = useCallback4((event) => {
-    if (onRowClicked) {
-      const rowIndex = safeParseInt(event.target.ariaRowIndex ?? "");
-      if (rowIndex != null) {
+    const rowIndex = safeParseInt(event.target.ariaRowIndex ?? "");
+    if (rowIndex != null) {
+      if (onRowClick) {
         const row = model?.getRowAt(rowIndex);
-        row && onRowClicked(row);
+        row && onRowClick(row);
+      }
+      if (model?.features.selection.enabled && model?.selection.selectionMode === "single") {
+        model.selection.toggleSelectionForRowIndex(rowIndex);
       }
     }
     if (!modals) {
@@ -1910,7 +2089,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       const space = model.space;
       invariant3(space, void 0, {
         F: __dxlog_file4,
-        L: 284,
+        L: 312,
         S: void 0,
         A: [
           "space",
@@ -1961,16 +2140,17 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     onFocus: handleFocus,
     onQuery: handleQuery
   }), /* @__PURE__ */ React7.createElement(Grid.Content, {
-    onWheelCapture: handleWheel,
     className: mx2("[--dx-grid-base:var(--surface-bg)]", inlineEndLine, blockEndLine),
     frozen,
+    // getCells={getCells}
     columns: model.columnMeta.value,
     limitRows: model.getRowCount() ?? 0,
     limitColumns: model.view?.fields?.length ?? 0,
+    overscroll: "trap",
     onAxisResize: handleAxisResize,
     onClick: handleGridClick,
     onKeyDown: handleKeyDown,
-    overscroll: "trap",
+    onWheelCapture: handleWheel,
     ref: setDxGrid
   }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
     model,
@@ -1982,10 +2162,10 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     model,
     modals,
     onNewColumn: handleNewColumn
-  }), /* @__PURE__ */ React7.createElement(RefPanel, {
+  }), /* @__PURE__ */ React7.createElement(CreateRefPanel, {
     model,
     modals
-  }), /* @__PURE__ */ React7.createElement(CreateRefPanel, {
+  }), /* @__PURE__ */ React7.createElement(RefPanel, {
     model,
     modals
   }));
@@ -1997,17 +2177,18 @@ var Table = {
 
 // packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
 import React8, { useRef as useRef2, useMemo as useMemo5, useCallback as useCallback5 } from "react";
+import { useDefaultValue } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-table/src/hooks/useTableModel.ts
 import { effect as effect3 } from "@preact/signals-core";
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import { fullyQualifiedId, getSpace } from "@dxos/react-client/echo";
 import { useSelectionActions } from "@dxos/react-ui-attention";
 import { isNonNullable } from "@dxos/util";
-var useTableModel = ({ objects, table, projection, features, onSelectionChanged, rowActions, onRowAction, ...props }) => {
+var useTableModel = ({ table, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
   const [model, setModel] = useState3();
-  useEffect2(() => {
+  useEffect3(() => {
     if (!table || !projection) {
       return;
     }
@@ -2037,19 +2218,19 @@ var useTableModel = ({ objects, table, projection, features, onSelectionChanged,
     features,
     rowActions
   ]);
-  useEffect2(() => {
-    if (objects) {
-      model?.setRows(objects);
+  useEffect3(() => {
+    if (rows) {
+      model?.setRows(rows);
     }
   }, [
     model,
-    objects
+    rows
   ]);
   const { select, clear } = useSelectionActions([
     table?.id,
     table?.view?.target?.query.typename
   ].filter(isNonNullable));
-  useEffect2(() => {
+  useEffect3(() => {
     if (!model) {
       return;
     }
@@ -2072,32 +2253,45 @@ var useTableModel = ({ objects, table, projection, features, onSelectionChanged,
 };
 
 // packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
-var DynamicTable = ({ data, properties, classNames, tableName = "com.example/dynamic_table", onRowClicked, rowActions, onRowAction }) => {
-  const { table, viewProjection } = useMemo5(() => {
-    return makeDynamicTable(tableName, properties);
+var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
+  const { table, projection } = useMemo5(() => {
+    const props2 = getBaseSchems({
+      typename: name,
+      properties,
+      jsonSchema,
+      schema
+    });
+    return makeDynamicTable({
+      ...props2,
+      properties
+    });
   }, [
-    tableName,
-    properties
+    name,
+    properties,
+    schema,
+    jsonSchema
   ]);
   const tableRef = useRef2(null);
   const handleCellUpdate = useCallback5((cell) => {
     tableRef.current?.update?.(cell);
   }, []);
-  const handleRowOrderChanged = useCallback5(() => {
+  const handleRowOrderChange = useCallback5(() => {
     tableRef.current?.update?.();
   }, []);
-  const features = useMemo5(() => ({
-    selection: false,
+  const features = useDefaultValue(props.features, () => ({
+    selection: {
+      enabled: false
+    },
     dataEditable: false
-  }), []);
+  }));
   const model = useTableModel({
     table,
-    objects: data,
-    projection: viewProjection,
+    rows,
+    projection,
     features,
-    onCellUpdate: handleCellUpdate,
-    onRowOrderChanged: handleRowOrderChanged,
     rowActions,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChange: handleRowOrderChange,
     onRowAction
   });
   const presentation = useMemo5(() => {
@@ -2108,15 +2302,17 @@ var DynamicTable = ({ data, properties, classNames, tableName = "com.example/dyn
     model
   ]);
   return /* @__PURE__ */ React8.createElement("div", {
+    role: "none",
     className: mx3("is-full bs-full grow grid", classNames)
   }, /* @__PURE__ */ React8.createElement("div", {
+    role: "none",
     className: "grid min-bs-0 overflow-hidden"
   }, /* @__PURE__ */ React8.createElement(Table.Root, null, /* @__PURE__ */ React8.createElement(Table.Main, {
     ref: tableRef,
     model,
     presentation,
-    onRowClicked,
-    ignoreAttention: true
+    ignoreAttention: true,
+    onRowClick
   }))));
 };
 
@@ -2194,18 +2390,20 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
 export {
   BUTTON_IDENTIFIERS,
   CONTROL_IDENTIFIERS,
+  CheckboxStory,
   DynamicTable,
   ModalController,
+  SwitchStory,
   Table,
   TableModel,
   TablePresentation,
   TableSchema,
   TableToolbar,
   TableType,
+  cellClassesForRowSelection,
+  getBaseSchems,
   initializeTable,
   makeDynamicTable,
-  renderCheckbox,
-  renderSwitch,
   tableButtons,
   tableControls,
   touch,