blixify-ui-web 1.2.63 → 1.2.65

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

@@ -89,6 +89,7 @@ var solid_3 = require("@heroicons/react/20/solid");
 var outline_1 = require("@heroicons/react/24/outline");
 var react_1 = require("@headlessui/react");
 var axios_1 = __importDefault(require("axios"));
+var newPagination_1 = require("../newPagination");
 var react_2 = __importStar(require("react"));
 var collapse_1 = require("../../advanced/collapse");
 var popUp_1 = require("../../advanced/popUp");
@@ -162,15 +163,6 @@ var handleCheckModalEditEmpty = function (value) {
 // (tag/utils.ts) so a column's listSelectionColour drives both the chip in the
 // read view and the solid fill in the table. Yellow gets dark text — white on
 // yellow-500 fails contrast.
-var FILL_CLASS = {
-    default: "bg-primary-500 text-white",
-    red: "bg-red-500 text-white",
-    blue: "bg-blue-500 text-white",
-    green: "bg-green-500 text-white",
-    yellow: "bg-yellow-400 text-yellow-950",
-    indigo: "bg-indigo-500 text-white",
-    dark: "bg-gray-800 text-white",
-};
 // INFO: group band (tinted) and the accent bar its member rows carry
 var BAND_CLASS = {
     default: "bg-primary-50 text-primary-800 border-primary-500",
@@ -205,10 +197,9 @@ 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     var columns = (_b = (_a = props.columns) !== null && _a !== void 0 ? _a : props.header) !== null && _b !== void 0 ? _b : [];
     var defaultLimit = 10;
-    var defaultPageSize = 5;
     // INFO: flatten groupData columns so both mobile and desktop share the same
     // resolved column list — groupData parent becomes individual sub-columns.
     // Also filters out id/_id columns unless showId is explicitly enabled.
@@ -254,19 +245,19 @@ var NewTable = function (props) {
         flatColumns.length = 0;
         flatColumns.push.apply(flatColumns, __spreadArray(__spreadArray(__spreadArray([], leftCols, false), middleCols, false), rightCols, false));
     }
-    var _v = (0, react_2.useState)(props.fixedPagination ? true : false), isFixed = _v[0], setIsFixed = _v[1];
+    var _w = (0, react_2.useState)(props.fixedPagination ? true : false), isFixed = _w[0], setIsFixed = _w[1];
     //=====================================================================================
     // SECTION: Advanced Settings
     //=====================================================================================
-    var _w = (0, react_2.useState)(""), filterModal = _w[0], setFilterModal = _w[1];
-    var _x = (0, react_2.useState)(""), addColumnModal = _x[0], setAddColumnModal = _x[1];
+    var _x = (0, react_2.useState)(""), filterModal = _x[0], setFilterModal = _x[1];
+    var _y = (0, react_2.useState)(""), addColumnModal = _y[0], setAddColumnModal = _y[1];
     //=====================================================================================
     // SECTION: Editable & Addable cells
     //=====================================================================================
-    var _y = (0, react_2.useState)(""), editDataRowId = _y[0], setEditDataRowId = _y[1];
-    var _z = (0, react_2.useState)(""), editDataHeaderKey = _z[0], setEditDataHeaderKey = _z[1];
-    var _0 = (0, react_2.useState)(false), modalEditVisible = _0[0], setModalEditVisible = _0[1];
-    var _1 = (0, react_2.useState)([]), collapsedGroupIds = _1[0], setCollapsedGroupIds = _1[1];
+    var _z = (0, react_2.useState)(""), editDataRowId = _z[0], setEditDataRowId = _z[1];
+    var _0 = (0, react_2.useState)(""), editDataHeaderKey = _0[0], setEditDataHeaderKey = _0[1];
+    var _1 = (0, react_2.useState)(false), modalEditVisible = _1[0], setModalEditVisible = _1[1];
+    var _2 = (0, react_2.useState)([]), collapsedGroupIds = _2[0], setCollapsedGroupIds = _2[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
@@ -274,32 +265,8 @@ 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 _2 = (0, react_2.useState)(false), isDragSelecting = _2[0], setIsDragSelecting = _2[1];
-    var _3 = (0, react_2.useState)(0), copiedCount = _3[0], setCopiedCount = _3[1];
-    // INFO: the open colour palette for a filled list cell — which cell, and
-    // where to anchor the popover (viewport coordinates, so it escapes the
-    // table's overflow container)
-    var _4 = (0, react_2.useState)(null), paletteCell = _4[0], setPaletteCell = _4[1];
-    (0, react_2.useEffect)(function () {
-        if (!paletteCell)
-            return;
-        var handleClose = function () { return setPaletteCell(null); };
-        var handleKey = function (e) {
-            if (e.key === "Escape")
-                setPaletteCell(null);
-        };
-        // INFO: no scroll listener — opening the palette can itself scroll the
-        // table (the row switches to edit mode and its first input takes focus),
-        // and closing on that scroll would shut the palette as it appears
-        document.addEventListener("mousedown", handleClose);
-        document.addEventListener("keydown", handleKey);
-        window.addEventListener("resize", handleClose);
-        return function () {
-            document.removeEventListener("mousedown", handleClose);
-            document.removeEventListener("keydown", handleKey);
-            window.removeEventListener("resize", handleClose);
-        };
-    }, [paletteCell]);
+    var _3 = (0, react_2.useState)(false), isDragSelecting = _3[0], setIsDragSelecting = _3[1];
+    var _4 = (0, react_2.useState)(0), copiedCount = _4[0], setCopiedCount = _4[1];
     var _5 = (0, react_2.useState)({}), editDataValue = _5[0], setEditDataValue = _5[1];
     var _6 = (0, react_2.useState)(false), editDataIsLoading = _6[0], setEditDataIsLoading = _6[1];
     var _7 = (0, react_2.useState)(false), addData = _7[0], setAddData = _7[1];
@@ -331,7 +298,7 @@ var NewTable = function (props) {
         : "bg-white";
     var borderRadius = "rounded-2xl";
     var borderColor = props.darkMode ? "border-gray-700" : "border-gray-100";
-    var selectedRowBg = props.darkMode ? "bg-primary-900" : "bg-primary-50";
+    var selectedRowBg = props.darkMode ? "bg-gray-700" : "bg-primary-50";
     var rowHoverBg = props.darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100";
     var dividerColor = props.darkMode ? "divide-gray-700" : "divide-gray-100";
     var cellFontColor = props.darkMode ? "text-gray-200" : "text-gray-700";
@@ -445,10 +412,13 @@ var NewTable = function (props) {
             return false;
         return filtered.every(function (col) { return !col.type || utils_1.supportedTableAddList.includes(col.type); });
     };
+    // INFO: a list column with a palette edits through the ordinary Select, whose
+    // options render as the same coloured tags — one dropdown for every cell
+    var handleColumnShowsTags = function (col) { var _a; return ((_a = col.type) !== null && _a !== void 0 ? _a : "string") === "list" && !!col.listSelectionColour; };
     var handleConvertColumnToDataStructure = function (cols) {
         return cols.map(function (col) {
             var _a;
-            return (__assign(__assign({}, col), { id: col.key, name: col.title, type: (_a = col.type) !== null && _a !== void 0 ? _a : "string" }));
+            return (__assign(__assign({}, col), { id: col.key, name: col.title, type: (_a = col.type) !== null && _a !== void 0 ? _a : "string", showTagSelections: handleColumnShowsTags(col) }));
         });
     };
     var handleCreateFormInputRefs = function (type) {
@@ -762,7 +732,7 @@ var NewTable = function (props) {
     (0, react_2.useEffect)(function () {
         var _a, _b;
         var hasSelection = props.selectAll || ((_b = (_a = props.selectedIds) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
-        if (!hasSelection || paletteCell)
+        if (!hasSelection)
             return;
         var handleKey = function (e) {
             var _a, _b;
@@ -774,7 +744,7 @@ var NewTable = function (props) {
         };
         document.addEventListener("keydown", handleKey);
         return function () { return document.removeEventListener("keydown", handleKey); };
-    }, [props.selectAll, props.selectedIds, paletteCell]);
+    }, [props.selectAll, props.selectedIds]);
     // INFO: visible columns of the selected rows as TSV — header row first —
     // so a paste into Excel or Sheets lands one value per cell
     var handleCopySelection = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -1048,7 +1018,7 @@ var NewTable = function (props) {
     };
     var renderEditDataInputs = function (colIndex, col, rowData, rowId, rowBgClass, isHoverable) {
         var _a, _b, _c, _d;
-        var tempDS = __assign(__assign({}, col), { id: col.key, name: col.title, type: (_a = col.type) !== null && _a !== void 0 ? _a : "string" });
+        var tempDS = __assign(__assign({}, col), { id: col.key, name: col.title, type: (_a = col.type) !== null && _a !== void 0 ? _a : "string", showTagSelections: handleColumnShowsTags(col) });
         var editingRow = editDataRowId === rowId;
         return (react_2.default.createElement("td", { key: col.key + String(colIndex), 
             // INFO: pinned columns use whitespace-normal so text wraps within the fixed width
@@ -1144,7 +1114,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", 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_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") },
                     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")) }))));
     };
@@ -1184,7 +1154,7 @@ var NewTable = function (props) {
             }, className: "group ".concat(isSelected
                 ? selectedRowBg
                 : props.onClickRow
-                    ? "cursor-pointer ".concat(rowHoverBg)
+                    ? "cursor-pointer ".concat(isSelected ? "" : rowHoverBg)
                     : editDataIsLoading && editDataRowId === row.id
                         ? "animate-pulse"
                         : "", " ").concat(groupAccent
@@ -1202,7 +1172,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, _t, _u;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
                 var cellValue = spaceRow
                     ? spaceRow[col.key]
                     : resolveValue(row, col.key);
@@ -1218,8 +1188,7 @@ var NewTable = function (props) {
                     !!props.onObjectEdit;
                 var isEditable = ((_d = props.editable) === null || _d === void 0 ? void 0 : _d.active) &&
                     !isActionColumn &&
-                    !(((_f = (_e = props.selectedIds) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) > 0 ||
-                        props.selectAll) &&
+                    !(((_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 —
@@ -1229,25 +1198,20 @@ var NewTable = function (props) {
                 var fillColour = resolvedColType === "list" && !isActionColumn
                     ? handleGetListColour(col, rawListValue)
                     : undefined;
-                if (fillColour) {
-                    var canPickColour = !!((_g = props.editable) === null || _g === void 0 ? void 0 : _g.active) &&
-                        !(((_j = (_h = props.selectedIds) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0) > 0 ||
-                            props.selectAll);
-                    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", { "data-testid": "table-fill-".concat(col.key), "data-colour": fillColour, role: canPickColour ? "button" : undefined, tabIndex: canPickColour ? 0 : undefined, onClick: canPickColour
-                                ? function (e) {
-                                    e.stopPropagation();
-                                    var rect = e.currentTarget.getBoundingClientRect();
-                                    handleEditDataOnClick(row.id, col.key, row);
-                                    setPaletteCell({
-                                        rowId: row.id,
-                                        key: col.key,
-                                        top: rect.bottom + 4,
-                                        left: rect.left,
-                                        width: rect.width,
-                                    });
-                                }
-                                : undefined, className: "flex h-full min-h-[40px] items-center justify-center px-3 text-sm font-medium ".concat((_o = FILL_CLASS[fillColour]) !== null && _o !== void 0 ? _o : FILL_CLASS.default, " ").concat(canPickColour ? "cursor-pointer hover:brightness-95" : "") }, String(rawListValue))));
+                // 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
+                if (fillColour && !((_g = props.editable) === null || _g === void 0 ? void 0 : _g.active)) {
+                    // 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 });
+                    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 () { },
+                        }))));
                 }
                 if (isObjectEdit) {
                     return (react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(cellFontColor, " whitespace-nowrap") },
@@ -1269,18 +1233,15 @@ var NewTable = function (props) {
                             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 (isEditable) {
-                    var bareOverride = (_q = (_p = props.bareSettings) === null || _p === void 0 ? void 0 : _p.bareListDescription) === null || _q === void 0 ? void 0 : _q.call(_p, col.key, cellValue);
+                    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);
                     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", { key: col.key, "data-pin-key": leftPinned.includes(col.key) ||
-                        rightPinned.includes(col.key)
+                react_2.default.createElement("td", { key: col.key, "data-pin-key": leftPinned.includes(col.key) || rightPinned.includes(col.key)
                         ? col.key
-                        : undefined, className: "".concat(cellPadding, " 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((_s = (_r = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _r === void 0 ? void 0 : _r.className) !== null && _s !== void 0 ? _s : ""), style: (_t = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _t === void 0 ? void 0 : _t.style }, props.newTabUrl && props.onClickRow ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl +
-                        row.id +
-                        ((_u = props.addNewTabUrl) !== null && _u !== void 0 ? _u : ""), 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, " 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))));
             }),
             renderActionColumnCell(row.id)));
     };
@@ -1472,73 +1433,6 @@ var NewTable = function (props) {
                 });
             }))));
     };
-    var renderPageNumber = function (type) {
-        var _a, _b, _c, _d;
-        var pageNumberList = [];
-        var selectedBorderColor = props.darkMode
-            ? "border-primary-200"
-            : "border-primary-500";
-        var selectedFontColor = props.darkMode
-            ? "text-primary-200"
-            : "text-primary-500";
-        var basePageNumberClassname = "px-3 flex items-center h-full w-full text-sm font-medium cursor-pointer ";
-        if (type === "page") {
-            var pageOffset = Math.floor(((_a = props.pageIndex) !== null && _a !== void 0 ? _a : 0) / defaultPageSize);
-            var _loop_1 = function (i) {
-                var pageNumberClassName = basePageNumberClassname +
-                    (props.pageIndex === i
-                        ? "border rounded-xl ".concat(selectedBorderColor, " ").concat(selectedFontColor, " ").concat(bgColor)
-                        : "".concat(cellFontColor));
-                pageNumberList.push(react_2.default.createElement("div", { key: i, "aria-current": "page", className: pageNumberClassName, onClick: props.pageIndex !== i
-                        ? function () { var _a; return (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, i); }
-                        : function () { } }, i + 1));
-            };
-            for (var i = pageOffset * defaultPageSize; i * ((_b = props.limit) !== null && _b !== void 0 ? _b : defaultLimit) < ((_c = props.size) !== null && _c !== void 0 ? _c : props.data.length) &&
-                i < pageOffset * defaultPageSize + defaultPageSize; i++) {
-                _loop_1(i);
-            }
-        }
-        else if (type === "cursor") {
-            pageNumberList.push(react_2.default.createElement("div", { "aria-current": "page", className: "".concat(basePageNumberClassname, " ").concat(selectedBorderColor, " ").concat(selectedFontColor) }, ((_d = props.pageIndex) !== null && _d !== void 0 ? _d : 0) + 1));
-        }
-        return pageNumberList;
-    };
-    var renderPagination = function () {
-        var _a, _b, _c;
-        var nextDataAvailable = ((_a = props.size) !== null && _a !== void 0 ? _a : 0) >
-            (((_b = props.pageIndex) !== null && _b !== void 0 ? _b : 0) + 1) * ((_c = props.limit) !== null && _c !== void 0 ? _c : defaultLimit) ||
-            props.cursor;
-        switch (props.paginationType) {
-            case "cursor":
-                return (react_2.default.createElement("div", { className: "h-8 flex items-center justify-center gap-x-0.5", "aria-label": "Pagination" },
-                    react_2.default.createElement("button", { type: "button", disabled: props.pageIndex === 0 ? true : false, className: "p-2 ".concat(cellFontColor, " ").concat(props.pageIndex === 0 ? "cursor-not-allowed" : ""), onClick: function () { var _a; return (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, "prev"); } },
-                        react_2.default.createElement(solid_1.ChevronLeftIcon, { className: "h-4 w-4", "aria-hidden": "true" })),
-                    renderPageNumber("cursor"),
-                    react_2.default.createElement("button", { type: "button", disabled: nextDataAvailable ? false : true, className: "p-2 ".concat(cellFontColor, " ").concat(nextDataAvailable ? "" : "cursor-not-allowed"), onClick: function () { var _a; return (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, "next"); } },
-                        react_2.default.createElement(solid_1.ChevronRightIcon, { className: "h-4 w-4", "aria-hidden": "true" }))));
-            case "page":
-                var disablePrev = props.pageIndex === 0 ? true : false;
-                return (react_2.default.createElement("div", { className: "h-8 flex items-center justify-center gap-x-0.5", "aria-label": "Pagination" },
-                    react_2.default.createElement("button", { type: "button", disabled: disablePrev, className: "p-2 ".concat(cellFontColor, " ").concat(disablePrev ? "cursor-not-allowed" : ""), onClick: function () { var _a, _b; return (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, ((_b = props.pageIndex) !== null && _b !== void 0 ? _b : 0) - 1); } },
-                        react_2.default.createElement(solid_1.ChevronLeftIcon, { className: "h-4 w-4", "aria-hidden": "true" })),
-                    renderPageNumber("page"),
-                    react_2.default.createElement("button", { type: "button", disabled: nextDataAvailable ? false : true, className: "p-2 ".concat(cellFontColor, " ").concat(nextDataAvailable ? "" : "cursor-not-allowed"), onClick: function () { var _a, _b; return (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, ((_b = props.pageIndex) !== null && _b !== void 0 ? _b : 0) + 1); } },
-                        react_2.default.createElement(solid_1.ChevronRightIcon, { className: "h-4 w-4", "aria-hidden": "true" }))));
-            default:
-                return react_2.default.createElement(react_2.default.Fragment, null);
-        }
-    };
-    var renderPageResult = function () {
-        var _a, _b;
-        var text = "";
-        if (props.paginationType === "page") {
-            text = "Showing ".concat((_a = props.customPaginationSize) !== null && _a !== void 0 ? _a : props.size, " result(s)");
-        }
-        else {
-            text = "Showing ".concat((_b = props.customPaginationSize) !== null && _b !== void 0 ? _b : props.data.length, " result(s)");
-        }
-        return react_2.default.createElement("p", { className: "text-xs ".concat(cellFontColor) }, text);
-    };
     var renderCheckbox = function (checked, onChange, onClick, extraClassName) { return (react_2.default.createElement("input", { type: "checkbox", checked: checked, onChange: onChange, onClick: onClick, className: "rounded ".concat(props.darkMode ? "border-gray-400" : "border-gray-500", " ").concat(bgColor, " focus:ring-0 focus:ring-offset-0 focus:outline-offset-0 checked:text-primary-400 ").concat(extraClassName !== null && extraClassName !== void 0 ? extraClassName : "") })); };
     if (props.mobileView) {
         var isIdLike_1 = function (c) {
@@ -1547,7 +1441,9 @@ var NewTable = function (props) {
         var titleCol_1 = (_k = flatColumns.find(function (c) { return !isIdLike_1(c); })) !== null && _k !== void 0 ? _k : 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 ? "bg-gray-900" : "";
+        var headerBgColor_1 = props.darkMode
+            ? ((_l = props.darkModeBg) !== null && _l !== void 0 ? _l : "bg-gray-900")
+            : "";
         var headerFontColor_1 = props.darkMode ? "text-white" : "";
         // INFO: renders tag + trailing text adjacent to the Collapse title
         var renderMobileTitleAdjacent_1 = function (row, spaceRow) {
@@ -1616,14 +1512,14 @@ var NewTable = function (props) {
                 })))));
         };
         return (react_2.default.createElement("div", null,
-            react_2.default.createElement("div", { className: "w-full ".concat(((_l = props.mobileTooltip) === null || _l === void 0 ? void 0 : _l.tooltip) ? "overflow-visible" : "overflow-hidden", " border ").concat(borderRadius, " ").concat(borderColor, " ").concat(bgColor, " shadow-sm divide-y ").concat(dividerColor, " ").concat((_m = props.className) !== null && _m !== void 0 ? _m : "") },
+            react_2.default.createElement("div", { className: "w-full ".concat(((_m = props.mobileTooltip) === null || _m === void 0 ? void 0 : _m.tooltip) ? "overflow-visible" : "overflow-hidden", " border ").concat(borderRadius, " ").concat(borderColor, " ").concat(bgColor, " shadow-sm divide-y ").concat(dividerColor, " ").concat((_o = props.className) !== null && _o !== void 0 ? _o : "") },
                 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) }, (_o = props.emptyTitle) !== null && _o !== void 0 ? _o : "No items")),
+                !props.loading && props.data.length === 0 && (react_2.default.createElement("p", { className: "p-4 text-center text-sm ".concat(cellFontColor) }, (_p = props.emptyTitle) !== null && _p !== void 0 ? _p : "No items")),
                 !props.loading &&
                     props.data.map(function (row, index) {
                         var _a, _b, _c, _d, _e, _f, _g;
@@ -1669,57 +1565,18 @@ var NewTable = function (props) {
                             ((_g = props.mobileTooltip) === null || _g === void 0 ? void 0 : _g.tooltip) &&
                                 renderMobileTooltipContent_1(row, spaceRow) && (react_2.default.createElement("div", { className: "absolute left-1/2 -translate-x-1/2 top-full mt-1 z-50 hidden group-hover/tooltip:block" }, renderMobileTooltipContent_1(row, spaceRow)))));
                     })),
-            !props.hidePagination && props.paginationType && (react_2.default.createElement("div", { className: "mt-2 flex items-center justify-between ".concat(props.fixedPagination
-                    ? "pagination-container w-full sm:px-6 ".concat(borderColor, " ").concat(isFixed
-                        ? "fixed bottom-0 left-0 z-10"
-                        : "sticky top-0 left-0")
-                    : "") },
-                renderPageResult(),
-                renderPagination())),
+            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 sm:px-6 ".concat(borderColor, " ").concat(isFixed ? "fixed bottom-0 left-0 z-10" : "sticky top-0 left-0")
+                    : "") }),
             renderFloatingActionBar()));
     }
-    return (react_2.default.createElement("div", { className: "w-full ".concat((_p = props.className) !== null && _p !== void 0 ? _p : "") },
+    return (react_2.default.createElement("div", { className: "w-full ".concat((_q = props.className) !== null && _q !== void 0 ? _q : "") },
         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(""); } }),
-        paletteCell &&
-            (function () {
-                var _a;
-                var column = flatColumns.find(function (eachCol) { return eachCol.key === paletteCell.key; });
-                var row = props.data.find(function (eachRow) { return eachRow.id === paletteCell.rowId; });
-                if (!column || !row)
-                    return null;
-                var current = resolveValue(row, column.key);
-                return (react_2.default.createElement("div", { "data-testid": "table-fill-palette", role: "listbox", className: "fixed z-50 grid grid-cols-2 gap-1.5 rounded-lg border border-gray-200 bg-white p-2 shadow-xl", style: {
-                        top: paletteCell.top,
-                        left: paletteCell.left,
-                        minWidth: Math.max(paletteCell.width, 200),
-                    }, onMouseDown: function (e) { return e.stopPropagation(); } }, ((_a = column.listSelection) !== null && _a !== void 0 ? _a : []).map(function (option, index) {
-                    var _a, _b;
-                    var colour = (_a = column.listSelectionColour) === null || _a === void 0 ? void 0 : _a[index];
-                    var fillClass = colour
-                        ? ((_b = FILL_CLASS[colour]) !== null && _b !== void 0 ? _b : FILL_CLASS.default)
-                        : "bg-gray-100 text-gray-700";
-                    return (react_2.default.createElement("button", { key: option, type: "button", role: "option", "aria-selected": option === current, "data-testid": "table-fill-option-".concat(option), className: "rounded-md px-3 py-2 text-center text-sm font-medium ".concat(fillClass, " hover:brightness-95 ").concat(option === current
-                            ? "ring-2 ring-primary-500 ring-offset-1"
-                            : ""), onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
-                            var _a;
-                            return __generator(this, function (_b) {
-                                switch (_b.label) {
-                                    case 0:
-                                        setPaletteCell(null);
-                                        return [4 /*yield*/, handleEditDataOnBlur(column.key, __assign(__assign({}, row), (_a = {}, _a[column.key] = option, _a)))];
-                                    case 1:
-                                        _b.sent();
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); } }, option));
-                })));
-            })(),
-        react_2.default.createElement(modal_1.Modal, { open: modalEditVisible, title: (_r = (_q = flatColumns.find(function (eachCol) { return eachCol.key === editDataHeaderKey; })) === null || _q === void 0 ? void 0 : _q.title) !== null && _r !== void 0 ? _r : "Edit", onClose: handleModalEditClose, renderContent: function () {
+        react_2.default.createElement(modal_1.Modal, { open: modalEditVisible, title: (_s = (_r = flatColumns.find(function (eachCol) { return eachCol.key === editDataHeaderKey; })) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : "Edit", onClose: handleModalEditClose, renderContent: function () {
                 var _a, _b, _c, _d;
                 var selectedCol = flatColumns.find(function (eachCol) { return eachCol.key === editDataHeaderKey; });
                 if (!selectedCol)
@@ -1760,7 +1617,7 @@ var NewTable = function (props) {
                 return (react_2.default.createElement("div", null, (_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.renderAddColumnElements) === null || _b === void 0 ? void 0 : _b.call(_a, addColumnModal, function (id) { return handleAddColumnModal(id); })));
             }, onClose: function () { return handleAddColumnModal(""); } }),
         react_2.default.createElement(scrollShadow_1.ScrollShadow, { className: "w-full overflow-x-auto ".concat(borderRadius, " border ").concat(borderColor, " ").concat(bgColor, " shadow-sm"), shadowFrom: props.darkMode ? "from-gray-900" : "from-white" },
-            (props.selectAll || ((_t = (_s = props.selectedIds) === null || _s === void 0 ? void 0 : _s.length) !== null && _t !== void 0 ? _t : 0) > 0) &&
+            (props.selectAll || ((_u = (_t = props.selectedIds) === null || _t === void 0 ? void 0 : _t.length) !== null && _u !== void 0 ? _u : 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" },
@@ -1776,13 +1633,11 @@ 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") }, (_u = props.emptyTitle) !== null && _u !== void 0 ? _u : "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") }, (_v = props.emptyTitle) !== null && _v !== void 0 ? _v : "No items")),
             renderAddableSection()),
-        !props.hidePagination && props.paginationType && (react_2.default.createElement("div", { className: "mt-2 flex items-center justify-between ".concat(props.fixedPagination
+        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")
-                : "") },
-            renderPageResult(),
-            renderPagination())),
+                : "") }),
         renderFloatingActionBar()));
 };
 exports.NewTable = NewTable;