@coveord/plasma-mantine 52.6.0 → 52.7.1

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 {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":["CalendarSize24Px","Grid","Group","Popover","Text","dayjs","useToggle","Button","DateRangePickerInlineCalendar","TableComponentsOrder","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","toggleOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formattedRange","values","dateRange","Col","span","order","DateRangePicker","py","spacing","onChange","withinPortal","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;AAG1B,SAAQC,SAAS,QAAO,iBAAiB;AACzC,SAAQC,MAAM,QAAO,YAAY;AACjC,SACIC,6BAA6B,QAI1B,uBAAuB;AAC9B,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAkBxC,OAAO,IAAMC,uBAAqE;+BAC9EC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA+BP,8BAAAA,iBAAxBQ,SAAwBR,eAAhBS,eAAgBT;IAC/B,IAAM,AAACU,OAAQN,WAARM;IAEP,IAAMC,UAAU,SAACC;QACbF,KAAKG,cAAc,aAAaD;QAChCH,aAAa;IACjB;IACA,IAAMK,WAAW;QACbL,aAAa;IACjB;IAEA,IAAMM,aAAa,SAACC;eAAejB,MAAMiB,MAAMC,OAAO;;IACtD,IAAMC,iBAAiB,AAAC,GAA4CH,OAA1CA,WAAWL,KAAKS,OAAOC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCL,WAAWL,KAAKS,OAAOC,SAAS,CAAC,EAAE;IAEvG,qBACI,KAACzB,KAAK0B;QAAIC,MAAK;QAAUC,OAAOpB,qBAAqBqB;QAAiBC,IAAG;kBACrE,cAAA,MAAC7B;YAAM8B,SAAQ;;8BACX,KAAC5B;oBAAKwB,IAAI;8BAAEJ;;8BACZ,MAACrB;oBAAQW,QAAQA;oBAAQmB,UAAUlB;oBAAcmB,YAAY;;sCACzD,KAAC/B,QAAQgC;sCACL,cAAA,KAAC5B;gCAAO6B,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAMvB;;gCAAgBwB,IAAG;0CACrE,cAAA,KAACvC;oCAAiBwC,OAAO;oCAAIC,QAAQ;;;;sCAG7C,KAACtC,QAAQuC;4BAASC,GAAG;sCACjB,cAAA,KAACnC;gCACGoC,cAAc5B,KAAKS,OAAOC;gCAC1BT,SAASA;gCACTG,UAAUA;gCACVR,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD,EAAE"}
+{"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":["CalendarSize24Px","createStyles","Grid","Group","Popover","Text","useToggle","dayjs","Button","DateRangePickerInlineCalendar","TableComponentsOrder","useTable","useStyles","theme","root","wrapper","label","TableDateRangePicker","presets","rangeCalendarProps","classNames","styles","unstyled","others","classes","name","opened","toggleOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formattedRange","values","dateRange","Col","span","order","DateRangePicker","py","className","spacing","onChange","withinPortal","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":";;;;;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,YAAY,EAAgBC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAaC,IAAI,QAAO,gBAAgB;AAChG,SAAQC,SAAS,QAAO,iBAAiB;AACzC,OAAOC,WAAW,QAAQ;AAG1B,SAAQC,MAAM,QAAO,YAAY;AACjC,SACIC,6BAA6B,QAI1B,uBAAuB;AAC9B,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAExC,IAAMC,YAAYX,aAAa,SAACY;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS,CAAC;QACVC,OAAO,CAAC;IACZ;;AAoBA,OAAO,IAAMC,uBAAqE;gCAC9EC,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+BlB,8BAAAA,iBAAxBoB,SAAwBpB,eAAhBqB,eAAgBrB;IAC/B,IAAM,AAACsB,OAAQjB,WAARiB;IAEP,IAAMC,UAAU,SAACC;QACbF,KAAKG,cAAc,aAAaD;QAChCH,aAAa;IACjB;IACA,IAAMK,WAAW;QACbL,aAAa;IACjB;IAEA,IAAMM,aAAa,SAACC;eAAe3B,MAAM2B,MAAMC,OAAO;;IACtD,IAAMC,iBAAiB,AAAC,GAA4CH,OAA1CA,WAAWL,KAAKS,OAAOC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCL,WAAWL,KAAKS,OAAOC,SAAS,CAAC,EAAE;IAEvG,qBACI,KAACpC,KAAKqC;QACFC,MAAK;QACLC,OAAO/B,qBAAqBgC;QAC5BC,IAAG;QACHC,WAAWpB,QAAQV;OACfS;kBAEJ,cAAA,MAACpB;YAAM0C,SAAQ;YAAKD,WAAWpB,QAAQT;;8BACnC,KAACV;oBAAKmC,IAAI;oBAACI,WAAWpB,QAAQR;8BACzBoB;;8BAEL,MAAChC;oBAAQsB,QAAQA;oBAAQoB,UAAUnB;oBAAcoB,YAAY;;sCACzD,KAAC3C,QAAQ4C;sCACL,cAAA,KAACxC;gCAAOyC,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAMxB;;gCAAgByB,IAAG;0CACrE,cAAA,KAACpD;oCAAiBqD,OAAO;oCAAIC,QAAQ;;;;sCAG7C,KAAClD,QAAQmD;4BAASC,GAAG;sCACjB,cAAA,KAAC/C;gCACGgD,cAAc7B,KAAKS,OAAOC;gCAC1BT,SAASA;gCACTG,UAAUA;gCACVd,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD,EAAE"}

package/dist/esm/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/esm/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/esm/components/table/TableFilter.js

@@ -8,6 +8,7 @@ import { TableComponentsOrder } from "./Table.styles";
 import { useTable } from "./TableContext";
 var useStyles = createStyles(function(theme) {
     return {
+        root: {},
         wrapper: {
             marginBottom: "0 !important"
         },
@@ -24,7 +25,7 @@ export var TableFilter = function(_param) {
         "unstyled"
     ]);
     var classes = useStyles(null, {
-        name: "TableHeader",
+        name: "TableFilter",
         classNames: classNames,
         styles: styles,
         unstyled: unstyled
@@ -52,6 +53,7 @@ export var TableFilter = function(_param) {
         span: "content",
         order: TableComponentsOrder.Filter,
         py: "sm",
+        className: classes.root,
         children: /*#__PURE__*/ _jsx(TextInput, _object_spread({
             className: classes.wrapper,
             placeholder: placeholder,

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, 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,OAAOC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD;oCAC5DC,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,IAA0Bf,YAAAA,YAAnBiB,QAAmBjB,UAAnBiB,OAAOC,WAAYlB,UAAZkB;IAEd,IAAMC,oBAAoB,SAACC;QACvBF,SAAS,SAACG;mBAAe,wCAClBA;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,KAACtB,KAAKiC;QAAIC,MAAK;QAAUC,OAAOjC,qBAAqBkC;QAAQC,IAAG;kBAC5D,cAAA,KAACpC;YACGqC,WAAWpB,QAAQZ;YACnBO,aAAaA;YACb0B,IAAG;YACHC,cACIpB,MAAMQ,6BACF,KAAC9B;gBAAW2C,SAAST;0BACjB,cAAA,KAACpC;oBAAc8C,QAAQ;;+BAG3B,KAAC7C;gBAAe6C,QAAQ;gBAAIJ,WAAWpB,QAAQV;;YAGvDe,OAAOH,MAAMQ;YACbe,UAAUd;WACNZ;;AAIpB,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';\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":["CrossSize16Px","SearchSize16Px","ActionIcon","createStyles","Grid","TextInput","TableComponentsOrder","useTable","useStyles","theme","root","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;AAGjG,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAExC,IAAMC,YAAYL,aAAa,SAACM;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOL,MAAMM,OAAOC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD;oCAC5DC,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,IAA0BhB,YAAAA,YAAnBkB,QAAmBlB,UAAnBkB,OAAOC,WAAYnB,UAAZmB;IAEd,IAAMC,oBAAoB,SAACC;QACvBF,SAAS,SAACG;mBAAe,wCAClBA;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,KAACvB,KAAKkC;QAAIC,MAAK;QAAUC,OAAOlC,qBAAqBmC;QAAQC,IAAG;QAAKC,WAAWpB,QAAQb;kBACpF,cAAA,KAACL;YACGsC,WAAWpB,QAAQZ;YACnBO,aAAaA;YACb0B,IAAG;YACHC,cACIpB,MAAMQ,6BACF,KAAC/B;gBAAW4C,SAAST;0BACjB,cAAA,KAACrC;oBAAc+C,QAAQ;;+BAG3B,KAAC9C;gBAAe8C,QAAQ;gBAAIJ,WAAWpB,QAAQV;;YAGvDe,OAAOH,MAAMQ;YACbe,UAAUd;WACNZ;;AAIpB,EAAE"}

package/dist/esm/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/esm/components/table/TableHeader.js

@@ -7,6 +7,7 @@ import { createStyles, Grid, Tooltip } from "@mantine/core";
 import { Button } from "../button";
 import { TableComponentsOrder } from "./Table.styles";
 import { useTable } from "./TableContext";
+import { TableLayoutControl } from "./TableLayoutControl";
 var useStyles = createStyles(function(theme) {
     return {
         root: {
@@ -67,7 +68,8 @@ export var TableHeader = function(_param) {
                     })
                 })
             }) : null,
-            children
+            children,
+            /*#__PURE__*/ _jsx(TableLayoutControl, {})
         ]
     }));
 };

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, 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":["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","disableRowSelection","classes","name","selectedRows","justify","align","gutter","p","pl","pr","m","className","length","Col","span","py","order","MultiSelectInfo","label","onClick","variant","disabled","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,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;;AAOA,OAAO,IAAMC,cAAmD;QAC5DC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAyFhB,YAAAA,YAAlFkB,kBAAkFlB,UAAlFkB,iBAAiBC,2BAAiEnB,UAAjEmB,0BAA0BC,iBAAuCpB,UAAvCoB,gBAAgBC,sBAAuBrB,UAAvBqB;IAClE,IAAM,AAACC,UAAWrB,UAAU,MAAM;QAACsB,MAAM;QAAeV,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EO;IACP,IAAME,eAAeN;IAErB,qBACI,MAACtB;QACG6B,SAAQ;QACRC,OAAM;QACNC,QAAO;QACPC,GAAG;QACHC,IAAG;QACHC,IAAG;QACHC,GAAG;QACHC,WAAWV,QAAQnB;OACfc;;YAEHE,4BAA4BK,aAAaS,SAAS,kBAC/C,KAACrC,KAAKsC;gBACFC,MAAK;gBACLC,IAAG;gBACHJ,WAAWV,QAAQZ;gBACnB2B,OAAOtC,qBAAqBuC;0BAE5B,cAAA,KAACzC;oBAAQ0C,OAAM;8BACX,cAAA,MAACzC;wBACG0C,SAASpB;wBACTqB,SAAQ;wBACRC,UAAUrB;wBACVsB,wBAAU,KAACjD;4BAAckD,QAAQ;;;4BAEhCpB,aAAaS;4BAAO;;;;iBAIjC;YACHjB;;;AAGb,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';\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":["CrossSize16Px","createStyles","Grid","Tooltip","Button","TableComponentsOrder","useTable","TableLayoutControl","useStyles","theme","root","flexDirection","flexWrap","background","colors","gray","borderBottom","multiSelectInfo","justifySelf","TableHeader","classNames","styles","unstyled","children","others","getSelectedRows","multiRowSelectionEnabled","clearSelection","disableRowSelection","classes","name","selectedRows","justify","align","gutter","p","pl","pr","m","className","length","Col","span","py","order","MultiSelectInfo","label","onClick","variant","disabled","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;AACxC,SAAQC,kBAAkB,QAAO,uBAAuB;AAExD,IAAMC,YAAYP,aAAa,SAACQ;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;;AAOA,OAAO,IAAMC,cAAmD;QAC5DC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAyFjB,YAAAA,YAAlFmB,kBAAkFnB,UAAlFmB,iBAAiBC,2BAAiEpB,UAAjEoB,0BAA0BC,iBAAuCrB,UAAvCqB,gBAAgBC,sBAAuBtB,UAAvBsB;IAClE,IAAM,AAACC,UAAWrB,UAAU,MAAM;QAACsB,MAAM;QAAeV,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EO;IACP,IAAME,eAAeN;IAErB,qBACI,MAACvB;QACG8B,SAAQ;QACRC,OAAM;QACNC,QAAO;QACPC,GAAG;QACHC,IAAG;QACHC,IAAG;QACHC,GAAG;QACHC,WAAWV,QAAQnB;OACfc;;YAEHE,4BAA4BK,aAAaS,SAAS,kBAC/C,KAACtC,KAAKuC;gBACFC,MAAK;gBACLC,IAAG;gBACHJ,WAAWV,QAAQZ;gBACnB2B,OAAOvC,qBAAqBwC;0BAE5B,cAAA,KAAC1C;oBAAQ2C,OAAM;8BACX,cAAA,MAAC1C;wBACG2C,SAASpB;wBACTqB,SAAQ;wBACRC,UAAUrB;wBACVsB,wBAAU,KAAClD;4BAAcmD,QAAQ;;;4BAEhCpB,aAAaS;4BAAO;;;;iBAIjC;YACHjB;0BACD,KAAChB;;;AAGb,EAAE"}

package/dist/esm/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/esm/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/esm/components/table/TableLayoutControl.js

@@ -0,0 +1,40 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Center, Grid, SegmentedControl, Space } from "@mantine/core";
+import { TableComponentsOrder } from "./Table.styles";
+import { useTable } from "./TableContext";
+export var TableLayoutControl = function() {
+    var _useTable = useTable(), form = _useTable.form, layouts = _useTable.layouts;
+    return layouts.length > 1 ? /*#__PURE__*/ _jsx(Grid.Col, {
+        order: TableComponentsOrder.LayoutControl,
+        span: "content",
+        children: /*#__PURE__*/ _jsx(SegmentedControl, _object_spread({
+            color: "action",
+            data: layouts.map(function(param) {
+                var name = param.name, Icon = param.icon;
+                return {
+                    value: name,
+                    label: /*#__PURE__*/ _jsxs(Center, {
+                        children: [
+                            Icon ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Icon, {
+                                        height: 16
+                                    }),
+                                    /*#__PURE__*/ _jsx(Space, {
+                                        w: "xs"
+                                    })
+                                ]
+                            }) : null,
+                            /*#__PURE__*/ _jsx(Box, {
+                                children: name
+                            })
+                        ]
+                    })
+                };
+            })
+        }, form.getInputProps("layout")))
+    }) : null;
+};
+
+//# sourceMappingURL=TableLayoutControl.js.map

package/dist/esm/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":["Box","Center","Grid","SegmentedControl","Space","TableComponentsOrder","useTable","TableLayoutControl","form","layouts","length","Col","order","LayoutControl","span","color","data","map","name","icon","Icon","value","label","height","w","getInputProps"],"mappings":";;AAAA,SAAQA,GAAG,EAAEC,MAAM,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,KAAK,QAAO,gBAAgB;AACzE,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAExC,OAAO,IAAMC,qBAAqB;IAC9B,IAAwBD,YAAAA,YAAjBE,OAAiBF,UAAjBE,MAAMC,UAAWH,UAAXG;IACb,OAAOA,QAAQC,SAAS,kBACpB,KAACR,KAAKS;QAAIC,OAAOP,qBAAqBQ;QAAeC,MAAK;kBACtD,cAAA,KAACX;YACGY,OAAM;YACNC,MAAMP,QAAQQ,IAAI;oBAAEC,aAAAA,MAAMC,AAAMC,aAAND;uBAAiB;oBACvCE,OAAOH;oBACPI,qBACI,MAACrB;;4BACImB,qBACG;;kDACI,KAACA;wCAAKG,QAAQ;;kDACd,KAACnB;wCAAMoB,GAAE;;;iCAEb;0CACJ,KAACxB;0CAAKkB;;;;gBAGlB;;WACIV,KAAKiB,cAAc;SAG/B;AACR,EAAE"}

package/dist/esm/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/esm/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/esm/components/table/TableLoading.js

@@ -0,0 +1,18 @@
+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 { Skeleton } from "@mantine/core";
+export var TableLoading = function(props) {
+    return /*#__PURE__*/ _jsx(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/esm/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":["Skeleton","TableLoading","props","style","display","sx","visible","borderRadius","undefined","children"],"mappings":";;;AAAA,SAAQA,QAAQ,QAAsB,gBAAgB;AAGtD,OAAO,IAAMC,eAAiD,SAACC;yBAC3D,KAACF;QAASG,OAAO;YAACC,SAAS;QAAc;OAAOF;QAAOG,IAAI,CAACH,MAAMI,UAAU;YAACC,cAAc;QAAC,IAAIC;kBAC3FN,MAAMO;;EAEb"}

package/dist/esm/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/esm/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/esm/components/table/TablePredicate.js

@@ -1,25 +1,50 @@
 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 { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid, Group, Select, Text } from "@mantine/core";
+import { createStyles, 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;
+var useStyles = createStyles(function(theme) {
+    return {
+        root: {},
+        wrapper: {},
+        label: {}
+    };
+});
+export 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 = 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__*/ _jsx(Grid.Col, {
+    return /*#__PURE__*/ _jsx(Grid.Col, _object_spread_props(_object_spread({
         span: "content",
         order: TableComponentsOrder.Predicate,
         py: "sm",
+        className: classes.root
+    }, others), {
         children: /*#__PURE__*/ _jsxs(Group, {
             spacing: "xs",
+            className: classes.wrapper,
             children: [
                 label ? /*#__PURE__*/ _jsxs(Text, {
+                    className: classes.label,
                     children: [
                         label,
                         ":"
@@ -35,7 +60,7 @@ export var TablePredicate = function(param) {
                 })
             ]
         })
-    });
+    }));
 };
 
 //# sourceMappingURL=TablePredicate.js.map

package/dist/esm/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":["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;QAAEC,WAAAA,IAAIC,aAAAA,MAAMC,cAAAA;IAC9E,IAAyBJ,YAAAA,YAAlBK,WAAkBL,UAAlBK,UAAUC,OAAQN,UAARM;IAEjB,IAAMC,WAAW,SAACC;QACdF,KAAKG,cAAc,cAAc,wCAAIH,KAAKI,OAAOC,aAAY,qBAACT,IAAKM;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,KAACV,KAAKiB;QAAIC,MAAK;QAAUC,OAAOf,qBAAqBgB;QAAWC,IAAG;kBAC/D,cAAA,MAACpB;YAAMqB,SAAQ;;gBACVb,sBAAQ,MAACN;;wBAAMM;wBAAM;;qBAAW;8BACjC,KAACP;oBACGqB,YAAY;oBACZC,OAAOb,KAAKI,OAAOC,UAAU,CAACT,GAAG;oBACjCG,UAAUE;oBACVJ,MAAMA;oBACNiB,cAAYhB,kBAAAA,mBAAAA,QAASF;oBACrBmB,YAAYlB,KAAKmB,SAAS;;;;;AAK9C,EAAE"}
+{"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":["createStyles","Grid","Group","Select","Text","TableComponentsOrder","useTable","useStyles","theme","root","wrapper","label","TablePredicate","id","data","classNames","styles","unstyled","others","classes","name","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","Col","span","order","Predicate","py","className","spacing","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;;AAAA,SAAQA,YAAY,EAAgBC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAyBC,IAAI,QAAO,gBAAgB;AAG3G,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAExC,IAAMC,YAAYP,aAAa,SAACQ;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS,CAAC;QACVC,OAAO,CAAC;IACZ;;AAqBA,OAAO,IAAMC,iBAAyD;QAClEC,YAAAA,IACAC,cAAAA,MACAH,eAAAA,OACAI,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QANHL;QACAC;QACAH;QACAI;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWZ,UAAU,MAAM;QAACa,MAAM;QAAkBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAAhFE;IACP,IAAyBb,YAAAA,YAAlBe,WAAkBf,UAAlBe,UAAUC,OAAQhB,UAARgB;IAEjB,IAAMC,WAAW,SAACC;QACdF,KAAKG,cAAc,cAAc,wCAAIH,KAAKI,OAAOC,aAAY,qBAACd,IAAKW;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,KAACpB,KAAK2B;QAAIC,MAAK;QAAUC,OAAOzB,qBAAqB0B;QAAWC,IAAG;QAAKC,WAAWd,QAAQV;OAAUS;kBACjG,cAAA,MAAChB;YAAMgC,SAAQ;YAAKD,WAAWd,QAAQT;;gBAClCC,sBAAQ,MAACP;oBAAK6B,WAAWd,QAAQR;;wBAAQA;wBAAM;;qBAAW;8BAC3D,KAACR;oBACGgC,YAAY;oBACZC,OAAOd,KAAKI,OAAOC,UAAU,CAACd,GAAG;oBACjCQ,UAAUE;oBACVT,MAAMA;oBACNuB,cAAY1B,kBAAAA,mBAAAA,QAASE;oBACrByB,YAAYxB,KAAKyB,SAAS;;;;;AAK9C,EAAE"}

package/dist/esm/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/esm/components/table/Th.js

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

package/dist/esm/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":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","fontWeight","padding","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","color","SortingIcons","asc","desc","none","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","py","px","fw","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","onClick","position","noWrap","height"],"mappings":";AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,SAAQC,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAChF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,IAAMC,YAAYN,aAAa,SAACO;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,KAAK3B;IACL4B,MAAM7B;IACN8B,MAAM5B;AACV;AAEA,IAAM6B,gBAAgB;IAClBH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK;QAAMC,eAAAA;IACpB,IAAM,AAACC,UAAWxB,YAAXwB;IACP,IAAMC,OAAOF,OAAOG,OAAOC;IAC3B,IAAMpB,QAAQkB,SAAS3B,oBAAoB2B,OAAOA,OAAOG;IAEzD,IAAIL,OAAOM,eAAe;QACtB,OAAO;IACX;IAEA,IAAI,CAACN,OAAOG,OAAOI,cAAc;QAC7B,qBACI,KAAC5B;YAAG6B,WAAWP,QAAQtB;YAAI8B,OAAO;gBAACzB,OAAAA;YAAK;sBACpC,cAAA,KAACX;gBAAK6B,MAAK;gBAAKQ,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BpC,WAAWwB,OAAOG,OAAOU,UAAUb,QAAQA,OAAOc;;;IAInE;IAEA,IAAMC,SAASf,OAAOG,OAAOa;IAC7B,IAAMC,eAAejB,OAAOG,OAAOe,iBAAiB;IACpD,IAAMC,OAAOzB,YAAY,CAACuB,aAAa;IAEvC,qBACI,KAACtC;QAAG6B,WAAWP,QAAQtB;QAAI8B,OAAO;YAACzB,OAAAA;QAAK;QAAGoC,aAAWtB,aAAa,CAACmB,aAAa;kBAC7E,cAAA,KAAC3C;YAAe+C,SAASN;YAAQP,WAAWP,QAAQlB;sBAChD,cAAA,MAACX;gBAAMkD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAClD;wBAAK6B,MAAK;wBAAKU,IAAI;kCACfpC,WAAWwB,OAAOG,OAAOU,UAAUb,QAAQA,OAAOc;;kCAEvD,KAAC5C;kCACG,cAAA,KAACiD;4BAAKK,QAAQ;;;;;;;AAMtC,EAAE"}
+{"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":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","fontWeight","padding","verticalAlign","whiteSpace","control","width","spacing","xs","sm","backgroundColor","colorScheme","colors","gray","color","SortingIcons","asc","desc","none","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","py","px","fw","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","onClick","position","noWrap","height"],"mappings":";AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,SAAQC,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAChF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,IAAMC,YAAYN,aAAa,SAACO;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,KAAK3B;IACL4B,MAAM7B;IACN8B,MAAM5B;AACV;AAEA,IAAM6B,gBAAgB;IAClBH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK;QAAMC,eAAAA;IACpB,IAAM,AAACC,UAAWxB,YAAXwB;IACP,IAAMC,OAAOF,OAAOG,OAAOC;IAC3B,IAAMnB,QAAQiB,SAAS3B,oBAAoB2B,OAAOA,OAAOG;IAEzD,IAAIL,OAAOM,eAAe;QACtB,OAAO;IACX;IAEA,IAAI,CAACN,OAAOG,OAAOI,cAAc;QAC7B,qBACI,KAAC5B;YAAG6B,WAAWP,QAAQtB;YAAI8B,OAAO;gBAACxB,OAAAA;YAAK;sBACpC,cAAA,KAACZ;gBAAK6B,MAAK;gBAAKQ,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BpC,WAAWwB,OAAOG,OAAOU,UAAUb,QAAQA,OAAOc;;;IAInE;IAEA,IAAMC,SAASf,OAAOG,OAAOa;IAC7B,IAAMC,eAAejB,OAAOG,OAAOe,iBAAiB;IACpD,IAAMC,OAAOzB,YAAY,CAACuB,aAAa;IAEvC,qBACI,KAACtC;QAAG6B,WAAWP,QAAQtB;QAAI8B,OAAO;YAACxB,OAAAA;QAAK;QAAGmC,aAAWtB,aAAa,CAACmB,aAAa;kBAC7E,cAAA,KAAC3C;YAAe+C,SAASN;YAAQP,WAAWP,QAAQjB;sBAChD,cAAA,MAACZ;gBAAMkD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAClD;wBAAK6B,MAAK;wBAAKU,IAAI;kCACfpC,WAAWwB,OAAOG,OAAOU,UAAUb,QAAQA,OAAOc;;kCAEvD,KAAC5C;kCACG,cAAA,KAACiD;4BAAKK,QAAQ;;;;;;;AAMtC,EAAE"}

package/dist/esm/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 { type onTableChangeEvent, type InitialTableState, type TableState, type TableProps, type TableLayout, type TableLayoutProps, } from './Table.types';
+export { flexRender as renderTableCell } from '@tanstack/react-table';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/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,EACH,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,gBAAgB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,UAAU,IAAI,eAAe,EAAC,MAAM,uBAAuB,CAAC"}

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

@@ -1,4 +1,5 @@
 export * from "./Table";
 export { useTable } from "./TableContext";
+export { flexRender as renderTableCell } from "@tanstack/react-table";
 
 //# sourceMappingURL=index.js.map

package/dist/esm/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":"AAAA,cAAc,UAAU;AACxB,SAAQA,QAAQ,QAAO,iBAAiB"}
+{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {useTable} from './TableContext';\nexport {\n    type onTableChangeEvent,\n    type InitialTableState,\n    type TableState,\n    type TableProps,\n    type TableLayout,\n    type TableLayoutProps,\n} from './Table.types';\nexport {flexRender as renderTableCell} from '@tanstack/react-table';\n"],"names":["useTable","flexRender","renderTableCell"],"mappings":"AAAA,cAAc,UAAU;AACxB,SAAQA,QAAQ,QAAO,iBAAiB;AASxC,SAAQC,cAAcC,eAAe,QAAO,wBAAwB"}

package/dist/esm/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/esm/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"}

package/dist/esm/components/table/layouts/RowLayout.js

@@ -0,0 +1,146 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ListSize16Px } from "@coveord/plasma-react-icons";
+import { Box, Collapse, createStyles } from "@mantine/core";
+import { flexRender } from "@tanstack/react-table";
+import { defaultColumnSizing } from "@tanstack/table-core";
+import { Fragment } from "react";
+import { TableCollapsibleColumn } from "../TableCollapsibleColumn";
+import { useTable } from "../TableContext";
+import { TableLoading } from "../TableLoading";
+import { Th } from "../Th";
+var useStyles = createStyles(function(theme, param) {
+    var multiRowSelectionEnabled = param.multiRowSelectionEnabled, disableRowSelection = param.disableRowSelection;
+    var rowBackgroundColor = theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors[theme.primaryColor][0];
+    return {
+        headerColumns: {
+            "& th:first-of-type > *": {
+                paddingLeft: theme.spacing.xl
+            },
+            "& input[type=checkbox]": {
+                backgroundColor: disableRowSelection ? "".concat(theme.colors.gray[2]) : undefined,
+                borderColor: disableRowSelection ? "".concat(theme.colors.gray[3]) : "".concat(theme.colors.gray[4]),
+                pointerEvents: disableRowSelection ? "none" : "auto",
+                cursor: disableRowSelection ? "not-allowed" : "default",
+                "& + svg": {
+                    color: disableRowSelection ? "".concat(theme.colors.gray[5]) : "inherit"
+                }
+            }
+        },
+        rowSelected: {
+            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor
+        },
+        rowUnselectable: {
+            "& input[type=checkbox]": {
+                backgroundColor: "".concat(theme.colors.gray[2]),
+                borderColor: "".concat(theme.colors.gray[3]),
+                pointerEvents: "none",
+                cursor: "not-allowed",
+                "&:checked + svg": {
+                    color: "".concat(theme.colors.gray[5])
+                }
+            }
+        },
+        rowCollapsibleButtonCell: {
+            textAlign: "right",
+            padding: "calc(".concat(theme.spacing.xs, "/2) ").concat(theme.spacing.sm, " !important")
+        },
+        row: {
+            "&:hover": {
+                backgroundColor: rowBackgroundColor
+            }
+        }
+    };
+});
+var RowLayoutHeader = function(param) {
+    var table = param.table;
+    var _useTable = useTable(), multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, disableRowSelection = _useTable.disableRowSelection;
+    var classes = useStyles({
+        disableRowSelection: disableRowSelection,
+        multiRowSelectionEnabled: multiRowSelectionEnabled
+    }).classes;
+    var headers = table.getHeaderGroups().map(function(headerGroup) {
+        return /*#__PURE__*/ _jsx("tr", {
+            className: classes.headerColumns,
+            children: headerGroup.headers.map(function(columnHeader) {
+                return /*#__PURE__*/ _jsx(Th, {
+                    header: columnHeader
+                }, columnHeader.id);
+            })
+        }, headerGroup.id);
+    });
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: headers
+    });
+};
+var RowLayoutBody = function(param) {
+    var table = param.table, doubleClickAction = param.doubleClickAction, getExpandChildren = param.getExpandChildren, loading = param.loading;
+    var _useTable = useTable(), multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, disableRowSelection = _useTable.disableRowSelection;
+    var _useStyles = useStyles({
+        disableRowSelection: disableRowSelection,
+        multiRowSelectionEnabled: multiRowSelectionEnabled
+    }), classes = _useStyles.classes, cx = _useStyles.cx;
+    var rows = table.getRowModel().rows.map(function(row) {
+        var _getExpandChildren;
+        var rowChildren = (_getExpandChildren = getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original)) !== null && _getExpandChildren !== void 0 ? _getExpandChildren : null;
+        var isSelected = !!row.getIsSelected();
+        var _obj;
+        return /*#__PURE__*/ _jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx("tr", {
+                    onClick: function() {
+                        return disableRowSelection ? undefined : row.toggleSelected();
+                    },
+                    onDoubleClick: function() {
+                        return doubleClickAction === null || doubleClickAction === void 0 ? void 0 : doubleClickAction(row.original);
+                    },
+                    className: cx(classes.row, (_obj = {}, _define_property(_obj, classes.rowSelected, isSelected), _define_property(_obj, classes.rowUnselectable, disableRowSelection), _obj)),
+                    "aria-selected": isSelected,
+                    children: row.getVisibleCells().map(function(cell) {
+                        var size = cell.column.getSize();
+                        var width = size !== defaultColumnSizing.size ? size : undefined;
+                        return /*#__PURE__*/ _jsx("td", {
+                            style: {
+                                width: width
+                            },
+                            className: cx(_define_property({}, classes.rowCollapsibleButtonCell, cell.column.id === TableCollapsibleColumn.id)),
+                            children: /*#__PURE__*/ _jsx(TableLoading, {
+                                visible: loading,
+                                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                            })
+                        }, cell.id);
+                    })
+                }),
+                rowChildren ? /*#__PURE__*/ _jsx("tr", {
+                    children: /*#__PURE__*/ _jsx("td", {
+                        colSpan: table.getAllColumns().length,
+                        style: {
+                            padding: 0,
+                            borderTop: row.getIsExpanded() ? undefined : "none",
+                            borderBottom: row.getIsExpanded() ? undefined : "none"
+                        },
+                        children: /*#__PURE__*/ _jsx(Collapse, {
+                            in: row.getIsExpanded(),
+                            children: /*#__PURE__*/ _jsx(Box, {
+                                px: "sm",
+                                py: "xs",
+                                children: rowChildren
+                            })
+                        })
+                    })
+                }) : null
+            ]
+        }, row.id);
+    });
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: rows
+    });
+};
+export var RowLayout = {
+    name: "Rows",
+    icon: ListSize16Px,
+    Header: RowLayoutHeader,
+    Body: RowLayoutBody
+};
+
+//# sourceMappingURL=RowLayout.js.map