@openg2p/registry-widgets 1.1.2-dev.9 → 1.1.3-dev.1

package/dist/index.js

@@ -406,9 +406,8 @@ const createZodSchema = (validation, required = false) => {
 const normalizeBooleanLike = (val) => {
     if (val === true || val === 1)
         return true;
-    if (val === false || val === 0 || val === null || val === undefined || val === '') {
+    if (val === false || val === 0)
         return false;
-    }
     if (typeof val === 'string') {
         const normalized = val.trim().toLowerCase();
         return normalized === 'true' || normalized === 'yes' || normalized === '1';
@@ -423,8 +422,11 @@ const evaluateCondition = (condition, allValues) => {
     const { operator, value } = condition;
     switch (operator) {
         case 'equals':
-            if (typeof value === 'boolean' || typeof fieldValue === 'boolean') {
-                return normalizeBooleanLike(fieldValue) === normalizeBooleanLike(value);
+            if (typeof value === 'boolean') {
+                return typeof fieldValue === 'boolean' && fieldValue === value;
+            }
+            if (typeof fieldValue === 'boolean') {
+                return fieldValue === normalizeBooleanLike(value);
             }
             return fieldValue === value;
         case 'notEquals':
@@ -2814,6 +2816,8 @@ const useBaseWidget = (options) => {
     const apiService = dataSource?.type === 'api' ? dataSource.service : '';
     const apiEndpoint = dataSource?.type === 'api' ? dataSource.endpoint : '';
     const configKey = `${widgetId}-${isReadonly}-${dataSource?.type || 'none'}-${apiService}-${apiEndpoint}`;
+    // Stable key so inline schemaData objects (e.g. dialog-table fields) don't retrigger loads every render
+    const schemaDataKey = React.useMemo(() => (schemaData ? JSON.stringify(schemaData) : ''), [schemaData]);
     // Extract dependency value using a granular selector to prevent unnecessary re-renders
     // and infinite loops when other unrelated values in the state change.
     const dependencyValue = reactRedux.useSelector((state) => {
@@ -2931,7 +2935,7 @@ const useBaseWidget = (options) => {
         loadDataSource();
         // Use configKey and dependencyValue to ensure effect runs only when relevant state changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [configKey, dependencyValue, dataSourceRequestHandler, schemaData, widgetId, dispatch]);
+    }, [configKey, dependencyValue, dataSourceRequestHandler, schemaDataKey, widgetId, dispatch]);
     const geoDisplayLabel = React.useMemo(() => {
         if (!geoConfig) {
             return undefined;
@@ -10087,6 +10091,56 @@ const TableWidget = ({ config }) => {
 };
 
 const isUnsetRowValue = (value) => value === null || value === undefined || value === '';
+const buildDialogConditionValues = (row, columns) => {
+    let context = { ...row };
+    columns.forEach((col) => {
+        const columnKey = col['column-key'];
+        if (!columnKey || row[columnKey] === undefined) {
+            return;
+        }
+        const dataPath = col['widget-data-path'];
+        if (typeof dataPath === 'string' && dataPath) {
+            context = setValueByPath(context, dataPath, row[columnKey]);
+        }
+    });
+    return context;
+};
+const buildDialogColumnSegments = (columns) => {
+    const segments = [];
+    let index = 0;
+    while (index < columns.length) {
+        const group = columns[index]['column-group'];
+        if (group) {
+            const groupCols = [];
+            while (index < columns.length && columns[index]['column-group'] === group) {
+                groupCols.push(columns[index]);
+                index += 1;
+            }
+            segments.push({ type: 'group', group, cols: groupCols });
+        }
+        else {
+            segments.push({ type: 'single', col: columns[index] });
+            index += 1;
+        }
+    }
+    return segments;
+};
+/** Match TableWidget cell styling for add / update / delete rows */
+const getRowCellStyle = (editAction) => {
+    if (editAction === 'ADD') {
+        return { color: 'var(--owt-color-success, #16A34A)' };
+    }
+    if (editAction === 'DELETE') {
+        return {
+            color: 'var(--owt-color-error, #B91C1C)',
+            textDecoration: 'line-through',
+        };
+    }
+    if (editAction === 'UPDATE') {
+        return { color: 'var(--owt-color-warning, #F59E0B)' };
+    }
+    return {};
+};
 // Display select value label in view mode
 const SelectDisplayValue = ({ config, value }) => {
     const { dataSourceOptions, loading } = useBaseWidget({ config });
@@ -10097,23 +10151,29 @@ const SelectDisplayValue = ({ config, value }) => {
     const selectedOption = dataSourceOptions.find((option) => option.value === value || String(option.value) === String(value));
     return jsxRuntimeExports.jsx("span", { children: selectedOption ? selectedOption.label : String(value) });
 };
+/** Isolated dialog field — avoids re-running data-source effects when sibling fields update. */
+const DialogTableField = React.memo(function DialogTableField({ col, cellWidgetId, dialogConditionValues, isReadonly, }) {
+    const widgetType = col.widget || 'text';
+    const fieldConfig = React.useMemo(() => {
+        return {
+            ...col,
+            widget: widgetType,
+            'widget-type': col['widget-type'] || 'input',
+            'widget-id': cellWidgetId,
+            'widget-label': col['widget-label'],
+            'widget-readonly': isReadonly || col['widget-readonly'] === true,
+            'widget-data-path': undefined,
+            'widget-data-default': col['widget-data-default'],
+            'widget-data-options': undefined,
+            'widget-required': shouldRequireWidget(col['widget-data-options'], dialogConditionValues, col['widget-required']),
+        };
+    }, [col, cellWidgetId, dialogConditionValues, isReadonly, widgetType]);
+    return (jsxRuntimeExports.jsx("div", { className: "min-w-0", children: jsxRuntimeExports.jsx(WidgetRenderer, { config: fieldConfig }) }));
+});
 /**
  * Dialog table widget:
  * - Table displays a subset of columns (n out of x)
  * - Add/Edit happens in a modal dialog that shows ALL columns as a form
- *
- * Usage in schema:
- * {
- *   "widget": "dialog-table",
- *   "widget-type": "table",
- *   "widget-label": "Household Members",
- *   "widget-id": "householdMembers",
- *   "widget-data-path": "household.members",
- *   "widget-data-columns": [ ...all columns... ],
- *   "widget-data-visible-columns": ["firstName", "lastName", "dob"], // optional override; default = by column flag
- *   // Per-column control (recommended): set "column-visible-in-table": false to hide it in the table
- *   "widget-data-operations": { "add": true, "edit": true, "remove": true }
- * }
  */
 const DialogTableWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, config: widgetConfig } = useBaseWidget({ config });
@@ -10123,23 +10183,22 @@ const DialogTableWidget = ({ config }) => {
     const columns = widgetConfig['widget-data-columns'] || [];
     const operations = widgetConfig['widget-data-operations'] || {};
     const isReadonly = widgetConfig['widget-readonly'] || false;
+    // Soft-delete (keep row, red + strikethrough) whenever remove is allowed — matches TableWidget
+    const shouldSoftDeleteOnRemove = !isReadonly && !!operations.remove;
     const visibleColumnKeys = widgetConfig['widget-data-visible-columns'];
     const visibleColumns = React.useMemo(() => {
-        // 1) If explicit list provided, it wins
         if (Array.isArray(visibleColumnKeys) && visibleColumnKeys.length > 0) {
             const keySet = new Set(visibleColumnKeys);
             return columns.filter((c) => keySet.has(c['column-key']));
         }
-        // 2) Otherwise decide per column (default = visible)
         return columns.filter((c) => c['column-visible-in-table'] !== false);
     }, [columns, visibleColumnKeys]);
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [dialogMode, setDialogMode] = React.useState('add');
     const [activeRowIndex, setActiveRowIndex] = React.useState(null);
-    const [formData, setFormData] = React.useState({});
-    /** Unique per dialog open so Redux widget ids don't reuse stale values across rows/add sessions */
     const dialogSessionRef = React.useRef(0);
     const [dialogSessionId, setDialogSessionId] = React.useState(0);
+    const membersWidgetId = widgetConfig['widget-id'];
     const addDialogTitle = translateConfig(widgetConfig['widget-data-dialog-title-add']) ||
         translate('table.addRecordDialog') ||
         'Add record';
@@ -10159,15 +10218,26 @@ const DialogTableWidget = ({ config }) => {
         });
         return emptyRow;
     }, [columns]);
-    const dialogFieldWidgetId = React.useCallback((columnKey) => `${widgetConfig['widget-id']}-dlg-${dialogSessionId}-${columnKey}`, [widgetConfig, dialogSessionId]);
+    const dialogFieldWidgetId = React.useCallback((sessionId, columnKey) => `${membersWidgetId}-dlg-${sessionId}-${columnKey}`, [membersWidgetId]);
     const resetDialogWidgets = React.useCallback((sessionId) => {
         if (sessionId <= 0)
             return;
         columns.forEach((col) => {
-            const wid = `${widgetConfig['widget-id']}-dlg-${sessionId}-${col['column-key']}`;
-            dispatch(resetWidget(wid));
+            dispatch(resetWidget(dialogFieldWidgetId(sessionId, col['column-key'])));
         });
-    }, [columns, widgetConfig, dispatch]);
+    }, [columns, dialogFieldWidgetId, dispatch]);
+    const seedDialogReduxValues = React.useCallback((sessionId, rowData) => {
+        const seeds = {};
+        columns.forEach((col) => {
+            const key = col['column-key'];
+            if (rowData[key] !== undefined) {
+                seeds[dialogFieldWidgetId(sessionId, key)] = rowData[key];
+            }
+        });
+        if (Object.keys(seeds).length > 0) {
+            dispatch(setValues(seeds));
+        }
+    }, [columns, dialogFieldWidgetId, dispatch]);
     const beginDialogSession = React.useCallback(() => {
         dialogSessionRef.current += 1;
         const nextSession = dialogSessionRef.current;
@@ -10176,15 +10246,21 @@ const DialogTableWidget = ({ config }) => {
     }, []);
     const openAddDialog = React.useCallback(() => {
         resetDialogWidgets(dialogSessionId);
-        beginDialogSession();
+        const sessionId = beginDialogSession();
+        seedDialogReduxValues(sessionId, buildEmptyRow());
         setDialogMode('add');
         setActiveRowIndex(null);
-        setFormData(buildEmptyRow());
         setDialogOpen(true);
-    }, [buildEmptyRow, beginDialogSession, resetDialogWidgets, dialogSessionId]);
+    }, [
+        buildEmptyRow,
+        beginDialogSession,
+        resetDialogWidgets,
+        dialogSessionId,
+        seedDialogReduxValues,
+    ]);
     const openEditDialog = React.useCallback((rowIndex) => {
         resetDialogWidgets(dialogSessionId);
-        beginDialogSession();
+        const sessionId = beginDialogSession();
         const row = rows[rowIndex] || {};
         const nextFormData = buildEmptyRow();
         columns.forEach((col) => {
@@ -10192,23 +10268,26 @@ const DialogTableWidget = ({ config }) => {
             if (row[key] !== undefined)
                 nextFormData[key] = row[key];
         });
+        seedDialogReduxValues(sessionId, nextFormData);
         setDialogMode('edit');
         setActiveRowIndex(rowIndex);
-        setFormData(nextFormData);
         setDialogOpen(true);
-    }, [rows, columns, buildEmptyRow, resetDialogWidgets, dialogSessionId, beginDialogSession]);
+    }, [
+        rows,
+        columns,
+        buildEmptyRow,
+        resetDialogWidgets,
+        dialogSessionId,
+        beginDialogSession,
+        seedDialogReduxValues,
+    ]);
     const closeDialog = React.useCallback(() => {
         const sessionToClear = dialogSessionId;
         setDialogOpen(false);
         setActiveRowIndex(null);
-        setFormData({});
         resetDialogWidgets(sessionToClear);
         setDialogSessionId(0);
     }, [dialogSessionId, resetDialogWidgets]);
-    const updateField = React.useCallback((columnKey, newValue) => {
-        setFormData((prev) => ({ ...prev, [columnKey]: newValue }));
-    }, []);
-    const membersWidgetId = widgetConfig['widget-id'];
     const dialogStoreValues = reactRedux.useSelector((state) => {
         if (dialogSessionId <= 0) {
             return {};
@@ -10217,30 +10296,22 @@ const DialogTableWidget = ({ config }) => {
         const row = {};
         columns.forEach((col) => {
             const k = col['column-key'];
-            const wid = `${membersWidgetId}-dlg-${dialogSessionId}-${k}`;
+            const wid = dialogFieldWidgetId(dialogSessionId, k);
             if (values[wid] !== undefined) {
                 row[k] = values[wid];
             }
         });
         return row;
-    }, (a, b) => JSON.stringify(a) === JSON.stringify(b));
-    const buildDialogRowValues = React.useCallback((storeSlice) => {
-        const row = { ...formData };
-        columns.forEach((col) => {
-            const k = col['column-key'];
-            if (storeSlice[k] !== undefined) {
-                row[k] = storeSlice[k];
-            }
-        });
-        return row;
-    }, [formData, columns]);
-    const dialogRowValues = React.useMemo(() => buildDialogRowValues(dialogStoreValues), [buildDialogRowValues, dialogStoreValues]);
-    const collectMergedRowPayload = React.useCallback(() => buildDialogRowValues(dialogStoreValues), [buildDialogRowValues, dialogStoreValues]);
+    });
+    const dialogRowValues = dialogStoreValues;
+    const dialogConditionValues = React.useMemo(() => buildDialogConditionValues(dialogRowValues, columns), [dialogRowValues, columns]);
+    const collectMergedRowPayload = React.useCallback(() => dialogStoreValues, [dialogStoreValues]);
     const finalizeDialogRowPayload = React.useCallback((raw) => {
+        const conditionValues = buildDialogConditionValues(raw, columns);
         const result = {};
         columns.forEach((col) => {
             const key = col['column-key'];
-            if (!shouldShowWidget(col['widget-data-options'], raw)) {
+            if (!shouldShowWidget(col['widget-data-options'], conditionValues)) {
                 return;
             }
             const val = raw[key];
@@ -10252,17 +10323,18 @@ const DialogTableWidget = ({ config }) => {
     }, [columns]);
     const saveDialog = React.useCallback(() => {
         const payload = collectMergedRowPayload();
+        const conditionValues = buildDialogConditionValues(payload, columns);
         let hasErrors = false;
         columns.forEach((col) => {
             const key = col['column-key'];
-            const cellWidgetId = dialogFieldWidgetId(key);
+            const cellWidgetId = dialogFieldWidgetId(dialogSessionId, key);
             const isColReadonly = isReadonly || col['widget-readonly'] === true;
             if (isColReadonly)
                 return;
-            if (!shouldShowWidget(col['widget-data-options'], payload))
+            if (!shouldShowWidget(col['widget-data-options'], conditionValues))
                 return;
             const cellValue = payload[key];
-            const isRequired = shouldRequireWidget(col['widget-data-options'], payload, col['widget-required']);
+            const isRequired = shouldRequireWidget(col['widget-data-options'], conditionValues, col['widget-required']);
             const validationErrors = validateWidget(cellValue, col['widget-data-validation'], isRequired);
             if (validationErrors && validationErrors.length > 0) {
                 hasErrors = true;
@@ -10299,11 +10371,32 @@ const DialogTableWidget = ({ config }) => {
             onChange(newRows);
             closeDialog();
         }
-    }, [collectMergedRowPayload, finalizeDialogRowPayload, dialogMode, onChange, rows, closeDialog, activeRowIndex, columns, dialogFieldWidgetId, isReadonly, dispatch]);
+    }, [
+        collectMergedRowPayload,
+        finalizeDialogRowPayload,
+        dialogMode,
+        onChange,
+        rows,
+        closeDialog,
+        activeRowIndex,
+        columns,
+        dialogSessionId,
+        dialogFieldWidgetId,
+        isReadonly,
+        dispatch,
+    ]);
     const deleteRow = React.useCallback((rowIndex) => {
-        const newRows = rows.filter((_, i) => i !== rowIndex);
-        onChange(newRows);
-    }, [rows, onChange]);
+        if (shouldSoftDeleteOnRemove) {
+            const newRows = [...rows];
+            newRows[rowIndex] = {
+                ...newRows[rowIndex],
+                edit_action: 'DELETE',
+            };
+            onChange(newRows);
+            return;
+        }
+        onChange(rows.filter((_, i) => i !== rowIndex));
+    }, [rows, onChange, shouldSoftDeleteOnRemove]);
     const getDisplayValue = React.useCallback((rowIndex, column) => {
         const key = column['column-key'];
         const cellValue = rows[rowIndex]?.[key];
@@ -10311,11 +10404,33 @@ const DialogTableWidget = ({ config }) => {
         if (cellValue === null || cellValue === undefined || cellValue === '')
             return '-';
         if (widgetType === 'select')
-            return null; // handled by SelectDisplayValue
+            return null;
         if (column['widget-data-format'])
             return formatValue(cellValue, column['widget-data-format'], column.widget);
         return String(cellValue);
     }, [rows]);
+    const dialogColumnSegments = React.useMemo(() => {
+        return buildDialogColumnSegments(columns)
+            .map((segment) => {
+            if (segment.type === 'single') {
+                if (!shouldShowWidget(segment.col['widget-data-options'], dialogConditionValues)) {
+                    return null;
+                }
+                return segment;
+            }
+            const visibleCols = segment.cols.filter((col) => shouldShowWidget(col['widget-data-options'], dialogConditionValues));
+            if (visibleCols.length === 0) {
+                return null;
+            }
+            return { type: 'group', group: segment.group, cols: visibleCols };
+        })
+            .filter((segment) => segment !== null);
+    }, [columns, dialogConditionValues]);
+    const renderDialogField = (col) => {
+        const key = col['column-key'];
+        const cellWidgetId = dialogFieldWidgetId(dialogSessionId, key);
+        return (jsxRuntimeExports.jsx(DialogTableField, { col: col, cellWidgetId: cellWidgetId, dialogConditionValues: dialogConditionValues, isReadonly: isReadonly }, `${dialogSessionId}-${key}`));
+    };
     const tableWidgetId = `dialog-table-widget-${widgetConfig['widget-id']}`;
     const columnSpan = widgetConfig['widget-column-span'] || 2;
     const minWidth = columnSpan * 200;
@@ -10343,37 +10458,40 @@ const DialogTableWidget = ({ 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: [visibleColumns.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) && (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' }))] }) }), jsxRuntimeExports.jsxs("tbody", { style: { backgroundColor: 'var(--owt-widget-table-body-bg, #FFFFFF)' }, children: [rows.length === 0 && (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsxs("td", { colSpan: visibleColumns.length + (((operations.edit || operations.remove) && !isReadonly) ? 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) => (jsxRuntimeExports.jsxs("tr", { style: {
-                                                borderBottom: '1px solid var(--owt-widget-table-row-divider, #E4E4E4)',
-                                                backgroundColor: row?.edit_action === 'DELETE'
-                                                    ? 'var(--owt-widget-table-deleted-row-bg, #FEE2E2)'
-                                                    : undefined,
-                                            }, children: [visibleColumns.map((col) => {
-                                                    const key = col['column-key'];
-                                                    const widgetType = col.widget || 'text';
-                                                    const displayValue = getDisplayValue(rowIndex, col);
-                                                    if (widgetType === 'select' && displayValue === null) {
-                                                        const displayConfig = {
-                                                            ...col,
-                                                            'widget-id': `${widgetConfig['widget-id']}-view-row-${rowIndex}-col-${key}`,
-                                                            'widget-label': '',
-                                                            'widget-readonly': true,
-                                                            'widget-data-path': undefined,
-                                                        };
-                                                        return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsx("div", { className: "text-sm", children: jsxRuntimeExports.jsx(SelectDisplayValue, { config: displayConfig, value: row?.[key] }) }) }, key));
-                                                    }
-                                                    return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsx("div", { className: "text-sm", children: displayValue }) }, key));
-                                                }), ((operations.edit || operations.remove) && !isReadonly) && (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", style: { minWidth: '120px' }, children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [operations.edit && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => openEditDialog(rowIndex), disabled: !isEnabled, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
-                                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
-                                                                    color: 'var(--owt-color-primary-dark, #F07B1A)',
-                                                                    backgroundColor: 'transparent',
-                                                                    border: 'none',
-                                                                }, children: translate('common.edit') || 'Edit' })), operations.remove && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: !isEnabled, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
-                                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
-                                                                    color: 'var(--owt-color-error, #B91C1C)',
-                                                                    backgroundColor: 'transparent',
-                                                                    border: 'none',
-                                                                }, children: translate('common.remove') || 'Delete' }))] }) }))] }, rowIndex)))] })] }) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-sm mt-1", style: { color: 'var(--owt-widget-error-color, #B91C1C)' }, children: error[0] }))] }), dialogOpen && (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 w-full mx-4", style: {
+                        }, 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: [visibleColumns.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) && (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' }))] }) }), jsxRuntimeExports.jsxs("tbody", { style: { backgroundColor: 'var(--owt-widget-table-body-bg, #FFFFFF)' }, children: [rows.length === 0 && (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsxs("td", { colSpan: visibleColumns.length + (((operations.edit || operations.remove) && !isReadonly) ? 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 cellStyle = getRowCellStyle(row?.edit_action);
+                                            return (jsxRuntimeExports.jsxs("tr", { style: {
+                                                    borderBottom: '1px solid var(--owt-widget-table-row-divider, #E4E4E4)',
+                                                    backgroundColor: row?.edit_action === 'DELETE'
+                                                        ? 'var(--owt-widget-table-deleted-row-bg, #FEE2E2)'
+                                                        : undefined,
+                                                }, children: [visibleColumns.map((col) => {
+                                                        const key = col['column-key'];
+                                                        const widgetType = col.widget || 'text';
+                                                        const displayValue = getDisplayValue(rowIndex, col);
+                                                        if (widgetType === 'select' && displayValue === null) {
+                                                            const displayConfig = {
+                                                                ...col,
+                                                                'widget-id': `${widgetConfig['widget-id']}-view-row-${rowIndex}-col-${key}`,
+                                                                'widget-label': '',
+                                                                'widget-readonly': true,
+                                                                'widget-data-path': undefined,
+                                                            };
+                                                            return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsx("div", { className: "text-sm", style: cellStyle, children: jsxRuntimeExports.jsx(SelectDisplayValue, { config: displayConfig, value: row?.[key] }) }) }, key));
+                                                        }
+                                                        return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsx("div", { className: "text-sm", style: cellStyle, children: displayValue }) }, key));
+                                                    }), ((operations.edit || operations.remove) && !isReadonly) && (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", style: { minWidth: '120px' }, children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [operations.edit && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => openEditDialog(rowIndex), disabled: !isEnabled, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                                                        borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                        color: 'var(--owt-color-primary-dark, #F07B1A)',
+                                                                        backgroundColor: 'transparent',
+                                                                        border: 'none',
+                                                                    }, children: translate('common.edit') || 'Edit' })), operations.remove && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: !isEnabled, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                                                        borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                        color: 'var(--owt-color-error, #B91C1C)',
+                                                                        backgroundColor: 'transparent',
+                                                                        border: 'none',
+                                                                    }, children: translate('common.remove') || 'Delete' }))] }) }))] }, rowIndex));
+                                        })] })] }) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-sm mt-1", style: { color: 'var(--owt-widget-error-color, #B91C1C)' }, children: error[0] }))] }), dialogOpen && (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 w-full mx-4", style: {
                         maxWidth: '900px',
                         backgroundColor: 'var(--owt-color-bg, #FFFFFF)',
                         borderRadius: 'var(--owt-widget-card-border-radius, 20px)',
@@ -10384,27 +10502,11 @@ const DialogTableWidget = ({ config }) => {
                                         cursor: 'pointer',
                                         fontSize: '20px',
                                         lineHeight: 1,
-                                    }, "aria-label": "Close", children: "\u00D7" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", style: { maxHeight: '70vh', overflow: 'auto' }, children: columns.map((col) => {
-                                const key = col['column-key'];
-                                if (!shouldShowWidget(col['widget-data-options'], dialogRowValues)) {
-                                    return null;
+                                    }, "aria-label": "Close", children: "\u00D7" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", style: { maxHeight: '70vh', overflow: 'auto' }, children: dialogColumnSegments.map((segment) => {
+                                if (segment.type === 'single') {
+                                    return renderDialogField(segment.col);
                                 }
-                                const widgetType = col.widget || 'text';
-                                const cellWidgetId = dialogFieldWidgetId(key);
-                                const initialValue = formData[key] ?? col['widget-data-default'];
-                                const fieldConfig = {
-                                    ...col,
-                                    widget: widgetType,
-                                    'widget-type': col['widget-type'] || 'input',
-                                    'widget-id': cellWidgetId,
-                                    'widget-label': col['widget-label'],
-                                    'widget-readonly': isReadonly || col['widget-readonly'] === true,
-                                    'widget-data-path': undefined,
-                                    'widget-data-default': initialValue,
-                                    'widget-data-options': undefined,
-                                    'widget-required': shouldRequireWidget(col['widget-data-options'], dialogRowValues, col['widget-required']),
-                                };
-                                return (jsxRuntimeExports.jsx("div", { className: "min-w-0", children: jsxRuntimeExports.jsx(WidgetRenderer, { config: fieldConfig, schemaData: { [cellWidgetId]: initialValue }, onValueChange: (_widgetId, newValue) => updateField(key, newValue) }) }, `${dialogSessionId}-${key}`));
+                                return (jsxRuntimeExports.jsx("div", { className: "md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4", children: segment.cols.map((col) => renderDialogField(col)) }, `${dialogSessionId}-group-${segment.group}`));
                             }) }, `dialog-fields-${dialogSessionId}`), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3 mt-6", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: closeDialog, 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)',