@coveord/plasma-mantine 52.27.4 → 53.0.0

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

@@ -32,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;
+}

package/src/styles/Modal.module.css

@@ -0,0 +1,59 @@
+.root {
+    &[data-full-screen] {
+        .content {
+            flex: 0 0 100%;
+        }
+    }
+    &[data-size='xs'] {
+        .content {
+            flex: 0 0 rem(432px);
+        }
+    }
+    &[data-size='sm'] {
+        .content {
+            flex: 0 0 rem(664px);
+        }
+    }
+    &[data-size='md'] {
+        .content {
+            flex: 0 0 rem(896px);
+        }
+    }
+    &[data-size='lg'] {
+        .content {
+            flex: 0 0 rem(1120px);
+        }
+    }
+    &[data-size='xl'] {
+        .content {
+            flex: 0 0 rem(88%);
+        }
+    }
+    &:not([data-size]) {
+        .content {
+            flex: 0 0 rem(896px);
+        }
+    }
+}
+
+.content {
+    overflow: auto;
+}
+
+.header {
+    border-bottom: 1px solid var(--mantine-color-gray-3);
+    align-items: flex-start;
+}
+
+.title {
+    width: 100%;
+    font-size: var(--mantine-h3-font-size);
+    line-height: var(--mantine-h3-line-height);
+    font-weight: 500;
+}
+
+.body {
+    &:where(:not(:only-child)) {
+        padding-top: var(--mb-padding, var(--mantine-spacing-md));
+    }
+}

package/src/styles/NavLink.module.css

@@ -0,0 +1,27 @@
+.root {
+    color: var(--mantine-color-gray-6);
+    line-height: var(--mantine-line-height);
+    border-radius: var(--mantine-radius-default) 0px 0px var(--mantine-radius-default);
+
+    &[data-active] {
+        color: var(--mantine-primary-color-6);
+    }
+
+    @mixin hover {
+        @mixin light {
+            &:where(:not([data-active])) {
+                background-color: var(--mantine-color-gray-1);
+            }
+        }
+    }
+}
+
+.label {
+    font-weight: 500;
+}
+
+.children {
+    & .label {
+        font-weight: 300;
+    }
+}

package/src/styles/Notification.module.css

@@ -0,0 +1,19 @@
+.root {
+    border-color: var(--mantine-color-gray-3);
+    background-color: var(--mantine-color-gray-0);
+    box-shadow: var(--mantine-shadow-lg);
+    padding: var(--mantine-spacing-sm);
+    &[data-with-icon] {
+        padding-left: var(--mantine-spacing-sm);
+    }
+}
+
+.icon {
+    background-color: transparent;
+    margin-right: var(--mantine-spacing-sm);
+}
+
+.closeButton {
+    margin: var(--mantine-spacing-xs);
+    color: var(--mantine-color-gray-5);
+}

package/src/styles/Radio.module.css

@@ -0,0 +1,4 @@
+.labelWrapper {
+    display: flex;
+    align-items: flex-start;
+}

package/src/styles/ScrollArea.module.css

@@ -0,0 +1,8 @@
+.viewport {
+    /* https://github.com/radix-ui/primitives/issues/926 */
+    &[data-radix-scroll-area-viewport] {
+        & > :first-of-type {
+            display: block !important;
+        }
+    }
+}

package/src/styles/SegmentedControl.module.css

@@ -0,0 +1,3 @@
+.root {
+    background-color: var(--mantine-color-gray-2);
+}

package/src/styles/Select.module.css

@@ -0,0 +1,32 @@
+.input {
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+    }
+    @mixin dark {
+        color: var(--mantine-color-dark-0);
+    }
+}
+
+.option {
+    padding: 12px 16px;
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+        @mixin hover {
+            background-color: var(--mantine-color-gray-1);
+        }
+    }
+    @mixin dark {
+        color: var(--mantine-color-dark-0);
+        @mixin hover {
+            background-color: var(--mantine-color-dark-4);
+        }
+    }
+    &[aria-selected='true'] {
+        background-color: var(--mantine-color-action-1);
+        color: var(--mantine-color-action-6);
+        @mixin hover {
+            color: var(--mantine-color-action-6);
+            background-color: rgb(237, 246, 255, 0.65);
+        }
+    }
+}

package/src/styles/Skeleton.module.css

@@ -0,0 +1,10 @@
+.root {
+    &[data-visible] {
+        &::before {
+            z-index: unset;
+        }
+        &::after {
+            z-index: unset;
+        }
+    }
+}