@dxos/react-ui-table 0.8.2-main.f11618f → 0.8.2-staging.7ac8446

package/dist/lib/node/index.cjs

@@ -74,12 +74,15 @@ var import_react_ui_form2 = require("@dxos/react-ui-form");
 var import_react_ui_grid2 = require("@dxos/react-ui-grid");
 var import_react5 = __toESM(require("react"));
 var import_react_ui5 = require("@dxos/react-ui");
+var import_react_ui_form3 = require("@dxos/react-ui-form");
+var import_react6 = __toESM(require("react"));
+var import_react_ui6 = require("@dxos/react-ui");
 var import_signals_core = require("@preact/signals-core");
 var import_context = require("@dxos/context");
 var import_echo_schema3 = require("@dxos/echo-schema");
 var import_invariant2 = require("@dxos/invariant");
 var import_live_object = require("@dxos/live-object");
-var import_react_ui_form3 = require("@dxos/react-ui-form");
+var import_react_ui_form4 = require("@dxos/react-ui-form");
 var import_signals_core2 = require("@preact/signals-core");
 var import_context2 = require("@dxos/context");
 var import_live_object2 = require("@dxos/live-object");
@@ -91,33 +94,33 @@ var import_schema2 = require("@dxos/schema");
 var import_signals_core3 = require("@preact/signals-core");
 var import_lodash = __toESM(require("lodash.orderby"));
 var import_echo_schema5 = require("@dxos/echo-schema");
-var import_react_ui_form4 = require("@dxos/react-ui-form");
+var import_react_ui_form5 = require("@dxos/react-ui-form");
 var import_signals_core4 = require("@preact/signals-core");
 var import_log = require("@dxos/log");
 var import_signals_core5 = require("@preact/signals-core");
 var import_echo_schema6 = require("@dxos/echo-schema");
-var import_react_ui_form5 = require("@dxos/react-ui-form");
+var import_react_ui_form6 = require("@dxos/react-ui-form");
 var import_react_ui_grid3 = require("@dxos/react-ui-grid");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_schema3 = require("@dxos/schema");
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_echo_schema7 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
-var import_react_ui6 = require("@dxos/react-ui");
+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_react7 = __toESM(require("react"));
-var import_react_ui7 = require("@dxos/react-ui");
+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_react8 = require("react");
+var import_react9 = require("react");
 var import_echo4 = require("@dxos/react-client/echo");
 var import_react_ui_attention2 = require("@dxos/react-ui-attention");
 var import_util2 = require("@dxos/util");
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_live_object3 = require("@dxos/live-object");
 var import_react_ui_menu = require("@dxos/react-ui-menu");
 var translationKey = "table";
@@ -271,7 +274,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
       typename: state.typename
     }).runSync();
     if (schema2) {
-      const obj = space.db.add((0, import_echo2.live)(schema2, values));
+      const obj = space.db.add((0, import_echo2.create)(schema2, values));
       state.onCreate?.(obj);
     }
     void modals.close();
@@ -310,30 +313,63 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
     onCancel: handleCancel
   }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.Arrow, null))));
 };
+var getRefTargetObj = (space, id) => {
+  if (space && id) {
+    return space?.db.getObjectById(id);
+  } else {
+    return void 0;
+  }
+};
+var RefPanel = ({ model, modals }) => {
+  const state = modals.state.value;
+  const space = model?.space;
+  const targetObj = getRefTargetObj(space, state?.type === "refPanel" ? state.targetId : void 0);
+  const schema = space && state?.type === "refPanel" ? space.db.schemaRegistry.getSchema(state.typename) : void 0;
+  if (!model.view || !model.projection) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Root, {
+    modal: false,
+    open: state?.type === "refPanel" && !!targetObj && !!schema,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) {
+        return modals.close();
+      }
+    }
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.VirtualTrigger, {
+    virtualRef: modals.trigger
+  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Portal, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Content, {
+    classNames: "md:is-64"
+  }, targetObj && schema && /* @__PURE__ */ import_react5.default.createElement(import_react_ui_form3.Form, {
+    readonly: true,
+    values: targetObj,
+    schema
+  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Arrow, null))));
+};
 var RowActionsMenu = ({ model, modals }) => {
-  const { t } = (0, import_react_ui5.useTranslation)(translationKey);
+  const { t } = (0, import_react_ui6.useTranslation)(translationKey);
   const hasSelection = model.selection.hasSelection.value;
   const state = modals.state.value;
   if (state?.type !== "row") {
     return null;
   }
-  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Root, {
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Root, {
     modal: false,
     open: true,
     onOpenChange: modals.close
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.VirtualTrigger, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.VirtualTrigger, {
     virtualRef: modals.trigger
-  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Content, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Item, {
+  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Item, {
     "data-testid": "row-menu-delete",
     onClick: () => model.deleteRow(state.rowIndex)
-  }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Item, {
+  }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Item, {
     key: action.id,
     "data-testid": `row-action-${action.id}`,
     onClick: () => {
       modals.close();
       model.handleRowAction(action.id, state.rowIndex);
     }
-  }, t(action.translationKey)))), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Arrow, null)));
+  }, t(action.translationKey)))), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Arrow, null)));
 };
 var getBaseSchems = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
@@ -365,7 +401,7 @@ var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
       fields: properties.map((property) => property.name)
     }
   });
-  const table = (0, import_live_object2.live)(import_chunk_TGG6OZ54.TableType, {
+  const table = (0, import_live_object2.create)(import_chunk_TGG6OZ54.TableType, {
     name: "dynamic-table",
     view: (0, import_live_object2.makeRef)(view)
   });
@@ -414,7 +450,7 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     if (!schema) {
       throw new Error(`Schema not found: ${typename}`);
     }
-    const fields = (0, import_schema2.getSchemaProperties)(schema.ast).map((prop) => prop.name);
+    const fields = (0, import_schema2.getSchemaProperties)(schema.ast).filter((prop) => prop.format !== import_echo_schema4.FormatEnum.Ref).map((prop) => prop.name);
     table.view = (0, import_echo3.makeRef)((0, import_schema2.createView)({
       // TODO(ZaymonFC): Don't hardcode name?
       name: "View",
@@ -436,7 +472,7 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     }));
     createProjection(schema, table.view.target);
     if (initialRow) {
-      space.db.add((0, import_echo3.live)(schema, {}));
+      space.db.add((0, import_echo3.create)(schema, {}));
     }
     return schema;
   }
@@ -538,6 +574,26 @@ var columnSettingsButton = {
     fieldId: el.getAttribute("data-field-id")
   })
 };
+var referencedCellButton = {
+  attr: BUTTON_IDENTIFIERS.referencedCell,
+  icon: "ph--link-simple-horizontal--regular",
+  render: ({ targetId, schemaId }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.referencedCell,
+      icon: referencedCellButton.icon,
+      data: {
+        "data-target-id": targetId,
+        "data-schema-id": schemaId
+      },
+      testId: "table-ref-cell-button"
+    });
+  },
+  getData: (el) => ({
+    type: "referencedCell",
+    targetId: el.getAttribute("data-target-id"),
+    schemaId: el.getAttribute("data-schema-id")
+  })
+};
 var rowMenuButton = {
   attr: BUTTON_IDENTIFIERS.rowMenu,
   icon: "ph--dots-three--regular",
@@ -582,6 +638,7 @@ var sortButton = {
 var tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
+  referencedCell: referencedCellButton,
   rowMenu: rowMenuButton,
   sort: sortButton
 };
@@ -874,27 +931,13 @@ var TableSorting = class {
       const refValue = (0, import_echo_schema5.getValue)(value.target, field.referencePath);
       return refValue;
     }
-    return (0, import_react_ui_form4.formatForDisplay)({
+    return (0, import_react_ui_form5.formatForDisplay)({
       type,
       format,
       value
     });
   }
 };
-var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
-var extractTagIds = (value) => {
-  if (typeof value !== "string") {
-    return void 0;
-  }
-  const ids = [];
-  let match;
-  while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) {
-    if (match[2]) {
-      ids.push(match[2]);
-    }
-  }
-  return ids.length > 0 ? ids : void 0;
-};
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var defaultFeatures = {
   selection: {
@@ -972,7 +1015,7 @@ var TableModel = class extends import_context.Resource {
           return (0, import_echo_schema3.getValue)(value.target, field.referencePath);
         }
         default: {
-          return (0, import_react_ui_form3.formatForEditing)({
+          return (0, import_react_ui_form4.formatForEditing)({
             type: props.type,
             format: props.format,
             value
@@ -990,27 +1033,13 @@ var TableModel = class extends import_context.Resource {
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
         case import_echo_schema3.FormatEnum.Ref: {
-          if ((0, import_live_object.isLiveObject)(value)) {
+          if ((0, import_live_object.isReactiveObject)(value)) {
             (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, (0, import_live_object.makeRef)(value));
           }
           break;
         }
-        case import_echo_schema3.FormatEnum.SingleSelect: {
-          const ids = extractTagIds(value);
-          if (ids && ids.length > 0) {
-            (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, ids[0]);
-          }
-          break;
-        }
-        case import_echo_schema3.FormatEnum.MultiSelect: {
-          const ids = extractTagIds(value);
-          if (ids) {
-            (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, ids);
-          }
-          break;
-        }
         default: {
-          (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, (0, import_react_ui_form3.parseValue)({
+          (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, (0, import_react_ui_form4.parseValue)({
             type: props.type,
             format: props.format,
             value
@@ -1029,7 +1058,7 @@ var TableModel = class extends import_context.Resource {
     };
     (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: 115,
+      L: 114,
       S: this,
       A: [
         "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
@@ -1089,7 +1118,7 @@ var TableModel = class extends import_context.Resource {
   get columnMeta() {
     (0, import_invariant2.invariant)(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 184,
+      L: 183,
       S: this,
       A: [
         "this._columnMeta",
@@ -1378,7 +1407,7 @@ var TablePresentation = class {
               return (0, import_echo_schema6.getValue)(value.target, field.referencePath);
             }
             default: {
-              return (0, import_react_ui_form5.formatForDisplay)({
+              return (0, import_react_ui_form6.formatForDisplay)({
                 type: props.type,
                 format: props.format,
                 value
@@ -1388,7 +1417,7 @@ var TablePresentation = class {
         }
       };
       const classes = [];
-      const formatClasses = (0, import_react_ui_form5.cellClassesForFieldType)({
+      const formatClasses = (0, import_react_ui_form6.cellClassesForFieldType)({
         type: props.type,
         format: props.format
       });
@@ -1405,8 +1434,10 @@ var TablePresentation = class {
       if (props.format === import_echo_schema6.FormatEnum.Ref && props.referenceSchema) {
         const targetObj = (0, import_echo_schema6.getValue)(obj, field.path)?.target;
         if (targetObj) {
-          const dxn = (0, import_echo_schema6.getDXN)(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag ref=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id,
+            schemaId: props.referenceSchema
+          });
         }
       }
       if (props.format === import_echo_schema6.FormatEnum.Boolean) {
@@ -1640,9 +1671,9 @@ var createOption = (text) => ({
 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_react6.useRef)(false);
-  const { themeMode } = (0, import_react_ui6.useThemeContext)();
-  const fieldProjection = (0, import_react6.useMemo)(() => {
+  const suppressNextBlur = (0, import_react7.useRef)(false);
+  const { themeMode } = (0, import_react_ui7.useThemeContext)();
+  const fieldProjection = (0, import_react7.useMemo)(() => {
     if (!model || !editing) {
       return;
     }
@@ -1663,7 +1694,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     model,
     editing
   ]);
-  const handleEnter = (0, import_react6.useCallback)((value) => {
+  const handleEnter = (0, import_react7.useCallback)((value) => {
     if (!model || !editing) {
       return;
     }
@@ -1679,7 +1710,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     onFocus,
     setEditing
   ]);
-  const handleBlur = (0, import_react6.useCallback)((value) => {
+  const handleBlur = (0, import_react7.useCallback)((value) => {
     if (!model || !editing) {
       return;
     }
@@ -1695,7 +1726,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     model,
     editing
   ]);
-  const handleClose = (0, import_react6.useCallback)((value, event) => {
+  const handleClose = (0, import_react7.useCallback)((value, event) => {
     if (!model || !editing || !fieldProjection) {
       return;
     }
@@ -1711,7 +1742,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     onEnter,
     fieldProjection
   ]);
-  const extension = (0, import_react6.useMemo)(() => {
+  const extension = (0, import_react7.useMemo)(() => {
     if (!fieldProjection) {
       return [];
     }
@@ -1792,7 +1823,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     handleClose,
     themeMode
   ]);
-  const getCellContent = (0, import_react6.useCallback)(() => {
+  const getCellContent = (0, import_react7.useCallback)(() => {
     if (model && editing) {
       const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
       const { col } = cell;
@@ -1838,7 +1869,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     model,
     editing
   ]);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui_grid4.GridCellEditor, {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui_grid4.GridCellEditor, {
     extension,
     getCellContent,
     onBlur: handleBlur
@@ -1869,6 +1900,8 @@ var determineNavigationDelta = ({ key, shift }) => {
   return shift ? -1 : 1;
 };
 var __dxlog_file4 = "/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 TableRoot = ({ children, role }) => {
   return /* @__PURE__ */ import_react.default.createElement("div", {
     role: "none",
@@ -1890,18 +1923,14 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
   }, [
     model
   ]);
-  const getCells = (0, import_react.useCallback)((range, plane) => presentation?.getCells(range, plane) ?? {}, [
-    presentation
-  ]);
   (0, import_react.useEffect)(() => {
     if (!presentation || !dxGrid) {
       return;
     }
-    dxGrid.getCells = getCells;
+    dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
   }, [
     presentation,
-    dxGrid,
-    getCells
+    dxGrid
   ]);
   (0, import_react.useImperativeHandle)(forwardedRef, () => {
     if (!presentation || !dxGrid) {
@@ -1957,6 +1986,10 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
           modals.showColumnCreator();
           break;
         }
+        case "referencedCell": {
+          modals.showReferencePanel(data.targetId, data.schemaId);
+          break;
+        }
         case "sort": {
           model?.sorting?.toggleSort(data.fieldId);
           break;
@@ -2068,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: 307,
+        L: 312,
         S: void 0,
         A: [
           "space",
@@ -2119,7 +2152,7 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     onFocus: handleFocus,
     onQuery: handleQuery
   }), /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Content, {
-    className: (0, import_react_ui_theme.mx)("[--dx-grid-base:var(--surface-bg)]", import_react_ui_grid.gridSeparatorInlineEnd, import_react_ui_grid.gridSeparatorBlockEnd),
+    className: (0, import_react_ui_theme.mx)("[--dx-grid-base:var(--surface-bg)]", inlineEndLine, blockEndLine),
     frozen,
     // getCells={getCells}
     columns: model.columnMeta.value,
@@ -2144,6 +2177,9 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
   }), /* @__PURE__ */ import_react.default.createElement(CreateRefPanel, {
     model,
     modals
+  }), /* @__PURE__ */ import_react.default.createElement(RefPanel, {
+    model,
+    modals
   }));
 });
 var Table = {
@@ -2151,8 +2187,8 @@ var Table = {
   Main: TableMain
 };
 var useTableModel = ({ table, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
-  const [model, setModel] = (0, import_react8.useState)();
-  (0, import_react8.useEffect)(() => {
+  const [model, setModel] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
     if (!table || !projection) {
       return;
     }
@@ -2182,7 +2218,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
     features,
     rowActions
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (rows) {
       model?.setRows(rows);
     }
@@ -2194,7 +2230,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
     table?.id,
     table?.view?.target?.query.typename
   ].filter(import_util2.isNonNullable));
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!model) {
       return;
     }
@@ -2216,7 +2252,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
   return model;
 };
 var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
-  const { table, projection } = (0, import_react7.useMemo)(() => {
+  const { table, projection } = (0, import_react8.useMemo)(() => {
     const props2 = getBaseSchems({
       typename: name,
       properties,
@@ -2233,14 +2269,14 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
     schema,
     jsonSchema
   ]);
-  const tableRef = (0, import_react7.useRef)(null);
-  const handleCellUpdate = (0, import_react7.useCallback)((cell) => {
+  const tableRef = (0, import_react8.useRef)(null);
+  const handleCellUpdate = (0, import_react8.useCallback)((cell) => {
     tableRef.current?.update?.(cell);
   }, []);
-  const handleRowOrderChange = (0, import_react7.useCallback)(() => {
+  const handleRowOrderChange = (0, import_react8.useCallback)(() => {
     tableRef.current?.update?.();
   }, []);
-  const features = (0, import_react_ui7.useDefaultValue)(props.features, () => ({
+  const features = (0, import_react_ui8.useDefaultValue)(props.features, () => ({
     selection: {
       enabled: false
     },
@@ -2256,20 +2292,20 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
     onRowOrderChange: handleRowOrderChange,
     onRowAction
   });
-  const presentation = (0, import_react7.useMemo)(() => {
+  const presentation = (0, import_react8.useMemo)(() => {
     if (model) {
       return new TablePresentation(model);
     }
   }, [
     model
   ]);
-  return /* @__PURE__ */ import_react7.default.createElement("div", {
+  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_react7.default.createElement("div", {
+  }, /* @__PURE__ */ import_react8.default.createElement("div", {
     role: "none",
     className: "grid min-bs-0 overflow-hidden"
-  }, /* @__PURE__ */ import_react7.default.createElement(Table.Root, null, /* @__PURE__ */ import_react7.default.createElement(Table.Main, {
+  }, /* @__PURE__ */ import_react8.default.createElement(Table.Root, null, /* @__PURE__ */ import_react8.default.createElement(Table.Main, {
     ref: tableRef,
     model,
     presentation,
@@ -2329,18 +2365,18 @@ var createTableToolbarActions = (state) => {
   };
 };
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
-  const state = (0, import_react9.useMemo)(() => (0, import_live_object3.live)({
+  const state = (0, import_react10.useMemo)(() => (0, import_live_object3.create)({
     viewDirty
   }), []);
-  const actionsCreator = (0, import_react9.useCallback)(() => createTableToolbarActions(state), [
+  const actionsCreator = (0, import_react10.useCallback)(() => createTableToolbarActions(state), [
     state
   ]);
   const menu = (0, import_react_ui_menu.useMenuActions)(actionsCreator);
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui_menu.MenuProvider, {
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.MenuProvider, {
     ...menu,
     attendableId,
     onAction
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui_menu.ToolbarMenu, {
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.ToolbarMenu, {
     classNames
   }));
 };