@dxos/react-ui-table 0.9.1-staging.ee54ba693a → 0.11.0

package/dist/lib/index.mjs

@@ -0,0 +1,1133 @@
+import { t as Table$1 } from "./chunk-types.mjs";
+import { _ as compareValues, a as cellClassesForRowSelection, c as createEchoChangeCallback, d as CONTROL_IDENTIFIERS, f as CheckboxComponent, g as tableButtons, h as BUTTON_IDENTIFIERS, i as TablePresentation, l as FieldSortSchema, m as tableControls, n as useProjectionModel, o as TableModel, p as SwitchComponent, r as useAddRow, s as createDirectChangeCallback, t as useTableModel, u as tableSortAspect, v as getSortValue, y as extractOrder } from "./chunk-useTableModel.mjs";
+import { createContext } from "@radix-ui/react-context";
+import { Atom } from "@effect-atom/atom";
+import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Atom as Atom$1, RegistryContext, useAtomValue } from "@effect-atom/atom-react";
+import * as String$1 from "effect/String";
+import { log } from "@dxos/log";
+import { DropdownMenu, Popover, composable, composableProps, toLocalizedString, useDefaultValue, useTranslation } from "@dxos/react-ui";
+import { useAttention } from "@dxos/react-ui-attention";
+import { DxEditRequest, Grid, GridCellEditor, closestCell, editorKeys, gridSeparatorBlockEnd, gridSeparatorInlineEnd, parseCellIndex, useGridContext } from "@dxos/react-ui-grid";
+import { mx } from "@dxos/ui-theme";
+import { Entity, Filter, Obj, Order, Query, Ref, Type } from "@dxos/echo";
+import { SchemaEx } from "@dxos/effect";
+import { invariant } from "@dxos/invariant";
+import { FieldEditor, Form } from "@dxos/react-ui-form";
+import { ProjectionModel, ViewModel, createEchoChangeCallback as createEchoChangeCallback$1, getSchemaFromJsonSchema, getSchemaFromPropertyDefinitions } from "@dxos/schema";
+import * as Schema from "effect/Schema";
+import * as SchemaAST from "effect/SchemaAST";
+import { Format as Format$1, TypeEnum } from "@dxos/echo/Format";
+import { EditorView } from "@codemirror/view";
+import { debounce } from "@dxos/async";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getDeep, isTruthy, setDeep } from "@dxos/util";
+import { translationKey } from "#translations";
+import { Menu, createGapSeparator, createMenuAction, createMenuItemGroup, useMenuActions } from "@dxos/react-ui-menu";
+//#region src/components/Table/TableContext.ts
+var [TableContextProvider, useTableContext] = createContext("Table");
+//#endregion
+//#region src/util/dynamic-table.ts
+/**
+* @deprecated
+*/
+var getBaseSchema = ({ type, typename, properties, jsonSchema }) => {
+	const resolved = typename && properties ? getSchemaFromPropertyDefinitions(typename, properties) : type ?? (jsonSchema ? getSchemaFromJsonSchema(jsonSchema, typename) : void 0);
+	if (!resolved) throw new Error("invalid properties");
+	return {
+		typename: Type.getTypename(resolved),
+		type: resolved
+	};
+};
+var makeDynamicTable = ({ registry, type, properties }) => {
+	const jsonSchema = type.jsonSchema;
+	const view = ViewModel.make({
+		query: Query.select(Filter.everything()),
+		jsonSchema,
+		type,
+		...properties && { fields: properties.map((property) => property.name) }
+	});
+	const object = Obj.make(Table$1, {
+		view: Ref.make(view),
+		sizes: {}
+	});
+	const projection = new ProjectionModel({
+		registry,
+		view,
+		baseSchema: jsonSchema,
+		change: createEchoChangeCallback$1(view, type)
+	});
+	projection.normalizeView();
+	if (properties && projection.getFields()) setProperties(view, projection, object, properties);
+	return {
+		projection,
+		object
+	};
+};
+var setProperties = (view, projection, table, properties) => {
+	for (const property of properties) {
+		const field = projection.getFields().find((field) => field.path === property.name);
+		if (field) {
+			if (property.size !== void 0) Obj.update(table, (table) => {
+				table.sizes[field.path] = property.size;
+			});
+			if (property.title !== void 0) {
+				const fieldProjection = projection.getFieldProjection(field.id);
+				projection.setFieldProjection({
+					...fieldProjection,
+					props: {
+						...fieldProjection.props,
+						title: property.title
+					}
+				});
+			}
+			if (property.sort) {
+				const newQuery = Query.fromAst(Obj.getSnapshot(view).query.ast).orderBy(Order.property(field.path, property.sort));
+				Obj.update(view, (view) => {
+					view.query.ast = newQuery.ast;
+				});
+			}
+		}
+	}
+};
+//#endregion
+//#region src/util/signals.ts
+/**
+* Explicitly marks signal dependencies for tracking within effects.
+* Returns the passed value to enable inline usage.
+*/
+var touch = (value) => value;
+//#endregion
+//#region src/util/schema.ts
+/**
+* Creates a narrowed schema from an original schema that only includes
+* the specified paths. This allows form components to only display
+* and edit/validate specific fields rather than the entire object.
+*
+* @param schema The original schema to narrow
+* @param paths Array of field paths to extract
+* @returns A narrowed Schema instance containing only the properties at the specified paths
+*/
+var narrowSchema = (schema, paths) => {
+	const ast = schema?.ast;
+	if (SchemaAST.isTypeLiteral(ast)) {
+		const propertySignatures = ast.propertySignatures.filter((signature) => paths.includes(signature.name.toString()));
+		if (propertySignatures.length > 0) {
+			const narrowType = new SchemaAST.TypeLiteral(propertySignatures, []);
+			return Schema.make(narrowType);
+		}
+	}
+};
+//#endregion
+//#region src/model/modal-controller.ts
+var ModalController = class {
+	_registry;
+	_state;
+	_triggerRef = { current: null };
+	constructor(registry) {
+		this._registry = registry;
+		this._state = Atom.make({ type: "closed" });
+	}
+	get state() {
+		return this._state;
+	}
+	get stateValue() {
+		return this._registry.get(this._state);
+	}
+	get trigger() {
+		return this._triggerRef;
+	}
+	setTrigger = (trigger) => {
+		this._triggerRef.current = trigger;
+	};
+	showRowMenu = (rowIndex) => {
+		this._registry.set(this._state, {
+			type: "row",
+			rowIndex
+		});
+	};
+	showColumnMenu = (fieldId) => {
+		this._registry.set(this._state, {
+			type: "column",
+			fieldId
+		});
+	};
+	showColumnCreator = () => {
+		this._registry.set(this._state, {
+			type: "columnSettings",
+			mode: { type: "create" }
+		});
+	};
+	showReferencePanel = (targetId, schemaId) => {
+		this._registry.set(this._state, {
+			type: "refPanel",
+			targetId,
+			typename: schemaId
+		});
+	};
+	openColumnSettings = () => {
+		const currentState = this._registry.get(this._state);
+		if (currentState.type === "column") {
+			const fieldId = currentState.fieldId;
+			requestAnimationFrame(() => {
+				this._registry.set(this._state, {
+					type: "columnSettings",
+					mode: {
+						type: "edit",
+						fieldId
+					}
+				});
+			});
+		}
+	};
+	close = () => {
+		this._registry.set(this._state, { type: "closed" });
+	};
+};
+//#endregion
+//#region src/components/TableCellEditor/CellValidationMessage.tsx
+var CellValidationMessage = ({ __gridScope, validationError, variant = "error" }) => {
+	const { editing, editBox: box } = useGridContext("GridSheetCellEditor", __gridScope);
+	if (!editing || !validationError) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: `absolute ${variant === "error" ? "bg-error-surface" : "bg-warning-surface"} ${variant === "error" ? "text-error-fg" : "text-warning-fg"} rounded-h-sm text-xs p-1`,
+		style: {
+			"--dx-grid-cell-width": `${box?.inlineSize ?? 200}px`,
+			zIndex: 10,
+			insetBlockEnd: `calc(100% - ${box.insetBlockStart}px)`,
+			insetInlineStart: box.insetInlineStart,
+			inlineSize: box.inlineSize
+		},
+		children: validationError
+	});
+};
+//#endregion
+//#region src/components/TableCellEditor/FormCellEditor.tsx
+var __dxlog_file$2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
+var createOptionLabel = ["create-new-object.label", { ns: translationKey }];
+var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onCreate, ...formProps }) => {
+	const anchorRef = useRef(null);
+	const { id: _gridId, editing: contextEditing, setEditing } = useGridContext("ArrayEditor", __gridScope);
+	const [editing, setLocalEditing] = useState(false);
+	useEffect(() => {
+		if (contextEditing && contextEditing.cellElement) {
+			anchorRef.current = contextEditing.cellElement.querySelector(".dx-grid__cell__content");
+			setLocalEditing(true);
+		} else {
+			anchorRef.current = null;
+			setLocalEditing(false);
+		}
+	}, [contextEditing]);
+	const narrowedSchema = useMemo(() => {
+		if (!schema) return;
+		return narrowSchema(Type.getSchema(schema), [fieldProjection.field.path]);
+	}, [JSON.stringify(schema), fieldProjection.field.path]);
+	const originalRow = useMemo(() => {
+		if (model && contextEditing) {
+			const cell = parseCellIndex(contextEditing.index);
+			if (model.isDraftCell(cell)) {
+				const draftRow = model.getDraftRows()[cell.row];
+				invariant(draftRow, void 0, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$2,
+					L: 75,
+					S: void 0,
+					A: ["draftRow", ""]
+				});
+				return draftRow.data;
+			} else {
+				const row = model.getRowAt(cell.row);
+				invariant(row, void 0, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$2,
+					L: 79,
+					S: void 0,
+					A: ["row", ""]
+				});
+				return row;
+			}
+		}
+	}, [model, contextEditing]);
+	const [formValues, setFormValues] = useState(useMemo(() => originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}, [originalRow]));
+	const handleValuesChanged = useCallback((values) => {
+		setFormValues(values);
+	}, []);
+	const handleOpenChange = useCallback((nextOpen) => {
+		if (nextOpen === false) {
+			setEditing(null);
+			onSave?.();
+		}
+		setLocalEditing(nextOpen);
+	}, []);
+	const handleSave = useCallback((values) => {
+		if (!originalRow) return;
+		const path = fieldProjection.field.path;
+		const value = getDeep(values, [path]);
+		if (model) model.changeRow(originalRow, (mutableRow) => {
+			setDeep(mutableRow, [path], value);
+		});
+		else setDeep(originalRow, [path], value);
+		contextEditing?.cellElement?.focus();
+		setEditing(null);
+		setLocalEditing(false);
+		onSave?.();
+	}, [
+		fieldProjection.field.path,
+		onSave,
+		contextEditing,
+		originalRow,
+		model
+	]);
+	const handleCreate = useCallback((schema, values) => {
+		const objectWithId = onCreate?.(schema, values);
+		if (objectWithId && originalRow) {
+			const ref = Ref.make(objectWithId);
+			const path = fieldProjection.field.path;
+			if (model) model.changeRow(originalRow, (mutableRow) => {
+				setDeep(mutableRow, [path], ref);
+			});
+			else setDeep(originalRow, [path], ref);
+		}
+		contextEditing?.cellElement?.focus();
+		setEditing(null);
+		setLocalEditing(false);
+		onSave?.();
+	}, [
+		fieldProjection.field.path,
+		onSave,
+		contextEditing,
+		originalRow,
+		onCreate,
+		model
+	]);
+	const getOptions = useCallback((results) => results.map((obj) => {
+		return {
+			id: Entity.getURI(obj),
+			label: SchemaEx.getValue(obj, fieldProjection.field.referencePath) || obj.id.toString()
+		};
+	}).filter(isTruthy), [fieldProjection]);
+	if (!editing) return null;
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open: editing,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(Popover.VirtualTrigger, { virtualRef: anchorRef }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+			tabIndex: -1,
+			classNames: "dx-card-popover-width dx-density-md",
+			children: [/* @__PURE__ */ jsx(Popover.Arrow, {}), /* @__PURE__ */ jsx(Popover.Viewport, { children: /* @__PURE__ */ jsx(Form.Root, {
+				...formProps,
+				autoFocus: true,
+				schema: narrowedSchema,
+				values: formValues,
+				onValuesChanged: handleValuesChanged,
+				projection: model?.projection,
+				createInitialValuePath: fieldProjection.field.referencePath,
+				createOptionIcon: "ph--plus--regular",
+				createOptionLabel,
+				db: model?.db,
+				getOptions,
+				onCreate: handleCreate,
+				onSave: handleSave,
+				children: /* @__PURE__ */ jsx(Form.Viewport, { children: /* @__PURE__ */ jsxs(Form.Content, { children: [/* @__PURE__ */ jsx(Form.FieldSet, {}), /* @__PURE__ */ jsx(Form.Actions, {})] }) })
+			}) })]
+		}) })]
+	});
+};
+//#endregion
+//#region src/components/TableCellEditor/TableCellEditor.tsx
+var __dxlog_file$1 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+/**
+* Resolves the field projection for the cell being edited, guarding against an out-of-range field
+* index (e.g. a stale cell, or a pinned plane whose `getFieldIndex` maps beyond the projection).
+*/
+var resolveFieldProjection = (model, editing) => {
+	if (!model || !editing) return;
+	const { col, plane } = parseCellIndex(editing.index);
+	const fieldIndex = model.getFieldIndex(plane, col);
+	const fields = model.projection.getFields();
+	if (fieldIndex === void 0 || fieldIndex < 0 || fieldIndex >= fields.length) return;
+	const fieldProjection = model.projection.getFieldProjection(fields[fieldIndex].id);
+	invariant(fieldProjection, void 0, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file$1,
+		L: 68,
+		S: void 0,
+		A: ["fieldProjection", ""]
+	});
+	return fieldProjection;
+};
+var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, onCreate }) => {
+	const { editing } = useGridContext("TableValueEditor", __gridScope);
+	const fieldProjection = useMemo(() => resolveFieldProjection(model, editing), [model, editing]);
+	if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === Format$1.TypeFormat.SingleSelect || fieldProjection?.props.format === Format$1.TypeFormat.Ref) return /* @__PURE__ */ jsx(FormCellEditor, {
+		__gridScope,
+		schema,
+		model,
+		fieldProjection,
+		modals,
+		onSave,
+		onCreate
+	});
+	return /* @__PURE__ */ jsx(TableCellEditor, {
+		model,
+		modals,
+		onFocus,
+		onSave,
+		__gridScope
+	});
+};
+var cellEditorSlots = { content: { className: "!py-(--dx-grid-cell-editor-padding-block)" } };
+var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
+	const { editing, setEditing } = useGridContext("TableCellEditor", __gridScope);
+	const suppressNextBlur = useRef(false);
+	const [validationError, setValidationError] = useState(null);
+	const [validationVariant, setValidationVariant] = useState("error");
+	const fieldProjection = useMemo(() => resolveFieldProjection(model, editing), [model, editing]);
+	useCallback(async (value) => {
+		if (!model || !editing) return;
+		const cell = parseCellIndex(editing.index);
+		const validationResult = await model.validateCellData(cell, value);
+		if (validationResult.valid) {
+			setValidationError(null);
+			model.setCellData(cell, value);
+			onFocus?.();
+			setEditing(null);
+			onSave?.();
+		} else {
+			setValidationError(validationResult.error);
+			setValidationVariant("error");
+		}
+	}, [
+		model,
+		editing,
+		onFocus,
+		setEditing
+	]);
+	const handleBlur = useCallback(async (value) => {
+		if (suppressNextBlur.current) suppressNextBlur.current = false;
+		else if (model && editing) {
+			const cell = parseCellIndex(editing.index);
+			if (value !== void 0) {
+				if ((await model.validateCellData(cell, value)).valid) {
+					setValidationError(null);
+					model.setCellData(cell, value);
+					setEditing(null);
+					onSave?.();
+				}
+			}
+		}
+	}, [model, editing]);
+	const handleClose = useCallback(async (value, event) => {
+		if (!model || !editing || !fieldProjection) return;
+		const cell = parseCellIndex(editing.index);
+		if (value !== void 0) {
+			const result = await model.validateCellData(cell, value);
+			if (result.valid) {
+				suppressNextBlur.current = true;
+				setValidationError(null);
+				model.setCellData(cell, value);
+				setEditing(null);
+				onSave?.();
+				if (event && onFocus) onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
+			} else {
+				setValidationError(result.error);
+				setValidationVariant("error");
+			}
+		} else {
+			suppressNextBlur.current = true;
+			setValidationError(null);
+			setEditing(null);
+			onSave?.();
+			if (event && onFocus) onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+		}
+	}, [
+		model,
+		editing,
+		onFocus,
+		fieldProjection,
+		setEditing,
+		onSave
+	]);
+	const extensions = useMemo(() => {
+		if (!fieldProjection) return [];
+		const extensions = [editorKeys({
+			onClose: handleClose,
+			...editing?.initialContent && { onNav: handleClose }
+		})];
+		if (model && editing) extensions.push(EditorView.updateListener.of(debounce((update) => {
+			const content = update.state.doc.toString();
+			const cell = parseCellIndex(editing.index);
+			model.validateCellData(cell, content).then((result) => {
+				if (result.valid) setValidationError(null);
+				else {
+					setValidationError(result.error);
+					setValidationVariant("error");
+				}
+			});
+		}, 10)));
+		return extensions;
+	}, [
+		model,
+		modals,
+		editing,
+		fieldProjection,
+		handleClose
+	]);
+	const getCellContent = useCallback(() => {
+		if (model && editing) {
+			const cell = parseCellIndex(editing.index);
+			const value = model.getCellData(cell);
+			return value !== void 0 ? String(value) : "";
+		}
+	}, [model, editing]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CellValidationMessage, {
+		validationError,
+		variant: validationVariant,
+		__gridScope
+	}), /* @__PURE__ */ jsx(GridCellEditor, {
+		extensions,
+		slots: cellEditorSlots,
+		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;
+};
+//#endregion
+//#region src/components/Table/ColumnActionsMenu.tsx
+var ColumnActionsMenu = ({ model, modals }) => {
+	const { t } = useTranslation(translationKey);
+	const state = useAtomValue(modals.state);
+	if (state?.type !== "column") return null;
+	const currentSort = model.getSorting();
+	const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
+	return /* @__PURE__ */ jsxs(DropdownMenu.Root, {
+		modal: false,
+		open: true,
+		onOpenChange: modals.close,
+		children: [/* @__PURE__ */ jsx(DropdownMenu.VirtualTrigger, { virtualRef: modals.trigger }), /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [/* @__PURE__ */ jsxs(DropdownMenu.Viewport, { children: [
+			(!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ jsx(DropdownMenu.Item, {
+				"data-testid": "column-sort-descending",
+				onClick: () => model.setSort(state.fieldId, "desc"),
+				children: t("column-action-sort-descending.menu")
+			}),
+			(!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ jsx(DropdownMenu.Item, {
+				"data-testid": "column-sort-ascending",
+				onClick: () => model.setSort(state.fieldId, "asc"),
+				children: t("column-action-sort-ascending.menu")
+			}),
+			isCurrentColumnSorted && /* @__PURE__ */ jsx(DropdownMenu.Item, {
+				"data-testid": "column-clear-sort",
+				onClick: () => model.clearSort(),
+				children: t("column-action-clear-sorting.menu")
+			}),
+			model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ jsx(DropdownMenu.Item, {
+				"data-testid": "column-delete",
+				onClick: () => model.deleteColumn(state.fieldId),
+				children: t("column-action-delete.menu")
+			}),
+			model.features.schemaEditable && /* @__PURE__ */ jsx(DropdownMenu.Item, {
+				"data-testid": "column-settings",
+				onClick: () => modals.openColumnSettings(),
+				children: t("column-action-settings.menu")
+			})
+		] }), /* @__PURE__ */ jsx(DropdownMenu.Arrow, {})] }) })]
+	});
+};
+//#endregion
+//#region src/components/Table/ColumnSettings.tsx
+var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
+	const [newField, setNewField] = useState();
+	const state = useAtomValue(modals.state);
+	useEffect(() => {
+		if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
+			setNewField(model.projection.createFieldProjection());
+			requestAnimationFrame(() => {
+				onNewColumn();
+			});
+		} else setNewField(void 0);
+	}, [model?.projection, state]);
+	const field = useMemo(() => {
+		if (state?.type === "columnSettings") {
+			const { mode } = state;
+			if (mode.type === "edit") return model?.projection?.getFields().find((f) => f.id === mode.fieldId);
+		}
+	}, [model?.projection, state]) ?? newField;
+	const handleSave = useCallback(() => {
+		modals.close();
+	}, [modals]);
+	const handleCancel = useCallback(() => {
+		if (state?.type === "columnSettings" && state.mode.type === "create" && newField) model?.projection.deleteFieldProjection(newField.id);
+	}, [
+		model?.projection,
+		state,
+		newField
+	]);
+	if (!model?.projection || !field) return null;
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		modal: false,
+		open: state?.type === "columnSettings",
+		children: [/* @__PURE__ */ jsx(Popover.VirtualTrigger, { virtualRef: modals.trigger }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+			classNames: "md:w-64",
+			children: [/* @__PURE__ */ jsx(Popover.Viewport, { children: /* @__PURE__ */ jsx(FieldEditor, {
+				projection: model.projection,
+				field,
+				registry,
+				onSave: handleSave,
+				onCancel: handleCancel
+			}) }), /* @__PURE__ */ jsx(Popover.Arrow, {})]
+		}) })]
+	});
+};
+//#endregion
+//#region src/components/Table/RowActionsMenu.tsx
+var RowActionsMenu = ({ model, modals }) => {
+	const { t } = useTranslation(translationKey);
+	const hasSelection = model.selection.hasSelection;
+	const state = useAtomValue(modals.state);
+	if (state?.type !== "row") return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu.Root, {
+		modal: false,
+		open: true,
+		onOpenChange: modals.close,
+		children: [/* @__PURE__ */ jsx(DropdownMenu.VirtualTrigger, { virtualRef: modals.trigger }), /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [/* @__PURE__ */ jsxs(DropdownMenu.Viewport, { children: [model.rowActions?.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenu.Group, { children: model.rowActions?.map((action) => /* @__PURE__ */ jsx(DropdownMenu.Item, {
+			"data-testid": `row-action-${action.id}`,
+			onClick: () => {
+				modals.close();
+				model.handleRowAction(action.id, state.rowIndex);
+			},
+			children: toLocalizedString(action.label, t)
+		}, action.id)) }), /* @__PURE__ */ jsx(DropdownMenu.Separator, {})] }), model.features.dataEditable !== false && /* @__PURE__ */ jsx(DropdownMenu.Item, {
+			"data-testid": "row-menu-delete",
+			onClick: () => model.deleteRow(state.rowIndex),
+			children: t(hasSelection ? "bulk-delete-row.label" : "delete-row.label")
+		})] }), /* @__PURE__ */ jsx(DropdownMenu.Arrow, {})] })]
+	});
+};
+//#endregion
+//#region src/components/Table/TableContent.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/Table/TableContent.tsx";
+var columnDefault = { grid: {
+	minSize: 80,
+	maxSize: 640
+} };
+var rowDefault = { frozenRowsStart: {
+	readonly: true,
+	focusUnfurl: false
+} };
+var emptyColumnMeta = Atom$1.make({ grid: {} });
+var emptyRowsAtom = Atom$1.make([]);
+var emptyCellUpdateAtom = Atom$1.make(0);
+var TABLE_CONTENT_NAME = "Table.Content";
+var TableContent = composable(({ schema, model, presentation, ignoreAttention, attendableId, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
+	const registry = useContext(RegistryContext);
+	const [dxGrid, setDxGrid] = useState(null);
+	const { hasAttention } = useAttention(attendableId ?? model?.id ?? "table");
+	const modals = useMemo(() => new ModalController(registry), [registry]);
+	const columnMeta = useAtomValue(model?.columnMeta ?? emptyColumnMeta);
+	const rows = useAtomValue(model?.rows ?? emptyRowsAtom);
+	const cellUpdateCounter = useAtomValue(model?.cellUpdate ?? emptyCellUpdateAtom);
+	const columnCount = Object.keys(columnMeta.grid).length || model?.projection.getFields().length || 0;
+	const draftRowCount = model?.getDraftRowCount() ?? 0;
+	const frozen = useMemo(() => {
+		const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
+		return {
+			frozenRowsStart: 1,
+			frozenRowsEnd: Math.max(1, draftRowCount),
+			frozenColsStart: model?.frozenColsStart ?? 0,
+			frozenColsEnd: noActionColumn ? 0 : 1
+		};
+	}, [
+		model,
+		draftRowCount,
+		columnCount
+	]);
+	const getCells = useCallback((range, plane) => presentation?.getCells(range, plane) ?? {}, [presentation]);
+	useEffect(() => {
+		if (!dxGrid || !presentation) return;
+		dxGrid.getCells = getCells;
+	}, [
+		dxGrid,
+		presentation,
+		getCells
+	]);
+	useEffect(() => {
+		if (!dxGrid) return;
+		dxGrid.updateCells(true);
+		dxGrid.requestUpdate();
+	}, [
+		dxGrid,
+		rows,
+		cellUpdateCounter
+	]);
+	const handleInsertRowResult = useCallback((insertResult) => {
+		if (insertResult === "draft") requestAnimationFrame(() => {
+			dxGrid?.setFocus({
+				plane: "frozenRowsEnd",
+				col: 0,
+				row: 0
+			});
+			dxGrid?.refocus();
+		});
+		else requestAnimationFrame(() => {
+			dxGrid?.setFocus({
+				plane: "grid",
+				col: 0,
+				row: model ? model.getRowCount() - 1 : 0
+			});
+			dxGrid?.refocus();
+		});
+	}, [model, dxGrid]);
+	const handleSave = useCallback(() => {
+		dxGrid?.updateCells(true);
+		dxGrid?.requestUpdate();
+	}, [dxGrid]);
+	const handleSaveDraftRow = useCallback((rowIndex = 0) => {
+		if (model && dxGrid) {
+			if (model.commitDraftRow(rowIndex)) requestAnimationFrame(() => {
+				dxGrid.scrollToEndRow();
+			});
+		}
+	}, [model, dxGrid]);
+	const handleGridClick = useCallback((event) => {
+		const cell = closestCell(event.target);
+		if (cell) {
+			const { row: rowIndex, plane } = cell;
+			if (onRowClick) if (plane === "grid") {
+				const row = model?.getRowAt(rowIndex);
+				row && onRowClick(row);
+			} else onRowClick(cell);
+			if (model?.features.selection.enabled && model?.selection.selectionMode === "single") model.selection.toggleSelectionForRowIndex(rowIndex);
+		}
+		if (!modals) return;
+		const buttonSelector = Object.values(tableButtons).map((button) => `button[${button.attr}]`).join(",");
+		const tableButtonElement = event.target.closest(buttonSelector);
+		if (tableButtonElement) {
+			const button = Object.values(tableButtons).find((btn) => tableButtonElement.hasAttribute(btn.attr));
+			if (!button) return;
+			modals.setTrigger(tableButtonElement);
+			const data = button.getData(tableButtonElement);
+			switch (data.type) {
+				case "rowMenu":
+					modals.showRowMenu(data.rowIndex);
+					break;
+				case "columnSettings":
+					modals.showColumnMenu(data.fieldId);
+					break;
+				case "newColumn":
+					modals.showColumnCreator();
+					break;
+				case "sort":
+					model?.toggleSort(data.fieldId);
+					break;
+				case "saveDraftRow":
+					handleSaveDraftRow();
+					break;
+			}
+			return;
+		}
+		const controlSelector = Object.values(tableControls).map((control) => `input[${control.attr}]`).join(",");
+		const controlElement = event.target.closest(controlSelector);
+		if (controlElement) {
+			const control = Object.values(tableControls).find((ctrl) => controlElement.hasAttribute(ctrl.attr));
+			if (!control) return;
+			const data = control.getData(controlElement);
+			switch (data.type) {
+				case "checkbox":
+					if (data.header) model?.selection.setSelection(model.selection.allRowsSelected ? "none" : "all");
+					else model?.selection.toggleSelectionForRowIndex(data.rowIndex);
+					break;
+				case "switch":
+					if (model) model.updateCellData({
+						row: data.rowIndex,
+						col: data.colIndex,
+						plane: data.plane
+					}, (value) => !value);
+					break;
+			}
+		}
+	}, [
+		model,
+		modals,
+		dxGrid
+	]);
+	const handleFocus = useCallback((increment, delta, cell) => {
+		if (dxGrid && model) if (cell?.plane === "grid" && cell?.row >= model.getRowCount() - 1 && increment !== "col") handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : "final");
+		else if (cell?.plane === "frozenRowsEnd" && increment === "row") {
+			handleSaveDraftRow(cell.row);
+			handleInsertRowResult(model.insertRow());
+		} else dxGrid.refocus(increment, delta);
+	}, [dxGrid, model]);
+	const handleKeyDown = useCallback((event) => {
+		if (!model?.features.dataEditable) return;
+		const cell = closestCell(event.target);
+		if (!model || !cell) return;
+		if (event.metaKey || event.ctrlKey) switch (event.key) {
+			case "c":
+				try {
+					const textContent = model.getCellData(cell)?.toString() ?? "";
+					navigator.clipboard.writeText(textContent);
+					event.preventDefault();
+				} catch (error) {
+					log.catch(error, void 0, {
+						"~LogMeta": "~LogMeta",
+						F: __dxlog_file,
+						L: 284,
+						S: void 0
+					});
+				}
+				break;
+			case "v":
+				event.preventDefault();
+				navigator.clipboard.readText().then((clipboardText) => {
+					try {
+						model.setCellData(cell, String$1.trim(clipboardText).replace(/[\n\r]+/, " "));
+						handleSave();
+					} catch {
+						const cellElement = event.target.closest("[data-dx-grid-action=\"cell\"]");
+						if (cellElement) {
+							const rect = cellElement.getBoundingClientRect();
+							const editRequest = new DxEditRequest({
+								cellIndex: `${cell.plane},${cell.col},${cell.row}`,
+								cellBox: {
+									insetInlineStart: rect.left,
+									insetBlockStart: rect.top,
+									inlineSize: rect.width,
+									blockSize: rect.height
+								},
+								cellElement,
+								initialContent: clipboardText
+							});
+							cellElement.dispatchEvent(editRequest);
+						}
+					}
+				});
+				break;
+		}
+		switch (event.key) {
+			case "Backspace":
+			case "Delete":
+				try {
+					model.setCellData(cell, void 0);
+					event.preventDefault();
+					handleSave();
+				} catch {}
+				break;
+		}
+	}, [
+		model,
+		dxGrid,
+		handleSave
+	]);
+	const handleAxisResize = useCallback((event) => {
+		if (event.axis === "col") {
+			const columnIndex = parseInt(event.index, 10);
+			model?.setColumnWidth(columnIndex, event.size, event.plane);
+		}
+	}, [model]);
+	const handleWheel = useCallback((event) => {
+		if (!ignoreAttention && !hasAttention) event.stopPropagation();
+	}, [hasAttention, ignoreAttention]);
+	const handleNewColumn = useCallback(() => {
+		const columns = model?.getColumnCount();
+		if (dxGrid && columns) dxGrid.scrollToColumn(columns - 1);
+	}, [model, dxGrid]);
+	const { controllerRef } = useTableContext(TABLE_CONTENT_NAME);
+	controllerRef.current = useMemo(() => {
+		if (!dxGrid || !presentation) return {};
+		return {
+			update: (cell) => {
+				if (cell) dxGrid.updateIfWithinBounds(cell, true);
+				else {
+					dxGrid.updateCells(true);
+					dxGrid.requestUpdate();
+				}
+			},
+			handleInsertRowResult
+		};
+	}, [
+		dxGrid,
+		model,
+		presentation
+	]);
+	if (!model || !modals) return /* @__PURE__ */ jsx("span", { className: "dx-attention-surface" });
+	return /* @__PURE__ */ jsx("div", {
+		...composableProps(props, { classNames: "dx-container relative" }),
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsxs(Grid.Root, {
+			id: model.id ?? "table-grid",
+			children: [
+				/* @__PURE__ */ jsx(TableValueEditor, {
+					model,
+					modals,
+					schema,
+					onFocus: handleFocus,
+					onSave: handleSave,
+					onCreate
+				}),
+				/* @__PURE__ */ jsx(Grid.Content, {
+					className: mx("[--dx-grid-base:var(--base-surface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
+					frozen,
+					columns: columnMeta,
+					columnDefault,
+					rowDefault,
+					limitRows: rows.length,
+					limitColumns: columnCount,
+					overscroll: "trap",
+					onAxisResize: handleAxisResize,
+					onClick: handleGridClick,
+					onKeyDownCapture: handleKeyDown,
+					onWheelCapture: handleWheel,
+					...testId && { "data-testid": testId },
+					ref: setDxGrid
+				}),
+				/* @__PURE__ */ jsx(RowActionsMenu, {
+					model,
+					modals
+				}),
+				/* @__PURE__ */ jsx(ColumnActionsMenu, {
+					model,
+					modals
+				}),
+				/* @__PURE__ */ jsx(ColumnSettings, {
+					model,
+					modals,
+					onNewColumn: handleNewColumn
+				})
+			]
+		})
+	});
+});
+TableContent.displayName = TABLE_CONTENT_NAME;
+//#endregion
+//#region src/components/Table/TableToolbar.tsx
+var createTableToolbarActions = ({ stateAtom, onAdd, onSave, onExport, customActions }) => Atom$1.make((get) => {
+	const nodes = [];
+	const edges = [];
+	if (onAdd) {
+		const add = createMenuAction("add-row", onAdd, {
+			type: "add-row",
+			icon: "ph--plus--regular",
+			label: ["add-row.label", { ns: translationKey }],
+			testId: "table.toolbar.add-row"
+		});
+		nodes.push(add);
+		edges.push({
+			source: "root",
+			target: add.id,
+			relation: "child"
+		});
+	}
+	if (onSave) {
+		const state = get(stateAtom);
+		const save = createMenuAction("save-view", onSave, {
+			type: "save-view",
+			icon: "ph--floppy-disk--regular",
+			label: ["save-view.label", { ns: translationKey }],
+			testId: "table.toolbar.save-view",
+			iconOnly: false,
+			hidden: !state.viewDirty
+		});
+		nodes.push(save);
+		edges.push({
+			source: "root",
+			target: save.id,
+			relation: "child"
+		});
+	}
+	if (onExport) {
+		const exportGroup = createMenuItemGroup("export-rows", {
+			label: ["export-rows.menu", { ns: translationKey }],
+			icon: "ph--export--regular",
+			iconOnly: true,
+			variant: "dropdownMenu"
+		});
+		nodes.push(exportGroup);
+		edges.push({
+			source: "root",
+			target: exportGroup.id,
+			relation: "child"
+		});
+		for (const { format, type, label } of [
+			{
+				format: "csv",
+				type: "export-csv",
+				label: "export-rows-csv.menu"
+			},
+			{
+				format: "json",
+				type: "export-json",
+				label: "export-rows-json.menu"
+			},
+			{
+				format: "xml",
+				type: "export-xml",
+				label: "export-rows-xml.menu"
+			}
+		]) {
+			const action = createMenuAction(type, () => onExport(format), {
+				type,
+				label: [label, { ns: translationKey }]
+			});
+			nodes.push(action);
+			edges.push({
+				source: exportGroup.id,
+				target: action.id,
+				relation: "child"
+			});
+		}
+	}
+	const gap = createGapSeparator();
+	nodes.push(...gap.nodes);
+	edges.push(...gap.edges);
+	if (customActions) {
+		const custom = get(customActions);
+		nodes.push(...custom.nodes);
+		edges.push(...custom.edges);
+	}
+	return {
+		nodes,
+		edges
+	};
+});
+var TableToolbar = composable(({ attendableId, viewDirty, onAdd, onSave, onExport, customActions, ...props }, forwardedRef) => {
+	const registry = useContext(RegistryContext);
+	const stateAtom = useMemo(() => Atom$1.make({ viewDirty }), []);
+	useEffect(() => {
+		registry.set(stateAtom, { viewDirty });
+	}, [
+		registry,
+		stateAtom,
+		viewDirty
+	]);
+	const menuActions = useMenuActions(useMemo(() => createTableToolbarActions({
+		stateAtom,
+		onAdd,
+		onSave,
+		onExport,
+		customActions
+	}), [
+		stateAtom,
+		onAdd,
+		onSave,
+		onExport,
+		customActions
+	]));
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		...menuActions,
+		attendableId,
+		children: /* @__PURE__ */ jsx(Menu.Toolbar, {
+			...composableProps(props),
+			ref: forwardedRef
+		})
+	});
+});
+TableToolbar.displayName = "TableToolbar";
+//#endregion
+//#region src/components/Table/Table.tsx
+Atom.make({ grid: {} });
+var TABLE_ROOT_NAME = "Table.Root";
+var TableRoot = forwardRef(({ children }, forwardedRef) => {
+	const controllerRef = useRef({});
+	useImperativeHandle(forwardedRef, () => ({
+		update: (cell) => controllerRef.current?.update?.(cell),
+		handleInsertRowResult: (result) => controllerRef.current?.handleInsertRowResult?.(result)
+	}), []);
+	return /* @__PURE__ */ jsx(TableContextProvider, {
+		controllerRef,
+		children
+	});
+});
+TableRoot.displayName = TABLE_ROOT_NAME;
+var Table = {
+	Root: TableRoot,
+	Toolbar: TableToolbar,
+	Content: TableContent
+};
+//#endregion
+//#region src/components/Table/DynamicTable.tsx
+/**
+* Properties define both the schema and display characteristics of the table columns.
+*/
+var DynamicTable = ({ classNames, type: typeProp, name = "com.example.dynamicTable", rows, properties, jsonSchema: jsonSchemaProp, rowActions, selection, onRowClick, onRowAction, onSelectionChanged, ...props }) => {
+	const registry = useContext(RegistryContext);
+	const [dynamicTable, setDynamicTable] = useState();
+	const { type } = useMemo(() => getBaseSchema({
+		typename: name,
+		properties,
+		jsonSchema: jsonSchemaProp,
+		type: typeProp
+	}), [
+		name,
+		properties,
+		jsonSchemaProp,
+		typeProp
+	]);
+	useEffect(() => {
+		setDynamicTable(makeDynamicTable({
+			registry,
+			type,
+			properties
+		}));
+	}, [
+		registry,
+		type,
+		properties
+	]);
+	const tableRef = useRef(null);
+	const handleCellUpdate = useCallback((cell) => {
+		tableRef.current?.update?.(cell);
+	}, []);
+	const handleRowOrderChange = useCallback(() => {
+		tableRef.current?.update?.();
+	}, []);
+	const features = useDefaultValue(props.features, () => ({
+		selection: { enabled: false },
+		dataEditable: false
+	}));
+	const model = useTableModel({
+		rows,
+		object: dynamicTable?.object,
+		projection: dynamicTable?.projection,
+		features,
+		rowActions,
+		selection,
+		onCellUpdate: handleCellUpdate,
+		onRowOrderChange: handleRowOrderChange,
+		onRowAction,
+		onSelectionChanged
+	});
+	const presentation = useMemo(() => {
+		if (model) return new TablePresentation(registry, model);
+	}, [registry, model]);
+	return /* @__PURE__ */ jsx(Table.Root, {
+		ref: tableRef,
+		children: /* @__PURE__ */ jsx(Table.Content, {
+			classNames,
+			model,
+			presentation,
+			ignoreAttention: true,
+			onRowClick
+		})
+	});
+};
+//#endregion
+export { BUTTON_IDENTIFIERS, CONTROL_IDENTIFIERS, CheckboxComponent, DynamicTable, FieldSortSchema, ModalController, SwitchComponent, Table, TableModel, TablePresentation, cellClassesForRowSelection, compareValues, createDirectChangeCallback, createEchoChangeCallback, extractOrder, getBaseSchema, getSortValue, makeDynamicTable, narrowSchema, tableButtons, tableControls, tableSortAspect, touch, useAddRow, useProjectionModel, useTableContext, useTableModel };
+
+//# sourceMappingURL=index.mjs.map