@mohasinac/appkit 4.42.1 → 4.42.2

package/dist/features/shell/SectionForm.js

@@ -10,6 +10,9 @@ import { useFormBottomActions } from "../layout/hooks/useFormBottomActions";
 import { useSectionState } from "../account/hooks/useCollapsedSections";
 import { FormSchemaContext } from "./FormShell";
 import { EASE_OUT_MS } from "../../tokens/motion";
+/* Stable identity — a fresh `{}` per render would break any memo a section
+ * render does on its `errors` prop. */
+const EMPTY_ERRORS = {};
 /** Sections in render order: required first, original order preserved within each group. */
 export function orderSections(sections) {
     return [...sections.filter((s) => s.required), ...sections.filter((s) => !s.required)];
@@ -118,6 +121,27 @@ export function SectionForm({ sections, values, onChange, onSubmit, submitLabel
      * a caller renders it outside a provider, which is legitimate.
      */
     const shellCtx = useContext(FormShellContext);
+    /*
+     * 🛑 Has the user ASKED to save yet?
+     *
+     * Root Cause #74 gated `FormErrorSummary` on this and stopped there. The
+     * per-section "N issues" badges below were never gated, and the eleven views
+     * that mount SectionForm all call `validate(draft)` from a MOUNT EFFECT —
+     * which that entry is explicit must STAY, because it is what keeps the errors
+     * current as the user fixes fields after a failed save. So `fieldErrors` is
+     * fully populated on first paint, and "Add New Address" opened reading
+     * "3 issues" and "4 issues" in red against a form nobody had typed into.
+     *
+     * Gate the DISPLAY, never the computation — deleting the mount-effect
+     * validate is the obvious repair and it is the wrong one.
+     *
+     * Local state rather than `shellCtx.submitAttempted` alone: SectionForm owns
+     * the submit button, so it always knows, whereas `shellCtx` is legitimately
+     * null when a caller renders it outside a provider (see above). Both are
+     * consulted, so a provider-level attempt from the pinned mobile bar counts too.
+     */
+    const [attemptedHere, setAttemptedHere] = useState(false);
+    const submitAttempted = attemptedHere || shellCtx?.submitAttempted === true;
     const [fieldErrors, setFieldErrors] = useState({});
     const [uncontrolledOpenIds, setUncontrolledOpenIds] = useState(() => orderSections(sections).filter((s) => s.required).map((s) => s.id));
     /*
@@ -251,6 +275,7 @@ export function SectionForm({ sections, values, onChange, onSubmit, submitLabel
      * identically whichever the user presses.
      */
     const handleSubmit = useCallback(() => {
+        setAttemptedHere(true);
         shellCtx?.markSubmitAttempted();
         /*
          * Reveal the FIRST offending section — only the first. Expanding all five
@@ -328,9 +353,15 @@ export function SectionForm({ sections, values, onChange, onSubmit, submitLabel
                      * <button><div><span><div> — invalid, since a button may only
                      * contain phrasing content. Same variant props, legal element.
                      */
-                    _jsxs(Row, { as: "span", align: "center", gap: "xs", className: "min-w-0", children: [_jsx(Span, { weight: "semibold", size: "sm", children: section.heading ?? section.label }), isRequired && _jsx(Span, { size: "xs", color: "muted", children: "Required" })] }), isCollapsed: isCollapsed, collapsible: !isRequired, onToggle: () => toggle(section.id), keepMounted: section.keepMounted, renderHeaderExtra: errorCount > 0
+                    _jsxs(Row, { as: "span", align: "center", gap: "xs", className: "min-w-0", children: [_jsx(Span, { weight: "semibold", size: "sm", children: section.heading ?? section.label }), isRequired && _jsx(Span, { size: "xs", color: "muted", children: "Required" })] }), isCollapsed: isCollapsed, collapsible: !isRequired, onToggle: () => toggle(section.id), keepMounted: section.keepMounted, renderHeaderExtra: 
+                    /* Only after the user has tried to save — see `submitAttempted` above. */
+                    submitAttempted && errorCount > 0
                         ? () => (_jsxs(Badge, { variant: "danger", children: [errorCount, " ", errorCount === 1 ? "issue" : "issues"] }))
-                        : undefined, children: section.render({ values, onChange: handleFieldChange, errors: fieldErrors }) }, section.id));
+                        : undefined, children: section.render({
+                        values,
+                        onChange: handleFieldChange,
+                        errors: submitAttempted ? fieldErrors : EMPTY_ERRORS,
+                    }) }, section.id));
             }), !hideActions && (
             /*
              * `justify="between"` so a destructive action sits opposite Save

package/dist/features/tester/seed-data/_happy-path.d.ts

@@ -0,0 +1,23 @@
+import type { TesterCaseRole } from "../schemas";
+interface HappyPathCase {
+    key: string;
+    label: string;
+    /** Every role the case affects; per-role detail goes inline in the expectations. */
+    roles: TesterCaseRole[];
+    startPage?: string;
+    steps: string[];
+    inputs?: Record<string, string | number | boolean>;
+    expectedBehaviour: string;
+    expectedUiState: string;
+    expectedData?: Record<string, string | number | boolean>;
+    endResult: string;
+    href?: string;
+}
+interface HappyPathPage {
+    pageKey: string;
+    pageLabel: string;
+    href?: string;
+    cases: HappyPathCase[];
+}
+export declare const happyPathPages: HappyPathPage[];
+export {};