@revisium/schema-toolkit-ui 0.6.3 → 0.6.5

package/README.md

@@ -236,6 +236,7 @@ All callbacks are optional and passed via `TableEditorOptions.callbacks`:
 | `onBreadcrumbClick` | `(segment, index) => void` | Navigate on breadcrumb click |
 | `onCreateRow` | `() => void` | Create a new row (shows "+" button) |
 | `onOpenRow` | `(rowId: string) => void` | Navigate to row detail view |
+| `onPickRow` | `(rowId: string) => void` | Pick a row (e.g. foreign key selection). When set, the primary row action becomes "Pick" and the table behaves as read-only |
 | `onDuplicateRow` | `(rowId: string) => void` | Duplicate a row |
 | `onSearchForeignKey` | `SearchForeignKeySearchFn` | Foreign key search handler |
 | `onUploadFile` | `(params: { rowId: string; fileId: string; file: File }) => Promise<Record<string, unknown> \| null>` | Upload a file for a file field |

package/dist/index.cjs

@@ -5757,21 +5757,25 @@ const Row = ({ node, name, guides, isCollapsible = false, isExpanded = true, onT
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Flex, {
 				width: "100%",
 				alignItems: "center",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Flex, { children: [
-					!skipDot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {
-						isCollapsed,
-						isCollapsible,
-						toggleCollapsed: onToggle,
-						testId
-					}),
-					!skipField && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-						name,
-						formula,
-						description,
-						isDeprecated
-					}),
-					children
-				] }), !skipMore && isCollapsed && collapsedLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(More, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Flex, {
+					flex: skipDot && skipField ? 1 : void 0,
+					minWidth: 0,
+					children: [
+						!skipDot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {
+							isCollapsed,
+							isCollapsible,
+							toggleCollapsed: onToggle,
+							testId
+						}),
+						!skipField && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+							name,
+							formula,
+							description,
+							isDeprecated
+						}),
+						children
+					]
+				}), !skipMore && isCollapsed && collapsedLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(More, {
 					onClick: onToggle,
 					label: collapsedLabel
 				})]
@@ -6997,7 +7001,10 @@ var SchemaContext = class {
 		const wrapped = wrapDataSchema(dataSchema);
 		this._wrappedDataSchema = wrapped;
 		const rowSchema = buildRowSchema(wrapped);
-		this._rootNode = new _revisium_schema_toolkit.SchemaParser().parse(rowSchema, this._fullRefSchemas);
+		const parser = new _revisium_schema_toolkit.SchemaParser();
+		this._rootNode = parser.parse(rowSchema, this._fullRefSchemas);
+		const tree = (0, _revisium_schema_toolkit.createSchemaTree)(this._rootNode);
+		parser.parseFormulas(tree);
 		this._allColumns = extractColumns(this._rootNode);
 	}
 };
@@ -10433,13 +10440,15 @@ var CellVM = class {
 	_cellFSM;
 	_onCommit;
 	_systemValues;
-	constructor(rowModel, column, rowId, cellFSM, onCommit, systemValues) {
+	_readonly;
+	constructor(rowModel, column, rowId, cellFSM, onCommit, systemValues, readonly) {
 		this._rowModel = rowModel;
 		this._column = column;
 		this._rowId = rowId;
 		this._cellFSM = cellFSM;
 		this._onCommit = onCommit ?? null;
 		this._systemValues = systemValues ?? null;
+		this._readonly = readonly ?? false;
 		(0, mobx.makeAutoObservable)(this, { selectionEdges: (0, mobx.computed)({ equals: mobx.comparer.structural }) }, { autoBind: true });
 	}
 	get field() {
@@ -10476,6 +10485,7 @@ var CellVM = class {
 		return "";
 	}
 	get isReadOnly() {
+		if (this._readonly) return true;
 		if (this._systemValues) return true;
 		if (this._column.fieldType === FilterFieldType.File) {
 			const fileNameNode = this._getFileNameNode();
@@ -10721,14 +10731,16 @@ var RowVM = class {
 	_selection;
 	_onCellCommit;
 	_systemValues;
+	_readonly;
 	_cellCache = /* @__PURE__ */ new Map();
-	constructor(rowModel, rowId, cellFSM, selection, onCellCommit, systemValues) {
+	constructor(rowModel, rowId, cellFSM, selection, onCellCommit, systemValues, readonly) {
 		this._rowModel = rowModel;
 		this._rowId = rowId;
 		this._cellFSM = cellFSM;
 		this._selection = selection;
 		this._onCellCommit = onCellCommit ?? null;
 		this._systemValues = systemValues ?? {};
+		this._readonly = readonly ?? false;
 		(0, mobx.makeAutoObservable)(this, {}, { autoBind: true });
 	}
 	get rowId() {
@@ -10746,7 +10758,7 @@ var RowVM = class {
 	getCellVM(column) {
 		const cached = this._cellCache.get(column.field);
 		if (cached) return cached;
-		const cell = new CellVM(this._rowModel, column, this._rowId, this._cellFSM, this._onCellCommit ?? void 0, column.isSystem ? this._systemValues : void 0);
+		const cell = new CellVM(this._rowModel, column, this._rowId, this._cellFSM, this._onCellCommit ?? void 0, column.isSystem ? this._systemValues : void 0, this._readonly);
 		this._cellCache.set(column.field, cell);
 		return cell;
 	}
@@ -12179,6 +12191,19 @@ const FilterIndicator = (0, mobx_react_lite.observer)(({ field, filterModel }) =
 	});
 });
 
+//#endregion
+//#region src/table-editor/Table/ui/Header/FormulaIndicator.tsx
+const FormulaIndicator = ({ column }) => {
+	if (!column.hasFormula) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Flex, {
+		alignItems: "center",
+		color: "gray.400",
+		flexShrink: 0,
+		"data-testid": `formula-indicator-${column.field}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiFunction, { size: 12 })
+	});
+};
+
 //#endregion
 //#region src/table-editor/Table/ui/Header/SortSubmenu.tsx
 const SortSubmenu = (0, mobx_react_lite.observer)(({ field, sortModel }) => {
@@ -12447,10 +12472,6 @@ const ColumnHeaderMenu = (0, mobx_react_lite.observer)(({ column, columnsModel,
 				onClick: handleAddFilter,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_lu.LuFilter, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Text, { children: "Add filter" })]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Menu.Separator, {})] }),
-			canMove && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoveColumnSubmenu, {
-				field: column.field,
-				columnsModel
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Menu.Separator, {})] }),
 			isPinned ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Menu.Item, {
 				value: "unpin",
 				onClick: handleUnpin,
@@ -12468,6 +12489,10 @@ const ColumnHeaderMenu = (0, mobx_react_lite.observer)(({ column, columnsModel,
 				}),
 				(canPinLeft || canPinRight) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Menu.Separator, {})
 			] }),
+			canMove && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoveColumnSubmenu, {
+				field: column.field,
+				columnsModel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Menu.Separator, {})] }),
 			hasInsertableFields && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InsertColumnSubmenu, {
 					label: "Insert before",
@@ -12594,6 +12619,7 @@ const ColumnHeader = (0, mobx_react_lite.observer)(({ column, columnsModel, sort
 							textDecoration: column.isDeprecated ? "line-through" : void 0,
 							children: column.label
 						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormulaIndicator, { column }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinIndicator, {
 							field: column.field,
 							columnsModel
@@ -12795,8 +12821,12 @@ const RowActionMenuItems = ({ rowId, testIdPrefix, onSelect, onDuplicate, onDele
 
 //#endregion
 //#region src/table-editor/Table/ui/RowActionOverlay.tsx
-const RowActionOverlay = ({ rowId, onOpen, onSelect, onDuplicate, onDelete }) => {
+const RowActionOverlay = ({ rowId, onOpen, onPick, onSelect, onDuplicate, onDelete }) => {
 	const [isMenuOpen, setIsMenuOpen] = (0, react.useState)(false);
+	const primaryAction = onPick ?? onOpen;
+	const primaryIcon = onPick ? react_icons_pi.PiCheckSquare : react_icons_pi.PiArrowSquareRightLight;
+	const primaryTestId = onPick ? `row-action-pick-${rowId}` : `row-action-open-${rowId}`;
+	const hasMenuItems = Boolean(onOpen || onSelect || onDuplicate || onDelete);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Flex, {
 		position: "absolute",
 		right: "8px",
@@ -12814,7 +12844,7 @@ const RowActionOverlay = ({ rowId, onOpen, onSelect, onDuplicate, onDelete }) =>
 			boxShadow: "0px 2px 8px rgba(0,0,0,0.16)",
 			overflow: "hidden",
 			"data-testid": `row-action-split-${rowId}`,
-			children: [onOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Flex, {
+			children: [primaryAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Flex, {
 				alignItems: "center",
 				justifyContent: "center",
 				height: "100%",
@@ -12824,15 +12854,15 @@ const RowActionOverlay = ({ rowId, onOpen, onSelect, onDuplicate, onDelete }) =>
 				_hover: { bg: "gray.100" },
 				onClick: (e) => {
 					e.stopPropagation();
-					onOpen(rowId);
+					primaryAction(rowId);
 				},
-				"data-testid": `row-action-open-${rowId}`,
+				"data-testid": primaryTestId,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Icon, {
 					boxSize: "20px",
 					color: "gray.400",
-					as: react_icons_pi.PiArrowSquareRightLight
+					as: primaryIcon
 				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Menu.Root, {
+			}), hasMenuItems && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Menu.Root, {
 				lazyMount: true,
 				unmountOnExit: true,
 				onOpenChange: ({ open }) => setIsMenuOpen(open),
@@ -12846,7 +12876,7 @@ const RowActionOverlay = ({ rowId, onOpen, onSelect, onDuplicate, onDelete }) =>
 						width: "18px",
 						minWidth: "18px",
 						cursor: "pointer",
-						borderLeft: onOpen ? "1px solid" : void 0,
+						borderLeft: primaryAction ? "1px solid" : void 0,
 						borderColor: "gray.100",
 						_hover: { bg: "gray.100" },
 						onClick: (e) => e.stopPropagation(),
@@ -12972,8 +13002,8 @@ function getCellBoxShadow(isSticky, side) {
 	if (!isSticky) return BOTTOM_BORDER_SHADOW;
 	return `${BOTTOM_BORDER_SHADOW}, ${side === "left" ? `inset -1px 0 0 0 ${CELL_BORDER_COLOR}` : `inset 1px 0 0 0 ${CELL_BORDER_COLOR}`}`;
 }
-const DataRow = (0, mobx_react_lite.observer)(({ row, columnsModel, showSelection, onSearchForeignKey, onUploadFile, onOpenFile, onOpenRow, onSelectRow, onDuplicateRow, onDeleteRow }) => {
-	const hasRowActions = Boolean(onOpenRow || onSelectRow || onDuplicateRow || onDeleteRow);
+const DataRow = (0, mobx_react_lite.observer)(({ row, columnsModel, showSelection, onSearchForeignKey, onUploadFile, onOpenFile, onOpenRow, onPickRow, onSelectRow, onDuplicateRow, onDeleteRow }) => {
+	const hasRowActions = Boolean(onOpenRow || onPickRow || onSelectRow || onDuplicateRow || onDeleteRow);
 	const selectionWidth = showSelection ? SELECTION_COLUMN_WIDTH : 0;
 	const addColumnStickyRight = columnsModel.hasHiddenColumns;
 	const addColOffset = addColumnStickyRight ? ADD_COLUMN_BUTTON_WIDTH : 0;
@@ -13020,6 +13050,7 @@ const DataRow = (0, mobx_react_lite.observer)(({ row, columnsModel, showSelectio
 				}), showOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowActionOverlay, {
 					rowId: row.rowId,
 					onOpen: onOpenRow,
+					onPick: onPickRow,
 					onSelect: onSelectRow,
 					onDuplicate: onDuplicateRow,
 					onDelete: onDeleteRow
@@ -13310,7 +13341,7 @@ const baseComponents = {
 	Table: TableComponent,
 	TableRow: TableRowComponent
 };
-const TableWidget = (0, mobx_react_lite.observer)(({ rows, columnsModel, cellFSM, selection, sortModel, filterModel, onSearchForeignKey, onUploadFile, onOpenFile, onOpenRow, onDeleteSelected, onDuplicateSelected, onDeleteRow, onDuplicateRow, onCopyPath, onEndReached, isLoadingMore, useWindowScroll: useWindowScrollProp }) => {
+const TableWidget = (0, mobx_react_lite.observer)(({ rows, columnsModel, cellFSM, selection, sortModel, filterModel, onSearchForeignKey, onUploadFile, onOpenFile, onOpenRow, onPickRow, onDeleteSelected, onDuplicateSelected, onDeleteRow, onDuplicateRow, onCopyPath, onEndReached, isLoadingMore, useWindowScroll: useWindowScrollProp }) => {
 	const showSelection = selection.isSelectionMode;
 	const allRowIds = rows.map((r) => r.rowId);
 	const [deleteConfirm, setDeleteConfirm] = (0, react.useState)(null);
@@ -13437,6 +13468,7 @@ const TableWidget = (0, mobx_react_lite.observer)(({ rows, columnsModel, cellFSM
 		onUploadFile,
 		onOpenFile,
 		onOpenRow,
+		onPickRow,
 		onSelectRow: canSelect ? handleSelectRow : void 0,
 		onDuplicateRow: canDuplicateRow ? onDuplicateRow : void 0,
 		onDeleteRow: canDeleteRow ? handleDeleteRowRequest : void 0
@@ -13447,6 +13479,7 @@ const TableWidget = (0, mobx_react_lite.observer)(({ rows, columnsModel, cellFSM
 		onUploadFile,
 		onOpenFile,
 		onOpenRow,
+		onPickRow,
 		canSelect,
 		canDeleteRow,
 		canDuplicateRow,
@@ -13755,6 +13788,7 @@ var TableEditorCore = class {
 		this._dataSource = dataSource;
 		this._tableId = options.tableId;
 		this._pageSize = options.pageSize ?? DEFAULT_PAGE_SIZE;
+		this._readonly = options.readonly ?? false;
 		this._breadcrumbs = options.breadcrumbs ?? [];
 		this._callbacks = options.callbacks ?? {};
 		this.columns = new ColumnsModel();
@@ -13851,8 +13885,8 @@ var TableEditorCore = class {
 			const meta = await this._dataSource.fetchMetadata();
 			(0, mobx.runInAction)(() => {
 				this._schemaContext.init(meta.dataSchema, meta.refSchemas);
-				this._readonly = meta.readonly;
-				this.viewBadge.setCanSave(!meta.readonly);
+				this._readonly = this._readonly || meta.readonly;
+				this.viewBadge.setCanSave(!this._readonly);
 			});
 			this.columns.init(this._schemaContext.allColumns);
 			this.sorts.init(this._schemaContext.sortableFields);
@@ -13923,7 +13957,7 @@ var TableEditorCore = class {
 		});
 		const systemValuesMap = /* @__PURE__ */ new Map();
 		for (const raw of rawRows) systemValuesMap.set(raw.rowId, this._buildSystemValues(raw));
-		return tableModel.rows.map((rowModel) => new RowVM(rowModel, rowModel.rowId, this.cellFSM, this.selection, (rowId, field, value, previousValue) => this._commitCell(rowId, field, value, previousValue), systemValuesMap.get(rowModel.rowId)));
+		return tableModel.rows.map((rowModel) => new RowVM(rowModel, rowModel.rowId, this.cellFSM, this.selection, (rowId, field, value, previousValue) => this._commitCell(rowId, field, value, previousValue), systemValuesMap.get(rowModel.rowId), this._readonly));
 	}
 	_buildSystemValues(rawRow) {
 		return {
@@ -14277,6 +14311,7 @@ const TableEditor = (0, mobx_react_lite.observer)(({ viewModel, useWindowScroll
 					isLoadingMore: viewModel.isLoadingMore,
 					onEndReached: viewModel.loadMore,
 					onOpenRow: callbacks.onOpenRow,
+					onPickRow: callbacks.onPickRow,
 					onDeleteRow: isReadonly ? void 0 : (id) => viewModel.deleteRows([id]),
 					onDuplicateRow: isReadonly ? void 0 : callbacks.onDuplicateRow,
 					onDeleteSelected: isReadonly ? void 0 : (ids) => viewModel.deleteRows(ids),