blixify-ui-web 1.2.122 → 1.2.123

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

@@ -83,30 +83,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewTable = void 0;
-var solid_1 = require("@heroicons/react/24/solid");
-var solid_2 = require("@heroicons/react/24/solid");
-var solid_3 = require("@heroicons/react/20/solid");
-var outline_1 = require("@heroicons/react/24/outline");
 var react_1 = require("@headlessui/react");
+var solid_1 = require("@heroicons/react/20/solid");
+var outline_1 = require("@heroicons/react/24/outline");
+var solid_2 = require("@heroicons/react/24/solid");
 var axios_1 = __importDefault(require("axios"));
-var newPagination_1 = require("../newPagination");
 var react_2 = __importStar(require("react"));
+var button_1 = require("../../action/button");
+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 readModule_1 = require("../../data/readModule");
 var updateModule_1 = require("../../data/updateModule");
 var utils_1 = require("../../data/utils");
-var detailList_1 = require("../detailList");
-var tag_1 = require("../tag");
-var textButton_1 = require("../../action/textButton");
-var iconButton_1 = require("../../action/iconButton");
-var link_1 = require("../../structure/link");
-var button_1 = require("../../action/button");
-var modal_1 = require("../modal");
-var scrollShadow_1 = require("../scrollShadow");
 var checkbox_1 = require("../../input/checkbox");
 var select_1 = require("../../input/select");
 var textInput_1 = require("../../input/textInput");
+var link_1 = require("../../structure/link");
+var detailList_1 = require("../detailList");
+var modal_1 = require("../modal");
+var newPagination_1 = require("../newPagination");
+var scrollShadow_1 = require("../scrollShadow");
+var tag_1 = require("../tag");
 // INFO: resolve dotted key paths (e.g. "group.subKey") against a row object.
 // Required because flatColumns uses "parent.child" keys for groupData sub-columns.
 var resolveValue = function (row, key) {
@@ -1415,7 +1414,7 @@ var NewTable = function (props) {
             renderAddColumnCell(),
             react_2.default.createElement("td", { className: "".concat(cellPadding, " text-sm") },
                 react_2.default.createElement("div", { className: "flex flex-row gap-2" },
-                    react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_1.CheckIcon, { className: "w-5 h-5 text-green-500" }), onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                    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 __awaiter(void 0, void 0, void 0, function () {
                             var valid;
                             var _a;
                             return __generator(this, function (_b) {
@@ -1431,7 +1430,7 @@ var NewTable = function (props) {
                                 }
                             });
                         }); } }),
-                    react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_1.XMarkIcon, { className: "h-5 w-5 text-red-500" }), onClick: handleCancelAdd })))));
+                    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 })))));
     };
     var renderAddableSection = function () {
         var _a;
@@ -1452,7 +1451,7 @@ var NewTable = function (props) {
             return react_2.default.createElement(react_2.default.Fragment, null);
         return (react_2.default.createElement("div", { className: "flex items-center" },
             renderCheckbox(renderCheckAllSelected() || ((_b = props.selectAll) !== null && _b !== void 0 ? _b : false), function () { return handleSelectCurrentPage(renderCheckAllSelected()); }, undefined, "mr-1"),
-            !props.disableSelectFullData && (react_2.default.createElement(popUp_1.PopUp, { anchor: "left", darkMode: props.darkMode, darkModeBg: props.darkModeBg, lib: { Transition: react_1.Transition }, ctaComp: react_2.default.createElement(solid_1.ChevronDownIcon, { className: "h-4 w-4 ".concat(cellFontColor, " cursor-pointer"), "aria-hidden": "true" }), renderComp: react_2.default.createElement("div", { className: "border rounded ".concat(borderColor, " ").concat(props.darkMode ? "bg-gray-800" : "bg-white") },
+            !props.disableSelectFullData && (react_2.default.createElement(popUp_1.PopUp, { anchor: "left", darkMode: props.darkMode, darkModeBg: props.darkModeBg, lib: { Transition: react_1.Transition }, ctaComp: react_2.default.createElement(solid_2.ChevronDownIcon, { className: "h-4 w-4 ".concat(cellFontColor, " cursor-pointer"), "aria-hidden": "true" }), renderComp: react_2.default.createElement("div", { className: "border rounded ".concat(borderColor, " ").concat(props.darkMode ? "bg-gray-800" : "bg-white") },
                     react_2.default.createElement("p", { className: "px-4 py-3 text-xs ".concat(cellFontColor, " text-left whitespace-nowrap font-medium hover:cursor-pointer ").concat(props.darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100"), onClick: function () { return handleSelectAllPages(true); } }, "Select all pages"),
                     react_2.default.createElement("p", { className: "px-4 py-3 text-xs ".concat(cellFontColor, " text-left whitespace-nowrap font-medium hover:cursor-pointer ").concat(props.darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100"), onClick: function () { return handleSelectAllPages(false); } }, "Unselect all pages")) }))));
     };
@@ -1484,7 +1483,7 @@ var NewTable = function (props) {
             ((_d = props.selectAll) !== null && _d !== void 0 ? _d : false);
         var rowBgClass = isSelected ? selectedRowBg : bgColor;
         var isRowHoverable = !!props.onClickRow && !isSelected;
-        return (react_2.default.createElement("tr", { key: row.id, onClick: function (e) {
+        return (react_2.default.createElement("tr", { key: row.id, "data-dtw-record-id": row.id, onClick: function (e) {
                 if (props.onClickRow) {
                     props.onClickRow(row.id, row, spaceRow);
                 }
@@ -1510,7 +1509,7 @@ 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;
+                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
@@ -1572,12 +1571,24 @@ var NewTable = function (props) {
                     // 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 });
-                    return (react_2.default.createElement("td", { key: col.key, className: "p-0 align-middle ".concat((_k = (_j = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _j === void 0 ? void 0 : _j.className) !== null && _k !== void 0 ? _k : ""), style: (_l = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _l === void 0 ? void 0 : _l.style },
-                        react_2.default.createElement("div", { className: "w-max whitespace-nowrap p-[1px]" }, renderFormCell(row, readOnlyDS, null, {
-                            active: true,
-                            readOnly: true,
-                            onBlur: function () { },
-                        }))));
+                    // 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") },
@@ -1603,7 +1614,7 @@ var NewTable = function (props) {
                 // filled pill, so there is nothing to swap to.
                 if (isEditable &&
                     (handleColumnShowsTags(col) || handleIsCellLive(row.id, col.key))) {
-                    var bareOverride = (_o = (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareListDescription) === null || _o === void 0 ? void 0 : _o.call(_m, col.key, cellValue);
+                    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);
                 }
@@ -1611,7 +1622,7 @@ var NewTable = function (props) {
                 // 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((_q = (_p = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _p === void 0 ? void 0 : _p.className) !== null && _q !== void 0 ? _q : ""), style: (_r = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _r === void 0 ? void 0 : _r.style }), props.newTabUrl && props.onClickRow ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl + row.id + ((_s = props.addNewTabUrl) !== null && _s !== void 0 ? _s : ""), 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))));
+                        : 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))));
             }),
             renderAddColumnCell(),
             renderActionColumnCell(row.id)));
@@ -1652,7 +1663,7 @@ var NewTable = function (props) {
                                         : __spreadArray(__spreadArray([], previous, true), [group.id], false);
                                 });
                             } },
-                            isCollapsed ? (react_2.default.createElement(solid_1.ChevronRightIcon, { className: "h-4 w-4" })) : (react_2.default.createElement(solid_1.ChevronDownIcon, { className: "h-4 w-4" })),
+                            isCollapsed ? (react_2.default.createElement(solid_2.ChevronRightIcon, { className: "h-4 w-4" })) : (react_2.default.createElement(solid_2.ChevronDownIcon, { className: "h-4 w-4" })),
                             react_2.default.createElement("span", null, group.title),
                             react_2.default.createElement("span", { className: "rounded-full bg-white/70 px-2 py-0.5 text-[11px] font-medium normal-case tracking-normal" }, memberIndexes.length)))),
                 !isCollapsed &&
@@ -1681,7 +1692,7 @@ var NewTable = function (props) {
                     "(Max. ",
                     props.maxSelectedCount,
                     " items)"))))); };
-        var renderCloseBtn = function () { return (react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_1.XMarkIcon, { className: "w-4 h-4" }), className: "!p-1 shrink-0 ".concat(props.darkMode
+        var renderCloseBtn = function () { return (react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_2.XMarkIcon, { className: "w-4 h-4" }), className: "!p-1 shrink-0 ".concat(props.darkMode
                 ? "hover:bg-gray-700 text-gray-400 hover:text-gray-200"
                 : "hover:bg-gray-100 text-gray-400 hover:text-gray-600"), onClick: function () { return handleSelectAllPages(false); } })); };
         var actionBtnClassName = "px-2 py-1 text-xs sm:text-sm whitespace-nowrap ".concat(props.darkMode ? "!text-gray-300 hover:!text-primary-300" : "!text-gray-600 hover:!text-primary-600");
@@ -1727,7 +1738,7 @@ var NewTable = function (props) {
             // no icon — the grab cursor hints it and the view settings panel carries
             // an explicit handle.
             var revealClassname = "opacity-0 transition-opacity group-hover/header:opacity-100";
-            var hideIcon = (advSettings === null || advSettings === void 0 ? void 0 : advSettings.onHideColumn) ? (react_2.default.createElement(solid_1.EyeSlashIcon, { "data-testid": "table-column-hide-".concat(col.key), className: "".concat(sortClassname, " ").concat(revealClassname), onClick: function (event) {
+            var hideIcon = (advSettings === null || advSettings === void 0 ? void 0 : advSettings.onHideColumn) ? (react_2.default.createElement(solid_2.EyeSlashIcon, { "data-testid": "table-column-hide-".concat(col.key), className: "".concat(sortClassname, " ").concat(revealClassname), onClick: function (event) {
                     var _a;
                     event.stopPropagation();
                     (_a = advSettings === null || advSettings === void 0 ? void 0 : advSettings.onHideColumn) === null || _a === void 0 ? void 0 : _a.call(advSettings, col.key);
@@ -1777,9 +1788,9 @@ 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_3.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, { 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_3.PlusIcon, { className: "h-5 w-5 text-gray" }), onClick: function () { return handleAddColumnModal("new"); } }))));
+                    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"); } }))));
         };
         if (!hasGroupHeaders) {
             return (react_2.default.createElement("thead", null,
@@ -1994,19 +2005,19 @@ var NewTable = function (props) {
                                         }
                                     } },
                                     react_2.default.createElement(textButton_1.TextButton, { text: "More details", className: "text-sm", onClick: function () { } }),
-                                    react_2.default.createElement(solid_1.ChevronRightIcon, { className: "ml-1 w-3 h-3 text-primary-500" }))) : props.onClickRow ? (react_2.default.createElement("div", { className: "flex items-center" },
+                                    react_2.default.createElement(solid_2.ChevronRightIcon, { className: "ml-1 w-3 h-3 text-primary-500" }))) : props.onClickRow ? (react_2.default.createElement("div", { className: "flex items-center" },
                                     react_2.default.createElement(textButton_1.TextButton, { text: "More details", className: "text-sm", onClick: function (e) {
                                             var _a;
                                             e.stopPropagation();
                                             (_a = props.onClickRow) === null || _a === void 0 ? void 0 : _a.call(props, row.id, row, spaceRow);
                                         } }),
-                                    react_2.default.createElement(solid_1.ChevronRightIcon, { className: "ml-1 w-3 h-3 text-primary-500" }))) : props.newTabUrl ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl + row.id + ((_f = props.addNewTabUrl) !== null && _f !== void 0 ? _f : ""), className: "flex items-center", linkType: props.linkType, custom: props.custom },
+                                    react_2.default.createElement(solid_2.ChevronRightIcon, { className: "ml-1 w-3 h-3 text-primary-500" }))) : props.newTabUrl ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl + row.id + ((_f = props.addNewTabUrl) !== null && _f !== void 0 ? _f : ""), className: "flex items-center", linkType: props.linkType, custom: props.custom },
                                     react_2.default.createElement(textButton_1.TextButton, { text: "More details", className: "text-sm", onClick: function () { } }),
-                                    react_2.default.createElement(solid_1.ChevronRightIcon, { className: "ml-1 w-3 h-3 text-primary-500" }))) : null,
+                                    react_2.default.createElement(solid_2.ChevronRightIcon, { className: "ml-1 w-3 h-3 text-primary-500" }))) : null,
                             });
                         }
-                        return (react_2.default.createElement("div", { key: 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_1.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), 
+                        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), 
                                 // 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,