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

package/dist/lib/node/index.cjs

@@ -30,18 +30,20 @@ var node_exports = {};
 __export(node_exports, {
   BUTTON_IDENTIFIERS: () => BUTTON_IDENTIFIERS,
   CONTROL_IDENTIFIERS: () => CONTROL_IDENTIFIERS,
+  CheckboxStory: () => CheckboxStory,
   DynamicTable: () => DynamicTable,
   ModalController: () => ModalController,
+  SwitchStory: () => SwitchStory,
   Table: () => Table,
   TableModel: () => TableModel,
   TablePresentation: () => TablePresentation,
-  TableSchema: () => import_chunk_NRFKBRPV.TableSchema,
+  TableSchema: () => import_chunk_TGG6OZ54.TableSchema,
   TableToolbar: () => TableToolbar,
-  TableType: () => import_chunk_NRFKBRPV.TableType,
+  TableType: () => import_chunk_TGG6OZ54.TableType,
+  cellClassesForRowSelection: () => cellClassesForRowSelection,
+  getBaseSchems: () => getBaseSchems,
   initializeTable: () => initializeTable,
   makeDynamicTable: () => makeDynamicTable,
-  renderCheckbox: () => renderCheckbox,
-  renderSwitch: () => renderSwitch,
   tableButtons: () => tableButtons,
   tableControls: () => tableControls,
   touch: () => touch,
@@ -49,7 +51,7 @@ __export(node_exports, {
   useTableModel: () => useTableModel
 });
 module.exports = __toCommonJS(node_exports);
-var import_chunk_NRFKBRPV = require("./chunk-NRFKBRPV.cjs");
+var import_chunk_TGG6OZ54 = require("./chunk-TGG6OZ54.cjs");
 var import_react = __toESM(require("react"));
 var import_echo_schema = require("@dxos/echo-schema");
 var import_invariant = require("@dxos/invariant");
@@ -104,10 +106,14 @@ var import_schema3 = require("@dxos/schema");
 var import_react7 = __toESM(require("react"));
 var import_echo_schema7 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
+var import_react_ui7 = require("@dxos/react-ui");
+var import_react_ui_editor = require("@dxos/react-ui-editor");
 var import_react_ui_grid4 = require("@dxos/react-ui-grid");
+var import_react_ui_tag_picker = require("@dxos/react-ui-tag-picker");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_view = require("@codemirror/view");
 var import_react8 = __toESM(require("react"));
+var import_react_ui8 = require("@dxos/react-ui");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var import_signals_core6 = require("@preact/signals-core");
 var import_react9 = require("react");
@@ -365,32 +371,59 @@ var RowActionsMenu = ({ model, modals }) => {
     }
   }, t(action.translationKey)))), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Arrow, null)));
 };
-var makeDynamicTable = (typename, properties) => {
-  const table = (0, import_live_object2.create)(import_chunk_NRFKBRPV.TableType, {
-    name: "dynamic-table"
-  });
-  const echoSchema = (0, import_schema.echoSchemaFromPropertyDefinitions)(typename, properties);
-  const propertyNames = properties.map((property) => property.name);
+var getBaseSchems = ({ typename, properties, jsonSchema, schema }) => {
+  if (typename && properties) {
+    const schema2 = (0, import_schema.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 = (0, import_schema.createView)({
     name: "dynamic-table",
-    typename: echoSchema.typename,
-    jsonSchema: echoSchema.jsonSchema,
-    fields: propertyNames
+    typename,
+    jsonSchema,
+    ...properties && {
+      fields: properties.map((property) => property.name)
+    }
+  });
+  const table = (0, import_live_object2.create)(import_chunk_TGG6OZ54.TableType, {
+    name: "dynamic-table",
+    view: (0, import_live_object2.makeRef)(view)
   });
-  table.view = (0, import_live_object2.makeRef)(view);
-  const viewProjection = new import_schema.ViewProjection(echoSchema, view);
+  const projection = new import_schema.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,
@@ -409,12 +442,6 @@ var makeDynamicTable = (typename, properties) => {
       }
     }
   }
-  return {
-    table,
-    schema: echoSchema,
-    view,
-    viewProjection
-  };
 };
 var touch = (value) => value;
 var initializeTable = async ({ client, space, table, typename, initialRow = true }) => {
@@ -470,7 +497,7 @@ var ContactFields = [
   "active"
 ];
 var createProjection = (schema, view) => {
-  const projection = new import_schema2.ViewProjection(schema, view);
+  const projection = new import_schema2.ViewProjection(schema.jsonSchema, view);
   projection.setFieldProjection({
     field: {
       id: view.fields.find((f) => f.path === "salary").id,
@@ -629,7 +656,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(),
@@ -639,7 +666,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(),
@@ -650,7 +677,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")),
@@ -659,7 +686,7 @@ var tableControls = {
   },
   switch: {
     attr: CONTROL_IDENTIFIERS.switch,
-    render: renderSwitch,
+    render: SwitchStory,
     getData: (el) => ({
       type: "switch",
       rowIndex: Number(el.getAttribute("data-row-index")),
@@ -668,9 +695,10 @@ var tableControls = {
   }
 };
 var SelectionModel = class extends import_context2.Resource {
-  constructor(_rows, _onSelectionChanged) {
+  constructor(_rows, _selectionMode, _onSelectionChanged) {
     super();
     this._rows = _rows;
+    this._selectionMode = _selectionMode;
     this._onSelectionChanged = _onSelectionChanged;
     this._selection = (0, import_signals_core2.signal)(/* @__PURE__ */ new Set());
     this._validSelectedIds = (0, import_signals_core2.computed)(() => {
@@ -708,6 +736,9 @@ var SelectionModel = class extends import_context2.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;
@@ -744,6 +775,9 @@ var SelectionModel = class extends import_context2.Resource {
   get allRowsSeleted() {
     return this._allSelected;
   }
+  get selectionMode() {
+    return this._selectionMode;
+  }
 };
 var TableSorting = class {
   constructor(rows, _view, _projection) {
@@ -906,7 +940,10 @@ var TableSorting = class {
 };
 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
 };
@@ -914,7 +951,7 @@ var TableModel = class extends import_context.Resource {
   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 = (0, import_signals_core.signal)({
       start: {
@@ -940,7 +977,7 @@ var TableModel = class extends import_context.Resource {
       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 {
@@ -1019,18 +1056,27 @@ var TableModel = class extends import_context.Resource {
       ...defaultFeatures,
       ...features
     };
+    (0, import_invariant2.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() {
@@ -1072,7 +1118,7 @@ var TableModel = class extends import_context.Resource {
   get columnMeta() {
     (0, import_invariant2.invariant)(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 176,
+      L: 183,
       S: this,
       A: [
         "this._columnMeta",
@@ -1097,7 +1143,7 @@ var TableModel = class extends import_context.Resource {
   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() {
@@ -1130,7 +1176,7 @@ var TableModel = class extends import_context.Resource {
   initializeEffects() {
     const rowOrderWatcher = (0, import_signals_core.effect)(() => {
       touch(this._sorting.sortedRows.value);
-      this._onRowOrderChanged?.();
+      this._onRowOrderChange?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
     const rowEffectManager = (0, import_signals_core.effect)(() => {
@@ -1332,7 +1378,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;
@@ -1350,7 +1396,8 @@ var TablePresentation = class {
           }
           switch (props.format) {
             case import_echo_schema6.FormatEnum.Boolean:
-            case import_echo_schema6.FormatEnum.SingleSelect: {
+            case import_echo_schema6.FormatEnum.SingleSelect:
+            case import_echo_schema6.FormatEnum.MultiSelect: {
               return "";
             }
             case import_echo_schema6.FormatEnum.Ref: {
@@ -1377,7 +1424,7 @@ var TablePresentation = class {
       if (formatClasses) {
         classes.push(formatClasses);
       }
-      const rowSelectionClasses = (0, import_react_ui_form6.cellClassesForRowSelection)(this.model.selection.isObjectSelected(obj));
+      const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj), this.model.selection.selectionMode);
       if (rowSelectionClasses) {
         classes.push(rowSelectionClasses);
       }
@@ -1400,7 +1447,7 @@ var TablePresentation = class {
           rowIndex: displayIndex,
           checked: value ?? false
         });
-        cell.readonly = true;
+        cell.readonly = "no-text-select";
       }
       if (props.format === import_echo_schema6.FormatEnum.SingleSelect) {
         const value = (0, import_echo_schema6.getValue)(obj, field.path);
@@ -1412,6 +1459,22 @@ var TablePresentation = class {
           }
         }
       }
+      if (props.format === import_echo_schema6.FormatEnum.MultiSelect) {
+        const values = (0, import_echo_schema6.getValue)(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 = (0, import_react_ui_grid3.toPlaneCellIndex)({
         col: colIndex,
         row: displayIndex
@@ -1462,13 +1525,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 = (0, import_react_ui_form6.cellClassesForRowSelection)(isSelected);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
       cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
         col: 0,
         row
       })] = {
         value: "",
-        readonly: true,
+        readonly: "no-text-select",
         className: classes ? (0, import_react_ui_theme2.mx)(classes) : void 0,
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: row,
@@ -1482,7 +1545,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 = (0, import_react_ui_form6.cellClassesForRowSelection)(isSelected);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
       cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
         col: 0,
         row
@@ -1498,6 +1561,18 @@ var TablePresentation = class {
     return cells;
   }
   getSelectAllCell() {
+    if (!this.model.features.selection.enabled || this.model.selection.selectionMode === "single") {
+      return {
+        [(0, import_react_ui_grid3.toPlaneCellIndex)({
+          col: 0,
+          row: 0
+        })]: {
+          className: "!bg-gridHeader",
+          readonly: true,
+          value: ""
+        }
+      };
+    }
     return {
       [(0, import_react_ui_grid3.toPlaneCellIndex)({
         col: 0,
@@ -1530,6 +1605,28 @@ 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"
+      ];
+  }
+};
 var completion = ({ debug, onQuery, onMatch }) => {
   return [
     import_view.EditorView.theme({
@@ -1575,6 +1672,7 @@ var isCreateOption = (data) => typeof data === "object" && data[newValue];
 var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }) => {
   const { id: gridId, editing, setEditing } = (0, import_react_ui_grid4.useGridContext)("TableCellEditor", __gridScope);
   const suppressNextBlur = (0, import_react7.useRef)(false);
+  const { themeMode } = (0, import_react_ui7.useThemeContext)();
   const fieldProjection = (0, import_react7.useMemo)(() => {
     if (!model || !editing) {
       return;
@@ -1584,7 +1682,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
     (0, import_invariant3.invariant)(fieldProjection2, void 0, {
       F: __dxlog_file3,
-      L: 67,
+      L: 71,
       S: void 0,
       A: [
         "fieldProjection",
@@ -1607,7 +1705,10 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     setEditing(null);
   }, [
     model,
-    editing
+    editing,
+    onEnter,
+    onFocus,
+    setEditing
   ]);
   const handleBlur = (0, import_react7.useCallback)((value) => {
     if (!model || !editing) {
@@ -1639,9 +1740,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     editing,
     onFocus,
     onEnter,
-    fieldProjection,
-    determineNavigationAxis,
-    determineNavigationDelta
+    fieldProjection
   ]);
   const extension = (0, import_react7.useMemo)(() => {
     if (!fieldProjection) {
@@ -1655,6 +1754,37 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
         }
       })
     ];
+    const format = fieldProjection.props.format;
+    if (format === import_echo_schema7.FormatEnum.SingleSelect || format === import_echo_schema7.FormatEnum.MultiSelect) {
+      extension2.push((0, import_react_ui_editor.createMarkdownExtensions)({
+        themeMode
+      }));
+      const options = fieldProjection.props.options || [];
+      const mode = format === import_echo_schema7.FormatEnum.SingleSelect ? "single-select" : "multi-select";
+      extension2.push((0, import_react_ui_tag_picker.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 import_echo_schema7.FormatEnum.Ref: {
@@ -1690,11 +1820,49 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     modals,
     editing,
     fieldProjection,
-    handleClose
+    handleClose,
+    themeMode
   ]);
   const getCellContent = (0, import_react7.useCallback)(() => {
     if (model && editing) {
-      const value = model.getCellData((0, import_react_ui_grid4.parseCellIndex)(editing.index));
+      const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+      const { col } = cell;
+      const field = model.projection.view.fields[col];
+      const fieldProjection2 = model.projection.getFieldProjection(field.id);
+      if (fieldProjection2?.props.format === import_echo_schema7.FormatEnum.SingleSelect || fieldProjection2?.props.format === import_echo_schema7.FormatEnum.MultiSelect) {
+        const value2 = model.getCellData(cell);
+        if (value2 !== void 0) {
+          const options = fieldProjection2.props.options || [];
+          if (fieldProjection2.props.format === import_echo_schema7.FormatEnum.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 (0, import_react_ui_tag_picker.createLinks)(tagItems);
+          } else {
+            const option = options.find((o) => o.id === value2);
+            if (option) {
+              const tagItem = {
+                id: value2,
+                label: option.title,
+                hue: option.color
+              };
+              return (0, import_react_ui_tag_picker.createLinks)([
+                tagItem
+              ]);
+            }
+          }
+        }
+        return "";
+      }
+      const value = model.getCellData(cell);
       return value !== void 0 ? String(value) : "";
     }
   }, [
@@ -1737,26 +1905,37 @@ var blockEndLine = "[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inlin
 var TableRoot = ({ children, role }) => {
   return /* @__PURE__ */ import_react.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme.mx)("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: (0, import_react_ui_theme.mx)("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__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention, onRowClicked }, forwardedRef) => {
+var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention, onRowClick }, forwardedRef) => {
   const [dxGrid, setDxGrid] = (0, import_react.useState)(null);
   const { hasAttention } = (0, import_react_ui_attention.useAttention)(model?.id ?? "table");
   const { t } = (0, import_react_ui.useTranslation)(translationKey);
   const modals = (0, import_react.useMemo)(() => new ModalController(), []);
-  const frozen = (0, import_react.useMemo)(() => ({
-    frozenRowsStart: 1,
-    frozenColsStart: model?.features.selection ? 1 : 0,
-    frozenColsEnd: 1
-  }), [
+  const frozen = (0, import_react.useMemo)(() => {
+    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
   ]);
+  (0, import_react.useEffect)(() => {
+    if (!presentation || !dxGrid) {
+      return;
+    }
+    dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
+  }, [
+    presentation,
+    dxGrid
+  ]);
   (0, import_react.useImperativeHandle)(forwardedRef, () => {
     if (!presentation || !dxGrid) {
       return {};
     }
-    dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
     return {
       update: (cell) => {
         if (cell) {
@@ -1772,11 +1951,14 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     dxGrid
   ]);
   const handleGridClick = (0, import_react.useCallback)((event) => {
-    if (onRowClicked) {
-      const rowIndex = (0, import_util.safeParseInt)(event.target.ariaRowIndex ?? "");
-      if (rowIndex != null) {
+    const rowIndex = (0, import_util.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) {
@@ -1919,7 +2101,7 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
       const space = model.space;
       (0, import_invariant.invariant)(space, void 0, {
         F: __dxlog_file4,
-        L: 284,
+        L: 312,
         S: void 0,
         A: [
           "space",
@@ -1970,16 +2152,17 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     onFocus: handleFocus,
     onQuery: handleQuery
   }), /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Content, {
-    onWheelCapture: handleWheel,
     className: (0, import_react_ui_theme.mx)("[--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__ */ import_react.default.createElement(RowActionsMenu, {
     model,
@@ -1991,10 +2174,10 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     model,
     modals,
     onNewColumn: handleNewColumn
-  }), /* @__PURE__ */ import_react.default.createElement(RefPanel, {
+  }), /* @__PURE__ */ import_react.default.createElement(CreateRefPanel, {
     model,
     modals
-  }), /* @__PURE__ */ import_react.default.createElement(CreateRefPanel, {
+  }), /* @__PURE__ */ import_react.default.createElement(RefPanel, {
     model,
     modals
   }));
@@ -2003,7 +2186,7 @@ var Table = {
   Root: TableRoot,
   Main: TableMain
 };
-var useTableModel = ({ objects, table, projection, features, onSelectionChanged, rowActions, onRowAction, ...props }) => {
+var useTableModel = ({ table, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
   const [model, setModel] = (0, import_react9.useState)();
   (0, import_react9.useEffect)(() => {
     if (!table || !projection) {
@@ -2036,12 +2219,12 @@ var useTableModel = ({ objects, table, projection, features, onSelectionChanged,
     rowActions
   ]);
   (0, import_react9.useEffect)(() => {
-    if (objects) {
-      model?.setRows(objects);
+    if (rows) {
+      model?.setRows(rows);
     }
   }, [
     model,
-    objects
+    rows
   ]);
   const { select, clear } = (0, import_react_ui_attention2.useSelectionActions)([
     table?.id,
@@ -2068,32 +2251,45 @@ var useTableModel = ({ objects, table, projection, features, onSelectionChanged,
   ]);
   return model;
 };
-var DynamicTable = ({ data, properties, classNames, tableName = "com.example/dynamic_table", onRowClicked, rowActions, onRowAction }) => {
-  const { table, viewProjection } = (0, import_react8.useMemo)(() => {
-    return makeDynamicTable(tableName, properties);
+var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
+  const { table, projection } = (0, import_react8.useMemo)(() => {
+    const props2 = getBaseSchems({
+      typename: name,
+      properties,
+      jsonSchema,
+      schema
+    });
+    return makeDynamicTable({
+      ...props2,
+      properties
+    });
   }, [
-    tableName,
-    properties
+    name,
+    properties,
+    schema,
+    jsonSchema
   ]);
   const tableRef = (0, import_react8.useRef)(null);
   const handleCellUpdate = (0, import_react8.useCallback)((cell) => {
     tableRef.current?.update?.(cell);
   }, []);
-  const handleRowOrderChanged = (0, import_react8.useCallback)(() => {
+  const handleRowOrderChange = (0, import_react8.useCallback)(() => {
     tableRef.current?.update?.();
   }, []);
-  const features = (0, import_react8.useMemo)(() => ({
-    selection: false,
+  const features = (0, import_react_ui8.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 = (0, import_react8.useMemo)(() => {
@@ -2104,15 +2300,17 @@ var DynamicTable = ({ data, properties, classNames, tableName = "com.example/dyn
     model
   ]);
   return /* @__PURE__ */ import_react8.default.createElement("div", {
+    role: "none",
     className: (0, import_react_ui_theme3.mx)("is-full bs-full grow grid", classNames)
   }, /* @__PURE__ */ import_react8.default.createElement("div", {
+    role: "none",
     className: "grid min-bs-0 overflow-hidden"
   }, /* @__PURE__ */ import_react8.default.createElement(Table.Root, null, /* @__PURE__ */ import_react8.default.createElement(Table.Main, {
     ref: tableRef,
     model,
     presentation,
-    onRowClicked,
-    ignoreAttention: true
+    ignoreAttention: true,
+    onRowClick
   }))));
 };
 var createTableToolbarActions = (state) => {
@@ -2186,18 +2384,20 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
 0 && (module.exports = {
   BUTTON_IDENTIFIERS,
   CONTROL_IDENTIFIERS,
+  CheckboxStory,
   DynamicTable,
   ModalController,
+  SwitchStory,
   Table,
   TableModel,
   TablePresentation,
   TableSchema,
   TableToolbar,
   TableType,
+  cellClassesForRowSelection,
+  getBaseSchems,
   initializeTable,
   makeDynamicTable,
-  renderCheckbox,
-  renderSwitch,
   tableButtons,
   tableControls,
   touch,