@openg2p/registry-widgets 1.1.0-dev.8 → 1.1.0

package/dist/index.js

@@ -246,24 +246,27 @@ const getValidationPattern = (validationType) => {
 };
 
 /**
- * Validate value against validation rules
+ * Validate value against validation rules.
+ *
+ * @param skipRequired - When true, required-field checks are skipped (used by
+ *   per-section Save/Next buttons so the user can move between sections without
+ *   filling every mandatory field; only format/range checks still run).
  */
-const validateWidget = (value, validation, required = false) => {
+const validateWidget = (value, validation, required = false, skipRequired = false) => {
     const errors = [];
     if (!validation && !required) {
         return errors;
     }
-    // Check required
-    const isRequired = validation?.required ?? required;
+    // Check required (skipped when navigating between sections)
+    const isRequired = !skipRequired && (validation?.required ?? required);
     // For boolean, false is a valid value, so only check for null/undefined/empty string
     const isEmpty = value === null || value === undefined || value === '';
     if (isRequired && isEmpty) {
         errors.push('This field is required');
         return errors; // Return early if required field is empty
     }
-    // Skip other validations if value is empty and not required
-    // Note: For boolean, false is a valid value, so we only skip if truly empty
-    if (isEmpty && !isRequired) {
+    // Skip format/range validations if value is empty
+    if (isEmpty) {
         return errors;
     }
     if (!validation) {
@@ -1075,16 +1078,12 @@ const getApiDataSource = async (dataSource, allValues, dataSourceRequestHandler,
             console.error('[getApiDataSource] API data source missing endpoint. Use "endpoint" field to specify the operation (e.g., "get_g2p_geo_level_values")');
             return [];
         }
-        let response;
-        try {
-            response = await dataSourceRequestHandler(service, endpoint, method, requestParams, {
-                headers: dataSource.headers,
-            });
-        }
-        catch (error) {
-            console.error('[getApiDataSource] Handler error:', error);
-            throw error;
-        }
+        // Call handler — let any throw propagate to the outer catch so it is logged once
+        // by useBaseWidget rather than double-logged here (which can cascade when
+        // intercept-console-error.js converts console.error calls into thrown errors).
+        const response = await dataSourceRequestHandler(service, endpoint, method, requestParams, {
+            headers: dataSource.headers,
+        });
         // Handle OpenG2P response format (response_body.response_payload)
         if (response && typeof response === 'object') {
             if (response.response_body?.response_payload && Array.isArray(response.response_body.response_payload)) {
@@ -1107,8 +1106,8 @@ const getApiDataSource = async (dataSource, allValues, dataSourceRequestHandler,
         return [];
     }
     catch (error) {
-        console.error('Error fetching API data source:', error);
-        return [];
+        // Rethrow so useBaseWidget's catch can log it with full widget context
+        throw error;
     }
 };
 /**
@@ -2302,7 +2301,7 @@ const useBaseWidget = (options) => {
                 dispatch(setDataSource({ widgetId, data: transformed }));
             }
             catch (error) {
-                console.error(`[useBaseWidget] ERROR loading data source for ${widgetId}:`, error);
+                console.error(`[useBaseWidget] ERROR loading data source for widget "${widgetId}" (type="${dataSource.type}"):`, error, '\nWidget config:', config, '\ndataSourceRequestHandler provided:', Boolean(dataSourceRequestHandler));
                 dispatch(setDataSource({ widgetId, data: [] }));
             }
             finally {
@@ -3807,7 +3806,15 @@ const collectWidgets = (panels) => {
     });
     return widgets;
 };
-const sectionValidate = (section, currentSchemaData, dispatch) => {
+/**
+ * Validate all widgets in a section and dispatch errors to the store.
+ *
+ * @param skipRequired - When true, required-field checks (widget-required,
+ *   validation.required, document-required) are skipped. Use this for
+ *   per-section Save/Next navigation so the user can advance without filling
+ *   every mandatory field; only format/range errors are reported.
+ */
+const sectionValidate = (section, currentSchemaData, dispatch, skipRequired = false) => {
     const allWidgets = collectWidgets(section.panels);
     let isValid = true;
     for (const widget of allWidgets) {
@@ -3816,7 +3823,7 @@ const sectionValidate = (section, currentSchemaData, dispatch) => {
             continue;
         const widgetId = widget['widget-id'];
         const value = getWidgetValue(currentSchemaData, widget['widget-data-path'], widgetId);
-        const errors = validateWidget(value, widget['widget-data-validation'], widget['widget-required']);
+        const errors = validateWidget(value, widget['widget-data-validation'], widget['widget-required'], skipRequired);
         if (errors.length > 0) {
             isValid = false;
             dispatch(setTouched({ widgetId, touched: true }));
@@ -3827,10 +3834,10 @@ const sectionValidate = (section, currentSchemaData, dispatch) => {
             dispatch(setError({ widgetId, errors: [] }));
         }
     }
-    // Supporting Documents
+    // Supporting Documents — only check required when not skipping required validation
     section['section-supporting-documents']?.forEach((doc, index) => {
         const widgetId = `supporting-doc-${section['section-id']}-${index}`;
-        if (doc['document-required']) {
+        if (!skipRequired && doc['document-required']) {
             const file = getValueByPath(currentSchemaData, doc['document-data-path']);
             if (!file) {
                 isValid = false;
@@ -3936,7 +3943,7 @@ function scopedClassSelectors(sectionClassId, classNames) {
  * - Panels wrap when they exceed available width
  * - Sections can sit side-by-side if there's space
  */
-const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, changeRequestType, showChangeRequestLabel = true, dbSectionId, sectionRegisterId, onSectionDirtyChange, sectionIndex, sectionCount, expandedSectionIndex, onExpandSection, onSectionSaveSuccess, onPreviousSection, isDraft, onEditModeChange, forceExitEdit, }) => {
+const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, changeRequestType, showChangeRequestLabel = true, dbSectionId, sectionRegisterId, onSectionDirtyChange, sectionIndex, sectionCount, expandedSectionIndex, onExpandSection, onSectionSaveSuccess, onPreviousSection, isDraft, isAccessible = false, onEditModeChange, forceExitEdit, }) => {
     const { translateConfig, translate } = useWidgetTranslation();
     const resolvedTheme = useWidgetTheme();
     const portalCSSVariables = React.useMemo(() => themeToCSSVariables(resolvedTheme), [resolvedTheme]);
@@ -4002,16 +4009,25 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const isExpandedFromContainer = typeof sectionIndex === 'number' && expandedSectionIndex === sectionIndex;
     const isExpandedStandalone = sectionIndex === undefined && standaloneExpanded;
     const isExpanded = mode === 'IntakeForm' && (isExpandedFromContainer || isExpandedStandalone);
+    // IntakeForm only: tracks whether the user has clicked Next on this section at least once.
+    // Used to unlock the accordion header so the user can navigate back to a visited section.
+    const [hasBeenSavedByUser, setHasBeenSavedByUser] = React.useState(false);
+    // Accordion header click behaviour in IntakeForm mode:
+    //   - Standalone (no sectionIndex): always toggleable.
+    //   - Managed by SectionsContainer: toggleable only when isAccessible is true
+    //     (i.e. the section has been visited OR is the immediate next one).
+    //     Sections beyond that remain locked.
     const handleAccordionToggle = React.useCallback(() => {
         if (mode !== 'IntakeForm')
             return;
-        if (typeof sectionIndex === 'number' && onExpandSection) {
-            onExpandSection(sectionIndex);
-        }
-        else if (sectionIndex === undefined) {
+        if (sectionIndex === undefined) {
             setStandaloneExpanded(prev => !prev);
         }
-    }, [mode, sectionIndex, onExpandSection]);
+        else if (isAccessible && onExpandSection) {
+            onExpandSection(sectionIndex);
+        }
+        // Intentionally no-op for locked sections (isAccessible === false)
+    }, [mode, sectionIndex, isAccessible, onExpandSection]);
     // Recursively count all vertical panels, especially those nested inside horizontal panels
     // Typically: horizontal panels at first level contain vertical panels at second level
     // Accounts for panel-column-span: a panel with column-span 3 counts as 3 columns
@@ -4346,8 +4362,6 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const baselineSnapshotRef = React.useRef(null);
     // IntakeForm only: increment when baseline is updated after save - forces badge to update (refs don't trigger re-renders)
     const [intakeFormBaselineTrigger, setIntakeFormBaselineTrigger] = React.useState(0);
-    // IntakeForm only: tracks whether the user has actually saved this section (prevents "Saved" badge on initial load)
-    const [hasBeenSavedByUser, setHasBeenSavedByUser] = React.useState(false);
     // IntakeForm: treat as edit mode for dirty tracking when isDraft. RegistryView: use isEditMode.
     const effectiveEditModeForDirty = mode === 'IntakeForm' ? (isDraft !== false) : isEditMode;
     // Compute isDirty: compare current store state to baseline (only when in edit mode)
@@ -4465,7 +4479,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         const sectionWidgets = collectWidgets(originalSection.panels);
         const currentState = store.getState().widget;
         const currentSchemaData = currentState.values || {};
-        const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch);
+        const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch, true);
         if (!isSectionValid) {
             return;
         }
@@ -4531,7 +4545,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             const sectionWidgets = collectWidgets(originalSection.panels);
             const currentState = store.getState().widget;
             const currentSchemaData = currentState.values || {};
-            const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch);
+            const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch, true);
             if (!isSectionValid)
                 return;
             const oldSchemaData = schemaData || contextSchemaData;
@@ -4580,6 +4594,11 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             }
             onSectionDirtyChange?.(sectionId, false);
         }
+        else if (mode === 'IntakeForm') {
+            // No onSectionSave provided, but still mark section as visited so the
+            // user can navigate back to it by clicking the accordion header.
+            setHasBeenSavedByUser(true);
+        }
         // Always navigate to the next section
         onSectionSaveSuccess?.(sectionIndex);
     }, [store, onSectionSave, onSectionSaveSuccess, sectionIndex, originalSection, schemaData, contextSchemaData, namespace, hasSupportingDocuments, dbSectionId, sectionRegisterId, dispatch, buildSectionSnapshot, sectionId, onSectionDirtyChange, mode, isDraft]);
@@ -4798,13 +4817,17 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header h2 {
           color: var(--owt-color-primary-dark, #F07B1A);
         }
-        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header:hover {
+        /* Hover / focus only shown when the header is actually interactive (standalone mode) */
+        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header[data-interactive="true"]:hover {
           opacity: 0.85;
         }
-        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header:focus-visible {
+        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header[data-interactive="true"]:focus-visible {
           outline: 2px solid var(--owt-color-primary, #F5BB1A);
           outline-offset: 2px;
         }
+        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header[data-interactive="false"]:focus-visible {
+          outline: none;
+        }
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-content {
           padding-top: 8px;
           padding-bottom: 0px;
@@ -4847,7 +4870,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                     }),
                 }, children: mode === 'IntakeForm' ? (
                 /* IntakeForm: accordion layout - header always visible, content only when expanded */
-                jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("button", { type: "button", id: `intake-form-accordion-header-${sectionId}`, className: "intake-form-accordion-header", onClick: handleAccordionToggle, "aria-expanded": isExpanded, "aria-controls": isExpanded ? `intake-form-accordion-content-${sectionId}` : undefined, style: {
+                jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("button", { type: "button", id: `intake-form-accordion-header-${sectionId}`, className: "intake-form-accordion-header", onClick: handleAccordionToggle, "aria-expanded": isExpanded, "aria-controls": isExpanded ? `intake-form-accordion-content-${sectionId}` : undefined, "data-interactive": sectionIndex === undefined || isAccessible ? 'true' : 'false', style: {
                                 width: '100%',
                                 display: 'flex',
                                 alignItems: 'flex-start',
@@ -4857,7 +4880,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                 marginBottom: 0,
                                 background: 'none',
                                 border: 'none',
-                                cursor: 'pointer',
+                                cursor: sectionIndex === undefined || isAccessible ? 'pointer' : 'default',
                                 textAlign: 'left',
                                 fontFamily: 'Roboto, sans-serif',
                             }, children: [jsxRuntimeExports.jsxs("div", { style: { flex: 1, display: 'flex', alignItems: 'center', gap: '12px', minWidth: 0 }, children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold", style: { margin: 0 }, children: sectionToRender['section-title']
@@ -5155,6 +5178,11 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     const dataSourceRequestHandler = propDataSourceRequestHandler || contextDataSourceRequestHandler;
     // IntakeForm mode: accordion state - which section is expanded (null = none; first expanded by default)
     const [expandedSectionIndex, setExpandedSectionIndex] = React.useState(0);
+    // IntakeForm mode: high-water mark of the furthest section the user has clicked Next on.
+    // A section at index i is accessible when i <= maxVisitedIndex + 1
+    // (i.e. every visited section plus the one immediately after it).
+    // Starts at -1 so only section 0 is accessible before any Next is clicked.
+    const [maxVisitedIndex, setMaxVisitedIndex] = React.useState(-1);
     // RegistryView: track which section is currently in edit mode (by section-id); null = none
     const [editingSectionId, setEditingSectionId] = React.useState(null);
     const handleEditModeChange = React.useCallback((sectionId, editing) => {
@@ -5165,6 +5193,10 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     // Stable ref for namespace so formHandle useMemo doesn't depend on the (possibly inline) function identity
     const namespaceRef = React.useRef(namespace);
     namespaceRef.current = namespace;
+    // Stable refs so formHandle closure can access current mode and accordion setter without stale captures
+    const modeRef = React.useRef(mode);
+    modeRef.current = mode;
+    const setExpandedSectionIndexRef = React.useRef(setExpandedSectionIndex);
     // Track dirty (unsaved changes) per section for form handle validation
     const sectionDirtyMapRef = React.useRef({});
     const handleSectionDirtyChange = React.useCallback((sectionId, isDirty) => {
@@ -5175,8 +5207,9 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     const handleExpandSection = React.useCallback((index) => {
         setExpandedSectionIndex(prev => (prev === index ? null : index));
     }, []);
-    // IntakeForm mode: called after section save - collapse current, expand next
+    // IntakeForm mode: called after section save - advance high-water mark, collapse current, expand next
     const handleSectionSaveSuccess = React.useCallback((index) => {
+        setMaxVisitedIndex(prev => Math.max(prev, index));
         if (index + 1 < safeSections.length) {
             setExpandedSectionIndex(index + 1);
         }
@@ -5226,33 +5259,52 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
         };
         return {
             validate: async () => {
-                checkNoUnsavedChanges();
+                if (modeRef.current !== 'IntakeForm')
+                    checkNoUnsavedChanges();
                 const values = getValues();
                 let allValid = true;
+                let firstInvalidIndex = null;
                 for (let i = 0; i < safeSections.length; i++) {
                     const section = safeSections[i];
                     const ns = getNamespace(section, i);
                     const sectionToValidate = ns ? namespaceSectionConfig(section, ns) : section;
                     const valid = sectionValidate(sectionToValidate, values, dispatch);
-                    if (!valid)
+                    if (!valid) {
+                        if (firstInvalidIndex === null)
+                            firstInvalidIndex = i;
                         allValid = false;
+                    }
+                }
+                if (!allValid && modeRef.current === 'IntakeForm' && firstInvalidIndex !== null) {
+                    setExpandedSectionIndexRef.current(firstInvalidIndex);
                 }
                 return allValid;
             },
             getFormData: () => getValues(),
             validateAndGetData: async () => {
-                checkNoUnsavedChanges();
+                if (modeRef.current !== 'IntakeForm')
+                    checkNoUnsavedChanges();
                 const values = getValues();
                 const results = [];
+                let firstInvalidIndex = null;
                 for (let i = 0; i < safeSections.length; i++) {
                     const section = safeSections[i];
                     const ns = getNamespace(section, i);
                     const sectionToValidate = ns ? namespaceSectionConfig(section, ns) : section;
                     const valid = sectionValidate(sectionToValidate, values, dispatch);
                     if (!valid) {
-                        throw new Error('Validation failed');
+                        if (firstInvalidIndex === null)
+                            firstInvalidIndex = i;
+                    }
+                    else {
+                        results.push(buildSectionChanges(section, values, ns));
                     }
-                    results.push(buildSectionChanges(section, values, ns));
+                }
+                if (firstInvalidIndex !== null) {
+                    if (modeRef.current === 'IntakeForm') {
+                        setExpandedSectionIndexRef.current(firstInvalidIndex);
+                    }
+                    throw new Error('Validation failed. Please fix the errors and try again.');
                 }
                 return results;
             },
@@ -5351,6 +5403,8 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
                             onSectionSaveSuccess: handleSectionSaveSuccess,
                             onPreviousSection: handlePreviousSection,
                             isDraft,
+                            // Accessible = every visited section + the one immediately after
+                            isAccessible: index <= maxVisitedIndex + 1,
                         }
                         : {};
                     // RegistryView: single-edit coordination props
@@ -7333,7 +7387,7 @@ const NumberInputWidget = ({ config }) => {
         if (parsed === null) {
             // Allow empty input or partial input (e.g., "-", ".")
             if (inputValue === '' || inputValue === '-' || inputValue === '.') {
-                onChange('');
+                onChange(null);
             }
             // Don't update if invalid - let user continue typing
             return;
@@ -9697,10 +9751,13 @@ const TextAreaWidget = ({ config }) => {
     // For readonly mode, render as preformatted text using <pre> tag
     if (isReadonly) {
         const displayValue = getStringValue() || '-';
-        return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] TextAreaDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("pre", { className: "text-base text-gray-900 font-medium whitespace-pre-wrap", title: String(displayValue), style: {
+        return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] TextAreaDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { title: String(displayValue), className: "text-base text-gray-900 font-medium overflow-y-auto whitespace-pre-wrap break-words", style: {
                             fontFamily: 'Roboto, sans-serif',
-                            margin: 0,
-                            padding: 0,
+                            height: '56px',
+                            minHeight: '56px',
+                            maxHeight: '56px',
+                            lineHeight: '20px',
+                            padding: '8px 0',
                             backgroundColor: 'transparent',
                             border: 'none',
                         }, children: displayValue }) })] }));