@coveord/plasma-mantine 52.27.4 → 53.0.1

package/src/components/table/table-column/TableCollapsibleColumn.tsx

@@ -1,20 +1,24 @@
-import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';
-import {ActionIcon} from '@mantine/core';
+import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';
+import {Factory, factory, useProps} from '@mantine/core';
 import {CellContext, ColumnDef} from '@tanstack/table-core';
-import {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';
+import {MouseEvent as ReactMouseEvent, ReactNode} from 'react';
+import {ActionIcon, ActionIconProps} from '../../action-icon';
+import {useTableStyles} from '../TableContext';
 
-const defaultProps: ColumnDef<unknown> = {
+export type TableCollapsibleColumnStylesNames = 'collapsibleIcon';
+
+const sharedProps: ColumnDef<unknown> = {
     id: 'collapsible',
     enableSorting: false,
     header: '',
-    size: 62,
+    size: 84, // 16px padding left + 28px ActionIcon + 40px padding right
 };
 
 /**
  * Generic column to use when your table needs collapsible rows
  */
 export const TableCollapsibleColumn: ColumnDef<unknown> = {
-    ...defaultProps,
+    ...sharedProps,
     cell: (info) => <CollapsibleIcon info={info} />,
 };
 
@@ -22,7 +26,7 @@ export const TableCollapsibleColumn: ColumnDef<unknown> = {
  * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)
  */
 export const TableAccordionColumn: ColumnDef<unknown> = {
-    ...defaultProps,
+    ...sharedProps,
     cell: (info) => {
         const onToggle = () => {
             // close all other rows when the current row not is expanded
@@ -35,10 +39,32 @@ export const TableAccordionColumn: ColumnDef<unknown> = {
     },
 };
 
-const CollapsibleIcon: FunctionComponent<{
+interface CollapsibleIconProps extends ActionIconProps {
     info: CellContext<unknown, unknown>;
     onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;
-}> = ({info, onToggle}) => {
+    iconExpanded?: ReactNode;
+    iconCollapsed?: ReactNode;
+}
+
+type TableCollapsibleColumnFactory = Factory<{
+    props: CollapsibleIconProps;
+    ref: HTMLButtonElement;
+    stylesNames: TableCollapsibleColumnStylesNames;
+    compound: true;
+}>;
+
+const defaultProps: Partial<CollapsibleIconProps> = {
+    iconExpanded: <ArrowHeadUpSize16Px height={16} />,
+    iconCollapsed: <ArrowHeadDownSize16Px height={16} />,
+};
+
+const CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {
+    const ctx = useTableStyles();
+    const {info, onToggle, iconExpanded, iconCollapsed, classNames, className, style, styles, ...others} = useProps(
+        'PlasmaTableCollapsibleColumn',
+        defaultProps,
+        props,
+    );
     const handler = info.row.getToggleExpandedHandler();
     const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {
         e.stopPropagation();
@@ -46,8 +72,16 @@ const CollapsibleIcon: FunctionComponent<{
         handler();
     };
     return info.row.getCanExpand() ? (
-        <ActionIcon onClick={onClick} variant="subtle" radius="sm">
-            {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}
+        <ActionIcon
+            ref={ref}
+            onClick={onClick}
+            variant="subtle"
+            color="gray"
+            radius="sm"
+            {...ctx.getStyles('collapsibleIcon', {className, classNames, styles, style})}
+            {...others}
+        >
+            {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}
         </ActionIcon>
     ) : null;
-};
+});

package/src/components/table/table-column/TableSelectableColumn.tsx

@@ -15,7 +15,7 @@ export const TableSelectableColumn: ColumnDef<unknown> = {
                     checked={table.getIsAllPageRowsSelected()}
                     indeterminate={table.getIsSomePageRowsSelected()}
                     onChange={table.getToggleAllPageRowsSelectedHandler()}
-                    sx={{display: 'flex'}}
+                    style={{display: 'flex'}}
                     aria-label={label}
                 />
             </Tooltip>
@@ -26,7 +26,7 @@ export const TableSelectableColumn: ColumnDef<unknown> = {
             checked={row.getIsSelected()}
             indeterminate={row.getIsSomeSelected()}
             onChange={row.getToggleSelectedHandler()}
-            sx={{display: 'flex'}}
+            style={{display: 'flex'}}
             aria-label="Select row"
         />
     ),

package/src/components/table/table-columns-selector/TableColumnsSelector.tsx

@@ -1,27 +1,100 @@
-import {Button, Checkbox, Divider, Grid, Popover, ScrollArea, Stack, Tooltip} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {
+    BoxProps,
+    Button,
+    Checkbox,
+    Divider,
+    factory,
+    Factory,
+    Grid,
+    Popover,
+    ScrollArea,
+    Stack,
+    Tooltip,
+    useProps,
+} from '@mantine/core';
+import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {ReactNode} from 'react';
 
-import {TableComponentsOrder} from '../Table.styles';
-import {useTable} from '../TableContext';
-import useStyles from './TableColumnsSelector.styles';
-import {TableColumnsSelectorProps} from './TableColumnsSelector.types';
+import {TableComponentsOrder} from '../Table';
+import {useTable, useTableStyles} from '../TableContext';
+
+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;
+}>;
 
 const COLUMNS_IDS_TO_EXCLUDE = ['collapsible', 'select'];
 
-export const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps> = ({
-    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: Partial<TableColumnsSelectorProps> = {
+    label: 'Edit columns',
+    buttonVariant: 'outline',
+    limitReachedTooltip: 'You have reached the maximum display limit.',
+    showVisibleCountLabel: false,
+};
+
+export const TableColumnsSelector = factory<TableColumnsSelectorFactory>((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, ...COLUMNS_IDS_TO_EXCLUDE];
@@ -34,8 +107,15 @@ export const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps>
         return null;
     }
 
+    const stylesApiProps = {classNames, styles};
+
     return (
-        <Grid.Col span="content" order={TableComponentsOrder.ColumnsSelector} py="sm" className={classes.root}>
+        <Grid.Col
+            span="content"
+            order={TableComponentsOrder.ColumnsSelector}
+            {...ctx.getStyles('columnSelector', {className, style, ...stylesApiProps})}
+            {...others}
+        >
             <Popover withinPortal position="bottom" shadow="md">
                 <Popover.Target>
                     <Button variant={buttonVariant}>{`${label}${
@@ -44,7 +124,7 @@ export const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps>
                 </Popover.Target>
                 <Popover.Dropdown miw={240}>
                     <ScrollArea.Autosize mah={154}>
-                        <Stack>
+                        <Stack {...ctx.getStyles('columnSelectorWrapper', stylesApiProps)}>
                             {filteredColumns.map((column) => {
                                 const isDisabled =
                                     selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible();
@@ -75,4 +155,4 @@ export const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps>
             </Popover>
         </Grid.Col>
     );
-};
+});

package/src/components/table/table-date-range-picker/TableDateRangePicker.tsx

@@ -1,68 +1,102 @@
-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 {BoxProps, Factory, Grid, InputBase, Popover, factory, useProps} from '@mantine/core';
+import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
 import dayjs from 'dayjs';
-import {FunctionComponent} from 'react';
 
-import {Button} from '../../button';
-import {DateRangePickerInlineCalendar, DateRangePickerValue} from '../../date-range-picker';
-import {TableComponentsOrder} from '../Table.styles';
-import {useTable} from '../TableContext';
-import useStyles from './TableDateRangePicker.styles';
-import {TableDateRangePickerProps} from './TableDateRangePicker.types';
+import {useState} from 'react';
+import {
+    DateRangePickerInlineCalendar,
+    DateRangePickerInlineCalendarProps,
+    DateRangePickerPreset,
+    DateRangePickerValue,
+} from '../../date-range-picker';
+import {TableComponentsOrder} from '../Table';
+import {useTable, useTableStyles} from '../TableContext';
 
-export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({
-    presets = {},
-    rangeCalendarProps,
-    classNames,
-    styles,
-    unstyled,
-    ...others
-}) => {
-    const {classes} = useStyles(null, {name: 'TableDateRangePicker', classNames, styles, unstyled});
-    const [opened, toggleOpened] = useToggle();
+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;
+}>;
+
+const defaultProps: Partial<TableDateRangePickerProps> = {
+    presets: {},
+};
+
+export const TableDateRangePicker = factory<TableDateRangePickerFactory>((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: DateRangePickerValue) => {
         form.setFieldValue('dateRange', dates);
-        toggleOpened(false);
+        setOpened(false);
     };
     const onCancel = () => {
-        toggleOpened(false);
+        setOpened(false);
     };
 
     const formatDate = (date: 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 (
         <Grid.Col
             span="content"
             order={TableComponentsOrder.DateRangePicker}
-            py="sm"
-            className={classes.root}
+            ref={ref}
+            {...ctx.getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}
             {...others}
         >
-            <Group spacing="xs" className={classes.wrapper}>
-                <Text span className={classes.label}>
-                    {formattedRange}
-                </Text>
-                <Popover opened={opened} onChange={toggleOpened} withinPortal>
-                    <Popover.Target>
-                        <Button variant="outline" color="gray" onClick={() => toggleOpened()} px="xs">
-                            <CalendarSize24Px width={24} height={24} />
-                        </Button>
-                    </Popover.Target>
-                    <Popover.Dropdown p={0}>
-                        <DateRangePickerInlineCalendar
-                            initialRange={form.values.dateRange}
-                            onApply={onApply}
-                            onCancel={onCancel}
-                            presets={presets}
-                            rangeCalendarProps={rangeCalendarProps}
-                        />
-                    </Popover.Dropdown>
-                </Popover>
-            </Group>
+            <Popover withinPortal opened={opened}>
+                <Popover.Target>
+                    <InputBase
+                        component="button"
+                        leftSection={<CalendarSize16Px height={16} />}
+                        miw={220}
+                        onClick={() => setOpened(true)}
+                    >
+                        {dateRangeInitialized ? formattedRange : 'Select date range'}
+                    </InputBase>
+                </Popover.Target>
+                <Popover.Dropdown p={0}>
+                    <DateRangePickerInlineCalendar
+                        initialRange={form.values.dateRange}
+                        onApply={onApply}
+                        onCancel={onCancel}
+                        presets={presets}
+                        rangeCalendarProps={rangeCalendarProps}
+                    />
+                </Popover.Dropdown>
+            </Popover>
         </Grid.Col>
     );
-};
+});

package/src/components/table/table-filter/TableFilter.tsx

@@ -1,21 +1,41 @@
 import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, Grid, TextInput} from '@mantine/core';
-import {ChangeEventHandler, FunctionComponent, MouseEventHandler, useEffect, useState} from 'react';
-
+import {ActionIcon, BoxProps, factory, Factory, Grid, TextInput, useProps} from '@mantine/core';
+import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
 import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
-import {TableComponentsOrder} from '../Table.styles';
-import {useTable} from '../TableContext';
-import useStyles from './TableFilter.styles';
-import {TableFilterProps} from './TableFilter.types';
+import {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';
+
+import {TableComponentsOrder} from '../Table';
+import {useTable, useTableStyles} from '../TableContext';
+
+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 const TableFilter: FunctionComponent<TableFilterProps> = ({
-    placeholder = 'Search by any field',
-    classNames,
-    styles,
-    unstyled,
-    ...others
-}) => {
-    const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});
+const defaultProps: Partial<TableFilterProps> = {
+    placeholder: 'Search by any field',
+};
+
+export const TableFilter = factory<TableFilterFactory>((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);
@@ -44,26 +64,32 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
         setFilter(state.globalFilter);
     }, [state.globalFilter]);
 
+    const stylesApiProps = {classNames, styles};
+
     return (
-        <Grid.Col span="content" order={TableComponentsOrder.Filter} py="sm" className={classes.root}>
+        <Grid.Col
+            span="content"
+            order={TableComponentsOrder.Filter}
+            ref={ref}
+            {...ctx.getStyles('filterRoot', {className, style, ...stylesApiProps})}
+            {...others}
+        >
             <TextInput
-                className={classes.wrapper}
+                {...ctx.getStyles('filterWrapper', stylesApiProps)}
                 placeholder={placeholder}
                 autoComplete="off"
-                mb="md"
                 rightSection={
                     filter ? (
-                        <ActionIcon onClick={handleClear}>
+                        <ActionIcon onClick={handleClear} color="gray" variant="subtle">
                             <CrossSize16Px height={16} />
                         </ActionIcon>
                     ) : (
-                        <FilterSize16Px height={16} className={classes.empty} />
+                        <FilterSize16Px height={16} {...ctx.getStyles('filterEmpty', stylesApiProps)} />
                     )
                 }
                 value={filter}
                 onChange={handleChange}
-                {...others}
             />
         </Grid.Col>
     );
-};
+});

package/src/components/table/table-footer/TableFooter.tsx

@@ -1,9 +1,10 @@
-import {Group} from '@mantine/core';
-import {FunctionComponent} from 'react';
-import {TableFooterProps} from './TableFooter.types';
+import {Group, GroupProps} from '@mantine/core';
+import {FunctionComponent, ReactNode} from 'react';
 
-export const TableFooter: FunctionComponent<TableFooterProps> = ({children, ...others}) => (
-    <Group position="apart" px="xl" py="md" {...others}>
-        {children}
-    </Group>
+export interface TableFooterProps extends GroupProps {
+    children?: ReactNode;
+}
+
+export const TableFooter: FunctionComponent<TableFooterProps> = ({...others}) => (
+    <Group justify="space-between" px="xl" py="md" {...others} />
 );

package/src/components/table/table-header/TableHeader.tsx

@@ -1,58 +1,76 @@
 import {CrossSize16Px} from '@coveord/plasma-react-icons';
-import {Grid, Tooltip} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {Box, BoxProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';
+import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {ReactNode} from 'react';
 
 import {Button} from '../../button';
 import {TableLayoutControl} from '../layouts/TableLayoutControl';
-import {TableComponentsOrder} from '../Table.styles';
-import {useTable} from '../TableContext';
-import useStyles from './TableHeader.styles';
-import {TableHeaderProps} from './TableHeader.types';
-
-export const TableHeader: FunctionComponent<TableHeaderProps> = ({
-    classNames,
-    styles,
-    unstyled,
-    children,
-    ...others
-}) => {
+import {TableComponentsOrder} from '../Table';
+import {useTable, useTableStyles} from '../TableContext';
+
+export type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';
+
+export interface TableHeaderProps
+    extends Omit<BoxProps, 'classNames' | 'styles' | 'vars'>,
+        CompoundStylesApiProps<TableHeaderFactory> {
+    /* Children of header (ie: actions, datepicker, etc.) */
+    children?: ReactNode;
+    unselectAllLabel?: string;
+    selectedCountLabel?: (count: number) => string;
+}
+
+export type TableHeaderFactory = Factory<{
+    props: TableHeaderProps;
+    ref: HTMLDivElement;
+    stylesNames: TableHeaderStylesNames;
+    compound: true;
+}>;
+
+const defaultProps: Partial<TableHeaderProps> = {
+    unselectAllLabel: 'Unselect all',
+    selectedCountLabel: (count) => `${count} selected`,
+};
+
+export const TableHeader = factory<TableHeaderFactory>((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 {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
     const selectedRows = getSelectedRows();
 
+    const stylesApiProps = {classNames, styles};
+    const innerStyles = ctx.getStyles('headerGridInner', stylesApiProps);
+    const gridStyles = ctx.getStyles('headerGrid', stylesApiProps);
+
     return (
-        <Grid
-            justify="flex-start"
-            align="center"
-            gutter="sm"
-            p={0}
-            pl="md"
-            pr="lg"
-            m={0}
-            className={classes.root}
-            {...others}
-        >
-            {multiRowSelectionEnabled && selectedRows.length > 0 ? (
-                <Grid.Col
-                    span="auto"
-                    py="sm"
-                    className={classes.multiSelectInfo}
-                    order={TableComponentsOrder.MultiSelectInfo}
-                >
-                    <Tooltip label="Unselect all">
-                        <Button
-                            onClick={clearSelection}
-                            variant="subtle"
-                            disabled={disableRowSelection}
-                            leftIcon={<CrossSize16Px height={16} />}
-                        >
-                            {selectedRows.length} selected
-                        </Button>
-                    </Tooltip>
-                </Grid.Col>
-            ) : null}
-            {children}
-            <TableLayoutControl />
-        </Grid>
+        <Box ref={ref} {...ctx.getStyles('headerRoot', {className, style, ...stylesApiProps})} {...others}>
+            <Grid
+                justify="flex-start"
+                align="center"
+                classNames={{inner: innerStyles.className, root: gridStyles.className}}
+                styles={{inner: innerStyles.style, root: gridStyles.style}}
+            >
+                {multiRowSelectionEnabled && selectedRows.length > 0 ? (
+                    <Grid.Col
+                        span="auto"
+                        {...ctx.getStyles('headerCol', stylesApiProps)}
+                        order={TableComponentsOrder.MultiSelectInfo}
+                    >
+                        <Tooltip label={unselectAllLabel}>
+                            <Button
+                                onClick={clearSelection}
+                                variant="subtle"
+                                disabled={disableRowSelection}
+                                leftSection={<CrossSize16Px height={16} />}
+                            >
+                                {selectedCountLabel(selectedRows.length)}
+                            </Button>
+                        </Tooltip>
+                    </Grid.Col>
+                ) : null}
+                {children}
+                <TableLayoutControl />
+            </Grid>
+        </Box>
     );
-};
+});