@coveord/plasma-mantine 52.27.3 → 52.27.4

package/dist/cjs/components/table/table-pagination/TablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-pagination/TablePagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAC,oBAAoB,EAAC,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAoCnE,CAAC"}
+{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-pagination/TablePagination.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAC,oBAAoB,EAAC,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CA2CnE,CAAC"}

package/dist/cjs/components/table/table-pagination/TablePagination.js

@@ -12,6 +12,7 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
+var _hooks = require("@mantine/hooks");
 var _TableContext = require("../TableContext");
 var TablePagination = function(param) {
     var totalPages = param.totalPages, onPageChange = param.onPageChange;
@@ -31,6 +32,14 @@ var TablePagination = function(param) {
         });
     };
     var total = totalPages === null ? getPageCount() : totalPages;
+    (0, _hooks.useDidUpdate)(function() {
+        if (state.pagination.pageIndex + 1 > total && total > 0) {
+            updatePage(total);
+        }
+    }, [
+        state.pagination.pageIndex,
+        total
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Pagination, {
         value: state.pagination.pageIndex + 1,
         onChange: updatePage,

package/dist/cjs/components/table/table-pagination/TablePagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-pagination/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from '../TableContext';\nimport {TablePaginationProps} from './TablePagination.types';\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages, onPageChange}) => {\n    const {state, setState, containerRef, getPageCount} = useTable();\n    const updatePage = (newPage: number) => {\n        onPageChange?.(newPage - 1);\n        setState((prevState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageIndex: newPage - 1},\n        }));\n        containerRef.current.scrollIntoView({behavior: 'smooth'});\n    };\n\n    const total = totalPages === null ? getPageCount() : totalPages;\n\n    return (\n        <Pagination\n            value={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            spacing=\"xs\"\n            getControlProps={(control) => {\n                switch (control) {\n                    case 'previous':\n                        return {\n                            component: 'button',\n                            'aria-label': 'previous page',\n                        };\n                    case 'next':\n                        return {component: 'button', 'aria-label': 'next page'};\n                    default:\n                        return {};\n                }\n            }}\n        />\n    );\n};\n"],"names":["TablePagination","totalPages","onPageChange","useTable","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","Pagination","value","onChange","boundaries","size","spacing","getControlProps","control","component"],"mappings":";;;;+BAMaA;;;eAAAA;;;;;;oBANY;4BAGF;AAGhB,IAAMA,kBAA2D;QAAEC,mBAAAA,YAAYC,qBAAAA;IAClF,IAAsDC,YAAAA,IAAAA,sBAAQ,KAAvDC,QAA+CD,UAA/CC,OAAOC,WAAwCF,UAAxCE,UAAUC,eAA8BH,UAA9BG,cAAcC,eAAgBJ,UAAhBI;IACtC,IAAMC,aAAa,SAACC;YAChBP;SAAAA,gBAAAA,0BAAAA,oCAAAA,cAAeO,UAAU;QACzBJ,SAAS,SAACK;mBAAe,4CAClBA;gBACHC,YAAY,4CAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQf,eAAe,OAAOM,iBAAiBN;IAErD,qBACI,qBAACgB,gBAAU;QACPC,OAAOd,MAAMO,UAAU,CAACC,SAAS,GAAG;QACpCO,UAAUX;QACVQ,OAAOA;QACPI,YAAY;QACZC,MAAK;QACLC,SAAQ;QACRC,iBAAiB,SAACC;YACd,OAAQA;gBACJ,KAAK;oBACD,OAAO;wBACHC,WAAW;wBACX,cAAc;oBAClB;gBACJ,KAAK;oBACD,OAAO;wBAACA,WAAW;wBAAU,cAAc;oBAAW;gBAC1D;oBACI,OAAO,CAAC;YAChB;QACJ;;AAGZ"}
+{"version":3,"sources":["../../../../../src/components/table/table-pagination/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from '../TableContext';\nimport {TablePaginationProps} from './TablePagination.types';\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages, onPageChange}) => {\n    const {state, setState, containerRef, getPageCount} = useTable();\n\n    const updatePage = (newPage: number) => {\n        onPageChange?.(newPage - 1);\n        setState((prevState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageIndex: newPage - 1},\n        }));\n        containerRef.current.scrollIntoView({behavior: 'smooth'});\n    };\n\n    const total = totalPages === null ? getPageCount() : totalPages;\n\n    useDidUpdate(() => {\n        if (state.pagination.pageIndex + 1 > total && total > 0) {\n            updatePage(total);\n        }\n    }, [state.pagination.pageIndex, total]);\n\n    return (\n        <Pagination\n            value={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            spacing=\"xs\"\n            getControlProps={(control) => {\n                switch (control) {\n                    case 'previous':\n                        return {\n                            component: 'button',\n                            'aria-label': 'previous page',\n                        };\n                    case 'next':\n                        return {component: 'button', 'aria-label': 'next page'};\n                    default:\n                        return {};\n                }\n            }}\n        />\n    );\n};\n"],"names":["TablePagination","totalPages","onPageChange","useTable","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","useDidUpdate","Pagination","value","onChange","boundaries","size","spacing","getControlProps","control","component"],"mappings":";;;;+BAOaA;;;eAAAA;;;;;;oBAPY;qBACE;4BAGJ;AAGhB,IAAMA,kBAA2D;QAAEC,mBAAAA,YAAYC,qBAAAA;IAClF,IAAsDC,YAAAA,IAAAA,sBAAQ,KAAvDC,QAA+CD,UAA/CC,OAAOC,WAAwCF,UAAxCE,UAAUC,eAA8BH,UAA9BG,cAAcC,eAAgBJ,UAAhBI;IAEtC,IAAMC,aAAa,SAACC;YAChBP;SAAAA,gBAAAA,0BAAAA,oCAAAA,cAAeO,UAAU;QACzBJ,SAAS,SAACK;mBAAe,4CAClBA;gBACHC,YAAY,4CAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQf,eAAe,OAAOM,iBAAiBN;IAErDgB,IAAAA,mBAAY,EAAC;QACT,IAAIb,MAAMO,UAAU,CAACC,SAAS,GAAG,IAAII,SAASA,QAAQ,GAAG;YACrDR,WAAWQ;QACf;IACJ,GAAG;QAACZ,MAAMO,UAAU,CAACC,SAAS;QAAEI;KAAM;IAEtC,qBACI,qBAACE,gBAAU;QACPC,OAAOf,MAAMO,UAAU,CAACC,SAAS,GAAG;QACpCQ,UAAUZ;QACVQ,OAAOA;QACPK,YAAY;QACZC,MAAK;QACLC,SAAQ;QACRC,iBAAiB,SAACC;YACd,OAAQA;gBACJ,KAAK;oBACD,OAAO;wBACHC,WAAW;wBACX,cAAc;oBAClB;gBACJ,KAAK;oBACD,OAAO;wBAACA,WAAW;wBAAU,cAAc;oBAAW;gBAC1D;oBACI,OAAO,CAAC;YAChB;QACJ;;AAGZ"}

package/dist/esm/components/table/table-pagination/TablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-pagination/TablePagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAC,oBAAoB,EAAC,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAoCnE,CAAC"}
+{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-pagination/TablePagination.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAC,oBAAoB,EAAC,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CA2CnE,CAAC"}

package/dist/esm/components/table/table-pagination/TablePagination.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pagination } from '@mantine/core';
+import { useDidUpdate } from '@mantine/hooks';
 import { useTable } from '../TableContext';
 export const TablePagination = ({ totalPages, onPageChange })=>{
     const { state, setState, containerRef, getPageCount } = useTable();
@@ -17,6 +18,14 @@ export const TablePagination = ({ totalPages, onPageChange })=>{
         });
     };
     const total = totalPages === null ? getPageCount() : totalPages;
+    useDidUpdate(()=>{
+        if (state.pagination.pageIndex + 1 > total && total > 0) {
+            updatePage(total);
+        }
+    }, [
+        state.pagination.pageIndex,
+        total
+    ]);
     return /*#__PURE__*/ _jsx(Pagination, {
         value: state.pagination.pageIndex + 1,
         onChange: updatePage,

package/dist/esm/components/table/table-pagination/TablePagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-pagination/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from '../TableContext';\nimport {TablePaginationProps} from './TablePagination.types';\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages, onPageChange}) => {\n    const {state, setState, containerRef, getPageCount} = useTable();\n    const updatePage = (newPage: number) => {\n        onPageChange?.(newPage - 1);\n        setState((prevState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageIndex: newPage - 1},\n        }));\n        containerRef.current.scrollIntoView({behavior: 'smooth'});\n    };\n\n    const total = totalPages === null ? getPageCount() : totalPages;\n\n    return (\n        <Pagination\n            value={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            spacing=\"xs\"\n            getControlProps={(control) => {\n                switch (control) {\n                    case 'previous':\n                        return {\n                            component: 'button',\n                            'aria-label': 'previous page',\n                        };\n                    case 'next':\n                        return {component: 'button', 'aria-label': 'next page'};\n                    default:\n                        return {};\n                }\n            }}\n        />\n    );\n};\n"],"names":["Pagination","useTable","TablePagination","totalPages","onPageChange","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","value","onChange","boundaries","size","spacing","getControlProps","control","component"],"mappings":";AAAA,SAAQA,UAAU,QAAO,gBAAgB;AAGzC,SAAQC,QAAQ,QAAO,kBAAkB;AAGzC,OAAO,MAAMC,kBAA2D,CAAC,EAACC,UAAU,EAAEC,YAAY,EAAC;IAC/F,MAAM,EAACC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,YAAY,EAAC,GAAGP;IACtD,MAAMQ,aAAa,CAACC;QAChBN,eAAeM,UAAU;QACzBJ,SAAS,CAACK,YAAe,CAAA;gBACrB,GAAGA,SAAS;gBACZC,YAAY;oBAAC,GAAGD,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;gBAAC;YAChE,CAAA;QACAH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,MAAMC,QAAQd,eAAe,OAAOK,iBAAiBL;IAErD,qBACI,KAACH;QACGkB,OAAOb,MAAMO,UAAU,CAACC,SAAS,GAAG;QACpCM,UAAUV;QACVQ,OAAOA;QACPG,YAAY;QACZC,MAAK;QACLC,SAAQ;QACRC,iBAAiB,CAACC;YACd,OAAQA;gBACJ,KAAK;oBACD,OAAO;wBACHC,WAAW;wBACX,cAAc;oBAClB;gBACJ,KAAK;oBACD,OAAO;wBAACA,WAAW;wBAAU,cAAc;oBAAW;gBAC1D;oBACI,OAAO,CAAC;YAChB;QACJ;;AAGZ,EAAE"}
+{"version":3,"sources":["../../../../../src/components/table/table-pagination/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from '../TableContext';\nimport {TablePaginationProps} from './TablePagination.types';\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages, onPageChange}) => {\n    const {state, setState, containerRef, getPageCount} = useTable();\n\n    const updatePage = (newPage: number) => {\n        onPageChange?.(newPage - 1);\n        setState((prevState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageIndex: newPage - 1},\n        }));\n        containerRef.current.scrollIntoView({behavior: 'smooth'});\n    };\n\n    const total = totalPages === null ? getPageCount() : totalPages;\n\n    useDidUpdate(() => {\n        if (state.pagination.pageIndex + 1 > total && total > 0) {\n            updatePage(total);\n        }\n    }, [state.pagination.pageIndex, total]);\n\n    return (\n        <Pagination\n            value={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            spacing=\"xs\"\n            getControlProps={(control) => {\n                switch (control) {\n                    case 'previous':\n                        return {\n                            component: 'button',\n                            'aria-label': 'previous page',\n                        };\n                    case 'next':\n                        return {component: 'button', 'aria-label': 'next page'};\n                    default:\n                        return {};\n                }\n            }}\n        />\n    );\n};\n"],"names":["Pagination","useDidUpdate","useTable","TablePagination","totalPages","onPageChange","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","value","onChange","boundaries","size","spacing","getControlProps","control","component"],"mappings":";AAAA,SAAQA,UAAU,QAAO,gBAAgB;AACzC,SAAQC,YAAY,QAAO,iBAAiB;AAG5C,SAAQC,QAAQ,QAAO,kBAAkB;AAGzC,OAAO,MAAMC,kBAA2D,CAAC,EAACC,UAAU,EAAEC,YAAY,EAAC;IAC/F,MAAM,EAACC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,YAAY,EAAC,GAAGP;IAEtD,MAAMQ,aAAa,CAACC;QAChBN,eAAeM,UAAU;QACzBJ,SAAS,CAACK,YAAe,CAAA;gBACrB,GAAGA,SAAS;gBACZC,YAAY;oBAAC,GAAGD,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;gBAAC;YAChE,CAAA;QACAH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,MAAMC,QAAQd,eAAe,OAAOK,iBAAiBL;IAErDH,aAAa;QACT,IAAIK,MAAMO,UAAU,CAACC,SAAS,GAAG,IAAII,SAASA,QAAQ,GAAG;YACrDR,WAAWQ;QACf;IACJ,GAAG;QAACZ,MAAMO,UAAU,CAACC,SAAS;QAAEI;KAAM;IAEtC,qBACI,KAAClB;QACGmB,OAAOb,MAAMO,UAAU,CAACC,SAAS,GAAG;QACpCM,UAAUV;QACVQ,OAAOA;QACPG,YAAY;QACZC,MAAK;QACLC,SAAQ;QACRC,iBAAiB,CAACC;YACd,OAAQA;gBACJ,KAAK;oBACD,OAAO;wBACHC,WAAW;wBACX,cAAc;oBAClB;gBACJ,KAAK;oBACD,OAAO;wBAACA,WAAW;wBAAU,cAAc;oBAAW;gBAC1D;oBACI,OAAO,CAAC;YAChB;QACJ;;AAGZ,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.27.3",
+  "version": "52.27.4",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -34,15 +34,15 @@
     "@mantine/utils": "6.0.19",
     "@monaco-editor/react": "4.5.1",
     "@swc/helpers": "0.5.1",
-    "@tanstack/react-table": "8.11.7",
-    "@tanstack/table-core": "8.11.7",
+    "@tanstack/react-table": "8.14.0",
+    "@tanstack/table-core": "8.14.0",
     "dayjs": "1.11.9",
     "fast-deep-equal": "3.1.3",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.41.0",
-    "@coveord/plasma-react-icons": "52.26.1",
-    "@coveord/plasma-tokens": "52.23.1"
+    "@coveord/plasma-react-icons": "52.27.4",
+    "@coveord/plasma-tokens": "52.27.4"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
@@ -74,7 +74,7 @@
     "jest": "29.6.3",
     "jest-environment-jsdom": "29.6.3",
     "jest-junit": "16.0.0",
-    "npm-run-all": "4.1.5",
+    "npm-run-all2": "5.0.0",
     "publint": "0.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -92,6 +92,7 @@
     "@mantine/form": "^6.0.1",
     "@mantine/hooks": "^6.0.1",
     "@mantine/modals": "^6.0.1",
+    "@mantine/notifications": "^6.0.1",
     "embla-carousel-react": "^7.0.4",
     "react": ">= 18.0.0",
     "react-dom": ">= 18.0.0"

package/src/components/table/__tests__/TablePagination.spec.tsx

@@ -1,7 +1,9 @@
 import {ColumnDef, createColumnHelper, getPaginationRowModel} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor} from '@test-utils';
+import {useState} from 'react';
 
 import {Table} from '../Table';
+import {useTable} from '../TableContext';
 
 type RowData = {name: string};
 
@@ -134,4 +136,79 @@ describe('Table.Pagination', () => {
         );
         expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
     });
+
+    it('changes page when the current page is greater than the total number of pages', async () => {
+        const user = userEvent.setup();
+        const onChangePage = vi.fn();
+        const Fixture = () => {
+            const {state} = useTable();
+            const [totalPages, setTotalPages] = useState(state.pagination.pageIndex + 1);
+            const removeAPage = () => setTotalPages(totalPages - 1);
+
+            return (
+                <>
+                    <button data-testid="remove-page" onClick={removeAPage}>
+                        change total pages
+                    </button>
+                    <Table.Pagination totalPages={totalPages} onPageChange={onChangePage} />
+                </>
+            );
+        };
+        render(
+            <Table data={[{name: 'grains'}]} columns={columns} initialState={{pagination: {pageSize: 1, pageIndex: 2}}}>
+                <Table.Footer>
+                    <Fixture />
+                </Table.Footer>
+            </Table>,
+        );
+
+        expect(screen.getByRole('cell', {name: 'grains'})).toBeVisible();
+        let buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(6);
+        expect(buttons[0]).toHaveAccessibleName('change total pages');
+        expect(buttons[1]).toHaveAccessibleName('previous page');
+        expect(buttons[2]).toHaveAccessibleName('1');
+        expect(buttons[3]).toHaveAccessibleName('2');
+        expect(buttons[4]).toHaveAccessibleName('3');
+        expect(buttons[5]).toHaveAccessibleName('next page');
+
+        // remove a page
+        await user.click(screen.getByTestId('remove-page'));
+
+        // The page is 2, but the index is 1
+        expect(onChangePage).toHaveBeenCalledWith(1);
+
+        buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(5);
+        expect(buttons[0]).toHaveAccessibleName('change total pages');
+        expect(buttons[1]).toHaveAccessibleName('previous page');
+        expect(buttons[2]).toHaveAccessibleName('1');
+        expect(buttons[3]).toHaveAccessibleName('2');
+        expect(buttons[4]).toHaveAccessibleName('next page');
+
+        // remove a page
+        await user.click(screen.getByTestId('remove-page'));
+
+        // The page is 1, but the index is 0
+        expect(onChangePage).toHaveBeenCalledWith(0);
+
+        buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(4);
+        expect(buttons[0]).toHaveAccessibleName('change total pages');
+        expect(buttons[1]).toHaveAccessibleName('previous page');
+        expect(buttons[2]).toHaveAccessibleName('1');
+        expect(buttons[3]).toHaveAccessibleName('next page');
+
+        onChangePage.mockReset();
+
+        // remove a page
+        await user.click(screen.getByTestId('remove-page'));
+
+        // There is no more pages
+        expect(onChangePage).not.toHaveBeenCalled();
+
+        buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(1);
+        expect(buttons[0]).toHaveAccessibleName('change total pages');
+    });
 });

package/src/components/table/table-pagination/TablePagination.tsx

@@ -1,4 +1,5 @@
 import {Pagination} from '@mantine/core';
+import {useDidUpdate} from '@mantine/hooks';
 import {FunctionComponent} from 'react';
 
 import {useTable} from '../TableContext';
@@ -6,6 +7,7 @@ import {TablePaginationProps} from './TablePagination.types';
 
 export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages, onPageChange}) => {
     const {state, setState, containerRef, getPageCount} = useTable();
+
     const updatePage = (newPage: number) => {
         onPageChange?.(newPage - 1);
         setState((prevState) => ({
@@ -17,6 +19,12 @@ export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalP
 
     const total = totalPages === null ? getPageCount() : totalPages;
 
+    useDidUpdate(() => {
+        if (state.pagination.pageIndex + 1 > total && total > 0) {
+            updatePage(total);
+        }
+    }, [state.pagination.pageIndex, total]);
+
     return (
         <Pagination
             value={state.pagination.pageIndex + 1}