blixify-ui-web 1.2.60 → 1.2.63

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

@@ -102,6 +102,7 @@ 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");
 // 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) {
@@ -157,6 +158,52 @@ var handleCheckModalEditEmpty = function (value) {
     }
     return false;
 };
+// INFO: literal class maps so Tailwind emits them. Keys match the Tag palette
+// (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",
+    red: "bg-red-50 text-red-800 border-red-500",
+    blue: "bg-blue-50 text-blue-800 border-blue-500",
+    green: "bg-green-50 text-green-800 border-green-500",
+    yellow: "bg-yellow-50 text-yellow-800 border-yellow-500",
+    indigo: "bg-indigo-50 text-indigo-800 border-indigo-500",
+    dark: "bg-gray-100 text-gray-800 border-gray-700",
+    none: "bg-gray-50 text-gray-700 border-gray-300",
+};
+var ACCENT_CLASS = {
+    default: "border-primary-500",
+    red: "border-red-500",
+    blue: "border-blue-500",
+    green: "border-green-500",
+    yellow: "border-yellow-500",
+    indigo: "border-indigo-500",
+    dark: "border-gray-700",
+    none: "border-gray-300",
+};
+// INFO: the colour a list column assigns to a value, or undefined when the
+// column carries no palette — undefined means "render as before"
+var handleGetListColour = function (col, value) {
+    var column = col;
+    if (!Array.isArray(column.listSelection) ||
+        !Array.isArray(column.listSelectionColour))
+        return undefined;
+    var index = column.listSelection.indexOf(value);
+    if (index < 0)
+        return undefined;
+    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 columns = (_b = (_a = props.columns) !== null && _a !== void 0 ? _a : props.header) !== null && _b !== void 0 ? _b : [];
@@ -219,18 +266,52 @@ var NewTable = function (props) {
     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)({}), editDataValue = _1[0], setEditDataValue = _1[1];
-    var _2 = (0, react_2.useState)(false), editDataIsLoading = _2[0], setEditDataIsLoading = _2[1];
-    var _3 = (0, react_2.useState)(false), addData = _3[0], setAddData = _3[1];
-    var _4 = (0, react_2.useState)({}), addDataValue = _4[0], setAddDataValue = _4[1];
-    var _5 = (0, react_2.useState)({}), referencesOptions = _5[0], setReferencesOptions = _5[1];
+    var _1 = (0, react_2.useState)([]), collapsedGroupIds = _1[0], setCollapsedGroupIds = _1[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
+    // mouse-up must be swallowed or it would toggle that row straight back.
+    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 _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];
+    var _8 = (0, react_2.useState)({}), addDataValue = _8[0], setAddDataValue = _8[1];
+    var _9 = (0, react_2.useState)({}), referencesOptions = _9[0], setReferencesOptions = _9[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 _6 = (0, react_2.useState)({}), referencesDetails = _6[0], setReferencesDetails = _6[1];
-    var _7 = (0, react_2.useState)(false), referenceLoading = _7[0], setReferenceLoading = _7[1];
+    var _10 = (0, react_2.useState)({}), referencesDetails = _10[0], setReferencesDetails = _10[1];
+    var _11 = (0, react_2.useState)(false), referenceLoading = _11[0], setReferenceLoading = _11[1];
     // INFO: measured pixel widths for pinned columns without an explicit width.
-    var _8 = (0, react_2.useState)({}), measuredPinWidths = _8[0], setMeasuredPinWidths = _8[1];
+    var _12 = (0, react_2.useState)({}), measuredPinWidths = _12[0], setMeasuredPinWidths = _12[1];
     var editDataValueRef = (0, react_2.useRef)({});
     var editDataRowIdRef = (0, react_2.useRef)("");
     var editDataInputRefs = (0, react_2.useRef)([]);
@@ -258,6 +339,10 @@ var NewTable = function (props) {
         ? "text-primary-300 font-medium"
         : "text-primary-600 font-medium";
     var cellPadding = "px-4 py-2";
+    // INFO: an inline input carries its own vertical padding, so the cell around
+    // it keeps only enough to clear the hover border — this is what holds an
+    // editable row to roughly the height of a read-only one
+    var editCellPadding = "px-4 py-0.5";
     var tableHeaderBgColor = props.tableHeaderBgColor
         ? props.tableHeaderBgColor
         : props.darkMode
@@ -610,9 +695,134 @@ var NewTable = function (props) {
     var handleFilterModal = function (id) {
         setFilterModal(id);
     };
+    var handleSelectRange = function (fromIndex, toIndex, mode, base) {
+        if (!props.handleSelectedIds)
+            return;
+        var _a = fromIndex <= toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex], low = _a[0], high = _a[1];
+        var rangeIds = props.data
+            .slice(low, high + 1)
+            .map(function (eachRow) { return eachRow.id; });
+        if (mode === "remove") {
+            props.handleSelectedIds(base.filter(function (eachId) { return !rangeIds.includes(eachId); }));
+            return;
+        }
+        var next = __spreadArray([], base, true);
+        rangeIds.forEach(function (eachId) {
+            if (next.includes(eachId))
+                return;
+            if (props.maxSelectedCount && next.length >= props.maxSelectedCount)
+                return;
+            next.push(eachId);
+        });
+        props.handleSelectedIds(next);
+    };
+    var handleDragSelectStart = function (rowId, e) {
+        var _a;
+        if (props.singleSelect ||
+            props.selectAll ||
+            !props.handleSelectedIds ||
+            e.button !== 0 ||
+            e.shiftKey)
+            return;
+        // INFO: stop the browser from starting a text selection as the pointer
+        // sweeps down the column
+        e.preventDefault();
+        var startIndex = props.data.findIndex(function (eachRow) { return eachRow.id === rowId; });
+        if (startIndex < 0)
+            return;
+        var base = (_a = props.selectedIds) !== null && _a !== void 0 ? _a : [];
+        var mode = base.includes(rowId) ? "remove" : "add";
+        dragSelectRef.current = { startIndex: startIndex, mode: mode, base: base };
+        suppressNextClickRef.current = true;
+        lastSelectedRowRef.current = rowId;
+        setIsDragSelecting(true);
+        handleSelectRange(startIndex, startIndex, mode, base);
+    };
+    var handleDragSelectOver = function (rowId) {
+        var drag = dragSelectRef.current;
+        if (!drag)
+            return;
+        var overIndex = props.data.findIndex(function (eachRow) { return eachRow.id === rowId; });
+        if (overIndex < 0)
+            return;
+        handleSelectRange(drag.startIndex, overIndex, drag.mode, drag.base);
+    };
+    (0, react_2.useEffect)(function () {
+        if (!isDragSelecting)
+            return;
+        var handleEnd = function () {
+            dragSelectRef.current = null;
+            setIsDragSelecting(false);
+        };
+        document.addEventListener("mouseup", handleEnd);
+        return function () { return document.removeEventListener("mouseup", handleEnd); };
+    }, [isDragSelecting]);
+    // INFO: Esc drops the whole selection, the way it drops a range in a sheet.
+    // When the colour palette is open Esc closes that instead (its own handler).
+    (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)
+            return;
+        var handleKey = function (e) {
+            var _a, _b;
+            if (e.key !== "Escape")
+                return;
+            (_a = props.handleSelectAll) === null || _a === void 0 ? void 0 : _a.call(props, false);
+            (_b = props.handleSelectedIds) === null || _b === void 0 ? void 0 : _b.call(props, []);
+            lastSelectedRowRef.current = null;
+        };
+        document.addEventListener("keydown", handleKey);
+        return function () { return document.removeEventListener("keydown", handleKey); };
+    }, [props.selectAll, props.selectedIds, paletteCell]);
+    // 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 () {
+        var columns, rowIndexes, lines, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    columns = flatColumns.filter(function (eachCol) { return !(eachCol.key === "update" && !eachCol.type); });
+                    rowIndexes = props.data
+                        .map(function (_eachRow, index) { return index; })
+                        .filter(function (index) {
+                        var _a;
+                        return props.selectAll ||
+                            ((_a = props.selectedIds) !== null && _a !== void 0 ? _a : []).includes(props.data[index].id);
+                    });
+                    lines = __spreadArray([
+                        columns.map(function (eachCol) { var _a; return (_a = eachCol.title) !== null && _a !== void 0 ? _a : eachCol.key; }).join("\t")
+                    ], rowIndexes.map(function (index) {
+                        return columns
+                            .map(function (eachCol) {
+                            var _a;
+                            return resolveValueToString(eachCol.key, (_a = props.spaceData) === null || _a === void 0 ? void 0 : _a[index], props.data[index]).replace(/[\t\n\r]+/g, " ");
+                        })
+                            .join("\t");
+                    }), true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(lines.join("\n"))];
+                case 2:
+                    _a.sent();
+                    setCopiedCount(rowIndexes.length);
+                    setTimeout(function () { return setCopiedCount(0); }, 1500);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _a.sent();
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
     var handleSelectRow = function (rowId, e) {
         var _a, _b;
         e.stopPropagation();
+        if (suppressNextClickRef.current) {
+            suppressNextClickRef.current = false;
+            return;
+        }
         // INFO: deactivate "select all pages" mode before doing individual row toggle
         if (props.selectAll) {
             (_a = props.handleSelectAll) === null || _a === void 0 ? void 0 : _a.call(props, false);
@@ -625,6 +835,15 @@ var NewTable = function (props) {
         }
         else {
             var current = (_b = props.selectedIds) !== null && _b !== void 0 ? _b : [];
+            if (e.shiftKey && lastSelectedRowRef.current) {
+                var fromIndex = props.data.findIndex(function (eachRow) { return eachRow.id === lastSelectedRowRef.current; });
+                var toIndex = props.data.findIndex(function (eachRow) { return eachRow.id === rowId; });
+                if (fromIndex >= 0 && toIndex >= 0) {
+                    handleSelectRange(fromIndex, toIndex, "add", current);
+                    return;
+                }
+            }
+            lastSelectedRowRef.current = rowId;
             var idx = current.indexOf(rowId);
             // INFO: allow deselect, block new selection when maxSelectedCount is reached
             if (idx < 0 &&
@@ -833,7 +1052,7 @@ var NewTable = function (props) {
         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
-            className: "".concat(cellPadding, " ").concat(getPinProps(col.key, false) ? "" : "whitespace-nowrap", " text-sm ").concat(cellFontColor, " ").concat((_c = (_b = getPinProps(col.key, false, rowBgClass, isHoverable)) === null || _b === void 0 ? void 0 : _b.className) !== null && _c !== void 0 ? _c : ""), style: (_d = getPinProps(col.key, false, rowBgClass, isHoverable)) === null || _d === void 0 ? void 0 : _d.style },
+            className: "".concat(editCellPadding, " ").concat(getPinProps(col.key, false) ? "" : "whitespace-nowrap", " text-sm ").concat(cellFontColor, " ").concat((_c = (_b = getPinProps(col.key, false, rowBgClass, isHoverable)) === null || _b === void 0 ? void 0 : _b.className) !== null && _c !== void 0 ? _c : ""), style: (_d = getPinProps(col.key, false, rowBgClass, isHoverable)) === null || _d === void 0 ? void 0 : _d.style },
             react_2.default.createElement("div", { className: "w-max p-[1px]", onClick: function (e) {
                     e.stopPropagation();
                     handleEditDataOnClick(rowId, col.key, rowData);
@@ -948,12 +1167,164 @@ var NewTable = function (props) {
     // INFO: true when maxSelectedCount is set and the current selection has reached the limit
     var isMaxReached = !!props.maxSelectedCount &&
         ((_j = (_h = props.selectedIds) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 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) {
+        var _a, _b, _c, _d, _e;
+        var spaceRow = (_a = props.spaceData) === null || _a === void 0 ? void 0 : _a[index];
+        var isSelected = ((_c = (_b = props.selectedIds) === null || _b === void 0 ? void 0 : _b.includes(row.id)) !== null && _c !== void 0 ? _c : false) ||
+            ((_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) {
+                if (props.onClickRow) {
+                    props.onClickRow(row.id, row, spaceRow);
+                }
+                e.preventDefault();
+            }, className: "group ".concat(isSelected
+                ? selectedRowBg
+                : props.onClickRow
+                    ? "cursor-pointer ".concat(rowHoverBg)
+                    : editDataIsLoading && editDataRowId === row.id
+                        ? "animate-pulse"
+                        : "", " ").concat(groupAccent
+                ? "border-l-4 ".concat((_e = ACCENT_CLASS[groupAccent]) !== null && _e !== void 0 ? _e : ACCENT_CLASS.default)
+                : "") },
+            props.checkbox && (react_2.default.createElement("td", { className: "w-10 ".concat(cellPadding, " ").concat(hasPinColumns ? "".concat(rowBgClass, " ").concat(isRowHoverable ? (props.darkMode ? "group-hover:bg-gray-700" : "group-hover:bg-gray-100") : "") : ""), style: hasPinColumns
+                    ? {
+                        position: "sticky",
+                        left: 0,
+                        zIndex: 1,
+                        width: CHECKBOX_WIDTH,
+                        minWidth: CHECKBOX_WIDTH,
+                    }
+                    : undefined, onClick: function (e) { return handleSelectRow(row.id, e); }, onMouseDown: function (e) { return handleDragSelectStart(row.id, e); }, onMouseEnter: function () { return handleDragSelectOver(row.id); } }, renderCheckbox(isSelected, function () { }, undefined, isMaxReached && !isSelected
+                ? "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 cellValue = spaceRow
+                    ? 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;
+                var isModalEdit = ((_b = props.editable) === null || _b === void 0 ? void 0 : _b.active) &&
+                    !isActionColumn &&
+                    utils_1.supportedModalEditList.includes(resolvedColType);
+                var isObjectEdit = ((_c = props.editable) === null || _c === void 0 ? void 0 : _c.active) &&
+                    !isActionColumn &&
+                    resolvedColType === "object" &&
+                    !!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) &&
+                    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;
+                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))));
+                }
+                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" }))));
+                }
+                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);
+                    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)
+                        ? 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))));
+            }),
+            renderActionColumnCell(row.id)));
+    };
+    // INFO: with groups, each group is a tinted band row (chevron, title, count)
+    // followed by its member rows; collapsing a band hides them. Without groups,
+    // the plain row list.
+    var renderDesktopRows = function () {
+        if (!props.groups || props.groups.length === 0) {
+            return props.data.map(function (row, index) { return renderDesktopRow(row, index); });
+        }
+        var indexById = new Map(props.data.map(function (row, index) { return [row.id, index]; }));
+        var columnCount = flatColumns.length + (props.checkbox ? 1 : 0) + 1;
+        return props.groups.map(function (group) {
+            var _a, _b;
+            var colourKey = (_a = group.colour) !== null && _a !== void 0 ? _a : "none";
+            var isCollapsed = collapsedGroupIds.includes(group.id);
+            var memberIndexes = group.rowIds
+                .map(function (rowId) { return indexById.get(rowId); })
+                .filter(function (rowIndex) { return rowIndex !== undefined; });
+            return (react_2.default.createElement(react_2.default.Fragment, { key: "group-".concat(group.id) },
+                react_2.default.createElement("tr", { "data-testid": "table-group-".concat(group.id), "data-collapsed": isCollapsed ? "true" : "false", className: "border-l-4 ".concat((_b = BAND_CLASS[colourKey]) !== null && _b !== void 0 ? _b : BAND_CLASS.none) },
+                    react_2.default.createElement("td", { colSpan: columnCount, className: "px-3 py-2" },
+                        react_2.default.createElement("button", { type: "button", className: "flex w-full items-center gap-x-2 text-left text-xs font-semibold uppercase tracking-wide", onClick: function (e) {
+                                e.stopPropagation();
+                                setCollapsedGroupIds(function (previous) {
+                                    return previous.includes(group.id)
+                                        ? previous.filter(function (eachId) { return eachId !== group.id; })
+                                        : __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" })),
+                            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 &&
+                    memberIndexes.map(function (rowIndex) {
+                        return renderDesktopRow(props.data[rowIndex], rowIndex, colourKey);
+                    })));
+        });
+    };
     var renderFloatingActionBar = function () {
         var _a, _b, _c, _d, _e;
-        if (!((_a = props.multiActionFloatingBtns) === null || _a === void 0 ? void 0 : _a.length))
-            return null;
-        var visibleBtns = props.multiActionFloatingBtns.filter(function (btn) { return !btn.hide; });
-        if (visibleBtns.length === 0)
+        var visibleBtns = ((_a = props.multiActionFloatingBtns) !== null && _a !== void 0 ? _a : []).filter(function (btn) { return !btn.hide; });
+        var canCopy = props.enableCopy !== false;
+        if (visibleBtns.length === 0 && !canCopy)
             return null;
         var hasSelection = props.selectAll || ((_c = (_b = props.selectedIds) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0;
         if (!hasSelection)
@@ -972,11 +1343,12 @@ var NewTable = function (props) {
         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
                 ? "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 renderActionBtns = function () {
-            return props
-                .multiActionFloatingBtns.filter(function (btn) { return !btn.hide; })
-                .map(function (btn) { return (react_2.default.createElement(textButton_1.TextButton, { key: btn.id, text: btn.btnText, className: "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"), onClick: function () { return btn.onClick(btn.id); } })); });
-        };
+        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");
+        var renderActionBtns = function () { return (react_2.default.createElement(react_2.default.Fragment, null,
+            visibleBtns.map(function (btn) { return (react_2.default.createElement(textButton_1.TextButton, { key: btn.id, text: btn.btnText, className: actionBtnClassName, onClick: function () { return btn.onClick(btn.id); } })); }),
+            canCopy && (react_2.default.createElement(textButton_1.TextButton, { key: "copy", id: "dtw-copy-selection", text: copiedCount > 0 ? "Copied ".concat(copiedCount) : "Copy", className: actionBtnClassName, onClick: function () {
+                    handleCopySelection();
+                } })))); };
         var pillBase = "shadow-xl ".concat(borderRadius, " ").concat(bgColor, " border-2 ").concat(props.darkMode ? "border-primary-300" : "border-primary-500");
         return (react_2.default.createElement("div", { className: "fixed ".concat(props.multiActionFloatingOffset || "bottom-10", " inset-x-4 z-10 flex justify-center pointer-events-none") },
             react_2.default.createElement("div", { className: "sm:hidden flex flex-col w-full px-4 py-2.5 pointer-events-auto ".concat(pillBase) },
@@ -1312,6 +1684,41 @@ var NewTable = function (props) {
                 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 () {
                 var _a, _b, _c, _d;
                 var selectedCol = flatColumns.find(function (eachCol) { return eachCol.key === editDataHeaderKey; });
@@ -1352,14 +1759,14 @@ var NewTable = function (props) {
                 var _a, _b;
                 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("div", { className: "w-full overflow-x-auto ".concat(borderRadius, " border ").concat(borderColor, " ").concat(bgColor, " shadow-sm") },
+        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.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" },
                 renderSelectedCount(),
                 props.multiActionButton)),
-            react_2.default.createElement("table", { className: "w-full", ref: tableRef },
+            react_2.default.createElement("table", { className: "w-full ".concat(isDragSelecting ? "select-none" : ""), ref: tableRef },
                 renderTableHeader(),
                 react_2.default.createElement("tbody", { className: "divide-y ".concat(dividerColor) },
                     props.loading &&
@@ -1367,93 +1774,7 @@ var NewTable = function (props) {
                             props.checkbox && react_2.default.createElement("td", { className: "w-10 ".concat(cellPadding) }),
                             flatColumns.map(function (col) { return (react_2.default.createElement("td", { key: col.key, className: cellPadding },
                                 react_2.default.createElement("div", { className: "h-5 rounded-md animate-pulse ".concat(props.darkMode ? "bg-gray-700" : "bg-gray-200") }))); }))); }),
-                    !props.loading &&
-                        props.data.map(function (row, index) {
-                            var _a, _b, _c, _d;
-                            var spaceRow = (_a = props.spaceData) === null || _a === void 0 ? void 0 : _a[index];
-                            var isSelected = ((_c = (_b = props.selectedIds) === null || _b === void 0 ? void 0 : _b.includes(row.id)) !== null && _c !== void 0 ? _c : false) ||
-                                ((_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) {
-                                    if (props.onClickRow) {
-                                        props.onClickRow(row.id, row, spaceRow);
-                                    }
-                                    e.preventDefault();
-                                }, className: "group ".concat(isSelected
-                                    ? selectedRowBg
-                                    : props.onClickRow
-                                        ? "cursor-pointer ".concat(rowHoverBg)
-                                        : editDataIsLoading && editDataRowId === row.id
-                                            ? "animate-pulse"
-                                            : "") },
-                                props.checkbox && (react_2.default.createElement("td", { className: "w-10 ".concat(cellPadding, " ").concat(hasPinColumns ? "".concat(rowBgClass, " ").concat(isRowHoverable ? (props.darkMode ? "group-hover:bg-gray-700" : "group-hover:bg-gray-100") : "") : ""), style: hasPinColumns
-                                        ? {
-                                            position: "sticky",
-                                            left: 0,
-                                            zIndex: 1,
-                                            width: CHECKBOX_WIDTH,
-                                            minWidth: CHECKBOX_WIDTH,
-                                        }
-                                        : undefined, onClick: function (e) { return handleSelectRow(row.id, e); } }, renderCheckbox(isSelected, function () { }, undefined, isMaxReached && !isSelected
-                                    ? "opacity-50 cursor-not-allowed"
-                                    : ""))),
-                                flatColumns.map(function (col, colIndex) {
-                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-                                    var cellValue = spaceRow
-                                        ? 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;
-                                    var isModalEdit = ((_b = props.editable) === null || _b === void 0 ? void 0 : _b.active) &&
-                                        !isActionColumn &&
-                                        utils_1.supportedModalEditList.includes(resolvedColType);
-                                    var isObjectEdit = ((_c = props.editable) === null || _c === void 0 ? void 0 : _c.active) &&
-                                        !isActionColumn &&
-                                        resolvedColType === "object" &&
-                                        !!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) &&
-                                        utils_1.supportedInlineEditList.includes(resolvedColType);
-                                    var rowData = editDataRowId === row.id ? editDataValue : row;
-                                    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" }))));
-                                    }
-                                    if (isEditable) {
-                                        var bareOverride = (_h = (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListDescription) === null || _h === void 0 ? void 0 : _h.call(_g, 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)
-                                            ? 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((_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 }, props.newTabUrl && props.onClickRow ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl +
-                                            row.id +
-                                            ((_m = props.addNewTabUrl) !== null && _m !== void 0 ? _m : ""), 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)));
-                        }),
+                    !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")),
             renderAddableSection()),