@openg2p/registry-widgets 1.1.6-dev.6 → 1.1.7

package/dist/index.js

@@ -1970,15 +1970,11 @@ const useBaseWidget = (options) => {
             }
             return docsValue !== undefined ? docsValue : config['widget-data-default'];
         }
-        let value = values[widgetId];
-        if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
-            value = extractValueFromObject(value);
-        }
-        if (value === undefined && config['widget-data-path']) {
-            value = getWidgetValue(values, config['widget-data-path'], widgetId);
-            if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
-                value = extractValueFromObject(value);
-            }
+        let value = config['widget-data-path']
+            ? getWidgetValue(values, config['widget-data-path'], widgetId)
+            : values[widgetId];
+        if (value === undefined) {
+            value = values[widgetId];
         }
         if (value === undefined && userHasSetValueRef.current && values[widgetId] !== undefined) {
             value = values[widgetId];
@@ -2173,6 +2169,10 @@ const useBaseWidget = (options) => {
         if (!dataSource) {
             return;
         }
+        if (dataSource.type === 'api' &&
+            (config.widget === 'parent-lookup' || config.widget === 'register-lookup')) {
+            return;
+        }
         const loadApiInReadonly = ['select', 'radio', 'checkbox', 'multi-select'].includes(config.widget);
         if (dataSource.type === 'api' && isReadonly && !loadApiInReadonly) {
             return;
@@ -2920,17 +2920,6 @@ function buildSectionChanges(section, storeValues, options) {
     };
 }
 
-const IDENTITY_AND_META_KEYS = new Set([
-    'edit_action',
-    'internal_record_id',
-    'link_internal_record_id',
-    'functional_record_id',
-    'created_at',
-    'created_by',
-    'last_approved_at',
-    'last_approved_by',
-    'search_text',
-]);
 const isPlainRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
 const valuesEqual = (baselineValue, currentValue) => {
     if (Object.is(baselineValue, currentValue))
@@ -2952,10 +2941,7 @@ const getRowId = (row) => {
     const id = row.internal_record_id;
     return typeof id === 'string' && id.length > 0 ? id : null;
 };
-const sectionFieldKeys = (baseline, current) => {
-    const keys = new Set([...Object.keys(baseline), ...Object.keys(current)]);
-    return [...keys].filter((key) => !IDENTITY_AND_META_KEYS.has(key));
-};
+const sectionFieldKeys = (baseline, current) => [...new Set([...Object.keys(baseline), ...Object.keys(current)])];
 const pickChangedFields = (baseline, current) => {
     const changed = {};
     for (const key of sectionFieldKeys(baseline, current)) {
@@ -2965,7 +2951,7 @@ const pickChangedFields = (baseline, current) => {
     }
     return changed;
 };
-/** All section fields (changed or not). Identity / meta keys stay out of the CR payload. */
+/** All widget-bound section fields (changed or not). */
 const pickAllSectionFields = (baseline, current) => {
     const fields = {};
     for (const key of sectionFieldKeys(baseline, current)) {
@@ -2976,29 +2962,64 @@ const pickAllSectionFields = (baseline, current) => {
     return fields;
 };
 const toRowList = (records) => records.filter(isPlainRecord);
-const diffFormRecord = (baselineRecords, currentRecords) => {
+const diffFormRecord = (baselineRecords, currentRecords, internalRecordId) => {
     const baseline = toRowList(baselineRecords)[0] ?? {};
     const current = toRowList(currentRecords)[0] ?? {};
     const changedFields = pickChangedFields(baseline, current);
     if (Object.keys(changedFields).length === 0)
         return [];
-    return [{ ...pickAllSectionFields(baseline, current), edit_action: 'UPDATE' }];
-};
-const diffTableRows = (baselineRecords, currentRecords) => {
+    const payload = {
+        ...pickAllSectionFields(baseline, current),
+        edit_action: 'UPDATE',
+    };
+    const recordId = getRowId(current) ??
+        getRowId(baseline) ??
+        (typeof internalRecordId === 'string' && internalRecordId.length > 0
+            ? internalRecordId
+            : null);
+    if (recordId) {
+        payload.internal_record_id = recordId;
+    }
+    return [payload];
+};
+const pickSectionFields = (row, sectionKeys) => {
+    const out = {};
+    for (const key of sectionKeys) {
+        if (Object.prototype.hasOwnProperty.call(row, key)) {
+            out[key] = row[key];
+        }
+    }
+    if (row.internal_record_id !== undefined)
+        out.internal_record_id = row.internal_record_id;
+    if (row.link_internal_record_id !== undefined)
+        out.link_internal_record_id = row.link_internal_record_id;
+    return out;
+};
+const diffTableRows = (baselineRecords, currentRecords, tableColumnKeys) => {
     const baselineRows = toRowList(baselineRecords);
     const currentRows = toRowList(currentRecords);
+    let sectionKeys;
+    if (tableColumnKeys && tableColumnKeys.length > 0) {
+        sectionKeys = new Set(tableColumnKeys);
+    }
+    else {
+        sectionKeys = new Set();
+        for (const row of baselineRows) {
+            for (const key of Object.keys(row)) {
+                sectionKeys.add(key);
+            }
+        }
+    }
     const baselineById = new Map();
     for (const row of baselineRows) {
         const id = getRowId(row);
-        if (id) {
+        if (id)
             baselineById.set(id, row);
-        }
     }
     const result = [];
     currentRows.forEach((row) => {
         const editAction = typeof row.edit_action === 'string' ? row.edit_action : undefined;
         const rowId = getRowId(row);
-        // Deleted row
         if (editAction === 'DELETE') {
             if (!rowId)
                 return;
@@ -3009,7 +3030,6 @@ const diffTableRows = (baselineRecords, currentRecords) => {
             });
             return;
         }
-        // New row
         if (editAction === 'ADD' || !rowId) {
             result.push({
                 ...row,
@@ -3017,20 +3037,17 @@ const diffTableRows = (baselineRecords, currentRecords) => {
             });
             return;
         }
-        // Existing row:
-        // Always include the complete row with UPDATE action,
-        // whether it was actually modified or not.
         result.push({
-            ...row,
+            ...pickSectionFields(row, sectionKeys),
             edit_action: 'UPDATE',
         });
     });
     return result;
 };
-function diffSectionChangeRecords(baselineRecords, currentRecords, { isTable }) {
+function diffSectionChangeRecords(baselineRecords, currentRecords, { isTable, internalRecordId, tableColumnKeys }) {
     return isTable
-        ? diffTableRows(baselineRecords, currentRecords)
-        : diffFormRecord(baselineRecords, currentRecords);
+        ? diffTableRows(baselineRecords, currentRecords, tableColumnKeys)
+        : diffFormRecord(baselineRecords, currentRecords, internalRecordId);
 }
 
 const cloneValue = (value) => {
@@ -3248,6 +3265,16 @@ const stripDocsWidgetFields = (records, panels) => {
         return copy;
     });
 };
+const readSectionInternalRecordId = (source, sectionRegisterId) => {
+    if (!sectionRegisterId)
+        return undefined;
+    const sectionData = source[sectionRegisterId];
+    if (!sectionData || typeof sectionData !== 'object' || Array.isArray(sectionData)) {
+        return undefined;
+    }
+    const id = sectionData.internal_record_id;
+    return typeof id === 'string' && id.length > 0 ? id : undefined;
+};
 const extractProfileImage = (records) => {
     let profileImage = null;
     const clonedRecords = records.map((record) => {
@@ -3303,7 +3330,23 @@ const executeSectionSave = async ({ store, dispatch, section, schemaData, contex
     if (sectionFieldsOnly) {
         const baselineStripped = stripDocsWidgetFields([...baselineRecords], section.panels);
         const isTable = sectionWidgets.some((widget) => isTableLikeWidget(widget));
-        records = diffSectionChangeRecords(baselineStripped, records, { isTable });
+        const internalRecordId = readSectionInternalRecordId(baselineSource, sectionRegisterId) ??
+            readSectionInternalRecordId(currentSchemaData, sectionRegisterId);
+        let tableColumnKeys;
+        if (isTable) {
+            const tableWidget = sectionWidgets.find(isTableLikeWidget);
+            const columns = tableWidget?.['widget-data-columns'];
+            if (Array.isArray(columns)) {
+                tableColumnKeys = columns
+                    .map((column) => column['column-key'] ?? column['widget-data-path'])
+                    .filter((key) => typeof key === 'string' && key.length > 0);
+            }
+        }
+        records = diffSectionChangeRecords(baselineStripped, records, {
+            isTable,
+            internalRecordId,
+            tableColumnKeys,
+        });
         if (records.length === 0 && sectionFiles.length === 0 && !profileImage) {
             return { validated: true, saved: false, currentSchemaData };
         }
@@ -10538,8 +10581,6 @@ const RegisterLookupWidget = ({ config }) => {
                                         : t?.('common.searchHint', { defaultValue: 'Type and press Enter or click search' }) })) : (jsxRuntimeExports.jsx(ResultsTable, { rows: searchResults, selectedRowKey: pendingRow?.internal_record_id ?? null, onRowClick: setPendingRow, onRowDoubleClick: applySelection })) }), jsxRuntimeExports.jsxs("div", { className: `flex-shrink-0 flex flex-wrap items-center gap-3 px-5 py-3 border-t border-gray-200 ${totalCount !== null ? 'justify-between' : 'justify-end'}`, children: [totalCount !== null && (jsxRuntimeExports.jsx(PaginationFooter, { embedded: true, currentPage: currentPage, totalPages: totalPages, totalCount: totalCount, pageSize: pageSize, onPageChange: (page) => runSearch(searchText, page), onPrev: () => currentPage > 1 && runSearch(searchText, currentPage - 1), onNext: () => currentPage < totalPages && runSearch(searchText, currentPage + 1) })), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => pendingRow && applySelection(pendingRow), disabled: !pendingRow, className: "px-4 h-9 text-sm font-medium rounded-[10px] text-white disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0", style: { backgroundColor: 'var(--owt-color-info, #2563eb)' }, children: selectRecordLabel })] })] })] }))] }));
 };
 
-const parentLookupPageCache = new Map();
-const parentLookupPageInflight = new Map();
 const parentLookupRecordCache = new Map();
 const parsePagination = (pagination, rowCount, size, fallbackPage = 1) => {
     const totalItems = typeof pagination.number_of_items === 'number' ? pagination.number_of_items : rowCount;
@@ -10566,35 +10607,22 @@ const indexParentRecords = (rows) => {
         }
     }
 };
-const buildParentLookupCacheKey = (service, endpoint, method, params) => `${service}|${endpoint}|${method}|${JSON.stringify(params)}`;
+const hasFilledParams = (params) => {
+    if (!params)
+        return false;
+    const values = Object.values(params);
+    if (values.length === 0)
+        return false;
+    return values.every((value) => value !== null && value !== undefined && String(value).trim() !== '');
+};
 const fetchParentLookupPage = async (handler, service, endpoint, method, params, headers) => {
-    const resolvedMethod = method || 'POST';
-    const cacheKey = buildParentLookupCacheKey(service, endpoint, resolvedMethod, params);
-    const cached = parentLookupPageCache.get(cacheKey);
-    if (cached) {
-        return cached;
-    }
-    const inflight = parentLookupPageInflight.get(cacheKey);
-    if (inflight) {
-        return inflight;
-    }
-    const fetchPromise = (async () => {
-        const result = await handler(service, endpoint, resolvedMethod, params, { headers });
-        const parsed = {
-            rows: (result?.records ?? []),
-            pagination: (result?.pagination ?? {}),
-        };
-        indexParentRecords(parsed.rows);
-        parentLookupPageCache.set(cacheKey, parsed);
-        return parsed;
-    })();
-    parentLookupPageInflight.set(cacheKey, fetchPromise);
-    try {
-        return await fetchPromise;
-    }
-    finally {
-        parentLookupPageInflight.delete(cacheKey);
-    }
+    const result = await handler(service, endpoint, method || 'POST', params, { headers });
+    const parsed = {
+        rows: (result?.records ?? []),
+        pagination: (result?.pagination ?? {}),
+    };
+    indexParentRecords(parsed.rows);
+    return parsed;
 };
 const ParentLookupWidget = ({ config, value: valueProp, error: errorProp, touched: touchedProp, isEnabled: isEnabledProp, isRequired: isRequiredProp, onChange: onChangeProp, onBlur: onBlurProp, }) => {
     const hook = useBaseWidget({ config });
@@ -10624,6 +10652,11 @@ const ParentLookupWidget = ({ config, value: valueProp, error: errorProp, touche
         }
         return merged;
     }, [hostContext, dataSource?.params]);
+    const canFetch = React.useMemo(() => hasFilledParams(hostContext) &&
+        hasFilledParams(dataSource?.params) &&
+        !!dataSource?.service &&
+        !!dataSource?.endpoint &&
+        !!dataSourceRequestHandler, [hostContext, dataSource, dataSourceRequestHandler]);
     const [isOpen, setIsOpen] = React.useState(false);
     const [searchText, setSearchText] = React.useState('');
     const [searchResults, setSearchResults] = React.useState([]);
@@ -10640,7 +10673,7 @@ const ParentLookupWidget = ({ config, value: valueProp, error: errorProp, touche
     const searchInputRef = React.useRef(null);
     const hydratedValueRef = React.useRef(null);
     const fetchRecords = React.useCallback(async (text, page, size) => {
-        if (!dataSource?.service || !dataSource?.endpoint || !dataSourceRequestHandler) {
+        if (!canFetch || !dataSource?.service || !dataSource?.endpoint || !dataSourceRequestHandler) {
             return { rows: [], pagination: {} };
         }
         return fetchParentLookupPage(dataSourceRequestHandler, dataSource.service, dataSource.endpoint, dataSource.method, {
@@ -10649,7 +10682,7 @@ const ParentLookupWidget = ({ config, value: valueProp, error: errorProp, touche
             current_page: page,
             page_size: size,
         }, dataSource.headers);
-    }, [dataSource, dataSourceRequestHandler, requestParams]);
+    }, [canFetch, dataSource, dataSourceRequestHandler, requestParams]);
     const findRecordByValue = React.useCallback(async (recordValue) => {
         const target = String(recordValue).trim();
         if (!target)
@@ -10747,7 +10780,7 @@ const ParentLookupWidget = ({ config, value: valueProp, error: errorProp, touche
             setIsHydrating(false);
             return;
         }
-        if (!dataSource?.service || !dataSource?.endpoint || !dataSourceRequestHandler)
+        if (!canFetch)
             return;
         if (hydratedValueRef.current === value)
             return;
@@ -10777,7 +10810,7 @@ const ParentLookupWidget = ({ config, value: valueProp, error: errorProp, touche
             cancelled = true;
             setIsHydrating(false);
         };
-    }, [hasValue, value, dataSource, dataSourceRequestHandler, findRecordByValue]);
+    }, [hasValue, value, canFetch, findRecordByValue]);
     const isReadonly = !!widgetConfig['widget-readonly'];
     const rawLabel = widgetConfig['widget-label'];
     const label = tSchema(t, rawLabel || 'Parent');
@@ -10829,7 +10862,7 @@ const ParentLookupWidget = ({ config, value: valueProp, error: errorProp, touche
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] flex flex-col sm:flex-row sm:items-start", children: [rawLabel && (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 text-base text-gray-900 font-medium", children: hasValue ? displayName : '-' })] }));
     }
     if (isReadonly && isCompact) {
-        return (jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-900 truncate block", children: hasValue ? displayName : '-' }));
+        return (jsxRuntimeExports.jsx("span", { className: "text-sm truncate block", style: { color: 'inherit' }, children: hasValue ? displayName : '-' }));
     }
     return (jsxRuntimeExports.jsxs("div", { className: isCompact ? 'table-cell-field w-full' : 'mb-[10px]', children: [isCompact ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [selectTrigger, jsxRuntimeExports.jsx("p", { className: "table-cell-field-error", "aria-hidden": "true", children: '\u00a0' })] })) : (jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [rawLabel && (jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: rawLabel, required: isRequired })), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [selectTrigger, touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] })), isOpen && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-[100]", style: { backgroundColor: 'rgba(0,0,0,0.5)' }, onClick: () => {
                             setIsOpen(false);
@@ -11193,12 +11226,18 @@ function normalizeApiPayload(response) {
     }
     return [];
 }
-/** Order flat levels root → leaf using parent_level_id. */
+function getRootLevels(levels) {
+    return levels.filter((level) => !level.parent_level_id);
+}
+function getChildLevels(levels, parentLevelId) {
+    return levels.filter((level) => level.parent_level_id === parentLevelId);
+}
+/** Depth-first from the single root so forked child levels are all included. */
 function buildOrderedLevels(flat) {
     if (flat.length === 0) {
         return [];
     }
-    const roots = flat.filter((level) => level.parent_level_id == null || level.parent_level_id === '');
+    const roots = getRootLevels(flat);
     if (roots.length !== 1) {
         throw new Error(roots.length === 0
             ? 'Geo hierarchy has no root level'
@@ -11206,15 +11245,17 @@ function buildOrderedLevels(flat) {
     }
     const ordered = [];
     const visited = new Set();
-    let current = roots[0];
-    while (current) {
-        if (visited.has(current.level_id)) {
+    const walk = (level) => {
+        if (visited.has(level.level_id)) {
             throw new Error('Geo hierarchy contains a cycle');
         }
-        visited.add(current.level_id);
-        ordered.push(current);
-        current = flat.find((level) => level.parent_level_id === current?.level_id);
-    }
+        visited.add(level.level_id);
+        ordered.push(level);
+        for (const child of getChildLevels(flat, level.level_id)) {
+            walk(child);
+        }
+    };
+    walk(roots[0]);
     if (ordered.length !== flat.length) {
         throw new Error('Geo hierarchy contains disconnected levels');
     }
@@ -11359,46 +11400,29 @@ function geoIdsMatch(left, right) {
     }
     return normalizeGeoId(left) === normalizeGeoId(right);
 }
-function buildChainEntry(orderedLevels, chain, index, entry) {
-    const level = orderedLevels[index];
+function buildChainEntryFromLevel(level, chain, entry) {
     return {
         level_value_id: entry.level_value_id,
         level_id: level.level_id,
         level_value_mnemonic: entry.level_value_mnemonic || '',
-        parent_level_value_id: index > 0 ? chain[index - 1].level_value_id : null,
+        parent_level_value_id: chain.length > 0 ? chain[chain.length - 1].level_value_id : null,
     };
 }
-/** Map geo_code_hierarchy_json entries onto ordered API levels (root → leaf). */
+/** Map geo_code_hierarchy_json entries onto levels by id/mnemonic (path may stop before a fork's unused branch). */
 function mapHierarchyToChain(orderedLevels, hierarchy) {
     if (orderedLevels.length === 0 || hierarchy.length === 0) {
         return [];
     }
-    if (hierarchy.length === orderedLevels.length) {
-        const indexChain = [];
-        let isComplete = true;
-        for (let index = 0; index < orderedLevels.length; index += 1) {
-            const entry = hierarchy[index];
-            if (!entry?.level_value_id) {
-                isComplete = false;
-                break;
-            }
-            indexChain.push(buildChainEntry(orderedLevels, indexChain, index, entry));
-        }
-        if (isComplete && indexChain.length === orderedLevels.length) {
-            return indexChain;
-        }
-    }
     const chain = [];
-    for (let index = 0; index < orderedLevels.length; index += 1) {
-        const level = orderedLevels[index];
-        const entry = hierarchy[index]?.level_value_id &&
-            matchesGeoLevel(hierarchy[index], level)
-            ? hierarchy[index]
-            : hierarchy.find((item) => matchesGeoLevel(item, level));
+    for (const entry of hierarchy) {
         if (!entry?.level_value_id) {
             break;
         }
-        chain.push(buildChainEntry(orderedLevels, chain, index, entry));
+        const level = orderedLevels.find((item) => matchesGeoLevel(entry, item));
+        if (!level) {
+            break;
+        }
+        chain.push(buildChainEntryFromLevel(level, chain, entry));
     }
     return chain;
 }
@@ -11426,27 +11450,156 @@ function matchesGeoLevel(entry, level) {
         entry.level === level.level_mnemonic ||
         entry.level === level.level_id);
 }
-function getDeepestSelectedValue(orderedLevels, selectedValues) {
-    let deepest = null;
-    for (const level of orderedLevels) {
-        const value = selectedValues[level.level_id];
-        if (value) {
-            deepest = value;
+function getSelectedPath(orderedLevels, selectedValues) {
+    const roots = getRootLevels(orderedLevels);
+    if (roots.length !== 1) {
+        return [];
+    }
+    const path = [];
+    let current = roots[0];
+    while (current && selectedValues[current.level_id]) {
+        path.push(current);
+        const children = getChildLevels(orderedLevels, current.level_id);
+        const next = children.find((child) => selectedValues[child.level_id]);
+        current = next;
+    }
+    return path;
+}
+function collectDescendantLevelIds(orderedLevels, parentLevelId) {
+    const ids = [];
+    const walk = (levelId) => {
+        for (const child of getChildLevels(orderedLevels, levelId)) {
+            ids.push(child.level_id);
+            walk(child.level_id);
         }
+    };
+    walk(parentLevelId);
+    return ids;
+}
+function getDeepestSelectedValue(orderedLevels, selectedValues) {
+    const path = getSelectedPath(orderedLevels, selectedValues);
+    if (path.length === 0) {
+        return null;
     }
-    return deepest;
+    return selectedValues[path[path.length - 1].level_id] ?? null;
 }
-/** True when every hierarchy level has a selected value. */
-function isGeoHierarchyComplete(orderedLevels, selectedValues) {
-    if (orderedLevels.length === 0) {
+/**
+ * Complete when the selected path reaches a leaf:
+ * no child levels, or every child level has an empty option list for this parent
+ * (city with no subdistricts). Sibling forks require exactly one filled branch.
+ */
+function isGeoHierarchyComplete(orderedLevels, selectedValues, options = {}) {
+    const roots = getRootLevels(orderedLevels);
+    if (roots.length !== 1) {
         return false;
     }
-    return orderedLevels.every((level) => Boolean(selectedValues[level.level_id]));
+    const isCompleteAt = (level) => {
+        if (!selectedValues[level.level_id]) {
+            return false;
+        }
+        const children = getChildLevels(orderedLevels, level.level_id);
+        if (children.length === 0) {
+            return true;
+        }
+        if (children.some((child) => options[child.level_id] === undefined)) {
+            return false;
+        }
+        const withOptions = children.filter((child) => (options[child.level_id]?.length ?? 0) > 0);
+        if (withOptions.length === 0) {
+            return true;
+        }
+        const chosen = children.filter((child) => selectedValues[child.level_id]);
+        if (chosen.length !== 1) {
+            return false;
+        }
+        return isCompleteAt(chosen[0]);
+    };
+    return isCompleteAt(roots[0]);
+}
+function childLevelsToShow(children, selectedValues, options) {
+    if (children.length === 1) {
+        return children;
+    }
+    return children.filter((child) => selectedValues[child.level_id] ||
+        options[child.level_id] === undefined ||
+        (options[child.level_id]?.length ?? 0) > 0);
+}
+/**
+ * One form control per hop. A parent with several child levels (city vs
+ * subdistrict) is a single grouped dropdown, not parallel fields.
+ * Linear children are always included so the full chain is visible at once;
+ * options stay empty until the parent is selected.
+ */
+function buildGeoFormSteps(orderedLevels, selectedValues, options = {}) {
+    const roots = getRootLevels(orderedLevels);
+    if (roots.length !== 1) {
+        return orderedLevels.map((level) => ({
+            kind: 'single',
+            key: level.level_id,
+            level,
+            parentValueId: '',
+        }));
+    }
+    const steps = [
+        { kind: 'single', key: roots[0].level_id, level: roots[0], parentValueId: '' },
+    ];
+    let current = roots[0];
+    while (true) {
+        const children = getChildLevels(orderedLevels, current.level_id);
+        if (children.length === 0) {
+            break;
+        }
+        const toShow = childLevelsToShow(children, selectedValues, options);
+        if (toShow.length === 0) {
+            break;
+        }
+        const parentValueId = selectedValues[current.level_id] || '';
+        if (toShow.length === 1) {
+            const next = toShow[0];
+            steps.push({
+                kind: 'single',
+                key: next.level_id,
+                level: next,
+                parentValueId,
+            });
+            current = next;
+            continue;
+        }
+        steps.push({
+            kind: 'fork',
+            key: `fork:${current.level_id}`,
+            levels: toShow,
+            parentLevel: current,
+            parentValueId,
+        });
+        const chosen = toShow.find((child) => selectedValues[child.level_id]);
+        if (!chosen) {
+            break;
+        }
+        current = chosen;
+    }
+    return steps;
+}
+function encodeGeoSelectValue(levelId, valueId) {
+    return `${levelId}::${valueId}`;
+}
+function parseGeoSelectValue(raw) {
+    const separator = raw.indexOf('::');
+    if (separator <= 0) {
+        return null;
+    }
+    const levelId = raw.slice(0, separator);
+    const valueId = raw.slice(separator + 2);
+    if (!levelId || !valueId) {
+        return null;
+    }
+    return { levelId, valueId };
 }
-/** Build geo_code_hierarchy_json document from current selections (for save payload). */
+/** Build geo_code_hierarchy_json document from the selected path (not unused forks). */
 function buildHierarchyJson(orderedLevels, selectedValues, options, resolvedLabels = {}) {
     const hierarchy = [];
-    for (const level of orderedLevels) {
+    const path = getSelectedPath(orderedLevels, selectedValues);
+    for (const level of path) {
         const levelValueId = selectedValues[level.level_id];
         if (!levelValueId) {
             break;
@@ -11480,22 +11633,37 @@ function formatHierarchyForPersist(document, previous) {
     return document;
 }
 function clearDescendants(orderedLevels, fromIndex, selectedValues, options) {
+    const fromLevel = orderedLevels[fromIndex];
     const nextSelected = { ...selectedValues };
     const nextOptions = { ...options };
-    for (let index = fromIndex + 1; index < orderedLevels.length; index += 1) {
-        const levelId = orderedLevels[index].level_id;
+    if (!fromLevel) {
+        return { selectedValues: nextSelected, options: nextOptions };
+    }
+    for (const levelId of collectDescendantLevelIds(orderedLevels, fromLevel.level_id)) {
         delete nextSelected[levelId];
         delete nextOptions[levelId];
     }
     return { selectedValues: nextSelected, options: nextOptions };
 }
-/** Level is enabled when it is the root, or its parent already has a selection. */
-function isLevelEnabled(orderedLevels, levelIndex, selectedValues) {
-    if (levelIndex === 0) {
-        return true;
+/** After choosing one sibling fork, drop the other siblings and their descendants. */
+function clearUnselectedSiblingBranches(orderedLevels, chosenLevelId, selectedValues, options) {
+    const chosen = orderedLevels.find((level) => level.level_id === chosenLevelId);
+    const nextSelected = { ...selectedValues };
+    const nextOptions = { ...options };
+    if (!chosen?.parent_level_id) {
+        return { selectedValues: nextSelected, options: nextOptions };
     }
-    const parent = orderedLevels[levelIndex - 1];
-    return Boolean(selectedValues[parent.level_id]);
+    for (const sibling of getChildLevels(orderedLevels, chosen.parent_level_id)) {
+        if (sibling.level_id === chosenLevelId) {
+            continue;
+        }
+        delete nextSelected[sibling.level_id];
+        for (const levelId of collectDescendantLevelIds(orderedLevels, sibling.level_id)) {
+            delete nextSelected[levelId];
+            delete nextOptions[levelId];
+        }
+    }
+    return { selectedValues: nextSelected, options: nextOptions };
 }
 /** Map a root→leaf chain onto level_id → level_value_id selections. */
 function mapChainToSelections(orderedLevels, chain) {
@@ -11510,7 +11678,7 @@ function mapChainToSelections(orderedLevels, chain) {
 }
 function buildReadonlyPath(orderedLevels, selectedValues, options, resolvedLabels) {
     const parts = [];
-    for (const level of orderedLevels) {
+    for (const level of getSelectedPath(orderedLevels, selectedValues)) {
         const selected = selectedValues[level.level_id];
         if (!selected) {
             break;
@@ -11670,7 +11838,7 @@ function useGeoHierarchy({ config }) {
             return;
         }
         const deepest = getDeepestSelectedValue(orderedLevels, nextSelectedValues);
-        const complete = isGeoHierarchyComplete(orderedLevels, nextSelectedValues);
+        const complete = isGeoHierarchyComplete(orderedLevels, nextSelectedValues, nextOptions);
         // When required, only persist the leaf once every level is filled so submit validation fails for partial chains.
         const nextValue = base.isRequired && !complete ? null : (deepest ?? null);
         selfPersistedValueRef.current = nextValue ? String(nextValue) : '';
@@ -11705,11 +11873,15 @@ function useGeoHierarchy({ config }) {
     }, [fetchValues]);
     const loadOptionsAlongChain = React.useCallback(async (orderedLevels, chain) => {
         const nextOptions = {};
-        let parentValueId = '';
-        for (let index = 0; index < orderedLevels.length; index += 1) {
-            const level = orderedLevels[index];
-            nextOptions[level.level_id] = await fetchValues(level.level_id, parentValueId);
-            parentValueId = chain[index]?.level_value_id || parentValueId;
+        const root = orderedLevels.find((level) => !level.parent_level_id);
+        if (root) {
+            nextOptions[root.level_id] = await fetchValues(root.level_id, '');
+        }
+        for (const entry of chain) {
+            const children = getChildLevels(orderedLevels, entry.level_id);
+            await Promise.all(children.map(async (child) => {
+                nextOptions[child.level_id] = await fetchValues(child.level_id, entry.level_value_id);
+            }));
         }
         return nextOptions;
     }, [fetchValues]);
@@ -11841,10 +12013,14 @@ function useGeoHierarchy({ config }) {
         lastInitializedKeyRef.current = initKey;
         void initialize();
     }, [baseHierarchyJson, baseStoredValue, initialize, isReadonly]);
-    const handleLevelChange = React.useCallback(async (levelIndex, nextValue) => {
+    const handleValueChange = React.useCallback(async (levelId, nextValue) => {
         if (!levels.length || initializingRef.current || hydratingRef.current || isReadonly) {
             return;
         }
+        const levelIndex = levels.findIndex((item) => item.level_id === levelId);
+        if (levelIndex < 0) {
+            return;
+        }
         const level = levels[levelIndex];
         let nextSelectedValues = { ...selectedValues };
         if (!nextValue) {
@@ -11855,15 +12031,26 @@ function useGeoHierarchy({ config }) {
         }
         const cleared = clearDescendants(levels, levelIndex, nextSelectedValues, options);
         nextSelectedValues = cleared.selectedValues;
+        const siblingsCleared = clearUnselectedSiblingBranches(levels, level.level_id, nextSelectedValues, cleared.options);
+        nextSelectedValues = siblingsCleared.selectedValues;
         setSelectedValues(nextSelectedValues);
-        setOptions(cleared.options);
-        persistDeepestValue(nextSelectedValues, levels, cleared.options, resolvedLabels);
-        if (!nextValue || levelIndex >= levels.length - 1) {
+        setOptions(siblingsCleared.options);
+        persistDeepestValue(nextSelectedValues, levels, siblingsCleared.options, resolvedLabels);
+        if (!nextValue) {
             return;
         }
         try {
             setGeoError(null);
-            await loadOptionsForLevel(levels, levelIndex + 1, nextValue);
+            const children = getChildLevels(levels, level.level_id);
+            let nextOptions = siblingsCleared.options;
+            for (const child of children) {
+                const childIndex = levels.findIndex((item) => item.level_id === child.level_id);
+                if (childIndex < 0)
+                    continue;
+                const childOptions = await loadOptionsForLevel(levels, childIndex, nextValue);
+                nextOptions = { ...nextOptions, [child.level_id]: childOptions };
+            }
+            persistDeepestValue(nextSelectedValues, levels, nextOptions, resolvedLabels);
         }
         catch (error) {
             const message = error instanceof Error ? error.message : 'Failed to load child geo level values';
@@ -11879,17 +12066,31 @@ function useGeoHierarchy({ config }) {
         loadOptionsForLevel,
     ]);
     const readonlyPath = React.useMemo(() => buildReadonlyPath(levels, selectedValues, options, resolvedLabels), [levels, selectedValues, options, resolvedLabels]);
-    const { columnCounts, columns: levelColumns, columnSpan } = React.useMemo(() => resolveGeoLevelColumns(levels, geoLayout), [levels, geoLayout]);
+    const selectedPath = React.useMemo(() => getSelectedPath(levels, selectedValues), [levels, selectedValues]);
+    const formSteps = React.useMemo(() => buildGeoFormSteps(levels, selectedValues, options), [levels, options, selectedValues]);
+    const isComplete = React.useMemo(() => isGeoHierarchyComplete(levels, selectedValues, options), [levels, options, selectedValues]);
+    const { columnCounts, columns: stepColumns, columnSpan } = React.useMemo(() => resolveGeoLevelColumns(formSteps.map((step) => step.kind === 'single'
+        ? step.level
+        : {
+            level_id: step.key,
+            level_mnemonic: step.levels.map((level) => level.level_mnemonic).join(' / '),
+            parent_level_id: step.parentLevel.level_id,
+        }), geoLayout), [formSteps, geoLayout]);
     const visibleColumns = React.useMemo(() => {
+        const stepsByKey = new Map(formSteps.map((step) => [step.key, step]));
         const columnIndex = geoLayout?.columnIndex;
+        const mapped = stepColumns.map((columnLevels, index) => ({
+            index,
+            steps: columnLevels
+                .map((level) => stepsByKey.get(level.level_id))
+                .filter((step) => Boolean(step)),
+        }));
         if (columnIndex === undefined || columnIndex === null) {
-            return levelColumns
-                .map((columnLevels, index) => ({ index, levels: columnLevels }))
-                .filter((column) => column.levels.length > 0);
+            return mapped.filter((column) => column.steps.length > 0);
         }
-        const columnLevels = levelColumns[columnIndex] ?? [];
-        return columnLevels.length > 0 ? [{ index: columnIndex, levels: columnLevels }] : [];
-    }, [levelColumns, geoLayout?.columnIndex]);
+        const column = mapped[columnIndex];
+        return column?.steps.length ? [column] : [];
+    }, [formSteps, geoLayout?.columnIndex, stepColumns]);
     return {
         ...base,
         levels,
@@ -11903,77 +12104,106 @@ function useGeoHierarchy({ config }) {
         loadingLevelId,
         geoError,
         readonlyPath,
-        handleLevelChange,
-        isLevelEnabled: (levelIndex) => isLevelEnabled(levels, levelIndex, selectedValues),
+        handleValueChange,
+        isComplete,
+        selectedPath,
+        formSteps,
         formatLevelLabel,
     };
 }
 
+const selectClassName = (showError, disabled) => `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${showError
+    ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
+    : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`;
 function resolveDisplayValue(levelId, selectedValues, options, resolvedLabels, loading) {
     const selected = selectedValues[levelId];
     if (!selected) {
         return '-';
     }
-    const option = options[levelId]?.find((item) => item.value === selected);
-    if (option?.label) {
-        return option.label;
+    const option = options[levelId]?.find((item) => item.value === selected)?.label;
+    if (option) {
+        return option;
     }
     if (resolvedLabels[selected]) {
         return resolvedLabels[selected];
     }
     return loading ? '-' : selected;
 }
-function renderLevelRows({ columnLevels, levels, isReadonly, selectedValues, options, resolvedLabels, loadingLevels, loadingLevelId, isEnabled, isRequired, touched, hasError, t, onBlur, handleLevelChange, isLevelEnabled, formatLevelLabel, }) {
-    return columnLevels.map((level) => {
-        const levelIndex = levels.findIndex((item) => item.level_id === level.level_id);
-        const levelLabel = formatLevelLabel(level.level_mnemonic);
-        if (isReadonly) {
-            const displayValue = resolveDisplayValue(level.level_id, selectedValues, options, resolvedLabels, loadingLevels);
-            return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] SelectDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [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: levelLabel, children: [levelLabel, ":"] }), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", style: { fontFamily: 'Roboto, sans-serif' }, title: displayValue, children: tSchema(t, displayValue) }) })] }, level.level_id));
-        }
-        const levelOptions = options[level.level_id] || [];
-        const isLoading = loadingLevelId === level.level_id;
-        const levelEnabled = isLevelEnabled(levelIndex);
-        const disabled = !isEnabled || loadingLevels || isLoading || !levelEnabled;
-        const levelHasValue = Boolean(selectedValues[level.level_id]);
-        const showLevelError = (isRequired && !levelHasValue) || (touched && hasError && !levelHasValue);
-        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: levelLabel, required: isRequired }), jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntimeExports.jsxs("select", { value: selectedValues[level.level_id] || '', onChange: (event) => {
-                                const nextValue = event.target.value;
-                                void handleLevelChange(levelIndex, nextValue === '' ? undefined : nextValue);
-                            }, onBlur: onBlur, disabled: disabled, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${showLevelError
-                                ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
-                                : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, children: [jsxRuntimeExports.jsx("option", { value: "", children: t?.('common.select') }), levelOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: tSchema(t, option.label) }, option.value)))] }) })] }) }, level.level_id));
+function ReadonlyLevelRow({ level, displayValue, }) {
+    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] SelectDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [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: level.level_mnemonic, children: [level.level_mnemonic, ":"] }), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", style: { fontFamily: 'Roboto, sans-serif' }, title: displayValue, children: displayValue }) })] }));
+}
+function renderFormSteps({ columnSteps, selectedValues, options, loadingLevels, loadingLevelId, isEnabled, isRequired, isComplete, touched, hasError, t, onBlur, handleValueChange, formatLevelLabel, }) {
+    return columnSteps.map((step) => {
+        if (step.kind === 'single') {
+            const level = step.level;
+            const levelOptions = options[level.level_id] || [];
+            const isLoading = loadingLevelId === level.level_id;
+            const parentId = level.parent_level_id;
+            const parentUnselected = Boolean(parentId) && !selectedValues[parentId ?? ''];
+            const disabled = !isEnabled || loadingLevels || isLoading || parentUnselected;
+            const levelHasValue = Boolean(selectedValues[level.level_id]);
+            const showLevelError = !parentUnselected &&
+                ((isRequired && !isComplete && !levelHasValue) ||
+                    (touched && hasError && !levelHasValue));
+            const label = formatLevelLabel(level.level_mnemonic);
+            return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: label, required: isRequired }), jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntimeExports.jsxs("select", { value: selectedValues[level.level_id] || '', onChange: (event) => {
+                                    const nextValue = event.target.value;
+                                    void handleValueChange(level.level_id, nextValue === '' ? undefined : nextValue);
+                                }, onBlur: onBlur, disabled: disabled, className: selectClassName(showLevelError, disabled), style: { borderRadius: '10px' }, children: [jsxRuntimeExports.jsx("option", { value: "", children: t?.('common.select') }), levelOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: tSchema(t, option.label) }, option.value)))] }) })] }) }, step.key));
+        }
+        const chosen = step.levels.find((level) => selectedValues[level.level_id]);
+        const activeLevel = chosen ?? step.levels[0];
+        const encodedValue = chosen
+            ? encodeGeoSelectValue(chosen.level_id, selectedValues[chosen.level_id])
+            : '';
+        const forkLoading = step.levels.some((level) => loadingLevelId === level.level_id);
+        const parentUnselected = !selectedValues[step.parentLevel.level_id];
+        const disabled = !isEnabled || loadingLevels || forkLoading || parentUnselected;
+        const showLevelError = !parentUnselected &&
+            ((isRequired && !isComplete && !encodedValue) ||
+                (touched && hasError && !encodedValue));
+        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: formatLevelLabel(activeLevel.level_mnemonic), required: isRequired }), jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntimeExports.jsxs("select", { value: encodedValue, onChange: (event) => {
+                                const raw = event.target.value;
+                                if (!raw) {
+                                    const selectedLevel = chosen ?? step.levels[0];
+                                    void handleValueChange(selectedLevel.level_id, undefined);
+                                    return;
+                                }
+                                const parsed = parseGeoSelectValue(raw);
+                                if (!parsed) {
+                                    return;
+                                }
+                                void handleValueChange(parsed.levelId, parsed.valueId);
+                            }, onBlur: onBlur, disabled: disabled, className: selectClassName(showLevelError, disabled), style: { borderRadius: '10px' }, children: [jsxRuntimeExports.jsx("option", { value: "", children: t?.('common.select') }), step.levels.map((level) => {
+                                    const levelOptions = options[level.level_id] || [];
+                                    if (levelOptions.length === 0 && !selectedValues[level.level_id]) {
+                                        return null;
+                                    }
+                                    return (jsxRuntimeExports.jsx("optgroup", { label: formatLevelLabel(level.level_mnemonic), children: levelOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: encodeGeoSelectValue(level.level_id, option.value), children: tSchema(t, option.label) }, option.value))) }, level.level_id));
+                                })] }) })] }) }, step.key));
     });
 }
 const GeoHierarchyWidget = ({ config }) => {
-    const { isEnabled, isRequired, error, touched, onBlur, config: widgetConfig, levels, selectedValues, options, resolvedLabels, visibleColumns, loadingLevels, loadingLevelId, geoError, handleLevelChange, isLevelEnabled, formatLevelLabel, } = useGeoHierarchy({ config });
+    const { isEnabled, isRequired, error, touched, onBlur, config: widgetConfig, levels, selectedValues, options, resolvedLabels, visibleColumns, loadingLevels, loadingLevelId, geoError, handleValueChange, isComplete, selectedPath, formatLevelLabel, } = useGeoHierarchy({ config });
     const { t } = useWidgetContext();
-    const isComplete = levels.length > 0 &&
-        levels.every((level) => Boolean(selectedValues[level.level_id]));
     const hasError = error.length > 0 || (isRequired && levels.length > 0 && !isComplete);
     const isReadonly = Boolean(widgetConfig['widget-readonly']);
-    const rowProps = {
-        levels,
-        isReadonly,
+    const layoutColumnCount = Math.max(visibleColumns.length, 1);
+    const editContent = visibleColumns.length <= 1 ? (renderFormSteps({
+        columnSteps: visibleColumns[0]?.steps ?? [],
         selectedValues,
         options,
-        resolvedLabels,
         loadingLevels,
         loadingLevelId,
         isEnabled,
         isRequired,
+        isComplete,
         touched,
         hasError,
         t,
         onBlur,
-        handleLevelChange,
-        isLevelEnabled,
+        handleValueChange,
         formatLevelLabel,
-    };
-    const layoutColumnCount = Math.max(visibleColumns.length, 1);
-    const content = visibleColumns.length <= 1 ? (renderLevelRows({
-        ...rowProps,
-        columnLevels: visibleColumns[0]?.levels ?? levels,
     })) : (jsxRuntimeExports.jsx("div", { className: "flex flex-col lg:grid w-full", style: {
             gridTemplateColumns: `repeat(${layoutColumnCount}, minmax(200px, 1fr))`,
         }, children: visibleColumns.map((column, position) => {
@@ -11987,12 +12217,26 @@ const GeoHierarchyWidget = ({ config }) => {
                 .join(' ');
             return (jsxRuntimeExports.jsxs("div", { className: columnClassName, children: [!isLast && (jsxRuntimeExports.jsx("div", { className: "hidden lg:block absolute right-0 top-0 w-px", style: {
                             bottom: '5px',
-                            backgroundColor: isReadonly
-                                ? 'var(--owt-panel-divider-color, #C4C4C4)'
-                                : 'var(--owt-color-primary, #F5BB1A)',
-                        } })), renderLevelRows({ ...rowProps, columnLevels: column.levels })] }, `geo-column-${column.index}`));
+                            backgroundColor: 'var(--owt-color-primary, #F5BB1A)',
+                        } })), renderFormSteps({
+                        columnSteps: column.steps,
+                        selectedValues,
+                        options,
+                        loadingLevels,
+                        loadingLevelId,
+                        isEnabled,
+                        isRequired,
+                        isComplete,
+                        touched,
+                        hasError,
+                        t,
+                        onBlur,
+                        handleValueChange,
+                        formatLevelLabel,
+                    })] }, `geo-column-${column.index}`));
         }) }));
-    return (jsxRuntimeExports.jsxs("div", { className: isReadonly ? 'GeoHierarchyDisplayWidget' : 'GeoHierarchyWidget', children: [content, loadingLevels && levels.length === 0 && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 mb-[10px]", children: t?.('common.loading') })), geoError && jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mb-[10px]", children: geoError }), !isReadonly && touched && hasError && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mb-[10px]", children: error[0] || 'This field is required' }))] }));
+    const readonlyContent = selectedPath.map((level) => (jsxRuntimeExports.jsx(ReadonlyLevelRow, { level: { ...level, level_mnemonic: formatLevelLabel(level.level_mnemonic) }, displayValue: tSchema(t, resolveDisplayValue(level.level_id, selectedValues, options, resolvedLabels, loadingLevels)) }, level.level_id)));
+    return (jsxRuntimeExports.jsxs("div", { className: isReadonly ? 'GeoHierarchyDisplayWidget' : 'GeoHierarchyWidget', children: [isReadonly ? readonlyContent : editContent, loadingLevels && levels.length === 0 && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 mb-[10px]", children: t?.('common.loading') })), geoError && jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mb-[10px]", children: geoError }), !isReadonly && touched && hasError && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mb-[10px]", children: error[0] || 'This field is required' }))] }));
 };
 
 const distributeDocsToColumns = (docs, totalDocs) => {