blixify-ui-web 1.2.138 → 1.2.140

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

@@ -248,7 +248,7 @@ var handleGetListColour = function (col, value) {
     return column.listSelectionColour[index] || undefined;
 };
 var NewTable = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
     var columns = (_b = (_a = props.columns) !== null && _a !== void 0 ? _a : props.header) !== null && _b !== void 0 ? _b : [];
     var defaultLimit = 10;
     // INFO: flatten groupData columns so both mobile and desktop share the same
@@ -281,8 +281,14 @@ var NewTable = function (props) {
             groupData.forEach(function (sub) { return groupedKeys.add("".concat(col.key, ".").concat(sub.key)); });
         }
     });
-    var leftPinned = ((_d = (_c = props.pinColumns) === null || _c === void 0 ? void 0 : _c.left) !== null && _d !== void 0 ? _d : []).filter(function (key) { return !groupedKeys.has(key); });
-    var rightPinned = ((_f = (_e = props.pinColumns) === null || _e === void 0 ? void 0 : _e.right) !== null && _f !== void 0 ? _f : []).filter(function (key) { return !groupedKeys.has(key); });
+    var activityPin = props.onRowActivity &&
+        !((_d = (_c = props.pinColumns) === null || _c === void 0 ? void 0 : _c.left) === null || _d === void 0 ? void 0 : _d.length) &&
+        flatColumns[0] &&
+        !((_f = (_e = props.pinColumns) === null || _e === void 0 ? void 0 : _e.right) === null || _f === void 0 ? void 0 : _f.includes(flatColumns[0].key))
+        ? [flatColumns[0].key]
+        : [];
+    var leftPinned = (((_h = (_g = props.pinColumns) === null || _g === void 0 ? void 0 : _g.left) === null || _h === void 0 ? void 0 : _h.length) ? props.pinColumns.left : activityPin).filter(function (key) { return !groupedKeys.has(key); });
+    var rightPinned = ((_k = (_j = props.pinColumns) === null || _j === void 0 ? void 0 : _j.right) !== null && _k !== void 0 ? _k : []).filter(function (key) { return !groupedKeys.has(key); });
     var hasPinColumns = leftPinned.length > 0 || rightPinned.length > 0;
     // INFO: reorder flatColumns so left-pinned come first, right-pinned come last.
     if (hasPinColumns) {
@@ -296,30 +302,30 @@ var NewTable = function (props) {
         flatColumns.length = 0;
         flatColumns.push.apply(flatColumns, __spreadArray(__spreadArray(__spreadArray([], leftCols, false), middleCols, false), rightCols, false));
     }
-    var _z = (0, react_2.useState)(props.fixedPagination ? true : false), isFixed = _z[0], setIsFixed = _z[1];
+    var _3 = (0, react_2.useState)(props.fixedPagination ? true : false), isFixed = _3[0], setIsFixed = _3[1];
     //=====================================================================================
     // SECTION: Advanced Settings
     //=====================================================================================
-    var _0 = (0, react_2.useState)(""), filterModal = _0[0], setFilterModal = _0[1];
-    var _1 = (0, react_2.useState)(""), addColumnModal = _1[0], setAddColumnModal = _1[1];
-    var _2 = (0, react_2.useState)(""), newColumnName = _2[0], setNewColumnName = _2[1];
-    var _3 = (0, react_2.useState)("string"), newColumnType = _3[0], setNewColumnType = _3[1];
-    var _4 = (0, react_2.useState)(""), newColumnRefSpace = _4[0], setNewColumnRefSpace = _4[1];
-    var _5 = (0, react_2.useState)(""), newColumnRefLabel = _5[0], setNewColumnRefLabel = _5[1];
-    var _6 = (0, react_2.useState)(""), newColumnOptions = _6[0], setNewColumnOptions = _6[1];
-    var _7 = (0, react_2.useState)(false), newColumnRequired = _7[0], setNewColumnRequired = _7[1];
-    var _8 = (0, react_2.useState)(false), addingColumn = _8[0], setAddingColumn = _8[1];
+    var _4 = (0, react_2.useState)(""), filterModal = _4[0], setFilterModal = _4[1];
+    var _5 = (0, react_2.useState)(""), addColumnModal = _5[0], setAddColumnModal = _5[1];
+    var _6 = (0, react_2.useState)(""), newColumnName = _6[0], setNewColumnName = _6[1];
+    var _7 = (0, react_2.useState)("string"), newColumnType = _7[0], setNewColumnType = _7[1];
+    var _8 = (0, react_2.useState)(""), newColumnRefSpace = _8[0], setNewColumnRefSpace = _8[1];
+    var _9 = (0, react_2.useState)(""), newColumnRefLabel = _9[0], setNewColumnRefLabel = _9[1];
+    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];
     //=====================================================================================
     // SECTION: Editable & Addable cells
     //=====================================================================================
-    var _9 = (0, react_2.useState)(""), editDataRowId = _9[0], setEditDataRowId = _9[1];
-    var _10 = (0, react_2.useState)(""), editDataHeaderKey = _10[0], setEditDataHeaderKey = _10[1];
+    var _13 = (0, react_2.useState)(""), editDataRowId = _13[0], setEditDataRowId = _13[1];
+    var _14 = (0, react_2.useState)(""), editDataHeaderKey = _14[0], setEditDataHeaderKey = _14[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 _11 = (0, react_2.useState)(null), hoveredCell = _11[0], setHoveredCell = _11[1];
-    var _12 = (0, react_2.useState)(false), modalEditVisible = _12[0], setModalEditVisible = _12[1];
-    var _13 = (0, react_2.useState)([]), collapsedGroupIds = _13[0], setCollapsedGroupIds = _13[1];
+    var _15 = (0, react_2.useState)(null), hoveredCell = _15[0], setHoveredCell = _15[1];
+    var _16 = (0, react_2.useState)(false), modalEditVisible = _16[0], setModalEditVisible = _16[1];
+    var _17 = (0, react_2.useState)([]), collapsedGroupIds = _17[0], setCollapsedGroupIds = _17[1];
     // INFO: sheet-style row selection — Shift-click extends from the last
     // clicked row, a mouse-down-and-drag down the checkbox column paints a
     // range. The drag applies the start row itself, so the click that lands on
@@ -327,20 +333,20 @@ 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 _14 = (0, react_2.useState)(false), isDragSelecting = _14[0], setIsDragSelecting = _14[1];
-    var _15 = (0, react_2.useState)(0), copiedCount = _15[0], setCopiedCount = _15[1];
-    var _16 = (0, react_2.useState)({}), editDataValue = _16[0], setEditDataValue = _16[1];
-    var _17 = (0, react_2.useState)(false), editDataIsLoading = _17[0], setEditDataIsLoading = _17[1];
-    var _18 = (0, react_2.useState)(false), addData = _18[0], setAddData = _18[1];
-    var _19 = (0, react_2.useState)({}), addDataValue = _19[0], setAddDataValue = _19[1];
-    var _20 = (0, react_2.useState)({}), referencesOptions = _20[0], setReferencesOptions = _20[1];
+    var _18 = (0, react_2.useState)(false), isDragSelecting = _18[0], setIsDragSelecting = _18[1];
+    var _19 = (0, react_2.useState)(0), copiedCount = _19[0], setCopiedCount = _19[1];
+    var _20 = (0, react_2.useState)({}), editDataValue = _20[0], setEditDataValue = _20[1];
+    var _21 = (0, react_2.useState)(false), editDataIsLoading = _21[0], setEditDataIsLoading = _21[1];
+    var _22 = (0, react_2.useState)(false), addData = _22[0], setAddData = _22[1];
+    var _23 = (0, react_2.useState)({}), addDataValue = _23[0], setAddDataValue = _23[1];
+    var _24 = (0, react_2.useState)({}), referencesOptions = _24[0], setReferencesOptions = _24[1];
     // INFO: seeded options sit under the local map so a cell's own search
     // results still win per key
-    var mergedReferencesOptions = __assign(__assign({}, ((_g = props.referencesOptions) !== null && _g !== void 0 ? _g : {})), referencesOptions);
-    var _21 = (0, react_2.useState)({}), referencesDetails = _21[0], setReferencesDetails = _21[1];
-    var _22 = (0, react_2.useState)(false), referenceLoading = _22[0], setReferenceLoading = _22[1];
+    var mergedReferencesOptions = __assign(__assign({}, ((_l = props.referencesOptions) !== null && _l !== void 0 ? _l : {})), referencesOptions);
+    var _25 = (0, react_2.useState)({}), referencesDetails = _25[0], setReferencesDetails = _25[1];
+    var _26 = (0, react_2.useState)(false), referenceLoading = _26[0], setReferenceLoading = _26[1];
     // INFO: measured pixel widths for pinned columns without an explicit width.
-    var _23 = (0, react_2.useState)({}), measuredPinWidths = _23[0], setMeasuredPinWidths = _23[1];
+    var _27 = (0, react_2.useState)({}), measuredPinWidths = _27[0], setMeasuredPinWidths = _27[1];
     var editDataValueRef = (0, react_2.useRef)({});
     var editDataRowIdRef = (0, react_2.useRef)("");
     var editDataHeaderKeyRef = (0, react_2.useRef)("");
@@ -359,7 +365,7 @@ var NewTable = function (props) {
     var bgColor = props.darkMode
         ? props.darkModeBg || "bg-gray-900"
         : "bg-white";
-    var isFlat = !!((_h = props.advSettings) === null || _h === void 0 ? void 0 : _h.flat);
+    var isFlat = !!((_m = props.advSettings) === null || _m === void 0 ? void 0 : _m.flat);
     var borderRadius = isFlat ? "" : "rounded-2xl";
     var borderColor = props.darkMode ? "border-gray-700" : "border-gray-100";
     var selectedRowBg = props.darkMode ? "bg-gray-700" : "bg-primary-50";
@@ -403,8 +409,8 @@ var NewTable = function (props) {
     var errorFontColor = props.darkMode ? "text-red-300" : "text-red-500";
     // INFO: an edit commits on blur, but navigating away unmounts the table
     // without one — the cell was left dirty on screen and the value never sent.
-    var onUpdateDataRef = (0, react_2.useRef)((_j = props.editable) === null || _j === void 0 ? void 0 : _j.onUpdateData);
-    onUpdateDataRef.current = (_k = props.editable) === null || _k === void 0 ? void 0 : _k.onUpdateData;
+    var onUpdateDataRef = (0, react_2.useRef)((_o = props.editable) === null || _o === void 0 ? void 0 : _o.onUpdateData);
+    onUpdateDataRef.current = (_p = props.editable) === null || _p === void 0 ? void 0 : _p.onUpdateData;
     (0, react_2.useEffect)(function () {
         return function () {
             var _a, _b;
@@ -766,7 +772,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 _24 = (0, react_2.useState)({}), columnWidths = _24[0], setColumnWidths = _24[1];
+    var _28 = (0, react_2.useState)({}), columnWidths = _28[0], setColumnWidths = _28[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
@@ -1351,6 +1357,16 @@ var NewTable = function (props) {
                 },
             }))));
     };
+    var renderActivityButton = function (id, positioned) {
+        if (positioned === void 0) { positioned = false; }
+        return props.onRowActivity ? (react_2.default.createElement("button", { type: "button", "aria-label": "Open activity for ".concat(id), title: "Comments and activity", className: "".concat(positioned ? "absolute right-1 top-1/2 -translate-y-1/2 z-20" : "", " inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-transparent text-primary-500 hover:bg-primary-50 focus-visible:outline focus-visible:outline-2"), onClick: function (event) {
+                var _a;
+                event.preventDefault();
+                event.stopPropagation();
+                (_a = props.onRowActivity) === null || _a === void 0 ? void 0 : _a.call(props, id);
+            } },
+            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()); };
     var renderActionColumnHeader = function () {
         if (handleShowsActionColumn()) {
@@ -1473,7 +1489,7 @@ var NewTable = function (props) {
     };
     // INFO: true when maxSelectedCount is set and the current selection has reached the limit
     var isMaxReached = !!props.maxSelectedCount &&
-        ((_m = (_l = props.selectedIds) === null || _l === void 0 ? void 0 : _l.length) !== null && _m !== void 0 ? _m : 0) >= props.maxSelectedCount;
+        ((_r = (_q = props.selectedIds) === null || _q === void 0 ? void 0 : _q.length) !== null && _r !== void 0 ? _r : 0) >= props.maxSelectedCount;
     // INFO: one desktop row. groupAccent carries the group's colour so member
     // rows show the band's colour as a bar down their left edge.
     var renderDesktopRow = function (row, index, groupAccent) {
@@ -1509,120 +1525,131 @@ var NewTable = function (props) {
                 ? "opacity-50 cursor-not-allowed"
                 : ""))),
             flatColumns.map(function (col, colIndex) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-                // INFO: a coloured list cell is this table's to render, so it takes
-                // the raw value even when a display row is supplied. The list view
-                // builds those rows and puts a Tag in for a coloured value — an
-                // element, which the guard below then excludes from inline edit, so
-                // the column came out as a pill that could not be edited in place.
-                // Only the cell is redirected: the display rows still carry the Tag
-                // for the read view, the kanban and the grid.
-                var cellValue = spaceRow && !handleColumnShowsTags(col)
-                    ? spaceRow[col.key]
-                    : resolveValue(row, col.key);
-                // INFO: first col with type "string" is never made editable
-                var resolvedColType = (_a = col.type) !== null && _a !== void 0 ? _a : "string";
-                var isActionColumn = col.key === "update" && !col.type;
-                // INFO: a cell whose value is already a React element (row action
-                // buttons, a custom control) is rendered as-is even in an editable
-                // table — wrapping it in an inline editor would swallow it
-                var isElementCell = react_2.default.isValidElement(cellValue);
-                // INFO: a column the schema marks disabled is read-only in the form,
-                // so it stays read-only in an editable table too — without this an
-                // admin-locked (often system-filled) column was editable on hover
-                var isColumnLocked = !!col.disabled;
-                var isModalEdit = ((_b = props.editable) === null || _b === void 0 ? void 0 : _b.active) &&
-                    !isColumnLocked &&
-                    !isActionColumn &&
-                    !isElementCell &&
-                    utils_1.supportedModalEditList.includes(resolvedColType);
-                var isObjectEdit = ((_c = props.editable) === null || _c === void 0 ? void 0 : _c.active) &&
-                    !isColumnLocked &&
-                    !isActionColumn &&
-                    !isElementCell &&
-                    resolvedColType === "object" &&
-                    !!props.onObjectEdit;
-                // INFO: the read cell renders an object, but a text field would show
-                // [object Object] and commit that string over the real value
-                var isUneditableShape = typeof cellValue === "object" &&
-                    cellValue !== null &&
-                    !(cellValue instanceof Date) &&
-                    utils_1.primitiveInlineEditList.includes(resolvedColType);
-                var isEditable = ((_d = props.editable) === null || _d === void 0 ? void 0 : _d.active) &&
-                    !isColumnLocked &&
-                    !isActionColumn &&
-                    !isElementCell &&
-                    !isUneditableShape &&
-                    !(((_f = (_e = props.selectedIds) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) > 0 || props.selectAll) &&
-                    utils_1.supportedInlineEditList.includes(resolvedColType);
-                var rowData = editDataRowId === row.id ? editDataValue : row;
-                // INFO: a list column with a palette paints the whole cell —
-                // a status column then reads like a heat map instead of a
-                // row of chips. Editable tables open the palette on click.
-                var rawListValue = resolveValue(row, col.key);
-                var fillColour = resolvedColType === "list" && !isActionColumn
-                    ? handleGetListColour(col, rawListValue)
-                    : undefined;
-                // INFO: an editable table renders the coloured cell as its Select in
-                // every row (filled while closed) so the control never swaps in and
-                // out; the plain block is for read-only tables and locked columns
-                if (fillColour && (!((_g = props.editable) === null || _g === void 0 ? void 0 : _g.active) || isColumnLocked)) {
-                    // INFO: a read-only table shows the same filled Select as an
-                    // editable one, just disabled — the cell looks identical in both
-                    // modes and the row click still navigates
-                    var readOnlyDS = __assign(__assign({}, col), { id: col.key, name: col.title, type: (_h = col.type) !== null && _h !== void 0 ? _h : "string", showTagSelections: handleColumnShowsTags(col), disabled: true });
-                    // INFO: navigate on click only for a genuinely read-only table. This
-                    // branch is ALSO entered for a locked column inside an EDITABLE
-                    // table (isColumnLocked) — there a click must leave the Select alone,
-                    // not navigate — so the overlay is gated on !editable.active.
-                    var shouldNavigateOnClick = !((_j = props.editable) === null || _j === void 0 ? void 0 : _j.active);
-                    return (react_2.default.createElement("td", { key: col.key, className: "p-0 align-middle ".concat((_l = (_k = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _k === void 0 ? void 0 : _k.className) !== null && _l !== void 0 ? _l : ""), style: (_m = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _m === void 0 ? void 0 : _m.style },
-                        react_2.default.createElement("div", { className: "relative w-max whitespace-nowrap p-[1px]" },
-                            renderFormCell(row, readOnlyDS, null, {
-                                active: true,
-                                readOnly: true,
-                                onBlur: function () { },
-                            }),
-                            shouldNavigateOnClick && props.onClickRow && (react_2.default.createElement("div", { "data-testid": "fill-cell-nav-".concat(col.key), className: "absolute inset-0 z-10 cursor-pointer", onClick: function (e) {
+                var _a, _b, _c;
+                var renderDataCell = function () {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+                    // INFO: a coloured list cell is this table's to render, so it takes
+                    // the raw value even when a display row is supplied. The list view
+                    // builds those rows and puts a Tag in for a coloured value — an
+                    // element, which the guard below then excludes from inline edit, so
+                    // the column came out as a pill that could not be edited in place.
+                    // Only the cell is redirected: the display rows still carry the Tag
+                    // for the read view, the kanban and the grid.
+                    var cellValue = spaceRow && !handleColumnShowsTags(col)
+                        ? spaceRow[col.key]
+                        : resolveValue(row, col.key);
+                    // INFO: first col with type "string" is never made editable
+                    var resolvedColType = (_a = col.type) !== null && _a !== void 0 ? _a : "string";
+                    var isActionColumn = col.key === "update" && !col.type;
+                    // INFO: a cell whose value is already a React element (row action
+                    // buttons, a custom control) is rendered as-is even in an editable
+                    // table — wrapping it in an inline editor would swallow it
+                    var isElementCell = react_2.default.isValidElement(cellValue);
+                    // INFO: a column the schema marks disabled is read-only in the form,
+                    // so it stays read-only in an editable table too — without this an
+                    // admin-locked (often system-filled) column was editable on hover
+                    var isColumnLocked = !!col.disabled;
+                    var isModalEdit = ((_b = props.editable) === null || _b === void 0 ? void 0 : _b.active) &&
+                        !isColumnLocked &&
+                        !isActionColumn &&
+                        !isElementCell &&
+                        utils_1.supportedModalEditList.includes(resolvedColType);
+                    var isObjectEdit = ((_c = props.editable) === null || _c === void 0 ? void 0 : _c.active) &&
+                        !isColumnLocked &&
+                        !isActionColumn &&
+                        !isElementCell &&
+                        resolvedColType === "object" &&
+                        !!props.onObjectEdit;
+                    // INFO: the read cell renders an object, but a text field would show
+                    // [object Object] and commit that string over the real value
+                    var isUneditableShape = typeof cellValue === "object" &&
+                        cellValue !== null &&
+                        !(cellValue instanceof Date) &&
+                        utils_1.primitiveInlineEditList.includes(resolvedColType);
+                    var isEditable = ((_d = props.editable) === null || _d === void 0 ? void 0 : _d.active) &&
+                        !isColumnLocked &&
+                        !isActionColumn &&
+                        !isElementCell &&
+                        !isUneditableShape &&
+                        !(((_f = (_e = props.selectedIds) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) > 0 || props.selectAll) &&
+                        utils_1.supportedInlineEditList.includes(resolvedColType);
+                    var rowData = editDataRowId === row.id ? editDataValue : row;
+                    // INFO: a list column with a palette paints the whole cell —
+                    // a status column then reads like a heat map instead of a
+                    // row of chips. Editable tables open the palette on click.
+                    var rawListValue = resolveValue(row, col.key);
+                    var fillColour = resolvedColType === "list" && !isActionColumn
+                        ? handleGetListColour(col, rawListValue)
+                        : undefined;
+                    // INFO: an editable table renders the coloured cell as its Select in
+                    // every row (filled while closed) so the control never swaps in and
+                    // out; the plain block is for read-only tables and locked columns
+                    if (fillColour && (!((_g = props.editable) === null || _g === void 0 ? void 0 : _g.active) || isColumnLocked)) {
+                        // INFO: a read-only table shows the same filled Select as an
+                        // editable one, just disabled — the cell looks identical in both
+                        // modes and the row click still navigates
+                        var readOnlyDS = __assign(__assign({}, col), { id: col.key, name: col.title, type: (_h = col.type) !== null && _h !== void 0 ? _h : "string", showTagSelections: handleColumnShowsTags(col), disabled: true });
+                        // INFO: navigate on click only for a genuinely read-only table. This
+                        // branch is ALSO entered for a locked column inside an EDITABLE
+                        // table (isColumnLocked) — there a click must leave the Select alone,
+                        // not navigate — so the overlay is gated on !editable.active.
+                        var shouldNavigateOnClick = !((_j = props.editable) === null || _j === void 0 ? void 0 : _j.active);
+                        return (react_2.default.createElement("td", { key: col.key, className: "p-0 align-middle ".concat((_l = (_k = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _k === void 0 ? void 0 : _k.className) !== null && _l !== void 0 ? _l : ""), style: (_m = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _m === void 0 ? void 0 : _m.style },
+                            react_2.default.createElement("div", { className: "relative w-max whitespace-nowrap p-[1px]" },
+                                renderFormCell(row, readOnlyDS, null, {
+                                    active: true,
+                                    readOnly: true,
+                                    onBlur: function () { },
+                                }),
+                                shouldNavigateOnClick && props.onClickRow && (react_2.default.createElement("div", { "data-testid": "fill-cell-nav-".concat(col.key), className: "absolute inset-0 z-10 cursor-pointer", onClick: function (e) {
+                                        var _a;
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        (_a = props.onClickRow) === null || _a === void 0 ? void 0 : _a.call(props, row.id, row, spaceRow);
+                                    } })))));
+                    }
+                    if (isObjectEdit) {
+                        return (react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(cellFontColor, " whitespace-nowrap") },
+                            react_2.default.createElement("div", { className: "cursor-pointer group/modaledit flex items-center gap-x-2 min-h-6", "data-testid": "table-object-edit-".concat(col.key), onClick: function (e) {
                                     var _a;
-                                    e.preventDefault();
                                     e.stopPropagation();
-                                    (_a = props.onClickRow) === null || _a === void 0 ? void 0 : _a.call(props, row.id, row, spaceRow);
-                                } })))));
-                }
-                if (isObjectEdit) {
-                    return (react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(cellFontColor, " whitespace-nowrap") },
-                        react_2.default.createElement("div", { className: "cursor-pointer group/modaledit flex items-center gap-x-2 min-h-6", "data-testid": "table-object-edit-".concat(col.key), onClick: function (e) {
-                                var _a;
-                                e.stopPropagation();
-                                (_a = props.onObjectEdit) === null || _a === void 0 ? void 0 : _a.call(props, row.id, col.key, row);
-                            } },
-                            handleCheckModalEditEmpty(cellValue) ? (react_2.default.createElement("span", { className: "text-gray-400 italic" }, "Add")) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord)),
-                            react_2.default.createElement(outline_1.PencilIcon, { className: "w-3.5 h-3.5 text-gray-400 opacity-0 group-hover/modaledit:opacity-100 flex-shrink-0" }))));
-                }
-                if (isModalEdit) {
-                    return (react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(cellFontColor, " whitespace-nowrap") },
-                        react_2.default.createElement("div", { className: "cursor-pointer group/modaledit flex items-center gap-x-2 min-h-6", "data-testid": "table-modal-edit-".concat(col.key), onClick: function (e) {
-                                e.stopPropagation();
-                                handleModalEditOnClick(row.id, col.key, row);
-                            } },
-                            handleCheckModalEditEmpty(cellValue) ? (react_2.default.createElement("span", { className: "text-gray-400 italic" }, "Add")) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord)),
-                            react_2.default.createElement(outline_1.PencilIcon, { className: "w-3.5 h-3.5 text-gray-400 opacity-0 group-hover/modaledit:opacity-100 flex-shrink-0" }))));
-                }
-                // INFO: falls through to the plain text cell below unless hovered or
-                // mid-edit. Coloured list cells are exempt — read and edit are the same
-                // filled pill, so there is nothing to swap to.
-                if (isEditable &&
-                    (handleColumnShowsTags(col) || handleIsCellLive(row.id, col.key))) {
-                    var bareOverride = (_p = (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareListDescription) === null || _p === void 0 ? void 0 : _p.call(_o, col.key, cellValue);
-                    if (!bareOverride)
-                        return renderEditDataInputs(colIndex, col, rowData, row.id, rowBgClass, isRowHoverable);
-                }
-                return (
-                // INFO: pinned columns use whitespace-normal so text wraps within the fixed width
-                react_2.default.createElement("td", __assign({ key: col.key }, (isEditable ? handleCellHoverProps(row.id, col.key) : {}), { "data-cell-key": col.key, "data-pin-key": leftPinned.includes(col.key) || rightPinned.includes(col.key)
-                        ? col.key
-                        : undefined, className: "".concat(cellPadding, " ").concat(isEditable ? "".concat(editCellMinHeight, " align-middle ").concat(handleCellMinWidth(col.type)) : "", " text-sm ").concat(colIndex === 0 && props.onClickRow ? titleFontColor : cellFontColor, " ").concat(col.width ? "".concat(col.width, " flex-shrink-0") : getPinProps(col.key, false) ? "" : "whitespace-nowrap", " ").concat((_r = (_q = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _q === void 0 ? void 0 : _q.className) !== null && _r !== void 0 ? _r : ""), style: (_s = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _s === void 0 ? void 0 : _s.style }), props.newTabUrl && props.onClickRow ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl + row.id + ((_t = props.addNewTabUrl) !== null && _t !== void 0 ? _t : ""), className: "w-full block", linkType: props.linkType, custom: props.custom }, (0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord))) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord))));
+                                    (_a = props.onObjectEdit) === null || _a === void 0 ? void 0 : _a.call(props, row.id, col.key, row);
+                                } },
+                                handleCheckModalEditEmpty(cellValue) ? (react_2.default.createElement("span", { className: "text-gray-400 italic" }, "Add")) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord)),
+                                react_2.default.createElement(outline_1.PencilIcon, { className: "w-3.5 h-3.5 text-gray-400 opacity-0 group-hover/modaledit:opacity-100 flex-shrink-0" }))));
+                    }
+                    if (isModalEdit) {
+                        return (react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(cellFontColor, " whitespace-nowrap") },
+                            react_2.default.createElement("div", { className: "cursor-pointer group/modaledit flex items-center gap-x-2 min-h-6", "data-testid": "table-modal-edit-".concat(col.key), onClick: function (e) {
+                                    e.stopPropagation();
+                                    handleModalEditOnClick(row.id, col.key, row);
+                                } },
+                                handleCheckModalEditEmpty(cellValue) ? (react_2.default.createElement("span", { className: "text-gray-400 italic" }, "Add")) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord)),
+                                react_2.default.createElement(outline_1.PencilIcon, { className: "w-3.5 h-3.5 text-gray-400 opacity-0 group-hover/modaledit:opacity-100 flex-shrink-0" }))));
+                    }
+                    // INFO: falls through to the plain text cell below unless hovered or
+                    // mid-edit. Coloured list cells are exempt — read and edit are the same
+                    // filled pill, so there is nothing to swap to.
+                    if (isEditable &&
+                        (handleColumnShowsTags(col) || handleIsCellLive(row.id, col.key))) {
+                        var bareOverride = (_p = (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareListDescription) === null || _p === void 0 ? void 0 : _p.call(_o, col.key, cellValue);
+                        if (!bareOverride)
+                            return renderEditDataInputs(colIndex, col, rowData, row.id, rowBgClass, isRowHoverable);
+                    }
+                    return (
+                    // INFO: pinned columns use whitespace-normal so text wraps within the fixed width
+                    react_2.default.createElement("td", __assign({ key: col.key }, (isEditable ? handleCellHoverProps(row.id, col.key) : {}), { "data-cell-key": col.key, "data-pin-key": leftPinned.includes(col.key) || rightPinned.includes(col.key)
+                            ? col.key
+                            : undefined, className: "".concat(cellPadding, " ").concat(isEditable ? "".concat(editCellMinHeight, " align-middle ").concat(handleCellMinWidth(col.type)) : "", " text-sm ").concat(colIndex === 0 && props.onClickRow ? titleFontColor : cellFontColor, " ").concat(col.width ? "".concat(col.width, " flex-shrink-0") : getPinProps(col.key, false) ? "" : "whitespace-nowrap", " ").concat((_r = (_q = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _q === void 0 ? void 0 : _q.className) !== null && _r !== void 0 ? _r : ""), style: (_s = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _s === void 0 ? void 0 : _s.style }), props.newTabUrl && props.onClickRow ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl + row.id + ((_t = props.addNewTabUrl) !== null && _t !== void 0 ? _t : ""), className: "w-full block", linkType: props.linkType, custom: props.custom }, (0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord))) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord))));
+                };
+                var cell = renderDataCell();
+                if (colIndex !== 0 || !props.onRowActivity)
+                    return cell;
+                // Keep the action outside links and inline editors in every cell variant.
+                return react_2.default.cloneElement(cell, {
+                    className: "".concat(cell.props.className, " ").concat((_b = (_a = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : "", " !pr-12"),
+                    style: __assign(__assign(__assign({}, cell.props.style), (_c = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _c === void 0 ? void 0 : _c.style), { position: getPinProps(col.key, false) ? "sticky" : "relative" }),
+                }, cell.props.children, renderActivityButton(row.id, true));
             }),
             renderAddColumnCell(),
             renderActionColumnCell(row.id)));
@@ -1868,11 +1895,11 @@ var NewTable = function (props) {
         var isIdLike_1 = function (c) {
             return /^id$/i.test(c.key) || /^_id$/i.test(c.key);
         };
-        var titleCol_1 = (_o = flatColumns.find(function (c) { return !isIdLike_1(c); })) !== null && _o !== void 0 ? _o : flatColumns[0];
+        var titleCol_1 = (_s = flatColumns.find(function (c) { return !isIdLike_1(c); })) !== null && _s !== void 0 ? _s : flatColumns[0];
         var expandHeaderBg_1 = props.darkMode ? "bg-gray-700" : "bg-gray-100";
         var expandHeaderFontColor_1 = props.darkMode ? "text-white" : "";
         var headerBgColor_1 = props.darkMode
-            ? ((_p = props.darkModeBg) !== null && _p !== void 0 ? _p : "bg-gray-900")
+            ? ((_t = props.darkModeBg) !== null && _t !== void 0 ? _t : "bg-gray-900")
             : "";
         var headerFontColor_1 = props.darkMode ? "text-white" : "";
         // INFO: renders tag + trailing text adjacent to the Collapse title
@@ -1967,16 +1994,16 @@ var NewTable = function (props) {
                 })))));
         };
         return (react_2.default.createElement("div", null,
-            react_2.default.createElement("div", { className: "w-full ".concat(((_q = props.mobileTooltip) === null || _q === void 0 ? void 0 : _q.tooltip) ? "overflow-visible" : "overflow-hidden", " ").concat(isFlat
+            react_2.default.createElement("div", { className: "w-full ".concat(((_u = props.mobileTooltip) === null || _u === void 0 ? void 0 : _u.tooltip) ? "overflow-visible" : "overflow-hidden", " ").concat(isFlat
                     ? ""
-                    : "border ".concat(borderRadius, " ").concat(borderColor, " ").concat(bgColor, " shadow-sm"), " divide-y ").concat(dividerColor, " ").concat((_r = props.className) !== null && _r !== void 0 ? _r : "") },
+                    : "border ".concat(borderRadius, " ").concat(borderColor, " ").concat(bgColor, " shadow-sm"), " divide-y ").concat(dividerColor, " ").concat((_v = props.className) !== null && _v !== void 0 ? _v : "") },
                 react_2.default.createElement("div", { className: "p-3 flex justify-between" },
                     renderSelectAll(),
                     renderSelectedCount()),
                 props.loading &&
                     Array.from({ length: 3 }).map(function (_, i) { return (react_2.default.createElement("div", { key: "skeleton-".concat(i), className: "p-4" },
                         react_2.default.createElement("div", { className: "h-5 w-3/4 rounded-md animate-pulse ".concat(props.darkMode ? "bg-gray-700" : "bg-gray-200") }))); }),
-                !props.loading && props.data.length === 0 && (react_2.default.createElement("p", { className: "p-4 text-center text-sm ".concat(cellFontColor) }, (_s = props.emptyTitle) !== null && _s !== void 0 ? _s : "No items")),
+                !props.loading && props.data.length === 0 && (react_2.default.createElement("p", { className: "p-4 text-center text-sm ".concat(cellFontColor) }, (_w = props.emptyTitle) !== null && _w !== void 0 ? _w : "No items")),
                 !props.loading &&
                     props.data.map(function (row, index) {
                         var _a, _b, _c, _d, _e, _f, _g;
@@ -2017,7 +2044,9 @@ var NewTable = function (props) {
                             });
                         }
                         return (react_2.default.createElement("div", { key: row.id, "data-dtw-record-id": row.id, className: "relative group/tooltip" },
-                            react_2.default.createElement(collapse_1.Collapse, { title: cardTitle, titleClassName: "text-sm font-medium !p-0 ".concat(props.onClickRow ? titleFontColor : ""), icon: props.checkbox ? renderCheckbox(isSelected, function () { }, function (e) { return handleSelectRow(row.id, e); }, "w-4 h-4 ".concat(isMaxReached && !isSelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer")) : (react_2.default.createElement(solid_2.ListBulletIcon, { className: "w-4 h-4 ".concat(props.darkMode ? "text-gray-400" : "text-gray-500") })), defaultValue: false, additionalComp: renderMobileTitleAdjacent_1(row, spaceRow), collapseAdditionalComp: renderMobileTitleSummary_1(row, spaceRow), 
+                            react_2.default.createElement(collapse_1.Collapse, { title: cardTitle, titleClassName: "text-sm font-medium !p-0 ".concat(props.onClickRow ? titleFontColor : ""), icon: props.checkbox ? renderCheckbox(isSelected, function () { }, function (e) { return handleSelectRow(row.id, e); }, "w-4 h-4 ".concat(isMaxReached && !isSelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer")) : (react_2.default.createElement(solid_2.ListBulletIcon, { className: "w-4 h-4 ".concat(props.darkMode ? "text-gray-400" : "text-gray-500") })), defaultValue: false, additionalComp: props.onRowActivity ? (react_2.default.createElement("div", { className: "flex items-center gap-2" },
+                                    renderMobileTitleAdjacent_1(row, spaceRow),
+                                    renderActivityButton(row.id))) : (renderMobileTitleAdjacent_1(row, spaceRow)), collapseAdditionalComp: renderMobileTitleSummary_1(row, spaceRow), 
                                 // INFO: clicking the summary line expands the row, same as
                                 // the header
                                 collapseAdditionalCompToggle: true, collapseContainerCss: "".concat(isSelected ? selectedRowBg : expandHeaderBg_1, " ").concat(expandHeaderFontColor_1), notCollapseContainerCss: "".concat(isSelected ? selectedRowBg : headerBgColor_1, " ").concat(headerFontColor_1), content: react_2.default.createElement("div", null,
@@ -2030,13 +2059,13 @@ var NewTable = function (props) {
                     : "") }),
             renderFloatingActionBar()));
     }
-    return (react_2.default.createElement("div", { className: "w-full ".concat((_t = props.className) !== null && _t !== void 0 ? _t : "") },
+    return (react_2.default.createElement("div", { className: "w-full ".concat((_x = props.className) !== null && _x !== void 0 ? _x : "") },
         react_2.default.createElement(modal_1.Modal, { open: filterModal ? true : false, title: "Filter Options", renderContent: function () {
                 var _a, _b;
                 return (react_2.default.createElement("div", { className: "pb-44" },
                     react_2.default.createElement("div", { className: "pb-48" }, (_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.renderFilterElements) === null || _b === void 0 ? void 0 : _b.call(_a, filterModal))));
             }, onClose: function () { return setFilterModal(""); } }),
-        react_2.default.createElement(modal_1.Modal, { open: modalEditVisible, title: (_v = (_u = flatColumns.find(function (eachCol) { return eachCol.key === editDataHeaderKey; })) === null || _u === void 0 ? void 0 : _u.title) !== null && _v !== void 0 ? _v : "Edit", onClose: handleModalEditClose, renderContent: function () {
+        react_2.default.createElement(modal_1.Modal, { open: modalEditVisible, title: (_z = (_y = flatColumns.find(function (eachCol) { return eachCol.key === editDataHeaderKey; })) === null || _y === void 0 ? void 0 : _y.title) !== null && _z !== void 0 ? _z : "Edit", onClose: handleModalEditClose, renderContent: function () {
                 var _a, _b, _c, _d;
                 var selectedCol = flatColumns.find(function (eachCol) { return eachCol.key === editDataHeaderKey; });
                 if (!selectedCol)
@@ -2076,7 +2105,7 @@ var NewTable = function (props) {
         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 },
-            (props.selectAll || ((_x = (_w = props.selectedIds) === null || _w === void 0 ? void 0 : _w.length) !== null && _x !== void 0 ? _x : 0) > 0) &&
+            (props.selectAll || ((_1 = (_0 = props.selectedIds) === null || _0 === void 0 ? void 0 : _0.length) !== null && _1 !== void 0 ? _1 : 0) > 0) &&
                 (!props.multiActionFloatingBtns ||
                     (props.multiActionFloatingBtns &&
                         props.multiActionFloatingBtns.length <= 0)) && (react_2.default.createElement("div", { className: "sticky left-0 flex flex-row items-center px-4 py-3 gap-x-2" },
@@ -2096,7 +2125,7 @@ var NewTable = function (props) {
                                 react_2.default.createElement("div", { className: "h-5 rounded-md animate-pulse ".concat(props.darkMode ? "bg-gray-700" : "bg-gray-200") }))); }))); }),
                     !props.loading && renderDesktopRows(),
                     !props.loading && addData && renderAddDataRow())),
-            !props.loading && props.data.length === 0 && (react_2.default.createElement("div", { className: "p-4 text-sm ".concat(cellFontColor, " text-center sticky left-0") }, (_y = props.emptyTitle) !== null && _y !== void 0 ? _y : "No items")),
+            !props.loading && props.data.length === 0 && (react_2.default.createElement("div", { className: "p-4 text-sm ".concat(cellFontColor, " text-center sticky left-0") }, (_2 = props.emptyTitle) !== null && _2 !== void 0 ? _2 : "No items")),
             renderAddableSection()),
         react_2.default.createElement(newPagination_1.NewPagination, { paginationType: props.paginationType, pageIndex: props.pageIndex, limit: props.limit, size: props.size, cursor: props.cursor, resultCount: props.data.length, customPaginationSize: props.customPaginationSize, hidePagination: props.hidePagination, darkMode: props.darkMode, darkModeBg: props.darkModeBg, handleUpdatePageIndex: props.handleUpdatePageIndex, className: "".concat(props.fixedPagination
                 ? "pagination-container w-full ".concat(borderColor, " ").concat(isFixed ? "fixed bottom-0 left-0 z-10" : "sticky top-0 left-0")