@coveord/plasma-mantine 52.6.0 → 52.7.0

package/src/components/table/TableActions.tsx

@@ -1,10 +1,19 @@
-import {Grid, Group} from '@mantine/core';
+import {createStyles, DefaultProps, Grid, Group, Selectors} from '@mantine/core';
 import {ReactElement, ReactNode} from 'react';
-import {TableComponentsOrder} from './Table.styles';
 
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
-interface TableActionsProps<T> {
+const useStyles = createStyles((theme) => ({
+    root: {},
+    wrapper: {
+        display: 'inline-flex',
+    },
+}));
+
+type TableActionsStylesNames = Selectors<typeof useStyles>;
+
+interface TableActionsProps<T> extends DefaultProps<TableActionsStylesNames> {
     /**
      * Function that return components for the selected row or selected rows when multi row selection is enabled
      *
@@ -27,7 +36,14 @@ interface TableActionsProps<T> {
     children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);
 }
 
-export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {
+export const TableActions = <T,>({
+    children,
+    classNames,
+    styles,
+    unstyled,
+    ...others
+}: TableActionsProps<T>): ReactElement => {
+    const {classes} = useStyles(null, {name: 'TableActions', classNames, styles, unstyled});
     const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();
     const selectedRows = getSelectedRows();
 
@@ -36,8 +52,8 @@ export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement
     }
 
     return (
-        <Grid.Col span="content" order={TableComponentsOrder.Actions} py="sm">
-            <Group spacing="xs" style={{display: 'inline-flex'}}>
+        <Grid.Col span="content" order={TableComponentsOrder.Actions} py="sm" className={classes.root} {...others}>
+            <Group spacing="xs" className={classes.wrapper}>
                 {multiRowSelectionEnabled
                     ? (children as (data: T[]) => ReactNode)(selectedRows)
                     : (children as (datum: T) => ReactNode)(selectedRows[0])}

package/src/components/table/TableDateRangePicker.tsx

@@ -1,9 +1,9 @@
 import {CalendarSize24Px} from '@coveord/plasma-react-icons';
-import {Grid, Group, Popover, Text} from '@mantine/core';
+import {createStyles, DefaultProps, Grid, Group, Popover, Selectors, Text} from '@mantine/core';
+import {useToggle} from '@mantine/hooks';
 import dayjs from 'dayjs';
 import {FunctionComponent} from 'react';
 
-import {useToggle} from '@mantine/hooks';
 import {Button} from '../button';
 import {
     DateRangePickerInlineCalendar,
@@ -14,8 +14,16 @@ import {
 import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
+const useStyles = createStyles((theme) => ({
+    root: {},
+    wrapper: {},
+    label: {},
+}));
+
+type TableDateRangePickerStylesNames = Selectors<typeof useStyles>;
 interface TableDateRangePickerProps
-    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {
+    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'>,
+        DefaultProps<TableDateRangePickerStylesNames> {
     /**
      * An object containing date presets.
      * If empty the preset dropdown won't be shown
@@ -33,7 +41,12 @@ interface TableDateRangePickerProps
 export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({
     presets = {},
     rangeCalendarProps,
+    classNames,
+    styles,
+    unstyled,
+    ...others
 }) => {
+    const {classes} = useStyles(null, {name: 'TableDateRangePicker', classNames, styles, unstyled});
     const [opened, toggleOpened] = useToggle();
     const {form} = useTable();
 
@@ -49,9 +62,17 @@ export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps>
     const formattedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
 
     return (
-        <Grid.Col span="content" order={TableComponentsOrder.DateRangePicker} py="sm">
-            <Group spacing="xs">
-                <Text span>{formattedRange}</Text>
+        <Grid.Col
+            span="content"
+            order={TableComponentsOrder.DateRangePicker}
+            py="sm"
+            className={classes.root}
+            {...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">

package/src/components/table/TableFilter.tsx

@@ -1,11 +1,12 @@
 import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
 import {ActionIcon, createStyles, DefaultProps, Grid, Selectors, TextInput} from '@mantine/core';
 import {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';
-import {TableComponentsOrder} from './Table.styles';
 
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
 const useStyles = createStyles((theme) => ({
+    root: {},
     wrapper: {
         marginBottom: '0 !important',
     },
@@ -31,7 +32,7 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
     unstyled,
     ...others
 }) => {
-    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
+    const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});
     const {state, setState} = useTable();
 
     const changeFilterValue = (value: string) => {
@@ -54,7 +55,7 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
     };
 
     return (
-        <Grid.Col span="content" order={TableComponentsOrder.Filter} py="sm">
+        <Grid.Col span="content" order={TableComponentsOrder.Filter} py="sm" className={classes.root}>
             <TextInput
                 className={classes.wrapper}
                 placeholder={placeholder}

package/src/components/table/TableHeader.tsx

@@ -5,6 +5,7 @@ import {FunctionComponent, ReactNode} from 'react';
 import {Button} from '../button';
 import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
+import {TableLayoutControl} from './TableLayoutControl';
 
 const useStyles = createStyles((theme) => ({
     root: {
@@ -66,6 +67,7 @@ export const TableHeader: FunctionComponent<TableHeaderProps> = ({
                 </Grid.Col>
             ) : null}
             {children}
+            <TableLayoutControl />
         </Grid>
     );
 };

package/src/components/table/TableLayoutControl.tsx

@@ -0,0 +1,29 @@
+import {Box, Center, Grid, SegmentedControl, Space} from '@mantine/core';
+import {TableComponentsOrder} from './Table.styles';
+import {useTable} from './TableContext';
+
+export const TableLayoutControl = () => {
+    const {form, layouts} = useTable();
+    return layouts.length > 1 ? (
+        <Grid.Col order={TableComponentsOrder.LayoutControl} span="content">
+            <SegmentedControl
+                color="action"
+                data={layouts.map(({name, icon: Icon}) => ({
+                    value: name,
+                    label: (
+                        <Center>
+                            {Icon ? (
+                                <>
+                                    <Icon height={16} />
+                                    <Space w="xs" />
+                                </>
+                            ) : null}
+                            <Box>{name}</Box>
+                        </Center>
+                    ),
+                }))}
+                {...form.getInputProps('layout')}
+            />
+        </Grid.Col>
+    ) : null;
+};

package/src/components/table/TableLoading.tsx

@@ -0,0 +1,8 @@
+import {Skeleton, SkeletonProps} from '@mantine/core';
+import {FunctionComponent} from 'react';
+
+export const TableLoading: FunctionComponent<SkeletonProps> = (props) => (
+    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>
+        {props.children}
+    </Skeleton>
+);

package/src/components/table/TablePredicate.tsx

@@ -1,10 +1,18 @@
-import {Grid, Group, Select, SelectItem, Text} from '@mantine/core';
+import {createStyles, DefaultProps, Grid, Group, Select, SelectItem, Selectors, Text} from '@mantine/core';
 import {FunctionComponent} from 'react';
-import {TableComponentsOrder} from './Table.styles';
 
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
-interface TablePredicateProps {
+const useStyles = createStyles((theme) => ({
+    root: {},
+    wrapper: {},
+    label: {},
+}));
+
+type TablePredicateStylesNames = Selectors<typeof useStyles>;
+
+interface TablePredicateProps extends DefaultProps<TablePredicateStylesNames> {
     /**
      * Unique identifier for this predicate. Will be used to access the selected value in the table state
      */
@@ -21,7 +29,16 @@ interface TablePredicateProps {
     label?: string;
 }
 
-export const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data, label}) => {
+export const TablePredicate: FunctionComponent<TablePredicateProps> = ({
+    id,
+    data,
+    label,
+    classNames,
+    styles,
+    unstyled,
+    ...others
+}) => {
+    const {classes} = useStyles(null, {name: 'TablePredicate', classNames, styles, unstyled});
     const {onChange, form} = useTable();
 
     const onUpdate = (newValue: string) => {
@@ -30,9 +47,9 @@ export const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data
     };
 
     return (
-        <Grid.Col span="content" order={TableComponentsOrder.Predicate} py="sm">
-            <Group spacing="xs">
-                {label ? <Text>{label}:</Text> : null}
+        <Grid.Col span="content" order={TableComponentsOrder.Predicate} py="sm" className={classes.root} {...others}>
+            <Group spacing="xs" className={classes.wrapper}>
+                {label ? <Text className={classes.label}>{label}:</Text> : null}
                 <Select
                     withinPortal
                     value={form.values.predicates[id]}

package/src/components/table/Th.tsx

@@ -7,6 +7,7 @@ const useStyles = createStyles((theme) => ({
         fontWeight: '400 !important' as any,
         padding: '0 !important',
         verticalAlign: 'middle',
+        whiteSpace: 'nowrap',
     },
 
     control: {