@coveord/plasma-mantine 52.27.2 → 52.27.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +34 -34
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/header/HeaderDocAnchor/HeaderDocAnchor.d.ts +1 -1
- package/dist/cjs/components/header/HeaderDocAnchor/HeaderDocAnchor.d.ts.map +1 -1
- package/dist/cjs/components/header/HeaderDocAnchor/HeaderDocAnchor.js.map +1 -1
- package/dist/cjs/components/table/table-pagination/TablePagination.d.ts.map +1 -1
- package/dist/cjs/components/table/table-pagination/TablePagination.js +9 -0
- package/dist/cjs/components/table/table-pagination/TablePagination.js.map +1 -1
- package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.d.ts +1 -1
- package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.d.ts.map +1 -1
- package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.js.map +1 -1
- package/dist/esm/components/table/table-pagination/TablePagination.d.ts.map +1 -1
- package/dist/esm/components/table/table-pagination/TablePagination.js +9 -0
- package/dist/esm/components/table/table-pagination/TablePagination.js.map +1 -1
- package/package.json +7 -6
- package/src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx +1 -1
- package/src/components/table/__tests__/TablePagination.spec.tsx +77 -0
- package/src/components/table/table-pagination/TablePagination.tsx +8 -0
|
@@ -11,7 +11,7 @@ export interface HeaderDocAnchorProps extends Pick<TooltipProps, 'position'>, De
|
|
|
11
11
|
/**
|
|
12
12
|
* The tooltip text shown when hovering over the doc link icon
|
|
13
13
|
*/
|
|
14
|
-
label?:
|
|
14
|
+
label?: ReactNode;
|
|
15
15
|
/**
|
|
16
16
|
* React component to add the tooltip and anchor on
|
|
17
17
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderDocAnchor.d.ts","sourceRoot":"","sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,YAAY,EAAE,SAAS,EAAW,YAAY,EAA2B,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,EAAC,2BAA2B,EAAE,SAAS,EAAC,MAAM,0BAA0B,CAAC;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAOrE,MAAM,WAAW,oBACb,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,EAClC,YAAY,CAAC,0BAA0B,EAAE,2BAA2B,CAAC;IACzE;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"HeaderDocAnchor.d.ts","sourceRoot":"","sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,YAAY,EAAE,SAAS,EAAW,YAAY,EAA2B,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,EAAC,2BAA2B,EAAE,SAAS,EAAC,MAAM,0BAA0B,CAAC;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAOrE,MAAM,WAAW,oBACb,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,EAClC,YAAY,CAAC,0BAA0B,EAAE,2BAA2B,CAAC;IACzE;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAwBnE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, DefaultProps, Selectors, Tooltip, TooltipProps, useComponentDefaultProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\nimport {HeaderDocAnchorStylesParams, useStyles} from './HeaderDocAnchor.styles';\n\nexport type HeaderDocAnchorStylesNames = Selectors<typeof useStyles>;\n\nconst defaultProps: Partial<HeaderDocAnchorProps> = {\n position: 'right',\n children: <QuestionSize16Px height={16} />,\n};\n\nexport interface HeaderDocAnchorProps\n extends Pick<TooltipProps, 'position'>,\n DefaultProps<HeaderDocAnchorStylesNames, HeaderDocAnchorStylesParams> {\n /**\n * A href pointing to documentation related to the current panel.\n * When provided, an info icon is rendered next to the title as link to this documentation\n */\n href: string;\n /**\n * The tooltip text shown when hovering over the doc link icon\n */\n label?:
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, DefaultProps, Selectors, Tooltip, TooltipProps, useComponentDefaultProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\nimport {HeaderDocAnchorStylesParams, useStyles} from './HeaderDocAnchor.styles';\n\nexport type HeaderDocAnchorStylesNames = Selectors<typeof useStyles>;\n\nconst defaultProps: Partial<HeaderDocAnchorProps> = {\n position: 'right',\n children: <QuestionSize16Px height={16} />,\n};\n\nexport interface HeaderDocAnchorProps\n extends Pick<TooltipProps, 'position'>,\n DefaultProps<HeaderDocAnchorStylesNames, HeaderDocAnchorStylesParams> {\n /**\n * A href pointing to documentation related to the current panel.\n * When provided, an info icon is rendered next to the title as link to this documentation\n */\n href: string;\n /**\n * The tooltip text shown when hovering over the doc link icon\n */\n label?: ReactNode;\n /**\n * React component to add the tooltip and anchor on\n */\n children?: ReactNode;\n}\n\nexport const HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = (props: HeaderDocAnchorProps) => {\n const {\n classNames,\n styles,\n unstyled,\n className,\n children,\n href: docLink,\n label: docLinkTooltipLabel,\n ...others\n } = useComponentDefaultProps('PlasmaHeaderActions', defaultProps, props);\n const {classes, cx} = useStyles({}, {name: 'PlasmaHeaderActions', classNames, styles, unstyled});\n return (\n <Tooltip\n className={cx(className, classes.tooltip)}\n label={docLinkTooltipLabel}\n disabled={!docLinkTooltipLabel}\n {...others}\n >\n <Anchor className={classes.anchor} inline href={docLink} target=\"_blank\">\n {children}\n </Anchor>\n </Tooltip>\n );\n};\n"],"names":["HeaderDocAnchor","defaultProps","position","children","QuestionSize16Px","height","props","useComponentDefaultProps","classNames","styles","unstyled","className","href","docLink","label","docLinkTooltipLabel","others","useStyles","name","classes","cx","Tooltip","tooltip","disabled","Anchor","anchor","inline","target"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;gCA9BkB;oBACgE;qCAE1C;AAIrD,IAAMC,eAA8C;IAChDC,UAAU;IACVC,wBAAU,qBAACC,kCAAgB;QAACC,QAAQ;;AACxC;AAoBO,IAAML,kBAA2D,SAACM;IACrE,IASIC,4BAAAA,IAAAA,8BAAwB,EAAC,uBAAuBN,cAAcK,QAR9DE,aAQAD,0BARAC,YACAC,SAOAF,0BAPAE,QACAC,WAMAH,0BANAG,UACAC,YAKAJ,0BALAI,WACAR,WAIAI,0BAJAJ,UACAS,AAAMC,UAGNN,0BAHAK,MACAE,AAAOC,sBAEPR,0BAFAO,OACGE,sCACHT;QARAC;QACAC;QACAC;QACAC;QACAR;QACAS;QACAE;;IAGJ,IAAsBG,aAAAA,IAAAA,gCAAS,EAAC,CAAC,GAAG;QAACC,MAAM;QAAuBV,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAvFS,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBACI,qBAACC,aAAO;QACJV,WAAWS,GAAGT,WAAWQ,QAAQG,OAAO;QACxCR,OAAOC;QACPQ,UAAU,CAACR;OACPC;kBAEJ,cAAA,qBAACQ,YAAM;YAACb,WAAWQ,QAAQM,MAAM;YAAEC,MAAM;YAACd,MAAMC;YAASc,QAAO;sBAC3DxB;;;AAIjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-pagination/TablePagination.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"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"}
|
|
@@ -12,6 +12,7 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
|
12
12
|
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
|
|
13
13
|
var _jsxruntime = require("react/jsx-runtime");
|
|
14
14
|
var _core = require("@mantine/core");
|
|
15
|
+
var _hooks = require("@mantine/hooks");
|
|
15
16
|
var _TableContext = require("../TableContext");
|
|
16
17
|
var TablePagination = function(param) {
|
|
17
18
|
var totalPages = param.totalPages, onPageChange = param.onPageChange;
|
|
@@ -31,6 +32,14 @@ var TablePagination = function(param) {
|
|
|
31
32
|
});
|
|
32
33
|
};
|
|
33
34
|
var total = totalPages === null ? getPageCount() : totalPages;
|
|
35
|
+
(0, _hooks.useDidUpdate)(function() {
|
|
36
|
+
if (state.pagination.pageIndex + 1 > total && total > 0) {
|
|
37
|
+
updatePage(total);
|
|
38
|
+
}
|
|
39
|
+
}, [
|
|
40
|
+
state.pagination.pageIndex,
|
|
41
|
+
total
|
|
42
|
+
]);
|
|
34
43
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Pagination, {
|
|
35
44
|
value: state.pagination.pageIndex + 1,
|
|
36
45
|
onChange: updatePage,
|
|
@@ -1 +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":";;;;+
|
|
1
|
+
{"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"}
|
|
@@ -11,7 +11,7 @@ export interface HeaderDocAnchorProps extends Pick<TooltipProps, 'position'>, De
|
|
|
11
11
|
/**
|
|
12
12
|
* The tooltip text shown when hovering over the doc link icon
|
|
13
13
|
*/
|
|
14
|
-
label?:
|
|
14
|
+
label?: ReactNode;
|
|
15
15
|
/**
|
|
16
16
|
* React component to add the tooltip and anchor on
|
|
17
17
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderDocAnchor.d.ts","sourceRoot":"","sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,YAAY,EAAE,SAAS,EAAW,YAAY,EAA2B,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,EAAC,2BAA2B,EAAE,SAAS,EAAC,MAAM,0BAA0B,CAAC;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAOrE,MAAM,WAAW,oBACb,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,EAClC,YAAY,CAAC,0BAA0B,EAAE,2BAA2B,CAAC;IACzE;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"HeaderDocAnchor.d.ts","sourceRoot":"","sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,YAAY,EAAE,SAAS,EAAW,YAAY,EAA2B,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,EAAC,2BAA2B,EAAE,SAAS,EAAC,MAAM,0BAA0B,CAAC;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAOrE,MAAM,WAAW,oBACb,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,EAClC,YAAY,CAAC,0BAA0B,EAAE,2BAA2B,CAAC;IACzE;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAwBnE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, DefaultProps, Selectors, Tooltip, TooltipProps, useComponentDefaultProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\nimport {HeaderDocAnchorStylesParams, useStyles} from './HeaderDocAnchor.styles';\n\nexport type HeaderDocAnchorStylesNames = Selectors<typeof useStyles>;\n\nconst defaultProps: Partial<HeaderDocAnchorProps> = {\n position: 'right',\n children: <QuestionSize16Px height={16} />,\n};\n\nexport interface HeaderDocAnchorProps\n extends Pick<TooltipProps, 'position'>,\n DefaultProps<HeaderDocAnchorStylesNames, HeaderDocAnchorStylesParams> {\n /**\n * A href pointing to documentation related to the current panel.\n * When provided, an info icon is rendered next to the title as link to this documentation\n */\n href: string;\n /**\n * The tooltip text shown when hovering over the doc link icon\n */\n label?:
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, DefaultProps, Selectors, Tooltip, TooltipProps, useComponentDefaultProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\nimport {HeaderDocAnchorStylesParams, useStyles} from './HeaderDocAnchor.styles';\n\nexport type HeaderDocAnchorStylesNames = Selectors<typeof useStyles>;\n\nconst defaultProps: Partial<HeaderDocAnchorProps> = {\n position: 'right',\n children: <QuestionSize16Px height={16} />,\n};\n\nexport interface HeaderDocAnchorProps\n extends Pick<TooltipProps, 'position'>,\n DefaultProps<HeaderDocAnchorStylesNames, HeaderDocAnchorStylesParams> {\n /**\n * A href pointing to documentation related to the current panel.\n * When provided, an info icon is rendered next to the title as link to this documentation\n */\n href: string;\n /**\n * The tooltip text shown when hovering over the doc link icon\n */\n label?: ReactNode;\n /**\n * React component to add the tooltip and anchor on\n */\n children?: ReactNode;\n}\n\nexport const HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = (props: HeaderDocAnchorProps) => {\n const {\n classNames,\n styles,\n unstyled,\n className,\n children,\n href: docLink,\n label: docLinkTooltipLabel,\n ...others\n } = useComponentDefaultProps('PlasmaHeaderActions', defaultProps, props);\n const {classes, cx} = useStyles({}, {name: 'PlasmaHeaderActions', classNames, styles, unstyled});\n return (\n <Tooltip\n className={cx(className, classes.tooltip)}\n label={docLinkTooltipLabel}\n disabled={!docLinkTooltipLabel}\n {...others}\n >\n <Anchor className={classes.anchor} inline href={docLink} target=\"_blank\">\n {children}\n </Anchor>\n </Tooltip>\n );\n};\n"],"names":["QuestionSize16Px","Anchor","Tooltip","useComponentDefaultProps","useStyles","defaultProps","position","children","height","HeaderDocAnchor","props","classNames","styles","unstyled","className","href","docLink","label","docLinkTooltipLabel","others","classes","cx","name","tooltip","disabled","anchor","inline","target"],"mappings":";AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,MAAM,EAA2BC,OAAO,EAAgBC,wBAAwB,QAAO,gBAAgB;AAE/G,SAAqCC,SAAS,QAAO,2BAA2B;AAIhF,MAAMC,eAA8C;IAChDC,UAAU;IACVC,wBAAU,KAACP;QAAiBQ,QAAQ;;AACxC;AAoBA,OAAO,MAAMC,kBAA2D,CAACC;IACrE,MAAM,EACFC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTP,QAAQ,EACRQ,MAAMC,OAAO,EACbC,OAAOC,mBAAmB,EAC1B,GAAGC,QACN,GAAGhB,yBAAyB,uBAAuBE,cAAcK;IAClE,MAAM,EAACU,OAAO,EAAEC,EAAE,EAAC,GAAGjB,UAAU,CAAC,GAAG;QAACkB,MAAM;QAAuBX;QAAYC;QAAQC;IAAQ;IAC9F,qBACI,KAACX;QACGY,WAAWO,GAAGP,WAAWM,QAAQG,OAAO;QACxCN,OAAOC;QACPM,UAAU,CAACN;QACV,GAAGC,MAAM;kBAEV,cAAA,KAAClB;YAAOa,WAAWM,QAAQK,MAAM;YAAEC,MAAM;YAACX,MAAMC;YAASW,QAAO;sBAC3DpB;;;AAIjB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-pagination/TablePagination.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Pagination } from '@mantine/core';
|
|
3
|
+
import { useDidUpdate } from '@mantine/hooks';
|
|
3
4
|
import { useTable } from '../TableContext';
|
|
4
5
|
export const TablePagination = ({ totalPages, onPageChange })=>{
|
|
5
6
|
const { state, setState, containerRef, getPageCount } = useTable();
|
|
@@ -17,6 +18,14 @@ export const TablePagination = ({ totalPages, onPageChange })=>{
|
|
|
17
18
|
});
|
|
18
19
|
};
|
|
19
20
|
const total = totalPages === null ? getPageCount() : totalPages;
|
|
21
|
+
useDidUpdate(()=>{
|
|
22
|
+
if (state.pagination.pageIndex + 1 > total && total > 0) {
|
|
23
|
+
updatePage(total);
|
|
24
|
+
}
|
|
25
|
+
}, [
|
|
26
|
+
state.pagination.pageIndex,
|
|
27
|
+
total
|
|
28
|
+
]);
|
|
20
29
|
return /*#__PURE__*/ _jsx(Pagination, {
|
|
21
30
|
value: state.pagination.pageIndex + 1,
|
|
22
31
|
onChange: updatePage,
|
|
@@ -1 +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;
|
|
1
|
+
{"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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coveord/plasma-mantine",
|
|
3
|
-
"version": "52.27.
|
|
3
|
+
"version": "52.27.4",
|
|
4
4
|
"description": "A Plasma flavoured Mantine theme",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"plasma",
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
"@mantine/utils": "6.0.19",
|
|
35
35
|
"@monaco-editor/react": "4.5.1",
|
|
36
36
|
"@swc/helpers": "0.5.1",
|
|
37
|
-
"@tanstack/react-table": "8.
|
|
38
|
-
"@tanstack/table-core": "8.
|
|
37
|
+
"@tanstack/react-table": "8.14.0",
|
|
38
|
+
"@tanstack/table-core": "8.14.0",
|
|
39
39
|
"dayjs": "1.11.9",
|
|
40
40
|
"fast-deep-equal": "3.1.3",
|
|
41
41
|
"lodash.debounce": "4.0.8",
|
|
42
42
|
"lodash.defaultsdeep": "4.6.1",
|
|
43
43
|
"monaco-editor": "0.41.0",
|
|
44
|
-
"@coveord/plasma-react-icons": "52.
|
|
45
|
-
"@coveord/plasma-tokens": "52.
|
|
44
|
+
"@coveord/plasma-react-icons": "52.27.4",
|
|
45
|
+
"@coveord/plasma-tokens": "52.27.4"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@emotion/react": "11.11.1",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"jest": "29.6.3",
|
|
75
75
|
"jest-environment-jsdom": "29.6.3",
|
|
76
76
|
"jest-junit": "16.0.0",
|
|
77
|
-
"npm-run-
|
|
77
|
+
"npm-run-all2": "5.0.0",
|
|
78
78
|
"publint": "0.2.2",
|
|
79
79
|
"react": "18.2.0",
|
|
80
80
|
"react-dom": "18.2.0",
|
|
@@ -92,6 +92,7 @@
|
|
|
92
92
|
"@mantine/form": "^6.0.1",
|
|
93
93
|
"@mantine/hooks": "^6.0.1",
|
|
94
94
|
"@mantine/modals": "^6.0.1",
|
|
95
|
+
"@mantine/notifications": "^6.0.1",
|
|
95
96
|
"embla-carousel-react": "^7.0.4",
|
|
96
97
|
"react": ">= 18.0.0",
|
|
97
98
|
"react-dom": ">= 18.0.0"
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import {ColumnDef, createColumnHelper, getPaginationRowModel} from '@tanstack/table-core';
|
|
2
2
|
import {render, screen, userEvent, waitFor} from '@test-utils';
|
|
3
|
+
import {useState} from 'react';
|
|
3
4
|
|
|
4
5
|
import {Table} from '../Table';
|
|
6
|
+
import {useTable} from '../TableContext';
|
|
5
7
|
|
|
6
8
|
type RowData = {name: string};
|
|
7
9
|
|
|
@@ -134,4 +136,79 @@ describe('Table.Pagination', () => {
|
|
|
134
136
|
);
|
|
135
137
|
expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
|
|
136
138
|
});
|
|
139
|
+
|
|
140
|
+
it('changes page when the current page is greater than the total number of pages', async () => {
|
|
141
|
+
const user = userEvent.setup();
|
|
142
|
+
const onChangePage = vi.fn();
|
|
143
|
+
const Fixture = () => {
|
|
144
|
+
const {state} = useTable();
|
|
145
|
+
const [totalPages, setTotalPages] = useState(state.pagination.pageIndex + 1);
|
|
146
|
+
const removeAPage = () => setTotalPages(totalPages - 1);
|
|
147
|
+
|
|
148
|
+
return (
|
|
149
|
+
<>
|
|
150
|
+
<button data-testid="remove-page" onClick={removeAPage}>
|
|
151
|
+
change total pages
|
|
152
|
+
</button>
|
|
153
|
+
<Table.Pagination totalPages={totalPages} onPageChange={onChangePage} />
|
|
154
|
+
</>
|
|
155
|
+
);
|
|
156
|
+
};
|
|
157
|
+
render(
|
|
158
|
+
<Table data={[{name: 'grains'}]} columns={columns} initialState={{pagination: {pageSize: 1, pageIndex: 2}}}>
|
|
159
|
+
<Table.Footer>
|
|
160
|
+
<Fixture />
|
|
161
|
+
</Table.Footer>
|
|
162
|
+
</Table>,
|
|
163
|
+
);
|
|
164
|
+
|
|
165
|
+
expect(screen.getByRole('cell', {name: 'grains'})).toBeVisible();
|
|
166
|
+
let buttons = screen.getAllByRole('button');
|
|
167
|
+
expect(buttons).toHaveLength(6);
|
|
168
|
+
expect(buttons[0]).toHaveAccessibleName('change total pages');
|
|
169
|
+
expect(buttons[1]).toHaveAccessibleName('previous page');
|
|
170
|
+
expect(buttons[2]).toHaveAccessibleName('1');
|
|
171
|
+
expect(buttons[3]).toHaveAccessibleName('2');
|
|
172
|
+
expect(buttons[4]).toHaveAccessibleName('3');
|
|
173
|
+
expect(buttons[5]).toHaveAccessibleName('next page');
|
|
174
|
+
|
|
175
|
+
// remove a page
|
|
176
|
+
await user.click(screen.getByTestId('remove-page'));
|
|
177
|
+
|
|
178
|
+
// The page is 2, but the index is 1
|
|
179
|
+
expect(onChangePage).toHaveBeenCalledWith(1);
|
|
180
|
+
|
|
181
|
+
buttons = screen.getAllByRole('button');
|
|
182
|
+
expect(buttons).toHaveLength(5);
|
|
183
|
+
expect(buttons[0]).toHaveAccessibleName('change total pages');
|
|
184
|
+
expect(buttons[1]).toHaveAccessibleName('previous page');
|
|
185
|
+
expect(buttons[2]).toHaveAccessibleName('1');
|
|
186
|
+
expect(buttons[3]).toHaveAccessibleName('2');
|
|
187
|
+
expect(buttons[4]).toHaveAccessibleName('next page');
|
|
188
|
+
|
|
189
|
+
// remove a page
|
|
190
|
+
await user.click(screen.getByTestId('remove-page'));
|
|
191
|
+
|
|
192
|
+
// The page is 1, but the index is 0
|
|
193
|
+
expect(onChangePage).toHaveBeenCalledWith(0);
|
|
194
|
+
|
|
195
|
+
buttons = screen.getAllByRole('button');
|
|
196
|
+
expect(buttons).toHaveLength(4);
|
|
197
|
+
expect(buttons[0]).toHaveAccessibleName('change total pages');
|
|
198
|
+
expect(buttons[1]).toHaveAccessibleName('previous page');
|
|
199
|
+
expect(buttons[2]).toHaveAccessibleName('1');
|
|
200
|
+
expect(buttons[3]).toHaveAccessibleName('next page');
|
|
201
|
+
|
|
202
|
+
onChangePage.mockReset();
|
|
203
|
+
|
|
204
|
+
// remove a page
|
|
205
|
+
await user.click(screen.getByTestId('remove-page'));
|
|
206
|
+
|
|
207
|
+
// There is no more pages
|
|
208
|
+
expect(onChangePage).not.toHaveBeenCalled();
|
|
209
|
+
|
|
210
|
+
buttons = screen.getAllByRole('button');
|
|
211
|
+
expect(buttons).toHaveLength(1);
|
|
212
|
+
expect(buttons[0]).toHaveAccessibleName('change total pages');
|
|
213
|
+
});
|
|
137
214
|
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {Pagination} from '@mantine/core';
|
|
2
|
+
import {useDidUpdate} from '@mantine/hooks';
|
|
2
3
|
import {FunctionComponent} from 'react';
|
|
3
4
|
|
|
4
5
|
import {useTable} from '../TableContext';
|
|
@@ -6,6 +7,7 @@ import {TablePaginationProps} from './TablePagination.types';
|
|
|
6
7
|
|
|
7
8
|
export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages, onPageChange}) => {
|
|
8
9
|
const {state, setState, containerRef, getPageCount} = useTable();
|
|
10
|
+
|
|
9
11
|
const updatePage = (newPage: number) => {
|
|
10
12
|
onPageChange?.(newPage - 1);
|
|
11
13
|
setState((prevState) => ({
|
|
@@ -17,6 +19,12 @@ export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalP
|
|
|
17
19
|
|
|
18
20
|
const total = totalPages === null ? getPageCount() : totalPages;
|
|
19
21
|
|
|
22
|
+
useDidUpdate(() => {
|
|
23
|
+
if (state.pagination.pageIndex + 1 > total && total > 0) {
|
|
24
|
+
updatePage(total);
|
|
25
|
+
}
|
|
26
|
+
}, [state.pagination.pageIndex, total]);
|
|
27
|
+
|
|
20
28
|
return (
|
|
21
29
|
<Pagination
|
|
22
30
|
value={state.pagination.pageIndex + 1}
|