@coveord/plasma-mantine 52.0.0 → 52.2.0

package/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-
-import {CheckSize24Px, CopySize24Px} from '@coveord/plasma-react-icons';
-import {TextInput, CopyButton, Tooltip, ActionIcon, createStyles} from '@mantine/core';
+import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
+import {ActionIcon, CopyButton, createStyles, TextInput, Tooltip} from '@mantine/core';
 
 export interface CopyToClipboardProps {
     /**
@@ -14,6 +12,10 @@ export interface CopyToClipboardProps {
      * @default false
      */
     withLabel?: boolean;
+    /**
+     * Called each time the value is copied to the clipboard
+     */
+    onCopy?: () => void;
 }
 
 const useStyles = createStyles((theme) => ({
@@ -22,19 +24,25 @@ const useStyles = createStyles((theme) => ({
     },
 }));
 
-const CopyToClipboardButton: React.FunctionComponent<{value: string}> = ({value}) => (
+const CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (
     <CopyButton value={value} timeout={2000}>
         {({copied, copy}) => (
-            <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="top">
-                <ActionIcon color={copied ? 'teal' : 'gray'} onClick={copy}>
-                    {copied ? <CheckSize24Px /> : <CopySize24Px />}
+            <Tooltip label={copied ? 'Copied' : 'Copy'}>
+                <ActionIcon
+                    color={copied ? 'success' : 'gray'}
+                    onClick={() => {
+                        copy();
+                        onCopy?.();
+                    }}
+                >
+                    {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}
                 </ActionIcon>
             </Tooltip>
         )}
     </CopyButton>
 );
 
-export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({value, withLabel}) => {
+export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {
     const {classes} = useStyles();
 
     return withLabel ? (
@@ -42,11 +50,11 @@ export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({
             classNames={{
                 input: classes.input,
             }}
-            value={value}
+            value={others.value}
             readOnly
-            rightSection={<CopyToClipboardButton value={value} />}
+            rightSection={<CopyToClipboardButton {...others} />}
         />
     ) : (
-        <CopyToClipboardButton value={value} />
+        <CopyToClipboardButton {...others} />
     );
 };

package/src/components/copyToClipboard/__tests__/CopyToClipboard.spec.tsx

@@ -1,9 +1,9 @@
-import {render, screen} from '@test-utils';
+import {render, screen, userEvent} from '@test-utils';
 
 import {CopyToClipboard} from '../CopyToClipboard';
 
 describe('CopyToClipboard', () => {
-    it('should display only a button by default', () => {
+    it('displays only a button by default', () => {
         const testValue = 'text value';
         render(<CopyToClipboard value={testValue} />);
 
@@ -22,4 +22,14 @@ describe('CopyToClipboard', () => {
             expect(document.querySelector('input')).toBeInTheDocument();
         });
     });
+
+    it('calls onCopy callback when the users copy the value to the clipboard', async () => {
+        const onCopySpy = vi.fn();
+        const user = userEvent.setup();
+        render(<CopyToClipboard value="whatever" onCopy={onCopySpy} />);
+
+        await user.click(screen.getByRole('button', {name: /copy/i}));
+
+        expect(onCopySpy).toHaveBeenCalled();
+    });
 });

package/src/components/header/Header.tsx

@@ -1,5 +1,5 @@
 import {QuestionSize16Px} from '@coveord/plasma-react-icons';
-import {Anchor, Breadcrumbs, DefaultProps, Divider, Flex, Group, Stack, Text, Title, Tooltip} from '@mantine/core';
+import {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';
 import {Children, FunctionComponent, ReactElement, ReactNode} from 'react';
 
 export interface HeaderProps extends DefaultProps {
@@ -48,12 +48,10 @@ export const Header: HeaderType = ({description, borderBottom, children, variant
             >
                 <Stack spacing={0}>
                     {breadcrumbs}
-                    <Flex align="center">
-                        <Title order={variant === 'page' ? 1 : 3} color={variant === 'page' ? 'gray.5' : undefined}>
-                            {otherChildren}
-                        </Title>
+                    <Title order={variant === 'page' ? 1 : 3} color={variant === 'page' ? 'gray.5' : undefined}>
+                        {otherChildren}
                         {docAnchor}
-                    </Flex>
+                    </Title>
                     <Text size={variant === 'page' ? 'md' : 'sm'} color="gray.6">
                         {description}
                     </Text>
@@ -92,7 +90,7 @@ export interface HeaderDocAnchorProps {
 
 const HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = ({href: docLink, label: docLinkTooltipLabel}) => (
     <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position="right">
-        <Anchor inline href={docLink} target="_blank" ml="xs">
+        <Anchor inline href={docLink} target="_blank" ml="xs" style={{verticalAlign: 'middle'}}>
             <QuestionSize16Px height={16} />
         </Anchor>
     </Tooltip>

package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -37,15 +37,11 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
           Three
         </a>
       </div>
-      <div
-        class="mantine-xg7kom"
+      <h1
+        class="mantine-Text-root mantine-Title-root mantine-d1yoif"
       >
-        <h1
-          class="mantine-Text-root mantine-Title-root mantine-d1yoif"
-        >
-          Title
-        </h1>
-      </div>
+        Title
+      </h1>
       <div
         class="mantine-Text-root mantine-1w25z6f"
       />

package/src/components/table/Table.styles.ts

@@ -1,11 +1,10 @@
 import {createStyles} from '@mantine/core';
 
 interface TableStylesParams {
-    hasHeader: boolean;
     multiRowSelectionEnabled: boolean;
 }
 
-const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {
+const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled}) => {
     const rowBackgroundColor =
         theme.colorScheme === 'dark'
             ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
@@ -13,7 +12,10 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
     return {
         table: {
             width: '100%',
-            '& td:first-of-type, th:first-of-type > *': {
+            '& thead tr th': {
+                borderBottom: 'none',
+            },
+            '& td:first-of-type': {
                 paddingLeft: theme.spacing.xl,
             },
             '& tbody td': {
@@ -23,7 +25,7 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
 
         header: {
             position: 'sticky',
-            top: hasHeader ? 69 : 0,
+            top: 0,
             backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
             transition: 'box-shadow 150ms ease',
             zIndex: 1,
@@ -34,7 +36,13 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
                 left: 0,
                 right: 0,
                 bottom: 0,
-                borderBottom: `1px solid ${theme.colors.gray[2]}`,
+                borderBottom: `1px solid ${theme.colors.gray[3]}`,
+            },
+        },
+
+        headerColumns: {
+            '& th:first-of-type > *': {
+                paddingLeft: theme.spacing.xl,
             },
         },
 
@@ -55,4 +63,12 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
     };
 });
 
+export const TableComponentsOrder = {
+    MultiSelectInfo: 5,
+    Actions: 4,
+    Predicate: 3,
+    Filter: 2,
+    DateRangePicker: 1,
+};
+
 export default useStyles;

package/src/components/table/Table.tsx

@@ -18,6 +18,7 @@ import useStyles from './Table.styles';
 import {TableFormType, TableProps, TableState, TableType} from './Table.types';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
+import {TableConsumer} from './TableConsumer';
 import {TableContext} from './TableContext';
 import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
@@ -26,7 +27,6 @@ import {TableHeader} from './TableHeader';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
-import {TableConsumer} from './TableConsumer';
 import {TableSelectableColumn} from './TableSelectableColumn';
 import {Th} from './Th';
 import {useRowSelection} from './useRowSelection';
@@ -62,7 +62,7 @@ export const Table: TableType = <T,>({
     const form = useForm<TableFormType>({
         initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},
     });
-    const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});
+    const {cx, classes} = useStyles({multiRowSelectionEnabled});
 
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),
@@ -196,11 +196,17 @@ export const Table: TableType = <T,>({
                     noDataChildren
                 ) : (
                     <>
-                        {header}
                         <MantineTable className={classes.table} horizontalSpacing="sm" verticalSpacing="xs" pb="sm">
                             <thead className={classes.header}>
+                                {!!header ? (
+                                    <tr>
+                                        <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
+                                            {header}
+                                        </th>
+                                    </tr>
+                                ) : null}
                                 {table.getHeaderGroups().map((headerGroup) => (
-                                    <tr key={headerGroup.id}>
+                                    <tr key={headerGroup.id} className={classes.headerColumns}>
                                         {headerGroup.headers.map((columnHeader) => (
                                             <Th key={columnHeader.id} header={columnHeader} />
                                         ))}

package/src/components/table/TableActions.tsx

@@ -1,5 +1,6 @@
-import {Group} from '@mantine/core';
+import {Grid, Group} from '@mantine/core';
 import {ReactElement, ReactNode} from 'react';
+import {TableComponentsOrder} from './Table.styles';
 
 import {useTable} from './TableContext';
 
@@ -35,10 +36,12 @@ export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement
     }
 
     return (
-        <Group spacing="xs">
-            {multiRowSelectionEnabled
-                ? (children as (data: T[]) => ReactNode)(selectedRows)
-                : (children as (datum: T) => ReactNode)(selectedRows[0])}
-        </Group>
+        <Grid.Col span="content" order={TableComponentsOrder.Actions} py="sm">
+            <Group spacing="xs" style={{display: 'inline-flex'}}>
+                {multiRowSelectionEnabled
+                    ? (children as (data: T[]) => ReactNode)(selectedRows)
+                    : (children as (datum: T) => ReactNode)(selectedRows[0])}
+            </Group>
+        </Grid.Col>
     );
 };

package/src/components/table/TableDateRangePicker.tsx

@@ -1,5 +1,5 @@
 import {CalendarSize24Px} from '@coveord/plasma-react-icons';
-import {Popover} from '@mantine/core';
+import {Grid, Group, Popover, Text} from '@mantine/core';
 import dayjs from 'dayjs';
 import {FunctionComponent, useState} from 'react';
 
@@ -10,6 +10,7 @@ import {
     DateRangePickerPreset,
     DateRangePickerValue,
 } from '../date-range-picker';
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
 interface TableDateRangePickerProps
@@ -47,24 +48,26 @@ export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps>
     const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
 
     return (
-        <>
-            {formatedRange}
-            <Popover opened={opened} onChange={setOpened}>
-                <Popover.Target>
-                    <Button variant="outline" color="gray" onClick={() => setOpened(true)} 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>
-        </>
+        <Grid.Col span="content" order={TableComponentsOrder.DateRangePicker} py="sm">
+            <Group spacing="xs">
+                <Text span>{formatedRange}</Text>
+                <Popover opened={opened} onChange={setOpened}>
+                    <Popover.Target>
+                        <Button variant="outline" color="gray" onClick={() => setOpened(true)} 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>
+        </Grid.Col>
     );
 };

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>
     );
 };

package/src/theme/Theme.tsx

@@ -146,6 +146,7 @@ export const plasmaTheme: MantineThemeOverride = {
                 withArrow: true,
                 withinPortal: true,
                 multiline: true,
+                zIndex: 10000,
             },
         },
         Loader: {