@qoretechnologies/reqraft 0.10.4 → 0.10.5

package/src/components/form/engine/FormEngine.tsx

@@ -475,6 +475,14 @@ export interface IFormEngineProps extends Omit<IReqoreCollectionProps, 'onChange
    * form should line up with the section description above it. Default `false`.
    */
   compactFlush?: boolean;
+  /**
+   * Compact mode only: this form is an EMBEDDED sub-form (e.g. an arg_schema
+   * field's nested form) rather than the top-level scroller. It doesn't own a
+   * scroll context, so the toolbar isn't sticky and its header drops the dark
+   * blurred backdrop (and the stacking context that goes with it) — it sits
+   * transparently inside the parent's edit card. Default `false`.
+   */
+  compactNested?: boolean;
   /** Compact mode only: per-group display metadata (label / icon / subtitle /
    * order) — the server only sends the bare group key. */
   groups?: Record<string, IFormEngineGroup>;
@@ -531,6 +539,7 @@ export const FormEngine = ({
   showTypeToggle = true,
   compact,
   compactFlush = false,
+  compactNested = false,
   commitMode = 'immediate',
   expandMode = 'single',
   onCommit,
@@ -624,9 +633,15 @@ export const FormEngine = ({
   const flashTimeout = useRef<ReturnType<typeof setTimeout>>();
   const flashOptions = useCallback((optionNames: string[], scrollToFirst = false) => {
     if (scrollToFirst && optionNames[0]) {
-      document
-        .querySelector(`.readfirst-row[data-field="${optionNames[0]}"]`)
-        ?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+      // Defer to the next frame: when this fires for a field that just changed
+      // panels, its row has only just re-mounted in the new box — scrolling in the
+      // same tick targets the stale (pre-move) layout, so the page doesn't budge.
+      // A rAF lets the new position settle first.
+      requestAnimationFrame(() => {
+        document
+          .querySelector(`.readfirst-row[data-field="${optionNames[0]}"]`)
+          ?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+      });
     }
     setFlashedOptions(optionNames);
     clearTimeout(flashTimeout.current);
@@ -637,6 +652,28 @@ export const FormEngine = ({
     [flashOptions]
   );
   useEffect(() => () => clearTimeout(flashTimeout.current), []);
+
+  // Follow a field across panels: when its status bucket changes — e.g. you fill
+  // an optional field and it jumps to Set / Needs attention — scroll to its new
+  // row and flash it so it's easy to keep track of. `settledBucket` holds each
+  // field's current panel (frozen while the field is being edited, it re-buckets
+  // on collapse), so diffing it after every render catches the move the instant it
+  // lands in the new panel. Runs every render; the diff is cheap and only fires a
+  // scroll on an ACTUAL move of a non-expanded field.
+  const prevSettledBucket = useRef<Record<string, 'attention' | 'set' | 'optional'>>({});
+  useEffect(() => {
+    if (!compact) return;
+    const cur = settledBucket.current;
+    const prev = prevSettledBucket.current;
+    const moved = Object.keys(cur).find(
+      (name) => prev[name] && prev[name] !== cur[name] && !expandedOptions.includes(name)
+    );
+    prevSettledBucket.current = { ...cur };
+    if (moved) {
+      flashOptions([moved], true);
+    }
+  });
+
   const compactNarrow = !!compactWrapWidth && compactWrapWidth < 480;
   // Info panels auto-open on Tier-1 content; the per-row user override sticks.
   const [infoPanelOverrides, setInfoPanelOverrides] = useState<Record<string, boolean>>({});
@@ -1038,6 +1075,10 @@ export const FormEngine = ({
         meta: undefined,
       };
     });
+    // Collapse it too: a removed field drops back to the (collapsed) Optional box
+    // as a quiet addable row — if it was being edited, that editor must close
+    // rather than linger as an open editor for a field that's no longer added.
+    setExpandedOptions((prev) => prev.filter((name) => name !== optionName));
   }, []);
 
   const handleAddOptionalFieldChange = useCallback(
@@ -1908,15 +1949,18 @@ export const FormEngine = ({
         pushRow(optionName, false);
       }
     });
-    // When searching, also surface matching hidden optional fields (not yet
-    // added) so the search spans the whole schema, not just the visible rows.
-    if (query) {
-      forEach(filteredOptions, (_schema, optionName) => {
-        if (matchesQuery(optionName)) {
-          pushRow(optionName, true);
-        }
-      });
-    }
+    // Surface EVERY not-yet-added optional field as an addable (hidden) row, so
+    // the whole schema is browsable inline — they all land in the Optional box
+    // (hidden ⇒ 'optional' bucket) instead of being buried in the Fields menu.
+    // Narrowed by the same filters as the listed rows (search query + required-
+    // only). availableOptions (listed) and filteredOptions (these) are disjoint —
+    // the former is built from fixedValue keys, the latter excludes them — so a
+    // field is never both a listed and a hidden row.
+    forEach(filteredOptions, (_schema, optionName) => {
+      if (matchesFilters(optionName)) {
+        pushRow(optionName, true);
+      }
+    });
 
     // User sort (Fields menu → "Sort by"), applied WITHIN each group so the
     // group sections and the required-group rails are preserved. Schema order is
@@ -2102,19 +2146,35 @@ export const FormEngine = ({
               <StyledCompactWrap
                 ref={setCompactWrap}
                 className='options-readfirst-scroll'
-                $flush={compactFlush}
+                // A nested sub-form sits flush inside the parent's card — no outer
+                // gutter (the card already provides the breathing room).
+                $flush={compactFlush || compactNested}
               >
                 <StyledCompactPanel
-                  $headerBg={headerBg}
+                  // The top-level form scrolls, so its toolbar STICKS and carries a
+                  // dark blurred backdrop so content ghosts cleanly beneath it. A
+                  // nested (arg_schema) sub-form owns no scroll context — drop the
+                  // sticky, the backdrop, and the stacking context so its header is
+                  // transparent inside the parent's card.
+                  $headerBg={compactNested ? 'transparent' : headerBg}
+                  $nested={compactNested}
                   flat
-                  stickyHeader
+                  // No panel background: the form sits transparently on whatever
+                  // hosts it (page, drawer, or — for an arg_schema field — the
+                  // parent's edit card) instead of stacking its own dark surface.
+                  // The status boxes keep their own tints; the sticky toolbar keeps
+                  // its blurred header via the $headerBg override.
+                  transparent
+                  stickyHeader={!compactNested}
                   padded={false}
                   actions={compactHeaderActions}
                   contentStyle={{
                     display: 'flex',
                     flexFlow: 'column',
                     gap: '10px',
-                    padding: '0 0 12px',
+                    // Nested sub-form: no surrounding panel padding (it's flush in
+                    // the parent card); top-level keeps a small bottom gutter.
+                    padding: compactNested ? '0' : '0 0 12px',
                   }}
                 >
                   {size(groupKeys) === 0 ?
@@ -2147,6 +2207,14 @@ export const FormEngine = ({
                         minimal
                         collapseButtonProps={{ flat: true, minimal: true, size: 'small' }}
                         collapsible
+                        // 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 —
+                        // and ReqorePanel unmounts collapsed content — so force it
+                        // open whenever a query is active. (isCollapsed is the
+                        // panel's controllable state; manual toggling still works
+                        // when no query is set.)
+                        isCollapsed={box.key === 'optional' && !query}
                         label={
                           <StyledGroupHeader>
                             <ReqoreP effect={{ weight: 'bold' }} size='normal'>

package/src/components/form/engine/compactRowStyles.ts

@@ -44,12 +44,17 @@ export const PANEL_LEFT_CSS = `calc(${LABEL_COL} + ${COMPACT_ROW_PAD_X + COMPACT
 // content blurs softly through.
 export const StyledCompactPanel = styled(ReqorePanel)<{
   $headerBg: string;
+  $nested?: boolean;
 }>`
   > .reqore-panel-title {
     background: ${({ $headerBg }) => $headerBg};
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
-    transform: translateZ(0);
+    /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost
+       content beneath it; a nested sub-form's header isn't sticky, so skip them
+       (and the stacking context translateZ creates). */
+    ${({ $nested }) =>
+      $nested ?
+        ''
+      : 'backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transform: translateZ(0);'}
     padding-top: ${GAP_FROM_SIZE[HEADER_GAP]}px;
     padding-bottom: ${GAP_FROM_SIZE[HEADER_GAP]}px;
   }
@@ -289,18 +294,11 @@ export const StyledRowValue = styled.div<{ $color: string; $empty?: boolean }>`
 export const StyledRowActions = styled.div`
   display: flex;
   align-items: center;
-  /* The row top-aligns its cells, so the actions sit at the row's content top.
-     Hover action buttons (revert/delete) are ~24px and would otherwise pull the
-     centred dot down with them — pin the dot to the LABEL's first line instead so
-     it stays at a single, consistent height on every row no matter what hangs
-     below the value. */
-  align-self: start;
+  /* No align-self override: the actions (incl. the status dot) follow the row's
+     own vertical alignment — CENTRED on the common single-line row, TOP-aligned
+     (first line) on the tall rows that opt into align-items:start (descriptions /
+     message panels / hash previews). */
   gap: 6px;
-  .options-readfirst-statusdot-slot {
-    align-self: flex-start;
-    align-items: center;
-    height: 12px;
-  }
 `;
 
 // A single status mark pinned at the row's trailing edge: one dot, colour =
@@ -383,14 +381,18 @@ export const StyledGroupBody = styled.div<{
        grid wider than its container and produce a horizontal scrollbar. The 0
        minimum lets it shrink and the value cell's ellipsis take over instead. */
     grid-template-columns: ${LABEL_COL} minmax(0, 1fr) auto;
-    /* TOP-align cells: the label, value and status dot all start on the first
-       line, so the dot sits at a consistent place no matter how tall the value
-       (chips, wrapped text, message panels) makes the row. Rows size to content
-       (no min-height) so the inter-field gap stays uniform. */
-    align-items: start;
+    /* CENTRE the cells vertically: on the common single-line read row the label,
+       value and status dot all sit on one centred line. Tall rows (a shown
+       description, message panels or a hash preview) opt back into top-alignment
+       (.readfirst-row-info-open / .readfirst-row-tall below) so the label + dot
+       stay on the value's FIRST line instead of floating to the middle. */
+    align-items: center;
     gap: 14px;
-    min-height: 26px;
-    padding: 4px 10px;
+    /* Generous, SYMMETRIC vertical padding so a single-line row isn't cramped
+       (content sits with even breathing room top + bottom); a min-height floor
+       keeps the rare shorter row a comfortable tap target. */
+    min-height: 40px;
+    padding: 9px 10px;
     border-radius: 6px;
     cursor: pointer;
     transition: background 0.12s ease;
@@ -469,10 +471,11 @@ export const StyledGroupBody = styled.div<{
        the ✓/↺ cluster get small offsets to sit optically centred on it. */
     align-items: start;
     background: ${({ $hover }) => $hover};
-    /* Zero vertical padding: the pinned min-height (captured from the read
-       row at activation) owns the height; the editor centres within it. */
+    /* No top padding (the per-cell nudges below anchor the editor to the first
+       line), but a real BOTTOM padding so the editor never sits flush against
+       the row's bottom edge — a tall input used to look clipped/unfinished. */
     padding-top: 0;
-    padding-bottom: 0;
+    padding-bottom: 9px;
     /* Tighter column gap: the editor's trailing template ⋮ and our ✓ should
        read as one control cluster, not two separated groups. */
     column-gap: 6px;
@@ -566,11 +569,12 @@ export const StyledGroupBody = styled.div<{
   /* (The required-group connection rail was removed — the "One of the below is
      required" box now carries the grouping.) */
 
-  /* A field's short_desc renders under its NAME (revealed by the ⓘ toggle),
-     growing the label block to multiple lines. Top-anchor those open rows so the
-     value lines up with the name rather than the middle of the taller label;
-     closed (single-line) rows keep the centred read-row rhythm. */
-  .readfirst-row-info-open {
+  /* Tall rows top-anchor (overriding the row's centred default) so the label and
+     dot stay on the value's FIRST line rather than floating to the vertical
+     middle: .readfirst-row-info-open = a shown short_desc grows the LABEL;
+     .readfirst-row-tall = message panels / a hash preview grow the VALUE cell. */
+  .readfirst-row-info-open,
+  .readfirst-row-tall {
     align-items: start;
   }
   /* Narrow stacks label-over-value: the value aligns flush UNDER the label (no

package/src/components/form/fields/auto/AutoFormField.stories.tsx

@@ -190,9 +190,16 @@ export const ViaFormEngine: Story = {
   },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
-    await expect(await canvas.findByText('My Auto Field')).toBeInTheDocument();
+    // Generous timeout: findByText defaults to 1s, which flakes under CI load
+    // while the engine boots the auto field's type picker (the rest of the suite
+    // waits ~10s).
+    await expect(
+      await canvas.findByText('My Auto Field', undefined, { timeout: 10000 })
+    ).toBeInTheDocument();
     // The auto field renders its type picker inside the engine-driven form.
-    await expect(await canvas.findByText('Please select data type')).toBeInTheDocument();
+    await expect(
+      await canvas.findByText('Please select data type', undefined, { timeout: 10000 })
+    ).toBeInTheDocument();
   },
 };
 

package/src/components/form/fields/auto/AutoFormField.tsx

@@ -545,6 +545,9 @@ function AutoField<T = any>({
                 wrapperPadding='top'
                 flat
                 compact={compact}
+                // Embedded sub-form: no scroll context of its own, so its toolbar
+                // isn't sticky and its header stays transparent (no dark backdrop).
+                compactNested
                 name={name}
                 uniqueName={uniqueName}
                 options={finalArgSchema}