@coveord/plasma-mantine 52.6.0 → 52.7.0

package/dist/cjs/components/table/TableActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Grid, Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\nimport {TableComponentsOrder} from './Table.styles';\n\nimport {useTable} from './TableContext';\n\ninterface TableActionsProps<T> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} py=\"sm\">\n            <Group spacing=\"xs\" style={{display: 'inline-flex'}}>\n                {multiRowSelectionEnabled\n                    ? (children as (data: T[]) => ReactNode)(selectedRows)\n                    : (children as (datum: T) => ReactNode)(selectedRows[0])}\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["TableActions","children","useTable","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Grid","Col","span","order","TableComponentsOrder","Actions","py","Group","spacing","style","display"],"mappings":";;;;+BA6BaA;;;eAAAA;;;;oBA7Ba;2BAES;4BAEZ;AAyBhB,IAAMA,eAAe;QAAMC,iBAAAA;IAC9B,IAAoDC,YAAAA,IAAAA,2BAA7CC,kBAA6CD,UAA7CC,iBAAiBC,2BAA4BF,UAA5BE;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,UAAU,GAAG;QAC1B,OAAO;IACX;IAEA,qBACI,qBAACC,WAAKC;QAAIC,MAAK;QAAUC,OAAOC,kCAAqBC;QAASC,IAAG;kBAC7D,cAAA,qBAACC;YAAMC,SAAQ;YAAKC,OAAO;gBAACC,SAAS;YAAa;sBAC7Cb,2BACK,AAACH,SAAsCI,gBACvC,AAACJ,SAAqCI,YAAY,CAAC,EAAE;;;AAI3E"}
+{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Grid, Group, Selectors} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\n\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    wrapper: {\n        display: 'inline-flex',\n    },\n}));\n\ntype TableActionsStylesNames = Selectors<typeof useStyles>;\n\ninterface TableActionsProps<T> extends DefaultProps<TableActionsStylesNames> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({\n    children,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}: TableActionsProps<T>): ReactElement => {\n    const {classes} = useStyles(null, {name: 'TableActions', classNames, styles, unstyled});\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} py=\"sm\" className={classes.root} {...others}>\n            <Group spacing=\"xs\" className={classes.wrapper}>\n                {multiRowSelectionEnabled\n                    ? (children as (data: T[]) => ReactNode)(selectedRows)\n                    : (children as (datum: T) => ReactNode)(selectedRows[0])}\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["TableActions","useStyles","createStyles","theme","root","wrapper","display","children","classNames","styles","unstyled","others","classes","name","useTable","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Grid","Col","span","order","TableComponentsOrder","Actions","py","className","Group","spacing"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;oBAtCoD;2BAG9B;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS;YACLC,SAAS;QACb;IACJ;;AA2BO,IAAMN,eAAe;QACxBO,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWX,UAAU,MAAM;QAACY,MAAM;QAAgBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA9EE;IACP,IAAoDE,YAAAA,IAAAA,2BAA7CC,kBAA6CD,UAA7CC,iBAAiBC,2BAA4BF,UAA5BE;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,UAAU,GAAG;QAC1B,OAAO;IACX;IAEA,qBACI,qBAACC,WAAKC;QAAIC,MAAK;QAAUC,OAAOC,kCAAqBC;QAASC,IAAG;QAAKC,WAAWd,QAAQR;OAAUO;kBAC/F,cAAA,qBAACgB;YAAMC,SAAQ;YAAKF,WAAWd,QAAQP;sBAClCW,2BACK,AAACT,SAAsCU,gBACvC,AAACV,SAAqCU,YAAY,CAAC,EAAE;;;AAI3E"}

package/dist/cjs/components/table/TableDateRangePicker.d.ts

@@ -1,6 +1,17 @@
+import { DefaultProps, Selectors } from '@mantine/core';
 import { FunctionComponent } from 'react';
 import { DateRangePickerInlineCalendarProps, DateRangePickerPreset } from '../date-range-picker';
-interface TableDateRangePickerProps extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {
+declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
+    classes: {
+        root: string;
+        wrapper: string;
+        label: string;
+    };
+    cx: (...args: any) => string;
+    theme: import("@mantine/core").MantineTheme;
+};
+type TableDateRangePickerStylesNames = Selectors<typeof useStyles>;
+interface TableDateRangePickerProps extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'>, DefaultProps<TableDateRangePickerStylesNames> {
     /**
      * An object containing date presets.
      * If empty the preset dropdown won't be shown

package/dist/cjs/components/table/TableDateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAIxC,OAAO,EAEH,kCAAkC,EAClC,qBAAqB,EAExB,MAAM,sBAAsB,CAAC;AAI9B,UAAU,yBACN,SAAQ,IAAI,CAAC,kCAAkC,EAAE,YAAY,GAAG,UAAU,GAAG,oBAAoB,CAAC;IAClG;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,CAyC7E,CAAC"}
+{"version":3,"file":"TableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,YAAY,EAAwB,SAAS,EAAO,MAAM,eAAe,CAAC;AAGhG,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGxC,OAAO,EAEH,kCAAkC,EAClC,qBAAqB,EAExB,MAAM,sBAAsB,CAAC;AAI9B,QAAA,MAAM,SAAS;;;;;;;;CAIZ,CAAC;AAEJ,KAAK,+BAA+B,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AACnE,UAAU,yBACN,SAAQ,IAAI,CAAC,kCAAkC,EAAE,YAAY,GAAG,UAAU,GAAG,oBAAoB,CAAC,EAC9F,YAAY,CAAC,+BAA+B,CAAC;IACjD;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,CAsD7E,CAAC"}

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

@@ -9,18 +9,40 @@ Object.defineProperty(exports, "TableDateRangePicker", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
-var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
 var _hooks = require("@mantine/hooks");
+var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
 var _button = require("../button");
 var _daterangepicker = require("../date-range-picker");
 var _Tablestyles = require("./Table.styles");
 var _TableContext = require("./TableContext");
-var TableDateRangePicker = function(param) {
-    var _param_presets = param.presets, presets = _param_presets === void 0 ? {} : _param_presets, rangeCalendarProps = param.rangeCalendarProps;
+var useStyles = (0, _core.createStyles)(function(theme) {
+    return {
+        root: {},
+        wrapper: {},
+        label: {}
+    };
+});
+var TableDateRangePicker = function(_param) {
+    var _param_presets = _param.presets, presets = _param_presets === void 0 ? {} : _param_presets, rangeCalendarProps = _param.rangeCalendarProps, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties._(_param, [
+        "presets",
+        "rangeCalendarProps",
+        "classNames",
+        "styles",
+        "unstyled"
+    ]);
+    var classes = useStyles(null, {
+        name: "TableDateRangePicker",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
+    }).classes;
     var _useToggle = _sliced_to_array._((0, _hooks.useToggle)(), 2), opened = _useToggle[0], toggleOpened = _useToggle[1];
     var form = (0, _TableContext.useTable)().form;
     var onApply = function(dates) {
@@ -34,15 +56,19 @@ var TableDateRangePicker = function(param) {
         return (0, _dayjs.default)(date).format("MMM DD, YYYY");
     };
     var formattedRange = "".concat(formatDate(form.values.dateRange[0]), " - ").concat(formatDate(form.values.dateRange[1]));
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
         span: "content",
         order: _Tablestyles.TableComponentsOrder.DateRangePicker,
         py: "sm",
+        className: classes.root
+    }, others), {
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
             spacing: "xs",
+            className: classes.wrapper,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
                     span: true,
+                    className: classes.label,
                     children: formattedRange
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
@@ -78,7 +104,7 @@ var TableDateRangePicker = function(param) {
                 })
             ]
         })
-    });
+    }));
 };
 
 //# sourceMappingURL=TableDateRangePicker.js.map

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

@@ -1 +1 @@
-{"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} from 'react';\n\nimport {useToggle} from '@mantine/hooks';\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, toggleOpened] = useToggle();\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        toggleOpened(false);\n    };\n    const onCancel = () => {\n        toggleOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formattedRange = `${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>{formattedRange}</Text>\n                <Popover opened={opened} onChange={toggleOpened} withinPortal>\n                    <Popover.Target>\n                        <Button variant=\"outline\" color=\"gray\" onClick={() => toggleOpened()} 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":["TableDateRangePicker","presets","rangeCalendarProps","useToggle","opened","toggleOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formattedRange","values","dateRange","Grid","Col","span","order","TableComponentsOrder","DateRangePicker","py","Group","spacing","Text","Popover","onChange","withinPortal","Target","Button","variant","color","onClick","px","CalendarSize24Px","width","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;gCAhCkB;oBACU;8DACvB;qBAGM;sBACH;+BAMd;2BAC4B;4BACZ;AAkBhB,IAAMA,uBAAqE;+BAC9EC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA+BC,gCAAAA,IAAAA,yBAAxBC,SAAwBD,eAAhBE,eAAgBF;IAC/B,IAAM,AAACG,OAAQC,IAAAA,0BAARD;IAEP,IAAME,UAAU,SAACC;QACbH,KAAKI,cAAc,aAAaD;QAChCJ,aAAa;IACjB;IACA,IAAMM,WAAW;QACbN,aAAa;IACjB;IAEA,IAAMO,aAAa,SAACC;eAAeC,IAAAA,gBAAMD,MAAME,OAAO;;IACtD,IAAMC,iBAAiB,AAAC,GAA4CJ,OAA1CA,WAAWN,KAAKW,OAAOC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWN,KAAKW,OAAOC,SAAS,CAAC,EAAE;IAEvG,qBACI,qBAACC,WAAKC;QAAIC,MAAK;QAAUC,OAAOC,kCAAqBC;QAAiBC,IAAG;kBACrE,cAAA,sBAACC;YAAMC,SAAQ;;8BACX,qBAACC;oBAAKP,IAAI;8BAAEL;;8BACZ,sBAACa;oBAAQzB,QAAQA;oBAAQ0B,UAAUzB;oBAAc0B,YAAY;;sCACzD,qBAACF,cAAQG;sCACL,cAAA,qBAACC;gCAAOC,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAM/B;;gCAAgBgC,IAAG;0CACrE,cAAA,qBAACC;oCAAiBC,OAAO;oCAAIC,QAAQ;;;;sCAG7C,qBAACX,cAAQY;4BAASC,GAAG;sCACjB,cAAA,qBAACC;gCACGC,cAActC,KAAKW,OAAOC;gCAC1BV,SAASA;gCACTG,UAAUA;gCACVV,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD"}
+{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Grid, Group, Popover, Selectors, Text} from '@mantine/core';\nimport {useToggle} from '@mantine/hooks';\nimport dayjs from 'dayjs';\nimport {FunctionComponent} 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\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    wrapper: {},\n    label: {},\n}));\n\ntype TableDateRangePickerStylesNames = Selectors<typeof useStyles>;\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'>,\n        DefaultProps<TableDateRangePickerStylesNames> {\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    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TableDateRangePicker', classNames, styles, unstyled});\n    const [opened, toggleOpened] = useToggle();\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        toggleOpened(false);\n    };\n    const onCancel = () => {\n        toggleOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formattedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.DateRangePicker}\n            py=\"sm\"\n            className={classes.root}\n            {...others}\n        >\n            <Group spacing=\"xs\" className={classes.wrapper}>\n                <Text span className={classes.label}>\n                    {formattedRange}\n                </Text>\n                <Popover opened={opened} onChange={toggleOpened} withinPortal>\n                    <Popover.Target>\n                        <Button variant=\"outline\" color=\"gray\" onClick={() => toggleOpened()} 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":["TableDateRangePicker","useStyles","createStyles","theme","root","wrapper","label","presets","rangeCalendarProps","classNames","styles","unstyled","others","classes","name","useToggle","opened","toggleOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formattedRange","values","dateRange","Grid","Col","span","order","TableComponentsOrder","DateRangePicker","py","className","Group","spacing","Text","Popover","onChange","withinPortal","Target","Button","variant","color","onClick","px","CalendarSize24Px","width","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;;;gCAxCkB;oBACiD;qBACxD;8DACN;sBAGG;+BAMd;2BAC4B;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS,CAAC;QACVC,OAAO,CAAC;IACZ;;AAoBO,IAAMN,uBAAqE;gCAC9EO,SAAAA,sCAAU,CAAC,oBACXC,4BAAAA,oBACAC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWZ,UAAU,MAAM;QAACa,MAAM;QAAwBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAAtFE;IACP,IAA+BE,gCAAAA,IAAAA,yBAAxBC,SAAwBD,eAAhBE,eAAgBF;IAC/B,IAAM,AAACG,OAAQC,IAAAA,0BAARD;IAEP,IAAME,UAAU,SAACC;QACbH,KAAKI,cAAc,aAAaD;QAChCJ,aAAa;IACjB;IACA,IAAMM,WAAW;QACbN,aAAa;IACjB;IAEA,IAAMO,aAAa,SAACC;eAAeC,IAAAA,gBAAMD,MAAME,OAAO;;IACtD,IAAMC,iBAAiB,AAAC,GAA4CJ,OAA1CA,WAAWN,KAAKW,OAAOC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWN,KAAKW,OAAOC,SAAS,CAAC,EAAE;IAEvG,qBACI,qBAACC,WAAKC;QACFC,MAAK;QACLC,OAAOC,kCAAqBC;QAC5BC,IAAG;QACHC,WAAWzB,QAAQT;OACfQ;kBAEJ,cAAA,sBAAC2B;YAAMC,SAAQ;YAAKF,WAAWzB,QAAQR;;8BACnC,qBAACoC;oBAAKR,IAAI;oBAACK,WAAWzB,QAAQP;8BACzBsB;;8BAEL,sBAACc;oBAAQ1B,QAAQA;oBAAQ2B,UAAU1B;oBAAc2B,YAAY;;sCACzD,qBAACF,cAAQG;sCACL,cAAA,qBAACC;gCAAOC,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAMhC;;gCAAgBiC,IAAG;0CACrE,cAAA,qBAACC;oCAAiBC,OAAO;oCAAIC,QAAQ;;;;sCAG7C,qBAACX,cAAQY;4BAASC,GAAG;sCACjB,cAAA,qBAACC;gCACGC,cAAcvC,KAAKW,OAAOC;gCAC1BV,SAASA;gCACTG,UAAUA;gCACVhB,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD"}

package/dist/cjs/components/table/TableFilter.d.ts

@@ -2,6 +2,7 @@ import { DefaultProps, Selectors } from '@mantine/core';
 import { FunctionComponent } from 'react';
 declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
     classes: {
+        root: string;
         wrapper: string;
         empty: string;
     };

package/dist/cjs/components/table/TableFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,YAAY,EAAQ,SAAS,EAAY,MAAM,eAAe,CAAC;AACjG,OAAO,EAAqB,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAK/E,QAAA,MAAM,SAAS;;;;;;;CAOZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAkD3D,CAAC"}
+{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,YAAY,EAAQ,SAAS,EAAY,MAAM,eAAe,CAAC;AACjG,OAAO,EAAqB,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAK/E,QAAA,MAAM,SAAS;;;;;;;;CAQZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAkD3D,CAAC"}

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

@@ -18,6 +18,7 @@ var _Tablestyles = require("./Table.styles");
 var _TableContext = require("./TableContext");
 var useStyles = (0, _core.createStyles)(function(theme) {
     return {
+        root: {},
         wrapper: {
             marginBottom: "0 !important"
         },
@@ -34,7 +35,7 @@ var TableFilter = function(_param) {
         "unstyled"
     ]);
     var classes = useStyles(null, {
-        name: "TableHeader",
+        name: "TableFilter",
         classNames: classNames,
         styles: styles,
         unstyled: unstyled
@@ -62,6 +63,7 @@ var TableFilter = function(_param) {
         span: "content",
         order: _Tablestyles.TableComponentsOrder.Filter,
         py: "sm",
+        className: classes.root,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, _object_spread._({
             className: classes.wrapper,
             placeholder: placeholder,

package/dist/cjs/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, 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":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","classes","name","useTable","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","Grid","Col","span","order","TableComponentsOrder","Filter","py","TextInput","className","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","onChange"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;gCA1B+B;oBACqC;2BAE9C;4BAEZ;AAEvB,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,OAAOC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD;oCAC5DU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWd,UAAU,MAAM;QAACe,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BE,YAAAA,IAAAA,2BAAnBC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,oBAAoB,SAACC;QACvBF,SAAS,SAACG;mBAAe,4CAClBA;gBACHC,YAAYD,UAAUC,aAChB;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,WAAWE;gBAAQ,IACtDH,UAAUC;gBAChBG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC;QACxD,IAAM,AAACP,QAASO,MAAMC,cAAfR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD;QACtDV,kBAAkB;IACtB;IAEA,qBACI,qBAACW,WAAKC;QAAIC,MAAK;QAAUC,OAAOC,kCAAqBC;QAAQC,IAAG;kBAC5D,cAAA,qBAACC;YACGC,WAAWxB,QAAQX;YACnBM,aAAaA;YACb8B,IAAG;YACHC,cACIvB,MAAMQ,6BACF,qBAACgB;gBAAWC,SAASb;0BACjB,cAAA,qBAACc;oBAAcC,QAAQ;;+BAG3B,qBAACC;gBAAeD,QAAQ;gBAAIN,WAAWxB,QAAQT;;YAGvDe,OAAOH,MAAMQ;YACbqB,UAAUpB;WACNb;;AAIpB"}
+{"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';\n\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\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: 'TableFilter', 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\" className={classes.root}>\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":["TableFilter","useStyles","createStyles","theme","root","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","classes","name","useTable","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","Grid","Col","span","order","TableComponentsOrder","Filter","py","className","TextInput","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","onChange"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;;gCA3B+B;oBACqC;2BAG9C;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOL,MAAMM,OAAOC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMV,cAAmD;oCAC5DW,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWf,UAAU,MAAM;QAACgB,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BE,YAAAA,IAAAA,2BAAnBC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,oBAAoB,SAACC;QACvBF,SAAS,SAACG;mBAAe,4CAClBA;gBACHC,YAAYD,UAAUC,aAChB;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,WAAWE;gBAAQ,IACtDH,UAAUC;gBAChBG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC;QACxD,IAAM,AAACP,QAASO,MAAMC,cAAfR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD;QACtDV,kBAAkB;IACtB;IAEA,qBACI,qBAACW,WAAKC;QAAIC,MAAK;QAAUC,OAAOC,kCAAqBC;QAAQC,IAAG;QAAKC,WAAWvB,QAAQZ;kBACpF,cAAA,qBAACoC;YACGD,WAAWvB,QAAQX;YACnBM,aAAaA;YACb8B,IAAG;YACHC,cACIvB,MAAMQ,6BACF,qBAACgB;gBAAWC,SAASb;0BACjB,cAAA,qBAACc;oBAAcC,QAAQ;;+BAG3B,qBAACC;gBAAeD,QAAQ;gBAAIP,WAAWvB,QAAQT;;YAGvDe,OAAOH,MAAMQ;YACbqB,UAAUpB;WACNb;;AAIpB"}

package/dist/cjs/components/table/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,YAAY,EAAQ,SAAS,EAAU,MAAM,eAAe,CAAC;AACnF,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAMnD,QAAA,MAAM,SAAS;;;;;;;CAUZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IAEnE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AACD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA6C3D,CAAC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,YAAY,EAAQ,SAAS,EAAU,MAAM,eAAe,CAAC;AACnF,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAOnD,QAAA,MAAM,SAAS;;;;;;;CAUZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IAEnE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AACD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA8C3D,CAAC"}

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

@@ -17,6 +17,7 @@ var _core = require("@mantine/core");
 var _button = require("../button");
 var _Tablestyles = require("./Table.styles");
 var _TableContext = require("./TableContext");
+var _TableLayoutControl = require("./TableLayoutControl");
 var useStyles = (0, _core.createStyles)(function(theme) {
     return {
         root: {
@@ -77,7 +78,8 @@ var TableHeader = function(_param) {
                     })
                 })
             }) : null,
-            children
+            children,
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLayoutControl.TableLayoutControl, {})
         ]
     }));
 };

package/dist/cjs/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, 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, disableRowSelection} = useTable();\n    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const selectedRows = getSelectedRows();\n\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\n                            onClick={clearSelection}\n                            variant=\"subtle\"\n                            disabled={disableRowSelection}\n                            leftIcon={<CrossSize16Px height={16} />}\n                        >\n                            {selectedRows.length} selected\n                        </Button>\n                    </Tooltip>\n                </Grid.Col>\n            ) : null}\n            {children}\n        </Grid>\n    );\n};\n"],"names":["TableHeader","useStyles","createStyles","theme","root","flexDirection","flexWrap","background","colors","gray","borderBottom","multiSelectInfo","justifySelf","classNames","styles","unstyled","children","others","useTable","getSelectedRows","multiRowSelectionEnabled","clearSelection","disableRowSelection","classes","name","selectedRows","Grid","justify","align","gutter","p","pl","pr","m","className","length","Col","span","py","order","TableComponentsOrder","MultiSelectInfo","Tooltip","label","Button","onClick","variant","disabled","leftIcon","CrossSize16Px","height"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;gCAzBe;oBACuC;sBAG9C;2BACc;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM;YACFC,eAAe;YACfC,UAAU;YACVC,YAAY,AAAC,6BAAqDJ,OAAzBA,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC,MAAkCN,OAA9BA,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC,WAAuCN,OAA9BA,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC,WAA8B,OAArBN,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC;YACnJC,cAAc,AAAC,aAAiC,OAArBP,MAAMK,OAAOC,IAAI,CAAC,EAAE;QACnD;QACAE,iBAAiB;YACbC,aAAa;QACjB;IACJ;;AAOO,IAAMZ,cAAmD;QAC5Da,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAyFE,YAAAA,IAAAA,2BAAlFC,kBAAkFD,UAAlFC,iBAAiBC,2BAAiEF,UAAjEE,0BAA0BC,iBAAuCH,UAAvCG,gBAAgBC,sBAAuBJ,UAAvBI;IAClE,IAAM,AAACC,UAAWtB,UAAU,MAAM;QAACuB,MAAM;QAAeX,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EQ;IACP,IAAME,eAAeN;IAErB,qBACI,sBAACO;QACGC,SAAQ;QACRC,OAAM;QACNC,QAAO;QACPC,GAAG;QACHC,IAAG;QACHC,IAAG;QACHC,GAAG;QACHC,WAAWX,QAAQnB;OACfa;;YAEHG,4BAA4BK,aAAaU,SAAS,kBAC/C,qBAACT,WAAKU;gBACFC,MAAK;gBACLC,IAAG;gBACHJ,WAAWX,QAAQZ;gBACnB4B,OAAOC,kCAAqBC;0BAE5B,cAAA,qBAACC;oBAAQC,OAAM;8BACX,cAAA,sBAACC;wBACGC,SAASxB;wBACTyB,SAAQ;wBACRC,UAAUzB;wBACV0B,wBAAU,qBAACC;4BAAcC,QAAQ;;;4BAEhCzB,aAAaU;4BAAO;;;;iBAIjC;YACHnB;;;AAGb"}
+{"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';\nimport {TableLayoutControl} from './TableLayoutControl';\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, disableRowSelection} = useTable();\n    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const selectedRows = getSelectedRows();\n\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\n                            onClick={clearSelection}\n                            variant=\"subtle\"\n                            disabled={disableRowSelection}\n                            leftIcon={<CrossSize16Px height={16} />}\n                        >\n                            {selectedRows.length} selected\n                        </Button>\n                    </Tooltip>\n                </Grid.Col>\n            ) : null}\n            {children}\n            <TableLayoutControl />\n        </Grid>\n    );\n};\n"],"names":["TableHeader","useStyles","createStyles","theme","root","flexDirection","flexWrap","background","colors","gray","borderBottom","multiSelectInfo","justifySelf","classNames","styles","unstyled","children","others","useTable","getSelectedRows","multiRowSelectionEnabled","clearSelection","disableRowSelection","classes","name","selectedRows","Grid","justify","align","gutter","p","pl","pr","m","className","length","Col","span","py","order","TableComponentsOrder","MultiSelectInfo","Tooltip","label","Button","onClick","variant","disabled","leftIcon","CrossSize16Px","height","TableLayoutControl"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;gCA1Be;oBACuC;sBAG9C;2BACc;4BACZ;kCACU;AAEjC,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM;YACFC,eAAe;YACfC,UAAU;YACVC,YAAY,AAAC,6BAAqDJ,OAAzBA,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC,MAAkCN,OAA9BA,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC,WAAuCN,OAA9BA,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC,WAA8B,OAArBN,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC;YACnJC,cAAc,AAAC,aAAiC,OAArBP,MAAMK,OAAOC,IAAI,CAAC,EAAE;QACnD;QACAE,iBAAiB;YACbC,aAAa;QACjB;IACJ;;AAOO,IAAMZ,cAAmD;QAC5Da,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAyFE,YAAAA,IAAAA,2BAAlFC,kBAAkFD,UAAlFC,iBAAiBC,2BAAiEF,UAAjEE,0BAA0BC,iBAAuCH,UAAvCG,gBAAgBC,sBAAuBJ,UAAvBI;IAClE,IAAM,AAACC,UAAWtB,UAAU,MAAM;QAACuB,MAAM;QAAeX,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EQ;IACP,IAAME,eAAeN;IAErB,qBACI,sBAACO;QACGC,SAAQ;QACRC,OAAM;QACNC,QAAO;QACPC,GAAG;QACHC,IAAG;QACHC,IAAG;QACHC,GAAG;QACHC,WAAWX,QAAQnB;OACfa;;YAEHG,4BAA4BK,aAAaU,SAAS,kBAC/C,qBAACT,WAAKU;gBACFC,MAAK;gBACLC,IAAG;gBACHJ,WAAWX,QAAQZ;gBACnB4B,OAAOC,kCAAqBC;0BAE5B,cAAA,qBAACC;oBAAQC,OAAM;8BACX,cAAA,sBAACC;wBACGC,SAASxB;wBACTyB,SAAQ;wBACRC,UAAUzB;wBACV0B,wBAAU,qBAACC;4BAAcC,QAAQ;;;4BAEhCzB,aAAaU;4BAAO;;;;iBAIjC;YACHnB;0BACD,qBAACmC;;;AAGb"}

package/dist/cjs/components/table/TableLayoutControl.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const TableLayoutControl: () => JSX.Element;
+//# sourceMappingURL=TableLayoutControl.d.ts.map

package/dist/cjs/components/table/TableLayoutControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableLayoutControl.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableLayoutControl.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,kBAAkB,mBAwB9B,CAAC"}

package/dist/cjs/components/table/TableLayoutControl.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableLayoutControl", {
+    enumerable: true,
+    get: function() {
+        return TableLayoutControl;
+    }
+});
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _jsxruntime = require("react/jsx-runtime");
+var _core = require("@mantine/core");
+var _Tablestyles = require("./Table.styles");
+var _TableContext = require("./TableContext");
+var TableLayoutControl = function() {
+    var _useTable = (0, _TableContext.useTable)(), form = _useTable.form, layouts = _useTable.layouts;
+    return layouts.length > 1 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
+        order: _Tablestyles.TableComponentsOrder.LayoutControl,
+        span: "content",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.SegmentedControl, _object_spread._({
+            color: "action",
+            data: layouts.map(function(param) {
+                var name = param.name, Icon = param.icon;
+                return {
+                    value: name,
+                    label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Center, {
+                        children: [
+                            Icon ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
+                                        height: 16
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Space, {
+                                        w: "xs"
+                                    })
+                                ]
+                            }) : null,
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
+                                children: name
+                            })
+                        ]
+                    })
+                };
+            })
+        }, form.getInputProps("layout")))
+    }) : null;
+};
+
+//# sourceMappingURL=TableLayoutControl.js.map

package/dist/cjs/components/table/TableLayoutControl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/TableLayoutControl.tsx"],"sourcesContent":["import {Box, Center, Grid, SegmentedControl, Space} from '@mantine/core';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nexport const TableLayoutControl = () => {\n    const {form, layouts} = useTable();\n    return layouts.length > 1 ? (\n        <Grid.Col order={TableComponentsOrder.LayoutControl} span=\"content\">\n            <SegmentedControl\n                color=\"action\"\n                data={layouts.map(({name, icon: Icon}) => ({\n                    value: name,\n                    label: (\n                        <Center>\n                            {Icon ? (\n                                <>\n                                    <Icon height={16} />\n                                    <Space w=\"xs\" />\n                                </>\n                            ) : null}\n                            <Box>{name}</Box>\n                        </Center>\n                    ),\n                }))}\n                {...form.getInputProps('layout')}\n            />\n        </Grid.Col>\n    ) : null;\n};\n"],"names":["TableLayoutControl","useTable","form","layouts","length","Grid","Col","order","TableComponentsOrder","LayoutControl","span","SegmentedControl","color","data","map","name","icon","Icon","value","label","Center","height","Space","w","Box","getInputProps"],"mappings":";;;;+BAIaA;;;eAAAA;;;;;oBAJ4C;2BACtB;4BACZ;AAEhB,IAAMA,qBAAqB;IAC9B,IAAwBC,YAAAA,IAAAA,2BAAjBC,OAAiBD,UAAjBC,MAAMC,UAAWF,UAAXE;IACb,OAAOA,QAAQC,SAAS,kBACpB,qBAACC,WAAKC;QAAIC,OAAOC,kCAAqBC;QAAeC,MAAK;kBACtD,cAAA,qBAACC;YACGC,OAAM;YACNC,MAAMV,QAAQW,IAAI;oBAAEC,aAAAA,MAAMC,AAAMC,aAAND;uBAAiB;oBACvCE,OAAOH;oBACPI,qBACI,sBAACC;;4BACIH,qBACG;;kDACI,qBAACA;wCAAKI,QAAQ;;kDACd,qBAACC;wCAAMC,GAAE;;;iCAEb;0CACJ,qBAACC;0CAAKT;;;;gBAGlB;;WACIb,KAAKuB,cAAc;SAG/B;AACR"}

package/dist/cjs/components/table/TableLoading.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonProps } from '@mantine/core';
+import { FunctionComponent } from 'react';
+export declare const TableLoading: FunctionComponent<SkeletonProps>;
+//# sourceMappingURL=TableLoading.d.ts.map

package/dist/cjs/components/table/TableLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableLoading.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableLoading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,aAAa,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,aAAa,CAIzD,CAAC"}

package/dist/cjs/components/table/TableLoading.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableLoading", {
+    enumerable: true,
+    get: function() {
+        return TableLoading;
+    }
+});
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _jsxruntime = require("react/jsx-runtime");
+var _core = require("@mantine/core");
+var TableLoading = function(props) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Skeleton, _object_spread_props._(_object_spread._({
+        style: {
+            display: "inline-block"
+        }
+    }, props), {
+        sx: !props.visible ? {
+            borderRadius: 0
+        } : undefined,
+        children: props.children
+    }));
+};
+
+//# sourceMappingURL=TableLoading.js.map

package/dist/cjs/components/table/TableLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/TableLoading.tsx"],"sourcesContent":["import {Skeleton, SkeletonProps} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nexport const TableLoading: FunctionComponent<SkeletonProps> = (props) => (\n    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n"],"names":["TableLoading","props","Skeleton","style","display","sx","visible","borderRadius","undefined","children"],"mappings":";;;;+BAGaA;;;eAAAA;;;;;;oBAHyB;AAG/B,IAAMA,eAAiD,SAACC;yBAC3D,qBAACC;QAASC,OAAO;YAACC,SAAS;QAAc;OAAOH;QAAOI,IAAI,CAACJ,MAAMK,UAAU;YAACC,cAAc;QAAC,IAAIC;kBAC3FP,MAAMQ"}

package/dist/cjs/components/table/TablePredicate.d.ts

@@ -1,6 +1,16 @@
-import { SelectItem } from '@mantine/core';
+import { DefaultProps, SelectItem, Selectors } from '@mantine/core';
 import { FunctionComponent } from 'react';
-interface TablePredicateProps {
+declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
+    classes: {
+        root: string;
+        wrapper: string;
+        label: string;
+    };
+    cx: (...args: any) => string;
+    theme: import("@mantine/core").MantineTheme;
+};
+type TablePredicateStylesNames = Selectors<typeof useStyles>;
+interface TablePredicateProps extends DefaultProps<TablePredicateStylesNames> {
     /**
      * Unique identifier for this predicate. Will be used to access the selected value in the table state
      */

package/dist/cjs/components/table/TablePredicate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TablePredicate.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TablePredicate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,UAAU,EAAO,MAAM,eAAe,CAAC;AACpE,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAKxC,UAAU,mBAAmB;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAuBjE,CAAC"}
+{"version":3,"file":"TablePredicate.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TablePredicate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAuB,UAAU,EAAE,SAAS,EAAO,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAKxC,QAAA,MAAM,SAAS;;;;;;;;CAIZ,CAAC;AAEJ,KAAK,yBAAyB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAE7D,UAAU,mBAAoB,SAAQ,YAAY,CAAC,yBAAyB,CAAC;IACzE;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAgCjE,CAAC"}

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

@@ -11,25 +11,50 @@ Object.defineProperty(exports, "TablePredicate", {
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
 var _Tablestyles = require("./Table.styles");
 var _TableContext = require("./TableContext");
-var TablePredicate = function(param) {
-    var id = param.id, data = param.data, label = param.label;
+var useStyles = (0, _core.createStyles)(function(theme) {
+    return {
+        root: {},
+        wrapper: {},
+        label: {}
+    };
+});
+var TablePredicate = function(_param) {
+    var id = _param.id, data = _param.data, label = _param.label, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties._(_param, [
+        "id",
+        "data",
+        "label",
+        "classNames",
+        "styles",
+        "unstyled"
+    ]);
+    var classes = useStyles(null, {
+        name: "TablePredicate",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
+    }).classes;
     var _useTable = (0, _TableContext.useTable)(), onChange = _useTable.onChange, form = _useTable.form;
     var onUpdate = function(newValue) {
         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__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
         span: "content",
         order: _Tablestyles.TableComponentsOrder.Predicate,
         py: "sm",
+        className: classes.root
+    }, others), {
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
             spacing: "xs",
+            className: classes.wrapper,
             children: [
                 label ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Text, {
+                    className: classes.label,
                     children: [
                         label,
                         ":"
@@ -45,7 +70,7 @@ var TablePredicate = function(param) {
                 })
             ]
         })
-    });
+    }));
 };
 
 //# sourceMappingURL=TablePredicate.js.map

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

@@ -1 +1 @@
-{"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":["TablePredicate","id","data","label","useTable","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","Grid","Col","span","order","TableComponentsOrder","Predicate","py","Group","spacing","Text","Select","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;oBAvBuC;2BAEjB;4BAEZ;AAmBhB,IAAMA,iBAAyD;QAAEC,WAAAA,IAAIC,aAAAA,MAAMC,cAAAA;IAC9E,IAAyBC,YAAAA,IAAAA,2BAAlBC,WAAkBD,UAAlBC,UAAUC,OAAQF,UAARE;IAEjB,IAAMC,WAAW,SAACC;QACdF,KAAKG,cAAc,cAAc,4CAAIH,KAAKI,OAAOC,aAAY,uBAACV,IAAKO;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,qBAACO,WAAKC;QAAIC,MAAK;QAAUC,OAAOC,kCAAqBC;QAAWC,IAAG;kBAC/D,cAAA,sBAACC;YAAMC,SAAQ;;gBACVjB,sBAAQ,sBAACkB;;wBAAMlB;wBAAM;;qBAAW;8BACjC,qBAACmB;oBACGC,YAAY;oBACZC,OAAOlB,KAAKI,OAAOC,UAAU,CAACV,GAAG;oBACjCI,UAAUE;oBACVL,MAAMA;oBACNuB,cAAYtB,kBAAAA,mBAAAA,QAASF;oBACrByB,YAAYxB,KAAKyB,SAAS;;;;;AAK9C"}
+{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Grid, Group, Select, SelectItem, Selectors, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    wrapper: {},\n    label: {},\n}));\n\ntype TablePredicateStylesNames = Selectors<typeof useStyles>;\n\ninterface TablePredicateProps extends DefaultProps<TablePredicateStylesNames> {\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> = ({\n    id,\n    data,\n    label,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TablePredicate', classNames, styles, unstyled});\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\" className={classes.root} {...others}>\n            <Group spacing=\"xs\" className={classes.wrapper}>\n                {label ? <Text className={classes.label}>{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":["TablePredicate","useStyles","createStyles","theme","root","wrapper","label","id","data","classNames","styles","unstyled","others","classes","name","useTable","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","Grid","Col","span","order","TableComponentsOrder","Predicate","py","className","Group","spacing","Text","Select","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;;oBA/B8E;2BAGxD;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS,CAAC;QACVC,OAAO,CAAC;IACZ;;AAqBO,IAAMN,iBAAyD;QAClEO,YAAAA,IACAC,cAAAA,MACAF,eAAAA,OACAG,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QANHL;QACAC;QACAF;QACAG;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWZ,UAAU,MAAM;QAACa,MAAM;QAAkBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAAhFE;IACP,IAAyBE,YAAAA,IAAAA,2BAAlBC,WAAkBD,UAAlBC,UAAUC,OAAQF,UAARE;IAEjB,IAAMC,WAAW,SAACC;QACdF,KAAKG,cAAc,cAAc,4CAAIH,KAAKI,OAAOC,aAAY,uBAACf,IAAKY;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,qBAACO,WAAKC;QAAIC,MAAK;QAAUC,OAAOC,kCAAqBC;QAAWC,IAAG;QAAKC,WAAWjB,QAAQT;OAAUQ;kBACjG,cAAA,sBAACmB;YAAMC,SAAQ;YAAKF,WAAWjB,QAAQR;;gBAClCC,sBAAQ,sBAAC2B;oBAAKH,WAAWjB,QAAQP;;wBAAQA;wBAAM;;qBAAW;8BAC3D,qBAAC4B;oBACGC,YAAY;oBACZC,OAAOnB,KAAKI,OAAOC,UAAU,CAACf,GAAG;oBACjCS,UAAUE;oBACVV,MAAMA;oBACN6B,cAAY/B,kBAAAA,mBAAAA,QAASC;oBACrB+B,YAAY9B,KAAK+B,SAAS;;;;;AAK9C"}

package/dist/cjs/components/table/Th.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Th.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAsB9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAcD,eAAO,MAAM,EAAE,4CAqCd,CAAC"}
+{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Th.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAuB9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAcD,eAAO,MAAM,EAAE,4CAqCd,CAAC"}

package/dist/cjs/components/table/Th.js

@@ -17,7 +17,8 @@ var useStyles = (0, _core.createStyles)(function(theme) {
         th: {
             fontWeight: "400 !important",
             padding: "0 !important",
-            verticalAlign: "middle"
+            verticalAlign: "middle",
+            whiteSpace: "nowrap"
         },
         control: {
             width: "100%",

package/dist/cjs/components/table/Th.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        whiteSpace: 'nowrap',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        color: theme.colors.gray[6],\n\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\n                <Text size=\"xs\" py=\"xs\" px=\"sm\" fw={500}>\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted() || 'none';\n    const Icon = SortingIcons[sortingOrder];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\" noWrap>\n                    <Text size=\"xs\" fw={500}>\n                        {flexRender(header.column.columnDef.header, header.getContext())}\n                    </Text>\n                    <Center>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["Th","useStyles","createStyles","theme","th","fontWeight","padding","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","color","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","header","classes","size","column","getSize","defaultColumnSizing","undefined","isPlaceholder","getCanSort","className","style","Text","py","px","fw","flexRender","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","UnstyledButton","onClick","Group","position","noWrap","Center","height"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;gCAxC8D;oBACX;0BACV;AAEtD,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPH,SAAS,AAAC,GAAsBH,OAApBA,MAAMO,QAAQC,IAAG,KAAoB,OAAjBR,MAAMO,QAAQE;YAC9CC,YAAY;YACZC,iBAAiBX,MAAMY,gBAAgB,SAASZ,MAAMa,OAAOC,IAAI,CAAC,EAAE,GAAGd,MAAMa,OAAOC,IAAI,CAAC,EAAE;YAC3FC,OAAOf,MAAMa,OAAOC,IAAI,CAAC,EAAE;YAE3B,WAAW;gBACPH,iBAAiBX,MAAMY,gBAAgB,SAASZ,MAAMa,OAAOC,IAAI,CAAC,EAAE,GAAGd,MAAMa,OAAOC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAME,eAAe;IACjBC,KAAKC;IACLC,MAAMC;IACNC,MAAMC;AACV;AAEA,IAAMC,gBAAgB;IAClBN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AAEO,IAAMxB,KAAK;QAAM2B,eAAAA;IACpB,IAAM,AAACC,UAAW3B,YAAX2B;IACP,IAAMC,OAAOF,OAAOG,OAAOC;IAC3B,IAAMtB,QAAQoB,SAASG,gCAAoBH,OAAOA,OAAOI;IAEzD,IAAIN,OAAOO,eAAe;QACtB,OAAO;IACX;IAEA,IAAI,CAACP,OAAOG,OAAOK,cAAc;QAC7B,qBACI,qBAAC/B;YAAGgC,WAAWR,QAAQxB;YAAIiC,OAAO;gBAAC5B,OAAAA;YAAK;sBACpC,cAAA,qBAAC6B;gBAAKT,MAAK;gBAAKU,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BC,IAAAA,wBAAWf,OAAOG,OAAOa,UAAUhB,QAAQA,OAAOiB;;;IAInE;IAEA,IAAMC,SAASlB,OAAOG,OAAOgB;IAC7B,IAAMC,eAAepB,OAAOG,OAAOkB,iBAAiB;IACpD,IAAMC,OAAO9B,YAAY,CAAC4B,aAAa;IAEvC,qBACI,qBAAC3C;QAAGgC,WAAWR,QAAQxB;QAAIiC,OAAO;YAAC5B,OAAAA;QAAK;QAAGyC,aAAWxB,aAAa,CAACqB,aAAa;kBAC7E,cAAA,qBAACI;YAAeC,SAASP;YAAQT,WAAWR,QAAQpB;sBAChD,cAAA,sBAAC6C;gBAAMC,UAAS;gBAAQC,MAAM;;kCAC1B,qBAACjB;wBAAKT,MAAK;wBAAKY,IAAI;kCACfC,IAAAA,wBAAWf,OAAOG,OAAOa,UAAUhB,QAAQA,OAAOiB;;kCAEvD,qBAACY;kCACG,cAAA,qBAACP;4BAAKQ,QAAQ;;;;;;;AAMtC"}
+{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        whiteSpace: 'nowrap',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        color: theme.colors.gray[6],\n\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\n                <Text size=\"xs\" py=\"xs\" px=\"sm\" fw={500}>\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted() || 'none';\n    const Icon = SortingIcons[sortingOrder];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\" noWrap>\n                    <Text size=\"xs\" fw={500}>\n                        {flexRender(header.column.columnDef.header, header.getContext())}\n                    </Text>\n                    <Center>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["Th","useStyles","createStyles","theme","th","fontWeight","padding","verticalAlign","whiteSpace","control","width","spacing","xs","sm","backgroundColor","colorScheme","colors","gray","color","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","header","classes","size","column","getSize","defaultColumnSizing","undefined","isPlaceholder","getCanSort","className","style","Text","py","px","fw","flexRender","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","UnstyledButton","onClick","Group","position","noWrap","Center","height"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;gCAzC8D;oBACX;0BACV;AAEtD,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;YACfC,YAAY;QAChB;QAEAC,SAAS;YACLC,OAAO;YACPJ,SAAS,AAAC,GAAsBH,OAApBA,MAAMQ,QAAQC,IAAG,KAAoB,OAAjBT,MAAMQ,QAAQE;YAC9CL,YAAY;YACZM,iBAAiBX,MAAMY,gBAAgB,SAASZ,MAAMa,OAAOC,IAAI,CAAC,EAAE,GAAGd,MAAMa,OAAOC,IAAI,CAAC,EAAE;YAC3FC,OAAOf,MAAMa,OAAOC,IAAI,CAAC,EAAE;YAE3B,WAAW;gBACPH,iBAAiBX,MAAMY,gBAAgB,SAASZ,MAAMa,OAAOC,IAAI,CAAC,EAAE,GAAGd,MAAMa,OAAOC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAME,eAAe;IACjBC,KAAKC;IACLC,MAAMC;IACNC,MAAMC;AACV;AAEA,IAAMC,gBAAgB;IAClBN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AAEO,IAAMxB,KAAK;QAAM2B,eAAAA;IACpB,IAAM,AAACC,UAAW3B,YAAX2B;IACP,IAAMC,OAAOF,OAAOG,OAAOC;IAC3B,IAAMrB,QAAQmB,SAASG,gCAAoBH,OAAOA,OAAOI;IAEzD,IAAIN,OAAOO,eAAe;QACtB,OAAO;IACX;IAEA,IAAI,CAACP,OAAOG,OAAOK,cAAc;QAC7B,qBACI,qBAAC/B;YAAGgC,WAAWR,QAAQxB;YAAIiC,OAAO;gBAAC3B,OAAAA;YAAK;sBACpC,cAAA,qBAAC4B;gBAAKT,MAAK;gBAAKU,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BC,IAAAA,wBAAWf,OAAOG,OAAOa,UAAUhB,QAAQA,OAAOiB;;;IAInE;IAEA,IAAMC,SAASlB,OAAOG,OAAOgB;IAC7B,IAAMC,eAAepB,OAAOG,OAAOkB,iBAAiB;IACpD,IAAMC,OAAO9B,YAAY,CAAC4B,aAAa;IAEvC,qBACI,qBAAC3C;QAAGgC,WAAWR,QAAQxB;QAAIiC,OAAO;YAAC3B,OAAAA;QAAK;QAAGwC,aAAWxB,aAAa,CAACqB,aAAa;kBAC7E,cAAA,qBAACI;YAAeC,SAASP;YAAQT,WAAWR,QAAQnB;sBAChD,cAAA,sBAAC4C;gBAAMC,UAAS;gBAAQC,MAAM;;kCAC1B,qBAACjB;wBAAKT,MAAK;wBAAKY,IAAI;kCACfC,IAAAA,wBAAWf,OAAOG,OAAOa,UAAUhB,QAAQA,OAAOiB;;kCAEvD,qBAACY;kCACG,cAAA,qBAACP;4BAAKQ,QAAQ;;;;;;;AAMtC"}

package/dist/cjs/components/table/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Table';
 export { useTable } from './TableContext';
 export { type onTableChangeEvent, type InitialTableState, type TableState, type TableProps } from './Table.types';
+export { TableLayouts } from './layouts/TableLayouts';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAC,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAC,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC;AAChH,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC"}

package/dist/cjs/components/table/index.js

@@ -2,14 +2,23 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useTable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useTable: function() {
         return _TableContext.useTable;
+    },
+    TableLayouts: function() {
+        return _TableLayouts.TableLayouts;
     }
 });
 var _export_star = require("@swc/helpers/_/_export_star");
 _export_star._(require("./Table"), exports);
 var _TableContext = require("./TableContext");
+var _TableLayouts = require("./layouts/TableLayouts");
 
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/table/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {useTable} from './TableContext';\nexport {type onTableChangeEvent, type InitialTableState, type TableState, type TableProps} from './Table.types';\n"],"names":["useTable"],"mappings":";;;;+BACQA;;;eAAAA;;;;uBADM;4BACS"}
+{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {useTable} from './TableContext';\nexport {type onTableChangeEvent, type InitialTableState, type TableState, type TableProps} from './Table.types';\nexport {TableLayouts} from './layouts/TableLayouts';\n"],"names":["useTable","TableLayouts"],"mappings":";;;;;;;;;;;IACQA,QAAQ;eAARA;;IAEAC,YAAY;eAAZA;;;;uBAHM;4BACS;4BAEI"}

package/dist/cjs/components/table/layouts/RowLayout.d.ts

@@ -0,0 +1,3 @@
+import { TableLayout } from '../Table.types';
+export declare const RowLayout: TableLayout;
+//# sourceMappingURL=RowLayout.d.ts.map

package/dist/cjs/components/table/layouts/RowLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,WAAW,EAAmB,MAAM,gBAAgB,CAAC;AA2I7D,eAAO,MAAM,SAAS,EAAE,WAKvB,CAAC"}