@feathery/react 2.32.1 → 2.34.0

package/dist/{fthry_index.C5ZHl-kt.js → fthry_index.DwDyjSm7.js}

@@ -1,10 +1,15 @@
-import { _ as __assign, j as jsx, a as jsxs, F as Fragment, b as __read, f as featheryDoc, c as fieldValues, s as stringifyWithNull, d as __values, e as __spreadArray } from './fthry_index.Bk7-v1ou.js';
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { _ as __rest, j as jsx, a as __assign, b as jsxs, F as Fragment, c as __read, f as featheryDoc, d as fieldValues, s as stringifyWithNull, e as __values, g as __spreadArray } from './fthry_index.DU4jPWLZ.js';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';
 
+function TrashIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? 16 : _b, _c = _a.height, height = _c === void 0 ? 16 : _c, props = __rest(_a, ["width", "height"]);
+    return (jsx("svg", __assign({ width: width, height: height, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2, xmlns: 'http://www.w3.org/2000/svg' }, props, { children: jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' }) })));
+}
+
 var colors = {
     white: '#ffffff',
     gray50: '#f9fafb',
@@ -16,7 +21,9 @@ var colors = {
     gray700: '#374151',
     gray900: '#111827',
     blue50: '#eff6ff',
-    blue700: '#1d4ed8'
+    blue700: '#1d4ed8',
+    red500: '#ef4444',
+    red600: '#dc2626'
 };
 var searchIconStyle = {
     width: '16px',
@@ -75,12 +82,9 @@ var emptyStateTextStyle = {
     fontWeight: '500',
     margin: 0
 };
-var searchContainerStyle = {
-    padding: '16px',
-    borderBottom: "1px solid ".concat(colors.gray200)
-};
 var searchWrapperStyle = {
-    position: 'relative'
+    position: 'relative',
+    flex: 1
 };
 var searchIconWrapperStyle = {
     position: 'absolute',
@@ -127,7 +131,8 @@ var theadStyle = {
 var thStyle = {
     padding: '12px 24px',
     fontWeight: '500',
-    userSelect: 'none'
+    userSelect: 'none',
+    whiteSpace: 'nowrap'
 };
 var rowStyle = {
     backgroundColor: colors.white,
@@ -235,6 +240,14 @@ var actionMenuItemStyle = {
         borderBottomRightRadius: '4px'
     }
 };
+var actionMenuSeparatorStyle = {
+    borderTop: "1px solid ".concat(colors.gray200),
+    margin: '4px 0'
+};
+var actionMenuDeleteItemStyle = __assign(__assign({}, actionMenuItemStyle), { color: colors.red500, '&:hover': {
+        backgroundColor: colors.gray100,
+        color: colors.red600
+    } });
 var actionIconButtonStyle = __assign(__assign({}, actionButtonStyle), { aspectRatio: 1, paddingLeft: 0, paddingRight: 0 });
 var actionContainerStyle = {
     display: 'flex',
@@ -259,6 +272,138 @@ var overflowSelectStyle = __assign(__assign({}, pageButtonStyle), { appearance:
         color: colors.gray900
     }, '&:focus': {
         outline: 'none'
+    } });
+// Editing styles
+var toolbarStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '16px',
+    borderBottom: "1px solid ".concat(colors.gray200),
+    gap: '12px'
+};
+var addRowButtonStyle = __assign(__assign({}, buttonStyle), { borderRadius: '8px', paddingLeft: '12px', paddingRight: '12px', whiteSpace: 'nowrap' });
+var clickToEditStyle = {
+    color: colors.gray400,
+    cursor: 'pointer',
+    userSelect: 'none',
+    fontSize: '14px'
+};
+var cellInputStyle = {
+    display: 'block',
+    width: '100%',
+    minWidth: 0,
+    maxWidth: '100%',
+    padding: '4px 8px',
+    border: "1px solid ".concat(colors.blue700),
+    borderRadius: '4px',
+    fontSize: '14px',
+    color: colors.gray900,
+    outline: 'none',
+    boxSizing: 'border-box',
+    resize: 'none',
+    overflowY: 'auto',
+    fontFamily: 'inherit',
+    lineHeight: 1.5
+};
+var editableCellContentStyle = {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: '8px'
+};
+var editableCellTextStyle = {
+    flex: 1,
+    minWidth: 0,
+    whiteSpace: 'pre-wrap',
+    overflowWrap: 'anywhere',
+    wordBreak: 'break-word',
+    lineHeight: 1.5
+};
+var editingCellContentStyle = {
+    flex: 1,
+    minWidth: 0,
+    position: 'relative',
+    alignSelf: 'stretch'
+};
+var editingCellSizerStyle = __assign(__assign({}, cellInputStyle), { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', wordBreak: 'break-word', visibility: 'hidden', pointerEvents: 'none' });
+var editingCellInputStyle = {
+    position: 'absolute',
+    inset: 0,
+    height: '100%'
+};
+var overflowIconStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '24px',
+    height: '24px',
+    borderRadius: '4px',
+    border: 'none',
+    backgroundColor: 'transparent',
+    color: colors.gray400,
+    cursor: 'pointer',
+    opacity: 0,
+    transition: 'opacity 0.15s',
+    flexShrink: 0,
+    padding: 0,
+    'tr:hover &, &[aria-expanded="true"]': {
+        opacity: 1
+    },
+    '&:hover': {
+        backgroundColor: colors.gray100,
+        color: colors.gray600
+    }
+};
+var deleteColumnStyle = {
+    width: '40px',
+    padding: '0 8px'
+};
+var deleteIconStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '28px',
+    height: '28px',
+    borderRadius: '4px',
+    border: 'none',
+    backgroundColor: 'transparent',
+    color: colors.gray400,
+    cursor: 'pointer',
+    opacity: 0,
+    transition: 'opacity 0.15s',
+    padding: 0,
+    'tr:hover &': {
+        opacity: 1
+    },
+    '&:hover': {
+        backgroundColor: colors.gray100,
+        color: colors.red500
+    }
+};
+var confirmPopoverStyle = {
+    position: 'fixed',
+    backgroundColor: colors.white,
+    border: "1px solid ".concat(colors.gray300),
+    borderRadius: '8px',
+    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    zIndex: 9999,
+    padding: '12px 16px'
+};
+var confirmTextStyle = {
+    margin: '0 0 12px 0',
+    fontSize: '14px',
+    fontWeight: '500',
+    color: colors.gray900
+};
+var confirmButtonRowStyle = {
+    display: 'flex',
+    gap: '8px',
+    justifyContent: 'flex-end'
+};
+var confirmCancelButtonStyle = __assign(__assign({}, buttonStyle), { borderRadius: '6px', paddingLeft: '12px', paddingRight: '12px', height: '32px' });
+var confirmDeleteButtonStyle = __assign(__assign({}, buttonStyle), { borderRadius: '6px', paddingLeft: '12px', paddingRight: '12px', height: '32px', backgroundColor: colors.red500, color: colors.white, border: "1px solid ".concat(colors.red500), '&:hover': {
+        backgroundColor: colors.red600,
+        color: colors.white
     } });
 
 function SearchIcon() {
@@ -271,7 +416,7 @@ function Search(_a) {
             e.preventDefault();
         }
     };
-    return (jsx("div", __assign({ css: searchContainerStyle }, { children: jsxs("div", __assign({ css: searchWrapperStyle }, { children: [jsx("div", __assign({ css: searchIconWrapperStyle }, { children: jsx(SearchIcon, {}) })), jsx("input", { type: 'text', css: searchInputStyle, placeholder: 'Search', value: searchQuery, onChange: function (e) { return onSearchChange(e.target.value); }, onKeyDown: handleKeyDown })] })) })));
+    return (jsxs("div", __assign({ css: searchWrapperStyle }, { children: [jsx("div", __assign({ css: searchIconWrapperStyle }, { children: jsx(SearchIcon, {}) })), jsx("input", { type: 'text', css: searchInputStyle, placeholder: 'Search', value: searchQuery, onChange: function (e) { return onSearchChange(e.target.value); }, onKeyDown: handleKeyDown })] })));
 }
 
 function SortIcon(_a) {
@@ -356,11 +501,11 @@ function MenuIcon() {
 }
 function ActionButtons(_a) {
     var _b, _c, _d;
-    var actions = _a.actions, rowIndex = _a.rowIndex, columnData = _a.columnData, fieldValuesProp = _a.fieldValues, onClick = _a.onClick, _e = _a.forceInlineButtons, forceInlineButtons = _e === void 0 ? false : _e, _f = _a.tableId, tableId = _f === void 0 ? '' : _f, _g = _a.buttonLoaders, buttonLoaders = _g === void 0 ? {} : _g;
+    var actions = _a.actions, rowIndex = _a.rowIndex, columnData = _a.columnData, fieldValuesProp = _a.fieldValues, onClick = _a.onClick, _e = _a.forceInlineButtons, forceInlineButtons = _e === void 0 ? false : _e, _f = _a.tableId, tableId = _f === void 0 ? '' : _f, _g = _a.buttonLoaders, buttonLoaders = _g === void 0 ? {} : _g, _h = _a.canDeleteRows, canDeleteRows = _h === void 0 ? false : _h, onDeleteRow = _a.onDeleteRow;
     if (actions.length === 0)
         return null;
-    var _h = __read(useState(false), 2), isMenuOpen = _h[0], setIsMenuOpen = _h[1];
-    var _j = __read(useState({ top: 0, left: 0 }), 2), menuPosition = _j[0], setMenuPosition = _j[1];
+    var _j = __read(useState(false), 2), isMenuOpen = _j[0], setIsMenuOpen = _j[1];
+    var _k = __read(useState({ top: 0, left: 0 }), 2), menuPosition = _k[0], setMenuPosition = _k[1];
     var containerRef = useRef(null);
     var menuRef = useRef(null);
     var menuButtonRef = useRef(null);
@@ -427,13 +572,17 @@ function ActionButtons(_a) {
                             alignItems: 'center',
                             justifyContent: 'center'
                         } }, { children: overflowLoader }))) : (jsx(MenuIcon, {})) })), isMenuOpen &&
-                    createPortal(jsx("div", __assign({ ref: menuRef, css: __assign(__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: actions.map(function (action, index) {
-                            var disabled = Object.keys(buttonLoaders).length > 0;
-                            return (jsx("button", __assign({ type: 'button', onClick: function (e) {
-                                    e.stopPropagation();
-                                    handleActionClick(action);
-                                }, css: actionMenuItemStyle, disabled: disabled }, { children: action.label }), index));
-                        }) })), featheryDoc().body)] })) : (actions.map(function (action, index) {
+                    createPortal(jsxs("div", __assign({ ref: menuRef, css: __assign(__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: [actions.map(function (action, index) {
+                                var disabled = Object.keys(buttonLoaders).length > 0;
+                                return (jsx("button", __assign({ type: 'button', onClick: function (e) {
+                                        e.stopPropagation();
+                                        handleActionClick(action);
+                                    }, css: actionMenuItemStyle, disabled: disabled }, { children: action.label }), index));
+                            }), canDeleteRows && onDeleteRow && (jsxs(Fragment, { children: [jsx("div", { css: actionMenuSeparatorStyle }), jsx("button", __assign({ type: 'button', onClick: function (e) {
+                                            e.stopPropagation();
+                                            setIsMenuOpen(false);
+                                            onDeleteRow(rowIndex);
+                                        }, css: actionMenuDeleteItemStyle }, { children: "Delete" }))] }))] })), featheryDoc().body)] })) : (actions.map(function (action, index) {
             var _a;
             var buttonKey = "".concat(tableId, "_").concat(rowIndex, "_").concat(action.label);
             var loader = (_a = buttonLoaders[buttonKey]) === null || _a === void 0 ? void 0 : _a.loader;
@@ -462,6 +611,153 @@ function EmptyState(_a) {
                 }, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 1.5 }, { children: jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' }) }))), jsx("p", __assign({ css: emptyStateTextStyle }, { children: hasSearchQuery ? 'No results found' : 'No data available' })), hasSearchQuery && (jsx("p", __assign({ css: __assign(__assign({}, emptyStateTextStyle), { fontSize: '14px', marginTop: '8px' }) }, { children: "Try adjusting your search query" })))] })));
 }
 
+function DeleteConfirm(_a) {
+    var anchorEl = _a.anchorEl, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.message, message = _b === void 0 ? 'Delete this row?' : _b, _c = _a.confirmLabel, confirmLabel = _c === void 0 ? 'Delete' : _c;
+    var popoverRef = useRef(null);
+    if (!anchorEl)
+        return null;
+    var anchorRect = anchorEl.getBoundingClientRect();
+    var top = anchorRect.bottom + 4;
+    var left = anchorRect.right;
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (popoverRef.current &&
+                !popoverRef.current.contains(event.target) &&
+                anchorEl &&
+                !anchorEl.contains(event.target)) {
+                onCancel();
+            }
+        };
+        var handleScroll = function () { return onCancel(); };
+        var handleKeyDown = function (event) {
+            if (event.key === 'Escape')
+                onCancel();
+        };
+        var doc = featheryDoc();
+        doc.addEventListener('mousedown', handleClickOutside);
+        doc.addEventListener('scroll', handleScroll, true);
+        doc.addEventListener('keydown', handleKeyDown);
+        return function () {
+            doc.removeEventListener('mousedown', handleClickOutside);
+            doc.removeEventListener('scroll', handleScroll, true);
+            doc.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [onCancel, anchorEl]);
+    return createPortal(jsxs("div", __assign({ ref: popoverRef, role: 'alertdialog', "aria-label": message, css: __assign(__assign({}, confirmPopoverStyle), { top: "".concat(top, "px"), left: "".concat(left, "px"), transform: 'translateX(-100%)' }) }, { children: [jsx("p", __assign({ css: confirmTextStyle }, { children: message })), jsxs("div", __assign({ css: confirmButtonRowStyle }, { children: [jsx("button", __assign({ type: 'button', css: confirmCancelButtonStyle, onClick: function (e) {
+                            e.stopPropagation();
+                            onCancel();
+                        } }, { children: "Cancel" })), jsx("button", __assign({ type: 'button', css: confirmDeleteButtonStyle, onClick: function (e) {
+                            e.stopPropagation();
+                            onConfirm();
+                        } }, { children: confirmLabel }))] }))] })), featheryDoc().body);
+}
+
+function OverflowIcon() {
+    return (jsxs("svg", __assign({ width: '16', height: '16', fill: 'currentColor', viewBox: '0 0 24 24' }, { children: [jsx("circle", { cx: '12', cy: '5', r: '2' }), jsx("circle", { cx: '12', cy: '12', r: '2' }), jsx("circle", { cx: '12', cy: '19', r: '2' })] })));
+}
+function EditableCell(_a) {
+    var _b;
+    var value = _a.value, fieldKey = _a.fieldKey, rowIndex = _a.rowIndex, onEdit = _a.onEdit, onClear = _a.onClear;
+    var _c = __read(useState(false), 2), isEditing = _c[0], setIsEditing = _c[1];
+    var _d = __read(useState(''), 2), editValue = _d[0], setEditValue = _d[1];
+    var _e = __read(useState(false), 2), isMenuOpen = _e[0], setIsMenuOpen = _e[1];
+    var _f = __read(useState(false), 2), showClearConfirm = _f[0], setShowClearConfirm = _f[1];
+    var _g = __read(useState({ top: 0, left: 0 }), 2), menuPosition = _g[0], setMenuPosition = _g[1];
+    var inputRef = useRef(null);
+    var menuButtonRef = useRef(null);
+    var menuRef = useRef(null);
+    var shouldSaveRef = useRef(true);
+    var closeClearConfirm = useCallback(function () { return setShowClearConfirm(false); }, []);
+    var displayValue = (_b = stringifyWithNull(value)) !== null && _b !== void 0 ? _b : '';
+    var isEmpty = displayValue === '';
+    useEffect(function () {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isEditing]);
+    useEffect(function () {
+        if (!isMenuOpen)
+            return;
+        var handleClickOutside = function (event) {
+            if (menuRef.current &&
+                !menuRef.current.contains(event.target) &&
+                menuButtonRef.current &&
+                !menuButtonRef.current.contains(event.target)) {
+                setIsMenuOpen(false);
+            }
+        };
+        var handleScroll = function () { return setIsMenuOpen(false); };
+        var doc = featheryDoc();
+        doc.addEventListener('mousedown', handleClickOutside);
+        doc.addEventListener('scroll', handleScroll, true);
+        return function () {
+            doc.removeEventListener('mousedown', handleClickOutside);
+            doc.removeEventListener('scroll', handleScroll, true);
+        };
+    }, [isMenuOpen]);
+    var startEditing = function () {
+        setEditValue(displayValue);
+        setIsEditing(true);
+        setIsMenuOpen(false);
+    };
+    var saveEdit = function () {
+        if (editValue !== displayValue) {
+            onEdit(fieldKey, rowIndex, editValue);
+        }
+        setIsEditing(false);
+    };
+    var cancelEdit = function () {
+        shouldSaveRef.current = false;
+        setIsEditing(false);
+    };
+    var handleBlur = function () {
+        if (shouldSaveRef.current)
+            saveEdit();
+        shouldSaveRef.current = true;
+    };
+    var handleKeyDown = function (e) {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            shouldSaveRef.current = false;
+            saveEdit();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            cancelEdit();
+        }
+        else if (e.key === 'Tab') {
+            shouldSaveRef.current = false;
+            saveEdit();
+        }
+    };
+    var handleMenuToggle = function (e) {
+        e.stopPropagation();
+        if (!isMenuOpen && menuButtonRef.current) {
+            var rect = menuButtonRef.current.getBoundingClientRect();
+            setMenuPosition({ top: rect.bottom + 4, left: rect.right });
+        }
+        setIsMenuOpen(!isMenuOpen);
+    };
+    if (isEditing) {
+        return (jsxs("div", __assign({ css: editingCellContentStyle }, { children: [jsx("div", __assign({ css: editingCellSizerStyle }, { children: "".concat(editValue, "\u200B") })), jsx("textarea", { ref: inputRef, value: editValue, onChange: function (e) { return setEditValue(e.target.value); }, onBlur: handleBlur, onKeyDown: handleKeyDown, css: __assign(__assign({}, cellInputStyle), editingCellInputStyle), onClick: function (e) { return e.stopPropagation(); } })] })));
+    }
+    if (isEmpty) {
+        return (jsx("span", __assign({ css: clickToEditStyle, onClick: startEditing }, { children: "Click to edit" })));
+    }
+    return (jsxs("div", __assign({ css: editableCellContentStyle }, { children: [jsx("span", __assign({ css: editableCellTextStyle }, { children: displayValue })), jsx("button", __assign({ ref: menuButtonRef, type: 'button', "aria-expanded": isMenuOpen, "aria-haspopup": 'menu', css: overflowIconStyle, onClick: handleMenuToggle }, { children: jsx(OverflowIcon, {}) })), isMenuOpen &&
+                createPortal(jsxs("div", __assign({ ref: menuRef, role: 'menu', css: __assign(__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: [jsx("button", __assign({ type: 'button', role: 'menuitem', css: actionMenuItemStyle, onClick: function (e) {
+                                e.stopPropagation();
+                                startEditing();
+                            } }, { children: "Edit Value" })), jsx("button", __assign({ type: 'button', role: 'menuitem', css: actionMenuItemStyle, onClick: function (e) {
+                                e.stopPropagation();
+                                setIsMenuOpen(false);
+                                setShowClearConfirm(true);
+                            } }, { children: "Clear Field" }))] })), featheryDoc().body), showClearConfirm && (jsx(DeleteConfirm, { anchorEl: menuButtonRef.current, message: 'Clear this field?', confirmLabel: 'Clear', onConfirm: function () {
+                    closeClearConfirm();
+                    onClear(fieldKey, rowIndex);
+                }, onCancel: closeClearConfirm }))] })));
+}
+
 // Utility functions for sorting strings as numbers and dates
 function tryParseNumber(value) {
     if (value === null || value === undefined || value === '')
@@ -652,14 +948,16 @@ function setCachedPage(elementId, page) {
     sessionStorage.setItem(key, page.toString());
 }
 function useTableData(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var element = _a.element, _m = _a.editMode, editMode = _m === void 0 ? false : _m;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var element = _a.element, _r = _a.editMode, editMode = _r === void 0 ? false : _r, _s = _a.dataVersion, dataVersion = _s === void 0 ? 0 : _s;
     var userColumns = ((_b = element.properties) === null || _b === void 0 ? void 0 : _b.columns) || [];
     var actions = (((_c = element.properties) === null || _c === void 0 ? void 0 : _c.actions) || []).filter(function (action) { return action.label && action.label.trim() !== ''; });
     var enableSearch = (_e = (_d = element.properties) === null || _d === void 0 ? void 0 : _d.search) !== null && _e !== void 0 ? _e : false;
     var enableSort = (_g = (_f = element.properties) === null || _f === void 0 ? void 0 : _f.sort) !== null && _g !== void 0 ? _g : false;
     var enableTranspose = (_j = (_h = element.properties) === null || _h === void 0 ? void 0 : _h.transpose) !== null && _j !== void 0 ? _j : false;
-    var paginationSetting = (_l = (_k = element.properties) === null || _k === void 0 ? void 0 : _k.pagination) !== null && _l !== void 0 ? _l : 0;
+    var enableEditing = (_l = (_k = element.properties) === null || _k === void 0 ? void 0 : _k.enable_editing) !== null && _l !== void 0 ? _l : false;
+    var enableAddDeleteRows = (_o = (_m = element.properties) === null || _m === void 0 ? void 0 : _m.add_delete_rows) !== null && _o !== void 0 ? _o : false;
+    var paginationSetting = (_q = (_p = element.properties) === null || _p === void 0 ? void 0 : _p.pagination) !== null && _q !== void 0 ? _q : 0;
     var rowsPerPage = typeof paginationSetting === 'number' && paginationSetting > 0
         ? Math.floor(paginationSetting)
         : 0;
@@ -672,19 +970,20 @@ function useTableData(_a) {
         }
         return cols;
     }, [editMode, userColumns]);
-    // Use example data in edit mode
+    // fieldValues is mutated outside React state, so we need dataVersion
+    // as a manual dirty flag to trigger re-snapshots
     var baseFieldValues = useMemo(function () {
         if (editMode) {
             return generateExampleData(baseColumns);
         }
-        return fieldValues;
-    }, [editMode, baseColumns, userColumns.length]);
-    var _o = __read(useState(''), 2), searchQuery = _o[0], setSearchQuery = _o[1];
-    var _p = __read(useState(null), 2), sortColumn = _p[0], setSortColumn = _p[1];
-    var _q = __read(useState('asc'), 2), sortDirection = _q[0], setSortDirection = _q[1];
-    var _r = __read(useState(function () {
+        return __assign({}, fieldValues);
+    }, [editMode, baseColumns, dataVersion]);
+    var _t = __read(useState(''), 2), searchQuery = _t[0], setSearchQuery = _t[1];
+    var _u = __read(useState(null), 2), sortColumn = _u[0], setSortColumn = _u[1];
+    var _v = __read(useState('asc'), 2), sortDirection = _v[0], setSortDirection = _v[1];
+    var _w = __read(useState(function () {
         return getCachedPage(element.id);
-    }), 2), currentPage = _r[0], setCurrentPage = _r[1];
+    }), 2), currentPage = _w[0], setCurrentPage = _w[1];
     var baseNumRows = useMemo(function () {
         return baseColumns.reduce(function (maxRows, column) {
             var fieldValue = baseFieldValues[column.field_key];
@@ -720,7 +1019,7 @@ function useTableData(_a) {
         enableSearch,
         baseFieldValues
     ]);
-    var _s = __read(useState(null), 2), sortedColumnIndex = _s[0], setSortedColumnIndex = _s[1];
+    var _x = __read(useState(null), 2), sortedColumnIndex = _x[0], setSortedColumnIndex = _x[1];
     var sortedBaseRowIndices = useMemo(function () {
         if (!enableTranspose || !enableSort || sortedColumnIndex === null) {
             return filteredBaseRowIndices;
@@ -760,7 +1059,7 @@ function useTableData(_a) {
         rowsPerPage,
         enablePagination
     ]);
-    var _t = useMemo(function () {
+    var _y = useMemo(function () {
         if (!enableTranspose || baseNumRows === 0) {
             return {
                 columns: baseColumns,
@@ -780,7 +1079,7 @@ function useTableData(_a) {
         baseFieldValues,
         baseNumRows,
         paginatedBaseRowIndices
-    ]), columns = _t.columns, activeFieldValues = _t.activeFieldValues, transposedRowIndices = _t.transposedRowIndices;
+    ]), columns = _y.columns, activeFieldValues = _y.activeFieldValues, transposedRowIndices = _y.transposedRowIndices;
     var numRows = useMemo(function () {
         return columns.reduce(function (maxRows, column) {
             var fieldValue = activeFieldValues[column.field_key];
@@ -961,6 +1260,8 @@ function useTableData(_a) {
         actions: actions,
         isTransposed: isTransposed,
         transposedRowIndices: transposedRowIndices,
+        enableEditing: enableEditing,
+        enableAddDeleteRows: enableAddDeleteRows,
         totalRows: totalRows,
         totalPages: totalPages,
         hasData: hasData,
@@ -970,24 +1271,162 @@ function useTableData(_a) {
     };
 }
 
+function useTableMutations(_a) {
+    var columns = _a.columns, updateFieldValues = _a.updateFieldValues, submitCustom = _a.submitCustom, editMode = _a.editMode, editModeFieldValues = _a.editModeFieldValues, enablePagination = _a.enablePagination, setCurrentPage = _a.setCurrentPage, setSearchQuery = _a.setSearchQuery, searchQuery = _a.searchQuery, onMutate = _a.onMutate;
+    var editModeFieldValuesRef = useRef(editModeFieldValues);
+    editModeFieldValuesRef.current = editModeFieldValues;
+    var getFieldArray = useCallback(function (fieldKey) {
+        var source = editMode ? editModeFieldValuesRef.current : fieldValues;
+        var val = source[fieldKey];
+        return Array.isArray(val) ? val : [];
+    }, [editMode]);
+    var handleAddRow = useCallback(function () {
+        var updates = {};
+        columns.forEach(function (col) {
+            var existing = getFieldArray(col.field_key);
+            updates[col.field_key] = __spreadArray([''], __read(existing), false);
+        });
+        // Clear search so the new row is visible
+        if (searchQuery)
+            setSearchQuery('');
+        // No submitCustom — new rows are provisional until the user edits a cell,
+        // avoiding empty-row noise in the backend
+        updateFieldValues(updates);
+        onMutate();
+        // Navigate to first page where the new row appears
+        if (enablePagination)
+            setCurrentPage(0);
+    }, [
+        columns,
+        getFieldArray,
+        updateFieldValues,
+        onMutate,
+        enablePagination,
+        setCurrentPage,
+        setSearchQuery,
+        searchQuery
+    ]);
+    var buildRowRemovalUpdates = useCallback(function (rowIndex) {
+        var updates = {};
+        columns.forEach(function (col) {
+            var existing = getFieldArray(col.field_key);
+            updates[col.field_key] = existing.filter(function (_, i) { return i !== rowIndex; });
+        });
+        return updates;
+    }, [columns, getFieldArray]);
+    var handleDeleteRow = useCallback(function (rowIndex) {
+        var updates = buildRowRemovalUpdates(rowIndex);
+        updateFieldValues(updates);
+        if (!editMode)
+            submitCustom(updates);
+        onMutate();
+    }, [
+        buildRowRemovalUpdates,
+        updateFieldValues,
+        submitCustom,
+        editMode,
+        onMutate
+    ]);
+    var handleRemoveRowLocal = useCallback(function (rowIndex) {
+        var updates = buildRowRemovalUpdates(rowIndex);
+        updateFieldValues(updates);
+        onMutate();
+    }, [buildRowRemovalUpdates, updateFieldValues, onMutate]);
+    var handleCellEdit = useCallback(function (fieldKey, rowIndex, newValue) {
+        var _a;
+        var existing = getFieldArray(fieldKey);
+        var updated = __spreadArray([], __read(existing), false);
+        updated[rowIndex] = newValue;
+        var values = (_a = {}, _a[fieldKey] = updated, _a);
+        updateFieldValues(values);
+        if (!editMode)
+            submitCustom(values);
+        onMutate();
+    }, [getFieldArray, updateFieldValues, submitCustom, editMode, onMutate]);
+    var handleCellClear = useCallback(function (fieldKey, rowIndex) {
+        handleCellEdit(fieldKey, rowIndex, '');
+    }, [handleCellEdit]);
+    return {
+        handleAddRow: handleAddRow,
+        handleDeleteRow: handleDeleteRow,
+        handleRemoveRowLocal: handleRemoveRowLocal,
+        handleCellEdit: handleCellEdit,
+        handleCellClear: handleCellClear
+    };
+}
+
 function applyTableStyles(responsiveStyles) {
     responsiveStyles.addTargets('table', 'thead', 'tbody', 'th', 'td', 'tr');
     return responsiveStyles;
 }
 function TableElement(_a) {
-    var element = _a.element, responsiveStyles = _a.responsiveStyles, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.editMode, editMode = _c === void 0 ? false : _c, _d = _a.buttonLoaders, buttonLoaders = _d === void 0 ? {} : _d;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.updateFieldValues, updateFieldValues = _c === void 0 ? function () { } : _c, _d = _a.submitCustom, submitCustom = _d === void 0 ? function () { } : _d, _e = _a.editMode, editMode = _e === void 0 ? false : _e, _f = _a.buttonLoaders, buttonLoaders = _f === void 0 ? {} : _f;
     var styles = useMemo(function () { return applyTableStyles(responsiveStyles); }, [responsiveStyles]);
-    var _e = useTableData({ element: element, editMode: editMode }), 
+    var _g = __read(useState(0), 2), dataVersion = _g[0], setDataVersion = _g[1];
+    var onMutate = useCallback(function () { return setDataVersion(function (v) { return v + 1; }); }, []);
+    var _h = useTableData({ element: element, editMode: editMode, dataVersion: dataVersion }), 
     // search
-    enableSearch = _e.enableSearch, searchQuery = _e.searchQuery, setSearchQuery = _e.setSearchQuery, 
+    enableSearch = _h.enableSearch, searchQuery = _h.searchQuery, setSearchQuery = _h.setSearchQuery, 
     // sort
-    enableSort = _e.enableSort, sortColumn = _e.sortColumn, sortDirection = _e.sortDirection, sortedColumnIndex = _e.sortedColumnIndex, handleSort = _e.handleSort, handleTransposedSort = _e.handleTransposedSort, 
+    enableSort = _h.enableSort, sortColumn = _h.sortColumn, sortDirection = _h.sortDirection, sortedColumnIndex = _h.sortedColumnIndex, handleSort = _h.handleSort, handleTransposedSort = _h.handleTransposedSort, 
     // pagination
-    enablePagination = _e.enablePagination, currentPage = _e.currentPage, setCurrentPage = _e.setCurrentPage, paginatedRowIndices = _e.paginatedRowIndices, rowsPerPage = _e.rowsPerPage, 
+    enablePagination = _h.enablePagination, currentPage = _h.currentPage, setCurrentPage = _h.setCurrentPage, paginatedRowIndices = _h.paginatedRowIndices, rowsPerPage = _h.rowsPerPage, 
+    // editing
+    enableEditing = _h.enableEditing, enableAddDeleteRows = _h.enableAddDeleteRows, 
     // data
-    columns = _e.columns, actions = _e.actions, isTransposed = _e.isTransposed, transposedRowIndices = _e.transposedRowIndices, totalRows = _e.totalRows, totalPages = _e.totalPages, hasData = _e.hasData, hasSearchResults = _e.hasSearchResults, activeFieldValues = _e.activeFieldValues, baseColumns = _e.baseColumns, baseFieldValues = _e.baseFieldValues;
-    var showEmptyState = !hasData || (hasData && !hasSearchResults);
-    return (jsx("div", __assign({ css: __assign(__assign({}, containerStyle), styles.getTarget('container')) }, { children: jsxs("div", __assign({ css: { minWidth: 'fit-content' } }, { children: [enableSearch && (jsx(Search, { searchQuery: searchQuery, onSearchChange: setSearchQuery })), showEmptyState ? (jsx(EmptyState, { hasSearchQuery: searchQuery.trim().length > 0 })) : (jsxs("table", __assign({ css: __assign(__assign({}, tableStyle), styles.getTarget('table')) }, { children: [!isTransposed && (jsx("thead", __assign({ css: theadStyle }, { children: jsxs("tr", { children: [jsx(SortHeader, { columns: columns, enableSort: enableSort, sortColumn: sortColumn, sortDirection: sortDirection, onSort: handleSort, styles: styles }), actions.length > 0 && (jsx("th", { scope: 'col', css: __assign(__assign(__assign({}, thStyle), { paddingLeft: 0 }), styles.getTarget('th')) }))] }) }))), jsxs("tbody", __assign({ css: styles.getTarget('tbody') }, { children: [paginatedRowIndices.map(function (rowIndex) {
+    columns = _h.columns, actions = _h.actions, isTransposed = _h.isTransposed, transposedRowIndices = _h.transposedRowIndices, totalRows = _h.totalRows, totalPages = _h.totalPages, hasData = _h.hasData, hasSearchResults = _h.hasSearchResults, activeFieldValues = _h.activeFieldValues, baseColumns = _h.baseColumns, baseFieldValues = _h.baseFieldValues;
+    var _j = useTableMutations({
+        columns: baseColumns,
+        updateFieldValues: updateFieldValues,
+        submitCustom: submitCustom,
+        editMode: editMode,
+        editModeFieldValues: activeFieldValues,
+        enablePagination: enablePagination,
+        setCurrentPage: setCurrentPage,
+        setSearchQuery: setSearchQuery,
+        searchQuery: searchQuery,
+        onMutate: onMutate
+    }), handleAddRow = _j.handleAddRow, handleDeleteRow = _j.handleDeleteRow, handleCellEdit = _j.handleCellEdit, handleCellClear = _j.handleCellClear;
+    var canEdit = enableEditing && !isTransposed;
+    var showAddRow = canEdit && enableAddDeleteRows;
+    var canDeleteRows = canEdit && enableAddDeleteRows;
+    var hasOverflowMenu = actions.length > 1;
+    var showStandaloneDeleteColumn = canDeleteRows && !hasOverflowMenu;
+    var _k = __read(useState(new Set()), 2), pendingAddRows = _k[0], setPendingAddRows = _k[1];
+    var pendingAddRowsRef = useRef(pendingAddRows);
+    pendingAddRowsRef.current = pendingAddRows;
+    var wrappedHandleCellEdit = useCallback(function (fieldKey, rowIndex, newValue) {
+        if (pendingAddRowsRef.current.has(rowIndex)) {
+            setPendingAddRows(function (prev) {
+                var next = new Set(prev);
+                next.delete(rowIndex);
+                return next;
+            });
+        }
+        handleCellEdit(fieldKey, rowIndex, newValue);
+    }, [handleCellEdit]);
+    var _l = __read(useState(null), 2), deleteRowIndex = _l[0], setDeleteRowIndex = _l[1];
+    var prevPageRef = useRef(currentPage);
+    if (prevPageRef.current !== currentPage) {
+        prevPageRef.current = currentPage;
+        setDeleteRowIndex(null);
+    }
+    var handleCancelDelete = useCallback(function () { return setDeleteRowIndex(null); }, []);
+    var deleteIconRefs = useRef(new Map());
+    var actionCellRefs = useRef(new Map());
+    var showEmptyState = !hasData || !hasSearchResults;
+    var showToolbar = enableSearch || showAddRow;
+    return (jsxs("div", __assign({ css: __assign(__assign({}, containerStyle), styles.getTarget('container')) }, { children: [showToolbar && (jsxs("div", __assign({ css: toolbarStyle }, { children: [enableSearch ? (jsx(Search, { searchQuery: searchQuery, onSearchChange: setSearchQuery })) : (jsx("div", {})), showAddRow && (jsx("button", __assign({ type: 'button', css: addRowButtonStyle, onClick: function () {
+                            setDeleteRowIndex(null);
+                            handleAddRow();
+                            setPendingAddRows(function (prev) {
+                                var next = new Set();
+                                next.add(0);
+                                prev.forEach(function (idx) { return next.add(idx + 1); });
+                                return next;
+                            });
+                        } }, { children: "+ Add Row" })))] }))), showEmptyState ? (jsx(EmptyState, { hasSearchQuery: searchQuery.trim().length > 0 })) : (jsx("div", __assign({ css: { overflowX: 'auto' } }, { children: jsxs("table", __assign({ css: __assign(__assign({}, tableStyle), styles.getTarget('table')) }, { children: [!isTransposed && (jsx("thead", __assign({ css: theadStyle }, { children: jsxs("tr", { children: [jsx(SortHeader, { columns: columns, enableSort: enableSort, sortColumn: sortColumn, sortDirection: sortDirection, onSort: handleSort, styles: styles }), actions.length > 0 && (jsx("th", { scope: 'col', css: __assign(__assign(__assign({}, thStyle), { paddingLeft: 0 }), styles.getTarget('th')) })), showStandaloneDeleteColumn && (jsx("th", { scope: 'col', css: __assign(__assign(__assign({}, thStyle), deleteColumnStyle), styles.getTarget('th')) }))] }) }))), jsxs("tbody", __assign({ css: styles.getTarget('tbody') }, { children: [paginatedRowIndices.map(function (rowIndex) {
+                                    var _a, _b;
                                     var rowData = {};
                                     if (!isTransposed) {
                                         columns.forEach(function (col) {
@@ -999,7 +1438,7 @@ function TableElement(_a) {
                                         });
                                     }
                                     var handleRowClick = function () {
-                                        if (!isTransposed) {
+                                        if (!isTransposed && !canEdit) {
                                             onClick({
                                                 rowIndex: rowIndex,
                                                 rowData: rowData
@@ -1017,7 +1456,6 @@ function TableElement(_a) {
                                                 var isSorted = sortedColumnIndex === rowIndex;
                                                 var isFirstColumn = colIndex === 0;
                                                 var isSecondColumn = colIndex === 1;
-                                                // In transposed mode, get the original row index from the column
                                                 var originalRowIndex = isTransposed && !isFirstColInTranspose
                                                     ? column.originalRowIndex
                                                     : undefined;
@@ -1038,7 +1476,6 @@ function TableElement(_a) {
                                                     }
                                                     else if (isTransposed &&
                                                         originalRowIndex !== undefined) {
-                                                        // In transposed mode, clicking a cell triggers with original row data
                                                         e.stopPropagation();
                                                         var originalRowData_1 = {};
                                                         baseColumns.forEach(function (col) {
@@ -1054,9 +1491,32 @@ function TableElement(_a) {
                                                         });
                                                     }
                                                 };
-                                                return (jsx(CellElement, __assign({ css: cellCss, onClick: handleCellClick }, (isFirstColInTranspose ? { scope: 'row' } : {}), { children: isFirstColInTranspose && isSortable ? (jsxs("div", __assign({ css: __assign(__assign({}, sortHeaderContentStyle), { justifyContent: 'space-between' }) }, { children: [jsx("span", { children: (_a = stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '' }), jsx("span", __assign({ css: sortIconContainerStyle }, { children: jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) }))] }))) : ((_b = stringifyWithNull(cellValue)) !== null && _b !== void 0 ? _b : '') }), colIndex));
-                                            }), !isTransposed && actions.length > 0 && (jsx("td", __assign({ css: __assign(__assign(__assign({}, cellStyle), { paddingLeft: 0 }), styles.getTarget('td')) }, { children: jsx(ActionButtons, { actions: actions, rowIndex: rowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, tableId: element.id, buttonLoaders: buttonLoaders }) })))] }), rowIndex));
-                                }), isTransposed && actions.length > 0 && (jsxs("tr", __assign({ css: __assign(__assign({}, rowStyle), styles.getTarget('tr')) }, { children: [jsx("th", { scope: 'row', css: __assign(__assign(__assign({}, thStyle), { backgroundColor: '#f9fafb', borderRight: '1px solid #e5e7eb', width: '1px', whiteSpace: 'nowrap' }), styles.getTarget('th')) }), transposedRowIndices.map(function (originalRowIndex, idx) { return (jsx("td", __assign({ css: __assign(__assign(__assign({}, cellStyle), (idx === 0 ? {} : { paddingLeft: 0 })), styles.getTarget('td')) }, { children: jsx("div", __assign({ css: { display: 'flex', justifyContent: 'flex-start' } }, { children: jsx(ActionButtons, { actions: actions, rowIndex: originalRowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, forceInlineButtons: true, tableId: element.id, buttonLoaders: buttonLoaders }) })) }), originalRowIndex)); })] })))] }))] }))), !showEmptyState && enablePagination && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })) })));
+                                                return (jsx(CellElement, __assign({ css: cellCss, onClick: handleCellClick }, (isFirstColInTranspose ? { scope: 'row' } : {}), { children: isFirstColInTranspose && isSortable ? (jsxs("div", __assign({ css: __assign(__assign({}, sortHeaderContentStyle), { justifyContent: 'space-between' }) }, { children: [jsx("span", { children: (_a = stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '' }), jsx("span", __assign({ css: sortIconContainerStyle }, { children: jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) }))] }))) : canEdit ? (jsx(EditableCell, { value: cellValue, fieldKey: column.field_key, rowIndex: rowIndex, onEdit: wrappedHandleCellEdit, onClear: handleCellClear })) : ((_b = stringifyWithNull(cellValue)) !== null && _b !== void 0 ? _b : '') }), colIndex));
+                                            }), !isTransposed && actions.length > 0 && (jsxs("td", __assign({ ref: function (el) {
+                                                    if (el)
+                                                        actionCellRefs.current.set(rowIndex, el);
+                                                    else
+                                                        actionCellRefs.current.delete(rowIndex);
+                                                }, css: __assign(__assign(__assign({}, cellStyle), { paddingLeft: 0 }), styles.getTarget('td')) }, { children: [jsx(ActionButtons, { actions: actions, rowIndex: rowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, tableId: element.id, buttonLoaders: buttonLoaders, canDeleteRows: canDeleteRows && hasOverflowMenu, onDeleteRow: function (ri) { return setDeleteRowIndex(ri); } }), hasOverflowMenu &&
+                                                        canDeleteRows &&
+                                                        deleteRowIndex === rowIndex && (jsx(DeleteConfirm, { anchorEl: (_a = actionCellRefs.current.get(rowIndex)) !== null && _a !== void 0 ? _a : null, onConfirm: function () {
+                                                            handleDeleteRow(rowIndex);
+                                                            setDeleteRowIndex(null);
+                                                        }, onCancel: handleCancelDelete }))] }))), showStandaloneDeleteColumn && (jsxs("td", __assign({ css: __assign(__assign({}, deleteColumnStyle), styles.getTarget('td')) }, { children: [jsx("button", __assign({ type: 'button', ref: function (el) {
+                                                            if (el)
+                                                                deleteIconRefs.current.set(rowIndex, el);
+                                                            else
+                                                                deleteIconRefs.current.delete(rowIndex);
+                                                        }, css: __assign(__assign({}, deleteIconStyle), (deleteRowIndex === rowIndex && {
+                                                            opacity: 1
+                                                        })), onClick: function (e) {
+                                                            e.stopPropagation();
+                                                            setDeleteRowIndex(deleteRowIndex === rowIndex ? null : rowIndex);
+                                                        } }, { children: jsx(TrashIcon, {}) })), deleteRowIndex === rowIndex && (jsx(DeleteConfirm, { anchorEl: (_b = deleteIconRefs.current.get(rowIndex)) !== null && _b !== void 0 ? _b : null, onConfirm: function () {
+                                                            handleDeleteRow(rowIndex);
+                                                            setDeleteRowIndex(null);
+                                                        }, onCancel: handleCancelDelete }))] })))] }), rowIndex));
+                                }), isTransposed && actions.length > 0 && (jsxs("tr", __assign({ css: __assign(__assign({}, rowStyle), styles.getTarget('tr')) }, { children: [jsx("th", { scope: 'row', css: __assign(__assign(__assign({}, thStyle), { backgroundColor: '#f9fafb', borderRight: '1px solid #e5e7eb', width: '1px', whiteSpace: 'nowrap' }), styles.getTarget('th')) }), transposedRowIndices.map(function (originalRowIndex, idx) { return (jsx("td", __assign({ css: __assign(__assign(__assign({}, cellStyle), (idx === 0 ? {} : { paddingLeft: 0 })), styles.getTarget('td')) }, { children: jsx("div", __assign({ css: { display: 'flex', justifyContent: 'flex-start' } }, { children: jsx(ActionButtons, { actions: actions, rowIndex: originalRowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, forceInlineButtons: true, tableId: element.id, buttonLoaders: buttonLoaders }) })) }), originalRowIndex)); })] })))] }))] })) }))), !showEmptyState && enablePagination && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })));
 }
 
 export { TableElement as default };