@coveord/plasma-mantine 52.23.1 → 52.24.1
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 +32 -32
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/table/table-filter/TableFilter.d.ts.map +1 -1
- package/dist/cjs/components/table/table-filter/TableFilter.js +5 -0
- package/dist/cjs/components/table/table-filter/TableFilter.js.map +1 -1
- package/dist/esm/components/table/table-filter/TableFilter.d.ts.map +1 -1
- package/dist/esm/components/table/table-filter/TableFilter.js +6 -1
- package/dist/esm/components/table/table-filter/TableFilter.js.map +1 -1
- package/package.json +3 -3
- package/src/components/table/__tests__/TableFilter.spec.tsx +25 -0
- package/src/components/table/table-filter/TableFilter.tsx +5 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,iBAAiB,EAAyC,MAAM,OAAO,CAAC;AAMpG,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAErD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA0D3D,CAAC"}
|
|
@@ -58,6 +58,11 @@ var TableFilter = function(_param) {
|
|
|
58
58
|
var handleClear = function() {
|
|
59
59
|
setFilter("");
|
|
60
60
|
};
|
|
61
|
+
(0, _react.useEffect)(function() {
|
|
62
|
+
setFilter(state.globalFilter);
|
|
63
|
+
}, [
|
|
64
|
+
state.globalFilter
|
|
65
|
+
]);
|
|
61
66
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
|
|
62
67
|
span: "content",
|
|
63
68
|
order: _Tablestyles.TableComponentsOrder.Filter,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, Grid, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler, useState} from 'react';\n\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableFilter.styles';\nimport {TableFilterProps} from './TableFilter.types';\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n placeholder = 'Search by any field',\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});\n const {state, setState} = useTable();\n const [filter, setFilter] = useState(state.globalFilter);\n const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n useDidUpdate(() => {\n setState((prevState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: debounced,\n }));\n return cancel;\n }, [debounced]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const {value} = event.currentTarget;\n setFilter(value);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n setFilter('');\n };\n\n return (\n <Grid.Col span=\"content\" order={TableComponentsOrder.Filter} py=\"sm\" className={classes.root}>\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n autoComplete=\"off\"\n mb=\"md\"\n rightSection={\n filter ? (\n <ActionIcon onClick={handleClear}>\n <CrossSize16Px height={16} />\n </ActionIcon>\n ) : (\n <SearchSize16Px height={16} className={classes.empty} />\n )\n }\n value={filter}\n onChange={handleChange}\n {...others}\n />\n </Grid.Col>\n );\n};\n"],"names":["TableFilter","placeholder","classNames","styles","unstyled","others","classes","useStyles","name","useTable","state","setState","useState","globalFilter","filter","setFilter","useDebouncedValue","debounced","cancel","useDidUpdate","prevState","pagination","pageIndex","pageSize","handleChange","event","value","currentTarget","handleClear","Grid","Col","span","order","TableComponentsOrder","Filter","py","className","root","TextInput","wrapper","autoComplete","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","empty","onChange"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;;;;gCAV+B;oBACF;
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, Grid, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler, useEffect, useState} from 'react';\n\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableFilter.styles';\nimport {TableFilterProps} from './TableFilter.types';\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n placeholder = 'Search by any field',\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});\n const {state, setState} = useTable();\n const [filter, setFilter] = useState(state.globalFilter);\n const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n useDidUpdate(() => {\n setState((prevState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: debounced,\n }));\n return cancel;\n }, [debounced]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const {value} = event.currentTarget;\n setFilter(value);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n setFilter('');\n };\n\n useEffect(() => {\n setFilter(state.globalFilter);\n }, [state.globalFilter]);\n\n return (\n <Grid.Col span=\"content\" order={TableComponentsOrder.Filter} py=\"sm\" className={classes.root}>\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n autoComplete=\"off\"\n mb=\"md\"\n rightSection={\n filter ? (\n <ActionIcon onClick={handleClear}>\n <CrossSize16Px height={16} />\n </ActionIcon>\n ) : (\n <SearchSize16Px height={16} className={classes.empty} />\n )\n }\n value={filter}\n onChange={handleChange}\n {...others}\n />\n </Grid.Col>\n );\n};\n"],"names":["TableFilter","placeholder","classNames","styles","unstyled","others","classes","useStyles","name","useTable","state","setState","useState","globalFilter","filter","setFilter","useDebouncedValue","debounced","cancel","useDidUpdate","prevState","pagination","pageIndex","pageSize","handleChange","event","value","currentTarget","handleClear","useEffect","Grid","Col","span","order","TableComponentsOrder","Filter","py","className","root","TextInput","wrapper","autoComplete","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","empty","onChange"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;;;;gCAV+B;oBACF;qBACkD;qBAE9C;2BACX;4BACZ;0EACD;AAGf,IAAMA,cAAmD;oCAC5DC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWC,IAAAA,0BAAS,EAAC,MAAM;QAACC,MAAM;QAAeN,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BG,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IACd,IAA4BC,+BAAAA,IAAAA,eAAQ,EAACF,MAAMG,YAAY,OAAhDC,SAAqBF,cAAbG,YAAaH;IAC5B,IAA4BI,wCAAAA,IAAAA,wBAAiB,EAACF,QAAQ,UAA/CG,YAAqBD,uBAAVE,SAAUF;IAE5BG,IAAAA,mBAAY,EAAC;QACTR,SAAS,SAACS;mBAAe,4CAClBA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BR,cAAcI;;;QAElB,OAAOC;IACX,GAAG;QAACD;KAAU;IAEd,IAAMO,eAAqD,SAACC;QACxD,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPX,UAAUW;IACd;IAEA,IAAME,cAAoD;QACtDb,UAAU;IACd;IAEAc,IAAAA,gBAAS,EAAC;QACNd,UAAUL,MAAMG,YAAY;IAChC,GAAG;QAACH,MAAMG,YAAY;KAAC;IAEvB,qBACI,qBAACiB,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,iCAAoB,CAACC,MAAM;QAAEC,IAAG;QAAKC,WAAW/B,QAAQgC,IAAI;kBACxF,cAAA,qBAACC,eAAS;YACNF,WAAW/B,QAAQkC,OAAO;YAC1BvC,aAAaA;YACbwC,cAAa;YACbC,IAAG;YACHC,cACI7B,uBACI,qBAAC8B,gBAAU;gBAACC,SAASjB;0BACjB,cAAA,qBAACkB,+BAAa;oBAACC,QAAQ;;+BAG3B,qBAACC,gCAAc;gBAACD,QAAQ;gBAAIV,WAAW/B,QAAQ2C,KAAK;;YAG5DvB,OAAOZ;YACPoC,UAAU1B;WACNnB;;AAIpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,iBAAiB,EAAyC,MAAM,OAAO,CAAC;AAMpG,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAErD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA0D3D,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
|
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
import { CrossSize16Px, SearchSize16Px } from "@coveord/plasma-react-icons";
|
|
7
7
|
import { ActionIcon, Grid, TextInput } from "@mantine/core";
|
|
8
|
-
import { useState } from "react";
|
|
8
|
+
import { useEffect, useState } from "react";
|
|
9
9
|
import { useDebouncedValue, useDidUpdate } from "@mantine/hooks";
|
|
10
10
|
import { TableComponentsOrder } from "../Table.styles";
|
|
11
11
|
import { useTable } from "../TableContext";
|
|
@@ -47,6 +47,11 @@ export var TableFilter = function(_param) {
|
|
|
47
47
|
var handleClear = function() {
|
|
48
48
|
setFilter("");
|
|
49
49
|
};
|
|
50
|
+
useEffect(function() {
|
|
51
|
+
setFilter(state.globalFilter);
|
|
52
|
+
}, [
|
|
53
|
+
state.globalFilter
|
|
54
|
+
]);
|
|
50
55
|
return /*#__PURE__*/ _jsx(Grid.Col, {
|
|
51
56
|
span: "content",
|
|
52
57
|
order: TableComponentsOrder.Filter,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, Grid, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler, useState} from 'react';\n\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableFilter.styles';\nimport {TableFilterProps} from './TableFilter.types';\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n placeholder = 'Search by any field',\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});\n const {state, setState} = useTable();\n const [filter, setFilter] = useState(state.globalFilter);\n const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n useDidUpdate(() => {\n setState((prevState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: debounced,\n }));\n return cancel;\n }, [debounced]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const {value} = event.currentTarget;\n setFilter(value);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n setFilter('');\n };\n\n return (\n <Grid.Col span=\"content\" order={TableComponentsOrder.Filter} py=\"sm\" className={classes.root}>\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n autoComplete=\"off\"\n mb=\"md\"\n rightSection={\n filter ? (\n <ActionIcon onClick={handleClear}>\n <CrossSize16Px height={16} />\n </ActionIcon>\n ) : (\n <SearchSize16Px height={16} className={classes.empty} />\n )\n }\n value={filter}\n onChange={handleChange}\n {...others}\n />\n </Grid.Col>\n );\n};\n"],"names":["CrossSize16Px","SearchSize16Px","ActionIcon","Grid","TextInput","useState","useDebouncedValue","useDidUpdate","TableComponentsOrder","useTable","useStyles","TableFilter","placeholder","classNames","styles","unstyled","others","classes","name","state","setState","globalFilter","filter","setFilter","debounced","cancel","prevState","pagination","pageIndex","pageSize","handleChange","event","value","currentTarget","handleClear","Col","span","order","Filter","py","className","root","wrapper","autoComplete","mb","rightSection","onClick","height","empty","onChange"],"mappings":";;;;;AAAA,SAAQA,aAAa,EAAEC,cAAc,QAAO,8BAA8B;AAC1E,SAAQC,UAAU,EAAEC,IAAI,EAAEC,SAAS,QAAO,gBAAgB;AAC1D,SAAkEC,QAAQ,QAAO,QAAQ;
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, Grid, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler, useEffect, useState} from 'react';\n\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableFilter.styles';\nimport {TableFilterProps} from './TableFilter.types';\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n placeholder = 'Search by any field',\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});\n const {state, setState} = useTable();\n const [filter, setFilter] = useState(state.globalFilter);\n const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n useDidUpdate(() => {\n setState((prevState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: debounced,\n }));\n return cancel;\n }, [debounced]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const {value} = event.currentTarget;\n setFilter(value);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n setFilter('');\n };\n\n useEffect(() => {\n setFilter(state.globalFilter);\n }, [state.globalFilter]);\n\n return (\n <Grid.Col span=\"content\" order={TableComponentsOrder.Filter} py=\"sm\" className={classes.root}>\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n autoComplete=\"off\"\n mb=\"md\"\n rightSection={\n filter ? (\n <ActionIcon onClick={handleClear}>\n <CrossSize16Px height={16} />\n </ActionIcon>\n ) : (\n <SearchSize16Px height={16} className={classes.empty} />\n )\n }\n value={filter}\n onChange={handleChange}\n {...others}\n />\n </Grid.Col>\n );\n};\n"],"names":["CrossSize16Px","SearchSize16Px","ActionIcon","Grid","TextInput","useEffect","useState","useDebouncedValue","useDidUpdate","TableComponentsOrder","useTable","useStyles","TableFilter","placeholder","classNames","styles","unstyled","others","classes","name","state","setState","globalFilter","filter","setFilter","debounced","cancel","prevState","pagination","pageIndex","pageSize","handleChange","event","value","currentTarget","handleClear","Col","span","order","Filter","py","className","root","wrapper","autoComplete","mb","rightSection","onClick","height","empty","onChange"],"mappings":";;;;;AAAA,SAAQA,aAAa,EAAEC,cAAc,QAAO,8BAA8B;AAC1E,SAAQC,UAAU,EAAEC,IAAI,EAAEC,SAAS,QAAO,gBAAgB;AAC1D,SAAkEC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAEpG,SAAQC,iBAAiB,EAAEC,YAAY,QAAO,iBAAiB;AAC/D,SAAQC,oBAAoB,QAAO,kBAAkB;AACrD,SAAQC,QAAQ,QAAO,kBAAkB;AACzC,OAAOC,eAAe,uBAAuB;AAG7C,OAAO,IAAMC,cAAmD;oCAC5DC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWP,UAAU,MAAM;QAACQ,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BR,YAAAA,YAAnBU,QAAmBV,UAAnBU,OAAOC,WAAYX,UAAZW;IACd,IAA4Bf,6BAAAA,SAASc,MAAME,YAAY,OAAhDC,SAAqBjB,cAAbkB,YAAalB;IAC5B,IAA4BC,sCAAAA,kBAAkBgB,QAAQ,UAA/CE,YAAqBlB,uBAAVmB,SAAUnB;IAE5BC,aAAa;QACTa,SAAS,SAACM;mBAAe,wCAClBA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BN,cAAcG;;;QAElB,OAAOC;IACX,GAAG;QAACD;KAAU;IAEd,IAAMM,eAAqD,SAACC;QACxD,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPT,UAAUS;IACd;IAEA,IAAME,cAAoD;QACtDX,UAAU;IACd;IAEAnB,UAAU;QACNmB,UAAUJ,MAAME,YAAY;IAChC,GAAG;QAACF,MAAME,YAAY;KAAC;IAEvB,qBACI,KAACnB,KAAKiC,GAAG;QAACC,MAAK;QAAUC,OAAO7B,qBAAqB8B,MAAM;QAAEC,IAAG;QAAKC,WAAWvB,QAAQwB,IAAI;kBACxF,cAAA,KAACtC;YACGqC,WAAWvB,QAAQyB,OAAO;YAC1B9B,aAAaA;YACb+B,cAAa;YACbC,IAAG;YACHC,cACIvB,uBACI,KAACrB;gBAAW6C,SAASZ;0BACjB,cAAA,KAACnC;oBAAcgD,QAAQ;;+BAG3B,KAAC/C;gBAAe+C,QAAQ;gBAAIP,WAAWvB,QAAQ+B,KAAK;;YAG5DhB,OAAOV;YACP2B,UAAUnB;WACNd;;AAIpB,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coveord/plasma-mantine",
|
|
3
|
-
"version": "52.
|
|
3
|
+
"version": "52.24.1",
|
|
4
4
|
"description": "A Plasma flavoured Mantine theme",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"plasma",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"lodash.debounce": "4.0.8",
|
|
42
42
|
"lodash.defaultsdeep": "4.6.1",
|
|
43
43
|
"monaco-editor": "0.41.0",
|
|
44
|
-
"@coveord/plasma-
|
|
45
|
-
"@coveord/plasma-
|
|
44
|
+
"@coveord/plasma-tokens": "52.23.1",
|
|
45
|
+
"@coveord/plasma-react-icons": "52.23.1"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@emotion/react": "11.11.1",
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
|
|
2
2
|
import {act, render, screen, userEvent, within} from '@test-utils';
|
|
3
3
|
|
|
4
|
+
import {Button} from '@mantine/core';
|
|
4
5
|
import {Table} from '../Table';
|
|
6
|
+
import {useTable} from '../TableContext';
|
|
5
7
|
|
|
6
8
|
type RowData = {name: string};
|
|
7
9
|
|
|
@@ -97,6 +99,29 @@ describe('Table.Filter', () => {
|
|
|
97
99
|
expect(screen.getByRole('textbox')).toHaveValue('');
|
|
98
100
|
});
|
|
99
101
|
|
|
102
|
+
it('clear the filter if the global state filter is cleared', async () => {
|
|
103
|
+
const user = userEvent.setup({delay: null});
|
|
104
|
+
|
|
105
|
+
const Fixture = () => {
|
|
106
|
+
const {clearFilters} = useTable();
|
|
107
|
+
return <Button data-testId="clear-button" onClick={clearFilters} />;
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
render(
|
|
111
|
+
<Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} initialState={{globalFilter: 'foo'}}>
|
|
112
|
+
<Table.Header>
|
|
113
|
+
<Table.Consumer>
|
|
114
|
+
<Fixture />
|
|
115
|
+
</Table.Consumer>
|
|
116
|
+
<Table.Filter />
|
|
117
|
+
</Table.Header>
|
|
118
|
+
</Table>,
|
|
119
|
+
);
|
|
120
|
+
expect(screen.getByRole('textbox')).toHaveValue('foo');
|
|
121
|
+
await user.click(screen.getByTestId('clear-button'));
|
|
122
|
+
expect(screen.getByRole('textbox')).toHaveValue('');
|
|
123
|
+
});
|
|
124
|
+
|
|
100
125
|
describe('when multi row selection is enabled', () => {
|
|
101
126
|
it('does not unselect rows that get filtered out', async () => {
|
|
102
127
|
const user = userEvent.setup({delay: null});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
|
|
2
2
|
import {ActionIcon, Grid, TextInput} from '@mantine/core';
|
|
3
|
-
import {ChangeEventHandler, FunctionComponent, MouseEventHandler, useState} from 'react';
|
|
3
|
+
import {ChangeEventHandler, FunctionComponent, MouseEventHandler, useEffect, useState} from 'react';
|
|
4
4
|
|
|
5
5
|
import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
|
|
6
6
|
import {TableComponentsOrder} from '../Table.styles';
|
|
@@ -40,6 +40,10 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
|
|
|
40
40
|
setFilter('');
|
|
41
41
|
};
|
|
42
42
|
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
setFilter(state.globalFilter);
|
|
45
|
+
}, [state.globalFilter]);
|
|
46
|
+
|
|
43
47
|
return (
|
|
44
48
|
<Grid.Col span="content" order={TableComponentsOrder.Filter} py="sm" className={classes.root}>
|
|
45
49
|
<TextInput
|