@coveord/plasma-mantine 52.1.0 → 52.2.0

package/dist/esm/components/table/TableHeader.js

@@ -1,19 +1,22 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CrossSize16Px } from "@coveord/plasma-react-icons";
-import { createStyles, Group, Space, Tooltip } from "@mantine/core";
+import { createStyles, Grid, Tooltip } from "@mantine/core";
 import { Button } from "../button";
+import { TableComponentsOrder } from "./Table.styles";
 import { useTable } from "./TableContext";
 var useStyles = createStyles(function(theme) {
     return {
         root: {
-            position: "sticky",
-            top: 0,
-            zIndex: 1,
-            backgroundColor: theme.colors.gray[1],
+            flexDirection: "row-reverse",
+            flexWrap: "wrap-reverse",
+            background: "repeating-linear-gradient(".concat(theme.colors.gray[1], ", ").concat(theme.colors.gray[1], " 68px, ").concat(theme.colors.gray[3], " 68px, ").concat(theme.colors.gray[3], " 69px)"),
             borderBottom: "1px solid ".concat(theme.colors.gray[3])
+        },
+        multiSelectInfo: {
+            justifySelf: "flex-start"
         }
     };
 });
@@ -32,42 +35,39 @@ export var TableHeader = function(_param) {
         unstyled: unstyled
     }).classes;
     var selectedRows = getSelectedRows();
-    return multiRowSelectionEnabled ? /*#__PURE__*/ _jsxs(Group, {
-        position: "apart",
-        className: classes.root,
+    return /*#__PURE__*/ _jsxs(Grid, _object_spread_props(_object_spread({
+        justify: "flex-start",
+        align: "center",
+        gutter: "sm",
+        p: 0,
+        pl: "md",
+        pr: "lg",
+        m: 0,
+        className: classes.root
+    }, others), {
         children: [
-            selectedRows.length > 0 ? /*#__PURE__*/ _jsx(Tooltip, {
-                label: "Unselect all",
-                children: /*#__PURE__*/ _jsxs(Button, {
-                    onClick: clearSelection,
-                    ml: "lg",
-                    variant: "subtle",
-                    leftIcon: /*#__PURE__*/ _jsx(CrossSize16Px, {
-                        height: 16
-                    }),
-                    children: [
-                        selectedRows.length,
-                        " selected"
-                    ]
+            multiRowSelectionEnabled && selectedRows.length > 0 ? /*#__PURE__*/ _jsx(Grid.Col, {
+                span: "auto",
+                py: "sm",
+                className: classes.multiSelectInfo,
+                order: TableComponentsOrder.MultiSelectInfo,
+                children: /*#__PURE__*/ _jsx(Tooltip, {
+                    label: "Unselect all",
+                    children: /*#__PURE__*/ _jsxs(Button, {
+                        onClick: clearSelection,
+                        variant: "subtle",
+                        leftIcon: /*#__PURE__*/ _jsx(CrossSize16Px, {
+                            height: 16
+                        }),
+                        children: [
+                            selectedRows.length,
+                            " selected"
+                        ]
+                    })
                 })
-            }) : /*#__PURE__*/ _jsx(Space, {}),
-            /*#__PURE__*/ _jsx(Group, _object_spread_props(_object_spread({
-                position: "right",
-                spacing: "lg",
-                px: "md",
-                py: "sm"
-            }, others), {
-                children: children
-            }))
+            }) : null,
+            children
         ]
-    }) : /*#__PURE__*/ _jsx(Group, _object_spread_props(_object_spread({
-        position: "right",
-        spacing: "lg",
-        px: "md",
-        py: "sm",
-        className: classes.root
-    }, others), {
-        children: children
     }));
 };
 

package/dist/esm/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {\n        position: 'sticky',\n        top: 0,\n        zIndex: 1,\n        backgroundColor: theme.colors.gray[1],\n        borderBottom: `1px solid ${theme.colors.gray[3]}`,\n    },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n    /* Children of header (ie: actions, datepicker, etc.) */\n    children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n    classNames,\n    styles,\n    unstyled,\n    children,\n    ...others\n}) => {\n    const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();\n    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const selectedRows = getSelectedRows();\n    return multiRowSelectionEnabled ? (\n        <Group position=\"apart\" className={classes.root}>\n            {selectedRows.length > 0 ? (\n                <Tooltip label=\"Unselect all\">\n                    <Button onClick={clearSelection} ml=\"lg\" variant=\"subtle\" leftIcon={<CrossSize16Px height={16} />}>\n                        {selectedRows.length} selected\n                    </Button>\n                </Tooltip>\n            ) : (\n                <Space />\n            )}\n            <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" {...others}>\n                {children}\n            </Group>\n        </Group>\n    ) : (\n        <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" className={classes.root} {...others}>\n            {children}\n        </Group>\n    );\n};\n"],"names":["CrossSize16Px","createStyles","Group","Space","Tooltip","Button","useTable","useStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","TableHeader","classNames","styles","unstyled","children","others","getSelectedRows","multiRowSelectionEnabled","clearSelection","classes","name","selectedRows","className","length","label","onClick","ml","variant","leftIcon","height","spacing","px","py"],"mappings":";;;;AAAA,SAAQA,aAAa,QAAO,8BAA8B;AAC1D,SAAQC,YAAY,EAAgBC,KAAK,EAAaC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AAG3F,SAAQC,MAAM,QAAO,YAAY;AACjC,SAAQC,QAAQ,QAAO,iBAAiB;AAExC,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,MAAM;YACFC,UAAU;YACVC,KAAK;YACLC,QAAQ;YACRC,iBAAiBL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;YACrCC,cAAc,AAAC,aAAiC,OAArBR,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QACnD;IACJ;;AAOA,OAAO,IAAME,cAAmD,iBAM1D;QALFC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAoEf,YAAAA,YAA7DiB,kBAA6DjB,UAA7DiB,iBAAiBC,2BAA4ClB,UAA5CkB,0BAA0BC,iBAAkBnB,UAAlBmB;IAClD,IAAM,AAACC,UAAWnB,UAAU,IAAI,EAAE;QAACoB,MAAM;QAAeT,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EM;IACP,IAAME,eAAeL;IACrB,OAAOC,yCACH,MAACtB;QAAMQ,UAAS;QAAQmB,WAAWH,QAAQjB,IAAI;;YAC1CmB,aAAaE,MAAM,GAAG,kBACnB,KAAC1B;gBAAQ2B,OAAM;0BACX,cAAA,MAAC1B;oBAAO2B,SAASP;oBAAgBQ,IAAG;oBAAKC,SAAQ;oBAASC,wBAAU,KAACnC;wBAAcoC,QAAQ;;;wBACtFR,aAAaE,MAAM;wBAAC;;;+BAI7B,KAAC3B,UACJ;0BACD,KAACD;gBAAMQ,UAAS;gBAAQ2B,SAAQ;gBAAKC,IAAG;gBAAKC,IAAG;eAASjB;0BACpDD;;;uBAIT,KAACnB;QAAMQ,UAAS;QAAQ2B,SAAQ;QAAKC,IAAG;QAAKC,IAAG;QAAKV,WAAWH,QAAQjB,IAAI;OAAMa;kBAC7ED;OAER;AACL,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Grid, Selectors, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {\n        flexDirection: 'row-reverse',\n        flexWrap: 'wrap-reverse',\n        background: `repeating-linear-gradient(${theme.colors.gray[1]}, ${theme.colors.gray[1]} 68px, ${theme.colors.gray[3]} 68px, ${theme.colors.gray[3]} 69px)`,\n        borderBottom: `1px solid ${theme.colors.gray[3]}`,\n    },\n    multiSelectInfo: {\n        justifySelf: 'flex-start',\n    },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n    /* Children of header (ie: actions, datepicker, etc.) */\n    children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n    classNames,\n    styles,\n    unstyled,\n    children,\n    ...others\n}) => {\n    const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();\n    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const selectedRows = getSelectedRows();\n    return (\n        <Grid\n            justify=\"flex-start\"\n            align=\"center\"\n            gutter=\"sm\"\n            p={0}\n            pl=\"md\"\n            pr=\"lg\"\n            m={0}\n            className={classes.root}\n            {...others}\n        >\n            {multiRowSelectionEnabled && selectedRows.length > 0 ? (\n                <Grid.Col\n                    span=\"auto\"\n                    py=\"sm\"\n                    className={classes.multiSelectInfo}\n                    order={TableComponentsOrder.MultiSelectInfo}\n                >\n                    <Tooltip label=\"Unselect all\">\n                        <Button onClick={clearSelection} variant=\"subtle\" leftIcon={<CrossSize16Px height={16} />}>\n                            {selectedRows.length} selected\n                        </Button>\n                    </Tooltip>\n                </Grid.Col>\n            ) : null}\n            {children}\n        </Grid>\n    );\n};\n"],"names":["CrossSize16Px","createStyles","Grid","Tooltip","Button","TableComponentsOrder","useTable","useStyles","theme","root","flexDirection","flexWrap","background","colors","gray","borderBottom","multiSelectInfo","justifySelf","TableHeader","classNames","styles","unstyled","children","others","getSelectedRows","multiRowSelectionEnabled","clearSelection","classes","name","selectedRows","justify","align","gutter","p","pl","pr","m","className","length","Col","span","py","order","MultiSelectInfo","label","onClick","variant","leftIcon","height"],"mappings":";;;;AAAA,SAAQA,aAAa,QAAO,8BAA8B;AAC1D,SAAQC,YAAY,EAAgBC,IAAI,EAAaC,OAAO,QAAO,gBAAgB;AAGnF,SAAQC,MAAM,QAAO,YAAY;AACjC,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAExC,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,MAAM;YACFC,eAAe;YACfC,UAAU;YACVC,YAAY,AAAC,6BAAqDJ,OAAzBA,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE,EAAC,MAAkCN,OAA9BA,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE,EAAC,WAAuCN,OAA9BA,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE,EAAC,WAA8B,OAArBN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE,EAAC;YACnJC,cAAc,AAAC,aAAiC,OAArBP,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QACnD;QACAE,iBAAiB;YACbC,aAAa;QACjB;IACJ;;AAOA,OAAO,IAAMC,cAAmD,iBAM1D;QALFC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAoEhB,YAAAA,YAA7DkB,kBAA6DlB,UAA7DkB,iBAAiBC,2BAA4CnB,UAA5CmB,0BAA0BC,iBAAkBpB,UAAlBoB;IAClD,IAAM,AAACC,UAAWpB,UAAU,IAAI,EAAE;QAACqB,MAAM;QAAeT,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EM;IACP,IAAME,eAAeL;IACrB,qBACI,MAACtB;QACG4B,SAAQ;QACRC,OAAM;QACNC,QAAO;QACPC,GAAG;QACHC,IAAG;QACHC,IAAG;QACHC,GAAG;QACHC,WAAWV,QAAQlB,IAAI;OACnBc;;YAEHE,4BAA4BI,aAAaS,MAAM,GAAG,kBAC/C,KAACpC,KAAKqC,GAAG;gBACLC,MAAK;gBACLC,IAAG;gBACHJ,WAAWV,QAAQX,eAAe;gBAClC0B,OAAOrC,qBAAqBsC,eAAe;0BAE3C,cAAA,KAACxC;oBAAQyC,OAAM;8BACX,cAAA,MAACxC;wBAAOyC,SAASnB;wBAAgBoB,SAAQ;wBAASC,wBAAU,KAAC/C;4BAAcgD,QAAQ;;;4BAC9EnB,aAAaS,MAAM;4BAAC;;;;iBAIjC,IAAI;YACPhB;;;AAGb,EAAE"}

package/dist/esm/components/table/TablePagination.js

@@ -1,5 +1,5 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pagination } from "@mantine/core";
 import { useTable } from "./TableContext";

package/dist/esm/components/table/TablePerPage.js

@@ -1,5 +1,5 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Group, SegmentedControl, Text } from "@mantine/core";
 import { useTable } from "./TableContext";

package/dist/esm/components/table/TablePredicate.js

@@ -1,8 +1,9 @@
-import _define_property from "@swc/helpers/src/_define_property.mjs";
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Group, Select, Text } from "@mantine/core";
+import { Grid, Group, Select, Text } from "@mantine/core";
+import { TableComponentsOrder } from "./Table.styles";
 import { useTable } from "./TableContext";
 export var TablePredicate = function(param) {
     var id = param.id, data = param.data, label = param.label;
@@ -11,24 +12,29 @@ export var TablePredicate = function(param) {
         form.setFieldValue("predicates", _object_spread_props(_object_spread({}, form.values.predicates), _define_property({}, id, newValue)));
         onChange === null || onChange === void 0 ? void 0 : onChange();
     };
-    return /*#__PURE__*/ _jsxs(Group, {
-        spacing: "xs",
-        children: [
-            label ? /*#__PURE__*/ _jsxs(Text, {
-                children: [
-                    label,
-                    ":"
-                ]
-            }) : null,
-            /*#__PURE__*/ _jsx(Select, {
-                withinPortal: true,
-                value: form.values.predicates[id],
-                onChange: onUpdate,
-                data: data,
-                "aria-label": label !== null && label !== void 0 ? label : id,
-                searchable: data.length > 7
-            })
-        ]
+    return /*#__PURE__*/ _jsx(Grid.Col, {
+        span: "content",
+        order: TableComponentsOrder.Predicate,
+        py: "sm",
+        children: /*#__PURE__*/ _jsxs(Group, {
+            spacing: "xs",
+            children: [
+                label ? /*#__PURE__*/ _jsxs(Text, {
+                    children: [
+                        label,
+                        ":"
+                    ]
+                }) : null,
+                /*#__PURE__*/ _jsx(Select, {
+                    withinPortal: true,
+                    value: form.values.predicates[id],
+                    onChange: onUpdate,
+                    data: data,
+                    "aria-label": label !== null && label !== void 0 ? label : id,
+                    searchable: data.length > 7
+                })
+            ]
+        })
     });
 };
 

package/dist/esm/components/table/TablePredicate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {Group, Select, SelectItem, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TablePredicateProps {\n    /**\n     * Unique identifier for this predicate. Will be used to access the selected value in the table state\n     */\n    id: string;\n    /**\n     * The values to display in the predicate\n     */\n    data: SelectItem[];\n    /**\n     * Input label (not displayed for now)\n     *\n     * @default default to the predicate id\n     */\n    label?: string;\n}\n\nexport const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data, label}) => {\n    const {onChange, form} = useTable();\n\n    const onUpdate = (newValue: string) => {\n        form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});\n        onChange?.();\n    };\n\n    return (\n        <Group spacing=\"xs\">\n            {label ? <Text>{label}:</Text> : null}\n            <Select\n                withinPortal\n                value={form.values.predicates[id]}\n                onChange={onUpdate}\n                data={data}\n                aria-label={label ?? id}\n                searchable={data.length > 7}\n            />\n        </Group>\n    );\n};\n"],"names":["Group","Select","Text","useTable","TablePredicate","id","data","label","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","spacing","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;AAAA,SAAQA,KAAK,EAAEC,MAAM,EAAcC,IAAI,QAAO,gBAAgB;AAG9D,SAAQC,QAAQ,QAAO,iBAAiB;AAmBxC,OAAO,IAAMC,iBAAyD,gBAAuB;QAArBC,WAAAA,IAAIC,aAAAA,MAAMC,cAAAA;IAC9E,IAAyBJ,YAAAA,YAAlBK,WAAkBL,UAAlBK,UAAUC,OAAQN,UAARM;IAEjB,IAAMC,WAAW,SAACC,UAAqB;QACnCF,KAAKG,aAAa,CAAC,cAAc,wCAAIH,KAAKI,MAAM,CAACC,UAAU,GAAE,qBAACT,IAAKM;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,MAACR;QAAMe,SAAQ;;YACVR,sBAAQ,MAACL;;oBAAMK;oBAAM;;iBAAW,IAAI;0BACrC,KAACN;gBACGe,YAAY;gBACZC,OAAOR,KAAKI,MAAM,CAACC,UAAU,CAACT,GAAG;gBACjCG,UAAUE;gBACVJ,MAAMA;gBACNY,cAAYX,kBAAAA,mBAAAA,QAASF,EAAE;gBACvBc,YAAYb,KAAKc,MAAM,GAAG;;;;AAI1C,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {Grid, Group, Select, SelectItem, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {TableComponentsOrder} from './Table.styles';\n\nimport {useTable} from './TableContext';\n\ninterface TablePredicateProps {\n    /**\n     * Unique identifier for this predicate. Will be used to access the selected value in the table state\n     */\n    id: string;\n    /**\n     * The values to display in the predicate\n     */\n    data: SelectItem[];\n    /**\n     * Input label (not displayed for now)\n     *\n     * @default default to the predicate id\n     */\n    label?: string;\n}\n\nexport const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data, label}) => {\n    const {onChange, form} = useTable();\n\n    const onUpdate = (newValue: string) => {\n        form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});\n        onChange?.();\n    };\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Predicate} py=\"sm\">\n            <Group spacing=\"xs\">\n                {label ? <Text>{label}:</Text> : null}\n                <Select\n                    withinPortal\n                    value={form.values.predicates[id]}\n                    onChange={onUpdate}\n                    data={data}\n                    aria-label={label ?? id}\n                    searchable={data.length > 7}\n                />\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["Grid","Group","Select","Text","TableComponentsOrder","useTable","TablePredicate","id","data","label","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","Col","span","order","Predicate","py","spacing","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;AAAA,SAAQA,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAcC,IAAI,QAAO,gBAAgB;AAEpE,SAAQC,oBAAoB,QAAO,iBAAiB;AAEpD,SAAQC,QAAQ,QAAO,iBAAiB;AAmBxC,OAAO,IAAMC,iBAAyD,gBAAuB;QAArBC,WAAAA,IAAIC,aAAAA,MAAMC,cAAAA;IAC9E,IAAyBJ,YAAAA,YAAlBK,WAAkBL,UAAlBK,UAAUC,OAAQN,UAARM;IAEjB,IAAMC,WAAW,SAACC,UAAqB;QACnCF,KAAKG,aAAa,CAAC,cAAc,wCAAIH,KAAKI,MAAM,CAACC,UAAU,GAAE,qBAACT,IAAKM;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,KAACV,KAAKiB,GAAG;QAACC,MAAK;QAAUC,OAAOf,qBAAqBgB,SAAS;QAAEC,IAAG;kBAC/D,cAAA,MAACpB;YAAMqB,SAAQ;;gBACVb,sBAAQ,MAACN;;wBAAMM;wBAAM;;qBAAW,IAAI;8BACrC,KAACP;oBACGqB,YAAY;oBACZC,OAAOb,KAAKI,MAAM,CAACC,UAAU,CAACT,GAAG;oBACjCG,UAAUE;oBACVJ,MAAMA;oBACNiB,cAAYhB,kBAAAA,mBAAAA,QAASF,EAAE;oBACvBmB,YAAYlB,KAAKmB,MAAM,GAAG;;;;;AAK9C,EAAE"}

package/dist/esm/components/table/useRowSelection.js

@@ -1,5 +1,5 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { useClickOutside } from "@mantine/hooks";
 import { functionalUpdate } from "@tanstack/table-core";
 import isEqual from "fast-deep-equal";

package/dist/esm/form/useForm.js

@@ -1,5 +1,5 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { useForm as useMantineForm } from "@mantine/form";
 export var useForm = function(options) {
     var form = useMantineForm(options);

package/dist/esm/hooks/useControlledList.js

@@ -1,5 +1,5 @@
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
-import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { useUncontrolled } from "@mantine/hooks";
 /**
  * Manage a list of items in a controlled fashion, to be used with inputs

package/dist/esm/hooks/useParentHeight.js

@@ -1,4 +1,4 @@
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { useEffect, useRef, useState } from "react";
 var getElementInnerHeight = function(el) {
     var fullHeight = el.getBoundingClientRect().height;

package/dist/esm/theme/Theme.js

@@ -1,5 +1,5 @@
-import _object_destructuring_empty from "@swc/helpers/src/_object_destructuring_empty.mjs";
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import { _ as _object_destructuring_empty } from "@swc/helpers/_/_object_destructuring_empty";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InfoSize24Px } from "@coveord/plasma-react-icons";
 import { color } from "@coveord/plasma-tokens";

package/dist/esm/utils/overrideComponent.js

@@ -5,7 +5,7 @@
  * @param properties The new static properties to assign on the component
  * @returns A new component with the specified properties. It doesn't change the original component
  * @example const Menu = overrideComponent(MantineMenu, {Item: MyMenuItem}); // Menu.Item will equal MyMenuItem
- */ import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
+ */ import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 export var overrideComponent = function(component, properties) {
     var componentClone = function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.1.0",
+  "version": "52.2.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -15,17 +15,17 @@
   "types": "./dist/definitions/index.d.ts",
   "dependencies": {
     "@mantine/utils": "6.0.6",
-    "@monaco-editor/react": "4.4.5",
-    "@swc/helpers": "0.4.14",
-    "@tanstack/react-table": "8.7.9",
-    "@tanstack/table-core": "8.7.9",
+    "@monaco-editor/react": "4.5.0",
+    "@swc/helpers": "0.5.0",
+    "@tanstack/react-table": "8.8.5",
+    "@tanstack/table-core": "8.8.5",
     "dayjs": "1.11.7",
     "fast-deep-equal": "3.1.3",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.34.0",
     "react-beautiful-dnd": "13.1.1",
-    "@coveord/plasma-react-icons": "52.1.0",
+    "@coveord/plasma-react-icons": "52.2.0",
     "@coveord/plasma-tokens": "52.0.0"
   },
   "devDependencies": {
@@ -38,7 +38,7 @@
     "@mantine/modals": "6.0.6",
     "@mantine/notifications": "6.0.6",
     "@swc/cli": "0.1.62",
-    "@swc/core": "1.3.44",
+    "@swc/core": "1.3.49",
     "@swc/jest": "0.2.24",
     "@testing-library/dom": "8.18.1",
     "@testing-library/jest-dom": "5.16.5",
@@ -47,7 +47,7 @@
     "@types/jest": "29.1.2",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.defaultsdeep": "4.6.7",
-    "@types/react": "18.0.33",
+    "@types/react": "18.0.34",
     "@types/react-beautiful-dnd": "13.1.4",
     "@types/react-dom": "18.0.11",
     "@types/testing-library__jest-dom": "5.14.5",

package/src/components/header/Header.tsx

@@ -1,5 +1,5 @@
 import {QuestionSize16Px} from '@coveord/plasma-react-icons';
-import {Anchor, Breadcrumbs, DefaultProps, Divider, Flex, Group, Stack, Text, Title, Tooltip} from '@mantine/core';
+import {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';
 import {Children, FunctionComponent, ReactElement, ReactNode} from 'react';
 
 export interface HeaderProps extends DefaultProps {
@@ -48,12 +48,10 @@ export const Header: HeaderType = ({description, borderBottom, children, variant
             >
                 <Stack spacing={0}>
                     {breadcrumbs}
-                    <Flex align="center">
-                        <Title order={variant === 'page' ? 1 : 3} color={variant === 'page' ? 'gray.5' : undefined}>
-                            {otherChildren}
-                        </Title>
+                    <Title order={variant === 'page' ? 1 : 3} color={variant === 'page' ? 'gray.5' : undefined}>
+                        {otherChildren}
                         {docAnchor}
-                    </Flex>
+                    </Title>
                     <Text size={variant === 'page' ? 'md' : 'sm'} color="gray.6">
                         {description}
                     </Text>
@@ -92,7 +90,7 @@ export interface HeaderDocAnchorProps {
 
 const HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = ({href: docLink, label: docLinkTooltipLabel}) => (
     <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position="right">
-        <Anchor inline href={docLink} target="_blank" ml="xs">
+        <Anchor inline href={docLink} target="_blank" ml="xs" style={{verticalAlign: 'middle'}}>
             <QuestionSize16Px height={16} />
         </Anchor>
     </Tooltip>

package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -37,15 +37,11 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
           Three
         </a>
       </div>
-      <div
-        class="mantine-xg7kom"
+      <h1
+        class="mantine-Text-root mantine-Title-root mantine-d1yoif"
       >
-        <h1
-          class="mantine-Text-root mantine-Title-root mantine-d1yoif"
-        >
-          Title
-        </h1>
-      </div>
+        Title
+      </h1>
       <div
         class="mantine-Text-root mantine-1w25z6f"
       />

package/src/components/table/Table.styles.ts

@@ -1,11 +1,10 @@
 import {createStyles} from '@mantine/core';
 
 interface TableStylesParams {
-    hasHeader: boolean;
     multiRowSelectionEnabled: boolean;
 }
 
-const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {
+const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled}) => {
     const rowBackgroundColor =
         theme.colorScheme === 'dark'
             ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
@@ -13,7 +12,10 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
     return {
         table: {
             width: '100%',
-            '& td:first-of-type, th:first-of-type > *': {
+            '& thead tr th': {
+                borderBottom: 'none',
+            },
+            '& td:first-of-type': {
                 paddingLeft: theme.spacing.xl,
             },
             '& tbody td': {
@@ -23,7 +25,7 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
 
         header: {
             position: 'sticky',
-            top: hasHeader ? 69 : 0,
+            top: 0,
             backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
             transition: 'box-shadow 150ms ease',
             zIndex: 1,
@@ -34,7 +36,13 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
                 left: 0,
                 right: 0,
                 bottom: 0,
-                borderBottom: `1px solid ${theme.colors.gray[2]}`,
+                borderBottom: `1px solid ${theme.colors.gray[3]}`,
+            },
+        },
+
+        headerColumns: {
+            '& th:first-of-type > *': {
+                paddingLeft: theme.spacing.xl,
             },
         },
 
@@ -55,4 +63,12 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
     };
 });
 
+export const TableComponentsOrder = {
+    MultiSelectInfo: 5,
+    Actions: 4,
+    Predicate: 3,
+    Filter: 2,
+    DateRangePicker: 1,
+};
+
 export default useStyles;

package/src/components/table/Table.tsx

@@ -18,6 +18,7 @@ import useStyles from './Table.styles';
 import {TableFormType, TableProps, TableState, TableType} from './Table.types';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
+import {TableConsumer} from './TableConsumer';
 import {TableContext} from './TableContext';
 import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
@@ -26,7 +27,6 @@ import {TableHeader} from './TableHeader';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
-import {TableConsumer} from './TableConsumer';
 import {TableSelectableColumn} from './TableSelectableColumn';
 import {Th} from './Th';
 import {useRowSelection} from './useRowSelection';
@@ -62,7 +62,7 @@ export const Table: TableType = <T,>({
     const form = useForm<TableFormType>({
         initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},
     });
-    const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});
+    const {cx, classes} = useStyles({multiRowSelectionEnabled});
 
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),
@@ -196,11 +196,17 @@ export const Table: TableType = <T,>({
                     noDataChildren
                 ) : (
                     <>
-                        {header}
                         <MantineTable className={classes.table} horizontalSpacing="sm" verticalSpacing="xs" pb="sm">
                             <thead className={classes.header}>
+                                {!!header ? (
+                                    <tr>
+                                        <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
+                                            {header}
+                                        </th>
+                                    </tr>
+                                ) : null}
                                 {table.getHeaderGroups().map((headerGroup) => (
-                                    <tr key={headerGroup.id}>
+                                    <tr key={headerGroup.id} className={classes.headerColumns}>
                                         {headerGroup.headers.map((columnHeader) => (
                                             <Th key={columnHeader.id} header={columnHeader} />
                                         ))}

package/src/components/table/TableActions.tsx

@@ -1,5 +1,6 @@
-import {Group} from '@mantine/core';
+import {Grid, Group} from '@mantine/core';
 import {ReactElement, ReactNode} from 'react';
+import {TableComponentsOrder} from './Table.styles';
 
 import {useTable} from './TableContext';
 
@@ -35,10 +36,12 @@ export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement
     }
 
     return (
-        <Group spacing="xs">
-            {multiRowSelectionEnabled
-                ? (children as (data: T[]) => ReactNode)(selectedRows)
-                : (children as (datum: T) => ReactNode)(selectedRows[0])}
-        </Group>
+        <Grid.Col span="content" order={TableComponentsOrder.Actions} py="sm">
+            <Group spacing="xs" style={{display: 'inline-flex'}}>
+                {multiRowSelectionEnabled
+                    ? (children as (data: T[]) => ReactNode)(selectedRows)
+                    : (children as (datum: T) => ReactNode)(selectedRows[0])}
+            </Group>
+        </Grid.Col>
     );
 };

package/src/components/table/TableDateRangePicker.tsx

@@ -1,5 +1,5 @@
 import {CalendarSize24Px} from '@coveord/plasma-react-icons';
-import {Popover} from '@mantine/core';
+import {Grid, Group, Popover, Text} from '@mantine/core';
 import dayjs from 'dayjs';
 import {FunctionComponent, useState} from 'react';
 
@@ -10,6 +10,7 @@ import {
     DateRangePickerPreset,
     DateRangePickerValue,
 } from '../date-range-picker';
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
 interface TableDateRangePickerProps
@@ -47,24 +48,26 @@ export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps>
     const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
 
     return (
-        <>
-            {formatedRange}
-            <Popover opened={opened} onChange={setOpened}>
-                <Popover.Target>
-                    <Button variant="outline" color="gray" onClick={() => setOpened(true)} px="xs">
-                        <CalendarSize24Px width={24} height={24} />
-                    </Button>
-                </Popover.Target>
-                <Popover.Dropdown p={0}>
-                    <DateRangePickerInlineCalendar
-                        initialRange={form.values.dateRange}
-                        onApply={onApply}
-                        onCancel={onCancel}
-                        presets={presets}
-                        rangeCalendarProps={rangeCalendarProps}
-                    />
-                </Popover.Dropdown>
-            </Popover>
-        </>
+        <Grid.Col span="content" order={TableComponentsOrder.DateRangePicker} py="sm">
+            <Group spacing="xs">
+                <Text span>{formatedRange}</Text>
+                <Popover opened={opened} onChange={setOpened}>
+                    <Popover.Target>
+                        <Button variant="outline" color="gray" onClick={() => setOpened(true)} px="xs">
+                            <CalendarSize24Px width={24} height={24} />
+                        </Button>
+                    </Popover.Target>
+                    <Popover.Dropdown p={0}>
+                        <DateRangePickerInlineCalendar
+                            initialRange={form.values.dateRange}
+                            onApply={onApply}
+                            onCancel={onCancel}
+                            presets={presets}
+                            rangeCalendarProps={rangeCalendarProps}
+                        />
+                    </Popover.Dropdown>
+                </Popover>
+            </Group>
+        </Grid.Col>
     );
 };