@coveord/plasma-mantine 49.2.3 → 49.2.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 +25 -25
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/table/Th.js +8 -11
- package/dist/cjs/components/table/Th.js.map +1 -1
- package/dist/definitions/components/table/Th.d.ts.map +1 -1
- package/dist/esm/components/table/Th.js +9 -12
- package/dist/esm/components/table/Th.js.map +1 -1
- package/package.json +1 -1
- package/src/components/table/Th.tsx +9 -7
- package/src/components/table/__tests__/Th.spec.tsx +5 -14
|
@@ -31,12 +31,14 @@ var useStyles = (0, _core.createStyles)(function(theme) {
|
|
|
31
31
|
};
|
|
32
32
|
});
|
|
33
33
|
var SortingIcons = {
|
|
34
|
-
asc: _plasmaReactIcons.
|
|
35
|
-
desc: _plasmaReactIcons.
|
|
34
|
+
asc: _plasmaReactIcons.ArrowUpSize16Px,
|
|
35
|
+
desc: _plasmaReactIcons.ArrowDownSize16Px,
|
|
36
|
+
none: _plasmaReactIcons.DoubleArrowHeadVSize16Px
|
|
36
37
|
};
|
|
37
38
|
var SortingLabels = {
|
|
38
39
|
asc: "ascending",
|
|
39
|
-
desc: "descending"
|
|
40
|
+
desc: "descending",
|
|
41
|
+
none: "none"
|
|
40
42
|
};
|
|
41
43
|
var Th = function(param) {
|
|
42
44
|
var header = param.header;
|
|
@@ -61,14 +63,14 @@ var Th = function(param) {
|
|
|
61
63
|
});
|
|
62
64
|
}
|
|
63
65
|
var onSort = header.column.getToggleSortingHandler();
|
|
64
|
-
var sortingOrder = header.column.getIsSorted();
|
|
65
|
-
var Icon = SortingIcons[sortingOrder
|
|
66
|
+
var sortingOrder = header.column.getIsSorted() || "none";
|
|
67
|
+
var Icon = SortingIcons[sortingOrder];
|
|
66
68
|
return /*#__PURE__*/ (0, _jsxRuntime.jsx)("th", {
|
|
67
69
|
className: classes.th,
|
|
68
70
|
style: {
|
|
69
71
|
width: width
|
|
70
72
|
},
|
|
71
|
-
"aria-sort":
|
|
73
|
+
"aria-sort": SortingLabels[sortingOrder],
|
|
72
74
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.UnstyledButton, {
|
|
73
75
|
onClick: onSort,
|
|
74
76
|
className: classes.control,
|
|
@@ -81,11 +83,6 @@ var Th = function(param) {
|
|
|
81
83
|
children: (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext())
|
|
82
84
|
}),
|
|
83
85
|
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Center, {
|
|
84
|
-
sx: function(theme) {
|
|
85
|
-
return {
|
|
86
|
-
color: sortingOrder ? theme.colors.action[8] : undefined
|
|
87
|
-
};
|
|
88
|
-
},
|
|
89
86
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Icon, {
|
|
90
87
|
height: 14
|
|
91
88
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n th: {\n fontWeight: '400 !important' as any,\n padding: '0 !important',\n color: theme.black + '!important',\n verticalAlign: 'middle',\n },\n\n control: {\n width: '100%',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n whiteSpace: 'nowrap',\n\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n },\n },\n}));\n\ninterface ThProps<T> {\n header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n asc: ArrowUpSize16Px,\n desc: ArrowDownSize16Px,\n none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels = {\n asc: 'ascending',\n desc: 'descending',\n none: 'none',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n const {classes} = useStyles();\n const size = header.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return (\n <th className={classes.th} style={{width}}>\n <Text size=\"xs\" py=\"xs\" px=\"sm\">\n {flexRender(header.column.columnDef.header, header.getContext())}\n </Text>\n </th>\n );\n }\n\n const onSort = header.column.getToggleSortingHandler();\n const sortingOrder = header.column.getIsSorted() || 'none';\n const Icon = SortingIcons[sortingOrder];\n\n return (\n <th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>\n <UnstyledButton onClick={onSort} className={classes.control}>\n <Group position=\"apart\" noWrap>\n <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n <Center>\n <Icon height={14} />\n </Center>\n </Group>\n </UnstyledButton>\n </th>\n );\n};\n"],"names":["Th","useStyles","createStyles","theme","th","fontWeight","padding","color","black","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","header","classes","size","column","getSize","defaultColumnSizing","undefined","isPlaceholder","getCanSort","className","style","Text","py","px","flexRender","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","UnstyledButton","onClick","Group","position","noWrap","Center","height"],"mappings":";;;;+BAuCaA;;;eAAAA;;;;gCAvC8D;oBACX;0BACV;AAEtD,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,OAAOJ,MAAMK,KAAK,GAAG;YACrBC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPL,SAAS,AAAC,GAAwBH,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;YACnDC,YAAY;YAEZ,WAAW;gBACPC,iBAAiBb,MAAMc,WAAW,KAAK,SAASd,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,KAAKC,iCAAe;IACpBC,MAAMC,mCAAiB;IACvBC,MAAMC,0CAAwB;AAClC;AAEA,IAAMC,gBAAgB;IAClBN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AAEO,IAAMzB,KAAK,gBAA8B;QAAxB4B,eAAAA;IACpB,IAAM,AAACC,UAAW5B,YAAX4B;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMrB,QAAQmB,SAASG,+BAAmB,CAACH,IAAI,GAAGA,OAAOI,SAAS;IAElE,IAAIN,OAAOO,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACP,OAAOG,MAAM,CAACK,UAAU,IAAI;QAC7B,qBACI,qBAAChC;YAAGiC,WAAWR,QAAQzB,EAAE;YAAEkC,OAAO;gBAAC3B,OAAAA;YAAK;sBACpC,cAAA,qBAAC4B,UAAI;gBAACT,MAAK;gBAAKU,IAAG;gBAAKC,IAAG;0BACtBC,IAAAA,sBAAU,EAACd,OAAOG,MAAM,CAACY,SAAS,CAACf,MAAM,EAAEA,OAAOgB,UAAU;;;IAI7E,CAAC;IAED,IAAMC,SAASjB,OAAOG,MAAM,CAACe,uBAAuB;IACpD,IAAMC,eAAenB,OAAOG,MAAM,CAACiB,WAAW,MAAM;IACpD,IAAMC,OAAO7B,YAAY,CAAC2B,aAAa;IAEvC,qBACI,qBAAC3C;QAAGiC,WAAWR,QAAQzB,EAAE;QAAEkC,OAAO;YAAC3B,OAAAA;QAAK;QAAGuC,aAAWvB,aAAa,CAACoB,aAAa;kBAC7E,cAAA,qBAACI,oBAAc;YAACC,SAASP;YAAQR,WAAWR,QAAQnB,OAAO;sBACvD,cAAA,sBAAC2C,WAAK;gBAACC,UAAS;gBAAQC,MAAM;;kCAC1B,qBAAChB,UAAI;wBAACT,MAAK;kCAAMY,IAAAA,sBAAU,EAACd,OAAOG,MAAM,CAACY,SAAS,CAACf,MAAM,EAAEA,OAAOgB,UAAU;;kCAC7E,qBAACY,YAAM;kCACH,cAAA,qBAACP;4BAAKQ,QAAQ;;;;;;;AAMtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Th.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAqB9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;
|
|
1
|
+
{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Th.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAqB9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAcD,eAAO,MAAM,EAAE,4CAmCd,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px } from "@coveord/plasma-react-icons";
|
|
3
3
|
import { Center, createStyles, Group, Text, UnstyledButton } from "@mantine/core";
|
|
4
4
|
import { defaultColumnSizing, flexRender } from "@tanstack/react-table";
|
|
5
5
|
var useStyles = createStyles(function(theme) {
|
|
@@ -21,12 +21,14 @@ var useStyles = createStyles(function(theme) {
|
|
|
21
21
|
};
|
|
22
22
|
});
|
|
23
23
|
var SortingIcons = {
|
|
24
|
-
asc:
|
|
25
|
-
desc:
|
|
24
|
+
asc: ArrowUpSize16Px,
|
|
25
|
+
desc: ArrowDownSize16Px,
|
|
26
|
+
none: DoubleArrowHeadVSize16Px
|
|
26
27
|
};
|
|
27
28
|
var SortingLabels = {
|
|
28
29
|
asc: "ascending",
|
|
29
|
-
desc: "descending"
|
|
30
|
+
desc: "descending",
|
|
31
|
+
none: "none"
|
|
30
32
|
};
|
|
31
33
|
export var Th = function(param) {
|
|
32
34
|
var header = param.header;
|
|
@@ -51,14 +53,14 @@ export var Th = function(param) {
|
|
|
51
53
|
});
|
|
52
54
|
}
|
|
53
55
|
var onSort = header.column.getToggleSortingHandler();
|
|
54
|
-
var sortingOrder = header.column.getIsSorted();
|
|
55
|
-
var Icon = SortingIcons[sortingOrder
|
|
56
|
+
var sortingOrder = header.column.getIsSorted() || "none";
|
|
57
|
+
var Icon = SortingIcons[sortingOrder];
|
|
56
58
|
return /*#__PURE__*/ _jsx("th", {
|
|
57
59
|
className: classes.th,
|
|
58
60
|
style: {
|
|
59
61
|
width: width
|
|
60
62
|
},
|
|
61
|
-
"aria-sort":
|
|
63
|
+
"aria-sort": SortingLabels[sortingOrder],
|
|
62
64
|
children: /*#__PURE__*/ _jsx(UnstyledButton, {
|
|
63
65
|
onClick: onSort,
|
|
64
66
|
className: classes.control,
|
|
@@ -71,11 +73,6 @@ export var Th = function(param) {
|
|
|
71
73
|
children: flexRender(header.column.columnDef.header, header.getContext())
|
|
72
74
|
}),
|
|
73
75
|
/*#__PURE__*/ _jsx(Center, {
|
|
74
|
-
sx: function(theme) {
|
|
75
|
-
return {
|
|
76
|
-
color: sortingOrder ? theme.colors.action[8] : undefined
|
|
77
|
-
};
|
|
78
|
-
},
|
|
79
76
|
children: /*#__PURE__*/ _jsx(Icon, {
|
|
80
77
|
height: 14
|
|
81
78
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n th: {\n fontWeight: '400 !important' as any,\n padding: '0 !important',\n color: theme.black + '!important',\n verticalAlign: 'middle',\n },\n\n control: {\n width: '100%',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n whiteSpace: 'nowrap',\n\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n },\n },\n}));\n\ninterface ThProps<T> {\n header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n asc: ArrowUpSize16Px,\n desc: ArrowDownSize16Px,\n none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels = {\n asc: 'ascending',\n desc: 'descending',\n none: 'none',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n const {classes} = useStyles();\n const size = header.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return (\n <th className={classes.th} style={{width}}>\n <Text size=\"xs\" py=\"xs\" px=\"sm\">\n {flexRender(header.column.columnDef.header, header.getContext())}\n </Text>\n </th>\n );\n }\n\n const onSort = header.column.getToggleSortingHandler();\n const sortingOrder = header.column.getIsSorted() || 'none';\n const Icon = SortingIcons[sortingOrder];\n\n return (\n <th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>\n <UnstyledButton onClick={onSort} className={classes.control}>\n <Group position=\"apart\" noWrap>\n <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n <Center>\n <Icon height={14} />\n </Center>\n </Group>\n </UnstyledButton>\n </th>\n );\n};\n"],"names":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","fontWeight","padding","color","black","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","desc","none","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","py","px","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","onClick","position","noWrap","height"],"mappings":";AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,SAAQC,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAChF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,OAAOJ,MAAMK,KAAK,GAAG;YACrBC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPL,SAAS,AAAC,GAAwBH,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;YACnDC,YAAY;YAEZ,WAAW;gBACPC,iBAAiBb,MAAMc,WAAW,KAAK,SAASd,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,KAAK5B;IACL6B,MAAM9B;IACN+B,MAAM7B;AACV;AAEA,IAAM8B,gBAAgB;IAClBH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK,gBAA8B;QAAxBC,eAAAA;IACpB,IAAM,AAACC,UAAWzB,YAAXyB;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMnB,QAAQiB,SAAS5B,oBAAoB4B,IAAI,GAAGA,OAAOG,SAAS;IAElE,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACN,OAAOG,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,KAAC7B;YAAG8B,WAAWP,QAAQvB,EAAE;YAAE+B,OAAO;gBAACxB,OAAAA;YAAK;sBACpC,cAAA,KAACb;gBAAK8B,MAAK;gBAAKQ,IAAG;gBAAKC,IAAG;0BACtBpC,WAAWyB,OAAOG,MAAM,CAACS,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;;IAI7E,CAAC;IAED,IAAMC,SAASd,OAAOG,MAAM,CAACY,uBAAuB;IACpD,IAAMC,eAAehB,OAAOG,MAAM,CAACc,WAAW,MAAM;IACpD,IAAMC,OAAOxB,YAAY,CAACsB,aAAa;IAEvC,qBACI,KAACtC;QAAG8B,WAAWP,QAAQvB,EAAE;QAAE+B,OAAO;YAACxB,OAAAA;QAAK;QAAGkC,aAAWrB,aAAa,CAACkB,aAAa;kBAC7E,cAAA,KAAC3C;YAAe+C,SAASN;YAAQN,WAAWP,QAAQjB,OAAO;sBACvD,cAAA,MAACb;gBAAMkD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAClD;wBAAK8B,MAAK;kCAAM3B,WAAWyB,OAAOG,MAAM,CAACS,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;kCAC7E,KAAC5C;kCACG,cAAA,KAACiD;4BAAKK,QAAQ;;;;;;;AAMtC,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';
|
|
2
2
|
import {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';
|
|
3
3
|
import {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';
|
|
4
4
|
|
|
@@ -26,13 +26,15 @@ interface ThProps<T> {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
const SortingIcons = {
|
|
29
|
-
asc:
|
|
30
|
-
desc:
|
|
29
|
+
asc: ArrowUpSize16Px,
|
|
30
|
+
desc: ArrowDownSize16Px,
|
|
31
|
+
none: DoubleArrowHeadVSize16Px,
|
|
31
32
|
};
|
|
32
33
|
|
|
33
34
|
const SortingLabels = {
|
|
34
35
|
asc: 'ascending',
|
|
35
36
|
desc: 'descending',
|
|
37
|
+
none: 'none',
|
|
36
38
|
} as const;
|
|
37
39
|
|
|
38
40
|
export const Th = <T,>({header}: ThProps<T>) => {
|
|
@@ -55,15 +57,15 @@ export const Th = <T,>({header}: ThProps<T>) => {
|
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
const onSort = header.column.getToggleSortingHandler();
|
|
58
|
-
const sortingOrder = header.column.getIsSorted();
|
|
59
|
-
const Icon = SortingIcons[sortingOrder
|
|
60
|
+
const sortingOrder = header.column.getIsSorted() || 'none';
|
|
61
|
+
const Icon = SortingIcons[sortingOrder];
|
|
60
62
|
|
|
61
63
|
return (
|
|
62
|
-
<th className={classes.th} style={{width}} aria-sort={
|
|
64
|
+
<th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>
|
|
63
65
|
<UnstyledButton onClick={onSort} className={classes.control}>
|
|
64
66
|
<Group position="apart" noWrap>
|
|
65
67
|
<Text size="xs">{flexRender(header.column.columnDef.header, header.getContext())}</Text>
|
|
66
|
-
<Center
|
|
68
|
+
<Center>
|
|
67
69
|
<Icon height={14} />
|
|
68
70
|
</Center>
|
|
69
71
|
</Group>
|
|
@@ -22,15 +22,11 @@ describe('Th', () => {
|
|
|
22
22
|
];
|
|
23
23
|
render(<Table data={data} columns={columns} />);
|
|
24
24
|
|
|
25
|
-
// icons are loadable, wait for them to load
|
|
26
|
-
await screen.findByRole('img', {name: 'arrowHeadDown'});
|
|
27
|
-
await screen.findByRole('img', {name: 'arrowHeadUp'});
|
|
28
|
-
|
|
29
25
|
const headers = screen.getAllByRole('button');
|
|
30
26
|
expect(headers.length).toBe(2);
|
|
31
27
|
|
|
32
|
-
expect(headers[0]).toHaveAccessibleName(
|
|
33
|
-
expect(headers[1]).toHaveAccessibleName(
|
|
28
|
+
expect(headers[0]).toHaveAccessibleName(/name doubleArrowHead/i);
|
|
29
|
+
expect(headers[1]).toHaveAccessibleName(/type doubleArrowHead/i);
|
|
34
30
|
});
|
|
35
31
|
|
|
36
32
|
it('changes the sort icon when clicking on a table header', async () => {
|
|
@@ -41,22 +37,17 @@ describe('Th', () => {
|
|
|
41
37
|
const onChange = vi.fn();
|
|
42
38
|
render(<Table data={data} columns={columns} onChange={onChange} />);
|
|
43
39
|
|
|
44
|
-
|
|
45
|
-
await screen.findAllByRole('img', {name: 'arrowHeadDown'});
|
|
46
|
-
await screen.findAllByRole('img', {name: 'arrowHeadUp'});
|
|
47
|
-
|
|
48
|
-
userEvent.click(screen.getByRole('button', {name: /name arrowheaddown/i}));
|
|
40
|
+
userEvent.click(screen.getByRole('button', {name: /name doubleArrowHead/i}));
|
|
49
41
|
await waitFor(() => {
|
|
50
42
|
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
|
|
51
43
|
});
|
|
52
44
|
|
|
53
|
-
userEvent.click(screen.getByRole('button', {name:
|
|
45
|
+
userEvent.click(screen.getByRole('button', {name: /name arrowUp/i}));
|
|
54
46
|
await waitFor(() => {
|
|
55
47
|
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: true}]}));
|
|
56
48
|
});
|
|
57
49
|
|
|
58
|
-
|
|
59
|
-
userEvent.click(screen.getByRole('button', {name: 'name arrowHeadUp'}));
|
|
50
|
+
userEvent.click(screen.getByRole('button', {name: /name arrowDown/i}));
|
|
60
51
|
await waitFor(() => {
|
|
61
52
|
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
|
|
62
53
|
});
|