@proteinjs/db-ui 1.11.3 → 1.12.0

package/dist/test/recordFormFieldRenderers.test.js

@@ -0,0 +1,323 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @jest-environment jsdom
+ *
+ * Custom field components on the record form (`RecordFormCustomization.getFieldRenderer`).
+ *
+ * A customization can take over a field's slot with its own component. The component OWNS the
+ * field: it presents the stored value and routes edits through a service of its own, then calls
+ * `reload` so the slot shows the stored truth. Consequences pinned here:
+ *  - the component renders in the field's slot instead of the default control, and declaring a
+ *    renderer surfaces a column the default form hides (ArrayColumn is ui.hidden by default —
+ *    the reason user.roles never appeared on the user form);
+ *  - the form's save payload never carries a custom-rendered field (its writes are the
+ *    component's, through its service — a form save that echoed the value back would either be
+ *    refused as a protected-column write or clobber the service's state);
+ *  - `reload` re-reads the record through the db service and re-renders the slot;
+ *  - renderers are not consulted on the new-record form: a record that doesn't exist yet has no
+ *    stored state to present or service to write through.
+ */
+var react_1 = __importDefault(require("react"));
+var client_1 = require("react-dom/client");
+var test_utils_1 = require("react-dom/test-utils");
+var react_router_dom_1 = require("react-router-dom");
+var db_1 = require("@proteinjs/db");
+require("../generated");
+var RecordForm_1 = require("../src/form/RecordForm");
+var RecordFormCustomization_1 = require("../src/form/RecordFormCustomization");
+var DocTable = /** @class */ (function (_super) {
+    __extends(DocTable, _super);
+    function DocTable() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.name = 'field_renderer_test_doc';
+        _this.columns = (0, db_1.withRecordColumns)({
+            title: new db_1.StringColumn('title'),
+            // ArrayColumn is ui.hidden by default; only the renderer surfaces it
+            labels: new db_1.ArrayColumn('labels'),
+        });
+        return _this;
+    }
+    return DocTable;
+}(db_1.Table));
+/** The stored row the (fake) labels service writes and the db service reads back. */
+var stored;
+var mockLabelsService = {
+    addLabel: jest.fn(function (docId, label) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            stored = __assign(__assign({}, stored), { labels: __spreadArray(__spreadArray([], stored.labels, true), [label], false) });
+            return [2 /*return*/];
+        });
+    }); }),
+};
+var mockDbService = {
+    get: jest.fn(function (table, query) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, stored];
+    }); }); }),
+    insert: jest.fn(function (table, record) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, record];
+    }); }); }),
+    update: jest.fn(function (table, record) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, record];
+    }); }); }),
+    delete: jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, 1];
+    }); }); }),
+};
+jest.mock('@proteinjs/db', function () { return (__assign(__assign({}, jest.requireActual('@proteinjs/db')), { getDbService: function () { return mockDbService; } })); });
+function LabelsField(_a) {
+    var _this = this;
+    var record = _a.record, value = _a.value, reload = _a.reload, label = _a.label;
+    return (react_1.default.createElement("div", { "data-field-renderer": 'labels' },
+        react_1.default.createElement("span", null, label),
+        value.map(function (item) { return (react_1.default.createElement("span", { key: item, "data-label-chip": true }, item)); }),
+        react_1.default.createElement("button", { type: 'button', onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mockLabelsService.addLabel(record.id, 'c')];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, reload()];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); } }, "Add label")));
+}
+var DocRecordFormCustomization = /** @class */ (function (_super) {
+    __extends(DocRecordFormCustomization, _super);
+    function DocRecordFormCustomization() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.table = new DocTable();
+        return _this;
+    }
+    DocRecordFormCustomization.prototype.getFieldRenderer = function (fieldName, record) {
+        return fieldName === 'labels' ? LabelsField : undefined;
+    };
+    return DocRecordFormCustomization;
+}(RecordFormCustomization_1.RecordFormCustomization));
+// Stands in for the SourceRepository registration a real customization gets from reflection-build.
+jest.mock('../src/form/RecordFormCustomization', function () { return (__assign(__assign({}, jest.requireActual('../src/form/RecordFormCustomization')), { getRecordFormCustomization: function (tableName) {
+        return tableName === 'field_renderer_test_doc' ? new DocRecordFormCustomization() : undefined;
+    } })); });
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+describe('RecordForm custom field renderers', function () {
+    var container;
+    var root;
+    beforeEach(function () {
+        jest.clearAllMocks();
+        stored = { id: 'doc-1', title: 'Doc', labels: ['a', 'b'] };
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = (0, client_1.createRoot)(container);
+    });
+    afterEach(function () {
+        (0, test_utils_1.act)(function () {
+            root.unmount();
+        });
+        container.remove();
+    });
+    var mount = function (record) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            root.render(react_1.default.createElement(react_router_dom_1.MemoryRouter, null,
+                                react_1.default.createElement(RecordForm_1.RecordForm, { table: new DocTable(), record: record })));
+                            return [2 /*return*/];
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, Promise.resolve()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var findButton = function (name) {
+        var button = Array.from(document.querySelectorAll('button')).find(function (b) { return b.textContent === name; });
+        if (!button) {
+            throw new Error("Button not rendered: ".concat(name));
+        }
+        return button;
+    };
+    var click = function (element) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                            return [2 /*return*/];
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, Promise.resolve()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var chips = function () { return Array.from(document.querySelectorAll('[data-label-chip]')).map(function (chip) { return chip.textContent; }); };
+    var labelsInput = function () { return Array.from(document.querySelectorAll('label')).find(function (l) { return l.textContent === 'Labels'; }); };
+    it('renders the customization component in the field slot, surfacing a column the default form hides', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, mount(__assign({}, stored))];
+                case 1:
+                    _a.sent();
+                    expect(document.querySelector('[data-field-renderer="labels"]')).not.toBeNull();
+                    expect(chips()).toEqual(['a', 'b']);
+                    // The default control is replaced, not doubled: no text input for the field
+                    expect(labelsInput()).toBeUndefined();
+                    // Default controls still render for the other columns
+                    expect(Array.from(document.querySelectorAll('label')).some(function (l) { var _a; return (_a = l.textContent) === null || _a === void 0 ? void 0 : _a.startsWith('Title'); })).toBe(true);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('never carries a custom-rendered field in the save payload', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var payload;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, mount(__assign({}, stored))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, click(findButton('Save'))];
+                case 2:
+                    _a.sent();
+                    expect(mockDbService.update).toHaveBeenCalledTimes(1);
+                    payload = mockDbService.update.mock.calls[0][1];
+                    expect(payload.title).toBe('Doc');
+                    expect('labels' in payload).toBe(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('reload re-reads the record so the slot shows the stored truth after a service write', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, mount(__assign({}, stored))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, click(findButton('Add label'))];
+                case 2:
+                    _a.sent();
+                    expect(mockLabelsService.addLabel).toHaveBeenCalledWith('doc-1', 'c');
+                    expect(mockDbService.get).toHaveBeenCalledTimes(1);
+                    expect(mockDbService.get.mock.calls[0][1]).toEqual({ id: 'doc-1' });
+                    expect(chips()).toEqual(['a', 'b', 'c']);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('does not consult renderers on the new-record form; hidden columns stay hidden there', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, mount(undefined)];
+                case 1:
+                    _a.sent();
+                    expect(document.querySelector('[data-field-renderer="labels"]')).toBeNull();
+                    expect(labelsInput()).toBeUndefined();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=recordFormFieldRenderers.test.js.map

package/dist/test/recordFormFieldRenderers.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordFormFieldRenderers.test.js","sourceRoot":"","sources":["../../test/recordFormFieldRenderers.test.tsx"],"names":[],"mappings":"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"}

package/generated/index.ts

@@ -6,7 +6,7 @@ import '@proteinjs/ui';
 /** Generate Source Graph */
 
 const sourceGraph =
-  '{"options":{"directed":true,"multigraph":false,"compound":false},"nodes":[{"v":"@proteinjs/db-ui/QueryCursorLoader","value":{"packageName":"@proteinjs/db-ui","name":"QueryCursorLoader","filePath":"src/table/QueryCursorLoader.ts","qualifiedName":"@proteinjs/db-ui/QueryCursorLoader","isAbstract":false,"isStatic":false,"visibility":"public","properties":[{"name":"reactQueryKeys","type":{"packageName":"@proteinjs/ui","name":"ReactQueryKeys","filePath":null,"qualifiedName":"@proteinjs/ui/ReactQueryKeys","typeParameters":null,"directParents":null},"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public"},{"name":"pager","type":{"packageName":"","name":"CursorWindowPager<T>","filePath":null,"qualifiedName":"/CursorWindowPager<T>","typeParameters":null,"directParents":null},"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"private"}],"methods":[{"name":"loadWindow","returnType":{"packageName":"","name":"Promise<CursorWindow<T>>","filePath":null,"qualifiedName":"/Promise<CursorWindow<T>>","typeParameters":null,"directParents":null},"isAsync":true,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"cursor","type":{"packageName":"","name":"CursorValue | null","filePath":null,"qualifiedName":"/CursorValue | null","typeParameters":null,"directParents":null}},{"name":"windowSize","type":{"packageName":"","name":"number","filePath":null,"qualifiedName":"/number","typeParameters":null,"directParents":null}}]}],"typeParameters":["/T extends Record"],"directParentInterfaces":[{"packageName":"@proteinjs/ui","name":"CursorLoader","filePath":null,"qualifiedName":"@proteinjs/ui/CursorLoader","properties":[],"methods":[],"typeParameters":["/T"],"directParents":[]}],"directParentClasses":[],"sourceType":2}},{"v":"@proteinjs/ui/CursorLoader"},{"v":"@proteinjs/db-ui/QueryTableLoader","value":{"packageName":"@proteinjs/db-ui","name":"QueryTableLoader","filePath":"src/table/QueryTableLoader.ts","qualifiedName":"@proteinjs/db-ui/QueryTableLoader","isAbstract":false,"isStatic":false,"visibility":"public","properties":[{"name":"rowCountQb","type":{"packageName":"","name":"QueryBuilder<T>","filePath":null,"qualifiedName":"/QueryBuilder<T>","typeParameters":null,"directParents":null},"isOptional":true,"isAbstract":false,"isStatic":false,"visibility":"private"},{"name":"paginationQb","type":{"packageName":"","name":"QueryBuilder<T>","filePath":null,"qualifiedName":"/QueryBuilder<T>","typeParameters":null,"directParents":null},"isOptional":true,"isAbstract":false,"isStatic":false,"visibility":"private"},{"name":"reactQueryKeys","type":{"packageName":"","name":"TableLoader<T>[\'reactQueryKeys\']","filePath":null,"qualifiedName":"/TableLoader<T>[\'reactQueryKeys\']","typeParameters":null,"directParents":null},"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public"},{"name":"table","type":{"packageName":"","name":"Table<T>","filePath":null,"qualifiedName":"/Table<T>","typeParameters":null,"directParents":null},"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"private"},{"name":"query","type":{"packageName":"","name":"Query<T>","filePath":null,"qualifiedName":"/Query<T>","typeParameters":null,"directParents":null},"isOptional":true,"isAbstract":false,"isStatic":false,"visibility":"private"},{"name":"sort","type":{"packageName":"","name":"SortCriteria<T>[]","filePath":null,"qualifiedName":"/SortCriteria<T>[]","typeParameters":null,"directParents":null},"isOptional":true,"isAbstract":false,"isStatic":false,"visibility":"private"},{"name":"queryOptions","type":{"packageName":"","name":"QueryOptions<T>","filePath":null,"qualifiedName":"/QueryOptions<T>","typeParameters":null,"directParents":null},"isOptional":true,"isAbstract":false,"isStatic":false,"visibility":"private"}],"methods":[{"name":"load","returnType":{"packageName":"","name":"Promise<RowWindow<T>>","filePath":null,"qualifiedName":"/Promise<RowWindow<T>>","typeParameters":null,"directParents":null},"isAsync":true,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"startIndex","type":{"packageName":"","name":"number","filePath":null,"qualifiedName":"/number","typeParameters":null,"directParents":null}},{"name":"endIndex","type":{"packageName":"","name":"number","filePath":null,"qualifiedName":"/number","typeParameters":null,"directParents":null}},{"name":"skipRowCount","type":{"packageName":"","name":"boolean","filePath":null,"qualifiedName":"/boolean","typeParameters":null,"directParents":null}}]}],"typeParameters":["/T extends Record"],"directParentInterfaces":[{"packageName":"@proteinjs/ui","name":"TableLoader","filePath":null,"qualifiedName":"@proteinjs/ui/TableLoader","properties":[],"methods":[],"typeParameters":["/T"],"directParents":[]}],"directParentClasses":[],"sourceType":2}},{"v":"@proteinjs/ui/TableLoader"},{"v":"@proteinjs/db-ui/RecordFormCustomization","value":{"packageName":"@proteinjs/db-ui","name":"RecordFormCustomization","filePath":"src/form/RecordFormCustomization.tsx","qualifiedName":"@proteinjs/db-ui/RecordFormCustomization","isAbstract":true,"isStatic":false,"visibility":"public","properties":[{"name":"table","type":{"packageName":"","name":"Table<any>","filePath":null,"qualifiedName":"/Table<any>","typeParameters":null,"directParents":null},"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public"}],"methods":[{"name":"getFormButtons","returnType":{"packageName":"","name":"FormButtons<any>","filePath":null,"qualifiedName":"/FormButtons<any>","typeParameters":null,"directParents":null},"isAsync":false,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"record","type":{"packageName":"","name":"any","filePath":null,"qualifiedName":"/any","typeParameters":null,"directParents":null}},{"name":"defaultFormButtons","type":{"packageName":"","name":"FormButtons<any>","filePath":null,"qualifiedName":"/FormButtons<any>","typeParameters":null,"directParents":null}}]},{"name":"getFieldLayout","returnType":{"packageName":"","name":"string[] | string[][]","filePath":null,"qualifiedName":"/string[] | string[][]","typeParameters":null,"directParents":null},"isAsync":false,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"record","type":{"packageName":"","name":"any","filePath":null,"qualifiedName":"/any","typeParameters":null,"directParents":null}},{"name":"defaultFieldLayout","type":{"packageName":"","name":"string[] | string[][]","filePath":null,"qualifiedName":"/string[] | string[][]","typeParameters":null,"directParents":null}}]}],"typeParameters":[],"directParentInterfaces":[{"packageName":"@proteinjs/reflection","name":"Loadable","filePath":null,"qualifiedName":"@proteinjs/reflection/Loadable","properties":[],"methods":[],"typeParameters":[],"directParents":[]}],"directParentClasses":[],"sourceType":2}},{"v":"@proteinjs/reflection/Loadable"},{"v":"@proteinjs/db-ui/hashGeneratorPage","value":{"packageName":"@proteinjs/db-ui","name":"hashGeneratorPage","filePath":"src/pages/HashGeneratorPage.tsx","qualifiedName":"@proteinjs/db-ui/hashGeneratorPage","type":{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":[{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":null}]},"isExported":true,"isConst":true,"sourceType":0}},{"v":"@proteinjs/ui/Page"},{"v":"@proteinjs/db-ui/recordFormPage","value":{"packageName":"@proteinjs/db-ui","name":"recordFormPage","filePath":"src/pages/RecordFormPage.tsx","qualifiedName":"@proteinjs/db-ui/recordFormPage","type":{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":[{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":null}]},"isExported":true,"isConst":true,"sourceType":0}},{"v":"@proteinjs/db-ui/recordTablePage","value":{"packageName":"@proteinjs/db-ui","name":"recordTablePage","filePath":"src/pages/RecordTablePage.tsx","qualifiedName":"@proteinjs/db-ui/recordTablePage","type":{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":[{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":null}]},"isExported":true,"isConst":true,"sourceType":0}},{"v":"@proteinjs/db-ui/tablesPage","value":{"packageName":"@proteinjs/db-ui","name":"tablesPage","filePath":"src/pages/TablesPage.tsx","qualifiedName":"@proteinjs/db-ui/tablesPage","type":{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":[{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":null}]},"isExported":true,"isConst":true,"sourceType":0}},{"v":"@proteinjs/db-ui/uuidGeneratorPage","value":{"packageName":"@proteinjs/db-ui","name":"uuidGeneratorPage","filePath":"src/pages/UuidGeneratorPage.tsx","qualifiedName":"@proteinjs/db-ui/uuidGeneratorPage","type":{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":[{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":null}]},"isExported":true,"isConst":true,"sourceType":0}},{"v":"@proteinjs/db-ui/SpecificTableProps"},{"v":"@proteinjs/db-ui/MigrationRecordFormCustomization","value":{"packageName":"@proteinjs/db-ui","name":"MigrationRecordFormCustomization","filePath":"src/form/customizations/MigrationRecordFormCustomization.tsx","qualifiedName":"@proteinjs/db-ui/MigrationRecordFormCustomization","isAbstract":false,"isStatic":false,"visibility":"public","properties":[{"name":"table","type":null,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public"}],"methods":[{"name":"getFormButtons","returnType":{"packageName":"","name":"FormButtons<any>","filePath":null,"qualifiedName":"/FormButtons<any>","typeParameters":null,"directParents":null},"isAsync":false,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"migration","type":{"packageName":"@proteinjs/db","name":"Migration","filePath":null,"qualifiedName":"@proteinjs/db/Migration","typeParameters":null,"directParents":null}},{"name":"defaultFormButtons","type":{"packageName":"","name":"FormButtons<any>","filePath":null,"qualifiedName":"/FormButtons<any>","typeParameters":null,"directParents":null}}]},{"name":"setRetired","returnType":null,"isAsync":true,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"private","parameters":[{"name":"migration","type":{"packageName":"@proteinjs/db","name":"Migration","filePath":null,"qualifiedName":"@proteinjs/db/Migration","typeParameters":null,"directParents":null}},{"name":"retired","type":{"packageName":"","name":"boolean","filePath":null,"qualifiedName":"/boolean","typeParameters":null,"directParents":null}},{"name":"fields","type":{"packageName":"@proteinjs/ui","name":"Fields","filePath":null,"qualifiedName":"@proteinjs/ui/Fields","typeParameters":null,"directParents":null}},{"name":"formButtons","type":{"packageName":"","name":"FormButtons<any>","filePath":null,"qualifiedName":"/FormButtons<any>","typeParameters":null,"directParents":null}}]}],"typeParameters":[],"directParentInterfaces":[],"directParentClasses":[{"packageName":"@proteinjs/db-ui","name":"RecordFormCustomization","filePath":null,"qualifiedName":"@proteinjs/db-ui/RecordFormCustomization","isAbstract":false,"isStatic":false,"visibility":"public","properties":[],"methods":[],"typeParameters":[],"directParentInterfaces":[],"directParentClasses":[]}],"sourceType":2}}],"edges":[{"v":"@proteinjs/db-ui/QueryCursorLoader","w":"@proteinjs/ui/CursorLoader","value":"implements interface"},{"v":"@proteinjs/db-ui/QueryTableLoader","w":"@proteinjs/ui/TableLoader","value":"implements interface"},{"v":"@proteinjs/db-ui/RecordFormCustomization","w":"@proteinjs/reflection/Loadable","value":"implements interface"},{"v":"@proteinjs/db-ui/hashGeneratorPage","w":"@proteinjs/ui/Page","value":"has type"},{"v":"@proteinjs/db-ui/recordFormPage","w":"@proteinjs/ui/Page","value":"has type"},{"v":"@proteinjs/db-ui/recordTablePage","w":"@proteinjs/ui/Page","value":"has type"},{"v":"@proteinjs/db-ui/tablesPage","w":"@proteinjs/ui/Page","value":"has type"},{"v":"@proteinjs/db-ui/uuidGeneratorPage","w":"@proteinjs/ui/Page","value":"has type"},{"v":"@proteinjs/db-ui/MigrationRecordFormCustomization","w":"@proteinjs/db-ui/RecordFormCustomization","value":"extends class"}]}';
+  '{"options":{"directed":true,"multigraph":false,"compound":false},"nodes":[{"v":"@proteinjs/db-ui/QueryCursorLoader","value":{"packageName":"@proteinjs/db-ui","name":"QueryCursorLoader","filePath":"src/table/QueryCursorLoader.ts","qualifiedName":"@proteinjs/db-ui/QueryCursorLoader","isAbstract":false,"isStatic":false,"visibility":"public","properties":[{"name":"reactQueryKeys","type":{"packageName":"@proteinjs/ui","name":"ReactQueryKeys","filePath":null,"qualifiedName":"@proteinjs/ui/ReactQueryKeys","typeParameters":null,"directParents":null},"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public"},{"name":"pager","type":{"packageName":"","name":"CursorWindowPager<T>","filePath":null,"qualifiedName":"/CursorWindowPager<T>","typeParameters":null,"directParents":null},"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"private"}],"methods":[{"name":"loadWindow","returnType":{"packageName":"","name":"Promise<CursorWindow<T>>","filePath":null,"qualifiedName":"/Promise<CursorWindow<T>>","typeParameters":null,"directParents":null},"isAsync":true,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"cursor","type":{"packageName":"","name":"CursorValue | null","filePath":null,"qualifiedName":"/CursorValue | null","typeParameters":null,"directParents":null}},{"name":"windowSize","type":{"packageName":"","name":"number","filePath":null,"qualifiedName":"/number","typeParameters":null,"directParents":null}}]}],"typeParameters":["/T extends Record"],"directParentInterfaces":[{"packageName":"@proteinjs/ui","name":"CursorLoader","filePath":null,"qualifiedName":"@proteinjs/ui/CursorLoader","properties":[],"methods":[],"typeParameters":["/T"],"directParents":[]}],"directParentClasses":[],"sourceType":2}},{"v":"@proteinjs/ui/CursorLoader"},{"v":"@proteinjs/db-ui/QueryTableLoader","value":{"packageName":"@proteinjs/db-ui","name":"QueryTableLoader","filePath":"src/table/QueryTableLoader.ts","qualifiedName":"@proteinjs/db-ui/QueryTableLoader","isAbstract":false,"isStatic":false,"visibility":"public","properties":[{"name":"rowCountQb","type":{"packageName":"","name":"QueryBuilder<T>","filePath":null,"qualifiedName":"/QueryBuilder<T>","typeParameters":null,"directParents":null},"isOptional":true,"isAbstract":false,"isStatic":false,"visibility":"private"},{"name":"paginationQb","type":{"packageName":"","name":"QueryBuilder<T>","filePath":null,"qualifiedName":"/QueryBuilder<T>","typeParameters":null,"directParents":null},"isOptional":true,"isAbstract":false,"isStatic":false,"visibility":"private"},{"name":"reactQueryKeys","type":{"packageName":"","name":"TableLoader<T>[\'reactQueryKeys\']","filePath":null,"qualifiedName":"/TableLoader<T>[\'reactQueryKeys\']","typeParameters":null,"directParents":null},"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public"},{"name":"table","type":{"packageName":"","name":"Table<T>","filePath":null,"qualifiedName":"/Table<T>","typeParameters":null,"directParents":null},"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"private"},{"name":"query","type":{"packageName":"","name":"Query<T>","filePath":null,"qualifiedName":"/Query<T>","typeParameters":null,"directParents":null},"isOptional":true,"isAbstract":false,"isStatic":false,"visibility":"private"},{"name":"sort","type":{"packageName":"","name":"SortCriteria<T>[]","filePath":null,"qualifiedName":"/SortCriteria<T>[]","typeParameters":null,"directParents":null},"isOptional":true,"isAbstract":false,"isStatic":false,"visibility":"private"},{"name":"queryOptions","type":{"packageName":"","name":"QueryOptions<T>","filePath":null,"qualifiedName":"/QueryOptions<T>","typeParameters":null,"directParents":null},"isOptional":true,"isAbstract":false,"isStatic":false,"visibility":"private"}],"methods":[{"name":"load","returnType":{"packageName":"","name":"Promise<RowWindow<T>>","filePath":null,"qualifiedName":"/Promise<RowWindow<T>>","typeParameters":null,"directParents":null},"isAsync":true,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"startIndex","type":{"packageName":"","name":"number","filePath":null,"qualifiedName":"/number","typeParameters":null,"directParents":null}},{"name":"endIndex","type":{"packageName":"","name":"number","filePath":null,"qualifiedName":"/number","typeParameters":null,"directParents":null}},{"name":"skipRowCount","type":{"packageName":"","name":"boolean","filePath":null,"qualifiedName":"/boolean","typeParameters":null,"directParents":null}}]}],"typeParameters":["/T extends Record"],"directParentInterfaces":[{"packageName":"@proteinjs/ui","name":"TableLoader","filePath":null,"qualifiedName":"@proteinjs/ui/TableLoader","properties":[],"methods":[],"typeParameters":["/T"],"directParents":[]}],"directParentClasses":[],"sourceType":2}},{"v":"@proteinjs/ui/TableLoader"},{"v":"/React.ComponentType"},{"v":"@proteinjs/db-ui/RecordFormCustomization","value":{"packageName":"@proteinjs/db-ui","name":"RecordFormCustomization","filePath":"src/form/RecordFormCustomization.tsx","qualifiedName":"@proteinjs/db-ui/RecordFormCustomization","isAbstract":true,"isStatic":false,"visibility":"public","properties":[{"name":"table","type":{"packageName":"","name":"Table<any>","filePath":null,"qualifiedName":"/Table<any>","typeParameters":null,"directParents":null},"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public"}],"methods":[{"name":"getFormButtons","returnType":{"packageName":"","name":"FormButtons<any>","filePath":null,"qualifiedName":"/FormButtons<any>","typeParameters":null,"directParents":null},"isAsync":false,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"record","type":{"packageName":"","name":"any","filePath":null,"qualifiedName":"/any","typeParameters":null,"directParents":null}},{"name":"defaultFormButtons","type":{"packageName":"","name":"FormButtons<any>","filePath":null,"qualifiedName":"/FormButtons<any>","typeParameters":null,"directParents":null}}]},{"name":"getFieldLayout","returnType":{"packageName":"","name":"string[] | string[][]","filePath":null,"qualifiedName":"/string[] | string[][]","typeParameters":null,"directParents":null},"isAsync":false,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"record","type":{"packageName":"","name":"any","filePath":null,"qualifiedName":"/any","typeParameters":null,"directParents":null}},{"name":"defaultFieldLayout","type":{"packageName":"","name":"string[] | string[][]","filePath":null,"qualifiedName":"/string[] | string[][]","typeParameters":null,"directParents":null}}]},{"name":"getFieldRenderer","returnType":{"packageName":"","name":"RecordFormFieldRenderer | undefined","filePath":null,"qualifiedName":"/RecordFormFieldRenderer | undefined","typeParameters":null,"directParents":null},"isAsync":false,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"fieldName","type":{"packageName":"","name":"string","filePath":null,"qualifiedName":"/string","typeParameters":null,"directParents":null}},{"name":"record","type":{"packageName":"","name":"any","filePath":null,"qualifiedName":"/any","typeParameters":null,"directParents":null}}]}],"typeParameters":[],"directParentInterfaces":[{"packageName":"@proteinjs/reflection","name":"Loadable","filePath":null,"qualifiedName":"@proteinjs/reflection/Loadable","properties":[],"methods":[],"typeParameters":[],"directParents":[]}],"directParentClasses":[],"sourceType":2}},{"v":"@proteinjs/reflection/Loadable"},{"v":"@proteinjs/db-ui/hashGeneratorPage","value":{"packageName":"@proteinjs/db-ui","name":"hashGeneratorPage","filePath":"src/pages/HashGeneratorPage.tsx","qualifiedName":"@proteinjs/db-ui/hashGeneratorPage","type":{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":[{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":null}]},"isExported":true,"isConst":true,"sourceType":0}},{"v":"@proteinjs/ui/Page"},{"v":"@proteinjs/db-ui/recordFormPage","value":{"packageName":"@proteinjs/db-ui","name":"recordFormPage","filePath":"src/pages/RecordFormPage.tsx","qualifiedName":"@proteinjs/db-ui/recordFormPage","type":{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":[{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":null}]},"isExported":true,"isConst":true,"sourceType":0}},{"v":"@proteinjs/db-ui/recordTablePage","value":{"packageName":"@proteinjs/db-ui","name":"recordTablePage","filePath":"src/pages/RecordTablePage.tsx","qualifiedName":"@proteinjs/db-ui/recordTablePage","type":{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":[{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":null}]},"isExported":true,"isConst":true,"sourceType":0}},{"v":"@proteinjs/db-ui/tablesPage","value":{"packageName":"@proteinjs/db-ui","name":"tablesPage","filePath":"src/pages/TablesPage.tsx","qualifiedName":"@proteinjs/db-ui/tablesPage","type":{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":[{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":null}]},"isExported":true,"isConst":true,"sourceType":0}},{"v":"@proteinjs/db-ui/uuidGeneratorPage","value":{"packageName":"@proteinjs/db-ui","name":"uuidGeneratorPage","filePath":"src/pages/UuidGeneratorPage.tsx","qualifiedName":"@proteinjs/db-ui/uuidGeneratorPage","type":{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":[{"packageName":"@proteinjs/ui","name":"Page","filePath":null,"qualifiedName":"@proteinjs/ui/Page","typeParameters":[],"directParents":null}]},"isExported":true,"isConst":true,"sourceType":0}},{"v":"@proteinjs/db-ui/SpecificTableProps"},{"v":"@proteinjs/db-ui/MigrationRecordFormCustomization","value":{"packageName":"@proteinjs/db-ui","name":"MigrationRecordFormCustomization","filePath":"src/form/customizations/MigrationRecordFormCustomization.tsx","qualifiedName":"@proteinjs/db-ui/MigrationRecordFormCustomization","isAbstract":false,"isStatic":false,"visibility":"public","properties":[{"name":"table","type":null,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public"}],"methods":[{"name":"getFormButtons","returnType":{"packageName":"","name":"FormButtons<any>","filePath":null,"qualifiedName":"/FormButtons<any>","typeParameters":null,"directParents":null},"isAsync":false,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"public","parameters":[{"name":"migration","type":{"packageName":"@proteinjs/db","name":"Migration","filePath":null,"qualifiedName":"@proteinjs/db/Migration","typeParameters":null,"directParents":null}},{"name":"defaultFormButtons","type":{"packageName":"","name":"FormButtons<any>","filePath":null,"qualifiedName":"/FormButtons<any>","typeParameters":null,"directParents":null}}]},{"name":"setRetired","returnType":null,"isAsync":true,"isOptional":false,"isAbstract":false,"isStatic":false,"visibility":"private","parameters":[{"name":"migration","type":{"packageName":"@proteinjs/db","name":"Migration","filePath":null,"qualifiedName":"@proteinjs/db/Migration","typeParameters":null,"directParents":null}},{"name":"retired","type":{"packageName":"","name":"boolean","filePath":null,"qualifiedName":"/boolean","typeParameters":null,"directParents":null}},{"name":"fields","type":{"packageName":"@proteinjs/ui","name":"Fields","filePath":null,"qualifiedName":"@proteinjs/ui/Fields","typeParameters":null,"directParents":null}},{"name":"formButtons","type":{"packageName":"","name":"FormButtons<any>","filePath":null,"qualifiedName":"/FormButtons<any>","typeParameters":null,"directParents":null}}]}],"typeParameters":[],"directParentInterfaces":[],"directParentClasses":[{"packageName":"@proteinjs/db-ui","name":"RecordFormCustomization","filePath":null,"qualifiedName":"@proteinjs/db-ui/RecordFormCustomization","isAbstract":false,"isStatic":false,"visibility":"public","properties":[],"methods":[],"typeParameters":[],"directParentInterfaces":[],"directParentClasses":[]}],"sourceType":2}}],"edges":[{"v":"@proteinjs/db-ui/QueryCursorLoader","w":"@proteinjs/ui/CursorLoader","value":"implements interface"},{"v":"@proteinjs/db-ui/QueryTableLoader","w":"@proteinjs/ui/TableLoader","value":"implements interface"},{"v":"@proteinjs/db-ui/RecordFormCustomization","w":"@proteinjs/reflection/Loadable","value":"implements interface"},{"v":"@proteinjs/db-ui/hashGeneratorPage","w":"@proteinjs/ui/Page","value":"has type"},{"v":"@proteinjs/db-ui/recordFormPage","w":"@proteinjs/ui/Page","value":"has type"},{"v":"@proteinjs/db-ui/recordTablePage","w":"@proteinjs/ui/Page","value":"has type"},{"v":"@proteinjs/db-ui/tablesPage","w":"@proteinjs/ui/Page","value":"has type"},{"v":"@proteinjs/db-ui/uuidGeneratorPage","w":"@proteinjs/ui/Page","value":"has type"},{"v":"@proteinjs/db-ui/MigrationRecordFormCustomization","w":"@proteinjs/db-ui/RecordFormCustomization","value":"extends class"}]}';
 
 /** Generate Source Links */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteinjs/db-ui",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "description": "Db ui components",
   "publishConfig": {
     "access": "public"
@@ -55,5 +55,5 @@
   },
   "main": "./dist/generated/index.js",
   "types": "./dist/generated/index.d.ts",
-  "gitHead": "521d5d1ca2f86f0ed2bef0309b0dde30506f132b"
+  "gitHead": "06ddfa575d927114076efa181555521087cf3625"
 }

package/src/form/RecordForm.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import S from 'string';
 import moment from 'moment';
 import { StringUtil, isInstanceOf } from '@proteinjs/util';
-import { Form, Fields, textField, checkboxField, dateField, FormButtons } from '@proteinjs/ui';
+import { Form, Fields, FieldComponentProps, textField, checkboxField, dateField, FormButtons } from '@proteinjs/ui';
 import {
   Table,
   Record,
@@ -18,7 +18,7 @@ import {
 } from '@proteinjs/db';
 import { recordTableLink } from '../pages/RecordTablePage';
 import { recordFormLink } from '../pages/RecordFormPage';
-import { getRecordFormCustomization } from './RecordFormCustomization';
+import { getRecordFormCustomization, RecordFormFieldRenderer } from './RecordFormCustomization';
 
 export type RecordFormProps<T extends Record> = {
   table: Table<T>;
@@ -149,7 +149,8 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
         continue;
       }
 
-      if (column.options?.ui?.hidden) {
+      // A customization's field component surfaces a column the default form hides
+      if (column.options?.ui?.hidden && !getFieldRenderer(columnPropertyName)) {
         continue;
       }
 
@@ -192,11 +193,29 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
     );
   }
 
+  /**
+   * A customization's component for the field, if it declared one. Only existing records have
+   * stored state to present, so the new-record form never consults renderers (see
+   * `RecordFormCustomization.getFieldRenderer`).
+   */
+  function getFieldRenderer(columnPropertyName: string): RecordFormFieldRenderer<T> | undefined {
+    if (isNewRecord || !recordFormCustomization) {
+      return undefined;
+    }
+
+    return recordFormCustomization.getFieldRenderer(columnPropertyName, record);
+  }
+
   /** Pick the field control that tells the truth about the column's type. */
   function createField(columnPropertyName: string, column: Column<T, any>) {
     const name = columnPropertyName;
     const label = StringUtil.humanizeCamel(columnPropertyName);
 
+    const fieldRenderer = getFieldRenderer(columnPropertyName);
+    if (fieldRenderer) {
+      return customField(name, label, column, fieldRenderer);
+    }
+
     // Readonly values render as text (a native date input isn't text-selectable): copyable
     // ids/timestamps beat a type-specific control the user can't interact with anyway.
     if (isReadonlyField(columnPropertyName, column)) {
@@ -242,6 +261,38 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
     return textField({ name, label });
   }
 
+  /**
+   * The slot a customization's component renders in. The component reads its value from the
+   * loaded record (not the form's field value), so one `reload` refreshes every custom field:
+   * reload re-reads the record in place and reports the change through the form's own onChange,
+   * which is what re-renders the form.
+   */
+  function customField(name: string, label: string, column: Column<T, any>, FieldRenderer: RecordFormFieldRenderer<T>) {
+    const loadedRecord = record as T;
+    return {
+      field: { name, label },
+      component: ({ field, onChange }: FieldComponentProps<any, Fields>) => (
+        <FieldRenderer
+          table={table}
+          column={column}
+          fieldName={name}
+          label={label}
+          record={loadedRecord}
+          value={(loadedRecord as any)[name]}
+          reload={async () => {
+            const fresh = await getDbService().get(table, { id: loadedRecord.id } as any);
+            if (!fresh) {
+              throw new Error(`${S(table.name).humanize().s} no longer exists`);
+            }
+
+            Object.assign(loadedRecord, fresh);
+            await onChange(field, (fresh as any)[name], () => {});
+          }}
+        />
+      ),
+    };
+  }
+
   function fieldLayout(): any {
     const columns = getColumns();
     const layoutColumns = Object.entries(columns).length > 6 ? 2 : 1;
@@ -298,6 +349,23 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
     return fieldValue;
   }
 
+  /**
+   * The update payload is the loaded record minus what this form doesn't own: service-protected
+   * columns, and custom-rendered fields — those are their component's, written through the
+   * component's own service. Echoing a loaded value back would clobber whatever that service
+   * wrote since the load.
+   */
+  function savePayload(): Partial<T> {
+    const payload: any = stripServiceProtectedColumns(table, record as T);
+    for (const columnPropertyName in getColumns()) {
+      if (getFieldRenderer(columnPropertyName)) {
+        delete payload[columnPropertyName];
+      }
+    }
+
+    return payload;
+  }
+
   function buttons(): FormButtons<any> {
     let newRecord: T;
     return {
@@ -352,11 +420,15 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
               continue;
             }
 
+            if (getFieldRenderer(columnPropertyName)) {
+              continue;
+            }
+
             const field = fields[columnPropertyName];
             (record as any)[columnPropertyName] = getFieldValue(columnPropertyName, field.field.value);
           }
 
-          await getDbService().update(table, stripServiceProtectedColumns(table, record));
+          await getDbService().update(table, savePayload());
           return `Saved ${S(table.name).humanize().s}`;
         },
         progressMessage: (fields: Fields) => {
@@ -398,6 +470,11 @@ export function RecordForm<T extends Record>({ table, record }: RecordFormProps<
     }
 
     for (const columnPropertyName in fields) {
+      // Custom-rendered fields read straight from the loaded record
+      if (getFieldRenderer(columnPropertyName)) {
+        continue;
+      }
+
       const column = getColumn(columnPropertyName);
       const field = fields[columnPropertyName].field;
       let fieldValue = (record as any)[columnPropertyName];