@coveord/plasma-mantine 52.1.0 → 52.3.0

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

@@ -1,11 +1,12 @@
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { useState } from "react";
 import { Button } from "../button";
 import { DateRangePickerInlineCalendar } from "../date-range-picker";
+import { TableComponentsOrder } from "./Table.styles";
 import { useTable } from "./TableContext";
 export var TableDateRangePicker = function(param) {
     var _param_presets = param.presets, presets = _param_presets === void 0 ? {} : _param_presets, rangeCalendarProps = param.rangeCalendarProps;
@@ -22,40 +23,49 @@ export var TableDateRangePicker = function(param) {
         return dayjs(date).format("MMM DD, YYYY");
     };
     var formatedRange = "".concat(formatDate(form.values.dateRange[0]), " - ").concat(formatDate(form.values.dateRange[1]));
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            formatedRange,
-            /*#__PURE__*/ _jsxs(Popover, {
-                opened: opened,
-                onChange: setOpened,
-                children: [
-                    /*#__PURE__*/ _jsx(Popover.Target, {
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            variant: "outline",
-                            color: "gray",
-                            onClick: function() {
-                                return setOpened(true);
-                            },
-                            px: "xs",
-                            children: /*#__PURE__*/ _jsx(CalendarSize24Px, {
-                                width: 24,
-                                height: 24
+    return /*#__PURE__*/ _jsx(Grid.Col, {
+        span: "content",
+        order: TableComponentsOrder.DateRangePicker,
+        py: "sm",
+        children: /*#__PURE__*/ _jsxs(Group, {
+            spacing: "xs",
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    span: true,
+                    children: formatedRange
+                }),
+                /*#__PURE__*/ _jsxs(Popover, {
+                    opened: opened,
+                    onChange: setOpened,
+                    children: [
+                        /*#__PURE__*/ _jsx(Popover.Target, {
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "outline",
+                                color: "gray",
+                                onClick: function() {
+                                    return setOpened(true);
+                                },
+                                px: "xs",
+                                children: /*#__PURE__*/ _jsx(CalendarSize24Px, {
+                                    width: 24,
+                                    height: 24
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Popover.Dropdown, {
+                            p: 0,
+                            children: /*#__PURE__*/ _jsx(DateRangePickerInlineCalendar, {
+                                initialRange: form.values.dateRange,
+                                onApply: onApply,
+                                onCancel: onCancel,
+                                presets: presets,
+                                rangeCalendarProps: rangeCalendarProps
                             })
                         })
-                    }),
-                    /*#__PURE__*/ _jsx(Popover.Dropdown, {
-                        p: 0,
-                        children: /*#__PURE__*/ _jsx(DateRangePickerInlineCalendar, {
-                            initialRange: form.values.dateRange,
-                            onApply: onApply,
-                            onCancel: onCancel,
-                            presets: presets,
-                            rangeCalendarProps: rangeCalendarProps
-                        })
-                    })
-                ]
-            })
-        ]
+                    ]
+                })
+            ]
+        })
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n    DateRangePickerValue,\n} from '../date-range-picker';\nimport {useTable} from './TableContext';\n\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n}) => {\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <>\n            {formatedRange}\n            <Popover opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n                        <CalendarSize24Px width={24} height={24} />\n                    </Button>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={form.values.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["CalendarSize24Px","Popover","dayjs","useState","Button","DateRangePickerInlineCalendar","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formatedRange","values","dateRange","onChange","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,OAAO,QAAO,gBAAgB;AACtC,OAAOC,WAAW,QAAQ;AAC1B,SAA2BC,QAAQ,QAAO,QAAQ;AAElD,SAAQC,MAAM,QAAO,YAAY;AACjC,SACIC,6BAA6B,QAI1B,uBAAuB;AAC9B,SAAQC,QAAQ,QAAO,iBAAiB;AAkBxC,OAAO,IAAMC,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BN,6BAAAA,SAAS,KAAK,OAAnCO,SAAqBP,cAAbQ,YAAaR;IAC5B,IAAM,AAACS,OAAQN,WAARM;IAEP,IAAMC,UAAU,SAACC,OAAgC;QAC7CF,KAAKG,aAAa,CAAC,aAAaD;QAChCH,UAAU,KAAK;IACnB;IACA,IAAMK,WAAW,WAAM;QACnBL,UAAU,KAAK;IACnB;IAEA,IAAMM,aAAa,SAACC;eAAehB,MAAMgB,MAAMC,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CH,OAA1CA,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCL,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI;;YACKF;0BACD,MAACnB;gBAAQS,QAAQA;gBAAQa,UAAUZ;;kCAC/B,KAACV,QAAQuB,MAAM;kCACX,cAAA,KAACpB;4BAAOqB,SAAQ;4BAAUC,OAAM;4BAAOC,SAAS;uCAAMhB,UAAU,IAAI;;4BAAGiB,IAAG;sCACtE,cAAA,KAAC5B;gCAAiB6B,OAAO;gCAAIC,QAAQ;;;;kCAG7C,KAAC7B,QAAQ8B,QAAQ;wBAACC,GAAG;kCACjB,cAAA,KAAC3B;4BACG4B,cAAcrB,KAAKS,MAAM,CAACC,SAAS;4BACnCT,SAASA;4BACTG,UAAUA;4BACVR,SAASA;4BACTC,oBAAoBA;;;;;;;AAM5C,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Grid, Group, Popover, Text} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n    DateRangePickerValue,\n} from '../date-range-picker';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n}) => {\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.DateRangePicker} py=\"sm\">\n            <Group spacing=\"xs\">\n                <Text span>{formatedRange}</Text>\n                <Popover opened={opened} onChange={setOpened}>\n                    <Popover.Target>\n                        <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n                            <CalendarSize24Px width={24} height={24} />\n                        </Button>\n                    </Popover.Target>\n                    <Popover.Dropdown p={0}>\n                        <DateRangePickerInlineCalendar\n                            initialRange={form.values.dateRange}\n                            onApply={onApply}\n                            onCancel={onCancel}\n                            presets={presets}\n                            rangeCalendarProps={rangeCalendarProps}\n                        />\n                    </Popover.Dropdown>\n                </Popover>\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["CalendarSize24Px","Grid","Group","Popover","Text","dayjs","useState","Button","DateRangePickerInlineCalendar","TableComponentsOrder","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formatedRange","values","dateRange","Col","span","order","DateRangePicker","py","spacing","onChange","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,QAAO,gBAAgB;AACzD,OAAOC,WAAW,QAAQ;AAC1B,SAA2BC,QAAQ,QAAO,QAAQ;AAElD,SAAQC,MAAM,QAAO,YAAY;AACjC,SACIC,6BAA6B,QAI1B,uBAAuB;AAC9B,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAkBxC,OAAO,IAAMC,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BP,6BAAAA,SAAS,KAAK,OAAnCQ,SAAqBR,cAAbS,YAAaT;IAC5B,IAAM,AAACU,OAAQN,WAARM;IAEP,IAAMC,UAAU,SAACC,OAAgC;QAC7CF,KAAKG,aAAa,CAAC,aAAaD;QAChCH,UAAU,KAAK;IACnB;IACA,IAAMK,WAAW,WAAM;QACnBL,UAAU,KAAK;IACnB;IAEA,IAAMM,aAAa,SAACC;eAAejB,MAAMiB,MAAMC,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CH,OAA1CA,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCL,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI,KAACzB,KAAK0B,GAAG;QAACC,MAAK;QAAUC,OAAOpB,qBAAqBqB,eAAe;QAAEC,IAAG;kBACrE,cAAA,MAAC7B;YAAM8B,SAAQ;;8BACX,KAAC5B;oBAAKwB,IAAI;8BAAEJ;;8BACZ,MAACrB;oBAAQW,QAAQA;oBAAQmB,UAAUlB;;sCAC/B,KAACZ,QAAQ+B,MAAM;sCACX,cAAA,KAAC3B;gCAAO4B,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAMtB,UAAU,IAAI;;gCAAGuB,IAAG;0CACtE,cAAA,KAACtC;oCAAiBuC,OAAO;oCAAIC,QAAQ;;;;sCAG7C,KAACrC,QAAQsC,QAAQ;4BAACC,GAAG;sCACjB,cAAA,KAAClC;gCACGmC,cAAc3B,KAAKS,MAAM,CAACC,SAAS;gCACnCT,SAASA;gCACTG,UAAUA;gCACVR,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD,EAAE"}

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

@@ -1,9 +1,10 @@
-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 } from "react/jsx-runtime";
 import { CrossSize16Px, SearchSize16Px } from "@coveord/plasma-react-icons";
-import { ActionIcon, createStyles, TextInput } from "@mantine/core";
+import { ActionIcon, createStyles, Grid, TextInput } from "@mantine/core";
+import { TableComponentsOrder } from "./Table.styles";
 import { useTable } from "./TableContext";
 var useStyles = createStyles(function(theme) {
     return {
@@ -47,22 +48,27 @@ export var TableFilter = function(_param) {
     var handleClear = function() {
         changeFilterValue("");
     };
-    return /*#__PURE__*/ _jsx(TextInput, _object_spread({
-        className: classes.wrapper,
-        placeholder: placeholder,
-        mb: "md",
-        rightSection: state.globalFilter ? /*#__PURE__*/ _jsx(ActionIcon, {
-            onClick: handleClear,
-            children: /*#__PURE__*/ _jsx(CrossSize16Px, {
-                height: 16
-            })
-        }) : /*#__PURE__*/ _jsx(SearchSize16Px, {
-            height: 14,
-            className: classes.empty
-        }),
-        value: state.globalFilter,
-        onChange: handleChange
-    }, others));
+    return /*#__PURE__*/ _jsx(Grid.Col, {
+        span: "content",
+        order: TableComponentsOrder.Filter,
+        py: "sm",
+        children: /*#__PURE__*/ _jsx(TextInput, _object_spread({
+            className: classes.wrapper,
+            placeholder: placeholder,
+            mb: "md",
+            rightSection: state.globalFilter ? /*#__PURE__*/ _jsx(ActionIcon, {
+                onClick: handleClear,
+                children: /*#__PURE__*/ _jsx(CrossSize16Px, {
+                    height: 16
+                })
+            }) : /*#__PURE__*/ _jsx(SearchSize16Px, {
+                height: 14,
+                className: classes.empty
+            }),
+            value: state.globalFilter,
+            onChange: handleChange
+        }, others))
+    });
 };
 
 //# sourceMappingURL=TableFilter.js.map

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

@@ -1 +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 {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\n\nimport {useTable} from './TableContext';\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) => ({\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;AAG3F,SAAQC,QAAQ,QAAO,iBAAiB;AAExC,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;mBAAe,wCAClBA;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"}
+{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Grid, Selectors, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\nimport {TableComponentsOrder} from './Table.styles';\n\nimport {useTable} from './TableContext';\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) => ({\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        <Grid.Col span=\"content\" order={TableComponentsOrder.Filter} py=\"sm\">\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        </Grid.Col>\n    );\n};\n"],"names":["CrossSize16Px","SearchSize16Px","ActionIcon","createStyles","Grid","TextInput","TableComponentsOrder","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","Col","span","order","Filter","py","className","mb","rightSection","onClick","height","onChange"],"mappings":";;;;AAAA,SAAQA,aAAa,EAAEC,cAAc,QAAO,8BAA8B;AAC1E,SAAQC,UAAU,EAAEC,YAAY,EAAgBC,IAAI,EAAaC,SAAS,QAAO,gBAAgB;AAEjG,SAAQC,oBAAoB,QAAO,iBAAiB;AAEpD,SAAQC,QAAQ,QAAO,iBAAiB;AAExC,IAAMC,YAAYL,aAAa,SAACM;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;mBAAe,wCAClBA;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,KAACtB,KAAKiC,GAAG;QAACC,MAAK;QAAUC,OAAOjC,qBAAqBkC,MAAM;QAAEC,IAAG;kBAC5D,cAAA,KAACpC;YACGqC,WAAWpB,QAAQZ,OAAO;YAC1BO,aAAaA;YACb0B,IAAG;YACHC,cACIpB,MAAMQ,YAAY,iBACd,KAAC9B;gBAAW2C,SAAST;0BACjB,cAAA,KAACpC;oBAAc8C,QAAQ;;+BAG3B,KAAC7C;gBAAe6C,QAAQ;gBAAIJ,WAAWpB,QAAQV,KAAK;cACvD;YAELe,OAAOH,MAAMQ,YAAY;YACzBe,UAAUd;WACNZ;;AAIpB,EAAE"}

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

@@ -1,6 +1,6 @@
-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 } from "react/jsx-runtime";
 import { Group } from "@mantine/core";
 export var TableFooter = function(_param) /*#__PURE__*/ {

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.3.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"
       />