blixify-ui-web 1.2.180 → 1.2.182

package/lib/components/display/newTable/index.js

@@ -94,6 +94,8 @@ var iconButton_1 = require("../../action/iconButton");
 var textButton_1 = require("../../action/textButton");
 var collapse_1 = require("../../advanced/collapse");
 var popUp_1 = require("../../advanced/popUp");
+var formula_1 = require("../../data/formula");
+var builder_1 = require("../../data/formula/builder");
 var readModule_1 = require("../../data/readModule");
 var updateModule_1 = require("../../data/updateModule");
 var utils_1 = require("../../data/utils");
@@ -177,6 +179,8 @@ var ADD_COLUMN_TYPES = [
     { key: "textArea", label: "Long text" },
     { key: "markdown", label: "Markdown" },
     { key: "number", label: "Number" },
+    // INFO: a monday-style formula, built in the formula builder
+    { key: "formula", label: "Formula" },
     { key: "boolean", label: "Yes / No" },
     { key: "date", label: "Date" },
     { key: "list", label: "Single select" },
@@ -320,6 +324,9 @@ var NewTable = function (props) {
     // INFO: compute sticky left/right offsets for pinned columns.
     var DEFAULT_PIN_WIDTH = 150;
     var CHECKBOX_WIDTH = 66;
+    // INFO: room for the add row's confirm and cancel buttons plus cell padding.
+    // Only enforced when right-pinned columns need to know where to start.
+    var ACTION_COLUMN_WIDTH = 136;
     // INFO: keys that belong to grouped columns — these cannot be pinned.
     var groupedKeys = new Set();
     columns.forEach(function (col) {
@@ -362,19 +369,22 @@ var NewTable = function (props) {
     var _10 = (0, react_2.useState)(""), newColumnOptions = _10[0], setNewColumnOptions = _10[1];
     var _11 = (0, react_2.useState)(false), newColumnRequired = _11[0], setNewColumnRequired = _11[1];
     var _12 = (0, react_2.useState)(false), addingColumn = _12[0], setAddingColumn = _12[1];
+    // INFO: the formula as shown in the builder — column names, not ids
+    var _13 = (0, react_2.useState)(""), newColumnFormula = _13[0], setNewColumnFormula = _13[1];
+    var addColumnPopUpRef = (0, react_2.useRef)(null);
     // INFO: the column being changed — empty while the panel adds a new one
-    var _13 = (0, react_2.useState)(null), editingColumn = _13[0], setEditingColumn = _13[1];
+    var _14 = (0, react_2.useState)(null), editingColumn = _14[0], setEditingColumn = _14[1];
     //=====================================================================================
     // SECTION: Editable & Addable cells
     //=====================================================================================
-    var _14 = (0, react_2.useState)(""), editDataRowId = _14[0], setEditDataRowId = _14[1];
-    var _15 = (0, react_2.useState)(""), editDataHeaderKey = _15[0], setEditDataHeaderKey = _15[1];
+    var _15 = (0, react_2.useState)(""), editDataRowId = _15[0], setEditDataRowId = _15[1];
+    var _16 = (0, react_2.useState)(""), editDataHeaderKey = _16[0], setEditDataHeaderKey = _16[1];
     // INFO: an editable table used to mount an input in every cell — it read as a
     // form, and a row click always landed on a child input. Only the hovered cell
     // becomes its input now.
-    var _16 = (0, react_2.useState)(null), hoveredCell = _16[0], setHoveredCell = _16[1];
-    var _17 = (0, react_2.useState)(false), modalEditVisible = _17[0], setModalEditVisible = _17[1];
-    var _18 = (0, react_2.useState)([]), collapsedGroupIds = _18[0], setCollapsedGroupIds = _18[1];
+    var _17 = (0, react_2.useState)(null), hoveredCell = _17[0], setHoveredCell = _17[1];
+    var _18 = (0, react_2.useState)(false), modalEditVisible = _18[0], setModalEditVisible = _18[1];
+    var _19 = (0, react_2.useState)([]), collapsedGroupIds = _19[0], setCollapsedGroupIds = _19[1];
     // INFO: per-group scroll pagination. One sentinel element per band, observed
     // by a single IntersectionObserver that fires props.onGroupLoadMore when a
     // band's sentinel scrolls into view. The debounce guard stops repeat fires
@@ -390,25 +400,25 @@ var NewTable = function (props) {
     var lastSelectedRowRef = (0, react_2.useRef)(null);
     var dragSelectRef = (0, react_2.useRef)(null);
     var suppressNextClickRef = (0, react_2.useRef)(false);
-    var _19 = (0, react_2.useState)(false), isDragSelecting = _19[0], setIsDragSelecting = _19[1];
-    var _20 = (0, react_2.useState)(0), copiedCount = _20[0], setCopiedCount = _20[1];
-    var _21 = (0, react_2.useState)({}), editDataValue = _21[0], setEditDataValue = _21[1];
-    var _22 = (0, react_2.useState)(false), editDataIsLoading = _22[0], setEditDataIsLoading = _22[1];
+    var _20 = (0, react_2.useState)(false), isDragSelecting = _20[0], setIsDragSelecting = _20[1];
+    var _21 = (0, react_2.useState)(0), copiedCount = _21[0], setCopiedCount = _21[1];
+    var _22 = (0, react_2.useState)({}), editDataValue = _22[0], setEditDataValue = _22[1];
+    var _23 = (0, react_2.useState)(false), editDataIsLoading = _23[0], setEditDataIsLoading = _23[1];
     // INFO: true while the empty bottom row is being filled in; the row itself is
     // always there in an addable table
-    var _23 = (0, react_2.useState)(false), addData = _23[0], setAddData = _23[1];
-    var _24 = (0, react_2.useState)({}), addDataValue = _24[0], setAddDataValue = _24[1];
+    var _24 = (0, react_2.useState)(false), addData = _24[0], setAddData = _24[1];
+    var _25 = (0, react_2.useState)({}), addDataValue = _25[0], setAddDataValue = _25[1];
     // INFO: bumped after each saved row, so the next one starts with fresh
     // inputs and its first cell takes the focus
-    var _25 = (0, react_2.useState)(0), addRowKey = _25[0], setAddRowKey = _25[1];
-    var _26 = (0, react_2.useState)({}), referencesOptions = _26[0], setReferencesOptions = _26[1];
+    var _26 = (0, react_2.useState)(0), addRowKey = _26[0], setAddRowKey = _26[1];
+    var _27 = (0, react_2.useState)({}), referencesOptions = _27[0], setReferencesOptions = _27[1];
     // INFO: seeded options sit under the local map so a cell's own search
     // results still win per key
     var mergedReferencesOptions = __assign(__assign({}, ((_l = props.referencesOptions) !== null && _l !== void 0 ? _l : {})), referencesOptions);
-    var _27 = (0, react_2.useState)({}), referencesDetails = _27[0], setReferencesDetails = _27[1];
-    var _28 = (0, react_2.useState)(false), referenceLoading = _28[0], setReferenceLoading = _28[1];
+    var _28 = (0, react_2.useState)({}), referencesDetails = _28[0], setReferencesDetails = _28[1];
+    var _29 = (0, react_2.useState)(false), referenceLoading = _29[0], setReferenceLoading = _29[1];
     // INFO: measured pixel widths for pinned columns without an explicit width.
-    var _29 = (0, react_2.useState)({}), measuredPinWidths = _29[0], setMeasuredPinWidths = _29[1];
+    var _30 = (0, react_2.useState)({}), measuredPinWidths = _30[0], setMeasuredPinWidths = _30[1];
     var editDataValueRef = (0, react_2.useRef)({});
     var editDataRowIdRef = (0, react_2.useRef)("");
     var editDataHeaderKeyRef = (0, react_2.useRef)("");
@@ -1033,7 +1043,7 @@ var NewTable = function (props) {
     // resize is a per-viewer preference and there is no storage for it yet.
     // Tailwind cannot emit a runtime w-[Npx], so this drives an inline style and
     // wins over the col.width class.
-    var _30 = (0, react_2.useState)({}), columnWidths = _30[0], setColumnWidths = _30[1];
+    var _31 = (0, react_2.useState)({}), columnWidths = _31[0], setColumnWidths = _31[1];
     var resizeRef = (0, react_2.useRef)(null);
     // INFO: a consumer may deliberately set a column narrower than the default
     // floor (a 40px icon column, say) — never force it wider than it was asked to
@@ -1099,7 +1109,7 @@ var NewTable = function (props) {
         });
     };
     var renderAddColumnPanel = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         // INFO: a caller that renders its own form keeps full control; the
         // built-in one only appears when it hands over onAddColumn instead
         if ((_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.renderAddColumnElements)
@@ -1114,8 +1124,9 @@ var NewTable = function (props) {
             react_2.default.createElement(textInput_1.TextInput, { id: "newColumnName", type: "text", label: "Column name", placeholder: "Order Date", value: newColumnName, darkMode: props.darkMode, onChange: function (event) { var _a, _b; return setNewColumnName((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""); } }),
             !editingColumn && (react_2.default.createElement("div", { className: "-mt-2" },
                 react_2.default.createElement("p", { className: "text-xs text-gray-500" }, derivedId ? (react_2.default.createElement(react_2.default.Fragment, null,
-                    "Saved on each record as",
-                    " ",
+                    newColumnType === "formula"
+                        ? "Column id "
+                        : "Saved on each record as ",
                     react_2.default.createElement("span", { className: "font-mono font-medium" }, derivedId),
                     taken ? " — already used by another column" : "")) : ("The field id is generated from the name")))),
             react_2.default.createElement(select_1.Select, { id: "newColumnType", label: "Type", value: newColumnType, darkMode: props.darkMode, options: editingColumn
@@ -1123,7 +1134,16 @@ var NewTable = function (props) {
                         return (0, exports.handleGetEditableColumnTypes)(editingColumn.type).includes(eachType.key);
                     })
                     : ADD_COLUMN_TYPES, disabled: !!editingColumn &&
-                    (0, exports.handleGetEditableColumnTypes)(editingColumn.type).length < 2, portalDropdown: true, onChange: function (value) { return setNewColumnType(value); } }),
+                    (0, exports.handleGetEditableColumnTypes)(editingColumn.type).length < 2, portalDropdown: true, onChange: function (value) {
+                    var _a;
+                    setNewColumnType(value);
+                    // INFO: the formula builder needs a modal's room, as monday opens
+                    // its builder — the popup hands over what was typed and closes
+                    if (value === "formula" && !addColumnModal) {
+                        (_a = addColumnPopUpRef.current) === null || _a === void 0 ? void 0 : _a.handleOnClose();
+                        setAddColumnModal("new");
+                    }
+                } }),
             REFERENCE_TYPES.includes(newColumnType) &&
                 ((_c = props.advSettings) === null || _c === void 0 ? void 0 : _c.renderReferenceSpaceOptions) && (react_2.default.createElement(react_2.default.Fragment, null,
                 react_2.default.createElement(select_1.Select, { id: "newColumnRefSpace", label: "Reference endpoint", value: newColumnRefSpace, darkMode: props.darkMode, portalDropdown: true, options: (_d = props.advSettings.renderReferenceSpaceOptions()) !== null && _d !== void 0 ? _d : [], onChange: function (value) {
@@ -1141,13 +1161,14 @@ var NewTable = function (props) {
                         return eachOption.includes(",");
                     }), onChange: function (event) { var _a, _b; return setNewColumnOptions((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""); } })),
             ASSET_TYPES.includes(newColumnType) && (react_2.default.createElement("p", { className: "-mt-2 text-xs text-gray-500" }, "Uploads are stored against this space automatically.")),
-            react_2.default.createElement(checkbox_1.Checkbox, { id: "newColumnRequired", 
+            newColumnType === "formula" && (react_2.default.createElement(builder_1.FormulaBuilder, { value: newColumnFormula, schema: handleGetFormulaSchema(), columnId: editingColumn === null || editingColumn === void 0 ? void 0 : editingColumn.id, previewRow: (_j = props.data) === null || _j === void 0 ? void 0 : _j[0], previewDisplayRow: (_k = props.spaceData) === null || _k === void 0 ? void 0 : _k[0], darkMode: props.darkMode, onChange: setNewColumnFormula })),
+            newColumnType !== "formula" && (react_2.default.createElement(checkbox_1.Checkbox, { id: "newColumnRequired", 
                 // INFO: the checkbox itself is not a required field — without this it
                 // renders "Required *", which reads as a validation error on a toggle
                 optional: true, darkMode: props.darkMode, itemList: [{ key: "required", label: "Required" }], selectItemList: newColumnRequired ? ["required"] : [], onChange: function (items) {
                     return setNewColumnRequired(items.includes("required"));
-                } }),
-            newColumnRequired && !editingColumn && (react_2.default.createElement("p", { className: "-mt-3 text-xs text-gray-500" }, "Rows already in this table have no value for it yet.")),
+                } })),
+            newColumnType !== "formula" && newColumnRequired && !editingColumn && (react_2.default.createElement("p", { className: "-mt-3 text-xs text-gray-500" }, "Rows already in this table have no value for it yet.")),
             react_2.default.createElement("div", { className: "flex flex-row justify-end gap-x-2" },
                 react_2.default.createElement(button_1.Button, { type: "light", text: "Cancel", onClick: function () { return handleAddColumnModal(""); } }),
                 react_2.default.createElement(button_1.Button, { type: "normal", text: editingColumn
@@ -1174,6 +1195,9 @@ var NewTable = function (props) {
         setNewColumnRefLabel((_f = schema.referenceLabel) !== null && _f !== void 0 ? _f : "");
         setNewColumnOptions(handleJoinOptions((_g = schema.listSelection) !== null && _g !== void 0 ? _g : []));
         setNewColumnRequired(!schema.optional);
+        setNewColumnFormula(schema.type === "formula"
+            ? (0, formula_1.handleGetFormulaDisplay)(schema, handleGetFormulaSchema())
+            : "");
         setAddColumnModal(columnId);
     };
     var handleAddColumnModal = function (id) {
@@ -1186,6 +1210,7 @@ var NewTable = function (props) {
             setNewColumnRefLabel("");
             setNewColumnOptions("");
             setNewColumnRequired(false);
+            setNewColumnFormula("");
         }
     };
     // INFO: the stored field id is derived from what the user types rather than
@@ -1205,11 +1230,36 @@ var NewTable = function (props) {
     var handleColumnIdTaken = function (id) {
         return flatColumns.some(function (eachColumn) { return eachColumn.key === id; });
     };
+    // INFO: every column a formula may read. The full model when the caller
+    // gives it — hidden columns are still on the row — else the shown columns.
+    var handleGetFormulaSchema = function () {
+        var _a, _b;
+        var schema = (_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.getSchema) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (schema)
+            return schema;
+        return flatColumns
+            .filter(function (eachColumn) { return eachColumn.key !== "update"; })
+            .map(function (eachColumn) {
+            var _a, _b, _c, _d;
+            return (_c = (_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.getColumnSchema) === null || _b === void 0 ? void 0 : _b.call(_a, eachColumn.key)) !== null && _c !== void 0 ? _c : {
+                id: eachColumn.key,
+                name: eachColumn.title,
+                type: (_d = eachColumn.type) !== null && _d !== void 0 ? _d : "string",
+            };
+        });
+    };
     // INFO: a reference with no target resolves nothing, so it cannot be saved
     // half-built. Everything else is complete with a name and a type.
     var handleIsNewColumnReady = function () {
         if (REFERENCE_TYPES.includes(newColumnType))
             return !!newColumnRefSpace && !!newColumnRefLabel;
+        // INFO: an illegal formula would show "Error" in every row
+        if (newColumnType === "formula") {
+            if (!newColumnFormula.trim())
+                return false;
+            var schema = handleGetFormulaSchema();
+            return !(0, formula_1.handleValidateFormula)((0, formula_1.handleFormulaToStorage)(newColumnFormula, schema), schema);
+        }
         return true;
     };
     var handleSubmitNewColumn = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -1249,6 +1299,10 @@ var NewTable = function (props) {
                             .split(",")
                             .map(function (eachOption) { return eachOption.trim(); })
                             .filter(Boolean);
+                    if (newColumnType === "formula") {
+                        column.formulaExpression = (0, formula_1.handleFormulaToStorage)(newColumnFormula.trim(), handleGetFormulaSchema());
+                        column.optional = true;
+                    }
                     return [4 /*yield*/, ((_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.onAddColumn) === null || _b === void 0 ? void 0 : _b.call(_a, column))];
                 case 4:
                     _c.sent();
@@ -1316,6 +1370,10 @@ var NewTable = function (props) {
                         delete column_1.listSelectionColour;
                         delete column_1.listSelectionLabel;
                     }
+                    if (newColumnType === "formula") {
+                        column_1.formulaExpression = (0, formula_1.handleFormulaToStorage)(newColumnFormula.trim(), handleGetFormulaSchema());
+                        column_1.optional = true;
+                    }
                     return [4 /*yield*/, ((_d = (_c = props.advSettings) === null || _c === void 0 ? void 0 : _c.onEditColumn) === null || _d === void 0 ? void 0 : _d.call(_c, column_1))];
                 case 2:
                     _e.sent();
@@ -1603,10 +1661,11 @@ var NewTable = function (props) {
             borderClass = "".concat(pinBase, " ").concat(afterBase, " after:right-0 ").concat(afterColor);
         }
         else if (rightIdx >= 0) {
-            // INFO: offset = sum of widths of all right-pinned columns after this one
+            // INFO: offset = sum of widths of all right-pinned columns after this one,
+            // starting past the Actions column, which is pinned at the very edge
             var right = rightPinned
                 .slice(rightIdx + 1)
-                .reduce(function (sum, key) { return sum + parsePinWidth(key); }, 0);
+                .reduce(function (sum, key) { return sum + parsePinWidth(key); }, handleShowsActionColumn() ? ACTION_COLUMN_WIDTH : 0);
             var colWidth = parsePinWidth(colKey);
             var col = flatColumns.find(function (c) { return c.key === colKey; });
             var hasFixedWidth = !!(col === null || col === void 0 ? void 0 : col.width) || !!measuredPinWidths[colKey];
@@ -1743,9 +1802,36 @@ var NewTable = function (props) {
             react_2.default.createElement(outline_1.ChatBubbleOvalLeftEllipsisIcon, { className: "h-5 w-5", "aria-hidden": "true" }))) : null;
     };
     var handleShowsActionColumn = function () { var _a; return !!((_a = props.deleteable) === null || _a === void 0 ? void 0 : _a.active) || (addData && handleValidateAddColumns()); };
+    /**
+     * INFO: the table is max-content wide inside a horizontal scroller, so a
+     * last column in normal flow sits off screen on any wide table — the add
+     * row's tick and cross were only reachable by scrolling to the far right,
+     * under the scroll shadow. Pinned to the right edge, every cell of the
+     * column carries a background so the scrolling cells pass beneath it.
+     */
+    var handleGetActionCellPin = function (isHeader, rowBg, isHoverable) {
+        var bg = isHeader ? tableHeaderBgColor : (rowBg !== null && rowBg !== void 0 ? rowBg : bgColor);
+        var hoverClass = !isHeader && isHoverable
+            ? props.darkMode
+                ? "group-hover:bg-gray-700"
+                : "group-hover:bg-gray-100"
+            : "";
+        var divider = props.darkMode
+            ? "before:bg-gray-700"
+            : "before:bg-gray-200";
+        return {
+            className: "sticky right-0 z-[3] ".concat(bg, " ").concat(hoverClass, " before:absolute before:inset-y-0 before:left-0 before:w-px before:pointer-events-none ").concat(divider),
+            // INFO: right-pinned data columns offset by this width, so it has to be
+            // exact while they exist
+            style: rightPinned.length > 0
+                ? { width: ACTION_COLUMN_WIDTH, minWidth: ACTION_COLUMN_WIDTH }
+                : undefined,
+        };
+    };
     var renderActionColumnHeader = function () {
         if (handleShowsActionColumn()) {
-            return (react_2.default.createElement("th", { key: "actions", className: "".concat(cellPadding, " text-left text-xs font-semibold uppercase tracking-wide") }, "Actions"));
+            var pin = handleGetActionCellPin(true);
+            return (react_2.default.createElement("th", { key: "actions", className: "".concat(cellPadding, " text-left text-xs font-semibold uppercase tracking-wide ").concat(pin.className), style: pin.style }, "Actions"));
         }
         return null;
     };
@@ -1777,14 +1863,15 @@ var NewTable = function (props) {
     // — or the body loses a column exactly while the add row is on screen and the
     // confirm buttons appear under the wrong heading. Mirrors
     // renderActionColumnHeader's condition rather than restating it loosely.
-    var renderActionColumnCell = function (rowId) {
+    var renderActionColumnCell = function (rowId, rowBg, isHoverable) {
         var _a;
         if (!handleShowsActionColumn())
             return null;
+        var pin = handleGetActionCellPin(false, rowBg, isHoverable);
         if (((_a = props.deleteable) === null || _a === void 0 ? void 0 : _a.active) && !addData) {
-            return (react_2.default.createElement("td", { className: "".concat(cellPadding, " text-sm") }, renderDeleteButton(rowId)));
+            return (react_2.default.createElement("td", { className: "".concat(cellPadding, " text-sm ").concat(pin.className), style: pin.style }, renderDeleteButton(rowId)));
         }
-        return react_2.default.createElement("td", { className: "".concat(cellPadding, " text-sm") });
+        return (react_2.default.createElement("td", { className: "".concat(cellPadding, " text-sm ").concat(pin.className), style: pin.style }));
     };
     var renderAddDataRow = function () {
         var filteredCols = handleGetAddColumns();
@@ -1799,10 +1886,10 @@ var NewTable = function (props) {
                 return react_2.default.createElement("td", { key: ds.id + String(index), "data-add-cell": ds.id });
             }),
             renderAddColumnCell(),
-            react_2.default.createElement("td", { className: "".concat(cellPadding, " text-sm") },
+            react_2.default.createElement("td", { className: "".concat(cellPadding, " text-sm ").concat(handleGetActionCellPin(false).className), style: handleGetActionCellPin(false).style },
                 react_2.default.createElement("div", { className: "flex flex-row gap-2" },
-                    react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_2.CheckIcon, { className: "w-5 h-5 text-green-500" }), onClick: function () { return handleCommitAdd(false); } }),
-                    react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_2.XMarkIcon, { className: "h-5 w-5 text-red-500" }), onClick: handleCancelAdd })))));
+                    react_2.default.createElement(iconButton_1.IconButton, { testId: "table-add-row-confirm", icon: react_2.default.createElement(solid_2.CheckIcon, { className: "w-5 h-5 text-green-500" }), onClick: function () { return handleCommitAdd(false); } }),
+                    react_2.default.createElement(iconButton_1.IconButton, { testId: "table-add-row-cancel", icon: react_2.default.createElement(solid_2.XMarkIcon, { className: "h-5 w-5 text-red-500" }), onClick: handleCancelAdd })))));
     };
     // INFO: the empty row at the bottom of an addable table — clicking any of
     // its cells starts a new record there, as the next empty row of a
@@ -1813,11 +1900,11 @@ var NewTable = function (props) {
             return null;
         if (((_c = (_b = props.selectedIds) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0 || props.selectAll)
             return null;
-        return (react_2.default.createElement("tr", { "data-testid": "table-add-row", className: "cursor-text ".concat(props.darkMode ? "hover:bg-gray-800" : "hover:bg-gray-50") },
+        return (react_2.default.createElement("tr", { "data-testid": "table-add-row", className: "group cursor-text ".concat(props.darkMode ? "hover:bg-gray-800" : "hover:bg-gray-50") },
             props.checkbox && react_2.default.createElement("td", { className: "w-10 ".concat(cellPadding) }),
             handleGetAddColumns().map(function (col, index) { return (react_2.default.createElement("td", { key: col.key, "data-add-cell": col.key, className: "".concat(cellPadding, " h-10"), onClick: function () { return handleStartAdd(col.key); } }, index === 0 && (react_2.default.createElement(solid_1.PlusIcon, { className: "h-4 w-4 ".concat(props.darkMode ? "text-gray-500" : "text-gray-400"), "aria-hidden": "true" })))); }),
             renderAddColumnCell(),
-            handleShowsActionColumn() && react_2.default.createElement("td", { className: cellPadding })));
+            handleShowsActionColumn() && (react_2.default.createElement("td", { className: "".concat(cellPadding, " ").concat(handleGetActionCellPin(false).className, " ").concat(props.darkMode ? "group-hover:bg-gray-800" : "group-hover:bg-gray-50"), style: handleGetActionCellPin(false).style }))));
     };
     var renderSelectAll = function () {
         var _a, _b;
@@ -2038,7 +2125,7 @@ var NewTable = function (props) {
                 }, cell.props.children, renderActivityButton(row.id, true));
             }),
             renderAddColumnCell(),
-            renderActionColumnCell(row.id)));
+            renderActionColumnCell(row.id, rowBgClass, isRowHoverable)));
     };
     // INFO: with groups, each group is a tinted band row (chevron, title, count)
     // followed by its member rows; collapsing a band hides them. Without groups,
@@ -2225,14 +2312,14 @@ var NewTable = function (props) {
             var filterColumnEnabled = utils_1.supportedAQList.includes((_b = col.type) !== null && _b !== void 0 ? _b : "");
             if (sortColumnEnabled && (advSettings === null || advSettings === void 0 ? void 0 : advSettings.sortEnabled)) {
                 if (col.key !== ((_c = advSettings.sortId) === null || _c === void 0 ? void 0 : _c.sortId)) {
-                    sortIcon = (react_2.default.createElement(solid_2.ArrowsUpDownIcon, { className: sortClassname, onClick: function () { return handleSort(col.key, "new"); } }));
+                    sortIcon = (react_2.default.createElement(solid_2.ArrowsUpDownIcon, { "data-testid": "table-column-sort-".concat(col.key), className: sortClassname, onClick: function () { return handleSort(col.key, "new"); } }));
                 }
                 else if (col.key === advSettings.sortId.sortId) {
                     if (advSettings.sortId.type === "desc") {
-                        sortIcon = (react_2.default.createElement(solid_2.BarsArrowDownIcon, { className: sortClassname, onClick: function () { return handleSort(col.key, "asc"); } }));
+                        sortIcon = (react_2.default.createElement(solid_2.BarsArrowDownIcon, { "data-testid": "table-column-sort-".concat(col.key), className: sortClassname, onClick: function () { return handleSort(col.key, "asc"); } }));
                     }
                     else if (advSettings.sortId.type === "asc") {
-                        sortIcon = (react_2.default.createElement(solid_2.BarsArrowUpIcon, { className: sortClassname, onClick: function () { return handleSort(col.key, "desc"); } }));
+                        sortIcon = (react_2.default.createElement(solid_2.BarsArrowUpIcon, { "data-testid": "table-column-sort-".concat(col.key), className: sortClassname, onClick: function () { return handleSort(col.key, "desc"); } }));
                     }
                 }
             }
@@ -2259,7 +2346,7 @@ var NewTable = function (props) {
                 // this reason.
                 className: "".concat(cellPadding, " w-px whitespace-nowrap text-left text-xs font-semibold uppercase tracking-wide ").concat(cursorClassname) },
                 react_2.default.createElement("div", { className: "hidden flex-row items-center md:flex" },
-                    react_2.default.createElement(popUp_1.PopUp, { darkMode: props.darkMode, darkModeBg: props.darkModeBg, anchor: "right", portal: true, lib: { Transition: react_1.Transition }, excludePortalIds: ["select-portal"], ctaComp: react_2.default.createElement(iconButton_1.IconButton, { testId: "table-add-column-btn", icon: react_2.default.createElement(solid_1.PlusIcon, { className: "h-5 w-5 text-gray" }) }), renderComp: react_2.default.createElement("div", { className: "w-80 p-4 normal-case tracking-normal" }, renderAddColumnPanel()) })),
+                    react_2.default.createElement(popUp_1.PopUp, { ref: addColumnPopUpRef, darkMode: props.darkMode, darkModeBg: props.darkModeBg, anchor: "right", portal: true, lib: { Transition: react_1.Transition }, excludePortalIds: ["select-portal"], ctaComp: react_2.default.createElement(iconButton_1.IconButton, { testId: "table-add-column-btn", icon: react_2.default.createElement(solid_1.PlusIcon, { className: "h-5 w-5 text-gray" }) }), renderComp: react_2.default.createElement("div", { className: "w-80 p-4 normal-case tracking-normal" }, renderAddColumnPanel()) })),
                 react_2.default.createElement("div", { className: "flex flex-row items-center md:hidden" },
                     react_2.default.createElement(iconButton_1.IconButton, { testId: "table-add-column-btn-mobile", icon: react_2.default.createElement(solid_1.PlusIcon, { className: "h-5 w-5 text-gray" }), onClick: function () { return handleAddColumnModal("new"); } }))));
         };
@@ -2545,7 +2632,7 @@ var NewTable = function (props) {
                         react_2.default.createElement(button_1.Button, { text: "Cancel", type: "light", onClick: handleModalEditClose }),
                         react_2.default.createElement(button_1.Button, { text: editDataIsLoading ? "Saving" : "Save", type: "normal", disable: editDataIsLoading, onClick: handleModalEditSave }))));
             } }),
-        react_2.default.createElement(modal_1.Modal, { open: addColumnModal ? true : false, title: editingColumn ? "Edit Column" : "Add Column", renderContent: renderAddColumnPanel, onClose: function () { return handleAddColumnModal(""); } }),
+        react_2.default.createElement(modal_1.Modal, { open: addColumnModal ? true : false, maxWidth: newColumnType === "formula" ? "2xl" : undefined, title: editingColumn ? "Edit Column" : "Add Column", renderContent: renderAddColumnPanel, onClose: function () { return handleAddColumnModal(""); } }),
         react_2.default.createElement(scrollShadow_1.ScrollShadow, { className: "w-full overflow-x-auto ".concat(isFlat
                 ? ""
                 : "".concat(borderRadius, " border ").concat(borderColor, " ").concat(bgColor, " shadow-sm")), darkMode: props.darkMode },