@coveord/plasma-mantine 49.2.5 → 49.3.0

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.
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "TableFilter", {
8
8
  return TableFilter;
9
9
  }
10
10
  });
11
- var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
12
11
  var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
13
12
  var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
14
13
  var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
@@ -33,15 +32,14 @@ var TableFilter = function(_param) {
33
32
  "styles",
34
33
  "unstyled"
35
34
  ]);
36
- var _useStyles = useStyles(null, {
35
+ var classes = useStyles(null, {
37
36
  name: "TableHeader",
38
37
  classNames: classNames,
39
38
  styles: styles,
40
39
  unstyled: unstyled
41
- }), classes = _useStyles.classes, cx = _useStyles.cx;
40
+ }).classes;
42
41
  var _useTable1 = (0, _useTable.useTable)(), state = _useTable1.state, setState = _useTable1.setState;
43
- var handleSearchChange = function(event) {
44
- var value = event.currentTarget.value;
42
+ var changeFilterValue = function(value) {
45
43
  setState(function(prevState) {
46
44
  return _objectSpreadProps(_objectSpread({}, prevState), {
47
45
  pagination: prevState.pagination ? {
@@ -52,16 +50,28 @@ var TableFilter = function(_param) {
52
50
  });
53
51
  });
54
52
  };
53
+ var handleChange = function(event) {
54
+ var value = event.currentTarget.value;
55
+ changeFilterValue(value);
56
+ };
57
+ var handleClear = function() {
58
+ changeFilterValue("");
59
+ };
55
60
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.TextInput, _objectSpread({
56
61
  className: classes.wrapper,
57
62
  placeholder: placeholder,
58
63
  mb: "md",
59
- rightSection: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.SearchSize16Px, {
64
+ rightSection: state.globalFilter ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.ActionIcon, {
65
+ onClick: handleClear,
66
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CrossSize16Px, {
67
+ height: 16
68
+ })
69
+ }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.SearchSize16Px, {
60
70
  height: 14,
61
- className: cx(_defineProperty({}, classes.empty, !state.globalFilter))
71
+ className: classes.empty
62
72
  }),
63
73
  value: state.globalFilter,
64
- onChange: handleSearchChange
74
+ onChange: handleChange
65
75
  }, others));
66
76
  };
67
77
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n wrapper: {\n marginBottom: '0 !important',\n },\n empty: {\n color: theme.colors.gray[4],\n },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n /**\n * The placeholder for the filter input\n *\n * @default \"Search by any field\"\n */\n placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n placeholder = 'Search by any field',\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const {state, setState} = useTable();\n\n const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n const {value} = event.currentTarget;\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: value,\n }));\n };\n\n return (\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n mb=\"md\"\n rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n value={state.globalFilter}\n onChange={handleSearchChange}\n {...others}\n />\n );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","name","classes","cx","useTable","state","setState","handleSearchChange","event","value","currentTarget","prevState","pagination","pageIndex","pageSize","globalFilter","TextInput","className","mb","rightSection","SearchSize16Px","height","onChange"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;gCAzBgB;oBACkC;wBAGxC;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BC,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,qCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcN;;;IAEtB;IAEA,qBACI,qBAACO,eAAS;QACNC,WAAWf,QAAQZ,OAAO;QAC1BM,aAAaA;QACbsB,IAAG;QACHC,4BAAc,qBAACC,gCAAc;YAACC,QAAQ;YAAIJ,WAAWd,GAAI,oBAACD,QAAQV,KAAK,EAAG,CAACa,MAAMU,YAAY;;QAC7FN,OAAOJ,MAAMU,YAAY;QACzBO,UAAUf;OACNP;AAGhB"}
1
+ {"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\n\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n wrapper: {\n marginBottom: '0 !important',\n },\n empty: {\n color: theme.colors.gray[4],\n },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n /**\n * The placeholder for the filter input\n *\n * @default \"Search by any field\"\n */\n placeholder?: string;\n}\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: 'TableHeader', classNames, styles, unstyled});\n const {state, setState} = useTable();\n\n const changeFilterValue = (value: string) => {\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: value,\n }));\n };\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const {value} = event.currentTarget;\n changeFilterValue(value);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n changeFilterValue('');\n };\n\n return (\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n mb=\"md\"\n rightSection={\n state.globalFilter ? (\n <ActionIcon onClick={handleClear}>\n <CrossSize16Px height={16} />\n </ActionIcon>\n ) : (\n <SearchSize16Px height={14} className={classes.empty} />\n )\n }\n value={state.globalFilter}\n onChange={handleChange}\n {...others}\n />\n );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","classes","name","useTable","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","TextInput","className","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","onChange"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;gCA1B+B;oBAC+B;wBAIpD;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWd,UAAU,IAAI,EAAE;QAACe,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BE,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,oBAAoB,SAACC,OAAkB;QACzCF,SAAS,SAACG;mBAA2B,qCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC,OAAU;QAClE,IAAM,AAACP,QAASO,MAAMC,aAAa,CAA5BR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD,WAAM;QAC5DV,kBAAkB;IACtB;IAEA,qBACI,qBAACW,eAAS;QACNC,WAAWjB,QAAQX,OAAO;QAC1BM,aAAaA;QACbuB,IAAG;QACHC,cACIhB,MAAMQ,YAAY,iBACd,qBAACS,gBAAU;YAACC,SAASN;sBACjB,cAAA,qBAACO,+BAAa;gBAACC,QAAQ;;2BAG3B,qBAACC,gCAAc;YAACD,QAAQ;YAAIN,WAAWjB,QAAQT,KAAK;UACvD;QAELe,OAAOH,MAAMQ,YAAY;QACzBc,UAAUb;OACNb;AAGhB"}
@@ -1,4 +1,4 @@
1
- import { Selectors, DefaultProps } from '@mantine/core';
1
+ import { DefaultProps, Selectors } from '@mantine/core';
2
2
  import { FunctionComponent } from 'react';
3
3
  declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<"wrapper" | "empty">) => {
4
4
  classes: Record<"wrapper" | "empty", string>;
@@ -1 +1 @@
1
- {"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,SAAS,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAc,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGrD,QAAA,MAAM,SAAS;;;;CAOZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAgC3D,CAAC"}
1
+ {"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,YAAY,EAAE,SAAS,EAAY,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAqB,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAI/E,QAAA,MAAM,SAAS;;;;CAOZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAgD3D,CAAC"}
@@ -1,10 +1,9 @@
1
- import _define_property from "@swc/helpers/src/_define_property.mjs";
2
1
  import _object_spread from "@swc/helpers/src/_object_spread.mjs";
3
2
  import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
4
3
  import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
5
4
  import { jsx as _jsx } from "react/jsx-runtime";
6
- import { SearchSize16Px } from "@coveord/plasma-react-icons";
7
- import { createStyles, TextInput } from "@mantine/core";
5
+ import { CrossSize16Px, SearchSize16Px } from "@coveord/plasma-react-icons";
6
+ import { ActionIcon, createStyles, TextInput } from "@mantine/core";
8
7
  import { useTable } from "./useTable";
9
8
  var useStyles = createStyles(function(theme) {
10
9
  return {
@@ -23,15 +22,14 @@ export var TableFilter = function(_param) {
23
22
  "styles",
24
23
  "unstyled"
25
24
  ]);
26
- var _useStyles = useStyles(null, {
25
+ var classes = useStyles(null, {
27
26
  name: "TableHeader",
28
27
  classNames: classNames,
29
28
  styles: styles,
30
29
  unstyled: unstyled
31
- }), classes = _useStyles.classes, cx = _useStyles.cx;
30
+ }).classes;
32
31
  var _useTable = useTable(), state = _useTable.state, setState = _useTable.setState;
33
- var handleSearchChange = function(event) {
34
- var value = event.currentTarget.value;
32
+ var changeFilterValue = function(value) {
35
33
  setState(function(prevState) {
36
34
  return _object_spread_props(_object_spread({}, prevState), {
37
35
  pagination: prevState.pagination ? {
@@ -42,16 +40,28 @@ export var TableFilter = function(_param) {
42
40
  });
43
41
  });
44
42
  };
43
+ var handleChange = function(event) {
44
+ var value = event.currentTarget.value;
45
+ changeFilterValue(value);
46
+ };
47
+ var handleClear = function() {
48
+ changeFilterValue("");
49
+ };
45
50
  return /*#__PURE__*/ _jsx(TextInput, _object_spread({
46
51
  className: classes.wrapper,
47
52
  placeholder: placeholder,
48
53
  mb: "md",
49
- rightSection: /*#__PURE__*/ _jsx(SearchSize16Px, {
54
+ rightSection: state.globalFilter ? /*#__PURE__*/ _jsx(ActionIcon, {
55
+ onClick: handleClear,
56
+ children: /*#__PURE__*/ _jsx(CrossSize16Px, {
57
+ height: 16
58
+ })
59
+ }) : /*#__PURE__*/ _jsx(SearchSize16Px, {
50
60
  height: 14,
51
- className: cx(_define_property({}, classes.empty, !state.globalFilter))
61
+ className: classes.empty
52
62
  }),
53
63
  value: state.globalFilter,
54
- onChange: handleSearchChange
64
+ onChange: handleChange
55
65
  }, others));
56
66
  };
57
67
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n wrapper: {\n marginBottom: '0 !important',\n },\n empty: {\n color: theme.colors.gray[4],\n },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n /**\n * The placeholder for the filter input\n *\n * @default \"Search by any field\"\n */\n placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n placeholder = 'Search by any field',\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const {state, setState} = useTable();\n\n const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n const {value} = event.currentTarget;\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: value,\n }));\n };\n\n return (\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n mb=\"md\"\n rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n value={state.globalFilter}\n onChange={handleSearchChange}\n {...others}\n />\n );\n};\n"],"names":["SearchSize16Px","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classNames","styles","unstyled","others","name","classes","cx","state","setState","handleSearchChange","event","value","currentTarget","prevState","pagination","pageIndex","pageSize","globalFilter","className","mb","rightSection","height","onChange"],"mappings":";;;;;AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,YAAY,EAAEC,SAAS,QAAgC,gBAAgB;AAG/E,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD,iBAM1D;oCALFC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BjB,YAAAA,YAAnBkB,QAAmBlB,UAAnBkB,OAAOC,WAAYnB,UAAZmB;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,wCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcN;;;IAEtB;IAEA,qBACI,KAACvB;QACG8B,WAAWb,QAAQb,OAAO;QAC1BO,aAAaA;QACboB,IAAG;QACHC,4BAAc,KAAClC;YAAemC,QAAQ;YAAIH,WAAWZ,GAAI,qBAACD,QAAQX,KAAK,EAAG,CAACa,MAAMU,YAAY;;QAC7FN,OAAOJ,MAAMU,YAAY;QACzBK,UAAUb;OACNN;AAGhB,EAAE"}
1
+ {"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\n\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n wrapper: {\n marginBottom: '0 !important',\n },\n empty: {\n color: theme.colors.gray[4],\n },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n /**\n * The placeholder for the filter input\n *\n * @default \"Search by any field\"\n */\n placeholder?: string;\n}\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: 'TableHeader', classNames, styles, unstyled});\n const {state, setState} = useTable();\n\n const changeFilterValue = (value: string) => {\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: value,\n }));\n };\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const {value} = event.currentTarget;\n changeFilterValue(value);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n changeFilterValue('');\n };\n\n return (\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n mb=\"md\"\n rightSection={\n state.globalFilter ? (\n <ActionIcon onClick={handleClear}>\n <CrossSize16Px height={16} />\n </ActionIcon>\n ) : (\n <SearchSize16Px height={14} className={classes.empty} />\n )\n }\n value={state.globalFilter}\n onChange={handleChange}\n {...others}\n />\n );\n};\n"],"names":["CrossSize16Px","SearchSize16Px","ActionIcon","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classNames","styles","unstyled","others","classes","name","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","className","mb","rightSection","onClick","height","onChange"],"mappings":";;;;AAAA,SAAQA,aAAa,EAAEC,cAAc,QAAO,8BAA8B;AAC1E,SAAQC,UAAU,EAAEC,YAAY,EAA2BC,SAAS,QAAO,gBAAgB;AAI3F,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD,iBAM1D;oCALFC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWd,UAAU,IAAI,EAAE;QAACe,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0Bf,YAAAA,YAAnBiB,QAAmBjB,UAAnBiB,OAAOC,WAAYlB,UAAZkB;IAEd,IAAMC,oBAAoB,SAACC,OAAkB;QACzCF,SAAS,SAACG;mBAA2B,wCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC,OAAU;QAClE,IAAM,AAACP,QAASO,MAAMC,aAAa,CAA5BR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD,WAAM;QAC5DV,kBAAkB;IACtB;IAEA,qBACI,KAACpB;QACG+B,WAAWf,QAAQZ,OAAO;QAC1BO,aAAaA;QACbqB,IAAG;QACHC,cACIf,MAAMQ,YAAY,iBACd,KAAC5B;YAAWoC,SAASJ;sBACjB,cAAA,KAAClC;gBAAcuC,QAAQ;;2BAG3B,KAACtC;YAAesC,QAAQ;YAAIJ,WAAWf,QAAQV,KAAK;UACvD;QAELe,OAAOH,MAAMQ,YAAY;QACzBU,UAAUT;OACNZ;AAGhB,EAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coveord/plasma-mantine",
3
- "version": "49.2.5",
3
+ "version": "49.3.0",
4
4
  "description": "A Plasma flavoured Mantine theme",
5
5
  "keywords": [
6
6
  "plasma",
@@ -1,7 +1,8 @@
1
- import {SearchSize16Px} from '@coveord/plasma-react-icons';
2
- import {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';
1
+ import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
2
+ import {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';
3
3
  import {TableState} from '@tanstack/react-table';
4
- import {ChangeEvent, FunctionComponent} from 'react';
4
+ import {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';
5
+
5
6
  import {useTable} from './useTable';
6
7
 
7
8
  const useStyles = createStyles((theme) => ({
@@ -30,11 +31,10 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
30
31
  unstyled,
31
32
  ...others
32
33
  }) => {
33
- const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
34
+ const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
34
35
  const {state, setState} = useTable();
35
36
 
36
- const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
37
- const {value} = event.currentTarget;
37
+ const changeFilterValue = (value: string) => {
38
38
  setState((prevState: TableState) => ({
39
39
  ...prevState,
40
40
  pagination: prevState.pagination
@@ -44,14 +44,31 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
44
44
  }));
45
45
  };
46
46
 
47
+ const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
48
+ const {value} = event.currentTarget;
49
+ changeFilterValue(value);
50
+ };
51
+
52
+ const handleClear: MouseEventHandler<HTMLButtonElement> = () => {
53
+ changeFilterValue('');
54
+ };
55
+
47
56
  return (
48
57
  <TextInput
49
58
  className={classes.wrapper}
50
59
  placeholder={placeholder}
51
60
  mb="md"
52
- rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}
61
+ rightSection={
62
+ state.globalFilter ? (
63
+ <ActionIcon onClick={handleClear}>
64
+ <CrossSize16Px height={16} />
65
+ </ActionIcon>
66
+ ) : (
67
+ <SearchSize16Px height={14} className={classes.empty} />
68
+ )
69
+ }
53
70
  value={state.globalFilter}
54
- onChange={handleSearchChange}
71
+ onChange={handleChange}
55
72
  {...others}
56
73
  />
57
74
  );
@@ -60,6 +60,20 @@ describe('Table.Filter', () => {
60
60
  );
61
61
  });
62
62
 
63
+ it('clears the filter when clicking on the cross icon', async () => {
64
+ const user = userEvent.setup({delay: null});
65
+ render(
66
+ <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} initialState={{globalFilter: 'foo'}}>
67
+ <Table.Header>
68
+ <Table.Filter placeholder="hello fruits" />
69
+ </Table.Header>
70
+ </Table>
71
+ );
72
+ expect(screen.getByRole('textbox')).toHaveValue('foo');
73
+ await user.click(screen.getByRole('button', {name: /cross/i}));
74
+ expect(screen.getByRole('textbox')).toHaveValue('');
75
+ });
76
+
63
77
  describe('when multi row selection is enabled', () => {
64
78
  it('does not unselect rows that get filtered out', async () => {
65
79
  const user = userEvent.setup({delay: null});