@openg2p/registry-widgets 1.1.2-dev.0 → 1.1.2-dev.1

package/dist/index.esm.js

@@ -173,15 +173,33 @@ const parseDataPath = (dataPath) => {
 /**
  * Get value from widget state using data path
  */
+/**
+ * Resolve a widget-id reference in Redux values.
+ * Supports namespaced ids (e.g. "rv-section-0__region_code" when ref is "region_code").
+ */
+const resolveWidgetIdValue = (values, ref) => {
+    if (!ref) {
+        return undefined;
+    }
+    if (ref.includes('.')) {
+        return getValueByPath(values, ref);
+    }
+    if (Object.prototype.hasOwnProperty.call(values, ref)) {
+        return values[ref];
+    }
+    const suffix = `__${ref}`;
+    for (const [key, val] of Object.entries(values)) {
+        if (key.endsWith(suffix)) {
+            return val;
+        }
+    }
+    return undefined;
+};
 const getWidgetValue = (values, dataPath, widgetId) => {
     if (!dataPath) {
         // Fallback to widget-id if no data path
         return values[widgetId];
     }
-    if (widgetId == "user-profile") {
-        console.log('values', values);
-        console.log('dataPath', dataPath);
-    }
     if (typeof dataPath === 'string') {
         return getValueByPath(values, dataPath);
     }
@@ -1045,24 +1063,11 @@ const getApiDataSource = async (dataSource, allValues, dataSourceRequestHandler,
         // dependsOn can be either a data path (e.g., "person.address") or a widget-id
         let depValue = null;
         if (dataSource.dependsOn) {
-            // First try as data path
-            depValue = getValueByPath(allValues, dataSource.dependsOn);
-            // If not found and doesn't contain dots, try as widget-id
-            if ((depValue === null || depValue === undefined) && !dataSource.dependsOn.includes('.')) {
-                depValue = allValues[dataSource.dependsOn];
-                // Smart resolution: If not found at top level, try to find the dependency in the same nested object
-                // by looking for other keys in allValues that might contain the dependency.
-                // We look for objects that contain both the current widget's path (if we can guess it) and the dependency.
-                // But since we don't know the current widget's path here, we search for any object that has this dependency key.
-                if (depValue === null || depValue === undefined || depValue === '') {
-                    for (const val of Object.values(allValues)) {
-                        if (val && typeof val === 'object' && !Array.isArray(val) && dataSource.dependsOn in val) {
-                            depValue = val[dataSource.dependsOn];
-                            if (depValue !== null && depValue !== undefined && depValue !== '')
-                                break;
-                        }
-                    }
-                }
+            if (dataSource.dependsOn.includes('.')) {
+                depValue = getValueByPath(allValues, dataSource.dependsOn);
+            }
+            else {
+                depValue = resolveWidgetIdValue(allValues, dataSource.dependsOn);
             }
             if (depValue === null || depValue === undefined || depValue === '') {
                 // If dependency is empty, return empty array
@@ -1931,6 +1936,247 @@ const WidgetProvider = ({ store, dataSourceRequestHandler, schemaData, translate
     return content;
 };
 
+/**
+ * Geo Hierarchy Builder
+ * Manages geo hierarchy state and builds hierarchy JSON structure
+ */
+function extractLevelValueFromStored(value, geoConfig) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return value;
+    }
+    const hierarchy = value.hierarchy || value.geo_code_hierarchy_json?.hierarchy;
+    if (Array.isArray(hierarchy)) {
+        const levelData = hierarchy.find((l) => l.level === geoConfig.level);
+        if (levelData) {
+            return levelData.level_value_id;
+        }
+        // Level absent from hierarchy (e.g. cleared by upstream cascade) — do not use lowest-level fallback
+        return undefined;
+    }
+    if ('geo_lowest_level_value_id' in value) {
+        return value.geo_lowest_level_value_id;
+    }
+    if ('lowest_level_value_id' in value) {
+        return value.lowest_level_value_id;
+    }
+    if (value.geo_code_hierarchy_json?.lowest_level_value_id) {
+        return value.geo_code_hierarchy_json.lowest_level_value_id;
+    }
+    if (value.geo_code_hierarchy_json?.geo_lowest_level_value_id) {
+        return value.geo_code_hierarchy_json.geo_lowest_level_value_id;
+    }
+    return undefined;
+}
+/**
+ * Resolve the display value for a geo level widget.
+ * When widgetId is explicitly set in Redux (including cleared undefined/null), do not
+ * fall back to shared hierarchy dataPath — that stale path was keeping grandchildren visible.
+ */
+function resolveGeoWidgetLevelValue(values, widgetId, dataPath, geoConfig) {
+    if (Object.prototype.hasOwnProperty.call(values, widgetId)) {
+        let value = values[widgetId];
+        if (value === undefined || value === null || value === '') {
+            return value;
+        }
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            return extractLevelValueFromStored(value, geoConfig);
+        }
+        return value;
+    }
+    if (!dataPath) {
+        return undefined;
+    }
+    let value = getWidgetValue(values, dataPath, widgetId);
+    if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
+        value = extractLevelValueFromStored(value, geoConfig);
+    }
+    return value;
+}
+/**
+ * Write the in-memory geo hierarchy builder state into Redux at the shared dataPath.
+ */
+function applySharedGeoHierarchyToValues(baseValues, groupId, dataPath, widgetId) {
+    const hierarchyJson = geoHierarchyBuilder.buildHierarchyJson(groupId);
+    if (!dataPath || typeof dataPath !== 'string') {
+        return baseValues;
+    }
+    const inner = hierarchyJson?.geo_code_hierarchy_json;
+    const lowestId = hierarchyJson?.geo_lowest_level_value_id;
+    if (dataPath.endsWith('.geo_code_hierarchy_json')) {
+        const prefix = dataPath.substring(0, dataPath.lastIndexOf('.'));
+        let finalUpdatedValues = setWidgetValue(baseValues, dataPath, widgetId, inner);
+        finalUpdatedValues = setWidgetValue(finalUpdatedValues, `${prefix}.geo_lowest_level_value_id`, widgetId, lowestId);
+        return finalUpdatedValues;
+    }
+    return setWidgetValue(baseValues, dataPath, widgetId, inner);
+}
+class GeoHierarchyBuilder {
+    constructor() {
+        this.hierarchies = new Map();
+    }
+    /**
+     * Get or create hierarchy state for a group
+     */
+    getHierarchy(groupId = 'default') {
+        if (!this.hierarchies.has(groupId)) {
+            this.hierarchies.set(groupId, {
+                levels: new Map(),
+                order: [],
+            });
+        }
+        return this.hierarchies.get(groupId);
+    }
+    /**
+     * Add a level to the hierarchy
+     */
+    addLevel(level, level_value_id, level_value_mnemonic, groupId = 'default') {
+        const hierarchy = this.getHierarchy(groupId);
+        // If level already exists, remove it and everything after it
+        const existingIndex = hierarchy.order.indexOf(level);
+        if (existingIndex >= 0) {
+            // Remove this level and all subsequent levels
+            const levelsToRemove = hierarchy.order.slice(existingIndex);
+            levelsToRemove.forEach((l) => {
+                hierarchy.levels.delete(l);
+                hierarchy.order = hierarchy.order.filter((o) => o !== l);
+            });
+        }
+        // Add new level
+        hierarchy.levels.set(level, {
+            level,
+            level_value_id,
+            level_value_mnemonic,
+        });
+        hierarchy.order.push(level);
+    }
+    /**
+     * Remove a level and all levels below it
+     */
+    removeLevelAndBelow(level, groupId = 'default') {
+        const hierarchy = this.getHierarchy(groupId);
+        const index = hierarchy.order.indexOf(level);
+        if (index >= 0) {
+            // Remove this level and all subsequent levels
+            const levelsToRemove = hierarchy.order.slice(index);
+            levelsToRemove.forEach((l) => {
+                hierarchy.levels.delete(l);
+                hierarchy.order = hierarchy.order.filter((o) => o !== l);
+            });
+        }
+    }
+    /**
+     * Build hierarchy JSON structure
+     */
+    buildHierarchyJson(groupId = 'default') {
+        const hierarchy = this.getHierarchy(groupId);
+        if (hierarchy.order.length === 0) {
+            return null;
+        }
+        const hierarchyArray = hierarchy.order.map((level) => {
+            const data = hierarchy.levels.get(level);
+            return {
+                level: data.level,
+                level_value_id: data.level_value_id,
+                level_value_mnemonic: data.level_value_mnemonic,
+            };
+        });
+        const lowestLevel = hierarchy.order[hierarchy.order.length - 1];
+        const lowestLevelData = hierarchy.levels.get(lowestLevel);
+        return {
+            geo_lowest_level_value_id: lowestLevelData.level_value_id,
+            geo_code_hierarchy_json: {
+                hierarchy: hierarchyArray,
+                lowest_level_value_id: lowestLevelData.level_value_id,
+            },
+        };
+    }
+    /**
+     * Clear hierarchy for a group
+     */
+    clear(groupId = 'default') {
+        this.hierarchies.delete(groupId);
+    }
+    /**
+     * Clear all hierarchies
+     */
+    clearAll() {
+        this.hierarchies.clear();
+    }
+    /**
+     * Get current levels for a group
+     */
+    getLevels(groupId = 'default') {
+        const hierarchy = this.getHierarchy(groupId);
+        return hierarchy.order.map((level) => hierarchy.levels.get(level));
+    }
+}
+// Singleton instance
+const geoHierarchyBuilder = new GeoHierarchyBuilder();
+/** Sentinel written to Redux when a geo level is cleared by cascade (distinct from "never set"). */
+const GEO_LEVEL_CLEARED = null;
+const geoWidgetParentRegistry = new Map();
+function registerGeoWidgetParent(widgetId, parentWidgetId) {
+    geoWidgetParentRegistry.set(widgetId, parentWidgetId || null);
+}
+function unregisterGeoWidgetParent(widgetId) {
+    geoWidgetParentRegistry.delete(widgetId);
+}
+/** True when changedWidgetId is any upstream geo parent of widgetId (not only immediate parent). */
+function isUpstreamGeoAncestor(changedWidgetId, widgetId, immediateParentWidgetId) {
+    if (changedWidgetId === widgetId) {
+        return false;
+    }
+    let cursor = immediateParentWidgetId;
+    while (cursor) {
+        if (cursor === changedWidgetId) {
+            return true;
+        }
+        cursor = geoWidgetParentRegistry.get(cursor) ?? null;
+    }
+    return false;
+}
+function readStoredHierarchyLevels(values, dataPath, widgetId) {
+    const stored = getWidgetValue(values, dataPath, widgetId);
+    const hierarchy = stored?.hierarchy || stored?.geo_code_hierarchy_json?.hierarchy;
+    if (!Array.isArray(hierarchy)) {
+        return [];
+    }
+    return hierarchy.filter((entry) => entry?.level && entry.level_value_id);
+}
+function builderMatchesStored(groupId, storedLevels) {
+    const builderLevels = geoHierarchyBuilder.getLevels(groupId);
+    if (builderLevels.length !== storedLevels.length) {
+        return false;
+    }
+    return storedLevels.every((stored, index) => {
+        const built = builderLevels[index];
+        return (built.level === stored.level &&
+            String(built.level_value_id) === String(stored.level_value_id));
+    });
+}
+/** Seed in-memory builder from persisted hierarchy JSON (edit-mode rehydration). */
+function seedGeoHierarchyFromValues(values, dataPath, widgetId, groupId) {
+    if (!dataPath || typeof dataPath !== 'string') {
+        return;
+    }
+    const storedLevels = readStoredHierarchyLevels(values, dataPath, widgetId);
+    if (storedLevels.length === 0) {
+        return;
+    }
+    if (builderMatchesStored(groupId, storedLevels)) {
+        return;
+    }
+    geoHierarchyBuilder.clear(groupId);
+    storedLevels.forEach((entry) => {
+        geoHierarchyBuilder.addLevel(entry.level, String(entry.level_value_id), entry.level_value_mnemonic || String(entry.level_value_id), groupId);
+    });
+}
+/** Force-clear builder for a group, then seed from Redux/schema values (e.g. after Cancel). */
+function resetAndSeedGeoHierarchyFromValues(values, dataPath, widgetId, groupId) {
+    geoHierarchyBuilder.clear(groupId);
+    seedGeoHierarchyFromValues(values, dataPath, widgetId, groupId);
+}
+
 // Define stable empty arrays to avoid selector reference issues
 const EMPTY_ERRORS = [];
 const EMPTY_DATA_SOURCE$1 = [];
@@ -2020,6 +2266,17 @@ const useBaseWidget = (options) => {
         if (isLayoutWidget) {
             return undefined; // Layout widgets don't have values
         }
+        const geoConfig = config['widget-geo-config'];
+        if (geoConfig) {
+            const value = resolveGeoWidgetLevelValue(values, widgetId, config['widget-data-path'], geoConfig);
+            if (userHasSetValueRef.current) {
+                return value;
+            }
+            if (value === null) {
+                return null;
+            }
+            return value !== undefined ? value : config['widget-data-default'];
+        }
         // Try to get value from widgetId first (this should have the actual selected value)
         // For geo widgets with dataPath, widgetId stores the actual ID, while dataPath stores the hierarchy object
         let value = values[widgetId];
@@ -2229,6 +2486,14 @@ const useBaseWidget = (options) => {
     // Track readonly state explicitly to detect changes
     // Use JSON.stringify to create a stable reference for the dependency array
     const isReadonly = config['widget-readonly'] ?? false;
+    // Leaving edit mode (Cancel): allow mirror/rehydration on next Edit
+    useEffect(() => {
+        if (config['widget-readonly']) {
+            userHasSetValueRef.current = false;
+            lastMirroredValueRef.current = null;
+            lastDispatchedValueRef.current = null;
+        }
+    }, [config['widget-readonly']]);
     const dataSource = config['widget-data-source'];
     const geoConfig = config['widget-geo-config'];
     // Use ref to store handler to avoid stale closures
@@ -2433,113 +2698,6 @@ const useWidgetCascade = (options) => {
     }, [cascadeConfig, eventBus, dataSource, widgetId, dispatch]);
 };
 
-/**
- * Geo Hierarchy Builder
- * Manages geo hierarchy state and builds hierarchy JSON structure
- */
-class GeoHierarchyBuilder {
-    constructor() {
-        this.hierarchies = new Map();
-    }
-    /**
-     * Get or create hierarchy state for a group
-     */
-    getHierarchy(groupId = 'default') {
-        if (!this.hierarchies.has(groupId)) {
-            this.hierarchies.set(groupId, {
-                levels: new Map(),
-                order: [],
-            });
-        }
-        return this.hierarchies.get(groupId);
-    }
-    /**
-     * Add a level to the hierarchy
-     */
-    addLevel(level, level_value_id, level_value_mnemonic, groupId = 'default') {
-        const hierarchy = this.getHierarchy(groupId);
-        // If level already exists, remove it and everything after it
-        const existingIndex = hierarchy.order.indexOf(level);
-        if (existingIndex >= 0) {
-            // Remove this level and all subsequent levels
-            const levelsToRemove = hierarchy.order.slice(existingIndex);
-            levelsToRemove.forEach((l) => {
-                hierarchy.levels.delete(l);
-                hierarchy.order = hierarchy.order.filter((o) => o !== l);
-            });
-        }
-        // Add new level
-        hierarchy.levels.set(level, {
-            level,
-            level_value_id,
-            level_value_mnemonic,
-        });
-        hierarchy.order.push(level);
-    }
-    /**
-     * Remove a level and all levels below it
-     */
-    removeLevelAndBelow(level, groupId = 'default') {
-        const hierarchy = this.getHierarchy(groupId);
-        const index = hierarchy.order.indexOf(level);
-        if (index >= 0) {
-            // Remove this level and all subsequent levels
-            const levelsToRemove = hierarchy.order.slice(index);
-            levelsToRemove.forEach((l) => {
-                hierarchy.levels.delete(l);
-                hierarchy.order = hierarchy.order.filter((o) => o !== l);
-            });
-        }
-    }
-    /**
-     * Build hierarchy JSON structure
-     */
-    buildHierarchyJson(groupId = 'default') {
-        const hierarchy = this.getHierarchy(groupId);
-        if (hierarchy.order.length === 0) {
-            return null;
-        }
-        const hierarchyArray = hierarchy.order.map((level) => {
-            const data = hierarchy.levels.get(level);
-            return {
-                level: data.level,
-                level_value_id: data.level_value_id,
-                level_value_mnemonic: data.level_value_mnemonic,
-            };
-        });
-        const lowestLevel = hierarchy.order[hierarchy.order.length - 1];
-        const lowestLevelData = hierarchy.levels.get(lowestLevel);
-        return {
-            geo_lowest_level_value_id: lowestLevelData.level_value_id,
-            geo_code_hierarchy_json: {
-                hierarchy: hierarchyArray,
-                lowest_level_value_id: lowestLevelData.level_value_id,
-            },
-        };
-    }
-    /**
-     * Clear hierarchy for a group
-     */
-    clear(groupId = 'default') {
-        this.hierarchies.delete(groupId);
-    }
-    /**
-     * Clear all hierarchies
-     */
-    clearAll() {
-        this.hierarchies.clear();
-    }
-    /**
-     * Get current levels for a group
-     */
-    getLevels(groupId = 'default') {
-        const hierarchy = this.getHierarchy(groupId);
-        return hierarchy.order.map((level) => hierarchy.levels.get(level));
-    }
-}
-// Singleton instance
-const geoHierarchyBuilder = new GeoHierarchyBuilder();
-
 // Define stable empty array to avoid selector reference issues
 const EMPTY_DATA_SOURCE = [];
 /**
@@ -2559,138 +2717,108 @@ const useGeoWidgetCascade = (options) => {
         : 'default';
     const valuesRef = useRef(values);
     const handlerRef = useRef(dataSourceRequestHandler);
+    const lastCascadePublishRef = useRef(undefined);
     // Keep refs updated
     useEffect(() => {
         valuesRef.current = values;
         handlerRef.current = dataSourceRequestHandler;
     }, [values, dataSourceRequestHandler]);
     // Get current value and data source options
-    const currentValue = useSelector((state) => {
-        // Try to get value from widgetId first (most recent selection)
-        let value = state.widget.values[widgetId];
-        // If not found in widgetId, try dataPath
-        if (value === undefined && dataPath) {
-            value = getWidgetValue(state.widget.values, dataPath, widgetId);
-        }
-        // Extract value if it's a geo hierarchy object
-        if (value && typeof value === 'object' && !Array.isArray(value) && geoConfig) {
-            const hierarchy = value.hierarchy || value.geo_code_hierarchy_json?.hierarchy;
-            if (Array.isArray(hierarchy)) {
-                const levelData = hierarchy.find((l) => l.level === geoConfig.level);
-                if (levelData) {
-                    return levelData.level_value_id;
-                }
-            }
-            // Extended fallbacks (matching useBaseWidget)
-            if ('geo_lowest_level_value_id' in value) {
-                return value.geo_lowest_level_value_id;
-            }
-            if ('lowest_level_value_id' in value) {
-                return value.lowest_level_value_id;
-            }
-            if (value.geo_code_hierarchy_json?.lowest_level_value_id) {
-                return value.geo_code_hierarchy_json.lowest_level_value_id;
-            }
-            if (value.geo_code_hierarchy_json?.geo_lowest_level_value_id) {
-                return value.geo_code_hierarchy_json.geo_lowest_level_value_id;
-            }
-        }
-        return value;
-    });
+    const currentValue = useSelector((state) => geoConfig
+        ? resolveGeoWidgetLevelValue(state.widget.values, widgetId, dataPath, geoConfig)
+        : state.widget.values[widgetId]);
     // Memoize selector to avoid returning new array reference
     const dataSourceOptions = useSelector((state) => state.widget.dataSources[widgetId] ?? EMPTY_DATA_SOURCE);
+    // Register parent chain for upstream-ancestor detection (grandparent → grandchild reset)
+    useEffect(() => {
+        if (!geoConfig) {
+            return;
+        }
+        registerGeoWidgetParent(widgetId, geoConfig.parentWidgetId);
+        return () => unregisterGeoWidgetParent(widgetId);
+    }, [widgetId, geoConfig]);
+    // Keep in-memory builder in sync with persisted hierarchy (reload, cancel→re-edit, etc.)
+    useEffect(() => {
+        if (!geoConfig || typeof dataPath !== 'string') {
+            return;
+        }
+        seedGeoHierarchyFromValues(values, dataPath, widgetId, groupId);
+    }, [geoConfig, dataPath, widgetId, groupId, values]);
     useEffect(() => {
         if (!geoConfig || !eventBus || !dataSource || dataSource.type !== 'api') {
             return;
         }
-        const { level, isLastLevel, parentWidgetId } = geoConfig;
-        // Listen to parent widget changes
-        if (parentWidgetId) {
-            const handleParentChange = async (event) => {
-                if (event.widgetId !== parentWidgetId) {
-                    return;
-                }
-                // CRITICAL: Use a small delay to ensure Redux state has been updated
-                // This prevents reading stale values from valuesRef
-                await new Promise(resolve => setTimeout(resolve, 0));
-                const currentValues = valuesRef.current;
-                const currentHandler = handlerRef.current;
-                // CRITICAL: Try to get parent value from event first, then from Redux
-                let parentValue = event.value;
-                if (parentValue === undefined || parentValue === null) {
-                    parentValue = currentValues[parentWidgetId];
-                    // If not found in top-level values, try to find it via dataPath or dependsOn
-                    if (parentValue === undefined && dataSource.dependsOn) {
-                        parentValue = getWidgetValue(currentValues, dataSource.dependsOn, '');
-                    }
-                }
-                // Remove this level and all below from hierarchy
-                geoHierarchyBuilder.removeLevelAndBelow(level, groupId);
-                // Clear this widget's value
-                // CRITICAL: Only dispatch setValue for THIS widget, not for parent or other widgets
-                // setWidgetValue returns the entire updated state, but we only want to update this widget
-                if (dataPath) {
-                    const updatedValues = setWidgetValue(currentValues, dataPath, widgetId, undefined);
-                    // Only dispatch setValue for this widget's widgetId, not for parent or other widgets
-                    // This prevents accidentally overwriting the parent widget's value
-                    // The setWidgetValue function updates the nested structure, but we only want to
-                    // update the top-level widgetId key, not other keys that might be in updatedValues
-                    const newWidgetValue = updatedValues[widgetId];
-                    if (newWidgetValue !== undefined) {
-                        dispatch(setValue({ widgetId, value: newWidgetValue }));
-                    }
-                    else {
-                        // If widgetId is not in updatedValues, the value was set in a nested path
-                        // In this case, we need to use setValues to update the entire structure
-                        // But we need to be careful not to overwrite the parent widget's value
-                        // Only update keys that are related to this widget's dataPath
-                        const dataPathStr = typeof dataPath === 'string' ? dataPath : '';
-                        if (dataPathStr && !dataPathStr.startsWith(parentWidgetId + '.')) {
-                            // Only update if dataPath doesn't start with parentWidgetId
-                            // This ensures we don't accidentally overwrite the parent widget's value
-                            dispatch(setValue({ widgetId, value: undefined }));
-                        }
-                    }
-                }
-                else {
-                    dispatch(setValue({ widgetId, value: undefined }));
+        const { level, isLastLevel, parentWidgetId: rawParentWidgetId } = geoConfig;
+        const parentWidgetId = rawParentWidgetId || null;
+        if (!parentWidgetId) {
+            return;
+        }
+        const clearThisLevel = (baseValues) => {
+            geoHierarchyBuilder.removeLevelAndBelow(level, groupId);
+            if (dataPath) {
+                dispatch(setValues(applySharedGeoHierarchyToValues(baseValues, groupId, dataPath, widgetId)));
+            }
+            dispatch(setValue({ widgetId, value: GEO_LEVEL_CLEARED }));
+            if (!isLastLevel) {
+                eventBus.publish({
+                    type: 'widget:change',
+                    widgetId,
+                    value: GEO_LEVEL_CLEARED,
+                    timestamp: Date.now(),
+                });
+            }
+            dispatch(setDataSource({ widgetId, data: [] }));
+        };
+        const handleParentChange = async (event) => {
+            const isDirectParent = event.widgetId === parentWidgetId;
+            const isAncestor = isUpstreamGeoAncestor(event.widgetId, widgetId, parentWidgetId);
+            if (!isDirectParent && !isAncestor) {
+                return;
+            }
+            await new Promise(resolve => setTimeout(resolve, 0));
+            const currentValues = valuesRef.current;
+            const currentHandler = handlerRef.current;
+            // Grandparent (or higher) changed: clear this level; only immediate parent drives reload
+            if (isAncestor && !isDirectParent) {
+                clearThisLevel(currentValues);
+                return;
+            }
+            const parentCleared = event.value === undefined ||
+                event.value === null ||
+                event.value === '' ||
+                event.value === GEO_LEVEL_CLEARED;
+            let parentValue = event.value;
+            if (!parentCleared && (parentValue === undefined || parentValue === null)) {
+                parentValue = currentValues[parentWidgetId];
+                if (parentValue === undefined && dataSource.dependsOn) {
+                    parentValue = getWidgetValue(currentValues, dataSource.dependsOn, '');
                 }
-                // Reload data source with new parent value
-                // CRITICAL: Use parentValue from Redux, not event.value
-                if (currentHandler && parentValue !== null && parentValue !== undefined) {
-                    try {
-                        // Merge the new parent value into current values for the API call
-                        // This ensures getApiDataSource can find the dependency value
-                        const updatedValues = {
-                            ...currentValues,
-                            [parentWidgetId]: parentValue, // Use Redux value, not event.value
-                        };
-                        // Extract level_id from widget-geo-config.level
-                        const levelId = geoConfig.level;
-                        const data = await getApiDataSource(dataSource, updatedValues, currentHandler, levelId);
-                        // Transform to { value, label } format
-                        const valueKey = dataSource.valueKey || 'level_value_id';
-                        const labelKey = dataSource.labelKey || 'level_value_mnemonic';
-                        const transformed = transformDataSourceOptions(data, valueKey, labelKey);
-                        dispatch(setDataSource({ widgetId, data: transformed }));
-                    }
-                    catch (error) {
-                        console.error('Error reloading geo data source:', error);
-                        dispatch(setDataSource({ widgetId, data: [] }));
-                    }
+            }
+            clearThisLevel(currentValues);
+            if (currentHandler && parentValue !== null && parentValue !== undefined && parentValue !== '') {
+                try {
+                    const updatedValues = {
+                        ...currentValues,
+                        [parentWidgetId]: parentValue,
+                    };
+                    const levelId = geoConfig.level;
+                    const data = await getApiDataSource(dataSource, updatedValues, currentHandler, levelId);
+                    const valueKey = dataSource.valueKey || 'level_value_id';
+                    const labelKey = dataSource.labelKey || 'level_value_mnemonic';
+                    const transformed = transformDataSourceOptions(data, valueKey, labelKey);
+                    dispatch(setDataSource({ widgetId, data: transformed }));
                 }
-                else {
-                    // If parent value is cleared, clear the data source and hierarchy
-                    geoHierarchyBuilder.removeLevelAndBelow(level, groupId);
+                catch (error) {
+                    console.error('Error reloading geo data source:', error);
                     dispatch(setDataSource({ widgetId, data: [] }));
                 }
-            };
-            const unsubscribe = eventBus.subscribe('widget:change', handleParentChange);
-            return () => {
-                unsubscribe();
-            };
-        }
-    }, [geoConfig, eventBus, dataSource, widgetId, dataPath, dispatch]);
+            }
+        };
+        const unsubscribe = eventBus.subscribe('widget:change', handleParentChange);
+        return () => {
+            unsubscribe();
+        };
+    }, [geoConfig, eventBus, dataSource, widgetId, dataPath, dispatch, groupId]);
     // Handle value changes to build hierarchy
     useEffect(() => {
         if (!geoConfig) {
@@ -2699,22 +2827,20 @@ const useGeoWidgetCascade = (options) => {
         // Skip if value is undefined (it might still be loading or rehydrating)
         // ONLY clear hierarchy if the value is explicitly null or empty string (user action)
         if (currentValue === null || currentValue === '') {
-            const { level } = geoConfig;
+            const { level, isLastLevel } = geoConfig;
             geoHierarchyBuilder.removeLevelAndBelow(level, groupId);
             // If we have a dataPath, we need to update Redux with the cleared hierarchy
             if (dataPath) {
-                const hierarchyJson = geoHierarchyBuilder.buildHierarchyJson(groupId);
-                let finalUpdatedValues = valuesRef.current;
-                // Use logic similar to the build section below to update the dataPath
-                if (typeof dataPath === 'string' && dataPath.endsWith('.geo_code_hierarchy_json')) {
-                    const prefix = dataPath.substring(0, dataPath.lastIndexOf('.'));
-                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, dataPath, widgetId, hierarchyJson?.geo_code_hierarchy_json);
-                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, `${prefix}.geo_lowest_level_value_id`, widgetId, hierarchyJson?.geo_lowest_level_value_id);
-                }
-                else {
-                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, dataPath, widgetId, hierarchyJson?.geo_code_hierarchy_json);
-                }
-                dispatch(setValues(finalUpdatedValues));
+                dispatch(setValues(applySharedGeoHierarchyToValues(valuesRef.current, groupId, dataPath, widgetId)));
+            }
+            if (!isLastLevel && eventBus && lastCascadePublishRef.current !== GEO_LEVEL_CLEARED) {
+                lastCascadePublishRef.current = GEO_LEVEL_CLEARED;
+                eventBus.publish({
+                    type: 'widget:change',
+                    widgetId,
+                    value: GEO_LEVEL_CLEARED,
+                    timestamp: Date.now(),
+                });
             }
             return;
         }
@@ -2765,30 +2891,20 @@ const useGeoWidgetCascade = (options) => {
         // Add level to hierarchy
         geoHierarchyBuilder.addLevel(level, level_value_id, level_value_mnemonic, groupId);
         // Build and store hierarchy JSON on every change
-        if (dataPath) {
-            const hierarchyJson = geoHierarchyBuilder.buildHierarchyJson(groupId);
-            if (hierarchyJson) {
-                // Fix: Avoid double nesting of geo_code_hierarchy_json
-                // If dataPath ends with .geo_code_hierarchy_json, we want to save the content directly to it
-                // and save the lowest level ID as a sibling
-                let finalUpdatedValues = valuesRef.current;
-                if (typeof dataPath === 'string' && dataPath.endsWith('.geo_code_hierarchy_json')) {
-                    const prefix = dataPath.substring(0, dataPath.lastIndexOf('.'));
-                    // Save hierarchy JSON content directly to dataPath (avoiding double nesting)
-                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, dataPath, widgetId, hierarchyJson.geo_code_hierarchy_json);
-                    // Save lowest level ID as sibling
-                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, `${prefix}.geo_lowest_level_value_id`, widgetId, hierarchyJson.geo_lowest_level_value_id);
-                }
-                else {
-                    // Fallback if path doesn't follow the naming convention
-                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, dataPath, widgetId, hierarchyJson.geo_code_hierarchy_json);
-                }
-                // CRITICAL: Use setValues for deep merge instead of replacing root keys with setValue
-                // setWidgetValue returns the complete updated state object with all keys preserved
-                dispatch(setValues(finalUpdatedValues));
-            }
+        if (dataPath && geoHierarchyBuilder.buildHierarchyJson(groupId)) {
+            dispatch(setValues(applySharedGeoHierarchyToValues(valuesRef.current, groupId, dataPath, widgetId)));
+        }
+        // Notify descendants when this level changes via hierarchy/rehydration (handleChange may not run).
+        if (!isLastLevel && eventBus && lastCascadePublishRef.current !== level_value_id) {
+            lastCascadePublishRef.current = level_value_id;
+            eventBus.publish({
+                type: 'widget:change',
+                widgetId,
+                value: level_value_id,
+                timestamp: Date.now(),
+            });
         }
-    }, [geoConfig, currentValue, widgetId, dataPath, dispatch, dataSourceOptions]);
+    }, [geoConfig, currentValue, widgetId, dataPath, dispatch, dataSourceOptions, eventBus, groupId]);
 };
 
 class WidgetRegistry {
@@ -8787,16 +8903,65 @@ const DisplayWidget = ({ config }) => {
     return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] DisplayFieldWidget 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: label, children: [label, ":"] }), jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
 };
 
+const getDateColumnConstraintError = (column, cellValue, rowValues, translateConfig) => {
+    const displayValue = cellValue && typeof cellValue === 'string' ? cellValue.split('T')[0] : '';
+    if (!displayValue) {
+        return null;
+    }
+    const optionsConfig = column['widget-data-options'];
+    const formatConfig = column['widget-data-format'];
+    const dateConstraint = formatConfig?.dateConstraint || 'any';
+    const minDate = optionsConfig?.minDate;
+    const maxDate = optionsConfig?.maxDate;
+    const minDateField = optionsConfig?.minDateField;
+    const maxDateField = optionsConfig?.maxDateField;
+    const minDateMessage = optionsConfig?.minDateMessage
+        ? translateConfig(optionsConfig.minDateMessage)
+        : undefined;
+    const maxDateMessage = optionsConfig?.maxDateMessage
+        ? translateConfig(optionsConfig.maxDateMessage)
+        : undefined;
+    const resolveSiblingDate = (fieldRef) => {
+        if (!fieldRef) {
+            return undefined;
+        }
+        const raw = getValueByPath(rowValues, fieldRef) ?? rowValues[fieldRef];
+        return resolveDateBoundFromFieldValue(raw);
+    };
+    const effectiveMinDate = mergeMinDateBounds(getMinDate(dateConstraint, minDate), resolveSiblingDate(minDateField));
+    const effectiveMaxDate = mergeMaxDateBounds(getMaxDate(dateConstraint, maxDate), resolveSiblingDate(maxDateField));
+    return validateDateConstraints(displayValue, effectiveMinDate, effectiveMaxDate, dateConstraint, { minDateMessage, maxDateMessage });
+};
+const isTableRowDataValid = (rowData, columns, tableReadonly, translateConfig) => {
+    for (const col of columns) {
+        if (tableReadonly || col['widget-readonly'] === true) {
+            continue;
+        }
+        const columnKey = col['column-key'];
+        const cellValue = rowData[columnKey];
+        const widgetErrors = validateWidget(cellValue, col['widget-data-validation'], col['widget-required']);
+        if (widgetErrors.length > 0) {
+            return false;
+        }
+        if ((col.widget || 'text') === 'date') {
+            const dateError = getDateColumnConstraintError(col, cellValue, rowData, translateConfig);
+            if (dateError) {
+                return false;
+            }
+        }
+    }
+    return true;
+};
 const TableCellSelect = ({ config, value, onValueChange }) => {
     const { translate } = useWidgetTranslation();
     // Use useBaseWidget to get data source options (it handles loading)
     const { dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
     const isReadonly = config['widget-readonly'] || false;
-    return (jsxRuntimeExports.jsxs("select", { value: value || '', onChange: (e) => onValueChange(e.target.value), disabled: isReadonly || loading, className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly || loading ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
-            borderRadius: '10px',
-            borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
-            backgroundColor: isReadonly || loading ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
-        }, children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') || 'Select' }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value)))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "table-cell-field w-full", children: [jsxRuntimeExports.jsxs("select", { value: value || '', onChange: (e) => onValueChange(e.target.value), disabled: isReadonly || loading, className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly || loading ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
+                    borderRadius: '10px',
+                    borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
+                    backgroundColor: isReadonly || loading ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
+                }, children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') || 'Select' }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value)))] }), jsxRuntimeExports.jsx("p", { className: "table-cell-field-error", "aria-hidden": "true", children: '\u00a0' })] }));
 };
 const SelectDisplayValue$1 = ({ config, value }) => {
     const { dataSourceOptions, loading } = useBaseWidget({ config });
@@ -8815,11 +8980,11 @@ const TableCellText = ({ config, value, onValueChange }) => {
     config['widget-data-format'];
     const maxLength = config['widget-data-validation']?.maxLength;
     const displayValue = value !== null && value !== undefined ? String(value) : '';
-    return (jsxRuntimeExports.jsx("input", { type: "text", value: displayValue, onChange: (e) => onValueChange(e.target.value), disabled: isReadonly, placeholder: placeholder, maxLength: maxLength, className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
-            borderRadius: '10px',
-            borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
-            backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
-        } }));
+    return (jsxRuntimeExports.jsxs("div", { className: "table-cell-field w-full", children: [jsxRuntimeExports.jsx("input", { type: "text", value: displayValue, onChange: (e) => onValueChange(e.target.value), disabled: isReadonly, placeholder: placeholder, maxLength: maxLength, className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
+                    borderRadius: '10px',
+                    borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
+                    backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
+                } }), jsxRuntimeExports.jsx("p", { className: "table-cell-field-error", "aria-hidden": "true", children: '\u00a0' })] }));
 };
 const TableCellNumber = ({ config, value, onValueChange }) => {
     const isReadonly = config['widget-readonly'] || false;
@@ -8842,11 +9007,11 @@ const TableCellNumber = ({ config, value, onValueChange }) => {
             onValueChange(inputValue);
         }
     };
-    return (jsxRuntimeExports.jsx("input", { type: "number", value: displayValue, onChange: handleChange, disabled: isReadonly, placeholder: placeholder, min: validationConfig?.min, max: validationConfig?.max, step: formatConfig?.decimalPlaces ? Math.pow(0.1, formatConfig.decimalPlaces) : undefined, className: `w-full h-[28px] px-2 text-sm border focus:outline-none text-right ${isReadonly ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
-            borderRadius: '10px',
-            borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
-            backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
-        } }));
+    return (jsxRuntimeExports.jsxs("div", { className: "table-cell-field w-full", children: [jsxRuntimeExports.jsx("input", { type: "number", value: displayValue, onChange: handleChange, disabled: isReadonly, placeholder: placeholder, min: validationConfig?.min, max: validationConfig?.max, step: formatConfig?.decimalPlaces ? Math.pow(0.1, formatConfig.decimalPlaces) : undefined, className: `w-full h-[28px] px-2 text-sm border focus:outline-none text-right ${isReadonly ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
+                    borderRadius: '10px',
+                    borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
+                    backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
+                } }), jsxRuntimeExports.jsx("p", { className: "table-cell-field-error", "aria-hidden": "true", children: '\u00a0' })] }));
 };
 const TableCellDate = ({ config, value, rowValues, onValueChange }) => {
     const { translateConfig } = useWidgetTranslation();
@@ -8905,13 +9070,15 @@ const TableCellDate = ({ config, value, rowValues, onValueChange }) => {
         setConstraintError(error);
     };
     const hasError = Boolean(constraintError);
-    return (jsxRuntimeExports.jsxs("div", { className: "w-full", children: [jsxRuntimeExports.jsx("input", { type: "date", value: displayValue, onChange: handleChange, disabled: isReadonly, placeholder: placeholder, min: effectiveMinDate, max: effectiveMaxDate, title: constraintError || translateConfig(config['widget-data-tooltip']), className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly ? 'cursor-not-allowed' : ''} ${hasError ? 'border-red-500' : ''} table-cell-input`, style: {
+    return (jsxRuntimeExports.jsxs("div", { className: "table-cell-field w-full", children: [jsxRuntimeExports.jsx("input", { type: "date", value: displayValue, onChange: handleChange, disabled: isReadonly, placeholder: placeholder, min: effectiveMinDate, max: effectiveMaxDate, title: constraintError || translateConfig(config['widget-data-tooltip']), className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
                     borderRadius: '10px',
                     borderColor: hasError
                         ? 'var(--owt-color-error, #B91C1C)'
                         : 'var(--owt-widget-input-border, #C4C4C4)',
                     backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
-                } }), hasError && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-xs mt-0.5 leading-tight", children: constraintError }))] }));
+                } }), jsxRuntimeExports.jsx("p", { className: "table-cell-field-error text-xs mt-0.5 leading-tight", style: {
+                    color: hasError ? 'var(--owt-color-error, #B91C1C)' : 'transparent',
+                }, "aria-live": "polite", children: constraintError ?? '\u00a0' })] }));
 };
 const TableWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, config: widgetConfig, } = useBaseWidget({ config });
@@ -8937,6 +9104,18 @@ const TableWidget = ({ config }) => {
     const isSectionEditMode = !isReadonly && operations.edit;
     // Check if any row is being edited (either manually or via section edit mode)
     const isAnyRowEditing = editingState !== null || isAdding;
+    const canSaveEditingRow = useMemo(() => {
+        if (!editingState) {
+            return false;
+        }
+        return isTableRowDataValid(editingState.currentValue, columns, isReadonly, translateConfig);
+    }, [editingState, columns, isReadonly, translateConfig]);
+    const canSaveNewRow = useMemo(() => {
+        if (!isAdding || !newRowData) {
+            return false;
+        }
+        return isTableRowDataValid(newRowData, columns, isReadonly, translateConfig);
+    }, [isAdding, newRowData, columns, isReadonly, translateConfig]);
     // Show confirmation dialog
     const showConfirmation = useCallback((message, onConfirm, onCancel) => {
         setConfirmationState({
@@ -9026,6 +9205,8 @@ const TableWidget = ({ config }) => {
     const saveEdit = useCallback(async () => {
         if (!editingState)
             return;
+        if (!canSaveEditingRow)
+            return;
         const rowData = editingState.currentValue;
         const rowIndex = editingState.rowIndex;
         setLoadingRowIndex(rowIndex);
@@ -9097,7 +9278,7 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [editingState, rows, onChange, dataSourceRequestHandler, apiConfig, translate, isSectionEditMode, originalRows, columns, widgetConfig, dispatch]);
+    }, [editingState, canSaveEditingRow, rows, onChange, dataSourceRequestHandler, apiConfig, translate, isSectionEditMode, originalRows, columns, widgetConfig, dispatch]);
     // Add new row
     const startAdd = useCallback(() => {
         // If there's an unsaved edit, cancel it first (no confirmation needed)
@@ -9115,6 +9296,8 @@ const TableWidget = ({ config }) => {
     const saveAdd = useCallback(async () => {
         if (!isAdding || !newRowData)
             return;
+        if (!canSaveNewRow)
+            return;
         setLoadingRowIndex(-1); // Use -1 to indicate new row
         try {
             let savedRow = { ...newRowData };
@@ -9145,7 +9328,7 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [isAdding, newRowData, rows, onChange, dataSourceRequestHandler, apiConfig, translate, isSectionEditMode]);
+    }, [isAdding, newRowData, canSaveNewRow, rows, onChange, dataSourceRequestHandler, apiConfig, translate, isSectionEditMode]);
     // Delete row
     const deleteRow = useCallback(async (rowIndex) => {
         if (isAnyRowEditing) {
@@ -9423,6 +9606,22 @@ const TableWidget = ({ config }) => {
           box-shadow: 0 0 0 1px var(--owt-widget-input-focus-border, #F07B1A);
           border-color: var(--owt-widget-input-focus-border, #F07B1A);
         }
+
+        /* Keep inputs and action buttons top-aligned when a cell shows validation text */
+        .${tableWidgetId} tr.table-row-editing td {
+          vertical-align: top;
+        }
+
+        .${tableWidgetId} .table-cell-field-error {
+          min-height: 1.125rem;
+        }
+
+        .${tableWidgetId} .table-cell-actions {
+          display: flex;
+          flex-direction: row;
+          gap: 0.5rem;
+          align-items: flex-start;
+        }
       ` }), jsxRuntimeExports.jsxs("div", { className: `table-widget-container ${tableWidgetId}`, children: [confirmationState?.show && (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 flex items-center justify-center z-50", style: { backgroundColor: 'rgba(0,0,0,0.5)' }, children: jsxRuntimeExports.jsxs("div", { className: "rounded-lg p-6 max-w-md w-full mx-4", style: { backgroundColor: 'var(--owt-color-bg, #FFFFFF)' }, children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: 'var(--owt-color-text, #011627)' }, children: translate('table.confirm') || 'Confirm Action' }), jsxRuntimeExports.jsx("p", { className: "mb-6", style: { color: 'var(--owt-color-text, #011627)' }, children: confirmationState.message }), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3", children: [jsxRuntimeExports.jsx("button", { onClick: confirmationState.onCancel, className: "px-4 py-2 text-sm font-medium", style: {
                                                 borderRadius: 'var(--owt-btn-border-radius, 10px)',
                                                 border: '1px solid var(--owt-btn-secondary-border, #C4C4C4)',
@@ -9441,7 +9640,7 @@ const TableWidget = ({ config }) => {
                             }, children: translate('table.addRecord') || 'Add New Record' }) })), jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border", style: { borderRadius: 'var(--owt-widget-table-border-radius, 15px)', borderColor: 'var(--owt-widget-table-border-color, #C4C4C4)' }, children: jsxRuntimeExports.jsxs("table", { className: "min-w-full", style: { borderCollapse: 'separate', borderSpacing: 0 }, children: [jsxRuntimeExports.jsx("thead", { style: { backgroundColor: 'var(--owt-widget-table-header-bg, #F6F6F6)' }, children: jsxRuntimeExports.jsxs("tr", { style: { borderBottom: '1px solid var(--owt-widget-table-row-divider, #E4E4E4)' }, children: [columns.map((col) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider", style: { color: 'var(--owt-widget-table-header-color, #727474)' }, children: translateConfig(col['widget-label']) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) || isAnyRowEditing || isSectionEditMode ? (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider", style: { color: 'var(--owt-widget-table-header-color, #727474)' }, children: translate('common.actions') || 'Actions' })) : null] }) }), jsxRuntimeExports.jsxs("tbody", { style: { backgroundColor: 'var(--owt-widget-table-body-bg, #FFFFFF)' }, children: [rows.length === 0 && !isAdding && (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsxs("td", { colSpan: columns.length + (((operations.edit || operations.remove) && !isReadonly) || isSectionEditMode ? 1 : 0), className: "px-4 py-6 text-center text-sm", style: { color: 'var(--owt-widget-table-empty-color, #727474)' }, children: [translate('table.noData') || 'No records available.', operations.add && !isReadonly && ` ${translate('table.clickToAdd') || 'Click "Add New Record" to add one.'}`] }) })), rows.map((row, rowIndex) => {
                                             const isEditing = isRowEditing(rowIndex);
                                             const isLoading = loadingRowIndex === rowIndex;
-                                            return (jsxRuntimeExports.jsxs("tr", { className: isLoading ? 'opacity-50' : '', style: {
+                                            return (jsxRuntimeExports.jsxs("tr", { className: `${isLoading ? 'opacity-50' : ''}${isEditing ? ' table-row-editing' : ''}`, style: {
                                                     borderBottom: '1px solid var(--owt-widget-table-row-divider, #E4E4E4)',
                                                     backgroundColor: isEditing
                                                         ? 'var(--owt-widget-table-editing-row-bg, #FBE6AA)'
@@ -9452,7 +9651,7 @@ const TableWidget = ({ config }) => {
                                                         return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rowIndex, col, row) }, col['column-key']));
                                                     }), ((operations.edit || operations.remove) && !isReadonly) || isEditing || isSectionEditMode ? (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", style: { minWidth: '120px' }, children: isEditing ? (
                                                         // Show OK (Save)/Cancel buttons when row is being edited (works in both section edit mode and normal mode)
-                                                        jsxRuntimeExports.jsxs("div", { className: "flex flex-row gap-2 items-center", style: { width: '100%' }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: {
+                                                        jsxRuntimeExports.jsxs("div", { className: "table-cell-actions", style: { width: '100%' }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveEdit, disabled: isLoading || !canSaveEditingRow, className: "px-3 py-1 text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: {
                                                                         display: 'inline-block',
                                                                         minWidth: '60px',
                                                                         backgroundColor: 'var(--owt-color-success, #16A34A)',
@@ -9479,7 +9678,7 @@ const TableWidget = ({ config }) => {
                                                                         backgroundColor: 'transparent',
                                                                         border: 'none',
                                                                     }, children: translate('common.remove') || 'Delete' }))] })) })) : null] }, rowIndex));
-                                        }), isAdding && newRowData && (jsxRuntimeExports.jsxs("tr", { style: { backgroundColor: 'var(--owt-widget-table-editing-row-bg, #FBE6AA)' }, children: [columns.map((col) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rows.length, col, { ...newRowData, edit_action: 'ADD' }) }, col['column-key']))), jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveAdd, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs disabled:opacity-50", style: {
+                                        }), isAdding && newRowData && (jsxRuntimeExports.jsxs("tr", { className: "table-row-editing", style: { backgroundColor: 'var(--owt-widget-table-editing-row-bg, #FBE6AA)' }, children: [columns.map((col) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rows.length, col, { ...newRowData, edit_action: 'ADD' }) }, col['column-key']))), jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsxs("div", { className: "table-cell-actions", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveAdd, disabled: loadingRowIndex === -1 || !canSaveNewRow, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
                                                                     borderRadius: 'var(--owt-btn-border-radius, 10px)',
                                                                     backgroundColor: 'var(--owt-color-success, #16A34A)',
                                                                     color: 'var(--owt-color-bg, #FFFFFF)',
@@ -11767,5 +11966,5 @@ const translateUISchema = (schema, translate) => {
     };
 };
 
-export { ArrayWidget, BooleanWidget, CheckboxWidget, CurrencyInputWidget, DateInputWidget, DateTimeInputWidget, DialogTableWidget, DisplayWidget, FileInputWidget, HeaderSectionWidget, IdAuthenticationWidget, IterableAccordionWidget, JSONEditorPanel, NumberInputWidget, PanelRenderer, PhoneInputWidget, ProfileWidget, PropertyEditor, RadioWidget, ScoresDisplayWidget, SectionBuilder, SectionRenderer, SectionTree, SectionsContainer, SelectWidget, SimpleTableWidget, TableWidget, TextAreaWidget, TextInputWidget, VisualBuilderPanel, WidgetEventBus, WidgetProvider, WidgetRenderer, applyCaseControl, applyDecimalPrecision, applyMask, createWidgetStore, createZodSchema, defaultTheme, evaluateCondition, filterByCharacterType, formatCurrency, formatDate, formatNumber, formatPhone, formatValue, geoHierarchyBuilder, getApiDataSource, getFormattedNumberLength, getSchemaDataSource, getStaticDataSource, getValueByPath, getWidgetValue, initI18n, isAllowedKey, normalizeNumericDefault, parseDataPath, parseNumber, registerDefaultWidgets, removeMask, resetAll, resetWidget, resolveTheme, setDataSource, setError, setLoading, setTouched, setValue, setValueByPath, setValues, setWidgetValue, shouldEnableWidget, shouldShowWidget, transformDataSourceOptions, translatePanelConfig, translateUISchema, translateWidgetConfig, useBaseWidget, useGeoWidgetCascade, useWidgetCascade, useWidgetContext, useWidgetEventBus, useWidgetTheme, useWidgetTranslation, validateNumericValue, validateWidget, widgetRegistry };
+export { ArrayWidget, BooleanWidget, CheckboxWidget, CurrencyInputWidget, DateInputWidget, DateTimeInputWidget, DialogTableWidget, DisplayWidget, FileInputWidget, GEO_LEVEL_CLEARED, HeaderSectionWidget, IdAuthenticationWidget, IterableAccordionWidget, JSONEditorPanel, NumberInputWidget, PanelRenderer, PhoneInputWidget, ProfileWidget, PropertyEditor, RadioWidget, ScoresDisplayWidget, SectionBuilder, SectionRenderer, SectionTree, SectionsContainer, SelectWidget, SimpleTableWidget, TableWidget, TextAreaWidget, TextInputWidget, VisualBuilderPanel, WidgetEventBus, WidgetProvider, WidgetRenderer, applyCaseControl, applyDecimalPrecision, applyMask, applySharedGeoHierarchyToValues, createWidgetStore, createZodSchema, defaultTheme, evaluateCondition, filterByCharacterType, formatCurrency, formatDate, formatNumber, formatPhone, formatValue, geoHierarchyBuilder, getApiDataSource, getFormattedNumberLength, getSchemaDataSource, getStaticDataSource, getValueByPath, getWidgetValue, initI18n, isAllowedKey, isUpstreamGeoAncestor, normalizeNumericDefault, parseDataPath, parseNumber, registerDefaultWidgets, registerGeoWidgetParent, removeMask, resetAll, resetAndSeedGeoHierarchyFromValues, resetWidget, resolveGeoWidgetLevelValue, resolveTheme, resolveWidgetIdValue, seedGeoHierarchyFromValues, setDataSource, setError, setLoading, setTouched, setValue, setValueByPath, setValues, setWidgetValue, shouldEnableWidget, shouldShowWidget, transformDataSourceOptions, translatePanelConfig, translateUISchema, translateWidgetConfig, unregisterGeoWidgetParent, useBaseWidget, useGeoWidgetCascade, useWidgetCascade, useWidgetContext, useWidgetEventBus, useWidgetTheme, useWidgetTranslation, validateNumericValue, validateWidget, widgetRegistry };
 //# sourceMappingURL=index.esm.js.map