@qoretechnologies/reqraft 0.10.38 → 0.10.39-pr.95.g3503e91

package/dist/components/form/engine/FormEngine.js

@@ -202,7 +202,7 @@ var StyledCommitDock = styled_components_1.default.div(templateObject_2 || (temp
     return "".concat((0, colors_1.changeDarkness)($bg, 0.4)).concat((0, colors_1.percentToHexAlpha)(55));
 });
 var getType = function (type, operators, operator) {
-    var finalType = getTypeFromOperator(operators, (0, exports.fixOperatorValue)(operator)) || type;
+    var finalType = getTypeFromOperator(operators, (0, common_1.fixOperatorValue)(operator)) || type;
     var resolvedType = (0, isArray_1.default)(finalType) ? finalType[0] : finalType;
     // A value can be received before its server-driven option schema. Keep the
     // renderer type-safe during that transition without guessing a concrete type.
@@ -216,10 +216,11 @@ var getTypeFromOperator = function (operators, operatorData) {
     }
     return ((_a = operators[(0, lodash_1.last)(operatorData)]) === null || _a === void 0 ? void 0 : _a.type) || null;
 };
-var fixOperatorValue = function (operator) {
-    return (0, isArray_1.default)(operator) ? operator : [operator];
-};
-exports.fixOperatorValue = fixOperatorValue;
+/** Re-exported from `helpers/common` so existing importers keep working; it
+ *  lives there because `helpers/validations` needs it and cannot import this
+ *  module (this module imports the validators). */
+var common_2 = require("../../../helpers/common");
+Object.defineProperty(exports, "fixOperatorValue", { enumerable: true, get: function () { return common_2.fixOperatorValue; } });
 var getOptionSchemaStorageType = function (option, isRendererOnly) {
     if (isRendererOnly === void 0) { isRendererOnly = rendererTypes_1.isRendererOnlyUiType; }
     return (((0, readFirst_1.isFixedCompactAllowedValueOption)(option)
@@ -253,7 +254,7 @@ var fixOptions = function (value, options, operators, isRendererOnly) {
         return fixedValue;
     }
     (0, lodash_1.forEach)(options, function (option, name) {
-        var _a, _b, _c, _d, _f, _g, _h;
+        var _a, _b, _c, _d, _f, _g, _h, _j;
         if (option.value ||
             option.required_groups ||
             ((option.required || option.preselected) && !fixedValue[name]) ||
@@ -264,14 +265,30 @@ var fixOptions = function (value, options, operators, isRendererOnly) {
                 ((_c = fixedValue[name]) === null || _c === void 0 ? void 0 : _c.value) === undefined) {
                 obj = option.default_value;
             }
+            else if (option.default_view === 'expression' &&
+                ((_d = fixedValue[name]) === null || _d === void 0 ? void 0 : _d.value) === undefined) {
+                // A field the schema declares as opening in expression mode starts as an
+                // EMPTY expression, not as its raw default. `isDefaultFunction` already
+                // makes the renderer open that way, so without this the data disagreed
+                // with what the operator was looking at: an expression editor whose
+                // value was still the plain default, and no `is_expression` on the field
+                // until the first edit.
+                obj = {
+                    type: type,
+                    value: {
+                        args: [],
+                    },
+                    is_expression: true,
+                };
+            }
             else {
                 obj = {
                     type: type,
-                    value: (_g = (_f = (typeof fixedValue[name] === 'object' ?
-                        (_d = fixedValue[name]) === null || _d === void 0 ? void 0 : _d.value
-                        : fixedValue[name])) !== null && _f !== void 0 ? _f : option.value) !== null && _g !== void 0 ? _g : (0, common_1.getDefaultValue)(option),
+                    value: (_h = (_g = (typeof fixedValue[name] === 'object' ?
+                        (_f = fixedValue[name]) === null || _f === void 0 ? void 0 : _f.value
+                        : fixedValue[name])) !== null && _g !== void 0 ? _g : option.value) !== null && _h !== void 0 ? _h : (0, common_1.getDefaultValue)(option),
                 };
-                if ((_h = fixedValue[name]) === null || _h === void 0 ? void 0 : _h.is_expression) {
+                if ((_j = fixedValue[name]) === null || _j === void 0 ? void 0 : _j.is_expression) {
                     obj.is_expression = true;
                 }
             }
@@ -280,7 +297,7 @@ var fixOptions = function (value, options, operators, isRendererOnly) {
     });
     var res = (0, reduce_1.default)(fixedValue, function (newValue, option, optionName) {
         var _a;
-        var _b, _c, _d, _f, _g, _h, _j, _k;
+        var _b, _c, _d, _f, _g, _h, _j;
         var newOption = option;
         if (!(0, lodash_1.isPlainObject)(newOption) || !(newOption === null || newOption === void 0 ? void 0 : newOption.type)) {
             var isUntypedEnvelope = (0, lodash_1.isPlainObject)(newOption) && 'value' in newOption;
@@ -295,17 +312,35 @@ var fixOptions = function (value, options, operators, isRendererOnly) {
             isRendererOnly(newOption.type)) {
             newOption = __assign(__assign({}, newOption), { type: (0, exports.getType)(getOptionSchemaStorageType(options === null || options === void 0 ? void 0 : options[optionName], isRendererOnly), operators, newOption.op) });
         }
+        // A value that is not one of the declared choices is dropped. What counts
+        // as "one of the choices" is `findAllowedValueOption` — the same predicate
+        // the read-first row uses to LABEL a value — because a value the row can
+        // name is by definition a value the form must keep. Inlining a narrower
+        // test here (envelope and `name`, but not a bare `value`) silently erased
+        // every value declared the bare way: the collapsed row still showed its
+        // display name while the editor showed "—" and the value never reached
+        // the submitted data.
+        // `allowed_values: []` is NOT "no value is permitted" — it is the server
+        // saying it has no reference values to offer right now (the app-action
+        // catalogue ships exactly that, with an
+        // `option_reference_values_unavailable` message attached). An empty array
+        // is truthy, so testing the array itself made every such option erase the
+        // operator's stored value on the first render, before the
+        // connection-refreshed schema arrived to say otherwise — and the emptied
+        // form then autosaved over the draft, so the value was gone for good.
+        // Only an option that actually declares choices can have a value that is
+        // not one of them.
         if (newOption.value !== undefined &&
-            ((_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.allowed_values) &&
-            !((_f = (_d = options === null || options === void 0 ? void 0 : options[optionName]) === null || _d === void 0 ? void 0 : _d.allowed_values) === null || _f === void 0 ? void 0 : _f.find(function (allowedValue) { var _a; return ((_a = allowedValue.value) === null || _a === void 0 ? void 0 : _a.value) === newOption.value || allowedValue.name === newOption.value; })) &&
+            ((_d = (_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.allowed_values) === null || _d === void 0 ? void 0 : _d.length) &&
+            !(0, readFirst_1.findAllowedValueOption)(newOption.value, options === null || options === void 0 ? void 0 : options[optionName]) &&
             !(0, TemplateField_1.isValueTemplate)(newOption.value) &&
-            !((_g = options === null || options === void 0 ? void 0 : options[optionName]) === null || _g === void 0 ? void 0 : _g.multiselect) &&
-            !((_h = options === null || options === void 0 ? void 0 : options[optionName]) === null || _h === void 0 ? void 0 : _h.allowed_values_creatable)) {
+            !((_f = options === null || options === void 0 ? void 0 : options[optionName]) === null || _f === void 0 ? void 0 : _f.multiselect) &&
+            !((_g = options === null || options === void 0 ? void 0 : options[optionName]) === null || _g === void 0 ? void 0 : _g.allowed_values_creatable)) {
             newOption.value = undefined;
         }
         if (newOption.value &&
-            ((_j = options === null || options === void 0 ? void 0 : options[optionName]) === null || _j === void 0 ? void 0 : _j.readonly) &&
-            ((_k = options === null || options === void 0 ? void 0 : options[optionName]) === null || _k === void 0 ? void 0 : _k.default_value) &&
+            ((_h = options === null || options === void 0 ? void 0 : options[optionName]) === null || _h === void 0 ? void 0 : _h.readonly) &&
+            ((_j = options === null || options === void 0 ? void 0 : options[optionName]) === null || _j === void 0 ? void 0 : _j.default_value) &&
             (0, common_1.getDefaultValue)(options === null || options === void 0 ? void 0 : options[optionName]) !== newOption.value) {
             newOption.value = (0, common_1.getDefaultValue)(options[optionName]);
         }
@@ -369,7 +404,7 @@ var FormEngineImpl = function (_a) {
     // form draws; destructured here only so it cannot reach `rest` and be spread
     // onto a DOM node
     _markdownRenderer = _a.markdownRenderer, // eslint-disable-line @typescript-eslint/no-unused-vars
-    rendererOnlyUiTypes = _a.rendererOnlyUiTypes, inheritedFromParent = _a.inheritedFromParent, autoFocusFirstRequired = _a.autoFocusFirstRequired, initialExpandedOptions = _a.initialExpandedOptions, rest = __rest(_a, ["name", "uniqueName", "value", "onChange", "onSingleOptionsChange", "onDependableOptionChange", "placeholder", "noValueString", "isValid", "url", "customUrl", "operatorsUrl", "onOptionsLoaded", "recordRequiresSearchOptions", "readOnly", "allowTemplates", "interfaceContext", "templateFieldProps", "forceDropdown", "showTypeToggle", "compact", "compactFlush", "compactNested", "compactPanelProps", "commitMode", "expandMode", "onCommit", "operators", "groups", "optionsLoader", "onValidityChange", "optionActions", "optionActionsCollapse", "componentOverrides", "codePreviewRenderer", "markdownRenderer", "rendererOnlyUiTypes", "inheritedFromParent", "autoFocusFirstRequired", "initialExpandedOptions"]);
+    rendererOnlyUiTypes = _a.rendererOnlyUiTypes, inheritedFromParent = _a.inheritedFromParent, autoFocusFirstRequired = _a.autoFocusFirstRequired, expandFirstRequired = _a.expandFirstRequired, initialExpandedOptions = _a.initialExpandedOptions, rest = __rest(_a, ["name", "uniqueName", "value", "onChange", "onSingleOptionsChange", "onDependableOptionChange", "placeholder", "noValueString", "isValid", "url", "customUrl", "operatorsUrl", "onOptionsLoaded", "recordRequiresSearchOptions", "readOnly", "allowTemplates", "interfaceContext", "templateFieldProps", "forceDropdown", "showTypeToggle", "compact", "compactFlush", "compactNested", "compactPanelProps", "commitMode", "expandMode", "onCommit", "operators", "groups", "optionsLoader", "onValidityChange", "optionActions", "optionActionsCollapse", "componentOverrides", "codePreviewRenderer", "markdownRenderer", "rendererOnlyUiTypes", "inheritedFromParent", "autoFocusFirstRequired", "expandFirstRequired", "initialExpandedOptions"]);
     // Built-ins + whatever the consumer declared for its own injected editors.
     var isRendererOnly = (0, react_2.useMemo)(function () { return (0, rendererTypes_1.createRendererOnlyUiTypeCheck)(rendererOnlyUiTypes); }, [JSON.stringify(rendererOnlyUiTypes)]);
     // Pointer CAPABILITY and viewport WIDTH are different questions and both
@@ -411,19 +446,59 @@ var FormEngineImpl = function (_a) {
     var _0 = (0, react_2.useState)(false), showInvalidOptionsOnly = _0[0], setShowInvalidOptionsOnly = _0[1];
     // Which options are expanded into their editor (several can be open at once).
     var _1 = (0, react_2.useState)([]), expandedOptions = _1[0], setExpandedOptions = _1[1];
+    // --- Reveal a status box's content when it is opened ----------------------
+    //
+    // The status boxes stack, so the last one ("Optional", which holds every
+    // not-yet-added field) sits at the bottom of the form — frequently at the
+    // bottom of the scroll container too. Opening it mounts its rows BELOW the
+    // fold: the box's own header is all that stays on screen, the click appears to
+    // have done nothing, and the fields it just revealed have to be hunted for by
+    // scrolling.
+    //
+    // The box that was just opened, read by the layout effect below. Held as state
+    // rather than acted on inside the collapse handler because the handler runs
+    // BEFORE React re-renders — at that moment the rows do not exist yet, so the
+    // box has not grown and there is nothing to scroll to. A layout effect runs
+    // after the DOM is updated and before paint, which makes the reveal
+    // deterministic instead of a guessed delay.
+    var _2 = (0, react_2.useState)(undefined), openedStatusBox = _2[0], setOpenedStatusBox = _2[1];
+    var statusBoxRefs = (0, react_2.useRef)({});
+    (0, react_2.useLayoutEffect)(function () {
+        var _a, _b;
+        if (!openedStatusBox) {
+            return;
+        }
+        var element = statusBoxRefs.current[openedStatusBox];
+        // Consume it either way: a box that has gone (a search narrowed it out of
+        // existence) must not leave a pending reveal armed for a later render.
+        setOpenedStatusBox(undefined);
+        // `scrollIntoView` is not implemented in jsdom, and a missing reveal must
+        // never break a form.
+        if (!(element === null || element === void 0 ? void 0 : element.scrollIntoView)) {
+            return;
+        }
+        // 'nearest' scrolls the MINIMUM needed: nothing at all when the box is
+        // already fully visible, and a top-alignment when it is taller than the
+        // viewport (header plus the first rows — the right answer for a long
+        // Optional list). Anything else moves the page when it did not need to.
+        element.scrollIntoView({
+            block: 'nearest',
+            behavior: ((_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)')) === null || _b === void 0 ? void 0 : _b.matches) ? 'auto' : 'smooth',
+        });
+    }, [openedStatusBox]);
     // Remembers each row's last settled status box, so an actively-edited field
     // stays put when its status flips (e.g. becomes valid) instead of jumping to
     // another box mid-edit and stealing focus. Keyed by option name.
     var settledBucket = (0, react_2.useRef)({});
     // Measured form width (not viewport — the form lives in drawers/panels of
     // arbitrary width) drives the stacked narrow layout.
-    var _2 = (0, react_use_1.useMeasure)(), compactWrapRef = _2[0], compactWrapWidth = _2[1].width;
+    var _3 = (0, react_use_1.useMeasure)(), compactWrapRef = _3[0], compactWrapWidth = _3[1].width;
     // Own handle on the scroll wrap (useMeasure's ref is a callback, no `.current`)
     // so the label-column measurement can publish its CSS var on the element. It's
     // STATE, not a ref: the wrap mounts only after the loading-skeleton gate
     // resolves, so the measurement effect must re-run when the node appears — a
     // ref wouldn't retrigger it.
-    var _3 = (0, react_2.useState)(null), compactWrapNode = _3[0], setCompactWrapNode = _3[1];
+    var _4 = (0, react_2.useState)(null), compactWrapNode = _4[0], setCompactWrapNode = _4[1];
     // Ref mirror of the wrap node for callbacks that must not re-create when it
     // mounts (flashOptions reads it inside a rAF).
     var compactWrapNodeRef = (0, react_2.useRef)(null);
@@ -477,8 +552,8 @@ var FormEngineImpl = function (_a) {
     var readRowHeights = (0, react_2.useRef)({});
     // Required-groups linkage: hovering a group chip highlights every member row;
     // clicking a sibling in the chip's popover scrolls to it and flashes it.
-    var _4 = (0, react_2.useState)([]), highlightedOptions = _4[0], setHighlightedOptions = _4[1];
-    var _5 = (0, react_2.useState)([]), flashedOptions = _5[0], setFlashedOptions = _5[1];
+    var _5 = (0, react_2.useState)([]), highlightedOptions = _5[0], setHighlightedOptions = _5[1];
+    var _6 = (0, react_2.useState)([]), flashedOptions = _6[0], setFlashedOptions = _6[1];
     var flashTimeout = (0, react_2.useRef)();
     var flashOptions = (0, react_2.useCallback)(function (optionNames, scrollToFirst) {
         if (scrollToFirst === void 0) { scrollToFirst = false; }
@@ -527,16 +602,16 @@ var FormEngineImpl = function (_a) {
     });
     var compactNarrow = !!compactWrapWidth && compactWrapWidth < 480;
     // Info panels auto-open on Tier-1 content; the per-row user override sticks.
-    var _6 = (0, react_2.useState)({}), infoPanelOverrides = _6[0], setInfoPanelOverrides = _6[1];
+    var _7 = (0, react_2.useState)({}), infoPanelOverrides = _7[0], setInfoPanelOverrides = _7[1];
     // Toolbar filters affect the listed rows only — the meter reflects the full set.
-    var _7 = (0, react_2.useState)(false), requiredOnly = _7[0], setRequiredOnly = _7[1];
-    var _8 = (0, react_2.useState)(''), compactQuery = _8[0], setCompactQuery = _8[1];
+    var _8 = (0, react_2.useState)(false), requiredOnly = _8[0], setRequiredOnly = _8[1];
+    var _9 = (0, react_2.useState)(''), compactQuery = _9[0], setCompactQuery = _9[1];
     // Compact field sort (Fields menu → "Sort by"); 'schema' = declared order.
-    var _9 = (0, react_2.useState)('schema'), compactSort = _9[0], setCompactSort = _9[1];
-    var _10 = (0, react_2.useState)(function () { return ({
+    var _10 = (0, react_2.useState)('schema'), compactSort = _10[0], setCompactSort = _10[1];
+    var _11 = (0, react_2.useState)(function () { return ({
         fields: (0, exports.fixOptions)(value, options || {}, undefined, isRendererOnly),
         meta: undefined,
-    }); }), localValue = _10[0], setLocalValue = _10[1];
+    }); }), localValue = _11[0], setLocalValue = _11[1];
     var originalValue = (0, react_2.useRef)();
     // Track the last value we emitted via onChange so we can skip re-applying fixOptions
     // when the parent echoes it back as the new value prop (controlled component loop prevention)
@@ -545,7 +620,7 @@ var FormEngineImpl = function (_a) {
         originalValue.current = localValue.fields;
     }
     var unavailableOptionsCount = (0, react_2.useRef)(0);
-    var _11 = (0, useQorusTypes_1.useQorusTypes)(), compactValue = _11.compactValue, typesLoading = _11.loading;
+    var _12 = (0, useQorusTypes_1.useQorusTypes)(), compactValue = _12.compactValue, typesLoading = _12.loading;
     var templates = (0, useTemplates_1.useTemplates)(allowTemplates, rest.stringTemplates, interfaceContext);
     (0, react_2.useEffect)(function () {
         if ((0, lodash_1.isEqual)(localValue.fields, value)) {
@@ -813,7 +888,7 @@ var FormEngineImpl = function (_a) {
     var handleOperatorChange = (0, react_2.useCallback)(function (optionName, currentValue, operator, index) {
         var _a;
         setLocalValue === null || setLocalValue === void 0 ? void 0 : setLocalValue({
-            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, exports.fixOperatorValue)(currentValue[optionName].op).map(function (op, idx) {
+            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, common_1.fixOperatorValue)(currentValue[optionName].op).map(function (op, idx) {
                     if (idx === index) {
                         return operator;
                     }
@@ -825,14 +900,14 @@ var FormEngineImpl = function (_a) {
     var handleAddOperator = (0, react_2.useCallback)(function (optionName, currentValue, index) {
         var _a;
         setLocalValue === null || setLocalValue === void 0 ? void 0 : setLocalValue({
-            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, common_1.insertAtIndex)((0, exports.fixOperatorValue)(currentValue[optionName].op), index, null) }), _a)),
+            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, common_1.insertAtIndex)((0, common_1.fixOperatorValue)(currentValue[optionName].op), index, null) }), _a)),
             meta: undefined,
         });
     }, []);
     var handleRemoveOperator = (0, react_2.useCallback)(function (optionName, currentValue, index) {
         var _a;
         setLocalValue === null || setLocalValue === void 0 ? void 0 : setLocalValue({
-            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, exports.fixOperatorValue)(currentValue[optionName].op).filter(function (_op, idx) { return idx !== index; }) }), _a)),
+            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, common_1.fixOperatorValue)(currentValue[optionName].op).filter(function (_op, idx) { return idx !== index; }) }), _a)),
             meta: undefined,
         });
     }, []);
@@ -1235,7 +1310,11 @@ var FormEngineImpl = function (_a) {
     // (or below-the-fold) form is never scrolled into view on mount.
     var autoFocusNameRef = (0, react_2.useRef)(undefined);
     (0, react_2.useEffect)(function () {
-        if (!autoFocusFirstRequired || !compact || !options) {
+        // Two decisions, one scan. `autoFocusFirstRequired` opens the row AND puts
+        // the caret in it; `expandFirstRequired` only opens it. Setting both keeps
+        // the focusing behaviour, since focusing implies opening.
+        var wantsFocus = !!autoFocusFirstRequired;
+        if ((!wantsFocus && !expandFirstRequired) || !compact || !options) {
             return;
         }
         if (hasAutoFocusedRef.current) {
@@ -1251,8 +1330,14 @@ var FormEngineImpl = function (_a) {
         // clean mount focus rests on the body, so the intended "drop into the first
         // field" still fires. Bailing here leaves `hasAutoFocusedRef` false, so it
         // retries once focus is free.
+        //
+        // Only the FOCUSING variant waits: opening a row moves no caret, so there is
+        // nothing to steal and nothing to wait for. Making the expand-only variant
+        // wait here would make it a no-op in its main use — a sub-form mounted by a
+        // click, where the button that mounted it still holds focus and never gives
+        // it up.
         var active = document.activeElement;
-        if (active && active !== document.body) {
+        if (wantsFocus && active && active !== document.body) {
             return;
         }
         var target = (0, readFirst_1.getFirstAttentionOptionName)(orderedNames, function (fieldName) {
@@ -1276,7 +1361,10 @@ var FormEngineImpl = function (_a) {
         hasAutoFocusedRef.current = true;
         if (target) {
             // Set the ref before the state update so CompactRow's focus timer sees it.
-            autoFocusNameRef.current = target;
+            // Expand-only leaves it unset, which is what keeps the caret where it is.
+            if (wantsFocus) {
+                autoFocusNameRef.current = target;
+            }
             setExpandedOptions(function (prev) {
                 return prev.includes(target) ? prev
                     : expandMode === 'multi' ? __spreadArray(__spreadArray([], prev, true), [target], false) : [target];
@@ -1284,6 +1372,7 @@ var FormEngineImpl = function (_a) {
         }
     }, [
         autoFocusFirstRequired,
+        expandFirstRequired,
         compact,
         options,
         availableOptions,
@@ -1360,7 +1449,7 @@ var FormEngineImpl = function (_a) {
     suppressSchemaMessages) {
         var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         var type = _a.type, other = __rest(_a, ["type"]);
-        var operatorParts = (0, exports.fixOperatorValue)(other.op);
+        var operatorParts = (0, common_1.fixOperatorValue)(other.op);
         // The RENDERER type for this row — which editor mounts. Distinct from the
         // storage type on the value envelope: a `richtext` field stores a string
         // but must render the richtext editor, so `ui_type` wins here.
@@ -1674,8 +1763,40 @@ var FormEngineImpl = function (_a) {
             if (requiredOnly && !((schema === null || schema === void 0 ? void 0 : schema.required) || (schema === null || schema === void 0 ? void 0 : schema.required_groups))) {
                 return false;
             }
-            return matchesQuery(optionName);
+            // A field that absorbs a sibling also answers for it: searching
+            // "language" has to surface the row that now holds the language control,
+            // or the field becomes unreachable through the filter.
+            if (matchesQuery(optionName))
+                return true;
+            var absorb = schema === null || schema === void 0 ? void 0 : schema.absorb_fields;
+            return !!(absorb === null || absorb === void 0 ? void 0 : absorb.some(function (absorbedName) { return matchesQuery(absorbedName); }));
         };
+        // Fields a sibling absorbs into its own container.
+        //
+        // A field declaring `absorb_fields: ['language']` renders that sibling's
+        // control inside its own row instead of letting it have a row of its own.
+        // The pair this exists for is a code editor and its language: they are one
+        // decision — "what is this code, and in what language" — and reading them
+        // as two unrelated rows one above the other is what the layout used to say.
+        //
+        // Absorbed fields stay in `grouped`, and therefore in the Set / Optional /
+        // Needs-attention counts and in the completion meter. Only the ROW is
+        // skipped. Dropping them from the buckets instead would leave the meter
+        // ("13/18 set", computed from `availableOptions`) disagreeing with the box
+        // badge beside it, which counts row entries.
+        var absorbedBy = {};
+        (0, lodash_1.forEach)(options, function (option, optionName) {
+            var absorb = option === null || option === void 0 ? void 0 : option.absorb_fields;
+            if (!(absorb === null || absorb === void 0 ? void 0 : absorb.length))
+                return;
+            absorb.forEach(function (absorbedName) {
+                // Only absorb a sibling that exists and is not already spoken for; a
+                // schema naming a missing field must not make the field disappear.
+                if ((options === null || options === void 0 ? void 0 : options[absorbedName]) && !absorbedBy[absorbedName]) {
+                    absorbedBy[absorbedName] = optionName;
+                }
+            });
+        });
         // Group the options by their raw `group` key, remembering the order groups
         // first appear in the schema. Each row carries a `hidden` flag.
         var groupOrder = [];
@@ -1807,18 +1928,30 @@ var FormEngineImpl = function (_a) {
         // together at the first member's slot and rendered as a connected rail (flat
         // rows — no wrapper — so the value surface applies normally; the rail + nodes
         // are drawn per member). Narrow stacks fall back to flat rows.
+        // The absorbed siblings a host row must render, in schema order. Empty for
+        // every row that absorbs nothing, which is all of them by default.
+        var absorbedNamesFor = function (hostName) {
+            return Object.keys(absorbedBy).filter(function (absorbedName) { return absorbedBy[absorbedName] === hostName; });
+        };
         var renderGroupRows = function (names) {
             var renderRow = function (entry, clustered, clusterFirst, clusterLast) { return ((0, jsx_runtime_1.jsx)(CompactRow_1.CompactRow, { optionName: entry.name, optionField: entry.hidden ?
                     {
                         type: getOptionSchemaStorageType(options === null || options === void 0 ? void 0 : options[entry.name], isRendererOnly),
                         value: undefined,
                     }
-                    : shownOptions[entry.name], hidden: entry.hidden, clustered: clustered, clusterFirst: clusterFirst, clusterLast: clusterLast }, entry.name)); };
+                    : shownOptions[entry.name], hidden: entry.hidden, clustered: clustered, clusterFirst: clusterFirst, clusterLast: clusterLast, 
+                // The siblings this row renders inside itself instead of leaving
+                // them a row of their own — see `absorbedBy`.
+                absorbedFields: absorbedNamesFor(entry.name) }, entry.name)); };
             // (Clustering runs in narrow mode too now — the "One of the below is
             // required" box wraps the members regardless of width; it no longer relies
             // on a contiguous rail.)
             var emitted = new Set();
             var groupOf = function (name) { var _a, _b; return (_b = (_a = options === null || options === void 0 ? void 0 : options[name]) === null || _a === void 0 ? void 0 : _a.required_groups) === null || _b === void 0 ? void 0 : _b[0]; };
+            // An absorbed field keeps its place in the buckets — so the Set /
+            // Optional counts and the completion meter still see it — but its host
+            // renders its control, so it gets no row of its own here.
+            names = names.filter(function (entry) { return !absorbedBy[entry.name]; });
             return names.map(function (entry) {
                 var grp = groupOf(entry.name);
                 if (!grp)
@@ -1868,7 +2001,14 @@ var FormEngineImpl = function (_a) {
                                                 var boxBg = box.key === 'optional' ?
                                                     (0, colors_1.changeDarkness)((0, colors_1.getMainBackgroundColor)(theme), 0.06)
                                                     : undefined;
-                                                return ((0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusBox, { "$accent": accent, "$bg": boxBg, flat: true, minimal: true, collapseButtonProps: { flat: true, minimal: true, size: 'small' }, collapsible: true, 
+                                                return ((0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusBox, { "$accent": accent, "$bg": boxBg, ref: function (node) {
+                                                        statusBoxRefs.current[box.key] = node;
+                                                    }, 
+                                                    // Opening arms the reveal; collapsing disarms it, so a
+                                                    // close never scrolls.
+                                                    onCollapseChange: function (collapsed) {
+                                                        return setOpenedStatusBox(collapsed ? undefined : box.key);
+                                                    }, flat: true, minimal: true, collapseButtonProps: { flat: true, minimal: true, size: 'small' }, collapsible: true, 
                                                     // The Optional box now holds every not-yet-added field, so
                                                     // it starts COLLAPSED to keep the form focused on what's in
                                                     // use. But a SEARCH must surface matching addable fields —