@indico-data/design-system 3.0.2 → 3.0.4

package/lib/components/forms/checkbox/Checkbox.d.ts

@@ -9,5 +9,6 @@ export interface CheckboxProps {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
     defaultChecked?: boolean;
+    className?: string;
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/lib/components/tanstackTable/TankstackTable.types.d.ts

@@ -36,6 +36,7 @@ export type Props<T extends object> = {
     clearFilters?: () => void;
     hasFilters?: boolean;
     isLoading?: boolean;
+    isLoadingMessage?: string;
     defaultPinnedColumns?: string[];
     onClickRow?: ((row: Row<T>) => void) | null;
     onRowClick?: (row: T) => void;

package/lib/components/tanstackTable/TanstackTable.d.ts

@@ -1,4 +1,4 @@
 import { Props } from './TankstackTable.types';
-export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, ...rest }: Props<T & {
+export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, isLoadingMessage, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, ...rest }: Props<T & {
     id: string;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/components/tanstackTable/components/TableBody/TableBody.d.ts

@@ -4,8 +4,6 @@ export type Props<T> = {
     onRowClick?: ((row: T & {
         id: string;
     }) => void) | null | undefined;
-    isLoading: boolean;
-    columnsLength: number;
     activeRows: string[];
 };
-export declare const TableBody: <T>({ table, onRowClick, isLoading, columnsLength, activeRows, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableBody: <T>({ table, onRowClick, activeRows }: Props<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/tanstackTable/components/TableLoading/TableLoading.d.ts

@@ -0,0 +1,6 @@
+import { ColumnDef } from '@tanstack/react-table';
+export type Props<T> = {
+    columns: ColumnDef<T>[];
+    message?: string;
+};
+export declare const TableLoading: <T>({ columns, message }: Props<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/index.css

@@ -1287,6 +1287,9 @@ a:hover,
   color: var(--pf-form-input-color);
   cursor: pointer;
 }
+.input-wrapper .is-clearable {
+  padding-right: var(--pf-padding-6);
+}
 
 :root {
   --pf-number-input-padding: 10px;
@@ -2459,23 +2462,6 @@ body div[class*=select__single-value] {
   --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
 }
 
-.tanstack-table__action-bar-test {
-  left: 20% !important;
-}
-
-.tanstack-table__action-bar-docs {
-  bottom: unset !important;
-  top: 50% !important;
-  transform: translate(-50%, -50%) !important;
-}
-
-.tanstack-table__column.is-pinned {
-  opacity: 1;
-}
-.tanstack-table__column.is-not-pinned {
-  opacity: 0.3;
-}
-
 .tanstack-table__action-bar {
   position: fixed;
   bottom: 170px;
@@ -2516,10 +2502,10 @@ body div[class*=select__single-value] {
 .tanstack-table__no-results__text {
   font-size: var(--pf-line-height-md);
   font-weight: var(--pf-font-weight-medium);
-  color: var(--pf-primary-color-50);
+  color: var(--pf-tanstack-table-font-color);
 }
 .tanstack-table__no-results__text span {
-  color: var(--pf-white-color);
+  color: var(--pf-tanstack-table-font-color);
   cursor: pointer;
 }
 .tanstack-table__no-results__text span:hover {
@@ -2582,11 +2568,6 @@ body div[class*=select__single-value] {
 .tanstack-table.is-striped .tanstack-table__tbody tr:nth-child(odd) td {
   background-color: var(--pf-tanstack-table-stripe-color);
 }
-.tanstack-table .is-loading {
-  border: var(--pf-border-thin) solid var(--pf-border-color-primary);
-  height: 350px;
-  width: 100%;
-}
 .tanstack-table__thead {
   position: sticky;
   top: 0;

package/lib/index.d.ts

@@ -311,6 +311,7 @@ interface CheckboxProps {
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
     defaultChecked?: boolean;
+    className?: string;
 }
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
@@ -617,6 +618,7 @@ type Props<T extends object> = {
     clearFilters?: () => void;
     hasFilters?: boolean;
     isLoading?: boolean;
+    isLoadingMessage?: string;
     defaultPinnedColumns?: string[];
     onClickRow?: ((row: Row$1<T>) => void) | null;
     onRowClick?: (row: T) => void;
@@ -627,7 +629,7 @@ type Props<T extends object> = {
     defaultSorting?: SortingState;
 } & PaginationProps$1;
 
-declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, ...rest }: Props<T & {
+declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, isLoadingMessage, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, ...rest }: Props<T & {
     id: string;
 }>): react_jsx_runtime.JSX.Element;
 

package/lib/index.esm.css

@@ -1287,6 +1287,9 @@ a:hover,
   color: var(--pf-form-input-color);
   cursor: pointer;
 }
+.input-wrapper .is-clearable {
+  padding-right: var(--pf-padding-6);
+}
 
 :root {
   --pf-number-input-padding: 10px;
@@ -2459,23 +2462,6 @@ body div[class*=select__single-value] {
   --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
 }
 
-.tanstack-table__action-bar-test {
-  left: 20% !important;
-}
-
-.tanstack-table__action-bar-docs {
-  bottom: unset !important;
-  top: 50% !important;
-  transform: translate(-50%, -50%) !important;
-}
-
-.tanstack-table__column.is-pinned {
-  opacity: 1;
-}
-.tanstack-table__column.is-not-pinned {
-  opacity: 0.3;
-}
-
 .tanstack-table__action-bar {
   position: fixed;
   bottom: 170px;
@@ -2516,10 +2502,10 @@ body div[class*=select__single-value] {
 .tanstack-table__no-results__text {
   font-size: var(--pf-line-height-md);
   font-weight: var(--pf-font-weight-medium);
-  color: var(--pf-primary-color-50);
+  color: var(--pf-tanstack-table-font-color);
 }
 .tanstack-table__no-results__text span {
-  color: var(--pf-white-color);
+  color: var(--pf-tanstack-table-font-color);
   cursor: pointer;
 }
 .tanstack-table__no-results__text span:hover {
@@ -2582,11 +2568,6 @@ body div[class*=select__single-value] {
 .tanstack-table.is-striped .tanstack-table__tbody tr:nth-child(odd) td {
   background-color: var(--pf-tanstack-table-stripe-color);
 }
-.tanstack-table .is-loading {
-  border: var(--pf-border-thin) solid var(--pf-border-color-primary);
-  height: 350px;
-  width: 100%;
-}
 .tanstack-table__thead {
   position: sticky;
   top: 0;

package/lib/index.esm.js

@@ -5473,6 +5473,7 @@ const Input = React__default.forwardRef((_a, ref) => {
         onChange === null || onChange === void 0 ? void 0 : onChange({ target: { value: '' } });
     };
     const inputClasses = classNames('input', {
+        'is-clearable': isClearable,
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
@@ -5515,7 +5516,7 @@ const Pagination = (_a) => {
     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', {
+    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 || totalPages === 0 }) }) }), 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: totalPages === 0 ? '0' : inputValue, name: "currentPage", label: "Current Page", hasHiddenLabel: true, onKeyDown: (e) => {
                                     if (e.key === 'Enter') {
@@ -5527,7 +5528,7 @@ const Pagination = (_a) => {
                                     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 }) }) })] }) }) })));
+                                }, 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 || totalPages === 0 }) }) })] }) }) })));
 };
 
 const TablePagination$1 = ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }) => {
@@ -5779,8 +5780,8 @@ const Radio = React__default.forwardRef((_a, ref) => {
 });
 
 const Checkbox = React__default.forwardRef((_a, ref) => {
-    var { id, label, name, value, onChange, isDisabled, isChecked = false } = _a, rest = __rest(_a, ["id", "label", "name", "value", "onChange", "isDisabled", "isChecked"]);
-    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "checkbox-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-checkbox-input-${name}`, className: "checkbox-input", type: "checkbox", id: id, name: name, value: value, checked: isChecked, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label }, rest)), jsx("label", { htmlFor: id, className: "checkbox-input-label", "data-testid": `label-checkbox-input-${name}`, children: label })] }) }));
+    var { id, label, name, value, onChange, isDisabled, isChecked = false, className } = _a, rest = __rest(_a, ["id", "label", "name", "value", "onChange", "isDisabled", "isChecked", "className"]);
+    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "checkbox-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-checkbox-input-${name}`, className: classNames('checkbox-input', className), type: "checkbox", id: id, name: name, value: value, checked: isChecked, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label }, rest)), jsx("label", { htmlFor: id, className: "checkbox-input-label", "data-testid": `label-checkbox-input-${name}`, children: label })] }) }));
 });
 
 const Toggle = React__default.forwardRef((_a, ref) => {
@@ -41453,35 +41454,37 @@ const TableHeader = forwardRef(({ table }, ref) => {
             }) }, headerGroup.id))) }));
 });
 
+const TableBody = ({ table, onRowClick, activeRows }) => {
+    return (jsx(Fragment, { children: table.getRowModel().rows.map((row) => (jsx("tr", { className: classNames('tanstack-table__tbody__tr', {
+                'is-selected': row.getIsSelected(),
+                '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 (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())), 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))) }));
+};
+
 function CirclePulse(_a) {
     var { size = 'md', className } = _a, rest = __rest(_a, ["size", "className"]);
     return (jsx("div", Object.assign({ className: `circle-pulse circle-pulse-${size} ${className}`, "aria-hidden": true }, rest)));
 }
 
-const TableBody = ({ table, onRowClick, isLoading, columnsLength, activeRows, }) => {
-    return (jsxs(Fragment, { children: [table.getRowModel().rows.map((row) => (jsx("tr", { className: classNames('tanstack-table__tbody__tr', {
-                    'is-selected': row.getIsSelected(),
-                    '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 (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())), 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 && (jsx("tr", { className: "tanstack-table__tbody__tr", children: jsxs("td", { className: classNames('tanstack-table__centered-row', {
-                        'is-loading': isLoading,
-                    }), colSpan: columnsLength, children: [jsx("h2", { className: "mb-12", children: "Table is loading..." }), jsx(CirclePulse, { "data-testid": "loading-indicator" })] }) }))] }));
+const TableLoading = ({ columns, message }) => {
+    return (jsx("tr", { className: "tanstack-table__tbody__tr ", children: jsxs("td", { className: "tanstack-table__centered-row pa-6", colSpan: columns.length, children: [jsx("h2", { className: "my-12", children: message }), jsx(CirclePulse, { "data-testid": "loading-indicator", className: "mb-14" })] }) }));
 };
 
 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 = [], isStriped = true, actionBarClassName, defaultSorting } = _a, rest = __rest(_a, ["columns", "data", "className", "currentPage", "rowCount", "rowsPerPage", "onChangePage", "totalEntriesText", "TableActions", "error", "enableRowSelection", "clearFilters", "hasFilters", "showPagination", "isLoading", "defaultPinnedColumns", "onRowClick", "activeRows", "isStriped", "actionBarClassName", "defaultSorting"]);
+    var { columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, isLoadingMessage = 'Table is loading...', defaultPinnedColumns, onRowClick, activeRows = [], isStriped = true, actionBarClassName, defaultSorting } = _a, rest = __rest(_a, ["columns", "data", "className", "currentPage", "rowCount", "rowsPerPage", "onChangePage", "totalEntriesText", "TableActions", "error", "enableRowSelection", "clearFilters", "hasFilters", "showPagination", "isLoading", "isLoadingMessage", "defaultPinnedColumns", "onRowClick", "activeRows", "isStriped", "actionBarClassName", "defaultSorting"]);
     const { columns, defaultData, windowWidth, rowSelection, // This refers to the checkboxes.
     setRowSelection, formattedColumns, setFormattedColumns, } = useTanstackTable({
         defaultColumns,
@@ -41524,12 +41527,16 @@ function TanstackTable(_a) {
                             ? (_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 (jsx(TableBody, { table: table, onRowClick: onRowClick, isLoading: isLoading, columnsLength: columns.length, activeRows: activeRows }));
+        if (isLoading) {
+            return jsx(TableLoading, { columns: columns, message: isLoadingMessage });
+        }
+        return (jsx(TableBody, { table: table, onRowClick: onRowClick, activeRows: activeRows }));
     };
     return (jsxs("div", { className: "tanstack-table__outer-container", children: [jsxs("div", { className: "tanstack-table__container", children: [jsxs("table", { className: classNames('tanstack-table', className, {
-                            'is-Loading': isLoading,
                             'is-striped': isStriped,
-                        }), children: [jsx("thead", { className: "tanstack-table__thead", children: jsx(TableHeader, { table: table, ref: thRefs }) }), jsx("tbody", { className: "tanstack-table__tbody", children: renderBody() })] }), hasSelectedRows && (jsx(ActionBar, { table: table, TableActions: TableActions, className: actionBarClassName }))] }), shouldRenderPagination ? (jsx(TablePagination, { currentPage: currentPage, rowCount: rowCount, onChangePage: onChangePage, rowsPerPage: rowsPerPage, totalEntriesText: totalEntriesText !== null && totalEntriesText !== void 0 ? totalEntriesText : `${totalRowsOnPage} of ${rowCount} entries` })) : null] }));
+                        }), children: [jsx("thead", { className: "tanstack-table__thead", children: jsx(TableHeader, { table: table, ref: thRefs }) }), jsx("tbody", { className: "tanstack-table__tbody", children: renderBody() })] }), hasSelectedRows && (jsx(ActionBar, { table: table, TableActions: TableActions, className: actionBarClassName }))] }), shouldRenderPagination ? (jsx(TablePagination, { currentPage: currentPage, rowCount: rowCount, onChangePage: onChangePage, rowsPerPage: rowsPerPage, totalEntriesText: (totalEntriesText !== null && totalEntriesText !== void 0 ? totalEntriesText : rowCount === 1)
+                    ? '1 entry'
+                    : `${totalRowsOnPage} of ${rowCount} entries` })) : null] }));
 }
 
 /**