@coveord/plasma-mantine 52.23.1 → 52.25.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.
- package/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +33 -33
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/table/layouts/RowLayout.styles.d.ts.map +1 -1
- package/dist/cjs/components/table/layouts/RowLayout.styles.js +0 -3
- package/dist/cjs/components/table/layouts/RowLayout.styles.js.map +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/cjs/components/table/table-header/Th.d.ts +1 -1
- package/dist/cjs/components/table/table-header/Th.d.ts.map +1 -1
- package/dist/cjs/components/table/table-header/Th.js +38 -35
- package/dist/cjs/components/table/table-header/Th.js.map +1 -1
- package/dist/cjs/components/table/table-header/Th.styles.d.ts +4 -3
- package/dist/cjs/components/table/table-header/Th.styles.d.ts.map +1 -1
- package/dist/cjs/components/table/table-header/Th.styles.js +16 -13
- package/dist/cjs/components/table/table-header/Th.styles.js.map +1 -1
- package/dist/cjs/components/table/table-header/Th.types.d.ts +6 -1
- package/dist/cjs/components/table/table-header/Th.types.d.ts.map +1 -1
- package/dist/esm/components/table/layouts/RowLayout.styles.d.ts.map +1 -1
- package/dist/esm/components/table/layouts/RowLayout.styles.js +0 -3
- package/dist/esm/components/table/layouts/RowLayout.styles.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/dist/esm/components/table/table-header/Th.d.ts +1 -1
- package/dist/esm/components/table/table-header/Th.d.ts.map +1 -1
- package/dist/esm/components/table/table-header/Th.js +39 -36
- package/dist/esm/components/table/table-header/Th.js.map +1 -1
- package/dist/esm/components/table/table-header/Th.styles.d.ts +4 -3
- package/dist/esm/components/table/table-header/Th.styles.d.ts.map +1 -1
- package/dist/esm/components/table/table-header/Th.styles.js +16 -13
- package/dist/esm/components/table/table-header/Th.styles.js.map +1 -1
- package/dist/esm/components/table/table-header/Th.types.d.ts +6 -1
- package/dist/esm/components/table/table-header/Th.types.d.ts.map +1 -1
- package/dist/esm/components/table/table-header/Th.types.js.map +1 -1
- package/package.json +1 -1
- package/src/components/table/__tests__/TableFilter.spec.tsx +25 -0
- package/src/components/table/__tests__/Th.spec.tsx +4 -6
- package/src/components/table/layouts/RowLayout.styles.ts +0 -4
- package/src/components/table/table-filter/TableFilter.tsx +5 -1
- package/src/components/table/table-header/Th.styles.ts +23 -12
- package/src/components/table/table-header/Th.tsx +31 -26
- package/src/components/table/table-header/Th.types.ts +7 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowLayout.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,qBAAqB;IAClC,wBAAwB,EAAE,OAAO,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;CAChC;;;;;;;;AAED,
|
|
1
|
+
{"version":3,"file":"RowLayout.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,qBAAqB;IAClC,wBAAwB,EAAE,OAAO,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;CAChC;;;;;;;;AAED,wBA+DG"}
|
|
@@ -15,9 +15,6 @@ var _default = (0, _core.createStyles)(function(theme, param) {
|
|
|
15
15
|
var border = "".concat((0, _core.rem)(1), " solid ").concat(theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]);
|
|
16
16
|
return {
|
|
17
17
|
headerColumns: {
|
|
18
|
-
"& th:first-of-type > *": {
|
|
19
|
-
paddingLeft: "40px"
|
|
20
|
-
},
|
|
21
18
|
"& input[type=checkbox]": {
|
|
22
19
|
backgroundColor: disableRowSelection ? "".concat(theme.colors.gray[2]) : undefined,
|
|
23
20
|
borderColor: disableRowSelection ? "".concat(theme.colors.gray[3]) : "".concat(theme.colors.gray[4]),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"sourcesContent":["import {createStyles, rem} from '@mantine/core';\nexport interface RowLayoutStylesParams {\n multiRowSelectionEnabled: boolean;\n disableRowSelection: boolean;\n}\n\nexport default createStyles<string, RowLayoutStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n return {\n headerColumns: {\n '&
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"sourcesContent":["import {createStyles, rem} from '@mantine/core';\nexport interface RowLayoutStylesParams {\n multiRowSelectionEnabled: boolean;\n disableRowSelection: boolean;\n}\n\nexport default createStyles<string, RowLayoutStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n return {\n headerColumns: {\n '& input[type=checkbox]': {\n backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n pointerEvents: disableRowSelection ? 'none' : 'auto',\n cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n '& + svg': {\n color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n },\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowUnselectable: {\n '& input[type=checkbox]': {\n backgroundColor: `${theme.colors.gray[2]}`,\n borderColor: `${theme.colors.gray[3]}`,\n pointerEvents: 'none',\n cursor: 'not-allowed',\n\n '&:checked + svg': {\n color: `${theme.colors.gray[5]}`,\n },\n },\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n },\n\n row: {\n '& td:first-of-type': {\n paddingLeft: '40px',\n },\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n overflowWrap: 'anywhere',\n },\n\n cell: {\n verticalAlign: 'middle',\n // We must use height instead of minHeight here, otherwise it doesn't apply\n height: '56px',\n padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n borderBottom: border,\n },\n\n collapsible: {\n backgroundColor: rowBackgroundColor,\n borderBottom: border,\n },\n };\n});\n"],"names":["createStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","rem","dark","headerColumns","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","paddingLeft","overflowWrap","cell","verticalAlign","height","borderBottom","collapsible"],"mappings":";;;;+BAMA;;;eAAA;;;oBANgC;IAMhC,WAAeA,IAAAA,kBAAY,EAAgC,SAACC;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IAC1F,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAASJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OAAOR,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IACjH,IAAMC,SAAS,AAAC,GAAkBV,OAAhBW,IAAAA,SAAG,EAAC,IAAG,WAAoF,OAA3EX,MAAMI,WAAW,KAAK,SAASJ,MAAMO,MAAM,CAACK,IAAI,CAAC,EAAE,GAAGZ,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IAC5G,OAAO;QACHI,eAAe;YACX,0BAA0B;gBACtBC,iBAAiBZ,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAKM;gBACnEC,aAAad,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBT,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACtFQ,eAAef,sBAAsB,SAAS;gBAC9CgB,QAAQhB,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPiB,OAAOjB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAW,aAAa;YACTN,iBAAiBb,2BAA2Bc,YAAYZ;QAC5D;QAEAkB,iBAAiB;YACb,0BAA0B;gBACtBP,iBAAiB,AAAC,GAAuB,OAArBd,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACxCO,aAAa,AAAC,GAAuB,OAArBhB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACpCQ,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBnB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAa,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BxB,OAAvBA,MAAMyB,OAAO,CAACC,EAAE,EAAC,QAAuB,OAAjB1B,MAAMyB,OAAO,CAACE,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,sBAAsB;gBAClBC,aAAa;YACjB;YACA,WAAW;gBACPf,iBAAiBX;YACrB;YACA2B,cAAc;QAClB;QAEAC,MAAM;YACFC,eAAe;YACf,2EAA2E;YAC3EC,QAAQ;YACRT,SAAS,AAAC,GAAsBxB,OAApBA,MAAMyB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjB1B,MAAMyB,OAAO,CAACE,EAAE;YAChDO,cAAcxB;QAClB;QAEAyB,aAAa;YACTrB,iBAAiBX;YACjB+B,cAAcxB;QAClB;IACJ;AACJ"}
|
|
@@ -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":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,OAAO,EAAC,MAAM,YAAY,CAAC;AAkB9C,eAAO,MAAM,EAAE,mEA0Cd,CAAC"}
|
|
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "Th", {
|
|
|
11
11
|
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
12
12
|
var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
13
13
|
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
|
|
14
|
+
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
|
|
14
15
|
var _jsxruntime = require("react/jsx-runtime");
|
|
15
16
|
var _plasmareacticons = require("@coveord/plasma-react-icons");
|
|
16
17
|
var _core = require("@mantine/core");
|
|
@@ -26,56 +27,58 @@ var SortingLabels = {
|
|
|
26
27
|
desc: "descending",
|
|
27
28
|
none: "none"
|
|
28
29
|
};
|
|
29
|
-
var
|
|
30
|
-
|
|
30
|
+
var defaultProps = {
|
|
31
|
+
sortingIcons: SortingIcons
|
|
32
|
+
};
|
|
33
|
+
var Th = function(props) {
|
|
34
|
+
var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("PlasmaTableColumnHeader", defaultProps, props), header = _useComponentDefaultProps.header, classNames = _useComponentDefaultProps.classNames, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, sortingIcons = _useComponentDefaultProps.sortingIcons, others = _object_without_properties._(_useComponentDefaultProps, [
|
|
35
|
+
"header",
|
|
36
|
+
"classNames",
|
|
37
|
+
"styles",
|
|
38
|
+
"unstyled",
|
|
39
|
+
"sortingIcons"
|
|
40
|
+
]);
|
|
31
41
|
var columnSizing = _object_spread_props._(_object_spread._({}, _reacttable.defaultColumnSizing), {
|
|
32
42
|
size: header.column.columnDef.size,
|
|
33
43
|
minSize: header.column.columnDef.minSize,
|
|
34
44
|
maxSize: header.column.columnDef.maxSize
|
|
35
45
|
});
|
|
36
|
-
var
|
|
46
|
+
var _useStyles = (0, _Thstyles.default)(columnSizing, {
|
|
47
|
+
name: "PlasmaTableColumnHeader",
|
|
48
|
+
classNames: classNames,
|
|
49
|
+
styles: styles,
|
|
50
|
+
unstyled: unstyled
|
|
51
|
+
}), classes = _useStyles.classes, cx = _useStyles.cx;
|
|
37
52
|
if (header.isPlaceholder) {
|
|
38
53
|
return null;
|
|
39
54
|
}
|
|
40
55
|
if (!header.column.getCanSort()) {
|
|
41
56
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
|
|
42
|
-
className: classes.
|
|
43
|
-
children:
|
|
44
|
-
size: "xs",
|
|
45
|
-
py: "xs",
|
|
46
|
-
px: "sm",
|
|
47
|
-
fw: 500,
|
|
48
|
-
children: (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext())
|
|
49
|
-
})
|
|
57
|
+
className: classes.root,
|
|
58
|
+
children: (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext())
|
|
50
59
|
});
|
|
51
60
|
}
|
|
52
61
|
var onSort = header.column.getToggleSortingHandler();
|
|
53
62
|
var sortingOrder = header.column.getIsSorted() || "none";
|
|
54
|
-
var Icon =
|
|
55
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
|
|
72
|
-
height: 14
|
|
73
|
-
})
|
|
74
|
-
})
|
|
75
|
-
]
|
|
76
|
-
})
|
|
63
|
+
var Icon = sortingIcons[sortingOrder];
|
|
64
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.UnstyledButton, _object_spread_props._(_object_spread._({
|
|
65
|
+
component: "th",
|
|
66
|
+
onClick: onSort,
|
|
67
|
+
className: cx(classes.root, classes.control),
|
|
68
|
+
"aria-sort": SortingLabels[sortingOrder]
|
|
69
|
+
}, others), {
|
|
70
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
|
|
71
|
+
noWrap: true,
|
|
72
|
+
spacing: "xs",
|
|
73
|
+
children: [
|
|
74
|
+
(0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext()),
|
|
75
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
|
|
76
|
+
height: 16,
|
|
77
|
+
width: 16
|
|
78
|
+
})
|
|
79
|
+
]
|
|
77
80
|
})
|
|
78
|
-
});
|
|
81
|
+
}));
|
|
79
82
|
};
|
|
80
83
|
|
|
81
84
|
//# sourceMappingURL=Th.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Group, UnstyledButton, useComponentDefaultProps} from '@mantine/core';\nimport {defaultColumnSizing, flexRender} from '@tanstack/react-table';\nimport {AriaAttributes} from 'react';\nimport useStyles from './Th.styles';\nimport {SortState, ThProps} from './Th.types';\n\nconst SortingIcons: ThProps['sortingIcons'] = {\n asc: ArrowUpSize16Px,\n desc: ArrowDownSize16Px,\n none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels: Record<SortState, AriaAttributes['aria-sort']> = {\n asc: 'ascending',\n desc: 'descending',\n none: 'none',\n} as const;\n\nconst defaultProps: Partial<ThProps> = {\n sortingIcons: SortingIcons,\n};\n\nexport const Th = <T,>(props: ThProps<T>) => {\n const {header, classNames, styles, unstyled, sortingIcons, ...others} = useComponentDefaultProps(\n 'PlasmaTableColumnHeader',\n defaultProps as Partial<ThProps<T>>,\n props,\n );\n\n const columnSizing = {\n ...defaultColumnSizing,\n size: header.column.columnDef.size,\n minSize: header.column.columnDef.minSize,\n maxSize: header.column.columnDef.maxSize,\n };\n\n const {classes, cx} = useStyles(columnSizing, {name: 'PlasmaTableColumnHeader', classNames, styles, unstyled});\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return <th className={classes.root}>{flexRender(header.column.columnDef.header, header.getContext())}</th>;\n }\n\n const onSort = header.column.getToggleSortingHandler();\n const sortingOrder = header.column.getIsSorted() || 'none';\n const Icon = sortingIcons[sortingOrder];\n\n return (\n <UnstyledButton\n component=\"th\"\n onClick={onSort}\n className={cx(classes.root, classes.control)}\n aria-sort={SortingLabels[sortingOrder]}\n {...others}\n >\n <Group noWrap spacing=\"xs\">\n {flexRender(header.column.columnDef.header, header.getContext())}\n <Icon height={16} width={16} />\n </Group>\n </UnstyledButton>\n );\n};\n"],"names":["Th","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","defaultProps","sortingIcons","props","useComponentDefaultProps","header","classNames","styles","unstyled","others","columnSizing","defaultColumnSizing","size","column","columnDef","minSize","maxSize","useStyles","name","classes","cx","isPlaceholder","getCanSort","th","className","root","flexRender","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","UnstyledButton","component","onClick","control","aria-sort","Group","noWrap","spacing","height","width"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;gCAvB8D;oBACb;0BAChB;iEAExB;AAGtB,IAAMC,eAAwC;IAC1CC,KAAKC,iCAAe;IACpBC,MAAMC,mCAAiB;IACvBC,MAAMC,0CAAwB;AAClC;AAEA,IAAMC,gBAAgE;IAClEN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AAEA,IAAMG,eAAiC;IACnCC,cAAcT;AAClB;AAEO,IAAMD,KAAK,SAAKW;IACnB,IAAwEC,4BAAAA,IAAAA,8BAAwB,EAC5F,2BACAH,cACAE,QAHGE,SAAiED,0BAAjEC,QAAQC,aAAyDF,0BAAzDE,YAAYC,SAA6CH,0BAA7CG,QAAQC,WAAqCJ,0BAArCI,UAAUN,eAA2BE,0BAA3BF,cAAiBO,sCAAUL;QAAjEC;QAAQC;QAAYC;QAAQC;QAAUN;;IAM7C,IAAMQ,eAAe,4CACdC,+BAAmB;QACtBC,MAAMP,OAAOQ,MAAM,CAACC,SAAS,CAACF,IAAI;QAClCG,SAASV,OAAOQ,MAAM,CAACC,SAAS,CAACC,OAAO;QACxCC,SAASX,OAAOQ,MAAM,CAACC,SAAS,CAACE,OAAO;;IAG5C,IAAsBC,aAAAA,IAAAA,iBAAS,EAACP,cAAc;QAACQ,MAAM;QAA2BZ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAArGW,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAEhB,IAAIf,OAAOgB,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAAChB,OAAOQ,MAAM,CAACS,UAAU,IAAI;QAC7B,qBAAO,qBAACC;YAAGC,WAAWL,QAAQM,IAAI;sBAAGC,IAAAA,sBAAU,EAACrB,OAAOQ,MAAM,CAACC,SAAS,CAACT,MAAM,EAAEA,OAAOsB,UAAU;;IACrG;IAEA,IAAMC,SAASvB,OAAOQ,MAAM,CAACgB,uBAAuB;IACpD,IAAMC,eAAezB,OAAOQ,MAAM,CAACkB,WAAW,MAAM;IACpD,IAAMC,OAAO9B,YAAY,CAAC4B,aAAa;IAEvC,qBACI,qBAACG,oBAAc;QACXC,WAAU;QACVC,SAASP;QACTJ,WAAWJ,GAAGD,QAAQM,IAAI,EAAEN,QAAQiB,OAAO;QAC3CC,aAAWrC,aAAa,CAAC8B,aAAa;OAClCrB;kBAEJ,cAAA,sBAAC6B,WAAK;YAACC,MAAM;YAACC,SAAQ;;gBACjBd,IAAAA,sBAAU,EAACrB,OAAOQ,MAAM,CAACC,SAAS,CAACT,MAAM,EAAEA,OAAOsB,UAAU;8BAC7D,qBAACK;oBAAKS,QAAQ;oBAAIC,OAAO;;;;;AAIzC"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
export interface ThStyleParams {
|
|
2
2
|
size: number;
|
|
3
3
|
minSize: number;
|
|
4
4
|
maxSize: number;
|
|
5
|
-
}
|
|
5
|
+
}
|
|
6
|
+
declare const _default: (params: ThStyleParams, options?: import("@mantine/core").UseStylesOptions<string>) => {
|
|
6
7
|
classes: {
|
|
7
|
-
|
|
8
|
+
root: string;
|
|
8
9
|
control: string;
|
|
9
10
|
};
|
|
10
11
|
cx: (...args: any) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Th.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Th.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACnB;;;;;;;;;AAED,wBA6BI"}
|
|
@@ -9,27 +9,30 @@ Object.defineProperty(exports, "default", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
var _core = require("@mantine/core");
|
|
12
|
-
var
|
|
13
|
-
var
|
|
12
|
+
var _default = (0, _core.createStyles)(function(theme, param) {
|
|
13
|
+
var maxSize = param.maxSize, minSize = param.minSize, size = param.size;
|
|
14
14
|
return {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
padding: "0 !important",
|
|
15
|
+
root: {
|
|
16
|
+
padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
|
|
18
17
|
verticalAlign: "middle",
|
|
19
18
|
whiteSpace: "nowrap",
|
|
20
19
|
textAlign: "left",
|
|
21
20
|
color: theme.colors.gray[6],
|
|
22
21
|
backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.colors.gray[0],
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
height: theme.spacing.xl,
|
|
23
|
+
width: size !== null && size !== void 0 ? size : "auto",
|
|
24
|
+
minWidth: minSize,
|
|
25
|
+
maxWidth: maxSize,
|
|
26
|
+
fontWeight: 500,
|
|
27
|
+
fontSize: theme.fontSizes.xs,
|
|
28
|
+
"&:first-of-type": {
|
|
29
|
+
paddingLeft: theme.spacing.xl
|
|
30
|
+
},
|
|
31
|
+
"&:last-of-type": {
|
|
32
|
+
paddingRight: theme.spacing.xl
|
|
33
|
+
}
|
|
26
34
|
},
|
|
27
35
|
control: {
|
|
28
|
-
color: "inherit",
|
|
29
|
-
whiteSpace: "inherit",
|
|
30
|
-
fontWeight: "inherit",
|
|
31
|
-
width: "100%",
|
|
32
|
-
padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
|
|
33
36
|
"&:hover": {
|
|
34
37
|
backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[7] : theme.colors.gray[1]
|
|
35
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface ThStyleParams {\n size: number;\n minSize: number;\n maxSize: number;\n}\n\nexport default createStyles((theme, {maxSize, minSize, size}: ThStyleParams) => ({\n root: {\n padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n verticalAlign: 'middle',\n whiteSpace: 'nowrap',\n textAlign: 'left',\n color: theme.colors.gray[6],\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n height: theme.spacing.xl,\n width: size ?? 'auto',\n minWidth: minSize,\n maxWidth: maxSize,\n fontWeight: 500,\n fontSize: theme.fontSizes.xs,\n\n '&:first-of-type': {\n paddingLeft: theme.spacing.xl,\n },\n\n '&:last-of-type': {\n paddingRight: theme.spacing.xl,\n },\n },\n\n control: {\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n },\n },\n}));\n"],"names":["createStyles","theme","maxSize","minSize","size","root","padding","spacing","xs","sm","verticalAlign","whiteSpace","textAlign","color","colors","gray","backgroundColor","colorScheme","height","xl","width","minWidth","maxWidth","fontWeight","fontSize","fontSizes","paddingLeft","paddingRight","control"],"mappings":";;;;+BAQA;;;eAAA;;;oBAR2B;IAQ3B,WAAeA,IAAAA,kBAAY,EAAC,SAACC;QAAQC,gBAAAA,SAASC,gBAAAA,SAASC,aAAAA;WAA0B;QAC7EC,MAAM;YACFC,SAAS,AAAC,GAAsBL,OAApBA,MAAMM,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBP,MAAMM,OAAO,CAACE,EAAE;YAChDC,eAAe;YACfC,YAAY;YACZC,WAAW;YACXC,OAAOZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3BC,iBAAiBf,MAAMgB,WAAW,KAAK,SAAShB,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FG,QAAQjB,MAAMM,OAAO,CAACY,EAAE;YACxBC,OAAOhB,iBAAAA,kBAAAA,OAAQ;YACfiB,UAAUlB;YACVmB,UAAUpB;YACVqB,YAAY;YACZC,UAAUvB,MAAMwB,SAAS,CAACjB,EAAE;YAE5B,mBAAmB;gBACfkB,aAAazB,MAAMM,OAAO,CAACY,EAAE;YACjC;YAEA,kBAAkB;gBACdQ,cAAc1B,MAAMM,OAAO,CAACY,EAAE;YAClC;QACJ;QAEAS,SAAS;YACL,WAAW;gBACPZ,iBAAiBf,MAAMgB,WAAW,KAAK,SAAShB,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
+
import { DefaultProps, Selectors } from '@mantine/core';
|
|
1
2
|
import { Header } from '@tanstack/react-table';
|
|
2
|
-
|
|
3
|
+
import { ComponentType, SVGProps } from 'react';
|
|
4
|
+
import useStyles from './Th.styles';
|
|
5
|
+
export type SortState = 'asc' | 'desc' | 'none';
|
|
6
|
+
export interface ThProps<T = unknown> extends DefaultProps<Selectors<typeof useStyles>> {
|
|
3
7
|
header: Header<T, unknown>;
|
|
8
|
+
sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;
|
|
4
9
|
}
|
|
5
10
|
//# sourceMappingURL=Th.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Th.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"Th.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACnF,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CAC5E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowLayout.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,qBAAqB;IAClC,wBAAwB,EAAE,OAAO,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;CAChC;;;;;;;;AAED,
|
|
1
|
+
{"version":3,"file":"RowLayout.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,qBAAqB;IAClC,wBAAwB,EAAE,OAAO,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;CAChC;;;;;;;;AAED,wBA+DG"}
|
|
@@ -5,9 +5,6 @@ export default createStyles(function(theme, param) {
|
|
|
5
5
|
var border = "".concat(rem(1), " solid ").concat(theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]);
|
|
6
6
|
return {
|
|
7
7
|
headerColumns: {
|
|
8
|
-
"& th:first-of-type > *": {
|
|
9
|
-
paddingLeft: "40px"
|
|
10
|
-
},
|
|
11
8
|
"& input[type=checkbox]": {
|
|
12
9
|
backgroundColor: disableRowSelection ? "".concat(theme.colors.gray[2]) : undefined,
|
|
13
10
|
borderColor: disableRowSelection ? "".concat(theme.colors.gray[3]) : "".concat(theme.colors.gray[4]),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"sourcesContent":["import {createStyles, rem} from '@mantine/core';\nexport interface RowLayoutStylesParams {\n multiRowSelectionEnabled: boolean;\n disableRowSelection: boolean;\n}\n\nexport default createStyles<string, RowLayoutStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n return {\n headerColumns: {\n '&
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"sourcesContent":["import {createStyles, rem} from '@mantine/core';\nexport interface RowLayoutStylesParams {\n multiRowSelectionEnabled: boolean;\n disableRowSelection: boolean;\n}\n\nexport default createStyles<string, RowLayoutStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n return {\n headerColumns: {\n '& input[type=checkbox]': {\n backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n pointerEvents: disableRowSelection ? 'none' : 'auto',\n cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n '& + svg': {\n color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n },\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowUnselectable: {\n '& input[type=checkbox]': {\n backgroundColor: `${theme.colors.gray[2]}`,\n borderColor: `${theme.colors.gray[3]}`,\n pointerEvents: 'none',\n cursor: 'not-allowed',\n\n '&:checked + svg': {\n color: `${theme.colors.gray[5]}`,\n },\n },\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n },\n\n row: {\n '& td:first-of-type': {\n paddingLeft: '40px',\n },\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n overflowWrap: 'anywhere',\n },\n\n cell: {\n verticalAlign: 'middle',\n // We must use height instead of minHeight here, otherwise it doesn't apply\n height: '56px',\n padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n borderBottom: border,\n },\n\n collapsible: {\n backgroundColor: rowBackgroundColor,\n borderBottom: border,\n },\n };\n});\n"],"names":["createStyles","rem","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","dark","headerColumns","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","paddingLeft","overflowWrap","cell","verticalAlign","height","borderBottom","collapsible"],"mappings":"AAAA,SAAQA,YAAY,EAAEC,GAAG,QAAO,gBAAgB;AAMhD,eAAeD,aAA4C,SAACE;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IAC1F,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAASJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OAAOR,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IACjH,IAAMC,SAAS,AAAC,GAAkBV,OAAhBD,IAAI,IAAG,WAAoF,OAA3EC,MAAMI,WAAW,KAAK,SAASJ,MAAMO,MAAM,CAACI,IAAI,CAAC,EAAE,GAAGX,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IAC5G,OAAO;QACHG,eAAe;YACX,0BAA0B;gBACtBC,iBAAiBX,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAKK;gBACnEC,aAAab,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBT,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACtFO,eAAed,sBAAsB,SAAS;gBAC9Ce,QAAQf,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPgB,OAAOhB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAU,aAAa;YACTN,iBAAiBZ,2BAA2Ba,YAAYX;QAC5D;QAEAiB,iBAAiB;YACb,0BAA0B;gBACtBP,iBAAiB,AAAC,GAAuB,OAArBb,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACxCM,aAAa,AAAC,GAAuB,OAArBf,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACpCO,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBlB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAY,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BvB,OAAvBA,MAAMwB,OAAO,CAACC,EAAE,EAAC,QAAuB,OAAjBzB,MAAMwB,OAAO,CAACE,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,sBAAsB;gBAClBC,aAAa;YACjB;YACA,WAAW;gBACPf,iBAAiBV;YACrB;YACA0B,cAAc;QAClB;QAEAC,MAAM;YACFC,eAAe;YACf,2EAA2E;YAC3EC,QAAQ;YACRT,SAAS,AAAC,GAAsBvB,OAApBA,MAAMwB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBzB,MAAMwB,OAAO,CAACE,EAAE;YAChDO,cAAcvB;QAClB;QAEAwB,aAAa;YACTrB,iBAAiBV;YACjB8B,cAAcvB;QAClB;IACJ;AACJ,GAAG"}
|
|
@@ -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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,OAAO,EAAC,MAAM,YAAY,CAAC;AAkB9C,eAAO,MAAM,EAAE,mEA0Cd,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
2
2
|
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
3
|
+
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
|
|
3
4
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
5
|
import { ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px } from "@coveord/plasma-react-icons";
|
|
5
|
-
import {
|
|
6
|
+
import { Group, UnstyledButton, useComponentDefaultProps } from "@mantine/core";
|
|
6
7
|
import { defaultColumnSizing, flexRender } from "@tanstack/react-table";
|
|
7
8
|
import useStyles from "./Th.styles";
|
|
8
9
|
var SortingIcons = {
|
|
@@ -15,56 +16,58 @@ var SortingLabels = {
|
|
|
15
16
|
desc: "descending",
|
|
16
17
|
none: "none"
|
|
17
18
|
};
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
var defaultProps = {
|
|
20
|
+
sortingIcons: SortingIcons
|
|
21
|
+
};
|
|
22
|
+
export var Th = function(props) {
|
|
23
|
+
var _useComponentDefaultProps = useComponentDefaultProps("PlasmaTableColumnHeader", defaultProps, props), header = _useComponentDefaultProps.header, classNames = _useComponentDefaultProps.classNames, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, sortingIcons = _useComponentDefaultProps.sortingIcons, others = _object_without_properties(_useComponentDefaultProps, [
|
|
24
|
+
"header",
|
|
25
|
+
"classNames",
|
|
26
|
+
"styles",
|
|
27
|
+
"unstyled",
|
|
28
|
+
"sortingIcons"
|
|
29
|
+
]);
|
|
20
30
|
var columnSizing = _object_spread_props(_object_spread({}, defaultColumnSizing), {
|
|
21
31
|
size: header.column.columnDef.size,
|
|
22
32
|
minSize: header.column.columnDef.minSize,
|
|
23
33
|
maxSize: header.column.columnDef.maxSize
|
|
24
34
|
});
|
|
25
|
-
var
|
|
35
|
+
var _useStyles = useStyles(columnSizing, {
|
|
36
|
+
name: "PlasmaTableColumnHeader",
|
|
37
|
+
classNames: classNames,
|
|
38
|
+
styles: styles,
|
|
39
|
+
unstyled: unstyled
|
|
40
|
+
}), classes = _useStyles.classes, cx = _useStyles.cx;
|
|
26
41
|
if (header.isPlaceholder) {
|
|
27
42
|
return null;
|
|
28
43
|
}
|
|
29
44
|
if (!header.column.getCanSort()) {
|
|
30
45
|
return /*#__PURE__*/ _jsx("th", {
|
|
31
|
-
className: classes.
|
|
32
|
-
children:
|
|
33
|
-
size: "xs",
|
|
34
|
-
py: "xs",
|
|
35
|
-
px: "sm",
|
|
36
|
-
fw: 500,
|
|
37
|
-
children: flexRender(header.column.columnDef.header, header.getContext())
|
|
38
|
-
})
|
|
46
|
+
className: classes.root,
|
|
47
|
+
children: flexRender(header.column.columnDef.header, header.getContext())
|
|
39
48
|
});
|
|
40
49
|
}
|
|
41
50
|
var onSort = header.column.getToggleSortingHandler();
|
|
42
51
|
var sortingOrder = header.column.getIsSorted() || "none";
|
|
43
|
-
var Icon =
|
|
44
|
-
return /*#__PURE__*/ _jsx(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
children: /*#__PURE__*/ _jsx(Icon, {
|
|
61
|
-
height: 14
|
|
62
|
-
})
|
|
63
|
-
})
|
|
64
|
-
]
|
|
65
|
-
})
|
|
52
|
+
var Icon = sortingIcons[sortingOrder];
|
|
53
|
+
return /*#__PURE__*/ _jsx(UnstyledButton, _object_spread_props(_object_spread({
|
|
54
|
+
component: "th",
|
|
55
|
+
onClick: onSort,
|
|
56
|
+
className: cx(classes.root, classes.control),
|
|
57
|
+
"aria-sort": SortingLabels[sortingOrder]
|
|
58
|
+
}, others), {
|
|
59
|
+
children: /*#__PURE__*/ _jsxs(Group, {
|
|
60
|
+
noWrap: true,
|
|
61
|
+
spacing: "xs",
|
|
62
|
+
children: [
|
|
63
|
+
flexRender(header.column.columnDef.header, header.getContext()),
|
|
64
|
+
/*#__PURE__*/ _jsx(Icon, {
|
|
65
|
+
height: 16,
|
|
66
|
+
width: 16
|
|
67
|
+
})
|
|
68
|
+
]
|
|
66
69
|
})
|
|
67
|
-
});
|
|
70
|
+
}));
|
|
68
71
|
};
|
|
69
72
|
|
|
70
73
|
//# sourceMappingURL=Th.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Group, UnstyledButton, useComponentDefaultProps} from '@mantine/core';\nimport {defaultColumnSizing, flexRender} from '@tanstack/react-table';\nimport {AriaAttributes} from 'react';\nimport useStyles from './Th.styles';\nimport {SortState, ThProps} from './Th.types';\n\nconst SortingIcons: ThProps['sortingIcons'] = {\n asc: ArrowUpSize16Px,\n desc: ArrowDownSize16Px,\n none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels: Record<SortState, AriaAttributes['aria-sort']> = {\n asc: 'ascending',\n desc: 'descending',\n none: 'none',\n} as const;\n\nconst defaultProps: Partial<ThProps> = {\n sortingIcons: SortingIcons,\n};\n\nexport const Th = <T,>(props: ThProps<T>) => {\n const {header, classNames, styles, unstyled, sortingIcons, ...others} = useComponentDefaultProps(\n 'PlasmaTableColumnHeader',\n defaultProps as Partial<ThProps<T>>,\n props,\n );\n\n const columnSizing = {\n ...defaultColumnSizing,\n size: header.column.columnDef.size,\n minSize: header.column.columnDef.minSize,\n maxSize: header.column.columnDef.maxSize,\n };\n\n const {classes, cx} = useStyles(columnSizing, {name: 'PlasmaTableColumnHeader', classNames, styles, unstyled});\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return <th className={classes.root}>{flexRender(header.column.columnDef.header, header.getContext())}</th>;\n }\n\n const onSort = header.column.getToggleSortingHandler();\n const sortingOrder = header.column.getIsSorted() || 'none';\n const Icon = sortingIcons[sortingOrder];\n\n return (\n <UnstyledButton\n component=\"th\"\n onClick={onSort}\n className={cx(classes.root, classes.control)}\n aria-sort={SortingLabels[sortingOrder]}\n {...others}\n >\n <Group noWrap spacing=\"xs\">\n {flexRender(header.column.columnDef.header, header.getContext())}\n <Icon height={16} width={16} />\n </Group>\n </UnstyledButton>\n );\n};\n"],"names":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","Group","UnstyledButton","useComponentDefaultProps","defaultColumnSizing","flexRender","useStyles","SortingIcons","asc","desc","none","SortingLabels","defaultProps","sortingIcons","Th","props","header","classNames","styles","unstyled","others","columnSizing","size","column","columnDef","minSize","maxSize","name","classes","cx","isPlaceholder","getCanSort","th","className","root","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","component","onClick","control","aria-sort","noWrap","spacing","height","width"],"mappings":";;;;AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,SAAQC,KAAK,EAAEC,cAAc,EAAEC,wBAAwB,QAAO,gBAAgB;AAC9E,SAAQC,mBAAmB,EAAEC,UAAU,QAAO,wBAAwB;AAEtE,OAAOC,eAAe,cAAc;AAGpC,IAAMC,eAAwC;IAC1CC,KAAKT;IACLU,MAAMX;IACNY,MAAMV;AACV;AAEA,IAAMW,gBAAgE;IAClEH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,IAAME,eAAiC;IACnCC,cAAcN;AAClB;AAEA,OAAO,IAAMO,KAAK,SAAKC;IACnB,IAAwEZ,4BAAAA,yBACpE,2BACAS,cACAG,QAHGC,SAAiEb,0BAAjEa,QAAQC,aAAyDd,0BAAzDc,YAAYC,SAA6Cf,0BAA7Ce,QAAQC,WAAqChB,0BAArCgB,UAAUN,eAA2BV,0BAA3BU,cAAiBO,oCAAUjB;QAAjEa;QAAQC;QAAYC;QAAQC;QAAUN;;IAM7C,IAAMQ,eAAe,wCACdjB;QACHkB,MAAMN,OAAOO,MAAM,CAACC,SAAS,CAACF,IAAI;QAClCG,SAAST,OAAOO,MAAM,CAACC,SAAS,CAACC,OAAO;QACxCC,SAASV,OAAOO,MAAM,CAACC,SAAS,CAACE,OAAO;;IAG5C,IAAsBpB,aAAAA,UAAUe,cAAc;QAACM,MAAM;QAA2BV,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAArGS,UAAetB,WAAfsB,SAASC,KAAMvB,WAANuB;IAEhB,IAAIb,OAAOc,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACd,OAAOO,MAAM,CAACQ,UAAU,IAAI;QAC7B,qBAAO,KAACC;YAAGC,WAAWL,QAAQM,IAAI;sBAAG7B,WAAWW,OAAOO,MAAM,CAACC,SAAS,CAACR,MAAM,EAAEA,OAAOmB,UAAU;;IACrG;IAEA,IAAMC,SAASpB,OAAOO,MAAM,CAACc,uBAAuB;IACpD,IAAMC,eAAetB,OAAOO,MAAM,CAACgB,WAAW,MAAM;IACpD,IAAMC,OAAO3B,YAAY,CAACyB,aAAa;IAEvC,qBACI,KAACpC;QACGuC,WAAU;QACVC,SAASN;QACTH,WAAWJ,GAAGD,QAAQM,IAAI,EAAEN,QAAQe,OAAO;QAC3CC,aAAWjC,aAAa,CAAC2B,aAAa;OAClClB;kBAEJ,cAAA,MAACnB;YAAM4C,MAAM;YAACC,SAAQ;;gBACjBzC,WAAWW,OAAOO,MAAM,CAACC,SAAS,CAACR,MAAM,EAAEA,OAAOmB,UAAU;8BAC7D,KAACK;oBAAKO,QAAQ;oBAAIC,OAAO;;;;;AAIzC,EAAE"}
|