@coveord/plasma-mantine 53.1.4 → 54.0.1

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {\n    BoxProps,\n    Button,\n    Checkbox,\n    Divider,\n    factory,\n    Factory,\n    Grid,\n    Popover,\n    ScrollArea,\n    Stack,\n    Tooltip,\n    useProps,\n} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {ReactNode} from 'react';\n\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableColumnsSelectorStylesNames = 'columnSelector' | 'columnSelectorWrapper';\n\nexport interface TableColumnsSelectorProps extends BoxProps, CompoundStylesApiProps<TableColumnsSelectorFactory> {\n    /**\n     * The label of the button\n     * @default 'Edit columns'\n     */\n    label?: ReactNode;\n    /**\n     * The style variant of the button\n     * @default 'outline'\n     */\n    buttonVariant?: string;\n    /**\n     * An array of column ids that the user cannot hide. This is useful for columns that are required for the table to function properly.\n     * @default []\n     */\n    nonHideableColumns?: string[];\n    /**\n     * Whether the count of visible columns is shown in the button label.\n     * @default false\n     */\n    showVisibleCountLabel?: boolean;\n    /**\n     * The maximum number of columns that can be selected at the same time.\n     * If defined a footer will render with the remaining number of columns that can be selected.\n     */\n    maxSelectableColumns?: number;\n    /**\n     * A dictionary of column ids and names to use for the checkbox labels.\n     */\n    columnNames: Record<string, string>;\n    /**\n     * The content to display in the footer when maxSelectableColumns is defined.\n     */\n    footer?: ReactNode;\n    /**\n     * The tooltip to display when the user hovers over a disabled checkbox.\n     * @default 'You have reached the maximum display limit.'\n     */\n    limitReachedTooltip?: string;\n}\n\nexport type TableColumnsSelectorFactory = Factory<{\n    props: TableColumnsSelectorProps;\n    ref: HTMLDivElement;\n    stylesNames: TableColumnsSelectorStylesNames;\n    compound: true;\n}>;\n\nconst COLUMNS_IDS_TO_EXCLUDE = ['collapsible', 'select'];\n\nconst defaultProps: Partial<TableColumnsSelectorProps> = {\n    label: 'Edit columns',\n    buttonVariant: 'outline',\n    limitReachedTooltip: 'You have reached the maximum display limit.',\n    showVisibleCountLabel: false,\n};\n\nexport const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {\n        label,\n        buttonVariant,\n        showVisibleCountLabel,\n        nonHideableColumns = [],\n        maxSelectableColumns,\n        footer,\n        limitReachedTooltip,\n        columnNames,\n        classNames,\n        className,\n        styles,\n        style,\n        vars,\n        ...others\n    } = useProps('TableColumnsSelector', defaultProps, props);\n    const {getAllColumns} = useTable();\n\n    const columnsToExclude = [...nonHideableColumns, ...COLUMNS_IDS_TO_EXCLUDE];\n\n    const filteredColumns = getAllColumns().filter((column) => !columnsToExclude.includes(column.id));\n\n    const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n    if (filteredColumns.length <= 0) {\n        return null;\n    }\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.ColumnsSelector}\n            {...ctx.getStyles('columnSelector', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Popover withinPortal position=\"bottom\" shadow=\"md\">\n                <Popover.Target>\n                    <Button variant={buttonVariant}>{`${label}${\n                        showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''\n                    }`}</Button>\n                </Popover.Target>\n                <Popover.Dropdown miw={240}>\n                    <ScrollArea.Autosize mah={154}>\n                        <Stack {...ctx.getStyles('columnSelectorWrapper', stylesApiProps)}>\n                            {filteredColumns.map((column) => {\n                                const isDisabled =\n                                    selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible();\n                                return (\n                                    <Tooltip label={limitReachedTooltip} disabled={!isDisabled} position=\"left\">\n                                        <div>\n                                            <Checkbox\n                                                key={column.id}\n                                                label={columnNames?.[column.id] || column.id}\n                                                name={column.id}\n                                                checked={column.getIsVisible()}\n                                                disabled={isDisabled}\n                                                onChange={column.getToggleVisibilityHandler()}\n                                            />\n                                        </div>\n                                    </Tooltip>\n                                );\n                            })}\n                        </Stack>\n                    </ScrollArea.Autosize>\n                    {maxSelectableColumns && (\n                        <>\n                            <Divider mb=\"xs\" mt=\"sm\" />\n                            {footer}\n                        </>\n                    )}\n                </Popover.Dropdown>\n            </Popover>\n        </Grid.Col>\n    );\n});\n"],"names":["Button","Checkbox","Divider","factory","Grid","Popover","ScrollArea","Stack","Tooltip","useProps","TableComponentsOrder","useTable","useTableStyles","COLUMNS_IDS_TO_EXCLUDE","defaultProps","label","buttonVariant","limitReachedTooltip","showVisibleCountLabel","TableColumnsSelector","props","ref","ctx","nonHideableColumns","maxSelectableColumns","footer","columnNames","classNames","className","styles","style","vars","others","getAllColumns","columnsToExclude","filteredColumns","filter","column","includes","id","selectedColumnsCount","getIsVisible","length","stylesApiProps","Col","span","order","ColumnsSelector","getStyles","withinPortal","position","shadow","Target","variant","Dropdown","miw","Autosize","mah","map","isDisabled","disabled","div","name","checked","onChange","getToggleVisibilityHandler","mb","mt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAEIA,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,OAAO,EAEPC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,QAAQ,QACL,gBAAgB;AAIvB,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,QAAQ,EAAEC,cAAc,QAAO,kBAAkB;AAoDzD,MAAMC,yBAAyB;IAAC;IAAe;CAAS;AAExD,MAAMC,eAAmD;IACrDC,OAAO;IACPC,eAAe;IACfC,qBAAqB;IACrBC,uBAAuB;AAC3B;AAEA,OAAO,MAAMC,uBAAuBhB,QAAqC,CAACiB,OAAOC;IAC7E,MAAMC,MAAMV;IACZ,MAAM,EACFG,KAAK,EACLC,aAAa,EACbE,qBAAqB,EACrBK,qBAAqB,EAAE,EACvBC,oBAAoB,EACpBC,MAAM,EACNR,mBAAmB,EACnBS,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJ,GAAGC,QACN,GAAGvB,SAAS,wBAAwBK,cAAcM;IACnD,MAAM,EAACa,aAAa,EAAC,GAAGtB;IAExB,MAAMuB,mBAAmB;WAAIX;WAAuBV;KAAuB;IAE3E,MAAMsB,kBAAkBF,gBAAgBG,MAAM,CAAC,CAACC,SAAW,CAACH,iBAAiBI,QAAQ,CAACD,OAAOE,EAAE;IAE/F,MAAMC,uBAAuBL,gBAAgBC,MAAM,CAAC,CAACC,SAAWA,OAAOI,YAAY,IAAIC,MAAM;IAE7F,IAAIP,gBAAgBO,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,MAAMC,iBAAiB;QAAChB;QAAYE;IAAM;IAE1C,qBACI,KAACzB,KAAKwC,GAAG;QACLC,MAAK;QACLC,OAAOpC,qBAAqBqC,eAAe;QAC1C,GAAGzB,IAAI0B,SAAS,CAAC,kBAAkB;YAACpB;YAAWE;YAAO,GAAGa,cAAc;QAAA,EAAE;QACzE,GAAGX,MAAM;kBAEV,cAAA,MAAC3B;YAAQ4C,YAAY;YAACC,UAAS;YAASC,QAAO;;8BAC3C,KAAC9C,QAAQ+C,MAAM;8BACX,cAAA,KAACpD;wBAAOqD,SAASrC;kCAAgB,CAAC,EAAED,MAAM,EACtCG,wBAAwB,CAAC,EAAE,EAAEsB,qBAAqB,CAAC,CAAC,GAAG,GAC1D,CAAC;;;8BAEN,MAACnC,QAAQiD,QAAQ;oBAACC,KAAK;;sCACnB,KAACjD,WAAWkD,QAAQ;4BAACC,KAAK;sCACtB,cAAA,KAAClD;gCAAO,GAAGe,IAAI0B,SAAS,CAAC,yBAAyBL,eAAe;0CAC5DR,gBAAgBuB,GAAG,CAAC,CAACrB;oCAClB,MAAMsB,aACFnB,wBAAwBhB,wBAAwB,CAACa,OAAOI,YAAY;oCACxE,qBACI,KAACjC;wCAAQO,OAAOE;wCAAqB2C,UAAU,CAACD;wCAAYT,UAAS;kDACjE,cAAA,KAACW;sDACG,cAAA,KAAC5D;gDAEGc,OAAOW,aAAa,CAACW,OAAOE,EAAE,CAAC,IAAIF,OAAOE,EAAE;gDAC5CuB,MAAMzB,OAAOE,EAAE;gDACfwB,SAAS1B,OAAOI,YAAY;gDAC5BmB,UAAUD;gDACVK,UAAU3B,OAAO4B,0BAA0B;+CALtC5B,OAAOE,EAAE;;;gCAUlC;;;wBAGPf,sCACG;;8CACI,KAACtB;oCAAQgE,IAAG;oCAAKC,IAAG;;gCACnB1C;;;;;;;;AAO7B,GAAG"}
+{"version":3,"sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {\n    BoxProps,\n    Button,\n    Checkbox,\n    CompoundStylesApiProps,\n    Divider,\n    factory,\n    Factory,\n    Grid,\n    Popover,\n    ScrollArea,\n    Stack,\n    Tooltip,\n    useProps,\n} from '@mantine/core';\nimport {flexRender, Header} from '@tanstack/react-table';\nimport {ReactNode} from 'react';\nimport {TableComponentsOrder} from '../Table';\nimport {useTableContext} from '../TableContext';\n\nexport type TableColumnsSelectorStylesNames = 'columnSelector' | 'columnSelectorWrapper';\n\nexport interface TableColumnsSelectorProps extends BoxProps, CompoundStylesApiProps<TableColumnsSelectorFactory> {\n    /**\n     * The label of the button\n     * @default 'Edit columns'\n     */\n    label?: ReactNode;\n    /**\n     * The style variant of the button\n     * @default 'outline'\n     */\n    buttonVariant?: string;\n    /**\n     * Whether the count of visible columns is shown in the button label.\n     * @default false\n     */\n    showVisibleCountLabel?: boolean;\n    /**\n     * The maximum number of columns that can be selected at the same time.\n     * If defined a footer will render with the remaining number of columns that can be selected.\n     */\n    maxSelectableColumns?: number;\n    /**\n     * The content to display in the footer when maxSelectableColumns is defined.\n     */\n    footer?: ReactNode;\n    /**\n     * The tooltip to display when the user hovers over a disabled checkbox because of the limit.\n     * @default 'You have reached the maximum display limit.'\n     */\n    limitReachedTooltip?: string;\n    /**\n     * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.\n     * @default 'This column is always visible.'\n     */\n    alwaysVisibleTooltip?: string;\n}\n\nexport type TableColumnsSelectorFactory = Factory<{\n    props: TableColumnsSelectorProps;\n    ref: HTMLDivElement;\n    stylesNames: TableColumnsSelectorStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableColumnsSelectorProps> = {\n    label: 'Edit columns',\n    buttonVariant: 'outline',\n    limitReachedTooltip: 'You have reached the maximum display limit.',\n    alwaysVisibleTooltip: 'This column is always visible.',\n    showVisibleCountLabel: false,\n};\n\nexport const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props, ref) => {\n    const {getStyles} = useTableContext();\n    const {\n        label,\n        buttonVariant,\n        showVisibleCountLabel,\n        maxSelectableColumns,\n        footer,\n        limitReachedTooltip,\n        alwaysVisibleTooltip,\n        classNames,\n        className,\n        styles,\n        style,\n        vars,\n        ...others\n    } = useProps('TableColumnsSelector', defaultProps, props);\n    const {table} = useTableContext();\n\n    const allColumns = table.getAllLeafColumns();\n\n    const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);\n    const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n    if (filteredColumns.length <= 0) {\n        return null;\n    }\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.ColumnsSelector}\n            {...getStyles('columnSelector', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Popover withinPortal position=\"bottom\" shadow=\"md\">\n                <Popover.Target>\n                    <Button variant={buttonVariant}>{`${label}${\n                        showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''\n                    }`}</Button>\n                </Popover.Target>\n                <Popover.Dropdown miw={240}>\n                    <ScrollArea.Autosize mah={154}>\n                        <Stack {...getStyles('columnSelectorWrapper', stylesApiProps)}>\n                            {filteredColumns.map((column) => {\n                                const alwaysVisible = !column.getCanHide();\n                                const isDisabled =\n                                    (selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible()) ||\n                                    alwaysVisible;\n\n                                return (\n                                    <Tooltip\n                                        label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}\n                                        disabled={!isDisabled}\n                                        position=\"left\"\n                                        key={column.id}\n                                    >\n                                        <div>\n                                            <Checkbox\n                                                key={column.id}\n                                                label={flexRender(column.columnDef.header, {\n                                                    table,\n                                                    column,\n                                                    header: {column} as Header<unknown, unknown>,\n                                                })}\n                                                name={column.id}\n                                                checked={column.getIsVisible() || alwaysVisible}\n                                                disabled={isDisabled}\n                                                onChange={column.getToggleVisibilityHandler()}\n                                            />\n                                        </div>\n                                    </Tooltip>\n                                );\n                            })}\n                        </Stack>\n                    </ScrollArea.Autosize>\n                    {maxSelectableColumns && (\n                        <>\n                            <Divider mb=\"xs\" mt=\"sm\" />\n                            {footer}\n                        </>\n                    )}\n                </Popover.Dropdown>\n            </Popover>\n        </Grid.Col>\n    );\n});\n"],"names":["Button","Checkbox","Divider","factory","Grid","Popover","ScrollArea","Stack","Tooltip","useProps","flexRender","TableComponentsOrder","useTableContext","defaultProps","label","buttonVariant","limitReachedTooltip","alwaysVisibleTooltip","showVisibleCountLabel","TableColumnsSelector","props","ref","getStyles","maxSelectableColumns","footer","classNames","className","styles","style","vars","others","table","allColumns","getAllLeafColumns","filteredColumns","filter","column","columnDef","meta","controlColumn","selectedColumnsCount","getIsVisible","length","stylesApiProps","Col","span","order","ColumnsSelector","withinPortal","position","shadow","Target","variant","Dropdown","miw","Autosize","mah","map","alwaysVisible","getCanHide","isDisabled","disabled","div","header","name","id","checked","onChange","getToggleVisibilityHandler","mb","mt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAEIA,MAAM,EACNC,QAAQ,EAERC,OAAO,EACPC,OAAO,EAEPC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,QAAQ,QACL,gBAAgB;AACvB,SAAQC,UAAU,QAAe,wBAAwB;AAEzD,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,eAAe,QAAO,kBAAkB;AAgDhD,MAAMC,eAAmD;IACrDC,OAAO;IACPC,eAAe;IACfC,qBAAqB;IACrBC,sBAAsB;IACtBC,uBAAuB;AAC3B;AAEA,OAAO,MAAMC,uBAAuBhB,QAAqC,CAACiB,OAAOC;IAC7E,MAAM,EAACC,SAAS,EAAC,GAAGV;IACpB,MAAM,EACFE,KAAK,EACLC,aAAa,EACbG,qBAAqB,EACrBK,oBAAoB,EACpBC,MAAM,EACNR,mBAAmB,EACnBC,oBAAoB,EACpBQ,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJ,GAAGC,QACN,GAAGrB,SAAS,wBAAwBI,cAAcO;IACnD,MAAM,EAACW,KAAK,EAAC,GAAGnB;IAEhB,MAAMoB,aAAaD,MAAME,iBAAiB;IAE1C,MAAMC,kBAAkBF,WAAWG,MAAM,CAAC,CAACC,SAAW,CAACA,OAAOC,SAAS,CAACC,IAAI,EAAEC;IAC9E,MAAMC,uBAAuBN,gBAAgBC,MAAM,CAAC,CAACC,SAAWA,OAAOK,YAAY,IAAIC,MAAM;IAE7F,IAAIR,gBAAgBQ,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,MAAMC,iBAAiB;QAAClB;QAAYE;IAAM;IAE1C,qBACI,KAACvB,KAAKwC,GAAG;QACLC,MAAK;QACLC,OAAOnC,qBAAqBoC,eAAe;QAC1C,GAAGzB,UAAU,kBAAkB;YAACI;YAAWE;YAAO,GAAGe,cAAc;QAAA,EAAE;QACrE,GAAGb,MAAM;kBAEV,cAAA,MAACzB;YAAQ2C,YAAY;YAACC,UAAS;YAASC,QAAO;;8BAC3C,KAAC7C,QAAQ8C,MAAM;8BACX,cAAA,KAACnD;wBAAOoD,SAASrC;kCAAgB,CAAC,EAAED,MAAM,EACtCI,wBAAwB,CAAC,EAAE,EAAEsB,qBAAqB,CAAC,CAAC,GAAG,GAC1D,CAAC;;;8BAEN,MAACnC,QAAQgD,QAAQ;oBAACC,KAAK;;sCACnB,KAAChD,WAAWiD,QAAQ;4BAACC,KAAK;sCACtB,cAAA,KAACjD;gCAAO,GAAGe,UAAU,yBAAyBqB,eAAe;0CACxDT,gBAAgBuB,GAAG,CAAC,CAACrB;oCAClB,MAAMsB,gBAAgB,CAACtB,OAAOuB,UAAU;oCACxC,MAAMC,aACF,AAACpB,wBAAwBjB,wBAAwB,CAACa,OAAOK,YAAY,MACrEiB;oCAEJ,qBACI,KAAClD;wCACGM,OAAO4C,gBAAgBzC,uBAAuBD;wCAC9C6C,UAAU,CAACD;wCACXX,UAAS;kDAGT,cAAA,KAACa;sDACG,cAAA,KAAC7D;gDAEGa,OAAOJ,WAAW0B,OAAOC,SAAS,CAAC0B,MAAM,EAAE;oDACvChC;oDACAK;oDACA2B,QAAQ;wDAAC3B;oDAAM;gDACnB;gDACA4B,MAAM5B,OAAO6B,EAAE;gDACfC,SAAS9B,OAAOK,YAAY,MAAMiB;gDAClCG,UAAUD;gDACVO,UAAU/B,OAAOgC,0BAA0B;+CATtChC,OAAO6B,EAAE;;uCAJjB7B,OAAO6B,EAAE;gCAkB1B;;;wBAGP1C,sCACG;;8CACI,KAACrB;oCAAQmE,IAAG;oCAAKC,IAAG;;gCACnB9C;;;;;;;;AAO7B,GAAG"}

package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.d.ts

@@ -1,5 +1,4 @@
-import { BoxProps, Factory } from '@mantine/core';
-import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { BoxProps, CompoundStylesApiProps, Factory } from '@mantine/core';
 import { DateRangePickerInlineCalendarProps, DateRangePickerPreset } from '../../date-range-picker';
 export type TableDateRangePickerStylesNames = 'dateRangeRoot';
 export interface TableDateRangePickerProps extends BoxProps, CompoundStylesApiProps<TableDateRangePickerFactory>, Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {

package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,OAAO,EAA8C,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAI1F,OAAO,EAEH,kCAAkC,EAClC,qBAAqB,EAExB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,+BAA+B,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,yBACb,SAAQ,QAAQ,EACZ,sBAAsB,CAAC,2BAA2B,CAAC,EACnD,IAAI,CAAC,kCAAkC,EAAE,YAAY,GAAG,UAAU,GAAG,oBAAoB,CAAC;IAC9F;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACnD;AAED,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC;IAC9C,KAAK,EAAE,yBAAyB,CAAC;IACjC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,+BAA+B,CAAC;IAC7C,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,oBAAoB;WAVtB,yBAAyB;SAC3B,cAAc;iBACN,+BAA+B;cAClC,IAAI;EA8DhB,CAAC"}
+{"version":3,"file":"TableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAA8C,MAAM,eAAe,CAAC;AAIrH,OAAO,EAEH,kCAAkC,EAClC,qBAAqB,EAExB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,+BAA+B,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,yBACb,SAAQ,QAAQ,EACZ,sBAAsB,CAAC,2BAA2B,CAAC,EACnD,IAAI,CAAC,kCAAkC,EAAE,YAAY,GAAG,UAAU,GAAG,oBAAoB,CAAC;IAC9F;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACnD;AAED,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC;IAC9C,KAAK,EAAE,yBAAyB,CAAC;IACjC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,+BAA+B,CAAC;IAC7C,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,oBAAoB;WAVtB,yBAAyB;SAC3B,cAAc;iBACN,+BAA+B;cAClC,IAAI;EA6DhB,CAAC"}

package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.js

@@ -5,25 +5,24 @@ import dayjs from 'dayjs';
 import { useState } from 'react';
 import { DateRangePickerInlineCalendar } from '../../date-range-picker';
 import { TableComponentsOrder } from '../Table';
-import { useTable, useTableStyles } from '../TableContext';
+import { useTableContext } from '../TableContext';
 const defaultProps = {
     presets: {}
 };
 export const TableDateRangePicker = factory((props, ref)=>{
-    const ctx = useTableStyles();
+    const { store, getStyles } = useTableContext();
     const { presets, rangeCalendarProps, classNames, className, styles, style, vars, ...others } = useProps('PlasmaTableDateRangePicker', defaultProps, props);
     const [opened, setOpened] = useState(false);
-    const { form } = useTable();
     const onApply = (dates)=>{
-        form.setFieldValue('dateRange', dates);
+        store.setDateRange(dates);
         setOpened(false);
     };
     const onCancel = ()=>{
         setOpened(false);
     };
     const formatDate = (date)=>dayjs(date).format('MMM DD, YYYY');
-    const formattedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
-    const dateRangeInitialized = form.values.dateRange.every((date)=>date instanceof Date);
+    const formattedRange = `${formatDate(store.state.dateRange[0])} - ${formatDate(store.state.dateRange[1])}`;
+    const dateRangeInitialized = store.state.dateRange.every((date)=>date instanceof Date);
     const stylesApiProps = {
         classNames,
         styles
@@ -32,7 +31,7 @@ export const TableDateRangePicker = factory((props, ref)=>{
         span: "content",
         order: TableComponentsOrder.DateRangePicker,
         ref: ref,
-        ...ctx.getStyles('dateRangeRoot', {
+        ...getStyles('dateRangeRoot', {
             className,
             style,
             ...stylesApiProps
@@ -41,6 +40,7 @@ export const TableDateRangePicker = factory((props, ref)=>{
         children: /*#__PURE__*/ _jsxs(Popover, {
             withinPortal: true,
             opened: opened,
+            onChange: setOpened,
             children: [
                 /*#__PURE__*/ _jsx(Popover.Target, {
                     children: /*#__PURE__*/ _jsx(InputBase, {
@@ -56,7 +56,7 @@ export const TableDateRangePicker = factory((props, ref)=>{
                 /*#__PURE__*/ _jsx(Popover.Dropdown, {
                     p: 0,
                     children: /*#__PURE__*/ _jsx(DateRangePickerInlineCalendar, {
-                        initialRange: form.values.dateRange,
+                        initialRange: store.state.dateRange,
                         onApply: onApply,
                         onCancel: onCancel,
                         presets: presets,

package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize16Px} from '@coveord/plasma-react-icons';\nimport {BoxProps, Factory, Grid, InputBase, Popover, factory, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport dayjs from 'dayjs';\n\nimport {useState} from 'react';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n    DateRangePickerValue,\n} from '../../date-range-picker';\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableDateRangePickerStylesNames = 'dateRangeRoot';\n\nexport interface TableDateRangePickerProps\n    extends BoxProps,\n        CompoundStylesApiProps<TableDateRangePickerFactory>,\n        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 type TableDateRangePickerFactory = Factory<{\n    props: TableDateRangePickerProps;\n    ref: HTMLDivElement;\n    stylesNames: TableDateRangePickerStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableDateRangePickerProps> = {\n    presets: {},\n};\n\nexport const TableDateRangePicker = factory<TableDateRangePickerFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {presets, rangeCalendarProps, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableDateRangePicker',\n        defaultProps,\n        props,\n    );\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formattedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n    const dateRangeInitialized = form.values.dateRange.every((date) => date instanceof Date);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.DateRangePicker}\n            ref={ref}\n            {...ctx.getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Popover withinPortal opened={opened}>\n                <Popover.Target>\n                    <InputBase\n                        component=\"button\"\n                        leftSection={<CalendarSize16Px height={16} />}\n                        miw={220}\n                        onClick={() => setOpened(true)}\n                    >\n                        {dateRangeInitialized ? formattedRange : 'Select date range'}\n                    </InputBase>\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        </Grid.Col>\n    );\n});\n"],"names":["CalendarSize16Px","Grid","InputBase","Popover","factory","useProps","dayjs","useState","DateRangePickerInlineCalendar","TableComponentsOrder","useTable","useTableStyles","defaultProps","presets","TableDateRangePicker","props","ref","ctx","rangeCalendarProps","classNames","className","styles","style","vars","others","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formattedRange","values","dateRange","dateRangeInitialized","every","Date","stylesApiProps","Col","span","order","DateRangePicker","getStyles","withinPortal","Target","component","leftSection","height","miw","onClick","Dropdown","p","initialRange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAA2BC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAEC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AAE7F,OAAOC,WAAW,QAAQ;AAE1B,SAAQC,QAAQ,QAAO,QAAQ;AAC/B,SACIC,6BAA6B,QAI1B,0BAA0B;AACjC,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,QAAQ,EAAEC,cAAc,QAAO,kBAAkB;AA6BzD,MAAMC,eAAmD;IACrDC,SAAS,CAAC;AACd;AAEA,OAAO,MAAMC,uBAAuBV,QAAqC,CAACW,OAAOC;IAC7E,MAAMC,MAAMN;IACZ,MAAM,EAACE,OAAO,EAAEK,kBAAkB,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGnB,SACzF,8BACAO,cACAG;IAEJ,MAAM,CAACU,QAAQC,UAAU,GAAGnB,SAAS;IACrC,MAAM,EAACoB,IAAI,EAAC,GAAGjB;IAEf,MAAMkB,UAAU,CAACC;QACbF,KAAKG,aAAa,CAAC,aAAaD;QAChCH,UAAU;IACd;IACA,MAAMK,WAAW;QACbL,UAAU;IACd;IAEA,MAAMM,aAAa,CAACC,OAAe3B,MAAM2B,MAAMC,MAAM,CAAC;IACtD,MAAMC,iBAAiB,CAAC,EAAEH,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE,EAAE,GAAG,EAAEL,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE,EAAE,CAAC;IAC1G,MAAMC,uBAAuBX,KAAKS,MAAM,CAACC,SAAS,CAACE,KAAK,CAAC,CAACN,OAASA,gBAAgBO;IAEnF,MAAMC,iBAAiB;QAACtB;QAAYE;IAAM;IAE1C,qBACI,KAACpB,KAAKyC,GAAG;QACLC,MAAK;QACLC,OAAOnC,qBAAqBoC,eAAe;QAC3C7B,KAAKA;QACJ,GAAGC,IAAI6B,SAAS,CAAC,iBAAiB;YAAC1B;YAAWE;YAAO,GAAGmB,cAAc;QAAA,EAAE;QACxE,GAAGjB,MAAM;kBAEV,cAAA,MAACrB;YAAQ4C,YAAY;YAACtB,QAAQA;;8BAC1B,KAACtB,QAAQ6C,MAAM;8BACX,cAAA,KAAC9C;wBACG+C,WAAU;wBACVC,2BAAa,KAAClD;4BAAiBmD,QAAQ;;wBACvCC,KAAK;wBACLC,SAAS,IAAM3B,UAAU;kCAExBY,uBAAuBH,iBAAiB;;;8BAGjD,KAAChC,QAAQmD,QAAQ;oBAACC,GAAG;8BACjB,cAAA,KAAC/C;wBACGgD,cAAc7B,KAAKS,MAAM,CAACC,SAAS;wBACnCT,SAASA;wBACTG,UAAUA;wBACVlB,SAASA;wBACTK,oBAAoBA;;;;;;AAM5C,GAAG"}
+{"version":3,"sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize16Px} from '@coveord/plasma-react-icons';\nimport {BoxProps, CompoundStylesApiProps, Factory, Grid, InputBase, Popover, factory, useProps} from '@mantine/core';\nimport dayjs from 'dayjs';\n\nimport {useState} from 'react';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n    DateRangePickerValue,\n} from '../../date-range-picker';\nimport {TableComponentsOrder} from '../Table';\nimport {useTableContext} from '../TableContext';\n\nexport type TableDateRangePickerStylesNames = 'dateRangeRoot';\n\nexport interface TableDateRangePickerProps\n    extends BoxProps,\n        CompoundStylesApiProps<TableDateRangePickerFactory>,\n        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 type TableDateRangePickerFactory = Factory<{\n    props: TableDateRangePickerProps;\n    ref: HTMLDivElement;\n    stylesNames: TableDateRangePickerStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableDateRangePickerProps> = {\n    presets: {},\n};\n\nexport const TableDateRangePicker = factory<TableDateRangePickerFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {presets, rangeCalendarProps, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableDateRangePicker',\n        defaultProps,\n        props,\n    );\n    const [opened, setOpened] = useState(false);\n\n    const onApply = (dates: DateRangePickerValue) => {\n        store.setDateRange(dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formattedRange = `${formatDate(store.state.dateRange[0])} - ${formatDate(store.state.dateRange[1])}`;\n    const dateRangeInitialized = store.state.dateRange.every((date) => date instanceof Date);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.DateRangePicker}\n            ref={ref}\n            {...getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Popover withinPortal opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <InputBase\n                        component=\"button\"\n                        leftSection={<CalendarSize16Px height={16} />}\n                        miw={220}\n                        onClick={() => setOpened(true)}\n                    >\n                        {dateRangeInitialized ? formattedRange : 'Select date range'}\n                    </InputBase>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={store.state.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </Grid.Col>\n    );\n});\n"],"names":["CalendarSize16Px","Grid","InputBase","Popover","factory","useProps","dayjs","useState","DateRangePickerInlineCalendar","TableComponentsOrder","useTableContext","defaultProps","presets","TableDateRangePicker","props","ref","store","getStyles","rangeCalendarProps","classNames","className","styles","style","vars","others","opened","setOpened","onApply","dates","setDateRange","onCancel","formatDate","date","format","formattedRange","state","dateRange","dateRangeInitialized","every","Date","stylesApiProps","Col","span","order","DateRangePicker","withinPortal","onChange","Target","component","leftSection","height","miw","onClick","Dropdown","p","initialRange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAmDC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAEC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AACrH,OAAOC,WAAW,QAAQ;AAE1B,SAAQC,QAAQ,QAAO,QAAQ;AAC/B,SACIC,6BAA6B,QAI1B,0BAA0B;AACjC,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,eAAe,QAAO,kBAAkB;AA6BhD,MAAMC,eAAmD;IACrDC,SAAS,CAAC;AACd;AAEA,OAAO,MAAMC,uBAAuBT,QAAqC,CAACU,OAAOC;IAC7E,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGP;IAC3B,MAAM,EAACE,OAAO,EAAEM,kBAAkB,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGnB,SACzF,8BACAM,cACAG;IAEJ,MAAM,CAACW,QAAQC,UAAU,GAAGnB,SAAS;IAErC,MAAMoB,UAAU,CAACC;QACbZ,MAAMa,YAAY,CAACD;QACnBF,UAAU;IACd;IACA,MAAMI,WAAW;QACbJ,UAAU;IACd;IAEA,MAAMK,aAAa,CAACC,OAAe1B,MAAM0B,MAAMC,MAAM,CAAC;IACtD,MAAMC,iBAAiB,CAAC,EAAEH,WAAWf,MAAMmB,KAAK,CAACC,SAAS,CAAC,EAAE,EAAE,GAAG,EAAEL,WAAWf,MAAMmB,KAAK,CAACC,SAAS,CAAC,EAAE,EAAE,CAAC;IAC1G,MAAMC,uBAAuBrB,MAAMmB,KAAK,CAACC,SAAS,CAACE,KAAK,CAAC,CAACN,OAASA,gBAAgBO;IAEnF,MAAMC,iBAAiB;QAACrB;QAAYE;IAAM;IAE1C,qBACI,KAACpB,KAAKwC,GAAG;QACLC,MAAK;QACLC,OAAOlC,qBAAqBmC,eAAe;QAC3C7B,KAAKA;QACJ,GAAGE,UAAU,iBAAiB;YAACG;YAAWE;YAAO,GAAGkB,cAAc;QAAA,EAAE;QACpE,GAAGhB,MAAM;kBAEV,cAAA,MAACrB;YAAQ0C,YAAY;YAACpB,QAAQA;YAAQqB,UAAUpB;;8BAC5C,KAACvB,QAAQ4C,MAAM;8BACX,cAAA,KAAC7C;wBACG8C,WAAU;wBACVC,2BAAa,KAACjD;4BAAiBkD,QAAQ;;wBACvCC,KAAK;wBACLC,SAAS,IAAM1B,UAAU;kCAExBW,uBAAuBH,iBAAiB;;;8BAGjD,KAAC/B,QAAQkD,QAAQ;oBAACC,GAAG;8BACjB,cAAA,KAAC9C;wBACG+C,cAAcvC,MAAMmB,KAAK,CAACC,SAAS;wBACnCT,SAASA;wBACTG,UAAUA;wBACVlB,SAASA;wBACTM,oBAAoBA;;;;;;AAM5C,GAAG"}

package/dist/esm/components/table/table-filter/TableFilter.d.ts

@@ -1,5 +1,4 @@
-import { BoxProps, Factory } from '@mantine/core';
-import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { BoxProps, CompoundStylesApiProps, Factory } from '@mantine/core';
 export type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';
 export interface TableFilterProps extends BoxProps, CompoundStylesApiProps<TableFilterFactory> {
     /**

package/dist/esm/components/table/table-filter/TableFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,QAAQ,EAAW,OAAO,EAA4B,MAAM,eAAe,CAAC;AAChG,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAO1F,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,eAAe,GAAG,aAAa,CAAC;AAEpF,MAAM,WAAW,gBAAiB,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,kBAAkB,CAAC;IAC1F;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,WAAW;WAVb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EAsEhB,CAAC"}
+{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAAqC,MAAM,eAAe,CAAC;AAOxH,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,eAAe,GAAG,aAAa,CAAC;AAEpF,MAAM,WAAW,gBAAiB,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,kBAAkB,CAAC;IAC1F;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,WAAW;WAVb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EAiEhB,CAAC"}

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

@@ -1,28 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CrossSize16Px, FilterSize16Px } from '@coveord/plasma-react-icons';
-import { ActionIcon, factory, Grid, TextInput, useProps } from '@mantine/core';
+import { ActionIcon, Grid, TextInput, factory, useProps } from '@mantine/core';
 import { useDebouncedValue, useDidUpdate } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
 import { TableComponentsOrder } from '../Table';
-import { useTable, useTableStyles } from '../TableContext';
+import { useTableContext } from '../TableContext';
 const defaultProps = {
     placeholder: 'Search by any field'
 };
 export const TableFilter = factory((props, ref)=>{
-    const ctx = useTableStyles();
+    const { store, getStyles } = useTableContext();
     const { placeholder, classNames, className, styles, style, vars, ...others } = useProps('PlasmaTableFilter', defaultProps, props);
-    const { state, setState } = useTable();
-    const [filter, setFilter] = useState(state.globalFilter);
+    const [filter, setFilter] = useState(store.state.globalFilter);
     const [debounced, cancel] = useDebouncedValue(filter, 300);
     useDidUpdate(()=>{
-        setState((prevState)=>({
-                ...prevState,
-                pagination: prevState.pagination ? {
-                    pageIndex: 0,
-                    pageSize: prevState.pagination.pageSize
-                } : prevState.pagination,
-                globalFilter: debounced
-            }));
+        store.setGlobalFilter(debounced);
+        store.setPagination({
+            pageIndex: 0,
+            pageSize: store.state.pagination.pageSize
+        });
         return cancel;
     }, [
         debounced
@@ -35,9 +31,9 @@ export const TableFilter = factory((props, ref)=>{
         setFilter('');
     };
     useEffect(()=>{
-        setFilter(state.globalFilter);
+        setFilter(store.state.globalFilter);
     }, [
-        state.globalFilter
+        store.state.globalFilter
     ]);
     const stylesApiProps = {
         classNames,
@@ -47,14 +43,14 @@ export const TableFilter = factory((props, ref)=>{
         span: "content",
         order: TableComponentsOrder.Filter,
         ref: ref,
-        ...ctx.getStyles('filterRoot', {
+        ...getStyles('filterRoot', {
             className,
             style,
             ...stylesApiProps
         }),
         ...others,
         children: /*#__PURE__*/ _jsx(TextInput, {
-            ...ctx.getStyles('filterWrapper', stylesApiProps),
+            ...getStyles('filterWrapper', stylesApiProps),
             placeholder: placeholder,
             autoComplete: "off",
             rightSection: filter ? /*#__PURE__*/ _jsx(ActionIcon, {
@@ -66,7 +62,7 @@ export const TableFilter = factory((props, ref)=>{
                 })
             }) : /*#__PURE__*/ _jsx(FilterSize16Px, {
                 height: 16,
-                ...ctx.getStyles('filterEmpty', stylesApiProps)
+                ...getStyles('filterEmpty', stylesApiProps)
             }),
             value: filter,
             onChange: handleChange

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, BoxProps, factory, Factory, Grid, TextInput, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';\n\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';\n\nexport interface TableFilterProps extends BoxProps, CompoundStylesApiProps<TableFilterFactory> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport type TableFilterFactory = Factory<{\n    props: TableFilterProps;\n    ref: HTMLDivElement;\n    stylesNames: TableFilterStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableFilterProps> = {\n    placeholder: 'Search by any field',\n};\n\nexport const TableFilter = factory<TableFilterFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {placeholder, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableFilter',\n        defaultProps,\n        props,\n    );\n    const {state, setState} = useTable();\n    const [filter, setFilter] = useState(state.globalFilter);\n    const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n    useDidUpdate(() => {\n        setState((prevState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: debounced,\n        }));\n        return cancel;\n    }, [debounced]);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        setFilter(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        setFilter('');\n    };\n\n    useEffect(() => {\n        setFilter(state.globalFilter);\n    }, [state.globalFilter]);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.Filter}\n            ref={ref}\n            {...ctx.getStyles('filterRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <TextInput\n                {...ctx.getStyles('filterWrapper', stylesApiProps)}\n                placeholder={placeholder}\n                autoComplete=\"off\"\n                rightSection={\n                    filter ? (\n                        <ActionIcon onClick={handleClear} color=\"gray\" variant=\"subtle\">\n                            <CrossSize16Px height={16} />\n                        </ActionIcon>\n                    ) : (\n                        <FilterSize16Px height={16} {...ctx.getStyles('filterEmpty', stylesApiProps)} />\n                    )\n                }\n                value={filter}\n                onChange={handleChange}\n            />\n        </Grid.Col>\n    );\n});\n"],"names":["CrossSize16Px","FilterSize16Px","ActionIcon","factory","Grid","TextInput","useProps","useDebouncedValue","useDidUpdate","useEffect","useState","TableComponentsOrder","useTable","useTableStyles","defaultProps","placeholder","TableFilter","props","ref","ctx","classNames","className","styles","style","vars","others","state","setState","filter","setFilter","globalFilter","debounced","cancel","prevState","pagination","pageIndex","pageSize","handleChange","event","value","currentTarget","handleClear","stylesApiProps","Col","span","order","Filter","getStyles","autoComplete","rightSection","onClick","color","variant","height","onChange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAAQA,aAAa,EAAEC,cAAc,QAAO,8BAA8B;AAC1E,SAAQC,UAAU,EAAYC,OAAO,EAAWC,IAAI,EAAEC,SAAS,EAAEC,QAAQ,QAAO,gBAAgB;AAEhG,SAAQC,iBAAiB,EAAEC,YAAY,QAAO,iBAAiB;AAC/D,SAA+CC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAEjF,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,QAAQ,EAAEC,cAAc,QAAO,kBAAkB;AAoBzD,MAAMC,eAA0C;IAC5CC,aAAa;AACjB;AAEA,OAAO,MAAMC,cAAcb,QAA4B,CAACc,OAAOC;IAC3D,MAAMC,MAAMN;IACZ,MAAM,EAACE,WAAW,EAAEK,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGnB,SACzE,qBACAQ,cACAG;IAEJ,MAAM,EAACS,KAAK,EAAEC,QAAQ,EAAC,GAAGf;IAC1B,MAAM,CAACgB,QAAQC,UAAU,GAAGnB,SAASgB,MAAMI,YAAY;IACvD,MAAM,CAACC,WAAWC,OAAO,GAAGzB,kBAAkBqB,QAAQ;IAEtDpB,aAAa;QACTmB,SAAS,CAACM,YAAe,CAAA;gBACrB,GAAGA,SAAS;gBACZC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BJ,cAAcC;YAClB,CAAA;QACA,OAAOC;IACX,GAAG;QAACD;KAAU;IAEd,MAAMM,eAAqD,CAACC;QACxD,MAAM,EAACC,KAAK,EAAC,GAAGD,MAAME,aAAa;QACnCX,UAAUU;IACd;IAEA,MAAME,cAAoD;QACtDZ,UAAU;IACd;IAEApB,UAAU;QACNoB,UAAUH,MAAMI,YAAY;IAChC,GAAG;QAACJ,MAAMI,YAAY;KAAC;IAEvB,MAAMY,iBAAiB;QAACtB;QAAYE;IAAM;IAE1C,qBACI,KAAClB,KAAKuC,GAAG;QACLC,MAAK;QACLC,OAAOlC,qBAAqBmC,MAAM;QAClC5B,KAAKA;QACJ,GAAGC,IAAI4B,SAAS,CAAC,cAAc;YAAC1B;YAAWE;YAAO,GAAGmB,cAAc;QAAA,EAAE;QACrE,GAAGjB,MAAM;kBAEV,cAAA,KAACpB;YACI,GAAGc,IAAI4B,SAAS,CAAC,iBAAiBL,eAAe;YAClD3B,aAAaA;YACbiC,cAAa;YACbC,cACIrB,uBACI,KAAC1B;gBAAWgD,SAAST;gBAAaU,OAAM;gBAAOC,SAAQ;0BACnD,cAAA,KAACpD;oBAAcqD,QAAQ;;+BAG3B,KAACpD;gBAAeoD,QAAQ;gBAAK,GAAGlC,IAAI4B,SAAS,CAAC,eAAeL,eAAe;;YAGpFH,OAAOX;YACP0B,UAAUjB;;;AAI1B,GAAG"}
+{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, BoxProps, CompoundStylesApiProps, Factory, Grid, TextInput, factory, useProps} from '@mantine/core';\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';\n\nimport {TableComponentsOrder} from '../Table';\nimport {useTableContext} from '../TableContext';\n\nexport type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';\n\nexport interface TableFilterProps extends BoxProps, CompoundStylesApiProps<TableFilterFactory> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport type TableFilterFactory = Factory<{\n    props: TableFilterProps;\n    ref: HTMLDivElement;\n    stylesNames: TableFilterStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableFilterProps> = {\n    placeholder: 'Search by any field',\n};\n\nexport const TableFilter = factory<TableFilterFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {placeholder, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableFilter',\n        defaultProps,\n        props,\n    );\n    const [filter, setFilter] = useState(store.state.globalFilter);\n    const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n    useDidUpdate(() => {\n        store.setGlobalFilter(debounced);\n        store.setPagination({pageIndex: 0, pageSize: store.state.pagination.pageSize});\n\n        return cancel;\n    }, [debounced]);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        setFilter(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        setFilter('');\n    };\n\n    useEffect(() => {\n        setFilter(store.state.globalFilter);\n    }, [store.state.globalFilter]);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.Filter}\n            ref={ref}\n            {...getStyles('filterRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <TextInput\n                {...getStyles('filterWrapper', stylesApiProps)}\n                placeholder={placeholder}\n                autoComplete=\"off\"\n                rightSection={\n                    filter ? (\n                        <ActionIcon onClick={handleClear} color=\"gray\" variant=\"subtle\">\n                            <CrossSize16Px height={16} />\n                        </ActionIcon>\n                    ) : (\n                        <FilterSize16Px height={16} {...getStyles('filterEmpty', stylesApiProps)} />\n                    )\n                }\n                value={filter}\n                onChange={handleChange}\n            />\n        </Grid.Col>\n    );\n});\n"],"names":["CrossSize16Px","FilterSize16Px","ActionIcon","Grid","TextInput","factory","useProps","useDebouncedValue","useDidUpdate","useEffect","useState","TableComponentsOrder","useTableContext","defaultProps","placeholder","TableFilter","props","ref","store","getStyles","classNames","className","styles","style","vars","others","filter","setFilter","state","globalFilter","debounced","cancel","setGlobalFilter","setPagination","pageIndex","pageSize","pagination","handleChange","event","value","currentTarget","handleClear","stylesApiProps","Col","span","order","Filter","autoComplete","rightSection","onClick","color","variant","height","onChange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAAQA,aAAa,EAAEC,cAAc,QAAO,8BAA8B;AAC1E,SAAQC,UAAU,EAA6CC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AACxH,SAAQC,iBAAiB,EAAEC,YAAY,QAAO,iBAAiB;AAC/D,SAA+CC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAEjF,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,eAAe,QAAO,kBAAkB;AAoBhD,MAAMC,eAA0C;IAC5CC,aAAa;AACjB;AAEA,OAAO,MAAMC,cAAcV,QAA4B,CAACW,OAAOC;IAC3D,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGP;IAC3B,MAAM,EAACE,WAAW,EAAEM,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGnB,SACzE,qBACAO,cACAG;IAEJ,MAAM,CAACU,QAAQC,UAAU,GAAGjB,SAASQ,MAAMU,KAAK,CAACC,YAAY;IAC7D,MAAM,CAACC,WAAWC,OAAO,GAAGxB,kBAAkBmB,QAAQ;IAEtDlB,aAAa;QACTU,MAAMc,eAAe,CAACF;QACtBZ,MAAMe,aAAa,CAAC;YAACC,WAAW;YAAGC,UAAUjB,MAAMU,KAAK,CAACQ,UAAU,CAACD,QAAQ;QAAA;QAE5E,OAAOJ;IACX,GAAG;QAACD;KAAU;IAEd,MAAMO,eAAqD,CAACC;QACxD,MAAM,EAACC,KAAK,EAAC,GAAGD,MAAME,aAAa;QACnCb,UAAUY;IACd;IAEA,MAAME,cAAoD;QACtDd,UAAU;IACd;IAEAlB,UAAU;QACNkB,UAAUT,MAAMU,KAAK,CAACC,YAAY;IACtC,GAAG;QAACX,MAAMU,KAAK,CAACC,YAAY;KAAC;IAE7B,MAAMa,iBAAiB;QAACtB;QAAYE;IAAM;IAE1C,qBACI,KAACnB,KAAKwC,GAAG;QACLC,MAAK;QACLC,OAAOlC,qBAAqBmC,MAAM;QAClC7B,KAAKA;QACJ,GAAGE,UAAU,cAAc;YAACE;YAAWE;YAAO,GAAGmB,cAAc;QAAA,EAAE;QACjE,GAAGjB,MAAM;kBAEV,cAAA,KAACrB;YACI,GAAGe,UAAU,iBAAiBuB,eAAe;YAC9C5B,aAAaA;YACbiC,cAAa;YACbC,cACItB,uBACI,KAACxB;gBAAW+C,SAASR;gBAAaS,OAAM;gBAAOC,SAAQ;0BACnD,cAAA,KAACnD;oBAAcoD,QAAQ;;+BAG3B,KAACnD;gBAAemD,QAAQ;gBAAK,GAAGjC,UAAU,eAAeuB,eAAe;;YAGhFH,OAAOb;YACP2B,UAAUhB;;;AAI1B,GAAG"}

package/dist/esm/components/table/table-header/TableHeader.d.ts

@@ -1,11 +1,16 @@
-import { BoxProps, Factory } from '@mantine/core';
-import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { BoxProps, CompoundStylesApiProps, Factory } from '@mantine/core';
 import { ReactNode } from 'react';
 export type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';
 export interface TableHeaderProps extends Omit<BoxProps, 'classNames' | 'styles' | 'vars'>, CompoundStylesApiProps<TableHeaderFactory> {
     children?: ReactNode;
     unselectAllLabel?: string;
     selectedCountLabel?: (count: number) => string;
+    /**
+     * Whether to show actions when rows are selected
+     *
+     * default true
+     */
+    showActions?: boolean;
 }
 export type TableHeaderFactory = Factory<{
     props: TableHeaderProps;

package/dist/esm/components/table/table-header/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,QAAQ,EAAW,OAAO,EAA0B,MAAM,eAAe,CAAC;AACvF,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAOhC,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,CAAC;AAEnG,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,QAAQ,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC,EACpD,sBAAsB,CAAC,kBAAkB,CAAC;IAE9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAClD;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAOH,eAAO,MAAM,WAAW;WAXb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EAkDhB,CAAC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,QAAQ,EAAE,sBAAsB,EAAW,OAAO,EAA0B,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAQhC,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,CAAC;AAEnG,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,QAAQ,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC,EACpD,sBAAsB,CAAC,kBAAkB,CAAC;IAE9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAQH,eAAO,MAAM,WAAW;WAZb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EA6DhB,CAAC"}

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

@@ -4,25 +4,26 @@ import { Box, factory, Grid, Tooltip, useProps } from '@mantine/core';
 import { Button } from '../../button';
 import { TableLayoutControl } from '../layouts/TableLayoutControl';
 import { TableComponentsOrder } from '../Table';
-import { useTable, useTableStyles } from '../TableContext';
+import { TableHeaderActions } from '../table-actions';
+import { useTableContext } from '../TableContext';
 const defaultProps = {
     unselectAllLabel: 'Unselect all',
-    selectedCountLabel: (count)=>`${count} selected`
+    selectedCountLabel: (count)=>`${count} selected`,
+    showActions: true
 };
 export const TableHeader = factory((props, ref)=>{
-    const ctx = useTableStyles();
-    const { unselectAllLabel, selectedCountLabel, children, classNames, className, styles, style, vars, ...others } = useProps('PlasmaTableHeader', defaultProps, props);
-    const { getSelectedRows, multiRowSelectionEnabled, clearSelection, disableRowSelection } = useTable();
-    const selectedRows = getSelectedRows();
+    const { store, getStyles } = useTableContext();
+    const { showActions, unselectAllLabel, selectedCountLabel, children, classNames, className, styles, style, vars: _vars, ...others } = useProps('PlasmaTableHeader', defaultProps, props);
+    const selectedRows = store.getSelectedRows();
     const stylesApiProps = {
         classNames,
         styles
     };
-    const innerStyles = ctx.getStyles('headerGridInner', stylesApiProps);
-    const gridStyles = ctx.getStyles('headerGrid', stylesApiProps);
+    const innerStyles = getStyles('headerGridInner', stylesApiProps);
+    const gridStyles = getStyles('headerGrid', stylesApiProps);
     return /*#__PURE__*/ _jsx(Box, {
         ref: ref,
-        ...ctx.getStyles('headerRoot', {
+        ...getStyles('headerRoot', {
             className,
             style,
             ...stylesApiProps
@@ -40,16 +41,16 @@ export const TableHeader = factory((props, ref)=>{
                 root: gridStyles.style
             },
             children: [
-                multiRowSelectionEnabled && selectedRows.length > 0 ? /*#__PURE__*/ _jsx(Grid.Col, {
+                store.multiRowSelectionEnabled && selectedRows.length > 0 ? /*#__PURE__*/ _jsx(Grid.Col, {
                     span: "auto",
-                    ...ctx.getStyles('headerCol', stylesApiProps),
+                    ...getStyles('headerCol', stylesApiProps),
                     order: TableComponentsOrder.MultiSelectInfo,
                     children: /*#__PURE__*/ _jsx(Tooltip, {
                         label: unselectAllLabel,
                         children: /*#__PURE__*/ _jsx(Button, {
-                            onClick: clearSelection,
+                            onClick: store.clearRowSelection,
                             variant: "subtle",
-                            disabled: disableRowSelection,
+                            disabled: !store.rowSelectionEnabled,
                             leftSection: /*#__PURE__*/ _jsx(CrossSize16Px, {
                                 height: 16
                             }),
@@ -58,6 +59,7 @@ export const TableHeader = factory((props, ref)=>{
                     })
                 }) : null,
                 children,
+                showActions ? /*#__PURE__*/ _jsx(TableHeaderActions, {}) : null,
                 /*#__PURE__*/ _jsx(TableLayoutControl, {})
             ]
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, BoxProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../../button';\nimport {TableLayoutControl} from '../layouts/TableLayoutControl';\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';\n\nexport interface TableHeaderProps\n    extends Omit<BoxProps, 'classNames' | 'styles' | 'vars'>,\n        CompoundStylesApiProps<TableHeaderFactory> {\n    /* Children of header (ie: actions, datepicker, etc.) */\n    children?: ReactNode;\n    unselectAllLabel?: string;\n    selectedCountLabel?: (count: number) => string;\n}\n\nexport type TableHeaderFactory = Factory<{\n    props: TableHeaderProps;\n    ref: HTMLDivElement;\n    stylesNames: TableHeaderStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableHeaderProps> = {\n    unselectAllLabel: 'Unselect all',\n    selectedCountLabel: (count) => `${count} selected`,\n};\n\nexport const TableHeader = factory<TableHeaderFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {unselectAllLabel, selectedCountLabel, children, classNames, className, styles, style, vars, ...others} =\n        useProps('PlasmaTableHeader', defaultProps, props);\n    const {getSelectedRows, multiRowSelectionEnabled, clearSelection, disableRowSelection} = useTable();\n    const selectedRows = getSelectedRows();\n\n    const stylesApiProps = {classNames, styles};\n    const innerStyles = ctx.getStyles('headerGridInner', stylesApiProps);\n    const gridStyles = ctx.getStyles('headerGrid', stylesApiProps);\n\n    return (\n        <Box ref={ref} {...ctx.getStyles('headerRoot', {className, style, ...stylesApiProps})} {...others}>\n            <Grid\n                justify=\"flex-start\"\n                align=\"center\"\n                classNames={{inner: innerStyles.className, root: gridStyles.className}}\n                styles={{inner: innerStyles.style, root: gridStyles.style}}\n            >\n                {multiRowSelectionEnabled && selectedRows.length > 0 ? (\n                    <Grid.Col\n                        span=\"auto\"\n                        {...ctx.getStyles('headerCol', stylesApiProps)}\n                        order={TableComponentsOrder.MultiSelectInfo}\n                    >\n                        <Tooltip label={unselectAllLabel}>\n                            <Button\n                                onClick={clearSelection}\n                                variant=\"subtle\"\n                                disabled={disableRowSelection}\n                                leftSection={<CrossSize16Px height={16} />}\n                            >\n                                {selectedCountLabel(selectedRows.length)}\n                            </Button>\n                        </Tooltip>\n                    </Grid.Col>\n                ) : null}\n                {children}\n                <TableLayoutControl />\n            </Grid>\n        </Box>\n    );\n});\n"],"names":["CrossSize16Px","Box","factory","Grid","Tooltip","useProps","Button","TableLayoutControl","TableComponentsOrder","useTable","useTableStyles","defaultProps","unselectAllLabel","selectedCountLabel","count","TableHeader","props","ref","ctx","children","classNames","className","styles","style","vars","others","getSelectedRows","multiRowSelectionEnabled","clearSelection","disableRowSelection","selectedRows","stylesApiProps","innerStyles","getStyles","gridStyles","justify","align","inner","root","length","Col","span","order","MultiSelectInfo","label","onClick","variant","disabled","leftSection","height"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAAQA,aAAa,QAAO,8BAA8B;AAC1D,SAAQC,GAAG,EAAYC,OAAO,EAAWC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AAIvF,SAAQC,MAAM,QAAO,eAAe;AACpC,SAAQC,kBAAkB,QAAO,gCAAgC;AACjE,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,QAAQ,EAAEC,cAAc,QAAO,kBAAkB;AAoBzD,MAAMC,eAA0C;IAC5CC,kBAAkB;IAClBC,oBAAoB,CAACC,QAAU,CAAC,EAAEA,MAAM,SAAS,CAAC;AACtD;AAEA,OAAO,MAAMC,cAAcb,QAA4B,CAACc,OAAOC;IAC3D,MAAMC,MAAMR;IACZ,MAAM,EAACE,gBAAgB,EAAEC,kBAAkB,EAAEM,QAAQ,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GACzGpB,SAAS,qBAAqBM,cAAcK;IAChD,MAAM,EAACU,eAAe,EAAEC,wBAAwB,EAAEC,cAAc,EAAEC,mBAAmB,EAAC,GAAGpB;IACzF,MAAMqB,eAAeJ;IAErB,MAAMK,iBAAiB;QAACX;QAAYE;IAAM;IAC1C,MAAMU,cAAcd,IAAIe,SAAS,CAAC,mBAAmBF;IACrD,MAAMG,aAAahB,IAAIe,SAAS,CAAC,cAAcF;IAE/C,qBACI,KAAC9B;QAAIgB,KAAKA;QAAM,GAAGC,IAAIe,SAAS,CAAC,cAAc;YAACZ;YAAWE;YAAO,GAAGQ,cAAc;QAAA,EAAE;QAAG,GAAGN,MAAM;kBAC7F,cAAA,MAACtB;YACGgC,SAAQ;YACRC,OAAM;YACNhB,YAAY;gBAACiB,OAAOL,YAAYX,SAAS;gBAAEiB,MAAMJ,WAAWb,SAAS;YAAA;YACrEC,QAAQ;gBAACe,OAAOL,YAAYT,KAAK;gBAAEe,MAAMJ,WAAWX,KAAK;YAAA;;gBAExDI,4BAA4BG,aAAaS,MAAM,GAAG,kBAC/C,KAACpC,KAAKqC,GAAG;oBACLC,MAAK;oBACJ,GAAGvB,IAAIe,SAAS,CAAC,aAAaF,eAAe;oBAC9CW,OAAOlC,qBAAqBmC,eAAe;8BAE3C,cAAA,KAACvC;wBAAQwC,OAAOhC;kCACZ,cAAA,KAACN;4BACGuC,SAASjB;4BACTkB,SAAQ;4BACRC,UAAUlB;4BACVmB,2BAAa,KAAChD;gCAAciD,QAAQ;;sCAEnCpC,mBAAmBiB,aAAaS,MAAM;;;qBAInD;gBACHpB;8BACD,KAACZ;;;;AAIjB,GAAG"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, BoxProps, CompoundStylesApiProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../../button';\nimport {TableLayoutControl} from '../layouts/TableLayoutControl';\nimport {TableComponentsOrder} from '../Table';\nimport {TableHeaderActions} from '../table-actions';\nimport {useTableContext} from '../TableContext';\n\nexport type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';\n\nexport interface TableHeaderProps\n    extends Omit<BoxProps, 'classNames' | 'styles' | 'vars'>,\n        CompoundStylesApiProps<TableHeaderFactory> {\n    /* Children of header (ie: actions, datepicker, etc.) */\n    children?: ReactNode;\n    unselectAllLabel?: string;\n    selectedCountLabel?: (count: number) => string;\n    /**\n     * Whether to show actions when rows are selected\n     *\n     * default true\n     */\n    showActions?: boolean;\n}\n\nexport type TableHeaderFactory = Factory<{\n    props: TableHeaderProps;\n    ref: HTMLDivElement;\n    stylesNames: TableHeaderStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableHeaderProps> = {\n    unselectAllLabel: 'Unselect all',\n    selectedCountLabel: (count) => `${count} selected`,\n    showActions: true,\n};\n\nexport const TableHeader = factory<TableHeaderFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {\n        showActions,\n        unselectAllLabel,\n        selectedCountLabel,\n        children,\n        classNames,\n        className,\n        styles,\n        style,\n        vars: _vars,\n        ...others\n    } = useProps('PlasmaTableHeader', defaultProps, props);\n    const selectedRows = store.getSelectedRows();\n\n    const stylesApiProps = {classNames, styles};\n    const innerStyles = getStyles('headerGridInner', stylesApiProps);\n    const gridStyles = getStyles('headerGrid', stylesApiProps);\n\n    return (\n        <Box ref={ref} {...getStyles('headerRoot', {className, style, ...stylesApiProps})} {...others}>\n            <Grid\n                justify=\"flex-start\"\n                align=\"center\"\n                classNames={{inner: innerStyles.className, root: gridStyles.className}}\n                styles={{inner: innerStyles.style, root: gridStyles.style}}\n            >\n                {store.multiRowSelectionEnabled && selectedRows.length > 0 ? (\n                    <Grid.Col\n                        span=\"auto\"\n                        {...getStyles('headerCol', stylesApiProps)}\n                        order={TableComponentsOrder.MultiSelectInfo}\n                    >\n                        <Tooltip label={unselectAllLabel}>\n                            <Button\n                                onClick={store.clearRowSelection}\n                                variant=\"subtle\"\n                                disabled={!store.rowSelectionEnabled}\n                                leftSection={<CrossSize16Px height={16} />}\n                            >\n                                {selectedCountLabel(selectedRows.length)}\n                            </Button>\n                        </Tooltip>\n                    </Grid.Col>\n                ) : null}\n                {children}\n                {showActions ? <TableHeaderActions /> : null}\n                <TableLayoutControl />\n            </Grid>\n        </Box>\n    );\n});\n"],"names":["CrossSize16Px","Box","factory","Grid","Tooltip","useProps","Button","TableLayoutControl","TableComponentsOrder","TableHeaderActions","useTableContext","defaultProps","unselectAllLabel","selectedCountLabel","count","showActions","TableHeader","props","ref","store","getStyles","children","classNames","className","styles","style","vars","_vars","others","selectedRows","getSelectedRows","stylesApiProps","innerStyles","gridStyles","justify","align","inner","root","multiRowSelectionEnabled","length","Col","span","order","MultiSelectInfo","label","onClick","clearRowSelection","variant","disabled","rowSelectionEnabled","leftSection","height"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAAQA,aAAa,QAAO,8BAA8B;AAC1D,SAAQC,GAAG,EAAoCC,OAAO,EAAWC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AAG/G,SAAQC,MAAM,QAAO,eAAe;AACpC,SAAQC,kBAAkB,QAAO,gCAAgC;AACjE,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,kBAAkB,QAAO,mBAAmB;AACpD,SAAQC,eAAe,QAAO,kBAAkB;AA0BhD,MAAMC,eAA0C;IAC5CC,kBAAkB;IAClBC,oBAAoB,CAACC,QAAU,CAAC,EAAEA,MAAM,SAAS,CAAC;IAClDC,aAAa;AACjB;AAEA,OAAO,MAAMC,cAAcd,QAA4B,CAACe,OAAOC;IAC3D,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGV;IAC3B,MAAM,EACFK,WAAW,EACXH,gBAAgB,EAChBC,kBAAkB,EAClBQ,QAAQ,EACRC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAMC,KAAK,EACX,GAAGC,QACN,GAAGvB,SAAS,qBAAqBM,cAAcM;IAChD,MAAMY,eAAeV,MAAMW,eAAe;IAE1C,MAAMC,iBAAiB;QAACT;QAAYE;IAAM;IAC1C,MAAMQ,cAAcZ,UAAU,mBAAmBW;IACjD,MAAME,aAAab,UAAU,cAAcW;IAE3C,qBACI,KAAC9B;QAAIiB,KAAKA;QAAM,GAAGE,UAAU,cAAc;YAACG;YAAWE;YAAO,GAAGM,cAAc;QAAA,EAAE;QAAG,GAAGH,MAAM;kBACzF,cAAA,MAACzB;YACG+B,SAAQ;YACRC,OAAM;YACNb,YAAY;gBAACc,OAAOJ,YAAYT,SAAS;gBAAEc,MAAMJ,WAAWV,SAAS;YAAA;YACrEC,QAAQ;gBAACY,OAAOJ,YAAYP,KAAK;gBAAEY,MAAMJ,WAAWR,KAAK;YAAA;;gBAExDN,MAAMmB,wBAAwB,IAAIT,aAAaU,MAAM,GAAG,kBACrD,KAACpC,KAAKqC,GAAG;oBACLC,MAAK;oBACJ,GAAGrB,UAAU,aAAaW,eAAe;oBAC1CW,OAAOlC,qBAAqBmC,eAAe;8BAE3C,cAAA,KAACvC;wBAAQwC,OAAOhC;kCACZ,cAAA,KAACN;4BACGuC,SAAS1B,MAAM2B,iBAAiB;4BAChCC,SAAQ;4BACRC,UAAU,CAAC7B,MAAM8B,mBAAmB;4BACpCC,2BAAa,KAAClD;gCAAcmD,QAAQ;;sCAEnCtC,mBAAmBgB,aAAaU,MAAM;;;qBAInD;gBACHlB;gBACAN,4BAAc,KAACN,0BAAwB;8BACxC,KAACF;;;;AAIjB,GAAG"}

package/dist/esm/components/table/table-header/Th.d.ts

@@ -1,5 +1,4 @@
-import { BoxProps, Factory } from '@mantine/core';
-import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { BoxProps, CompoundStylesApiProps, Factory } from '@mantine/core';
 import { Header } from '@tanstack/react-table';
 import { ComponentType, ForwardedRef, SVGProps } from 'react';
 import { CustomComponentThemeExtend } from '../../../utils';

package/dist/esm/components/table/table-header/Th.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAkC,MAAM,eAAe,CAAC;AACjF,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAiB,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAC,0BAA0B,EAAW,MAAM,gBAAgB,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,cAAc,CAAC;IAC1F,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CAC5E;AAcD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;IACjC,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,oBAAoB,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,EAAE;;cAAmC,aAAa,oBAAoB,CAAC;;;eAVzE,OAAO;aACT,oBAAoB;qBACZ,kBAAkB;kBACrB,IAAI;;CAgEjB,CAAC"}
+{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAAkC,MAAM,eAAe,CAAC;AACzG,OAAO,EAAC,MAAM,EAAkC,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAiB,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAC,0BAA0B,EAAW,MAAM,gBAAgB,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,cAAc,CAAC;IAC1F,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CAC5E;AAcD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;IACjC,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,oBAAoB,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,EAAE;eAAe,QAAQ,CAAC,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,aAAa,oBAAoB,CAAC,CAAA;KAAC;;eAV1E,OAAO;aACT,oBAAoB;qBACZ,kBAAkB;kBACrB,IAAI;;CAkEjB,CAAC"}

package/dist/esm/components/table/table-header/Th.js

@@ -3,7 +3,7 @@ import { ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px } from '@c
 import { Group, UnstyledButton, useProps } from '@mantine/core';
 import { defaultColumnSizing, flexRender } from '@tanstack/react-table';
 import { identity } from '../../../utils';
-import { useTableStyles } from '../TableContext';
+import { useTableContext } from '../TableContext';
 const SortingIcons = {
     asc: ArrowUpSize16Px,
     desc: ArrowDownSize16Px,
@@ -18,7 +18,7 @@ const defaultProps = {
     sortingIcons: SortingIcons
 };
 export const Th = (props)=>{
-    const ctx = useTableStyles();
+    const { getStyles } = useTableContext();
     const { header, sortingIcons, classNames, className, styles, style, vars, ...others } = useProps('PlasmaTableTh', defaultProps, props);
     const columnSizing = {
         ...defaultColumnSizing,
@@ -26,7 +26,7 @@ export const Th = (props)=>{
         minSize: header.column.columnDef.minSize,
         maxSize: header.column.columnDef.maxSize
     };
-    const thStyles = ctx.getStyles('th', {
+    const thStyles = getStyles('th', {
         classNames,
         className,
         styles,
@@ -45,7 +45,11 @@ export const Th = (props)=>{
                 maxWidth: columnSizing.maxSize
             },
             ...others,
-            children: flexRender(header.column.columnDef.header, header.getContext())
+            children: /*#__PURE__*/ _jsx(Group, {
+                wrap: "nowrap",
+                gap: "xs",
+                children: flexRender(header.column.columnDef.header, header.getContext())
+            })
         });
     }
     const onSort = header.column.getToggleSortingHandler();

package/dist/esm/components/table/table-header/Th.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {BoxProps, Factory, Group, UnstyledButton, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\nimport {AriaAttributes, ComponentType, ForwardedRef, SVGProps} from 'react';\nimport {CustomComponentThemeExtend, identity} from '../../../utils';\nimport {useTableStyles} from '../TableContext';\n\nexport type TableThStylesNames = 'th';\n\nexport type SortState = 'asc' | 'desc' | 'none';\n\nexport interface ThProps<T = unknown> extends BoxProps, CompoundStylesApiProps<TableThFactory> {\n    header: Header<T, unknown>;\n    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;\n}\n\nconst SortingIcons: ThProps['sortingIcons'] = {\n    asc: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels: Record<SortState, AriaAttributes['aria-sort']> = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\n} as const;\n\nexport type TableThFactory = Factory<{\n    props: ThProps;\n    ref: HTMLTableCellElement;\n    stylesNames: TableThStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<ThProps> = {\n    sortingIcons: SortingIcons,\n};\n\nexport const Th = <T,>(props: ThProps<T> & {ref?: ForwardedRef<HTMLTableCellElement>}) => {\n    const ctx = useTableStyles();\n    const {header, sortingIcons, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableTh',\n        defaultProps as Partial<ThProps<T>>,\n        props,\n    );\n\n    const columnSizing = {\n        ...defaultColumnSizing,\n        size: header.column.columnDef.size,\n        minSize: header.column.columnDef.minSize,\n        maxSize: header.column.columnDef.maxSize,\n    };\n\n    const thStyles = ctx.getStyles('th', {classNames, className, styles, style});\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th\n                className={thStyles.className}\n                style={{\n                    ...thStyles.style,\n                    width: columnSizing.size ?? 'auto',\n                    minWidth: columnSizing.minSize,\n                    maxWidth: columnSizing.maxSize,\n                }}\n                {...others}\n            >\n                {flexRender(header.column.columnDef.header, header.getContext())}\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        <UnstyledButton\n            component=\"th\"\n            onClick={onSort}\n            aria-sort={SortingLabels[sortingOrder]}\n            data-control={true}\n            {...thStyles}\n            {...others}\n        >\n            <Group wrap=\"nowrap\" gap=\"xs\">\n                {flexRender(header.column.columnDef.header, header.getContext())}\n                <Icon height={16} width={16} />\n            </Group>\n        </UnstyledButton>\n    );\n};\nTh.extend = identity as CustomComponentThemeExtend<TableThFactory>;\n"],"names":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","Group","UnstyledButton","useProps","defaultColumnSizing","flexRender","identity","useTableStyles","SortingIcons","asc","desc","none","SortingLabels","defaultProps","sortingIcons","Th","props","ctx","header","classNames","className","styles","style","vars","others","columnSizing","size","column","columnDef","minSize","maxSize","thStyles","getStyles","isPlaceholder","getCanSort","th","width","minWidth","maxWidth","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","component","onClick","aria-sort","data-control","wrap","gap","height","extend"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,SAA2BC,KAAK,EAAEC,cAAc,EAAEC,QAAQ,QAAO,gBAAgB;AAEjF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,SAAoCC,QAAQ,QAAO,iBAAiB;AACpE,SAAQC,cAAc,QAAO,kBAAkB;AAW/C,MAAMC,eAAwC;IAC1CC,KAAKV;IACLW,MAAMZ;IACNa,MAAMX;AACV;AAEA,MAAMY,gBAAgE;IAClEH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AASA,MAAME,eAAiC;IACnCC,cAAcN;AAClB;AAEA,OAAO,MAAMO,KAAK,CAAKC;IACnB,MAAMC,MAAMV;IACZ,MAAM,EAACW,MAAM,EAAEJ,YAAY,EAAEK,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGrB,SAClF,iBACAU,cACAG;IAGJ,MAAMS,eAAe;QACjB,GAAGrB,mBAAmB;QACtBsB,MAAMR,OAAOS,MAAM,CAACC,SAAS,CAACF,IAAI;QAClCG,SAASX,OAAOS,MAAM,CAACC,SAAS,CAACC,OAAO;QACxCC,SAASZ,OAAOS,MAAM,CAACC,SAAS,CAACE,OAAO;IAC5C;IAEA,MAAMC,WAAWd,IAAIe,SAAS,CAAC,MAAM;QAACb;QAAYC;QAAWC;QAAQC;IAAK;IAE1E,IAAIJ,OAAOe,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACf,OAAOS,MAAM,CAACO,UAAU,IAAI;QAC7B,qBACI,KAACC;YACGf,WAAWW,SAASX,SAAS;YAC7BE,OAAO;gBACH,GAAGS,SAAST,KAAK;gBACjBc,OAAOX,aAAaC,IAAI,IAAI;gBAC5BW,UAAUZ,aAAaI,OAAO;gBAC9BS,UAAUb,aAAaK,OAAO;YAClC;YACC,GAAGN,MAAM;sBAETnB,WAAWa,OAAOS,MAAM,CAACC,SAAS,CAACV,MAAM,EAAEA,OAAOqB,UAAU;;IAGzE;IAEA,MAAMC,SAAStB,OAAOS,MAAM,CAACc,uBAAuB;IACpD,MAAMC,eAAexB,OAAOS,MAAM,CAACgB,WAAW,MAAM;IACpD,MAAMC,OAAO9B,YAAY,CAAC4B,aAAa;IAEvC,qBACI,KAACxC;QACG2C,WAAU;QACVC,SAASN;QACTO,aAAWnC,aAAa,CAAC8B,aAAa;QACtCM,gBAAc;QACb,GAAGjB,QAAQ;QACX,GAAGP,MAAM;kBAEV,cAAA,MAACvB;YAAMgD,MAAK;YAASC,KAAI;;gBACpB7C,WAAWa,OAAOS,MAAM,CAACC,SAAS,CAACV,MAAM,EAAEA,OAAOqB,UAAU;8BAC7D,KAACK;oBAAKO,QAAQ;oBAAIf,OAAO;;;;;AAIzC,EAAE;AACFrB,GAAGqC,MAAM,GAAG9C"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {BoxProps, CompoundStylesApiProps, Factory, Group, UnstyledButton, useProps} from '@mantine/core';\nimport {Header, defaultColumnSizing, flexRender} from '@tanstack/react-table';\nimport {AriaAttributes, ComponentType, ForwardedRef, SVGProps} from 'react';\nimport {CustomComponentThemeExtend, identity} from '../../../utils';\nimport {useTableContext} from '../TableContext';\n\nexport type TableThStylesNames = 'th';\n\nexport type SortState = 'asc' | 'desc' | 'none';\n\nexport interface ThProps<T = unknown> extends BoxProps, CompoundStylesApiProps<TableThFactory> {\n    header: Header<T, unknown>;\n    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;\n}\n\nconst SortingIcons: ThProps['sortingIcons'] = {\n    asc: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels: Record<SortState, AriaAttributes['aria-sort']> = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\n} as const;\n\nexport type TableThFactory = Factory<{\n    props: ThProps;\n    ref: HTMLTableCellElement;\n    stylesNames: TableThStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<ThProps> = {\n    sortingIcons: SortingIcons,\n};\n\nexport const Th = <T,>(props: ThProps<T> & {ref?: ForwardedRef<HTMLTableCellElement>}) => {\n    const {getStyles} = useTableContext();\n    const {header, sortingIcons, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableTh',\n        defaultProps as Partial<ThProps<T>>,\n        props,\n    );\n\n    const columnSizing = {\n        ...defaultColumnSizing,\n        size: header.column.columnDef.size,\n        minSize: header.column.columnDef.minSize,\n        maxSize: header.column.columnDef.maxSize,\n    };\n\n    const thStyles = getStyles('th', {classNames, className, styles, style});\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th\n                className={thStyles.className}\n                style={{\n                    ...thStyles.style,\n                    width: columnSizing.size ?? 'auto',\n                    minWidth: columnSizing.minSize,\n                    maxWidth: columnSizing.maxSize,\n                }}\n                {...others}\n            >\n                <Group wrap=\"nowrap\" gap=\"xs\">\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Group>\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        <UnstyledButton\n            component=\"th\"\n            onClick={onSort}\n            aria-sort={SortingLabels[sortingOrder]}\n            data-control={true}\n            {...thStyles}\n            {...others}\n        >\n            <Group wrap=\"nowrap\" gap=\"xs\">\n                {flexRender(header.column.columnDef.header, header.getContext())}\n                <Icon height={16} width={16} />\n            </Group>\n        </UnstyledButton>\n    );\n};\nTh.extend = identity as CustomComponentThemeExtend<TableThFactory>;\n"],"names":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","Group","UnstyledButton","useProps","defaultColumnSizing","flexRender","identity","useTableContext","SortingIcons","asc","desc","none","SortingLabels","defaultProps","sortingIcons","Th","props","getStyles","header","classNames","className","styles","style","vars","others","columnSizing","size","column","columnDef","minSize","maxSize","thStyles","isPlaceholder","getCanSort","th","width","minWidth","maxWidth","wrap","gap","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","component","onClick","aria-sort","data-control","height","extend"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,SAAmDC,KAAK,EAAEC,cAAc,EAAEC,QAAQ,QAAO,gBAAgB;AACzG,SAAgBC,mBAAmB,EAAEC,UAAU,QAAO,wBAAwB;AAE9E,SAAoCC,QAAQ,QAAO,iBAAiB;AACpE,SAAQC,eAAe,QAAO,kBAAkB;AAWhD,MAAMC,eAAwC;IAC1CC,KAAKV;IACLW,MAAMZ;IACNa,MAAMX;AACV;AAEA,MAAMY,gBAAgE;IAClEH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AASA,MAAME,eAAiC;IACnCC,cAAcN;AAClB;AAEA,OAAO,MAAMO,KAAK,CAAKC;IACnB,MAAM,EAACC,SAAS,EAAC,GAAGV;IACpB,MAAM,EAACW,MAAM,EAAEJ,YAAY,EAAEK,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGrB,SAClF,iBACAU,cACAG;IAGJ,MAAMS,eAAe;QACjB,GAAGrB,mBAAmB;QACtBsB,MAAMR,OAAOS,MAAM,CAACC,SAAS,CAACF,IAAI;QAClCG,SAASX,OAAOS,MAAM,CAACC,SAAS,CAACC,OAAO;QACxCC,SAASZ,OAAOS,MAAM,CAACC,SAAS,CAACE,OAAO;IAC5C;IAEA,MAAMC,WAAWd,UAAU,MAAM;QAACE;QAAYC;QAAWC;QAAQC;IAAK;IAEtE,IAAIJ,OAAOc,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACd,OAAOS,MAAM,CAACM,UAAU,IAAI;QAC7B,qBACI,KAACC;YACGd,WAAWW,SAASX,SAAS;YAC7BE,OAAO;gBACH,GAAGS,SAAST,KAAK;gBACjBa,OAAOV,aAAaC,IAAI,IAAI;gBAC5BU,UAAUX,aAAaI,OAAO;gBAC9BQ,UAAUZ,aAAaK,OAAO;YAClC;YACC,GAAGN,MAAM;sBAEV,cAAA,KAACvB;gBAAMqC,MAAK;gBAASC,KAAI;0BACpBlC,WAAWa,OAAOS,MAAM,CAACC,SAAS,CAACV,MAAM,EAAEA,OAAOsB,UAAU;;;IAI7E;IAEA,MAAMC,SAASvB,OAAOS,MAAM,CAACe,uBAAuB;IACpD,MAAMC,eAAezB,OAAOS,MAAM,CAACiB,WAAW,MAAM;IACpD,MAAMC,OAAO/B,YAAY,CAAC6B,aAAa;IAEvC,qBACI,KAACzC;QACG4C,WAAU;QACVC,SAASN;QACTO,aAAWpC,aAAa,CAAC+B,aAAa;QACtCM,gBAAc;QACb,GAAGlB,QAAQ;QACX,GAAGP,MAAM;kBAEV,cAAA,MAACvB;YAAMqC,MAAK;YAASC,KAAI;;gBACpBlC,WAAWa,OAAOS,MAAM,CAACC,SAAS,CAACV,MAAM,EAAEA,OAAOsB,UAAU;8BAC7D,KAACK;oBAAKK,QAAQ;oBAAIf,OAAO;;;;;AAIzC,EAAE;AACFpB,GAAGoC,MAAM,GAAG7C"}

package/dist/esm/components/table/table-last-updated/TableLastUpdated.d.ts

@@ -1,5 +1,4 @@
-import { BoxProps, Factory } from '@mantine/core';
-import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { BoxProps, CompoundStylesApiProps, Factory } from '@mantine/core';
 export type TableLastUpdatedStylesNames = 'lastUpdatedRoot' | 'lastUpdatedLabel';
 export interface TableLastUpdatedProps extends BoxProps, CompoundStylesApiProps<TableLastUpdatedFactory> {
     /**
@@ -8,7 +7,6 @@ export interface TableLastUpdatedProps extends BoxProps, CompoundStylesApiProps<
      * @default "Last update:"
      */
     label?: string;
-    dependencies?: never;
 }
 export type TableLastUpdatedFactory = Factory<{
     props: TableLastUpdatedProps;

package/dist/esm/components/table/table-last-updated/TableLastUpdated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLastUpdated.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-last-updated/TableLastUpdated.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAW,OAAO,EAAwB,MAAM,eAAe,CAAC;AAChF,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAM1F,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAEjF,MAAM,WAAW,qBAAsB,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,uBAAuB,CAAC;IACpG;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB;AACD,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC;IAC1C,KAAK,EAAE,qBAAqB,CAAC;IAC7B,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,2BAA2B,CAAC;IACzC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,gBAAgB;WAVlB,qBAAqB;SACvB,cAAc;iBACN,2BAA2B;cAC9B,IAAI;EAqChB,CAAC"}
+{"version":3,"file":"TableLastUpdated.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-last-updated/TableLastUpdated.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,sBAAsB,EAAW,OAAO,EAAwB,MAAM,eAAe,CAAC;AAMxG,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAEjF,MAAM,WAAW,qBAAsB,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,uBAAuB,CAAC;IACpG;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC;IAC1C,KAAK,EAAE,qBAAqB,CAAC;IAC7B,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,2BAA2B,CAAC;IACzC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,gBAAgB;WAVlB,qBAAqB;SACvB,cAAc;iBACN,2BAA2B;cAC9B,IAAI;EAoChB,CAAC"}

package/dist/esm/components/table/table-last-updated/TableLastUpdated.js

@@ -3,20 +3,18 @@ import { factory, Group, Text, useProps } from '@mantine/core';
 import { useDidUpdate } from '@mantine/hooks';
 import dayjs from 'dayjs';
 import { useState } from 'react';
-import { useTable, useTableStyles } from '../TableContext';
+import { useTableContext } from '../TableContext';
 const defaultProps = {
     label: 'Last update:'
 };
 export const TableLastUpdated = factory((props, ref)=>{
-    const ctx = useTableStyles();
-    const { label, dependencies, classNames, className, styles, style, vars, ...others } = useProps('PlasmaTableLastUpdated', defaultProps, props);
-    const { state } = useTable();
+    const { table, getStyles } = useTableContext();
+    const { label, classNames, className, styles, style, vars, ...others } = useProps('PlasmaTableLastUpdated', defaultProps, props);
     const [time, setTime] = useState(new Date());
     useDidUpdate(()=>{
         setTime(new Date());
     }, [
-        state,
-        ...dependencies
+        table.options.data
     ]);
     const stylesApiProps = {
         classNames,
@@ -26,7 +24,7 @@ export const TableLastUpdated = factory((props, ref)=>{
         px: "xl",
         justify: "right",
         ref: ref,
-        ...ctx.getStyles('lastUpdatedRoot', {
+        ...getStyles('lastUpdatedRoot', {
             className,
             style,
             ...stylesApiProps
@@ -34,7 +32,7 @@ export const TableLastUpdated = factory((props, ref)=>{
         ...others,
         children: /*#__PURE__*/ _jsxs(Text, {
             size: "xs",
-            ...ctx.getStyles('lastUpdatedLabel', {
+            ...getStyles('lastUpdatedLabel', {
                 className,
                 style,
                 ...stylesApiProps