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

package/dist/hooks/useBaseWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBaseWidget.d.ts","sourceRoot":"","sources":["../../src/hooks/useBaseWidget.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAwBtE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,gBAAgB,CAAC;IACzB,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACxD;AAMD,eAAO,MAAM,aAAa,GAAI,SAAS,oBAAoB;;;;;;;;;;;yBAyO5C,GAAG,aAAY,OAAO;;uBAkWd,MAAM,EAAE;;;;;;;0BA1OpB,MAAM;;;CA+OhB,CAAC"}
+{"version":3,"file":"useBaseWidget.d.ts","sourceRoot":"","sources":["../../src/hooks/useBaseWidget.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAwBtE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,gBAAgB,CAAC;IACzB,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACxD;AAMD,eAAO,MAAM,aAAa,GAAI,SAAS,oBAAoB;;;;;;;;;;;yBAyO5C,GAAG,aAAY,OAAO;;uBAwWd,MAAM,EAAE;;;;;;;0BAhPpB,MAAM;;;CAqPhB,CAAC"}

package/dist/index.d.ts

@@ -1400,19 +1400,6 @@ interface DialogTableWidgetProps {
  * 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 }
- * }
  */
 declare const DialogTableWidget: ({ config }: DialogTableWidgetProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { createSlice, configureStore } from '@reduxjs/toolkit';
-import React, { useContext, createContext, useMemo, useEffect, useRef, useCallback, useState, useId } from 'react';
+import React, { useContext, createContext, useMemo, useEffect, useRef, useCallback, useState, useId, memo } from 'react';
 import { Provider, useDispatch, useSelector, useStore } from 'react-redux';
 import { z } from 'zod';
 import { createPortal } from 'react-dom';
@@ -2813,6 +2813,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 = 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 = useSelector((state) => {
@@ -2930,7 +2932,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 = useMemo(() => {
         if (!geoConfig) {
             return undefined;
@@ -10086,6 +10088,22 @@ const TableWidget = ({ config }) => {
 };
 
 const isUnsetRowValue = (value) => value === null || value === undefined || value === '';
+/** 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 });
@@ -10096,23 +10114,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 = memo(function DialogTableField({ col, cellWidgetId, dialogRowValues, isReadonly, }) {
+    const widgetType = col.widget || 'text';
+    const fieldConfig = 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'], dialogRowValues, col['widget-required']),
+        };
+    }, [col, cellWidgetId, dialogRowValues, 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 });
@@ -10122,23 +10146,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 = 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] = useState(false);
     const [dialogMode, setDialogMode] = useState('add');
     const [activeRowIndex, setActiveRowIndex] = useState(null);
-    const [formData, setFormData] = useState({});
-    /** Unique per dialog open so Redux widget ids don't reuse stale values across rows/add sessions */
     const dialogSessionRef = useRef(0);
     const [dialogSessionId, setDialogSessionId] = useState(0);
+    const membersWidgetId = widgetConfig['widget-id'];
     const addDialogTitle = translateConfig(widgetConfig['widget-data-dialog-title-add']) ||
         translate('table.addRecordDialog') ||
         'Add record';
@@ -10158,15 +10181,26 @@ const DialogTableWidget = ({ config }) => {
         });
         return emptyRow;
     }, [columns]);
-    const dialogFieldWidgetId = useCallback((columnKey) => `${widgetConfig['widget-id']}-dlg-${dialogSessionId}-${columnKey}`, [widgetConfig, dialogSessionId]);
+    const dialogFieldWidgetId = useCallback((sessionId, columnKey) => `${membersWidgetId}-dlg-${sessionId}-${columnKey}`, [membersWidgetId]);
     const resetDialogWidgets = 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, dialogFieldWidgetId, dispatch]);
+    const seedDialogReduxValues = useCallback((sessionId, rowData) => {
+        const seeds = {};
+        columns.forEach((col) => {
+            const key = col['column-key'];
+            if (rowData[key] !== undefined) {
+                seeds[dialogFieldWidgetId(sessionId, key)] = rowData[key];
+            }
         });
-    }, [columns, widgetConfig, dispatch]);
+        if (Object.keys(seeds).length > 0) {
+            dispatch(setValues(seeds));
+        }
+    }, [columns, dialogFieldWidgetId, dispatch]);
     const beginDialogSession = useCallback(() => {
         dialogSessionRef.current += 1;
         const nextSession = dialogSessionRef.current;
@@ -10175,15 +10209,21 @@ const DialogTableWidget = ({ config }) => {
     }, []);
     const openAddDialog = 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 = useCallback((rowIndex) => {
         resetDialogWidgets(dialogSessionId);
-        beginDialogSession();
+        const sessionId = beginDialogSession();
         const row = rows[rowIndex] || {};
         const nextFormData = buildEmptyRow();
         columns.forEach((col) => {
@@ -10191,23 +10231,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 = useCallback(() => {
         const sessionToClear = dialogSessionId;
         setDialogOpen(false);
         setActiveRowIndex(null);
-        setFormData({});
         resetDialogWidgets(sessionToClear);
         setDialogSessionId(0);
     }, [dialogSessionId, resetDialogWidgets]);
-    const updateField = useCallback((columnKey, newValue) => {
-        setFormData((prev) => ({ ...prev, [columnKey]: newValue }));
-    }, []);
-    const membersWidgetId = widgetConfig['widget-id'];
     const dialogStoreValues = useSelector((state) => {
         if (dialogSessionId <= 0) {
             return {};
@@ -10216,25 +10259,15 @@ 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 = 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 = useMemo(() => buildDialogRowValues(dialogStoreValues), [buildDialogRowValues, dialogStoreValues]);
-    const collectMergedRowPayload = useCallback(() => buildDialogRowValues(dialogStoreValues), [buildDialogRowValues, dialogStoreValues]);
+    });
+    const dialogRowValues = dialogStoreValues;
+    const collectMergedRowPayload = useCallback(() => dialogStoreValues, [dialogStoreValues]);
     const finalizeDialogRowPayload = useCallback((raw) => {
         const result = {};
         columns.forEach((col) => {
@@ -10254,7 +10287,7 @@ const DialogTableWidget = ({ config }) => {
         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;
@@ -10298,11 +10331,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 = 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 = useCallback((rowIndex, column) => {
         const key = column['column-key'];
         const cellValue = rows[rowIndex]?.[key];
@@ -10310,11 +10364,12 @@ 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 visibleDialogColumns = useMemo(() => columns.filter((col) => shouldShowWidget(col['widget-data-options'], dialogRowValues)), [columns, dialogRowValues]);
     const tableWidgetId = `dialog-table-widget-${widgetConfig['widget-id']}`;
     const columnSpan = widgetConfig['widget-column-span'] || 2;
     const minWidth = columnSpan * 200;
@@ -10342,37 +10397,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)',
@@ -10383,27 +10441,10 @@ 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) => {
+                                    }, "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: visibleDialogColumns.map((col) => {
                                 const key = col['column-key'];
-                                if (!shouldShowWidget(col['widget-data-options'], dialogRowValues)) {
-                                    return null;
-                                }
-                                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}`));
+                                const cellWidgetId = dialogFieldWidgetId(dialogSessionId, key);
+                                return (jsxRuntimeExports.jsx(DialogTableField, { col: col, cellWidgetId: cellWidgetId, dialogRowValues: dialogRowValues, isReadonly: isReadonly }, `${dialogSessionId}-${key}`));
                             }) }, `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)',