@indico-data/design-system 2.48.0 → 2.49.0

package/lib/index.js

@@ -2628,6 +2628,16 @@ function __rest(s, e) {
     return t;
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -7281,8 +7291,234 @@ const TablePagination = ({ rowsPerPage, rowCount, onChangePage, currentPage, tot
     return (jsxRuntime.jsx("div", { className: "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) }) })] }) }));
 };
 
+// Gets the width of the previous pinned columns
+const getPreviousHeadersWidth = (position, pinnedColumnIds) => {
+    let totalWidth = 0;
+    // Add checkbox column width if it's pinned
+    if (pinnedColumnIds.includes('checkbox-column')) {
+        const checkboxCell = document.querySelector('.rdt_TableCol:not([data-column-id])');
+        if (checkboxCell) {
+            totalWidth += checkboxCell.offsetWidth;
+        }
+    }
+    // Add widths of other pinned columns before this position
+    const previousHeaders = Array.from({ length: position }, (_, i) => {
+        const header = document.querySelector(`[data-column-id="sticky-column-${i}"]`);
+        if (header && pinnedColumnIds.includes(`sticky-column-${i}`)) {
+            return header;
+        }
+        return null;
+    }).filter((header) => header !== null);
+    // Calculate base width from previous columns
+    totalWidth = previousHeaders.reduce((acc, header) => {
+        return acc + header.offsetWidth;
+    }, totalWidth);
+    // Leave this for if we ever try to fix the auto width columns
+    // There is a bug where borders cause the offset to be wrong, this keeps it in sync.
+    // Add offset that increases by 1 every two columns after index 1
+    // if (position >= 2) {
+    //   const additionalOffset = Math.floor((position - 2) / 2) + 1;
+    //   totalWidth += additionalOffset;
+    // }
+    return totalWidth;
+};
+// Applies sticky styles to the column header
+const applyStickyStylesToTableHeader = (position, left) => __awaiter(void 0, void 0, void 0, function* () {
+    const header = document.querySelector(`[data-column-id="sticky-column-${position}"]`);
+    if (header) {
+        header.style.position = 'sticky';
+        header.style.left = `${left}px`;
+        header.style.zIndex = '3';
+        header.style.backgroundColor =
+            'var(--pf-table-pinned-column-background-color)';
+    }
+});
+// Sorts the pinned columns so that any column that is pinned comes before any column that is not.
+const sortPinnedColumns = (columns, pinnedColumnIds) => {
+    return [...columns].sort((a, b) => {
+        const aIsPinned = pinnedColumnIds.includes(a.id);
+        const bIsPinned = pinnedColumnIds.includes(b.id);
+        if (aIsPinned && !bIsPinned)
+            return -1; // a comes first
+        if (!aIsPinned && bIsPinned)
+            return 1; // b comes first
+        return 0; // maintain relative order for columns with same pinned state
+    });
+};
+// Gets the styles for the pinned columns
+const getPinnedColumnStyles = (isPinned, index, pinnedColumnIds) => {
+    return isPinned
+        ? {
+            position: 'sticky',
+            left: `${getPreviousHeadersWidth(index, pinnedColumnIds)}px`,
+            zIndex: 3,
+            backgroundColor: 'var(--pf-table-pinned-column-background-color)',
+        }
+        : {
+            position: undefined,
+            left: undefined,
+            zIndex: undefined,
+            backgroundColor: undefined,
+        };
+};
+const clearStickyStyles = (header) => {
+    header.style.position = '';
+    header.style.left = '';
+    header.style.zIndex = '';
+    header.style.backgroundColor = '';
+};
+
+const HorizontalStickyHeader = ({ children, position, onPinColumn, isPinned = false, pinnedColumnIds, }) => {
+    React.useEffect(() => {
+        const calculateWidth = () => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+            const header = document.querySelector(`[data-column-id="sticky-column-${position}"]`);
+            if (header) {
+                if (isPinned) {
+                    const width = getPreviousHeadersWidth(position, pinnedColumnIds);
+                    yield applyStickyStylesToTableHeader(position, width);
+                }
+                else {
+                    clearStickyStyles(header);
+                }
+            }
+        });
+        calculateWidth();
+    }, [position, isPinned, pinnedColumnIds]);
+    return (jsxRuntime.jsxs("div", { className: "table__header-cell", "data-testid": `sticky-column-${position}`, children: [jsxRuntime.jsx(Button$1, { "data-testid": `sticky-header-pin-button-${position}`, variant: "link", size: "sm", iconLeft: "pin", onClick: onPinColumn, ariaLabel: isPinned ? 'Unpin column' : 'Pin column', className: `table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action` }), jsxRuntime.jsx("div", { className: "table__header-content", children: children })] }));
+};
+
+const processColumns = (columns, pinnedColumnIds, togglePinnedColumn) => {
+    return columns.map((column, index) => {
+        const dataColumnId = `sticky-column-${index}`;
+        const isPinned = pinnedColumnIds.includes(dataColumnId);
+        const headerContent = column.isPinned !== undefined ? (jsxRuntime.jsx(HorizontalStickyHeader, { position: index, isPinned: isPinned, onPinColumn: () => togglePinnedColumn(column.id), pinnedColumnIds: pinnedColumnIds, children: column.name })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: column.name }));
+        return Object.assign(Object.assign({}, column), { name: headerContent, id: dataColumnId, style: getPinnedColumnStyles(isPinned, index, pinnedColumnIds) });
+    });
+};
+
+/**
+ * Hook to manage pinned columns in a table
+ * Handles initialization, toggling, positioning and resizing of pinned columns
+ */
+const usePinnedColumnsManager = (columns, canPinColumns, onPinnedColumnsChange) => {
+    const pinnedColumnIds = columns.filter((column) => column.isPinned).map((column) => column.id);
+    // `dataColumnIds` is the list of IDs used as `data-column-id` attributes on the table headers and cells
+    const dataColumnIds = React.useMemo(() => {
+        const ids = columns
+            .map((column, index) => (column.isPinned ? `sticky-column-${index}` : null))
+            .filter((id) => id !== null);
+        return ids.length > 0 ? ['checkbox-column', ...ids] : ids;
+    }, [columns]);
+    // Toggle individual column pin state
+    const togglePinnedColumn = React.useCallback((columnId) => {
+        const prevPinnedColumns = pinnedColumnIds;
+        // Handle unpinning
+        if (prevPinnedColumns.some((id) => id === columnId)) {
+            onPinnedColumnsChange === null || onPinnedColumnsChange === void 0 ? void 0 : onPinnedColumnsChange(prevPinnedColumns.filter((id) => id !== columnId));
+        }
+        else {
+            onPinnedColumnsChange === null || onPinnedColumnsChange === void 0 ? void 0 : onPinnedColumnsChange(prevPinnedColumns.concat(columnId));
+        }
+    }, [pinnedColumnIds, onPinnedColumnsChange]);
+    // Handle resize events and recalculate pinned column positions
+    React.useEffect(() => {
+        if (!canPinColumns)
+            return;
+        const recalculatePositions = () => {
+            // Reset all column styles and remove last-pinned-column class
+            const allCells = document.querySelectorAll('.rdt_TableCol, .rdt_TableCell');
+            allCells.forEach((cell) => {
+                cell.style.position = '';
+                cell.style.left = '';
+                cell.style.zIndex = '';
+                cell.style.backgroundColor = '';
+                cell.style.borderRight = '';
+            });
+            // Apply styles to pinned columns
+            dataColumnIds.forEach((column, index) => {
+                const isLastPinnedColumn = index === dataColumnIds.length - 1;
+                if (column === 'checkbox-column') {
+                    // Handle header checkbox
+                    const headerCheckbox = document.querySelector('.rdt_TableCol:not([data-column-id])');
+                    if (headerCheckbox) {
+                        headerCheckbox.style.position = 'sticky';
+                        headerCheckbox.style.left = '0';
+                        headerCheckbox.style.zIndex = '4';
+                        headerCheckbox.style.backgroundColor =
+                            'var(--pf-table-background-color)';
+                    }
+                    // Handle cell checkboxes
+                    const cellCheckboxes = document.querySelectorAll('.rdt_TableCell:first-child');
+                    cellCheckboxes.forEach((cell) => {
+                        cell.style.position = 'sticky';
+                        cell.style.left = '0';
+                        cell.style.zIndex = '2';
+                        cell.style.backgroundColor =
+                            'var(--pf-table-pinned-column-background-color)';
+                        if (isLastPinnedColumn) {
+                            cell.style.borderRight =
+                                `2px solid var(--pf-table-pinned-column-border-color)`;
+                        }
+                    });
+                }
+                else {
+                    const columnIndex = parseInt(column.split('-')[2]);
+                    const left = getPreviousHeadersWidth(columnIndex, dataColumnIds);
+                    // Headers
+                    const headers = document.querySelectorAll(`.rdt_TableCol[data-column-id="sticky-column-${columnIndex}"]`);
+                    headers.forEach((header) => {
+                        header.style.position = 'sticky';
+                        header.style.left = `${left}px`;
+                        header.style.zIndex = '2';
+                        header.style.backgroundColor =
+                            'var(--pf-table-pinned-column-background-color)';
+                        if (isLastPinnedColumn) {
+                            header.style.borderRight =
+                                `2px solid var(--pf-table-pinned-column-border-color)`;
+                        }
+                    });
+                    // Cells
+                    const cells = document.querySelectorAll(`.rdt_TableCell[data-column-id="sticky-column-${columnIndex}"]`);
+                    cells.forEach((cell) => {
+                        cell.style.position = 'sticky';
+                        cell.style.left = `${left}px`;
+                        cell.style.zIndex = '2';
+                        cell.style.backgroundColor =
+                            'var(--pf-table-pinned-column-background-color)';
+                        if (isLastPinnedColumn) {
+                            cell.style.borderRight =
+                                `2px solid var(--pf-table-pinned-column-border-color)`;
+                        }
+                    });
+                }
+            });
+        };
+        // Set up resize observers
+        const table = document.querySelector('.rdt_Table');
+        const resizeObserver = new ResizeObserver(recalculatePositions);
+        if (table) {
+            resizeObserver.observe(table);
+        }
+        window.addEventListener('resize', recalculatePositions);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', recalculatePositions);
+        };
+    }, [canPinColumns, dataColumnIds]);
+    // Process columns for rendering with pin state
+    const columnsWithPinning = canPinColumns
+        ? sortPinnedColumns(processColumns(columns, dataColumnIds, togglePinnedColumn), dataColumnIds)
+        : columns;
+    return {
+        columnsWithPinning, // Columns with pin state and handlers applied
+    };
+};
+
 const Table = (props) => {
-    const { responsive = true, direction = 'auto', keyField = 'id', striped = false, noDataComponent = 'built-in', isDisabled, isLoading, isFullHeight = false, subHeaderAlign = 'left', className, paginationTotalRows, totalEntriesText } = props, rest = __rest(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "isFullHeight", "subHeaderAlign", "className", "paginationTotalRows", "totalEntriesText"]);
+    const { responsive = true, direction = 'auto', keyField = 'id', striped = false, noDataComponent = 'built-in', isDisabled, isLoading, isFullHeight = false, subHeaderAlign = 'left', className, paginationTotalRows, totalEntriesText, data, columns: initialColumns, canPinColumns = false, onPinnedColumnsChange } = props, rest = __rest(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "isFullHeight", "subHeaderAlign", "className", "paginationTotalRows", "totalEntriesText", "data", "columns", "canPinColumns", "onPinnedColumnsChange"]);
+    // Turns on/off column pinning.
+    const { columnsWithPinning } = usePinnedColumnsManager(initialColumns, canPinColumns, onPinnedColumnsChange);
     const combinedClassName = classNames(className, {
         'table--striped': striped,
         'table-body': true,
@@ -7290,7 +7526,7 @@ const Table = (props) => {
     const tableWrapperClassName = classNames('table', {
         'table--full-height': isFullHeight,
     });
-    return (jsxRuntime.jsx("div", { className: tableWrapperClassName, "data-testid": "table", children: jsxRuntime.jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsxRuntime.jsx(LoadingComponent, {}), pagination: true, paginationComponent: (props) => (jsxRuntime.jsx(TablePagination, Object.assign({}, props, { totalEntriesText: totalEntriesText }))), paginationTotalRows: paginationTotalRows }, rest)) }));
+    return (jsxRuntime.jsx("div", { className: tableWrapperClassName, "data-testid": "table", children: jsxRuntime.jsx(Xe, Object.assign({ data: data, columns: columnsWithPinning, responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsxRuntime.jsx(LoadingComponent, {}), pagination: true, paginationComponent: (props) => (jsxRuntime.jsx(TablePagination, Object.assign({}, props, { totalEntriesText: totalEntriesText }))), paginationTotalRows: paginationTotalRows, highlightOnHover: true, pointerOnHover: true }, rest)) }));
 };
 
 const Radio = React__namespace.default.forwardRef((_a, ref) => {