@coveord/plasma-mantine 52.27.3 → 53.0.0

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

@@ -1,58 +1,82 @@
 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}
+        <Box
+            py="sm"
+            px="lg"
+            ref={ref}
+            {...ctx.getStyles('headerRoot', {className, style, ...stylesApiProps})}
             {...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>
+            <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>
     );
-};
+});

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

@@ -1,9 +1,19 @@
 import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';
-import {Group, UnstyledButton, useComponentDefaultProps} from '@mantine/core';
-import {defaultColumnSizing, flexRender} from '@tanstack/react-table';
-import {AriaAttributes} from 'react';
-import useStyles from './Th.styles';
-import {SortState, ThProps} from './Th.types';
+import {BoxProps, Factory, Group, UnstyledButton, useProps} from '@mantine/core';
+import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';
+import {AriaAttributes, ComponentType, ForwardedRef, SVGProps} from 'react';
+import {CustomComponentThemeExtend, identity} from '../../../utils';
+import {useTableStyles} from '../TableContext';
+
+export type TableThStylesNames = 'th';
+
+export type SortState = 'asc' | 'desc' | 'none';
+
+export interface ThProps<T = unknown> extends BoxProps, CompoundStylesApiProps<TableThFactory> {
+    header: Header<T, unknown>;
+    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;
+}
 
 const SortingIcons: ThProps['sortingIcons'] = {
     asc: ArrowUpSize16Px,
@@ -17,13 +27,21 @@ const SortingLabels: Record<SortState, AriaAttributes['aria-sort']> = {
     none: 'none',
 } as const;
 
+export type TableThFactory = Factory<{
+    props: ThProps;
+    ref: HTMLTableCellElement;
+    stylesNames: TableThStylesNames;
+    compound: true;
+}>;
+
 const defaultProps: Partial<ThProps> = {
     sortingIcons: SortingIcons,
 };
 
-export const Th = <T,>(props: ThProps<T>) => {
-    const {header, classNames, styles, unstyled, sortingIcons, ...others} = useComponentDefaultProps(
-        'PlasmaTableColumnHeader',
+export const Th = <T,>(props: ThProps<T> & {ref?: ForwardedRef<HTMLTableCellElement>}) => {
+    const ctx = useTableStyles();
+    const {header, sortingIcons, classNames, className, styles, style, vars, ...others} = useProps(
+        'PlasmaTableTh',
         defaultProps as Partial<ThProps<T>>,
         props,
     );
@@ -35,14 +53,27 @@ export const Th = <T,>(props: ThProps<T>) => {
         maxSize: header.column.columnDef.maxSize,
     };
 
-    const {classes, cx} = useStyles(columnSizing, {name: 'PlasmaTableColumnHeader', classNames, styles, unstyled});
+    const thStyles = ctx.getStyles('th', {classNames, className, styles, style});
 
     if (header.isPlaceholder) {
         return null;
     }
 
     if (!header.column.getCanSort()) {
-        return <th className={classes.root}>{flexRender(header.column.columnDef.header, header.getContext())}</th>;
+        return (
+            <th
+                className={thStyles.className}
+                style={{
+                    ...thStyles.style,
+                    width: columnSizing.size ?? 'auto',
+                    minWidth: columnSizing.minSize,
+                    maxWidth: columnSizing.maxSize,
+                }}
+                {...others}
+            >
+                {flexRender(header.column.columnDef.header, header.getContext())}
+            </th>
+        );
     }
 
     const onSort = header.column.getToggleSortingHandler();
@@ -53,14 +84,16 @@ export const Th = <T,>(props: ThProps<T>) => {
         <UnstyledButton
             component="th"
             onClick={onSort}
-            className={cx(classes.root, classes.control)}
             aria-sort={SortingLabels[sortingOrder]}
+            data-control={true}
+            {...thStyles}
             {...others}
         >
-            <Group noWrap spacing="xs">
+            <Group wrap="nowrap" gap="xs">
                 {flexRender(header.column.columnDef.header, header.getContext())}
                 <Icon height={16} width={16} />
             </Group>
         </UnstyledButton>
     );
 };
+Th.extend = identity as CustomComponentThemeExtend<TableThFactory>;

package/src/components/table/table-last-updated/TableLastUpdated.tsx

@@ -1,20 +1,39 @@
-import {Group, Text} from '@mantine/core';
+import {BoxProps, factory, Factory, Group, Text, useProps} from '@mantine/core';
+import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
 import {useDidUpdate} from '@mantine/hooks';
 import dayjs from 'dayjs';
-import {FunctionComponent, useState} from 'react';
-import {useTable} from '../TableContext';
-import useStyles from './TableLastUpdated.styles';
-import {TableLastUpdatedProps} from './TableLastUpdated.types';
+import {useState} from 'react';
+import {useTable, useTableStyles} from '../TableContext';
 
-export const TableLastUpdated: FunctionComponent<TableLastUpdatedProps & {dependencies?: never}> = ({
-    label = 'Last update:',
-    dependencies,
-    classNames,
-    styles,
-    unstyled,
-    ...others
-}) => {
-    const {classes} = useStyles(null, {name: 'TableLastUpdated', classNames, styles, unstyled});
+export type TableLastUpdatedStylesNames = 'lastUpdatedRoot' | 'lastUpdatedLabel';
+
+export interface TableLastUpdatedProps extends BoxProps, CompoundStylesApiProps<TableLastUpdatedFactory> {
+    /**
+     * Label to contextualize the date
+     *
+     * @default "Last update:"
+     */
+    label?: string;
+    dependencies?: never;
+}
+export type TableLastUpdatedFactory = Factory<{
+    props: TableLastUpdatedProps;
+    ref: HTMLDivElement;
+    stylesNames: TableLastUpdatedStylesNames;
+    compound: true;
+}>;
+
+const defaultProps: Partial<TableLastUpdatedProps> = {
+    label: 'Last update:',
+};
+
+export const TableLastUpdated = factory<TableLastUpdatedFactory>((props, ref) => {
+    const ctx = useTableStyles();
+    const {label, dependencies, classNames, className, styles, style, vars, ...others} = useProps(
+        'PlasmaTableLastUpdated',
+        defaultProps,
+        props,
+    );
     const {state} = useTable();
     const [time, setTime] = useState(new Date());
 
@@ -22,12 +41,20 @@ export const TableLastUpdated: FunctionComponent<TableLastUpdatedProps & {depend
         setTime(new Date());
     }, [state, ...dependencies]);
 
+    const stylesApiProps = {classNames, styles};
+
     return (
-        <Group className={classes.root} px="xl" position="right">
-            <Text size="xs" className={classes.label} {...others}>
+        <Group
+            px="xl"
+            justify="right"
+            ref={ref}
+            {...ctx.getStyles('lastUpdatedRoot', {className, style, ...stylesApiProps})}
+            {...others}
+        >
+            <Text size="xs" {...ctx.getStyles('lastUpdatedLabel', {className, style, ...stylesApiProps})}>
                 {label}
                 <span role="timer">{dayjs(time).format('h:mm:ss A')}</span>
             </Text>
         </Group>
     );
-};
+});

package/src/components/table/table-loading/TableLoading.tsx

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

package/src/components/table/table-pagination/TablePagination.tsx

@@ -1,4 +1,5 @@
 import {Pagination} from '@mantine/core';
+import {useDidUpdate} from '@mantine/hooks';
 import {FunctionComponent} from 'react';
 
 import {useTable} from '../TableContext';
@@ -6,6 +7,7 @@ import {TablePaginationProps} from './TablePagination.types';
 
 export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages, onPageChange}) => {
     const {state, setState, containerRef, getPageCount} = useTable();
+
     const updatePage = (newPage: number) => {
         onPageChange?.(newPage - 1);
         setState((prevState) => ({
@@ -17,6 +19,12 @@ export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalP
 
     const total = totalPages === null ? getPageCount() : totalPages;
 
+    useDidUpdate(() => {
+        if (state.pagination.pageIndex + 1 > total && total > 0) {
+            updatePage(total);
+        }
+    }, [state.pagination.pageIndex, total]);
+
     return (
         <Pagination
             value={state.pagination.pageIndex + 1}
@@ -24,7 +32,7 @@ export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalP
             total={total}
             boundaries={0}
             size="md"
-            spacing="xs"
+            gap="xs"
             getControlProps={(control) => {
                 switch (control) {
                     case 'previous':

package/src/components/table/table-per-page/TablePerPage.tsx

@@ -20,7 +20,7 @@ export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE:
     };
 
     return getPageCount() > 0 ? (
-        <Group spacing="sm">
+        <Group gap="sm">
             <Text fw={500}>{label}</Text>
             <SegmentedControl
                 value={state.pagination.pageSize.toString() ?? values?.[1].toString()}

package/src/components/table/table-predicate/TablePredicate.tsx

@@ -1,21 +1,45 @@
-import {Grid, Group, Select, Text} from '@mantine/core';
+import {BoxProps, ComboboxData, factory, Factory, Grid, Group, Select, Text, useProps} from '@mantine/core';
+import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
 import {FunctionComponent} from 'react';
 
-import {TableComponentsOrder} from '../Table.styles';
-import {useTable} from '../TableContext';
-import useStyles from './TablePredicate.styles';
-import {TablePredicateProps} from './TablePredicate.types';
-
-export const TablePredicate: FunctionComponent<TablePredicateProps> = ({
-    id,
-    data,
-    label,
-    classNames,
-    styles,
-    unstyled,
-    ...others
-}) => {
-    const {classes} = useStyles(null, {name: 'TablePredicate', classNames, styles, unstyled});
+import {TableComponentsOrder} from '../Table';
+import {useTable, useTableStyles} from '../TableContext';
+
+export type TablePredicateStylesNames = 'predicate' | 'predicateWrapper' | 'predicateLabel' | 'predicateSelect';
+
+export interface TablePredicateProps extends BoxProps, CompoundStylesApiProps<TablePredicateFactory> {
+    /**
+     * Unique identifier for this predicate. Will be used to access the selected value in the table state
+     */
+    id: string;
+    /**
+     * The values to display in the predicate
+     */
+    data: ComboboxData;
+    /**
+     * Input label (not displayed for now)
+     *
+     * @default default to the predicate id
+     */
+    label?: string;
+}
+
+export type TablePredicateFactory = Factory<{
+    props: TablePredicateProps;
+    ref: HTMLDivElement;
+    stylesNames: TablePredicateStylesNames;
+    compound: true;
+}>;
+
+const defaultProps: Partial<TablePredicateProps> = {};
+
+export const TablePredicate: FunctionComponent<TablePredicateProps> = factory<TablePredicateFactory>((props, ref) => {
+    const ctx = useTableStyles();
+    const {id, data, label, classNames, className, styles, style, vars, ...others} = useProps(
+        'PlasmaTablePredicate',
+        defaultProps,
+        props,
+    );
     const {form, setState} = useTable();
 
     const handleChange = (newValue: string) => {
@@ -28,20 +52,28 @@ export const TablePredicate: FunctionComponent<TablePredicateProps> = ({
         }));
     };
 
+    const stylesApiProps = {classNames, styles};
+
     return (
-        <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}
+        <Grid.Col
+            span="content"
+            order={TableComponentsOrder.Predicate}
+            ref={ref}
+            {...ctx.getStyles('predicate', {className, style, ...stylesApiProps})}
+            {...others}
+        >
+            <Group gap="xs" {...ctx.getStyles('predicateWrapper', stylesApiProps)}>
+                {label ? <Text {...ctx.getStyles('predicateLabel', stylesApiProps)}>{label}:</Text> : null}
                 <Select
-                    withinPortal
+                    comboboxProps={{withinPortal: true}}
                     value={form.values.predicates[id]}
                     onChange={handleChange}
                     data={data}
                     aria-label={label ?? id}
                     searchable={data.length > 7}
-                    className={classes.select}
+                    {...ctx.getStyles('predicateSelect', stylesApiProps)}
                 />
             </Group>
         </Grid.Col>
     );
-};
+});

package/src/hooks/useClickWithLoading.ts

@@ -0,0 +1,21 @@
+import {MouseEvent, MouseEventHandler, useState} from 'react';
+
+export const useClickWithLoading = (handler?: MouseEventHandler<HTMLButtonElement>) => {
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {
+        const possiblePromise: unknown = handler?.(event);
+        try {
+            if (possiblePromise instanceof Promise) {
+                setIsLoading(true);
+                await possiblePromise;
+                setIsLoading(false);
+            }
+        } catch (err) {
+            setIsLoading(false);
+            console.error(err);
+        }
+    };
+
+    return {isLoading, handleClick};
+};

package/src/index.ts

@@ -1,42 +1,43 @@
-import {Tuple} from '@mantine/core';
+import {MantineColorsTuple} from '@mantine/core';
 
+import {noop} from '@mantine/core';
 import {PlasmaColors} from './theme/PlasmaColors';
 
-export * from '@mantine/notifications';
 export * from '@mantine/carousel';
 export * from '@mantine/core';
-export type {FormValidateInput} from '@mantine/form/lib/types';
+export {Pagination} from '@mantine/core';
+export * from '@mantine/form';
 export * from '@mantine/hooks';
+export * from '@mantine/notifications';
+export {type NotificationsProps} from '@mantine/notifications';
 export * from '@tanstack/table-core';
 export * from './components';
-export * from '@mantine/form';
-export {type NotificationProps} from '@mantine/notifications';
-export {Pagination} from '@mantine/core';
+export {noop};
+
 // explicitly overriding mantine components
 export {
+    ActionIcon,
     BrowserPreview,
+    Button,
+    CopyToClipboard,
     Header,
-    type HeaderProps,
+    Menu,
     Table,
-    type TableProps,
-    type TableState,
-    type InitialTableState,
-    ActionIcon,
     type ActionIconProps,
-    Button,
     type ButtonProps,
-    Menu,
-    type MenuItemProps,
-    CopyToClipboard,
     type CopyToClipboardProps,
+    type HeaderProps,
+    type InitialTableState,
+    type MenuItemProps,
+    type TableProps,
+    type TableState,
 } from './components';
-export {useForm, createFormContext} from './form';
 
 export * from './theme';
 
 declare module '@mantine/core' {
     export interface MantineThemeColorsOverride {
         // eslint-disable-next-line @typescript-eslint/ban-types
-        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;
+        colors: Record<keyof typeof PlasmaColors | (string & {}), MantineColorsTuple>;
     }
 }

package/src/styles/ActionIcon.module.css

@@ -0,0 +1,6 @@
+.root {
+    &[data-disabled] {
+        color: var(--mantine-color-gray-4);
+        background-color: var(--mantine-color-gray-1);
+    }
+}

package/src/styles/Alert.module.css

@@ -0,0 +1,3 @@
+.title {
+    font-weight: var(--font-weight-medium);
+}

package/src/styles/Anchor.module.css

@@ -0,0 +1,6 @@
+.root {
+    @mixin hover {
+        text-decoration: underline;
+        color: var(--mantine-color-action-8);
+    }
+}

package/src/styles/AppShellNavBar.module.css

@@ -0,0 +1,3 @@
+.navbar {
+    border-color: var(--mantine-color-gray-3);
+}

package/src/styles/Badge.module.css

@@ -0,0 +1,5 @@
+.root {
+    text-transform: none;
+    padding: 4px 8px;
+    font-weight: 500;
+}

package/src/styles/Button.module.css

@@ -0,0 +1,3 @@
+.label {
+    font-weight: 400;
+}

package/src/styles/Checkbox.module.css

@@ -0,0 +1,14 @@
+.label {
+    font-size: var(--mantine-font-size-sm);
+    font-weight: 300;
+}
+
+.input {
+    &[data-indeterminate] {
+        background-color: var(--mantine-color-pureWhite);
+        border-color: var(--mantine-color-gray-4);
+        & + svg {
+            color: var(--mantine-color-gray-6);
+        }
+    }
+}

package/src/styles/Combobox.module.css

@@ -0,0 +1,10 @@
+.search {
+    margin: 0 0 var(--mantine-spacing-xs);
+    border-radius: var(--mantine-radius-md);
+    border: 1px solid;
+    width: 100%;
+    border-color: var(--mantine-color-gray-4);
+    &:focus {
+        border-color: var(--mantine-primary-color-filled);
+    }
+}

package/src/styles/DatePicker.module.css

@@ -0,0 +1,3 @@
+.monthCell {
+    text-align: center;
+}

package/src/styles/Input.module.css

@@ -0,0 +1,3 @@
+.input {
+    color: var(--mantine-color-gray-7);
+}

package/src/styles/InputWrapper.module.css

@@ -0,0 +1,16 @@
+.label {
+    margin-bottom: var(--mantine-spacing-xs);
+}
+
+.description {
+    font-size: var(--mantine-font-size-sm);
+    color: var(--mantine-color-gray-7);
+    margin-bottom: var(--mantine-spacing-xs);
+    line-height: var(--mantine-line-height);
+    font-weight: 300;
+}
+
+.error {
+    line-height: var(--mantine-line-height);
+    font-weight: 300;
+}

package/src/styles/List.module.css

@@ -0,0 +1,3 @@
+.root {
+    list-style-type: disc;
+}