@indico-data/design-system 2.51.0 → 2.51.1

package/lib/index.js

@@ -25669,12 +25669,7 @@ function ActionBar({ table, TableActions, className, children, }) {
             row.toggleSelected(false);
         });
     };
-    const getSelectedItemsText = () => {
-        if (selectedItems.length === 1)
-            return '1 item selected';
-        return `${selectedItems.length} items selected`;
-    };
-    return (jsxRuntime.jsx(Card, { className: classNames('tanstack-table__action-bar', className), children: children !== null && children !== void 0 ? children : (jsxRuntime.jsxs("div", { className: "tanstack-table__action-bar__container", children: [jsxRuntime.jsx("div", { className: "tanstack-table__action-bar__text-container", children: jsxRuntime.jsx("span", { children: getSelectedItemsText() }) }), TableActions && (jsxRuntime.jsx("div", { className: "tanstack-table__action-bar__button-container", children: jsxRuntime.jsx(TableActions, { selectedItems: selectedItems, unselectRows: unselectRows }) }))] })) }));
+    return (jsxRuntime.jsx(Card, { className: classNames('tanstack-table__action-bar', className), children: children !== null && children !== void 0 ? children : (jsxRuntime.jsx("div", { className: "tanstack-table__action-bar__container", children: TableActions && (jsxRuntime.jsx("div", { className: "tanstack-table__action-bar__button-container", children: jsxRuntime.jsx(TableActions, { selectedItems: selectedItems, unselectRows: unselectRows }) })) })) }));
 }
 
 function NoResults({ clearFilters, hasFilters, message }) {
@@ -42887,7 +42882,7 @@ var lodashExports = lodash.exports;
 
 const TablePagination = ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }) => {
     const totalPages = Math.ceil(rowCount / rowsPerPage);
-    return (jsxRuntime.jsx("div", { className: "table__pagination", "data-testid": "tanstack-table-pagination", children: jsxRuntime.jsxs(Row, { align: "center", justify: "between", children: [jsxRuntime.jsx(Col, { xs: "content", children: totalEntriesText && (jsxRuntime.jsx("span", { "data-testid": "table-pagination-total-entries", className: "table__pagination-total-entries", children: totalEntriesText })) }), jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx(Pagination, { "data-testid": "table-pagination-component", totalPages: totalPages, currentPage: currentPage, onChange: (page) => onChangePage(page, rowsPerPage) }) })] }) }));
+    return (jsxRuntime.jsx("div", { className: "table__pagination", "data-testid": "tanstack-table-pagination", children: jsxRuntime.jsxs(Row, { align: "center", justify: "between", children: [jsxRuntime.jsx(Col, { xs: "content", children: totalEntriesText && (jsxRuntime.jsx("span", { "data-testid": "table-pagination-total-entries", className: "table__pagination-total-entries", children: totalEntriesText })) }), jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx(Pagination, { "data-testid": "table-pagination-component", totalPages: totalPages, currentPage: currentPage, onChange: (page) => onChangePage(page) }) })] }) }));
 };
 
 function useTanstackTable({ defaultColumns }) {
@@ -42896,7 +42891,6 @@ function useTanstackTable({ defaultColumns }) {
     const [windowWidth, setWindowWidth] = React.useState(window.innerWidth);
     const [rowSelection, setRowSelection] = React.useState({});
     const [formattedColumns, setFormattedColumns] = React.useState(columns);
-    const [isClickedRow, setIsClickedRow] = React.useState([]);
     // Tracks changes to browser width to allow for updating of column widths
     React.useEffect(() => {
         const handleResize = () => {
@@ -42915,8 +42909,6 @@ function useTanstackTable({ defaultColumns }) {
         windowWidth,
         formattedColumns,
         setFormattedColumns,
-        isClickedRow,
-        setIsClickedRow,
     };
 }
 
@@ -42927,7 +42919,7 @@ const getCommonPinningStyles = (column) => {
     return {
         boxShadow: isLastLeftPinnedColumn ? '-4px 0 4px -4px gray inset' : undefined,
         left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
-        position: isPinned ? 'sticky' : 'relative',
+        position: isPinned ? 'sticky' : 'initial',
         zIndex: isPinned ? 1 : 0,
     };
 };
@@ -42971,37 +42963,32 @@ const TableHeader = React.forwardRef(({ table }, ref) => {
             }) }, headerGroup.id))) }));
 });
 
-const TableBody = ({ table, onClickRow, isLoading, columnsLength, isClickedRow, setIsClickedRow, }) => {
-    const toggleRow = (id) => {
-        if (isClickedRow.includes(id)) {
-            setIsClickedRow((state) => state.filter((item) => item !== id));
-        }
-        else {
-            setIsClickedRow((state) => [...state, id]);
-        }
-    };
+const TableBody = ({ table, onRowClick, isLoading, columnsLength, activeRows, }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [table.getRowModel().rows.map((row) => (jsxRuntime.jsx("tr", { className: classNames('tanstack-table__tbody__tr', {
                     'is-selected': row.getIsSelected(),
-                    'show-hover': !!onClickRow,
-                    'is-clicked': isClickedRow.includes(row.id),
-                }), onClick: () => {
-                    if (!!onClickRow) {
-                        toggleRow(row.id);
-                        onClickRow(row);
-                    }
-                }, children: row.getVisibleCells().map((cell) => {
+                    'show-hover': !!onRowClick,
+                    'is-clicked': activeRows.includes(row.id), // Checkbox Is clicked
+                }), children: row.getVisibleCells().map((cell) => {
                     var _a, _b, _c, _d, _e, _f, _g, _h;
                     const { columnDef } = cell.column;
                     return (jsxRuntime.jsx("td", { className: classNames('tanstack-table__tbody__td', {
                             'pa-0': !!((_c = (_b = (_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.cell) === null || _c === void 0 ? void 0 : _c.hasNoPadding),
-                        }), style: Object.assign({}, getTdStyles(cell.column, (_f = (_e = (_d = columnDef.meta) === null || _d === void 0 ? void 0 : _d.styles) === null || _e === void 0 ? void 0 : _e.cell) === null || _f === void 0 ? void 0 : _f.textAlign, (_h = (_g = columnDef.meta) === null || _g === void 0 ? void 0 : _g.styles) === null || _h === void 0 ? void 0 : _h.definedColumnSize, cell.column.getSize())), children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
+                        }), style: Object.assign({}, getTdStyles(cell.column, (_f = (_e = (_d = columnDef.meta) === null || _d === void 0 ? void 0 : _d.styles) === null || _e === void 0 ? void 0 : _e.cell) === null || _f === void 0 ? void 0 : _f.textAlign, (_h = (_g = columnDef.meta) === null || _g === void 0 ? void 0 : _g.styles) === null || _h === void 0 ? void 0 : _h.definedColumnSize, cell.column.getSize())), onClick: () => {
+                            var _a, _b, _c;
+                            // if the cell is not preventRowSelection, then we can click the row
+                            if (!((_c = (_b = (_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.cell) === null || _c === void 0 ? void 0 : _c.preventRowSelection)) {
+                                onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+                            }
+                        }, children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
                 }) }, row.id))), isLoading && (jsxRuntime.jsx("tr", { className: "tanstack-table__tbody__tr", children: jsxRuntime.jsx("td", { className: classNames('tanstack-table__centered-row', {
                         'is-Loading': isLoading,
                     }), colSpan: columnsLength, children: jsxRuntime.jsx(CirclePulse, { "data-testid": "loading-indicator" }) }) }))] }));
 };
 
-function TanstackTable({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, defaultPinnedColumns, onClickRow = null, actionBarClassName, }) {
-    const { columns, defaultData, windowWidth, rowSelection, setRowSelection, formattedColumns, setFormattedColumns, isClickedRow, setIsClickedRow, } = useTanstackTable({
+function TanstackTable(_a) {
+    var { columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, defaultPinnedColumns, onRowClick, activeRows = [], actionBarClassName } = _a, rest = __rest(_a, ["columns", "data", "className", "currentPage", "rowCount", "rowsPerPage", "onChangePage", "totalEntriesText", "TableActions", "error", "enableRowSelection", "clearFilters", "hasFilters", "showPagination", "isLoading", "defaultPinnedColumns", "onRowClick", "activeRows", "actionBarClassName"]);
+    const { columns, defaultData, windowWidth, rowSelection, // This refers to the checkboxes.
+    setRowSelection, formattedColumns, setFormattedColumns, } = useTanstackTable({
         defaultColumns,
     });
     const thRefs = React.useRef({});
@@ -43014,23 +43001,13 @@ function TanstackTable({ columns: defaultColumns, data, className, currentPage,
         });
         setFormattedColumns(updatedColumns);
     }, [data, columns, windowWidth]);
-    const table = useReactTable({
-        data: data !== null && data !== void 0 ? data : defaultData,
-        columns: formattedColumns,
-        state: {
+    const table = useReactTable(Object.assign(Object.assign({}, rest), { data: data !== null && data !== void 0 ? data : defaultData, columns: formattedColumns, state: {
             rowSelection,
-        },
-        enableRowSelection,
-        onRowSelectionChange: setRowSelection,
-        getCoreRowModel: getCoreRowModel(),
-        manualPagination: true,
-        debugTable: true,
-        initialState: {
+        }, enableRowSelection, onRowSelectionChange: setRowSelection, getCoreRowModel: getCoreRowModel(), manualPagination: true, getRowId: (row) => row === null || row === void 0 ? void 0 : row.id, initialState: {
             columnPinning: {
                 left: defaultPinnedColumns,
             },
-        },
-    });
+        } }));
     const totalRowsOnPage = table.getRowModel().rows.length;
     const hasPaginationProps = !lodashExports.isNil(currentPage) &&
         !lodashExports.isNil(rowCount) &&
@@ -43047,7 +43024,7 @@ function TanstackTable({ columns: defaultColumns, data, className, currentPage,
                             ? (_a = error === null || error === void 0 ? void 0 : error.errorMessage) !== null && _a !== void 0 ? _a : 'There was an error isLoading the data.'
                             : 'No results found.' }) }) }));
         }
-        return (jsxRuntime.jsx(TableBody, { table: table, onClickRow: onClickRow, isLoading: isLoading, columnsLength: columns.length, isClickedRow: isClickedRow, setIsClickedRow: setIsClickedRow }));
+        return (jsxRuntime.jsx(TableBody, { table: table, onRowClick: onRowClick, isLoading: isLoading, columnsLength: columns.length, activeRows: activeRows }));
     };
     return (jsxRuntime.jsxs("div", { className: "tanstack-table__outer-container", children: [jsxRuntime.jsxs("div", { className: "tanstack-table__container", children: [jsxRuntime.jsxs("table", { className: classNames('tanstack-table', className, {
                             'is-Loading': isLoading,