@coveord/plasma-mantine 52.27.4 → 53.0.0

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.d.ts

@@ -1,4 +1,57 @@
-import { FunctionComponent } from 'react';
-import { TableColumnsSelectorProps } from './TableColumnsSelector.types';
-export declare const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps>;
+import { BoxProps, Factory } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { ReactNode } from 'react';
+export type TableColumnsSelectorStylesNames = 'columnSelector' | 'columnSelectorWrapper';
+export interface TableColumnsSelectorProps extends BoxProps, CompoundStylesApiProps<TableColumnsSelectorFactory> {
+    /**
+     * The label of the button
+     * @default 'Edit columns'
+     */
+    label?: ReactNode;
+    /**
+     * The style variant of the button
+     * @default 'outline'
+     */
+    buttonVariant?: string;
+    /**
+     * An array of column ids that the user cannot hide. This is useful for columns that are required for the table to function properly.
+     * @default []
+     */
+    nonHideableColumns?: string[];
+    /**
+     * Whether the count of visible columns is shown in the button label.
+     * @default false
+     */
+    showVisibleCountLabel?: boolean;
+    /**
+     * The maximum number of columns that can be selected at the same time.
+     * If defined a footer will render with the remaining number of columns that can be selected.
+     */
+    maxSelectableColumns?: number;
+    /**
+     * A dictionary of column ids and names to use for the checkbox labels.
+     */
+    columnNames: Record<string, string>;
+    /**
+     * The content to display in the footer when maxSelectableColumns is defined.
+     */
+    footer?: ReactNode;
+    /**
+     * The tooltip to display when the user hovers over a disabled checkbox.
+     * @default 'You have reached the maximum display limit.'
+     */
+    limitReachedTooltip?: string;
+}
+export type TableColumnsSelectorFactory = Factory<{
+    props: TableColumnsSelectorProps;
+    ref: HTMLDivElement;
+    stylesNames: TableColumnsSelectorStylesNames;
+    compound: true;
+}>;
+export declare const TableColumnsSelector: import("@mantine/core").MantineComponent<{
+    props: TableColumnsSelectorProps;
+    ref: HTMLDivElement;
+    stylesNames: TableColumnsSelectorStylesNames;
+    compound: true;
+}>;
 //# sourceMappingURL=TableColumnsSelector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableColumnsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAC,yBAAyB,EAAC,MAAM,8BAA8B,CAAC;AAIvE,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,CAmE7E,CAAC"}
+{"version":3,"file":"TableColumnsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EAKR,OAAO,EAOV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAKhC,MAAM,MAAM,+BAA+B,GAAG,gBAAgB,GAAG,uBAAuB,CAAC;AAEzF,MAAM,WAAW,yBAA0B,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,2BAA2B,CAAC;IAC5G;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAChC;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;AAWH,eAAO,MAAM,oBAAoB;WAftB,yBAAyB;SAC3B,cAAc;iBACN,+BAA+B;cAClC,IAAI;EA0FhB,CAAC"}

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

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Checkbox, Divider, Grid, Popover, ScrollArea, Stack, Tooltip } from '@mantine/core';
-import { TableComponentsOrder } from '../Table.styles';
-import { useTable } from '../TableContext';
-import useStyles from './TableColumnsSelector.styles';
+import { Button, Checkbox, Divider, factory, Grid, Popover, ScrollArea, Stack, Tooltip, useProps } from '@mantine/core';
+import { TableComponentsOrder } from '../Table';
+import { useTable, useTableStyles } from '../TableContext';
 const COLUMNS_IDS_TO_EXCLUDE = [
     'collapsible',
     'select'
 ];
-export const TableColumnsSelector = ({ classNames, styles, unstyled, label = 'Edit columns', buttonVariant = 'outline', showVisibleCountLabel = false, nonHideableColumns = [], maxSelectableColumns, footer, limitReachedTooltip = 'You have reached the maximum display limit.', columnNames })=>{
-    const { classes } = useStyles(null, {
-        name: 'TableColumnsSelector',
-        classNames,
-        styles,
-        unstyled
-    });
+const defaultProps = {
+    label: 'Edit columns',
+    buttonVariant: 'outline',
+    limitReachedTooltip: 'You have reached the maximum display limit.',
+    showVisibleCountLabel: false
+};
+export const TableColumnsSelector = factory((props, ref)=>{
+    const ctx = useTableStyles();
+    const { label, buttonVariant, showVisibleCountLabel, nonHideableColumns = [], maxSelectableColumns, footer, limitReachedTooltip, columnNames, classNames, className, styles, style, vars, ...others } = useProps('TableColumnsSelector', defaultProps, props);
     const { getAllColumns } = useTable();
     const columnsToExclude = [
         ...nonHideableColumns,
@@ -24,11 +25,19 @@ export const TableColumnsSelector = ({ classNames, styles, unstyled, label = 'Ed
     if (filteredColumns.length <= 0) {
         return null;
     }
+    const stylesApiProps = {
+        classNames,
+        styles
+    };
     return /*#__PURE__*/ _jsx(Grid.Col, {
         span: "content",
         order: TableComponentsOrder.ColumnsSelector,
-        py: "sm",
-        className: classes.root,
+        ...ctx.getStyles('columnSelector', {
+            className,
+            style,
+            ...stylesApiProps
+        }),
+        ...others,
         children: /*#__PURE__*/ _jsxs(Popover, {
             withinPortal: true,
             position: "bottom",
@@ -46,6 +55,7 @@ export const TableColumnsSelector = ({ classNames, styles, unstyled, label = 'Ed
                         /*#__PURE__*/ _jsx(ScrollArea.Autosize, {
                             mah: 154,
                             children: /*#__PURE__*/ _jsx(Stack, {
+                                ...ctx.getStyles('columnSelectorWrapper', stylesApiProps),
                                 children: filteredColumns.map((column)=>{
                                     const isDisabled = selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible();
                                     return /*#__PURE__*/ _jsx(Tooltip, {
@@ -79,6 +89,6 @@ export const TableColumnsSelector = ({ classNames, styles, unstyled, label = 'Ed
             ]
         })
     });
-};
+});
 
 //# sourceMappingURL=TableColumnsSelector.js.map

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 {Button, Checkbox, Divider, Grid, Popover, ScrollArea, Stack, Tooltip} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableColumnsSelector.styles';\nimport {TableColumnsSelectorProps} from './TableColumnsSelector.types';\n\nconst COLUMNS_IDS_TO_EXCLUDE = ['collapsible', 'select'];\n\nexport const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps> = ({\n    classNames,\n    styles,\n    unstyled,\n    label = 'Edit columns',\n    buttonVariant = 'outline',\n    showVisibleCountLabel = false,\n    nonHideableColumns = [],\n    maxSelectableColumns,\n    footer,\n    limitReachedTooltip = 'You have reached the maximum display limit.',\n    columnNames,\n}) => {\n    const {classes} = useStyles(null, {name: 'TableColumnsSelector', classNames, styles, unstyled});\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    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.ColumnsSelector} py=\"sm\" className={classes.root}>\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>\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","Grid","Popover","ScrollArea","Stack","Tooltip","TableComponentsOrder","useTable","useStyles","COLUMNS_IDS_TO_EXCLUDE","TableColumnsSelector","classNames","styles","unstyled","label","buttonVariant","showVisibleCountLabel","nonHideableColumns","maxSelectableColumns","footer","limitReachedTooltip","columnNames","classes","name","getAllColumns","columnsToExclude","filteredColumns","filter","column","includes","id","selectedColumnsCount","getIsVisible","length","Col","span","order","ColumnsSelector","py","className","root","withinPortal","position","shadow","Target","variant","Dropdown","miw","Autosize","mah","map","isDisabled","disabled","div","checked","onChange","getToggleVisibilityHandler","mb","mt"],"mappings":";AAAA,SAAQA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AAGnG,SAAQC,oBAAoB,QAAO,kBAAkB;AACrD,SAAQC,QAAQ,QAAO,kBAAkB;AACzC,OAAOC,eAAe,gCAAgC;AAGtD,MAAMC,yBAAyB;IAAC;IAAe;CAAS;AAExD,OAAO,MAAMC,uBAAqE,CAAC,EAC/EC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACRC,QAAQ,cAAc,EACtBC,gBAAgB,SAAS,EACzBC,wBAAwB,KAAK,EAC7BC,qBAAqB,EAAE,EACvBC,oBAAoB,EACpBC,MAAM,EACNC,sBAAsB,6CAA6C,EACnEC,WAAW,EACd;IACG,MAAM,EAACC,OAAO,EAAC,GAAGd,UAAU,MAAM;QAACe,MAAM;QAAwBZ;QAAYC;QAAQC;IAAQ;IAC7F,MAAM,EAACW,aAAa,EAAC,GAAGjB;IAExB,MAAMkB,mBAAmB;WAAIR;WAAuBR;KAAuB;IAE3E,MAAMiB,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,qBACI,KAAChC,KAAKiC,GAAG;QAACC,MAAK;QAAUC,OAAO9B,qBAAqB+B,eAAe;QAAEC,IAAG;QAAKC,WAAWjB,QAAQkB,IAAI;kBACjG,cAAA,MAACtC;YAAQuC,YAAY;YAACC,UAAS;YAASC,QAAO;;8BAC3C,KAACzC,QAAQ0C,MAAM;8BACX,cAAA,KAAC9C;wBAAO+C,SAAS9B;kCAAgB,CAAC,EAAED,MAAM,EACtCE,wBAAwB,CAAC,EAAE,EAAEe,qBAAqB,CAAC,CAAC,GAAG,GAC1D,CAAC;;;8BAEN,MAAC7B,QAAQ4C,QAAQ;oBAACC,KAAK;;sCACnB,KAAC5C,WAAW6C,QAAQ;4BAACC,KAAK;sCACtB,cAAA,KAAC7C;0CACIsB,gBAAgBwB,GAAG,CAAC,CAACtB;oCAClB,MAAMuB,aACFpB,wBAAwBb,wBAAwB,CAACU,OAAOI,YAAY;oCACxE,qBACI,KAAC3B;wCAAQS,OAAOM;wCAAqBgC,UAAU,CAACD;wCAAYT,UAAS;kDACjE,cAAA,KAACW;sDACG,cAAA,KAACtD;gDAEGe,OAAOO,aAAa,CAACO,OAAOE,EAAE,CAAC,IAAIF,OAAOE,EAAE;gDAC5CP,MAAMK,OAAOE,EAAE;gDACfwB,SAAS1B,OAAOI,YAAY;gDAC5BoB,UAAUD;gDACVI,UAAU3B,OAAO4B,0BAA0B;+CALtC5B,OAAOE,EAAE;;;gCAUlC;;;wBAGPZ,sCACG;;8CACI,KAAClB;oCAAQyD,IAAG;oCAAKC,IAAG;;gCACnBvC;;;;;;;;AAO7B,EAAE"}
+{"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"],"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"}

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

@@ -1,4 +1,31 @@
-import { FunctionComponent } from 'react';
-import { TableDateRangePickerProps } from './TableDateRangePicker.types';
-export declare const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps>;
+import { BoxProps, Factory } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { DateRangePickerInlineCalendarProps, DateRangePickerPreset } from '../../date-range-picker';
+export type TableDateRangePickerStylesNames = 'dateRangeRoot';
+export interface TableDateRangePickerProps extends BoxProps, CompoundStylesApiProps<TableDateRangePickerFactory>, Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {
+    /**
+     * An object containing date presets.
+     * If empty the preset dropdown won't be shown
+     *
+     * @example
+     * {
+     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},
+     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}
+     * }
+     * @default {}
+     */
+    presets?: Record<string, DateRangePickerPreset>;
+}
+export type TableDateRangePickerFactory = Factory<{
+    props: TableDateRangePickerProps;
+    ref: HTMLDivElement;
+    stylesNames: TableDateRangePickerStylesNames;
+    compound: true;
+}>;
+export declare const TableDateRangePicker: import("@mantine/core").MantineComponent<{
+    props: TableDateRangePickerProps;
+    ref: HTMLDivElement;
+    stylesNames: TableDateRangePickerStylesNames;
+    compound: true;
+}>;
 //# sourceMappingURL=TableDateRangePicker.d.ts.map

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":"AAIA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAOxC,OAAO,EAAC,yBAAyB,EAAC,MAAM,8BAA8B,CAAC;AAEvE,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,CAsD7E,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,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"}

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

@@ -1,78 +1,71 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CalendarSize24Px } from '@coveord/plasma-react-icons';
-import { Grid, Group, Popover, Text } from '@mantine/core';
-import { useToggle } from '@mantine/hooks';
+import { CalendarSize16Px } from '@coveord/plasma-react-icons';
+import { Grid, InputBase, Popover, factory, useProps } from '@mantine/core';
 import dayjs from 'dayjs';
-import { Button } from '../../button';
+import { useState } from 'react';
 import { DateRangePickerInlineCalendar } from '../../date-range-picker';
-import { TableComponentsOrder } from '../Table.styles';
-import { useTable } from '../TableContext';
-import useStyles from './TableDateRangePicker.styles';
-export const TableDateRangePicker = ({ presets = {}, rangeCalendarProps, classNames, styles, unstyled, ...others })=>{
-    const { classes } = useStyles(null, {
-        name: 'TableDateRangePicker',
-        classNames,
-        styles,
-        unstyled
-    });
-    const [opened, toggleOpened] = useToggle();
+import { TableComponentsOrder } from '../Table';
+import { useTable, useTableStyles } from '../TableContext';
+const defaultProps = {
+    presets: {}
+};
+export const TableDateRangePicker = factory((props, ref)=>{
+    const ctx = useTableStyles();
+    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);
-        toggleOpened(false);
+        setOpened(false);
     };
     const onCancel = ()=>{
-        toggleOpened(false);
+        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 stylesApiProps = {
+        classNames,
+        styles
+    };
     return /*#__PURE__*/ _jsx(Grid.Col, {
         span: "content",
         order: TableComponentsOrder.DateRangePicker,
-        py: "sm",
-        className: classes.root,
+        ref: ref,
+        ...ctx.getStyles('dateRangeRoot', {
+            className,
+            style,
+            ...stylesApiProps
+        }),
         ...others,
-        children: /*#__PURE__*/ _jsxs(Group, {
-            spacing: "xs",
-            className: classes.wrapper,
+        children: /*#__PURE__*/ _jsxs(Popover, {
+            withinPortal: true,
+            opened: opened,
             children: [
-                /*#__PURE__*/ _jsx(Text, {
-                    span: true,
-                    className: classes.label,
-                    children: formattedRange
-                }),
-                /*#__PURE__*/ _jsxs(Popover, {
-                    opened: opened,
-                    onChange: toggleOpened,
-                    withinPortal: true,
-                    children: [
-                        /*#__PURE__*/ _jsx(Popover.Target, {
-                            children: /*#__PURE__*/ _jsx(Button, {
-                                variant: "outline",
-                                color: "gray",
-                                onClick: ()=>toggleOpened(),
-                                px: "xs",
-                                children: /*#__PURE__*/ _jsx(CalendarSize24Px, {
-                                    width: 24,
-                                    height: 24
-                                })
-                            })
+                /*#__PURE__*/ _jsx(Popover.Target, {
+                    children: /*#__PURE__*/ _jsx(InputBase, {
+                        component: "button",
+                        leftSection: /*#__PURE__*/ _jsx(CalendarSize16Px, {
+                            height: 16
                         }),
-                        /*#__PURE__*/ _jsx(Popover.Dropdown, {
-                            p: 0,
-                            children: /*#__PURE__*/ _jsx(DateRangePickerInlineCalendar, {
-                                initialRange: form.values.dateRange,
-                                onApply: onApply,
-                                onCancel: onCancel,
-                                presets: presets,
-                                rangeCalendarProps: rangeCalendarProps
-                            })
-                        })
-                    ]
+                        miw: 220,
+                        onClick: ()=>setOpened(true),
+                        children: dateRangeInitialized ? formattedRange : 'Select date range'
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Popover.Dropdown, {
+                    p: 0,
+                    children: /*#__PURE__*/ _jsx(DateRangePickerInlineCalendar, {
+                        initialRange: form.values.dateRange,
+                        onApply: onApply,
+                        onCancel: onCancel,
+                        presets: presets,
+                        rangeCalendarProps: rangeCalendarProps
+                    })
                 })
             ]
         })
     });
-};
+});
 
 //# sourceMappingURL=TableDateRangePicker.js.map

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 {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Grid, Group, Popover, Text} from '@mantine/core';\nimport {useToggle} from '@mantine/hooks';\nimport dayjs from 'dayjs';\nimport {FunctionComponent} from 'react';\n\nimport {Button} from '../../button';\nimport {DateRangePickerInlineCalendar, DateRangePickerValue} from '../../date-range-picker';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableDateRangePicker.styles';\nimport {TableDateRangePickerProps} from './TableDateRangePicker.types';\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","Grid","Group","Popover","Text","useToggle","dayjs","Button","DateRangePickerInlineCalendar","TableComponentsOrder","useTable","useStyles","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","root","spacing","wrapper","label","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,SAAQC,SAAS,QAAO,iBAAiB;AACzC,OAAOC,WAAW,QAAQ;AAG1B,SAAQC,MAAM,QAAO,eAAe;AACpC,SAAQC,6BAA6B,QAA6B,0BAA0B;AAC5F,SAAQC,oBAAoB,QAAO,kBAAkB;AACrD,SAAQC,QAAQ,QAAO,kBAAkB;AACzC,OAAOC,eAAe,gCAAgC;AAGtD,OAAO,MAAMC,uBAAqE,CAAC,EAC/EC,UAAU,CAAC,CAAC,EACZC,kBAAkB,EAClBC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACR,GAAGC,QACN;IACG,MAAM,EAACC,OAAO,EAAC,GAAGR,UAAU,MAAM;QAACS,MAAM;QAAwBL;QAAYC;QAAQC;IAAQ;IAC7F,MAAM,CAACI,QAAQC,aAAa,GAAGjB;IAC/B,MAAM,EAACkB,IAAI,EAAC,GAAGb;IAEf,MAAMc,UAAU,CAACC;QACbF,KAAKG,aAAa,CAAC,aAAaD;QAChCH,aAAa;IACjB;IACA,MAAMK,WAAW;QACbL,aAAa;IACjB;IAEA,MAAMM,aAAa,CAACC,OAAevB,MAAMuB,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;IAE1G,qBACI,KAAChC,KAAKiC,GAAG;QACLC,MAAK;QACLC,OAAO3B,qBAAqB4B,eAAe;QAC3CC,IAAG;QACHC,WAAWpB,QAAQqB,IAAI;QACtB,GAAGtB,MAAM;kBAEV,cAAA,MAAChB;YAAMuC,SAAQ;YAAKF,WAAWpB,QAAQuB,OAAO;;8BAC1C,KAACtC;oBAAK+B,IAAI;oBAACI,WAAWpB,QAAQwB,KAAK;8BAC9BZ;;8BAEL,MAAC5B;oBAAQkB,QAAQA;oBAAQuB,UAAUtB;oBAAcuB,YAAY;;sCACzD,KAAC1C,QAAQ2C,MAAM;sCACX,cAAA,KAACvC;gCAAOwC,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS,IAAM3B;gCAAgB4B,IAAG;0CACrE,cAAA,KAAClD;oCAAiBmD,OAAO;oCAAIC,QAAQ;;;;sCAG7C,KAACjD,QAAQkD,QAAQ;4BAACC,GAAG;sCACjB,cAAA,KAAC9C;gCACG+C,cAAchC,KAAKS,MAAM,CAACC,SAAS;gCACnCT,SAASA;gCACTG,UAAUA;gCACVd,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD,EAAE"}
+{"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"],"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"}

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

@@ -1,4 +1,24 @@
-import { FunctionComponent } from 'react';
-import { TableFilterProps } from './TableFilter.types';
-export declare const TableFilter: FunctionComponent<TableFilterProps>;
+import { BoxProps, Factory } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+export type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';
+export interface TableFilterProps extends BoxProps, CompoundStylesApiProps<TableFilterFactory> {
+    /**
+     * The placeholder for the filter input
+     *
+     * @default "Search by any field"
+     */
+    placeholder?: string;
+}
+export type TableFilterFactory = Factory<{
+    props: TableFilterProps;
+    ref: HTMLDivElement;
+    stylesNames: TableFilterStylesNames;
+    compound: true;
+}>;
+export declare const TableFilter: import("@mantine/core").MantineComponent<{
+    props: TableFilterProps;
+    ref: HTMLDivElement;
+    stylesNames: TableFilterStylesNames;
+    compound: true;
+}>;
 //# sourceMappingURL=TableFilter.d.ts.map

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":"AAEA,OAAO,EAAqB,iBAAiB,EAAyC,MAAM,OAAO,CAAC;AAMpG,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAErD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA0D3D,CAAC"}
+{"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"}

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

@@ -1,18 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CrossSize16Px, FilterSize16Px } from '@coveord/plasma-react-icons';
-import { ActionIcon, Grid, TextInput } from '@mantine/core';
-import { useEffect, useState } from 'react';
+import { ActionIcon, factory, Grid, TextInput, useProps } from '@mantine/core';
 import { useDebouncedValue, useDidUpdate } from '@mantine/hooks';
-import { TableComponentsOrder } from '../Table.styles';
-import { useTable } from '../TableContext';
-import useStyles from './TableFilter.styles';
-export const TableFilter = ({ placeholder = 'Search by any field', classNames, styles, unstyled, ...others })=>{
-    const { classes } = useStyles(null, {
-        name: 'TableFilter',
-        classNames,
-        styles,
-        unstyled
-    });
+import { useEffect, useState } from 'react';
+import { TableComponentsOrder } from '../Table';
+import { useTable, useTableStyles } from '../TableContext';
+const defaultProps = {
+    placeholder: 'Search by any field'
+};
+export const TableFilter = factory((props, ref)=>{
+    const ctx = useTableStyles();
+    const { placeholder, classNames, className, styles, style, vars, ...others } = useProps('PlasmaTableFilter', defaultProps, props);
     const { state, setState } = useTable();
     const [filter, setFilter] = useState(state.globalFilter);
     const [debounced, cancel] = useDebouncedValue(filter, 300);
@@ -41,30 +39,39 @@ export const TableFilter = ({ placeholder = 'Search by any field', classNames, s
     }, [
         state.globalFilter
     ]);
+    const stylesApiProps = {
+        classNames,
+        styles
+    };
     return /*#__PURE__*/ _jsx(Grid.Col, {
         span: "content",
         order: TableComponentsOrder.Filter,
-        py: "sm",
-        className: classes.root,
+        ref: ref,
+        ...ctx.getStyles('filterRoot', {
+            className,
+            style,
+            ...stylesApiProps
+        }),
+        ...others,
         children: /*#__PURE__*/ _jsx(TextInput, {
-            className: classes.wrapper,
+            ...ctx.getStyles('filterWrapper', stylesApiProps),
             placeholder: placeholder,
             autoComplete: "off",
-            mb: "md",
             rightSection: filter ? /*#__PURE__*/ _jsx(ActionIcon, {
                 onClick: handleClear,
+                color: "gray",
+                variant: "subtle",
                 children: /*#__PURE__*/ _jsx(CrossSize16Px, {
                     height: 16
                 })
             }) : /*#__PURE__*/ _jsx(FilterSize16Px, {
                 height: 16,
-                className: classes.empty
+                ...ctx.getStyles('filterEmpty', stylesApiProps)
             }),
             value: filter,
-            onChange: handleChange,
-            ...others
+            onChange: handleChange
         })
     });
-};
+});
 
 //# sourceMappingURL=TableFilter.js.map

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, Grid, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler, useEffect, useState} from 'react';\n\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableFilter.styles';\nimport {TableFilterProps} from './TableFilter.types';\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    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    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Filter} py=\"sm\" className={classes.root}>\n            <TextInput\n                className={classes.wrapper}\n                placeholder={placeholder}\n                autoComplete=\"off\"\n                mb=\"md\"\n                rightSection={\n                    filter ? (\n                        <ActionIcon onClick={handleClear}>\n                            <CrossSize16Px height={16} />\n                        </ActionIcon>\n                    ) : (\n                        <FilterSize16Px height={16} className={classes.empty} />\n                    )\n                }\n                value={filter}\n                onChange={handleChange}\n                {...others}\n            />\n        </Grid.Col>\n    );\n};\n"],"names":["CrossSize16Px","FilterSize16Px","ActionIcon","Grid","TextInput","useEffect","useState","useDebouncedValue","useDidUpdate","TableComponentsOrder","useTable","useStyles","TableFilter","placeholder","classNames","styles","unstyled","others","classes","name","state","setState","filter","setFilter","globalFilter","debounced","cancel","prevState","pagination","pageIndex","pageSize","handleChange","event","value","currentTarget","handleClear","Col","span","order","Filter","py","className","root","wrapper","autoComplete","mb","rightSection","onClick","height","empty","onChange"],"mappings":";AAAA,SAAQA,aAAa,EAAEC,cAAc,QAAO,8BAA8B;AAC1E,SAAQC,UAAU,EAAEC,IAAI,EAAEC,SAAS,QAAO,gBAAgB;AAC1D,SAAkEC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAEpG,SAAQC,iBAAiB,EAAEC,YAAY,QAAO,iBAAiB;AAC/D,SAAQC,oBAAoB,QAAO,kBAAkB;AACrD,SAAQC,QAAQ,QAAO,kBAAkB;AACzC,OAAOC,eAAe,uBAAuB;AAG7C,OAAO,MAAMC,cAAmD,CAAC,EAC7DC,cAAc,qBAAqB,EACnCC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACR,GAAGC,QACN;IACG,MAAM,EAACC,OAAO,EAAC,GAAGP,UAAU,MAAM;QAACQ,MAAM;QAAeL;QAAYC;QAAQC;IAAQ;IACpF,MAAM,EAACI,KAAK,EAAEC,QAAQ,EAAC,GAAGX;IAC1B,MAAM,CAACY,QAAQC,UAAU,GAAGjB,SAASc,MAAMI,YAAY;IACvD,MAAM,CAACC,WAAWC,OAAO,GAAGnB,kBAAkBe,QAAQ;IAEtDd,aAAa;QACTa,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;IAEAlB,UAAU;QACNkB,UAAUH,MAAMI,YAAY;IAChC,GAAG;QAACJ,MAAMI,YAAY;KAAC;IAEvB,qBACI,KAACrB,KAAKiC,GAAG;QAACC,MAAK;QAAUC,OAAO7B,qBAAqB8B,MAAM;QAAEC,IAAG;QAAKC,WAAWvB,QAAQwB,IAAI;kBACxF,cAAA,KAACtC;YACGqC,WAAWvB,QAAQyB,OAAO;YAC1B9B,aAAaA;YACb+B,cAAa;YACbC,IAAG;YACHC,cACIxB,uBACI,KAACpB;gBAAW6C,SAASZ;0BACjB,cAAA,KAACnC;oBAAcgD,QAAQ;;+BAG3B,KAAC/C;gBAAe+C,QAAQ;gBAAIP,WAAWvB,QAAQ+B,KAAK;;YAG5DhB,OAAOX;YACP4B,UAAUnB;YACT,GAAGd,MAAM;;;AAI1B,EAAE"}
+{"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"],"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"}

package/dist/esm/components/table/table-footer/TableFooter.d.ts

@@ -1,4 +1,7 @@
-import { FunctionComponent } from 'react';
-import { TableFooterProps } from './TableFooter.types';
+import { GroupProps } from '@mantine/core';
+import { FunctionComponent, ReactNode } from 'react';
+export interface TableFooterProps extends GroupProps {
+    children?: ReactNode;
+}
 export declare const TableFooter: FunctionComponent<TableFooterProps>;
 //# sourceMappingURL=TableFooter.d.ts.map

package/dist/esm/components/table/table-footer/TableFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-footer/TableFooter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAErD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAI3D,CAAC"}
+{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-footer/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAC,MAAM,eAAe,CAAC;AAChD,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAE3D,CAAC"}

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

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Group } from '@mantine/core';
-export const TableFooter = ({ children, ...others })=>/*#__PURE__*/ _jsx(Group, {
-        position: "apart",
+export const TableFooter = ({ ...others })=>/*#__PURE__*/ _jsx(Group, {
+        justify: "space-between",
         px: "xl",
         py: "md",
-        ...others,
-        children: children
+        ...others
     });
 
 //# sourceMappingURL=TableFooter.js.map

package/dist/esm/components/table/table-footer/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-footer/TableFooter.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {TableFooterProps} from './TableFooter.types';\n\nexport const TableFooter: FunctionComponent<TableFooterProps> = ({children, ...others}) => (\n    <Group position=\"apart\" px=\"xl\" py=\"md\" {...others}>\n        {children}\n    </Group>\n);\n"],"names":["Group","TableFooter","children","others","position","px","py"],"mappings":";AAAA,SAAQA,KAAK,QAAO,gBAAgB;AAIpC,OAAO,MAAMC,cAAmD,CAAC,EAACC,QAAQ,EAAE,GAAGC,QAAO,iBAClF,KAACH;QAAMI,UAAS;QAAQC,IAAG;QAAKC,IAAG;QAAM,GAAGH,MAAM;kBAC7CD;OAEP"}
+{"version":3,"sources":["../../../../../src/components/table/table-footer/TableFooter.tsx"],"sourcesContent":["import {Group, GroupProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nexport interface TableFooterProps extends GroupProps {\n    children?: ReactNode;\n}\n\nexport const TableFooter: FunctionComponent<TableFooterProps> = ({...others}) => (\n    <Group justify=\"space-between\" px=\"xl\" py=\"md\" {...others} />\n);\n"],"names":["Group","TableFooter","others","justify","px","py"],"mappings":";AAAA,SAAQA,KAAK,QAAmB,gBAAgB;AAOhD,OAAO,MAAMC,cAAmD,CAAC,EAAC,GAAGC,QAAO,iBACxE,KAACF;QAAMG,SAAQ;QAAgBC,IAAG;QAAKC,IAAG;QAAM,GAAGH,MAAM;OAC3D"}

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

@@ -1,4 +1,22 @@
-import { FunctionComponent } from 'react';
-import { TableHeaderProps } from './TableHeader.types';
-export declare const TableHeader: FunctionComponent<TableHeaderProps>;
+import { BoxProps, Factory } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+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;
+}
+export type TableHeaderFactory = Factory<{
+    props: TableHeaderProps;
+    ref: HTMLDivElement;
+    stylesNames: TableHeaderStylesNames;
+    compound: true;
+}>;
+export declare const TableHeader: import("@mantine/core").MantineComponent<{
+    props: TableHeaderProps;
+    ref: HTMLDivElement;
+    stylesNames: TableHeaderStylesNames;
+    compound: true;
+}>;
 //# sourceMappingURL=TableHeader.d.ts.map