@coveord/plasma-mantine 52.1.0 → 52.2.0

package/src/components/table/TableFilter.tsx

@@ -1,6 +1,7 @@
 import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';
+import {ActionIcon, createStyles, DefaultProps, Grid, Selectors, TextInput} from '@mantine/core';
 import {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';
+import {TableComponentsOrder} from './Table.styles';
 
 import {useTable} from './TableContext';
 
@@ -53,22 +54,24 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
     };
 
     return (
-        <TextInput
-            className={classes.wrapper}
-            placeholder={placeholder}
-            mb="md"
-            rightSection={
-                state.globalFilter ? (
-                    <ActionIcon onClick={handleClear}>
-                        <CrossSize16Px height={16} />
-                    </ActionIcon>
-                ) : (
-                    <SearchSize16Px height={14} className={classes.empty} />
-                )
-            }
-            value={state.globalFilter}
-            onChange={handleChange}
-            {...others}
-        />
+        <Grid.Col span="content" order={TableComponentsOrder.Filter} py="sm">
+            <TextInput
+                className={classes.wrapper}
+                placeholder={placeholder}
+                mb="md"
+                rightSection={
+                    state.globalFilter ? (
+                        <ActionIcon onClick={handleClear}>
+                            <CrossSize16Px height={16} />
+                        </ActionIcon>
+                    ) : (
+                        <SearchSize16Px height={14} className={classes.empty} />
+                    )
+                }
+                value={state.globalFilter}
+                onChange={handleChange}
+                {...others}
+            />
+        </Grid.Col>
     );
 };

package/src/components/table/TableHeader.tsx

@@ -1,18 +1,21 @@
 import {CrossSize16Px} from '@coveord/plasma-react-icons';
-import {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';
+import {createStyles, DefaultProps, Grid, Selectors, Tooltip} from '@mantine/core';
 import {FunctionComponent, ReactNode} from 'react';
 
 import {Button} from '../button';
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
 const useStyles = createStyles((theme) => ({
     root: {
-        position: 'sticky',
-        top: 0,
-        zIndex: 1,
-        backgroundColor: theme.colors.gray[1],
+        flexDirection: 'row-reverse',
+        flexWrap: 'wrap-reverse',
+        background: `repeating-linear-gradient(${theme.colors.gray[1]}, ${theme.colors.gray[1]} 68px, ${theme.colors.gray[3]} 68px, ${theme.colors.gray[3]} 69px)`,
         borderBottom: `1px solid ${theme.colors.gray[3]}`,
     },
+    multiSelectInfo: {
+        justifySelf: 'flex-start',
+    },
 }));
 
 type TableHeaderStylesNames = Selectors<typeof useStyles>;
@@ -30,24 +33,33 @@ export const TableHeader: FunctionComponent<TableHeaderProps> = ({
     const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();
     const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
     const selectedRows = getSelectedRows();
-    return multiRowSelectionEnabled ? (
-        <Group position="apart" className={classes.root}>
-            {selectedRows.length > 0 ? (
-                <Tooltip label="Unselect all">
-                    <Button onClick={clearSelection} ml="lg" variant="subtle" leftIcon={<CrossSize16Px height={16} />}>
-                        {selectedRows.length} selected
-                    </Button>
-                </Tooltip>
-            ) : (
-                <Space />
-            )}
-            <Group position="right" spacing="lg" px="md" py="sm" {...others}>
-                {children}
-            </Group>
-        </Group>
-    ) : (
-        <Group position="right" spacing="lg" px="md" py="sm" className={classes.root} {...others}>
+    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" leftIcon={<CrossSize16Px height={16} />}>
+                            {selectedRows.length} selected
+                        </Button>
+                    </Tooltip>
+                </Grid.Col>
+            ) : null}
             {children}
-        </Group>
+        </Grid>
     );
 };

package/src/components/table/TablePredicate.tsx

@@ -1,5 +1,6 @@
-import {Group, Select, SelectItem, Text} from '@mantine/core';
+import {Grid, Group, Select, SelectItem, Text} from '@mantine/core';
 import {FunctionComponent} from 'react';
+import {TableComponentsOrder} from './Table.styles';
 
 import {useTable} from './TableContext';
 
@@ -29,16 +30,18 @@ export const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data
     };
 
     return (
-        <Group spacing="xs">
-            {label ? <Text>{label}:</Text> : null}
-            <Select
-                withinPortal
-                value={form.values.predicates[id]}
-                onChange={onUpdate}
-                data={data}
-                aria-label={label ?? id}
-                searchable={data.length > 7}
-            />
-        </Group>
+        <Grid.Col span="content" order={TableComponentsOrder.Predicate} py="sm">
+            <Group spacing="xs">
+                {label ? <Text>{label}:</Text> : null}
+                <Select
+                    withinPortal
+                    value={form.values.predicates[id]}
+                    onChange={onUpdate}
+                    data={data}
+                    aria-label={label ?? id}
+                    searchable={data.length > 7}
+                />
+            </Group>
+        </Grid.Col>
     );
 };