@indico-data/design-system 2.47.3 → 2.48.0

package/lib/index.js

@@ -230,7 +230,7 @@ const registerFontAwesomeIcons = (...icons) => {
     fontawesomeSvgCore.library.add(...icons);
 };
 // Register the icons used directly in design system components
-registerFontAwesomeIcons(freeSolidSvgIcons.faArrowDown, freeSolidSvgIcons.faArrowRight, freeSolidSvgIcons.faArrowLeft, freeSolidSvgIcons.faCalculator, freeSolidSvgIcons.faCheck, freeSolidSvgIcons.faCircleNotch, freeSolidSvgIcons.faMountainSun, freeSolidSvgIcons.faRocket, freeSolidSvgIcons.faWind, freeSolidSvgIcons.faEyeSlash, freeSolidSvgIcons.faEye, freeSolidSvgIcons.faCaretUp, freeSolidSvgIcons.faCaretDown, freeSolidSvgIcons.faTag, freeSolidSvgIcons.faPencilAlt, freeSolidSvgIcons.faSearch, freeSolidSvgIcons.faCog, freeSolidSvgIcons.faFileDownload, freeSolidSvgIcons.faQuestionCircle, freeSolidSvgIcons.faCopy, freeSolidSvgIcons.faXmark, 
+registerFontAwesomeIcons(freeSolidSvgIcons.faArrowDown, freeSolidSvgIcons.faArrowRight, freeSolidSvgIcons.faArrowLeft, freeSolidSvgIcons.faCalculator, freeSolidSvgIcons.faCheck, freeSolidSvgIcons.faCircleNotch, freeSolidSvgIcons.faMountainSun, freeSolidSvgIcons.faRocket, freeSolidSvgIcons.faWind, freeSolidSvgIcons.faEyeSlash, freeSolidSvgIcons.faEye, freeSolidSvgIcons.faCaretUp, freeSolidSvgIcons.faCaretDown, freeSolidSvgIcons.faTag, freeSolidSvgIcons.faPencilAlt, freeSolidSvgIcons.faSearch, freeSolidSvgIcons.faCog, freeSolidSvgIcons.faFileDownload, freeSolidSvgIcons.faQuestionCircle, freeSolidSvgIcons.faCopy, freeSolidSvgIcons.faXmark, freeSolidSvgIcons.faChevronLeft, freeSolidSvgIcons.faChevronRight, 
 // backwards compat, don't require registration of custom indicons
 // might want to consider doing so in the future
 ...indiconDefinitions);
@@ -7193,18 +7193,6 @@ const LoadingComponent = () => {
     return jsxRuntime.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 (jsxRuntime.jsx("div", { className: tableWrapperClassName, 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, {}) }, rest)) }));
-};
-
 const Label = ({ label, name, isRequired }) => {
     return (jsxRuntime.jsx("div", { "data-testid": `${name}-testId`, className: `form-label`, children: jsxRuntime.jsxs("label", { htmlFor: `${name}`, children: [label, isRequired ? jsxRuntime.jsx("span", { className: "text-error", children: " *" }) : ''] }) }));
 };
@@ -7238,6 +7226,73 @@ const Input = React__namespace.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] = React.useState(currentPage.toString());
+    const totalPagesText = `of ${totalPages}`;
+    const classes = classNames('pagination', className);
+    React.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 (jsxRuntime.jsx("div", Object.assign({ className: classes }, rest, { children: jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs(Row, { gutterWidth: 12, align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("div", { className: "pagination__previous", children: jsxRuntime.jsx(Button$1, { "data-testid": "pagination-previous-button", ariaLabel: "Previous Page", variant: "link", onClick: handlePreviousPage, iconLeft: "chevron-left", isDisabled: isPreviousButtonDisabled }) }) }), jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("div", { className: "pagination__current-page", children: jsxRuntime.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) }) }) }), jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("p", { className: "pagination__page-total", children: totalPagesText }) }), jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("div", { className: "pagination__next", children: jsxRuntime.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 (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) }) })] }) }));
+};
+
+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 combinedClassName = classNames(className, {
+        'table--striped': striped,
+        'table-body': true,
+    });
+    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)) }));
+};
+
 const Radio = React__namespace.default.forwardRef((_a, ref) => {
     var { id, label, name, value, onChange, isDisabled } = _a, rest = __rest(_a, ["id", "label", "name", "value", "onChange", "isDisabled"]);
     return (jsxRuntime.jsx("div", { className: "form-control", children: jsxRuntime.jsxs("div", { className: "radio-wrapper", children: [jsxRuntime.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)), jsxRuntime.jsx("label", { htmlFor: id, className: "radio-input-label", "data-testid": `label-radio-input-${name}`, children: label })] }) }));