@dxos/react-ui-table 0.6.14-staging.e15392e → 0.7.1-staging.599df14

package/dist/lib/node/index.cjs

@@ -0,0 +1,1380 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var node_exports = {};
+__export(node_exports, {
+  Table: () => Table,
+  TableType: () => import_chunk_32IGMRME.TableType,
+  Toolbar: () => Toolbar,
+  fromGridCell: () => fromGridCell,
+  initializeTable: () => initializeTable,
+  tableButtons: () => tableButtons,
+  toGridCell: () => toGridCell,
+  touch: () => touch,
+  translations: () => translations_default,
+  useTableModel: () => useTableModel,
+  useToolbarContext: () => useToolbarContext
+});
+module.exports = __toCommonJS(node_exports);
+var import_chunk_32IGMRME = require("./chunk-32IGMRME.cjs");
+var import_react = __toESM(require("react"));
+var import_echo_schema = require("@dxos/echo-schema");
+var import_invariant = require("@dxos/invariant");
+var import_echo = require("@dxos/react-client/echo");
+var import_react_ui_attention = require("@dxos/react-ui-attention");
+var import_react_ui_grid = require("@dxos/react-ui-grid");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_util = require("@dxos/util");
+var import_react2 = __toESM(require("react"));
+var import_react_ui = require("@dxos/react-ui");
+var import_react3 = __toESM(require("react"));
+var import_echo2 = require("@dxos/react-client/echo");
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_form = require("@dxos/react-ui-form");
+var import_react4 = __toESM(require("react"));
+var import_react_ui3 = require("@dxos/react-ui");
+var import_react5 = __toESM(require("react"));
+var import_echo_schema2 = require("@dxos/echo-schema");
+var import_invariant2 = require("@dxos/invariant");
+var import_react_ui_grid2 = require("@dxos/react-ui-grid");
+var import_autocomplete = require("@codemirror/autocomplete");
+var import_view = require("@codemirror/view");
+var import_echo_schema3 = require("@dxos/echo-schema");
+var import_log = require("@dxos/log");
+var import_react_client = require("@dxos/react-client");
+var import_echo3 = require("@dxos/react-client/echo");
+var import_schema = require("@dxos/schema");
+var import_react_context = require("@radix-ui/react-context");
+var import_react6 = __toESM(require("react"));
+var import_react_ui4 = require("@dxos/react-ui");
+var import_react7 = __toESM(require("react"));
+var import_react_ui5 = require("@dxos/react-ui");
+var import_react8 = require("react");
+var import_signals_core = require("@preact/signals-core");
+var import_lodash = __toESM(require("lodash.orderby"));
+var import_context = require("@dxos/context");
+var import_echo_schema4 = require("@dxos/echo-schema");
+var import_invariant3 = require("@dxos/invariant");
+var import_react_client2 = require("@dxos/react-client");
+var import_react_ui_form2 = require("@dxos/react-ui-form");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_schema2 = require("@dxos/schema");
+var import_signals_core2 = require("@preact/signals-core");
+var import_signals_core3 = require("@preact/signals-core");
+var import_context2 = require("@dxos/context");
+var translationKey = "table";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "object placeholder": "New table",
+        "create object label": "Create table",
+        "table name placeholder": "Table name",
+        "settings title": "Table settings",
+        "table schema label": "Schema",
+        "new schema": "New schema",
+        "continue label": "Continue",
+        "create stack section label": "Create table",
+        "add row": "Add row",
+        "create comment": "Create thread",
+        "column action sort descending": "Sort Descending",
+        "column action sort ascending": "Sort Ascending",
+        "column action clear sorting": "Clear Sorting",
+        "column action settings": "Column Settings",
+        "column action delete": "Delete Column",
+        "delete row label": "Delete row",
+        "bulk delete row label": "Delete selected rows",
+        "column deleted label": "Column deleted",
+        "new column button label": "Create column"
+      }
+    }
+  }
+];
+var ColumnActionsMenu = ({ model }) => {
+  const { t } = (0, import_react_ui.useTranslation)(translationKey);
+  const state = model?.modalController.state.value;
+  if (!model || state?.type !== "column") {
+    return null;
+  }
+  const currentSort = model.sorting;
+  const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
+  return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Root, {
+    modal: false,
+    open: state?.type === "column",
+    onOpenChange: model.modalController.close
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Content, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Item, {
+    onClick: () => model.setSort(state.fieldId, "desc")
+  }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Item, {
+    onClick: () => model.setSort(state.fieldId, "asc")
+  }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Item, {
+    onClick: () => model.clearSort()
+  }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Item, {
+    onClick: () => model.deleteColumn(state.fieldId)
+  }, t("column action delete")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Item, {
+    onClick: () => model.modalController.openColumnSettings()
+  }, t("column action settings"))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Arrow, null))));
+};
+var ColumnSettings = ({ model }) => {
+  const [newField, setNewField] = (0, import_react3.useState)();
+  const state = model?.modalController.state.value;
+  const space = (0, import_echo2.getSpace)(model?.table);
+  (0, import_react3.useEffect)(() => {
+    if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
+      setNewField(model.projection.createFieldProjection());
+    } else {
+      setNewField(void 0);
+    }
+  }, [
+    model?.projection,
+    state
+  ]);
+  const existingField = (0, import_react3.useMemo)(() => {
+    if (state?.type === "columnSettings") {
+      const { mode } = state;
+      if (mode.type === "edit") {
+        return model?.table?.view?.fields.find((f) => f.id === mode.fieldId);
+      }
+    }
+    return void 0;
+  }, [
+    model?.table?.view?.fields,
+    state
+  ]);
+  const field = existingField ?? newField;
+  const handleClose = (0, import_react3.useCallback)(() => {
+    model?.modalController.close();
+  }, [
+    model?.modalController
+  ]);
+  const handleCancel = (0, import_react3.useCallback)(() => {
+    if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
+      model?.projection?.deleteFieldProjection(newField.id);
+    }
+  }, [
+    model?.projection,
+    state,
+    newField
+  ]);
+  if (!model?.table?.view || !model.projection || !field) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Root, {
+    modal: false,
+    open: state?.type === "columnSettings"
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Portal, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Content, {
+    classNames: "md:is-64"
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui_form.FieldEditor, {
+    view: model.table.view,
+    projection: model.projection,
+    field,
+    registry: space?.db.schemaRegistry,
+    onClose: handleClose,
+    onCancel: handleCancel
+  })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Arrow, null))));
+};
+var RowActionsMenu = ({ model }) => {
+  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
+  const state = model.modalController.state.value;
+  const hasSelection = model.selection.hasSelection.value;
+  if (state?.type !== "row") {
+    return null;
+  }
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Root, {
+    modal: false,
+    open: true,
+    onOpenChange: model.modalController.close
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Content, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Item, {
+    onClick: () => model.deleteRow(state.rowIndex)
+  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Arrow, null)));
+};
+var completion = ({ onQuery, onMatch }) => {
+  return [
+    import_view.EditorView.theme({
+      ".cm-completionDialog": {
+        width: "var(--dx-gridCellWidth)"
+      }
+    }),
+    (0, import_autocomplete.autocompletion)({
+      icons: false,
+      activateOnTyping: true,
+      override: [
+        async (context) => {
+          const text = context.state.doc.toString();
+          return {
+            from: 0,
+            options: await onQuery(text)
+          };
+        }
+      ],
+      // TODO(burdon): Consts from grid (to line-up with grid).
+      tooltipClass: () => "cm-completionDialog !mt-[8px] !-ml-[4px] [&>ul]:!max-h-[264px]",
+      optionClass: () => "flex h-[33px] items-center"
+    }),
+    // Check for accepted completion metadata in the transaction.
+    import_view.EditorView.updateListener.of((update) => {
+      update.transactions.forEach((tr) => {
+        const completion2 = tr.annotation(import_autocomplete.pickedCompletion);
+        if (completion2) {
+          onMatch(completion2.data);
+        }
+      });
+    })
+  ];
+};
+var fromGridCell = ({ col, row }) => {
+  return `${col},${row}`;
+};
+var toGridCell = (cell) => {
+  const [col, row] = cell.split(",").map(Number);
+  return {
+    row,
+    col
+  };
+};
+var touch = (value) => value;
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
+var initializeTable = ({ space, table }) => {
+  import_log.log.info("initializeTable", {
+    table
+  }, {
+    F: __dxlog_file,
+    L: 26,
+    S: void 0,
+    C: (f, a) => f(...a)
+  });
+  const ContactSchema = (0, import_echo_schema3.TypedObject)({
+    typename: `example.com/type/${import_react_client.PublicKey.random().truncate()}`,
+    version: "0.1.0"
+  })({
+    name: import_echo_schema3.S.optional(import_echo_schema3.S.String).annotations({
+      [import_echo_schema3.AST.TitleAnnotationId]: "Name"
+    }),
+    email: import_echo_schema3.S.optional(import_echo_schema3.Format.Email),
+    salary: import_echo_schema3.S.optional(import_echo_schema3.Format.Currency()).annotations({
+      [import_echo_schema3.AST.TitleAnnotationId]: "Salary"
+    })
+  });
+  const contactSchema = space.db.schemaRegistry.addSchema(ContactSchema);
+  table.view = (0, import_schema.createView)({
+    name: "Test",
+    typename: contactSchema.typename,
+    jsonSchema: contactSchema.jsonSchema,
+    fields: [
+      "name",
+      "email",
+      "salary"
+    ]
+  });
+  const projection = new import_schema.ViewProjection(contactSchema, table.view);
+  projection.setFieldProjection({
+    field: {
+      id: table.view.fields[2].id,
+      path: "salary",
+      size: 150
+    }
+  });
+  projection.setFieldProjection({
+    field: {
+      id: (0, import_schema.createFieldId)(),
+      path: "manager",
+      referencePath: "name"
+    },
+    props: {
+      property: "manager",
+      type: import_echo_schema3.TypeEnum.Ref,
+      format: import_echo_schema3.FormatEnum.Ref,
+      referenceSchema: contactSchema.typename,
+      title: "Manager"
+    }
+  });
+  space.db.add((0, import_echo3.create)(contactSchema, {}));
+  return contactSchema;
+};
+var TABLE_ATTRS = {
+  columnSettings: "data-table-column-settings-button",
+  rowMenu: "data-table-row-menu-button",
+  newColumn: "data-table-new-column-button"
+};
+var ICONS = {
+  columnSettings: "ph--caret-down--regular",
+  rowMenu: "ph--dots-three--regular",
+  newColumn: "ph--plus--regular"
+};
+var createButtonHtml = ({ button, value = "", disabled = false }) => {
+  const buttonClasses = "ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2";
+  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
+};
+var tableButtons = {
+  columnSettings: {
+    attr: TABLE_ATTRS.columnSettings,
+    icon: ICONS.columnSettings,
+    render: ({ fieldId }) => createButtonHtml({
+      button: "columnSettings",
+      value: fieldId
+    })
+  },
+  rowMenu: {
+    attr: TABLE_ATTRS.rowMenu,
+    icon: ICONS.rowMenu,
+    render: ({ rowIndex }) => createButtonHtml({
+      button: "rowMenu",
+      value: rowIndex.toString()
+    })
+  },
+  addColumn: {
+    attr: TABLE_ATTRS.newColumn,
+    icon: ICONS.newColumn,
+    render: ({ disabled } = {}) => createButtonHtml({
+      button: "newColumn",
+      disabled
+    })
+  }
+};
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
+  const { editing } = (0, import_react_ui_grid2.useGridContext)("TableCellEditor", __gridScope);
+  const fieldProjection = (0, import_react5.useMemo)(() => {
+    if (!model || !editing) {
+      return;
+    }
+    const { col } = toGridCell(editing.index);
+    const field = model.projection.view.fields[col];
+    const fieldProjection2 = model.projection.getFieldProjection(field.id);
+    (0, import_invariant2.invariant)(fieldProjection2, void 0, {
+      F: __dxlog_file2,
+      L: 49,
+      S: void 0,
+      A: [
+        "fieldProjection",
+        ""
+      ]
+    });
+    return fieldProjection2;
+  }, [
+    model,
+    editing
+  ]);
+  const handleClose = (0, import_react5.useCallback)((value, event) => {
+    if (!model || !editing || !fieldProjection) {
+      return;
+    }
+    const cell = toGridCell(editing.index);
+    onEnter?.(cell);
+    if (event && onFocus) {
+      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+    }
+  }, [
+    model,
+    editing,
+    onFocus,
+    onEnter,
+    fieldProjection,
+    determineNavigationAxis,
+    determineNavigationDelta
+  ]);
+  const handleBlur = (0, import_react5.useCallback)((value) => {
+    if (!model || !editing) {
+      return;
+    }
+    const cell = toGridCell(editing.index);
+    if (value !== void 0) {
+      model.setCellData(cell, value);
+    }
+  }, [
+    model,
+    editing
+  ]);
+  const extension = (0, import_react5.useMemo)(() => {
+    if (!fieldProjection) {
+      return [];
+    }
+    const extension2 = [
+      (0, import_react_ui_grid2.editorKeys)({
+        onClose: handleClose,
+        ...editing?.initialContent && {
+          onNav: handleClose
+        }
+      })
+    ];
+    if (onQuery) {
+      switch (fieldProjection.props.format) {
+        case import_echo_schema2.FormatEnum.Ref: {
+          extension2.push([
+            completion({
+              onQuery: (text) => onQuery(fieldProjection, text),
+              onMatch: (data) => {
+                if (model && editing) {
+                  const cell = toGridCell(editing.index);
+                  model.setCellData(cell, data);
+                  onEnter?.(cell);
+                  onFocus?.();
+                }
+              }
+            })
+          ]);
+          break;
+        }
+      }
+    }
+    return extension2;
+  }, [
+    model,
+    editing,
+    fieldProjection,
+    handleClose
+  ]);
+  const getCellContent = (0, import_react5.useCallback)(() => {
+    if (model && editing) {
+      const value = model.getCellData(toGridCell(editing.index));
+      return value !== void 0 ? String(value) : "";
+    }
+  }, [
+    model,
+    editing
+  ]);
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui_grid2.GridCellEditor, {
+    extension,
+    getCellContent,
+    onBlur: handleBlur
+  });
+};
+var determineNavigationAxis = ({ key }) => {
+  switch (key) {
+    case "ArrowUp":
+    case "ArrowDown":
+    case "Enter": {
+      return "row";
+    }
+    case "ArrowLeft":
+    case "ArrowRight":
+    case "Tab":
+      return "col";
+  }
+};
+var determineNavigationDelta = ({ key, shift }) => {
+  switch (key) {
+    case "ArrowUp":
+    case "ArrowLeft":
+      return -1;
+    case "ArrowDown":
+    case "ArrowRight":
+      return 1;
+  }
+  return shift ? -1 : 1;
+};
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+var inlineEndLine = "[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator";
+var blockEndLine = "[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator";
+var frozen = {
+  frozenRowsStart: 1,
+  frozenColsStart: 1,
+  frozenColsEnd: 1
+};
+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-max" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-max [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-max")
+  }, children);
+};
+var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, ignoreAttention }, forwardedRef) => {
+  const [dxGrid, setDxGrid] = (0, import_react.useState)(null);
+  const { hasAttention } = (0, import_react_ui_attention.useAttention)(model?.table ? (0, import_echo.fullyQualifiedId)(model.table) : "table");
+  (0, import_react.useImperativeHandle)(forwardedRef, () => {
+    if (!model || !dxGrid) {
+      return {};
+    }
+    dxGrid.getCells = model.getCells.bind(model);
+    return {
+      update: (cell) => {
+        if (cell) {
+          dxGrid.updateIfWithinBounds(cell);
+        } else {
+          dxGrid.updateCells(true);
+        }
+      }
+    };
+  }, [
+    model,
+    dxGrid
+  ]);
+  const handleFocus = (increment, delta) => {
+    dxGrid?.refocus(increment, delta);
+  };
+  const handleEnter = (0, import_react.useCallback)((cell) => {
+    if (model && cell.row === model.getRowCount() - 1) {
+      model.insertRow(cell.row);
+    }
+  }, [
+    model
+  ]);
+  const handleKeyDown = (0, import_react.useCallback)((event) => {
+    const cell = (0, import_react_ui_grid.closestCell)(event.target);
+    if (!model || !cell) {
+      return;
+    }
+    switch (event.key) {
+      case "Backspace":
+      case "Delete": {
+        model.setCellData(cell, void 0);
+        break;
+      }
+    }
+  }, [
+    model
+  ]);
+  const handleAxisResize = (0, import_react.useCallback)((event) => {
+    if (event.axis === "col") {
+      const columnIndex = parseInt(event.index, 10);
+      model?.setColumnWidth(columnIndex, event.size);
+    }
+  }, [
+    model
+  ]);
+  const handleWheel = (0, import_react.useCallback)((event) => {
+    if (!ignoreAttention && !hasAttention) {
+      event.stopPropagation();
+    }
+  }, [
+    hasAttention,
+    ignoreAttention
+  ]);
+  const handleQuery = (0, import_react.useCallback)(async ({ field, props }, _text) => {
+    if (model && props.referenceSchema && field.referencePath) {
+      const space = (0, import_echo.getSpace)(model.table);
+      (0, import_invariant.invariant)(space, void 0, {
+        F: __dxlog_file3,
+        L: 158,
+        S: void 0,
+        A: [
+          "space",
+          ""
+        ]
+      });
+      const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
+      if (schema) {
+        const { objects } = await space.db.query(import_echo.Filter.schema(schema)).run();
+        return objects.map((obj) => {
+          const value = (0, import_echo_schema.getValue)(obj, field.referencePath);
+          if (!value || typeof value !== "string") {
+            return void 0;
+          }
+          return {
+            label: value,
+            data: obj
+          };
+        }).filter(import_util.isNotFalsy);
+      }
+    }
+    return [];
+  }, [
+    model
+  ]);
+  if (!model) {
+    return /* @__PURE__ */ import_react.default.createElement("span", {
+      role: "none",
+      className: "attention-surface"
+    });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Root, {
+    id: model.table.id ?? "table-grid"
+  }, /* @__PURE__ */ import_react.default.createElement(TableCellEditor, {
+    model,
+    onEnter: handleEnter,
+    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,
+    columns: model.columnMeta.value,
+    limitRows: model.getRowCount() ?? 0,
+    limitColumns: model.table.view?.fields?.length ?? 0,
+    onAxisResize: handleAxisResize,
+    onClick: model?.handleGridClick,
+    onKeyDown: handleKeyDown,
+    overscroll: "trap",
+    ref: setDxGrid
+  })), /* @__PURE__ */ import_react.default.createElement(RowActionsMenu, {
+    model
+  }), /* @__PURE__ */ import_react.default.createElement(ColumnActionsMenu, {
+    model
+  }), /* @__PURE__ */ import_react.default.createElement(ColumnSettings, {
+    model
+  }));
+});
+var Table = {
+  Root: TableRoot,
+  Main: TableMain
+};
+var buttonStyles = "min-bs-0 p-2";
+var tooltipProps = {
+  side: "top",
+  classNames: "z-10"
+};
+var ToolbarSeparator = () => /* @__PURE__ */ import_react7.default.createElement("div", {
+  role: "separator",
+  className: "grow"
+});
+var ToolbarButton = ({ icon, children, ...props }) => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tooltip.Root, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Toolbar.Button, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Icon, {
+    icon,
+    size: 5
+  }), /* @__PURE__ */ import_react7.default.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tooltip.Portal, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tooltip.Content, tooltipProps, children, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tooltip.Arrow, null))));
+};
+var [ToolbarContextProvider, useToolbarContext] = (0, import_react_context.createContext)("Toolbar");
+var ToolbarRoot = ({ classNames, children, onAction }) => {
+  return /* @__PURE__ */ import_react6.default.createElement(ToolbarContextProvider, {
+    onAction
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui4.Toolbar.Root, {
+    classNames: [
+      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1 attention-surface",
+      classNames
+    ]
+  }, children));
+};
+var Editing = () => {
+  const { onAction } = useToolbarContext("Editing");
+  const { t } = (0, import_react_ui4.useTranslation)(translationKey);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(ToolbarButton, {
+    value: "add-row",
+    icon: "ph--plus--regular",
+    "data-testid": "table.toolbar.add-row",
+    onClick: () => onAction?.({
+      type: "add-row"
+    })
+  }, t("add row")));
+};
+var Actions = () => {
+  const { onAction } = useToolbarContext("Actions");
+  const { t } = (0, import_react_ui4.useTranslation)(translationKey);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(ToolbarButton, {
+    value: "comment",
+    icon: "ph--chat-text--regular",
+    "data-testid": "table.toolbar.comment",
+    onClick: () => onAction?.({
+      type: "comment"
+    })
+  }, t("create comment")));
+};
+var Toolbar = {
+  Root: ToolbarRoot,
+  Editing,
+  Actions,
+  Separator: ToolbarSeparator
+};
+var ModalController = class {
+  constructor() {
+    this._state = (0, import_signals_core2.signal)({
+      type: "closed"
+    });
+    this._triggerRef = {
+      current: null
+    };
+    this.handleClick = (event) => {
+      const target = event.target;
+      const rowButton = target.closest(`button[${tableButtons.rowMenu.attr}]`);
+      if (rowButton) {
+        this._triggerRef.current = rowButton;
+        this._state.value = {
+          type: "row",
+          rowIndex: Number(rowButton.getAttribute(tableButtons.rowMenu.attr))
+        };
+        return true;
+      }
+      const columnButton = target.closest(`button[${tableButtons.columnSettings.attr}]`);
+      if (columnButton) {
+        const fieldId = columnButton.getAttribute(tableButtons.columnSettings.attr);
+        this._triggerRef.current = columnButton;
+        this._state.value = {
+          type: "column",
+          fieldId
+        };
+        return true;
+      }
+      const addColumnButton = target.closest(`button[${tableButtons.addColumn.attr}]`);
+      if (addColumnButton) {
+        this._triggerRef.current = addColumnButton;
+        this._state.value = {
+          type: "columnSettings",
+          mode: {
+            type: "create"
+          }
+        };
+        return true;
+      }
+      return false;
+    };
+    this.openColumnSettings = () => {
+      if (this._state.value.type === "column") {
+        const fieldId = this._state.value.fieldId;
+        requestAnimationFrame(() => {
+          this._state.value = {
+            type: "columnSettings",
+            mode: {
+              type: "edit",
+              fieldId
+            }
+          };
+        });
+      }
+    };
+    this.close = () => {
+      this._state.value = {
+        type: "closed"
+      };
+    };
+  }
+  get state() {
+    return this._state;
+  }
+  get trigger() {
+    return this._triggerRef;
+  }
+};
+var SelectionModel = class extends import_context2.Resource {
+  constructor(_rows, _onSelectionChanged) {
+    super();
+    this._rows = _rows;
+    this._onSelectionChanged = _onSelectionChanged;
+    this._selection = (0, import_signals_core3.signal)(/* @__PURE__ */ new Set());
+    this._validSelectedIds = (0, import_signals_core3.computed)(() => {
+      const rows = this._rows.value;
+      if (!rows) {
+        return /* @__PURE__ */ new Set();
+      }
+      const validIds = new Set(rows.map((row) => row.id));
+      return new Set([
+        ...this._selection.value
+      ].filter((id) => validIds.has(id)));
+    });
+    this._hasSelection = (0, import_signals_core3.computed)(() => this._validSelectedIds.value.size > 0);
+    this._allSelected = (0, import_signals_core3.computed)(() => {
+      const rows = this._rows.value;
+      if (rows.length === 0) {
+        return false;
+      }
+      return rows.every((row) => this._selection.value.has(row.id));
+    });
+    this.getSelectedRows = () => {
+      const selectedIds = this._validSelectedIds.value;
+      return this._rows.value.filter((row) => selectedIds.has(row.id));
+    };
+    this.isRowIndexSelected = (rowIndex) => {
+      const row = this._rows.value[rowIndex];
+      return this._selection.value.has(row.id);
+    };
+    this.isObjectSelected = (object) => {
+      return this._selection.value.has(object.id);
+    };
+    this.toggleSelectionForRowIndex = (rowIndex) => {
+      const row = this._rows.value[rowIndex];
+      const newSelection = new Set(this._selection.value);
+      if (newSelection.has(row.id)) {
+        newSelection.delete(row.id);
+      } else {
+        newSelection.add(row.id);
+      }
+      this._selection.value = newSelection;
+    };
+    this.setSelection = (mode) => {
+      this._selection.value = mode === "all" ? new Set(this._rows.value.map((row) => row.id)) : /* @__PURE__ */ new Set();
+    };
+  }
+  async _open() {
+    const selectionWatcher = (0, import_signals_core3.effect)(() => {
+      touch(this._selection.value);
+      this._onSelectionChanged?.();
+    });
+    this._ctx.onDispose(selectionWatcher);
+  }
+  //
+  // Getters
+  //
+  get selection() {
+    return this._selection;
+  }
+  get hasSelection() {
+    return this._hasSelection;
+  }
+  get allRowsSeleted() {
+    return this._allSelected;
+  }
+};
+var checkboxAttributes = {
+  checkbox: "data-table-checkbox",
+  header: "data-table-header"
+};
+var renderCheckbox = ({ rowIndex, header = false, checked = false, disabled = false }) => {
+  const baseClasses = "absolute inset-block-[6px] inline-end-[6px] ch-checkbox";
+  const { attributes } = tableControls.checkbox;
+  return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ""} ${checked ? "checked" : ""} ${disabled ? "disabled" : ""}/>`;
+};
+var tableControls = {
+  checkbox: {
+    attributes: checkboxAttributes,
+    render: renderCheckbox
+  }
+};
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
+var TableModel = class extends import_context.Resource {
+  constructor({ table, projection, sorting = [], pinnedRows = {
+    top: [],
+    bottom: []
+  }, onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChanged }) {
+    super();
+    this.id = `table-model-${import_react_client2.PublicKey.random().truncate()}`;
+    this._visibleRange = (0, import_signals_core.signal)({
+      start: {
+        row: 0,
+        col: 0
+      },
+      end: {
+        row: 0,
+        col: 0
+      }
+    });
+    this._displayToDataIndex = /* @__PURE__ */ new Map();
+    this._sorting = (0, import_signals_core.signal)(void 0);
+    this._rows = (0, import_signals_core.signal)([]);
+    this._modalController = new ModalController();
+    this.getCells = (range, plane) => {
+      switch (plane) {
+        case "grid": {
+          this._visibleRange.value = range;
+          return this.getMainGridCells(range);
+        }
+        case "frozenRowsStart": {
+          return this.getHeaderCells(range);
+        }
+        case "frozenColsStart": {
+          return this.getSelectionColumnCells(range);
+        }
+        case "frozenColsEnd": {
+          return this.getActionColumnCells(range);
+        }
+        case "fixedStartStart": {
+          return this.getSelectAllCell();
+        }
+        case "fixedStartEnd": {
+          return this.getNewColumnCell();
+        }
+        default: {
+          return {};
+        }
+      }
+    };
+    this.getMainGridCells = (range) => {
+      const values = {};
+      const fields = this._table.view?.fields ?? [];
+      const addCell = (obj, field, colIndex, displayIndex) => {
+        const { props } = this._projection.getFieldProjection(field.id);
+        const value = {
+          get value() {
+            const value2 = (0, import_echo_schema4.getValue)(obj, field.path);
+            if (value2 == null) {
+              return "";
+            }
+            switch (props.format) {
+              case import_echo_schema4.FormatEnum.Ref: {
+                if (!field.referencePath) {
+                  return "";
+                }
+                return (0, import_echo_schema4.getValue)(value2, field.referencePath);
+              }
+              default: {
+                return (0, import_react_ui_form2.formatForDisplay)({
+                  type: props.type,
+                  format: props.format,
+                  value: value2
+                });
+              }
+            }
+          }
+        };
+        const classes = [];
+        const formatClasses = (0, import_react_ui_form2.cellClassesForFieldType)({
+          type: props.type,
+          format: props.format
+        });
+        if (formatClasses) {
+          classes.push(formatClasses);
+        }
+        const rowSelectionClasses = (0, import_react_ui_form2.cellClassesForRowSelection)(this._selection.isObjectSelected(obj));
+        if (rowSelectionClasses) {
+          classes.push(rowSelectionClasses);
+        }
+        if (classes.length > 0) {
+          value.className = (0, import_react_ui_theme2.mx)(classes.flat());
+        }
+        const idx = fromGridCell({
+          col: colIndex,
+          row: displayIndex
+        });
+        values[idx] = value;
+      };
+      for (let row = range.start.row; row <= range.end.row && row < this._sortedRows.value.length; row++) {
+        for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+          const field = fields[col];
+          if (!field) {
+            continue;
+          }
+          addCell(this._sortedRows.value[row], field, col, row);
+        }
+      }
+      return values;
+    };
+    this.getHeaderCells = (range) => {
+      const values = {};
+      const fields = this.table.view?.fields ?? [];
+      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+        const { field, props } = this._projection.getFieldProjection(fields[col].id);
+        values[fromGridCell({
+          col,
+          row: 0
+        })] = {
+          value: props.title ?? field.path,
+          readonly: true,
+          resizeHandle: "col",
+          accessoryHtml: tableButtons.columnSettings.render({
+            fieldId: field.id
+          })
+        };
+      }
+      return values;
+    };
+    this.getSelectionColumnCells = (range) => {
+      const values = {};
+      for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
+        const isSelected = this._selection.isRowIndexSelected(row);
+        const classes = (0, import_react_ui_form2.cellClassesForRowSelection)(isSelected);
+        values[fromGridCell({
+          col: 0,
+          row
+        })] = {
+          value: "",
+          readonly: true,
+          className: classes ? (0, import_react_ui_theme2.mx)(classes) : void 0,
+          accessoryHtml: tableControls.checkbox.render({
+            rowIndex: row,
+            checked: isSelected
+          })
+        };
+      }
+      return values;
+    };
+    this.getActionColumnCells = (range) => {
+      const values = {};
+      for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
+        const isSelected = this._selection.isRowIndexSelected(row);
+        const classes = (0, import_react_ui_form2.cellClassesForRowSelection)(isSelected);
+        values[fromGridCell({
+          col: 0,
+          row
+        })] = {
+          value: "",
+          readonly: true,
+          className: classes ? (0, import_react_ui_theme2.mx)(classes) : void 0,
+          accessoryHtml: tableButtons.rowMenu.render({
+            rowIndex: row
+          })
+        };
+      }
+      return values;
+    };
+    this.getSelectAllCell = () => {
+      return {
+        [fromGridCell({
+          col: 0,
+          row: 0
+        })]: {
+          value: "",
+          accessoryHtml: tableControls.checkbox.render({
+            rowIndex: 0,
+            header: true,
+            checked: this._selection.allRowsSeleted.value
+          }),
+          readonly: true
+        }
+      };
+    };
+    this.getNewColumnCell = () => {
+      return {
+        [fromGridCell({
+          col: 0,
+          row: 0
+        })]: {
+          value: "",
+          accessoryHtml: tableButtons.addColumn.render({
+            disabled: (this._table.view?.fields?.length ?? 0) >= import_schema2.VIEW_FIELD_LIMIT
+          }),
+          readonly: true
+        }
+      };
+    };
+    this.setRows = (obj) => {
+      this._rows.value = obj;
+    };
+    this.getRowCount = () => this._rows.value.length;
+    this.getColumnCount = () => this.table.view?.fields.length ?? 0;
+    this.insertRow = (rowIndex) => {
+      const row = rowIndex !== void 0 ? this._displayToDataIndex.get(rowIndex) ?? rowIndex : this._rows.value.length;
+      this._onInsertRow?.(row);
+    };
+    this.deleteRow = (rowIndex) => {
+      const row = this._displayToDataIndex.get(rowIndex) ?? rowIndex;
+      const obj = this._rows.value[row];
+      const objectsToDelete = [];
+      if (this._selection.hasSelection.value) {
+        const selectedRows = this._selection.getSelectedRows();
+        objectsToDelete.push(...selectedRows);
+      } else {
+        objectsToDelete.push(obj);
+      }
+      this._onDeleteRows?.(row, objectsToDelete);
+    };
+    this.getCellData = ({ col, row }) => {
+      const fields = this.table.view?.fields ?? [];
+      if (col < 0 || col >= fields.length) {
+        return void 0;
+      }
+      const field = fields[col];
+      const dataIndex = this._displayToDataIndex.get(row) ?? row;
+      const value = (0, import_echo_schema4.getValue)(this._rows.value[dataIndex], field.path);
+      if (value == null) {
+        return "";
+      }
+      const { props } = this._projection.getFieldProjection(field.id);
+      switch (props.format) {
+        case import_echo_schema4.FormatEnum.Ref: {
+          if (!field.referencePath) {
+            return "";
+          }
+          return (0, import_echo_schema4.getValue)(value, field.referencePath);
+        }
+        default: {
+          return (0, import_react_ui_form2.formatForEditing)({
+            type: props.type,
+            format: props.format,
+            value
+          });
+        }
+      }
+    };
+    this.setCellData = ({ col, row }, value) => {
+      const rowIdx = this._displayToDataIndex.get(row) ?? row;
+      const fields = this.table.view?.fields ?? [];
+      if (col < 0 || col >= fields.length) {
+        return;
+      }
+      const field = fields[col];
+      const { props } = this._projection.getFieldProjection(field.id);
+      switch (props.format) {
+        case import_echo_schema4.FormatEnum.Ref: {
+          (0, import_echo_schema4.setValue)(this._rows.value[rowIdx], field.path, value);
+          break;
+        }
+        default: {
+          (0, import_echo_schema4.setValue)(this._rows.value[rowIdx], field.path, (0, import_react_ui_form2.parseValue)({
+            type: props.type,
+            format: props.format,
+            value
+          }));
+          break;
+        }
+      }
+    };
+    this.handleGridClick = (event) => {
+      if (!this._modalController.handleClick(event)) {
+        const target = event.target;
+        const selectionCheckbox = target.closest(`input[${tableControls.checkbox.attributes.checkbox}]`);
+        if (selectionCheckbox) {
+          const isHeader = selectionCheckbox.hasAttribute(tableControls.checkbox.attributes.header);
+          if (isHeader) {
+            if (this._selection.allRowsSeleted.value) {
+              this._selection.setSelection("none");
+            } else {
+              this._selection.setSelection("all");
+            }
+          } else {
+            const rowIndex = Number(selectionCheckbox.getAttribute(tableControls.checkbox.attributes.checkbox));
+            this._selection.toggleSelectionForRowIndex(rowIndex);
+          }
+        }
+      }
+    };
+    this._table = table;
+    this._projection = projection;
+    this._sorting.value = sorting.at(0);
+    this._pinnedRows = pinnedRows;
+    this._onInsertRow = onInsertRow;
+    this._onDeleteRows = onDeleteRows;
+    this._onDeleteColumn = onDeleteColumn;
+    this._onCellUpdate = onCellUpdate;
+    this._onRowOrderChanged = onRowOrderChanged;
+  }
+  get table() {
+    return this._table;
+  }
+  get projection() {
+    return this._projection;
+  }
+  get pinnedRows() {
+    return this._pinnedRows;
+  }
+  get columnMeta() {
+    (0, import_invariant3.invariant)(this._columnMeta, void 0, {
+      F: __dxlog_file4,
+      L: 124,
+      S: this,
+      A: [
+        "this._columnMeta",
+        ""
+      ]
+    });
+    return this._columnMeta;
+  }
+  get sorting() {
+    return this._sorting.value;
+  }
+  get modalController() {
+    return this._modalController;
+  }
+  get selection() {
+    return this._selection;
+  }
+  //
+  // Initialisation
+  //
+  async _open() {
+    this.initializeColumnMeta();
+    this.initializeSorting();
+    this.initializeEffects();
+    this._selection = new SelectionModel(this._sortedRows, () => this._onRowOrderChanged?.());
+    await this._selection.open(this._ctx);
+  }
+  initializeColumnMeta() {
+    this._columnMeta = (0, import_signals_core.computed)(() => {
+      const fields = this._table.view?.fields ?? [];
+      const meta = Object.fromEntries(fields.map((field, index) => [
+        index,
+        {
+          size: field?.size ?? 256,
+          resizeable: true
+        }
+      ]));
+      return {
+        grid: meta,
+        frozenColsStart: {
+          0: {
+            size: 30,
+            resizeable: false
+          }
+        },
+        frozenColsEnd: {
+          0: {
+            size: 40,
+            resizeable: false
+          }
+        }
+      };
+    });
+  }
+  initializeSorting() {
+    this._sortedRows = (0, import_signals_core.computed)(() => {
+      this._displayToDataIndex.clear();
+      const sort = this._sorting.value;
+      if (!sort) {
+        return this._rows.value;
+      }
+      const field = this._table.view?.fields.find((field2) => field2.id === sort.fieldId);
+      if (!field) {
+        return this._rows.value;
+      }
+      const dataWithIndices = this._rows.value.map((item, index) => {
+        const value = (0, import_echo_schema4.getValue)(item, field.path);
+        return {
+          item,
+          index,
+          value,
+          isEmpty: value == null || value === ""
+        };
+      });
+      const sorted = (0, import_lodash.default)(dataWithIndices, [
+        "isEmpty",
+        "value"
+      ], [
+        "asc",
+        sort.direction
+      ]);
+      for (let displayIndex = 0; displayIndex < sorted.length; displayIndex++) {
+        const { index: dataIndex } = sorted[displayIndex];
+        if (displayIndex !== dataIndex) {
+          this._displayToDataIndex.set(displayIndex, dataIndex);
+        }
+      }
+      return sorted.map(({ item }) => item);
+    });
+  }
+  initializeEffects() {
+    const rowOrderWatcher = (0, import_signals_core.effect)(() => {
+      touch(this._sortedRows.value);
+      this._onRowOrderChanged?.();
+    });
+    this._ctx.onDispose(rowOrderWatcher);
+    const rowEffectManager = (0, import_signals_core.effect)(() => {
+      const { start, end } = touch(this._visibleRange.value);
+      const rowEffects = [];
+      for (let row = start.row; row <= end.row; row++) {
+        rowEffects.push((0, import_signals_core.effect)(() => {
+          const obj = this._sortedRows.value[row];
+          this?._table?.view?.fields.forEach((field) => touch((0, import_echo_schema4.getValue)(obj, field.path)));
+          this._onCellUpdate?.({
+            row,
+            col: start.col
+          });
+        }));
+      }
+      return () => rowEffects.forEach((cleanup) => cleanup());
+    });
+    this._ctx.onDispose(rowEffectManager);
+  }
+  //
+  // Column Operations
+  //
+  deleteColumn(fieldId) {
+    if (!this.table.view) {
+      return;
+    }
+    const field = this.table.view.fields.find((field2) => field2.id === fieldId);
+    if (field && this._onDeleteColumn) {
+      if (this._sorting.value?.fieldId === fieldId) {
+        this.clearSort();
+      }
+      this._onDeleteColumn(field.id);
+    }
+  }
+  //
+  // Resize
+  //
+  setColumnWidth(columnIndex, width) {
+    const fields = this.table.view?.fields ?? [];
+    if (columnIndex < fields.length) {
+      const newWidth = Math.max(0, width);
+      const field = fields[columnIndex];
+      if (field) {
+        field.size = newWidth;
+      }
+    }
+  }
+  //
+  // Sorting
+  //
+  setSort(fieldId, direction) {
+    this._sorting.value = {
+      fieldId,
+      direction
+    };
+  }
+  clearSort() {
+    this._sorting.value = void 0;
+  }
+  //
+  // Pinning
+  //
+  // TODO(burdon): Change to setPinned(on/off).
+  pinRow(rowIndex, side) {
+    this._pinnedRows[side].push(rowIndex);
+  }
+  unpinRow(rowIndex) {
+    this._pinnedRows.top = this._pinnedRows.top.filter((index) => index !== rowIndex);
+    this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
+  }
+};
+var useTableModel = ({ objects, table, projection, ...props }) => {
+  const [model, setModel] = (0, import_react8.useState)();
+  (0, import_react8.useEffect)(() => {
+    if (!table || !projection) {
+      return;
+    }
+    let model2;
+    const t = setTimeout(async () => {
+      model2 = new TableModel({
+        table,
+        projection,
+        ...props
+      });
+      await model2.open();
+      setModel(model2);
+    });
+    return () => {
+      clearTimeout(t);
+      void model2?.close();
+    };
+  }, [
+    table,
+    projection
+  ]);
+  (0, import_react8.useEffect)(() => {
+    if (objects) {
+      model?.setRows(objects);
+    }
+  }, [
+    model,
+    objects
+  ]);
+  return model;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Table,
+  TableType,
+  Toolbar,
+  fromGridCell,
+  initializeTable,
+  tableButtons,
+  toGridCell,
+  touch,
+  translations,
+  useTableModel,
+  useToolbarContext
+});
+//# sourceMappingURL=index.cjs.map