@indico-data/design-system 2.47.3 → 2.48.0

package/lib/components/index.d.ts

@@ -20,3 +20,4 @@ export { SingleInputDatePicker } from './forms/date/inputDatePicker';
 export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
 export { Modal } from './modal';
 export { Badge } from './badge';
+export { Pagination } from './pagination';

package/lib/components/pagination/Pagination.d.ts

@@ -0,0 +1,2 @@
+import { PaginationProps } from './types';
+export declare const Pagination: ({ totalPages, currentPage, onChange, className, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/pagination/Pagination.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from './Pagination';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+export declare const Default: Story;

package/lib/components/pagination/__tests__/Pagination.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/lib/components/pagination/types.d.ts

@@ -0,0 +1,6 @@
+export interface PaginationProps {
+    totalPages: number;
+    currentPage?: number;
+    className?: string;
+    onChange?: (value: number) => void;
+}

package/lib/components/table/__tests__/Table.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/table/components/TablePagination.d.ts

@@ -0,0 +1,9 @@
+interface TablePaginationProps {
+    rowsPerPage: number;
+    rowCount: number;
+    onChangePage: (page: number, perPage: number) => void;
+    currentPage: number;
+    totalEntriesText?: string;
+}
+export declare const TablePagination: ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }: TablePaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/table/components/__tests__/TablePagination.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/table/sampleData.d.ts

@@ -1,3 +1,4 @@
+import { TableColumn } from './types';
 export interface SampleDataRow {
     name: string;
     class: string;
@@ -7,3 +8,4 @@ export interface SampleDataRow {
     favoriteMeal: string;
 }
 export declare const sampleData: SampleDataRow[];
+export declare const columns: TableColumn<SampleDataRow>[];

package/lib/components/table/types.d.ts

@@ -1,11 +1,12 @@
-import { TableProps as RDTTableProps, Direction as RDTDirection, Alignment as RDTAlignment, TableColumn as RDTTableColumn } from 'react-data-table-component';
+import { Direction as RDTDirection, Alignment as RDTAlignment, TableColumn as RDTTableColumn, IDataTableProps } from 'react-data-table-component';
 export type Direction = `${RDTDirection}`;
 export type Alignment = `${RDTAlignment}`;
 export type TableColumn<T> = RDTTableColumn<T>;
-export type TableProps<T> = Omit<RDTTableProps<T>, 'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'> & {
+export interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
     isDisabled?: boolean;
     isLoading?: boolean;
     direction?: Direction;
-    subHeaderAlign?: Alignment;
+    subHeaderAlign?: 'left' | 'right' | 'center';
     isFullHeight?: boolean;
-};
+    totalEntriesText?: string;
+}

package/lib/index.css

@@ -803,6 +803,7 @@ a:hover,
   --pf-table-highlighted-color: var(--pf-primary-color);
   --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
   --pf-table-font-size: var(--pf-font-size-body2);
+  --pf-table-pagination-background-color: var(--pf-primary-color-700);
 }
 
 .table-loading {
@@ -817,7 +818,7 @@ a:hover,
 
 .table {
   border-radius: var(--pf-rounded);
-  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  background-color: var(--pf-table-background-color);
   /* Striped: alternating background */
   /* Checked: Precedence over striped */
   /* Highlighted: Precedence over checked */
@@ -833,16 +834,33 @@ a:hover,
   color: var(--pf-table-font-color);
   border-radius: var(--pf-rounded) !important;
   border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  height: 100%;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pf-table-border-color) var(--pf-table-background-color);
+}
+.table-body::-webkit-scrollbar {
+  width: var(--pf-size-2);
+  height: var(--pf-size-2);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-track {
+  background: var(--pf-table-background-color);
+  border-radius: var(--pf-rounded);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-thumb {
+  background: var(--pf-table-border-color);
+  border-radius: var(--pf-rounded);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-thumb:hover {
+  background: var(--pf-primary-color);
 }
 .table > *:nth-child(3) {
   margin-top: auto;
   background-color: transparent;
   border: none;
 }
-.table > *:nth-child(3) .rdt_Pagination {
-  background-color: transparent;
-  border: none;
-}
 .table .rdt_Table,
 .table .rdt_TableRow,
 .table .rdt_TableCol,
@@ -853,8 +871,7 @@ a:hover,
 .table .rdt_TableHead,
 .table .rdt_TableHeadRow,
 .table .rdt_TableBody,
-.table .rdt_ExpanderRow,
-.table .rdt_Pagination {
+.table .rdt_ExpanderRow {
   background-color: var(--pf-table-background-color);
   color: var(--pf-table-font-color);
 }
@@ -866,7 +883,8 @@ a:hover,
 }
 .table .rdt_TableHeader {
   border-radius: var(--pf-rounded) 0;
-  border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
+  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  border-bottom: none;
 }
 .table .rdt_TableHeadRow > :first-child,
 .table .rdt_TableRow > :first-child {
@@ -908,6 +926,13 @@ a:hover,
   background-color: var(--pf-table-highlighted-color) !important;
 }
 
+.table__pagination {
+  padding-bottom: var(--pf-padding-4);
+  padding-top: var(--pf-padding-4);
+  background-color: var(--pf-table-pagination-background-color);
+  padding-left: var(--pf-padding-4);
+}
+
 .input {
   padding: 10px;
 }
@@ -1901,6 +1926,23 @@ form {
   text-align: right;
 }
 
+.pagination .form-control {
+  margin-bottom: 0;
+}
+
+.pagination__current-page {
+  max-width: 50px;
+}
+
+.pagination__current-page-input {
+  text-align: center;
+  font-weight: var(--pf-font-weight-heavy);
+}
+
+.pagination .pagination__current-page-input.has-error {
+  border-color: var(--pf-error-color);
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);

package/lib/index.d.ts

@@ -4,7 +4,7 @@ export * from '@floating-ui/react-dom';
 import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
-import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
+import { IDataTableProps, Direction as Direction$1 } from 'react-data-table-component';
 import { Props as Props$7 } from 'react-select';
 import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
 
@@ -184,14 +184,14 @@ type SelectOption = {
 };
 
 type Direction = `${Direction$1}`;
-type Alignment = `${Alignment$1}`;
-type TableProps<T> = Omit<TableProps$1<T>, 'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'> & {
+interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
     isDisabled?: boolean;
     isLoading?: boolean;
     direction?: Direction;
-    subHeaderAlign?: Alignment;
+    subHeaderAlign?: 'left' | 'right' | 'center';
     isFullHeight?: boolean;
-};
+    totalEntriesText?: string;
+}
 
 type PillSize = 'sm' | 'md' | 'lg';
 type PillColor = SemanticColor | 'neutral';

package/lib/index.esm.css

@@ -803,6 +803,7 @@ a:hover,
   --pf-table-highlighted-color: var(--pf-primary-color);
   --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
   --pf-table-font-size: var(--pf-font-size-body2);
+  --pf-table-pagination-background-color: var(--pf-primary-color-700);
 }
 
 .table-loading {
@@ -817,7 +818,7 @@ a:hover,
 
 .table {
   border-radius: var(--pf-rounded);
-  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  background-color: var(--pf-table-background-color);
   /* Striped: alternating background */
   /* Checked: Precedence over striped */
   /* Highlighted: Precedence over checked */
@@ -833,16 +834,33 @@ a:hover,
   color: var(--pf-table-font-color);
   border-radius: var(--pf-rounded) !important;
   border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  height: 100%;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pf-table-border-color) var(--pf-table-background-color);
+}
+.table-body::-webkit-scrollbar {
+  width: var(--pf-size-2);
+  height: var(--pf-size-2);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-track {
+  background: var(--pf-table-background-color);
+  border-radius: var(--pf-rounded);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-thumb {
+  background: var(--pf-table-border-color);
+  border-radius: var(--pf-rounded);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-thumb:hover {
+  background: var(--pf-primary-color);
 }
 .table > *:nth-child(3) {
   margin-top: auto;
   background-color: transparent;
   border: none;
 }
-.table > *:nth-child(3) .rdt_Pagination {
-  background-color: transparent;
-  border: none;
-}
 .table .rdt_Table,
 .table .rdt_TableRow,
 .table .rdt_TableCol,
@@ -853,8 +871,7 @@ a:hover,
 .table .rdt_TableHead,
 .table .rdt_TableHeadRow,
 .table .rdt_TableBody,
-.table .rdt_ExpanderRow,
-.table .rdt_Pagination {
+.table .rdt_ExpanderRow {
   background-color: var(--pf-table-background-color);
   color: var(--pf-table-font-color);
 }
@@ -866,7 +883,8 @@ a:hover,
 }
 .table .rdt_TableHeader {
   border-radius: var(--pf-rounded) 0;
-  border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
+  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  border-bottom: none;
 }
 .table .rdt_TableHeadRow > :first-child,
 .table .rdt_TableRow > :first-child {
@@ -908,6 +926,13 @@ a:hover,
   background-color: var(--pf-table-highlighted-color) !important;
 }
 
+.table__pagination {
+  padding-bottom: var(--pf-padding-4);
+  padding-top: var(--pf-padding-4);
+  background-color: var(--pf-table-pagination-background-color);
+  padding-left: var(--pf-padding-4);
+}
+
 .input {
   padding: 10px;
 }
@@ -1901,6 +1926,23 @@ form {
   text-align: right;
 }
 
+.pagination .form-control {
+  margin-bottom: 0;
+}
+
+.pagination__current-page {
+  max-width: 50px;
+}
+
+.pagination__current-page-input {
+  text-align: center;
+  font-weight: var(--pf-font-weight-heavy);
+}
+
+.pagination .pagination__current-page-input.has-error {
+  border-color: var(--pf-error-color);
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);

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);
@@ -7168,18 +7168,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 +7201,73 @@ 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) }) })] }) }));
+};
+
+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 (jsx("div", { className: tableWrapperClassName, "data-testid": "table", 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, {}), pagination: true, paginationComponent: (props) => (jsx(TablePagination, Object.assign({}, props, { totalEntriesText: totalEntriesText }))), paginationTotalRows: paginationTotalRows }, 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 })] }) }));