@qoretechnologies/reqraft 0.10.45 → 0.10.46-pr.105.g27ead6a

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

@@ -402,7 +402,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, 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", "compactCollapsedGroups", "compactToolbar", "commitMode", "expandMode", "onCommit", "operators", "groups", "optionsLoader", "onValidityChange", "optionActions", "optionActionsCollapse", "componentOverrides", "codePreviewRenderer", "markdownRenderer", "rendererOnlyUiTypes", "inheritedFromParent", "autoFocusFirstRequired", "expandFirstRequired", "initialExpandedOptions"]);
+    rendererOnlyUiTypes = _a.rendererOnlyUiTypes, inheritedFromParent = _a.inheritedFromParent, autoFocusFirstRequired = _a.autoFocusFirstRequired, expandFirstRequired = _a.expandFirstRequired, initialExpandedOptions = _a.initialExpandedOptions, maxFieldsShown = _a.maxFieldsShown, 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", "compactCollapsedGroups", "compactToolbar", "commitMode", "expandMode", "onCommit", "operators", "groups", "optionsLoader", "onValidityChange", "optionActions", "optionActionsCollapse", "componentOverrides", "codePreviewRenderer", "markdownRenderer", "rendererOnlyUiTypes", "inheritedFromParent", "autoFocusFirstRequired", "expandFirstRequired", "initialExpandedOptions", "maxFieldsShown"]);
     // 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
@@ -444,6 +444,9 @@ var FormEngineImpl = function (_a) {
     var _2 = (0, react_2.useState)(false), showInvalidOptionsOnly = _2[0], setShowInvalidOptionsOnly = _2[1];
     // Which options are expanded into their editor (several can be open at once).
     var _3 = (0, react_2.useState)([]), expandedOptions = _3[0], setExpandedOptions = _3[1];
+    /** Status boxes whose "N more fields" control the reader has opened. Keyed by
+        box so opening Optional does not also unfold Set. */
+    var _4 = (0, react_2.useState)([]), expandedMoreBoxes = _4[0], setExpandedMoreBoxes = _4[1];
     // --- Reveal a status box's content when it is opened ----------------------
     //
     // The status boxes stack, so the last one ("Optional", which holds every
@@ -459,7 +462,7 @@ var FormEngineImpl = function (_a) {
     // 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 _4 = (0, react_2.useState)(undefined), openedStatusBox = _4[0], setOpenedStatusBox = _4[1];
+    var _5 = (0, react_2.useState)(undefined), openedStatusBox = _5[0], setOpenedStatusBox = _5[1];
     var statusBoxRefs = (0, react_2.useRef)({});
     (0, react_2.useLayoutEffect)(function () {
         var _a, _b;
@@ -490,13 +493,13 @@ var FormEngineImpl = function (_a) {
     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 _5 = (0, react_use_1.useMeasure)(), compactWrapRef = _5[0], compactWrapWidth = _5[1].width;
+    var _6 = (0, react_use_1.useMeasure)(), compactWrapRef = _6[0], compactWrapWidth = _6[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 _6 = (0, react_2.useState)(null), compactWrapNode = _6[0], setCompactWrapNode = _6[1];
+    var _7 = (0, react_2.useState)(null), compactWrapNode = _7[0], setCompactWrapNode = _7[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);
@@ -550,8 +553,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 _7 = (0, react_2.useState)([]), highlightedOptions = _7[0], setHighlightedOptions = _7[1];
-    var _8 = (0, react_2.useState)([]), flashedOptions = _8[0], setFlashedOptions = _8[1];
+    var _8 = (0, react_2.useState)([]), highlightedOptions = _8[0], setHighlightedOptions = _8[1];
+    var _9 = (0, react_2.useState)([]), flashedOptions = _9[0], setFlashedOptions = _9[1];
     var flashTimeout = (0, react_2.useRef)();
     var flashOptions = (0, react_2.useCallback)(function (optionNames, scrollToFirst) {
         if (scrollToFirst === void 0) { scrollToFirst = false; }
@@ -600,16 +603,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 _9 = (0, react_2.useState)({}), infoPanelOverrides = _9[0], setInfoPanelOverrides = _9[1];
+    var _10 = (0, react_2.useState)({}), infoPanelOverrides = _10[0], setInfoPanelOverrides = _10[1];
     // Toolbar filters affect the listed rows only — the meter reflects the full set.
-    var _10 = (0, react_2.useState)(false), requiredOnly = _10[0], setRequiredOnly = _10[1];
-    var _11 = (0, react_2.useState)(''), compactQuery = _11[0], setCompactQuery = _11[1];
+    var _11 = (0, react_2.useState)(false), requiredOnly = _11[0], setRequiredOnly = _11[1];
+    var _12 = (0, react_2.useState)(''), compactQuery = _12[0], setCompactQuery = _12[1];
     // Compact field sort (Fields menu → "Sort by"); 'schema' = declared order.
-    var _12 = (0, react_2.useState)('schema'), compactSort = _12[0], setCompactSort = _12[1];
-    var _13 = (0, react_2.useState)(function () { return ({
+    var _13 = (0, react_2.useState)('schema'), compactSort = _13[0], setCompactSort = _13[1];
+    var _14 = (0, react_2.useState)(function () { return ({
         fields: (0, exports.fixOptions)(value, options || {}, undefined, isRendererOnly),
         meta: undefined,
-    }); }), localValue = _13[0], setLocalValue = _13[1];
+    }); }), localValue = _14[0], setLocalValue = _14[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)
@@ -618,7 +621,7 @@ var FormEngineImpl = function (_a) {
         originalValue.current = localValue.fields;
     }
     var unavailableOptionsCount = (0, react_2.useRef)(0);
-    var _14 = (0, useQorusTypes_1.useQorusTypes)(), compactValue = _14.compactValue, typesLoading = _14.loading;
+    var _15 = (0, useQorusTypes_1.useQorusTypes)(), compactValue = _15.compactValue, typesLoading = _15.loading;
     var templates = (0, useTemplates_1.useTemplates)(allowTemplates, rest.stringTemplates, interfaceContext);
     (0, react_2.useEffect)(function () {
         if ((0, lodash_1.isEqual)(localValue.fields, value)) {
@@ -1613,6 +1616,9 @@ var FormEngineImpl = function (_a) {
     var cBg = (theme === null || theme === void 0 ? void 0 : theme.main) || '#181818';
     var cRowBg = (0, colors_1.changeDarkness)((0, colors_1.getMainBackgroundColor)(theme), 0.01);
     var cGroupLine = "".concat(cText, "1f");
+    // The "N more fields" row's dashed edge. Well above the divider tint: this
+    // one is an affordance the reader has to notice, not a hairline between rows.
+    var cMoreBorder = "".concat(cText, "4d");
     // The closure surface the extracted CompactRow reads through context. Refs and
     // setters are stable; the state/memo/handler fields change identity as they do
     // today, so a row re-renders exactly when its inputs do.
@@ -1952,6 +1958,33 @@ var FormEngineImpl = function (_a) {
         var showGroupSubLabel = function (groupName) {
             return (groupName !== 'general' && groupName !== 'optional') || !!(groups === null || groups === void 0 ? void 0 : groups[groupName]);
         };
+        // `preselected` means "show this option by default when a new form is
+        // loaded, so it's visible to the user". An empty non-required preselected
+        // field buckets to 'optional' (nothing is wrong with it, and it has no
+        // value), and the Optional box is collapsed by default — so the very
+        // fields the schema asked to put in front of the author were the ones
+        // nobody could see. A preselected row therefore forces its box open.
+        //
+        // A hidden row is an addable the author has not put in the form yet, so it
+        // is never what `preselected` is talking about, however its schema is
+        // flagged.
+        var isPreselectedRow = function (entry) {
+            var _a;
+            return !entry.hidden &&
+                !!((_a = options === null || options === void 0 ? void 0 : options[entry.name]) === null || _a === void 0 ? void 0 : _a.preselected);
+        };
+        // ONLY the Optional box. A preselected field that HAS a value buckets to
+        // 'set' and one that fails validation to 'attention'; in both boxes the
+        // field is already accounted for, and whether those boxes start collapsed
+        // is the consumer's deliberate `compactCollapsedGroups` choice. Overriding
+        // them here forced the Set box open against an explicit request.
+        var groupHasPreselectedRow = function (boxKey, groupName) {
+            return boxKey === 'optional' && (buckets[boxKey][groupName] || []).some(isPreselectedRow);
+        };
+        var boxHasPreselectedRows = function (boxKey) {
+            return boxKey === 'optional' &&
+                bucketGroups[boxKey].some(function (groupName) { return groupHasPreselectedRow(boxKey, groupName); });
+        };
         var STATUS_BOXES = [
             { key: 'attention', label: 'Needs attention', intent: 'warning', icon: 'ErrorWarningLine' },
             { key: 'set', label: 'Set', intent: 'success', icon: 'CheckLine' },
@@ -2006,6 +2039,32 @@ var FormEngineImpl = function (_a) {
                 return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRequiredClusterBox, { className: 'options-readfirst-required-cluster', "$border": "".concat(cWarning, "33"), "$tint": "".concat(cWarning, "0d"), children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRequiredClusterHeader, { "$color": cWarning, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'LinkM', size: '11px', style: { color: cWarning } }), "One of the below is required"] }), railed] }, grp));
             });
         };
+        // One schema group inside a status box: its thin sub-label, the group's
+        // subtitle, then its rows. Factored out of the box body so the SAME markup
+        // renders both the groups a box shows directly and the ones it defers
+        // behind the inner collapse.
+        /** @param only when given, render just these rows of the group — the group
+            can be split across the shown and folded halves of a capped box, and its
+            label must appear above whichever half holds its first row. */
+        var renderBoxGroup = function (boxKey, groupName, only) {
+            var groupConfig = groups === null || groups === void 0 ? void 0 : groups[groupName];
+            var rows = only ?
+                (buckets[boxKey][groupName] || []).filter(function (entry) { return only.has(entry.name); })
+                : buckets[boxKey][groupName];
+            if (only && !rows.length) {
+                return null;
+            }
+            return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [showGroupSubLabel(groupName) ?
+                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusBoxGroupLabel, { children: (0, readFirst_1.getOptionGroupLabel)(groupName, groups) })
+                        : null, showGroupSubLabel(groupName) && (groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.subtitle) ?
+                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { opacity: 0.6 }, style: {
+                                marginTop: 2,
+                                marginBottom: 8,
+                                marginLeft: compactRowStyles_1.GROUP_INDENT,
+                                paddingRight: 10,
+                            }, children: groupConfig.subtitle })
+                        : null, renderGroupRows(rows)] }, groupName));
+        };
         return ((0, jsx_runtime_1.jsx)(exports.OptionsContext.Provider, { value: { schema: options, value: availableOptions }, children: (0, jsx_runtime_1.jsx)(compactRowContext_1.CompactRowContext.Provider, { value: compactRowContextValue, children: (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreErrorBoundary, { children: [showHelpForOption && ((0, jsx_runtime_1.jsx)(OptionsHelpDialog_1.OptionsHelpDialog, { onClose: function () { return setShowHelpForOption(undefined); }, option: options[showHelpForOption] })), (0, jsx_runtime_1.jsx)(compactToolbarContext_1.CompactToolbarContext.Provider, { value: compactToolbarContextValue, children: (0, jsx_runtime_1.jsxs)(StyledCompactWrap, { ref: setCompactWrap, className: 'options-readfirst-scroll', "$flush": compactFlush || compactNested, children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCompactPanel
                                     // Mirrors the toolbar's own search-row gate: when no search
                                     // row renders, the header is a thin strip and sits tight to
@@ -2023,6 +2082,44 @@ var FormEngineImpl = function (_a) {
                                                 var count = bucketCount(box.key);
                                                 if (!count)
                                                     return null;
+                                                var hasPreselectedRows = boxHasPreselectedRows(box.key);
+                                                var wouldCollapse = compactCollapsedGroups.includes(box.key) &&
+                                                    !query &&
+                                                    !(box.key === 'optional' && onlyOptionalRows);
+                                                // Only a box that was opened SOLELY to reveal a preselected
+                                                // row splits its body; a box that renders open anyway shows
+                                                // all of its groups as before.
+                                                var splitForPreselected = wouldCollapse && hasPreselectedRows;
+                                                // Which rows this box shows, and which fold away, decided at
+                                                // ROW level because `maxFieldsShown` counts fields — a
+                                                // group-level split can only ever cut at a group boundary.
+                                                // Group order is preserved so the visible rows read in the
+                                                // same order they would if nothing were folded.
+                                                var orderedRows = groupsInBox.flatMap(function (groupName) { return buckets[box.key][groupName] || []; });
+                                                // Optional's own rule first: a box opened solely to reveal
+                                                // preselected rows offers those, not an arbitrary first-N.
+                                                var candidateRows = splitForPreselected ? orderedRows.filter(isPreselectedRow) : orderedRows;
+                                                // …then the cap applies to whatever that left.
+                                                var capped = maxFieldsShown !== undefined && candidateRows.length > maxFieldsShown;
+                                                var shownRows = capped ? candidateRows.slice(0, maxFieldsShown) : candidateRows;
+                                                var shownRowSet = new Set(shownRows.map(function (entry) { return entry.name; }));
+                                                // Everything the box holds that is not on show. Once the
+                                                // reader asks for more they get the whole box — withholding
+                                                // the non-preselected remainder behind a second control is
+                                                // the same defect one level down.
+                                                var deferredRowSet = new Set(orderedRows
+                                                    .filter(function (entry) { return !shownRowSet.has(entry.name); })
+                                                    .map(function (entry) { return entry.name; }));
+                                                var deferredCount = deferredRowSet.size;
+                                                var shownGroups = groupsInBox.filter(function (groupName) {
+                                                    return (buckets[box.key][groupName] || []).some(function (entry) {
+                                                        return shownRowSet.has(entry.name);
+                                                    });
+                                                });
+                                                var deferredGroups = groupsInBox.filter(function (groupName) {
+                                                    return (buckets[box.key][groupName] || []).some(function (entry) { return !shownRowSet.has(entry.name); });
+                                                });
+                                                var moreOpen = Boolean(query) || expandedMoreBoxes.includes(box.key);
                                                 var accent = box.key === 'attention' ? cWarning
                                                     : box.key === 'set' ? cSuccess
                                                         : cMuted;
@@ -2058,21 +2155,31 @@ var FormEngineImpl = function (_a) {
                                                     // nothing else. This does not generalise to the other two —
                                                     // a lone Set box collapsed is a deliberate ask, and its
                                                     // header still reports what is in there.
-                                                    isCollapsed: compactCollapsedGroups.includes(box.key) &&
-                                                        !query &&
-                                                        !(box.key === 'optional' && onlyOptionalRows), label: (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledGroupHeader, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { effect: { weight: 'bold' }, size: 'normal', children: box.label }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, compact: true, intent: box.intent, label: String(count) })] }), icon: box.icon, className: 'options-readfirst-group', padded: false, contentStyle: { padding: '4px 4px 6px' }, children: (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledGroupBody, { "$divider": cDivider, "$hover": cHover, "$focus": cWarning, "$success": cSuccess, "$rowBg": cRowBg, "$lineColor": cGroupLine, className: compactNarrow ? 'readfirst-narrow' : undefined, children: groupsInBox.map(function (groupName) {
-                                                            var groupConfig = groups === null || groups === void 0 ? void 0 : groups[groupName];
-                                                            return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [showGroupSubLabel(groupName) ?
-                                                                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusBoxGroupLabel, { children: (0, readFirst_1.getOptionGroupLabel)(groupName, groups) })
-                                                                        : null, showGroupSubLabel(groupName) && (groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.subtitle) ?
-                                                                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { opacity: 0.6 }, style: {
-                                                                                marginTop: 2,
-                                                                                marginBottom: 8,
-                                                                                marginLeft: compactRowStyles_1.GROUP_INDENT,
-                                                                                paddingRight: 10,
-                                                                            }, children: groupConfig.subtitle })
-                                                                        : null, renderGroupRows(buckets[box.key][groupName])] }, groupName));
-                                                        }) }) }, box.key));
+                                                    //
+                                                    // A PRESELECTED row overrides it too: the schema asked
+                                                    // for that field to be visible on a new form, so the
+                                                    // box it lands in opens. The groups it does NOT appear
+                                                    // in stay behind an inner collapse below, so opening
+                                                    // the box reveals the preselected fields without also
+                                                    // dumping every not-yet-added optional field on the
+                                                    // author.
+                                                    isCollapsed: wouldCollapse && !hasPreselectedRows, label: (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledGroupHeader, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { effect: { weight: 'bold' }, size: 'normal', children: box.label }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, compact: true, intent: box.intent, label: String(count) })] }), icon: box.icon, className: 'options-readfirst-group', padded: false, contentStyle: { padding: '4px 4px 6px' }, children: (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledGroupBody, { "$divider": cDivider, "$hover": cHover, "$focus": cWarning, "$success": cSuccess, "$rowBg": cRowBg, "$lineColor": cGroupLine, "$moreBorder": cMoreBorder, className: compactNarrow ? 'readfirst-narrow' : undefined, children: [shownGroups.map(function (groupName) {
+                                                                return renderBoxGroup(box.key, groupName, shownRowSet);
+                                                            }), deferredCount ?
+                                                                (0, jsx_runtime_1.jsxs)("button", { type: 'button', className: 'readfirst-row readfirst-more-row options-readfirst-more', "aria-expanded": moreOpen, onClick: function () {
+                                                                        return setExpandedMoreBoxes(function (prev) {
+                                                                            return prev.includes(box.key) ?
+                                                                                prev.filter(function (k) { return k !== box.key; })
+                                                                                : __spreadArray(__spreadArray([], prev, true), [box.key], false);
+                                                                        });
+                                                                    }, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { opacity: 0.8 }, children: moreOpen ?
+                                                                                'Show fewer'
+                                                                                : "".concat(deferredCount, " more ").concat(box.key === 'optional' ? 'optional ' : '', "field").concat(deferredCount === 1 ? '' : 's') }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'ArrowDownSLine', size: 'small', className: 'readfirst-more-chevron', effect: { opacity: 0.8 } })] })
+                                                                : null, deferredCount && moreOpen ?
+                                                                deferredGroups.map(function (groupName) {
+                                                                    return renderBoxGroup(box.key, groupName, deferredRowSet);
+                                                                })
+                                                                : null] }) }, box.key));
                                             })] })), commitMode === 'batched' && !readOnly && dirtyOptionNames.length ?
                                         (0, jsx_runtime_1.jsx)(StyledCommitDock, { "$bg": cBg, "$border": cDivider, children: (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { className: 'options-readfirst-commitbar', verticalAlign: 'center', wrap: true, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'tiny', minimal: true, flat: true, compact: true, effect: { uppercase: true, spaced: 1 }, intent: 'warning', icon: 'EditLine', label: "".concat(dirtyOptionNames.length, " unsaved change").concat(dirtyOptionNames.length === 1 ? '' : 's') }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: 'small', intent: 'success', icon: 'CheckLine', fixed: true, className: 'options-readfirst-save', disabled: !validityData.isValid, tooltip: validityData.isValid ?
                                                             'Apply the staged changes'