@indico-data/design-system 2.47.3 → 2.49.0

package/lib/index.esm.js

@@ -1,5 +1,5 @@
 import { library, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { faArrowDown, faArrowRight, faArrowLeft, faCalculator, faCheck, faCircleNotch, faMountainSun, faRocket, faWind, faEyeSlash, faEye, faCaretUp, faCaretDown, faTag, faPencilAlt, faSearch, faCog, faFileDownload, faQuestionCircle, faCopy, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faArrowRight, faArrowLeft, faCalculator, faCheck, faCircleNotch, faMountainSun, faRocket, faWind, faEyeSlash, faEye, faCaretUp, faCaretDown, faTag, faPencilAlt, faSearch, faCog, faFileDownload, faQuestionCircle, faCopy, faXmark, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useLayoutEffect, useEffect, createContext, useState, useRef, useContext, useCallback, useImperativeHandle, forwardRef, useMemo, isValidElement, useId as useId$1 } from 'react';
@@ -205,7 +205,7 @@ const registerFontAwesomeIcons = (...icons) => {
     library.add(...icons);
 };
 // Register the icons used directly in design system components
-registerFontAwesomeIcons(faArrowDown, faArrowRight, faArrowLeft, faCalculator, faCheck, faCircleNotch, faMountainSun, faRocket, faWind, faEyeSlash, faEye, faCaretUp, faCaretDown, faTag, faPencilAlt, faSearch, faCog, faFileDownload, faQuestionCircle, faCopy, faXmark, 
+registerFontAwesomeIcons(faArrowDown, faArrowRight, faArrowLeft, faCalculator, faCheck, faCircleNotch, faMountainSun, faRocket, faWind, faEyeSlash, faEye, faCaretUp, faCaretDown, faTag, faPencilAlt, faSearch, faCog, faFileDownload, faQuestionCircle, faCopy, faXmark, faChevronLeft, faChevronRight, 
 // backwards compat, don't require registration of custom indicons
 // might want to consider doing so in the future
 ...indiconDefinitions);
@@ -2603,6 +2603,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;
@@ -7168,18 +7178,6 @@ const LoadingComponent = () => {
     return jsx("div", { className: "table-loading", children: "Loading..." });
 };
 
-const Table = (props) => {
-    const { responsive = true, direction = 'auto', keyField = 'id', striped = false, noDataComponent = 'built-in', isDisabled, isLoading, isFullHeight = false, subHeaderAlign = 'left', className } = props, rest = __rest(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "isFullHeight", "subHeaderAlign", "className"]);
-    const combinedClassName = classNames(className, {
-        'table--striped': striped,
-        'table-body': true,
-    });
-    const tableWrapperClassName = classNames('table', {
-        'table--full-height': isFullHeight,
-    });
-    return (jsx("div", { className: tableWrapperClassName, children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}) }, rest)) }));
-};
-
 const Label = ({ label, name, isRequired }) => {
     return (jsx("div", { "data-testid": `${name}-testId`, className: `form-label`, children: jsxs("label", { htmlFor: `${name}`, children: [label, isRequired ? jsx("span", { className: "text-error", children: " *" }) : ''] }) }));
 };
@@ -7213,6 +7211,299 @@ const Input = React__default.forwardRef((_a, ref) => {
 });
 const LabeledInput = withLabel(Input);
 
+const Pagination = (_a) => {
+    var { totalPages, currentPage = 1, onChange, className } = _a, rest = __rest(_a, ["totalPages", "currentPage", "onChange", "className"]);
+    const [inputValue, setInputValue] = useState(currentPage.toString());
+    const totalPagesText = `of ${totalPages}`;
+    const classes = classNames('pagination', className);
+    useEffect(() => {
+        setInputValue(currentPage.toString());
+    }, [currentPage]);
+    const handleNextPage = () => {
+        if (currentPage < totalPages) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(currentPage + 1);
+        }
+    };
+    const handlePreviousPage = () => {
+        if (currentPage > 1) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(currentPage - 1);
+        }
+    };
+    const validateAndUpdatePage = (value) => {
+        // If empty or invalid, reset to current page
+        if (!value) {
+            setInputValue(currentPage.toString());
+            return;
+        }
+        const page = Number(value);
+        if (!isNaN(page) && page > 0 && page <= totalPages) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(page);
+        }
+        else {
+            setInputValue(currentPage.toString());
+        }
+    };
+    const isNextButtonDisabled = currentPage === totalPages;
+    const isPreviousButtonDisabled = currentPage === 1;
+    const hasError = Number(inputValue) > totalPages || Number(inputValue) < 1;
+    return (jsx("div", Object.assign({ className: classes }, rest, { children: jsx(Container, { children: jsxs(Row, { gutterWidth: 12, align: "center", children: [jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__previous", children: jsx(Button$1, { "data-testid": "pagination-previous-button", ariaLabel: "Previous Page", variant: "link", onClick: handlePreviousPage, iconLeft: "chevron-left", isDisabled: isPreviousButtonDisabled }) }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__current-page", children: jsx(LabeledInput, { "data-testid": "pagination-current-page-input", className: classNames('pagination__current-page-input', {
+                                    'has-error': hasError,
+                                }), value: inputValue, name: "currentPage", label: "Current Page", hasHiddenLabel: true, onKeyDown: (e) => {
+                                    if (e.key === 'Enter') {
+                                        validateAndUpdatePage(e.currentTarget.value);
+                                    }
+                                }, onChange: (e) => {
+                                    const value = e.currentTarget.value;
+                                    // Allow empty value or numbers
+                                    if (value === '' || /^\d*$/.test(value)) {
+                                        setInputValue(value);
+                                    }
+                                }, onBlur: (e) => validateAndUpdatePage(e.currentTarget.value) }) }) }), jsx(Col, { xs: "content", children: jsx("p", { className: "pagination__page-total", children: totalPagesText }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__next", children: jsx(Button$1, { "data-testid": "pagination-next-button", ariaLabel: "Next Page", variant: "link", onClick: handleNextPage, iconLeft: "chevron-right", isDisabled: isNextButtonDisabled }) }) })] }) }) })));
+};
+
+const TablePagination = ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }) => {
+    const totalPages = Math.ceil(rowCount / rowsPerPage);
+    return (jsx("div", { className: "table__pagination", children: jsxs(Row, { align: "center", justify: "between", children: [jsx(Col, { xs: "content", children: totalEntriesText && (jsx("span", { "data-testid": "table-pagination-total-entries", className: "table__pagination-total-entries", children: totalEntriesText })) }), jsx(Col, { xs: "content", children: 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, }) => {
+    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 (jsxs("div", { className: "table__header-cell", "data-testid": `sticky-column-${position}`, children: [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` }), 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 ? (jsx(HorizontalStickyHeader, { position: index, isPinned: isPinned, onPinColumn: () => togglePinnedColumn(column.id), pinnedColumnIds: pinnedColumnIds, children: column.name })) : (jsx(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 = 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 = 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
+    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, 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,
+    });
+    const tableWrapperClassName = classNames('table', {
+        'table--full-height': isFullHeight,
+    });
+    return (jsx("div", { className: tableWrapperClassName, "data-testid": "table", children: 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: jsx(LoadingComponent, {}), pagination: true, paginationComponent: (props) => (jsx(TablePagination, Object.assign({}, props, { totalEntriesText: totalEntriesText }))), paginationTotalRows: paginationTotalRows, highlightOnHover: true, pointerOnHover: true }, rest)) }));
+};
+
 const Radio = React__default.forwardRef((_a, ref) => {
     var { id, label, name, value, onChange, isDisabled } = _a, rest = __rest(_a, ["id", "label", "name", "value", "onChange", "isDisabled"]);
     return (jsx("div", { className: "form-control", children: jsxs("div", { className: "radio-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-radio-input-${name}`, className: "radio-input", type: "radio", id: id, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label }, rest)), jsx("label", { htmlFor: id, className: "radio-input-label", "data-testid": `label-radio-input-${name}`, children: label })] }) }));